/*
  Theme Name: chessMYHTML5
  Theme URI: My WordPress chess theme
  Version: 1.0
  Author: Richard Dickinson
  Author URI: http://www.richard-dickinson.com
  Tags: simple, clean, fixed width, widget-ready, widgets, right sidebar, two columns, valid XHTML, valid CSS
  Licence: Private use only
  
*/

* html{margin:0;
padding:0;
}
header, nav, section, article, aside, footer {display:block;border:1px solid #bbb;padding:1em;width:80%;}
body {
	background: #CCC;
width:95%;
	background: url("images/chess.jpg");
}

#page{
border:3px solid black;
width:80%;
text-align:center;
background: #FFF;
margin-left: auto ;
margin-right: auto ;
 overflow:hidden;
	}

header{
 background: url("images/chessbeachheader880x150.jpg");
background-color:#F1D6AF;
width:98%;
height:155px;
padding:5px;margin:2px;
clear:both;
}
/* horizontal header nav */
nav {
padding: 0;
margin: 0;
text-align: center;
width:100%;
height:40px;
background-color: #1A5101;
}

nav ul
{
list-style-type: none;
height:40px;
display: inline;
background-color: #1A5101;
padding: 5px 0 5px 0;
white-space: nowrap;
font-family: Verdana, Arial, sans-serif;
font-size:14px;
margin:auto;
}

nav li
{
height:30px;
list-style-type: none;
display: inline;
}

nav li a
{
list-style-type: none;
padding: 3px;
}
nav a:link, nav a:visited
{
margin: 0 3px 0 3px;
padding: 1px;
color: #fff;
border: 1px solid #fff;
text-decoration: none;
}

nav a:hover
{
background-color: #DEF1DE;
color: #1A5101;
}

#container{
padding:5px;margin:2px;float:left;
    background: url("images/chessbg.jpeg");background-repeat:repeat-y;
    width:98%; 
   overflow:hidden;
      }
		
		section {width:65%;padding:5px;margin:2px;float:left;}
		aside {width:30%;padding:5px;margin:2px;float:right; list-style: none;}
		footer {background-color:#EFFBFF; width:98%;clear:both;padding:5px;margin:2px;float:left;}
			#headerid {font-family:Arial unicode MS;background-color:#D4DFCF;font-style:normal;}
		#identifier {font-family:Arial unicode MS;background-color:yellow;font-style:bold;}
		
h2.widgettitle{ background: url("images/wrooksidebartitle.gif");} 		
		
/****************
advanced comment styles

 
h3#comments,.comment-navigation,.comment-navigation:after,#respond:after,.comment-rss{display:block} 
ol.commentlist{width:100%} 
h3#comments,#respond h3{height:25px;text-align:left;background:#4c7faa;color:#fff;padding:5px 0 0 5px} 
ol.commentlist,li.authorcomment,li.comment,#respond h3,form#commentform,input#submit{margin:0}
ol.commentlist,ol.commentlist ul,form#commentform{padding:0}  
ol.commentlist{border-bottom:1px solid #ccc} 
ol.commentlist ul{margin:0 0 0 20px} 
li.authorcomment,li.comment,form#commentform textarea,form#commentform input{border:1px solid #ccc}
li.authorcomment,li.comment{padding:10px 0 0 10px;list-style:none;border-bottom:none} 
li.even{background:#fff} 
li.odd{background:#efefef} 
.authorcomment{background:#deebf9} 
ul.children ul{margin-left:20px} 
ul.children li{border-right:none} 
.vcard img{float:left;background:#c4c4c4} 
.vcard img,.comment-navigation .newer a,.comment-navigation .older a{padding:5px} 
.comment-meta,ol.commentlist li small,p.subscribe-to-comments label{position:relative} 
.comment-meta,ol.commentlist li small{top:10px;left:10px} 
.comment-text{margin:0 10px 0 0} 
.reply,.comment-navigation .newer,input#submit{float:right} 
.reply,.comment-navigation .newer a,.comment-navigation .older a,input#submit{background:#4c7faa} 
.reply{margin:0 10px 10px 0} 
a.comment-reply-link,.reply a:link,
.comment-navigation .newer a,.comment-navigation .older a,input#submit{display:inline-block;text-align:center;cursor:pointer;color:#fff} 
a.comment-reply-link,.reply a:link{padding:5px 0} a.comment-reply-link,.reply a:link,input#submit{width:70px} 
a.comment-reply-link:hover,.reply a:hover,.comment-navigation .newer a:hover,
.comment-navigation .older a:hover,input#submit:hover{background:#e7e7e7;text-decoration:none;color:#4c7faa;font-weight:bold} 
a.comment-reply-link:hover,.reply a:hover,input#submit:hover{width:68px} 
a.comment-reply-link:hover,.reply a:hover{padding:4px 0} 
a.comment-reply-link:hover,.reply a:hover,.comment-navigation .newer a:hover,.comment-navigation .older a:hover{border:1px solid #4c7faa} 
.comment-navigation{margin:10px 0 10px 0} .comment-navigation:after,#respond:after{content:".";height:0;visibility:hidden} 
.clear{clear:both} 
.comment-navigation .newer a:hover,.comment-navigation .older a:hover{padding:4px} 
form#commentform textarea,form#commentform input{padding:2px 3px} 
form#commentform textarea{width:442px} 
input#submit{padding:5px 0 !important;border:0 !important} 
input#submit,p.subscribe-to-comments input{outline:0} 
input#submit:hover{padding:4px 0 !important;border:1px solid #4c7faa !important} 
p.subscribe-to-comments{background:url('images/email_32.png') no-repeat} 
p.subscribe-to-comments,.comment-rss{height:32px;text-indent:42px;padding:5px 0 0 0} 
p.subscribe-to-comments input{margin:5px 3px 3px 3px !important;border:0} 
p.subscribe-to-comments label{top:-2px;color:#666} 
.comment-rss{background:url('images/rss_32.png') no-repeat} 
 
/*comment total styling
 
.comment-total{text-align: center;font-size: 1.5em;color: #fff;}
.comment-total span{font-size: 2em;color: #800000;}		
****************/


/*Html5 chessboard css*/
#wrapper{width:390px;}
#sectionhs1{
margin:60px;
width:450px;;
height:450px;
}

