/**************************************************************************/
   /* Scriptinfo:                                                            */
   /* ===========                                                            */
   /* Author: Julian Mollik                                                  */
   /* Email: jule@creative-coding.net                                        */
   /* Website: http://www.creative-coding.net/                               */
   /* Created: 02/2010                                                       */
   /*                                                                        */
   /* Copyright 2010 Julian Mollik &                                         */
   /* Illegal distribution prohibited                                        */
   /**************************************************************************/

body {
	background-color: #FFFFFF;
	font-family: "Trebuchet MS", "Gill Sans", Calibri, sans-serif;
	
/*  background-image: url('../graphic/background_debug.png');
	background-repeat: no-repeat;
*/
}

/* ---------- links ------------------------------------------------------------------------------------------------------------------- */

a, a:visited, a:active {
    color: #993300;
    text-decoration: none;
}

a:hover {
    color: #FF9900;
}

a.internal1, a.internal1:visited, a.internal1:active,
div.content-texts a:visited, div.content-texts a:active, 
h3 a, h3 a:visited, h3 a:active,
li.text a, li.text a:visited, li.text a:active {
    color: #6699CC;
}

a.external, a.external:visited, a.external:active {
    color: #99CC99;
}

a.external:hover {
    color: #FF9900;
}

a.internal1:hover,
div.content-texts a:hover,
li.text a:hover {
    color: #FF9900;
}

a.internal2, a.internal2:visited, a.internal2:active {
    color: #66CCFF;
}

a.internal2:hover {
    color: #FF9900;
}

a.video, a.video:visited, a.video:active,
a.audio, a.audio:visited, a.audio:active {
    color: #33CC00;
}

a.video:hover,
a.audio:hover {
    color: #FF9900;
}

/* ---------- headlines --------------------------------------------------------------------------------------------------------------- */

h1 {
    color: #FFCCFF;
    padding: 20px 0px 0px 15px;
    font-weight: bold;
    width: 190px;  /* 225px minus 25px padding-left */
    height: 88px; /* 160px minus 60px padding-top minus 12px padding of first navigation element */
    /*float: left;*/
}

h1#top a {
    color: #FFCCFF;
}

h2 {
    color: #993300;
    padding: 20px 0px 85px 0px; /* 61px minus 1px line-height correction */
    position: absolute;
    left: 205px;
    top: 0px;
    font-size: 0.9em;
    width: 800px;
    line-height: 1.2em;
}

h2.right,
h2.rightparamour,
h2.rightgaze {
    width: 525px;
    text-align: right;
}

h2.rightparamour {
    width: 640px;
}

h2.rightgaze {
    width: 640px;
}

h2.text {
    width: 680px;
}

h3 {
    font-size: 0.9em;
    margin: 0px 0px 12px 0px;
}

/* ---------- language switcher ------------------------------------------------------------------------------------------------------- */
div#languageswitcher {
    padding: 5px 5px 0px 0px;
    position: absolute;
    top: 0px;
    right: 0px;
    z-index: 2;
}

div#languageswitcher ul li {
	float: left;
	font-size: 0.9em;
}

div#languageswitcher ul li a {
    color: #000000;
    text-decoration: underline;
}

div#languageswitcher ul li a:hover {
    text-decoration: none;
}

/* ---------- splash screen ----------------------------------------------------------------------------------------------------------- */
h1.splash {
	width: 100%;
    font-size: 6.5em;
    padding: 350px 0px 35px 0px;
    text-align: center;
    float: none;
    font-weight: normal;
}

div.splash {
    text-align: center;
}

div.splash div {
    width: 750px;
    margin: auto;
}

div.splash div ul li {
    float: left;
    font-weight: bold;
    height: 30px;
    padding: 0px 20px 0px 20px;
    font-size: 1.05em;
}

div.splash div ul li.first {
    padding-left: 0px;  
}

div.splash div ul li.last {
    padding-right: 0px;  
}

div.splash div ul li a {
    color: #FFCC99;
    text-decoration: none;
}

div.splash div ul li a:hover {
    color: #FF9900; 
}

/* ---------- navigation -------------------------------------------------------------------------------------------------------------- */
ul#navigation {
    padding: 0px 0px 0px 15px;
    width: 175px;
}

ul#navigation li {
	padding: 12px 0px 12px 0px;
	font-size: 0.9em;
}

