/* 

style.css

 */
 
body {
    padding: 0; margin: 0;
    font: 100% 'lucida grande', verdana, sans-serif ;
    background: #e7ecf4; color: #333; 		  /* background: #e5ebf0; color: #333;  backgr.=blassblau, color= Farbe für Standard-Text */
    text-align: center; /* Zentriert für die aelteren Browser den nachfolgenden Block */
}

/* Allgemeingueltige Klassen und Elemente */
img {
    border: none;
}

code {
    font: 14px consolas, 'courier new', monospace;
    color: #900;
}

pre {
    overflow: auto; padding: 1em;
    font-size: 1em;
}

h1, h2, h3, h4, h5 {
    font-family: georgia, serif; font-weight: normal;		    color: #1F2479; 	/*color = neu! --> Überschriften = blau */
}

a {
    color: #e15a16;			/* link - Farbe = dunkel-orange*/
}
a:hover {
    text-decoration: none;
}

.bild-links { /* Diese Klasse vergeben Sie einem Bild welches links ausgerichtet werden soll */
    float: left;
    margin: .1em 1em .4em 0;
}

.bild-rechts { /* Diese Klasse vergeben Sie einem Bild welches rechts ausgerichtet werden soll */
    float: right;
    margin: .1em 0 .4em 1em;
}

.bild-abstand img {
    margin: 0 .5em .5em 0; /* Bilder innerhalb dieses Elements bekommen zusaetzlichen Abstand */
}

.clearer {
    clear: both; /* hebt die vorhergehenden Floats auf */
}


/*
* Hauptbereich #container
 */

#container {
    text-align: left; /* Hebt die zentrierung auf */
    margin: 0 auto; /* Zentriert diesen Block auf horizontaler Ebene (für modernere Browser) */
    width: 960px;
}


/*
* Hauptbereich: #container
** Unterbereich: #kopfbereich (Logo/Schriftzug und horizontale Navigation)
 */
#kopfbereich {
    position: relative; /* Durch relative Positionierung koennen wir untergeordnete Elemente in Bezug auf #kopfbereich absolut positionieren */
    height: 268px; width: 960px;
    background: url(images/kopfbereich.jpg) no-repeat;
}

/*
* Hauptbereich: #container
** Unterbereich: #kopfbereich
*** Abschnitt: #logo
 */
 
 
#kopfbereich #logo span {
	font-weight: bold; 
    display: block;  		
    color: #1F2479; 	/*color = neu! --> Überschriften = blau */
/*	text-transform: uppercase; */ /*=GROSSBUCHSTABEN*/
	

    
}
 
#kopfbereich #logo {
	position: absolute;
	top: 0;
	left: 25px;
	margin: 0;
	padding: 25px;
	line-height: 1; /* Die richtigen Abstaende für die Ueberschrift als Logo-Box */;
	text-align: left;
	font: normal 1.8em georgia, serif;

/*	background: #fff; */ /* = weiss */	text-transform: none;
}


#kopfbereich a {
    text-decoration: none;
}
#kopfbereich ul a {													/* navi-leiste links */
    float: left; display: block; padding: 10px 15px;
    font: .9375em georgia, serif; 
    text-transform: uppercase; 
}


/*
* Hauptbereich: #container
** Unterbereich: #kopfbereich
*** Abschnitt: #hauptnavi1 (Rechts) und #hauptnavi2 (Links)
 */

#hauptnavi1 {
    position: absolute; top: 0; right: 25px;
    margin: 0; padding: 0;
/*    background: #fff;	*/		   /* background: #fff; --> navi oben rechts = weiss  */ 
    list-style: none;
}

#hauptnavi2 {
    position: absolute; bottom: 0; left: 25px;
    margin: 0; padding: 0;
    background: #fff;			   /* background: #fff; */
    list-style: none;
}
#hauptnavi2 a {
    background: #e57b1a; color: #fff;			   /* background: = navi links orange; color: #fff; =weiss */
}
#hauptnavi2 a:hover, #hauptnavi2 .aktiv a {
    background: #fff url(images/rahmen.gif) repeat-x; color: #1F2479; /* =blau */
}
#hauptnavi1 a {
/*    background: #fff; */
    color: #1F2479;			   /* background: = #e57b1a !!! navi rechts orange; color: #fff; =weiss */
}
#hauptnavi1 a:hover, #hauptnavi1 .aktiv a {
	background: #fff url(images/rahmen.gif) repeat-x;
	color: #e15a16;    /* hover = dunkel-orange */
}


#kopfbereich ul li {
    display: inline; /* Damit sich die einzelnen Listenelemente horizontal anordnen */
}


/*
* Hauptbereich: #container
** Unterbereich: #mitte (Inhalt + Sidebar)
 */

#mitte {
    padding: 0 25px 25px 40px;
    font-size: 75%;
    background: #fff;
    line-height: 1.45;
}
#mitte p, mitte ul, #mitte ol {
    margin: 5px 0 15px 0;
}

#mitte li {
    margin-bottom: 2px;
}


/*
* Hauptbereich: #container
** Unterbereich: #kopfbereich
*** Abschnitt: #inhalt
 */

#inhalt {
    float: left;
    width: 46em; min-width: 552px; max-width: 590px;
}

#inhalt h2 {
    font-size: 1.833em;
}
#inhalt h3 {
    margin-bottom: 0; font-size: 1.5833em;
    border-bottom: 1px dotted #400;
}
#inhalt h4 {
    margin-bottom: 0; font-size: 1.4166em;
}
#inhalt h5 {
    margin-bottom: 0; font-size: 1em;
}


/*
* Hauptbereich: #container
** Unterbereich: #mitte
*** Abschnitt: #sidebar
 */

#sidebar {
    float: right;
    width: 280px;
    position: relative; top: -38px;
}

/* Die einzelnen Boxen in der Sidebar */
.sidebar-box {
    padding: 15px; margin-bottom: 25px;
    background: #F5C69E; color: #fff;			    /* background: #eae5e5; color: #222; --> boxen = blass-orange */
}
.sidebar-box h2 {
    margin: 0;
}
.sidebar-box ul, .sidebar-box ol {
    list-style: none; margin-left: 0; padding-left: 0; /* Entfernt die Listenpunkte und den linken Abstand */
}

.erste-box {
    background: #e57b1a; color: #fff;		    		/*background: #300; color: #fff; --> erste box = orange: #e57b1a*/

}
.erste-box a {
    color: #fff; text-decoration: underline;
}
.erste-box a:hover {
    text-decoration: underline;
}


/*
* Hauptbereich: #container
** Unterbereich: #footer
 */

#footer {
	background: #e57b1a;
	color: #fff;
	padding: 15px 25px 12px 40px;
/* background: #300; color: #fff; padding: 15px 25px 12px 40px; --> footer = orange */	font-size: 75%;
	text-align: center;
}

#footer p {
    margin: 0 0 2px 0;
}

#footer a {
    color: #fff; text-decoration: underline;
}
#footer a:hover {
    text-decoration: none;
}


/* Bild hover / mouseover Effekt*/

a.info{ 
    position:relative; 
    z-index:1; 
    color:#000; 
    text-decoration:none} 

a.info:hover{z-index:2;} 

a.info span{
display: none;
} 

a.info:hover span{
	background-image: url(bildgross.jpg);
	display: inline;
	position: absolute;
	top: 50px;
	left: 80px;
	width: 550px;
	height: 300px;
}