@font-face {
	font-family: "Netto";
	src: url(font/NettoOT-Light.otf);
}@font-face {
	font-family: "Netto";
	src: url(font/NettoOT-Bold.otf);
	font-weight: bold;
}

html, body{height:100%;}
body{
	margin:0;padding:0;
	overflow: hidden;
	position:relative;
	background-color:transparent;
	text-align:center;
	color:#FFF;
	font-family : Netto;
	
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
user-drag: none; 
-webkit-user-drag: none;
}

::selection {
  background: transparent;
}
::-moz-selection {
  background: transparent;
}

/* Loading information menus */
.loader{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	text-align:center;
	z-index:2;
	color:#00235a;
	text-shadow: 0 0 1px #FFF;
}
.load_type{
	margin:0.5em;
	font-size:1.2em;
	font-weight:bold;
}
.load_info{
	margin:0.5em;
}
.load_progress{
	width: 15em;
    height: 1em;
    border: 1px solid #CCC;
	border-radius:1em;
	overflow:hidden;
    background-color: rgba(255,255,255,0.3);
}
.load_percent{
	background-color:rgba(0,30,90,0.65);
	height:100%;
}

/* titles */
.hoverTitle {
    padding: 0.3em;
    border: 1px solid #444;
    border-radius: 0.3em;
    box-shadow: 0.2em 0.2em 0.5em rgba(0,0,0,0.3);
    background-color: #18c;
    color: #FFF;
    z-index: 9999;
    pointer-events: none;
}

/* Icons */

.icon{
	width:2.5em; height:2.5em;
	margin:0 0.5em;
	display:inline-block;
	border-radius:100%;
	background-color:rgba(0,30,90,0.65);
	cursor:pointer;
	border:1px solid transparent;
}
.icon img{width:100%; height:100%;pointer-events:none;}
.icon:hover{ 
	background-color:rgba(0,80,180,0.75);
}
.icon.selected{background-color:#0050b4;border: 1px solid #001e5a;}

#views{
	width:100%; height:100%;
	background-color:transparent;
}

#topMenu{
	position:absolute;
	top:0;
	display:inline-block;
	transform:none;
	transition: transform 0.3s;
}	
#leftMenu{
	position:absolute;
	top:2em;
	width:12em;
	left:0.8em;
	transition: all 0.3s; opacity:1;
}
#leftMenu.hidden{
	transform:translate(-100%,0);opacity:0;
}
#layerMenu{
	padding-top:0.5em;
}

#navigationMenu{
	position:absolute;
	top: 4em;
	width:16em;
	right:0;
	transition: opacity 0.3s;
	opacity:1;
	pointer-events: none;
}
#navigationMenu.hidden{opacity:0;}


.baseList{cursor:pointer;}
.baseList.selected{
	color:#001e5a;
	font-weight: bold;
}

.editForm table{width:100%;}

/* for popups */
.popup {
    box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
    z-index: 10;
	color: rgb(0, 0, 0);
}
.popupContent, .popupContentPOI {
	background-color: rgba(255,255,255,0.9);
	border-radius: 0 0 0.5em 0.5em;
	min-width: 100%;
	overflow:hidden;
}
.popupContent{padding: 0.5em; box-sizing: border-box;overflow:auto;}
.popupTitle, .popupTitlePOI {
    padding: 1em 1em 1em 3em;
    cursor: move;
    position: relative;
    color: #EEE;
    background-color:rgba(239, 37, 33, 0.6);
	border-radius:0.5em 0.5em 0 0;
	text-align: left;
	min-height: 1.2em;
}
.popupTitle{text-align: center;}
.popupTitlePOI a{color:#FFF;}

.iconTitle{
    width: 2em;
    height: 2em;
    position: absolute;
    left: 0.5em;
    top: 0.5em;
}
.titleIcon {
    width: 1.2em;
    height: 1.2em;
    background-size: 100%;
}
.close {
    background-image: url(image/close.png);
    cursor: pointer;
}
.close:hover {
    background-image: url(image/closeHover.png);
}