#mainContainer{
	font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;	/* Font to use */
	text-align:center;
	width: 600px;
	font-size: 1.2em;
}
h1, h2, h3 { margin:0.3em 0em; }

#theBoard{	/* Container for the board */
	position:relative;	/* Don't remove this value - it makes sure that pieces are positioned correctly */
	display:none;	/* Initially hide the board */
	float:left;	
	width:370px;	/* width and height of board div */
	height:374px;
	
}
#heading{ /*used as margin - no logo at now*/ height:20px;
	margin-left:-10px;	/* The dhtmlgoodies heading should be positioned at the left border of #mainContainer. mainContainer have padding:10px so we use margin-left:-10px to move the logo to the left border */
}
#mainContainer{	/* Main container */
	margin-top:15px;	/* Space at top */
	margin-left:auto;	/* Center align this container */
	margin-right:auto;	/* Center align this container */
	text-align:left;	/* Align text to left. Override the inherited text-align:center attribute set for body */
	border:3px double #000;	/* 3 pixel double black border */
	padding:10px;	/* Space between border and text inside */
	background-color:#FFF;	/* White background color */
}

#helpContainer{	/* Container at the right side of board */
	float:left;	/* Position it next to the board */
	width:200px;
	padding-left:10px;	/* 10 pixel space at left */
}
#boardPieces{	/* Div for the pieces */
	position:absolute; /* Don't change this value */
	left:29px;	/* Don't change these values unless you're implementing a new board and new pieces */
	top:25px;
	width:304px;
	height:304px;
	
}	
#quizText{	/* Container for the questions */
	width:370px;
	height:374px;
	float:left;

}
#quizDescription{	/* The question */
	font-size:1em;
	margin-bottom:5px;
	margin-top:5px;
	font-weight:bold;
	color:#00F;
	
}
#quizHeader{
	font-size:1.2em;
}
#squareTxt{
	font-weight:bold;
	font-size:1.2em;
	margin:5px;
	color:#F00;
}
h1{
	margin:0px;
	font-size:1.3em;
}
.quizButton{	/* Quiz buttons - "black" - "white" */
	height:40px;
	background-color:#FFF;
	border:1px solid #000;
	width:50px;
}

#whichQuestion{	/* Heading showing "Question 1 of 20" */
	margin:0px;
	font-size:1.2em;
}

#moveInput{
	width:50px;
}
#okButton,#nextButton{
	background-color:#FFF;
	border:1px solid #000;
	
}
#nextButton{
	padding:3px;
}

.generalButton{
	background-color:#FFF;
	border:1px solid #000;	
}

#txt_additionalDescription{	/* Decription of a task shown after you have completed it. example: A description telling you why a move is the best */
	margin-top:10px;
	margin-bottom:10px;
	color:#F00;
	font-size:0.9em;
}

#whitePieces{	/* List of white pieces in a puzzle */
	color:#F00;
	font-size:1.2em;
}
#blackPieces{
	margin-bottom:10px;	/* List of white pieces in a puzzle */
	color:#F00;
	font-size:1.2em;
}		

#secondPanel{	/* Div showing seconds left on a task */
	font-weight:bold;
	font-size:1.2em;
}
#scorePanel{	/* DIV showing the score */
	font-weight:bold;
	font-size:1.2em;

}
#whiteButton,#blackButton{
	cursor:pointer;
}
#blackButton{
	color:#FFF;
	background-color:#000;
}
.buttonPane{
	width:210px;
	float:left;
	padding-left:20px;
}
.buttonPane input{
	width:190px;
	margin:2px;
}

.knightMovePath{
	color:#f00;
	font-size:0.9em;
	font-weight:italic;
	clear:both;
}

.moveIndicator{
	position:absolute;	/* Never change or remove this option */
	border:2px solid #F00;
	left:0px;
	top:0px;
	width:34px;
	height:35px;	/* Same width and height as squares on the board - border * 2 */
	z-index:1000000;
}