/*  =========================================================
RUCK ZUCK Mobile Fahrzeugpflege
Datei        : style_ruckzuck.css
Media        : Screen
Datum        : 27. Februar 2009
Autor        : Marianne Wege
CSS-Datei-Struktur:
1.    Body und Container
    a.    Allgemeine Formatierungen (Groesse, Abstaende)
    b.    Absatz- und Headlineformatierungen
    c.    Dokumentuebergreifende Bildformatierungen
    d.    Dokumentuebergreifende Linkformatierungen
2. Header
    a.    Allgemeine Formatierungen (Groesse, Abstaende)
    b.    Absatz- und Headlineformatierungen
    c.    Linkformatierungen
    d.    Bilder
    e.    Headernavigation
                            
3.    Contentbox
    a.    Allgemeine Formatierungen (Groesse, Abstaende)
    3.1    Linker Contentbereich
        a.    Allgemeine Formatierungen (Groesse, Abstaende)
        b. Absatz- und Headlineformatierungen
        c. Linkformatierungen
        d.    Bilder
        e. Listen
        f.    Formulare
    
    3.2    Zentraler Contentbereich
        a.    Allgemeine Formatierungen (Groesse, Abstaende)
        b. Absatz- und Headlineformatierungen
        c. Linkformatierungen
        d. Tabellen
        e.    Listen
        f.    Bilder
        g.    Formulare
    
    3.3    Rechter Contentbereich
        a.    Allgemeine Formatierungen (Groesse, Abstaende)
        b. Absatz- und Headlineformatierungen
        c. Linkformatierungen / Navigation
        d. Tabellen
        e.    Bilder
        f.    Listen
        g.    Formulare
4. Leerer Container
    a.    Allgemeine Formatierungen (Groesse, Abstaende)
    b.    
5. Footer
    a.    Allgemeine Formatierungen (Groesse, Abstaende)
    b.    Absatz- und Headlineformatierungen
    c.    Linkformatierungen
    d.    Bilder
    e.    Formularelemente    
    
========================================================== */
/* =======================================================
    1.    Body und Container
    a.    Allgemeine Formatierungen (Groesse, Abstaende)
========================================================== */
BODY {
    min-width: 1200px;
    height: 100%;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;    
    background: #fff;
}
/* Container umfasst Header und den gesamten Contentbereich
    Diese Gruppierung ist hilfreich, wenn die gesamte Website z.B. zentriert werden soll. */
#container {
    min-width: 1200px;     
    height: auto;
    text-align: left;
    overflow: hidden;    /* im Zusammenhang mit rightBox padding- und margin-right bis zur Fenstergrenze */
}
/* =======================================================
    1.    Body und Container
    b.    Absatz- und Headlineformatierungen
========================================================== */
/* Festlegung der allgemeinen Schriftart, -farbe und -groesse, auf welche#
    sich alle weiteren Formatierungen beziehen */
BODY {
    font-family: "Arial", "Verdana", "Trebuchet MS", sans-serif;
    color: #7d695a;
    font-size: 0.8em;
}
/* allgemeine Abstaende innerhalb und nach einem Absatz 
    muss ggf. fuer den ein oder anderen Contaier angepasst werden */
p {
    margin: 0px 0px 25px 0px;
    padding: 0px 0px 0px 0px;
    line-height: 2.0em;
}
/* allgemeine Formatierung der Ueberschriftenkategorie 1 */
h1 {    
    font-size: 1.1em;
    color: #e2001a;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 25px 0px;
    line-height: 1.5em;
}
/* allgemeine Abstaende innerhalb und nach einer h2-Ueberschrift 
    muss ggf. fuer den ein oder anderen Contaier angepasst werden */
