@CHARSET "UTF-8";
/****** Page Styles ****/

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10pt;
	margin: 0px;
	background-color: #FFFFCC;
}
#header {
	background-image: url(../assets/image/bg_header.png);
	background-repeat: repeat-x;
	height: 89px;
	width: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
}
#topbtn_left {
	float: left;
	height: 60px;
	width: 60px;
	padding-top: 13px;
	padding-left: 5px;
}
	
	
	#linkBack{
			width: 60px;		height: 59px;
			background:url(../assets/image/btn_back.png);
		}
	#linkBack:hover{
			background:url(../assets/image/btn_back_hover.png);
		}
	
#lesson_title {
	float: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16pt;
	font-weight: bold;
	color: #FFFFFF;
	margin-left: 10px;
	background-image: url(../assets/image/bg_title_block.png);
}
#topbtn_right {
	float: right;
	height: 60px;
	width: 60px;
	padding-top: 13px;
	padding-right: 5px;
}
		#linkHelp{
			width: 60px;		height: 60px;
			background:url(../assets/image/btn_help.png);
		}
		#linkHelp:hover{
			background:url(../assets/image/btn_help_hover.png);
		}
		#linkOle{
			width: 60px;		height: 60px;
			background:url(../assets/image/btn_ole.png);
		}
		#linkOle:hover{
			background:url(../assets/image/btn_ole_hover.png);
		}
		#linkNext{
			width: 60px;		height: 60px;
			background:url(../assets/image/btn_next.png);
		}
		#linkNext:hover{
			background:url(../assets/image/btn_next_hover.png);
		}
#footer {
	background-image: url(../assets/image/bg_footer.png);
	background-repeat: repeat-x;
	position: absolute;
	height: 69px;
	width: 100%;
	left: 0px;
	bottom: 0px;
}
#score_box {
	float: left;
	padding-left: 10px;
	padding-top: 10px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFF00;
	font-size: 16pt;
	font-weight: bold;
}
#botbtn_right {
	float: right;
	height: 55px;
	width: 251px;
	padding-right: 5px;
	padding-top: 5px;
}
	#linkStart{
			width: 251px;		height: 55px;
			background:url(../assets/image/btn_start.png);
		}
		#linkStart:hover{
			background:url(../assets/image/btn_start_hover.png);
		}
		#linkStart:active{
			background:url(../assets/image/btn_start_mouse_down.png);
		}
		#linkPlayAgain{
			width: 251px;		height: 55px;
			background:url(../assets/image/btn_play_again.png);
		}
		#linkPlayAgain:hover{
			background:url(../assets/image/btn_play_again_hover.png);
		}
		#linkPlayAgain:active{
			background:url(../assets/image/btn_play_again_mouse_down.png);
		}

/**** End of the page style ****/

/**** Game Styles  ****/

a{
	color:#FFFFCC;
}
#currentTitle{
		width: 150px;
	height: 80xp;
	font:25px/30px "Courier New", Courier, monospace;	
	font-weight: bold;
	color: red;
}
#content{	
	margin: 0px auto;
	margin-top: 90px;
	width: 95%;
	height: 375px;

}
#frontDisplay{
	width: 736px;
	heigth: 350px;
	margin: 0px auto;
	
}
#section{	
	display:none;
	margin: 0px auto;		
}

	#topText{
		text-align:center;
		margin: 2px auto;
		width: 444px;
		height:50px;
		font: 25px/30px Arial, Helvetica, sans-serif;
		background:url(../assets/image/img2title.png) no-repeat;
		color: #D70123;
		font-weight:bold;
	}
	#gameArea{
		width:900px;
		height: 400px;
	}
	
	.imgArea{
		float:left;
		margin-left: 15px;
		margin-top: 10px;
		margin-bottom: 10px;
		padding: 2px;
		width: 150px;
		height: 135px;
	}
	.quesBox{
		width: 125px;
		height: 70px;
		text-align:center;
		background: url(../assets/image/quesBox.png);
		font: 25px/70px Arial, Helvetica, sans-serif;
		font-weight:bold;
	}
	.textBox{
		margin-top:0.1em;
		width: 120px;
		height: 25px;
		text-align:center;
		font: 20px/25px Arial, Helvetica, sans-serif;
		background-color:#64CAFF;
		border: 2px solid black;
		color: black;
	}	
	
	#confirmBtn{
		
		position:absolute;
		bottom: 100px;
		right: 30px;
		width: 101px;
		height: 30px;
		background: url(../assets/image/confirm.png) no-repeat;
		cursor: hand;
	}
	.check{	
		float:right;
		width: 24px;
		height: 24px;
	}
	#imgStory{
		position:absolute;
		right: 5px;
		bottom:200px;
		width: 136px;
		height:175px;
		margin:0.5em;
		background: url(../assets/image/img_think.png) no-repeat;
	}

	#answer{
		margin-left: 100px;
		padding:5px;	
		height:30px;
		font: 20px/25px Arial, Helvetica, sans-serif;
		color: #000000;
	}
	#answerCheck{
		position:absolute;
		top: 60%;
		right: 20%;
		width: 132px;
		height: 122px;
	}
	

	
	.focus {
	   border: 2px solid #AA88FF;
	   background-color: #FFEEAA;

	}


#gameOver{
	display:none;
	position:absolute;
	top: 40%;
	left: 25%;
	width: 500px;
	text-align:center;
	font: 30px/35px Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:red;		
}
#gameOverInfo{
	text-align:center;
	font: 20px/25px Helvetica, Geneva, Arial, Verdana, sans-serif;
	font-weight:bold;
	color:#000000;
	
}
.gameOverShow{
	background-color: #AFF0FF;
	opacity: 0.2;
}
.specialText{
	font: 20px/25px Helvetica, Geneva, Arial, Verdana, sans-serif;
	font-weight:bold;
	color:#FF9900;
	border: 2px dotted #CCC;
	
}
#timerBar {
	float: left;
	width: 215px;
	height:35px;
	padding-left: 10px;
	padding-top: 0px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #FFFF00;
	font-size: 16pt;
	font-weight: bold;
}
#timerTitle{
	float: left;
	margin-top: 20px;
	width: 50px;
	height: 35px;
}

.timerBoxes{   /* Show the timer running after the game has began.... */
float:right;
margin: 0.5em 0 0 0.1em;
width: 35px;
height: 30px;
border: 2px dotted green;
padding: 3px;
color: blue;
font : bold 25px Arial Black, Times New Roman;
background: #ACC;
}