@font-face {
    font-family: 'titlinggothicfbcompMedium';
    src: url('../../fonts/TitlingGothicFBComp-Medium.eot') format("eot"),
         url('../../fonts/TitlingGothicFBComp-Medium.svg') format("svg"),
         url('../../fonts/TitlingGothicFBComp-Medium.woff2') format('woff2'),
         url('../../fonts/TitlingGothicFBComp-Medium.woff') format('woff'),
         url('../../fonts/TitlingGothicFBComp-Medium.ttf') format('truetype'),
         url('../../fonts/TitlingGothicFBComp-Medium.svg#titlinggothicfbcompMedium') format('svg');
    font-weight: normal;
    font-style: normal;
}


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

#game-holder {
	display: block;
	width: 800px;
	height: 600px;
}
* {
	margin: 0 auto;
}

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


#gameContainer
{
	position : absolute;
	left : 0px;
	top : 0px;
	width : 800px;
	height : 600px;
	text-align : left;
	padding : 0px;
	margin : 0px;

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

	font-family : titlinggothicfbcompMedium, Arial;
	font-size : 43px;
	color : #003366;
}

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

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

#bg.preloader
{	background-image : none;
}

#bg.mainMenu
{	background : url('../images/bg_main.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;
	overflow : hidden;
}

.gameScreen.activeScreen
{	display : block;
}




#preloaderScreen
{	
	background-image : none;
}


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


#mainMenuScreen #mainMenuPlayBtn
{
	position : absolute;
	left : 460px;
	top : 515px;
	background : url('../images/buttons/btn_playNow.png') no-repeat 0px 0px;
	width : 230px;
	height : 64px;
	cursor : pointer;
}

#mainMenuScreen #mainMenuHelpBtn
{
	position : absolute;
	left : 110px;
	top : 515px;
	background : url('../images/buttons/btn_howToPlay.png') no-repeat 0px 0px;
	width : 230px;
	height : 64px;
	cursor : pointer;
}



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

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


#helpScreen #helpPlayNowBtn, #highScoresScreen #highScoresContinueBtn
{
	background : url('../images/buttons/btn_playNowBig.png') no-repeat 0px 0px;
	position : absolute;
	width : 259px;
	height : 73px;
	top : 497px;
	left : 270px;
	cursor : pointer;
}

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


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

table#highScoresTable
{
	padding : 0px;
	position : absolute;
	left : 100px;
	top : 115px;
	outline: 0 none;
	width : 600px;
	background : none;
	border : none;
}

table#highScoresTable tr, table#highScoresTable td
{
	color : #003366;
	font-size : 33px;
	line-height : 1.05em;
	padding : 0px;
	margin : 0px;
	border : none;
	background : none;
}

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

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

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





#gameOverScreen
{	background-image : none;
}

#gameOverScreen #postScoreBtn
{
	background : url('../images/buttons/btn_enterScore.png') no-repeat 0px 0px;
	position : absolute;
	width : 259px;
	height : 73px;
	top : 497px;
	left : 270px;
	cursor : pointer;
}

#gameOverScreen #gameOverTimeRemaining, #gameOverScreen #gameOverFinalScore
{
	color : #3AAFDF;
	font-size : 71px;
	text-align : center;
	position : absolute;
	width : 100%;
	left : 0px;
	top : 35px;
	outline: 0 none;
}

#gameOverScreen #gameOverTime
{
	color : #E05288;
	font-size : 47px;
	text-align : left;
	padding-left : 20px;
	outline: 0 none;
}

#gameOverScreen #gameOverFinalScore
{
	top : 120px;
	font-size : 47px;
}

#gameOverScreen #finalScore
{
	color : #224992;
	font-size : 85px;
	text-align : center;
	width : 100%;
	margin-top : 20px;
	outline: 0 none;
}

#gameOverScreen	#initialsField
{
	background-color : rgba(0, 0, 0, 0);
	font-family : titlinggothicfbcompMedium, Arial;
	font-size : 70px;
	color : #000000;
	line-height : 0.3em;
	vertical-align : top;
	text-align : center;
	padding : 0px;
	margin : 0px;
	position : absolute;
	width : 180px;
	height : 100px;
	left : 310px;
	top : 325px;
	outline: 0 none;
	border : none;
	border-bottom : 8px solid #000000;
}



#videoScreen {
}


#videoContainer {
	position : absolute;
	left : 99px;
	top : 40px;
}

#videoScreen .bonusEntriesText {
	display : inline-block;
	position : absolute;
	left : 100px;
	top : 425px;
	width : 600px;
	margin : 0px auto;
	text-align : center;
	font-size : 1.0em;
}
#videoScreen .bonusEntriesText.noContest {
	display : none;
}

#videoScreen #videoEnterNowBtn, #videoScreen #videoPlayAgainBtn
{
	background : url('../images/buttons/btn_playAgain.png') no-repeat 0px 0px;
	position : absolute;
	width : 259px;
	height : 73px;
	top : 497px;
	left : 430px;
	cursor : pointer;
}

#videoScreen #videoEnterNowBtn
{
	background : url('../images/buttons/btn_enterNow.png') no-repeat 0px 0px;
	left : 110px;
}

#videoScreen #videoPlayAgainBtn.noContest
{
	left : 270px;
}



#gameBoardScreen
{
	pointer-events : none;
}


#blockUser
{
	display : none;
	position : absolute;
	top : 0px;
	left : 0px;
	background : #ffffff url('../images/bg_1.png') no-repeat 0px 0px;
	font-size : 28px;
	width : 800px;
	height : 600px;
}
#blockUser p
{
	position : absolute;
	top : 50px;
	left : 0px;
	text-align : center;
	width : 100%;
	padding : 0px;
	margin : 0px auto;
}

@media only screen and (max-width: 1050px) {
	#game-holder { width: 820px; height: 614px; }
	#gameContainer { -ms-transform: scale(0.8, 0.8); -webkit-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); transform-origin: 0% 0%; }
}

@media only screen and (max-width: 850px) {
	#game-holder { width: 614px; height: 460px; }
	#gameContainer { -ms-transform: scale(0.6, 0.6); -webkit-transform: scale(0.6, 0.6); transform: scale(0.6, 0.6); }
}

@media only screen and (max-width: 650px) {
	#game-holder { width: 410px; height: 308px; }
	#gameContainer { -ms-transform: scale(0.4, 0.4); -webkit-transform: scale(0.4, 0.4); transform: scale(0.4, 0.4); }
}

@media only screen and (max-width: 450px) {
	#game-holder { width: 307px; height: 230px; }
	#gameContainer { -ms-transform: scale(0.3, 0.3); -webkit-transform: scale(0.3, 0.3); transform: scale(0.3, 0.3); }
}
