/* -------------------------------------------- */ /* junidas Stylesheet: DEFAULT */ /* -------------------------------------------- */ /* Created by two tribes GmbH, Stuttgart */ /* -------------------------------------------- */ /* StyleSheet Scope: INSIDE PAGES */ /* !-------------------------------------------- */ /* !Reset-styles */ /* !-------------------------------------------- */ html { color: #000; font-size: small; font-family: "Trebuchet MS", "Trebuchet", "Helvetica", "Arial", sans-serif; text-decoration: none; background: #fff; } body, h1, h2, h3, h4 { padding: 0; margin: 0; } ul, li, dl, dt, dd { margin: 0; padding: 0; list-style: none; } a { text-decoration: none; outline: 0; /* tames Firefox' annoying outlines */ } a:hover { text-decoration: underline; } /* !-------------------------------------------- */ /* !General Page Layout */ /* !-------------------------------------------- */ /* === IE7 needs this wrapper. Doing the same with works only in modern browsers */ div#globalWrapper { border: 1px solid #969182; margin: 5px auto 10px auto; padding: 18px 21px 15px 30px; width: 888px; /* 948px overall width, IE7-fix needed! */ } /* === Break up floated columns at the end of the page */ #footer { clear: both; } /* === Setup global font policy for Dax usage */ h1, h2, h3, #section p { font-family: "Dax", "Trebuchet MS", "Trebuchet", "Helvetica", "Arial", sans-serif; } cite, p.citator { font-family: "Dax-Regular", "Helvetica", "Arial", sans-serif; } h3 { font-family: "Dax-Light", "Trebuchet MS", "Trebuchet", "Helvetica", "Arial", sans-serif; letter-spacing: 1px; } /* !-------------------------------------------- */ /* !Page Header & Navigation Level 1 */ /* !-------------------------------------------- */ /* === junidas Logo + Backlink to Home */ h1 { background: transparent url("/jboard/images/logo_inside.png") no-repeat 0 0; height: 51px; width: 157px; text-indent: -1000em; } h1 a { display: block; height: 100%; width: 100%; } /* === L1-Navigation Container */ ul#nav-l1 { height: 40px; padding: 13px 0 47px 296px; } /* === L1-Navigation Buttons */ ul#nav-l1 li { background: transparent url("/jboard/images/nav_level1.png") no-repeat 0 0; border-left: 1px solid #969182; float: left; height: 40px; margin: 0 0 0 0; padding: 0 11px 0 12px; text-indent: -1000em; } /* === Thanks a milion, Firefox! You still can't do bp-x/y! */ ul#nav-l1 li#l1nav-software { background-position: -161px 0; width: 144px; } ul#nav-l1 li#l1nav-security { background-position: -161px -113px; width: 137px; } ul#nav-l1 li#l1nav-hosting { background-position: -161px -226px; width: 51px; } ul#nav-l1 li#l1nav-corporate { background-position: -161px -339px; width: 90px; } ul#nav-l1 li#l1nav-contact { background-position: -161px -453px; width: 50px; } ul#nav-l1 li.active, ul#nav-l1 li:hover { border-color: #81c325; } ul#nav-l1 li.active#l1nav-software, ul#nav-l1 li#l1nav-software:hover { background-position: 7px 0; } ul#nav-l1 li.active#l1nav-security, ul#nav-l1 li#l1nav-security:hover { background-position: 7px -113px; } ul#nav-l1 li.active#l1nav-hosting, ul#nav-l1 li#l1nav-hosting:hover { background-position: 7px -226px; } ul#nav-l1 li.active#l1nav-corporate, ul#nav-l1 li#l1nav-corporate:hover { background-position: 7px -339px; } ul#nav-l1 li.active#l1nav-contact, ul#nav-l1 li#l1nav-contact:hover { background-position: 7px -453px; } ul#nav-l1 li a { font-size: 15px; display: block; height: 100%; width: 100%; } /* !-------------------------------------------- */ /* !Section Header */ /* !-------------------------------------------- */ /* === Signalbox Image-Container */ #section { background-color: transparent; background-repeat: no-repeat; background-position: 0 0; clear: both; height: 188px; position: relative; } body.section-software #section {background-image: url("/jboard/images/signal_inside_software.jpg");} body.section-security #section {background-image: url("/jboard/images/signal_inside_security.jpg");} body.section-hosting #section {background-image: url("/jboard/images/signal_inside_hosting.jpg");} body.section-corporate #section {background-image: url("/jboard/images/signal_inside_corporate.jpg");} body.section-contact #section {background-image: url("/jboard/images/signal_inside_contact.jpg");} /* === Inner-page Signalbox, significantly less tall */ #section.shortened { height: 33px; } body.section-software #section.shortened {background-image: url("/jboard/images/signal_mini_software.jpg");} body.section-security #section.shortened {background-image: url("/jboard/images/signal_mini_security.jpg");} body.section-hosting #section.shortened {background-image: url("/jboard/images/signal_mini_hosting.jpg");} body.section-corporate #section.shortened {background-image: url("/jboard/images/signal_mini_corporate.jpg");} body.section-contact #section.shortened {background-image: url("/jboard/images/signal_mini_contact.jpg");} /* === L1 Section Headline */ h2 { font-size: 52px; left: 309px; position: absolute; text-indent: -1000em; top: 40px; } /* === L1 Teaser Text */ #section p { font-size: 14px; height: 188px; left: 11px; margin: 0; padding: 0; position: absolute; text-indent: -1000em; top: 0; width: 284px; } body.section-software #section p {background-image: url("/jboard/images/signal_teaser_software.png");} body.section-security #section p {background-image: url("/jboard/images/signal_teaser_security.png");} body.section-hosting #section p {background-image: url("/jboard/images/signal_teaser_hosting.png");} body.section-corporate #section p {background-image: url("/jboard/images/signal_teaser_corporate.png");} body.section-contact #section p {background-image: url("/jboard/images/signal_teaser_contact.png");} /* !-------------------------------------------- */ /* !Section Navigation Level 2 */ /* !-------------------------------------------- */ /* === L2 Navigation Container */ ul#nav-l2 { left: 309px; height: 23px; position: absolute; top: 157px; } #section.shortened ul#nav-l2 { top: 0; } /* === L2 Navigation Buttons */ ul#nav-l2 li { background: transparent url("/jboard/images/nav_level2.png") no-repeat 0 0; float: left; height: 23px; padding: 0 0 0 15px; text-indent: -1000em; } ul#nav-l2 li a { font-size: 15px; display: block; height: 100%; width: 100%; } /* === Thanks a milion, Firefox! You still can't do bp-x/y! */ /* === Section Software starts here ... */ ul#nav-l2 li#l2nav-p2-2-1 { background-position: 0 0; width: 73px; } ul#nav-l2 li#l2nav-p2-3-1 { background-position: 0 -43px; width: 63px; } ul#nav-l2 li#l2nav-p2-4-1 { background-position: 0 -86px; width: 55px; } ul#nav-l2 li#l2nav-p2-5-1 { background-position: 0 -129px; width: 57px; } ul#nav-l2 li#l2nav-p2-6-1 { background-position: 0 -172px; width: 79px; } ul#nav-l2 li.active#l2nav-p2-2-1, ul#nav-l2 li#l2nav-p2-2-1:hover {background-position: -184px 0;} ul#nav-l2 li.active#l2nav-p2-3-1, ul#nav-l2 li#l2nav-p2-3-1:hover {background-position: -184px -43px;} ul#nav-l2 li.active#l2nav-p2-4-1, ul#nav-l2 li#l2nav-p2-4-1:hover {background-position: -184px -86px;} ul#nav-l2 li.active#l2nav-p2-5-1, ul#nav-l2 li#l2nav-p2-5-1:hover {background-position: -184px -129px;} ul#nav-l2 li.active#l2nav-p2-6-1, ul#nav-l2 li#l2nav-p2-6-1:hover {background-position: -184px -172px;} /* === Section Security starts here ... */ ul#nav-l2 li#l2nav-p3-2-1 { background-position: 0 -215px; width: 88px; } ul#nav-l2 li#l2nav-p3-3-1 { background-position: 0 -258px; width: 59px; } ul#nav-l2 li#l2nav-p3-4-1 { background-position: 0 -301px; width: 73px; } ul#nav-l2 li#l2nav-p3-5-1 { background-position: 0 -344px; width: 49px; } ul#nav-l2 li#l2nav-p3-6-1 { background-position: 0 -387px; width: 84px; } ul#nav-l2 li#l2nav-p3-7-1 { background-position: 0 -430px; width: 79px; } ul#nav-l2 li.active#l2nav-p3-2-1, ul#nav-l2 li#l2nav-p3-2-1:hover {background-position: -184px -215px;} ul#nav-l2 li.active#l2nav-p3-3-1, ul#nav-l2 li#l2nav-p3-3-1:hover {background-position: -184px -258px;} ul#nav-l2 li.active#l2nav-p3-4-1, ul#nav-l2 li#l2nav-p3-4-1:hover {background-position: -184px -301px;} ul#nav-l2 li.active#l2nav-p3-5-1, ul#nav-l2 li#l2nav-p3-5-1:hover {background-position: -184px -344px;} ul#nav-l2 li.active#l2nav-p3-6-1, ul#nav-l2 li#l2nav-p3-6-1:hover {background-position: -184px -387px;} ul#nav-l2 li.active#l2nav-p3-7-1, ul#nav-l2 li#l2nav-p3-7-1:hover {background-position: -184px -430px;} /* === Section Hosting starts here ... */ ul#nav-l2 li#l2nav-p4-2-1 { background-position: 0 -473px; width: 48px; } ul#nav-l2 li#l2nav-p4-3-1 { background-position: 0 -516px; width: 127px; } ul#nav-l2 li#l2nav-p4-4-1 { background-position: 0 -559px; width: 92px; } ul#nav-l2 li#l2nav-p4-5-1 { background-position: 0 -602px; width: 79px; } ul#nav-l2 li.active#l2nav-p4-2-1, ul#nav-l2 li#l2nav-p4-2-1:hover {background-position: -184px -473px;} ul#nav-l2 li.active#l2nav-p4-3-1, ul#nav-l2 li#l2nav-p4-3-1:hover {background-position: -184px -516px;} ul#nav-l2 li.active#l2nav-p4-4-1, ul#nav-l2 li#l2nav-p4-4-1:hover {background-position: -184px -559px;} ul#nav-l2 li.active#l2nav-p4-5-1, ul#nav-l2 li#l2nav-p4-5-1:hover {background-position: -184px -602px;} /* === Section Corporate starts here ... */ ul#nav-l2 li#l2nav-p5-1-1 { background-position: 0 -645px; width: 51px; } ul#nav-l2 li#l2nav-p5-2-1 { background-position: 0 -688px; width: 53px; } ul#nav-l2 li#l2nav-p5-3-1 { background-position: 0 -731px; width: 31px; } ul#nav-l2 li.active#l2nav-p5-1-1, ul#nav-l2 li#l2nav-p5-1-1:hover {background-position: -184px -645px;} ul#nav-l2 li.active#l2nav-p5-2-1, ul#nav-l2 li#l2nav-p5-2-1:hover {background-position: -184px -688px;} ul#nav-l2 li.active#l2nav-p5-3-1, ul#nav-l2 li#l2nav-p5-3-1:hover {background-position: -184px -731px;} /* === Section Contact starts here ... */ ul#nav-l2 li#l2nav-p6-2-1 { background-position: 0 -774px; width: 64px; } ul#nav-l2 li#l2nav-p6-3-1 { background-position: 0 -817px; width: 54px; } ul#nav-l2 li.active#l2nav-p6-2-1, ul#nav-l2 li#l2nav-p6-2-1:hover {background-position: -184px -774px;} ul#nav-l2 li.active#l2nav-p6-3-1, ul#nav-l2 li#l2nav-p6-3-1:hover {background-position: -184px -817px;} /* !-------------------------------------------- */ /* !Content: Column Container */ /* !-------------------------------------------- */ /* === Column Container */ #content { clear: both; padding: 33px 0 0 11px; } /* === Break up column flow after headlines & text */ /* === Needed for background-images over the column height */ #content .col-clearfix { clear: both; } #content .col { float: left; margin-right: 21px; } /* === VARIANT 1: 3 columns for section intro pages */ #content.columns-3equal .contentText { background: transparent url("/jboard/images/col_divider_three.png") repeat-y -48px 0; } #content.columns-3equal .col-left { width: 275px; } #content.columns-3equal .col-mid { width: 275px; } #content.columns-3equal .col-right { width: 275px; margin-right: 0; } /* === VARIANT 2: Side/main columns for real level2-pages */ #content.columns-1main .contentText { background: transparent url("/jboard/images/col_divider_one.png") repeat-y -48px 0; } #content.columns-1main .col-left { width: 275px; } #content.columns-1main .col-mid { width: 364px; } #content.columns-1main .col-right { margin-right: 0; width: 182px; } #content.columns-1main .contentText .col-right * { font-size: 13px; } /* === VARIANT 3: 2 asymetric side columns for elements hanging out on the left side */ #content.columns-2side .contentText { background: transparent url("/jboard/images/col_divider_one.png") repeat-y -48px 0; } #content.columns-2side .col-mid { margin-left: 296px; width: 364px; } #content.columns-2side .col-right { width: 182px; margin-right: 0; } /* !-------------------------------------------- */ /* !Content: Headlines */ /* !-------------------------------------------- */ /* === Column Headlines */ #content h3 { color: #107fc9; font-size: 24px; font-weight: normal; line-height: 115%; margin: 0 0 33px 0; } /* === Intra-Text Headlines */ #content h4 { border-bottom: 1px solid #969182; color: #107fc9; font-size: 14px !important; /* overrides font-size reduction in col-right */ font-weight: bold; margin: 1.5em 0 0.9em 0; padding: 0 0 0.5em 0; } #content h4:first-child { margin-top: 0; } /* !-------------------------------------------- */ /* !Content: Actual texts & lists */ /* !-------------------------------------------- */ /* === Generic content */ #content p, #content cite, #content li, #content dt, #content dd { color: #666; font-size: 14px; line-height: 145%; } #content p { margin: 0 0 0.7em 0; } #content em { color: #05225e; font-style: normal; font-weight: bold; } #content a { color: #000; font-weight: bold; } /* === Basic Lists */ #content ul { margin: 0 0 0.7em 0; } #content li { margin: 0 0 0.7em 0; } /* === Lists with divider line */ #content ul.bulletList li { border-bottom: 1px solid #107fc9; padding-bottom: 0.7em; } #content ul.bulletList li:last-child { border: none; } /* === Image matrix lists */ #content ul.imgMatrix li { border: 1px solid #969182; float: left; height: 90px; margin: 0 10px 10px 0; position: relative; width: 125px; } #content ul.imgMatrix li:hover, #content ul.imgMatrix li.selected { border-color: #81c325; } #content ul.imgMatrix li span { background: transparent url("/jboard/images/box_corner_grey.png") no-repeat 0 0; display: block; height: 35px; position: absolute; right: -1px; top: -1px; width: 19px; } #content ul.imgMatrix li:hover span, #content ul.imgMatrix li.selected span { background-image: url("/jboard/images/box_corner_green.png"); } #content ul.imgMatrix a { display: block; height: 100%; text-indent: -1000em; width: 100%; } /* === Key/Value-pair lists */ #content dl { margin: -0.7em 0 0.7em 0; } #content dt { font-weight: bold; margin: 0.7em 0 0 0; } /* === Key/Value-pair lists with left-side punched-out logos */ /* works only for logo punch-outs */ #content.columns-1main dl.punchout dt.logo { margin-bottom: -60px; margin-left: -146px; } #content.columns-1main dl.punchout dd { margin-top: 0.5em; } /* === Download-Boxes */ #content dl.downloadBox { background: transparent url("/jboard/images/butt_download.png") no-repeat 5px bottom; border: 1px solid #969182; margin-top: 0; padding: 0 5px 5px 34px; } #content dl.downloadBox dd { margin: 0.7em 0 0 0; } #content dl.downloadBox dd a { margin-left: -34px; padding-left: 34px; /* needs IE7 fix */ } /* === Citations */ #content cite { color: #05225e; font-size: 15px; font-style: normal; font-weight: bold; line-height: 135%; } #content p.citator { font-size: 11px; padding-top: 1em; } /* === Images */ #content img { border: 1px solid #666; margin-bottom: 0.7em; max-width: 99%; width: auto; } /* === DELETE THIS STYLE: Just for testing */ #content img#testimg { height: 100px; width: 99%; } /* === DELETE THIS STYLE: Just for testing */ #content img#testimg2 { height: 200px; width: 99%; } /* !-------------------------------------------- */ /* !Content: Google Map component */ /* !-------------------------------------------- */ iframe.googleMap { height: 400px; margin: 0; padding: 0 0 1em 0; width: 275px; } /* !-------------------------------------------- */ /* !Content: Form elements */ /* !-------------------------------------------- */ label { color: #107fc9; display: block; font-weight: bold; margin: 0 0 0.3em 0; } .requiredField label { color: #05225e; } #content.columns-2side .col-mid label { margin-left: -296px; float: left; text-align: right; width: 275px; } input, select, textarea { width: 90%; } textarea { height: 10em; } form button { background: transparent url("/jboard/images/butt_submit.png") no-repeat 0 0; border: none; cursor: pointer; height: 27px; text-indent: -1000em; /* needs IE7 fix */ width: 93px; } form button:hover { background-position: 0 -31px; } /* !-------------------------------------------- */ /* !Content: Company Logos */ /* !-------------------------------------------- */ .logo { background: transparent no-repeat 0 -162px; } dt.logo { height: 90px; text-indent: -1000em; width: 125px; } dt.logo, .logo:hover, .logo.selected { background-position: 0 0; } .logo-lbbw {background-image: url("/jboard/images/logo/logo_lbbw.png");} .logo-bosch {background-image: url("/jboard/images/logo/logo_bosch.png");} .logo-ifms {background-image: url("/jboard/images/logo/logo_ifms.png");} .logo-tia {background-image: url("/jboard/images/logo/logo_tia.png");} .logo-vvk {background-image: url("/jboard/images/logo/logo_vvk.png");} .logo-vapa {background-image: url("/jboard/images/logo/logo_vapa.png");} .logo-tsystems {background-image: url("/jboard/images/logo/logo_tsystems.png");} .logo-klett {background-image: url("/jboard/images/logo/logo_klett.png");} .logo-pbeakk {background-image: url("/jboard/images/logo/logo_pbeakk.png");} .logo-datax {background-image: url("/jboard/images/logo/logo_datax.png");} .logo-twotribes {background-image: url("/jboard/images/logo/logo_twotribes.png");} .logo-codebox {background-image: url("/jboard/images/logo/logo_codebox.png");} .logo-consensit {background-image: url("/jboard/images/logo/logo_consensit.png");} .logo-logic {background-image: url("/jboard/images/logo/logo_logic.png");} .logo-mindmeister {background-image: url("/jboard/images/logo/logo_mindmeister.png");} .logo-sharewise {background-image: url("/jboard/images/logo/logo_sharewise.png");}