@charset "UTF-8"; /********************************************************* flixed layout -------------------------------------------------------- table of contents -------------------------------------------------------- #01 reset #02 base layout #03 different layout variants #04 header #05 main-menu #06 content #07 footer -------------------------------------------------------- font-size | basic (defined in -tag) -------------------------------------------------------- 10px = 1.0em 11px = 1.1em 12px = 1.2em (active) 13px = 1.3em @ font-size of the parent element | 1.08em (13px) ------------------------------------------------- 11px: 11px/13px = 0.85em ________________________________________________________*/ /******************************************************************************************************************************************* #01 | reset __________________________________________________________________________________________________________________________________________*/ * { padding:0; margin:0; font-size:100.01%; } html { /* erzwingen vertikaler scrollbars in FF, Opera, Safari und NS, in den IE's sind * die scrollbars eh immer da */ height:100%; margin-bottom:1px; overflow-y:scroll; /* CSS3 */ /* bewirkt, dass eine font-size im body von 1em=10px entspricht, 1.2em=12px usw. */ font-size:62.5%; } img, fieldset { border:0; } ul, ol { list-style:none; } a { text-decoration:none; } /******************************************************************************************************************************************* #02 | base layout __________________________________________________________________________________________________________________________________________*/ body { color:#666; background:#9c9d9f url(../img/body-pattern.png) 0 0 repeat; /* centers the wrapper in IE5.x, because "margin:0 auto" doesn't work */ text-align:center; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:1.2em; height:100%; } #head-container { min-width:800px; /* resets the text alignment */ text-align:left; background:transparent url(../img/header-pattern.png) 0 0 repeat; } #main-container { position:relative; width:800px; /* + padding = 858px */ margin:0 auto; /* 15px fuer shadow */ padding:0 29px; /* resets the text alignment */ text-align:left; background:transparent url(../img/container-shadow.png) 0 0 repeat-y; } #footer-container { position:relative; width:800px; /* + padding = 858px */ margin:0 auto; /* 15px fuer shadow */ padding:0 29px 30px 29px; background:transparent url(../img/footer-shadow.png) 0 0 no-repeat; } #header-wrap { position:relative; width:800px; /* + padding = 858px */ margin:0 auto; /* 15px fuer shadow */ padding:0 29px; background:transparent url(../img/container-shadow.png) 0 0 repeat-y; z-index:1000; /* IE's, sonst submenu nicht sichtbar */ } #header { position:relative; width:800px; height:353px; margin:0 auto; background:#fff url(../img/header-bg.jpg) 15px 21px no-repeat; } #col-wrap { position:relative; width:785px; /* + border = 800px */ margin:0 auto; border-left:15px solid #faba00; background:#fff url(../img/mainmenu-shadow.png) 0 0 repeat-x; } #primary, #secondary { position:relative; float:left; } #primary { background:transparent url(../img/mainmenu-shadow-left.png) 0 0 no-repeat; margin-left:-15px; padding-left:15px; } #secondary { } #footer { position:relative; width:800px; height:28px; margin:0 auto; background:transparent url(../img/footer-bg.png) 0 0 no-repeat; clear:both; } /* clearing <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ .clear, #header-wrap:after, #col-wrap:after, #footer-container:after { display:block; height:0; line-height:0em; font-size:0; clear:both; visibility:hidden; overflow:hidden; content:"."; } /******************************************************************************************************************************************* #03 | different layout variants __________________________________________________________________________________________________________________________________________*/ /* col-2-right <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ body.col-2-right #primary { float:left; width:436px; /* = 451px - 15px border von #col-wrap */ } body.col-2-right #secondary { float:right; width:327px; /* + padding-right = 349 */ padding:33px 22px 0 0; } /******************************************************************************************************************************************* #04 | header __________________________________________________________________________________________________________________________________________*/ .top-bar { background-color:#faba00; overflow:hidden; /* clearing */ } /* font-resizer <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ .fontResizer { float:right; background:transparent url(../img/top-bar-divider.png) left bottom no-repeat; overflow:hidden; /* clearing */ } .fontResizer li { float:left; line-height:21px; color:#646466; background:transparent url(../img/top-bar-divider.png) right bottom no-repeat; } .fontResizer .label { padding:0 17px; font-size:0.917em; /* 11px */ font-weight:bold; } .fontResizer a { display:block; padding:0 17px 0 15px; color:#646466; font-size:1.25em; /* 15px */ font-weight:bold; float:left; } .fontResizer a:hover { color:#fff; } /* standard-menu <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ #std-menu { float:right; overflow:hidden; /* clearing */ } #std-menu a { display:block; line-height:21px; margin:0 21px 0 17px; color:#646466; font-weight:bold; font-size:0.917em; /* 11px */ text-transform:uppercase; } #std-menu a:hover { color:#fff; } /* logo <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ #header h1 { position:absolute; top:217px; right:42px; } /* header image <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ .header-img { display:block; } /******************************************************************************************************************************************* #05 | main-menu __________________________________________________________________________________________________________________________________________*/ #main-menu { position:relative; float:left; width:100%; height:38px; background:transparent url(../img/mainmenu-bg.png) left bottom repeat-x; font-family:Arial, Helvetica, sans-serif; z-index:1000; } #main-menu li { position:relative; float:left; padding-right:2px; /* space for mainmenu-divider.png */ color:#fff; background:transparent url(../img/mainmenu-divider.png) right bottom no-repeat; } #main-menu li.first { padding-left:12px; } #main-menu li.last { background-image:none; } #main-menu li a { display:block; padding:0 8px; line-height:38px; color:#fff; background:transparent url(../img/mainmenu-bg.png) left bottom repeat-x; } #main-menu li:hover a, #main-menu li.sfhover a, #main-menu li.active a { color:#fff; background-position:left top; } /* second-level <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ #main-menu li ul { display:none; /* hide menu */ position:absolute; top:38px; left:0; /* unbedingt feste breite vergeben, width:auto; macht totale probleme in den IE's !!! */ width:200px; } #main-menu li:hover ul, #main-menu li.sfhover ul { display:block; /* show menu */ } #main-menu li li { float:none; height:1%; border-bottom:1px solid #ee7f01; /* reset first-level */ padding-right:0; background-image:none; } #main-menu li li.first { padding-left:0; } #main-menu li li.last { border-bottom:none; } #main-menu li li a { float:none; height:1%; line-height:17px; padding:7px 8px; background:#faba00; } #main-menu li li a:hover, #main-menu li li.active a { background:#ee7f01 !important; } /******************************************************************************************************************************************* #06 | content __________________________________________________________________________________________________________________________________________*/ .content { padding:33px 39px 0 39px; line-height:1.5; /* 18px */ } .content .csc-default { padding-bottom:25px; } .content p, .content ul, .content ol, .content dl, .content form, .content table, .content address { margin-bottom:20px; } .content .csc-default a { color:#ee7f01; } .content .csc-default a:hover { text-decoration:underline; } /* images <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ #secondary img { display:block; } .csc-textpic-caption { padding-top:3px; line-height:1.4em; } /* css styled content ueberschreiben benoetigt IE7 ...stellt kein margin-bottom beim letzten bild bzw. bei nur einem bild dar ...durch padding-bottom ersetzen */ div.csc-textpic div.csc-textpic-imagewrap .csc-textpic-image { margin-bottom:0 !important; padding-bottom:20px; } /* headings <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ h2 { /* IE6, sonst border-bottom manchmal nicht sichtbar */ position:relative; width:100%; font-size:1.417em; /* 17px */ margin-bottom:22px; color:#ee7f01; font-size:1.417em; /* 17px */ font-weight:bold; } h3 { margin-bottom:15px; color:#ee7f01; font-size:1.17em; /* 14px */ font-weight:bold; } ul h3 { font-size:1em; margin-bottom:0; } /* 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-top:4px; margin-bottom:0; font-size:1em; } .content li { margin-bottom:15px; } .content li li { margin-bottom:2px; } .content ol { margin-left:1.42em; /* 17px */ list-style:decimal outside; } .content ol ol { margin-left:1.58em; /* 19px */ margin-bottom:0; } .content dt { margin-top:.92em; /* 11px */ font-weight:bold; } /* tables <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ .content table { border-collapse:collapse; } .content caption { text-align:left; font-weight:bold; color:#88ba14; } .content th { padding:2px 2px 2px 0; text-align:left; vertical-align:top; } .content td { padding:2px 2px 2px 12px; text-align:left; } /******************************************************************************************************************************************* #07 | footer __________________________________________________________________________________________________________________________________________*/