body { 
	font-family: "Segoe UI", Arial,sans-serif;
	margin: 0px; 
	padding:0px 
}
select{font-family: "Segoe UI", Arial,sans-serif; padding:5px;margin-top:5px;width:100%}
h2 { margin-block-start: 0.4em; margin-block-end: 0.4em;}
 

.icon{ position:relative;height:15px;bottom:-2px;cursor:pointer;opacity:0.7}
.icon:hover{ opacity:1}
.tdbutton{cursor:pointer;}
.tdbutton:hover{ background-color:#EEE}
.tdtop{border-top: 1px solid #CCC; padding-top:10px;padding-bottom:10px}
.slider {position:relative;bottom:-2px;Xdirection: rtl}
.slider_prev{display:inline-block;width:60px}

/* map */	

.selectInline{ border:0px; outline:0px; padding:0px;margin:0px;width:100%;background-color: transparent;}

#map{position:relative;z-index:0; width:100%;height:100%}

/* map ctrl buttons */	
.mapctrl {
    position: absolute; 
	right: 0px;
    width: 35px;
    height: 35px;
    background-color: #056270;
    cursor: pointer;
    border-radius: 0px;
    opacity: 0.9;
	background-size: 20px 20px;
	background-position: center;
	background-repeat: no-repeat;
	overflow:hidden;
}
.mapctrl:hover { opacity: 1; background-color: #00838f}

#search { top: 0px; background-image: url(../image/search_white.png); }
#search_input{top: 0px; right: 40px; display:block; width:0px; height:35px; transition: width 0.3s, height 0.3s}
#search_value{ position: absolute; left:0px; margin: 3px; padding: 5px; width: 234px; height:29px}
#search_select{ position: absolute; left:0px; margin: 3px; padding: 5px; width: 234px; height:29px;display:none}
#search_loading{
	position: absolute; right:0px;
	margin: 5px;
    display: inline-block;
    overflow: hidden;
    width: 25px; height: 25px;
    background: url(../image/loading.gif) no-repeat center ;
	background-size:100px 100px ;
	display:none;
}

#baselayers{ top: 40px; background-image: url(../image/layers_white.png);} 
#baseopacity{ top: 75px; background-image: url(../image/opacity_white.png);} 
#zoomin { top: 115px; background-image: url(../image/zoomin_white.png); }
#zoomout { top: 150px; background-image: url(../image/zoomout_white.png); }
#showinfo {bottom: 0px; background-image: url(../image/legend_white.png);}

/* legend */	
#mapinfo {bottom: 0px; right: 0px; width:200px; font-size:75%;color:white;transition:0.3s;min-height: 35px;height: auto; overflow: visible}
#mouselocation{position:absolute;left:0px;width:160px;bottom:10px;}
#legend{ position:absolute; bottom:33px;width:100%;max-height:800px;background-color: #056270;transition:0.3s}
#legendcontent{ height:auto;max-height:500px; overflow:auto;padding:5px;background-color:white;color:black;border:solid 3px #056270}
.legendimage {position:relative;vertical-align: text-top;max-width:100%}
.legend_menuicon{ width:15px;opacity:0.3;float:right;margin:2px 3px 0px 2px ;cursor:pointer}
.legend_menuicon:hover{opacity:0.7}
.legenditem{border-top:solid 1px #CCC; padding-top: 5px; margin-top: 5px;}
	
#logo{
	left:300px;
	position:absolute;bottom:0px;width:200px; 
	transition: left 0.3s, height 0.3s;Xopacity:0.9;
	pointer-events:none;	
	opacity:0.9
	}

/* ******************** left panel ********************  */	

#panel{
	left:0px; 
	position: absolute; top:0px; bottom:0px; 
	width:300px; 
	background-color: #FFF;transition:0.3s;
	box-shadow: 3px 0px 8px #888888;
	border-right:solid 0px #056270;
	overflow-y: hidden;
    overflow-x: hidden;
}
#panel:hover{ overflow-y: auto;}

#paneltopmenu{
	position:relative;height:30px;width:100%;background-color:#DDD
}

#paneltitle{font-size:150%;margin-bottom:10px}

#panelbutton{
	left:300px; 
	background-image: url(../image/left_white.png);
	position: absolute; top:0px; height:30px; width:20px;  background-color:#056270;transition:0.3s;
	box-shadow: 3px 0px 8px #888888;opacity:0.7;cursor: pointer;
	border-right:solid 0px #056270;
	background-size: 13px 13px;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 3px;;
}

#panelbigbutton{
	background-image: url(../image/right.png);
	position: absolute; top:0px; height:30px; width:20px;  background-color:#555;transition:0.3s;
	box-shadow: 3px 0px 8px #888888;
	opacity:0.7;cursor: pointer;
	border-right:solid 0px #056270;
	background-size: 13px 13px;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 3px;;
}

.geheader{ color:#056270 }

.panelheader{
    width: 90%;
    display: inline-table;
	margin: 0px 10px 5px 15px;
	padding:10px;
	box-sizing: border-box;
}

#panelcontent{ 
	padding:5px 5px 5px 5px;
	column-count: 1;
    column-gap: 0px;
}

