<style type="text/css">

body {margin:0px;
      background:#808080;
      }

#container {
	max-width:960px;
	padding:0.52083333333333333% /* 5px / 960px x 100 = 0,5208333% */;
	margin:0 auto;
	background: #808080;
  }

div.container  {
	max-width:960px;
	padding:0.52083333333333333% /* 5px / 960px x 100 = 0,5208333% */;
	margin-left:20px;
	background: #808080;
  }
    
#footer {
  position: fixed;
  overflow: left;
  bottom: 0;
  width: 100%;
  line-height:2.1em;
  background: #CFD6D6;
  }   
.textfooter {
  display: flex;
  justify-content: center;
  }  
    
header {
  width:100% /* 940px / 960px x 100 = 97.91666666666666% | 100% bei */;
	padding: 0%;
  background: #808080;
	box-sizing:border-box;
  }

article {
  width:99.4%;
	background-color: rgba(250,250,250, 0.7);
  border: 1px solid grey;
	border-radius:5px;
	margin:1px;
	padding-bottom:5px;
	padding-left:5px;
	padding-right:5px;
	padding-top:5px;
  box-sizing:border-box;
  }
   
div.such {
  width:100%;
	background-color: rgba(250,250,250, 0.7);
  border: 1px solid grey;
	border-radius:5px;
	padding-bottom:9px;
	padding-left:9px;
	padding-right:9px;
	padding-top:9px;
  box-sizing:border-box;
  }   
   

div.zelle {
  width:100%;
  font-size: 0.875em; 
  font-family: Verdana; 
	background-color: rgba(250,250,250, 0.7);
  border: 1px solid grey;
	border-radius:5px;
	margin:1px;
  height:auto;
	padding-bottom:2px;
	padding-left:2px;
	padding-right:2px;
	padding-top:2px;
  box-sizing:border-box;
	}  
  
 
div.leerzelle {
  width:100%;
  font-size: 0.875em; 
  font-family: Verdana; 
	background-color: rgba(250,250,250, 0.7);
  border: 1px solid grey;
	border-radius:5px;
	margin:1px;
  height:20px;
	box-sizing:border-box;
	}   
  
table.zelle {
  width:100%;
	background-color: rgba(255,255,255, 0.7);
  border: 1px solid grey;
	border-radius:5px;
	margin:1px;
	padding-bottom:5px;
	padding-left:5px;
	padding-right:5px;
	padding-top:5px;
  box-sizing:border-box;
	} 
  
table.frei {
  max-width:99%;
	background-color: #808080;
  border: 0px solid grey;
	border-radius:5px;
	margin:1px;
	padding-bottom:2px;
	padding-left:2px;
	padding-right:2px;
	padding-top:2px;
  align: right;
  box-sizing:border-box;
	}   
  
