body
{
	margin: 0;
	padding: 0;
	font-family: "Helvetica", "Verdana", "Arial", sans-serif;
	/*background: #7a9bbf url("../assets/snow_bg.jpg") no-repeat fixed center center;*/
	background: #112a45 url("../assets/bg2.jpg") no-repeat fixed center center;
	font-size: 12px;
	color: #ffffff;
}

.hidden
{
	display : none;
}

#preloader
{
	background: linear-gradient(#52c0ed, rgba(15, 29, 58, 0.9));
	background: -webkit-linear-gradient(#52c0ed, rgba(15, 29, 58, 0.9));
}

#container, #gameCanvas, .popup
{
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	height: 500px;
	width: 800px;
	background-color: #7a9bbf;
}

.popup
{
	background: linear-gradient(#52c0ed, rgba(15, 29, 58, 0.50));
	background: -webkit-linear-gradient(#52c0ed, rgba(15, 29, 58, 0.50));
	z-index: 10;
	text-align: center;
	overflow: auto;
	font-size: 1.8em;
}
#instructions
{
	padding: 10px 10px 10px;
	font-size: 1.6em;
}

#title
{
	width: 50%;
	height: 25%;
}

.logo
{
	width: 20%;
	height: 7%;
}

#intro
{
	cursor: pointer;
}

.keyboard
{
	width: 46%;
	height: 46%;
	margin: auto;
	position: absolute;
	top: 31%;
	left: 0;
	/*bottom: 0;*/
	right: 0;

}

#btnStartGame
{
	font-size: 1.6em;
	letter-spacing: 1px;
	padding: 6px 20px;
}

#scoreboard
{
	background: linear-gradient(#52c0ed, rgba(15, 29, 58, .8));
	background: -webkit-linear-gradient(#52c0ed, rgba(15, 29, 58, .8));
}
#top10
{
	margin: auto;
	text-align: left;
	width: 70%;
	text-shadow: 0 0 5px #ffffff;
	border-collapse: collapse;
}
#top10 td
{
	padding: 3px 10px;
	border: 1px dotted #ffffff;
}

#score
{
	font-size: 1.8em;
	font-weight: 300;
	min-width: 100px;
}

table
{
	border-spacing: 0;
}

.inTop5
{
	color: #f0ff36;
	text-shadow: 0 0 5px #f0ff36;
	background-color: #2F4784;
}

#subScore
{
	color: #f0ff36;
	font-size: 1.3em;
}



@media only screen and (min-width : 320px) and (orientation: portrait)
{
	#gameCanvas, #container, #intro, #endGame, #scoreboard
	{
		width: 760px;
		height: 475px;
	}
	body
	{
		background: #112a45 none;
	}
}

@media only screen and (min-width : 320px) and (orientation: landscape)
{
	#gameCanvas, #container, #intro, #endGame, #scoreboard
	{
		width: 600px;
		height: 375px;
		font-size: 1.2em;
	}
	body
	{
		background: #112a45 none;
	}
}

@media only screen and (min-width: 1020px)
{
	#gameCanvas, #container, #intro, #endGame, #scoreboard
	{
		width: 800px;
		height: 500px;
		font-size: 1.4em;
	}
	body
	{
		/*background: #7a9bbf url("../assets/snow_bg.jpg") no-repeat fixed center center;*/
		background: #112a45 url("../assets/bg2.jpg") no-repeat fixed center center;
	}
}


#hud
{
	width: 250px;
	margin: 0 auto;
	position: absolute;
	top: -30px;
	left: 0;
	right: 0;
	z-index: 7;
	border-radius: 16px;
	padding: 0 8px;
	color: rgb(255, 255, 250);
	font-size: 1em;
	background-color: rgba(122, 155, 191, 0.3);
	box-shadow: 1px 1px 5px rgba(14, 42, 73, 0.50);
	text-shadow: 0 0 4px rgba(255, 255, 255, 0.70);
	opacity: 0;
}




.fpsDisplay
{
	position: fixed;
	top: 5px;
	left: 5px;
	padding: 20px;
	background-color: rgba(0, 0, 0, 0.70);
	border-radius: 10px;
}

.blink
{
	opacity: .3;
}


#endGame > img
{
	margin-top: 16px;
}

#competition > table
{
	margin: 0 auto;
	text-align: left;
}

#yourScore
{
	font-size: 1.5em;
}

.buttons
{
	position: absolute;
	bottom: 20px;
	margin: auto;
	left: 0;
	right: 0;
	text-align: center;
}

#endGame > .buttons
{
	font-size: 1.3em;
}

.incorrectField
{
	border: 2px solid #FF0000;
}


.btn
{
	display: inline-block;
	margin: 0 10px;
	border-radius: 10px;
	background-color: rgba(82, 192, 237, 0.80);
	padding: 8px 12px;
	cursor: pointer;
	font-weight: 500;
}

.btn:hover
{
	background-color: rgba(78, 163, 208, 0.80);
	text-shadow: 0 0 10px #ffffff;
}

@-webkit-keyframes spin
{
	from {-webkit-transform: rotateY(-90deg);}
	to {-webkit-transform: rotateY(0deg)}
}

@keyframes spin
{
	from {transform: rotateY(-90deg);}
	to {transform: rotateY(0deg)}
}


.spin
{
	-webkit-animation-name: spin;
	-webkit-animation-duration: 1s;

	animation-name: spin;
	animation-duration: 1s;
}


.fade
{
	opacity: 0;
	transition: opacity .5s linear;
	-moz-transition: opacity .5s linear;
	-webkit-transition: opacity .5s linear;
}


@-webkit-keyframes reveal { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes reveal { from { opacity:0; } to { opacity:1; } }
@keyframes reveal { from { opacity:0; } to { opacity:1; } }

.reveal
{
	opacity:0;
	-webkit-animation:reveal linear 1;
	-moz-animation:reveal linear 1;
	animation:reveal linear 1;

	-webkit-animation-fill-mode:forwards;
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration:.5s;
	-moz-animation-duration:.5s;
	animation-duration:.5s;
}