body
{
	font-family: Arial;
	margin: 0px;
	background: #ddeeff;
}

#board
{
	margin: 10px 0px 0px 10px;
	overflow-x: hidden;
	overflow-y: hidden;
	float: left;
	-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	background: #ffffff;
}

#history
{
	background: #ffffff;
	float: left;
	margin: 10px 10px 0px 10px;
	padding: 10px;
	border: 1px solid #aabbcc;
	-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	font-size: 8pt;
	width: 320px;
}

#historywhite
{
	float: left;
	width: 160px;
}

#historyblack
{
	float: left;
	width: 160px;
}

.historyhead
{
	margin-top: 0px;
	font-weight: bold;
}

.historyitem
{
	padding: 0px 20px 0px 0px;
	margin: 0px;
}

#currentmove
{
	background: #ffffff;
	float: left;
	margin: 10px 10px 0px 10px;
	padding: 10px;
	border: 1px solid #aabbcc;
	-webkit-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	-moz-box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	box-shadow: 7px 7px 5px 0px rgba(50, 50, 50, 0.75);
	font-size: 8pt;
	width: 320px;
}

.highlight
{
	border-color: #00dd00 !important;
}

.take
{
	border-color: #dd0000 !important;
}

.piece
{
	position: absolute;
}

.white
{
	background: rgba(242,246,248,1);
	background: -moz-linear-gradient(-45deg, rgba(242, 246, 248, 1) 0%, rgba(216, 225, 231, 1) 26%, rgba(181, 198, 208, 1) 71%, rgba(224, 239, 249, 1) 100%);
	background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(242, 246, 248, 1)), color-stop(26%, rgba(216, 225, 231, 1)), color-stop(71%, rgba(181, 198, 208, 1)), color-stop(100%, rgba(224, 239, 249, 1)));
	background: -webkit-linear-gradient(-45deg, rgba(242, 246, 248, 1) 0%, rgba(216, 225, 231, 1) 26%, rgba(181, 198, 208, 1) 71%, rgba(224, 239, 249, 1) 100%);
	background: -o-linear-gradient(-45deg, rgba(242, 246, 248, 1) 0%, rgba(216, 225, 231, 1) 26%, rgba(181, 198, 208, 1) 71%, rgba(224, 239, 249, 1) 100%);
	background: -ms-linear-gradient(-45deg, rgba(242, 246, 248, 1) 0%, rgba(216, 225, 231, 1) 26%, rgba(181, 198, 208, 1) 71%, rgba(224, 239, 249, 1) 100%);
	background: linear-gradient(135deg, rgba(242, 246, 248, 1) 0%, rgba(216, 225, 231, 1) 26%, rgba(181, 198, 208, 1) 71%, rgba(224, 239, 249, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f6f8', endColorstr='#e0eff9', GradientType=1);
	width: 100px;
	height: 100px;
	float: left;
	border: 3px solid #ffffff;
	border-radius: 0px;
}
.white:hover
{
	border: 3px solid #ffcc00;
}
.whitepiece
{
	position: absolute;
}

.black
{
	background: rgba(179, 220, 237, 1);
	background: -moz-linear-gradient(-45deg, rgba(179, 220, 237, 1) 0%, rgba(41, 184, 229, 1) 69%, rgba(188, 224, 238, 1) 100%);
	background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(179, 220, 237, 1)), color-stop(69%, rgba(41, 184, 229, 1)), color-stop(100%, rgba(188, 224, 238, 1)));
	background: -webkit-linear-gradient(-45deg, rgba(179,220,237,1) 0%, rgba(41 ,184, 229, 1) 69%, rgba(188,224,238,1) 100%);
	background: -o-linear-gradient(-45deg, rgba(179, 220, 237, 1) 0%, rgba(41, 184, 229, 1) 69%, rgba(188, 224, 238, 1) 100%);
	background: -ms-linear-gradient(-45deg, rgba(179, 220, 237, 1) 0%, rgba(41, 184, 229, 1) 69%, rgba(188, 224, 238, 1) 100%);
	background: linear-gradient(135deg, rgba(179, 220, 237, 1) 0%, rgba(41, 184, 229, 1) 69%, rgba(188, 224, 238, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3dced', endColorstr='#bce0ee', GradientType=1);
	width: 100px;
	height: 100px;
	float: left;
	border: 3px solid #000000;
	border-radius: 0px;
}
.black:hover
{
	border: 3px solid #ffcc00;
}
.blackpiece
{
	position: absolute;
}

div 
{
	transition-duration: 0.25s;
}

img
{
	transition: transform 0.25s;
}
img:hover
{
	transform: translate(3px, -3px);
}