/*
=== GENERAL ===
*/
body{background-color:grey; margin:0; padding: 0}
div{font-family: 'VT323', monospace; }
span{text-align: center; margin:0px; padding:0px;}

#game{position:relative; width:1152px; height:648px; margin:0 auto; background-color:grey; color:#f4f4f4; /*color:f0f0f0;*/
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; 
} 

#stage{position:absolute; width:100%; height:100%; background-color:#f4f4f4; font-size:40px; overflow:hidden; } 
#dimMap{position:absolute; width:100%; height:100%; background-color:#1a1c2c; z-index: 200; }
.dimRoom{position:absolute; width:100%; height:100%; background-color:#1a1c2c; z-index: 18; }
#blackMap{position:absolute; width:100%; height:100%; background-color:#1a1c2c; z-index: 190; opacity: 0.5; }

#shop, #achievement {background-color:#fafafa;}

/* === SPRITE --------------------------------------------------------------------------- */
.sprite, .infoTile, .chest { 
	position: absolute; 
	z-index: 5;
	}
	
.player{ position: absolute; 
	margin: auto;
	font-size:10px;
	text-align:center;
	}
	
.enemy{
	position: absolute; 
	margin: auto;
	font-size:25px;
	text-align:center;
}
	
.infoTile{ margin: auto; color: #1a1c2c; text-align:center; }
.chest{ margin: auto; color: #1a1c2c; text-align:center; font-size:40px; color:#333c57; }
	
.dmgbox,.healBox, .mpbox, .goldbox, .dmgEnemy {
	position: absolute; font-size:40px; color:red; text-align: center; margin: 0 0 10px 0; font-weight:bold; z-index: 62;
	text-shadow: -2px 2px 0 #1a1c2c,
				  2px 2px 0 #1a1c2c,
				 2px -2px 0 #1a1c2c,
				-2px -2px 0 #1a1c2c;
	}
/* .dmgbox{ color:#b13e53; } */
.dmgbox{ color:#ef7d57; }
.dmgEnemy{ color:#ef7d57; font-size:30px; }
.healbox{ color:#38b764; }
.mpbox{ color:#41a6f6; }
.goldbox{ color:#ffcd75; font-size:30px; }

.floor{ position: absolute; background-color:Black; }


/* === HUD --------------------------------------------------------------------------- */

.textBox, .title, .subtitle, .infoBox, .hudBox,.pauseBox {
	position: absolute;  
	text-align:left; 
	padding:10px; 
	/* border: 1px solid black;  */
	background-color:#1a1c2c;   
	}
.textBox { font-size:22px; }
.hudBox { font-size:30px; }
.title { font-size:35px; }
.subtitle { font-size:25px; }
.infoBox { font-size:30px; text-align:center; }
.pauseBox { font-size:25px; text-align:left; padding:25px; }

.playerDamage {
	position: absolute;  
	background-color: none;
	border: 10px solid red; 
}

.keyBox { position: absolute; text-align:center; }

.hudMoney { position: absolute; text-align:right; font-size:50px; font-weight: bold;
			text-shadow: -1px 1px 0 #000,
				  1px 1px 0 #000,
				 1px -1px 0 #000,
				-1px -1px 0 #000;}
				
.hudItems{ position: absolute; text-align:center; font-size:35px; font-weight: bold;
			text-shadow: -1px 1px 0 #000,
				  1px 1px 0 #000,
				 1px -1px 0 #000,
				-1px -1px 0 #000;}			

/* === DOOR --------------------------------------------------------------------------- */
.doorIcon { position: absolute; text-align:center; font-size:50px; }

/* === HEALTH BAR --------------------------------------------------------------------------- */
.healthBar { position: absolute; background-color: #1a1c2c; }
.healthBarHUD { position: absolute; background-color: #333c57; }
.healthBarWait { position: absolute; background-color:grey; border: 1px solid white; }
.healthBarHP { position: absolute; background-color:#b13e53; }
.healthBarMP { position: absolute; background-color:#41a6f6; }
.healthBarHPWhite { position: absolute; background-color:grey; }
	
/* === MENU --------------------------------------------------------------------------- */	
.menuItem,.menuItemSelect, .menuItemInactive, .menuItemInactiveSelect {
	position: absolute; 
	background-color: #454545; 
	font-size:24px;
	padding: 0x;
	color: Gainsboro;
	/*border-bottom: 2px solid black;*/
	text-align: center;
	vertical-align: middle;
	}

.blank {
	position: absolute; 
	font-size:24px;
	padding: 0px;
	margin: 0px;
	color: Gainsboro;
	text-align: center;
	vertical-align: middle;
}
.hud, .message {
	position: absolute; 
	background-color: DarkSlateGrey; 
	font-size:36px;
	padding: 10px;
	color: Gainsboro;
	text-align: center;
}
/*.message { text-align: center; }*/
.itemTable {
	font-size:36px;
	color: Gainsboro;
	text-align: left;
	padding: 10px;
}

.menuItemSelect { background-color: #1a1a1a; }	
.menuItemInactive { color: #a7a7a7 ;  }	
.menuItemInactiveSelect { background-color: #1a1a1a; color: #a7a7a7 ; }	

#menuInfoBox {
	position: absolute; 
	background-color: DarkSlateGrey; 
	width: 250px; 
	font-size:20px;
	padding: 10px;
	color: Gainsboro;
	z-index: 20;
	}	

/* === Other === */


.big{font-size:60px;}
.small{font-size:26px;}
.xsmall{font-size:18px;}
.press{color:grey}