/**
 * Random Chess
 */

 
/*
   http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}



body {
	font-family: Arial, Helvetica, sans-serif; 
	font-size:.8em; 
	background-color: #ddd;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6');
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e6e6e6));
	background: -moz-linear-gradient(top, #fff, #e6e6e6);
}

h1 {font-size: 2em; font-weight: bold;}
h3 {font-size: 1.4em; font-weight: bold; margin: 2em 0 .5em;}
p {font-size: 1em; margin: 1em 0; line-height: 1.5em; color: #444;}
a, a:visited {color: #33466F; padding: 1px 2px;}
a:hover, a:focus {background-color: #07c; color: #fff; text-decoration: none;}

#container {
	margin: 20px auto;
	width: 1000px;
}

#graveyard {
	float: left;
	width: 135px;
	height: 480px;
	position: relative;
}

#graveyard .black {
	max-height: 240px;
	bottom:0;
	left:0;
	position: absolute;
}

#graveyard .white {
	max-height:240px;
	top:0;
	left:0;
	position: absolute;
}

#graveyard .col {
	width: 45px;
	height: 240px;
	float: left;
}

#graveyard .piece {
	width: 35px;
	height: 35px;
	margin: 5px;
	background: url('../_images/lil-pieces.png') no-repeat;
}

#graveyard .piece.white-P {background-position: -167px -34px;}
#graveyard .piece.white-N {background-position: -36px -34px;}
#graveyard .piece.white-B {background-position: -69px -34px;}
#graveyard .piece.white-R {background-position: -3px -34px;}
#graveyard .piece.white-Q {background-position: -102px -34px;}

#graveyard .piece.black-P {background-position: -167px 0;}
#graveyard .piece.black-N {background-position: -33px 0;}
#graveyard .piece.black-B {background-position: -68px 0;}
#graveyard .piece.black-R {background-position: -2px 0;}
#graveyard .piece.black-Q {background-position: -100px 0;}

#board {
	float: left;
	box-shadow: 0 0 10px #222;
	border: 1px solid #1A294B;
}

#board .square {
	width: 60px;
	height: 60px;
	float: left;
	border: 1px solid transparent;
}

#board div.row {
	height: 62px;
}

#board div.row:after {
	content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

#board .square.black {background-color:#33466F;}
#board .square.white {background-color: #fff;}
#board.disabled div.square.white {background-color: #eee;}
#board.disabled div.square.black {background-color: #333;}
#board div.square.white.possible {background-color: #CCEAF9;}
#board div.square.black.possible {background-color: #0D1B4C;}
#board div.square.white.hover {background-color: #D85D11; border: 1px solid #fec;}
#board div.square.black.hover {background-color: #D85D11; border: 1px solid #fec;}
#board div.square.searching {background-color: #d85d11 !important;}
#board div.square.moving-from  {
	border: 1px solid #fec;
	background-color: #f93;
}

#board .piece {
	width: 60px;
	height: 60px;
	background: url('../_images/pieces.png') no-repeat;
}

#board .piece.white-P {cursor: pointer; background-position: -287px -60px;}
#board .piece.white-N {cursor: pointer; background-position: -60px -60px;}
#board .piece.white-B {cursor: pointer; background-position: -117px -60px;}
#board .piece.white-R {cursor: pointer; background-position: -3px -59px;}
#board .piece.white-Q {cursor: pointer; background-position: -174px -58px;}
#board .piece.white-K {cursor: pointer; background-position: -232px -58px;}

#board .piece.black-P {background-position: -287px 0;}
#board .piece.black-N {background-position: -59px -4px;}
#board .piece.black-B {background-position: -116px -1px;}
#board .piece.black-R {background-position: -3px -4px;}
#board .piece.black-Q {background-position: -173px -3px;}
#board .piece.black-K {background-position: -230px -1px;}

#board.disabled div.piece {
	zoom: 1;
	filter: alpha(opacity=60);
	opacity: 0.6;
	cursor: auto;
}

#footer {padding: 20px 0 20px 135px; clear:both;color:#333; width: 496px;}
#header {padding: 0 0 20px 135px;}

#sidebar {float: left; width: 200px; padding-left:20px; position: relative;}
#sidebar div.player-cpu, #sidebar div.player-human, #sidebar div.message {position:absolute; left:20px;}
#sidebar div.player-cpu {top: 40px;}
#sidebar div.player-human {top:410px;}

#sidebar h2 {font-size: 2.8em; color: #ccc; font-weight: bold;}
#sidebar div.active h2 {color: #f93; padding-left: 20px; background: url('../_images/play.png') no-repeat center left;}

#sidebar div.message {
	top: 200px; 
	left: -10px; 
	padding: 30px 20px; 
	background-color:#FF9933; 
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	color: #000;
	box-shadow: 0 0 8px #000000, 0 0 25px #666666;
	width: 100%;
	display: none;
}

#sidebar div.message h2 {color: #000; font-size: 3.2em;}
#sidebar div.message p {font-size: 1.1em; margin:0; color: #000;}

#footer p.arrow:before {
	content: "»"; 
	padding: 0 .25em; 
	color:#FF9933; 
	font-weight: bold; 
	font-size: 1.3em;
	text-decoration: none;
}