/* CSS Styles for Perfect Finish, Author Tim Reeves, Stand 2006-05-15 */ /* For the xml parser the canvas is , not */ html { height: 100%; /* Gecko and Opera both need this, in html AND body */ width: 100%; margin: 0px; padding: 0px; overflow: hidden; font-family: Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif; } body { height: 100%; width: 100%; /* MSIE has a stupidly large default value */ text-align: center; /* For MSIE 5.x, der margin:auto bei Blockelementen missachtet */ margin: 0px; padding: 0px; overflow: hidden; } /* To make things "pixelgenau" */ img, table, table td, form, div, div div, div div div, div div div div { margin: 0px; padding: 0px; border-style: none; border-width: 0px; text-align: left; overflow: hidden; } table { /* Let width default - works better in IE6 when a scrollbar comes */ border-collapse: collapse; /* Gets rid of IE Borders */ border-spacing: 0px; /* Gets rid of Firefox Borders */ } /* and don't forget to avoid the "white-space next to " bug in MSIE */ /* The purpose of this DIV is to get the scrollers - IE5 and IE6 disagree about scrollers in and , so this is easy and universal. But OH GOD the positioning in IE6!! This must itself be a positioned block so that div.main is positioned relative to this. Otherwise, a relatively positioned div.main is in front of 'div.alles' scrollers */ div.alles { position: absolute; /* Opera doesn't like "relative" here */ top: 0px; /* and for "absolute" MSIE needs top left */ left: 0px; height: 100%; width: 100%; background-color: rgb(215,222,240); overflow: auto; } img.bottomright { display: block; position: absolute; left: 813px; top: 604px; height: 1px; width: 1px; } /* The only way to get horizontal AND vertical positioning: Since we default to "table-layout: auto" the dimensions will be increased to at least that of the content, i.e. maybe more than 100% of the viewport, but not less */ table.mitte { width: 100%; height: 100%; } table.mitte td { vertical-align: middle; text-align: center; /* MSIE 5.x missachtet margin:auto bei Blockelementen */ width: 100%; height: 100%; /* Borders would look nice here, but cause scrollers - 100% + X */ /* The only way is to simulate them with 4 positioned divs */ } /* Don't let these be inherited */ table.mitte table { width: auto; height: auto; } table.mitte table td { vertical-align: top; text-align: left; width: auto; height: auto; } div.main { position: relative; width: 814px; height: 605px; margin: 0px auto; background-image: url(../images/Perfect_Finish_Hintergrund.jpg); background-repeat: no-repeat; background-color: transparent; } div.InfoZeileUnten { background-color: transparent; background-image: url(../images/HG_InfozeileUnten.jpg); background-repeat: no-repeat; margin: 0 auto; position: relative; width: 814px; height: 605px; } div.InfozeileInnenLinks { background-image: url(../images/metav2008_logo.gif); background-repeat: no-repeat; width: 198px; height: 55px; float: left; margin-top: 9px; margin-left: 11px; padding: 10px 15px; } div.InfozeileInnenRechts { padding: 0; width: 480px; margin-top: 9px; } div.main_de { background-color: transparent; background-image: url(../images/PF_HG_Form_de.jpg); background-repeat: no-repeat; margin: 0 auto; position: relative; width: 522px; height: 762px; } div.main_eng { background-color: transparent; background-image: url(../images/PF_HG_Form_eng.jpg); background-repeat: no-repeat; margin: 0 auto; position: relative; width: 522px; height: 762px; } /* Classes for Navigation */ /* This DIV is the column containing all the menu items */ /* If you specify a width for this DIV then in IE hover only works */ /* on the text, not the block - so use a width on the link itself. */ div.menuleiste { background-color: transparent; text-align: left; position: absolute; top: 118px; left: 22px; height: auto } /* This DIV is the outermost (enclosing) box of one menu item */ /* It contains the complete 3-D perspective cube. The stacking context */ /* (z-index) must be applied to its instantiations during menu generation */ div.menupunkt { position: relative; width: 155px; height: 50px; } /* This DIV must be in the same stacking context as mpseite and link */ div.mpbild { position: absolute; top: 0px; left: 0px; width: 155px; height: 50px; z-index: 2; background-repeat: no-repeat; background-color: transparent; } div.mpbavble { background-image: url(../images/kubus_blau.gif); } div.mpbiscur, div.mpboffen { background-image: url(../images/kubus_rot.gif); } /* This DIV is backmost and provides the side color panel of the cube */ div.mpseite { position: absolute; top: 0px; right: 0px; width: 20px; height: 50px; z-index: 1; } div.mpsavble { background-color: rgb(193,209,245) } div.mpsiscur { background-color: rgb(205,66,37); } div.mpsoffen { background-color: rgb(229,66,37); } a.mp, a.mp:link, a.mp:visited, a.mp:active, a.mp:focus, a.mp:hover { display: block; position: relative; top: 10px; left: 0px; width: 135px; height: 40px; font-size: 11px; font-weight: bold; text-align: left; letter-spacing: 1px; line-height: 40px; vertical-align: middle; text-decoration: none; z-index: 3; } a.avble, a.avble:link, a.avble:visited, a.avble:active, a.avble:focus { color: #595959; background-color: rgb(184,197,229); } a.avble:hover { color: #404040; background-color: rgb(136,161,205); } a.iscur, a.iscur:link, a.iscur:visited, a.iscur:active, a.iscur:focus { color: white; background-color: rgb(192,38,9); } a.iscur:hover { color: white; background-color: rgb(192,38,9); } a.offen, a.offen:link, a.offen:visited, a.offen:active, a.offen:focus { color: white; background-color: rgb(204,62,33); } a.offen:hover { color: white; background-color: rgb(192,38,9); } /* The submenu is a tall red block containing links */ div.submenu { font-size: 11px; font-weight: bold; background-color: transparent; background-image: url("../images/kubus_offen.gif"); background-repeat: no-repeat; text-align: left; letter-spacing: 1px; padding: 10px 0 0; position: relative; z-index: 2; top: 0; left: 0; width: 155px; height: 139px; overflow: auto } /* Styles for the items in the submenu */ a.mpsub, a.mpsub:link, a.mpsub:visited, a.mpsub:active, a.mpsub:focus, a.mpsub:hover { display: block; position: relative; top: 0px; left: 0px; width: 135px; font-size: 10px; font-weight: bold; text-align: left; line-height: 100%; vertical-align: middle; text-decoration: none; padding: 4px 0px; z-index: 3; border-collapse: collapse; /* Gets rid of IE Borders */ border-spacing: 0px; /* Gets rid of Firefox Borders */ } div.pad { position: relative; top: 0; left: 0; width: 135px; height: 14px } a.suboffen, a.suboffen:link, a.suboffen:visited, a.suboffen:active, a.suboffen:focus { color: white; background-color: rgb(204,62,33); } a.suboffen:hover { color: white; background-color: rgb(192,38,9); } a.subiscur, a.subiscur:link, a.subiscur:visited, a.subiscur:active, a.subiscur:focus { color: white; background-color: rgb(169,36,9); } a.subiscur:hover { color: white; background-color: rgb(192,38,9); } /* These DIVs appear only on the index pages and contains flags for language choice */ /* They are contained directly in div.main, i.e. sibling of div.menuleiste */ div.sprache_de { position: absolute; top: 562px; left: 22px; width: 20px; height: 13px; text-align: left; background-color: transparent; } div.sprache_en { position: absolute; top: 562px; left: 22px; width: 20px; height: 13px; text-align: left; background-color: transparent; } a.de, a.de:link, a.de:visited, a.de:active, a.de:focus, a.de:hover { display: block; width: 20px; height: 13px; background-repeat: no-repeat; background-image: url(../images/de_hell.gif); } a.de:hover { background-image: url(../images/de.gif); } a.en, a.en:link, a.en:visited, a.en:active, a.en:focus, a.en:hover { display: block; width: 20px; height: 13px; background-repeat: no-repeat; background-image: url(../images/en_hell.gif); } a.en:hover { background-image: url(../images/en.gif); } div.aktionen { background-color: transparent; text-align: left; position: absolute; top: 545px; left: 57px; width: 100px; height: 31px } /* Done with navigation - now the main content */ div.nutzbereich { position: absolute; top: 108px; left: 205px; width: 604px; height: 478px; text-align: left; background-color: transparent; overflow: auto; /* ONLY this one gets the scrollbar */ } div.nutzbereich1 { background-color: transparent; text-align: left; position: absolute; top: 108px; left: 205px; width: 604px; height: 478px; overflow: auto } div.nutzbereich2 { background-color: transparent; text-align: left; position: absolute; top: 120px; left: 35px; width: 450px; height: 700px; overflow: auto; } div.nutzbereich3 { background-color: transparent; text-align: left; position: absolute; top: 120px; left: 35px; width: 470px; height: 610px; overflow: auto; } /* Eine einzige breite Textspalte (z.B. Impressum) */ div.spaltebreit { /* Innerhalb des Nutzbereichs */ position: relative; top: 0px; left: 30px; width: 540px; height: auto; text-align: left; padding-bottom: 10px; background-color: transparent; } /* Eine Textspalte links mit einer Bildspalte rechts */ div.spaltelinks { /* Innerhalb des Nutzbereichs */ position: relative; top: 0px; left: 30px; width: 269px; height: auto; text-align: left; padding-bottom: 10px; background-color: transparent; } div.spaltelinks1 { background-color: transparent; text-align: left; padding-bottom: 10px; position: relative; top: 0; left: 30px; width: 290px; height: auto } div.spaltelinks_breit { background-color: transparent; text-align: left; position: relative; top: 0; left: 30px; width: 500px; height: auto } div.spaltelinks2 { background-color: transparent; text-align: left; padding-bottom: 10px; position: relative; top: 0; left: 30px; width: 234px; height: auto } div.kleineBilder { background-color: transparent; text-align: left; white-space: nowrap; margin: 0; padding: 0 0 10px; position: relative; top: 0; left: 30px; width: 269px; height: 68px; overflow: auto } img.hm_thumb { margin-right: 5px } div.spalterechts { /* Innerhalb des Nutzbereichs */ position: absolute; top: 16px; left: 338px; width: 240px; height: auto; text-align: left; background-color: transparent; } div.spalterechts1 { background-color: transparent; text-align: left; position: absolute; top: 6px; left: 320px; width: 275px; height: auto } div.spalterechts2 { background-color: transparent; text-align: left; position: absolute; top: 16px; left: 303px; width: 275px; height: auto } img.BildchenLinks150 { margin-right: 5px; margin-bottom: 5px; float: left } /* Sondermodell f?r den Routenplaner */ div.spalteroute { position: absolute; top: 0px; left: 382px; width: 200px; height: auto; text-align: left; background-color: transparent; } /* Drei fast gleich breite Spalten, derzeit nicht benutzt au?er spaltedrei (Kontakt). */ div.spalteeins { position: absolute; top: 0px; left: 0px; width: 195px; height: auto; text-align: left; padding-bottom: 10px; background-color: transparent; } div.spaltezwei { position: absolute; top: 0px; left: 212px; width: 174px; height: auto; text-align: left; padding-bottom: 10px; background-color: transparent; } div.spaltedrei { position: absolute; top: 0px; left: 414px; width: 156px; height: auto; text-align: left; padding-bottom: 10px; background-color: transparent; } /* Das hier f?rs Anfrageformular */ div.spalteeinsundzwei { position: relative; top: 0px; left: 30px; width: 348px; height: auto; text-align: left; padding-bottom: 10px; background-color: transparent; } /* Beschriftungsspalten nur f?r die Kontaktseite */ div.spalte1 { position: absolute; bottom: 40px; left: 30px; width: 130px; height: auto; text-align: left; background-color: transparent; } div.spalte2 { position: absolute; bottom: 40px; left: 171px; width: 136px; height: auto; text-align: left; background-color: transparent; } div.spalte3 { position: absolute; bottom: 40px; left: 414px; width: auto; height: auto; text-align: left; background-color: transparent; } /* H1 is optically a H5, H2 is used like a H1, for SEO */ h2, h3, h4 { color: rgb(108,116,130); text-decoration: none; letter-spacing: 1px; } h5 { color: rgb(81,87,97); text-decoration: none; } h1 { color: black; text-decoration: none; } p, ul, ol, li, td, th { color: #000000; text-decoration: none; } h2 { font-size: 18px; /* Anchor jumps to page top better with padding than margin */ padding: 14px 0px 0px 0px; margin: 0px 0px 5px 0px; } h3 { font-size: 16px; margin: 12px 0px 4px 0px; } h4 { font-size: 14px; margin: 10px 0px 2px 0px; } h5 { font-size: 9pt; font-weight: bold; margin: 12px 0px 6px 0px; letter-spacing: 0.025em; line-height: 150%; } h1 { font-size: 9pt; margin: 12px 0px 0px 0px; } h6 { color: #002ba3; font-size: 12px; font-weight: bold; margin-top: 0; margin-bottom: 3px; } p, td, th, ul, ol, li { font-size: 9pt; } p { margin: 3px 0px 3px 0px; line-height: 142%; } .minitext10 { font-size: 10px } div.spalte1 p, div.spalte2 p { font-size: 8pt; line-height: 132%; } p.nachoben { margin-top: 12px; } .rot { color: #d6402a } .blau { color: rgb(0,36,109); } ul, ol { margin: 6px 0px 0px 13px; padding: 0px; } ul li, ol li { color: rgb(190,40,10); line-height: 11px; margin: 0 0 4px; padding: 0 } li.pdf_bullet { color: #333; line-height: 14px } div.RahmenRot { color: #000; font-size: 11px; font-weight: bold; text-align: center; margin-top: 10px; padding-right: 5px; padding-left: 5px; border: solid 2px #be280a } div.RahmenRot:hover { color: #be280a; font-size: 11px; font-weight: bold; background-color: #fff; text-align: center; padding-right: 5px; padding-left: 5px; border: solid 2px } ul { /* list-style-image: url(../images/haken.gif); */ list-style-type: square; } p.pretty:first-letter, span.pretty { } p.mehrluft { margin: 10px 0px 3px 0px; } p.lessluft { margin: 0px 0px 0px 0px; } p.ErrorMsgBox { color: red; width: 250px; padding: 5px; border: solid 2px #f00; red; } p.OkMsgBox { color: #060; padding: 5px; width: 95%; border: solid 2px; } strong, .strong { font-weight: bold; color: rgb(0,36,109); /* letter-spacing: 0.02em; */ } /* Standard link style : Permanently blue links */ a, a:link, a:visited, a:active, a:focus { color: rgb(0,43,163); background-color: transparent; text-decoration: underline; } /* Except on Hover */ a:hover { color: rgb(0,36,109); background-color: #DCF0FF; text-decoration: underline; } div.spalte3 p a, div.spalte3 p a:link, div.spalte3 p a:visited, div.spalte3 p a:active, div.spalte3 p a:focus { color: black; text-decoration: none; } /* Neu: 9-2006*/ div.IndexNews { font-size: 12px; line-height: 13px; background-color: #f5f5f5; padding: 3px; position: absolute; top: 430px; left: 22px; width: 148px; height: 65px; border: solid 1px #cd4225 } div.IndexAdresse { color: #666669; font-size: 11px; line-height: 14px; text-align: left; padding: 3px; position: absolute; top: 440px; left: 22px; width: 180px; height: 85px; } .fett { font-weight: bold; margin: 0; padding: 0 } a.Schwarz12 { color: #120000; text-decoration: underline } a.Schwarz12:hover { color: #cd4225; text-decoration: underline; background-color: transparent } a.Schwarz10 { color: #120000; font-size: 10px; text-decoration: underline; } a.Schwarz10:hover { color: #cd4225; text-decoration: underline; background-color: transparent; } img.Rechts { float: right } div.zentriert { text-align: center }