@font-face {
	font-family: 'japers';
	src: url('fonts/japers.eot');
	src: url('fonts/japers.ttf');
}
@font-face {
	font-family: 'MyriadProB';
	src: url('fonts/MyriadPro-Black.eot');
	src: url('fonts/MyriadPro-Black.ttf');
}

.tela{
	width: 800px;
	height: 600px;
}

.botoes{
	position: absolute;
	text-decoration: none;
	text-indent: -5000px;
}
.btAvancar{
	background: url(img/bt_avancar.png) no-repeat 0 0;
	width: 167px;
	height: 84px;
}

.popup{
	position: absolute;
	font-family: 'japers';
	top:50%;
	left:50%;
	color:#fff;
}
.popup blockquote{
	width:100%;
	height:100%;
	display:table;
}
.popup blockquote p{	
	display:table-cell;
	vertical-align: middle;
	font-size: 27px;
}
.popup blockquote p span{	
	display:block;
    padding: 17px 0;
}
.popup blockquote p span:first-of-type{	
	padding-top:0;
}

#home{
	background: url(img/bg_home.jpg) no-repeat 0 0;
}
#popHome{
	background: url(img/pop_home.png) no-repeat 0 0;
	width: 430px;
    height: 70px;
	margin:-70.5px 0 0 -256px;
	padding:30px 38px 40px 40px;
}
#popHome blockquote{
	text-align: center;
}
#popHome .btAvancar{
	bottom: -30px;
    right: -40px;
}

#inicio{
	background: url(../assets/images/abertura_fim.png) no-repeat 0 0;
}
#inicio .filtro{
	background: rgba(7,14,51,.5);
}
#popAbertura{
	background: url(img/pop_abertura.png) no-repeat 0 0;
	width: 692px;
    height: 372px;
	margin:-222.5px 0 0 -386.5px;
	padding:30px 38px 40px 40px;
}
#popAbertura .btAvancar{
	bottom: -30px;
    right: 5px;
}


#jogo[data-fase=f1]{
	background: url(img/bg_fase1.jpg) no-repeat 0 0;
}
#jogo[data-fase=f2]{
	background: url(img/bg_fase2.jpg) no-repeat 0 0;
}

#popFase1, #popFase2{
	background: url(img/pop_fase1.png) no-repeat 0 0;
	width: 532px;
    height: 206px;
	margin:-108.5px 0 0 -305.5px;
	padding:30px 38px 40px 40px;
}
#popFase1 .btAvancar, #popFase2 .btAvancar{
	bottom: -30px;
    right: -45px;
}

#popFase1_final{
	background: url(img/pop_fase1_final.png) no-repeat 0 0;
	width: 800px;
    height: 600px;
	top: 0px;
	left: 0px;
	padding: 10px 38px 40px 158px;
}

#popFase1_final .btAvancar{
	bottom: 190px;
    right: 265px;
}

#popFase2_final{
	background: url(img/pop_fase2_final.png) no-repeat 0 0;
	width: 800px;
    height: 600px;
	top: 0px;
	left: 0px;
	padding: 38px 38px 40px 158px;
}
#popFase2_final .btAvancar{
	bottom: 160px;
    right: 265px;
    background: url(img/bt_reiniciar.png);
}

#popFase2_final .trofeu{
	position: absolute;
    width: 145px;
    height: 134px;
    background: url(img/trofeu.png);
    top: 148px;
    left: 459px;
}

#jogo[data-fase=f1] .jogador{
	position: absolute;
	width: 280px;
    height: 337px;
	top: 250px;
    left: 250px;
}
#jogo[data-fase=f1] .jogador[data-animacao=direito]{
	background: url(img/chute_fase1_direito.png) no-repeat 0 0;
}
#jogo[data-fase=f1] .jogador[data-animacao=esquerdo]{
	background: url(img/chute_fase1_esquerdo.png) no-repeat 0 0;
}
#jogo[data-fase=f1] .jogador .pe{
	position: absolute;
	width: 140px;
    height: 337px;
	top: 0;
    left: 50%;
	cursor:pointer;
}
#jogo[data-fase=f1] .jogador .pe.direito{
	margin-left:0;
}
#jogo[data-fase=f1] .jogador .pe.esquerdo{
	margin-left:-140px;
}

#jogo[data-fase=f1] .goleira{
	position: absolute;
	width: 109px;
    height: 137px;
	top: 165px;
    left: 346px;
	background: url(img/goleira_parada.png) no-repeat 0 0;
}

#jogo[data-fase=f2] .jogador{
	position: absolute;
	width: 229px;
	height: 425px;
	top: 183px;
	left: 269px;
}
#jogo[data-fase=f2] .jogador[data-animacao=direito]{
	background: url(img/chute_fase2_direito.png) no-repeat 0 0;
}
#jogo[data-fase=f2] .jogador[data-animacao=esquerdo]{
	background: url(img/chute_fase2_esquerdo.png) no-repeat 0 0;
}
#jogo[data-fase=f2] .jogador[data-animacao=direito_errado]{
	background: url(img/chute_fase2_direito_errado.png) no-repeat 0 0;
}
#jogo[data-fase=f2] .jogador[data-animacao=esquerdo_errado]{
	background: url(img/chute_fase2_esquerdo_errado.png) no-repeat 0 0;
}
#jogo[data-fase=f2] .jogador .pe{
	position: absolute;
	width: 140px;
    height: 337px;
	top: 0;
    left: 50%;
	cursor:pointer;
}
#jogo[data-fase=f2] .jogador .pe.direito{
	margin-left:-119px;
}
#jogo[data-fase=f2] .jogador .pe.esquerdo{
	margin-left: 22px;
}

#jogo .menu{
	position: absolute;
	width: 800px;
    height: 90px;
	top: 0px;
    left: 0px;
	background: url(img/menu.png) no-repeat 0 0;
}
#jogo .menu .nums{
	position: absolute;
    top: 15px;
    left: 139px;
    color: #4f2525;
    font-size: 54px;
    font-family: 'japers';
}

#jogo .chutes{
	position: absolute;
	top: 34px;
	left: 483px;
}

#jogo .tentativa{
	width: 36px;
    height: 33px;
    background: url(img/checks.png) no-repeat;
    display: inline-block;
    margin-left: 13px;
}

#jogo .tentativa[data-status=off]{background-position: 50px 0px;}
#jogo .tentativa[data-status=ok]{background-position: 0px 0px;}
#jogo .tentativa[data-status=err]{background-position: -53px 0px;}

#popTempoEsgotado, #popFimJogo{
	position: absolute;
	width: 800px;
	height: 600px;
	top: 0;
	left: 0;
}

#popTempoEsgotado{ background: url(img/pop_tempo.png); padding: 3px 0px 0px 328px;} 
#popFimJogo{ background: url(img/pop_fim.png); padding: 3px 0px 0px 343px;}

#jogo .serpentinas, #jogo .serpentinas2{
	position: absolute;
	width: 800px;
	height: 600px;
	background: url(img/serpentinas.png) no-repeat 0 0;
	top: 0;
    left: 0;
}

.fontMyrid{ font-family: 'MyriadProB' !important; }