/*
	Style sheet for INDEX PAGE of Nashville Interpreted Theater
	USE EM's amd %'S to make page more elastic
	
	/*			border: 6px double red;					 if needed somewhere
	
	
   **************************************************************************   */ 

body { background-color: #600000;			/*	set main body bg color to dark red	*/
		font-size: 100%; 	/* Win IE text resize correction */
			
}
/*
	styling for  MIDDLE BACKGROUND CONTAINER--div is bigbox 
	
*/
div#bigbox { background-color: #ffffaa;			/*	set bigbox container bg color to______	*/
				width: 90%;
				padding-bottom: 1em;
				margin-left: auto;				/*	center middle background section	*/
			 	margin-right: auto;				/*	center middle background section	*/
		
}
/*
			Heading 1 CONTAINER formatting
				later create gradient, add symbol, better text
*/
#headerIntThe {
	width: auto;						/*	keep width uniform with other elements		*/	
	color: #600000;						/*	color of text	*/
	background-color: #dfdfc9;	
	padding-right: 5%;
	padding-top: 1em;
	padding-bottom: 1em;
	background-image:url('images_constant/Copy_slislogo.gif');		/* set background image		*/
	background-position: 1.5em center; 			/* position background image-vertical center and 1.5em in*/
				background-repeat: no-repeat;
	}
/*
		format HEADING 1 text--Nashville Interpreted Theater	
*/
#headerIntThe h1 {
	text-align: right;
		font-family: Comic Sans, Comic Sans MS, cursive;
		font-size: 2em;
			}
	
/*															*/
/*				MENU formatting----NOTICE how ulMenu elements are addressed--this was only way that
 * 						worked properly.  Other address variations caused settings to be ignored
 * 
	*/
#ulMenu { list-style-type: none;			/*	remove list bullets			*/			
			margin: 0;					/*	remove default left-indentation common to lists-- for all browsers	*/
			margin-top: 2em; 				
			padding: 0;					/*	remove default left-indentation common to lists-- for all browsers	*/
			text-align: center;				/*	center horizontal list----WORKED	*/	
			clear: both;					/*	clear floated heading	*/			
}
#ulMenu li { display: inline;	}		/*	force list to one horizontal line			*/			
			

#ulMenu li a { text-decoration: none;			/*	remove default link underline			*/	
				color: white;					/*  decorate buttons with border, color, font etc		*/
			border: .5em blue outset;			/*  decorate buttons with border, color, font etc		*/
			background-color: #483d8e;				/* ditto		*/
			width: auto;							/* ditto   let buttton size adjust to text length	*/
			padding-left: 1em;						/* ditto		*/
			padding-right: 1em;					/* ditto		*/
			padding-top: .1em;						/* ditto		*/
			padding-bottom: .1em;					/* ditto		*/
			font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;  
			font-weight: bold;						/* ditto		*/
			text-align: center;						/* ditto		*/					
			
}
/*
	Welcome sign formatting--now has CSS image swap
*/
div.welcomeSign {										/* css to cause image swap effect		*/
						height: 54px;
						width: 571px;					/* using 571px width necessary for centering effect
															for some reason		*/	
						margin:0;
						padding:0;
						background-image: url("images_constant/Welcome.jpg");	/* text welcome sign*/
				margin-top: 2em;
				margin-bottom: 2em;
				margin-left: auto;
				margin-right: auto;
					
} 

div.welcomeSign 		 a, div.welcomeSign a:link, div.welcomeSign a:visited {		/* make specific to this sign*/
								display:block;
}

div.welcomeSign		 img {
					width: 100%;
					height: 100%;
					border: 0;
}

div.welcomeSign 			a:hover img {					/* makes top image hidden so background jpg shows*/
							visibility: hidden;
}

/*
	 general Paragraph formatting
*/
p {font-family: Arial, Verdana, Helvetica, sans-serif;
		 color: #a24f78;
}
/*
	Intro Paragraph formatting----justify text, width 80%, and center
*/
p#intro {width: 80%; text-align: justify;
			margin-left: auto;
			margin-right: auto;
			color: #600000;
			font-size: 1.2em;
			margin-bottom: 2em;
/*			background-color: #aaaacc;					*/	
}

/*			THEATER SECTIONS--
 * 
 * 		THEATER box formatting--to creater center column layout
					with Rounded corners--
				Using circle with transparent bg lets box corners show thru so--
				  set circle bg to same color as bg of main big box.
				  then set circle color to same as box with rounded corners (or make transparent??)
				  (can use Adobe Photodeluxe to change colors of png image
				  (create png image (24 bit color) with combo of MS Picture It and MS Photo Editor)
				 ----png image allows more colors than gif image
 */					
				.box { position: relative; width: 90%; margin: auto;
						 height: 11.5em;			
						 margin-bottom: 1em; }		/*	1em space between boxes		 */	
				.theater { background: #ccccaa; }
				.THTRinner {padding-top: 1em;						}									 
				.THTRinner img { margin-left: 2%; 
								float: left;
					/*			width: 200px;		left image size itself control width	*/
							 }
			.THTRinner p {float: right;	 text-align: justify; font-size: 1em;
				margin-right: 2%; width: 63%; color: #070b3c;		}														
			/* corners */
			.corner { position: absolute; width: 10px; height: 10px;
				 background: url('brown_yellow.png') no-repeat; font-size: 0%; }		/*	 png circle - corners */ 
			.TL { top: 0; left: 0; background-position: 0 0; }
			.TR { top: 0; right: 0; background-position: -10px 0; }
			.BL { bottom: 0; left: 0; background-position: 0 -10px; }
			.BR { bottom: 0; right: 0; background-position: -10px -10px; }