/* Normalisiert margin und padding */ { margin:0; padding:0; } /* _____ AUFBAU DER GRUND_STRUKTUR _____ */ body { font-family:arial,Helvetica,sans-serif; } /* ______ Headline mit Farbverlauf, */ .naviTeaser h1, .naviTeaser h2 { font-size:11px; color:#fff; line-height:20px; padding:3px 2px 3px 18px; border-top:12px solid #fff; background: url(img/blaugrau_headline_bg.jpg) repeat-x scroll left top #6B8093; } /*#6B8093;*/ .naviTeaser h2.blau { background:url(img/rot_headline_bg.jpg) repeat-x scroll left top #c21a00; } .naviTeaser h2.rot { background:url(img/rot_headline_bg.jpg) repeat-x scroll left top #c21a00; } * html .naviTeaser h1, * html .naviTeaser h2, * html .naviTeaser h2.blau, * html .naviTeaser h2.rot { background-position:left 12px; } *+html .naviTeaser h1, *+html .naviTeaser h2, *+html .naviTeaser h2.blau, *+html .naviTeaser h2.rot { background-position:left 12px; } .naviTeaser h1.first, .naviTeaser h2.first { border-top:none; background-position:left top !important;} /* _____ Liste der Eintraege _____ */ .naviTeaser ul { font-size:11px; padding:7px 0px 9px 0px; } .naviTeaser li { vertical-align:top; line-height:20px; /* wichtig fuer IE */ } .naviTeaser li a { display:block; float:left; color:#333333; text-decoration:none; padding:2px 0px 3px 18px; width:85%; } /*float fr span.unsichtbar */ .naviTeaser li a:hover, .naviTeaser li a:focus, .naviTeaser li a:active { background: url(img/pfeil_rot.gif) no-repeat 6px 5px; /* left - top */ } /* clear, da a im li float hat */ .naviTeaser li:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } * html .naviTeaser li { height:1%; } *+html .naviTeaser li { height:1%; } /* Teaser mit Flietext: extra div um gesamten RichText */ .naviTeaser .textBereich { padding: 9px 12px 1px 0px; } * html .naviTeaser .textBereich { padding: 9px 12px 2px 0px; } .naviTeaser p { font-size:11px; color:#333333; line-height:18px; } /*11px*/ .naviTeaser p strong { line-height:20px; } /* Einzeilig!*/ .naviTeaser p span.big { font-size:26px; display:block; font-weight:bold; line-height:22.6px; } /* Zweizeilig */ #leftCol p span.big { line-height:18px; padding-bottom:3px;} .naviTeaser p span.small { font-size:14.88px; /*line-height:20px; */line-height:18.88px; } /* 10px */ * html .naviTeaser p span.small { font-size:15px; /*line-height:20px; */line-height:19px;} /* 10px */ /* _____ _____ Teaser im CONTENT _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ _____ */ /* allgem. Def. FakeLink, um die ganze Flche clickbar zu machen - width und height siehe jeweilige TeaserArt */ a.fakeLink { position:absolute; left:0px; top:0; display:block; background:#fff; filter:alpha(opacity=0); opacity:.0; -moz-opacity:0.0; z-index:22; } /* allgem. Def. Text */ .teaser h2 { font-size:11px; margin:0; padding:10px 0px 0px 14px;} .big h2, .bigAuto .teaser h2, .smallAuto .teaser h2, .smallAuto390 .teaser h2, .bigAutoMitBild .teaser h2 { font-size:18px; line-height:18px; vertical-align:top; padding:6px 12px 16px 12px; } .teaser h3 { font-size:11px; margin:0; padding:10px 0px 0px 14px;} .big h3, .bigAuto .teaser h3, .smallAuto .teaser h3, .smallAuto390 .teaser h3, .bigAutoMitBild .teaser h3 { font-size:11px; line-height:11px; vertical-align:top; padding:0px 12px 6px 12px; } .teaser p { font-size:11px; padding:0px 10px 0px 15px; } /* mehr-Link - rote Schrift */ .teaser div.link { text-align:right; padding:2px 0px 9px 0px; margin-top:-11px !important; }/*11px*/ .teaser div.link a { font-size: 11px; position:relative; display:block; text-decoration:none; margin-right:13px; padding:2px 17px 0px 0; color:#c21a00; background: url(img/pfeil_rot.gif) no-repeat right 5px; /* left - top */} /* mehr-Link - weisse Schrift*/ .hp div.link a, .blau div.link a { color:#fff; background: url(img/pfeil_weiss.gif) no-repeat right 5px; /* left - top */} /* Reihenweiser Aufbau */ div.teaserRow:after, div.teaserRow2:after, div.teaserRow3:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } * html div.teaserRow, * html div.teaserRow2, * html div.teaserRow3 { height:1%; } div.teaserRow, div.teaserRow2 { width:540px; position:relative; } div.teaserRow3 { width:540.4px; position:relative; }/* width 34.375 gerundet fr Firefox 3 */ /* Trennlinie der Reihen (unten) */ .withBorder { border-bottom:2px solid #fff !important;} .teaserRow .teaser, .teaserRow2 .teaser, .teaserRow3 .teaser { float:left; position:relative; } /* _____ Reihe mit 3 Teasern _____ */ .teaserRow3 .links { width:178px; } .teaserRow3 .mitte { width:180.8px; } .teaserRow3 .rechts { width:180.8px; } .teaserRow3 .mitte div.textBox, .teaserRow3 .rechts div.textBox { border-left:2px solid #fff; } /*_____ HOMEPAGE - .hp als Zusatz von .teaserRow3 */ .hp .teaser { color:#fff; background: url(img/hpTeaser_bgGrau.jpg) repeat-x top #acacac;} /* grau */ .hp .blau { color:#fff; background: url(img/hpTeaser_bgRot.jpg) repeat-x top #c8321a;} /* rot */ .hp img { display:block; width:100%; height:100px; } .hp .heightXX { height:90px; } html>body .hp .heightXX { height:auto; min-height:90px; } .hp a.fakeLink { width:100%; height:202px; } /* _____ HOMEPAGE - KAMPAGNE _____*/ .kampagne { width:540px; height:285px; position:relative; border-bottom:2px solid #fff; overflow:hidden; } .kampagne img { width:540px; height:285px; position:absolute; left:0; top:0; display:block; } .kampagne a.fakeLink { width:540px; height:285px; } /* _________________________________________________________________________________________________________________ ________________________________________________________________________________________________________________ _____ AUTO-TEASER __________________________________________________________________________ */ /*.bigAuto h2, .bigAutoMitBild h2 { font-size:18px; line-height:17.984px; vertical-align:top; padding:9px 12px 6px 12px; }*/ .bigAuto p, .bigAutoMitBild p { font-weight:bold; } .auto a.fakeLink, .autoMitBild a.fakeLink { width:540px; height:105px; } .hell { background:#fff !important; } .dunkel { background:#ededed !important; } /* __ I-A. AutoTeaser gross (Intro) MIT Bild __ .bigAutoMitBild als Zusatz von .teaserRow: */ .bigAutoMitBild { background: url(img/autoTeaser_bgGrau_big.jpg) repeat-x bottom #fff; } .bigAutoMitBild .teaser { position:relative; width:215px; height:180px; float:left; color:#333333; } .bigAutoMitBild .blau { color:#fff; background-image:none ! important; background-color:#333333; } html>body .bigAutoMitBild .teaser { height:auto; min-height:180px; } .bigAutoMitBild img { display:block; width:100%; height:180px; } /* 275 x 180 */ /* __ I-B. AutoTeaser gross (Intro) OHNE Bild __ .bigAuto als Zusatz von .teaserRow */ .bigAuto .teaser { position:relative; color:#333333; width:547px; height:97px; padding-bottom: 8px; border-bottom: 10px solid #FFF; /* Abstand nach unten - margin geht nicht, weil sonst das Hintergrundbild durchschaut */ background: url(img/autoTeaser_bgGrau_small.jpg) repeat-x bottom; } html>body .bigAuto .teaser { height:auto; min-height:97px; } /* Höhe 150 - 97+8 padding */ /* __ I-B. AutoTeaser klein (Intro) OHNE Bild __ .smallAuto als Zusatz von .teaserRow */ .smallAuto .teaser { position:relative; color:#333333; width:547px; height:37px; padding-bottom: 8px; border-bottom: 10px solid #FFF; /* Abstand nach unten - margin geht nicht, weil sonst das Hintergrundbild durchschaut */ background: url(img/autoTeaser_bgGrau_klein.jpg) repeat-x bottom; } html>body .smallAuto .teaser { height:auto; min-height:37px; } /* __ I-B. AutoTeaser390 klein (Intro) OHNE Bild __ .smallAuto als Zusatz von .teaserRow */ .smallAuto390 .teaser { position:relative; color:#333333; width:458; height:37px; padding-bottom: 8px; border-bottom: 10px solid #FFF; /* Abstand nach unten - margin geht nicht, weil sonst das Hintergrundbild durchschaut */ background: url(img/autoTeaser_bgGrau_klein.jpg) repeat-x bottom; } html>body .smallAuto390 .teaser { height:auto; min-height:37px; } /* __ II-A. AutoTeaser klein MIT Bild __ .autoMitBild als Zusatz von .teaserRow */ .autoMitBild .teaser { position:relative; width:400.8px; height:105px; float:left; color:#333333; } html>body .autoMitBild .teaser { height:auto; min-height:105px; } /* weite: 413, wert abgerundet */ .autoMitBild .heightXX { height:91px; } html>body .autoMitBild .heightXX { height:auto; min-height:91px; } .autoMitBild .bild { width:137px; height:105px; } /* Höhe inkl. Abstand oben und unten */ .autoMitBild .bild img { display:block; width:100%; height:90px; margin:7px 0px 8px 0px; } /* 137 x 90 */ .autoMitBild h3 {font-size:11.52px; margin:0; padding:5px 4px 10px 16px;} .autoMitBild p { color:#000; padding:0px 15px 0px 17px;} /* __ II-B. AutoTeaser klein OHNE Bild __ .auto als Zusatz von .teaserRow */ .auto .teaser { width:540px; height:105px; } html>body .auto .teaser { height:auto; min-height:105px; } .auto .heightXX { height:91px;} html>body .auto .heightXX { height:auto; min-height:91px; } .auto h3 { font-size:11.52px; margin:0; padding:15px 4px 5px 19px; } .auto .teaser p { color:#000; padding:0px 15px 0px 20px; } /* _____ FOLGESEITEN - .big als Zusatz von .teaserRow: Bild, Text nebeneinander _____ */ .big .teaser { position:relative; width:210px; height:210px; float:left; color:#333333; background: url(img/teaser_bgGrau_big.jpg) repeat-x bottom #fff; } /* 275 */ .big .blau { color:#fff; background-image:none ! important; background-color:#333333;} /* blau */ * html .big .bild {width:210.72px; } .big img { display:block; width:100%; height:210px; } .big .textBox { padding-left:1px; } .big .heightXX { height:196px; } html>body .big .heightXX { height:auto; min-height:196px; } .big a.fakeLink { width:100%; height:210px; } /* _____ FOLGESEITEN - 2 Teaser nebeneinander: Bild oben, Text unten _____ */ .teaserRow2 .teaser { color:#333333; background: url(img/teaser_bgGrau_small.jpg) repeat-x bottom #fff;} /* grau */ .teaserRow2 .blau { color:#fff; background: url(img/teaser_bgBlau_small.jpg) repeat-x bottom #333333;} /* blau */ .teaserRow2 img { display:block; width:100%; height:140px; border-bottom:none; } /* 274 x 140 */ .teaserRow2 .heightXX { height:90px; border:0px solid red;} html>body .teaserRow2 .heightXX { height:auto; min-height:90px; } .teaserRow2 a.fakeLink /* Reihenweiser Aufbau */ div.teaserRow:after, div.teaserRow2:after, div.teaserRow3:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } * html div.teaserRow, * html div.teaserRow2, * html div.teaserRow3 { height:1%; } div.teaserRow, div.teaserRow2 { width:540px; position:relative; } div.teaserRow3 { width:540.4px; position:relative; }/* width 34.375 gerundet für Firefox 3 */