body {

font-size: 100.01%;
width: 997px;
margin: 0 auto ;
border: 1px solid #99ccff;
background-color: #ffffff
}

html {
background-color: #99ccff;
height: 101%; 
} 

.container {
clear: both;
float: left;
width: 100%;
overflow: hidden;
background: #024c68;
font-family: Verdana;
font-size: 1.0em;
}

#navi {
float: left;
position: relative;
left: 50%;
margin: 0 auto;
padding: 0;
list-style-type: none;
}

#navi li {
float: left;
position: relative;
right: 50%;
}

#navi a {
width: auto;
display: block;
padding:0 10px;
line-height: 1.5em;
color: #fff;
background: #ff8500;
border:1px solid #024c68;
text-decoration:none;
}

#navi a:hover {
background: #ffa340;
color: #000;
}

#navi a:active {
width: auto;
display: block;
padding:0 10px;
line-height: 1.5em;
color: #000;
background: #ffa340;
border:1px solid #024c68;
text-decoration:none;
}

span {
color: #000;
}

/*-- Dient dazu, das Foto zu vergrößern --*/

.foto {
margin: 0; padding: 0; 
img:  border: none; 
}

.foto li { 
list-style: none; position: relative; 
}
 
.foto a .gross {  
display: none; 
}
 
.foto a:hover .gross { 
display: block;  position: absolute; top: 6.15em; left: 0;
}
/*-- Ende das Foto zu vergrößern --*/


.clear {
clear: both;
}

.center {
	text-align: center;
	margin-top: 10px;
}

.row     { clear: both; }

* {
  -webkit-box-sizing: boder-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

	#navwrapper {
  width: 960px;
  margin: 0 auto;
  } 
 
/* Einfaches 960-Pixel-Rasterlayout*/
 


 
.grid1, .grid2, .grid3, .grid4,
.grid5, .grid6, .grid7, .grid8,
.grid9, .grid10, .grid11, .grid12 {
   margin-left: 10px;
   margin-right: 10px;
   float: left;
}



article {
  border: 1px solid gray;
  border-radius: 5px;
  margin: 3px 0px;;
  padding: 3px;
}

@media screen and (max-width: 767px) {

#wrapper {
  width: auto;
  max-width: none;
  margin: 0 auto;
}

.grid1, .grid2, .grid3, .grid4,
.grid5, .grid6, .grid7, .grid8,
.grid9, .grid10, .grid11, .grid12 {
   width: 95%;
}

article { clear: both;}

}

@media screen and (min-width: 768px) and (max-width: 960px) {

#wrapper {
  width: 744px;
  max-width: none;
  margin: 0 auto;
}

.grid1 { width: 42px; }
.grid2 { width: 104px; }
.grid3 { width: 166px; }
.grid4 { width: 228px; }
.grid5 { width: 290px; }
.grid6 { width: 352px; }
.grid7 { width: 414px; }
.grid8 { width: 476px; }
.grid9 { width: 538px; }
.grid10 { width: 600px; }
.grid11 { width: 662px; }
.grid12 { width: 724px; }

}

@media screen and  (min-width: 960px) {

#wrapper {
  width: 960px;
  max-width: none;
  margin: 0 auto;
}

.grid1 { width: 60px; }
.grid2 { width: 140px; }
.grid3 { width: 220px; }
.grid4 { width: 300px; }
.grid5 { width: 380px; }
.grid6 { width: 460px; }
.grid7 { width: 540px; }
.grid8 { width: 620px; }
.grid9 { width: 700px; }
.grid10 { width: 780px; }
.grid11 { width: 860px; }
.grid12 { width: 940px; }

}

.grid1 { width: 60px; }
.grid2 { width: 140px; }
.grid3 { width: 220px; }
.grid4 { width: 300px; }
.grid5 { width: 380px; }
.grid6 { width: 460px; }
.grid7 { width: 540px; }
.grid8 { width: 620px; }
.grid9 { width: 700px; }
.grid10 { width: 780px; }
.grid11 { width: 860px; }
.grid12 { width: 940px; }

