body { margin: 0; padding: 0; background:url(images/bg_1.jpg) center 140px ; font-family: 'Telex', Arial, Helvetica, sans-serif; font-size:13px; letter-spacing:1px; overflow:visible } .mensch { background-image:url(images/bg_1.jpg); } .raum { background-image:url(images/bg_raum.jpg); } .markt { background-image:url(images/bg_markt.jpg); } .wert { background-image:url(images/bg_wert.jpg); } .trend { background-image:url(images/bg_trend.jpg); } .leistungen { background-image:url(images/bg_leistungen.jpg); } .referenzen { background-image:url(images/bg_referenzen.jpg); } .team { background:#004581; } .projektpartner { background:#ed1c24; } .projektpartner.engin { background:#003669 !important; } .kontakt { background:#a59ca0; } .impressum { background:#b4adb0; } .planung { background-image:url(images/bg_planung.jpg); } .realisierung { background-image:url(images/bg_realisierung.jpg); } .grundlagen { background-image:url(images/bg_grundlagen.jpg); } .machbarkeits { background-image:url(images/bg_machbarkeitsstudie.jpg); } .entscheidung { background-image:url(images/bg_entscheidung.jpg); } p { line-height:18px; letter-spacing:1px; } .c2 p { color:#666; } a { text-decoration:none; } .wrapper { width: 100%; min-height:100%; position:absolute; background:url(images/bg-mask.png) center top; } .projektpartner .wrapper, .kontakt .wrapper { background:url(images/bg-mask-proj.png) center top; } .impressum .wrapper { background:url(images/bg-mask-impressum.png) center top; } .header { width: 100%; height: 26px; background-color: #c71f3a; } .engin .header { background-color: #00386f; } .lang { width: 970px; margin: 0 auto; text-align:right; } .lang .butt { float:right; display: block; width: 145px; height:26px; background:url(images/bg-lang.png) top repeat-x ; } .engin .lang .butt { background:url(images/bg-lang-eng.png) top repeat-x ; } .lang .butt:Hover { background-position:bottom; } .lang a { display: block; width: 145px; height:26px; text-align:center; color: #fff; font-size:15px; text-decoration:none; padding-top:4px; letter-spacing:1px } .bread { width: 970px; margin: 0 auto; height: 26px; } .bread div { padding:3px 30px 0 30px; } .bread div a, .bread div a:Visited, .bread div span { font-family: 'Alike', "Times New Roman", Times, serif; font-size:12px; margin-right:13px; color: #000; } .bread div a:Hover { text-decoration:underline; } .logos { width: 970px; xbackground-color: green; margin: 0 auto; height: 91px; } .l1 { display:block; width:290px; height:91px; float:left; background:url(images/logo-sol.png) 4px 4px no-repeat; } .menue .l1 { padding: 155px 0 0 0; font-size:17px; text-indent:32px; color:#000; text-align:center;} .l2 { display:block; width:535px; height:45px; float:left; font-size:17px; margin-top: 46px; letter-spacing:4px; } .engin .l2 { letter-spacing:5px; } .l3 { display:block; width:145px; height:91px; background:url(images/logo-eng-s.png) 13px 16px no-repeat; margin-top:-106px; } .menue .l3 { margin-top:0; } .engin .l1 { background:url(images/logo-eng.png) 4px 4px no-repeat ; } .engin .l3 { background:url(images/logo-sol-s.png) 13px 16px no-repeat; } #nav-mob { display:none; } .content { clear:both; width: 970px; margin: 0 auto; padding-top:39px; overflow:visible; z-index:999; display:block; position:relative; } .c1, .c1-de { float:left; position:relative; width: 290px; height:222px; color:#fff; letter-spacing:2px; xbackground-color:green} .c1 h1, .c1-de h1 { padding: 10px 0 7px 30px; margin:0; font-size:24px; font-weight:normal; } .c1 a, .c1 a:Visited, .c1-de a, .c1-de a:Visited { padding: 0 0 0 30px; display: block; width:190px; font-size:73px; line-height:73px; color:#fff; border-top:1px solid grey; } .c2 { float: left; width:505px; min-height:166px; background-color:#fff; border-bottom:10px solid #000; padding-bottom:30px; position: relative; margin-bottom: 66px; } .c2 h2, .c2 h3 { padding: 20px 0 0 30px; margin:0; font-size:16px; font-weight:normal; } p.bigger.bo-first { padding-bottom:30px !important} p.bo-top { padding-top:30px !important; border-top:4px solid #000; } .bread div span.current, .rot, .red, .c1 a, .c1 a:Visited, .c1-de a, .c1-de a:Visited, .l2, .accordion li.active h3 a { color:#c71f3a; } .engin .bread div span.current, .blau, .engin .c1 a, .engin .c1 a:Visited, .engin .l2, .engin .accordion li.active h3 a { color:#0060ae; } .blk { color:#000 !important; } /** L E I S T U N G E N **/ /*** A C C O R D I O N ***/ .c2 .accordion h3 { background:url(images/pfeil-rot-L.png) -16px 11px no-repeat; margin-left:-8px; padding-left:38px; xpadding-bottom:16px; color:#8b7b78; } x.engin .c2 .accordion h3 { background:url(images/pfeil-blau-L.png) -16px 11px no-repeat; } .accordion li.active h3{ background:url(images/pfeil-rot.png) left 11px no-repeat; margin-left:-8px; padding-left:38px; } ul.accordion li.active h3 { background:url(images/pfeil-rot-L.png) left 11px no-repeat; margin-left:-8px; padding-left:38px; } x.engin ul.accordion li.active h3 { background:url(images/pfeil-blau-L.png) left 11px no-repeat; } /* T E A M */ .team .c1-de h1 { color:#ffffff; } .team .c1-de a, .c1-de a:Visited {padding: 50px 0px 0px 30px; margin-top:-43px;} .team .c2 { min-height: 166px; overflow:visible } .team .c2 ul { overflow:visible } .team .c2 li { overflow:visible } .engin .li-2 img, .engin .li-1 img { position:absolute} .li-3 img { margin: -13px 0 0 -30px; position:absolute; width:505px;} .accordion li.border { border-bottom:4px solid #000; padding-bottom:16px; } .li-1 img, .engin .li-1 img { margin: 79px 0 0 -30px; position:absolute} .li-2 img, .engin .li-2 img { margin: 20px 0 0 -30px; position:absolute} .c2 p { padding: 13px 20px 0 30px; margin:0; } .c2 p.bigger { padding: 20px 20px 0 30px; margin:0; font-size:16px; line-height:22px; } .c3 { float:right; width: 145px; height:222px; xbackground-color:yellow; margin:-26px 1px 0 0; } .tel3 { background:url(images/telly.jpg) right top no-repeat; width: 144px; height:222px; display:block } .footerwrap { position:absolute; bottom:0px; width: 100%; height: 39px; z-index:941; } .footer { width: 970px; margin: 0 auto; height:39px; } .f1 { display:block; float:left; } .f1 a, .f1 a:Visited { display:inline-block; padding: 9px 0 0 30px; font-size:16px; color:#fff; } .f2 { float: right; margin-right: 145px; } .f2 a, .f2 a:Visited { display:inline-block; padding: 12px 30px 0 0; color:#fff; } .footer a:Hover { text-decoration:underline; } .footerbg { position:absolute; bottom:0px; width: 100%; height: 39px; background-color: #68001a; z-index:777 } .engin .footerbg { background-color: #00274b; } a.b-sb { display:block; width: 145px; height:239px; font-size:16px !important; color:#fff; text-align:center; line-height:6em; margin:0; background:url(images/bottom_sb-rot.png) top center no-repeat; float:right; } a.b-sb:Hover { background-position: bottom center; } a.b-sb p{margin-top: -30px;} a.b-sb-mobil{display:none;} /*** E N T R Y P A G E ***/ body.entry { background:none; background-color:#fff; } .entry .wrapper { background:url(images/bg-mask-entry.png) center top; } .entry .c1 { padding-top:111px; width: 445px; border:none; } .entry .c2 { padding-top:111px; width: 339px; border:none; text-align:right; } .entry .c3 { margin:88px 2px 0 0; } .entry .content p { width:339px; color:#000; padding:22px 0 0 0; margin:0; font-size:16px; text-align:center; } .entry .c1 a, .entry .c2 a { padding:6px; display:block; border:none; width:342px } .entry .c1 a:Hover, .entry .c2 a:Hover, .entry a img { border:none; } .entry-temp a.b-sb { height:219px; padding-top:20px; line-height:1.4em; } .entry-temp a.b-sb:Hover { background-position: top center; } /*** M E N U P A G E ***/ body.menue { background:none; background-color:#fff; } .menue .wrapper { background:url(images/bg-mask-menu.png) center top repeat-y; } .menue .mslogan { color:#fff; font-size:15px; letter-spacing:4px; font-style:italic; margin:0 11px 0 0; line-height:26px} .engin .mslogan { letter-spacing: 5px !important; } .menue .l1 { background:url(images/logo-start-sol.png) 4px 4px no-repeat ; height:200px; z-index:988; } .menue.engin .l1 { background:url(images/logo-start-eng.png) 4px 4px no-repeat ; } .menue .l1 { width:360px; } .menue .l2 { width:620px; min-height:550px; float:left; color:#c71f3a; font-size:17px; margin: 33px 0 0 -155px; letter-spacing:4px; background-color: transparent; overflow:visible; z-index:999; display:block; position:relative; } .menue.engin .l2 { width:465px; } .menue .handy {width:145px; height:161px; display:block; margin:0; float:right; } .menue UL { list-style-type:none; } #nav-list-example { width:620px; font-size:17px; padding:0; } .engin #nav-list-example { width:475px; } #nav-list-example li { width:145px; height:239px; float: left; position: relative; margin:0 0 10px 10px; } li.mbt1 { margin-left:165px !important; } li div { width:145px; height:239px; overflow: hidden; top: 0; left: 0; float:left; } li.mbt1 div{ background:url(images/bt_1.png) bottom center; } li.mbt2 div{ background:url(images/bt_2.png) bottom center; } li.mbt3 div{ background:url(images/bt_3.png) bottom center; } li.mbt4 div{ background:url(images/bt_4.png) bottom center; } li.mbt5 div{ background:url(images/bt_5.png) bottom center; } li.mbt6 div { background:url(images/bt_6.png) bottom center; } li.mbt7 div{ background:url(images/bt_7.png) bottom center; } .engin li.mbt1 div{ background:url(images/bt_1e.png) bottom center; } .engin li.mbt2 div{ background:url(images/bt_2e.png) bottom center; } .engin li.mbt3 div{ background:url(images/bt_3e.png) bottom center; } .engin li.mbt4 div{ background:url(images/bt_4e.png) bottom center; } .engin li.mbt5 div{ background:url(images/bt_5e.png) bottom center; } .engin li.mbt6 div{ background:url(images/bt_6e.png) bottom center; } .engin li.mbt7 div{ background:url(images/bt_7e.png) bottom center; } li div a { text-align:center; width:145px; height:158px; display:block; margin-top:81px; padding:24px 0 0 0 ; color: #fff; font-size:19px; letter-spacing:1px; xbackground-color:magenta } li.reihe2 div a { height:158px; display:block; margin-top:81px ; } .engin li div.back { background-position: top center !important; } li div.back a { text-align:center; width:145px; height:118px; display:block; margin-top:0; color: #fff; font-size:19px; letter-spacing:1px; xbackground-color:green; } li div.back a p { font-size:16px; text-align:left; line-height:21px; border-bottom: 1px solid #fff; white-space:nowrap; padding-bottom: 11px; margin:0; width:108px; xbackground-color:cyan; } li.mbt1 div.back a { padding: 100px 0 10px 18px; } li.mbt2 div.back a { padding: 100px 0 10px 18px; } li.mbt3 div.back a { padding: 100px 0 10px 18px; } li.mbt4 div.back a { padding: 36px 0 10px 18px; } li.mbt5 div.back a { padding: 36px 0 10px 18px; } li.mbt6 div.back a { padding: 36px 0 10px 18px; } li.mbt7 div.back a { padding: 110px 0 10px 18px; } li.mbt6 div.front a { font-size:25px; padding-top:18px; font-weight:bold;text-shadow:} .engin li div a { text-align:left; } .engin li div a { padding: 0 0 10px 15px; } .engin li.mbt1 div.front a { padding-top: 0px; } .engin li.mbt2 div.front a { padding-top: 0px; } .engin li.mbt3 div.front a { padding-top: 30px; } .engin li.mbt4 div.front a { padding-top: 30px; } .engin li.mbt5 div.front a { padding-top: 30px; } .engin li.mbt1 div.back a { padding-top: 63px; } .engin li.mbt2 div.back a { padding-top: 42px; } .engin li.mbt3 div.back a { padding-top: 119px; } .engin li.mbt4 div.back a { padding-top: 119px; } .engin li.mbt5 div.back a { padding-top: 100px; } .engin .nd-leist { width:145px; height:488px; float:left; margin-top:50px; padding-left:10px; } .engin .nd-leist div { display:block; width:130px; height:77px; padding:81px 0 0 15px; background:#68001a; } .engin .nd-leist div.unten { margin-top:172px; padding:32px 0 0 15px; height:126px; background:#be161d; } .engin .nd-leist div p { line-height:23px; color: #fff; font-size:18px; letter-spacing:1px; border-bottom: 1px solid #fff; white-space:nowrap; padding-bottom: 11px; margin:0; width:108px; } .bottomwrap { position:absolute; bottom:0px; width: 100%; height: 277px; z-index:922; overflow:hidden; } .bottom { width: 970px; margin: 38px auto; height:239px; } .bottom ul { width: 145px !important; float:right; margin: 0 !important; padding: 0 !important; background:none !important; } li.mbteam { width: 145px; padding:0px !important; margin:0px !important; } li.mbteam div { background:url(images/bottom_sb-rot.png) top center no-repeat; position:absolute;} li.mbteam a, li.mbteam a:Visited, li.mbteam div.back a { width: 145px; height:122px; font-size:16px !important; color:#fff; text-align:center; padding:44px 0 0 0 !important; margin:0; xbackground-color:#0F0; } li.mbteam div.back { background-position: bottom center; height:239px; } .f-aktiv { font-weight:bold; } /*** P R O J E K T P A R T N E R ***/ .projektpartner .c1 h1, .projektpartner .c1-de h1 { color:#000; } .projektpartner .c1 a, .c1 a:Visited {} .projektpartner .c1-de a, .c1-de a:Visited {padding: 50px 0px 0px 30px; margin-top:-43px;} /*** K O N T A K T ***/ .kontakt .c1 h1 { color:#000; } .kontakt .c1 a, .c1 a:Visited { border-top: 1px solid #fff; } .kontakt .content .c2 { padding-bottom:0 !important; border:0; } .kontakt p.oper { border-top: 10px solid #000; padding:0; margin-top:20px; } .kontakt p.oper img { margin:-10px 0 0 -290px; border-top: 10px solid #000; padding:0; } .mapps { margin-top:-374px; } .mapps-link { } /*** I M P R E S S U M ***/ .impressum .c1 h1 { color:#fff; } .impressum .c1 a, .c1 a:Visited { border-top: 1px solid #fff; } .impressum .border { padding-bottom:16px; border-bottom:4px solid #000; } @media only screen and (max-width: 970px) { body, .wrapper { width:970px; } } /*** M O B I L E H A N D H E L D ***/ @media only screen and (max-width: 767px) { body { background-size:150%; background-position: left 66px !important; background-repeat:no-repeat; } .mensch { background-image:url(images/bg_1_1.jpg); } .raum { background-image:url(images/bg_raum_1.jpg); } .markt { background-image:url(images/bg_markt_1.jpg); } .wert { background-image:url(images/bg_wert_1.jpg); } .trend { background-image:url(images/bg_trend_1.jpg); } .leistungen { background-image:url(images/bg_leistungen_1.jpg); } .referenzen { background-image:url(images/bg_referenzen_1.jpg); } .planung { background-image:url(images/bg_planung_1.jpg); } .realisierung { background-image:url(images/bg_realisierung_1.jpg); } .grundlagen { background-image:url(images/bg_grundlagen_1.jpg); } .machbarkeits { background-image:url(images/bg_machbarkeitsstudie_1.jpg); } .entscheidung { background-image:url(images/bg_entscheidung_1.jpg); } body, .wrapper, .lang, .logos, a.l1, .menue .l1, div.l2, #nav-list-example, #nav-list-example li, #nav-list-example li div, #nav-list-example li div a, div#nav-mob, div#nav-mob ul, div#nav-mob li, div#nav-mob li a, .footerwrap, .footer, .footerbg, .bottom, .bottomwrap, .content, .c1, .c2, .c3, .l1, .l2, a.b-sb-mobil, .handy, .menue .handy { width:100%; text-align:center; float:none; clear:both; margin:0; padding:0; position:relative; display:block; } .wrapper, .projektpartner .wrapper, .kontakt .wrapper, .impressum .wrapper { background:none; } .bread, #nav-list-example, .menue .l2, .nd-leist, .footerbg { display:none !important; } .f2, .handy { margin:0; } .c1 { background:#ff0000; } .projektpartner .c1 h1, .projektpartner .c1-de h1 { color:#fff; } .entry .content .c1, .entry .content .c2 { width:100%; padding:13px 0; text-align:center; background-image:none; background:none; } .entry .content .c1 img, .entry .content .c2 img { width:230px;} .entry .content a, .entry .content p { width:auto; font-size:15px; padding-top:13px; } .entry .content .c3 { margin:0; border-bottom:none !important; } .menue .header { margin:auto; background: #CCC; } .menue span.mslogan { display: block; padding: 7px 0; margin: 23px 0 0 0; font-size: 12px; letter-spacing: 1px; font-style:normal; color:#c71f3a; height: 13px; line-height: normal; } .lang .butt { width:100%; float:none; text-align:center; height:26px } .menue .lang .butt { margin: -54px auto 0 auto; } .lang .butt a { width:100%; text-align:center; height:26px } .logos { height:99px; margin:0px; padding:0px; background-color:#e9e5e4 } a.l1 { margin-top:29px; background-position: center 9px !important; background-color:#e9e5e4 } .menue .l1 { height: 36px; background-size: 296px !important; text-indent:0px; padding-top:144px; font-size:14px; background-position: center 22px !important; margin:0 auto; border-top:1px solid #fff; } .logos div.l2 { font-size: 12px; letter-spacing: 1px; padding: 7px 0; background: #CCC; line-height: normal; height: 13px; margin-top:-119px; } .menue.engin span.mslogan, .engin .logos div.l2 { color:#0060ae; letter-spacing: 2px !important;} div#nav-mob { display:block; } #nav-mob li { line-height:3em; margin:1px 0 0 0 !important; } #nav-mob li a, #nav-mob li a:visited, #nav-mob li { color:#fff; font-size:16px; } #nav-mob li.mbt1 a{ background:#c71f3a; } #nav-mob li.mbt2 a{ background:#de4328; } #nav-mob li.mbt3 a{ background:#00386e; } #nav-mob li.mbt4 a{ background:#67001a; } #nav-mob li.mbt5 a{ background:#90404b; } #nav-mob li.mbt6 a{ background:#ed1c24; } #nav-mob li.mbt7 a{ background:#001743; } .engin #nav-mob li.mbt0 { background:#be161d; } .engin #nav-mob li.mbt3 a{ background:#0062b0; } .engin #nav-mob li.mbt4 a{ background:#024681; } .engin #nav-mob li.mbt5 a{ background:#003352; } .engin #nav-mob li.mbt6 { background:#68001a; } .engin #nav-mob li.mbt1 a{ background:#6f686f; } .engin #nav-mob li.mbt2 a{ background:#1c5ca0; } .c1 { height:auto; text-align:left; } .c1 h1, .content h2, .content p, .c2 p.bigger { padding: 20px; text-align:left;} .content h2 { padding-bottom:0; } .c2 p.bigger { padding-top:0; } .c2 { margin-bottom: 0px !important; padding-bottom:20px; } .handy, .menue .handy, .c3 { background-color: #fff; background-position: right 19px; text-align:right; padding: 16px 0; height: 56px; } .l3, .menue .l3 { float:left; margin-top: -20px; } .tel3 { float:right; margin-top:-16px; height:66px; width: 123px !important;} .team .accordion img { margin: 0; position: relative; width: 100%; height:auto !important} .accordion h3 { text-align:left; } .footerwrap { padding-top:40px; z-index:222; } .footer { background-color: #68001a; display:block; height:3em; } .engin .footer { background-color: #00274b; } .footer a { font-size:13px; } .footer .f1 a { padding:13px 0 0 16px; } .footer .f2 a { padding:13px 16px 0 0; } .bottomwrap { height: 3em; margin:-79px 0 0 0; } .bottom { height: 3em; } a.b-sb-mobil { background:#ed1c24; height:3em; text-indent:0px; line-height:2.5em; color:#ffffff;} a.b-sb{display:none;} .kontakt p.oper img.bueld { display:none; } .mapps { margin-top:0; padding-bottom: 11%; overflow: hidden; width:100% } .mapps iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } }