@charset "UTF-8"; /********************************************************* fixed layout -------------------------------------------------------- #author Tobias Bergmann #version 1.0 #lastmodified 24/02/2011 -------------------------------------------------------- table of contents -------------------------------------------------------- #01 reset #02 base layout #03 different layout variants #04 header #05 content #06 footer -------------------------------------------------------- font-size | basic (defined in -tag) -------------------------------------------------------- 10px = 1.0em 11px = 1.1em 12px = 1.2em (active) @ font-size of the parent element | 0.92em (11px) ------------------------------------------------- 13px: 13px/11px = 1.18em @ font-size of the parent element | 1.2em (12px) ------------------------------------------------- 10px: 10px/12px = 0.83em 11px: 11px/12px = 0.92em 12px: 12px/12px = 1.00em 13px: 13px/12px = 1.08em 14px: 14px/12px = 1.17em 16px: 16px/12px = 1.33em 18px: 18px/12px = 1.50em 20px: 20px/12px = 1.67em @ font-size of the parent element | 1.08em (13px) ------------------------------------------------- 11px: 11px/13px = 0.85em ________________________________________________________*/ /******************************************************************************************************************************************* #01 | reset __________________________________________________________________________________________________________________________________________*/ * {margin:0; padding:0;} html {height:100%; margin-bottom:1px; overflow-y:scroll; font-size:62.5%;} h1, h2, h3, h4, h5, h6 {font-size:100%;} img, fieldset {border:0;} ul, ol {list-style:none;} a {color:#ff5119; text-decoration:none;} a:hover, a:active, a:focus {color:#ff5119; outline:none;} input, textarea, button, select {color:inherit; font:99.99% Verdana, Helvetica, Arial, sans-serif;} button::-moz-focus-inner {padding:0; border:0;} th {text-align:inherit;} i, em {font-style:italic;} address {font-style:normal;} small {font-size:0.917em; /* 11px */} /******************************************************************************************************************************************* #02 | base layout __________________________________________________________________________________________________________________________________________*/ body { color:#333; background:#fff right bottom fixed no-repeat; font-family:Verdana, Helvetica, sans-serif; font-size:1.2em; /* damit das bg-image oder die bg-color über die ganze breite gehen, wenn das fenster * kleiner skaliert wurde und man horizontal scrollen kann. hier für border und bg-image * von #container. man kann es auch dem #container div direkt zuweisen, allerdings könnte * man ihn dann nicht mehr zentrieren wegen float:left; */ float:left; min-width:100%; border-top:5px solid #ff5119; } #container { position:relative; background:transparent url(../img/bg-standard-menu.png) left top repeat-x; } #header { position:relative; width:708px; padding:0 0 50px 48px; height:100px; color:#ff5119; background:transparent; } #primary, #secondary, #tertiary { position:relative; float:left; min-height:400px; color:#333; overflow:hidden; } /* clearing */ .csc-mailform-field:after {display:block; height:0; line-height:0; font-size:0; clear:both; visibility:hidden; overflow:hidden; content:" ";} /******************************************************************************************************************************************* #03 | different layout variants __________________________________________________________________________________________________________________________________________*/ /* col-1-layout <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ body.col-1 #primary { width:702px; padding:10px 0 0 54px; background:transparent url(../img/bg-content-top.png) right top no-repeat; clear:both; } body.col-1 #primary .content { float:left; width:670px; /* +padding = 702px */ padding:12px 16px 0 16px; background:transparent url(../img/bg-content-middle.png) right top repeat-y; } body.col-1 #primary .bg-bottom { float:left; width:702px; height:10px; background:transparent url(../img/bg-content-bottom.png) right top no-repeat; } /******************************************************************************************************************************************* #04 | header __________________________________________________________________________________________________________________________________________*/ .logo { float:left; margin-bottom:0; } /* standard-menu <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ #standard-menu { float:right; border-left:1px solid #9f482c; } #standard-menu li { float:left; border-right:1px solid #9f482c; } #standard-menu li a, #standard-menu li a:hover, #standard-menu li.active { display:block; line-height:45px; padding:0 22px; } #standard-menu li a:hover, #standard-menu li.active { color:#fff; } /******************************************************************************************************************************************* #04 | main-menu __________________________________________________________________________________________________________________________________________*/ #main-menu { position:relative; float:left; width:702px; padding:0 0 12px 54px; z-index:999; } #main-menu li { position:relative; float:left; margin:0 10px 0 0; background:transparent url(../img/bg-main-menu.png) left top no-repeat; font-size:1.17em; /* 14px */ font-weight:bold; text-align:center; letter-spacing:0.08em; /* 1px */ } #main-menu li.last { margin:0; } #main-menu li a { display:block; width:168px; line-height:34px; } #main-menu li:hover, #main-menu li.active { background-position:right top; } /* sub-menu <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ #main-menu li ul { position:absolute; left:-9999em; top:27px; width:168px; padding:7px 0 20px 0; background:transparent url(../img/bg-sub-menu.png) left bottom no-repeat; z-index:999; } /* show sub-menu */ #main-menu li:hover ul, #main-menu li.sfhover ul { left:0; } #main-menu li ul li { float:none; margin:0 2px; border-top:1px solid #494949; background-image:none; font-size:0.85em; /* 12px */ font-weight:normal; text-align:left; letter-spacing:0; } #main-menu li ul li.last { margin:0 2px; border-bottom:1px solid #494949; } #main-menu li ul li a { width:133px; /* + padding = 164px */ line-height:29px; padding:0 0 0 31px; color:#fff; background:transparent url(../img/arrow-sub-menu.gif) 15px 12px no-repeat; } #main-menu li ul li a:hover { color:#ff5119; background:transparent url(../img/arrow-sub-menu-active.gif) 15px 12px no-repeat; } /******************************************************************************************************************************************* #05 | content __________________________________________________________________________________________________________________________________________*/ .content { line-height:1.5; /* 18px */ } .article, .article-first { padding-bottom:1.5em; /* 18px */ } .content p, .content ul, .content ol, .content dl, .content form, .content table, .content address { margin-bottom:1.5em; /* 18px */ } .align-justify {text-align:justify;} .content a {color:#333; text-decoration:underline;} .content a:hover {text-decoration:none;} /* headings <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ h1,h2,h3 { line-height:1.1em; font-weight:bold; color:#000; } h1 { font-size:1.67em; /* 20px */ } h2 { font-size:1.17em; /* 14px */ margin-bottom:1.33em; /* 16px */ } h3 { font-size:12px; } /* lists <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ .content ul, .content ol { line-height:1.67; /* 20px */ } .content ul { margin-left:1.17em; /* 14px */ list-style:disc outside; } .content ul ul { margin-left:1.33em; /* 16px */ margin-bottom:0; } .content ol { margin-left:19px; list-style:decimal outside; } .content ol li { margin-bottom:1.42em; /* 17px */ } .content ol ol { margin-left:1.58em; /* 19px */ margin-bottom:0; } .content dt { margin-top:.92em; /* 11px */ font-weight:bold; } /* forms elements <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ label {float:left; width:90px; line-height:17px;} input, button, label {cursor:pointer;} input, textarea {padding:4px 5px;} input, textarea, select {float:left; width:330px; border:1px solid #c2c2c2; color:#333; background:#fff; cursor:text;} textarea {line-height:1.5;} select {padding:3px 1px 1px 2px;} option {padding:0 .834em 0 .334em; /* 0.834em = 10px, 0.334em = 4px */} .radio {vertical-align:middle;} .csc-mailform {width:432px;} .csc-mailform-field {margin-bottom:12px;} .csc-mailform-submit {float:right; width:90px; color:#ff5119; background:#fff; cursor:pointer;} /* tables <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ table {border-collapse:collapse; text-align:left;} caption {text-align:left; font-weight:bold;} th {padding:1px 20px 17px 0; font-weight:bold; vertical-align:top; white-space:nowrap;} td {padding:1px 2px 17px 0; vertical-align:top;} /* accordion <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ .ui-helper-reset {outline:0;} .ui-icon {display:block; width:9px; height:9px; text-indent:-99999px; overflow:hidden;} .ui-icon-triangle-1-e {background:url(../img/ico_accordion_arrow.png) 0 0 no-repeat;} .ui-icon-triangle-1-s {background:url(../img/ico_accordion_arrow.png) right 0 no-repeat;} .ui-accordion {width:100%; margin-bottom:1.5em; /* 18px */} .ui-accordion .ui-accordion-header {position:relative; cursor:pointer; zoom:1;} .ui-accordion .ui-accordion-li-fix {display:inline;} .ui-accordion .ui-state-hover {background:#fff;} .ui-accordion .ui-accordion-header-active {} .ui-accordion .ui-accordion-header a {display:block; padding:6px 0 6px 22px; /*border-top:1px solid #ccc;*/ color:#000; text-decoration:none; outline:0;} .ui-accordion .ui-accordion-header .ui-icon {position:absolute; top:50%; left:5px; margin-top:-4px;} .ui-accordion .ui-accordion-content {position:relative; top:1px; display:none; margin-top:-2px; padding:10px 23px; overflow:auto; zoom:1;} .ui-accordion .ui-accordion-content-active {display:block;} /* mimic accordion style, im backend "unsichtbar" bei "einrueckung und rahmen" */ .csc-frame-invisible {margin-bottom:1.5em; /* 18px */} .csc-frame-invisible h3 {padding:6px 0 6px 22px;}