@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: 5px;
	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;
}	
	#linkCheck{
			width: 187px;			height: 55px;
			background-image: url(../assets/image/check.png);
		}
		
	#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: 85px;
	width: 100%;
	height: 400px;

}
	#tabs{
		margin-left: 0.5em;
		width: 650px;
		height: 60px;
	}
		.tabBox{
			float:left;	
			margin: 0.5em;	
		}
		.tabSelected{
			background-color: #00FF00;
		}
		
	#section{	
		width: 900px;
		height: 300px;
		margin: 5px auto;
		}
		
		#questionSection{
			margin-top: 50px;
			margin-left: 300px;
		}
			.questions{
				margin-top: 5px;
				margin-left: 20px;			
				height: 30px;
				font: 25px/30px Verdana, Geneva, Arial, Helvetica, sans-serif;
				color: #000000; 
			}
			#answerSection{
				margin-left: 50px;
				margin-top: 10px;
				width: 600px;
				height: 70px;
			}
			#comma{
				width: 36px;
				height: 60px;
				margin-left: 118px;
				background-image: url(../assets/image/comma.png);
			}
			#dot{
				position:absolute;
				top: 44%;
				right: 17%;
				width: 36px;
				height: 60px;
				background-image: url(../assets/image/dot.png);
			}
			#dragAnswers{
				padding: 10px;
				margin-top: 40px;
				margin-left: 85px;
				width: 350px;
				height: 30px;
				border: 2px solid #ABF549;

			}
		#imgAnimals{
			position:absolute;
			left: 10%;
			top: 30%;
			width: 222px;
			height: 300px;
			background: url(../assets/image/backImage.png);
			text-align:center;
		}
			.imgAnim{
				margin-top: 75px;
			}
		
			.drophover{
			background-color: #FF9900;
		}
		#checkAnswer{
			position:absolute;
			right: 5%;
			bottom: 45%;
			width: 100px;
			height: 92px;
		}
	
	
		
#gameOver{
	margin: 10px auto;	
	width: 500px;
	text-align:center;
	font: 30px/35px Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-weight:bold;
	color:red;		
}
#gameOverInfo{
	margin-top: 35px;
	text-align:center;
	font: 20px/25px Helvetica, Geneva, Arial, Verdana, sans-serif;
	font-weight:bold;
	color:#06D946;
	
}
.specialText{
	font: 20px/25px Helvetica, Geneva, Arial, Verdana, sans-serif;
	font-weight:bold;
	color:#FF9900;
	border-bottom: 2px dotted #CCC;
	
}