/* CSS-Design by dianimation, Diana Muigg */ /* BASICS -----------------------------------------------------------------------------------------------------------------------------*/ html, body { width: 100%; height: 100%; min-width: 1000px; min-height: 700px; font-family: "HelveticaNeue", "Helvetica Neue", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 13px; line-height: 20px; color: #A7A7A7; } body { overflow-y: scroll; } .floatri { float: right !important; } .floatle { float: left; } .clear { clear: both; } .clearri { clear: right; } .clearle { clear: left; } .print { display: none; } .printtext { display: none; } /* GENERAL CONTENT TYPO ---------------------------------------------------------------------------------------------------------------*/ /* Linien */ .hr { clear: both; display: block; height: 20px; width: 980px; padding: 22px 0 !important; } .above { background: transparent url(cssimg/shade_hr_above.png) no-repeat top center; } .below { background: transparent url(cssimg/shade_hr.png) no-repeat center center; } /* Typo */ p { padding: 0 0 20px 0; } .falsch { background: yellow; } .intro { color: #515151; } .light { color: #A7A7A7; } .white { color: #FFFFFF; } .red { color: #990033; } .nextpm { text-transform: none !important; font-weight: bold; color: #990033; } .pm { text-transform: none !important; font-weight: normal; color: #990033; } .little { font-size: 11px; line-height: 18px; } .nospace { padding: 0 !important; margin: 0 !important; } .gloss { position: absolute; bottom: 0; right: 0; } .zitat { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color: #515151; font-style: italic; } .credits { position: absolute; bottom: 10px; right: 40px; font-size: 11px; line-height: 18px; } .cycleit .credits { top: 280px; right: 38px; } a { color: #A7A7A7; text-decoration: none; } a:hover { color: #990033; } h1, h2, h3, h4, h5, h6 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; text-transform: uppercase; font-weight: bold; } h1 { font-size: 36px; line-height: 30px; color: #E2E2E2; } h2 { font-size: 28px; line-height: 28px; color: #515151; padding-bottom: 20px; text-transform: none; font-weight: normal; font-style: italic; } h3 { font-size: 18px; line-height: 22px; color: #515151; padding: 40px 0 20px 0; } h4 { font-size: 15px; line-height: 20px; text-transform: none; } h5 { font-size: 13px; line-height: 18px; color: #515151; } h6 { font-size: 11px; line-height: 12px; text-align: center; color: #444444; font-weight: normal; } h6 span { text-transform: none; } b { color: #515151; font-weight: normal; } em { font-style: italic; } strong { font-weight: bold; } sup { line-height: 80%; } /* GENERAL POSITIONS ------------------------------------------------------------------------------------------------------------------*/ #bodyhelper { position: relative; height: 100%; width: 1px; top: 0px; left: 50%; } #bodywrap { position: relative; min-height: 100%; width: 1000px; top: 0px; left: -500px; } #firstwrap, #contentwrap { padding: 0 30px; overflow: visible; } #firstwrap div.contentfading, #contentwrap div.contentfading, body.siteleist #pmgrafik, body.siteleist #first { display: none; } /* header */ #header { position: fixed; width: 100%; height: 82px; top: 0; left: 0; background: #FFFFFF; z-index: 998; } #headerhelper { width: 1000px; display: block; margin: 10px auto; } #headerlogo { float: right; margin-right: 40px; width: 200px; height: 60px; cursor: pointer; background: url(cssimg/logo.png) top right no-repeat; } #headerlogo h1 { font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; line-height: 18px; color: #515151; text-transform: none; font-weight: normal; } #headerlogo h1, #headerlogo h1 span, #headerlogo h5 { display: none; } #headerlogo:hover h1 { display: block; color: #515151; position: relative; left: 2px; top: 50px; margin: 0; background: none; } #headerlogo:hover h5 { display: block; color: #A7A7A7; position: relative; left: -205px; top: -5px; text-align: right; z-index: 1000; } #headertext { clear: right; float: right; text-align: right; padding: 15px 35px 0 20px; color: #FFFFFF; } /* footer */ #footer { position: fixed; width: 100%; height: 20px; bottom: 0; left: 0; margin: 0 auto; padding: 10px 0 0 0; background: #FFFFFF; z-index: 998;} #footer a { color: #444444; } #footer a:hover { color: #990033; } /* HAUPTNAVIGATION --------------------------------------------------------------------------------------------------------------------*/ #mainnavi { float: left; padding-top: 10px; position: relative; width: 700px; } #mainnavi li { float: left; padding-left: 20px; } #mainnavi li a { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 13px; line-height: 20px; text-transform: uppercase; font-weight: bold; text-decoration: none; color: #A7A7A7; } #mainnavi li a:hover, #mainnavi li a:focus { color: #515151; background-position: -60px 0; } #mainnavi li a.selected, #mainnavi li a.selectedin { color: #515151; background-position: -120px 0; } #mainnavi #subnavi { position: absolute; margin-top: -2px; } #mainnavi #subnavi li a { font-weight: normal; text-transform: none; font-style: italic; line-height: 13px; color: #515151;} #mainnavi #subnavi li a:hover, #mainnavi #subnavi li a:focus, #mainnavi #subnavi li a:active, #mainnavi #subnavi li a.selected { color: #990033;} /* Unternavi mit Pfeil #mainnavi #subnavi li:first-child { width: 18px; height: 28px; text-indent: -10000px; margin: -3px 0 0 20px; padding: 0; background: url(cssimg/arrows.png) no-repeat bottom left; background-position: -5px -90px; } #mainnavi #subnavi li:first-child:hover { background-position: -5px -120px; } */ /* NAVIGATIONSLEISTE -----------------------------------------------------------------------------------------------------------------*/ #navi { position: fixed; top: -130px; left:0; width: 100%; height: 130px; overflow: hidden; z-index: 999; background: url(cssimg/navi_hg.png) left bottom repeat-x; } #navi #carousel { padding: 0 40px 0 30px; } #navi #subnavi { width: 100%; list-style: none; } #navi #subnavi li { float: left; } #navi #subnavi li a { display: block; width: 200px; padding-top: 6px; overflow: hidden; white-space: nowrap; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; text-transform: none; color: #E2E2E2; text-align: center; font-size: 11px; line-height: 12px; font-style: italic; text-decoration: none; } #navi #subnavi li a:hover, #navi #subnavi li a:focus, #navi #subnavi li a:active, #navi #subnavi li a.selected { color: #515151; } #navi #subnavi li a img { opacity: 0.6; height: 100px; width: 180px; } #navi #subnavi li a:hover img, #navi #subnavi li a:focus img, #navi #subnavi li a:active img, #navi #subnavi li a.selected img { opacity: 1; } /* Elastislide Style */ .es-nav { position: absolute; background: #DEE0E2; width: 40px; height: 120px; margin-left: -30px; } .es-nav span { position: absolute; width: 30px; height: 30px; text-indent: -10000px; cursor: pointer; opacity: 0.8; background: transparent url(cssimg/arrows.png) no-repeat bottom left; z-index: 1000; } .es-nav span.es-nav-prev { background-position: -30px -90px; left: 5px; top: 25px; } .es-nav span.es-nav-prev:hover { background-position: -30px bottom; opacity: 1; } .es-nav span.es-nav-next { background-position: 0 -90px; left: 9px; top: 65px; } .es-nav span.es-nav-next:hover { background-position: 0 bottom; opacity: 1; } /* CONTENT ----------------------------------------------------------------------------------------------------------------------------*/ div.col2 { float: left; width: 50%; } div.col3 { float: left; width: 33%; } div.col23 { float: left; width: 64%; } ul.minilist { padding: 0 0 20px 0; } ul.minilist li { text-indent: 20px; transparent url(cssimg/nix.png) no-repeat left center;} div.inline { position: relative; top: -46px; margin: 0 0 -15px 0; } div.block { display: block !important; } /* CONTENT USER INTERFACE -------------------------------------------------------------------------------------------------------------*/ /* Buttons */ .button, .button:visited { position: relative; display: inline-block; padding: 3px 26px 1px 12px; color: #FFFFFF; text-decoration: none; font-weight: bold; cursor: pointer; background: #E2E2E2 url(cssimg/arrowhalf_weiss.png) no-repeat right center !important; border-radius: 12px; box-shadow: 0 1px 1px rgba(0,0,0,0.25); -moz-border-radius: 12px; -webkit-border-radius: 12px; -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.25); -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.25); text-shadow: 0 -1px 1px rgba(0,0,0,0.25); border-bottom: 1px solid rgba(0,0,0,0.25); } .button:hover { background-color: #990033 !important; color: #FFFFFF; } /* Newsmodul */ #news { position: relative; } #news .newswrap { background: #FFFFFF; } #news .newsbg { display: inline-block !important; margin: 0; padding: 15px; border: 8px solid #FFFFFF; background: #F4F4F4; -moz-box-shadow: 0px 0px 2px #E2E2E2; -webkit-box-shadow: 0px 0px 2px #E2E2E2; box-shadow: 0px 0px 2px #E2E2E2; } #news .newstext { margin: 0; padding: 0; } #news .shadow { width: 930px; height: 18px; margin-top: -5px; background: url(cssimg/shade_news.png) no-repeat top center; } /* SlideShow Cycle */ .bullets { position: absolute; z-index: 900; list-style: none; padding: 0; } .bullets a { display: block; float: left; cursor: pointer; padding-right: 4px; width: 11px; height: 11px; text-indent: -9999px; background: url(cssimg/tnslider_dot.png) no-repeat top center; } .bullets a:hover, .bullets a.activeSlide { background: url(cssimg/tnslider_dot.png) no-repeat bottom center; } /* CONTENT ALLGEMEIN ------------------------------------------------------------------------------------------------------------------*/ div.contentfading h1 { position: relative; left: -30px; margin-bottom: 0; } #firstwrap div h1 { padding-bottom: 20px; color: #818181; text-shadow: 1px 1px 2px #DDDDDD; } /* CONTENT UNTERNEHMEN ----------------------------------------------------------------------------------------------------------------*/ .siteuntern div.contentfading { padding: 130px 0 0 20px; } /* Unternehmen Startseite */ .siteuntern .cycleit { float: right; position: relative; width: 300px; height: 300px; margin: 0px 5px 60px 45px; } .siteuntern .bullets { right: 75px; margin: -18px 0 0 0; } .siteuntern #bueroneu .cycleit { float: left; position: relative; width: 300px; height: 300px; margin: 7px 0 60px -20px; } .siteuntern #bueroneu .bullets { right: 705px; margin: 27px 0 0 0; } .siteuntern img.buerobild { width: 300px; height: 300px; box-shadow: -1px 3px 5px #A7A7A7; border-radius: 42px; -moz-box-shadow: -1px 3px 5px #A7A7A7; -webkit-box-shadow: -1px 3px 5px #A7A7A7; -moz-border-radius: 42px; -webkit-border-radius: 42px; } /* Team */ .siteuntern #team a { color: #515151; font-weight: bold; text-decoration: none; } .siteuntern #team a:hover { color: #990033; } .siteuntern #team { width: 600px; } .siteuntern #teambild { padding: 0 0 35px 0; background: transparent url(cssimg/team/teamhg.png) no-repeat top left; } .siteuntern .kwicks { overflow: visible !important; list-style: none; position: relative; margin: -50px 0 0 0; cursor: pointer; } .siteuntern .kwicks li { overflow: visible !important; float: left; width: 145px; height: 540px; background-color: transparent !important; } .siteuntern .kwicks li { overflow: visible !important; float: left; width: 145px; height: 540px; background-color: transparent !important; } .siteuntern .kwicks li div.bg { position: absolute; height: 540px; width: 150px; float: left; background-color: transparent !important; } #kwick_hs { z-index: 300 !important; } #kwick_hs div.bg { background: transparent url(cssimg/team/team_hs.png) no-repeat center left; } #kwick_hs.active div.bg { background: transparent url(cssimg/team/team_hs_active.png) no-repeat center left; } #kwick_dm { z-index: 900 !important; } #kwick_dm div.bg { background: transparent url(cssimg/team/team_dm.png) no-repeat center left; } #kwick_dm.active div.bg { background: transparent url(cssimg/team/team_dm_active.png) no-repeat center left; } #kwick_mb { z-index: 100 !important; } #kwick_mb div.bg { background: transparent url(cssimg/team/team_mb.png) no-repeat center left; } #kwick_mb.active div.bg { background: transparent url(cssimg/team/team_mb_active.png) no-repeat center left; } #kwick_gs { z-index: 900 !important; } #kwick_gs div.bg { background: transparent url(cssimg/team/team_gs.png) no-repeat center left; width: 178px; } #kwick_gs.active div.bg { background: transparent url(cssimg/team/team_gs_active.png) no-repeat center left; } #kwick_as { z-index: 100 !important; } #kwick_as div.bg { background: transparent url(cssimg/team/team_as.png) no-repeat center left; width: 165px; } #kwick_as.active div.bg { background: transparent url(cssimg/team/team_as_active.png) no-repeat center left; } #kwick_fh { z-index: 300 !important; } #kwick_fh div.bg { background: transparent url(cssimg/team/team_fh.png) no-repeat center left; } #kwick_fh.active div.bg { background: transparent url(cssimg/team/team_fh_active.png) no-repeat center left; /* width: 390px; */ } .siteuntern .kwicks div.transp { position: absolute; width: 290px; height: 540px; margin: 0 0 0 100px; background: #FFFFFF; opacity: 0.97; } .siteuntern .kwicks div.beschr { position: absolute; width: 290px; margin: 0 0 0 100px; } .siteuntern .kwicks div.zitat { height: 100px; padding: 45px 0 0 10px; } .siteuntern .kwicks div.visit { height: 85px; padding: 11px 0 0 55px; background: url(cssimg/team/team_visithg.png) no-repeat top right; } .siteuntern .kwicks #kwick_gs div.visit { padding-left: 65px; } .siteuntern .kwicks div.little { height: 300px; } .siteuntern .kwicks .little p { padding: 0 10px 6px 42px; } .siteuntern .kwicks .little p b { text-transform: uppercase; } .siteuntern .kwicks #kwick_dm div.transp, .siteuntern .kwicks #kwick_dm div.beschr { margin: 0 0 0 110px; width: 275px; } .siteuntern .kwicks #kwick_mb div.transp, .siteuntern .kwicks #kwick_mb div.beschr { margin: 0 0 0 106px; width: 290px; } .siteuntern .kwicks #kwick_gs div.transp, .siteuntern .kwicks #kwick_gs div.beschr { margin: 0 0 0 120px; } .siteuntern .kwicks #kwick_as div.transp, .siteuntern .kwicks #kwick_as div.beschr { margin: 0 0 0 135px; width: 290px; } .siteuntern .kwicks #kwick_fh div.transp, .siteuntern .kwicks #kwick_fh div.beschr { margin: 0 0 0 100px; width: 300px; } .siteuntern .kwicks #kwick_mb div.visit { padding: 11px 0 0 40px; } .siteuntern .kwicks #kwick_as div.visit { padding: 11px 0 0 50px; } .icons a { float: left; } .icons a div { width: 16px; height: 14px; opacity: 0.4; } .icons a:hover div { opacity: 1; } .qr { background: url(cssimg/icon_qr.png) no-repeat bottom center; } .mail { background: url(cssimg/icon_email.png) no-repeat bottom center; } .vcard { background: url(cssimg/icon_vcard.png) no-repeat bottom center; } .siteuntern .kwicks div.transp, .siteuntern .kwicks div.beschr { opacity: 0; display: none; } /* Leitbild */ .siteuntern img.logobild { width: 325px; height: 325px; margin: 30px 40px 20px -10px; } .siteuntern #leitbild { width: 600px; } /* Nachhaltigkeit */ .siteuntern img.helm { width: 360px; height: 310px; margin: 80px 35px 20px -40px; } /* Kunden */ .sponsorListHolder { margin: 0 0 22px -4px; } .sponsor { position: relative; width: 160px; height: 160px; float: left; margin: 4px; cursor: pointer; overflow: hidden; /* border-radius: 22px; -moz-border-radius: 22px; -webkit-border-radius: 22px; */ } .sponsorFlip { position: absolute; left: 0; top: 0; width: 158px; height: 158px; border: 1px solid #ddd; z-index: -1; background: #fbfbfb url(cssimg/sponsor_hg.png) no-repeat center center; /* border-radius: 22px; -moz-border-radius: 22px; -webkit-border-radius: 22px; */ } .sponsor:hover .sponsorFlip { background: none; box-shadow: 0 0 24px #ddd inset; z-index: -1; -moz-box-shadow: 0 0 24px #ddd inset; -webkit-box-shadow: 0 0 24px #ddd inset; /* border-radius: 22px; -moz-border-radius: 22px; -webkit-border-radius: 22px; */ } .sponsorFlip img { position: absolute; top: 50%; left: 50%; margin: -72px 0 0 -72px; } .sponsorData { margin-left: 1px; margin-top: 170px; width: 160px; height: 82px; background: #515151; box-shadow: 0 -1px 5px #A7A7A7; -moz-box-shadow: 0 -1px 5px #A7A7A7; -webkit-box-shadow: 0 -1px 5px #A7A7A7; } .sponsorDescription { padding: 11px 8px 0 10px; font-style: italic; line-height: 12px; } .sponsorURL { padding-left: 12px; } .sponsorURL a:hover { color: #FFFFFF; } /* CONTENT LEISTUNGEN -----------------------------------------------------------------------------------------------------------------*/ .siteleist img.leistungskreis { margin: -190px 0 0 120px; } .siteleist #first { padding: 130px 0 0 20px; } .siteleist #first h1 { position: relative; left: -30px; } .siteleist #first .col3 p { padding-right: 60px; } #pmgrafik { position: absolute; left: 200px; top: 155px; width: 610px; height: 620px; } #pmgrafik img.pmkreis { position: absolute; margin: 196px 0 0 127px; } #pmgrafik #blockleistungen { position: absolute; left: 140px; top: 50px; } /* Schriftauszeichnung */ .va-slice { clear: both; display: block; width: 530px; height: 34px; border-bottom: 1px solid #E2E2E2; } .va-slice h2 a { text-transform: uppercase; font-style: normal; font-weight: bold; color: #B7B7B7; text-decoration: none; font-size: 18px; line-height: 20px; padding-top: 8px; float: left; } #pmgrafik h5 { padding: 6px 0 4px 0; } #pmgrafik h5 span { text-transform: none; font-size: 11px; line-height: 12px; font-style: italic; } #pmgrafik a { color: #515151; } #pmgrafik a:hover, #pmgrafik a.selected { color: #990033; } .siteleist #news { margin: -20px 0 0 25px; display: none; } .siteleist #news .newsbg { cursor: pointer; } .siteleist #news .newstext { height: 572px; width: 277px; } .siteleist #news .shadow { position: absolute; width: 259px; height: 680px; margin: -22px 0 0 -17px; z-index: -1; background: url(cssimg/shade_leistungen.png) no-repeat top center; } #leistungsblock h3 { padding: 0 0 20px 0; } #leistungsblock h5 { padding: 0 0 10px 0; } #leistungsblock h5.nextpm { text-transform: none; padding: 12px 0 10px 0; } #leistungsblock p { color: #515151; padding-bottom: 10px; } #leistungsblock .intronavi { padding: 0; } #leistungsblock .intronavi a { /* padding-left: 16px; background: url(cssimg/arrow_dunkel.png) center left no-repeat; */ } #leistungsblock a { color: #515151; } #leistungsblock a:hover { color: #990033; } /* CONTENT PROJEKTE -------------------------------------------------------------------------------------------------------------------*/ .siteproj div.contentfading { padding-top: 130px; } .siteproj .cycleit { float: left; position: relative; width: 560px; height: 300px; margin: 98px 45px 60px 5px; } .siteproj .bullets { right: 445px; margin: 80px 0 0 0; } .siteproj img.projbild { position: relative; width: 560px; height: 300px; border-radius: 42px; -moz-border-radius: 42px; -webkit-border-radius: 42px; } .projblock #news { padding: 0 0 15px 0; margin-top: -8px; } .projblock #news .newsbg { width: 270px; min-height: 265px; padding: 20px 10px 0 15px; } .projblock #news .newsbg .gloss { padding: 0 38px 26px 0; } /* CONTENT WETTBEWERBE ----------------------------------------------------------------------------------------------------------------*/ .sitewbw div.contentfading { padding-top: 130px; } .sitewbw .cycleit { float: left; position: relative; width: 300px; height: 300px; margin: 70px 45px 60px 5px; } .sitewbw .bullets { right: 705px; margin: 52px 0 0 0; } .sitewbw #wbwbuch .cycleit { float: right; margin: 0 5px 60px 45px; } .sitewbw #wbwbuch .bullets { right: 75px; margin: -18px 0 0 0; } .sitewbw img.wbwbild { width: 300px; height: 300px; box-shadow: -1px 3px 5px #A7A7A7; border-radius: 42px; -moz-box-shadow: -1px 3px 5px #A7A7A7; -webkit-box-shadow: -1px 3px 5px #A7A7A7; -moz-border-radius: 42px; -webkit-border-radius: 42px; } .sitewbw .floatri img.wbwbild { margin-right: 12px; } /* Introblock Wettbewerbe */ .wbwintro #news .newstext { text-align: center; border-right: 1px solid #DDDDDD; border-left: 1px solid #FFFFFF; } .wbwintro #news .newstext:first-child { border-left: none; } .wbwintro #news .newstext:last-child { border-right: none; } .wbwintro #news .newstext h4 { padding: 0 20px; } .wbwintro #news .newstext h5 { padding: 0 20px; } .wbwintro .col2 div { padding: 0 40px; } /* Wettbewerbsseiten */ .wbwblock #news { padding: 0 0 15px 0; margin-top: -8px; color: #515151; } .wbwblock #news .newsbg { width: 540px; min-height: 262px; padding: 15px 15px 10px 15px; } .wbwblock #news .newstext { text-align: left; border: none; } .wbwblock #news .newstext p:last-child { padding-bottom: 0; } .wbwblock #news .newstext p em { color: #A7A7A7; } .wbwblock .button { margin-right: 13px; } /* CONTENT KONTAKT --------------------------------------------------------------------------------------------------------------------*/ .sitekont div.contentfading { padding: 130px 0 0 0; margin-left: -5px; } .sitekont #map { float: left; width: 600px; height: 400px; padding: 58px 50px 0 0; } .sitekont #map iframe { border-radius: 34px; -moz-border-radius: 34px; -webkit-border-radius: 34px; } .sitekont h5 a { padding: 2px 0; color: #515151; font-weight: bold; } .sitekont h5 a:hover, .sitekont h5 a.selected { color: #990033; } /* CONTENT IMPRESSUM ------------------------------------------------------------------------------------------------------------------*/ .siteimpr div.contentfading { padding: 130px 220px 0 100px; }