ul#navigation li a {
	color: #FFCC99;
    text-decoration: none;  
}

ul#navigation li a:hover,
ul#navigation li.active a,
div.menulevel2-more a {
    color: #FF9900;  
    color: #993300;  
}

div.menulevel2-more a:hover {
    color: #FF9900;
}

div.menulevel2 {
    padding: 12px 0px 0px 0px;
    position: absolute;
    font-size: 0.9em;
    left: 230px;
    top: 160px;
    height: 400px;
    width: 270px;
}

div.menulevel3 {
    padding: 0px 0px 0px 0px;
    position: absolute;
    font-size: 0.9em;
    left: 510px;
    top: 160px;
    width: 135px;
}

div.menulevel2-more {
    position: absolute;
    top: 550px;
    left: 230px;
    font-size: 0.9em;
    z-index: 2;
}

div.menulevel2 ul,
div.menulevel3 ul {
    
}

div.menulevel2 ul li,
div.menulevel3 ul li {
    padding: 0px 0px 5px 0px;
}

div.menulevel2 ul li a,
div.menulevel3 ul li a {
    color: #993300;
    text-decoration: none;
}

div.menulevel2 ul li a:hover,
div.menulevel3 ul li a:hover {
    color: #FF9900;
}

div.menulevel2 ul li a.active {
    color: #FF9900;
}

div.menulevel3 ul li a.active {
    color: #FF9900; 
}

div#menuconnect12 {
    position: absolute;
    background-color: #993300;
    margin: 0px 0px 0px 5px;
    height: 1px;
    top: -100px;
    left: -100px;
}

div#menuconnect23 {
    position: absolute;
    background-color: #993300;
    margin: 0px 0px 0px 5px;
    height: 1px;
    top: -100px;
    left: -100px;
}

span.preloadimage {
    display: none; 
}

div#navigation-teaserimage {
    width: 300px;
    height: 260px;
    position: absolute;
    top: 120px;
    left: 645px;
    overflow: hidden;
}

/* -------------- content ------------------------------------------------------------------------------------------------------------- */
div#content {
    position: absolute;
    top: 50px;
    left: 205px;
    width: 800px;
    font-size: 0.9em;
    color: #993300;
    line-height: 1.4em;
    padding: 0px 0px 50px 0px;
}

div.content-cv {
    top: 120px !important;
    margin: -3px 0px 0px 0px;
}

div.content-contact,
div.content-imprint,
div.content-texts,
div.content-links {
    top: 117px !important;
}

div.content-imprint {
    width: 600px !important;
}

div.content-texts {
    width: 680px !important;
}

div#content p {
    margin: 0px 0px 15px 0px;
}

div#content p.first {
    margin: -3px 0px 15px 0px;
}

/* ----------- cv --------------------------------------------------------------------------------------------------------------------- */
dl.cv,
dl.cv2,
dl.cvpost {
    font-size: 0.8em;
    color: #993300;
    margin: 0px 0px 20px 0px;
}

dl.cv2 {
    margin-top: 10px;
}

dl.cvpost {
    margin-top: 30px;
}

dl.cv dt,
dl.cv2 dt,
dl.cvpost dt {
    width: 70px;
    float: left;
    /*margin: 0px 0px 5px 0px;*/
    margin: 0px 0px 1px 0px;
    line-height: 1.9em;
    
    
}

dl.cv dt.invisible,
dl.cv2 dt.invisible,
dl.cvpost dt.invisible {
    color: #FFFFFF;
}

dl.cv dd,
dl.cv2 dd,
dl.cvpost dd {
    /*margin: 0px 0px 5px 0px;*/
    margin: 0px 0px 1px 0px;
    line-height: 1.9em;
}

h3.ui-accordion-header {
    margin-bottom: 0px;
}

h3.ui-state-active a {
    color: #993300;
}
/* ---------- newsletter -------------------------------------------------------------------------------------------------------------- */
div.newsletter-subscribe {
    font-size: 0.9em;
    position: absolute;
    top: 0px;
    left: 645px;
    width: 200px;
    text-align: right;
    padding: 21px 0px 0px 0px;
}

a#newsletter-trigger {
    color: #99CC99;
}

div#newsletter-form {
    width: 250px;
    font-size: 0.9em;
    padding: 5px 5px 5px 5px;
    background-color: #FFFFFF;
}

