div.size-debug
{
text-align: center;
color: black;
width: auto;
background-color: #DDD;
font-weight: bolder;
font-size: 70%;
height: auto;
opacity: 0.75;
position: fixed;
top: 30px;
left: 0px;
padding:0.3em;
z-index:200;
display: inline;
}



/* =========================================================== */
/* Change color of viewport debug window                       */
/* =========================================================== */
@media screen and (max-width: 960px) {div.size-debug{background-color: red;}}
@media screen and (max-width: 770px) {div.size-debug{background-color: orange;}}
@media screen and (max-width: 550px) {div.size-debug{background-color: yellow;}}
@media screen and (max-width: 350px) {div.size-debug{background-color: #5F5;}}



/* =========================================================== */
/* FINE-GRAIN Width Adjustment Section:                        */
/* =========================================================== */
@media screen and (max-width: 1920px) {div.size-debug::after {content:"1920"}}
@media screen and (max-width: 1910px) {div.size-debug::after {content:"1910"}}
@media screen and (max-width: 1900px) {div.size-debug::after {content:"1900"}}
@media screen and (max-width: 1890px) {div.size-debug::after {content:"1890"}}
@media screen and (max-width: 1880px) {div.size-debug::after {content:"1880"}}
@media screen and (max-width: 1870px) {div.size-debug::after {content:"1870"}}
@media screen and (max-width: 1860px) {div.size-debug::after {content:"1860"}}
@media screen and (max-width: 1850px) {div.size-debug::after {content:"1850"}}
@media screen and (max-width: 1840px) {div.size-debug::after {content:"1840"}}
@media screen and (max-width: 1830px) {div.size-debug::after {content:"1830"}}
@media screen and (max-width: 1820px) {div.size-debug::after {content:"1820"}}
@media screen and (max-width: 1810px) {div.size-debug::after {content:"1810"}}
@media screen and (max-width: 1800px) {div.size-debug::after {content:"1800"}}
@media screen and (max-width: 1790px) {div.size-debug::after {content:"1790"}}
@media screen and (max-width: 1780px) {div.size-debug::after {content:"1780"}}
@media screen and (max-width: 1770px) {div.size-debug::after {content:"1770"}}
@media screen and (max-width: 1760px) {div.size-debug::after {content:"1760"}}
@media screen and (max-width: 1750px) {div.size-debug::after {content:"1750"}}
@media screen and (max-width: 1740px) {div.size-debug::after {content:"1740"}}
@media screen and (max-width: 1730px) {div.size-debug::after {content:"1730"}}
@media screen and (max-width: 1720px) {div.size-debug::after {content:"1720"}}
@media screen and (max-width: 1710px) {div.size-debug::after {content:"1710"}}
@media screen and (max-width: 1700px) {div.size-debug::after {content:"1700"}}
@media screen and (max-width: 1690px) {div.size-debug::after {content:"1690"}}
@media screen and (max-width: 1680px) {div.size-debug::after {content:"1680"}}
@media screen and (max-width: 1670px) {div.size-debug::after {content:"1670"}}
@media screen and (max-width: 1660px) {div.size-debug::after {content:"1660"}}
@media screen and (max-width: 1650px) {div.size-debug::after {content:"1650"}}
@media screen and (max-width: 1640px) {div.size-debug::after {content:"1640"}}
@media screen and (max-width: 1630px) {div.size-debug::after {content:"1630"}}
@media screen and (max-width: 1620px) {div.size-debug::after {content:"1620"}}
@media screen and (max-width: 1610px) {div.size-debug::after {content:"1610"}}
@media screen and (max-width: 1600px) {div.size-debug::after {content:"1600"}}
@media screen and (max-width: 1590px) {div.size-debug::after {content:"1590"}}
@media screen and (max-width: 1580px) {div.size-debug::after {content:"1580"}}
@media screen and (max-width: 1570px) {div.size-debug::after {content:"1570"}}
@media screen and (max-width: 1560px) {div.size-debug::after {content:"1560"}}
@media screen and (max-width: 1550px) {div.size-debug::after {content:"1550"}}
@media screen and (max-width: 1540px) {div.size-debug::after {content:"1540"}}
@media screen and (max-width: 1530px) {div.size-debug::after {content:"1530"}}
@media screen and (max-width: 1520px) {div.size-debug::after {content:"1520"}}
@media screen and (max-width: 1510px) {div.size-debug::after {content:"1510"}}
@media screen and (max-width: 1500px) {div.size-debug::after {content:"1500"}}
@media screen and (max-width: 1490px) {div.size-debug::after {content:"1490"}}
@media screen and (max-width: 1480px) {div.size-debug::after {content:"1480"}}
@media screen and (max-width: 1470px) {div.size-debug::after {content:"1470"}}
@media screen and (max-width: 1460px) {div.size-debug::after {content:"1460"}}
@media screen and (max-width: 1450px) {div.size-debug::after {content:"1450"}}
@media screen and (max-width: 1440px) {div.size-debug::after {content:"1440"}}
@media screen and (max-width: 1430px) {div.size-debug::after {content:"1430"}}
@media screen and (max-width: 1420px) {div.size-debug::after {content:"1420"}}
@media screen and (max-width: 1410px) {div.size-debug::after {content:"1410"}}
@media screen and (max-width: 1400px) {div.size-debug::after {content:"1400"}}
@media screen and (max-width: 1390px) {div.size-debug::after {content:"1390"}}
@media screen and (max-width: 1380px) {div.size-debug::after {content:"1380"}}
@media screen and (max-width: 1370px) {div.size-debug::after {content:"1370"}}
@media screen and (max-width: 1360px) {div.size-debug::after {content:"1360"}}
@media screen and (max-width: 1350px) {div.size-debug::after {content:"1350"}}
@media screen and (max-width: 1340px) {div.size-debug::after {content:"1340"}}
@media screen and (max-width: 1330px) {div.size-debug::after {content:"1330"}}
@media screen and (max-width: 1320px) {div.size-debug::after {content:"1320"}}
@media screen and (max-width: 1310px) {div.size-debug::after {content:"1310"}}
@media screen and (max-width: 1300px) {div.size-debug::after {content:"1300"}}
@media screen and (max-width: 1290px) {div.size-debug::after {content:"1290"}}
@media screen and (max-width: 1280px) {div.size-debug::after {content:"1280"}}
@media screen and (max-width: 1270px) {div.size-debug::after {content:"1270"}}
@media screen and (max-width: 1260px) {div.size-debug::after {content:"1260"}}
@media screen and (max-width: 1250px) {div.size-debug::after {content:"1250"}}
@media screen and (max-width: 1240px) {div.size-debug::after {content:"1240"}}
@media screen and (max-width: 1230px) {div.size-debug::after {content:"1230"}}
@media screen and (max-width: 1220px) {div.size-debug::after {content:"1220"}}
@media screen and (max-width: 1210px) {div.size-debug::after {content:"1210"}}
@media screen and (max-width: 1200px) {div.size-debug::after {content:"1200"}}
@media screen and (max-width: 1190px) {div.size-debug::after {content:"1190"}}
@media screen and (max-width: 1180px) {div.size-debug::after {content:"1180"}}
@media screen and (max-width: 1170px) {div.size-debug::after {content:"1170"}}
@media screen and (max-width: 1160px) {div.size-debug::after {content:"1160"}}
@media screen and (max-width: 1150px) {div.size-debug::after {content:"1150"}}
@media screen and (max-width: 1140px) {div.size-debug::after {content:"1140"}}
@media screen and (max-width: 1130px) {div.size-debug::after {content:"1130"}}
@media screen and (max-width: 1120px) {div.size-debug::after {content:"1120"}}
@media screen and (max-width: 1110px) {div.size-debug::after {content:"1110"}}
@media screen and (max-width: 1100px) {div.size-debug::after {content:"1100"}}
@media screen and (max-width: 1090px) {div.size-debug::after {content:"1090"}}
@media screen and (max-width: 1080px) {div.size-debug::after {content:"1080"}}
@media screen and (max-width: 1070px) {div.size-debug::after {content:"1070"}}
@media screen and (max-width: 1060px) {div.size-debug::after {content:"1060"}}
@media screen and (max-width: 1050px) {div.size-debug::after {content:"1050"}}
@media screen and (max-width: 1040px) {div.size-debug::after {content:"1040"}}
@media screen and (max-width: 1030px) {div.size-debug::after {content:"1030"}}
@media screen and (max-width: 1020px) {div.size-debug::after {content:"1020"}}
@media screen and (max-width: 1010px) {div.size-debug::after {content:"1010"}}
@media screen and (max-width: 1000px) {div.size-debug::after {content:"1000"}}
@media screen and (max-width: 990px) {div.size-debug::after {content:"990"}}
@media screen and (max-width: 980px) {div.size-debug::after {content:"980"}}
@media screen and (max-width: 970px) {div.size-debug::after {content:"970"}}
@media screen and (max-width: 960px) {div.size-debug::after {content:"960"}}
@media screen and (max-width: 950px) {div.size-debug::after {content:"950"}}
@media screen and (max-width: 940px) {div.size-debug::after {content:"940"}}
@media screen and (max-width: 930px) {div.size-debug::after {content:"930"}}
@media screen and (max-width: 920px) {div.size-debug::after {content:"920"}}
@media screen and (max-width: 910px) {div.size-debug::after {content:"910"}}
@media screen and (max-width: 900px) {div.size-debug::after {content:"900"}}
@media screen and (max-width: 890px) {div.size-debug::after {content:"890"}}
@media screen and (max-width: 880px) {div.size-debug::after {content:"880"}}
@media screen and (max-width: 870px) {div.size-debug::after {content:"870"}}
@media screen and (max-width: 860px) {div.size-debug::after {content:"860"}}
@media screen and (max-width: 850px) {div.size-debug::after {content:"850"}}
@media screen and (max-width: 840px) {div.size-debug::after {content:"840"}}
@media screen and (max-width: 830px) {div.size-debug::after {content:"830"}}
@media screen and (max-width: 820px) {div.size-debug::after {content:"820"}}
@media screen and (max-width: 810px) {div.size-debug::after {content:"810"}}
@media screen and (max-width: 800px) {div.size-debug::after {content:"800"}}
@media screen and (max-width: 790px) {div.size-debug::after {content:"790"}}
@media screen and (max-width: 780px) {div.size-debug::after {content:"780"}}
@media screen and (max-width: 770px) {div.size-debug::after {content:"770"}}
@media screen and (max-width: 760px) {div.size-debug::after {content:"760"}}
@media screen and (max-width: 750px) {div.size-debug::after {content:"750"}}
@media screen and (max-width: 740px) {div.size-debug::after {content:"740"}}
@media screen and (max-width: 730px) {div.size-debug::after {content:"730"}}
@media screen and (max-width: 720px) {div.size-debug::after {content:"720"}}
@media screen and (max-width: 710px) {div.size-debug::after {content:"710"}}
@media screen and (max-width: 700px) {div.size-debug::after {content:"700"}}
@media screen and (max-width: 690px) {div.size-debug::after {content:"690"}}
@media screen and (max-width: 680px) {div.size-debug::after {content:"680"}}
@media screen and (max-width: 670px) {div.size-debug::after {content:"670"}}
@media screen and (max-width: 660px) {div.size-debug::after {content:"660"}}
@media screen and (max-width: 650px) {div.size-debug::after {content:"650"}}
@media screen and (max-width: 640px) {div.size-debug::after {content:"640"}}
@media screen and (max-width: 630px) {div.size-debug::after {content:"630"}}
@media screen and (max-width: 620px) {div.size-debug::after {content:"620"}}
@media screen and (max-width: 610px) {div.size-debug::after {content:"610"}}
@media screen and (max-width: 600px) {div.size-debug::after {content:"600"}}
@media screen and (max-width: 590px) {div.size-debug::after {content:"590"}}
@media screen and (max-width: 580px) {div.size-debug::after {content:"580"}}
@media screen and (max-width: 570px) {div.size-debug::after {content:"570"}}
@media screen and (max-width: 560px) {div.size-debug::after {content:"560"}}
@media screen and (max-width: 550px) {div.size-debug::after {content:"550"}}
@media screen and (max-width: 540px) {div.size-debug::after {content:"540"}}
@media screen and (max-width: 530px) {div.size-debug::after {content:"530"}}
@media screen and (max-width: 520px) {div.size-debug::after {content:"520"}}
@media screen and (max-width: 510px) {div.size-debug::after {content:"510"}}
@media screen and (max-width: 500px) {div.size-debug::after {content:"500"}}
@media screen and (max-width: 490px) {div.size-debug::after {content:"490"}}
@media screen and (max-width: 480px) {div.size-debug::after {content:"480"}}
@media screen and (max-width: 470px) {div.size-debug::after {content:"470"}}
@media screen and (max-width: 460px) {div.size-debug::after {content:"460"}}
@media screen and (max-width: 450px) {div.size-debug::after {content:"450"}}
@media screen and (max-width: 440px) {div.size-debug::after {content:"440"}}
@media screen and (max-width: 430px) {div.size-debug::after {content:"430"}}
@media screen and (max-width: 420px) {div.size-debug::after {content:"420"}}
@media screen and (max-width: 410px) {div.size-debug::after {content:"410"}}
@media screen and (max-width: 400px) {div.size-debug::after {content:"400"}}
@media screen and (max-width: 390px) {div.size-debug::after {content:"390"}}
@media screen and (max-width: 380px) {div.size-debug::after {content:"380"}}
@media screen and (max-width: 370px) {div.size-debug::after {content:"370"}}
@media screen and (max-width: 360px) {div.size-debug::after {content:"360"}}
@media screen and (max-width: 350px) {div.size-debug::after {content:"350"}}
@media screen and (max-width: 340px) {div.size-debug::after {content:"340"}}
@media screen and (max-width: 330px) {div.size-debug::after {content:"330"}}
@media screen and (max-width: 320px) {div.size-debug::after {content:"320"}}
@media screen and (max-width: 310px) {div.size-debug::after {content:"310"}}
@media screen and (max-width: 300px) {div.size-debug::after {content:"300"}}
@media screen and (max-width: 290px) {div.size-debug::after {content:"290"}}
@media screen and (max-width: 280px) {div.size-debug::after {content:"280"}}
@media screen and (max-width: 270px) {div.size-debug::after {content:"270"}}
@media screen and (max-width: 260px) {div.size-debug::after {content:"260"}}
@media screen and (max-width: 250px) {div.size-debug::after {content:"250"}}
@media screen and (max-width: 240px) {div.size-debug::after {content:"240"}}
@media screen and (max-width: 230px) {div.size-debug::after {content:"230"}}
@media screen and (max-width: 220px) {div.size-debug::after {content:"220"}}
@media screen and (max-width: 210px) {div.size-debug::after {content:"210"}}
@media screen and (max-width: 200px) {div.size-debug::after {content:"200"}}
@media screen and (max-width: 190px) {div.size-debug::after {content:"190"}}
@media screen and (max-width: 180px) {div.size-debug::after {content:"180"}}
@media screen and (max-width: 170px) {div.size-debug::after {content:"170"}}
@media screen and (max-width: 160px) {div.size-debug::after {content:"160"}}
@media screen and (max-width: 150px) {div.size-debug::after {content:"150"}}
@media screen and (max-width: 140px) {div.size-debug::after {content:"140"}}
@media screen and (max-width: 130px) {div.size-debug::after {content:"130"}}
@media screen and (max-width: 120px) {div.size-debug::after {content:"120"}}
@media screen and (max-width: 110px) {div.size-debug::after {content:"110"}}
@media screen and (max-width: 100px) {div.size-debug::after {content:"100"}}