@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);
		}bgCalculation
		#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: abbgCalculationsolute;
	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: 25bgCalculation1px;*/
	padding-right: 5px;
	padding-top: 5px;
}	
	#linkCheck{
			margin: 1em 3em 0 0;
			width: 101px;			height: 30px;
			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: 0 auto;
	margin-top: 85px;
	width: 98%;
	padding: 0.5em;
	height: 375px;
	background-color: #FCFFA4;
}
	#section{	
		width: 900px;
		height: 375px;
		margin: 0 auto;			
		z-index: 1;
	}
	
		#left-side{
			float:left;
			width: 360px;
			height: 360px;
			z-index: 2;
		}
		#tv{
			position:relative;	
			margin-left: 12px;
			width: 215px;
			height: 191px;
			background-image: url(../assets/image/tv.png);
			z-index:5;
		}
		#tvLayer{
			position:absolute;
			top: 17px;
			left: 16px;
			width: 179px;
			height: 128px;
			font: 40px/60px Verdana, Geneva, Arial, Helvetica, sans-serif; 
			color: #FFF;
			text-align:center;
			font-weight:bold;		
			-moz-border-radius : 10px;
			-webkit-border-radius : 10px;
			border-radius : 10px;
			z-index: 1;			
		}
		.tvOff{
			background-color: #78040E;
			border: 2px solid #78040E;
			
		}
		.tvOn{
			background-color: #0000FF;
			border: 2px solid #0000FF;
		}
	
		#cupBoard{
			width: 280px;
			height: 259px;
			background: url(../assets/image/cupBoard.png) no-repeat;
		}

		#right-side{
			float:right;
			width: 420px;
			height: 365px;
		}
			#borderWall{
				position:relative;
				width: 420px;
				height: 320px;
				background: url(../assets/image/borderWall.png) no-repeat;
			}
				#imgDisplay{
					position:absolute;
					top: 53px;
					left: 62px;
					width: 294px;
					height:210px;
				}
				.default{
					float:left;
					width: 69px;
					height: 48px;
					background-color:#FCFFA4;
					border: 2px solid #FCFFA4;  
				}
				.correct{
					float:left;
					width: 69px;
					height: 48px;
					background-color:#A6E4FE;
					border: 2px solid #F9F900;
				}
		#calcSection{
			margin-top: 10px;
			width: 420px;
			height: 35px;
			text-align:center;
			font: 30px/35px Verdana, Geneva, Arial, Helvetica, sans-serif;
			color: #000;
			font-weight: bold;			
		}
			
		input.textBox{
			size:3;
			font: 30px/35px Verdana, Geneva, Arial, Helvetica, sans-serif; 
			font-weight: bold;
			height:35px;
			width: 60px;
			text-align:center;
		}
		.focus {
		     background-color: #FF9900;
		}
		.incorrect{
			background-color: #FFFF00;
		}
		
		#help{
			display:none;
			position:absolute;
			right: 20%;
			top: 1%;
			width: 224px;
			height: 525px;
			background:url(../assets/image/help.png);
			z-index:40;
		}
		.backOpaque{
			background-color: #A4A4A4;
			opacity: 0.2;
		}
	#timerBar {
	float: left;
	margin-left: 300px;
	width: 150px;
	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: 80px;
	height: 30px;
	border: 2px dotted green;
	padding: 3px;
	color: blue;
	text-align:center;
	font : bold 25px Arial Black, Times New Roman;
	background: #ACC;
	}