/* page */
#game {
	background-color: white;
	border: 1px solid #808080;
	height: auto;
	margin: 5px auto;
	/*min-width: 940px;*/
	padding: 15px;
	text-align: center;
}

/* board */
.board {
    border: 1px solid black;
	display: inline-block;
    height: 504px;
	margin-bottom: 10px;
	vertical-align: top;
	width: 504px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* log */
.log {
	display: inline-block;
	height: 504px;
	float: right;
	overflow-y: scroll;
	text-align: left;
	vertical-align: top;
	width: 280px;
    font-family: monospace;
}
.log > ol {
	margin: 0 20px 0 0;
}
.log > ol span.player1 {
	color: #7092BE;
	font-weight: bold;
}
.log > ol span.player2 {
	color: #BE7092;
	font-weight: bold;
}

/* grid and cell */
.board .cell, .board .grid {
    display: inline-block;
	vertical-align: top;
}

/* grid */
.board .grid {
	border: 1px solid black;
	box-shadow: 0 0 5px 4px #FFFFFF inset;
	height: 156px;
	padding: 5px;
	width: 156px;
}
.board .grid.p1Insertable {
	box-shadow: 0 0 5px 4px #7092BE inset;
}
.board .grid.p2Insertable {
	box-shadow: 0 0 5px 4px #BE7092 inset;
}

/* overlay */
.board .grid .overlay {
	background: none;
	box-shadow: 0 0 0 1px #FFFFFF inset;
	height: inherit;
	pointer-events: none;
	position: absolute;
	width: inherit;
}
.board .grid.player1 .overlay {
    background-image: url('../media/player1.png');
	background-size: 100%;
}
.board .grid.player2 .overlay {
    background-image: url('../media/player2.png');
	background-size: 100%;
}

/* cell */
.board .cell {
	background-size: 100%;
	border: 1px black solid;
	height: 50px;
	width: 50px;
}
.board .grid.player1 .cell, .board .grid.player2 .cell {
    visibility: hidden;
}
.board .cell.player1 {
	background-image: url('../media/player1.png');
}
.board .cell.player2 {
	background-image: url('../media/player2.png');
}

.board .grid:not(.player1):not(.player2) .cell {
	cursor: pointer;
}