.tooltiptext {
	
	  pointer-events: none;
	  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
}

.area {
	width:1078px;
    vertical-align: middle;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:20px;
} .subarea {
	text-align:left;
	  border-radius: 25px;
	  background: rgba(0, 0, 0, 0.85);
	  color:white;
	  padding:15px;
	  border:1px solid #333333;
  position: relative;
} .buttonmenu {
	  text-align:center;
} .area_label {
	  position:absolute;
	  left:0;
	  top:0;
	  z-index:19;
	  margin-top:-13px;
	  margin-left:7px;
	  display: block;
	font-family: Arial Black,Arial Bold,Gadget,sans-serif; 
	font-size:15px;
	box-shadow: 0 30px 40px rgba(0,0,0,.1);
	color:black;
	text-shadow: 1px 1px 3px #ffffff;

	
}  .big_label {
	  position:absolute;
	  left:0;
	  top:0;
	  z-index:19;
	  margin-top:-23px;
	  margin-left:7px;
	  display: block;
	font-family: Arial Black,Arial Bold,Gadget,sans-serif; 
	font-size:24px;
	box-shadow: 0 30px 40px rgba(0,0,0,.1);
	color:black;
	text-shadow: 1px 1px 3px #ffffff;

	
} .area_label_blk {
	  position:absolute;
	  left:0;
	  top:0;
	  z-index:19;
	  margin-top:-13px;
	  margin-left:7px;
	  display: block;
	font-family: Arial Black,Arial Bold,Gadget,sans-serif; 
	font-size:15px;
	box-shadow: 0 30px 40px rgba(0,0,0,.1);
	color:black;
	text-shadow: 1px 1px 5px #000000;
	background-color:rgba(0,0,0,.7);
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	
} .area_label_center {
		width:100%;
	  position:absolute;
	  left:50%;
	  top:0;
	  z-index:19;
	  margin-top:-13px;
	  margin-left:-50%;
	  display: block;
	  text-align:center;
	font-family: Arial Black,Arial Bold,Gadget,sans-serif; 
	font-size:15px;
	box-shadow: 0 30px 40px rgba(0,0,0,.1);
	color:black;
	text-shadow: 1px 1px 3px #ffffff;

	
}  .under_label {
	  float:right;
	  position:relative;
	  z-index:19;
	  margin-bottom:-59px;
	  margin-right:6px;
	  display: block;
	font-family: Arial Black,Arial Bold,Gadget,sans-serif; 
	color:#000;
	font-size:14px;
	box-shadow: 0 30px 40px rgba(0,0,0,.1);
	text-shadow: 0px 0px 3px #ffffff;
	
}  .center_top_label {
	  width:300px;
	  position:relative;
	  z-index:19;
	  top:0;
	  left:50%;
	  margin-top:-30px;
	  margin-bottom:10px;
	  margin-left:-150px;
	  display: block;
	font-family: Arial Black,Arial Bold,Gadget,sans-serif; 
	color:#000;
	font-size:14px;
	box-shadow: 0 30px 40px rgba(0,0,0,.1);
	text-shadow: 1px 1px 3px #ffffff;
	
} .buttonmenu2 button {
	border: unset !important;
	outline: unset !important; 
	font-size:15px;
	font-weight:bold;
	font-family: Arial Black,Arial Bold,Gadget,sans-serif; 
	min-width:90px;
    width: 148px;
    height: 42px;
	background-color: rgba(0, 0, 0, 0.0);
    background-image: url(images/button_bg.png);
    background-repeat: no-repeat;
	
} .buttonmenu img {
	margin-bottom:-3px;
} .tabletop {
	font size="13px;
	border-bottom:1px solid #999999;
} .zonetable {
	width:100%;
} .zonetable td {
	border: 1px solid #222222;
	padding:2px;
	font-size:15px;
	font-family: Arial Black,Arial Bold,Gadget,sans-serif;
} .aquantity {
	display:inline-block;
	min-width:125px;
	font-family: Arial Black,Arial Bold,Gadget,sans-serif;
	font-size:14px;
} .smquantity {
	display:inline-block;
	min-width:100px;
	font-family: Arial Black,Arial Bold,Gadget,sans-serif;
	font-size:14px;
} .alistitem {
	display:inline-block;
	min-width:50px;
	font-family: Arial Black,Arial Bold,Gadget,sans-serif;
	font-size:14px;
} .abutton {
	display:inline-block;
	min-width:125px;
	font-family: Arial Black,Arial Bold,Gadget,sans-serif;
	font-size:14px;
	margin-right:2px;
	margin-left:2px;
}
.ahr {
    border: 0;
    height: 1px;
    background: #333333;
    background-image: linear-gradient(to right, #ccc, #bbb, #aaa, #666, #333, #666, #aaa, #bbb, #ccc, #ccc);
	
}

 .underline {
	text-decoration:underline;
}


html {
	font-family: "Helvetica Neue",Arial,sans-serif;
	font-size:22px;
	color:#333333;
	text-align:center;
} body {
    background-repeat: repeat; 
    background-position: center top; 
	background-color:#000000;
	background-image:url('images/open_sky.jpg');
	background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center; 
    background-attachment: fixed;
	text-align:center;
	padding-bottom:40px;
	margin-bottom:40px;
}
 img {
	border:0px;
	display: in-line block;
} .tooltip {
	text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.7) !important;
}
 .tooltip a:link, .tooltip a:visited, .tooltip a:hover, .tooltip a:active {
	padding:0px;
	font-size:11px;
	font-weight:bold;
	text-align:center;
	color:black;
	text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.7);
} 

 .battle_map {
	width:1920px;
	height:1080px;
	background-repeat: none;
	padding:0px;
	margin:0px;
	margin-left:auto;
	margin-right:auto;
	z-index: 10;
	}
	
