#game h1
{
	font-family: "fairy", "Arial"; 
	font-weight: bold; 
	letter-spacing: 4px; 
	
	color: rgb(255, 255, 255); 
					
	text-shadow: 	2px 2px 0px rgb(0, 0, 0), 
					-2px 2px 0px rgb(0, 0, 0), 
					-2px -2px 0px rgb(0, 0, 0), 
					2px -2px 0px rgb(0, 0, 0), 
					0px 2px 0px rgb(0, 0, 0), 
					0px -2px 0px rgb(0, 0, 0), 
					2px 0px 0px rgb(0, 0, 0), 
					-2px 0px 0px rgb(0, 0, 0); 
}

/* *********************** */
/* Info du joueur connecté */
/* *********************** */

#current-character
{
	position: absolute;
	left: 20px;
	top: 50px;
	bottom: 340px;
	text-align: center;
	background-color: rgba(211, 190, 168, 0.6);
	border-radius: 20px;
	padding: 10px;
}

#current-character #current-character-avatar
{
	position: relative;
	margin-top: 10px;
	height: 100px;
}

#current-character #current-character-avatar img
{
	width: 100px;
	height: 100px;
}

#current-character h4
{
	font-size: 1.25em;
	margin: 0px;
}

#current-character #current-character-stat
{
	display: inline-block;
	border: 2px solid rgb(53, 45, 36);
	background-color: rgb(53, 45, 36);
	margin-bottom: 0px;
	width: 100px;
}

#current-character .current-character-stat
{
	/*width: 100px;*/
	height: 10px;
}

#current-character .current-character-stat div
{
	width: 100%;
	height: 100%;
}

#current-character-health { background-color: #9b2d2d; }

#current-character-action
{
	background-color: #ffd701;
	margin-top: 2px;
	margin-bottom: 20px;
}

#current-character-respawn
{
	background-color: #26b600;
	margin-top: 2px;
}

#current-character p
{
	margin: 0px;
	text-align: left;
	line-height: 1.3em;
}

#current-character #other-players-title
{
	margin-top: 5px;
}

#current-character #other-players-icon
{
	display: none;
	text-align: center;
}

#current-character #other-players-icon * { vertical-align: middle; }
#current-character #other-players-icon #nb-other-player { margin-right: 5px; }

