/* CSS Document */

/*   jquery über ID auswählen : $('#absatz1').html() <<<<  ID ist im gesamten Dokument einmalig     */
/*                                                                                                  */
/*   jquery über CLASS auswählen : $('.abschnitt').text('Text der Klasse abschnitt ersetzt');       */
/*           die Namen der Classen fangen an mit z.b. div.xxxxx                                     */
            
          
            

body{
  /* background:rgb(222,222,222);    hellgrau */
  background:rgb(168,215,249); /* hellblau */
  background-color: rgb(255,110,137); /* Kelling hellrot  */
  background-color: rgb(255,110,137); /* Kelling hellgrün  */
  background-color: rgb(218, 250, 219); /* Kelling hellgrün */
  font-size: 100%;
  margin: 0em;
  padding: 0em ;
  position:relative;                                         
  /* background-image: url(images/backgrounds/8350249_photo_jpg_s_clipdealer.de.jpg);  /*   weihnachten */
  /* background-image: url(images/backgrounds/IMG_20180406_134431.jpg);  /*   auto am Strand */
  /* background-image: url(images/backgrounds/dinkelhimmel.jpg);  /*   Dinkelhimmel */
  background-position: top;
  background-size: cover;  /* behält das Seitenverhältnis des Hintergrundbildes bei und skaliert es so, dass es so klein wie möglich ist, aber den Hintergrund-Positionierungsbereichs vollständig abdeckt */
  /*background-size: 100% auto;  /* Breite fixiert */
  /*background-size: auto 100%;   Höhe fixiert */
  background-attachment:fixed;    /* fixiert den Hintergrung beim Scrollen */
  background-repeat: no-repeat;  
}
h1{
  font-size: 2.5em;
  font-family: Helvetica;
  font-weight: 100;
  color: rgb(255,51,153);
  margin: 0em;
}
h2{
  font-size: 1.563em;
  font-family: Helvetica;
  font-weight: bold;
  color: rgb(204,0,102);   
  /*color: rgb(255,0,255);     magenta */
  margin: 0.0em;
  padding: 0.25em ;
  padding-bottom: 0.0em;
  text-align: left;  
}
h3{
  font-size: 1.563em;
  line-height: 1.8em;
  font-family: Helvetica;
  font-weight: 100;
  color: rgb(0,0,0);
  margin: 0em;
  padding: 1.25em ;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  text-align: left;  
}

h4{
  font-size: 1.0em;
  line-height: 1.0em;
  font-family: Helvetica;
  font-weight: bold;
  color: rgb(0,0,0);
  margin: 0em;
  padding: 1.0em ;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  text-align: left;  
}

h5{
  font-size: 1.2em;
  line-height: 1.2em;
  font-family: Helvetica;
  color: rgb(0,0,0);
  margin: 0em;
  padding: 0.25em ;
  padding-top: 0.25em;
  padding-bottom: 0.25em;
  text-align: center;    
  font-weight: bold;
}

p{
  line-height: 1.25em;
  font-family: Helvetica;
  /* font-weight: 100; */
  color: rgb(0,0,0);
  margin: 0.5em;
  margin-bottom: 0.1em;
  padding: 0.5em ;
  padding-bottom: 0.1em;
  text-align: left; */
}
p.p_footer{
  color: rgb(0,0,0);
  padding: 0.25em ;
  padding-left: 2.00em;
  text-align: left;
}

ul{
  margin: 0px;
  padding: 0px ;
}
li{
  list-style: square;
  font-family: Helvetica;
  font-weight: 100;
  color: rgb(0,0,0);
  line-height: 1.25em;
  padding: 0em ;
  text-align: justify;
  margin: 0.313em 0em 0.313em 0em;
}
img{
  width: 100%;
  height: auto;
  max-width: 100%;
}


a{
  text-decoration: none;
}

table{
  border: 0px silver solid;
  border-collapse: collapse;   
}
td{
  border: 0px silver solid;
  vertical-align: middle; 
  padding: 3px 3px 3px 3px;   
}
td.mr{
  border: 1px black solid;
}  

#ajaxWlan {
  display: none;
  position: absolute; 
  right: 10px;
  width: 24px;
  background-color: rgb(240,240,240);   /*  hellgrau */
}

#wifi_img {
  width: 100%;
  margin-top: 5px;
}

/*on top bar */
#menubar{
  display: block;
  background: rgb(240,240,240);   /*  hellgrau */
  padding-right: 10px;
}
#menubar ul {
  display: block;
  width: 30.6%;
  //padding: 0.9em ;
} 
#menubar ul li{
  display: inline;
  padding: 0;
}
#menubar ul li a.menubutton{
  display: none;
}
#menubar ul li a img{
  width: 30px;
  height: auto;
  max-width: 100%;
}

