/* BUG-Hinweise bei IE6: 1. Bei float-Elementen mit gleichgerichtetem Margin: Doubled-margin-float-BUG, deshalb display:inline; anfügen. 2. li-Elemente müssen display:inline; erhalten, wenn ein Margin verwendet werden soll, JEDOCH: 3. Marginwerte bei listitems müssen in das eingeschlossene a-tag mit block-eigenschaft geschrieben werden, da das li-tag zum inline-element werden muss (siehe 2). */ /* * * * * * * * * * * * * * * * * * Initialisierung * * * * * * * * * * * * * * * * * */ /* Alle Elemente zurücksetzen. Nur margin + padding! border würde bei INPUT-BUTTONS die browsereigene Gestaltung entfernen. */ * { margin:0; padding:0; } body { font:12px/18px Verdana, Arial, Helvetica, sans-serif; color:#333; background:#fff; } img { border:none; } /* * * * * * * * * * * * * * * * Grundgerüst * * * * * * * * * * * * * * * */ /* DIV-Boxen */ #rahmen { } #kopfzeile { width:900px; height:140px; background:#fff url(../pix/headpix/head1.jpg) no-repeat right -25px; margin:auto; margin-bottom:1px; } #navibalken { background-color:#1c5ba3; height:12px; } #navibg { background:#333 url(../pix/naviline.gif) repeat-x left top; height:37px; } #inhaltszeile { width:900px; margin:auto; padding:20px 0px 40px 0px; } #fusszeile { border-top:1px solid #666; margin-top:30px; padding:10px 0px 30px 0px; text-align:center; font-size:10px; line-height:14px; color:#666; } #linkespalte { width:200px; float:left; padding-top:25px; } #content { width:650px; float:left; margin-left:40px; } #contentschmal { width:500px; float:left; margin-left:40px; } /* Menu: 1. Ebene */ #navigation ul { list-style-type:none; width:900px; margin:auto; } #navigation li { float:left; position:relative; } #navigation a { padding:8px 20px; border:1px solid #fff; border-right:none; border-bottom:none; display:block; font:normal 15px/20px Trebuchet MS, Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; } #navigation a#kontakt { border-right:1px solid #fff; } #navigation a:hover { background-color:#1c5ba3; } /* Menu: 2. Ebene */ #navigation ul li ul { position:absolute; visibility:hidden; z-index:100; background-color:#666; border:1px solid #fff; border-top:none; width:auto; } #navigation ul li a:hover ul li, #navigation ul li:hover ul li { clear:both; display:block; width:170px; } #navigation ul li a:hover ul, #navigation li:hover ul { visibility:visible; } #navigation ul li a:hover ul li a, #navigation li:hover ul li a { border:none; border-bottom:none; padding:4px 8px 6px 35px; font-size:12px; line-height:16px; } #navigation ul li a:hover ul li a:hover, #navigation li:hover ul li a:hover { background-color:#333; } #navigation ul li a:hover ul li span.navicat, #navigation li:hover ul li span.navicat { clear:both; display:block; width:auto; border:none; border-bottom:1px solid #fff; border-top:1px solid #fff; padding:4px 8px 4px 20px; font:bold 12px/16px Trebuchet MS, Arial, Helvetica, sans-serif; color:#333; background-color:#999; } /* Menu: 3. Ebene a.nextlevel { background:url(../pix/navipfeil.png) no-repeat 122px 3px; } #navigation ul li ul.level2 li ul { position:absolute; left:140px; top:0px; visibility:hidden; z-index:101; background-color:#999; width:auto; border-left:1px solid #fff; } #navigation ul li ul.level2 li a:hover ul li, #navigation ul li ul.level2 li:hover ul li{ clear:both; display:block; width:140px; } #navigation ul li ul.level2 li a:hover ul, #navigation ul li ul.level2 li:hover ul { visibility:visible; } #navigation ul li ul.level2 li a, #navigation ul li ul.level2 li a { border:none; border-bottom:1px solid #fff; padding:4px 8px; font-size:12px; line-height:16px; } */ /* Sek-Menu */ #sekundaernavi { list-style-type:none; margin-bottom:50px; margin-top:50px; } #sekundaernavi li.head { padding:10px 0px 5px 0px; font:bold 12px/14px Arial, Helvetica, sans-serif; } #sekundaernavi a { padding-left:12px; background:url(../pix/navilevel.gif) no-repeat top left; margin-bottom:5px; display:block; width:140px; font:bold 12px/14px Arial, Helvetica, sans-serif; color:#333; text-decoration:none; color:#1c5ba3; } #sekundaernavi a:hover { text-decoration:underline; } /* Hervorhebung der aktuellen Seite (HauptNavi) */ body.startseite #navigation a#startseite, body.ueberuns #navigation a#ueberuns, body.werkzeuge #navigation a#werkzeuge, body.praezisionsteile #navigation a#praezisionsteile, body.beratung #navigation a#beratung, body.service #navigation a#service, body.kontakt #navigation a#kontakt { border-top-color:#1c5ba3; background-color:#1c5ba3; } body.startseite #navigation a:hover#startseite, body.ueberuns #navigation a:hover#ueberuns, body.werkzeuge #navigation a:hover#werkzeuge, body.praezisionsteile #navigation a:hover#praezisionsteile, body.beratung #navigation a:hover#beratung, body.service #navigation a:hover#service, body.kontakt #navigation a:hover#kontakt { } /* Hervorhebung der aktuellen Seite (SekNavi) ul.ueberuns a#ueberuns { color:#9b1b2c; } ul.ueberuns a:hover#ueberuns { color:#791523; } */ /* * * * * * * * * * * * * * * Inhalte * * * * * * * * * * * * * * */ #content ul li, #contentschmal ul li { margin-left:20px; } p { padding-bottom:15px; } .produkt { padding:3px; border:1px solid #ccc; margin-bottom:10px; float:left; width:630px; } .produktbild { margin-right:30px; float:left; } .produktinfo { float:left; } .produkt ul { padding-left:20px; padding-bottom:20px; } /* Bilder */ #inhaltszeile img { padding:5px; background-color:#ccc; } #inhaltszeile a.lightbox img:hover, #inhaltszeile a img:hover { padding:5px; background-color:#1c5ba3; } /* Clearer-Klasse */ .clearer { clear:both; } /* Headlines */ h1 { font:bold 20px/28px Verdana, Arial, Helvetica, sans-serif; color:#1c5ba3; padding:20px 0px 20px 0px; } h2 { font:bold 16px/24px Verdana, Arial, Helvetica, sans-serif; color:#1c5ba3; padding:20px 0px 20px 0px; } h3 { font:bold 14px/20px Verdana, Arial, Helvetica, sans-serif; color:#1c5ba3; padding:10px 0px 10px 0px; } /* Logo (Image-Replacement) */ #kopfzeile h1 { margin:0; z-index:3; text-indent:-1500px; background:url(../pix/logo-loecher.gif) no-repeat left 20px; padding-top:20px; } #kopfzeile h1 a { display:block; width:245px; height:110px; background:url(../pix/logo-loecher.gif) no-repeat; outline:none; } /* Links */ #fusszeile a { font:bold 10px/14px Verdana, Arial, Helvetica, sans-serif; color:#666; text-decoration:none; padding:0px 5px; } #fusszeile a:hover { text-decoration:underline; } a { font:12px/18px Verdana, Arial, Helvetica, sans-serif; color:#1c5ba3; text-decoration:none; } a:hover { text-decoration:underline; } a.pdf { font:12px/18px Verdana, Arial, Helvetica, sans-serif; color:#1c5ba3; text-decoration:none; padding-left:20px; background:url(../pix/pikto_pdf.gif) no-repeat top left; } a.pdf:hover { text-decoration:underline; } a.myf { font:12px/18px Verdana, Arial, Helvetica, sans-serif; color:#3366aa; text-decoration:none; padding-left:20px; background:url(../pix/pikto_myf.gif) no-repeat left 2px; } a.myf:hover { text-decoration:underline; } /* * * FORMULARE * * */ /* Statusmeldung */ #statusFehler { margin:20px 0px; padding:5px 20px; border:1px solid #990000; color:#990000; } #statusErfolg { margin:20px 0px; padding:5px 20px; border:1px solid #006600; color:#006600; } fieldset { margin:0px 0px; padding:10px 20px; border:1px solid #ccc; background-color:#f1f1f1; } legend { font-weight:bold; } label { float:left; width:120px; } input { width:250px; font:12px/18px Arial, Helvetica, sans-serif; } textarea { width:250px; height:50px; font:12px/18px Arial, Helvetica, sans-serif; } input.texte, textarea { border:1px solid #999; padding:3px; margin-right:10px; } input.texte:focus, textarea:focus { border:1px solid #1c5ba3; } input.btn { width:auto; } input#plz { width:50px; } input#ort { width:180px; } /* Kontakt */ /* * * TABELLEN * * */ #tbl-historie td { padding:2px 20px 10px 2px; }