@font-face
{	font-family : 'BurbankBigRegularBold';
	src :	url('../fonts/BurbankBigRegular-Bold.otf') format("embedded-opentype"),
		url('../fonts/BurbankBigRegular-Bold.eot') format("opentype"),
		url('../fonts/BurbankBigRegular-Bold.ttf') format("truetype");
	font-weight : bold;
	font-style : normal;
}



body
{
	padding : 0px;
	margin : 0px;
}


div
{	padding : 0px;
	margin : 0px;
}


#gameContainer
{
	position : relative;
	width : 640px;
	height : 480px;
	text-align : left;
	padding : 0px;
	margin : 20px auto;

	font-family : BurbankBigRegularBold, Arial;
	font-size : 19px;
	color : #ffffff;
	text-shadow: -1px 1px 5px #000000, 1px -1px 5px #000000;
}

#gameContainer p
{	margin : 20px 0px;
}

#bg
{
	background : #000000 url('../images/bg_1.png') no-repeat 0px 0px;
	height : inherit;
	width : inherit;
	padding : 0px;
	margin : 0px;
}

#bg.cinematic
{	background : url('../images/bg_3.png') no-repeat 0px 0px;
}

#bg.quiz, #bg.quizResponse, #bg.upgrades
{	background : #000000 url('../images/bg_2.png') no-repeat 0px 0px;
}

#bg.quiz.isFinal
{	background : #000000 url('../images/bg_4.png') no-repeat 0px 0px;
}

#bg.gameOver
{	background : url('../images/bg_4.png') no-repeat 0px 0px;
}

#bg.gameBoardScreen
{	background : url('../images/bg.png') no-repeat 0px 0px;
}


canvas
{
	position : absolute;
	left : 0px;
	top : 0px;
}

#webGLCanvas {
	pointer-events : none;
}



.gameScreen
{
	display : none;	
	height: inherit;
	width : inherit;
	position : absolute;
	top : 0px;
	left: 0px;
	color : #ffffff;
	overflow : hidden;
}

.gameScreen.activeScreen
{	display : block;
}




#preloaderScreen
{	
	background : url('../images/scn_preloader.png') no-repeat 0px 0px;
}

#preloadProgressBar
{	background : url('../images/sprites/progress_bar.png') no-repeat 0px 0px;
	position : absolute;
	top : 211px;
	left : 167px;
	height : 59px;
	width : 306px;
}



#mainMenuScreen
{	
}


#mainMenuScreen #mainMenuPlayBtn
{
	position : absolute;
	top : 284px;
	left : 412px;
	background : url('../images/buttons/btn_play.png') no-repeat 0px 0px;
	width : 174px;
	height : 85px;
	cursor : pointer;
}

#mainMenuScreen #mainMenuHelpBtn
{
	position : absolute;
	top : 368px;
	left : 432px;
	background : url('../images/buttons/btn_how_to_play.png') no-repeat 0px 0px;
	width : 192px;
	height : 50px;
	cursor : pointer;
}

#mainMenuScreen #mainMenuHighScoresBtn
{
	position : absolute;
	top : 418px;
	left : 462px;
	background : url('../images/buttons/btn_hi_scores.png') no-repeat 0px 0px;
	width : 156px;
	height : 51px;
	cursor : pointer;
}



#quizScreen
{
	background : url('../images/scn_level_end.png') no-repeat 0px 0px;
	height: inherit;
	width : inherit;
	position : absolute;
	top : 0px;
	left: 0px;
	color : #ffffff;
	overflow : hidden;
}
#quizScreen.isFinal
{	background : url('../images/scn_final_quiz.png') no-repeat 0px 0px;
}


#quizScreen #quizTimer
{
	position : absolute;
	background : url('../images/sprites/end_timer.png') no-repeat 0px 0px;
	width : 71px;
	height : 164px;
	left : 40px;
	top : 315px;
}
#quizScreen.isFinal #quizTimer
{	left : 135px;
	top : 298px;
}

#quizScreen #quizPlayerScore
{
	position : absolute;
	top : 92px;
	left : 230px;
	font-size : 26pt;
	color : #ff6600;
}
#quizScreen.isFinal #quizPlayerScore
{	display : none;
}

#quizScreen #quizQuestionText
{
	position : absolute;
	top : 185px;
	left : 58px;
	width : 355px;
	height : 130px;
	overflow : hidden;
}
#quizScreen.isFinal #quizQuestionText
{	top : 175px;
	width : 530px;
}


#quizScreen #quizPanelBtnSafe
{
	position : absolute;
	display : block;
	top : 319px;
	left : 157px;
	background : url('../images/buttons/btn_safe.png') no-repeat 0px 0px;
	width : 156px;
	height : 78px;
	cursor : pointer;
}
#quizScreen.isFinal #quizPanelBtnSafe
{	left : 242px;
	top : 298px;
}