#coord {width:15px;
float:left;
}
#coord_bottom_bar {
width:335px;
height:25px;
margin:0;
}
#coord_bottom_bar ul li {
width:88px;
float:left;
display:inline;
height:40px;
}
#coord_bottom_bar_no {
display:inline;
height:20px;
padding:9px;
width:380px;
}
#coord_bottom ul {
float:left;
display:inline;
}

#coord_bottom ul li {
height:20px;
float:left;
display:inline;
}

#bottomboardcoord{
background:url(../images/marble.jpg);
	border:4px outset gray;
	float:left;
	width:700px;
	height:700px;
	position:relative;
	margin:115px;
	padding:7px 0 0 7px;
}
#leftboardcoord{
background:url(../images/marble.jpg);
	border:4px outset gray;
	float:left;
	width:700px;
	height:700px;
	position:relative;
	margin:115px;
	padding:7px 0 0 7px;
}
#board{
	background:url(../images/marble.jpg);
	border:4px outset gray;
	float:left;
	width:350px;
	height:350px;
	position:relative;
	margin:5px;
	padding:7px 0 0 7px;
}



	#board ul{
		height:40px;
		width:340px;
		position:relative;
		background-color:rgba(255,255,255,0.5);
		color:#222;
		font-size:14pt;
	}
	
	#board ul li{
		display:inline;
		float:left;
		position:relative;
		height:38px;
		width:38px;
		border:1px solid silver;
	}
	
	#board ul li:not(.selected){
	}
	
	#board ul li img{display:block; position:relative;}
	
	#board ul:nth-child(odd) li:nth-child(odd){background-color:rgba(0,0,0,0.5);}
	#board ul:nth-child(even) li:nth-child(even){background-color:rgba(0,0,0,0.5);}
	
	#board ul li img.active:hover{
		border:1px solid red;
		top:-1px;
		left:-1px;
	}
	
	#board ul:first-child div:hover{margin-top:0;}
	#board ul li:first-child:hover{margin-left:0;}
	
	#board ul li.legal{background-color:rgba(0,0,200,0.6) !important;}
		#board ul li.legal:hover{background-color:rgba(0,100,200,0.6) !important;}
	#board ul li.threat{background-color:rgba(200,0,0,0.6) !important;}

.label{
	position:absolute;
	bottom:0px;
	left:2px;
	z-index:100;
}

.selected{
	background-color:silver !important;
	border:1px solid purple;
	z-index:5;
}


#row .1 .2 .3 .4 .5 .6 .7 .8{
height:50px;
width: 450px;
float:left;
}

#col .1 .2 .3 .4 .5 .6 .7 .8{
height:450px;
width:50px;
float:right;
}

.lsq{
height:40px;
width:40px;
background-color:grey;
}

.dsq{

height:40px;
width:40px;
background-color:olive;
}

.coordbot_dsq{
height:20px;
width:60px;
padding:5px;
}
#leftcoord{
position:absolute;
	bottom:0px;
	left:2px;
	z-index:100;
	width:5px;
}




*[draggable=true]
{
float:left;
min-width: 20px;
min-height: 20px;
border: 2px solid black;
margin: 0;

font-weight:bold;

min-height:20px;
background-image: -webkit-gradient(linear,
             left top, left bottom,
color-stop(0.63, white),
             color-stop(0.92, rgb(5,161,245)));
                    background-image:-moz-linear-gradient(
                        center top,
                        white 10%,
                        rgb(5,161,245) 92%
                    );
             -webkit-background-size:1px 8px;
             -moz-background-size:1px 8px;
             background-size:1px 8px;
background-repeat:repeat;
}