.map_container {
	width:1880px;
	height:1040px;
	padding:0px;
	margin-left:0;
	position:relative;
	top:22px;
	left:22px;
	z-index: 10;
}
.map_container > div {
	width:40px;
	height:40px;
	margin:0px;
	padding:0px;
	display:block;
	float:left;
} .map_container > div > div {
	margin:6px;
	padding:0px;
	width:28px;
	height:28px;
	font-size:12px;
	font-weight:bold;
    line-height: 28px;
	text-align:center;
	color:black;
	text-shadow: 0px 0px 1px rgba(255, 255, 255, 0.7);
} .map_container .atile {
	width:40px;
	height:40px;
	padding-top:15px;
} .map_container > div:hover {
} .tile_active:hover {
	background-color: rgba(255, 255, 255, 0.3);	
	border:2px solid black;
  box-shadow: 2px 2px 8px #000000;
}


.tile_City:hover, .tile_Land:hover, .tile_Forest:hover, .tile_Coast:hover, .tile_Fort:hover, .tile_Unique:hover, .tile_Mountain:hover, .tile_Marsh:hover, .tile_Water:hover, .tile_Island:hover  {
}




.tile_npc {
	width:40px;
	height:40px;
	background-color:rgba(0, 0, 255, 0.0);
} .tile_own {
	width:40px;
	height:40px;
	background-color:rgba(0, 255, 0, 0.3);
} .tile_nme {
	width:40px;
	height:40px;
	background-color:rgba(255, 0, 0, 0.2);
}




.menu_topright {
	text-align:right;
	position:absolute;
	right:7px;
	top:9px;
	border:0;
} .invert {
	filter: invert(1);
}
.menu_topright img {
	margin-left:8px;
	border:0;
}



#myBar {
  width: 10%;
  height: 30px;
  background-color: #04AA6D;
  text-align: center; /* To center it horizontally (if you want) */
  line-height: 30px; /* To center it vertically */
  color: white;
} .angledtext {
	-webkit-transform: rotate(-40deg);
}











