/* Note: lang attributes are used instead of classes because it takes fewer characters to access in JS */
body {
	background: #35c;
	text-align: center;
}
b { /* Used instead of div because it's less characters */
	display: block;
}
#b { /* board */
	margin: auto;
	border: 1px solid black;
	background: #ff3;
	position: relative;
	top: -56px; /* Swap position of #b and #p (for some reason non-table elements put in a table end up above) */
}
#b td, #p {
	width: 52px;
	height: 52px;
}
#b td {
	border: 4px solid #ff3;
	border-radius: 33px;
	cursor: pointer;
	height: 62px; /* Only needed when not using doctype html */
}
#p { /* current player */
	border: 1px solid black;
	border-radius: 27px;
	margin: auto;
	position: relative;
	top: 390px;
}
[lang=b] { /* blank */
	background: white;
	background: radial-gradient(circle, #fff 67%, #000 68%);
}
[lang=p] { /* player 0 */
	background: #222;
	background: radial-gradient(circle, #444 0%, #222 50%, #000 100%);
}
[lang=q] { /* player 1 */
	background: #c44;
	background: radial-gradient(circle, #c55 0%, #c33 50%, #c11 67%);
}
#b [lang=q] {
	background: radial-gradient(circle, #c55 0%, #c33 50%, #c11 67%, #000 68%);
}
[lang=p], [lang=q] {
	pointer-events: none; /* Removes need to detect full columns in JS */
}
#m { /* msg */
	display: inline-block;
	width: 256px;
	vertical-align: top;
	margin: auto;
	font: 20px sans-serif;
	text-align: center;
	background: white;
	border: 1px solid black;
	margin-top: 8px;
	padding: 4px;
	margin-right: 8px;
	position: relative;
	top: 50px;
	left: -102px;
}
/* Reduces amount of HTML/JS needed for messages */
#m[lang=m1]:after { content: "goes first"; }
#m[lang=m2]:after { content: "player's turn"; }
#m[lang=m3]:after { content: "player wins!"; }
#m[lang=m4]:after { content: "Full board - tie game!"; }