.grid1, .grid2, .grid3, .grid4,
.grid5, .grid6, .grid7, .grid8,
.grid9, .grid10, .grid11, .grid12 {
   margin-left: 10px;
   margin-right: 10px;
   float: left;
}

footer, header {
   background-color: ;
   padding-bottom: 1%;
   padding-top: 1%;
   text-align:center;
}

#mainnav {
   background-color: beige;
   padding-bottom: 1%;
   padding-top: 1%;
   text-align:center;
}

#sidebar {
   padding-bottom: 1%;
   padding-top: 1%;
}



#sidebar img { /* Bild in der Seitenleisete formatieren */
    max-width: 100%;
    height: auto;
 }


article {
  border-bottom: 1px solid black;
  background-color: white;
}
 img {
    max-width: 100%;
    height: auto;
    margin-top: 1%;
    border-radius:5px;
    box-shadow: 2px 2px 1px #888888;
}

article img { /* Bild im Artikel formatieren */
    float: left;
    margin: 0 3% 3% 0;
    max-width: 60%;
    height: auto;
 }


.box1
{
width: 62px;
border: 1px solid #00008B;
background: #F1EDC2;
margin-bottom: 1px;
}

h4
{
padding: 3px 0 3px 8px;
background: #008080;
color: #fff;
font-size: 1.7em;
margin: 0;
text-align: center;
}

h3
{
padding: 10px 0 10px 10px;
background: #E6ECFF;
color: #009933	;
font-size: 1.1em;
margin: 1px;
text-align: center;
}

h1
{
font-size: 1.2em;
}

.box1 p
{
font-size: 1.3em;
padding: 8px;
margin: 0;
} 
.box2
{
width: 132px;
border: 1px solid #00008B;
background: #F1EDC2;
margin-bottom: 1px;
}

p2
{
padding: 10px 0 10px 10px;
background: #E6ECFF;
color: #009933	;
font-size: 1.1em;
margin: 1px;
text-align: center;
 }

.box2 p
{
font-size: 1.3em;
padding: 8px;
margin: 0;
} 
.box3
{
width: 212px;
border: 1px solid #00008B;
background: #F1EDC2;
margin-bottom: 1px;
}


.box3 p
{
font-size: 1.3em;
padding: 8px;
margin: 0;
} 


.box4
{
width: 292px;
border: 1px solid #00008B;
background: #F1Edc2;
margin-bottom: 1px;
}

.box4 p
{
font-size: 1.3em;
padding: 8px;
margin: 0;
} 

#wrapper1
{
width: 700px;
margin: 10px auto;
font-size: 0.9em;
border: 1px solid blue;
background-image: url(../image/wrapperbg.jpg);
} 

 #bavi
{float: left;
width: 350px;
padding: 5px;
background: #809fff;
}
#content
{
width: 340px;
float: left;
margin-left: 1px;
display: inline;
padding: 5px;
background: #bfcfff;
}

#content2
{
width: 130px;
float: left;
margin-left: 1px;
display: inline;
padding: 5px;
background: #bfcfff;
text-align: center;
}

#content3
{
width: 211px;
float: left;
margin-left: 1px;
display: inline;
padding: 5px;
background: #bfcfff;
text-align: center;
}

#content4
{
width: 292px;
float: left;
margin-left: 1px;
display: inline;
padding: 5px;
background: #bfcfff;
text-align: center;
}

#content5
{
width: 373px;
float: left;
margin-left: 1px;
display: inline;
padding: 5px;
background: #bfcfff;
text-align: center;
}

#content6
{
width: 451px;
float: left;
margin-left: 1px;
display: inline;
padding: 5px;
background: #bfcfff;
text-align: center;
}

#content7
{
width: 535px;
float: left;
margin-left: 1px;
display: inline;
padding: 5px;
background: #bfcfff;
text-align: center;
}

#adbar
{width: 240px;
padding: 5px;
float: left;
display: inline;
margin-left: 1px;
background: #E6ECFF;
}

#peter
{width: 930px;
padding: 1px;
float: left;
display: inline;
margin-left: 1px;
background: #E6ECFF;
}



 #bavi4
{float: left;
width: 292px;
padding: 5px;
background: #809fff;
}