/* Header */
header{
  display: block;
  /* background: rgb(240,240,240);   /*  hellgrau */
  text-align: center;
  border-bottom: 6px solid rgb(255,0,255) ;
  position:relative;
}

header img{
  width: 50%;
  max-width: 400px;
  margin-top: 0px;
  margin-bottom: -15px;           
}


img.rightSideLogo {
  width: 25%;
  max-width: 200px; 
  position: absolute;
  bottom: 40%;
  right:5%;
}

/*  Navigation */
nav{
  display: block;
  /* height: 2.5em; */
  /* background: rgb(240,240,240);   /*  hellgrau */
  text-align: center; 
  border-top: 3px solid rgb(255,255,0); /*  gelb */
}
nav ul{
  display: block;
}
nav ul li{
  display: inline;
  margin: 0em 0.188em 0em 0.188em;  
}
nav ul li a{
  color: rgb(0,0,0);  /*  schwarz */
  background-color: rgb(203,203,203); /* grau */
  font-size: 1.125em;
  line-height: 1.8em;
  padding: 0.163em 0.938em 0.175em 0.983em;
  transition:background 0.2s ;
  -webkit-transition:background 0.2s ;
  border-radius: 25px 5px 25px 5px;
}
nav ul li a:hover{
  background: rgb(231, 225, 103);
  border-bottom: 0.188em solid rgb(255,0,255);
}
nav ul li a.activ{
  background: rgb(231, 225, 103);
  border-bottom: 0.188em solid rgb(255,0,255);
}

/*  submenue1 */
#submenue1{
  display: block;
  width: 100%;  
  /* height: 2.5em; */
  /* background: rgb(240,240,240);   /*  hellgrau */
  text-align: center; 
 /*  text-align: right; */
  margin-top: 3px;
  border-top: 3px none rgb(255,255,0);  /*  gelb */
}
#submenue1 ul{
  display: inline;
}
#submenue1 ul li{
  display: inline;
  margin: 0em 0.188em 0em 0.188em;
}
#submenue1 ul li a{
  color: rgb(0,0,0);  /*  schwarz */
  background: rgb(255,204,0);  /*  dunkeles gelb */
  background: rgb(174, 201, 149);
  font-size: 1.125em;
  line-height: 1.8em;
  padding: 0.163em 0.938em 0.175em 0.983em;
  transition:background 0.2s ;
  -webkit-transition:background 0.2s ;
  border-radius: 25px 5px 25px 5px;
}
#submenue1 ul li a:hover{
  /* background: rgb(152,204,255); */
  border-bottom: 0.188em solid rgb(255,0,255);
}
#submenue1 ul li a.activ{
  /* background: rgb(102,204,255); */
  border-bottom: 0.188em solid rgb(255,0,255);
  color: rgb(255,255,255);
  font-weight: bold;
}

/*  submenue2 */
#submenue2{
  display: block;
  width: 100%;  
  /* height: 2.5em; */
  /* background: rgb(240,240,240);   /*  hellgrau */
  text-align: center; 
 /*  text-align: right; */
  margin-top: 3px;
  border-top: 3px none rgb(255,255,0);  /*  gelb */
}
#submenue2 ul{
  display: inline;
}
#submenue2 ul li{
  display: inline;
  margin: 0em 0.188em 0em 0.188em;
}
#submenue2 ul li a{
  color: rgb(255,255,255); 
  background: rgb(171, 127, 212);
  font-size: 1.0em;
  line-height: 1.8em;
  padding: 0.163em 0.938em 0.175em 0.983em;
  transition:background 0.2s ;
  -webkit-transition:background 0.2s ;
  border-radius: 25px 5px 25px 5px;
}
#submenue2 ul li a:hover{
  /* background: rgb(152,204,255); */
  border-bottom: 0.188em solid rgb(255,0,255);
}
#submenue2 ul li a.activ{
  /* background: rgb(102,204,255); */
  border-bottom: 0.188em solid rgb(255,0,255);
  color: rgb(255,255,255);
  font-weight: bold;
}


