@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;
}

@font-face
{	font-family : 'GigglesBTN';
	src :	url('../fonts/giggb___.eot') format('embedded-opentype'),
		url('../fonts/giggb___.ttf') format('truetype');
	font-weight : normal;
	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;
}

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

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

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

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

#bg.help
{	background : url('../images/bg-instructions.jpg') no-repeat 0px 0px;
}

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

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

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

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


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



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

.gameScreen.activeScreen
{	display : block;
}




#preloaderScreen
{	
}

#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 : 168px;
	left : 473px;
	background : url('../images/btns/btn-play.png') no-repeat 0px 0px;
	width : 128px;
	height : 128px;
	cursor : pointer;
}

#mainMenuScreen #mainMenuHelpBtn
{
	position : absolute;
	top : 238px;
	left : 515px;
	background : url('../images/btns/btn-howTo.png') no-repeat 0px 0px;
	width : 128px;
	height : 64px;
	cursor : pointer;
}

#mainMenuScreen #mainMenuHighScoresBtn
{
	position : absolute;
	top : 293px;
	left : 497px;
	background : url('../images/btns/btn-highScores.png') no-repeat 0px 0px;
	width : 256px;
	height : 64px;
	cursor : pointer;
}



#quizScreen
{
	height: inherit;
	width : inherit;
	position : absolute;
	top : 0px;
	left: 0px;
	color : #ffffff;
	overflow : hidden;
}

#quizScreen #quizPanel
{
	background : url('../images/quiz-panel.png') no-repeat 0px 0px;
	height: inherit;
	width : inherit;
}

#quizScreen #quizTimer
{
	position : absolute;
	background : url('../images/sprites/quizTimer.png') no-repeat 0px 0px;
	width : 128px;
	height : 256px;
	left : 485px;
	top : 310px;
}

#quizScreen #quizQuestionText
{
	position : absolute;
	top : 160px;
	left : 135px;
	width : 420px;
	height : 110px;
	overflow : hidden;
	font-size : 19pt;
	color : #CCFF00;
	font-family : BurbankBigRegularBold, Arial;
	font-weight : bold;
}

#quizScreen #quizHeader
{
}


#quizScreen #quizPanelBtnSafe
{
	position : absolute;
	display : block;
	top : 307px;
	left : 122px;
	background : url('../images/btns/btn-safe.png') no-repeat 0px 0px;
	width : 256px;
	height : 73px;
	cursor : pointer;
}

#quizScreen #quizPanelBtnUnsafe
{
	position : absolute;
	top : 388px;
	left : 103px;
	background : url('../images/btns/btn-unsafe.png') no-repeat 0px 0px;
	width : 296px;
	height : 79px;
	cursor : pointer;
}


#quizResponseScreen
{
}

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

#quizResponseScreen #quizResponseText, #quizResponseScreen #quizResponseFeedback
{
	font-family : GigglesBTN, Arial;
	color : #ffffff;
	font-size : 19pt;
	position : absolute;
	left : 05px;
	top : 99px;
	width : 445px;
	height : 170px;
	padding : 10px;
	overflow : hidden;
	outline: 0 none;
	text-shadow: -1px 1px 8px #669999, 1px -1px 8px #669999;
}

#quizResponseScreen #quizResponseFeedback
{
	font-size : 50px;
	text-align : right;
	width : 470px;
	left : 0px;
	top : 290px;
}

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

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

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


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

#quizResponseContinueBtn
{
	position : absolute;
	left : 470px;
	top : 410px;
	background : url('../images/btns/btn-nextWave.png') no-repeat 0px 0px;
	height : 56px;
	width : 162px;
	cursor : pointer;
}



#helpScreen
{	
}


#helpScreen .helpText
{
	font-family : GigglesBTN, Arial;
	color : #ffffff;
	font-size : 20px;
	line-height : 1.0em;
	padding : 0px 120px;
	position : absolute;
	left : 0px;
	top : 70px;
	outline: 0 none;
	text-shadow: -1px 1px 8px #669999, 1px -1px 8px #669999;
}

#helpScreen #helpPlayNowBtn
{
	background : url('../images/btns/btn-playNow.png') no-repeat 0px 0px;
	position : absolute;
	width : 160px;
	height : 53px;
	top : 410px;
	left : 460px;
	cursor : pointer;
}

