﻿/* CSS Document */

body
{   
	max-width: 68em;
	margin: 0 auto;
	font-family: sans-serif;
	min-width: 30em;		    
}
header
{
	width: 100%;
 text-align: center;
}
header >  img
{
	width: 98%;
	border: 1px solid black;
	border-radius: 7px ;
}	
.header-box 
{	
	display: block;
	width: 98%;
	border: 1px solid green;
	border-radius: 0 7px 7px 7px;
   	background-color: #f7e0b6;
	/* text-align: center; */
	margin: 0 auto;
}
 main 
{
	width: 100%;
	margin: 0 auto;
	text-align: center;
} 

article
{
	/* text-align: center; */
	width: 98%;
	/* float: left;
	padding-left: 0.3em; */
	color: #FFFFFF;
	margin: 0 auto;
}
#wetterbild
{
	width: 88.8%;
	position: relative;
	border: 1px solid black;
	border-radius: 7px;
	background-color: beige;
	float: right;
	margin-top: 1.2%;
	
}
#wetterbild img
{
	width: 98.3%;
}
.akttemp
{
	 position: absolute;
	 display: block;
	 left: 0.5em;
	 width: 27em;
	 float: left;
	 margin-top: -5.8em;
}
.akttemp iframe
{
	width: 100%;
	height: 6em;
	border-width: 0;
}
#text
{
	display: block;
	background: scroll 0 0 #cccccc;
    border: 1px solid blue;
	border-radius: .7em;
	font-family: sans-serif;
    color: #0066FF;  
	text-align: justify;
	padding: 8px;
	margin: 12px 13px 8px 13px;
	font-size: .8em;
	width: 52%;
	float: left;
}
#text2
{
	width: 38%;
	min-width: 13em;
	display: block;
	background: scroll 0 0 #cccccc;
    border: 1px solid blue;
	border-radius: .7em;
	font-family: sans-serif;
    color: #0066FF;  
	text-align: center;
	padding: 8px;
	margin: 12px 0 8px 13px;
	font-size:0.8em;
	float: left;
}
#wetterdaten
{
	width: 97%;
	height: 280px;
	margin: 0 auto;
	border: 1px solid black;
	border-radius: 7px;
	background-color: #e1f2f6;
	padding: 0.8em;
}
#frosttage
{
	 margin: 1.5em 3.3% .5em 3.2%;
	 width: 95%;
	 background-color: #999999;
	 border-radius:  0 0.4em 0.4em 0.4em ;	
	 padding-bottom: 1.4em;
} 
 #frosttage > div
 {
	 border: 1px solid white;
	border-radius: 7px;
}
 #frosttage > div > iframe
 {
	 width: 100%;
	 height: 220px;
	 border: 0;
 }


.grafikeins 
{ 
   float: left;
   width: 44%;
   min-width: 10em;
   height: 220px;
   margin: 5px 1.8% 3% 3%;
   border-radius: 0.2em 0.2em 0 0 ;
   color: #0066ff;
   /* font-size: 1em; */
   border-top: 0.625em solid blue;
}
.grafikeins img, #grafikzwei img
{
	width: 100%;
	height: 100%;
}
#grafikzwei 
{ 
   float: left;
   width: 44%;
   min-width: 10em;
   height: 220px;
   margin: 5px 1.8% 3% 3%;
   border-radius: 0.2em 0.2em 0 0 ;
   color: #0066ff;
   /* font-size: 1em; */
   border-top: 0.625em solid blue;
}
.ifr3
{
 	float: left;
	margin: -6px auto;
	width: 44%;
	text-align: center;
}
.ifr4
{  
	 margin: 0 3% 0 4%;
	 width: 92%;
	 text-align: center;
}
section 
{
	float: right;
	width: 88.8%;
	padding-top:1.2%;
	padding-bottom: 1.5%;
	border: 1px solid black;
	border-radius: 7px;
	background-color: #f3bf72;
	margin-top: 1.2%;
}
section > iframe
{
	width: 96%;
	height: 300px;
	border: 0;
}
#dat
{
	background-color: rgba(245,245,220,1);
}
#maximum
{
	 float: left;
	 width: 45%;
	 height: 17.5em;
	 margin: 10px 10px auto 20px ;
	 min-width: 320px;
	 background-color: #999999;
	 border-radius:  0 0.4em 0.4em 0.4em ;
}
.ifr
{   float: left;
	width: 100%;
	text-align: center;
	padding: 1px;
}
#niederschlagsdaten
{
	 float: left;
	 width: 45%;
	 height: 17.5em;
	 background-color: #999999;
	 border-radius:  0 0.4em 0.4em 0.4em ;
	 margin: 10px 10px auto 20px;
	 min-width: 320px;
}
.ifr2
{
	float: left;
 	width: 100%;
	text-align: center;
}
aside
{	float: right;
	width: 88.8%;
	border: 1px solid black;
	border-radius: 7px;
	background-color: blanchedalmond;
	margin-top: 1.2%;
	padding-bottom: 2%;
}
#last   /*<aside id="last">*/
{
	margin-bottom: 4em;
}
#verschiedenedaten
{
	 float: left;
	 width: 45%;
	 height: 22.5em;
	 margin: 20px 10px auto 20px;
	 min-width: 320px;
	 background-color: #999999;
	 border-radius:  0 0.4em 0.4em 0.4em ;
}
#sonneuv
{
	 float: left;
	 width: 45%;
	 height: 22.5em;
	 margin: 20px 10px auto 20px;
	 min-width: 320px;
	 background-color: #999999;
	 border-radius:  0 0.4em 0.4em 0.4em ;
	 position: relative;
} 
  
