@charset "utf-8";

/* CSS Document */



body,td,th {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	color: white;

	margin: 0;

}

body {

	background-color: #000000;

}

a:link {

	color: #0CF;

	text-decoration: none;

}

a:visited {

	text-decoration: none;

	color: #0CF;

}

a:hover {

	text-decoration: underline;

	color: #FC0;

}

a:active {

	text-decoration: none;

	color: #FC0;

}



body {

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -khtml-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

}





/* FILTER BAR */

#filterBox {

	position: fixed;

	top: 0px;

	left: 0px;

	height: 40px;

	width: 100%;

	background-color: #69F;

}



#filterAll {

	position: relative;

	float: left;

	height: 25px;

	width: 100px;

	font-size: 15px;

	color: black;

	font-weight: bold;

}



#filterDungeon {

	position: relative;

	float: left;

	height: 25px;

	width: 100px;

	font-size: 15px;

	color: black;

	font-weight: bold;

}



#filterVakarine {

	position: relative;

	float: left;

	height: 25px;

	width: 100px;

	font-size: 15px;

	color: black;

	font-weight: bold;

}



#filterZemyna {

	position: relative;

	float: left;

	height: 25px;

	width: 100px;

	font-size: 15px;

	color: black;

	font-weight: bold;

}



#filterChest {

	position: relative;

	float: left;

	height: 25px;

	width: 100px;

	font-size: 15px;

	color: black;

	font-weight: bold;

}



#filterDropdown {

	position: relative;

	float: left;

	width: 300px;

	padding-top: 10px;

	padding-left: 10px;

	height: 30px;

	font-size: 15px;

	color: black;

	font-weight: bold;

}



#filter_maptype {

	font-size: 15px;

	width: 150px;

}



#filter1 {

	position: relative;

	float: left;

	width: 100px;

	height: 30px;

	font-size: 13px;

	color: black;

	font-weight: bold;

	line-height: 10px;

}



#filter2 {

	position: relative;

	float: left;

	width: 100px;

	height: 30px;

	font-size: 13px;

	color: black;

	font-weight: bold;

	line-height: 10px;

}



#filter3 {

	position: relative;

	float: left;

	width: 210px;

	height: 30px;

	font-size: 13px;

	color: black;

	font-weight: bold;

	line-height: 10px;

	text-align: right;

}



.radioButton {

	width: 13px;

	height: 13px;

}



.levelTextField {

	height: 13px;

	width: 30px;

	font-size: 11px;

}









/* MAP */

#tosMap {

	position: relative;

	margin-left: auto;

	margin-right: auto;

	top:40px;

	width: 1800px;

	height: 3925px;

	background-image: url(worldmap_medium.jpg);

	background-repeat: no-repeat;

}



div[id^="map_"]{

	position: absolute;

	width: 110px;

	min-height: 13px;

	font-size: 12px;

	color: white;

	font-weight: bold;

	border-radius: 5px;

	padding: 2px;

	border: 1px solid black;

}

div[id^="map_"]:hover{

	background-color: black;

	cursor: pointer;

	border: 1px solid white;

}



.mapName {

	position: relative;

	float: left;

	margin-left: 22px;

	color: #FFFFFF;

}



.mapLevel {

	width: 20px;

	position: absolute;

	color: #0C0;

	text-align: right;

}



.vakarine{

	position: relative;

	float: left;

	width: 12px;

	height: 12px;

	background-image: url('images/vakarine12x12.png');

}

.chest{

	position: relative;

	float: left;

	width: 12px;

	height: 12px;

	background-image: url('images/chest12x12.png');

}

.zemyna{

	position: relative;

	float: left;

	width: 12px;

	height: 12px;

	background-image: url('images/zemyna12x12.png');

}

.dungeon{

	position: relative;

	float: left;

	width: 50px;

	height: 12px;

	font-size: 12px;

	padding-left: 12px;

	color: #F30;

	background-image: url('images/dungeon12x12.png');

	background-repeat: no-repeat;

}

.iconSpacer{

	position: relative;

	float: left;

	width: 20px;

	height: 12px;

}



#changeLog {

	position: absolute;

	top: 70px;

	right: 100px;

	width: 500px;

	height: 370px;

	background-image: url(images/changelog.png);

	color: white;

	font-size: 12px;

}

