/*
	NOTE: the widths for larger screens are based on a 16:9 resolution

	http://stackoverflow.com/questions/18477016/switching-css-classes-based-on-screen-size
	https://en.wikipedia.org/wiki/Display_resolution#/media/File:Vector_Video_Standards8.svg
	http://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web
	http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
	https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
	http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile
*/


/* Smartphone (portrait and landscape) - CGA (320) to HVGA (480) */
@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 736px) {
}


/* Smartphone (landscape) */
@media only screen 
and (max-device-width: 736px)
and (orientation: landscape) {
}


/* Smartphone (portrait) */
@media only screen 
and (max-device-width: 736px)
and (orientation: portrait) {
}


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


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


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


/* Desktop/Laptop (landscape) - HD 720 (1280x720), Unnamed (1366x768), WXGA (1280x800) */
/* Anything else - Unnamed (1440x900), Unnamed (1600x900), WSXGA+ (1680x1050), HD 1080 (1920x1080), WUXGA (1920x1200) */
/* NOTE: we 'min-device-width > 736' so that cell phones aren't triggered */
@media only screen 
and (min-device-width: 737px)
and (min-height: 720px) {
}