/*copyright: K.PLAN Klima.Umwelt & Planung GmbH
*/
:root {
/*#003e8a*/
--main-bg-color: hsl(213, 5%, 70%); 
--main-color: hsl(213, 100%, 30%);
--main-color-light: hsl(213, 10%, 95%);
--color07: hsla(213, 100%, 30%, 0.7);
--color007: hsla(213, 50%, 50%, 0.7);
--color03: hsla(213, 100%, 30%, 0.5);
--color003: hsla(213, 50%, 50%, 0.5);
--color07-light: hsla(213, 10%, 70%, 0.7);
--links: 250px;
--links-mg: 270px;
}

body {
margin: 0px; 
overflow: hidden; 
font-family: Calibri; 
color: #222;
background-color: var(--main-bg-color);
height: 100%;
/*min-height: calc(100vh - 230px)*/
}

html[data-useragent*='MSIE 10.0'] html, body {
height: 100%;
}

h1 {
color:var(--main-color); 
font-size: 24pt; 
margin: 5% 0 0 20px;
max-width: 230px;
}

h2 {
position: relative;
color: var(--main-color);
font-size: 18pt;
}

h3 {
position: relative;
color: var(--main-color);
font-size: 14pt;
}

#content p {
position: relative;
}

form {
margin: 0px;
padding: 0px;
}

fieldset {
position: relative;
overflow: auto;
left:-10px;
border: 0;
margin: 0px 0px 0px 0px;
}

#divkommentar {
	/*im js*/
}

label {
display: block;
margin: 20px 10px 10px 0px;
font-weight: bold; 
color:#999; 
font-size: 1em;
}

a {
color:var(--main-color);
}

a:hover{
color:var(--main-color); 
text-decoration: underline overline;
}

.opacity {
opacity: 0.75; 
-webkit-opacity: 0.75; 
-moz-opacity: 0.75;
filter:alpha(opacity=75);
}

.opacity90 {
opacity: 0.85; 
-webkit-opacity: 0.9; 
-moz-opacity: 0.9;
filter:alpha(opacity=9);
}

.button {
margin-top: 20px; 
margin-left: 20px
}

.buttom img {
margin-left: 30px;
}

.aktiv {
background-color: #666; 
color: #fff;
}

#left {
position:fixed;
z-index:100;
width:260px;
height: 100%;
background: #fff;
min-height:650px;
}

html[data-useragent*='MSIE 10.0'] #left {
position:absolute;
z-index:100;
width:260px;
height: 100%;
background: #fff;
min-height:650px;
}

html[data-useragent*='MSIE 10.0'] #left #menu {
position: relative;
z-index: 150;
}

#menu #left a {
font-weight: bold; 
color:#999; 
font-size: 1em;
}

.menu{
margin-top: 15px;
}

#left #menu {
margin: 10% 0 0 20px; 
text-align:left;
}

#left a:hover{
color:var(--main-bg-color);
background: #fff;
text-transform: underline;
}

#containermenu {
height: 40%; 
width: var(--links);
}

#left #logo {
position: absolute;
border: 0;
margin: 0 20px 20px 20px;
bottom: 0;
}

#left #logo img { 
width: 200px; 
}

.kontakt {
	position: relative;
	height: 120px;
}

.kontakt .logo img {
	position: relative;
	margin-right: 20px;
	max-height: 100px;
	width: auto;
	max-width: 30%;
	float: left;
}

.logo {
	/*content:url('190819_iResilience_RGB.png');
	position: absolute;
	border: 0;
	margin: 0 20px 20px 20px;
	bottom: 0;
	width: 200px; */
}

.kplan {
	content:url('K.PlanLogo Cut leer.png');
	height:100px;
	margin-left:40%;
}

.bmu {
	content:url('BMUB_NKI_gefoer_Web_de_hoch.jpg');
	width:100%; 
	height:auto; 
	float: left; 
	margin-left: -20px;
}

div.ueberschrift h1:before {
	content: "Klimamap Region Rhein-Voreifel";
}

label#hinweis::before {
}

select[attr=size] {
	size:1;
	width:100px;
	height:100px;
}

#type {
	color:#333;
	width: 200px;
	height: 40px;
	padding-left: 10px;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	margin: 0px 10px 0px 0px;
}

#beteiligung {
position:relative; 
min-height: 20%; 
z-index: 100;
margin: 10% 0 0 0px;
padding-left: 20px;
}

#map {
position: absolute;
overflow:auto;
width:100%; 
height:100%;
min-height:650px;
min-width:700px;
}

html[data-useragent*='MSIE 10.0'] #map {
position: absolute;
height:100%;
width:100%;
}

#info {
position: absolute;
height: 1px;
width: 1px;
z-index: 100;
}

#center {
display: block;
position: relative;
height: 100%;
margin: 0px 0px 0px 260px;
}

#center #content {
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top: 0px;
margin-bottom: 0px;
width: 50%;
min-width: 700px;
text-align: justify;
padding: 30px 20px 10px;
/*position: absolute;*/
min-height:100%;
height:auto !important!;
height: 100%;
bottom:0;
top:0;
left:0;
right:0;
background-color: var(--main-color-light);
}

#legende {
position: absolute;
overflow:auto;
bottom:130px;
width: 350px;
top: 20px;
right: 20px;
z-index: 100;
font-size: 0.9em;
}

#legende .beschreibung {
margin-left: 40px;
}

#legende .ueberschrift {
font-weight:bold; 
text-decoration:underline;
margin: 20px 0 0 0;
}

#legende img {
height: 30px;
float: left;
margin: 10px 20px 0 0;
}

#legende .symbol {
height: auto;
width: auto;
max-width: 18px;
max-height: 20px;
margin-top: 5px;
}

#legende #Kartenlegende {
	height:450px;
	margin-left:20px;
	margin-bottom:10px;
}

#legende #Kartenlegende .Klimatope {
	
}

#legende #Kartenlegende .Fliesswege {
	
}

#divhinweis {
z-index: 9999;
}

html[data-useragent*='MSIE 10.0'] img {
border: none;
}

.textfarbig {
color: var(--main-color);
}

.overflow {
overflow: auto;
}

.ui-button {
width: 200px;
}

.olControlAttribution a {
color: inherit;
}

.olControlNoSelect {
margin-top: 85px
}
.custom_anchor:before {
content:"Cycle";
}

.rotate-north {
left: var(--links-mg);
}
.ol-touch .rotate-north {

}
.ol-zoom {
left: var(--links-mg);
}
.ol-rotate, .ol-rotate-reset button, .ol-compass {
top: 283px;
right: unset; /*wichtig*/
left: var(--links-mg);
}
.ol-control button {
background-color: var(--color07);
}
.ol-mouse-position {
top: 80px;
background-color: var(--color07);
}
.ol-zoomslider {
background-color: var(--color003);
left: var(--links-mg);
}
.ol-zoomslider:hover {
background-color: var(--color03);
}
.ol-zoomslider button {
background-color: var(--color07-light);
}
.ol-zoomslider:hover button {
background-color: var(--color07-light);
}
.ol-scale-line {
background-color: var(--color07);
left: var(--links-mg);
bottom: 35px;
}
.ol-attribution {
bottom: 35px;
}
#txtkommentar {
width:100%;
}

#txtklimaoase {
width:100%;
}