#helpScreen .leftArrow
{
	position : absolute;
	top : 180px;
	left : -13px;
	background : url('../images/btns/btn-arrow.png') no-repeat 0px 0px;
	width : 64px;
	height : 128px;
	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 : 590px;
	background : url('../images/btns/btn-arrow.png') no-repeat 0px 0px;
	width : 64px;
	height : 128px;
	cursor : pointer;
}




#highScoresScreen
{
}

#highScoresScreen #highScoresPlayNowBtn
{
	background : url('../images/btns/btn-playNow.png') no-repeat 0px 0px;
	position : absolute;
	width : 160px;
	height : 53px;
	top : 410px;
	left : 460px;
	cursor : pointer;
}

#highScoresTable
{
	font-family : GigglesBTN, Arial;
	color : #ffffff;
	font-size : 22px;
	line-height : 1.0em;
	padding : 0px;
	position : absolute;
	left : 55px;
	top : 87px;
	outline: 0 none;
	text-shadow: -1px 1px 8px #669999, 1px -1px 8px #669999;
}

#highScoresTable tr, #highScoresTable td
{
	padding : 0px;
	margin : 0px;
}

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

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

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



#cinematicScreen
{
}

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

#cinematicSkipBtn
{
	background : url('../images/btns/btn-skip.png') no-repeat 0px 0px;
	position : absolute;
	width : 70px;
	height : 42px;
	top : 430px;
	left : 560px;
	cursor : pointer;
}

#cinematicWaveNum
{
	position : absolute;
	left : 40px;
	top : 5px;
	font-family : GigglesBTN, Arial;
	color : #ffffff;
	font-size : 22px;
	outline: 0 none;
	text-shadow: -4px 4px 16px #669999, 4px -4px 16px #669999;
}


#gameOverScreen
{
}

#gameOverScreen #postScoreBtn
{
	background : url('../images/btns/btn-postScore.png') no-repeat 0px 0px;
	position : absolute;
	width : 175px;
	height : 56px;
	top : 410px;
	left : 237px;
	cursor : pointer;
}

#gameOverScreen #finalScore
{
	font-family : GigglesBTN, Arial;
	color : #ffffff;
	font-size : 75px;
	line-height : 1.0em;
	text-align : center;
	padding : 16px 16px 16px 16px;
	position : absolute;
	width : 100%;
	left : -16px;
	top : 170px;
	outline: 0 none;
	text-shadow: -4px 4px 16px #669999, 4px -4px 16px #669999;
}

#gameOverScreen	#initialsField
{
	font-family : GigglesBTN, Arial;
	color : #ffffff;
	background-color : #000000;
	font-size : 60px;
	line-height : 0.3em;
	vertical-align : top;
	text-align : center;
	padding : 0px;
	margin : 0px;
	position : absolute;
	width : 150px;
	height : 60px;
	left : 243px;
	top : 323px;
	outline: 0 none;
	text-shadow: -4px 4px 16px #669999, 4px -4px 16px #669999;
}



#gameBoardScreen
{
	pointer-events : none;
}

#gameBoardScreen #gameWave, #gameBoardScreen #gameScore
{
	position : absolute;
	left : 10px;
	top : 0px;
	text-align : left;
	font-family : GigglesBTN, Arial;
	color : #ffffff;
	font-size : 22px;
	outline: 0 none;
	text-shadow: -4px 4px 16px #669999, 4px -4px 16px #669999;
	pointer-events : none;
}

#gameBoardScreen #gameScore
{
	right : 10px;
	text-align : right;
}

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

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

#gameBoardScreen #gameOverVictory
{	top : 230px;
}

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

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

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

#gameBoardScreen .podCost, #gameBoardScreen #batteryPower
{
	display : none;
	position : absolute;
	font-family : GigglesBTN, Arial;
	color : #ffffff;
	font-size : 14px;
	font-weight : bold;
	text-align : left;
	outline: 0 none;
	text-shadow: -1px 1px 1px #000000, 1px -1px 1px #000000;
	pointer-events : none;
}
#gameBoardScreen .podCost.cantAfford
{	color : #d00d00;
}
#gameBoardScreen .podCost.canAfford
{	color : #97CE00;
}

#gameBoardScreen #batteryPower
{
	font-size : 12px;
}


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