/* CSS Styles for gemeinwohl.info, Author Tim Reeves, Stand 2009-07-06 */ /* For the xml parser and standards-conform mode the canvas is , not */ /* Scrollers here are in the foreground in all browsers, however - */ /* when scrollers come and what they move differs across browsers. */ html { width: 100%; height: 100%; /* Gecko and Opera both need this, in html AND body */ margin: 0px; padding: 0px; overflow: hidden; /* Browsers differ on scrollers here, Opera is bad */ background-color: #FFEFD7; font-size: 100.1%; /* For some old IE versions */ /* THE LARGE AND SPACY VERSION */ /* Verdana Win 98% Mac 95% Lnx 56%, DejaVu Sans Lnx 87%, Tahoma Win 97% Mac 72% Lnx -, note that Tahoma is smaller and closer, Arial Win 98% Mac 97% Lnx 65%, Helvetica Win - Mac 96% Lnx 52% */ font-family: Verdana, DejaVu Sans, Tahoma, Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif; /* SMALL AND ELEGANT NEVERTHELESS READABLE (SCREEN FONT W/O SERIFS) */ /* Calibri is approachable and a bit touchy-feely, and does its best work as body text. Calibri Win 47%. There are two small caveats to using it, however: 1. A rendering bug in Firefox 2 caused some of the Vista "C" fonts to disappear at certain sizes. Be sure to thoroughly test your pages in that browser before settling on it. 2. Calibri seems to render smaller on the Mac, so be careful using it with layouts that require your text to fill a certain amount of space. Lucida Grande (Mac, 92%), Lucida Sans Unicode (Win, 95%) */ font-family: Calibri, Lucida Grande, Lucida Sans Unicode, Trebuchet MS, Tahoma, Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif; } body { /* = Canvas, = Viewport */ width: 100%; /* Old MSIE has a stupidly large default value */ height: 100%; /* Gecko and Opera both need this, in html AND body */ margin: 0px; padding: 0px; overflow: auto; /* THIS allows scrollbars which are always in the foreground */ background-color: transparent; font-size: 78%; /* Standard for Verdana */ font-size: 88%; /* The basis for "em" sizes below */ } /* To make things "pixelgenau" */ img, table, table td, form, div, div div, div div div, div div div div, pre { 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 */ } /* Don't forget to avoid the "white-space next to " bug in old MSIE */ /* An own container to give the "website" a minimum size (force outer scrollers) */ div.website { /* Contains: header - main - footer */ width: auto; min-width: 960px; /* Can cause horizontal scroller in ; see div.main */ height: 100%; /* Most browsers: of parent.offsetheight (FF clientHeight) */ min-height: 450px; /* Can cause vertical scroller in */ /* min-height value is also in startup.js::neuAufbau() */ /* Actual height set in JS to greater of min-height and parent.clientHeight */ height: auto; /* Expands to Content, i.e. no scroller on "main" */ /* => und das ist wohl als Degrading voll ausreichend! */ overflow: hidden; /* Opera-Bug: Not obeyed - Vert. body scroller w/o JS */ text-align: center; /* This is for a weakness in IE5 */ background-color: transparent; } /* This DIV is the header right across the top of the website */ div.header { position: static; width: 100%; height: 3%; overflow: hidden; background-color: transparent; } /* This DIV is the footer right across the bottom of the website */ div.footer { position: static; width: 100%; height: 3%; overflow: hidden; background-color: transparent; } div.main { /* Centered container for nav + content, degrading vertical scroller */ position: static; top: 3%; height: 94%; width: 960px; /* But only use max. 940 - space for degrading scroller */ margin: 0px auto auto 0px; /* Positioned on the LEFT */ margin: 0px auto 0px auto; /* The horizontal centering */ overflow: auto; /* See comment in div.scroller below */ background-color: transparent; background-color: #FFFFEE; } /* This DIV is the header right across the top of the page */ /* If the page initially has a degrading scroller, Webkit does not correct */ /* the calculated width when startup.js::neuAufbau() makes it go away. The */ /* fix is in startup.js::neuAufbau() */ div.head { /* In div.main */ position: relative; /* To allow positioning of div.extra within it */ /* IE handles "relative" wrong, head area not scrolled (degrading mode) */ /* Dropdown-Menus insert div.nav below div.extra (i.e. move div.extra up) */ width: auto; height: 138px; text-align: left; text-indent: 20px; overflow: hidden; background-image: url(../images/std/kopfhg.jpg); background-repeat: repeat; } /* This DIV is the breadcrumb / sec-nav right across the top of the page */ div.extra { /* In div.main div.head, inherited by breadcrumbs and secnav */ position: absolute; left: 0px; bottom: 29px; width: 100%; height: 29px; text-align: left; text-indent: 20px; overflow: hidden; font-size: 0.85em; /* Same as "small" */ background-color: transparent; border-bottom: 1px dotted #CCCCCC; } div.extra div p { color: #555555; } div.breadcrumbs { /* In div.main div.head div.extra */ position: static; float: left; width: auto; margin: 0px; height: 100%; padding: 0px 0px 0px 0px; background-color: transparent; } div.secnav { /* In div.main div.head div.extra */ position: static; float: right; width: auto; margin: 0px; height: 100%; padding: 0px 0px 0px 0px; background-color: transparent; } div.breadcrumbs p, div.secnav p { margin: 0px 6px 0px 0px; line-height: 29px; vertical-align: bottom; white-space: nowrap; font-size: 0.93em; /* Same as "small" */ } div.secnav p span#fontsize { } div.secnav p span#fontsize a, div.secnav p span#fontsize a:link, div.secnav p span#fontsize a:visited, div.secnav p span#fontsize a:active, div.secnav p span#fontsize a:focus, div.secnav p span#fontsize span.current { text-decoration: none; padding: 0px 3px; } div.secnav p span#fontsize a:hover { text-decoration: underline; padding: 0px 3px; } div.secnav p span#fontsize span.spacer { /* IE does not obey margin/padding on inline-elements */ } div.headfoot { /* Special to gemeinwohl.info */ position: absolute; left: 0px; bottom: 0px; width: 100%; height: 29px; background-image: url(../images/std/cw-bg2.png); } div.nav { /* In div.main ( div.head ) - depends on menu style */ position: static; float: left; width: 200px; margin: 0px; height: auto; padding: 1em 0px 1em 0px; background-color: transparent; overflow: visible; z-index: 1; } div.nav div.nav2 { /* Zweitnavi */ padding: 16px 0px 0px 10px; } div.nav div.nav2 p { margin: 4px 0px 0px 0px; } div.ctrDiv { /* In div.nav */ height: 1px; width: 1px; } div.tipp { margin: 29px 0px 0px 29px; width: 164px; height: auto; } div.scroller { /* In div.main, defines the "optical content area" */ position: relative; /* relative breaks IE, only static works */ top: 0px; left: 0px; position: static; float: right; width: 740px; height: auto; /* Reset in JS to available height in px (main - head - extra) */ /* Without JS the layout "degrades" to force a vertical scroller in div.main */ overflow: auto; /* Allows a vertical scrollbar when height set fixed in JS */ background-color: #FFFFEE; } /* In div.main div.scroller div.realscroller (can force scrollbar - somewhere :) */ div.content { position: static; margin-left: 21px; width: 689px; /* div.scroller.width - div.content.margin-left - 30 (for degrading scroller) */ height: auto; overflow: hidden; padding-bottom: 8px; background-color: #FFFFEE; } /* In div.main div.scroller div.realscroller div.content (left = main panel) */ div.contentleft { float: left; width: 550px; /* div.content.width - div.contentright.width - 20 */ background-color: transparent; } /* In div.main div.scroller div.realscroller div.content (right = extra panel) */ div.contentright { float: right; width: 97px; /* 689 - 550 - 20 (Abstand) - 20 (Padding) - 2 (Borders) */ height: 280px; /* Corresponds to div.website min-heigth */ background-color: #FFEFD7; padding: 6px 10px; margin: 48px 0px 0px 0px; border: 1px solid #A6A6A6; border: 1px solid #CCCCCC; background-image: url(../images/std/kopfhg.jpg); background-repeat: repeat; background-color: #FFEFD7; background-color: transparent; -moz-border-radius: 8px; -webkit-border-radius: 8px; } /* Classes for Text */ h1, h2, h3 { font-family: Georgia, Constantia, Palatino Linotype, Palatino, Monaco; color: #666666; text-decoration: none; letter-spacing: 1px; } h4, h5 { font-family: Georgia, Constantia, Palatino Linotype, Palatino, Monaco; color: #606060; text-decoration: none; } p, li, td, th { font-size: 1.0em; color: #333333; text-decoration: none; } h1 { font-size: 1.3em; margin: 0.7em 0px 0.4em 0px; } h2 { font-size: 1.2em; margin: 1.2em 0px 0.3em 0px; } h3 { font-size: 1.1em; margin: 1.1em 0px 0.2em 0px; } h4 { font-size: 1.0em; margin: 1.0em 0px 0.15em 0px; } h5 { font-size: 0.9em; margin: 0.9em 0px 0.1em 0px; } p { margin: 0.5em 0px 0.65em 0px; line-height: 130%; } ul, ol { margin: 0.5em 0px 0px 16px; padding: 0px; } ul { list-style-type: circle; /* disc */ } ul.sec { list-style-type: circle; } ul.sec li { margin-left: 0px; } ol { margin-left: 22px; } ul li, ol li { margin: 0px 0px 0.65em 0px; padding: 0px 0px 0px 1px; } td { vertical-align: top; } p.pretty:first-letter { font-weight: bold; } p.nachoben { margin-top: 1em; font-size: 0.8em; /* Wirkt wie "small" */ } p.gedicht { font-family: Georgia, Constantia, Palatino Linotype, Palatino, Monaco; font-size: 0.9em; line-height: 170%; margin-left: 12px; margin: 0.65em 0px 0.4em 13px; } .zitat { font-family: Georgia, Constantia, Palatino Linotype, Palatino, Monaco; font-size: 0.9em; } p.zitat { font-family: Georgia, Constantia, Palatino Linotype, Palatino, Monaco; font-size: 0.9em; font-style: italic; margin: 0.4em 0px 0.8em 16px; } .vielluft { margin-top: 1.3em; margin-bottom: 0.65em; } .mehrluft { margin-top: 1em; margin-bottom: 0.65em; } .ohneluft { margin-top: 0px; margin-bottom: 0px; } .vorliste { margin-bottom: 0.3em; } .letzte { margin-bottom: 0px; padding-bottom: 1.3em; } .topless { margin-top: 0px !important; } .bottomless { margin-bottom: 0px !important; } .lastitem { padding-bottom: 12px !important; } strong, .strong { color: #333333; /* font-size: 1.1em; */ font-weight: bold; /* letter-spacing: 1px; */ } .small { font-size: 0.93em; } .mittig { text-align: center; } .bildbeschriftung { color: #222222; font-size: 11px; letter-spacing: 1px; font-weight: normal; font-family: Tahoma, Arial, Helvetica, Geneva, Swiss, SunSans-Regular, sans-serif; } hr { height: 1px; color: #A6A6A6; background-color: #A6A6A6; border-style: none; /* note that msie doesnt collapse margins around an hr */ margin: 1.4em 0px 1.4em 0px; padding: 0px; } img.bordercenter { display: block; text-align: center; margin: 1.6em auto 0px auto; border: 1px solid rgb(142,163,163); } .floatleft { display: block; float: left; text-align: left !important; margin: 0.65em 12px 0.3em 0px !important; } .floatright { display: block; float: right; text-align: center !important; margin: 0.65em 0px 0.3em 12px !important; } img.luftoben, div.luftoben { margin-top: 12px !important; } div.floatright img { display: block; } div.halfpic { width: 266px; /* Pic 264 + 2 Border */ height: auto; } div.halfpic img { display: block; border: 1px solid rgb(142,163,163); } div.halfpicleft { float: left; margin: 0px 6px 0.65em 0px; } div.halfpicright { float: right; margin: 0px 0px 0.65em 6px; } /* Info-Box (umrandet, dunkler) im Textfluss */ /* Add style="float:left;" to a div.infobox to limit its width to its content */ div.infobox { padding: 6px 13px; margin: 10px 5px 10px 0px; width: auto; border: 1px solid #A6A6A6; background-color: #FFEFD7; -moz-border-radius: 8px; -webkit-border-radius: 8px; } /* Tabellarische Daten ohne Umrandung, z.B. Impressum, Kontaktdaten */ table.daten { margin-top: 0.65em; } table.daten, table.daten td { padding-bottom: 0.6em; } /* Tabellarische Daten in voller content-Breite */ /* mit hoizontalem Zellenborder (downloads, weblinks) */ table.spalten { table-layout: fixed; width: 550px; /* Wie div.contentleft */ empty-cells: show; /* Geht nicht in MSIE */ margin-bottom: 8px; } table.spalten td, table.spalten th { overflow: hidden; padding: 3px 0px; border-bottom: 1px solid #A6A6A6; } /* Regarding cell width, we MUST start with the max. number of cells, NOT a colspan */ table.spalten td.topborder { padding: 0px; height: 4px; line-height: 4px; } table.spalten td.vorheader { padding-bottom: 12px !important; } table.spalten th { width: 542px; padding: 3px 4px; background-color: transparent; background-image: url(../images/std/aubergineverlauf.gif); background-repeat: repeat-x; color: #525252; font-weight: bold; letter-spacing: 1.5px; } table.spalten td.beschreibung { /* 368px */ padding: 3px 4px; width: 380px; } table.spalten td.anzeigen { width: 68px; } table.spalten td.download { width: 94px; } table.spalten td.linktext { padding: 3px 4px; width: 330px; } table.spalten td.weblink { width: 212px; } /* Standard link style : Permanently green links */ a, a:link, a:visited, a:active, a:focus { color: #60AA3D; color: #478729; background-color: transparent; text-decoration: underline; } /* Except on Hover */ a:hover { color: #478729; background-color: #FFFFFF; text-decoration: underline; } /* Classes for Extra-Navigation */ a.avble, a.avble:link, a.avble:visited, a.avble:active, a.avble:focus { color: #478729; background-color: transparent; text-decoration: none; } a.avble:hover { color: #478729; background-color: #FFFFFF; text-decoration: none; } a.iscur, a.iscur:link, a.iscur:visited, a.iscur:active, a.iscur:focus { color: #478729; background-color: transparent; text-decoration: underline; } a.iscur:hover { color: #478729; background-color: #FFFFFF; text-decoration: underline; }