html, body {
	height: 100%;
}
body {
	margin: 0;
	background-color: #f5f5f5;
	font-family: Arial;
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	cursor: default;
}
header {
	height: 40px;
	background: linear-gradient(#acf, #8bf);
}
button {
 outline:none;
 margin: auto;
 display: block;
 background: linear-gradient(#fff, #ccc);
 border-radius: 5px;
 border: 1px solid #ccc;
 color: #111;
 width: 70%;
 height: 35px;
 font-size: 1.5em;
}
#settings-screen {
	text-align: center;
	height: 100%;
}
#settings-screen:before {
 	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
}
#settings-screen > div {
	display: inline-block;
	vertical-align: middle;
	width: 300px;
}
#settings-screen .intro {
	text-align: center;
	margin-bottom: 15px;
	font-size: 1.1em;
}
#settings-screen #continue-game {
	display: none;
	border-bottom: 1px solid #999;
	padding-bottom: 15px;
	margin-bottom: 15px;
}
#settings-screen select {
	width: 170px;
	background: linear-gradient(#fff, #ddd);
	border-radius: 4px;
	padding: 2px 3px 2px 3px;
}
#settings-screen #newgame {
	margin-top: 10px;
	background: linear-gradient(hsl(120, 100%, 96%), hsl(120, 80%, 65%));;
}
#settings-screen #continuegame {
	background: linear-gradient(hsl(60, 100%, 96%), hsl(60, 70%, 50%));;
}
#settings-customsize {
	display: none;
}
.settings-display {
	text-align: center;
	color: #666;
	font-weight: bold;
}
#game-screen {
	position: absolute;
	left: 0; right: 0;
	top: 0; bottom: 0;
	margin: auto;
	width: 300px;
	height: 455px;
}
#container {
	background-color: #aaa;
	box-sizing: border-box;
	position: relative;
	padding: 1px;
}
#container span {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	background-color: white;
	margin: 1px;
	color: #444;
}
#container span.hil {
	background-color: #fffff0;
}
#container span.lastmove, #container span.draw {
	background-color: #eff7ff; /* e8f4ff? */
}
#container span.loserow {
	background-color: #ffe8e8;
}
#container span.winrow {
	background-color: #CBFFCB;
}
#container span.hover {
	color: #bbb;
}
#thinking-overlay {
	display: none;
	background-color: rgba(192,192,192, 0.3);
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	height: 100%;
}
#status-table {
	margin-top: 12px;
	width: 100%;
	border-collapse: collapse;
}
#status-table td {
	padding: 0;
}
#statussayer {
	padding-top: 18px;
    font-weight: bold;
    color: #333;
    text-align: center;
}
#resultsayer {
	display:none;
	width: 100%;
	text-align: center;
	font-size: 30px;
	margin-top: 22px;
}
#retrybutton {
	display: none;
	margin-top: 10px;
}
#resultsayer.lose {
	color: #b20000;
}
#resultsayer.win {
	color: #00b200;
}
#resultsayer.draw {
	color: #0000b2;
}
#nextsayer {
    float: left;
    text-align: left;
    color: #999;
    font-weight: bold;
    font-size: 0.9em;
}
#nextsayer2 {
    float: right;
    text-align: right;
    color: #999;
    font-weight: bold;
    font-size: 0.9em;
}
#nextsayer .sayer, #nextsayer2 .sayer {
	background-color: white;
	display: inline-block;
	color: #777;
	font-size: 25px;
	text-align: center;
	width: 28px;
	border: 1px solid #bbb;
}
#nextsayer .sayer.active, #nextsayer2 .sayer.active  {
	color: black;
	background: #def;
	border: 1px solid #bbb;
}
#back-to-menu {
	margin-bottom: 10px;
	width: 70px;
	border: 1px solid #ccc;
	padding: 7px;
	color: #666;
}
#back-to-menu span {
	padding-left: 10px;
	cursor: pointer;
}