/************************************************
*   Datei: style.css                            *
*   Datum: 21.02.2010                           *
*   Autor: Alexander Kapic                      *
*   Zweck: Stylesheet für FFW Loburg Homepage   *
*   -----------------------------------------   *
*   Inhalt:                                     *
*                                               *
*   1. Allgemeine Formatierungen                *
*   2. Hintergrund                              *
*   3. Logo                                     *
*   4. Content + Navigation                     *
*   5. Fussbereich                              *
*   6. Schatten                                 *
*   7. Spezielle Formatierungen                 *
************************************************/

/* ==============================================
    1. Allgemeine Formatierungen
===============================================*/

/*** Alle Abstände zurücksetzen ***/
* {
    padding: 0;
    margin: 0;
}

/*** Überschriftgrößen festlegen ***/
H1 { font-size: 150%; }
H2 { font-size: 130%; }
H3 { font-size: 110%; }

/* ==============================================
    2. Hintergrund
===============================================*/

HTML {
    font-family: Arial, Verdana;
    font-size: 14px;
}

BODY {
    background: #6A6A6A url(../img/background.png) repeat-x 0 0;
}

#Wrapper {
    width: 820px;
    margin: 0 auto;
}

/* ==============================================
    3. Logo
===============================================*/

#LogoWrapper {
    position: relative;
    height: 183px;
}

#LogoWrapper .shadow-left {
    background: url(../img/shadow.side.png) no-repeat 0px 0px;
}

#LogoWrapper .shadow-right {
    background: url(../img/shadow.side.png) no-repeat -10px 0px;
}

#LogoContent {
    position: absolute;
    top: 0;
    left: 10px;
    width: 800px;
    height: 100%;
    background: #FFFFFF url(../img/logo.png) no-repeat top center;
}

/* ==============================================
    4. Content + Navigation
===============================================*/

#ContentWrapper {
    position: relative;
    background: #FFFFFF url(../img/shadow.content.png) repeat-x 0px 0px;
    padding-top: 8px;
    overflow: hidden;
}

#ContentWrapper B.shadow-left {
    background: url(../img/shadow.side.png) no-repeat 0px -183px;
}

#ContentWrapper B.shadow-right {
    background: url(../img/shadow.side.png) no-repeat -10px -183px;
}

/*** Navigation ***/
#Navigation {
    position: relative;
    width: 170px;
    height: 100%;
    _background-color: #d30101;
    float: left;
    margin-left: 10px;
}

#Navigation UL {
    width: 170px;
    height: 100%;
    background-color: #FFFFFF;
    padding-top: 10px;
}

#Navigation UL LI {
    width: 120px;
    list-style-type: none;
    padding: 2px 10px;
}

#Navigation UL LI UL {
    width: 140px;
    padding-top: 0;
}

#Navigation UL LI UL LI {
    padding-left: 15px;
}

#Navigation A:link,
#Navigation A:visited {
    color: #000000;
    text-decoration: none;
    font-weight: bold;
    font-size: 14px;
}

#Navigation A:hover {
    color: #ff5555;
}

#Navigation A.active {
    color: #BB0000;
}

#Navigation A.inactive {
    color: #000000;
}

#Content {
    position: relative;
    width: 609px;
    min-height: 450px;
    background-color: #FFFFFF;
    border-left: 1px solid #d30101;
    padding: 10px;
    float: left;
}

#Content .foto {
    padding: 2px;
    border: 1px outset #CCCCCC;
}
#Content A:link,
#Content A:visited {
    color: #000000;
    text-decoration: underline;
}

#Content A:hover,
#Content A:focus {
    color: #ff5555;
    text-decoration: underline;
}

/* ==============================================
    5. Fussbereich
===============================================*/

#FooterWrapper {
    position: relative;
    height: 110px;
    margin-bottom: 20px;
}

#FooterWrapper .shadow-left,
#FooterWrapper .shadow-right {
    height: 90px;
}

#FooterContent {
    position: absolute;
    top: 0;
    left: 10px;
    width: 800px;
    height: 100%;
    background: #FFFFFF url(../img/footer.png) repeat-x 0px 0px;
}

#FooterContent ADDRESS {
    color: #FFFFFF;
    font-style: normal;
    font-size: 12px;
    margin: 7px 0 0 7px;
}

#FooterContent A:link,
#FooterContent A:visited {
    color: #FFFFFF;
    text-decoration: none;
}

#FooterContent A:hover,
#FooterContent A:focus {
    text-decoration: underline;
}

#FooterContent SPAN {
    position: absolute;
    top: 7px;
    right: 7px;
    font-size: 12px;
}

#FooterContent P {
    position: absolute;
    bottom: 45px;
    right: 3px;
    font-size: 26px;
    font-weight: bold;
    color: #FFFFFF;
}

#FooterContent P B {
    margin-left: 10px;
    letter-spacing: 5px;
}

/* ==============================================
    6. Schatten
===============================================*/
.shadow-left,
.shadow-right,
.shadow-bottom,
.shadow-left-bottom-before,
.shadow-left-bottom,
.shadow-bottom-left-before,
.shadow-bottom-right-before,
.shadow-right-bottom,
.shadow-right-bottom-before {
    position: absolute;
    display: block;
}

.shadow-left-bottom-before,
.shadow-left-bottom,
.shadow-bottom-left-before,
.shadow-bottom-right-before,
.shadow-right-bottom,
.shadow-right-bottom-before {
    width: 10px;
    height: 10px;
}

.shadow-left,
.shadow-right {
    top: 0;
    width: 10px;
    height: 100%;
}

.shadow-left {
    left: 0;
    background: url(../img/shadow.corner.png) repeat-y 0px 0px;
}

.shadow-right {
    right: 0;
    background: url(../img/shadow.corner.png) repeat-y -30px 0px;
}

.shadow-bottom {
    left: 20px;
    bottom: 0;
    width: 780px;
    height: 10px;
    background: #FFFFFF url(../img/shadow.bottom.png) repeat-x 0px -10px;
}

.shadow-left-bottom-before {
    bottom: 10px;
    left: 0;
    background: url(../img/shadow.corner.png) no-repeat -10px 0px;
}

.shadow-left-bottom {
    left: 0;
    bottom: 0;
    background: url(../img/shadow.corner.png) no-repeat -20px 0px;
}

.shadow-bottom-left-before {
    left: 10px;
    bottom: 0;
    background: url(../img/shadow.bottom.png) no-repeat 0px 0px;
}

.shadow-right-bottom-before {
    bottom: 10px;
    right: 0;
    background: url(../img/shadow.corner.png) no-repeat -40px 0px;
}

.shadow-right-bottom {
    right: 0;
    bottom: 0;
    background: url(../img/shadow.corner.png) no-repeat -50px 0px;
}

.shadow-bottom-right-before {
    right: 10px;
    bottom: 0;
    background: url(../img/shadow.bottom.png) no-repeat 0px -20px;
}

/* ==============================================
    7. Spezielle Formatierungen
===============================================*/
.navi-border-top,
.navi-border-bottom {
    position: absolute;
    display: block;
    left: -1px;
    width: 1px;
    height: 70px;
}

.navi-border-top {
    top: 0;
    background: url(../img/fill.png) no-repeat 0px -8px;
}

.navi-border-bottom {
    bottom: 0;
    background: #FFFFFF url(../img/fill.png) no-repeat 0px -78px;

}

.hide {
    display: none;
}

.show {
    display: block;
}