html, body, address, blockquote, div, dl, form, h1, h2, h3, h4, h5, h6, ol, p, pre, table, ul,
dd, dt, li, tbody, td, tfoot, th, thead, tr, button, del, ins, map, object,
a, abbr, acronym, b, bdo, big, br, cite, code, dfn, em, i, img, kbd, q, samp, small, span,
strong, sub, sup, tt, var, legend, fieldset {
    margin: 0;
    padding: 0;
}
p {margin-top: 10px; }

img, fieldset {
    border: 0;
}

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* f�r IE 8 */
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

input {min-width: 100px; height: 25px; background-color: #257CA2; 
       color: white; border: 1px solid #257CA2; margin: 0 5px 15px 0; }
input:hover {background-color: white; color: #257CA2; }
input.icon {min-width: 50px; }
select {color: #257CA2; min-width: 100px; border: 1px solid #257ca2;
        height: 25px; margin: 0 5px 15px 0; }


.box {
    width: 100%;
    padding: 5px 0 5px 0;
    box-sizing:border-box;
}

.text-klein {
    font-size: 0.8em;
    line-height: 110%;
}


/* Allgemein
*************************************************************************************/
body {
    background: #e0e0e0;
    font: 0.95em Verdana, Geneva, Arial;
    line-height: 150%;
    color: #000066;
    -webkit-text-size-adjust: none;
  	text-size-adjust: none;
}
body:has(.my_info_box[open]) {overflow: hidden; }

a {text-decoration: underline; outline: none; color: #000066; }
a:hover {color: #ff9900; }

h1 {font-size: 1.0em;
    border: 2px dotted #257CA2;
    border-left: 10px solid #257CA2;
    margin: 0 0 15px 0;
    padding: 5px 0 5px 2%;
    color: #257CA2;
}
h2 {font-size: 1.0em;
    border-bottom: 2px dotted #257CA2;
    border-left: 10px solid #257CA2;
    margin: 15px 0 15px 0;
    padding: 5px 0 5px 10px;
    color: #257CA2;
}

h3 {font-size: 1.0em;
    font-weight: bold;
    margin: 15px 0 0 0;
}

.show-gt640 {display: inline; }
.show-lt640 {display: none; }

.show-gt480 {display: inline; }
.show-lt480 {display: none; }

.show-gt540 {display: inline;}
.show-lt540 {display: none;}

/* Structure
*************************************************************************************/
#pagewrap {
    margin: 0 auto;
    width: 1280px;
    background-color: #ffffff; }

/* Header
*************************************************************************************/
.header-style {
    color: #ffffff;
    background-color: #257CA2;
    background-image: linear-gradient(to right, #000066, #257CA2);
    }

#header-top {
    border-top: 10px solid #257CA2;
    margin: 0 0 5px 0;
    padding: 5px 10px 10px 10px;
    }
    #header-top a {color: #ffffff; text-decoration: none; }
    #header-top a:hover {color: #ff9900; }
    #header-top .col-links {float: left; text-align: left;}
    #header-top .col-rechts {float: right; text-align: right;}

/* Header Navigation
*************************************************************************************/
#header-nav {margin: 0 0 5px 0; padding: 2px 0px 2px 0px; }

#header-nav a, #header-nav .selected {
    float: left;
    font-size: 0.9em;
    text-align: center;
    color: #ffffff;
    text-decoration: none;
    display: block;
    border: 2px solid #257CA2;
    margin-left: 8px;
    margin-top: 4px;
    min-width: 150px;
    line-height: 200%;
    background-color: #257CA2;
    box-sizing : border-box;
    }

#header-nav a:hover, #header-nav .selected {
    border: 2px solid #257CA2;
    color: #257CA2;
    background-color: #ffffff;
}

/* Content
************************************************************************************/
#content-div {
    margin: 20px 0 10px 0;
    padding: 0px 2% 10px 2%;
    width: 75%;
    float: left;
    box-sizing: border-box; }

.tab {width: 100%; border: 1px solid #c0c0c0; border-collapse: collapse; }   
.tab tr {border-top: 1px solid #c0c0c0; width: 100%; }
.tab td, th {padding: 6px 5px 6px 5px; border: 1px solid #c0c0c0; text-align: center;}
.tab th {background-color: #f0f0f0; font-weight: normal; line-height: 120%; }
.tab .td-left {text-align: left; }
.tab .td-blau {background-color: #EEF3FD; }
.tab tr:hover {background-color: #f8f8f8;}

.my_info_box {border: none; min-width: 50%; max-width: 80%; position:fixed; padding: 0px; }
.my_info_box header {position:sticky; top:0px; width:100%; height:40px; background-color:#257CA2; }
.my_info_box header > div {display: flex; align-items: center; justify-content: center; 
                height: 100%; color: white;}
.my_info_box > .inhalt {margin: 5px 0 0 0; padding: 0 15px 0 15px; max-height: 40vh; overflow-y: scroll;}
.my_info_box::backdrop {background-color: grey; opacity: 0.50;}

/*
iframe.pegelonline1 {width: 100%; height: 1500px; border: 0; }
iframe.pegelonline1 {width: 580px; max-width: 100%; height: 1600px; border: 0; }
iframe.pegelonline2 {width: 640px; max-width: 100%; height: 480px; border: 0; }
*/

.webcam-neu {width:300px; float: left; box-sizing:border-box; margin: 0px 20px 20px 0px; height:300px;
   		overflow:hidden;
   		border: 1px solid #aaaaaa; 
   		background-color: #ffffff; border-radius: 20px; 
   		text-align:center; color:#257CA2; }
.webcam-neu:hover {background-color: #eeeeee;}	
.webcam-neu figure {width:100%; margin:0px; line-height:120%;}
.webcam-neu figcaption {margin: 10px 0 10px 0; height: 60px; }

.webcam {width:300px; float: left; box-sizing:border-box; margin: 0px 20px 20px 0;
   		/* um Differenzen in den Bildern auszugleichen: */
   		min-height:263px; 
   		border: 1px solid #aaaaaa; 
   		background-color: #eeeeee; border-radius: 8px 8px 0 0; 
   		text-align:center; color:#257CA2; 
		-ms-user-select: None; -moz-user-select: None; -webkit-user-select: None; user-select: None; }
.webcam a {text-decoration:none; color:#257CA2; }
.webcam a:hover {color: #ff9900; }

.webcam .titel {padding: 6px; position:relative; }
.webcam .titel-text {font-size: 1.0em; font-weight:bold; float:left; }

.webcam .div-img {position:relative; border-top:1px solid #257CA2;  
		overflow:visible; color:white; font-size:0.8em; }
.webcam .img-webcam {width:100%; margin:0px; display:block; }

.webcam .zoom-in {cursor:zoom-in; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; }
.webcam .zoom-out {cursor:zoom-out; cursor: -webkit-zoom-out; cursor: -moz-zoom-out; }

.webcam .div-menue {position:absolute; top:90%; right:50px; width:auto; 
		font-size:1.2em; color:#257CA2; border:1px solid #cccccc;
		border-radius: 10px; z-index:100;
		background-color: white; box-shadow: 3px 3px 3px #c0c0c0;
 		overflow:visible; visibility:hidden;}	
.webcam .div-menue .div-close {width:50px; height:50px; 
		right:-30px; top:-30px; position:absolute; cursor:pointer;} 	
.webcam .div-menue .svg-close {position:absolute; border:1px solid #cccccc;
		border-radius:15px; background-color:white;
		right:10px; top:10px; padding:5px; }
.webcam .div-menue .svg-close:hover {border:2px solid #cccccc;
		background-color:#cccccc; }
						
.webcam li {padding:10px 10px 10px 10px; list-style: none;
		border-bottom: 1px solid #cccccc; cursor:pointer;}
.webcam li:hover {color:#ff9900; }
.webcam li.disabled {pointer-events: none; color:#cccccc; }
.webcam li:last-child {border-bottom: 0px; }

/* Sidebar
***********************************************************************************/
#sidebar-div {
    width: 25%;
    float: right;
    box-sizing: border-box ;
    margin: 20px 0 20px 0;
    padding: 0 2% 0 2%;
}

#sidebar-div .item {
        margin: 15px 0 10px 0;
        width: 100%;
        border: 1px solid #257CA2;
        border-radius:  8px;
        padding: 0 0 10px 0;
        font-size: 0.85em;
        line-height: 120%;
        overflow: hidden;
        animation: bounceIn 1.2s ease-out;
    }
#sidebar-div .item .text {float: none; padding: 5px 5px 0 5px; text-align: center;}
#sidebar-div a {text-decoration:none; color:#000066; }
#sidebar-div a:hover {color:#000066; }

#sidebar-div .item h4 {
    font-weight: normal;
    background-color: #257CA2;
    padding: 8px 0 8px 0;
    text-align: center;
    color: #ffffff;
}


@keyframes bounceIn {
	0% {
		opacity:0;
		transform:scale(0.3)
	}
	50% {
		opacity:1;
		transform:scale(1.05)
	}
	70% {
		transform:scale(0.9)
	}
	100% {
		transform:scale(1);
		opacity:1
	}
}


/* footer
*************************************************************************************/
#footer-div {
    border-bottom: 10px solid #257CA2;
    color: #ffffff;
    box-sizing : border-box;
    margin: 20px 0 10px 0;
    padding: 0px 2% 10px 2%;
    background-color: #257CA2;
    background-image: linear-gradient(to right, #000066, #257CA2);
    text-align : center;
    }

    #footer-div a, #footer-div .selected {color: #ffffff; display: block; text-decoration : none; }
    #footer-div a:hover, #footer-div .selected {color: #ff9900; }
    #footer-div ul {list-style-type: none; }
    #footer-div li {border-bottom: 1px dotted #ffffff; line-height : 250%; }
    #footer-div .box {width: 50%; float: left; text-align: left; padding-right: 5%; }


/* clearfix
*************************************************************************************/
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.clearfix {
    display: block;
    zoom: 1;
    clear: both;
}