/* Content Area */
#main{
  display: block; 
  width: 96%;
  max-width: 980px;
  margin: 1.25em auto;
  padding: 0em;
  text-align: center;
}
#main article {
 display: inline-block;
 width: 65.3%;
 vertical-align: top;
 margin: 0em;
 padding: 0em ;
 /* text-align: center; */
}
#main article section{
  margin-bottom: 1.563em;
  background: rgb(255,255,255);
  background: rgb(250, 251, 210);   /*  beige Hintergrund für Dinkelhimmel */
  background: rgb(118, 165, 200); /* hellblau */
  background: rgb(218, 250, 219); /* Kelling hellgrün */
  background-color: rgb(255,153,204); /* hellrot  */
  background-color: rgb(255,255,255); /* weiß  */
  border-bottom: 0.188em solid rgb(0,51,255);
}
#main article img{
  /*max-width: 660px;  */
  box-shadow:  0px 0px 10px -5px rgb(0,0,0);
  border-radius: 5px;
}
#main article h2 {
  padding: 1em 1.8em 0em 1.0em;
}

#main aside{
  display: inline-block;
  width: 30.6%;
  margin-left: 3%;
  padding: 0em ;
  vertical-align: top;
}
#main aside section{
  margin-bottom: 1.563em;
  background: rgb(255,255,255);
  background: rgb(250, 251, 210);   /*  beige Hintergrund für Dinkelhimmel */
  background: rgb(118, 165, 200); /* hellblau */
  background: rgb(218, 250, 219); /* Kelling hellgrün */
  background-color: rgb(255,153,204); /* hellrot  */
  background-color: rgb(255,255,255); /* weiß  */
  border-bottom: 0.188em solid rgb(0,51,255);
  height: 100%;
} 
#main aside section ul{
  padding: 0em 1.875em 1.25em 2.5em;
}

#main aside_l{
  display: inline-block;
  width: 30.6%;
  margin-right: 3%;
  padding: 0em ;
  vertical-align: top;
}
#main aside_l section{
  margin-bottom: 1.563em;
  background: rgb(255,255,255);
  border-bottom: 0.188em solid rgb(0,51,255);
  height: 100%;
} 
#main aside_l section ul{
  padding: 0em 1.875em 1.25em 2.5em;
}





/* Footer */
footer{
  display: block;
  position: fixed; 
  left: 0px;
  bottom: 0px; 
  width: 100%; 
  background: rgb(237, 25, 160);
  
  text-align: center;
}
footer ul{
  display: inline;
  width: 100%;
  max-width: 980px;
  text-align: left ;
  margin: 0px auto;
}
footer ul li{
  display: inline;
  font-size: 0.8em;
  line-height: 2.8em;
  color: rgb(255,255,0);
  padding: 0em 0.625em  0em 0.625em;
}
footer ul li a{
  color: rgb(255,255,0);
} 
footer ul li a:hover{
  color: rgb(255,255,255);
  font-weight: bold;
} 

footer img{
  width: 10%;
  max-width: 200px;
  margin-top: -15px;
  margin-bottom: -15px;
  display: inline;          
}



/* mobile style */
@media screen and (max-width:800px) {
  body {
    font-size: 90%;
  }
}
@media screen and (max-width:600px) {
  #main aside, #main aside_l, #main article{
    width:100%;
    display: block;
    margin: 0.625em 0em 0.625em 0em ;     
  }
  #main aside_l {
  /* height: 200px;  */
  }
}

/* Bildschirme größer als 550 */ 
@media screen and (min-width:550px) {
  nav {
    display: block !important; /*   */
  }
} 

/* Bildschirme kleiner als 550 */ 
@media screen and (max-width:550px) {
  body {
    font-size: 86%;
    /*background-size: auto;  /* Höhe fixiert */
  }
  #menubar ul li a.menubutton{
    display: inline;
  }
  nav {
    display: none;
    height: auto;
  }
  nav ul li {
    display: block;
    margin: 0.3em 0em 0.3em 0em ;
  }
  header {
    border-bottom: 0px ;
  }
  #ajaxWlan {
    top: -30px; 
  }  

}

div.div_pause{
  width: 20%;
  padding-left: 40%;
  padding-top: 10%;
  padding-bottom: 10%;

}


/* select Box */
select.seite {
   background-color: #ddd;
   width: 90%;
   margin-bottom: 2px;
   padding: 5px;
   font-size: 12px;
   line-height: 1;
   border: 1;
   border-radius: 5;
   height: 30px;
}
input.seite {
   background-color: rgb(204,255,255);
   width: 85%;
   margin-bottom: 2px;
   padding: 5px;
   font-size: 12px;
   line-height: 1;
   border: 1;
   border-radius: 5;
   height: 20px;
}

div.divAdressListe{
  margin-left: 10px;
  margin-right: 10px;
  background-color: rgb(204,204,204);
  overflow-x: hidden;
  overflow-y: auto;
  text-align: left;
}

/* diveres */

.artsuche {
  text-align: left;
  padding-left: 20px;
  /* height: 450px; */
  overflow: auto;
}