/* CSS-Tabellen */ 
caption {	-moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; color: white;	background: #c32e04; font-size: 1.25em; padding: 0.2em 0.2em 0.2em 0.2em; width: 10em;}  

caption.breite1 { width: 10.5em; }

caption.breite2 { width: 17.0em; }

caption.breite3 { width: 15.0em; }

caption.dsgvo { width: 13.0em; }
  
img {
  max-width: 100%;
  height:auto;
  }


.logbuch textarea,input,select { 
   font-size: 1.25em; 
   border: 1px solid black;
   padding: 0px 10px 0px;
   color: black;
   font-family: Verdana; 
   background-color: #F9F9F9;
   text-decoration:none;
   }	  

.strom { /* Select-Formularfeld (Strom/Dusche Camping-/Stellplatz) */
   width: 220px;
   font-size: 1.0em; 
   border: 1px solid black;
   padding: 0px 0px 0px 0px;
   color: black;
   font-family: Verdana; 
   background-color: #F9F9F9;
   text-decoration:none;
   }	   
   
   
.bewertung { /* Select-Formularfeld (Bewertungen Camping-/Stellplatz) */
   width: 200px;
   font-size: 1.125em; 
   border: 1px solid black;
   padding: 0px 0px 0px 0px;
   color: black;
   font-family: Verdana; 
   background-color: #F9F9F9;
   text-decoration:none;
   }	
   
.empfehlung { /* Select-Formularfeld (Empfehlung Gegend) */
   font-size: 1.125em; 
   border: 1px solid black;
   padding: 0px 0px 0px 0px;
   color: black;
   font-family: Verdana; 
   background-color: #F9F9F9;
   text-decoration:none;
   }	   
    
.form1 { /* Input-Formularfelder (Preis, Meter) */
   width: 70px;
   font-size: 1.125em; 
   border: 1px solid black;
   padding: 0px 0px 0px 0px;
   color: black;
   font-family: Verdana; 
   background-color: #F9F9F9;
   text-decoration:none;
   }	   
   
.zurButton { 
   font-size: 1.25em; 
   border: 1px solid #000000;
   padding: 0px 10px 0px;
   color: black;
   font-family: Verdana; 
   background-color: #F9F9F9;
   text-decoration:none;
   }	  

.infoButton {
	 background-color: #808080;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   border-radius:5px;
	 border:2px solid #000000;
	 display:inline-block;
	 cursor:pointer;
	 color:#FFFFFF;
	 font-family:Arial;
	 font-size:0.75em;
   font-weight:bold;
	 padding:1px 5px;
	 text-decoration:none;
   } 

	
.menuButton {
	 background-color: #CFD6D6;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   border-radius:5px;
	 border:2px solid #CFD6D6;
	 display:inline-block;
	 cursor:pointer;
	 color:#000000;
	 font-family:Arial;
	 font-size:1.125em;
   font-weight:bold;
	 padding:1px 5px;
	 text-decoration:none;
   }   
  
.pwButton {
	 background-color: #E9E6DE;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   border-radius:5px;
	 border:1px solid #000000;
	 display:inline-block;
	 cursor:pointer;
	 color:#000000;
	 font-family:Arial;
	 font-size:0.75em;
   font-weight:bold;
	 padding:1px 5px;
	 text-decoration:none;
   }     

div.zeitraum1 {
  width:100%;
	background-color: rgba(250,250,250, 0.7);
  border: 1px solid grey;
	border-radius:7px;
	padding-bottom:2px;
	padding-left:2px;
	padding-right:2px;
	padding-top:2px;
  box-sizing:border-box;
  }   

.zeitraum {
   font-size:1.0em;
   width:3.5rem;
   height:25px;
   border-bottom: 1px dotted #000000;
   border-top: 0px;
   border-left: 0px;
   border-right: 0px;
   vertical-align: baseline;
} 
 
.zeitraumlos {
   width:2.5rem;
   height:25px;
   background-color: #d6d6d6;
   border-bottom: 1px dotted #000000;
   border-top: 0px;
   border-left: 0px;
   border-right: 0px;
   vertical-align: baseline;
}   

.hr-menu { width: 325px; }

td.detailssp1 { width:220px; }  
td.detailssp2 { width:270px; } 
td.suchfilter { width:200px; } 
td.gegendplatz { width:140px; } 
td.qualitaet { width:180px; } 
td.angaben { width:70px; } 

fieldset:disabled {
	background: whitesmoke;
  } 


/* Bildschirmanpassung bis maximal 992px */
@media screen and (max-width: 992px) {

body {margin:0px;background:#ffffff;}

article {width:99%; padding:0.5%;}

caption {font-size: 1.125em;}

#footer {  line-height: 1.9em; }   

.logbuch textarea,input,select { 
   font-size: 1.05em; 
   padding: 1.5px 10px 0.8px;
   }	 

.strom { /* Select-Formularfeld (Strom/Dusche Camping-/Stellplatz) */
   width: 200px;
   font-size: 0.875em;   
   }
   
.bewertung { /* Formularfelder (Bewertungen Camping-/Stellplatz) */
   width: 185px;
   font-size: 1.0em; 
   }  
   
.empfehlung { /* Formularfeld (Empfehlung Gegend) */
   font-size: 1.0em;    
   }
   
.form1 { /* Formularfelder (Preis, Meter) */
   width: 60px; 
   font-size: 1.0em; 
   }    
   
.zurButton { 
   font-size: 1.05em; 
   padding: 1.5px 10px 0.8px;
   }	  

.menuButton {	font-size:1.0em; }  

.tourButton {	font-size:1.0em; } 
 
.zeitraum {
   width:3rem;
   height:20px;
   } 
   
.hr-menu { width: 300px; }   
   
td.detailssp1 { width:200px; }  
td.detailssp2 { width:250px; } 
td.suchfilter { width:150px; } 
td.gegendplatz { width:140px; } 
td.qualitaet { width:180px; }  

}


/* Bildschirmanpassung bis maximal 576px */
@media screen and (max-width: 576px) {

body {margin:0px;background:#ffffff;}

article {width:99%; padding:0.5%;}

caption {font-size: 1.05em; padding: 0.1em 0.1em 0.1em 0.1em;}

#footer {  line-height: 1.7em; } 

.logbuch textarea,input,select { 
   font-size: 0.95em; 
   padding: 1.5px 10px 0.8px;
   }	 
   
.strom { /* Select-Formularfeld (Strom/Dusche Camping-/Stellplatz) */
   width: 160px;
   font-size: 0.75em;    
   }
   
.bewertung { /* Formularfelder (Bewertungen Camping-/Stellplatz) */
   width: 150px;
   font-size: 0.875em; 
   }  
 
.empfehlung { /* Formularfeld (Empfehlung Gegend) */
   font-size: 0.875em;    
   }
   
.form1 { /* Formularfelder (Preis, Meter) */
   width: 50px; 
   font-size: 0.875em; 
   } 

.zurButton { 
   font-size: 0.95em; 
   padding: 1.5px 10px 0.8px;
   }	  

.menuButton {	font-size:0.875em; }   

.tourButton {	font-size:0.875em; } 

.zeitraum {
   font-family:Arial;
   font-size:1em;
   font-weight: bold;
   width:2.5rem;
   height:18px;
   } 

.hr-menu { width: 275px; }  
   
td.detailssp1 { width:180px; }  
td.detailssp2 { width:230px; } 
td.suchfilter { width:100px; } 
td.gegendplatz { width:110px; } 
td.qualitaet { width:160px; } 
td.datum { width:120px; } 

}


</style>
