/* CSS Document
								4D TicTacToe Website
(not the games)
*/

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

@font-face {
    font-family: 'CanelaBark';
    src: url('fonts/CanelaBarkPersonal.ttf');
}

															/* General */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
	min-height: 100vh;
	display: flex; 
	flex-direction: column;
	font-family: serif; 
	color: #333;
 	background:#c9dfdf;	
}

body.info {
	min-height: 100vh;
	display: flex; 
	flex-direction: column;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, 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:0.125rem;
}
#head_wrapper {
	margin:0;
}
#header #home_btn {
  position: absolute;
  left: 1.25rem; top:1rem;
}

.main-heading {
	text-align:center;
	color:white;
	margin-bottom:0;
	font-size:3em;
	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);
}
.sub-head {
	/* also in games/games.css */
	font-size:1.2rem;
	color:#666;
	text-align:center;
	line-height:2.2ex;
}

#main { 
	flex:1;
	width:100%;
}

#center-block { 
	display:block;
	width:60%;
	margin: 0 auto;
	text-align:center;
}

.up_arrow {
	display:inline-block;
	float:left;
	text-align:left;
	font-size:1.6rem;
} 
.back_arrow {
	display:inline-block;
	float:right;
} 

footer { 
	height:1.5rem;
	padding:0.25rem;
}
.footer-left {
	float:left;
	width:auto;
	text-align:left;
	margin-left:0.5rem;
}
.footer-right {
	float:right;
	width:auto;
	text-align:right; 
	margin-right:0.5rem;
}
footer > div > p { margin-bottom:0; }

															/* Home page */
#home-page { --home-side-height: 49rem; }

#home-left-side {
	display:inline-flex;
	float:left;
	width:20%;
	flex-direction:column;
	justify-content:space-between;
	align-items:center;
	height:var(--home-side-height);
	padding-left:3px;
}
#home-left-side > div > img { cursor:pointer; }
.hLeft {margin:0 auto; text-align:center; }
div.spacer-home-left-1 { height:4rem; }
#sheet { 
	font-family: 'CanelaBark', cursive;
	font-size:2rem;
	padding:3rem 0 6.5rem 0;
}
#blog-link { margin-bottom:1rem; }

#home-center { 
	display:inline-block;
	width:60%;
	margin: 0 auto;
	text-align:center;
}
.big-center-word {
	margin:3.375rem 0;
	font-family: sans-serif;
	font-size:2.6em;
}

#home-right-side { 
	display:inline-flex;
	float:right;
	width:20%;
	flex-direction: column;
	justify-content: flex-end;
	align-items:center;
	height:var(--home-side-height);
}
.rhspace { 
	width:100%;
	padding:2.25rem 0;
	text-align:center;
}
#hit-count { 
	margin-bottom:1.5rem; 
	line-height:2.2ex;
}	

/* Show too narrow message when too narrow */
.narrowShow { width:100%; display: none; }
.arrow-lr { font-size:1.8em; } 
p#thin {font-size:1.25em; line-height:2.5ex; text-align:center; }
@media only screen and (max-width: 699px) {
    .narrowShow {display:block; margin:0 auto 0 auto; }
}

															/* About pages */
.about p { line-height:3ex; }

#center-block-about {
	width:70%;
	margin: 0 auto;
	text-align:left;
  	@media only screen and (max-width: 719px) { width:92%; }
}
#center-block-about > h1:first-child { margin-top: 0.25em; }
#center-block-about > div.panel.note.center {
	width:100%;
	background-color: #dedede;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	padding: 0.25rem;
	margin: 1rem auto;
}
div.about {	
	margin-top:0;
	margin-bottom:1.5em; 
	text-align:left; 
}

.about span.right { float:right; }

															/* Policy sections */
#cook_policy { margin: 0 0 3rem 0; text-align: left; line-height:3ex; }
#priv_policy { margin: 0 0 3rem 0; text-align: left; line-height:3ex; }

															/* Replay page */
.replay-char {
	display:inline-block;
	font-size:2em;
	vertical-align: -4px;
}
.ul-replay { 
	margin-left:0.75rem; 
	line-height:3ex; 
	list-style-type: '\2713' ; 
}
.ul-replay li { padding-left:0.75rem; 
}

												/* Styles page -Deprecated- Redirected */
#main.styles > h1:first-of-type { margin-top:0; }
#main.styles > h2:first-of-type { margin-top:0; }

.styleImages {
 	display: block;
 	padding: 6px 0 0 0;
	width:85%;
	margin: 0 auto;	
}
.img_thumb p {
	margin-top: -8px;
	color: #0aa; 
	font-size: 1.2em;  
    text-align: center;
    font-family: "Lucida Grande", Arial, sans-serif; font-weight: 500; 
    width: 300px;
}

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