nav 
{
	float: left;
	width: 10%;
	height: auto;
	border: 1px solid black;
	border-radius: 0 0.4em 0.4em 0.4em;
	background-color: silver;
	padding-bottom: 6.8em;
	margin-top: 1.2%;
	min-width: 3em;
	padding-top: 1.5em;
	/* margin-right: 3px; */
}
		
nav ul 
{
	padding: 0;

}
		
nav li 
{
	list-style: none;
	 position: relative; 
	font-size: 0.8em;
	text-align: center;
	padding: 1px;
	
}		
nav ul ul 
{
	position: absolute;
	/* top: -23em; */
	left: 1.5em;
	font: 0/0 serif;
	font-size:0.8em;
	z-index: -5;
	transition: font 0.5s;
	
}
/* nav ul li ul
{display:none;
} */
		
nav ul li:hover ul 
{
	font: inherit;
	z-index: auto;
	
}		
nav a, nav span 
{
	display: block;
	width: 93%;
	/* Breite den in li enthaltenen Elementen zuweisen */
	margin: 0.2em 0 auto 0;
	padding: 2px; 
	text-decoration: none;
	font-weight: normal;
	border: 1px solid blue;
	border-radius:6px;
	box-shadow: 0px 5px 12px white inset;
	color: #FFF;
	background-color: #999999; 
	hyphens: auto;
}
nav ul ul a, nav span 
{
	border-radius: 6px;
	color: white;
	font-weight: normal;
	font-family: verdana;
	
}
nav a:focus, nav a:hover, nav span 
{
    /* aktuelle Unterseite kennzeichnen */
	color: royalblue;
	background-color: #FC0;
}
nav ul li img
{
	width: 100%;
	height: 7.78em;
}
li a 
{
	margin-left: auto;
	margin-right:auto;
}
li a#aktuell 
{
	color: white;
	background-color: gray;
}
		
nav span 
{
	/* aktuelle Unterseite kennzeichnen */
	background-color: maroon;
	color: gold;
}
.menutitle, .menutitlenormal
{
	background-color: rgba(0, 102, 255, 1);
	font-weight: normal;
	text-align: center;
	margin: 8.5% 2.5% 0 1.5%;
	color: #99CCFF;
	font-size: 0.7em;
	hyphens: auto;
}

