/*********************/
/*   messagebox.css  */
/*      created:     */
/*    july 3, 2026   */
/*       15:22       */
/*      updated:     */
/*    xxx xx, 2026   */
/*       00:00       */
/*********************/

@charset "utf-8";

/* THIS FILE IS MADE FOR THE EXTRA FLUFFY MESSAGE BOX STUFF. */
/* BASIC STYLING AND ELEMENTS OF #message-box ARE IN templates.css */
/* SHALL NOT BE CALLED IN THE HTML UNLESS IN USE. */

/* movie theater curtains for monkeyboy premiere picture */
#movie-curtains-thin {
	/* width:269px;     /* for the throne picture */
	width:248px;        /* for the goth picture set */ 
	margin:0 auto 0.24rem;
	padding-top:72px; /* pushes the featured monkeyboy image into place */
	background:url("images/layout/misc/movie-theater-curtains-thin.png") no-repeat;
	background-size:contain;
}
#movie-curtains-thin > img {
	display:block;
	margin:0 auto;
}
#movie-curtains-thin > img:first-of-type {
	margin-bottom:0.24rem;
	border:3px groove #666; /* have to give the border to the monkeyboy image inside the curtains */
}
/* end movie theater curtains */

/* figcaptions under #message-box-content images */
#message-box-content figcaption {
	display:inline-block;
	margin-top:0.3rem;
	padding:0.15rem 0.5rem;
	border:0.1rem dotted #000;
	background:#a8ea95;
	font-size:1.25em;
}
/* end figcaptions for #message-box-content images */

/* "now fixing your country..." */
img#fixing-your-country { border:none; }
/* end "now fixing your country..." */

/* mini-header within #message-box */
#message-box-content h4 {
	width:30%;
	max-width:340px;
	min-width:200px;
	margin:1rem auto 0.6rem;
	padding:0.35rem 0.2rem 0.41rem;
	background:#c53636;
	border:4px groove #CCC;
	font-size:1.14em;
	color:#fff;
	text-shadow:1px 1px 2px #000;
}
/* end mini-header */

/* unordered list */
#message-box ul {
	font-size:1.1125em;
	margin-left:20%;
}
/* end unordered list */

/* storytime fable letter styles */
p#message-box-paragraph1::first-letter, p#message-box-paragraph2::first-letter {
	font-size:3em;
	font-family:"Trebuchet MS", "Arial", "Helvetica", sans-serif;
	margin-top:-9px;
	position:relative;
}
div.storytimeletter {
	position:absolute;
	float:left;
	width:50px;
	height:72px;
	margin:15px 0 0 8px;
	content:"";
}
div.letterA {
	background:url("images/layout/templates/boxheaderA.gif");
}
img#dragon { float:right; margin-right:5%; }
div.letterB {
	background:url("images/layout/templates/boxheaderB.gif");	
}
/* end storytime fable letter labels */

/* countdown number */
span#countdown-number { color:red; font-size:2em; }
/* end countdown number */

/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */
/* */

/***** MEDIA QUERIES *****/
@media screen and (max-width:1134px) {
}

@media screen and (max-width:1110px) {
}

@media screen and (max-width:1080px) {
}

@media screen and (max-width:1060px) {
}

@media screen and (max-width:1040px) {
}

@media screen and (max-width:1020px) {	
}

@media screen and (max-width:992px) {
}

@media screen and (max-width:980px) {
}

@media screen and (max-width:960px) {
}

@media screen and (max-width:950px) {
}

@media screen and (max-width:928px) {
}

@media screen and (max-width:896px) {
	/* message box farewell images */
	img#birthday { background-size:cover; }
	/* end message box farewell images */
}

@media screen and (max-width:864px) {
}

@media screen and (max-width:848px) {
}

@media screen and (max-width:808px) {
}

@media screen and (max-width:800px) {
}

@media screen and (max-width:788px) {
	#message-box-content h4 { font-size:1.07em; }
}

@media screen and (max-width:776px) {
}

@media screen and (max-width:768px) {
	/* message box stuff */
	#message-box ul { margin-left:12%; } /* unordered list that can be used inside of #message-box */
	/* end message box stuff */
}

@media screen and (max-width:744px) {
}

@media screen and (max-width:720px) {
	/* message box stuff */
	#message-box ul { margin-left:10%; } /* unordered list that can be used inside of #message-box */
	/* end message box stuff */
}

@media screen and (max-width:704px) {
}

@media screen and (max-width:694px) {
}

@media screen and (max-width:672px) {
}

@media screen and (max-width:640px) {
	/* message box stuff */
	#message-box ul { margin-left:8%; } /* unordered list that can be used inside of #message-box */
	/* end message box stuff */
}

@media screen and (max-width:616px) {
}

@media screen and (max-width:608px) {
}
 
@media screen and (max-width:592px) {
}

@media screen and (max-width:570px) {
	/* message box stuff */
	/* movie curtain images */
	#movie-curtains-thin {
		width:65%;
		max-width:306px;
		min-width:210px;
		padding-top:17%;
	}
	#movie-curtains-thin > img:first-of-type {
		width:65%;
		height:auto;
	}
	#movie-curtains-thin > img:last-of-type {
		width:50%;   /* making the monkeyboy logo flexible */
		min-width:110px;
		height:auto;
	}
	/* end movie curtain images */
	/* end message box stuff */
}

@media screen and (max-width:550px) {
}

@media screen and (max-width:544px) {
	/* all templates link */
	#alltemplates a { font-size:1.7em; }
	#alltemplates::before, .alltemplates::after { transform:scale(0.6) translateY(12px); }
	/* end all templates link */
}

@media screen and (max-width:534px) {
}

@media screen and (max-width:520px) {
}

@media screen and (max-width:512px) {
	/* message box stuff */
	#message-box ul { margin-left:0; } /* unordered list that can be used inside of #message-box */
	/* end message box stuff */
}

@media screen and (max-width:496px) {
}

@media screen and (max-width:480px) {
}

@media screen and (max-width:472px) {
}

@media screen and (max-width:454px) {
	/* movie curtain image stuff */
	#movie-curtains-thin { padding-top:58px; }
	/* end movie curtain image stuff */
}

@media screen and (max-width:430px) {	
}

@media screen and (max-width:410px) {
}

@media screen and (max-width:390px) {
}

@media screen and (max-width:370px) {
}

@media screen and (max-width:348px) {
}
/* END OF DOCUMENT */