@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) @ 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 15px: 15px/12px = 1.25em 16px: 16px/12px = 1.33em 18px: 18px/12px = 1.50em 20px: 20px/12px = 1.67em 24px: 24px/12px = 2.00em @ 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:link, a:visited { color:#fdcc00; text-decoration:none; } /******************************************************************************************************************************************* #02 | base layout __________________________________________________________________________________________________________________________________________*/ body { color:#333; background:#fffaf4; /* centers the wrapper in IE5.x, because "margin:0 auto" doesn't work */ text-align:center; font-family:Verdana, Helvetica, sans-serif; font-size:1.2em; } #container { position:relative; width:930px; /* + padding = 980px */ margin:0 auto; /* 15px fuer shadow + 10px fuer weisse border auf jeder seite */ padding:0 25px; /* resets the text alignment */ text-align:left; background:#fff url(../img/container-shadow.gif) center top repeat-y; } #header { position:relative; float:left; width:867px; height:296px; padding:9px 0 0 0; color:#fff; background:#fff url(../img/bg-header.jpg) 0 55px no-repeat; } #primary, #secondary, #tertiary { position:relative; float:left; /*min-height:400px;*/ overflow:hidden; } #primary { background:#fff; } #secondary { background:#f49e00 url(../img/bg-right-col.gif) left top no-repeat; } #tertiary { margin-top:55px; background:#f49e00; } #footer { position:relative; width:980px; height:20px; margin:0 auto; background:#fffaf4 url(../img/footer-shadow.gif) left top no-repeat; font-size:0; clear:both; } /* clearing <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ .clear, #footer:after { display:block; height:0; line-height:0em; font-size:0; clear:both; visibility:hidden; overflow:hidden; content:"."; } /******************************************************************************************************************************************* #03 | different layout variants __________________________________________________________________________________________________________________________________________*/ /* fuer equal-height layout <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ body.equal #container { overflow:hidden; } body.equal #primary, body.equal #secondary, body.equal #tertiary { margin-bottom:-32767px; padding-bottom:32767px; } /* col-3-layout <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ body.col-3 #col-pair-1 { position:relative; float:right; /* muß die width von #primary + #secondary zusammen haben, auto geht leider nicht * in den IE's und im Netscape */ width:867px; background:#f49e00; } body.col-3 #primary { float:left; width:575px; margin-left:0; } body.col-3 #secondary { float:right; width:292px; margin-left:0; } body.col-3 #tertiary { float:left; width:63px; } /****** tagebuch seite (1-spaltig) ************/ body.col-1 #col-pair-1 { position:relative; float:right; /* muß die width von #primary + #secondary zusammen haben, auto geht leider nicht * in den IE's und im Netscape */ width:867px; background:#f49e00; } body.col-1 #primary { float:left; width:867px; margin-left:0; } body.col-1 #tertiary { float:left; width:63px; } /******************************************************************************************************************************************* #04 | header __________________________________________________________________________________________________________________________________________*/ .top-box { width:809px; height:34px; background:#f49e00; clear:both; } .hotline { float:left; height:34px; line-height:32px; padding:0 24px; color:#fefefe; background:#bf077f; font-size:1.08em; /* 13px */ } /* number */ .hotline span { padding-left:5px; font-weight:bold; font-size:1.33em; } #standard-menu { float:right; font-size:1.25em; /* 15px */ text-transform:uppercase; } #standard-menu a { display:block; line-height:34px; padding:0 14px 0 9px; border-left:2px solid #fefefe; color:#fefefe; } #header h1 { float:right; margin:15px 0 0 0; padding:0 57px 0 0; font-weight:normal; } .logo { display:block; } .slogan { display:block; margin:5px 0 0 16px; color:#707173; font-size:0.83em; /* 10px */ } /******************************************************************************************************************************************* #05 | main-menu __________________________________________________________________________________________________________________________________________*/ .mainmenu-wrap { position:relative; float:left; width:100%; margin-top:141px; background:#f49e00; } #mainmenu { width:809px; height:29px; background:#bd007b url(../img/bg-mainmenu.gif) left bottom repeat-x; } #mainmenu li { float:left; line-height:29px; border-right:2px solid #fefefe; color:#fefefe; font-size:1.25em; /* 15px */ /*text-transform:uppercase;*/ letter-spacing:-0.02em; } #mainmenu li.last { border:none; } #mainmenu li a { display:block; padding:0 8px; color:#fefefe; } #mainmenu li a:hover, #mainmenu li.active a { display:block; line-height:29px; padding:0 8px; color:#cc0066; background:#fff; } /******************************************************************************************************************************************* #05 | font-resizer __________________________________________________________________________________________________________________________________________*/ .fontResizer { float:right; height:34px; background:#f49e00; } .fontResizer ul { padding:3px 9px 0 18px; color:#fff; } .fontResizer ul li { float:left; line-height:28px; border-right:2px solid #fff; color:#fff; font-size:1.17em; /* 14px */ } .fontResizer ul li.fsize0 { border:none; } .fontResizer ul li.label { padding-right:9px; } .fontResizer ul li a:link, .fontResizer ul li a:visited { display:block; padding:0 9px; color:#fff; font-size:1.25em; /* 15px */ font-weight:bold; } /******************************************************************************************************************************************* #06 | content __________________________________________________________________________________________________________________________________________*/ .content { padding:50px 33px 20px 33px; line-height:1.5; /* 18px */ } .content .article { display:inline-block; padding-bottom:25px; } .content p, .content ul, .content ol, .content dl, .content form, .content table, .content address { margin-bottom:20px; font-size:1.08em; /* 13px */ } .content .article a { color:#CC0066; } .content .article a:hover { text-decoration:underline; } /* images <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ .content img { float:left; margin-right:17px; } .content img.last { margin-right:0; } #secondary .csc-textpic { overflow:hidden; } #secondary div.csc-textpic div.csc-textpic-imagewrap .csc-textpic-image { margin-bottom:0 !important; padding-bottom:20px; } /* headings <<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<< */ h2 { line-height:1em; margin-bottom:13px; color:#cc0066; font-size:1.25em; /* 15px */ text-transform:uppercase; } h3 { line-height:1.33em; /* 16px */ margin-bottom:2px; color:#cc0066; font-size:1.08em; /* 13px */ } /* 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: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; } /******************************************************************************************************************************************* #07 | footer __________________________________________________________________________________________________________________________________________*/