@import url(//fonts.googleapis.com/css?family=Open+Sans);

* {-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;} /* So 100% means 100% */
body {position:absolute; width:100%; height:100%; margin:0; padding:0; font-family:Open Sans;}
.clear {clear:both;}

a {text-decoration:none; cursor: pointer; color:#0BF;}
ul {margin:0; padding:0; list-style:none;}

.button {display:inline-block; padding:10px 20px; background-color:#0BF; color:#FFF !important;}

#messages {background-color:#FFFEAA; padding:10px; text-align:center;}
#messages ul {color:#444;}
#messages ul li {}
#m_success {color:#339900;}
#m_notification {color:#3366CC;}
#m_error {color:#FF0000;}

/* Wrapper */
.hwrapper {background-color:#FAFAFA; height:50px;}
.hwrapper .header {line-height:50px; margin:0 auto; width:800px;}

.logo {float:left; line-height:1.1em; margin-top:3px;}
	.logo a {color:#777; font-size:1.5em; text-decoration:none; -webkit-transition:color 300ms ease-out; -moz-transition:color 300ms ease-out; transition:color 300ms ease-out;}
		.logo a:hover {color:#444;}
		.logo a .fa {color:#5B72EA; -webkit-transition:color 300ms ease-out; -moz-transition:color 300ms ease-out; transition:color 300ms ease-out;}
			.logo a:hover .fa {color:#40D0C0 !important;}
	.logo small {color:#AAA; font-size:0.8em;}

/* Header Nav */
ul.hnav {position:relative; list-style:none; margin:0; margin-left:200px; text-transform:uppercase; font-size:13px;}
.hnav li {float:left; margin-right:30px; list-style:none;}
	.hnav li .fa {padding-left:5px;}
	.hnav li a {text-decoration:none; font-size:14px; color:#999; -webkit-transition:color 200ms ease-out; -moz-transition:color 200ms ease-out; transition:color 200ms ease-out;}
		.hnav li a.button {display:inline;}
		.hnav li.user a {color:#1CC1F7;}
		.hnav li.highlight a {color:#f2ecde; background-color:#53A270; padding:12px 20px;}
			.hnav li.highlight a i {margin-left:5px;}
				.hnav li.highlight a i:first-child {margin-left:0;}
		.hnav li a:hover, .hnav li.selected a {color:#3592dd;}
.hnav ul.right {float:right; padding:0;}
.hnav li.last {margin-right:0;}

/* Lightbox */
.flist input[type="text"], .flist input[type="password"], .flist textarea {background-color:#ecf2f4; color:#555;}
	.flist input[type="button"]:hover, .flist input[type="submit"]:hover {cursor:pointer; opacity:0.9;}
.lbox input, .lbox textarea {padding:15px 20px; margin-bottom:5px; font-size:1.2em; border:none; width:100%;}

.lbox .cbox {margin:25px; background-color:#FFF; border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; padding:25px; color:#444;}
	.lbox .cbox .icon {color:#f96145; font-size:100px; margin:0 0 10px; display:block; text-align:center;}
	.lbox .cbox h3 {margin-top:0; text-align:center; color:#999; font-size:2em;}

/* Content */
.cwrapper {background-color:#FFF; color:#111;}
	.cwrapper.alt {background-color:#FAFAFA;}
	.cwrapper .content {position:relative; margin:0 auto; padding:25px 0; width:800px;}
	.cwrapper .content h2 {color:#111; margin:0 0 25px; padding:0 0 5px; font-weight:normal; font-size:2.5em; border-bottom:1px solid #CCC;}
	.cwrapper .content p {color:#333;}

	/* Footer */
.fwrapper {height:50px;}
.fwrapper .footer {margin:25px auto 0; color:#777; padding:5px; width:800px; text-align:center; border-top:1px solid #EEE;}



	/* Old Game Board? */
.prev_last_play{
	color: orange;
}
.last_play{
	color: red;
}

.recent_game{
	border-bottom:1px solid #EEE;
	padding:5px 0;
}
.recent_game div{
	display: inline-block;
}

.start{
	width:15%;
}

.u1{
	width:15%;
}

.u2{
	width:15%;
}

.result{
	width:50%;
}


/* New Game Board */

.bwrapper {background-color:#40D0C0;}

.sbar {height:50px; line-height:50px; text-align:center; background-color:#0D74A1; color:#FFF;}

.board {
	position:relative;
	width:100vw; 
	height:100vw;
	max-height:calc(100vh - 100px);
	max-height:-moz-calc(100vh - 100px);
	max-height:-webkit-calc(100vh - 100px);
	max-width:calc(100vh - 100px);
	max-width:-moz-calc(100vh - 100px);
	max-width:-webkit-calc(100vh - 100px);
	margin:0 auto;
}
.board .overlay {display:none; position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; background-color:#111; color:#FFF; -webkit-transition:background-color 200ms ease-out; opacity:0.8;} /*border-radius:5px;*/
.board .show {display:inline-block !important;}
.board:hover {cursor:pointer;}

/*.board div.overlay div {position:absolute; margin:auto; left:0; bottom:0; right:0; top:0; text-align:center; font-size:6vw;} old way*/
.board div.overlay div {position:relative; top:50%; text-align:center; font-size:2vw; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%);}

.board ul {
	position:relative;
	float:left;
	padding:2px;
	margin:0;
	list-style:none;
	width:33.333%;
	height:33.333%;
	width:calc(100%/3);
	width:-moz-calc(100%/3);
	width:-webkit-calc(100%/3);
	height:calc(100%/3);
	height:-moz-calc(100%/3);
	height:-webkit-calc(100%/3);
	/*border-radius:7px;*/
	
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	-webkit-flex-flow: row wrap;
	-moz-flex-flow: row wrap;
	-ms-flex-flow: row wrap;
	flex-flow: row wrap;
	justify-content: space-around;

	transition:transform 1s;
}
/*.board ul:hover {opacity:0.9;} temp disabled for mobile testing*/

.board ul.expand {position:absolute; top:0; width:100%; height:100%; z-index:2; background-color:#000; transform:rotate(360deg); animation:expand-animate 1s;}
	.board ul.expand li div {font-size:22vmin;}
		.board ul.expand:hover {opacity:1;}

@keyframes expand-animate {
	0% {
		transform:rotate(360deg);
	}
	100% {
		transform:rotate(360deg);
	}
}

.board ul li {
	position:relative;
	padding:2px;
	color:#333;
	width:33.333%;
	height:33.333%;
	width:calc(100%/3);
	width:-moz-calc(100%/3);
	width:-webkit-calc(100%/3);
	height:calc(100%/3);
	height:-moz-calc(100%/3);
	height:-webkit-calc(100%/3);
	font-size:100%;
	text-align:center;
}

.board ul li div {background-color:#FFF; width:100%; height:100%; font-size:7vmin; line-height:10vmin; -webkit-transition:background-color 200ms ease-out;} /*border-radius:5px;*/
	/*.board ul li div:hover {background-color:#444; color:#FFF;} temp disabled for mobile testing*/

	.board ul li div .fa {display:block; display:none; position:relative; top:50%; margin:auto; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%);}

	.board ul li div.sub_grid .fa.x {line-height:150%;}
	.board ul li div.sub_grid .fa.o {line-height:145%;}

	.board ul li.overlay {z-index:1;}
	.board ul li.overlay div {background:none;}
	/*.board ul li.overlay .fa {position:absolute; margin:auto; left:0; bottom:0; right:0;}*/
	.board ul li.overlay .fa.x {color:#0077FF; font-size:475%;}
	.board ul li.overlay .fa.o {color:#EA0000; font-size:385%;}



@media (max-width: 960px){
	html {-webkit-text-size-adjust:none; /* Prevent font scaling in landscape */}

	.board ul {padding:1px;}
	.board ul li {padding:1px;}

}