* {
    margin: 0;
    padding: 0;
}

body, html {
    height: 100%;
}

body {
    font-family: Arial, Tahoma, Helvetica, Verdana;
    font-size: 11px;
    color: #5a5a5a;
    line-height: 18px;
    background-color: #ffffff;
}

#container {
    width: 100%;
    overflow: visible;
    position: absolute;
    bottom: 25px;
}


#icontainer {
    width: 100%;
} /* for explorer only*/



#page {
    position: relative; /* for ie */
    /*top: -50%; /* for ie */
    width: 100%;
}

#header {
    position: relative;
    width: 1024px;
    height: 79px;
    margin: 0 auto;
}

a.homelink {
    outline: none !important;
    text-decoration: none !important;
}

h1.logo {
    width: 1024px;
    height: 79px;
    background: #ffffff url(images/makeup.png) no-repeat;
    text-indent: -3000px;
}

#body {
    width: 100%;
    background: #ffffff;
    height: 388px;
}

#pagebody {
    width: 1024px;
    margin: 0 auto;
    padding: 0;
    background: #ffffff;
    position: relative;
}

.lfloat {
    float: left;
}

.rfloat {
    float: right;
}

ul.mainmenu {
    display: block;
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 24px;
}

ul.mainmenu li {
    display: block;
    float: left;
    height: 25px;
}

ul.mainmenu li.ref {
    margin-left: 181px; 
}

ul.mainmenu li.about {
    margin-left: 118px; 
}

ul.mainmenu li.gallery {
    margin-left: 112px; 
}

ul.mainmenu li.contact {
    margin-left: 140px; 
}

ul.mainmenu li.imprint {
    margin-left: 120px; 
}


ul.mainmenu li a {
    display: block;
    font-size: 12px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    text-decoration: none !important;
    text-transform: uppercase;
    padding: 3px 0 0;
}

#menu_container {
    float: left;
    width: 162px;
    margin-bottom: 30px;
}

#image_container {
    float: right;
    width: 176px;
}

#image_container img {
    display: block;
    float: left;
    margin: 0px 7px 14px;
    width: 74px;
    height: 74px;
    background: #ebebeb;
}

.content {
    padding: 0px;
    overflow: auto;
    height: 328px;
    position: absolute;
    color: #ffffff;
    top: 0;
    padding: 30px;
    font-size: 11px;
    line-height: 13px;
}

.content.ref {
    background: url(images/bg_1.png) no-repeat;
    width: 667px;
    left: 0;
}

.content.about {
    background: url(images/bg_2.png) no-repeat;
    width: 414px;
    left: 320px;
}

.content.gallery {
    background: url(images/bg_3.png) no-repeat;
    padding: 25px 0 25px 10px !important;
    width: 420px;
    height: 338px;
    left: 418px;
}

.content.contact {
    background: url(images/bg_4.png) no-repeat;
    width: 202px;
    left: 643px;
}

.content.imprint {
    background: url(images/bg_5.png) no-repeat;
    width: 156px;
    right: 0px;
}

.cl {
    clear: both;
}

#content h1 {
    font-size: 11px;
    font-weight: bold;
    margin-bottom: 12px;
}

#content p {
    margin-bottom: 12px;
}


a, a:link, a:active, a:visited, a:hover {
    color: #5a5a5a;
}

#img_show {
    float: left;
    width: 336px;
    height: 336px;
}

.img_el {
    float: left;
}

.img_el a {
    display: block;
    border: solid 2px transparent;
    margin: 0 4px 4px 6px;
}

.img_el a:focus, .img_el a:active {
    border: solid 4px #ffffff;
    margin: -2px 2px 2px 4px;
}

.text_el {
    float: left;
    margin: 25px 0 0 15px;
}

.gallery_el {
    display: block;
    margin: 4px 0;
    padding-left: 530px;
}

#gallery_select {
    position: relative;
    margin: 0 auto;
    width: 1024px;
    max-height: 250px;
    overflow: hidden;
}

#gallery_select .text_el a {
    font-size: 12px;
    text-decoration: none !important;
    color: #92c0d5 !important;
}

#gallery_select .text_el a.active, #gallery_select .text_el a:active {
    color: #a11a46 !important;
}

#quotation {
    position: relative;
    margin: 0 auto;
    width: 1024px;
}

span.quote {
    display: block;
    margin: 0 0 0 372px;
    font-size: 24px;
    line-height: 36px;
    color: #a11a46;
}

span.author {
    display: block;
    margin: 15px 0 25px 380px;
    font-size: 14px;
    font-style: italic;
    color: #8790c2;
}


#lightbox{  position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 100%; text-align: left; }  
#imageData #caption{ font-size: 11px; font-weight: normal; line-height: 15px; }
#imageData #numberDisplay{ display: block; float: left; clear: left; padding-top: 1em; padding-bottom: 1em; }           
#imageData #bottomNavClose{ width: 80px; float: right; clear: right; margin-top: 10px; padding-bottom: 5px; outline: none medium; }
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }