/* hide the attribute-test element. test2.css will show it */
#attribute-test {display: none;}

/*styles for 221pixel and up @ 16px!*/
/* The max-width declaration below blocks this from ever working */
@media only screen and (min-width: 11em) and (max-width: 20.75em) 
{
	.megaheader{position:relative;top:0;margin:0 auto;padding:5px 0 0 0;overflow:hidden;text-align:center;}
	.megaheader img{display:block;margin:0 auto;}
	.primecontent{min-height:400px;margin:0 auto;width:100%;padding:0;overflow:hidden;z-index:9;}
	.static_banner{overflow:hidden;min-height:330px;margin:0 auto;position:relative;}
	.centerframe{margin:0 auto;overflow:hidden;position:relative;width:100%;padding:0px;}
	.centerframe h2{text-align:center;}
	.topmenupanel{display:none;}	
	.resizemenu{display:inline;float:left;}

	.clientdtpanel{float:none;overflow:hidden;width:100%;border-right:none;}
	.servicepanel{float:none;overflow:hidden;width:100%;}
	.serveopt{overflow:hidden;font-size:10pt;position:absolute;left:320px;top:5px;}
	.thetoolsbar{display:none;}
	.thefloat{width:100%;float:none;overflow:hidden;}
}



/*styles for 300 and up @ 16px!*/
/* The max-width declaration below blocks this from ever working */
@media only screen and (min-width: 20.75em) and (max-width: 30em) 
{
	.megaheader{position:relative;top:0;margin:0 auto;padding:5px 0 0 0;overflow:hidden;text-align:center;}
	.megaheader img{display:block;margin:0 auto;}
	.primecontent{min-height:400px;margin:0 auto;width:100%;padding:0;overflow:hidden;z-index:9;}
	.static_banner{overflow:hidden;min-height:330px;margin:0 auto;position:relative;}
	.centerframe{margin:0 auto;overflow:hidden;position:relative;width:100%;padding:0px;}
	.centerframe h2{text-align:center;}
	.topmenupanel{display:none;}	
	.resizemenu{display:inline;float:left;}

	.clientdtpanel{float:none;overflow:hidden;width:100%;border-right:none;}
	.servicepanel{float:none;overflow:hidden;width:100%;}
	.serveopt{overflow:hidden;font-size:10pt;position:absolute;left:320px;top:5px;}
	.thetoolsbar{display:none;}
	.thefloat{width:100%;float:none;overflow:hidden;}
	.systemcontentlist{margin:0;}
	.paymentpanel{overflow:hidden;float:none;width:98%;margin:0 auto;}
	.paymentpanel table tr td input{width:93%;}
	
}

@media only screen and (min-width: 30em) and (max-width: 50em) 
{
	.megaheader{position:relative;top:0;margin:0 auto;padding:5px 0 0 0;overflow:hidden;text-align:center;}
	.megaheader img{display:block;margin:0 auto;}
	.primecontent{min-height:400px;margin:0 auto;width:100%;padding:0;overflow:hidden;z-index:9;}
	.static_banner{overflow:hidden;min-height:330px;margin:0 auto;position:relative;}
	.centerframe{margin:0 auto;overflow:hidden;position:relative;width:100%;padding:0px;}
	.centerframe h2{text-align:center;}
	.topmenupanel{display:none;}	
	.resizemenu{display:inline;float:left;}

	.clientdtpanel{float:none;overflow:hidden;width:100%;border-right:none;}
	.servicepanel{float:none;overflow:hidden;width:100%;}
	.serveopt{overflow:hidden;font-size:10pt;position:absolute;left:320px;top:5px;}
	.thetoolsbar{display:none;}
	.thefloat{width:100%;float:none;overflow:hidden;}
	.systemcontentlist{margin:0;}
.paymentpanel{overflow:hidden;float:none;width:98%;margin:0 auto;}
	.paymentpanel table tr td input{width:100%;}	
}


/*styles for 800px and up @ 16px!*/
@media screen and (min-width: 50em)
{
	.megaheader{position:relative;top:0;margin:0 auto;padding:5px 0 0 0;overflow:hidden;text-align:center;}
	.megaheader img{display:block;margin:0 auto;}
	.primecontent{min-height:400px;margin:0 auto;width:100%;padding:0;overflow:hidden;z-index:9;}
	.static_banner{overflow:hidden;min-height:330px;margin:0 auto;position:relative;}
	.centerframe{margin:0 auto;overflow:hidden;position:relative;width:100%;padding:0px;}
	.centerframe h2{text-align:center;}
	.topmenupanel{display:none;}	
	.resizemenu{display:inline;float:left;}

	.clientdtpanel{float:none;overflow:hidden;width:100%;border-right:none;}
	.servicepanel{float:none;overflow:hidden;width:100%;}
	.serveopt{overflow:hidden;font-size:10pt;position:absolute;left:320px;top:5px;}
	.thetoolsbar{display:none;}
	.systemcontentlist{margin:0;}
	

}

/*styles for 900px and up @ 16px!*/
@media screen and (min-width: 85.25em)
{
	.megaheader{position:relative;top:0;margin:0 auto;padding:5px 0 0 0;overflow:hidden;text-align:center;display:block;}
	.megaheader img{margin:0 auto;}
	.primecontent{min-height:400px;margin:0 auto;width:100%;padding:0;overflow:hidden;z-index:9;}
	.static_banner{overflow:hidden;min-height:330px;margin:0 auto;position:relative;}
	.centerframe{margin:0 auto;overflow:hidden;position:relative;width:100%;padding:0px;}
	.centerframe h2{text-align:center;}
	.topmenupanel{display:none;}	
	.resizemenu{display:inline;float:left;}

	.clientdtpanel{float:none;overflow:hidden;width:100%;border-right:none;}
	.servicepanel{float:none;overflow:hidden;width:100%;}
	.serveopt{overflow:hidden;font-size:10pt;position:absolute;left:320px;top:5px;}
	.thetoolsbar{display:none;}
	.systemcontentlist{margin:0;}

		


}

/*one with pixels too! */
/* NOTE - if the user were to increase his browser font size to 20px (chrome: Large), 
			the above (68.75em) media query will be incorrectly ignored!!!
			
			Assuming 20px browser setting, we would expect to see this progression:
			yellow > green > red > blue > NAVY > orange
			
			However, the orange never kicks in... which seems like a browser bug!
			Here's the math (assuming 20px browser setting):
			1200/20 = 60em     <     68.75em
*/

@media only screen and (min-width: 1250px) and (min--moz-device-pixel-ratio: 1.5),
	only screen and (min-width: 1250px) and (-moz-min-device-pixel-ratio: 1.5),
	only screen and (min-width: 1250px) and (-o-min-device-pixel-ratio: 3/2),
	only screen and (min-width: 1250px) and (-webkit-min-device-pixel-ratio: 1.5),
	only screen and (min-width: 1250px) and (min-device-pixel-ratio: 1.5),
	only screen and (min-width: 1250px) and (min-resolution: 1.5dppx),
	screen and (min-width: 1250px)
	{
	.centerframe h2{text-align:center;}
	.clientdtpanel{float:left;width:50%;}
	.servicepanel{float:right;width:49%;}
}