@font-face{
	font-family: 'ARCADECLASSIC';
	src: url('images/fonts/ARCADECLASSIC.TTF');
}

@-webkit-keyframes movebackgroundSky {
    0% {background-position: 0px bottom;}
    100% {background-position:-552px bottom;}
}
@-moz-keyframes movebackgroundSky {
    0% {background-position: 0px bottom;}
    100% {background-position:-552px bottom;}
}
@-o-keyframes movebackgroundSky {
    0% {background-position: 0px bottom;}
    100% {background-position:-552px bottom;}
}


@-webkit-keyframes movebackgroundEarth {
    0% {background-position: 0px top;}
    100% {background-position:-1344px top;}
}
@-moz-keyframes movebackgroundEarth {
    0% {background-position: 0px top;}
    100% {background-position:-1344px top;}
}
@-o-keyframes movebackgroundEarth {
    0% {background-position: 0px top;}
    100% {background-position:-1344px top;}
}


@-webkit-keyframes birdanimation {
    0% {background-position: 0px -0px;}
    100%{background-position:-0px -72px;}
}
@-moz-keyframes birdanimation {
    0% {background-position: 0px -0px;}
    100%{background-position:-0px -72px;}
}
@-o-keyframes birdanimation {
    0% {background-position: 0px -0px;}
    100%{background-position:-0px -72px;}
}

@-webkit-keyframes obstacleAnimation {
    0% {left: 1400px;}
    100%{left:-100px;}
}
@-moz-keyframes obstacleAnimation {
    0% {left: 1400px;}
    100%{left:-100px;}
}
@-o-keyframes obstacleAnimation {
    0% {left: 1400px;}
    100%{left:-100px;}
}

@-webkit-keyframes monsterAnimation {
    0% {background-position: 0px -0px;}
    100%{background-position:-0px -196px;}
}
@-moz-keyframes monsterAnimation {
    0% {background-position: 0px -0px;}
    100%{background-position:-0px -196px;}
}
@-o-keyframes monsterAnimation {
    0% {background-position: 0px -0px;}
    100%{background-position:-0px -196px;}
}

@-webkit-keyframes bananaAnimation {
    0% {background-position: 0px -0px;}
    100%{background-position:-0px -80px;}
}
@-moz-keyframes bananaAnimation {
    0% {background-position: 0px -0px;}
    100%{background-position:-0px -80px;}
}
@-o-keyframes bananaAnimation {
    0% {background-position: 0px -0px;}
    100%{background-position:-0px -80px;}
}


@-webkit-keyframes gameOver {
	0%{top:100px; opacity:0;}
	100%{top:0px; opacity:1;}
}
@-moz-keyframes gameOver {
	0%{top:100px; opacity:0;}
	100%{top:0px; opacity:1;}
}
@-o-keyframes gameOver {
	0%{top:100px; opacity:0;}
	100%{top:0px; opacity:1;}
}


@-webkit-keyframes gameOverReplay {
	0%{top:272px; opacity:0;}
	100%{top:210px; opacity:1;}
}
@-moz-keyframes gameOverReplay {
	0%{top:272px; opacity:0;}
	100%{top:210px; opacity:1;}
}
@-o-keyframes gameOverReplay {
	0%{top:272px; opacity:0;}
	100%{top:210px; opacity:1;}
}


@-webkit-keyframes medalSizeAnimation {
	0%{height:100px; width:auto; opacity:0;}
	100%{height:44px; width:auto; opacity:1;}
}
@-moz-keyframes medalSizeAnimation {
	0%{height:100px; width:auto; opacity:0;}
	100%{height:44px; width:auto; opacity:1;}
}
@-o-keyframes medalSizeAnimation {
	0%{height:100px; width:auto; opacity:0;}
	100%{height:44px; width:auto; opacity:1;}
}


@-webkit-keyframes medalAnimation {
	0%{top:100px; left: 5px; }
	100%{top:113px; left:31px;}
}
@-moz-keyframes medalAnimation {
	0%{top:100px; left: 5px; }
	100%{top:113px; left:31px;}
}
@-o-keyframes medalAnimation {
	0%{top:100px; left: 5px; }
	100%{top:113px; left:31px;}
}



body, html {
	height:100%;
	margin:0;
	padding:0;
}

#container{
	width:100%;
	height:100%;	
}

#container-game{
	width:100%;
	height:100%;
}

#container-sky{
	position:absolute;
	top:0;
	height:80%;
	width:100%;
	background-image: url(images/sky.png);
	background-position: bottom;
	background-repeat: repeat-x;
	background-color:#6FBCCC;
	-webkit-animation: movebackgroundSky 5.37s linear infinite;
	-moz-animation: movebackgroundSky 5.37s linear infinite;
	-o-animation: movebackgroundSky 5.37s linear infinite;
	/*-webkit-animation-name: movebackgroundSky ;
	-webkit-animation-duration: 7.155s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;*/
	overflow:hidden;	

}

#container-floor{
	position:absolute;
	bottom:0;
	height:20%;
	width:100%;
	background-image: url(images/land.png);
	background-repeat: repeat-x;
	background-color:#ded895;
	-webkit-animation: movebackgroundEarth 5.37s linear infinite;
	-moz-animation: movebackgroundEarth 5.37s linear infinite;
	-o-animation: movebackgroundEarth 5.37s linear infinite;
	/*-webkit-animation-name: movebackgroundEarth ;
	-webkit-animation-duration: 7.155s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;*/

	
}

