.img-responsive {
	display:block;
	max-width:100%;
	height:auto
}
#gameListContainer{
	
	background-image:url('images/bg-details.gif');
	background-repeat:no-repeat;
	padding-top:30px;
}
div.ChessBoardInner60{
	border:3px solid #352f23;

}
div.chessBoardSquare_dark{
	background-image:url('images/piece-bg-60-wood2-dark.png');
}

div.chessBoardSquare_light{
	background-image:url('images/piece-bg-60-wood2-light.png');
}


a.ActiveTableChessMove{
	background-color:white;
	color:red;
}
table{
	font-size:0.8em;
}


#buttons{
	margin-top:5px;
	background-color:#DDD;
	padding:5px;
	clear:both;
	border:1px solid #DDD;
	border-left:1px solid #000;
	border-top:1px solid #000;
	height:20px;
	width:330px;	
	font-size:0.8em;		
}

input{
	width:50px;
	margin-right:2px;
	float:left;
	border:1px solid #000;
	background-color:#FFF;
}
#players,#activeMove{
	text-align:center;
	clear:both;
	font-size:1.3em;
	font-weight:bold;
	height:30px;
	width:550px;
	color:#FFF;
}
a{
	color:#363636;
	text-decoration:underline;
}

td.tableWidget_headerCell{
	background-color:#676767;
	color:#222;
	border-right:1px solid #666;
	border-left:1px solid #999;	
	border-top:1px solid #999;
	border-bottom:1px solid #999;	

}
div.widget_tableDiv{
	border:1px solid #444;
}
div.ChessMoveIndicator{
	border:3px solid #F9F340;
	opacity:0.5;
}



.moveDiv{
	float:left;
	width:96px;
	padding-right:2px;
}
.moveDiv table{
	padding:0px;
	font-size:12px;
}
.moveDiv td,.moveDiv tr{
	border:1px solid #000;
	padding:1px;
	margin:0px;
}
#rightColumn{			
	height:560px;
	width:420px;
}

	
#rightColumn .content{
	width:400px;
	height:541px;
	margin:6px;
	padding:3px;
	background-color:white;
	border:1px solid #000;
	border-right:1px solid #CCC;
	border-bottom:1px solid #CCC;
}

table,tr,td{
	border-collapse:collapse;
}

#playerStats table,.moveDiv table{
	width:100%;
	
}
#playerStats{
	margin-bottom:2px;
}
#playerStats div{
	position:relative;
}
#playerStats td,#playerStats tr{
	position:relative;
	border:1px solid #000;
	
}
#playerStats .label{
	position:absolute;
	left:0px;
	top:-9px;
}
#playerStats td{
	padding-top:8px;
}
a{
	text-decoration:none;
}

#bottomContainer{
	width:400px;
	clear:both;
}
#controls{		
	width:500px;
	height:30px;
	padding-top:5px;
	padding-left:7px;
	background-image:url('images/demo-4-button-bg.jpg');
	background-repeat:no-repeat;
}
#controls select{
	font-size:11px;
}
#controls td{
	padding-right:5px;
}
#controls tr,#controls td{
	vertical-align:top;
}
img{
	border:0px;
}
#activeComment{
	width:500px;
	padding:5px;
color:red;
font-weight:bold;
}

	#board{

		width:400px;
		height:400px;
		background-image:url('images/chessback.jpg');

		padding-top:14px;
		background-repeat:no-repeat;
		
	}
	#header{
		margin-top:5px;
		margin-left:10px;
		width:500px;
		height:30px;
		position:relative;	
		clear:both;
	}
	#hint{	
		color:#999;
		right:0px;
		top:0px;
	font-size:1.8em;
	}
	#hint a{
		color:#ff0000;
	}
	#hintInner{
	color:#222222;
font-weight:bold;
	}
	#gameInfo{
		font-size:1.2em;
		line-height:30px;
		color:#222;
		font-weight:bold;
		padding-left: 0px;
		
	}
	#hintContainer{
			width:400px;
		}
	#mainContainer{
		position:relative;
	}

	div.ChessMoveIndicator{
		border:4px solid #F9F340;
		opacity:0.5;
	}
	#loadingDiv{
		position:absolute;
		padding-top:5px;
		left:218px;
		top:300px;
		width:250px;
		height:80px;
		text-align:center;
		border:1px solid #000;
		background-color:#FFF;
		z-index:100000;
		line-height:45px;
		font-size:0.9em;

	}
	#loadingDiv div{
		height:30px;
	}



/* Css rules for board with 45x45 pixel squares */
.ChessBoardInner45{	/* The actual chess board div "medium size", i.e. 45x45 pixel squares */
	width:360px;
	height:360px;
	border:1px solid #000;
	top:0px;
}

.ChessBoard45{	/* Chess board for 45x45 pixel squares - total size of board including labels around the board (A-H,1-8) */ 
	width:375px;
	height:380px;
	padding:0px;

}
.ChessPiece45{	/* 45x45 pixel chess pieces */
	width:45px;
	height:45px;
}

.ChessBoardLabel{	/* Labels A-F, 1-8 around chess board */
	color:#222222;
	font-weight:bold;
	font-family:Trebuchet MS
}

.ChessBoardLabel45{	/* A-H,1-8 displayed at around the chess board */
	font-size:0.9em;
}
/* The labels around the board are assigned to class "ChessBoardLabel ChessBoardLabel<size>", so the two rules above will be combined */



.ChessMoveIndicator{	/* Square indicating where the last piece moved from and to */
	border:3px solid red;
}

a.ActiveInlineChessMove{	/* How to highlight active chess move in the inline list of moves */
	color:white;
	background-color:#333;
}

.ActiveTableChessMove{	/* How to highlight active chess move in the list of moves - "Table view" */
	color:white;
	background-color:#333;
}
span.InlineChessComment{
	font-style:normal;
	color:#00F;
	display:block;
	clear:both;
	font-size:0.8em;
}

.ActiveGameInTable{	/* Active game in list of games - table */
	font-weight:bold;
	background-color:#555;
	color:#FFF;
}
.ActiveGameInTable a{ /* A tag inside active game in gamelist table */
	color:#FFF;
}

.GameListOddRow{	/* List of games - odd rows in table */
	background-color:#FFF;
}
.GameListEvenRow{	/* List of games - even row in table */
	background-color:#E0E0E0;
}

.InlineChessVariationBlock{
	color:#777;
	display:block;
}
.InlineChessVariationBlock a{
	color:#777;
}
a.ActiveInlineVariationChessMove{
	color:white;
	background-color:#00F;	
}

/* How to indicate displayed good, bad, suprise and questionable inline moves */
.InlineChessMove_goodMove{	/* i.e. ! */
	color:blue;
}
.InlineChessMove_badMove{	/* i.e. ? */
	color:red;
}
.InlineChessMove_veryGoodMove{	/* i.e. !! */

}
.InlineChessMove_veryBadMove{	/* i.e. ?? */
	color:red;
}
.InlineChessMove_supriseMove{	/* i.e. !? */

}
.InlineChessMove_questionableMove{	/* i.e. ?! */

}