/*
    Style
	Reiter und Pferd
	www.reiter-und-pferd.de
    -----------
    
    Die großen Browser verhalten sich unterschiedlich, wenn es um innere
    und äußere Abstände von Elementen geht (innere => padding, äußere =>
    margin). Wenn ein Element 900px breit ist, und du stellst für das 
    Element ein Padding von 10px ein, dann ist das Element im Internet 
    Explorer auf einmal 920px breit.
    
    Darum gibt es in der Datei auch für jedes Element noch ein Container-
    Element, das nur dafür zuständig ist, die Layout-Eigenschaften des
    inneren Elements zu bestimmen, wie z.B. die Position in der Seite,
    oder die Breite. Hier einfach mal ein Beispiel:
    
    #navigation {
        width: 200px;
        padding: 10px;
    }
    
    würde das Element "navigation" im IE effektiv 220px breit machen (das
    Padding wird auf alle vier Seiten des Elements angewendet)
    
    Folgendes hingegen:
    
    #navigation-container {
        width: 200px;
    }
    
    #navigation {
        padding: 10px;
    }
    
    stellt sicher, dass das Element bei 200px Breite bleibt. Den inneren
    Abstand können wir nun setzen, wie wir wollen.

*/



/*
    Browser haben die unangenehme Eigenschaft, dass sie bestimmten 
    HTML-Elementen (h1, p, usw.) automatisch innere und äußere
    Abstände zuweisen. Das nachfolgende * bedeutet "alles", also
    gelten die Einstellungen für "*" für alle Elemente der Seite. Das
    "html *" ist eine Zusatzangabe, damit auch der Internet Explorer
    das versteht
*/
*,
html * {
    margin: 0; /* äußere Abstände */
    padding: 0; /* innere Abstände */
    font-size: 15px; /* Basis-Schriftgröße für alle Elemente */
	color: #000000;
	}

body {
    background: #FFFAF0; /*Hintergrund hinter allem*/
}


/*
    Der Page-Container ist quasie der Rahmen für alles. Alles andere
    ist innerhalb des Containers und orientiert sich an dem Container.
    Wir definieren hier z.B. die Gesamtbreite, die der
    Inhalt nicht überschreiten soll, und wir können hier z.B. auch
    mit einem Befehl festlegen, ob der gesamte Inhalt zentriert,
    links ausgerichtet, oder rechts ausgerichtet angezeigt werden
    soll.
*/
#page-container {
    /*
        Standardmäßig sollen wir von einer Bildschirmauflösung von
        1024x768px ausgehen. Damit das nicht so an die Ränder gepresst
        aussieht und ein User auch nicht das Browserfenster unbedingt
        maximiert haben muss, bleiben wir mit der Inhaltsbreite ein 
        wenig drunter
    */
    width: 790px;
	border: 2px solid #A5A675;
	padding: 2px;
    
    /*
        Jetzt zentrieren wir den Container im Browserfenster. Was
        hier steht, ist eine Kurzschreibweise für:
        
        margin: 20px auto 20px auto;
        
        Was wiederum eine Kurzschreibweise ist für:
        
        margin-top: 20px;
        margin-right: auto;
        margin-bottom: 20px;
        margin-left: auto;
         
    */
    margin: 20px auto;
    
    /*
        Vielleicht möchtest du ja ein bisschen mit verschiedenen
        Schriften experimentieren, die Arial ist schon eine etwas
        "harte" Schrift. Alternativen wären z.B.
        Trebuchet MS, Geneva, Verdana
        Wenn du mehrere Schriften nacheinander schreibst, wird immer
        versucht, die erste zu verwenden. Wenn der User die Schrift
        nicht hat, wird die nächste Schrift ausprobiert.
    */
    font-family: Trebuchet MS, Geneva, Verdana
    
    /*
        Hintergrundfarbe für den gesamten Inhalt (im Unterschied zu
        body, der noch eine Ebene über dem Container liegt und eine
        andere Hintergrundfarbe hat)
        
        Die Hintergrundfarbe für diesen Container muss die gleiche Farbe
        sein wie die von der Navigation. Das liegt daran, dass durch die 
        "float"-Eigenschaft Spalten nicht bis ganz nach unten durchgezogen
        werden. Oder einfacher: mach es einfach so :)
    */
   background: #EEDFCC;
}

#header-container {
    background-image: url(header.jpg);
	background-repeat: no-repeat; /*keine Kachelung, erscheint nur einmal*/
}

#header {
    height: 85px;
    text-align: center;
}
	
#rahmen {
	background: #EEDFCC; /*um die Navigation und den Inhalt*/
}

#navigation-container {
    float: left;
    width: 150px;
	background: #EEDFCC;
}

#navigation {
	padding-top: 15px;
    padding-left: 2px;
}

#navigation ul {
    list-style-type: none;
}

#navigation li {
    line-height: 130%;
}

#navigation ul li ul {
	margin-left: 5px;
	list-style-position: inside;
}

#navigation h5 {
	text-align: left;
	font-size: 12px;
	text-decoration: underline;
	margin-left: 22px;
}

#navigation p {
	font-size: 12px;
	text-align: left;
	margin-left: 22px;
}

#navigation a {
	font-weight: bold;
	text-decoration: none;
	padding-left: 25px;
}

#navigation ul li ul a {
	font-size: 13px;
}

#navigation a:hover {
	font-weight: bold;
	text-decoration: none;
	background-image: url(bilder/logo_rup_navigation.png);
	background-repeat: no-repeat;
}

#navigation a:active {
	font-weight: bold;
	color: #A5A675;
	text-decoration: none;
	background-image: url(bilder/logo_rup_navigation.png);
	background-repeat: no-repeat;
}

#inhalte-container {
    float: right;
    width: 600px;
	overflow: auto;
}

#inhalte {
    padding-top: 25px;
	padding-bottom: 25px;
	padding-left: 10px;
	padding-right: 10px;
    background: #FFEFDB;
}

#inhalte h3 {
    font-size: 150%;
    margin-bottom: 10px;
	text-align: center;
}

#inhalte h4 {
	font-size: 120%;
	margin-bottom: 10px;
	text-align: justify;
}

#inhalte p {
    line-height: 130%;
	text-align: justify;
}

#inhalte a {
	font-weight: bold;
	text-decoration: none;
}

#inhalte a:hover {
	font-weight: bold;
	color: #A5A675;
	text-decoration: none;
}

#inhalte a:active {
	font-weight: bold;
	color: #A5A675;
	text-decoration: none;
}

.clear {
    clear: both;
}

#footer-container {
    background-image: url(hintergrund-footer.gif);
	clear: both;
}

#footer {
    padding: 10px;
	text-align: center;
}

#footer p {
    font-size: 11px;
}

#footer a {
    font-size: 11px;
	font-weight: bold;
	text-decoration: none;
}

#footer a:hover {
	font-weight: bold;
	color: #A5A675;
	text-decoration: none;
}

#footer a:active {
	font-weight: bold;
	color: #A5A675;
	text-decoration: none;
}