/** high resolution displays media queries https://raw.github.com/gist/3828790/b1cbb060a4213425e24ff3b96d0b376265e4b6ce/mq.css  via gist https://gist.github.com/3828790 **/

/** small screen, non-retina **/
@media only screen and (min-width: 320px) {}

/** small screen, retina, stuff to override above media query **/
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
only screen and (                min-resolution: 192dpi) and (min-width: 320px),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) {}

/** medium screen, non-retina **/
@media only screen and (min-width: 700px) {}

/** medium screen, retina, stuff to override above media query **/
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
only screen and (                min-resolution: 192dpi) and (min-width: 700px),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) {}

/** large screen, non-retina **/
@media only screen and (min-width: 1300px) {}

/** large screen, retina, stuff to override above media query **/
@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) {}


/**  high resolution https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4 Be cautious!!! when you are using it in the above way, the image will be downloaded even if the page doesn't fit the rule above. **/
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
  only screen and (-o-min-device-pixel-ratio: 3/2), 
  only screen and (min-device-pixel-ratio : 1.5) {.imagebox {background:(url:"images/high/demo.jpg");} 
}

/** high resolution alternate http://girliemac.com/blog/2012/08/03/resolution-in-media-queries/ **/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (min-resolution: 144dpi) {}

/** high resolution background image substition alternate http://menacingcloud.com/?c=highPixelDensityDisplays **/
/** pixel ratio of 1. background size is 100% (of a 100px image)  **/
#header { background: url(header.png); }

/** pixel ratio of 1.5. background-size is 1/1.5 = 66.67% (of a 150px image)  **/
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
	#header { background: url(headerRatio1_5.png); background-size: 66.67%; }
}

/** pixel ratio of 2. background-size is 1/2 = 50% (of a 200px image)  **/
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
	#header { background: url(headerRatio2.png); background-size: 50%; }
}

/** high resolution ultra high density (retina) level **/
/** Samsung Galaxy SIII, HTC Evo LTE iPhone 4 **/
@media only screen and (-webkit-device-pixel-ratio: 2) {}