BODY {
    background-color: #010101;
    color: #dee4cc;
    text-align: center;
    font-family: 'Trebuchet MS', 'Helvetica', sans-serif;
}

#topNav {
    position: relative;
    top: 68px;
    background-image: url('../images/top-nav.png');
    background-position: top left;
    background-repeat: no-repeat;
    height: 12px;
    z-index: 10;
    margin: 0 88px 0 104px;
}

BODY#en #topNav {
    background-image: url('../images/top-nav-en.png');
}

#containerOuter {
    position: absolute;
    background-image: url('../images/bg.png');
    background-position: center center;
    background-repeat: no-repeat;     
    width: 822px;
    height: 597px;
    visibility: hidden;
}

#containerInner {
    position: relative;
    background-image: url('../images/content-bg.png');
    background-position: center center;
    background-repeat: no-repeat;
    height: 100%;
}
.contact-en, .contact-de {
    background-image: url('../images/content-contact-bg.png') !important;
}

#content {
    position: relative;
    padding: 89px;
    height: 419px;
}

#slideshow {
    padding-top: 39px;
    height: 315px;
    width: 644px;
}

#slideshow IMG {
    position: absolute;
    top: 128px;
    left: 89px;
    visibility: hidden;
}

#galleryPopup, #videoPopup {
    position: absolute;
    visibility: hidden;
    width: 644px;
    height: 317px;
    background-color: transparent;
    padding: 0;
    border: 0 none;
}

#galleryPopup IMG {
    width: 644px;
    height: 315px;    
    cursor: pointer;
}

#references {
    position: absolute;
    top: 154px;
}

#references IMG {
    position: relative;
    float: left;
    top: 38px;
    display: block;
    margin-top: 6px;
    padding: 0 6px;
    text-decoration: none;
    border: 0 none;
    cursor: pointer;
}

#bottomNav {
    position: relative;
    top: -91px;
    z-index: 10;
    height: 9px;
    margin: 0 0 0 169px;
}

#bottomNav A {
    display: block;
    float: left;
    color: transparent; /*CSS3*/
    line-height: 0; height: 9px; text-decoration: none;/*helping IE*/
}

BODY#de #bottomNav A {
    margin-right: 26px;
}

BODY#en #bottomNav A {
    margin-right: 36px;
}

/* nav items */
BODY#de A.langSelector {
    display: block;
    width: 56px;
    margin: 3px 14px 0 0;
    float: right;
    color: transparent;/*CSS3*/
    line-height: 0; height: 9px; text-decoration: none;/*helping IE*/
    background-image: url('../images/buttons/english.png');
}
BODY#de A:hover.langSelector {
    background-image: url('../images/buttons/english-hi.png');
}

BODY#en A.langSelector {
    display: block;
    width: 60px;
    margin: 3px 14px 0 0;
    float: right;
    color: transparent;/*CSS3*/
    line-height: 0; height: 9px; text-decoration: none;/*helping IE*/
    background-image: url('../images/buttons/deutsch.png');
}
BODY#en A:hover.langSelector {
    background-image: url('../images/buttons/deutsch-hi.png');
}

BODY#de A.home,
BODY#en A.home
    { background-image: url('../images/buttons/home.png'); width: 40px; }
BODY#de A:hover.home, BODY#de A.home.current,
BODY#en A:hover.home, BODY#en A.home.current
    { background-image: url('../images/buttons/home-hi.png'); }
BODY#de A.bio,
BODY#en A.bio
    { background-image: url('../images/buttons/bio.png'); width: 24px; }
BODY#de A:hover.bio, BODY#de A.bio.current,
BODY#en A:hover.bio, BODY#en A.bio.current
    { background-image: url('../images/buttons/bio-hi.png'); }

BODY#de A.fotos
    { background-image: url('../images/buttons/fotos.png'); width: 45px; }
BODY#de A:hover.fotos, BODY#de A.fotos.current
    { background-image: url('../images/buttons/fotos-hi.png'); }
BODY#en A.fotos
    { background-image: url('../images/buttons/photos.png'); width: 57px; }
BODY#en A:hover.fotos, BODY#en A.fotos.current
    { background-image: url('../images/buttons/photos-hi.png'); }

BODY#de A.references
    { background-image: url('../images/buttons/referenzen.png'); width: 89px; }
BODY#en A.references
    { background-image: url('../images/buttons/networks.png'); width: 78px; }
BODY#de A:hover.references, BODY#de A.references.current
    { background-image: url('../images/buttons/referenzen-hi.png'); }
BODY#en A:hover.references, BODY#en A.references.current
    { background-image: url('../images/buttons/networks-hi.png'); }
BODY#de A.contact
    { background-image: url('../images/buttons/kontakt.png'); width: 67px; }
BODY#en A.contact
    { background-image: url('../images/buttons/contact.png'); width: 66px; }
