html {
	font-family: arial,sans-serif;
	background-color: #d0d0d0;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* 
 * containers
 */
#tt-frame {
	margin: 0 auto;
	width: 24em;
	height: 24em;
	position: relative;
	background-color: gray;
	z-index: 4;
}

#tt-container {
	text-align: center;
	margin-top: 2em;
}

/* 
 * interface 
 */
.tt-ui-btn {
	margin: 1em;
	padding: .7em;
	background-color: #78a4ba;
	color: #fff;
	text-decoration: none;
	-webkit-border-radius: .2em;
	-moz-border-radius: .2em;
	border-radius: .2em;
	-webkit-box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.65);
	-moz-box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.65);
	box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.65);
	transition: background-color .25s;
}

.tt-ui-btn:hover {
	background-color: #568da9;
}

.tt-ui-msg {
	padding: .125em .125em .5em;
	margin: 1em auto -.25em;
	font-size: 2em;
	width: 11em;
	color: #fff;
	background-color: #9bc;
	-webkit-border-radius: .2em;
	-moz-border-radius: .2em;
	border-radius: .2em;
}

#tt-scores {
	padding: .5em .125em .125em;
	margin: -.25em auto 1em;
	font-size: 1.5em;
	width: 15em;
	color: #fff;
	background-color: #9bc;
	-webkit-border-radius: .2em;
	-moz-border-radius: .2em;
	border-radius: .2em;
}

#tt-scores span {
	color: #ccdde5;
	margin: 1em;
}

/* 
 * x/o tiles
 */
.tt-box {
	float: left;
	width: 7.75em;
	height: 7.75em;
	margin: .125em;
	padding: .125em;
	text-align: center;
	border: .2em inset #a0a0a0;
/* include the border in sizing*/
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

.tt-box-inner {
	vertical-align: middle;
	font-family: arial,sans-serif;
}

.tt-box-inner > p {
	font-size: 6em;
	padding: 0;
	margin: 0;
}

.tt-btn:link {
	color: #fff;
}

.tt-btn:visited {
	color: #fff;
}

.tt-btn:hover {
	color: #fff;
}

.tt-btn:active {
	color: #fff;
}

/* 
 * 'win' styles and animations 
 */
.tt-win-line:nth-child(1) {
	position: absolute;
	height: 20em;
	border: .5em solid #4b0082;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	transform: rotate(90deg);
	left: 48.75%;
	top: -26.5%;
}

.tt-win-line:nth-child(2) {
	position: absolute;
	height: 20em;
	border: .5em solid blue;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	transform: rotate(90deg);
	left: 48.75%;
	top: 7%;
}

.tt-win-line:nth-child(3) {
	position: absolute;
	height: 20em;
	border: .5em solid green;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	transform: rotate(90deg);
	left: 48.75%;
	top: 40.25%;
}

.tt-win-line:nth-child(4) {
	position: absolute;
	height: 20em;
	border: .5em solid red;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	left: 15.5%;
	top: 7.5%;
}

.tt-win-line:nth-child(5) {
	position: absolute;
	height: 20em;
	border: .5em solid orange;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	left: 49%;
	top: 7.5%;
}

.tt-win-line:nth-child(6) {
	position: absolute;
	height: 20em;
	border: .5em solid #ff0;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	left: 82.25%;
	top: 7.5%;
}

.tt-win-line:nth-child(7) {
	position: absolute;
	height: 28em;
	border: .5em solid #000;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	transform: rotate(-45deg);
	left: 49%;
	top: -9.5%;
}

.tt-win-line:nth-child(8) {
	position: absolute;
	height: 28em;
	border: .5em solid #ee82ee;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	transform: rotate(45deg);
	left: 49%;
	top: -9.5%;
}

.tt-box-blink {
	-webkit-animation-name: blink;
	-moz-animation-name: blink;
	animation-name: blink;
	-webkit-animation-duration: .5s;
	-moz-animation-duration: .5s;
	animation-duration: .5s;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

@-webkit-keyframes blink {
	0% {
		background-color: gray;
	}

	20% {
		background-color: red;
	}

	40% {
		background-color: gray;
	}

	60% {
		background-color: red;
	}

	80% {
		background-color: gray;
	}
}

@-moz-keyframes blink {
	0% {
		background-color: gray;
	}

	20% {
		background-color: red;
	}

	40% {
		background-color: gray;
	}

	60% {
		background-color: red;
	}

	80% {
		background-color: gray;
	}
}

@keyframes blink {
	0% {
		background-color: gray;
	}

	20% {
		background-color: red;
	}

	40% {
		background-color: gray;
	}

	60% {
		background-color: red;
	}

	80% {
		background-color: gray;
	}
}

.tt-box-win {
	-webkit-animation-name: win;
	-moz-animation-name: win;
	animation-name: win;
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	animation-duration: 2s;
/* play animation once, then stay green until a newgame starts */
	-webkit-animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
}

@-webkit-keyframes win {
	0% {
		background-color: gray;
	}

	20% {
		background-color: #568da9;
	}

	40% {
		background-color: gray;
	}

	60% {
		background-color: #568da9;
	}

	80% {
		background-color: gray;
	}

	100% {
		background-color: #568da9;
	}
}

@-moz-keyframes win {
	0% {
		background-color: gray;
	}

	20% {
		background-color: #568da9;
	}

	40% {
		background-color: gray;
	}

	60% {
		background-color: #568da9;
	}

	80% {
		background-color: gray;
	}

	100% {
		background-color: #568da9;
	}
}

@keyframes win {
	0% {
		background-color: gray;
	}

	20% {
		background-color: #568da9;
	}

	40% {
		background-color: gray;
	}

	60% {
		background-color: #568da9;
	}

	80% {
		background-color: gray;
	}

	100% {
		background-color: #568da9;
	}
}

.tt-line-win {
	-webkit-animation-name: line-win;
	-moz-animation-name: line-win;
	animation-name: line-win;
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	animation-duration: 2s;
/* play animation once, then stay green until a newgame starts */
	-webkit-animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-fill-mode: forwards;
}

@-webkit-keyframes line-win {
	0% {
		border: .25em solid gray;
	}

	20% {
		border: .25em solid silver;
	}

	40% {
		border: .25em solid gray;
	}

	60% {
		border: .25em solid silver;
	}

	80% {
		border: .25em solid gray;
	}

	100% {
		border: .25em solid silver;
	}
}

@-moz-keyframes line-win {
	0% {
		border: .25em solid gray;
	}

	20% {
		border: .25em solid silver;
	}

	40% {
		border: .25em solid gray;
	}

	60% {
		border: .25em solid silver;
	}

	80% {
		border: .25em solid gray;
	}

	100% {
		border: .25em solid silver;
	}
}

@keyframes line-win {
	0% {
		border: .25em solid gray;
	}

	20% {
		border: .25em solid silver;
	}

	40% {
		border: .25em solid gray;
	}

	60% {
		border: .25em solid silver;
	}

	80% {
		border: .25em solid gray;
	}

	100% {
		border: .25em solid silver;
	}
}