/*
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/
*/

body {
	background: black;
	color: #333;
	font-family: Helvetica, sans-serif;
}
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 (min-width: 18.75em){
	body {
		background: yellow;
	}
}


/*styles for 480px - 620px @ 16px!*/
@media only screen and (min-width: 30em) and (max-width: 38.75em) {
	body {
		background: green;
	}
}




@media screen and (min-width: 38.75em),only print,projector{body{background:red;}}

/*styles for 800px and up @ 16px!*/
@media screen and (min-width: 50em){
	body {
		background: blue;
	}
}

/*styles for 1100px and up @ 16px!*/
@media screen and (min-width: 68.75em){
	body {
		background: orange;
	}
}

/*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 screen and (min-width: 1200px){
	body {
		background: navy;
	}
}

@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) {

	body {
		background-color: pink;
	}
}