/** media-queries-boilerplate.css
/** smartphone **/

/** smartphone (landscape)**/
@media only screen
and (min-width : 321px) {}

/** smartphone (portrait)**/
@media only screen
and (max-width : 320px) {}

/** smartphone (portrait and landscape)**/
@media only screen
and (min-width : 320px)
and (max-width : 480px) {}

/** smartphone and desktop **/
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {}

/** smart phones htc desire hd width in landscape mode = 533px https://docs.google.com/present/view?id=dkx3qtm_22dxsrgcf4 **/
@media only screen and (min-device-width : 320px) and (max-device-width : 569px) {}

/** iOS **/
/** http://gabrieleromanato.com/2012/09/css-media-queries-per-ipad-e-iphone/ **/
/** iPhone **/
/** iPhone (landscape) **/
@media screen and (max-width: 480px) {}

/** iPhone (portrait) **/
@media screen and (max-width: 320px) {}

@media only screen and (-webkit-min-device-pixel-ratio: 5.1 ),
  only screen and (min-device-pixel-ratio: 5.1 ) {	
}
/** iPhone 4 **/
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
  only screen and (min-device-pixel-ratio : 1.5) {
}

/** iphone5 and ipod touch 5th gen **/
@media (device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) {}


/** iPad **/
/** iPad (landscape) **/
@media screen and (max-width: 1024px) {}
/** iPad (landscape) **/
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {}

/** iPad (portrait) **/
@media screen and (max-width: 770px) {}

/** iPad (portrait) **/
@media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) {}

/** iPad (portrait and landscape) **/
@media only screen and (min-width : 768px) and (max-width : 1024px) {}

/** Desktops and laptops **/
@media only screen and (min-width : 1224px) {}

/** Large screens **/
@media only screen and (min-width : 1824px) {}



/** 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) {}

/** media-queries-high-media-dpi.css https://gist.github.com/3446599 @marcedwards from @bjango **/

/** media-queries-high-media-dpi.css captures:                              
  retina iOS devices,                              
  retina macs running safari,                          
  high dpi windows pcs running >= ie8,    
  low dpi windows pcs with ie zoomed in,               
  android hdpi devices and above,                    
  android tvdpi devices, including google nexus 7,       
  chrome running on high dpi macs and pcs,  
  and opera running on high dpi macs, pcs and mobile devices **/

/** !!! please note that that this code assumes you'll swap a 2× version of your images. If you'd like to supply finer increments, other thresholds might be appropriate. !!! **/

@media	only screen and (min-device-pixel-ratio: 1.3),
  only screen and (-webkit-min-device-pixel-ratio: 1.3),
  only screen and (-o-min-device-pixel-ratio: 13/10),
  only screen and (min-resolution: 120dpi) {}
  
  
  
  
/** media-queries-galaxy-nexus-and-nexus-7.css http://pastebin.com/CCnyf1Yr **/

/** galaxy nexus (portrait and landscape) **/
@media only screen and (min-device-width : 360px) and (max-device-width : 598px) {
  ul.top-menu { background:red}
}

/** galaxy nexus (landscape) **/
@media only screen and (min-width : 361px) and (orientation: landscape){
  ul.top-menu { background:blue}
}

/** galaxy nexus (portrait) **/
@media only screen and (max-width : 360px) and (orientation: portrait) {
  ul.top-menu { background: purple; }
}

/** nexus 7 (portrait and landscape) **/
@media only screen and (min-device-width : 603px) and (max-device-width : 966px) {
  ul.top-menu { background: yellow}
}

/** nexus 7 (landscape) **/
@media only screen and (min-width : 604px) and (orientation: landscape) {
  ul.top-menu { background: green}
}

/** nexus 7 (portrait) **/
@media only screen and (max-width : 603px) and (orientation: portrait) {
  ul.top-menu { background: orange}
}
	
@media screen and (min-width: 998px) and (max-width: 999px)

/** nexus 7 (portrait) firefox **/
@media only screen and (device-width : 800px) and (orientation: portrait) {
  #device:after {
    content: "Nexus 7 - portrait - firefox"}
}

/** nexus 7 (portrait) chrome **/
@media only screen and (width : 603px) and (orientation: portrait) {
  #device:after {
    content: "Nexus 7 - portrait - chrome"}
}

/** nexus 7 (landscape) firefox **/
@media only screen and (device-width : 1280px) and (orientation: landscape) {
  #device:after {
    content: "Nexus 7 - landscape - firefox"}
}

/** nexus 7 (landscape) chrome **/
@media only screen and (width : 966px) and (orientation: landscape) {
  #device:after {
    content: "Nexus 7 - landscape - chrome"}
}  





/** mobile first - @aarongustaffson **/
@media screen {}

@media screen and (min-width:481px) { /** screens 480px+ width **/ }

@media screen and (min-width:754px) { /** screens 754px+ width **/ }