/*
    Zuerst setzten wir die Eigenschaften für margin, padding und border zurück, 
    sodass Browserabweichungen ausgeglichen werden können.
*/
* {
    margin: 0px;
    padding: 0px;
    border: 1;
	border-color: #E6D30A;
	color: black;
}

/*
    Für den kompletten HTML Bereich setzen wir die Standard Schrift und verpassen
    der Seite noch eine Hintergrundfarbe.
*/
html {
    background-color: #FFFFFF; 
    color: #E6D30A; /* orange gelb auch hier eine Farbe ähnelnd zu schwarz, aber nicht so grell */
    font-family: Arial, Verdana, Helvetica, sans-serif;
	background-position: center; 


}

h1{
    color: #89C6EF;
}
h2{
    color: #E6D30A;
}
a{
    color: black;
}

/*
    Nun kommt der Schlagschatten.
    Dieser besteht einfach aus einer Höhe und einem Hintergrund.
*/
#border {
    background: url(schatten.png) repeat-x top left;
    height: 12px; 
}

/*
    Zuerst bekommt die Navi ihren richtigen Abstand zu den anderen Elementen.
*/
#navi {
    margin: 1em 1.3em;
}

/*
    Und nun bekommen auch noch die Listenpunkte ihr styling.
    Mit 'display' werden sie horizontal angeordnet und ihre Listenpunkte werden entfernt.
*/
#navi li {
    display: inline;
    list-style-type: none;
    padding: 0px 1em 0px 0px;
}

/*
    Da die Listenpunkte Links enthalten, werden die nichtmal extra formatiert.
*/
#navi a, #navi a:active, #navi a:visited, #navi a:hover {   
    /* zwar aus Usability nicht korrekt, aber in der Navigation vertretbar */
     text-decoration: none; 
}

/*
    Und zu guter letzt noch der Content. 
    Am Container selbst wird nicht viel getan, aber die einzelnen Elemente darin müssen
    wieder ihren 'margin' bekommen, den wir am Anfang zurück gesetzt haben.
*/
#content {
    margin: 0px 1.3em;
}

#content h2, #content p {
    margin: 1em 0px;
}

/*
    damit das ganze noch ein bisschen bunter wird, bekommt die Überschrift die selbe Farbe,
    wie der Hintergrund des Headers.
*/
#content h2 {
    color: rgb(115,183,254);
}