.panelcol{
    width: 250px;
    display: inline-table;
	margin: 10px;
	background-color:#e7eeef;
	padding:10px;
	border-radius:15px;
	
}

.panellink{
	cursor:pointer;
}
.panellink:hover{
	background-color:#cddcde
}

.panelmenuicon{opacity:0.3;margin-bottom:10px;width:20px;margin:5px;cursor:pointer;Xpointer-events:auto;}
.panelmenuicon:hover{ opacity:1}

/* left panel menu */	

#leftmenu{
	left:-205px; 
	Xleft:0px; 
	position: absolute; top:0px; Xmin-height:150px; width:200px; background-color: #FFF;
	transition:0.3s;
	box-shadow: 3px 3px 8px #888888;
	border-right:solid 0px #056270;
	overflow:auto;
}

#leftmenucontent{ margin:10px}
#leftmenublack{visibility: hidden; position: absolute; top:0px;left:0px;width:100%;height:100%;background-color: black; opacity:0;
	transition: visibility 0s, opacity 0.5s ;
}

/* dashboard */	

#dashboard{
	Xpointer-events:none;
	position: absolute; 
	left:325px; 
	top:10px; 
	Xbottom:0px; 
	width:300; 
	transition:0.3s;
	opacity:0.9;
	overflow-y: hidden;
    overflow-x: hidden;
}
.dashboard_item{
    width: 250px;
    display: inline-table;
	margin: 10px;
	padding:10px;
	border-radius:15px;
	Xborder:solid 4px #056270;
	background-color: #FFF;
    box-shadow: 1px 1px 4px #888;
}


#projectselect{ border-width: 0px; margin: 0px; padding: 0px; font-size: 95%; width: 120px; }
#projectselect:hover {background-color:#DDD}

.button{ display:inline-block; cursor:pointer; border:solid 1px #5d5b5b;; border-radius: 15px; margin:5px; padding:4px 0px 4px 0px; text-align: center;  }
.button:hover {background-color:#DDD}

.link{ cursor:pointer }
.link:hover {filter: brightness(95%); text-decoration:underline}

/* infobox */
.info_attrlist {}
.info_layers { display:inline-block; cursor:pointer; width:100%; background-color:#32bfba;border: 1px solid #FFF;box-sizing: border-box;color:white}
.info_layers:hover {background-color: #CCC}
.info_tbl {font-size:100%;}
#streetview {cursor:pointer}
#streetview_image {width:100%}


/*
#legendbutton{ position:relative; width:100%;height:20px;background-color: #056270; color:white;font-size:80%;}
#legendbuttoncontent{ padding:1px 3px 1px 3px}
#legendbuttonimage{margin:3px 6px 3px 3px; width:13px;cursor:pointer}
.legenditem{max-width:100%}
.legenditem_button{ width:2px;height:20px;cursor:pointer;padding:0px 2px 0px 2px }
.legenditem_menu{ width:100%;height:19px;border-top:solid 1px #DDD;XXbackground-color:#DDD}
.legendlayer:hover {background-color:#DDD}
.legendlayer {position:relative;vertical-align: text-top; cursor:pointer;display:block}
.legendcheckbox {position:relative;vertical-align: text-top;margin-top: 14px;}
*/

/* message */	
#message{
	position: absolute; left:575px; bottom:0px; height:0px; right:225px; background-color: #DDD;transition:0.3s;
	box-shadow: 0px 0px 8px #888888;
	border-right:solid 0px #056270;
	overflow:hidden;
	border-radius: 15px 15px 0px 0px ; ;
}

.windturbine_table {border-collapse: collapse}
.windturbine_table td {border: 1px solid #DDD;text-align: center }
.section_header{ display:inline-block;margin-top:5px}
.smalltext{ font-size:75%;color:grey }
.shadow {-webkit-box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.75);-moz-box-shadow:0px 0px 10px 0px rgba(50, 50, 50, 0.75);box-shadow:0px 0px 10px 0px rgba(50, 50, 50, 0.75);}

#frameautoswitch {
    position: absolute;
    top: -26px;
    left: 25px;
}
#mapdocuframe {
	position:absolute;top:40px;bottom:40px;right:80px;left:350px;
	border-radius:10px ;min-width:250px;
	background-color:white;border-radius:10px;max-width:1000px
}
#docudata{
	position:absolute;top:0px;bottom:10px;right:0px;left:0px; 
	border-top:solid 30px #056270;	border-radius:10px
}
#frameclose{position:absolute; top:7px; right:15px;	opacity:0.8; }

#documentation{
	width:100%;height:100%;
	overflow:hidden;max-width:1000px;
}


.charCircle {
border-radius: 50%;
    width: 1em;
    height: 1em;
    padding: 2px;
    background: #fff;
    border: 1px solid #666;
    color: #666;
    text-align: center;
    font: 1em Arial, sans-serif;
    display: inline-block;
}

.olFramedCloudPopupContent{
	overflow-x: hidden;
}

#loadingLayers{
	position:absolute;
	top:0px;
	right:500px;
	width:75px;
	padding:2px 15px 5px 15px;
    border-radius: 0px 0px 10px 10px ;	
	background-color:#056270;
	color:white;
}