/* CSS Document 
				4D TicTacToe site	/games/ directory
*/ 

.clearfix:before,
.clearfix:after {
    content: " "; 
    display: table; 
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}	
.clearfloat { clear: both; height: 1px; }

@font-face {
    font-family: 'Holly';
    src: url('fonts/HollyGrooveThree.ttf');
}
												/* General pages */
* { margin: 0; padding: 0; }
	
body {
	font-family: 'Arial Black', 'GillSans-Bold', 'Impact', sans-serif;
	text-align: center;
	color: #333;
	background-image: radial-gradient(#f2f0f4, #f2f0f4 33%, #d9d2df ); 
	background-image: -moz-radial-gradient (#f2f0f4, #f2f0f4 33%, #d9d2df ); 
}

#header { 
	width:100%;
	box-sizing:border-box;
	text-align:center;
	margin:0 auto;
	padding:2px;
}
#head_wrapper { margin:0; }
.sub-head { 	
	/* same as /4dttt.css for home page */
	font-size:1.2rem;
	color:#666;
	text-align:center;
	line-height:2.2ex;
}

#main {	
	display:block;
	margin: 0 auto;
	padding: 0px 0 16px 0;
}

#left-side { 
	display:inline-flex;
	width:19%;
	float:left;
	height:85vh;
	flex-direction:column;
	justify-content: space-between;
	align-items:center;
}

#center-block { 
  	display:inline-flex;
	margin: 0 auto 0 auto;
	width:60%;
	height:85vh;
	flex-direction:column;
	justify-content: space-evenly;
	align-items:center;
}
	
#right-side { 
	display:inline-flex; 
	width:19%;
	float:right; 
	height:85vh;
	flex-direction:column-reverse;
	justify-content:flex-start;
	align-items:center;
}

#footer { 
	font-family: "New Century Schoolbook", serif; 
	width:100%;
	display:flex;
	justify-items:space-between;
	align-items:center;
	position:fixed; 
	bottom:0; 
	height:1.75rem; 
}
.footer-left {
	margin-left:1rem;
}
.footer-center {
	margin:0 auto;
}
.footer-right {
	margin-right:1rem;
}

												/* Front page */
.writingLink a, .writingLink a:visited {
	color:#def;
    font-family: 'Holly';
	text-shadow: 0px 2px 3px rgba(0,0,0,0.4),
             0px 4px 6px rgba(0,0,0,0.1); 
}
.writingLink a:hover {
	color: #fff; 
	text-shadow: 1px 2px 2px #555555;
}

/* Left */
#left-side img {cursor:pointer; }
#home-link { margin-top: 0.5rem; }
.lowerLeft { margin-bottom: 3rem; }
#beta-link { font-size:2rem; margin-bottom:5rem;}
#dash-link > a, #dash-link > a:visited {
    font-family: 'Holly';
	color:#aaf;
	font-size:1.25rem;
}
#dash-link > a:hover { color: #66f; }

/* Center */
.gamelink a, .gamelink a:visited {
	font-size:2.4em;
	background-color: #666666;
	background-clip: text;
	-webkit-background-clip: text; 
	color:#8ee;
	text-shadow: 1px 3px 4px #555555;
}
.gamelink a:hover {
	background-color: #666666;
	background-clip: text; 
	-webkit-background-clip: text; 
  	color: transparent;	
  	overflow:visible;
  	text-shadow: 3px 4px 1px rgba(245, 245, 245, 0.5);
}
.gamelink a:active { 
	color:#1cc; 
	text-shadow: 1px 3px 4px #555555;	
} 

#banner { 
	display:inline-block;
	vertical-align:middle;
	padding:1em;
}

/* Right */
#scoringLink {font-size:1.5rem; line-height:2ex; }

												/* Info page */
#top_left {
  position: absolute;
  left: 20px; 
  top:16px;
}
#top_right {
  position: absolute;
  right: 20px; 
  top:16px;
}

