/* 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: 'Noteworthy';
    src: url('../fonts/Noteworthy-Bold.ttf');
}
							/* General pages */
* { margin: 0; padding: 0; }
	
body {
	font-family: "New Century Schoolbook", 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.2em;
	color:#666;
	text-align:center;
	line-height:2.2ex;
}

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

#left-side { 
	display:inline-block;
	width:20%;
	float:left;
}
#left-side img {cursor:pointer;}

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

#footer { 
	width:100%;
	position:fixed; 
	bottom:0; 
	height:40px; 
}

.footer-left {
	float:left;
	width:20%;
	text-align:left; 
	margin-left:24px;
}
.footer-center {
	width:60%; margin:0 auto;
}
.footer-right {
	float:right;
	width:20%;
	margin-right:24px;
 	background:#c9dfdf;
}

#banner { margin:32px auto 250px auto; padding:32px; }

								/* Front page */
.mettle-div { 
	margin-top:8vh; 
}
.center-mettle { 
	display:inline-block;
	vertical-align:middle;
	padding:1em;
}

.gamelink a, .gamelink a:visited {
	font-family: "Arial Black", GillSans-Bold, Impact, "sans serif";
	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;	
} 

.stylelink a, .stylelink a:visited {
	color:#def;
	line-height:2ex;
	font-family: "Noteworthy-Bold", "Handlee", "Comic Sans", cursive;
	font-size:36px;
	text-shadow: 1px 3px 4px #555555;
}
.stylelink a:hover {
	color: #fff; 
	text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1); 
}
								/* Global styles */
a { color: #228; text-decoration: none; }
a:hover { text-decoration: none; }

h1 {
	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, ul, ol, dl, table { margin-bottom: 15px; }
p em 	{ background-color:yellow; font-style:normal; }
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;
}

								/* 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-16 { height:16px; } 
.spacer-32 { height:32px; } 
.spacer-48 { height:48px; }	
.spacer-64 { height:64px; }	
.spacer-80 { height:80px; }	
.spacer-96 { height:96px; }	
.spacer-128 { height:128px; }

								/* 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-left: auto; 
	margin-right: auto; 
	margin-bottom:2px;
}
	
.center75 {
	display: block;
	width:75%;
	margin-left: auto; 
	margin-right: auto; 
	margin-bottom:2px;
}

.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	*/