/*dosbanner.cssSunshine Lewis (stlewis@dos.state.fl.us)2/18/08This file is commented to help make it more understandable but you should only change things when you see a comment that specfically says "CUSTOMIZE"There are 8 customizable elements in this stylesheet	1 page background color	2 text color	3 banner background color	4 banner content width	5 link color	6 seperator color	7 hovered/active/focused link color	8 active (current) link color*//* ===============================================	page prep			the styles in this section may be incorporated into your primary stylesheet to avoid confusion */	body { 	font-size: 100%; 			/* reset font-size to defaut, no matter what */	font-size: 0.8em; 			/* set size relative to default */	margin: 0;					/* to make the dos banner snug to the top and sides of the screen */	padding: 0;	/* CUSTOMIZE: page background color ****** */		}/* ===============================================	utilities			styles in this section are not banner specific but they are required to make it work correctly. 	One is a hack that clears floats and the other handles image the replacement.	These could also be added to your primary stylesheet and/or used on other parts of your site, just be careful	If you have similar code defined in your primary stylesheet, you may need to adjust to avoid conflict *//* clearfix is method for clearing floats without extra markup - http://www.positioniseverything.net/easyclearing.html 	just add this class to anything that needs to enclose a float that would otherwise be sticking out the bottom*/.clearfix:after {    content: ".";     display: block;     height: 0;     clear: both;     visibility: hidden; }		 .clearfix {display: inline-block;}/* Hides from IE-mac \*/	* html .clearfix { height: 1%; }	.clearfix { display: block; }/* End hide from IE-mac *//* General image replacement statements. I don't remember which particular method this is but it's googleable */.replace { 	position: relative;	overflow: hidden;	margin: 0;	padding: 0;	font-size: 1.2em; 	/* Choose a font-size here that will keep  the headline small enough to fit completely under the span. */	}		.replace span {	display: block;	position: absolute;	top: 0; /*left: 0;*/	z-index: 1; 		/* for opera5 (?) and o6/mac */	}/* General IR statements for IE5.x mac only */* html>body	.replace { 	position: static;	overflow: visible;	font-size: 10px;    /* Since overflow: hidden doesn't  work with ie5.x/mac, we choose a  font-size here that will keep the headline small enough to fit completely under the span.*/  }* html>body	.replace span  { position: static; }* html>body	.replace a {	text-decoration: none; /* ie5.0-5.1.x/mac     must have this value or the underline shows through the image. */     }/* ===============================================	General banner style			This is where we start the look and feel of the banner itself */#dosbanner { 	/* apply a drop shadow to the bottom of the outer container */	background: transparent url('/media/1003/shadow.png') repeat-x bottom;	padding-bottom: 3px;	text-align:left;	}#dosbanner div {	margin: 0;	padding: 5px 8px;	/* CUSTOMIZE: non-link text color (not strictly necessary since there is no non-link text but it's good form to specify it anyway) ****** */		color: #000;	/* CUSTOMIZE: banner background color. make sure your gif matches ****** */		background-color: #000; 	}	#dosbanner div div {	padding: 0;	/* CUSTOMIZE:  Default is 100% of screen so if you want the content of the banner 	(not the banner itself) at a specific width	uncomment and define it here.	Keep in mind that this banner is optimized for 800 by 600 so if you get much smaller than 695px, 	there will be wrapping. If we ever need something that small we can develop it then.	width: 695px; */}#dosbanner ul li {	float: left; }/* ===============================================	DOS Logo	(left side)	Some positioning style and the non-generic part of the image replacement code. */ #dosLogo { float: left; } /* position it *//* The actual image replacement (IR) */#dosLogo, #dosLogo span {	width: 229px; 		/* width of the image */	height: 24px;		/* height of the image */	background: url('/media/1004/doslogobw.gif') top left no-repeat; 	}		* html>body #dosLogo span {			/* for ie5.x/mac only */		margin-bottom: -24px;	/* Required to bring text							   underneath image. Use the negative							   height of the image here.*/		}/* ===============================================	Division Info (right side)	This code covers everything on the right side of the banner in both templates */#dosbanner ul {	float: right;	font-family: tahoma, verdana, georgia, "Palatino Linotype", "Book Antiqua",Palatino, serif;	margin: 0; 	padding: 0;	list-style: none;	font-size: 0.85em;	margin-top: 1px;	}#dosbanner ul li { padding: 4px 0; }	#dosbanner ul a {	display: block;	text-decoration: none;	padding: 0 8px;	/* CUSTOMIZE: unvisited link color ****** */		color: #fff; 	/* CUSTOMIZE: separator color for the links ****** */		border-left: 1px solid #f2f2f2;	}#dosbanner ul a:visited { /* CUSTOMIZE: visited link color  ****** */		color: #f2f2f2; 	}#dosbanner ul a:hover, #dosbanner ul a:active, #dosbanner ul a:focus {	text-decoration: underline;	/* CUSTOMIZE: hovered/active/focused link color  ****** */			color: #e6f4ff;	}#dosbanner ul .active a {	font-weight: bold;	text-decoration: none;	/* CUSTOMIZE: active (current) link color [primary template only] ****** */				color: #e6f4ff;	}/* ===============================================	Division Info (secondary template only)	Some additional style to make the secondary template different   */		#dosbanner ul#dosDivision {	font-size: 1.2em; 	font-family:   verdana, tahoma, arial, sans-serif;	letter-spacing: .05em;	font-variant: small-caps;	margin-top: 2px;	}#dosbanner ul#dosDivision li { padding: 0;}#dosbanner #dosDivision a { border-width: 0; }/* Landscape phone to portrait tablet */@media (max-width: 767px) { 	#dosbanner ul {		float:none;		clear:left;	}		#dosbanner ul a	{		padding:0px;	}}/* Landscape phones and down */@media (max-width: 480px) { 	#dosbanner ul {		float:none;	}		#dosbanner ul a	{		padding:0px;	}}