div#newsletter-form dl dt {
    width: 70px;
    float: left;
    height: 30px;
}

div#newsletter-form dl dd {
    height: 30px;
}

div#newsletter-form dl dd input {
    width: 170px;
}

input#newsletter-submit {
    width: 80px !important;
}

div#newsletter-form dl dd input.error {
    background-color: #F08080;
}

div#newsletter-form dl dt.invisible {
    color: #FFFFFF;
}

div#newsletter-form dl dd button  {
    width: 80px;
}

dd#newsletter-buttons {
    text-align: right;
    padding: 0px 5px 0px 0px;
}

div#newsletter-confirmmessage {
    position: absolute;
    left: 420px;
    top: 300px;
    width: 250px;
    font-size: 0.9em;
    padding: 5px 5px 5px 5px;
    background-color: #FFFFFF;
    border: 1px solid #000000;
    line-height: 1.2em;
}

div#newsletter-confirmmessage div {
    text-align: right;
    margin: 10px 0px 0px 0px;
}

a#newsletter-confirmmessage-close button {
    width: 80px;
}

/* ---------- contact ---------------------------------------------------------------------------------------------------------------- */

/* ---------- prev/next navigation (newsletter and floating images and video/installations&objects) ---------------------------------- */
div.prevnext-navigation,
div.prevnext-navigation2,
div.prevnext-navigation3,
div.prevnext-navigation3gaze {
    position: absolute;
    top: 460px;
    left: 855px;
    /*width: 100px; changed to 105 for text of floating images */
    width: 105px;
    color: #993300;
}

div.prevnext-navigation2 {
    left: 745px;
    width: 240px; 
}

div.prevnext-navigation3,
div.prevnext-navigation3gaze {
    left: 860px;
    top: 470px;
    width: 125px; 
}

div.prevnext-navigation3gaze {
    width: 135px; 
}

div.prevnext-navigation ul li,
div.prevnext-navigation2 ul li,
div.prevnext-navigation3 ul li,
div.prevnext-navigation3gaze ul li {
    float: left;
    width: 20px;
}

div.prevnext-navigation2 ul li.previous2,
div.prevnext-navigation3 ul li.previous2,
div.prevnext-navigation3gaze ul li.previous2 {
    text-align: left;
    width: 10px;
    color: #FFFFFF;
}

div.prevnext-navigation ul li.previous,
div.prevnext-navigation2 ul li.previous,
div.prevnext-navigation3 ul li.previous,
div.prevnext-navigation3gaze ul li.previous {
    text-align: left;
    color: #FFFFFF;
    width: 10px;
}

div.prevnext-navigation ul li.current,
div.prevnext-navigation2 ul li.current,
div.prevnext-navigation3 ul li.current,
div.prevnext-navigation3gaze ul li.current {
    text-align: right;
    font-size: 0.7em;
    line-height: 1.4em;
}

div.prevnext-navigation2 ul li.current {
    width: 20px;
}
div.prevnext-navigation3gaze ul li.current {
    width: 30px;
}

div.prevnext-navigation ul li.separator,
div.prevnext-navigation2 ul li.separator,
div.prevnext-navigation3 ul li.separator,
div.prevnext-navigation3gaze ul li.separator {
    text-align: center;
    width: 10px;
}

div.prevnext-navigation ul li.of,
div.prevnext-navigation2 ul li.of,
div.prevnext-navigation3 ul li.of,
div.prevnext-navigation3gaze ul li.of {
    text-align: left;
    font-size: 0.7em;
    line-height: 1.4em;
}

div.prevnext-navigation2 ul li.of,
div.prevnext-navigation3 ul li.of,
div.prevnext-navigation3gaze ul li.of {
    width: 20px;
}

div.prevnext-navigation ul li.next,
div.prevnext-navigation2 ul li.next,
div.prevnext-navigation3 ul li.next,
div.prevnext-navigation3gaze ul li.next {
    text-align: right;
    color: #FFFFFF;
    width: 10px;    
}

div.prevnext-navigation2 ul li.next2,
div.prevnext-navigation3 ul li.next2,
div.prevnext-navigation3gaze ul li.next2 {
    text-align: right;
    width: 10px;
    color: #FFFFFF;
}

div.prevnext-navigation ul li.text,
div.prevnext-navigation2 ul li.text,
div.prevnext-navigation3 ul li.text,
div.prevnext-navigation3gaze ul li.text {
    width: 28px;
    padding: 0px 0px 0px 7px;
    font-size: 0.7em;
    line-height: 1.4em;
}

