/* ======================================
	Clay's MediaQuery-Reporter Styles
========================================= */

body:after {
	content: "less than 320px";
	font-size: 300%;
	font-weight: bold;
	position: fixed;
	bottom: 0px;
	width: 100%;
	height: 70px;
	line-height: 70px;
	text-align: center;
	background-color: hsla(1,60%,40%,0.7);
	color: #fff;
	z-index: 999;
}
@media only screen and (min-width: 320px) { body:after { content: "320"; background-color: hsla(90,60%,40%,0.7); } }
@media only screen and (min-width: 340px) { body:after { content: "340"; background-color: hsla(90,60%,40%,0.7); } }
@media only screen and (min-width: 360px) { body:after { content: "360"; background-color: hsla(90,60%,40%,0.7); } }
@media only screen and (min-width: 380px) { body:after { content: "380"; background-color: hsla(90,60%,40%,0.7); } }

@media only screen and (min-width: 400px) { body:after { content: "400"; background-color: hsla(180,60%,40%,0.7); } }
@media only screen and (min-width: 420px) { body:after { content: "420"; background-color: hsla(180,60%,40%,0.7); } }
@media only screen and (min-width: 440px) { body:after { content: "440"; background-color: hsla(180,60%,40%,0.7); } }
@media only screen and (min-width: 460px) { body:after { content: "460"; background-color: hsla(180,60%,40%,0.7); } }
@media only screen and (min-width: 480px) { body:after { content: "480"; background-color: hsla(180,60%,40%,0.7); } }

@media only screen and (min-width: 500px) { body:after { content: "500"; background-color: hsla(270,60%,40%,0.7); } }
@media only screen and (min-width: 520px) { body:after { content: "520"; background-color: hsla(270,60%,40%,0.7); } }
@media only screen and (min-width: 540px) { body:after { content: "540"; background-color: hsla(270,60%,40%,0.7); } }
@media only screen and (min-width: 560px) { body:after { content: "560"; background-color: hsla(270,60%,40%,0.7); } }
@media only screen and (min-width: 580px) { body:after { content: "580"; background-color: hsla(270,60%,40%,0.7); } }

@media only screen and (min-width: 600px) { body:after { content: "600"; background-color: hsla(360,60%,40%,0.7); } }
@media only screen and (min-width: 620px) { body:after { content: "620"; background-color: hsla(360,60%,40%,0.7); } }
@media only screen and (min-width: 640px) { body:after { content: "640"; background-color: hsla(360,60%,40%,0.7); } }
@media only screen and (min-width: 660px) { body:after { content: "660"; background-color: hsla(360,60%,40%,0.7); } }
@media only screen and (min-width: 680px) { body:after { content: "680"; background-color: hsla(360,60%,40%,0.7); } }

@media only screen and (min-width: 700px) { body:after { content: "700"; background-color: hsla(90,60%,40%,0.7); } }
@media only screen and (min-width: 720px) { body:after { content: "720"; background-color: hsla(90,60%,40%,0.7); } }
@media only screen and (min-width: 740px) { body:after { content: "740"; background-color: hsla(90,60%,40%,0.7); } }
@media only screen and (min-width: 760px) { body:after { content: "760"; background-color: hsla(90,60%,40%,0.7); } }
@media screen and (min-width: 767px) and (max-width: 769px) { body:after { content: "768"; background-color: hsla(90,60%,40%,0.7); } }
@media only screen and (min-width: 780px) { body:after { content: "780"; background-color: hsla(90,60%,40%,0.7); } }

@media only screen and (min-width: 800px) { body:after { content: "800"; background-color: hsla(180,60%,40%,0.7); } }
@media only screen and (min-width: 820px) { body:after { content: "820"; background-color: hsla(180,60%,40%,0.7); } }
@media only screen and (min-width: 840px) { body:after { content: "840"; background-color: hsla(180,60%,40%,0.7); } }
@media only screen and (min-width: 860px) { body:after { content: "860"; background-color: hsla(180,60%,40%,0.7); } }
@media only screen and (min-width: 880px) { body:after { content: "880"; background-color: hsla(180,60%,40%,0.7); } }

