@charset "utf-8";
/* CSS Document 
   Magna Sign International
   Website Stylesheet
   Designed by Douglas Greene
   www.nineafterten.com
   Created June 18, 2008
   
   Site layout specifics
   ----------------------------
   Dimensions: 882px by 600px(rounded)
   Schema: Tableless design, centered background image, floating layered content.
*/


/* General changes for the entire page layout. */
body { background-color: #133251; background-image: url(images/background.gif); margin:0px; font-family: Arial, Helvetica, sans-serif; font-size: 13px; }

/* The container for the flash file introduction page. */
#intro { border: 1px solid #CCCCCC; margin:auto; margin-top:20px; width:883px;}

/* Sets the repeating background for cases when the page scrolls down, also is the container for page content */
#stage { border: 1px solid #CCCCCC; border-bottom: 0px; background-image:url(images/background_repeating.png); margin:auto; margin-top:20px; background-repeat:repeat-y; width:882px;}

/* Loads the banner, logo, and naviagation bar - all are one images that is preloaded in the intro page */
#template { background-image:url(images/background.png); background-repeat: no-repeat; padding-top:168px; }

/* IMPORTANT - the height will need to be change based on the amount of content on the page. Content is floated over the background images, so it does not resize with the flow of the page. */
#template { height:400px; }

	/* The list of menu options in the naviagation on the left */
	#navigation { list-style-type: square; margin:0; width:200px; float:left; color:#FFFFFF; list-style-image: url(images/li_white.png); list-style-position: outside;   }
	
	/* Positions the square bullets to line up within the grid */	
	#navigation li {margin-left:4px; padding-bottom: 14px;}
	
		/* Makes the links on the grid change colors when moused over */
		#navigation li a:link,
		#navigation li a:active,
		#navigation li a:visited { color:#FFFFFF; text-decoration:none;}
		#navigation li a:hover { color:#FFFF33; text-decoration:underline;}
		
		/* Changes the link bullet to the yellow square on mouse over*/
		#navigation li:hover { list-style-image: url(images/li_yellow.png); list-style-position: outside;}
		
	/* Area to the right of the naviagtion, where the copy and images change per page. */
	#content { float:left; width:620px; clear:right;}
	
		#homepage_flash { width:300px; height:300px; float:right; margin-left:10px;}
	
/* The address information bar at the bottom of the page. IMPORTANT - "#footer" is the only div located outside of the "#stage" & "#template" divs so that it will always follow the bottom of the layout. */
#footer { background-image:url(images/footer.png); text-align:center; font-size:11px; width:882px; border: 1px solid #CCCCCC; border-top:0px; padding:10px 0; margin:auto; margin-bottom:10px; color:#FFFFFF;}
	
	/* Coloring the links in the footer bar. */
	#footer a:link,
	#footer a:active,
	#footer a:visited {color:#FFFFFF; text-decoration:none; }
	#footer a:hover { color: #FFFF33; text-decoration:underline; }