#quizScreen #quizPanelBtnUnsafe
{
	position : absolute;
	top : 398px;
	left : 133px;
	background : url('../images/buttons/btn_not_safe.png') no-repeat 0px 0px;
	width : 242px;
	height : 77px;
	cursor : pointer;
}
#quizScreen.isFinal #quizPanelBtnUnsafe
{	left : 220px;
	top : 375px;
}



#quizResponseScreen
{
}

#quizResponseScreen #quizResponseText
{
	position : absolute;
	left : 57px;
	top : 139px;
	width : 350px;
	height : 150px;
	overflow : hidden;
	outline: 0 none;
}
#quizResponseScreen #quizResponseText.wrong
{	top : 112px;
}

#quizResponseScreen #quizResponseHeader
{
	position : absolute;
	top : 0px;
	left : 0px;
	height : inherit;
	width : inherit;
}

#quizResponseScreen #quizResponseHeader.correct
{	background : url('../images/scn_right_answer.png') no-repeat 0px 0px;
}

#quizResponseScreen #quizResponseHeader.wrong
{	background : url('../images/scn_wrong_answer.png') no-repeat 0px 0px;
}


#quizResponseFade
{	
	position : absolute;
	top : 0px;
	left : 0px;
	height : inherit;
	width : inherit;
}

#quizResponseContinueBtn, #upgradesScreen #upgradesNextLevelBtn
{
	position : absolute;
	left : 64px;
	top : 422px;
	background : url('../images/buttons/btn_play_next_level.png') no-repeat 0px 0px;
	height : 54px;
	width : 250px;
	cursor : pointer;
	pointer-events : auto;
}

#quizResponseUpgradeBtn
{
	position : absolute;
	left : 50px;
	top : 315px;
	background : url('../images/buttons/btn_upgrade.png') no-repeat 0px 0px;
	height : 55px;
	width : 288px;
	cursor : pointer;
}



#upgradesScreen
{
	background : url('../images/scn_upgrade.png') no-repeat 0px 0px;
	height: inherit;
	width : inherit;
	position : absolute;
	top : 0px;
	left: 0px;
	color : #ffffff;
	overflow : hidden;
	pointer-events : none;
}

#upgradesScreen #upgradesNextLevelBtn
{
	top : 421px;
	left : 95px;
}

#upgradesScreen #upgradeLighbulbs
{
	position : absolute;
	left : 150px;
	top : 101px;
	width : 60px;
	overflow : hidden;
	color : #ff6600;
	font-size : 36px;
	text-align : right;
}

#upgradesScreen #upgradeDescription
{
	position : absolute;
	left : 306px;
	top : 95px;
	color : #000000;
	text-shadow : none;
	width : 310px;
}





#helpScreen
{	
	background : url('../images/scn_how_to_play.png') no-repeat 0px 0px;
}

#helpScreen .helpText.page_1
{	background : url('../images/how_to_screen.png') no-repeat 0px 0px;
	height : inherit;
	width : inherit;
	position : absolute;
	left : 0px;
	top : 0px;
}

#helpScreen .helpText p:first-of-type {
	margin-top : 0px;
}
#helpScreen .helpText
{
	line-height : 1.0em;
	padding : 0px 60px;
	position : absolute;
	left : 0px;
	top : 90px;
	outline: 0 none;
}

#helpScreen #helpPlayNowBtn, #highScoresScreen #highScoresPlayNowBtn
{
	background : url('../images/buttons/btn_play_now.png') no-repeat 0px 0px;
	position : absolute;
	width : 193px;
	height : 60px;
	top : 412px;
	left : 418px;
	cursor : pointer;
}

#helpScreen .leftArrow
{
	position : absolute;
	top : 180px;
	left : 10px;
	background : url('../images/buttons/btn_next.png') no-repeat 0px 0px;
	width : 35px;
	height : 90px;
	cursor : pointer;
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}

#helpScreen .leftArrow:hover
{	background-position : -64px 0px;
}

#helpScreen .rightArrow:hover
{	background-position : -64px 0px;
}
#helpScreen .rightArrow
{
	position : absolute;
	top : 180px;
	left : 595px;
	background : url('../images/buttons/btn_next.png') no-repeat 0px 0px;
	width : 35px;
	height : 90px;
	cursor : pointer;
}




#highScoresScreen
{	background : url('../images/scn_hi_scores.png') no-repeat 0px 0px;
}

#highScoresTable
{
	font-size : 28px;
	line-height : 1.0em;
	padding : 0px;
	position : absolute;
	left : 210px;
	top : 105px;
	outline: 0 none;
}

#highScoresTable tr, #highScoresTable td
{
	padding : 0px;
	margin : 0px;
	background-color : #333399;
	border : none;
}

