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

}

body, ul, li {
	margin: 0;
	padding: 0;
}

h1, h2 {
	width: 100%;
	padding: 0;
	margin: 0;
	font-family: 'mini_pixel';

	text-align: center;
}

#gameScreen {
	position: relative;
	height: 768px;
	width: 900px;

	margin: auto;

	overflow: hidden;
}

#gameScreen h1 {
	font-size: 100px;
	color: white;
	text-shadow: 5px 0px 0px black, 0px 5px 0px black, -5px 0px 0px black, 0px -5px 0px black;
	margin: 90px 0 50px 0;
}

#gs-info-panel {
	position: absolute;
	top: -50px;
	width: 100%;
	height: 50px;

	font-family: 'mini_pixel';
	font-size: 30px;
	color: white;
	line-height: 50px;
	text-align: center;

	background: rgba(0, 0, 0, 0.3);
	transition: top 300ms ease;
}
#gs-info-panel strong {
	color: #FD9F4C;
}
#gs-info-panel.showTopBar { top: 0; }

canvas {
	background: #0099CC;
}

.inGamePanel {
	position: relative;
	width: 100%;
	height: 100%;
	top: 100%;

	transition: top 400ms ease;
}

.overlay {
	position: absolute;

	top: 0%;
}

#gs-error {
	background: rgba(0, 0, 0, 0.6);
}
#gs-error h2 {
	color: #E76100;
	font-size: 35px;
	margin-top: 80px;
}

#gs-loader-anim-box {
	position: absolute;
	top: 200px;
	width: 100%;
	text-align: center;
	animation: boxMove 1s ease alternate infinite;
	-webkit-animation: boxMove 1s ease alternate infinite;
}

#gs-loader-anim-bird {
	display: inline-block;
	width: 85px;
	height: 60px;
	background: url('../images/clumsy.png');
	background-position: 0 0;
	animation: birdFly 300ms steps(3, end) infinite;
	-webkit-animation: birdFly 300ms steps(2, end) infinite;
}
#gs-loader-text {
	position: absolute;
	width: 100%;
	top: 340px;
	color: white;
	font-size: 35px;
	text-align: center
}

#gs-ranking > h1,
#gs-highscores > h1 {
	margin-top: 160px;
	color: #FD9F4C;
	font-size: 9em;
	text-shadow: 5px 0px 0px #40394A, 0px 5px 0px #40394A, -5px 0px 0px #40394A, 0px -5px 0px #40394A;
}

#gs-ranking-box,
#gs-highscores-box {
	height: 200px;
	width: 400px;
	margin: auto;

	background-color: #DED793;
	border: 4px solid #463740;
	border-radius: 2px;

	font-family: 'mini_pixel';
}

.gs-ranking-medal {
	height: 80px;
	width: 80px;
	background: url('../images/medals.png');
 	background-position: 0px;
}
.third { background-position: -80px; }
.second { background-position: -160px; }
.winner { background-position: -240px; }

#gs-ranking-box h3 {
	margin: 20px 0 12px 0;
	font-size: 35px;
	color: #ED7958;
	text-shadow: 0px 2px 0px #FBE9A7;
}

.gs-ranking-text {
	display: block;
	font-size: 50px;
	color: white;
	text-shadow: 5px 0px 0px #40394A, 0px 5px 0px #40394A, -5px 0px 0px #40394A, 0px -5px 0px #40394A;
}

.gs-ranking-text-mini {
	font-size: 35px;
	margin: 12px;
}

.gs-ranking-panel {
	float: left;
	width: 34%;
	height: 100%;
	padding: 2% 8%;
}

.gs-ranking-panel:last-child {
	text-align: right;
}
.gs-ranking-panel:last-child:after {
	clear: both;
}

#gs-highscores-scores {
	padding-top: 10px;

	-webkit-columns: 2;
	-moz-columns: 2;
	columns: 2;
}

#gs-highscores-scores li {
	position: relative;
	list-style-type: none;
	color: #463740;
	font-size: 32px;
	margin: 0 0 15px 10px;

	color: white;
	text-shadow: 3px 0px 0px #40394A, 0px 3px 0px #40394A, -3px 0px 0px #40394A, 0px -3px 0px #40394A;
}

#gs-highscores-scores li span {
	color: #ED7958;
	text-shadow: 0px 2px 0px #FBE9A7;
	font-size: 0.8em;
}

#gs-highscores-scores li strong {
	position: absolute;
	right: 15px;
	display: inline-block;
	margin-left: 5px;
	font-size: 1.15em;
}

input[type="text"] {
	display: block;
	width: 160px;
	border: 0;
	margin: auto;
	
	font-size: 50px;
	font-family: 'mini_pixel';
	text-shadow: 2px 2px 0px #E36116;
	color: #FFA24A;
	text-align: center;
	background: transparent;
}

input[type="button"] {
	display: block;
	width: 120px;
	padding: 10px;
	border: 0;
	margin: 25px auto;
	
	font-size: 35px;
	font-family: 'mini_pixel';
	text-shadow: 2px 2px 0px #E36116;
	color: white;
	text-align: center;
	background: #E76100;


	box-shadow: inset 0px 3px 0px 0px white,
				inset 3px 0px 0px 0px white,
				inset -3px 0px 0px 0px white,
				inset 0px -3px 0px 0px white;
}

@keyframes boxMove
{
	from {top: 200px;}
	to {top: 150px;}
}
@-webkit-keyframes boxMove
{
	from {top: 200px;}
	to {top: 150px;}
}
@keyframes birdFly
{
	from {background-position: 0;}
	to {background-position: 170px;}
}
@-webkit-keyframes birdFly
{
	from {background-position: 0;}
	to {background-position: 170px;}
}