/* ===================================================================================================================
   * MediaQuery reporter styles in addition to base foundation.css -> delete link in HTML before going live
   * Author: otti@ottimoto.com.au
   * Autor URL: http://www.ottimoto.com.au
   =================================================================================================================== */

/* ===================================================================================================================
Title: HTML5 Responsive Media Query Reporter styles
   =================================================================================================================== */
   
/* To tell us which media query is operational
====================================================================================================================== */
 
/* Basic rule for all body:after elements. Already contains the first rule for below 320px. */
body:after {
	content: "320px or less";
	font-size: 130%;
	font-weight: bold;
	position: fixed;
	bottom: 50px;
	width: 100%;
	text-align: center;
	background-color: hsla(1,60%,40%,0.7); /* 1 on the colour wheel, 60% saturation, 40% brightness, 0.7 transparency. */
	color: #FFFFFF;
}

/* Small screens: When the screen width is between 321 and 480px and landscape orientation. */
@media only screen and (max-width: 480px) and (min-width: 321px) and (orientation: landscape) {
	body:after {
		content: "321 to 480px - Landscape - Small";
		background-color: hsla(90,60%,40%,0.7); 
	}
}
/* Small screens: When the screen width is between 321 and 480px and portrait orientation. */
@media only screen and (max-width: 480px) and (min-width: 321px) and (orientation: portrait) {
	body:after {
		content: "321 to 480px - Portrait - Small";
		background-color: hsla(90,60%,40%,0.7); 
	}
}

/* XSmall screens: When the screen width is between 481 and 640px and landscape orientation. */
@media only screen and (max-width: 640px) and (min-width: 481px) and (orientation: landscape) {
	body:after {
		content: "481 to 640px - Landsacape - XSmall";
		background-color: hsla(180,60%,40%,0.7); 
	}
}
/* XSmall screens: When the screen width is between 481 and 640px and portrait orientation. */
@media only screen and (max-width: 640px) and (min-width: 481px) and (orientation: portrait) {
	body:after {
		content: "481 to 640px - Portrait - XSmall";
		background-color: hsla(180,60%,40%,0.7); 
	}
}

/* Medium screens: When the screen width is between 641 and 768px and landscape orientation. */
@media only screen and (max-width: 768px) and (min-width: 641px) and (orientation: landscape) {
	body:after {
		content: "641 to 768px - Landsacape - Medium";
		background-color: hsla(220,60%,40%,0.7); 
	}
}
/* Medium screens: When the screen width is between 641 and 768px and portrait orientation. */
@media only screen and (max-width: 768px) and (min-width: 641px) and (orientation: portrait) {
	body:after {
		content: "641 to 768px - Portrait - Medium";
		background-color: hsla(220,60%,40%,0.7); 
	}
}

/* XMedium screens: When the screen width is between 769 and 940px and landscape orientation. */
@media only screen and (max-width: 940px) and (min-width: 769px) and (orientation: landscape) {
	body:after {
		content: "769 to 940px - Landscape - XMedium";
		background-color: hsla(0,100%,50%,0.4);
	}
}
/* XMedium screens: When the screen width is between 769 and 940px and portrait orientation. */
@media only screen and (max-width: 940px) and (min-width: 769px) and (orientation: portrait) {
	body:after {
		content: "769 to 940px - Portrait - XMedium";
		background-color: hsla(0,100%,50%,0.4);
	}
}

/* XXMedium screens: When the screen width is between 941 and 1024px and landscape orientation. */
@media only screen and (max-width: 1024px) and (min-width: 941px) and (orientation: landscape) {
	body:after {
		content: "941 to 1024px - Landscape - XXMedium";
		background-color: hsla(270,60%,40%,0.7); 
	}
}
/* XXMedium screens: When the screen width is between 941 and 1024px and portrait orientation. */
@media only screen and (max-width: 1024px) and (min-width: 941px) and (orientation: portrait) {
	body:after {
		content: "941 to 1024px - Portrait - XXMedium";
		background-color: hsla(270,60%,40%,0.7); 
	}
}

/* Large screens up to 1200: When the screen width is between 1025 and 1200px and landscape orientation. */
@media only screen and (max-width: 1200px) and (min-width: 1025px) and (orientation: landscape) {
	body:after {
		content: "1025 to 1200px - Landscape - Large to 1200";
		background-color: hsla(360,60%,40%,0.7); 
	}
}
/* Large screens up to 1200: When the screen width is between 1025 and 1200px and landscape portrait. */
@media only screen and (max-width: 1200px) and (min-width: 1025px) and (orientation: portrait) {
	body:after {
		content: "1025 to 1200px - Portrait - Large to 1200";
		background-color: hsla(360,60%,40%,0.7); 
	}
}

/* Large screens up to 1440: When the screen width is between 1200 and 1440px and landscape orientation. */
@media only screen and (max-width: 1440px) and (min-width: 1200px) and (orientation: landscape) {
	body:after {
		content: "1200 to 1440px - Landscape - Large to 1440";
		background-color: hsla(300,50%,70%,0.7); 
	}
}
/* Large screens up to 1440: When the screen width is between 1200 and 1440px and landscape portrait. */
@media only screen and (max-width: 1440px) and (min-width: 1200px) and (orientation: portrait) {
	body:after {
		content: "1200 to 1440px - Portrait - Large to 1440";
		background-color: hsla(300,50%,70%,0.7); 
	}
}

/* XLarge screens: When the screen width is between 1441 and 1920px and landscape orientation. */
@media only screen and (max-width: 1920px) and (min-width: 1441px) and (orientation: landscape) {
	body:after {
		content: "1441 to 1920px - Landscape - XLarge";
		background-color: hsla(30,80%,40%,0.7); 
	}
}
/* XLarge screens: When the screen width is between 1441 and 1920px and landscape portrait. */
@media only screen and (max-width: 1920px) and (min-width: 1440px) and (orientation: portrait) {
	body:after {
		content: "1441 to 1920px - Portrait - XLarge";
		background-color: hsla(30,80%,40%,0.7); 
	}
}

/* XXLarge screens: When we reach a screen width that is wider than 1441px. Leave last to override previous rules. */
@media only screen and (min-width: 1921px) {
	body:after {
		content: "1921px and up - XXLarge";
		background-color: hsla(90,60%,40%,0.7); 
	}
}