BODY#de A:hover.contact, BODY#de A.contact.current
    { background-image: url('../images/buttons/kontakt-hi.png'); }
BODY#en A:hover.contact, BODY#en A.contact.current
    { background-image: url('../images/buttons/contact-hi.png'); }
BODY#de A.imprint
    { background-image: url('../images/buttons/impressum.png'); width: 83px; }
BODY#de A:hover.imprint, BODY#de A.imprint.current
    { background-image: url('../images/buttons/impressum-hi.png'); }
BODY#en A.imprint
    { background-image: url('../images/buttons/imprint.png'); width: 60px; }
BODY#en A:hover.imprint, BODY#en A.imprint.current
    { background-image: url('../images/buttons/imprint-hi.png'); }

BODY#de A.schliessen
    { background-image: url('../images/buttons/schliessen.png'); color: transparent;/*CSS3*/ line-height: 0; height: 9px; text-decoration: none;/*helping IE*/ display: block; float: left; margin: 22px 0 0 281px; }
BODY#de A:hover.schliessen
    { background-image: url('../images/buttons/schliessen-hi.png'); }
BODY#en A.schliessen
    { background-image: url('../images/buttons/close.png'); background-repeat: no-repeat; color: transparent;/*CSS3*/ line-height: 0; height: 9px; text-decoration: none;/*helping IE*/ display: block; float: left; margin: 22px 0 0 281px; }
BODY#en A:hover.schliessen
    { background-image: url('../images/buttons/close-hi.png'); }
/* textual content */
#text {
    text-align: justify;
    margin-top: 50px;
    margin-left: 197px;
    margin-right: 98px;
    height: 288px;
    overflow: hidden;
}

#text H1, #text H2 {
    color: #b9bfa5;
    margin-bottom: 20px;
    letter-spacing: .1em;
}

#text H2 {
    font-weight: normal !important;
    font-size: 82%;
}

#text A {
    text-decoration: none;
    color: inherit;
}
#text A:hover {
    color: #9dc02b;
}

#text P {
    padding-bottom: 15px;
    font-weight: normal;
    font-size: 82%; /* .8em Verdana on XP: .813em is where font-aliasing kicks in, on OSX its 12pt */
    line-height: 1.48em;
    letter-spacing: .1em;
    word-spacing: .13em;
}

#text A {
    font-size: 100%;
}

#text P.small {
    padding-bottom: 5px;
}

#legend {
    text-align: left;
    padding-top: 290px;
    font-weight: normal;
    font-size: .8em;
    letter-spacing: .1em;
    line-height: 1.48em;
}
#legend P {
    position: relative;
    visibility: hidden;
    width: 149px;
    float: left;
    padding: 0 6px;
}
.legend {
    font-weight: normal;
    font-size: .82em !important;
    letter-spacing: .1em;
    line-height: 1.48em;
}
.white {
    color: #fff;
}
.grey {
    color: #acacac;
}

#gallery1, #gallery2 {
    position: absolute;
    top: 154px;
}

#gallery1 IMG, #gallery2 IMG {
    position: relative;
    float: left;
    top: 38px;
    display: block;
    margin-top: 6px;
    padding: 0 6px;
    text-decoration: none;
    border: 0 none;
    cursor: pointer;
}

#gallery1 .legend, #gallery2 .legend {
    text-align: left;
    padding-top: 202px;
    font-weight: normal;
    font-size: .8em;
    letter-spacing: .1em;
    line-height: 1.48em;
}

#gallery1 .legend P, #gallery2 .legend P {
    position: relative;
    width: 150px;
    float: left;
    padding: 0 6px 0 6px;
}

.greyish {
    color: #919681;
}

.highlight {
    color: #919681 !important;/* font-weight: bold; */
}
A:hover.highlight {
    color: #9dc02b !important;
}

#buttonUp, #buttonDown {
    position: absolute;
    width: 19px;
    height: 17px;
    left: 670px;
    cursor: pointer;
}
#buttonUp {
    top: 360px;
    background-image: url('../images/buttons/up.png');
}
#buttonUp:hover {
    background-image: url('../images/buttons/up-hi.png');
}
#buttonDown {
    top: 386px;
    background-image: url('../images/buttons/down.png');
}
#buttonDown:hover {
    background-image: url('../images/buttons/down-hi.png');
}

#buttonRight, #buttonLeft {
    position: absolute;
    width: 17px;
    height: 19px;
    cursor: pointer;
}
#buttonRight {
    left: 622px;
    background-image: url('../images/buttons/right.png');
}
#buttonRight:hover {
    background-image: url('../images/buttons/right-hi.png');
}
#buttonLeft {
    left: 6px;
    background-image: url('../images/buttons/left.png');
}
#buttonLeft:hover {
    background-image: url('../images/buttons/left-hi.png');
}