@charset "UTF-8"; /* CSS Document */ @font-face { font-family: 'museoSans900'; src: url('../fonts/museosans_900.eot'); src: local('../fonts/museo Sans'), local('../fonts/museoSans-900'), url('../fonts/museosans_900.woff') format('woff'), url('../fonts/museosans_900.ttf') format('truetype'); } @font-face { font-family: 'museoSans500'; src: url('../fonts/museosans_500.eot'); src: local('../fonts/museo Sans'), local('../fonts/museoSans-500'), url('../fonts/museosans_500.woff') format('woff'), url('../fonts/museosans_500.ttf') format('truetype'); } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; } /* remember to define focus styles! */ :focus { outline: 0; } body { line-height: 1; color: black; background: #FFF; } ol, ul { list-style: none; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: separate; border-spacing: 0; } caption, th, td { text-align: left; font-weight: normal; } blockquote:before, blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; } /* MAIN AREAS */ body{ background:#FFF; /* url(../img/back_try.jpg) fixed;*/ } body.baustelle{ background:#dfebed; position:absolute; width:100%; } #main_wrapper{ max-width:100%; min-width:980px; overflow:hidden; margin:0 auto; position:relative; } .wrap_top{ width:900px; padding:0px 10px 10px 10px; background:url(../img/back_wrapp.png) no-repeat 0px 30px; margin:0px auto 0 auto; } .wrap_top_2{ width:900px; padding:0px 10px 10px 10px; background:url(../img/back_wrapp.png) no-repeat 0px 0px; margin:10px auto 0 auto; clear:both; overflow.auto; } #kontakt_nach_oben{ position:absolute; left:-13px; top:152px;; z-index:999; width:40px; height:125px; } #kontakt_link{ display:block; width:40px; height:98px; background:url(../img/kontagt.gif) no-repeat; } #kontakt_link span, #nach_oben_link span{ display:none; } #nach_oben_link{ display:block; height:27px; width:40px; background:url(../img/nach_oben.gif) no-repeat; } .wrapper{ max-width:100%; min-width:980px; margin:0 auto; position:relative; /* border-left:1px solid #4f291b; border-right:1px solid #4f291b; */ } #teaser{ height:500px; margin-top:10px; } #teaser .inner{ position:relative; height:500px; } #content{ background:#c3d0cc url(../img/content_back.jpg) no-repeat center top; } #footer{ border-top:#4f291b solid 6px; background:#FFF; height:140px; } .inner{ width:900px; margin:0 auto; position:relative; } #teaser{ background:#d7e0de; } /* klassen */ .c50{ width:50%; position:relative; margin-bottom:36px; } .c33{ width:33.33%; position:relative; margin-bottom:36px; } .c67{ width:62%; position:relative; margin-bottom:36px; } .gold_big{ width:540px; position:relative; margin-bottom:36px; } .gold_small{ width:360px; position:relative; margin-bottom:36px; } .left{ float:left; } .right{ float:right; } /* MAIN AREAS // SEITEN-SPEZIFISCH // START */ #start #teaser #wrongwrapper{ background:#d7e0de url(../img/startseite_illu.jpg) no-repeat center; } .baustelle#start #teaser #wrongwrapper{ background:#e2eaea url(../img/startseite_illu_baustelle.jpg) no-repeat center; } #start h1{ position:relative; left:-6px; width:415px; } #start h1 span{ position:relative; left:3px; } .thumblist p.intro{ height:150px; position:relative; margin-bottom:50px; } .thumblist p.intro img{ border:none; position:absolute; bottom:-37px; left:100px; } .thumbholder{ float:left; margin-top:10px; margin-bottom:10px; padding-top:20px; background:url(../img/alpha_weiss_30.png); position:relative; height:320px; overflow:hidden; border-bottom:#e9f0ee 1px solid; } .thumbholder h3{ margin-left:10px; margin-bottom:20px; } .thumblist{ height:250px; padding:00px 10px; width:280px; position:relative; } .thumblist h4{ position:absolute; top:200px; width:260px; } .thumblist img{ margin-bottom:5px; margin-left:4px; } .thumblist h2{ border-bottom:#94babb solid 1px; padding-bottom:3px; margin-right:25px; } .thumblist p{ margin-bottom:00px; } /* .img_desc{ margin-bottom:28px; border-bottom:#94babb solid 1px; height:100px; color:#4f291b; } */ .img_desc span{ display:block; font-size:10px; } /* MAIN AREAS // SEITEN-SPEZIFISCH // LEISTUNGEN */ #leistungen #teaser #wrongwrapper{ background:#d7e0de url(../img/leistungen_illu.jpg) center no-repeat; } #neu_komplettangebote{ position:absolute; left:270px; top:-40px; } .leistungs_select{ position:absolute; width:143px; height:143px; top:-120px; display:block; float:left; margin:0 74px; cursor:pointer; } .leistungs_select span{ display:none; } .leistungs_select#web{ background:url(../img/icons_web.png) no-repeat left top; left:11px; } .leistungs_select#web:hover, .leistungs_select#web.selected{ background:url(../img/icons_web.png) no-repeat left bottom; } .leistungs_select#print{ background:url(../img/icons_print.png) no-repeat left top; left:305px; } .leistungs_select#print:hover, .leistungs_select#print.selected{ background:url(../img/icons_print.png) no-repeat left bottom; } .leistungs_select#koge{ background:url(../img/icons_gestaltung.png) no-repeat left top; left:596px; } .leistungs_select#koge:hover, .leistungs_select#koge.selected{ background:url(../img/icons_gestaltung.png) no-repeat left bottom; } #leistungen #content{ padding-top:30px; } #leistungen h2{ margin-bottom:32px; } #leistungsbeschreibungs_cont_inner{ position:relative; width:5000px; } #leistungsbeschreibungs_cont{ width:920px; overflow:hidden; position:relative; top:-30px; } .leistungsbeschreibung{ float:left; width:900px; padding:10px 10px 10px 10px; background:url(../img/back_wrapp.png) no-repeat 0px 0px; margin-right:150px; } .leistungsbeschreibung_inner{ float:left; width:840px; background:url(../img/alpha_weiss_30.png); padding:30px; border-bottom:#e9f0ee 1px solid; } /* MAIN AREAS // SEITEN-SPEZIFISCH //Über Mich */ #ueber_mich #teaser #wrongwrapper{ background:#d7e0de url(../img/ueber_mich_illu.jpg) center no-repeat; } /* MAIN AREAS // SEITEN-SPEZIFISCH // PREISE */ #preise #teaser #wrongwrapper{ background:#d7e0de url(../img/preise_illu.jpg) no-repeat center; } #preise #sticky_2{ width:280px; margin-top:20px; float:left; margin-right:20px; } #preise #sticky_2 p, #preise #sticky_2 li{ font-size:30px; letter-spacing:-1px; line-height:35px; } #preise #intro_text{ width:280px; margin-top:20px; float:left; } #preise #intro_text .preis{ font-size:40px; letter-spacing:-1px; display:block; margin-top:8px; } .col_holder{ background:url(../img/alpha_weiss_30.png); padding:30px; overflow:auto; border-bottom:#e9f0ee 1px solid; } .col_holder .c33{ width:265px; } #preise .c33 .preis{ font-size:20px; display:block; margin-top:7px; } #preise .col_web{ margin-left:0px; margin-left:10px; width:255px; padding:10px; } #preise .col_print{ margin-left:0px; margin-left:10px; width:255px; padding:10px; } .col_print *, .col_web *{ } .col_print p,.col_print h3, .col_web p, .col_web h3{ margin-bottom:0; } .col_print h4, .col_web h4{ margin-top:22px; margin-bottom: 9px; } .col_print h2, .col_web h2{ /*font-size:20px;*/ text-transform:none; } /* content */ #content .inner{ padding-top:40px; } /* TYPO */ h1{ font-size:81px; /*color:#3d1c10;*/ color:#4f291b; letter-spacing:-2px; padding-top:100px; } h1 span{ font-size:30px; text-transform:none; display:block; margin-top:8px; margin-bottom:8px; } #ueber_mich h1 span{ font-size:30px; text-transform:none; display:block; margin-top:0px; margin-bottom:8px; position:static; } h2{ font-family:"museoSans500", Helvetica, Arial, sans-serif; color:#4f291b; margin-bottom:18px; font-size:34px; letter-spacing:-1px; } h3{ font-family:"museoSans500", Helvetica, Arial, sans-serif; color:#4f291b; font-weight:bold; margin-bottom:18px; font-size:23px; } p + h3, ul + h3{ margin-top:36px; } .border_bottom{ border-bottom:2px solid #3d1c10; margin-right:20px; padding-bottom:4px; margin-bottom:12px; } h4{ font-family:"museoSans500", Helvetica, Arial, sans-serif; color:#4f291b; font-size:16px; line-height:18px; margin-bottom:9px; } #start h4{ font-family:"museoSans500", Helvetica, Arial, sans-serif; color:#4f291b; font-size:13px; line-height:20px; vertical-align:baseline; margin-bottom:4px; } #start .thumbholder h4{ padding-left:3px; } #start h4 span{ vertical-align:baseline; font-size:13px; } p + h4, ul + h4{ margin-top:23px; } p{ font-family:"museoSans500", "museoSans500", Helvetica, Arial, sans-serif; font-size:12px; line-height:18px; font-weight:normal; margin-bottom:18px; color:#4f291b; margin-right:30px; } label{ color:#4f291b; display:block; margin-bottom:3px; margin-top:7px; } strong { font-family:"museoSans500", "museoSans500", Helvetica, Arial, sans-serif; font-weight:normal; } em{ font-style:italic; } #leistungsbeschreibungs_cont li{ font-family:"museoSans500", Helvetica, Arial, sans-serif; font-size:13px; line-height:20px; margin-bottom:9px; padding-left:20px; color:#4f291b; background:url(../img/leistungs_liste.gif) no-repeat 0px 3px; } .mehr_link, .show_thumbs, .buttons, #preise .buttons{ position:static; color:#FFFFFF; background-color:#99adae; cursor:pointer; padding-left:5px; padding-right:5px; font-size:14px; line-height:24px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; display:inline-block; behavior: url(http://www.sokolowski-design.de/js/ie-css3.htc); } .bigger{ padding:7px 10px 5px 10px; font-size:23px; -moz-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; } .mehr_link span{ position:relative; top:-1px; } .buttons, #preise .buttons{ font-size:12px; padding-left:5px; padding-right:5px; padding-top:2px; height:32px; display:inline-block; } .show_thumbs{ position:absolute; left:10px; bottom:10px; font-size:14px; } .show_thumbs:hover, .mehr_link:hover, #preise .buttons:hover{ background-color:#3d1c10; color:#FFFFFF; } #intro_text{ width:300px; margin-top:24px; } .intro p, p.intro{ font-size:16px; line-height:135%; } span.fett_cuf{ font-size:14px; } small{ color:#689293; } .leistungsbeschreibung .intro p{ text-align:right; } .leistungsbeschreibung h2{ } a:hover{ color:#fa5d33; text-decoration:none; } a{ color:#689293; text-decoration:none; } /* irrelevante oder seitenspezifische Dekoration */ #start #schaukasten{ margin-bottom:36px; display:block; } #featured_work{ position:absolute; right:-30px; top:-30px; } #alle_arbeiten{ border:none; position:absolute; left:-14px; top:-55px; } /* FOOTER */ #footer .logo_link{ position:absolute; left:0px; top:46px; } #footer .adr_1{ position:absolute; left:310px; top:28px; font-size:10px; line-height:14px; width:260px; } #footer .adr_2{ position:absolute; left:600px; top:28px; font-size:10px; line-height:14px; width:180px; } #footer .adr_3{ position:absolute; left:710px; top:28px; font-size:10px; line-height:14px; width:180px; } /* main menu */ #main_menu{ background:#4f291b; height:45px; position:fixed; width:100%; z-index:999; } #main_menu li{ height:45px; float:left; margin-top:8px; } #main_menu li a{ padding-top:8px; margin-right:25px; display:block; color:#a88a7e; font-size:15px; padding-bottom:20px; } #main_menu li a:hover, #main_menu li a.active{ color:#FFF; } #main_menu li a.active{ color:#FFF; background:url(../img/men_pfeil.png) no-repeat 50% bottom; } #main_menu li a span{ display:block; width:100%; height:100%; position:absolute; left:0; top:0; } #main_menu .inner{ position:relative; } #main_menu #men_start{ position:absolute; right:0; width:251px; height:62px; display:block; margin-top:0px; margin-right:0px; } #main_menu #men_start a , #main_menu #men_start a.active, #main_menu a #men_start:hover{ font-size:2px; color:#4f291b; padding-right:0; } #men_start span{ width:100%; height:100%; z-index:4; background:url(../img/menu/logo.png) no-repeat; } /* PORTFOLIO */ .portfolio{ width:720px; height:450px; position:relative; overflow:hidden; } * + html .portfolio{ width:720px; height:440px; position:relative; overflow:hidden; } .portfolio #slideshow{ width:720px; height:450px; position:absolute; left:0; top:0; z-index:0; overflow:hidden; } #port_desc{ position:absolute !important; width:220px !important; height:350px !important; top:62px !important; right:20px !important; z-index:900 !important; } .portfolio h1{ position:absolute; left:20px; top:20px; z-index:600; font-size:35px; letter-spacing:-1px; padding-top:0; width:670px; } .portfolio h1 span{ position:static; font-size:18px; padding-top:2px; width:670px; } .portfolio.braun{ background:url(../img/back_brown.jpg) } .portfolio.braun *{ z-index:3; color:#FFF; } .portfolio.hellblau{ } .portfolio.gruen{ } .portfolio.hellblau *, .portfolio.gruen *{ color: #3d1c10; } .portfolio .button a{ color:#FFF !important; } #port_desc p{ font-size:14px; line-height:140%; margin-right:15px; } .kontakt #port_desc{ top:125px; } .kontakt #port_desc p{ font-size:12px; line-height:140%; margin-right:15px; margin-bottom:0px; } .kontakt #port_desc #messageBox p{ font-size:12px; margin-bottom:0; color: #4f291b; } #sb-title-inner,#sb-info-inner,#sb-loading-inner,div.sb-message{font-family:"HelveticaNeue-Light","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:200;color:#fff;} #sb-container{position:fixed;margin:0;padding:0;top:0;left:0;z-index:999;text-align:left;visibility:hidden;display:none;} #sb-overlay{position:relative;height:100%;width:100%;} #sb-wrapper{position:absolute;visibility:hidden;width:100px; } #sb-wrapper-inner{position:relative;overflow:hidden;height:100px;} #sb-body{position:relative;height:100%;} #sb-body-inner{position:absolute;height:100%;width:100%; overflow:hidden;} #sb-player.html{height:100%;overflow:auto;} #sb-body img{border:none;} #sb-loading{position:relative;height:100%;} #sb-loading-inner{position:absolute;font-size:14px;line-height:24px;height:24px;top:50%;margin-top:-12px;width:100%;text-align:center;} #sb-loading-inner span{background:url(http://www.sokolowski-design.de/shadowbox/loading.gif) no-repeat;padding-left:34px;display:inline-block;} #sb-body,#sb-loading{background-color:#060606;} #sb-title,#sb-info{position:relative;margin:0;padding:0;} #sb-title,#sb-title-inner{height:26px;line-height:26px;} #sb-title-inner{font-size:16px;} #sb-info,#sb-info-inner{height:20px;line-height:20px;} #sb-info-inner{font-size:12px;} #sb-nav{float:right;height:16px;padding:2px 0;width:45%;} #sb-nav a{display:block;float:right;cursor:pointer;background-repeat:no-repeat;} a#sb-nav-close{background-image:url(http://www.sokolowski-design.de/shadowbox/close.png); height:16px;width:16px;margin-left:3px;} a#sb-nav-next{background:url(http://www.sokolowski-design.de/shadowbox/next.png) no-repeat top; position:absolute; right:-43px; top:-240px; width:43px; height:35px; display:block;} a#sb-nav-next:hover{background:url(http://www.sokolowski-design.de/shadowbox/next.png) no-repeat bottom;} a#sb-nav-previous{background:url(http://www.sokolowski-design.de/shadowbox/previous.png) no-repeat top; position:absolute; left:-43px; top:-240px; width:43px; height:35px;display:block;} a#sb-nav-previous:hover{background:url(http://www.sokolowski-design.de/shadowbox/previous.png) no-repeat bottom;} #sb-nav-play{background-image:url(http://www.sokolowski-design.de/shadowbox/play.png);} #sb-nav-pause{background-image:url(http://www.sokolowski-design.de/shadowbox/pause.png);} #sb-counter{float:left;width:45%;color:#777;} #sb-counter a{padding:0 4px 0 0;text-decoration:none;cursor:pointer;color:#fff;} #sb-counter a.sb-counter-current{text-decoration:underline;} div.sb-message{font-size:12px;padding:10px;text-align:center;} div.sb-message a:link,div.sb-message a:visited{color:#fff;text-decoration:underline;} /* Formular ------------------------------------------ */ .label{ margin-top:10px; } * + html .label{ margin-top:0px; } .label label{ margin-top:5px; font-size:13px; } * + html .label label{ margin-top:2px; font-size:13px; } input, textarea{ -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; background-color: #99adae; border:none; } input:focus, textarea:focus{ background:#FFF; } input, textarea{ width:250px; padding:4px; } .buttons{ width:auto; margin-top:7px; } .buttons:hover{ color:#FFF; } /*typekit*/ /* h1, h2{ font-family: "museo-slab-1","museo-slab-2",serif; font-weight:900; } #main_menu a, .fett_cuf{ font-family: "museo-slab-1","museo-slab-2",serif; font-weight:700; } h3, #start h4, .show_thumbs, .mehr_link, .button a{ font-family: "museo-slab-1","museo-slab-2",serif; font-weight:700; } h1 span, p.intro, h4 span ,.intro p, #leistungsbeschreibungs_cont li, label{ font-family: "museo-slab-1","museo-slab-2",serif; font-weight:300; } #port_desc{ font-family: "museo-slab-1","museo-slab-2",serif; font-weight:500; } */