/*
Dieses Template wurde im Auftrag von Microsoft Deutschland erstellt.

- Die grafische Vorlage fuer dieses Layout stammt von Christina Poser (von-poser.com).
- Die Umsetzung des Templates wurde von Vladimir Simovic (www.perun.net) durchgefuehrt.
*/

body {
    padding: 0; margin: 0;
    font: 100% 'lucida grande', verdana, sans-serif;
    background: #e5ebf0; color: #333;
    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 {
    font-family: georgia, serif; font-weight: normal;
}

a {
    color: #700;
}
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;
}

IMG.displayed {
	display:block;
	margin-left:auto;
	margin-right:auto;
	width:100%
}

.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 {
    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: center;
    font: normal 1.5em georgia, serif;
    background: #fff;
    text-transform: uppercase;
}

#kopfbereich #logo span {
    font-weight: bold; display: block;
}

#kopfbereich a {
    text-decoration: none;
}
#kopfbereich ul a {
    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;
    list-style: none;
}

#hauptnavi2 {
    position: absolute; bottom: 0; left: 50px;
    margin: 0; padding: 0;
    background: #fff;
    list-style: none;
}
#hauptnavi2 a {
    background: #000; color: #fff;
}
#hauptnavi2 a:hover, #hauptnavi2 .aktiv a {
    background: #fff url(images/rahmen.gif) repeat-x; color: #000;
}
#hauptnavi1 a:hover, #hauptnavi1 .aktiv a {
    background: #fff url(images/rahmen.gif) repeat-x bottom; color: #300;
}

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


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

#mitte {
    padding: 0 40px 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;
}

#inhalte-zentriert {
	display:flex;
	align-items: center;
	justify-content: center;
	
}

#div-container1 {
float:inherit;
margin-left: 0px;
margin-top:0px;
}	

#div-container2 {
float:inherit;
margin-left: 0px;
margin-top: 0px;	
}


/*
* 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: #eae5e5; color: #222;
}
.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: #300; color: #fff;
}
.erste-box a {
    color: #fff; text-decoration: underline;
}
.erste-box a:hover {
    text-decoration: underline;
}


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

#footer {
    background: #000; color: #fff; padding: 15px 25px 12px 40px;
    font-size: 75%;
}

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

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