/*
This is just a test file for making sure the script is working properly.
If it is, the media queries below will change the body's background color depending on the browser width.
For a realistic use case for media queries: read up on Responsive Web Design: 
http://www.alistapart.com/articles/responsive-web-design/
*/

p {
	width: 60%;
	min-width: 18.75em; /* 300px @ 16px */
	max-width: 43.75em; /* 700px @ 16px */
	margin: 2em auto;
	background: #fff;
	padding: 20px;
}
a {
	color: #333;
}

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

/*styles for 300 and up @ 16px!*/
/* The max-width declaration below blocks this from ever working */
@media only screen and (max-width: 480px){
	body {background: #FFFFFF!important;}
	#pc{display:none !important;}
	#smph{z-index:100000 !important;}
	.smph_page{font-size:12px;text-align:right;color:#333333;padding-bottom:1%;}
	.btnbx{width:100%;text-align:center;}
	a.smph_btn{
width: 70%;
text-align: center;
display: block;
padding: 8px;
margin: 10px auto;
color: #666;
text-decoration: none;
text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
border-radius: 3px;
border-top: 1px solid #ccc;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
border-left: 1px solid #ccc;
font-weight: bold;
-webkit-box-shadow: 1px 1px 2px #e7e7e7;
box-shadow: 1px 1px 2px #e7e7e7;
background: -webkit-gradient(linear, left top, left bottom, from(#fff),         color-stop(0.01, #f1f1f1),
color-stop(0.5, #f1f1f1),
color-stop(0.99, #dfdfdf),
to(#ccc));
background: linear-gradient(#fff, #f1f1f1 1% , #f1f1f1 50% , #dfdfdf 99%, #ccc);
}
}


/*styles for 480px - 620px @ 16px!*/
@media only screen and (min-device-width:481px) {
	body {
		background: #c3fdff;
	}
	#smph{display:none;}
	#pc{width:1000px;margin:0px auto;}
	
}