

    <!--
    body  {
            font: 100% Verdana, Arial, Helvetica, sans-serif;
            background-image: url(../Bilder/laub.jpg);
            margin: 0; /* Es empfiehlt sich, margin (Rand) und padding (AuffŸllung) des Body-Elements auf 0 einzustellen, um unterschiedlichen Browser-Standardeinstellungen Rechnung zu tragen. */
            padding: 0;
            text-align: center; /* Hierdurch wird der Container in IE 5*-Browsern zentriert. Dem Text wird dann im #container-Selektor die Standardausrichtung left (links) zugewiesen. */
            color: #000000;
    }

    /* Tipps fŸr elastische Layouts:
    1. Da die Gesamtgrš§e elastischer Layouts von der Standardschriftgrš§e des Benutzers abhŠngt, sind diese Layouts weniger berechenbar. Bei korrekter Verwendung haben sie au§erdem fŸr Personen, die grš§ere Schriften benštigen, einen hšheren Nutzwert, weil die ZeilenlŠnge proportional bleibt.
    2. Die Grš§e der divs in diesem Layout basiert auf der Originalschriftgrš§e (100%) im Body-Element. Wenn Sie die Textgrš§e durch eine Einstellung wie font-size: 80% im Body-Element oder im #container global verringern, wird das gesamte Layout proportional verkleinert. Sie sollten die Breiten der verschiedenen divs vergrš§ern, um hierfŸr einen Ausgleich zu schaffen.
    3. Wenn Sie in den einzelnen divs unterschiedliche Werte fŸr die Schriftgrš§e angegeben, anstatt die Schriftgrš§e im Design global zu Šndern (z. B. wenn #sidebar1 die Schriftgrš§e 70% zugewiesen wird und #mainContent die Grš§e 85%), so wird die Gesamtgrš§e der einzelnen divs proportional geŠndert. Sie sollten anhand der endgŸltig gewŠhlten Schriftgrš§e entsprechende Anpassungen vornehmen.
    */
    .thrColElsHdr #container {
            width: 800px;  /* Mit dieser Breite wird ein Container erstellt, der in ein 800 Pixel breites Browserfenster passt, sofern fŸr den Text die Standardschriftgrš§e des Browsers Ÿbernommen wird. */
            height: 600px;;
            margin: 0 auto; /* Durch automatische RŠnder (in Verbindung mit einer Breite) wird die Seite zentriert. */
            margin-top: 30px;
            border: none;
            text-align: left; /* Hierdurch wird die Einstellung text-align: center im Body-Element Ÿberschrieben. */
    }
    .thrColElsHdr #header {
            background-image: url(../Bilder/header.gif);
            background-repeat:no-repeat;
            height: 90px;
            margin: 0 0 0 0;
            padding: 0 20px;  /* Diese AuffŸllung entspricht der linksbŸndigen Ausrichtung der Elemente in den divs, die darunter erscheinen. Wenn im #header anstelle von Text ein Bild eingesetzt wird, sollten Sie die AuffŸllung entfernen. */
    }
    .thrColElsHdr #header h1 {
            margin: 0; /* Wenn Sie den Rand des letzten Elements im #header-div auf 0 einstellen, kšnnen Sie das Auftreten unerwarteter AbstŠnde zwischen divs vermeiden. Wenn das div einen Rahmen hat, ist dies unnštig, weil dieser Rahmen die gleiche Wirkung hat. */

            padding: 20px 0; /* Durch die Verwendung der AuffŸllung anstelle von RŠndern lŠsst sich gewŠhrleisten, dass das Element die Kanten des div nicht berŸhrt. */
    }


    /* Tipps fŸr mainContent:
    1. Wenn Sie diesem #mainContent-div nicht denselben Schriftgrš§enwert wie dem #sidebar1-div zuweisen, basieren die RŠnder des #mainContent div auf der Schriftgrš§e des #mainContent-div, und die Breite des #sidebar1-div basiert auf der Schriftgrš§e des #sidebar1-div. Sie sollten die Werte dieser divs anpassen.
    2. Der Abstand zwischen mainContent und sidebar1 entsteht durch den linken Rand des mainContent-div. Der Spaltenbereich bleibt unabhŠngig von der Inhaltsmenge des sidebar1-div immer gleich. Sie kšnnen diesen linken Rand entfernen, falls der Text des #mainContent-div den Bereich von #sidebar1 fŸllen soll, wenn der Inhalt in #sidebar1 endet.
    3. Zur Vermeidung von Float-Drops mŸssen Sie gegebenenfalls die ungefŠhre maximale Bild-/Elementgrš§e anhand eines Tests ermitteln, weil dieses Layout auf der vom Benutzer angegebenen Schriftgrš§e und den von Ihnen festgelegten Werten basiert. Wenn der Benutzer die Browser-Schriftgrš§e aber auf einen Wert eingestellt hat, der unter dem Normalwert liegt, steht im #mainContent-div weniger Platz zur VerfŸgung als beim Test erkennbar.
    4. Im unten stehenden bedingten Kommentar fŸr Internet Explorer wird die Zoom-Eigenschaft verwendet, um mainContent die Eigenschaft hasLayout zuzuweisen. Dadurch wird das potenzielle Auftreten verschiedener IE-spezifischer Fehler verhindert.
    */
    .thrColElsHdr #mainContent {
             margin: 0; /* Der rechte Rand kann in Gevierten (ems) oder Pixel angegeben werden. Durch ihn entsteht der Abstand am rechten Seitenrand. */
             background-image: url(../Bilder/body.gif);
             height: 520px;
             padding: 20px;
    }
    .thrColElsHdr #footer {
            padding: 20px;/* Diese AuffŸllung entspricht der linksbŸndigen Ausrichtung der Elemente in den divs, die darunter erscheinen. */
            background-image: url(../Bilder/footer.gif);
            margin: 0;
            height: 40px;
            background-repeat:no-repeat;

    }
    .thrColElsHdr #footer p {
            margin: 0; /* Wenn Sie die RŠnder des ersten Elements in der Fu§zeile auf 0 einstellen, kšnnen Sie unerwartete AbstŠnde zwischen divs vermeiden. */
            padding: 0; /* Durch die Verwendung der AuffŸllung bei diesem Element entsteht genau wie bei einem Rand ein Leerraum, aber ohne die potenziellen Abstandsprobleme. */
    }

    /* Verschiedene wieder verwertbare Klassen */
    .fltrt { /* Mit dieser Klasse kšnnen Sie ein Element auf der Seite nach rechts flie§en lassen. Das floatende Element muss vor dem Element stehen, neben dem es auf der Seite erscheinen soll. */
            float: none;
            margin-left: 0;
    }
    .fltlft { /* Mit dieser Klasse kšnnen Sie ein Element auf der Seite nach links flie§en lassen. */
            float: none;
            margin-right: 0;
    }
    .clearfloat { /* Diese Klasse sollte in einem div- oder break-Element platziert werden und das letzte Element vor dem Schlie§en eines Containers sein, der wiederum einen vollstŠndigen Float enthalten sollte. */
            clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
    -->


/*

SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

 LAYOUT INFORMATION: describes box model, positioning, z-order

 *******************************************************************************/

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 1pt;
        cursor: default;
        width: 800px;
        background-color: transparent;


}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
        z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
        margin: 0 15px  0 0;
        padding: 0;
        list-style-type: none;
        font-size: none;
        position: relative;
        text-align: left;
        cursor: pointer;
        width: auto;
        float: left;
        border: none;
        background: none;

}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
        margin: 0;
        padding: 0;
        list-style-type: none;
        font-size: 1px;
        z-index: 1020;
        cursor: default;
        width: 8.2em;
        position: absolute;
        left: -2000em;
        background:none;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
        left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
        width: 8.2em;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
        position: absolute;
        margin: -5% 0 0 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
        left: auto;
        top: 0;
}

/*******************************************************************************

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
        border: none solid #CCC;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
        display: block;
        cursor: pointer;
        padding: 0;
        color: #333;
        text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
        color: #FFF;
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
        color: #FFF;
}

/*******************************************************************************

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

 *******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
        background-image: url(SpryMenuBarDown.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
        background-image: url(SpryMenuBarRight.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
        background-image: url(SpryMenuBarDownHover.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
        background-image: url(SpryMenuBarRightHover.gif);
        background-repeat: no-repeat;
        background-position: 95% 50%;
}

/*******************************************************************************

 BROWSER HACKS: the hacks below should not be changed unless you are an expert

 *******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
        position: absolute;
        z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
        ul.MenuBarHorizontal li.MenuBarItemIE
        {
                display: inline;
                f\loat: left;
        }
}