*{
	font-family: Arial, Verdana;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	outline: none;
}
body{margin:0;padding:0;}

#game_content, #loading, #inicial{
	position: absolute;
	margin: auto;
	top:0; bottom:0; left:0; right:0;
	width: 480px;
	height: 320px;	
	background: url(../images/cenario.png) no-repeat;
}
#game_content{display:none;}

#inicial{
	background: url(../images/inicial.png) no-repeat;
	z-index: 1100;
	-webkit-transition: all .3s ease-out; 
    -moz-transition: all .3s ease-out; 
    transition: all .3s ease-out;
}
#inicial button{
	position: absolute;
	bottom: 19px;
	left: 142px;
	width: 195px;
	height: 55px;
	background: url(../images/jogar.png) no-repeat top;
	border: 0;
	text-indent: -999px;
	cursor: pointer;
}
#inicial button:active{
	background-position: bottom;
}

#loading{
	background: url(../images/logo.png) no-repeat;
	z-index: 10000;
	-webkit-transition: all .3s ease-out; 
    -moz-transition: all .3s ease-out; 
    transition: all .3s ease-out;
}
#loading .barra{
	position: absolute;
	bottom: 100px;
	left: 146px;
	width: 188px;
	height: 20px;
	background: url(../images/loading.png) no-repeat;
}
#loading .barra span{
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 0%;
	height: 23px;
	background: url(../images/loading_charge.png) no-repeat;
	-webkit-transition: all 5s ease-out; 
    -moz-transition: all 5s ease-out; 
    transition: all 5s ease-out;
}
#loading .texto{
	position: absolute;
	bottom: 75px;
	left: 195px;
	font-size: 14px;
	margin: auto;
	color: #525252;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
	font-weight: bold;
}

#grid{
	position: relative;
	float: left;
	width: 284px;
	height: 280px;
	top: 28px;
	left:10px;
}

#player_info{
	position: relative;
	float: left;
	width: 180px;
	height: 100%;
	text-align: center;	
}
#player_info *{font-family: 'Poller One', cursive;}

#player_info p, #game_level{
	font-size: 18px;
	color: #226622;	
}

#total_score{
	position:absolute;
	width: 85px;
	height: 40px;
	left: 16px;
	top: 29px;	
	color: #FFF;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; 
}

#goal_score{
	font-size: 12px; 
	position: absolute;
	bottom: 0;
	right: 0;
}

#current_score{
	font-size: 30px;	
}

#king{
	position:absolute;
	top:50px;
	pointer-events: none;
	background: url(../images/king.png) no-repeat center left;
	width:185px;
	height:250px;
	z-index:100;
}

#level{
	position: absolute;
	color: #FFF;
	text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	right: 7px;
	top: 35px;
	font-size: 25px;
	width: 50px;
}

#time_gauge{
	position: absolute;
	z-index:110;
	border-radius: 20px;
	left: 10px;
	top: 80px;
	width: 10px;
	height: 190px;
	background-color: #666;
}

#current_gauge{
	position: absolute;
	border-radius: 20px;
	bottom: 0;
	left: 0;
	border:1px solid #666;
	width: 8px;
	height: 100%;
	background-color: #00F000;
}

.score_gain{
	position: absolute;
	left: 112px;
	font-size: 15px;
	font-weight: bold;
	color: #222;
}

.gem, .bomb{
	position: absolute;
	width: 35px;
	height: 35px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 100% 100%;	
}
#restart_bt, #pause_bt{ cursor:pointer; position:absolute; bottom:10px; border:0; width:35px; height:35px; text-indent:-999px;
-webkit-transition: all 0.1s ease-out; -moz-transition: all 0.1s ease-out; transition: all 0.1s ease-out; }
#restart_bt:hover, #pause_bt:hover{ -webkit-transform: scale(1.1); -moz-transform: scale(1.1); transform: scale(1.1);}
#restart_bt{ left:10px; background:url(../images/botao_reiniciar.png) no-repeat; }
#pause_bt{ right:10px; background:url(../images/botao_som.png) no-repeat; }