#current-character ul
{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

#current-character li
{
	display: inline-block;
	padding: 0px;
	margin: 0px;
}

#current-character a { display: block; }
#current-character a .otherPlayerAvatar { display: block; }

#current-character .player-stat-block
{
	display: inline-block;
	border: 1px solid rgb(53, 45, 36);
	background-color: rgb(53, 45, 36);
	margin: 0px;
}

#current-character .player-stat
{
	width: 33px;
	height: 5px;
}

#current-character .player-stat div
{
	width: 100%;
	height: 100%;
}

.player-health { background-color: #9b2d2d; }

.player-action
{
	background-color: #ffd701;
	margin-top: 1px;
	margin-bottom: 20px;
}

.player-respawn
{
	background-color: #26b600;
	margin-top: 1px;
}

#current-character #mobile-coin
{
	display: none;
	text-align: center;
}

#current-character #mobile-coin * { vertical-align: middle; }
#current-character #mobile-coin #money-value-mobile { margin-right: 5px; }

/* ******************* */
/* Magasin et méchants */
/* ******************* */

#mobs h3, #store h3
{
	font-size: 1.5em;
	line-height: 1.3em;
	margin: 0px;
	margin-top: 10px;
	margin-bottom: 5px;
}

#store
{
	display: none;
	position: absolute;
	right: 20px;
	top: 50px;
	/*bottom: calc(40% + 5px);*/
	bottom: 340px;
	text-align: center;
	background-color: rgba(211, 190, 168, 0.6);
	border-radius: 20px;
}

#store .item-preview
{
	padding: 10px;
}

#store td
{
	padding: 0px;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 1.0em;
	line-height: 1.3em;
	text-align: left;
}

#store .buy-block
{
	text-align: center;
	padding-bottom: 20px;
}

#store td input[type="button"]
{
	min-width: 80px;
	max-width: 80px;
	width: 80px;
}

#store-mobile { display: none; }

#store-mobile .item-preview { padding: 5px; }

#store-mobile .item-info
{
	padding-left: 5px;
	padding-right: 5px;
}

#mobs
{
	display: none;
	position: absolute;
	left: 270px;
	right: 270px;
	top: 100px;
	text-align: center;
	background-color: rgba(211, 190, 168, 0.6);
	border-radius: 20px;
	padding: 10px;
}

#mobs h4
{
	margin: 0px;
	font-size: 1.0em;
	line-height: 1.5em;
}

#mobs ul
{
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

#mobs li
{
	display: inline-block;
	padding: 0px;
	margin: 10px;
	margin-left: 20px;
	margin-right: 20px;
}

#mobs .mob-stat-block
{
	display: inline-block;
	margin-bottom: 10px;
	height: 38px;
	background-color: rgb(53, 45, 36);
}

#mobs .mob-stat
{
	width: 70px;
	height: 30%;
	background-color: rgb(53, 45, 36);
}

#mobs .mob-stat div
{
	width: calc(100% - 4px);
	height: 100%;
}

#mobs .mob-stat .mob-health
{
	background-color: #9b2d2d;
	border: 2px solid rgb(53, 45, 36);
}

#mobs .mob-stat .mob-action
{
	background-color: #ffd701;
	margin-top: 4px;
	border-left: 2px solid rgb(53, 45, 36);
	border-right: 2px solid rgb(53, 45, 36);
}

#mobs .mob-stat .mob-respawn
{
	background-color: #26b600;
	border: 2px solid rgb(53, 45, 36);
}

#mobs p { margin: 0px; }

#mobs input[type="button"]
{
	min-width: 85px;
	max-width: 85px;
	width: 85px;
}

#mobs .attackIcon
{
	position: absolute;
	left: 125px;
	top: 0px;
	cursor: pointer;
	display: none;
}

/* *************** */
/* Console et chat */
/* *************** */

.console-chat
{
	position: absolute;
	left: 10px;
	right: 60%;
	top: calc(100% - 325px);
	bottom: 0px;
	/*height: 40%;*/
}

.console-chat h3
{
	text-align: left;
	margin: 0px;
	margin-left: 20px;
	font-size: 1.25em;
}

.console-chat h3 * { vertical-align: middle; }

.console-chat h3 span { cursor: pointer; }

.console-chat .console-tab { text-decoration: underline; }

.console-chat h3 .notif-icon
{
	display: inline-block;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 2px;
	padding-bottom: 2px;
	margin-left: 10px;
	margin-right: 40px;
	background-color: #9b2d2d;
	border-radius: 50%;
	font-size: 0.7em;
	font-family: "Arial";
	color: rgb(255, 255, 255);
	text-align: center;
	visibility: hidden;
}

.console .console-title
{
	position: relative;
	top: -50px;
	display: none;
}

.console-messages
{
	position: absolute;
	left: 10px;
	right: 10px;
	top: 50px;
	bottom: 10px;
	background-color: rgba(211, 190, 168, 0.6);
	border-radius: 20px;
	padding: 10px;
	overflow: auto;
	overflow-x: hidden;
}

.console-messages p
{
	margin: 0px;
	margin-top: 5px;
	margin-bottom: 5px;
	text-align: left;
	font-size: 0.9em;
	line-height: 1.2em;
}

.chat, .chat .chat-title { display: none; }

.chat .chat-title
{
	position: relative;
	top: -50px;
}

.chat .chat-messages
{
	position: absolute;
	left: 10px;
	right: 10px;
	top: 50px;
	bottom: 60px;
	background-color: rgba(211, 190, 168, 0.6);
	border-radius: 20px;
	padding: 10px;
	overflow: auto;
	overflow-x: hidden;
}

.chat .chat-messages p
{
	margin: 0px;
	margin-top: 5px;
	margin-bottom: 5px;
	text-align: left;
	font-size: 0.9em;
	line-height: 1.2em;
}

.chat .message-input-block
{
	position: absolute;
	left: 0px;
	right: 70px;
	bottom: -10px;
	text-align: left;
}

.chat .message-input-block input
{
	min-width: 40px;
	width: calc(100% - 60px);
	margin: 0px;
	margin-left: 10px;
}

.chat .send-button-block
{
	position: absolute;
	right: 0px;
	bottom: -10px;
	text-align: right;
}

.chat .send-button-block input
{
	min-width: 80px;
	max-width: 80px;
	width: 80px;
	margin: 0px;
	margin-right: 10px;
}

/* ************* */
/* Aller vers... */
/* ************* */

.exits
{
	position: absolute;
	left: 40%;
	/*right: calc(33.3% + 12px);*/
	right: calc(60% - 198px);
	top: calc(100% - 325px);
	bottom: 0px;
	/*height: 40%;*/
}

.exits h3
{
	text-align: left;
	margin: 0px;
	margin-left: 20px;
	font-size: 1.25em;
}

.exits-list
{
	position: absolute;
	left: 10px;
	right: 10px;
	top: 50px;
	bottom: 10px;
	background-color: rgba(211, 190, 168, 0.6);
	border-radius: 20px;
	padding: 10px;
	overflow: auto;
	overflow-x: hidden;
}

.exits-list input[type="button"]
{
	min-width: 137px;
	margin-bottom: 5px;
}

/* ********** */
/* Inventaire */
/* ********** */

.inventory
{
	position: absolute;
	/*left: calc(66.6% - 12px);*/
	left: calc(40% + 198px);
	/*right: calc(16.6% + 12px);*/
	right: 193px;
	top: calc(100% - 325px);
	bottom: 0px;
	/*height: 40%;*/
}

.inventory h3
{
	text-align: left;
	margin: 0px;
	margin-left: 20px;
	font-size: 1.25em;
}

.inventory-list
{
	position: absolute;
	left: 10px;
	right: 10px;
	top: 50px;
	bottom: 10px;
	background-color: rgba(211, 190, 168, 0.6);
	border-radius: 20px;
	padding: 10px;
	/*overflow: auto;
	overflow-x: hidden;*/
	overflow: hidden;
	text-align: center;
}

.inventory-list table
{
	max-width: 230px;
	width: 100%;
	margin: auto;
}

/*#inventory-list table table { width: 100%; }*/

.inventory-list input[type="button"] { min-width: 50px; }

.inventory-list .itemPreview { width: 45px; }

.inventory-list .itemPreview img
{
	width: 35px;
	height: 35px;
}

.inventory-list .itemInfo
{
	text-align: left;
	padding: 0px;
	padding-left: 10px;
	line-height: 1.3em;
}

.inventory-list .useItem
{
	text-align: center;
	padding: 0px;
	padding-bottom: 7px;
}

.useCell
{
	display: none;
	padding: 0px;
	width: 86px;
}

.useCell input
{
	margin-left: 5px;
	margin-right: 0px;
}

/* ************* */
/* Aller vers... */
/* ************* */

.spells
{
	position: absolute;
	/*left: calc(83.3% - 12px);*/
	left: calc(100% - 193px);
	right: 10px;
	top: calc(100% - 325px);
	bottom: 0px;
	/*height: 40%;*/
}

.spells h3
{
	text-align: left;
	margin: 0px;
	margin-left: 20px;
	font-size: 1.25em;
}

.spells-list
{
	position: absolute;
	left: 10px;
	right: 10px;
	top: 50px;
	bottom: 10px;
	background-color: rgba(211, 190, 168, 0.6);
	border-radius: 20px;
	padding: 10px;
	overflow: auto;
	overflow-x: hidden;
}

.spells-list input[type="button"]
{
	min-width: 122px;
	margin-bottom: 5px;
}

/* **************** */
/* Eléments mobiles */
/* **************** */

.mobile-bottom-icon-1,
.mobile-bottom-icon-2
{
	position: absolute;
	right: 15px;
	bottom: 290px;
	display: none;
}

.console-icon, .chat-icon { display: none; }

.mobile-bottom-icon-1 img,
.mobile-bottom-icon-2 img
{
	margin-left: 15px;
	vertical-align: middle;
	cursor: pointer;
}

.console-icon, .chat-icon,
.mobile-bottom-icon-1 img,
.mobile-bottom-icon-2 img
{
	border-radius: 5px;
	border: 3px solid rgba(255, 255, 255, 0.0);
}

.selectedIcon
{
	background-color: rgba(255, 255, 255, 0.6);
	border: 3px solid rgba(255, 255, 255, 0.6);
}

.mobile-notif
{
	position: absolute;
	top: 30px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #9b2d2d;
	display: none;
}

.mobile-notif-console { left: 45px; }
.mobile-notif-chat { left: 96px; }


/* ****** */
/* Divers */
/* ****** */

#current-character-avatar .deadState,
.otherPlayers .deadState,
.mob .deadState
{
	position: absolute;
	left: 0px;
	top: 0px;
	display: none;
}

#current-character-avatar .deadState { left: calc(50% - 50px); }
.mob .daedState { left: calc(50% - 35px); }