#hitsTable { 
	font-family: "New Century Schoolbook", serif; 
	background:white; 
	width:100%;
	font-size:1.25rem;
	color:#555;
	margin:2rem 0;
	border-spacing:1rem;
}
#hitsTable th, #hitsTable td { padding:0 1rem; white-space:nowrap; }
#hitsTable td { font-family: sans-serif; }
#hitsTable th:nth-child(1), #hitsTable th:nth-child(3), 
#hitsTable td:nth-child(1), #hitsTable td:nth-child(3)
{text-align:left;}
#hitsTable th:nth-child(2), #hitsTable td:nth-child(2)
{text-align:right;}

												/* Global styles */
a { color: #228; text-decoration: none; }
a:hover { text-decoration: none; }

h1 {
	font-family: "New Century Schoolbook", serif; 
	text-align:center;
	color:white;
	margin-bottom:0;
	font-size:3em;
	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);
}
h2 { 
	color: #077; 
	font-size: 1.5em;  
	font-family: "Lucida Grande", Arial, sans-serif; font-weight: 500; 
	margin: 1em 0 0.5em 0; 
}
h3 { 	
	color: #0aa; 
	font-size: 1.2em;  
	font-family: "Lucida Grande", Arial, sans-serif; font-weight: 500; 
	margin: 1em 0 0.5em 0; 
}
h4 { font-size: 14px; margin-bottom: 3px; }
hr { width:38%; border: 4px solid #dde; margin-bottom: 15px; }

.nobr	{ white-space:nowrap; }
	
p em 	{ background-color:yellow; font-style:normal; }
ul, ol, dl, table { margin-bottom: 15px; }
ul, ol	{ margin-left: 2em; }

.bit-bigger { font-size:1.2em; }
.bit-smaller { font-size:0.85em; }
.left { text-align: left; }
.right { text-align: right; }
.leftcol { float: left;	width: 48%; }
.rightcol { float: right; width: 48%; }
.center { text-align: center; }
.bold { font-weight: bold; }
.boldred { font-weight: bold; color: red; }
.red { color: red; }
.blue { color: blue; }
.light_grey { color:#888; }
.iti { font-style:italic; }
.u-char { font-size:36px; }
.u-char a { text-decoration:none; }
.code { font-size:1em; font-family: monospace, monospace; }
.note { font-size: 90%; }
.cpu { color:#08c;font-size:0.75em; line-height:2em; }

												/* Areas */
div.floatleft {
	float: left;
	margin-right: 30px;
}
div.floatright {
	float: right;
	margin-left: 30px;
}
.inline { display:inline-block; }

												/* Images */
img.floatleft {
	float: left;
	margin-right: 10px;
}
	
img.floatright {
	float: right;
	margin-left: 10px;
}

img.sub { vertical-align: text-top; }
	
img.txtb { vertical-align: middle; }
	
img.center {
	display: block;
	margin-left: auto; 
	margin-right: auto; 
	margin-bottom:0px; 
}

												/* Spacers */
.spacer-1 { height:1rem; } 
.spacer-2 { height:2rem; } 
.spacer-3 { height:3rem; }	
.spacer-4 { height:4rem; }	
.spacer-5 { height:5rem; }	
.spacer-6 { height:6rem; }	
.spacer-7 { height:7rem; }	
.spacer-8 { height:8rem; }

												/* Areas */
.panel {
	width:85%;
	background-color: #dedede;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	padding: 10px;
	margin: 0 auto 0 auto;
}
.panel p { padding:6px 24px 6px 24px; }

.center66 { 
	display: block;
	width:66%;
	margin: 0 auto;
}
.center75 {
	display: block;
	width:75%;
	margin-left: auto; 
	margin-right: auto; 
	margin-bottom:2px;
}
div.centered { 
	display:inline-block;
	margin: 0 auto;
}

.paper {
	background-image: url(/img/paper.gif);
	padding: 30px;
	width: 480px;
	margin: 0 auto;
	text-align: left;
}

.whitebox {
	border: 2px solid #999999;
	border-right: 4px solid #000000;
	border-bottom: 4px solid #000000;
	padding:10px;

	margin: 10px auto 30px auto;
}

												/* PRINT */
@media print{
  body{ background-color:#FFFFFF; background-image:none; color:#aaa; }
  .main-heading{font-size:1.5em;}
  #main{ width:100%;} 
  #footer{ display:none;}
  .noprint{ display:none;}
}

/* 	End	*/