/* ----  Common attributes for all resolutions  ----- */
/* -----  Smallest Supported resolution:  213w x 320h ----- */
html {height:98%;}
body {display:flex; flex-direction:column;}

a {color:#008; transition:0.5s all; -webkit-transition:0.5s all; -o-transition:0.5s all; -moz-transition:0.5s all; -ms-transition:0.5s all; margin:0; padding:0;}
a:hover {color:red;}
header {top:0; left:0; margin:.25rem auto 0; font-size:calc(35% + 1vmax);}
h1 {margin:0; font-weight:bold;}
h2 {margin:0 1rem;}
h3 {margin:0 .5rem .5rem;}
hr.hr80 {width:80%; margin:0 auto; padding:0;}
img {margin:0; padding:0;}
p {text-indent:5px;}

/* --------------------- */
#Wrapper {top:0; left:0; margin:0; padding:0; font-size:calc(33% + 1vmax); text-align:left;}
#Content {width:70%; margin:-.5rem auto 0; padding:-1rem .5rem; text-align:left;}
#Footer {position:fixed; bottom:0; left:0; width:98%; margin:0; padding:0; font-size:calc(17% + 1vmax); text-align:center; background-color:#fefefe;}
#HamburgerIcon {margin:.5rem 1rem .5rem 0; padding:.25rem;}
#HamburgerIcon label {display:inline-block; margin:-3rem .25rem -.5rem 0; padding:6px; background-color:#008; font-style:normal; color:white; border-radius:.5rem;}
#HamburgerIcon input:checked ~ #theFixins {display:block;} /* Toggle Hamburger Icon */
#theFixins {display:none; margin:.5rem auto 0;}
#theFixins li {box-sizing:border-box; display:block; width:98%;}
#TheMeat {margin-left:-5rem;}

img.companion {width:65%; margin:.5rem; padding:0;}
img.cross {width:11%; margin:1rem .5rem 1.9rem; padding:0;}
img.knights {width:45%; margin:1.75rem -.75rem 0 auto; padding:0;}
ul.hNav {float:left; width:33%; margin:0 auto; padding:0; text-align:left;}
ul.hNav li {list-style-type:none; margin:0 auto .5rem; padding:0; text-align:left; font-weight:bold;}
ol.arms_ol {text-align:left; margin:0; padding:0; font-size:calc(45% + 1vmax);}
ol.arms_ol li {width:100%; text-align:left;}
ol.arms_ol li ul {list-style-type:lower-roman; margin:0 0 0 3%; padding:0 .25rem;}
ol.roster_ol {width:98%; list-style-type:none; margin:-3rem auto .5rem; padding:0;}
ol.roster_ol li.roster_li {margin:0 .5rem 0; padding:1rem; text-align:left; border-top:1px solid grey;}
ol.rules_ol {text-align:left; margin:0; padding:0;}
ol.rules_ol li {width:100%; text-align:left;}
ol.rules_ol li ul {list-style-type:lower-roman; margin:0 0 0 3%; padding:0 .25rem;}

/* ---------------- */
/* ---  Classes  --- */
.attention, .status {color:#90EE90;}
.bLeft {position:fixed; bottom:0%; left:0;}
.blink {-webkit-animation:blink .75s step-end infinite; animation:blink .75s step-end infinite; font-size:125%; margin:auto 1rem;}
.bloody {color:#9b111e;}
.bottom {flex-shrink:0; margin:0; padding:0;}
.bRight {position:fixed; bottom:0%; right:0%;}
.error {animation: blinker 1s linear infinite; font-size:105%; margin:auto 1rem; color:red;}
.fLeft {float:left;}
.fRight {float:right;}
.fVinque {font-family:Vinque; font-weight:lighter;}
.iField {border:3px inset goldenrod; width:8rem;}
.knightlyClass {margin:-3.75rem auto 0; text-align:center; font-size:calc(35% + 1vmax);}
.tBanner {margin:-2% auto 1rem;}
.tCenter {text-align:center;}
.uLeft {position:absolute; top:0; left:0;}
.uRight {position:absolute; top:0; right:0%;}
.warning {color:#9a6833;}
/* ------------------------------------------- */
@keyframes blinker {
	50% {opacity:0;}
}
@font-face {font-family:"Vinque"; src:local("vinque_0.ttf"), local("Vinque"), url("fonts/vinque_0.ttf");}
/* ------------------------------------------- */
/* ------------------------------------------- */
/* -----  320 to 480 ----- */
@media only screen and (min-width:320px) {
	#HamburgerIcon {margin:.5rem 1rem .5rem 1.25rem; padding:.25rem;}
	.hr80 {margin:0 auto;}
	img.cross {width:6%; margin:1rem .5rem 2rem;}
	img.knights {width:33%; margin:3.25rem auto 0; padding:0;}
	ul.hNav {width:100%; margin:-1rem 0 4px; padding:0; text-align:center;}
	ul.hNav li {margin:0; padding:0 2px; text-align:center;}
	ol.roster_ol {margin:0 auto .5rem;}
	#HamburgerIcon {width:90%;}
	#HamburgerIcon label, #TheMeat {display:none;}
	#theFixins {display:flex;}
	#theFixins .hNav li {display:inline; margin:0; padding:.25rem; vertical-align:middle;}
	.bLeft {bottom:2%;}
	.bRight {bottom:2%;}
	.tBanner {margin:-1% auto 1rem;}
}
/* -----  480 to 600  ----- */
@media only screen and (min-width:480px) {
	a {font-size:calc(30% + 1vmax); margin:0; padding:0;}
	img.cross {width:4%; margin:1rem .5rem 2rem; padding:0;}
	img.knights {width:23%; margin:3.5rem -.75rem 0 auto;}
	#Footer, a {font-size:calc(12% + 1vmax);}
	#theFixins .hNav li {padding:0 .0625rem;}
	.hr80 {margin-top:0;}
}
/* -----  600 to 768  ----- */
@media only screen and (min-width:600px) {
	#Footer, a {font-size:.75rem;}
	img.companion {width:15%;}
	img.knights {width:20%;}
	ol.arms_ol {font-size:calc(35% + 1vmax);}
}
/* -----  768 to 1024  ----- */
@media only screen and (min-width:768px) {
	#Footer {font-size:.65rem;}
	img.knights {width:12%;}	
}