@font-face {
    font-family: 'interstateblackblack';
    src: url('../fonts/interstateblack-webfont.eot');
    src: url('../fonts/interstateblack-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/interstateblack-webfont.woff2') format('woff2'),
         url('../fonts/interstateblack-webfont.woff') format('woff'),
         url('../fonts/interstateblack-webfont.ttf') format('truetype'),
         url('../fonts/interstateblack-webfont.svg#interstateblackblack') format('svg');
    font-weight: normal;
    font-style: normal;
}


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


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


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

	-ms-transform-origin: top left;
	-webkit-transform-origin: top left;
	transform-origin: top left;
	-ms-transform : scale(1.00, 1.00);
	-webkit-transform : scale(1.00, 1.00);
	transform : scale(1.00, 1.00);

	font-family : interstateblackblack, Arial;
	font-size : 43px;
	color : #ffffff;
	text-shadow:	2px 2px 8px #000000,
			-2px 2px 8px #000000,
			2px -2px 8px #000000,
			-2px -2px 8px #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.preloader
{	background : url('../images/bg_0.png') no-repeat 0px 0px;
}

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

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

#bg.gameBoard
{	
	background : url('../images/bg_game.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
{	
	background : url('../images/scn_preloader.png') no-repeat 0px 0px;
}



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


#mainMenuScreen #mainMenuPlayBtn
{
	position : absolute;
	left : 613px;
	top : 412px;
	background : url('../images/buttons/btn_playGame.png') no-repeat 0px 0px;
	width : 392px;
	height : 99px;
	cursor : pointer;
}

#mainMenuScreen #mainMenuHelpBtn
{
	position : absolute;
	left : 659px;
	top : 525px;
	background : url('../images/buttons/btn_howTo.png') no-repeat 0px 0px;
	width : 392px;
	height : 99px;
	cursor : pointer;
}

#mainMenuScreen #mainMenuHighScoresBtn
{
	position : absolute;
	left : 658px;
	top : 638px;
	background : url('../images/buttons/btn_highScores.png') no-repeat 0px 0px;
	width : 392px;
	height : 99px;
	cursor : pointer;
}



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


#quizScreen #quizTimer
{
	position : absolute;
	background : url('../images/sprites/quiz_timer.png') no-repeat 0px 0px;
	width : 92px;
	height : 190px;
	top : 0px;
	right : 0px;
}

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

#quizScreen #quizQuestionText
{
	position : absolute;
	top : 190px;
	left : 85px;
	padding : 5px;
	width : 855px;
	height : 170px;
	overflow : hidden;
	font-size : 35px;
}


#quizScreen #quizPanelBtnSafe
{
	position : absolute;
	display : block;
	top : 457px;
	left : 83px;
	background : url('../images/buttons/btn_safe.png') no-repeat 0px 0px;
	width : 392px;
	height : 99px;
	cursor : pointer;
}

#quizScreen #quizPanelBtnUnsafe
{
	position : absolute;
	top : 457px;
	left : 549px;
	background : url('../images/buttons/btn_notSafe.png') no-repeat 0px 0px;
	width : 392px;
	height : 99px;
	cursor : pointer;
}



#quizResponseScreen
{
}

#quizResponseScreen #quizResponseText
{
	position : absolute;
	left : 85px;
	top : 260px;
	padding : 5px;
	width : 855px;
	height : 160px;
	overflow : hidden;
	outline: 0 none;
	font-size : 35px;
}
#quizResponseScreen #quizResponseText.wrong
{	top : 290px;
}

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

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

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


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

#quizResponseBonusPoints
{
	position : absolute;
	left : 0px;
	top : 400px;
	width : inherit;
	font-size : 35px;
	text-align : center;
}

#quizResponseContinueBtn
{
	position : absolute;
	left : 280px;
	top : 458px;
	background : url('../images/buttons/btn_nextLevel.png') no-repeat 0px 0px;
	height : 99px;
	width : 463px;
	cursor : pointer;
	pointer-events : auto;
}


#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_playGame.png') no-repeat 0px 0px;
	position : absolute;
	width : 392px;
	height : 99px;
	top : 642px;
	left : 662px;
	cursor : pointer;
}



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

#highScoresTable
{
	font-size : 43px;
	line-height : 1.1em;
	padding : 0px;
	position : absolute;
	left : 140px;
	top : 166px;
	outline: 0 none;
}

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

#highScoresTable td.rank
{
	width : 80px;
	text-align : center;
}

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

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



#cinematicScreen
{
	background-color : rgba(0, 0, 0, 0.7);
}

#cinematicScreen #cinematicVideo
{
	position : absolute;
	top : 143px;
	left: 83px;
	width : 857px;
	height : 482px;
	border : 6px solid #ffffff;
	background-color : #000000;
}

#cinematicSkipBtn
{
	background : url('../images/buttons/btn_skip.png') no-repeat 0px 0px;
	position : absolute;
	width : 392px;
	height : 99px;
	top : 642px;
	left : 662px;
	cursor : pointer;
}

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

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

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

#cinematicAnswerText {
	position : absolute;
	top : 10px;
	left : 83px;
	width : 857px;
	height : 100px;
	font-size : 35px;
	outline: 0 none;
}


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

#gameOverScreen #postScoreBtn
{
	background : url('../images/buttons/btn_submit.png') no-repeat 0px 0px;
	position : absolute;
	width : 463px;
	height : 99px;
	top : 642px;
	left : 280px;
	cursor : pointer;
}

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

#gameOverScreen	#initialsField
{
	background-color : rgba(0, 0, 0, 0);
	font-family : interstateblackblack, Arial;
	font-size : 70px;
	color : #ffffff;
	line-height : 0.3em;
	vertical-align : top;
	text-align : center;
	padding : 0px;
	margin : 0px;
	position : absolute;
	width : 230px;
	height : 100px;
	left : 396px;
	top : 451px;
	outline: 0 none;
	border : none;
}



#gameBoardScreen
{
	pointer-events : none;
}




#blockUser
{
	display : none;
	position : absolute;
	top : 0px;
	left : 0px;
	background : #000000 url('../images/bg_1.png') no-repeat 0px 0px;
	font-size : 28px;
	width : 1024px;
	height : 768px;
}
#blockUser p
{
	position : absolute;
	top : 100px;
	left : 200px;
	width : 620px;
	padding : 0px;
	margin : 0px;
}