.maptile{position:absolute; width:32px; height:32px; background-image:url(imgs/mappieces.png);}
.keytile{position:absolute; width:32px; height:32px; margin:-16px; background-image:url(imgs/allkeys.png); margin:-16px;}
.keytile.unlocked{-webkit-filter:drop-shadow(0px 1px 0px yellow) drop-shadow(0px -1px 0px yellow) drop-shadow(1px 0px 0px yellow) drop-shadow(-1px 0px 0px yellow);}
.keytile.smalloverlay{width:20px; height:20px; margin:-10px;}
#quickkey{opacity:1; font-size:30px;}
#quickkey.fading1{opacity:1; transition:opacity 1.6s;}
#quickkey.fading2{opacity:0; transition:opacity 1.6s;}
.playericon{width:11px; height:11px; background:url(imgs/playericons.png); display:inline-block; margin:3px 4px 3px 0px; vertical-align:bottom;}
.ping{position:absolute; border-radius:5px; outline:10px solid transparent; border:5px solid red; animation:ping 0.7s linear;
	-webkit-animation:ping 0.7s linear;
	-ms-animation:ping 0.7s linear;
	-moz-animation:ping 0.7s linear;}
.playername{position:absolute; width:calc(50% - 2px); cursor:pointer; box-sizing:border-box; height:19px; margin:1px; white-space:nowrap; overflow:hidden; font-size:13px; font-family:sans-serif;}
.playeractive{outline:1px solid #9D8D50; font-weight:bold;}

@keyframes ping{
	0%{width:50px; height:50px; margin:-30px;}
	50%{width:0px; height:0px; margin:0px;}
	51%{width:50px; height:50px; margin:-30px;}
	100%{width:0px; height:0px; margin:0px;}
}
@-webkit-keyframes ping{
	0%{width:50px; height:50px; margin:-30px;}
	50%{width:0px; height:0px; margin:0px;}
	51%{width:50px; height:50px; margin:-30px;}
	100%{width:0px; height:0px; margin:0px;}
}
@-ms-keyframes ping{
	0%{width:50px; height:50px; margin:-30px;}
	50%{width:0px; height:0px; margin:0px;}
	51%{width:50px; height:50px; margin:-30px;}
	100%{width:0px; height:0px; margin:0px;}
}
@-moz-keyframes ping{
	0%{width:50px; height:50px; margin:-30px;}
	50%{width:0px; height:0px; margin:0px;}
	51%{width:50px; height:50px; margin:-30px;}
	100%{width:0px; height:0px; margin:0px;}
}

#locateplayerbutton{background-image:url(imgs/locatebutton.png); position:absolute; top:0px; left:0px;}
#mapfindbutton{background-image:url(imgs/mapsetbutton.png); position:absolute; top:0px; left:0px;}
#playersfindbutton{background-image:url(imgs/playerssetbutton.png); position:absolute; top:0px; left:23px;}
#connectbutton{background-image:url(imgs/connectbutton.png); position:absolute; top:0px; left:46px;}
#statsbutton{background-image:url(imgs/statsbutton.png); position:absolute; top:0px; left:69px;}
#helpbutton{background-image:url(imgs/helpbutton.png); position:absolute; top:0px; left:92px;}

#messageouter{padding:2px 2px 0px; position:absolute; top:0px; left:0px; right:0px; height:60px; overflow:hidden; pointer-events:none;}
.message{height:20px; transition:opacity 0.5s; white-space:nowrap; color:#FFF; text-shadow:1px 1px #000; font-size:14px;}

#playerhover{position:absolute; display:none; font-family:sans-serif; color:orange; padding:2px 4px; opacity:0.8; white-space:nowrap;}

#playercontainer{display:block; width:100%; height:100%; position:absolute;}
#mapcontainer{position:absolute; top:0px; left:0px; right:0px; bottom:66px; overflow:hidden;}
#menubuttoncontainer{position:absolute; top:2px; left:50%; width:calc(50% - 2px); margin:1px; left:50%;}
#menuouter{position:absolute; bottom:0px; left:0px; right:0px; height:66px; background:url('/nis/alt1-currentskin/background.png');  background-position:center;}
#smallplayercontainer{position:absolute; top:0px; right:0px; left:92px; margin:3px 1px; display:none;}
	#playerselect{position:absolute; width:100%; height:19px; padding-left:15px;}
	#playericonoverlay{position:absolute; margin:0px; left:5px; top:5px; pointer-events:none;}
	
body.hideplayers #playercontainer{display:none;}
body.hideplayers #smallplayercontainer{display:block;}
body.hideplayers #mapcontainer{bottom:23px;}
body.hideplayers #menubuttoncontainer{left:0%; calc(width:100% - 2px);}
body.hideplayers #menuouter{height:23px;}

#stats{position:absolute; bottom:-4px; left:-4px; height:504px; max-height:100%; width:300px; max-width:100%; overflow:hidden; display:none;}
	#lvlcapbutton{left:0px; top:0px; background-image:url(imgs/capbutton.png); position:absolute;}
	
	#statshead{position:absolute; top:0px; left:0px; width:100%;}
		.statsnamecontainer{position:absolute; top:37px; padding-left:18px;}
		.statsname{color:#C5C9CA; font-family:sans-serif; font-size:16px; position:absolute; white-space:nowrap; transform:rotate(-40deg); transform-origin:bottom left;
			-webkit-transform:rotate(-40deg); -webkit-transform-origin:bottom left;
			-ms-transform:rotate(-40deg); -ms-transform-origin:bottom left;
			-moz-transform:rotate(-40deg); -moz-transform-origin:bottom left;}
	#statscontent{position:absolute; color:#C5C9CA; top:55px; left:0px; right:0px; bottom:0px; font-family:sans-serif; font-size:12px; overflow-y:auto; overflow-x:hidden;}
		.statsrow{height:16px; cursor:default;}
		.statsrow:nth-child(odd){background:rgba(77,77,77,0.57);}
			.skillicon{position:absolute; left:0px; width:16px; height:16px; background-size:16px 800px; background-image:url('imgs/skillicons.png');}
			.statsitem{position:absolute; padding-top:1px; width:14%; text-align:right;}
			.potioncolumn{position:absolute; right:0px; width:20%;}
				.potionicon{position:absolute; left:0px; width:16px; height:16px; background-image:url(imgs/potions.png); background-size:16px 192px;}
				.herbicon{position:absolute; left:16px; width:16px; height:16px; background-image:url(imgs/herbs.png); background-size:16px 48px;}
				.secondicon{position:absolute; left:32px; width:16px; height:16px; background-image:url(imgs/2nds.png); background-size:16px 64px;}
	#boostdisplay{position:absolute; color:#C5C9CA; font-family:sans-serif; font-size:12px; z-index:1; left:0px; right:10px; display:none;}
			
#help{position:absolute; bottom:-4px; left:-4px; height:487px; max-height:100%; width:300px; max-width:100%; overflow-y:auto; display:none;}
	.helpbuttonimg{margin:-5px 0px;}