h2 {
    font-size: 1.0em;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 5px 0px;
}
/* =======================================================
    1.    Body und Container
    c.    Dokumentuebergreifende Bildformatierungen
========================================================== */
/* dokumentuebergreifendes Format fuer Bilder */
img {
    border-style: none;
    border-width: 0px;
}
/* =======================================================
    1.    Body und Container
    d.    Dokumentuebergreifende Linkformatierungen
========================================================== */
/* normale Links im Content */
a:link, a:visited {
    color: #e2001a;
    text-decoration: underline;
    font-weight: bold;
    outline: none;
}
/* Links bei Mausberuehrung */
a:hover, a:focus {
    color: #7d695a;
    text-decoration: none;
}
/* =======================================================
    2.    Header
    a.    Allgemeine Formatierungen (Groesse, Abstaende)
========================================================== */
/* Container fuer alle Headerdaten (Bilder, Hintergrund, Servicenavigation) */
#headerBox {
    width: auto;
    margin: 0px 0px 0px 0px;
    height: 157px;
    background: url(/gfx/head_bg.png) repeat-x;
}
/* =======================================================
    2.    Header
    b.    Absatz- und Headlineformatierungen
========================================================== */
/* =======================================================
    2.    Header
    c.    Linkformatierungen
========================================================== */
/* =======================================================
    2.    Header
    d.    Bilder
========================================================== */
/* spezielle float-Formatierung fuer die 3 Bilder im Header */
#headerBox img {
    float: left;
}
/* die beiden aeusseren Grafiken erhalten links und rechts weisse Rahmen */
.headGfxOut {
    border-left: 3px solid #fff;
    border-right: 3px solid #fff;
}
/* =======================================================
    2.    Header
    e.    Headernavigation
========================================================== */
/* separater Container fuer die Servicenavigation im Header */
#headerNav {
    width: 200px;
    padding: 110px 0px 0px 65px;
    margin: 0px 22px 0px 0px;
    font-size: 0.8em;
    color: #fff;
    float: left;
}
/* Formatierung der Links in der Servicenavigation */
#headerNav a:link, #headerNav a:visited {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    padding-right: 2px;
}
/* Links der Servicenavigation bei Mausberuehrung */
#headerNav a:hover, #headerNav a:focus {
    color: #e3001a;
}
/* =======================================================
    3.    Contentbox
    a.    Allgemeine Formatierungen (Groesse, Abstaende)
========================================================== */
/* dieser Container umfasst den linken, mittigen und rechten Contentcontainer */
#contentBox {
    width: 100%;
    height: 100%;
}
/* =======================================================
    3.    Contentbox
        3.1    Linker Contentbereich (soll vorzugsweise der Navigation dienen)
            a.    Allgemeine Formatierungen (Groesse, Abstaende)
========================================================== */
/* linke Contentbox */
#leftBox {
    /* Breite des linken Spalteninhalts (ohne Abstaende) */
    width: 180px;
    height: 200px;
    float: left;
    /*margin: 35px 45px 0px 65px;*/    /* "normaler" Abstand zum Header */
    margin: 125px 45px 0px 65px;         /* plus zusaetzlicher Abstand fuer Werbebloecke */
    padding: 0px 0px 10px 0px;
    background: #fff;
    font-size: 0.85em;
}
/* allgemeine Foramtierungen fuer einen Werbeblock */
.addBlock {
    background-color: #faf5ee;
    border: 1px solid #cebca5;
    padding: 0px 0px 12px 0px;
    margin: 0px 0px 10px 0px;
}
/* =======================================================
    3.    Contentbox
        3.1    Linker Contentbereich
            b.    Absatz- und Headlineformatierungen
========================================================== */
/* gesonderte Abstaende fuer Absaetze und Headlines innerhalb eines Werbeblocks */
.addBlock p, .addBlock h2 {
    line-height: 1.5em;
    padding: 0px 10px 0px 12px;
    margin: 0px 0px 0px 0px;
}
/* =======================================================
    3.    Contentbox
        3.1    Linker Contentbereich
            c.    Linkformatierungen
========================================================== */
/* =======================================================
    3.    Contentbox
        3.1    Linker Contentbereich
            d.    Bilder
========================================================== */
/* Formatierung eines Bildes innerhalb eines Werbeblocks */
.addBlock img {
     height: 64px; 
     width: 178px;
     margin-bottom: 12px;
}
/* =======================================================
    3.    Contentbox
        3.1    Linker Contentbereich
            f.    Listen
========================================================== */
/* =======================================================
    3.    Contentbox
        3.1    Linker Contentbereich
            (e.    Formulare)
========================================================== */
/* =======================================================
    3.    Contentbox
        3.2    Zentraler Contentbereich
            a.    Allgemeine Formatierungen (Groesse, Abstaende)
========================================================== */
/* mittiger Container */
#centerBox {
    width: 520px;
    height: auto;
    float: left;
    margin: 35px 70px 0px 0px;
}
/* separater Container fuer die Breadcrumbnavigation */
#breadcrumbs {
    height: 35px;
    color: #cebca5;
    margin-bottom: 50px;
    font-size: 0.8em;
}
/* separater Container fuer die Breadcrumbnavigation */
#sitemap {
    height: 35px;
    color: #cebca5;
    margin-bottom: 50px;
    font-size: 0,8em;
}
/* =======================================================
    3.    Contentbox
        3.2    Zentraler Contentbereich
            b.    Absatz- und Headlineformatierungen
========================================================== */
/* =======================================================
    3.    Contentbox
        3.2    Zentraler Contentbereich
            c.    Linkformatierungen
========================================================== */
/* Formatierung der Links innerhalb der Breadcrumbnavigation */
#breadcrumbs a:link, #breadcrumbs a:visited {
    color: #e2001a;
    text-decoration: none;
    text-transform: uppercase;
    padding-right: 2px;
}
/* Breadcrumblinks bei Mausberuehrung */
#breadcrumbs a:hover, #breadcrumbs a:focus {
    color: #7d695a;
}
#sitemap a:link, #breadcrumbs a:visited {
    color: #e2001a;
    text-decoration: none;
    text-transform: uppercase;
    padding-right: 2px;
}
/* Breadcrumblinks bei Mausberuehrung */
#sitemap a:hover, #breadcrumbs a:focus {
    color: #7d695a;
}
/* =======================================================
    3.    Contentbox
        3.2    Zentraler Contentbereich
            d.    Tabellen
========================================================== */
/* =======================================================
    3.    Contentbox
        3.2    Zentraler Contentbereich
            e.    Listen
========================================================== */
/* =======================================================
    3.    Contentbox
        3.2    Zentraler Contentbereich
            f.    Bilder
========================================================== */
.floatImg {
    float: left;
    width: 200px;
    height: auto;
    margin: 0px 20px 0px 0px;
    border: 1px solid #cebca5;
}