#gameplay-area{
	min-height:420px;
	width:100%;
	position:absolute;
	bottom:0;
}

.bird{
	position:absolute;
	top:210px;
	left: 60px;
	height:24px;
	width:34px;
	background-image:url('images/bird.png');
	background-position: 0px -12px;
	animation: birdanimation 0.3s steps(3) infinite;
	z-index: 9999;
}

.ceiling{
	position:absolute;
	top:0;
	width:100%;
	height:32px;
	background-image: url(images/ceiling.png);
	-webkit-animation: movebackgroundEarth 5.37s linear infinite;
	-moz-animation: movebackgroundEarth 5.37s linear infinite;
	-o-animation: movebackgroundEarth 5.37s linear infinite;
	/*-webkit-animation-name: movebackgroundEarth ;
	-webkit-animation-duration: 7.155s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;*/
}

.obstacle-animated{
	position:absolute;
	left:0px;
	bottom:0;
	width:90px;
	height:420px;
	-webkit-animation: obstacleAnimation 6s linear infinite;
	-moz-animation: obstacleAnimation 6s linear infinite;
	-o-animation: obstacleAnimation 6s linear infinite;
	/*-webkit-animation-name: obstacleAnimation;
	-webkit-animation-duration: 8s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;*/

}

.obstacle-bottom{
	position:absolute;
	bottom:0px;
	height:100px;
	width:100%;
	background-image: url(images/obstacle.png);
	background-repeat: repeat-y;
	background-position:bottom center;
}

.obstacle-bottom:after{
	content:"";
	height:6px;
	width:90px;
	background-image:url(images/obstacle-top-up.png);
	background-position:center;
	display:inline-block;
	position:absolute;
	top:-2px;
	background-repeat:no-repeat;
}

.obstacle-top{
	position:absolute;
	top:32px;
	height:120px;
	width:100%;
	background-image: url(images/obstacle-down.png);
	background-repeat: repeat-y;
	background-position:bottom center;
}


.obstacle-top:after{
	content:"";
	height:6px;
	width:90px;
	background-image:url(images/obstacle-top-down.png);
	background-position:center;
	display:inline-block;
	position:absolute;
	bottom:-2px;
	background-repeat:no-repeat;
}

.monster, .otherMonster{
	position:absolute;
	top:0px;
	left: 1800px;
	height:49px;
	width:60px;
	background-image:url('images/spa-monster.png');
	background-position: 0px 0px;
	z-index: 9990;
	-webkit-animation: monsterAnimation 0.6s steps(4) infinite ;
	-moz-animation: monsterAnimation 0.6s steps(4) infinite ;
	-o-animation: monsterAnimation 0.6s steps(4) infinite ;
	
}

.banana{
	position:absolute;
	top: 0px;
	left:1800px;
	width:20px;
	height:20px;
	background-image:url(images/banana.png);
	z-index: 9991;
	-webkit-animation: bananaAnimation 1s steps(4) infinite;
	-moz-animation: bananaAnimation 1s steps(4) infinite;
	-o-animation: bananaAnimation 1s steps(4) infinite;
	
}

#score{
	position:absolute;
	min-height:30px;
	min-width:350px;
	top:-50px;
	right:2%;
	z-index:9999;
	-moz-user-select: none;
	-webkit-user-select: none;
	-o-user-select:none;
	-ms-user-select:none;
	user-select:none;

}

#score p{
	position:absolute;
	text-align:left;
	font-family: 'ARCADECLASSIC';
	font-size:3em;
	margin:0;
}

#score p .multiply{
	color:red;
}

#start-menu{
	position:absolute;
	top:100px;
	left: 90px;
	height:200px;
	width:186px;
	background-image: url(images/splash.png);
	background-repeat: no-repeat;

}

#menu-gameover{
	position:absolute;
	top:80px;
	left:70px;
	height:270px;
	width:240px;
	z-index: 9999;
}

#scoreboard{
	position:absolute;
	top:0px;
	height:188px;
	width:240px;
	background-image: url(images/scoreboard.png);
	background-repeat: no-repeat;
	-webkit-animation: gameOver 1s ease;
	-moz-animation:gameOver 1s ease;
	-o-animation:gameOver 1s ease;
}

#replay{
	position:absolute;
	bottom:0px;
	height:60px;
	width:110px;
	left:60px;
	background-image:url(images/replay.png);
	background-repeat: no-repeat;
	-webkit-animation: gameOverReplay 2s ease;
	-moz-animation:gameOverReplay 2s ease;
	-o-animation:gameOverReplay 2s ease;
}

#scoreFinal{
	position:absolute;
	min-width:45px;
	top:105px;
	left:165px;
	text-align:right;
}

#highScore{
	position:absolute;
	min-width:45px;
	top:150px;
	left:165px;
	text-align:right;
}
.font-numbers{
	padding:0.5px;
}

#medal{
	position:absolute;
	top:113px;
	left:31px;
	-webkit-animation: medalAnimation 1.5s ease;
	-moz-animation: medalAnimation 1.5s ease;
	-o-animation: medalAnimation 1.5s ease;
}

#medal img{
	-webkit-animation: medalSizeAnimation 1.5s ease;
	-moz-animation: medalSizeAnimation 1.5s ease;
	-o-animation: medalSizeAnimation 1.5s ease;
}