body {
font-family: Tahoma, sans-serif;
font-size: large;
}
a {
color: #000;
text-decoration: underline;
}
a:hover {
text-decoration: underline;
}

.logo {
max-height:60px;
max-width:60px;
}


/************************************************************************************
Bild
Das Bild im Text wird relativ skaliert (80%). 
Wir benötigen aber die Angabe einer maximalen Breite, damit es unser Maximal-Layout 
auf einem grossen Bildschirm nicht "verreist".
*************************************************************************************/
.textbild {
text-align: center;
max-width: 900px;
}

.textbild img{
width: 100%;
}

/************************************************************************************
Menü
Hier wird erst einmal die Navigation - eigentlich eine Aufzählungsliste
in die horizontale Ebene gebracht (display:inline)
*************************************************************************************/

#navcontainer 
{
width: 100%;
margin: auto;
border-top: 1px solid black;
border-bottom: 1px solid black;
text-align:center;

}

#navcontainer ul
{
border-top: 1px solid black;
border-bottom: 1px solid black;
margin: 0px; /*setzen an den äussersten Rand*/
padding: 0px; /*setzen an den äussersten Rand*/
list-style-type: none;
color: white;
background-color: #f8f8f8;
}

#navcontainer ul li
{
display: inline; /*besser als float - gefloatete Listen bekommt man mit CSS nicht an den äussersten Rand*/
}

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: black;
}

#navcontainer ul li a:hover
{
background-color: white;
width: 100%;
color: black;
}


/************************************************************************************
Rahmen
Dies sind die Rahmen um unsere Elemente
*************************************************************************************/
#content {
background: #ffffff;
}
#sidebar {
background: #ffffff;
}
#header, #content, #sidebar {
margin-bottom: 0px;
}
#pagewrap, #header, #content, #sidebar, #footer {
border: solid 0px #ffffff;
}

/************************************************************************************
Struktur
*************************************************************************************/

/* pagewrap ist unsere "Aussenhülle". Für sie legen wir eine maximale Grösse von 
960 px fest */
#pagewrap {

width: 960px;
margin: auto;
}
#header {
height: auto;
}
#content {
/* Das mit den 32768px ist die Problematik mit den gleich hohe floatenden DIVs.
Siehe hierzu http://webstylez.net/Floatende-Divs-gleich-hoch-machen */
width: 960px;



text-align:justify;


}
#content2 {
width: 600px;
float: left;
background-color: #ffffff;

text-align:justify;
}
#sidebar {
width: 340px;
float: right;

padding-bottom: 32768px;
margin-bottom: -32768px;
text-align: justify;
background-color: #ffffff;
}
#footer2 {

clear: both;
text-align: justify;
}
#footer {
clear: both;
padding: 5px;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;

}

#mainpart
{
overflow: hidden;
height: 100%; /* for IE6 */

}


/************************************************************************************
Media queries
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {

/* Hier fängt die Magic an... Alles wird in Prozentwerten angegeben */ 
#pagewrap {
width: 94%;
}
#content {
width: auto;
float: none;
}
#content2 {
width: 63%;

}
#sidebar {
width: 34.5%;
}

}

/* for 700px or less */
@media screen and (max-width: 700px) {

/* Hier fängt die Magic an... Immer noch Prozente, aber der Content und der Box-Bereich
werden übereinander gestapelt (float:none) und gleich breit gemacht (width: auto) 
Auch das Navigationsmenü wird übereinander (display: block) gestapelt */ 

#content {
width: auto;
float: none;
}
#content2 {
width: auto;
float: none;
}
#sidebar {
width: auto;
float: none;
}
#navcontainer ul li
{
display: block; 
width: auto;
} 

#navcontainer ul li a
{
width: auto;
display: block;
}

}

/* for 480px or less */
@media screen and (max-width: 480px) {
/* Für ganz kleine Displays machen wir die H1-Überschrift noch kleiner */ 
h1 {
font-size: 24px;
}
.logo {
max-height:60px;
max-width:60px;
}
.header02{
padding-top:32px;
padding-bottom:32px;
text-align:center;
max-width:100%;
}
}

/* for 370px or less */
@media screen and (max-width: 370px) {
/* Für ganz kleine Displays machen wir die H1-Überschrift noch kleiner */ 

.logo {
max-height:0px;
max-width:0px;
.header02{
padding-top:32px;
padding-bottom:32px;
text-align:center;
max-width:100%;
}
}
}