html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; }
.hidden { display: none !important; }
body { font-family: Source Sans Pro, sans-serif; font-size: 12px; color: #333; }

#top { display: block; position: fixed; top: 0px; left: 0px; right: 0px; height: 41px; line-height: 41px; overflow: hidden; background-color: rgba(10, 10, 10, 0.85); padding: 0 10px; }
#top .left { float: left; }
#top .right { float: right; }
#top a,
#top span { font-size: 13px; font-weight: bold; color: #aaa; text-decoration: none; display: inline-block; }
#top a:hover,
#top .on { color: #fff; }
#top span { cursor: default; }
#top div.title { width: 246px; height: 33px; margin: 4px 0 0 -2px; overflow: hidden; background-position: left center; background-repeat: no-repeat; -webkit-background-size: 100% 100%; -moz-background-size: 100% 100%; -o-background-size: 100% 100%; background-size: 100% 100%; }
html:not([lang="ko"]) #top div.title { width: 206px; }
#top ul.languages { display: block; height: 23px; margin: 9px 0 0 10px; padding: 0; overflow: hidden; }
#top ul.languages li { float: left; display: block; width: 37px; height: 23px; margin: 0; padding: 0; overflow: hidden; cursor: pointer; background-image: url('https://static.inven.co.kr/image_2011/battlegrounds/dataninfo/map/languages_37x23.png'); background-position: 0px -23px; background-repeat: no-repeat; }
#top ul.languages li.ko { background-position: 0px 0px; }
#top ul.languages li.en { background-position: -37px 0px; }

#map { position: relative; width: 100%; height: 100%; overflow: hidden; background-color: #585858; }

#minimap { position: fixed; top: 51px; right: 10px; padding: 1px; background-color: #000; }
#minimap .border { padding: 1px; border: 1px solid #fff; }
#minimap .border .minimap { position: relative; overflow: hidden; background-position: left top; background-repeat: no-repeat; width: 180px; height: 180px; }
#minimap .border .minimap div { position: absolute; background-color: rgba(0, 0, 0, 0.4); }
#minimap .border .minimap div.center { border: 1px solid red; background-color: transparent; }

#minimap .border .minimap div.left { left: 0; top: 0; bottom: 0; }
#minimap .border .minimap div.right { right: 0; top: 0; bottom: 0; }
#minimap .border .minimap div.top { top: 0; left: 0; right: 0; }
#minimap .border .minimap div.bottom { bottom: 0; left: 0; right: 0; }

.menu-ui { position: fixed; top: 41px; overflow: visible; display: block; margin: 0; padding: 0; }
.menu-ui,
.menu-ui * { -webkit-tap-highlight-color: transparent; -webkit-focus-ring-color: transparent !important; outline: none; }
.menu-ui a { text-decoration: none; color: #333; }
.menu-ui ul { display: block; width: 26px; border: 1px solid #333; box-shadow: 1px 1px 1px rgba(51, 51, 51, 0.6); margin: 10px 0 0 0; padding: 0; }
.menu-ui ul li { display: block; overflow: hidden; margin: 0; padding: 0; height: 26px; background-color: #e0e0e0; font-weight: bold; line-height: 26px; text-align: center; color: #333; font-size: 13px; cursor: pointer; border-bottom: 1px solid #bbb; }
.menu-ui ul li:last-child { border-bottom-width: 0; }
.menu-ui ul li.disabled { cursor: default !important; color: #999 !important; background-color: #e0e0e0 !important; }
.menu-ui ul li.disabled * { opacity: 0.4; }
.menu-ui ul li.disabled span.circles,
.menu-ui ul li.disabled span.pins { background-color: #333 !important; -webkit-filter: grayscale(100%); filter: grayscale(100%); }
.menu-ui ul li.disabled p { opacity: 1; }

.menu-ui ul li.on,
.menu-ui ul li.on a { color: #fff; background-color: #0c88e8; border-bottom-color: #4d4d4d; }
.menu-ui ul li:hover,
.menu-ui ul li a:hover { background-color: #efefef; }
.menu-ui ul li.on:hover,
.menu-ui ul li.on a:hover { background-color: #0d96ff; }

.menu-ui ul li a { display: block; width: 100%; height: 100%; overflow: hidden; }
.menu-ui ul li span { display: inline-block; width: 20px; background-position: center center; background-repeat: no-repeat; vertical-align: top; height: 20px; box-sizing: border-box; margin-top: 3px; overflow: hidden; line-height: 22px; }
.menu-ui ul li span *,
.menu-ui ul li p { display: none; }

.menu-ui ul li span.circles { border: 1px solid #333; border-radius: 10px; }
.menu-ui ul li span.circles-loots { background-color: #fbfb4d; }
.menu-ui ul li span.circles-loots-high { background-color: #f15a5a; }

.menu-ui ul li span.pins { border: 1px solid #333; border-radius: 10px; }
.menu-ui ul li span.pins-vehicles { background-color: #e79e00; background-image: url('https://static.inven.co.kr/image_2011/battlegrounds/dataninfo/map/pins/car.png'); }
.menu-ui ul li span.pins-vehicles-high { background-color: #e00000; background-image: url('https://static.inven.co.kr/image_2011/battlegrounds/dataninfo/map/pins/car.png'); }
.menu-ui ul li span.pins-boats { background-color: #1a5fc6; background-image: url('https://static.inven.co.kr/image_2011/battlegrounds/dataninfo/map/pins/boat.png'); }
.menu-ui ul li span.pins-guns { background-color: #6300b7; background-image: url('https://static.inven.co.kr/image_2011/battlegrounds/dataninfo/map/pins/gun.png'); }
.menu-ui ul li span.pins-gliders { background-color: #6bc323; background-image: url('https://static.inven.co.kr/image_2011/battlegrounds/dataninfo/map/pins/glider.png'); }

.menu-ui ul li span.icon-inven { background-image: url('https://static.inven.co.kr/image_2011/battlegrounds/dataninfo/map/icons/inven_ko.png'); }
html:not([lang="ko"]) .menu-ui ul li span.icon-inven { background-image: url('https://static.inven.co.kr/image_2011/battlegrounds/dataninfo/map/icons/inven_en.png'); }
.menu-ui ul li span.icon-zoomin { background-image: url('https://static.inven.co.kr/image_2011/battlegrounds/dataninfo/map/icons/zoom.png'); background-position: left center; }
.menu-ui ul li span.icon-zoomout { background-image: url('https://static.inven.co.kr/image_2011/battlegrounds/dataninfo/map/icons/zoom.png'); background-position: right center; }
.menu-ui ul li span.icon-fullscreen { background-image: url('https://static.inven.co.kr/image_2011/battlegrounds/dataninfo/map/icons/fullscreen.png'); background-position: left center; }
.menu-ui ul li span.icon-normalscreen { background-image: url('https://static.inven.co.kr/image_2011/battlegrounds/dataninfo/map/icons/fullscreen.png'); background-position: right center; }

.menu-ui ul li span.icons { background-position: left center; }
.menu-ui ul li.on span.icons { background-position: right center; }

.menu-ui ul li span.icons-erangel { background-image: url('https://static.inven.co.kr/image_2011/battlegrounds/dataninfo/map/icons/forest.png'); }
.menu-ui ul li span.icons-miramar { background-image: url('https://static.inven.co.kr/image_2011/battlegrounds/dataninfo/map/icons/desert.png'); }
.menu-ui ul li span.icons-savage,
.menu-ui ul li span.icons-sanhok { background-image: url('https://static.inven.co.kr/image_2011/battlegrounds/dataninfo/map/icons/savage.png'); }
.menu-ui ul li span.icons-vikendi { background-image: url('https://static.inven.co.kr/image_2011/battlegrounds/dataninfo/map/icons/snow.png'); }
.menu-ui ul li span.icons-karakin { background-image: url('https://static.inven.co.kr/image_2011/battlegrounds/dataninfo/map/icons/karakin.png'); }
.menu-ui ul li span.icons-paramo { background-image: url('https://static.inven.co.kr/image_2011/battlegrounds/dataninfo/map/icons/paramo.png'); }
.menu-ui ul li span.icons-haven { background-image: url('https://static.inven.co.kr/image_2011/battlegrounds/dataninfo/map/icons/haven.png'); }
.menu-ui ul li span.icons-taego { background-image: url('https://static.inven.co.kr/image_2011/battlegrounds/dataninfo/map/icons/taego.png'); }

.menu-ui ul li span.icons-text { background-image: url('https://static.inven.co.kr/image_2011/battlegrounds/dataninfo/map/icons/text.png'); }
.menu-ui ul li span.icons-grid { background-image: url('https://static.inven.co.kr/image_2011/battlegrounds/dataninfo/map/icons/grid.png'); }
.menu-ui ul li span.icons-flight { background-image: url('https://static.inven.co.kr/image_2011/battlegrounds/dataninfo/map/icons/flight.png'); }
.menu-ui ul li span.icons-distance { background-image: url('https://static.inven.co.kr/image_2011/battlegrounds/dataninfo/map/icons/ruler.png'); }

.menu-ui ul li.zoom-slider { height: auto; background-color: #e0e0e0 !important; border-bottom-color: #333 !important; }
.menu-ui ul li.zoom-slider div { height: 13px; background: url('https://static.inven.co.kr/image_2011/battlegrounds/dataninfo/map/icons/zoom_slider_bg.png') center center no-repeat; }
.menu-ui ul li.zoom-slider div.thumb { background-color: #333; background-image: url('https://static.inven.co.kr/image_2011/battlegrounds/dataninfo/map/icons/zoom_slider_bg_thumb.png'); }
.menu-ui ul li.zoom-slider div.thumb-down { background-color: #98d2ff; }

#menu.menu-ui { left: 10px; }
#menu.menu-ui ul { width: 118px; }
#menu.menu-ui ul,
#menu.menu-ui ul li { text-align: left; }
#menu.menu-ui ul li:after { content: ""; display: block; clear: both; }
#menu.menu-ui ul li span { width: 20px; margin-left: 3px; margin-right: 4px; float: left; }
#menu.menu-ui ul li p { display: inline-block; float: left; margin: 0; padding: 0; font-size: 11px; }
html:not([lang="ko"]) #menu.menu-ui ul { width: 187px; }

#controller { right: 10px; margin-top: 195px; }

#messageBox { display: table; width: 100%; position: fixed; bottom: 0px; left: 0px; right: 0px; height: 41px; font-weight: bold; color: #fff; background-color: rgba(10, 10, 10, 0.85); margin: 0; padding: 0; overflow: hidden; z-index: 999; }
#messageBox dt { display: table-cell; margin: 0; padding: 0 12px; overflow: hidden; vertical-align: middle; }
#messageBox dd { display: table; position: absolute; right: 6px; top: 0px; height: 100%; margin: 0; padding: 0; overflow: hidden; }
#messageBox dd div { cursor: pointer; display: table-cell; height: 100%; vertical-align: middle; padding: 0 6px; }

#tooltip { position: absolute; max-width: 200px; display: none; color: #fff; border: 1px solid #000; border-radius: 5px; padding: 6px; background-color: #000; background-color: rgba(0, 0, 0, 0.8); z-index: 1000; }

@media screen and (max-width: 639px) {
	#menu.menu-ui ul { width: 26px !important; }
	#menu.menu-ui ul p { display: none !important; }
}

@media screen and (max-width: 767px) {
	#minimap { display: none !important; }
	#controller { margin-top: 0 !important; }
}

@media screen and (max-width: 480px) {
	#top .hideable { display: none !important; }
}

@media screen and (max-width: 347px) {
	#top div.title { width: 216px; height: 29px; margin-top: 6px; }
	html:not([lang="ko"]) #top div.title { width: 181px; height: 29px; margin-top: 6px; }
}

@media screen and (max-height: 447px) {
	html.mobile #menu.menu-ui { top: 41px; bottom: 0px; overflow-y: scroll; padding-bottom: 10px; }
}

@media screen and (max-height: 375px) {
	#minimap { display: none !important; }
	#controller { margin-top: 0 !important; }
}