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

/*  Designed for 1200*900 px screen resolution  */ 
 
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: 75px;
	width: 100%;
	position: absolute;
	left: 0px;
	top: 0px;
}
#topbtn_left {
	float: left;
	height: 60px;
	width: 60px;
	padding-top: 6px;
	padding-left: 15px;
}
	
	
	.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: 6px;
	padding-right: 15px;
}
		#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 {
	position:relative;
	background-image: url(../assets/image/bg_footer.png);
	background-repeat: repeat-x;
	height: 75px;
	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;
	padding-right: 5px;
	padding-top: 10px;
}	
	#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);
		}
#linkNextExercise{
	position:absolute;
	bottom: 75px;
	right: 10px;
}
#linkPrevExercise{
	position:absolute;
	bottom: 75px;
	left: 10px;
}
/**** 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: 75px;
	width: 1180px;
	height: 550px;
	padding: 0.5em;
}
		#left-side{
			position:relative;
			margin: 40px auto;
			margin-bottom:0;
			padding-top:50px;
			float:left;
			width: 170px;
			height: 450px;
			border: 4px solid #000;
		}
			#leftText{
				position:absolute;
				top: -30px;
				left: 0px;
				text-align:center;
				height: 40px;
				font : 20px/25px Verdana,Helvetica,Arial Black, Times New Roman;
				color: #FF0000;
			}
			.default{
				float:left;				
				margin: 0px auto;
				text-align:center;
				width: 170px;
				height: 44px;				
			}
		#right-side{
			position:relative;
			margin: 40px auto;
			margin-bottom:0;
			padding-top: 50px;
			float:right;
			width: 170px;
			height: 450px;
			border: 4px solid #000;
		}
			#rightText{
				position:absolute;
				top: -30px;
				left: 10px;
				text-align:center;
				height: 40px;
				font : 20px/25px Verdana,Helvetica,Arial Black, Times New Roman;
				color: #FF0000;
			}
		#main-content{
			margin-top: 10px;
			float:left;
			margin-left: 90px;
			width: 650px;
			height: 525px;
		}
			#topText{
				text-align:center;
				height: 40px;
				font : 20px/25px Verdana,Helvetica,Arial Black, Times New Roman;
			}
			#container{
				position:relative;
				margin: 5px auto;
				width : 598px;
				height: 390px;
				border: 4px solid #000;
				background:url(../assets/image/bgContainer.png);
			}
			#joinSyllable{
				margin: 10px auto;
				width : 525px;
				height: 60px;
				border: 4px solid #000;
			}
				.sign{
					float:left;
					width: 20px;
					height: 30px;
					padding: 5px;
					text-align:center;
					font : 30px/35px Verdana,Helvetica,Arial Black, Times New Roman;
				}
				.drophover{
					background-color: #FF9900;
				}
					
				.correctWord{
					border:none
					color: #FF00FF;
				}
				
	
			
		#help{
			display:none;
			position:absolute;
			right: 60px;
			top: 75px;;
			width: 256px;
			height: 600px;
			background:url(../assets/image/help.png);
			z-index:40;
		}
		.backOpaque{
			background-color: #A4A4A4;
			opacity: 0.2;
		}
	#timerBar {
		float: left;
		margin-left:50px;
		width: 200px;
		height:35px;
		padding-left: 10px;
		padding-top: 7px;
		font-family: Verdana, Arial, Helvetica, sans-serif;
		color: #FFFF00;
		font-size: 16pt;
		font-weight: bold;
	}

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

	#gameOver{
		opacity: 1;
		display:none;
		position:absolute;
		top:5%;
		left: 40%;
		color: blue;
		text-align:center;
		font : bold 25px/35px Arial Black, Times New Roman;
}