div.prevnext-navigation2 ul li.video {
    width: 100px;
    padding: 0px 0px 0px 10px;
    font-size: 0.7em;
    line-height: 1.4em;
}

/* ---------- imprint ---------------------------------------------------------------------------------------------------------------- */

/* ---------- links ------------------------------------------------------------------------------------------------------------------ */

/* ---------- texts ------------------------------------------------------------------------------------------------------------------ */
a.pdf, a.pdf:active, a.pdf:visited {
    color: #993300;
    font-style: italic;
    margin: 25px 0px 0px 0px;
    color: #993300 !important;
    display: block;
}

a.pdf:hover {
    color: #FF9900 !important;
}

a.top, a.top:active, a.top:visited {
    margin: 30px 0px 0px 0px;
    color: #993300 !important;
    display: block;
}

a.top:hover {
    color: #FF9900 !important;
}

span.authorname {
    padding: 0px 0px 0px 350px;
}

/* ---------- videos and installations & objects ------------------------------------------------------------------------------------- */	
div.image-large {
    width: 525px;
    height: 430px;
    overflow: hidden;
    position: relative;
}

div.image-large img {
    position: absolute;
    bottom: 0px;
}

div.image-caption {
    height: 40px;
    width: 525px;
    font-size: 0.7em;
    padding: 5px 0px 5px 0px;
    overflow: hidden;
    line-height: 1.2em;
}

div.images-thumb-landscape,
div.images-thumb-portrait,
div.images-thumb-square1,
div.images-thumb-square2 {
    width: 720px;
}

div.images-thumb-landscape ul li,
div.images-thumb-portrait ul li,
div.images-thumb-square1 ul li,
div.images-thumb-square2 ul li {
    float: left;
    width: 78px;
    height: 64px;
    margin: 0px 2px 2px 0px;
    overflow: hidden;
}

div.images-thumb-portrait ul li {
    width: 56px;
    height: 78px;
}

div.images-thumb-square1 ul li {
    width: 64px;
}

div.images-thumb-square2 ul li {
    height: 78px;
}

div.images-thumb-landscape ul li div.centercontainer,
div.images-thumb-portrait ul li div.centercontainer,
div.images-thumb-square1 ul li div.centercontainer,
div.images-thumb-square2 ul li div.centercontainer {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 78px;
    height: 64px;
    
    overflow: hidden;
}

div.images-thumb-portrait ul li div.centercontainer {
    width: 56px;
    height: 78px;
}

div.images-thumb-square1 ul li div.centercontainer {
    height: 64px;
}

div.images-thumb-square2 ul li div.centercontainer {
    width: 78px;
}

div.images-thumb-landscape ul li div.centercontainer *,
div.images-thumb-portrait ul li div.centercontainer *,
div.images-thumb-square1 ul li div.centercontainer *,
div.images-thumb-square2 ul li div.centercontainer * {
    vertical-align: middle;
}
/*\*//*/
div.images-thumb-landscape ul li div.centercontainer,
div.images-thumb-portrait ul li div.centercontainer,
div.images-thumb-square1 ul li div.centercontainer,
div.images-thumb-square2 ul li div.centercontainer {
    display: block;
}
div.images-thumb-landscape ul li div.centercontainer span,
div.images-thumb-portrait ul li div.centercontainer span,
div.images-thumb-square1 ul li div.centercontainer span,
div.images-thumb-square2 ul li div.centercontainer span {
    display: inline-block;
    height: 100%;
    width: 0px;
}
/**/

div.images-text {
    position: absolute;
    left: 770px;
    top: 117px;
    width: 185px;
    height: 335px;
    font-size: 0.9em;
    overflow: hidden;
    color: #993300;
}

/* ---------- overlay ---------------------------------------------------------------------------------------------------------------- */

#overlay-text { 
    background-image: url('../graphic/background_overlay_1.gif');
    color: #993300;
    width: 700px; 
    height: 505px; 
    padding: 10px 10px 40px 10px;
    background-color: #FFFFFF;
}

#overlay-text div.close {
    right: 10px;  
    top: 520px;
    background-image: none;
    height: 22px;
    width: 80px;
}

#overlay-text div.wrap {
    height: 500px;
    overflow-y: auto;
}