.menucontainer 
{
	margin-top: 1.4em;
	width: 90%;
	margin-bottom:-18px;
	padding: 0 11px 0 6px;
}

 a:link 
{
	text-decoration: none;
	
}

 h1
{
	font-size: 1.5em;
	color: #000000;
	text-align: center;
}

	
.Stil5 {font-size: 18px}
.Stil6 {color: #FFFFFF}
.Stil25 {color: #FF6600}
.Stil27 {color: #FFCC00}
.Stil29 {color: #000099}
.Stil31 {color: #FF9933}
.Stil38 {color: #737994; font-size: larger}
.Stil39 {color: #EFEFF7}
.Stil40 {font-family: Verdana, Arial, Helvetica, sans-serif;
         color: #0066FF;  text-align: center;
		 padding-left: 20px;
		 padding-right: 19px;
		 }
.Stil41 {color: #0066FF}
.Stil42 {color: #EFEFF7}
.Stil43 {color: #DADADA}
code {font-size:14px;color:#0000ff;}

 br.c7 {clear:both;}
 table.c6 {background-color: #BDBEC6}
 td.c5 {background-color: #CCCCCC}
 p.c4 {	font-family: Microsoft Sans Serif; 	
        text-align: center; color: #0066FF;
		 padding-left: 20px;
		 padding-right: 19px;
	    }

.ukl 
{
	font-size: 0.7em;
	font-weight: bold;
	font-family: Verdana, Geneva, sans-serif;
	padding: 3px;
}
.ukl1 
{	
	font-size: 0.8em;
	font-weight: bold;
	font-family: Verdana, Geneva, sans-serif;
	padding: 3px;
}
.ukl2 
{
	font-size: 0.8em;
	font-weight: bold;
	color: #835c1a;
}
#counter a
{color:transparent;
background-color:transparent;
border:0;
box-shadow:inset 0 0 0 0;
	/* position:relative;
	z-index:-10;
    display:none; */
}

#counter a > img
{	
	/* width: 50%; */
	/* text-align: center; */
	border: 1px solid blue;
}

 .zurueck
 {
	 width: 19%;
	 background: transparent;
	 /* overflow: auto; */
     font-size: 0.9em;
     border: blue 1px solid;
	 margin: 1em auto 0.1em 10%;
	 float: left;
	 color: blue;
	 text-align: center;
 }
 .nachoben
 {
	 width: 19%;
	 background: transparent;
	 font-size: 0.9em;
     border: blue 1px solid;
	 margin: 1em auto 0.5em 1em;
	 float: left;
	 color: blue;
	 text-align: center;
 }
footer {
	position: fixed;
	bottom: 0;
	/* left: auto; 
	padding: 2px 20px 0 20px; */
	background: #c6e6f7;
	border-color: #8a9da8;
	max-width: 66.7em;
	width: 100%;
	margin-left: 10px;
	min-width: 30em;
}

footer p {
	float: right;
	margin: 1em 11% 0 0;
	padding-bottom: 2px;
}
/* .wrapper {
	margin: -2px auto;
	max-width: 68em;
}	 */
.wraper a:
{
	float: left;
}



    #topmenu, #topmenu2 {
        font-size:10px;
		position:absolute;
		
    }

    #menu ul {
        list-style-type:none;
        list-style-image:none;
       margin:0;
        padding:0;
		
    }

     .topmenu li, .topmenu2 li {
        float:left;
	    }
	
	li.topmenu 
	{height:39px;}
	
	li.topmenu2
	{height:106px;
	}

  .topmenu a, .topmenu2 a {
        float:left;
        /* width:auto; */
        text-align:center;
    }

 .topmenu ul{
        display:none;
		width:5.35em;
		background-color:rgb(244, 177, 66);
		left:100%;
    }
	.topmenu2 ul{
		display:none;
		width:auto;
		background-color:rgb(244, 177, 66);	
left:100%;	
	}


    .topmenu a, .submenu a, .topmenu2 a, 
	{
        padding:2px;
        color:white;
        font-weight:normal;
        text-decoration:none;
        background-color:#999999;
		}

    .submenu a{
        font-size:12px;
        width:60px;
        position:relative;
		clear:both; /* special IE6 }*/
    }
.submenu2 a{
        z-index:2;
		font-size:11px;
		width:10.5em;
        position:relative;
		padding:2px;
		color:white;
		font-weight;normal;
		background-color:#999999;
		clear:both; /* special IE6 }*/
    }
	
    #menu a:hover, .topmenu.on a, .topmenu2.on a	 {
        color:royalblue;
        background-color:#FC0/* #BF7818 */ !important;
		
    }
    .topmenu:hover ul, .topmenu2:hover ul {
        display:block;
        z-index:500;
    }