@media only screen and (min-width: 900px) { body:after { content: "900"; background-color: hsla(270,60%,40%,0.7); } }
@media only screen and (min-width: 920px) { body:after { content: "920"; background-color: hsla(270,60%,40%,0.7); } }
@media only screen and (min-width: 940px) { body:after { content: "940"; background-color: hsla(270,60%,40%,0.7); } }
@media only screen and (min-width: 960px) { body:after { content: "960"; background-color: hsla(270,60%,40%,0.7); } }
@media only screen and (min-width: 980px) { body:after { content: "980"; background-color: hsla(270,60%,40%,0.7); } }

@media only screen and (min-width: 1000px) { body:after { content: "1000"; background-color: hsla(360,60%,40%,0.7); } }
@media only screen and (min-width: 1020px) { body:after { content: "1020"; background-color: hsla(360,60%,40%,0.7); } }
@media screen and (min-width: 1023px) and (max-width: 1025px) { body:after { content: "1024"; background-color: hsla(360,60%,40%,0.7); } }
@media only screen and (min-width: 1040px) { body:after { content: "1040"; background-color: hsla(360,60%,40%,0.7); } }
@media only screen and (min-width: 1060px) { body:after { content: "1060"; background-color: hsla(360,60%,40%,0.7); } }
@media only screen and (min-width: 1080px) { body:after { content: "1080"; background-color: hsla(360,60%,40%,0.7); } }

@media only screen and (min-width: 1100px) { body:after { content: "1100"; background-color: hsla(90,60%,40%,0.7); } }
@media only screen and (min-width: 1120px) { body:after { content: "1120"; background-color: hsla(90,60%,40%,0.7); } }
@media only screen and (min-width: 1140px) { body:after { content: "1140"; background-color: hsla(90,60%,40%,0.7); } }
@media only screen and (min-width: 1160px) { body:after { content: "1160"; background-color: hsla(90,60%,40%,0.7); } }
@media only screen and (min-width: 1180px) { body:after { content: "1180"; background-color: hsla(90,60%,40%,0.7); } }

@media only screen and (min-width: 1200px) { body:after { content: "1200"; background-color: hsla(180,60%,40%,0.7); } }
@media only screen and (min-width: 1220px) { body:after { content: "1220"; background-color: hsla(180,60%,40%,0.7); } }
@media only screen and (min-width: 1240px) { body:after { content: "1240"; background-color: hsla(180,60%,40%,0.7); } }
@media only screen and (min-width: 1260px) { body:after { content: "1260"; background-color: hsla(180,60%,40%,0.7); } }
@media only screen and (min-width: 1280px) { body:after { content: "1280"; background-color: hsla(180,60%,40%,0.7); } }

@media only screen and (min-width: 1300px) { body:after { content: "1300"; background-color: hsla(270,60%,40%,0.7); } }
@media only screen and (min-width: 1320px) { body:after { content: "1320"; background-color: hsla(270,60%,40%,0.7); } }
@media only screen and (min-width: 1340px) { body:after { content: "1340"; background-color: hsla(270,60%,40%,0.7); } }
@media only screen and (min-width: 1360px) { body:after { content: "1360"; background-color: hsla(270,60%,40%,0.7); } }
@media only screen and (min-width: 1380px) { body:after { content: "1380"; background-color: hsla(270,60%,40%,0.7); } }

@media only screen and (min-width: 1400px) { body:after { content: "1400"; background-color: hsla(360,60%,40%,0.7); } }
@media only screen and (min-width: 1420px) { body:after { content: "1420"; background-color: hsla(360,60%,40%,0.7); } }
@media only screen and (min-width: 1440px) { body:after { content: "1440"; background-color: hsla(360,60%,40%,0.7); } }
@media only screen and (min-width: 1460px) { body:after { content: "1460"; background-color: hsla(360,60%,40%,0.7); } }
@media only screen and (min-width: 1480px) { body:after { content: "1480 +"; background-color: hsla(360,60%,40%,0.7); } }