/* =======================================================
    3.    Contentbox
        3.2    Zentraler Contentbereich
            g.    Formulare
========================================================== */
/* =======================================================
    3.    Contentbox
        3.3    Rechter Contentbereich
            a.    Allgemeine Formatierungen (Groesse, Abstaende)
========================================================== */
/* rechte Inhaltsbox */
#rightBox {
    width: auto;
    height: 700px;
    float: left;
    padding: 45px 0px 0px 20px;
    margin: -10px 0px 0px 0px;
    background: url(/gfx/right_bg.png) repeat-x;
    background-color: #e6dfd6;
    border-left: 3px solid #e2001a;
    padding-right: 20010px;
    margin-right: -20000px;
    padding-bottom: 20010px;
    margin-bottom: -20000px;
}
/* =======================================================
    3.    Contentbox
        3.3    Rechter Contentbereich
            b.    Absatz- und Headlineformatierungen
========================================================== */
/* =======================================================
    3.    Contentbox
        3.3    Rechter Contentbereich
            c.    Linkformatierungen / Navigation
========================================================== */
/* Container mit Hauptnavigation */
#navContainer {
    font-size: 0.85em;
    text-transform: uppercase;
    font-weight: bold;
    margin: 35px 0px 0px 5px;
}
/* ID fuer den jeweils aktiven Menuepunkt - egal, ob 1. oder 2. Ebene */
#navActive {
    background: url(/gfx/navi_active.png) no-repeat;
}
/* Formatierung der Menuepunkte erster Ebene */
a.navFirst:link, a.navFirst:visited {
    color: #fff;
    text-decoration: none;
    display: block;
    width: 199px;
    height: 28px;
    margin: 0px 0px -5px 0px;
    padding: 5px 0px 0px 45px;
    background: url(/gfx/navi_first.png) no-repeat;
}
/* Menuepunkt erste Ebene bei Mausberuehrung */
a.navFirst:hover, a.navFirst:focus {
    background: url(/gfx/navi_active.png) no-repeat;
}
/* Formateirung der Menuepunkte zweiter Ebene */
a.navSecond:link, a.navSecond:visited {
    color: #fff;
    text-decoration: none;
    display: block;
    width: 199px;
    height: 28px;
    margin: 0px 0px -5px 0px;
    padding: 5px 0px 0px 45px;
    background: url(/gfx/navi_second.png) no-repeat;
}
/* Menuepunkte zweiter Ebene bei Mausberuehrung */
a.navSecond:hover, a.navSecond:focus {
    background: url(/gfx/navi_active.png) no-repeat;
}
/* Abschlussschatten unter der Menueleiste */
.naviShadow {
    height: 26px;
    width: 199px;
    margin-top: 0px; 
}
/* =======================================================
    3.    Contentbox
        3.3    Rechter Contentbereich
            (d.    Tabellen)
========================================================== */
.prod_tab th, .prod_tab td {
    padding: 7px;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}
/* Produktuebersichten: Tabellenkopf */
.prod_tab th {    
    text-transform: uppercase;
    background: url(/gfx/th_bg.png) repeat-x;
    color: #fff;    
    vertical-align: middle;
    padding: 3px 7px 3px 7px;
    height: 26px;
}
/* Produktuebersichten: Tabellenzelle */
.prod_tab td {
    vertical-align: top;
    line-height: 1.4em;
    background-color: #fdfdfd;
}
.prod_tab td.second {
    background-color: #f0ede8;
}
.special {
    font-weight: bold;
    letter-spacing: 0.05em;
}
td.prices {
    text-align: center;
    font-weight: bold;
    font-size: 1.3em;
    vertical-align: middle;
}
/* =======================================================
    3.    Contentbox
        3.3    Rechter Contentbereich
            e.    Bilder
========================================================== */
/* =======================================================
    3.    Contentbox
        3.3    Rechter Contentbereich
            f.    Listen
========================================================== */
/* =======================================================
    3.    Contentbox
        3.3    Rechter Contentbereich
            (g.    Formulare)
========================================================== */
/* =======================================================
    4.    Leerer Container
    a.    Allgemeine Formatierungen (Groesse, Abstaende)
========================================================== */
/* =======================================================
    5.    Footer
    a.    Allgemeine Formatierungen (Groesse, Abstaende)
========================================================== */
/* =======================================================
    5.    Footer
    b.    Absatz- und Headlineformatierungen
========================================================== */
/* =======================================================
    5.    Footer
    c.    Linkformatierungen
========================================================== */
/* =======================================================
    5.    Footer
    d.    Bilder
========================================================== */
/* =======================================================
    5.    Footer
    e.    Formularelemente
========================================================== */