connect4.css

/* game board table */
h1 {
	margin: 5% 40%;
	width: 20%;
	font-family: fantasy;
	display: inline-block;
	text-align: center;
}
#board {
	margin: 0 auto;
}

#board td {
	width: 50px;
	height: 50px;
	border: solid 1px #666;
	margin: 0 auto;
}

/* pieces are div within game table cells: draw as colored circles */

.piece {
	/* TODO: make into circles */
	margin: 5px;
	width: 80%;
	height: 80%;
	border-radius: 50%;
}

/* TODO: make pieces red/blue,  depending on player 1/2 piece */
.player1 {
	background-color: blue;
}

.player2 {
	background-color: red;
}

/* column-top is table row of clickable areas for each column */

#column-top td {
	border: dashed 1px lightgray;
}

#column-top td:hover {
	background-color: gold;
}