/* CSS by Marcus Brose Edited: 2008-31-08 Design by Bendikt Lange */ /* general ---------------------------------------------*/ * { margin: 0px; padding: 0px; } body { background-color: #ffffff; font: 0.75em/1.5em Helvetica, Arial, Verdana, sans-serif; color: #000000;/* overflow: hidden;*/ } h1 { font-size: 1em; } h1 a, a:active, a:link, a:visited, a:hover { color: #000000; } h1 span { font-weight: normal; } h2 { font-size: 1em; font-weight: normal; } a, a:active, a:link, a:visited { color: #888888; text-decoration: none; } a:hover { color: #000000; } img { border: 0px; } ul { list-style-image: none; list-style-position: outside; list-style-type: none; } /* wrap ---------------------------------------------*/ .wrap { width: 1000px; height: 550px; } /*#detail .wrap { width: 910px; height: 500px; position: absolute; left: 50%; margin-left: -455px; }*/ /*div { border: 1px solid #ff00ff; }*/ /* navi ---------------------------------------------*/ #navi { width: 1000px; height: 84px; } #navi ul { width: 1000px; height: 84px; position: absolute; } #navi ul ul { width: 207px; top: 55px; visibility: hidden; } #navi li { position: relative; float: left; height: 84px; } #navi li a { text-indent: -9999px; } #navi li li { height: 15px; width: 207px; padding-left: 67px; z-index: 2; } #navi li li a { height: 15px; text-indent: 0; } #navi li a { height: 84px; display: block; outline: none; position: absolute; /*border: 1px solid #0f0;*/ } #navi li a:hover { background-position: left bottom; } #navi ul li:hover ul, #navi ul a:hover ul { visibility:visible; } #navi .home, #navi .home a { width: 83px; } #navi .home a { background: url('/media/img/navi/home2.gif') no-repeat; } #navi .vita, #navi .vita a { width: 144px; } #navi .vita a { background: url('/media/img/navi/de/01-vita.gif') no-repeat; } #navi .showreel_de, #navi .showreel_de a, #navi .showreel_en, #navi .showreel_en a { width: 169px; } #navi .showreel_de a { background: url('/media/img/navi/de/02-showreel.gif') no-repeat; } #navi .showreel_en a { background: url('/media/img/navi/en/02-showreel.gif') no-repeat; } #navi .szenenbild, #navi .szenenbild a, #navi .production, #navi .production a { width: 176px; } #navi .szenenbild a { background: url('/media/img/navi/de/03-szenenbild.gif') no-repeat; } #navi .production a { background: url('/media/img/navi/en/03-production-design.gif') no-repeat; } #navi .kostuem, #navi .kostuem a, #navi .costume, #navi .costume a { width: 214px; } #navi .kostuem a { background: url('/media/img/navi/de/04-kostuembild.gif') no-repeat; } #navi .costume a { background: url('/media/img/navi/en/04-costume-design.gif') no-repeat; } #navi .etc { width: 129px; background: url('/media/img/navi/de/05a-etc.gif') no-repeat; } #navi .etc a { width: 129px; height: 84px; } #navi .etc:hover { background-position: left bottom; } #navi .english, #navi .deutsch, #navi .english a, #navi .deutsch a { width: 78px; visibility: visible; } #navi .english a { background: url('/media/img/navi/en/language.gif') no-repeat; } #navi .deutsch a { background: url('/media/img/navi/de/language.gif') no-repeat; } /*#home .english, #home .english a, #home .deutsch, #home .deutsch a { width: 78px; visibility: visible; } #home .english a { background: url('/media/img/navi/en/language.gif') no-repeat; } #home .deutsch a { background: url('/media/img/navi/de/language.gif') no-repeat; }*/ #vita #navi .vita a, #showreel #navi .showreel_de a, #showreel #navi .showreel_en a, #production #navi .szenenbild a, #production #navi .production a, #costume #navi .kostuem a, #costume #navi .costume a, #etc #navi .etc a { background-position: left bottom; } /* set ---------------------------------------------*/ /*.set { width: 341px; height: 20px; margin-top: 31px; padding-left: 340px; border: 0px solid #ff00ff; float: left; }*/ .set { position: absolute; top: 115px; left: 22px; width: 341px; } .set a { padding: 10px; } .set strong { padding: 10px; } .set span { padding: 10px; color: #888888; } /* image ---------------------------------------------*/ .image_headline { position: absolute; top: 115px; left: 83px; width: 625px; } .image_content { position: absolute; top: 148px; left: 83px; width: 625px; height: auto; } .image_content img { border: 2px solid #000; } .image_description { margin: 1em 0 4em 0; } .credits { margin: 4em 0 0 0; color: #888; font-weight: bold; } .credits li.label { width: 29px; margin-left: -20px; text-align: right; float:left; } .credits li.tab { margin-left: 20px; } .project_headline { clear: both; position: relative; margin-left: 83px; margin-top: 418px; } /* subnavi ---------------------------------------------*/ .subnavi { position: absolute; top: 114px; left: 787px; width: 208px; } .subnavi a { height: 15px; display: block; outline: none; text-indent: -900%; position: relative; } .subnavi a:hover { background-position: left bottom; } /*vita*/ .subnavi .download-vita { background: url('/media/img/general/de/download-vita.gif') no-repeat; } .subnavi .studium { background: url('/media/img/navi/de/vita/studium.gif') no-repeat; } .subnavi .beruf { background: url('/media/img/navi/de/vita/beruf.gif') no-repeat; } .subnavi .lehre { background: url('/media/img/navi/de/vita/lehre.gif') no-repeat; } .subnavi .film-buehne { background: url('/media/img/navi/de/vita/film-buehne.gif') no-repeat; } .subnavi .festivals-preise { background: url('/media/img/navi/de/vita/festivals-preise.gif') no-repeat; } .subnavi .download-cv { background: url('/media/img/general/en/download-cv.gif') no-repeat; } .subnavi .professional { background: url('/media/img/navi/en/vita/professional.gif') no-repeat; } .subnavi .studies-degrees { background: url('/media/img/navi/en/vita/studies-degrees.gif') no-repeat; } .subnavi .film-stage { background: url('/media/img/navi/en/vita/film-stage.gif') no-repeat; } .subnavi .festivals-awards { background: url('/media/img/navi/en/vita/festivals-awards.gif') no-repeat; } .subnavi .teaching { background: url('/media/img/navi/en/vita/teaching.gif') no-repeat; } /*sub de*/ .subnavi a.auswahl, .subnavi a.selection { height: 20px; margin-bottom: 13px; } .subnavi .auswahl { background: url('/media/img/navi/de/general-light/auswahl.gif') no-repeat; } .subnavi .film { background: url('/media/img/navi/de/sub-light/film.gif') no-repeat; } .subnavi .werbung { background: url('/media/img/navi/de/sub-light/werbung.gif') no-repeat; } .subnavi .musikvideo { background: url('/media/img/navi/de/sub-light/musikvideo.gif') no-repeat; } .subnavi .sonstige { background: url('/media/img/navi/de/sub-light/sonstige.gif') no-repeat; } /*sub en*/ .subnavi .selection { background: url('/media/img/navi/en/general-light/selection.gif') no-repeat; } .subnavi .feature { background: url('/media/img/navi/en/sub-light/feature.gif') no-repeat; } .subnavi .commercial { background: url('/media/img/navi/en/sub-light/commercial.gif') no-repeat; } .subnavi .music-clip { background: url('/media/img/navi/en/sub-light/music-clip.gif') no-repeat; } .subnavi .various { background: url('/media/img/navi/en/sub-light/various.gif') no-repeat; } /*production - detail*/ .subnavi .zurueck { background: url('/media/img/navi/de/general-light/zurueck.gif') no-repeat; } .subnavi .return { background: url('/media/img/navi/en/general-light/return.gif') no-repeat; } .subnavi a.zurueck, .subnavi a.return { height: 20px; margin-bottom: 13px; } .subnavi .alle_bilder { background: url('/media/img/general/de/alle-bilder.gif') no-repeat; } .subnavi .entire { background: url('/media/img/navi/general/en/entire-project.gif') no-repeat; } .subnavi .spot-trailer { background: url('/media/img/navi/de/general-light/spot-trailer.gif') no-repeat; } .subnavi .clip-trailer { background: url('/media/img/navi/de/general-light/clip-trailer.gif') no-repeat; } /*links*/ .subnavi .links { background: url('/media/img/navi/de/links/links.gif') no-repeat; } .subnavi .filme-crew-united { background: url('/media/img/navi/de/links/filme-crew-united.gif') no-repeat; } .subnavi .films-crew-united { background: url('/media/img/navi/en/links/films-crew-united.gif') no-repeat; } .subnavi .linklist { margin-top: 33px; } #auswahl .auswahl, #film .film, #werbung .werbung, #musikvideo .musikvideo, #sonstige .sonstige, #selection .selection, #feature .feature, #commercial .commercial, #music-clip .music-clip, #various .various { background-position: left bottom; } /* head ---------------------------------------------*/ .head_de, .head_en { position: absolute; top: 84px; left: 83px; width: 622px; } .head_de a, .head_en a { display: block; outline: none; text-indent: -9999px; position: relative; } .head_de a:hover .contact, .head_en a:hover .contact { background-position: left bottom; } .head_de .benedikt_lange, .head_en .benedikt_lange { width: 200px; height: 20px; background: url('/media/img/general/benedikt-lange.gif') no-repeat; } .head_de .diplom_designer { width: 273px; height: 15px; background: url('/media/img/general/diplom-designer-de.gif') no-repeat; } .head_en .diplom_designer { width: 273px; height: 15px; background: url('/media/img/general/diplom-designer-en.gif') no-repeat; } .head_de .contact, .head_en .contact { width: 622px; height: 15px; background: url('/media/img/general/contact.gif') no-repeat; } .head_de .vcard, .head_en .vcard { width: 145px; height: 15px; background: url('/media/img/general/vcard.gif') no-repeat; } /*.head_de .contact { width: 622px; height: 50px; background: url('/media/img/general/de/benedikt-lange.gif') no-repeat; } .head_en .contact { width: 622px; height: 50px; background: url('/media/img/general/en/benedikt-lange.gif') no-repeat; }*/ #vita .head_de, #vita .head_en, #impressum .head_de, #imprint .head_en, #links .head_de, #links .head_en { height: 170px; } /* content ---------------------------------------------*/ .content { position: absolute; top: 148px; left: 81px; width: 625px; height: auto; background-color: transparent; } #showreel .content img { border: 2px solid #000; } #vita .images { position: absolute; top: 267px; left: 809px; min-width: 388px; } #vita .images .image1 { position: relative; float: left; } #vita .images .image2 { position: relative; float: right; } /*vita*/ .flexcroll { position: absolute; top: 267px; left: 83px; background-color: #ffffff; } .flexcroll { width: 726px; height: 248px; overflow-x: hidden; overflow-y: scroll; } .flexcroll ul, #content p { margin-bottom: 15px; } .flexcroll ul.studies li.label { width: 217px; float: left; } .flexcroll ul.studies li.tab { margin-left: 217px; } .flexcroll ul.scene li.year { width: 37px; float: left; } .flexcroll ul.scene li.title { width: 505px; float: left; } .flexcroll ul.scene li.work_left { margin-left: 542px; width: 140px; } .flexcroll ul.scene li.work_right { margin-left: 532px; width: 140px; } .flexcroll ul.scene li.work_left { text-align: left; } .flexcroll ul.scene li.work_right { text-align: right; } .flexcroll ul.competition li.label { width: 288px; float: left; } .flexcroll ul.competition li.tab { margin-left: 288px; } td.year { width: 40px; } td.name_de { width: 520px; } td.name_en { width: 495px; } td.position_de { width: 140px; } td.position_en { width: 170px; } /*showreel*/ #showreel #flash { margin-left: 83px; margin-top: 64px; border: 2px solid #000000; } #detail .content div.picture { width: 621px; height: 467px; border: 2px solid #000000; } #detail .content { margin-left: 0px; } #detail .subnavi { margin-left: 706px; margin-top: 0px; } #detail .description { margin-left: 702px; } #production .controls { width: 621px; height: 26px; background-color: #000000; color: #ffffff; border: 2px solid #000000; padding: 0px; text-align: left; } #production .controls ul { position: absolute; } #production .controls li { position: relative; height: 18px; float: left; text-indent: -1500%; } #production .controls li a { position: absolute; hieght: 18px; display: block; outline: none; } #production .controls li.rueck, #production .controls li.rueck a { width: 74px; } #production .controls li.rueck { margin-left: 218px; } #production .controls li.rueck a { background: url('/media/img/navi/de/general/rueck.jpg') no-repeat; } #production .controls li.vor, #production .controls li.vor a { width: 74px; } #production .controls li.vor { margin-left: 35px; } #production .controls li.vor a { background: url('/media/img/navi/de/general/vor.jpg') no-repeat; } #production .controls li.info, #production .controls li.info a { width: 100px; } #production .controls li.info { margin-left: 120px; } #production .controls li.info a { background: url('/media/img/navi/de/general/info.jpg') no-repeat; } #production .controls li a:hover { background-position: left bottom; } #production .controls ul.info li.info a { background-position: left bottom; } #production .controls ul.info li.info a:hover { background-position: left top; } #thumbs { position: relative; top: 1px; left: 1px; height: 350px; margin: 0px; padding: 0px; width: 624px; } #thumbs li { background-color: #000000; float:left; height:115px; margin:0px 2px 2px 0px; /*padding:10px 9px 0px;*/ position:relative; width:154px; } #thumbs li:hover img { opacity: 1; filter: alpha(opacity=100); -moz-opacity: 1; } #thumbs li:hover h3 { font-size:100%; top: 8px; } #thumbs img { width: 154px; height: 115px; border: 0px solid #000000; opacity: .5; filter: alpha(opacity=50); -moz-opacity: 0.5; } #thumbs h3 { position:absolute; left: 4px; top: 6px; color: #ffffff; line-height:100%; font-size:180%; opacity: 1; } /*Flexcroll*/ .scrollgeneric { line-height: 21px; font-size: 1px; position: absolute; top: 0; left: 0; } .vscrollerbase { width: 21px; background: url('/media/img/navi/scrollbar.gif') repeat-y; } .vscrollerbar { width: 21px; background-color: #ffffff; padding: 25px; cursor: pointer; } .vscrollerbasebeg {height: 25px; width: 21px; background: url('/media/img/navi/arrow-up.gif') no-repeat; cursor: pointer; } .vscrollerbaseend {height: 25px; width: 21px; background: url('/media/img/navi/arrow-down.gif') no-repeat; cursor: pointer; }