#overlay-text div.close button {
    vertical-align: middle;
    width: 80px;
    height: 22px;
}

div.overlay-text {
    font-size: 0.9em;
    padding: 0px 10px 0px 0px;
}

div.overlay-text p {
    margin: 0px 0px 15px 0px;
}

#overlay-video,
#overlay-newsletter {
    background-image: url('../graphic/background_overlay_2.gif');
    padding: 10px 10px 50px 10px;
}

#overlay-newsletter {
    width: 260px;
    height: 50px !important;
    padding: 10px 10px 50px 10px;
}

#overlay-video div.close,
#overlay-newsletter div.close {
    right: 10px;
    top: 490px;
    background-image: none;
    height: 22px;
    width: 80px;
}

#overlay-video div.close button,
#overlay-newsletter div.close button {
    vertical-align: middle;
    width: 80px;
    height: 22px;
}

div.overlay-audio {
    background-image: url('../graphic/background_overlay_2.gif') !important;
    padding: 10px 10px 50px 10px                                 !important;
    height: 20px                                                 !important;
}

div.overlay-audio div.close {
    right: 10px            !important;
    top: 47px              !important;
    background-image: none !important;
    height: 22px           !important;
    width: 80px            !important;
}

div.overlay-audio div.close button {
    vertical-align: middle;
    width: 80px;
    height: 22px;
}

div.overlay-audio a {
    display: block;
    height: 27px;
}

#overlay-image { 
    background-image: url('../graphic/background_overlay_1.gif');
    color: #993300;
    width: 700px; 
    height: 615px; 
    padding: 10px 10px 40px 10px;
    background-color: #FFFFFF;
}

#overlay-image div.close {
    right: 10px;  
    top: 630px;
    background-image: none;
    height: 22px;
    width: 80px;
}

#overlay-image div.wrap {
    height: 610px;
    overflow: hidden;
}

#overlay-image div.close button {
    vertical-align: middle;
    width: 80px;
    height: 22px;
}

div.overlay-image {
    font-size: 0.9em;
    padding: 0px 10px 0px 0px;
    overflow: hidden;
}

div.overlay-image p {
    margin: 0px 0px 15px 0px;
}

div.overlay-image div.image {
    width: 700px;
    height: 525px;
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

div.spacer {
    height: 10px;
}

div.overlay-image div.previous,
div.overlay-image div.next,
div.overlay-image div.text {
    float: left;
    
}

div.overlay-image div.previous,
div.overlay-image div.next {
    width: 10px;
    height: 30px;
    padding: 5px 10px 5px 10px;
}

div.overlay-image div.previous {
    padding-right: 0px;
    width: 27px;
    text-align: right;
    
}

div.overlay-image div.next {
    text-align: right;
    padding-right: 0px;
}

div.overlay-image div.text {
    width: 593px;
    height: 60px;
    overflow: hidden;
    padding: 5px 0px 5px 15px;
}



/* ----------- drawings -------------------------------------------------------------------------------------------------------------- */
div.content-drawing1 div.image-large,      /* PARAMOUR */
div.content-drawing2 div.image-large,      /* GAZE */
div.content-drawing3 div.image-large {     /* DRAWING */
    width: 640px;
    height: 450px;
    overflow: hidden;
}

div.content-drawing1 div.image-caption,
div.content-drawing2 div.image-caption,
div.content-drawing3 div.image-caption {
    width: 640px;
    height: 60px;
}
	
div.image-detail {
    font-size: 0.6em; /* 0.7em */
    position: absolute;
    top: 500px;
    left: 865px;
    width: 81px; /* 110px */
    height: 30px;
    text-align: center;
}

div.content-drawing2 div.image-large div.image-a,
div.content-drawing2 div.image-large div.image-b {
    height: 450px;
    width: 315px;
    float: left;
    overflow: hidden;
}

div.content-drawing2 div.image-large div.image-b {
    margin: 0px 0px 0px 10px;
}

div.content-drawing2 div.image-caption div.image-a,
div.content-drawing2 div.image-caption div.image-b {
    height: 60px;
    width: 315px;
    float: left;
    overflow: hidden;
}

div.content-drawing2 div.image-caption div.image-b {
    margin: 0px 0px 0px 10px;
}

div.content-drawing2 ul li.thumb-b {
    margin: 0px 20px 2px 0px;
}