/*
							CSS for Scoring-Lines
*/
* {margin:0; padding:0; }
.clear {clear:both; }
body {font-family: Arial, sans-serif; font-size: 1.25rem;
background-image: url('img/wpaper.png'); }

#top-left {display:inline-block; position:fixed; left:1rem; top:0px; 
font-size:1.5em; }
#top-left > a {text-decoration:none; }
#return {font-family: 'Andale Mono', 'Courier New', monospace; font-size:3rem;}
#top-right {display:inline-block; position:fixed; right:1.5rem; top:1rem; }
h2,h3,h4 {color:blue; margin:1.25rem 0 0.5rem 0;}
.js-msg {font-size:1.1em; color: red; }
#boardHeading { 
	text-align:center;
	color:white;
	margin:0.375rem 4.375rem 0.5rem 3.375rem;
	max-width:90%;
	font-size:2.25em;
	font-weight:normal;
	text-shadow: 0 1px 0 #ccc,
				0 2px 0 #c9c9c9,
				0 3px 0 #bbb,
				0 4px 0 #b9b9b9,
				0 5px 0 #aaa,
				0 6px 1px rgba(0,0,0,.1),
				0 0 5px rgba(0,0,0,.1),
				0 1px 3px rgba(0,0,0,.3),
				0 3px 5px rgba(0,0,0,.2),
				0 5px 10px rgba(0,0,0,.25),
				0 10px 10px rgba(0,0,0,.2),
				0 20px 20px rgba(0,0,0,.15);

}

.testImage {margin:0 0.5em; vertical-align:-8px;}
.red {color:red; } .green {color:green; } .blue {color:blue; }
.left {text-align:left; } .bitBigger {font-size:1.2rem; }
.nobr { white-space:nowrap; }

#main {width:100%; margin:0; padding:0; text-align:center; }
#screen {position:relative; margin:0 auto; padding:0; 
width:98vw; height:98vh; text-align:center; color:#444; }

/* The Board */
#board { margin:0 auto; display:inline-block; margin:0 auto 0 auto; text-align:center; 
padding-bottom:1rem; border-collapse: collapse;--gBorder:2.5px; --gColor:#666;}
.insideGrid {border-collapse: collapse; border-spacing:0; 
cellspacing:0; cellpadding:0; margin:0.625rem 1.25rem; 
font-family: 'Andale Mono', 'Courier New', monospace; }
.insideGrid td { padding:0; line-height:0; }
.insideGrid td > img { display:block; width: 100%; height: auto; }
/* Tic-tac-toe grid borders */
.gtm { border-left:var(--gBorder) solid var(--gColor); 
border-right:var(--gBorder) solid var(--gColor); }
.gml { border-top:var(--gBorder) solid var(--gColor); 
border-bottom:var(--gBorder) solid var(--gColor); }
.gmm { border:var(--gBorder) solid var(--gColor); margin:0; }
.gmr { border-top:var(--gBorder) solid var(--gColor);
border-bottom:var(--gBorder) solid var(--gColor); }
.gbm { border-left:var(--gBorder) solid var(--gColor); 
border-right:var(--gBorder) solid var(--gColor); }
.gmmmm {border:var(--gBorder) solid var(--gColor); margin:0; background:#ccc;}

/* Button Bar */
#btnBar {font-family: 'Arial Unicode MS', 'Consolas', monospace; margin:0 auto; max-width:32.75rem; cursor: pointer; user-select: none; }
.oneLine {margin:0 auto; display:flex; 
justify-content:space-between; align-items:center; }
.arrBtn {font-size:3rem; }
.arrBckFwd {font-size:2.25rem; }
.arrRnd {font-size:1.25rem; }

/* Bottom of page */
div.spacer {height:3rem; }
div.footerLeft {position:fixed; bottom:0.25rem; left:0.75rem; text-align:left; }
div.footerRight {position:fixed; bottom:0.5rem; right:1.25rem; text-align:right; }
.cs a {color:#0088cc;text-decoration:none; font-size:2rem; }
.version {color:#0088cc;font-size:0.675rem; }

/* For info.php page */
.width-100 { width:100%; text-align:center; }
.info-text { width:80%; margin:0 auto; text-align:center; }
.info-text hr { width:38%; margin:0 auto; border-top:0.5px solid #666;}
.help {margin:2rem 0; text-align:left; font-size:1.125rem; }
.help p {margin-bottom:0.625rem; }
.center {text-align:center; }
.close {font-size:1.75rem; padding-right:0.25rem; 
font-weight: 400; cursor:pointer; }
.close:hover {color:#aaa; }

/* For ./stats/index.php */
body.stats { background:white; color:blue; 
font-family: 'Times New Rowman', 'Times', serif; font-size:1rem; }
div.stats-area { margin-left:10%; margin-top:1.5rem; margin-bottom:1.5rem; text-align:left; }
h2.hits { font-size:1.7rem; color:#0aa; margin-bottom:1rem; }

/* End */