body {
background-color: black;
font-family: Helvetica,sans-serif;
}
a {
color: #CCCCCC;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
h1 {
font-family: Helvetica,sans-serif;
color: #FFDD00
}



/************************************************************************************
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: 299px;
background-color: #201B6E
}

.textbild img{
width: 80%;
}

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

#navcontainer 
{
width: 100%;
margin: auto;
border: 1px solid black;
}

#navcontainer ul
{
border: 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: black;
}

#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: white;
}

#navcontainer ul li a:hover
{
background-color: #201B6E;
width: 100%;
color: #FFEC96;
}




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

/* pagewrap ist unsere "Aussenhülle". Für sie legen wir eine maximale Grösse von 
960 px fest */
#pagewrap {
padding: 5px;
width: 960px;
margin: 20px auto;
}
#header {
height: auto;
background-color: #201B6E
}
#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: 600px;
float: left;
padding: 5px;
padding-bottom: 32768px;
margin-bottom: -32768px;
background-color: #7CA7D9

}
#sidebar {
width: 340px;
float: right;
padding-bottom: 32768px;
margin-bottom: -32768px;
background-color: #7CA7D9
}
#footer {
clear: both;
padding: 5px;
background-color: #7CA7D9
}

#mainpart
{
overflow: hidden;
height: 100%; /* for IE6 */;
background-color: #7CA7D9
}


/************************************************************************************
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: 63%;
background-color: #7CA7D9
}
#sidebar {
width: 34.5%;
background-color: #7CA7D9
}

}

/* 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;
}
#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;
}

}