#changeLogBody {

	position: absolute;

	top: 10px;

	left: 10px;

	width: 480px;

	height: 350px;

	overflow-y: scroll;

	overflow-x: hidden;

}

.changeLogTitle {

	font-weight: bold;

	font-size: 13px;

	color: red;

}

.changeLogDesc {

	font-size: 12px;

	color: white;

}



/* MAP HOVER CSS */

.mapImage {

	border: 1px solid white;

	border-radius: 5px;

}



/* MAP CLICK CSS */

#overlay_message {

	width: 800px;

	height: 100px;

	position: fixed;

	top: 40px;

	background-color: #333;

	border: 2px solid white;

	border-radius: 10px;

	z-index: 8888;

	color: #DDDDDD;

}

#overlay_message_x {

	right: 5px;

	top: 5px;

	width: 15px;

	height: 15px;

	position: absolute;

	z-index: 9999;

}

#overlay_message_x:hover {

	background-color: black;

	cursor: pointer;

}

#screenOverlay {

	position: fixed;

	opacity: 0.3;

	filter: alpha(opacity=30);

	background-color: black;

	width: 100%;

	height: 100%;

	z-index: 5000;

	display: none;

}

div[id^="mapOverlay_"] {

	display: none;

	background-color: black;

	position: fixed;

	width: 100%;

	text-align: center;

	height: 460px;

	top: 100px;

	z-index: 9999;

	padding: 5px;

	background-image:url(images/clickmapbackground.jpg);

	

	overflow-y: hidden;

	overflow-x: scroll;

	white-space: nowrap;

}





/* FILTER RESULTS BOX */

#filterResultBox {

	position: fixed;

	width: 100%;

	bottom: 0;

	height: 200px;

}

#filterResultTab {

	position: absolute;

	top: 0;

	left: 0;

	height: 40px;

	padding-top: 2px;

	padding-left: 10px;

	width: 290px;

	font-size: 16px;

	font-weight: bold;

	color: #444444;

	background-color: white;

	border-radius: 10px;

}

#filterResultTab:hover {

	color: black;

	background-color: #DDDDDD;

	cursor: pointer;

}

#filterResult {

	position: absolute;

	width: 100%;

	bottom: 0;

	height: 170px;

	background-color: white;

	overflow-y: auto;

	border-top: 2px solid white;

}

div[id^="mapFilterResult_"] {

	position: relative;

	width: 300px;

	height: 13px;

	float: left;

	margin: 2px;

	padding: 2px;

	background-color: #DDDDDD;

	font-size: 12px;

	color: black;

	border: 1px solid #777777;

}

.mapFilterResultLevel {

	position: relative;

	float: left;

	display: inline-block;

	height: 13px;

	width: 30px;

	text-align: right;

	color: #0A0;

	font-weight: bold;

	margin-right: 2px;

}

div[id^="mapFilterResult_"]:hover {

	background-color: #BBBBBB;

	cursor: pointer;

	border: 1px solid black;

}



/* VERSION */

#version {

	position: fixed;

	height: 20px;

	top: 3px;

	right: 5px;

	font-size: 20px;

	font-weight: bold;

	color: black;

}



#redditDiscuss {

	position: fixed;

	width: 190px;

	height: 15px;

	padding-bottom: 5px;

	text-align: center;

	border: 2px solid black;

	top: 3px;

	right: 210px;

	font-size: 13px;

	font-weight: bold;

	color: black;

	background-color: white;

	border-radius: 5px;

}

#twitch {

	position: fixed;

	width: 190px;

	height: 30px;

	top: 3px;

	right: 350px;

}

#redditDiscuss:hover {

	background-color: #6CF;

	cursor: pointer;

}



#mapCount {

	position: fixed;

	width: 100px;

	right: 100px;

	top: 3px;

	font-size: 10px;

	font-weight: bold;

	color: black;

}



::-webkit-scrollbar {

	width: 10px;

	height: 10px;

}

::-webkit-scrollbar-track {

    -webkit-box-shadow: inset 0 0 10px rgba(0,80,150,0.5); 

    -webkit-border-radius: 5px;

	background: rgba(100,100,100,1);

    border-radius: 5px;

}

::-webkit-scrollbar-thumb {

    -webkit-border-radius: 5px;

    border-radius: 5px;

    background: rgba(210,210,210,1); 

    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.5); 

}

::-webkit-scrollbar-thumb:window-inactive {

	background: rgba(210,210,210,1);

}