#highScoresTable td.rank
{
	width : 30px;
	text-align : right;
	color : #bbbbff;
}

#highScoresTable td.initials
{
	width : 110px;
	text-align : center;
}

#highScoresTable td.score
{
	text-align : right;
	color : #ff6600;
}



#cinematicScreen
{
}

#cinematicScreen #cinematicVideo
{
	position : absolute;
	top : 65px;
	left: 0px;
}

#cinematicSkipBtn
{
	background : url('../images/buttons/btn_skip.png') no-repeat 0px 0px;
	position : absolute;
	width : 94px;
	height : 45px;
	top : 438px;
	left : 546px;
	cursor : pointer;
}

#cinematicLevelNum
{
	position : absolute;
	left : 40px;
	top : 5px;
	font-size : 22px;
	outline: 0 none;
}

#cinematicHeader {
	background : url('../images/scn_win_game.png') no-repeat 0px 0px;
	position : absolute;
	left : 0px;
	top : 0px;
	width : 100%;
	height : 100%;
	display : none;
}

#cinematicHeader.won {
	background : url('../images/scn_win_game.png') no-repeat 0px 0px;
}
#cinematicHeader.lost {
	background : url('../images/scn_lose_game.png') no-repeat 0px 0px;
}

#cinematicAnswerText {
	position : absolute;
	top : 10px;
	left : 238px;
	width : 390px;
	height : 100px;
	font-size : 18px;
	outline: 0 none;
}


#gameOverScreen
{	background : url('../images/scn_game_over.png') no-repeat 0px 0px;
}

#gameOverScreen #postScoreBtn
{
	background : url('../images/buttons/btn_post_score.png') no-repeat 0px 0px;
	position : absolute;
	width : 190px;
	height : 56px;
	top : 416px;
	left : 230px;
	cursor : pointer;
}

#gameOverScreen #finalScore
{
	color : #ff6600;
	font-size : 60px;
	text-align : center;
	position : absolute;
	width : 100%;
	left : -0px;
	top : 170px;
	outline: 0 none;
}

#gameOverScreen	#initialsField
{
	background-color : #000000;
	font-family : BurbankBigRegularBold, Arial;
	font-size : 19px;
	color : #ffffff;
	text-shadow: -1px 1px 5px #000000, 1px -1px 5px #000000;
	font-size : 60px;
	line-height : 0.3em;
	vertical-align : top;
	text-align : center;
	padding : 0px;
	margin : 0px;
	position : absolute;
	width : 180px;
	height : 65px;
	left : 228px;
	top : 308px;
	outline: 0 none;
	border : none;
}



#gameBoardScreen
{
	pointer-events : none;
}

#gameBoardScreen #gameLevel, #gameBoardScreen #gameScore, #gameBoardScreen #gameWave, #gameBoardScreen #gameHealth, #gameBoardScreen #gameEnergy
{
	position : absolute;
	left : 95px;
	top : 451px;
	text-align : left;
	font-size : 22px;
	color : #ff6600;
	outline: 0 none;
	pointer-events : none;
}

#gameBoardScreen #gameScore
{	top : 418px;
	left : 320px;
} 

#gameBoardScreen #gameWave
{	left : 218px;
	text-align : right;
	width : 65px;
} 

#gameBoardScreen #gameHealth
{	left : 346px;
	width : 30px;
	text-align : right;
} 

#gameBoardScreen #gameEnergy
{	left : 400px;
	width : 60px;
	text-align : right;
} 


#gameBoardScreen .levelOverPopup
{
	position : absolute;
	width : 426px;
	left : 85px;
	padding : 20px;
	background-color : #222222;
	border : 3px solid #669999;
	font-size : 22px;
	color : #ff6600;
	text-align : center;
	outline: 0 none;
	box-shadow: -4px 4px 16px #FFFFFF, 4px -4px 16px #FFFFFF;
}

#gameBoardScreen .levelOverPopup p
{	padding : 0px;
	margin : 0px;
}

#gameBoardScreen #gameOverVictory
{	top : 130px;
}

#gameBoardScreen .levelOverPopup .title
{	font-size : 64px;
	margin : 0px 0px 20px 0px;
	color : #ffffff;
}

#gameBoardScreen #gameOverDefeat
{	font-size : 28px;
	padding : 40px 20px;
	top : 140px;
}

#gameBoardScreen .levelOverPopup.hide
{	display : none;
}



#blockUser
{
	display : none;
	position : absolute;
	top : 0px;
	left : 0px;
	background : #000000 url('../images/bg_2.png') no-repeat 0px 0px;
	font-size : 28px;
	width : 640px;
	height : 480px;
}
#blockUser p
{
	position : absolute;
	top : 100px;
	left : 40px;
	width : 400px;
	padding : 0px;
	margin : 0px;
}