#chess {
	width: 512px;
	height: 512px;
	border: 4px solid #000
}
#chess div {
	width: 64px;
	height: 64px;
	float: left;
	position: relative
}
#chess div:nth-of-type(16n+16),
#chess div:nth-of-type(16n+14),
#chess div:nth-of-type(16n+12),
#chess div:nth-of-type(16n+10),
#chess div:nth-of-type(16n+7),
#chess div:nth-of-type(16n+5),
#chess div:nth-of-type(16n+3),
#chess div:nth-of-type(16n+1) {   
    background-color: #ccc
}
#chess div:nth-of-type(8n+1) {  
    clear: left
}
#chess > div > span {
	display: block;
	width: 60px;
	height: 60px;
	position: absolute;
	top: 2px;
	left: 2px
}
.shadowed {
	filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=2, OffY=2, Color='#444')";
	filter: url(#drop-shadow);
	-webkit-filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.5));
	filter: drop-shadow(2px 2px 5px rgba(0,0,0,0.5))
}
.selected {
	background-color: #0f0
}
.options-pointer {
	cursor: pointer
}
.modalDialog {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999
}
.modalDialog > div {
    width: 400px;
    position: relative;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border-radius: 10px;
    background: #fff;
    background: -moz-linear-gradient(#fff, #999);
    background: -webkit-linear-gradient(#fff, #999);
    background: -o-linear-gradient(#fff, #999)
}
.close {
    background: #606061;
    color: #fff;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000
}
.close:hover {
    background: #00d9ff
}
.RookBlack,
.PawnBlack,
.KnightBlack,
.KingBlack,
.BishopBlack,
.QueenBlack,
.RookWhite,
.KnightWhite,
.PawnWhite,
.KingWhite,
.BishopWhite,
.QueenWhite {
	background: url('/src/img/chess.png') no-repeat
}
.KnightBlack { background-position: -60px -120px }
.RookBlack { background-position: -120px -60px }
.KnightWhite { background-position: -180px 0px }
.PawnWhite { background-position: -120px 0px }
.KingWhite { background-position: 0px -60px }
.BishopWhite { background-position: -60px -60px }
.QueenWhite { background-position: -60px 0px }
.PawnBlack { background-position: 0px -120px }
.KingBlack { background-position: -120px -120px }
.BishopBlack { background-position: -180px -120px }
.QueenBlack { background-position: -180px -60px }
.RookWhite { background-position: 0px 0px }
@media screen and (max-width: 360px) {
	#chess {
		width: 288px;
		height: 288px
	}
	#chess div {
		width: 36px;
		height: 36px
	}
	#chess > div > span {
		width: 32px;
		height: 32px
	}
	.modalDialog > div {
	    width: 280px
	}
	.RookBlack,
	.PawnBlack,
	.KnightBlack,
	.KingBlack,
	.BishopBlack,
	.QueenBlack,
	.RookWhite,
	.KnightWhite,
	.PawnWhite,
	.KingWhite,
	.BishopWhite,
	.QueenWhite {
		background-size: 128px 96px
	}
	.RookBlack { background-position: -64px -32px }
	.PawnBlack { background-position: 0px -64px }
	.KnightBlack { background-position: -32px -64px }
	.KingBlack{ background-position: -64px -64px }
	.BishopBlack{ background-position: -96px -64px }
	.QueenBlack{ background-position: -96px -32px }
	.RookWhite { background-position: 0px 0px }
	.KnightWhite { background-position: -96px 0px }
	.PawnWhite { background-position: -64px 0px }
	.KingWhite { background-position: 0px -32px }
	.BishopWhite { background-position: -32px -32px }
	.QueenWhite { background-position: -32px 0px }
}
.SideWhite,
.SideBlack {
	font: Arial, Helvetica, sans-serif;
	font-weight: bold;
	border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px
}
.SideWhite {
	padding: 4px;
	padding-bottom: 2px;
	background-color: #000;
	color: #fff;
}
.SideBlack {
	padding: 3px;
	padding-bottom: 1px;
	border: 1px solid #999;
	background-color: #fff;
	color: #000
}