h1 { 
	color: #0aa; 
	font-size: 1.7em;  
	font-family: "Lucida Grande", Arial, sans-serif; font-weight: 500; 
	margin: 0.5em 0 0.3em 0; 
}
h1.main-heading {
	text-align:center;
	color:white;
	margin:0;
	font-family: "New Century Schoolbook", serif; 
	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);
}
h1.about { font-size:1.7em; margin-bottom:1.25rem; }

h2 { 
	color: #099; 
	font-size: 1.5em;  
	font-family: "Lucida Grande", Arial, sans-serif; font-weight: 500; 
	margin: 0.8em 0 0.5em 0; 
}
h3 { 	
	color: #0aa; 
	font-size: 1.2em;  
	font-family: "Lucida Grande", Arial, sans-serif; font-weight: 500; 
	margin: 0.8em 0 0.5em 0; 
}
h4 { 
	color: #0aa; 
	font-family: "Lucida Grande", Arial, sans-serif; font-weight: 500; 
	margin: 0.5em 0; 
}

hr {
	margin: auto; width:38%; height: 12px; border: 0;
    box-shadow: inset 0 12px 12px -12px rgba(0, 0, 0, 0.5);
}

.nobr { white-space:nowrap; }
.pointer { cursor:pointer; }

p, ul, ol, dl, table { margin-bottom: 0.75rem; }
p em 	{ background-color:yellow; font-style:normal; }
ul, ol	{ margin-left: 2em; }
ul.cols2 { 
	display: grid;
	grid-template-columns: 2fr 2.5fr; 
}
ul.cols2 > li:nth-child(even){
	list-style-type: '- ';
}
.smaller { font-size: smaller; }
.bit-bigger { font-size:1.2em; }
.left { text-align: left; }
.right { text-align: right; }
.leftcol { float: left;	width: 48%; }
.rightcol { float: right; width: 48%; }
.center { text-align: center; }
.center-margin { margin:0 auto 0 auto; }
.bold 	{ font-weight: bold; }
.boldred { font-weight: bold; color:red; }
.black { color:black; }
.red { color:red; }
.blue { color:blue; }
.purple { color:purple; }
.u-char { font-size:2.25rem; }
.u-char a { text-decoration:none; }
.iti { font-style:italic; }
.sup { vertical-align: super; }
.note { font-size: 90%; }
.cpu { color:#08c;font-size:0.75em; }
.cpu a { color:#08c; }
.cpu a:hover { color:#44d; }

code, .code {
	font-family: 'Lucida Console', 'Consolas', 'Arial Unicode MS', monospace;
	font-size:inherit; 
}

															/* 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: text-bottom; }

img.middle { vertical-align: middle; }

img.center {
	display: block;
	margin-left: auto; 
	margin-right: auto; 
	margin-bottom:0; 
}

															/* 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 */
.inline {display:inline-block;}

div.floatleft {
	float: left;
	margin-right: 30px;
}
div.floatright {
	float: right;
	margin-left: 30px;
}
div.center-left { 
	width:80%;
	margin: 0 auto;
	text-align: left; 
	line-height:1.3em
}

.panel { 
	width:85%;
	background-color: #dedede;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	padding: 0.625rem;
	margin: 1em auto;
}
.panel p { padding:0.375rem 1.5rem; margin-bottom:0;}
.info-panel {
	width:85%;
	background-color: #dedede;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	padding: 0.625rem;
	margin: 1rem auto 0.625rem auto;
	font-size:1.2em;
	line-height:3.3ex;
} /* Used in .shtml docs */

.paper {
	background-image: url(/img/paper.gif);
	width:67%;
	margin: 0 auto;
	padding:1.5rem;
	text-align: left;
}
.widepaper {
	background-image: url(./img/paper.gif);
	padding: 0.5rem 2rem;
	width: 66%;
	margin: 0 auto;
	margin-bottom:1.25rem;
	text-align: left; 
}

.coupon {
	width: 21.25rem;
	background:LemonChiffon;
	margin-left: auto; 
	margin-right: auto; 
	padding: 1.25rem;
	border: 4px dashed #f00; 
	list-style-image:none; 
	list-style-type:square; 
}
.testimonial {
	border: 2px solid #999999;
	border-right: 4px solid #000000;
	border-bottom: 4px solid #000000;
	padding:10px;
	background-color: #FFE6FE;
	margin: 10px auto 30px auto;
}
.yellowbox {
	border: 2px solid #999999;
	border-right: 4px solid #000000;
	border-bottom: 4px solid #000000;
	padding:10px;
	background-color: #faf9c1;
	margin: 10px auto 30px auto;
}
.whitebox {
	border: 2px solid #999999;
	border-right: 4px solid #000000;
	border-bottom: 4px solid #000000;
	padding:0.625rem;
	margin: 0.625rem auto 1.875rem auto;
}

.center66 {
	display: block;
	width:66%;
	margin-left: auto; 
	margin-right: auto; 
	margin-bottom:0.25rem;
}
.center75 {
	display: block;
	width:75%;
	margin-left: auto; 
	margin-right: auto; 
	margin-bottom:0.25rem;
}

															/* Lists */
.ul-tick { font-size:1.1em; line-height:3em; }
.ul-tick ul { list-style: none; margin-left: 0; padding-left: 0; }
.ul-tick li { padding-left: 1em; text-indent: -1em; }
.ul-tick li:before { content: '\2713'; padding-right: 5px;}

.circle-list li { list-style-type:circle; }	

															/* Buttons */
.Big-Play-Button {
	margin:42px auto 94px auto;
	padding:0.5rem 2rem;
	-moz-box-shadow:inset 0px 1px 3px 0px #91b8b3;
	-webkit-box-shadow:inset 0px 1px 3px 0px #91b8b3;
	box-shadow:inset 0px 1px 3px 0px #91b8b3;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #00b33c), color-stop(1, #009933));
	background:-moz-linear-gradient(top, #00b33c 5%, #009933 100%);
	background:-webkit-linear-gradient(top, #00b33c 5%, #009933 100%);
	background:-o-linear-gradient(top, #00b33c 5%, #009933 100%);
	background:-ms-linear-gradient(top, #00b33c 5%, #009933 100%);
	background:linear-gradient(to bottom, #00b33c 5%, #009933 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00b33c', endColorstr='#009933',GradientType=0);
	background-color:#00b33c;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #566963;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:2em;
	font-weight:bold;
	text-decoration:none;
	text-shadow:0px -1px 0px #2b665e;
}
.Big-Play-Button:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #6c7c7c), color-stop(1, #00b33c));
	background:-moz-linear-gradient(top, #009933 5%, #00b33c 100%);
	background:-webkit-linear-gradient(top, #009933 5%, #00b33c 100%);
	background:-o-linear-gradient(top, #009933 5%, #00b33c 100%);
	background:-ms-linear-gradient(top, #009933 5%, #00b33c 100%);
	background:linear-gradient(to bottom, #009933 5%, #00b33c 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#009933', endColorstr='#00b33c',GradientType=0);
	background-color:#6c7c7c;
	color:#ffffff;
}
.Big-Play-Button:active {
	position:relative;
	top:1px;
}

.Small-Play-Button {
	padding:0.5rem 0.75rem;
	-moz-box-shadow:inset 0px 1px 3px 0px #91b8b3;
	-webkit-box-shadow:inset 0px 1px 3px 0px #91b8b3;
	box-shadow:inset 0px 1px 3px 0px #91b8b3;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0099e6), color-stop(1, #0088cc));
	background:-moz-linear-gradient(top, #0099e6 5%, #0088cc 100%);
	background:-webkit-linear-gradient(top, #0099e6 5%, #0088cc 100%);
	background:-o-linear-gradient(top, #0099e6 5%, #0088cc 100%);
	background:-ms-linear-gradient(top, #0099e6 5%, #0088cc 100%);
	background:linear-gradient(to bottom, #0099e6 5%, #0088cc 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0099e6', endColorstr='#0088cc',GradientType=0);
	background-color:#0099e6;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #566963;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
	text-decoration:none;
	text-shadow:0px -1px 0px #2b665e;
}
.Small-Play-Button:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #6c7c7c), color-stop(1, #0099e6));
	background:-moz-linear-gradient(top, #0088cc 5%, #0099e6 100%);
	background:-webkit-linear-gradient(top, #0088cc 5%, #0099e6 100%);
	background:-o-linear-gradient(top, #0088cc 5%, #0099e6 100%);
	background:-ms-linear-gradient(top, #0088cc 5%, #0099e6 100%);
	background:linear-gradient(to bottom, #0088cc 5%, #0099e6 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0099e6',GradientType=0);
	background-color:#6c7c7c;
	color:#ffffff;
}
.Small-Play-Button:active {
	position:relative;
	top:1px;
}

															/* Print */
@media print{
  body{ background-color:#FFFFFF; background-image:none; color:#333; }
  #main{ width:100%;} 
  .noprint{ display:none;}
}

/* 	End	*/