/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  background-color: black;
  color: #fff;
  text-align: center;
  font-size:14px;
  padding: 5px 0;
  margin-left:20px;
  margin-top:0;
  margin-bottom:0;
  border-radius: 6px;
  min-width: 130px;
  overflow: auto; 
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
} .tooltip:hover .tooltiptext {
  visibility: visible;
}
/* Tooltip text */
.tt .ttt {
  visibility: hidden;
  overflow: visible; 
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
} .tt:hover .ttt {
  visibility: visible;
} 

.redrow {
	background-color: rgba(255, 0, 0, 0.35);
} .bluerow {
	background-color: rgba(25, 25, 255, 0.35);
} .greyrow, .grayrow {
	background-color: rgba(255, 255, 255, 0.20);
}

/* Show the tooltip text when you mouse over the tooltip container */
.zoom{  
    height:100vh;  
    width:100%;  
    display:grid;  
    place-items:center;  
    position:fixed;  
    top:0;  
    left:0;
} .menu_bot {
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:5px;
	font-family: "Arial Black", "Helvetica Neue", Helvetica, sans-serif;
	font-size: 24px;
	font-style: normal;
	font-variant: normal;
	line-height: 26.4px;
	font-size:32px;
	font-weight:bold;
	color:#333333;
	text-shadow: 1px 1px 3px #000000;
	position:fixed;
	width:50%;
	bottom:0;
	left:50%;
	margin-left:-25%;
	z-index: 20;
} .menu_top {
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	font-family: "Arial Black", "Helvetica Neue", Helvetica, sans-serif;
	font-size: 24px;
	font-style: normal;
	font-variant: normal;
	line-height: 26.4px;
	font-size:32px;
	font-weight:bold;
	color:#333333;
	text-shadow: 1px 1px 3px #000000;
	position:absolute;
	width:50%;
	top:0;
	left:50%;
	margin-left:-25%;
	z-index: 20;
} .zone_img {
	float:left;
	margin-right:10px;
	border-radius:1px;
} .zone_image {
	padding:0px 30px 30px;
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	width:91%;
} .zone_field {
	display:inline-block;
	min-width:180px;
	text-align:left;
	font-weight:bold;
	font-family: Arial Black,Arial Bold,Gadget,sans-serif; 
	
} .zone_field_sm {
	display:inline-block;
	min-width:100px;
	text-align:left;
	font-weight:bold;
	font-family: Arial Black,Arial Bold,Gadget,sans-serif; 
	font-size:18px;
}  .zone_field_lg {
	display:inline-block;
	min-width:200px;
	text-align:left;
	font-weight:bold;
	font-family: Arial Black,Arial Bold,Gadget,sans-serif; 
	
} 



.width_per {
	min-width:12.5%;
	display: in-line block;
	text-align:center;
}


.preload {
	display:none;
}



/* Style the Image Used to Trigger the Modal */
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 30; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  z-index:40;
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 800px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 800px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}


/* The Close Button */
.close {
  position: absolute;
  top: 75px;
  right: 45px;
  color: #f1f1f1;
  font-size: 80px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 800px){
  .modal-content {
    width: 100%;
  }.menu {
	text-align:center;
	margin-left:auto;
	margin-right:auto;
	margin-bottom:5px;
	font-family: "Arial Black", "Helvetica Neue", Helvetica, sans-serif;
	font-size: 24px;
	font-style: normal;
	font-variant: normal;
	line-height: 26.4px;
	font-size:32px;
	font-weight:bold;
	color:#333333;
	    text-shadow: 1px 1px 3px #000000;
} a {

} a:link, a:visited {
	color:#0099ff;
	text-decoration:none;
} a:hover {
	color:#0066cc;
	text-decoration:none;
}  a:active {

} img {
	border:0px;
	display: in-line block;
}