/**********************************************************************/ /* "styleguide.css" fuer www.WortBeruehrungen.de */ /* Copyright Juergen und Diana Hillebrand */ /**********************************************************************/ /* */ /* +-------------+---------------------------------+---------------------------------------------- */ /* | 144 x 144 | 720 x 144 | 140 x 144 | beliebigx144 */ /* | logo | topmenu | topsky | topright */ /* +-------------+---------------------------------+--------------------------------------------- */ /* | | | 10 | */ /* | | | +------------+ | */ /* | 144 x 584 | 720 x beliebig | 10 | 120 x 600 | 10 | */ /* | sidemenu | content | | | | */ /* +-------------+ | | | | */ /* | 144 x 36 | | +------------+ | */ /* | impressum | | 10 | */ /* +-------------+ +--------------------------+ */ /* +---------------------------------+ */ /* */ /* */ /**********************************************************************/ /**********************************************************************/ /* Globale Styles */ /**********************************************************************/ .left { text-align:left !important; } .center { text-align:center !important; } .right { text-align:right !important; } .fleft { float:left; margin-right:10px !important; } .fright { float:right; margin-left:10px !important; } .clear { clear:both; } .top { vertical-align:top !important; } .middle { vertical-align:middle !important; } .bottom { vertical-align:bottom !important; } /**********************************************************************/ /* html und body */ /**********************************************************************/ html { padding:0; } body { font:normal 100.01% Helvetica,Arial,sans-serif; color:#000000; min-width:40em; margin:0; padding:0; } /**********************************************************************/ /* Definition "logo" 144 x 144 = (5+136+3) ^2 = ( 5 + 4x (32+2) + 3 ) ^2 */ /**********************************************************************/ #logo { position:absolute; top:0px; left:0px; width:144px; height:144px; border:none; overflow:hidden; padding:0; } #logo div { height:32px; margin:0; padding:0; } #logo div.first { margin:5px 0px 0px 5px; } #logo div.next { margin:2px 0px 0px 5px; } #logo a { padding:0; margin:0px 2px 0px 0px; width:32px; height:32px; float:left; text-decoration:none; } #logo a.key01-w:link , #logo a.key01-w:visited { background-image:url(/logo/key01_w_normal.png); } #logo a.key01-w:hover { background-image:url(/logo/key01_w_pressed.png); } #logo a.key02-o:link , #logo a.key02-o:visited { background-image:url(/logo/key02_o_normal.png); } #logo a.key02-o:hover { background-image:url(/logo/key02_o_pressed.png); } #logo a.key03-r:link , #logo a.key03-r:visited { background-image:url(/logo/key03_r_normal.png); } #logo a.key03-r:hover { background-image:url(/logo/key03_r_pressed.png); } #logo a.key04-t:link , #logo a.key04-t:visited { background-image:url(/logo/key04_t_normal.png); } #logo a.key04-t:hover { background-image:url(/logo/key04_t_pressed.png); } #logo a.key05-b:link , #logo a.key05-b:visited { background-image:url(/logo/key05_b_normal.png); } #logo a.key05-b:hover { background-image:url(/logo/key05_b_pressed.png); } #logo a.key06-e:link , #logo a.key06-e:visited { background-image:url(/logo/key06_e_normal.png); } #logo a.key06-e:hover { background-image:url(/logo/key06_e_pressed.png); } #logo a.key07-r:link , #logo a.key07-r:visited { background-image:url(/logo/key07_r_normal.png); } #logo a.key07-r:hover { background-image:url(/logo/key07_r_pressed.png); } #logo a.key08-u:link , #logo a.key08-u:visited { background-image:url(/logo/key08_u_normal.png); } #logo a.key08-u:hover { background-image:url(/logo/key08_u_pressed.png); } #logo a.key09-e:link , #logo a.key09-e:visited { background-image:url(/logo/key09_e_normal.png); } #logo a.key09-e:hover { background-image:url(/logo/key09_e_pressed.png); } #logo a.key10-h:link , #logo a.key10-h:visited { background-image:url(/logo/key10_h_normal.png); } #logo a.key10-h:hover { background-image:url(/logo/key10_h_pressed.png); } #logo a.key11-r:link , #logo a.key11-r:visited { background-image:url(/logo/key11_r_normal.png); } #logo a.key11-r:hover { background-image:url(/logo/key11_r_pressed.png); } #logo a.key12-u:link , #logo a.key12-u:visited { background-image:url(/logo/key12_u_normal.png); } #logo a.key12-u:hover { background-image:url(/logo/key12_u_pressed.png); } #logo a.key13-n:link , #logo a.key13-n:visited { background-image:url(/logo/key13_n_normal.png); } #logo a.key13-n:hover { background-image:url(/logo/key13_n_pressed.png); } #logo a.key14-g:link , #logo a.key14-g:visited { background-image:url(/logo/key14_g_normal.png); } #logo a.key14-g:hover { background-image:url(/logo/key14_g_pressed.png); } #logo a.key15-e:link , #logo a.key15-e:visited { background-image:url(/logo/key15_e_normal.png); } #logo a.key15-e:hover { background-image:url(/logo/key15_e_pressed.png); } #logo a.key16-n:link , #logo a.key16-n:visited { background-image:url(/logo/key16_n_normal.png); } #logo a.key16-n:hover { background-image:url(/logo/key16_n_pressed.png); } /**********************************************************************/ /* Definition topmenu 720 x 144 */ /**********************************************************************/ #topmenu { position:absolute; top:0px; left:144px; width:720px; height:144px; border:none; overflow:hidden; } /* Seitenüberschrift 72px hoch */ #topmenu h1 { text-align:center; margin:0; padding:0; font:bold 32px/32px Helvetica,Arial,sans-serif; } #topmenu h1 span, #topmenu h1 a { display:block; margin:0; padding:20px 0px; text-decoration:none; } #topmenu h1 a { background:url(/topmenu/home.png) no-repeat 4px 4px; } #topmenu h1 a:hover { background-image:url(/topmenu/home_selected.png); color:#99cc33; } /* Farbe für Home */ /* Menüpunkte 2x 36px hoch */ #topmenu div { height:36px; margin:0; padding:0; } /* #topmenu div.first { } */ #topmenu div.second { margin:0 60px; } #topmenu div strong, #topmenu div span a { font:bold 16px/24px Helvetica,Arial,sans-serif; text-align:center; padding:0; margin:6px 5px; width:110px; height:24px; float:left; color:black; text-decoration:none; } #topmenu div span a:focus { color:#a0a0a0; } /* Textfarbe für Auswahl über Tastatur */ #topmenu a.autorin:link , #topmenu a.autorin:visited { background-image:url(/topmenu/autorin.gif); } #topmenu a.autorin:hover, #topmenu strong.autorin { background-image:url(/topmenu/autorin_selected.gif); } #topmenu a.texte:link, #topmenu a.texte:visited { background-image:url(/topmenu/textproben.gif); } #topmenu a.texte:hover, #topmenu strong.texte { background-image:url(/topmenu/textproben_selected.gif); } #topmenu a.lyrik:link, #topmenu a.lyrik:visited { background-image:url(/topmenu/lyrik.gif); } #topmenu a.lyrik:hover, #topmenu strong.lyrik { background-image:url(/topmenu/lyrik_selected.gif); } #topmenu a.lesungen:link, #topmenu a.lesungen:visited { background-image:url(/topmenu/lesungen.gif); } #topmenu a.lesungen:hover, #topmenu strong.lesungen { background-image:url(/topmenu/lesungen_selected.gif); } #topmenu a.oton:link, #topmenu a.oton:visited { background-image:url(/topmenu/oton.gif); } #topmenu a.oton:hover, #topmenu strong.oton { background-image:url(/topmenu/oton_selected.gif); } #topmenu a.referenzen:link, #topmenu a.referenzen:visited { background-image:url(/topmenu/referenzen.gif); } #topmenu a.referenzen:hover, #topmenu strong.referenzen { background-image:url(/topmenu/referenzen_selected.gif); } #topmenu a.schreibkurse:link , #topmenu a.schreibkurse:visited { background-image:url(/topmenu/schreibkurse.gif); } #topmenu a.schreibkurse:hover, #topmenu strong.schreibkurse { background-image:url(/topmenu/schreibkurse_selected.gif); } #topmenu a.gaestebuch:link, #topmenu a.gaestebuch:visited { background-image:url(/topmenu/gaestebuch.gif); } #topmenu a.gaestebuch:hover, #topmenu strong.gaestebuch { background-image:url(/topmenu/gaestebuch_selected.gif); } #topmenu a.newsletter:link, #topmenu a.newsletter:visited { background-image:url(/topmenu/newsletter.gif); } #topmenu a.newsletter:hover, #topmenu strong.newsletter { background-image:url(/topmenu/newsletter_selected.gif); } #topmenu a.kontakt:link, #topmenu a.kontakt:visited { background-image:url(/topmenu/kontakt.gif); } #topmenu a.kontakt:hover, #topmenu strong.kontakt { background-image:url(/topmenu/kontakt_selected.gif); } #topmenu a.links:link, #topmenu a.links:visited { background-image:url(/topmenu/links.gif); } #topmenu a.links:hover, #topmenu strong.links { background-image:url(/topmenu/links_selected.gif); } /**********************************************************************/ /* Definition topsky 140 x 144 */ /**********************************************************************/ #topsky { position:absolute; top:0px; left:864px; width:140px; height:144px; border:none; overflow:hidden; } /**********************************************************************/ /* Definition topright beliebig x 144 */ /**********************************************************************/ #topright { margin:0px 0px 0px 1004px; height:144px; border:none; } /**********************************************************************/ /* Definition sidemenu 144x620 = (5+134+5) * (8+604+8) bei x=0, y=144 */ /**********************************************************************/ /* Platzhalter zum füllen mit mittlerer Farbe */ #sidemenu { position:absolute; top:144px; left:0px; width:134px; height:604px; border:0; overflow:hidden; padding:8px 5px; } #sidemenu a:focus { color:#a0a0a0; } /* Textfarbe für Auswahl über Tastatur */ /* 1. Ebene mit Trennstrich */ #sidemenu ul { margin:0; padding:0; border:0; list-style:none; } #sidemenu ul li { margin:2px 0px; padding:0; border:0; font-size:2px; line-height:2px; } /* font-size und line-height nur für IE 6) */ #sidemenu ul li h1, /* für Überschriften */ #sidemenu ul li p, /* für ausgewählten Text */ #sidemenu ul li a { margin:0; padding:2px 2px 2px 16px; text-indent:-14px; border:0; text-align:left; font:bold 14px/18px Helvetica,Arial,sans-serif; display:block; text-decoration:none; color:black; } #sidemenu ul li hr { margin:0; padding:0; border:0; height:3px; } /* 2. Ebene mit Trennstrich */ #sidemenu ul li ul { margin:0px 0px 0px 10px; padding:0; border:0; list-style:none; } #sidemenu ul li ul li { margin:2px 0px; padding:0; border:0; font-size:2px; line-height:2px; } /* font-size und line-height nur für IE 6) */ #sidemenu ul li ul li p, #sidemenu ul li ul li a { margin:0; padding:2px 2px 2px 14px; text-indent:-12px; border:0; text-align:left; font:bold 12px/15px Helvetica,Arial,sans-serif; display:block; text-decoration:none; color:black; } #sidemenu ul li ul li hr { margin:0; padding:0; border:0; height:3px; } /* 3. Ebene mit Trennstrich */ #sidemenu ul li ul ul li { margin:0px 0px 0px 10px; padding:0; border:0; list-style:none; } #sidemenu ul li ul li ul li { margin:2px 0px; padding:0; border:0; font-size:2px; line-height:2px; } /* font-size und line-height nur für IE 6) */ #sidemenu ul li ul li ul li p, #sidemenu ul li ul li ul li a { margin:0; padding:2px 2px 2px 14px; text-indent:-12px; border:0; text-align:left; font:normal 12px/15px Helvetica,Arial,sans-serif; display:block; text-decoration:none; color:black; } /* Bild auf Home */ #sidemenu img { margin:6px 0px 0px 0px; padding:0; border:0; width:134px; height:536px; } /* Impressum */ #sidemenu div { position:absolute; top:588px; left:10px; padding:0; border:0; text-align:left; font:normal 12px Helvetica,Arial,sans-serif; line-height:12px; } #sidemenu a { margin:0; padding:2px 2px; border:0; color:black; text-decoration:none; display:block;} #sidemenu div a:hover { background-color:#cc3333; } /* Farbe für Kontakt */ #sidemenu div a:focus { color:#a0a0a0; } /* Textfarbe für Auswahl über Tastatur */ /**********************************************************************/ /* Definition content 720xbeliebig (position und width * height siehe screenstyle.css) */ /**********************************************************************/ #content { position:absolute; top:144px; left:144px; width:710px; padding:10px 5px; border:none; overflow:hidden } /* Normale Seitenüberschrift */ #content h2 { font:bold 16px/21px Helvetica,Arial,sans-serif; text-align:center; margin:21px 0px 21px 0px; text-decoration:none; } /* Kleine Überschrift / Kapitelüberschrift */ #content h3 { font:italic 16px/21px Helvetica,Arial,sans-serif; text-align:left; margin:21px 0px 10px 0px; text-decoration:none; } /* fetter text (wie p mit fett) */ #content h4 { font:bold 14px/18px Helvetica,Arial,sans-serif; text-align:left; margin:0px 0px 18px 0px; text-decoration:none; } /* fetter text ohne margin (wie p.nomargin mit fett) wird für Gästebuch verwendet */ #content h5 { font:bold 14px/18px Helvetica,Arial,sans-serif; text-align:left; margin:0px 0px 0px 0px; text-decoration:none; } /* Copyright Zeile (immer am Ende eines contents) */ #content h6 { font:normal 11px/11px Helvetica,Arial,sans-serif; text-align:right; margin:18px 0px 10px 0px; text-decoration:none; } /* Normaler Text */ #content p, #content li, #content td, #content dt, #content dd { font:normal 14px/18px Helvetica,Arial,sans-serif; text-align:left; margin:0; text-decoration:none; } #content p { margin-bottom:18px; text-indent:14px; } #content p.nomargin { margin-bottom:0px !important; } #content p.noindent { text-indent:0px !important; } /* Aufzählungen */ #content ul { margin: 0px 0px 18px 14px; padding:0px; } #content ul.nomargin { margin-bottom:0px !important; } #content ul li { margin: 0px 0px 9px 14px; padding:0px; list-style:disc; } #content ul li.nomargin { margin-bottom:0px !important; } /* #content ul li.einrueck { margin:0em 0em 0.5em 5em; } falls benötig */ /* Hyperlinks */ #content a { text-decoration:underline; } #content a:link { color:blue; } #content a:visited { color:blue; } #content a:hover { color:black; } #content a:active { color:blue; } /* Bilder */ #content img { margin:0; padding:0; border:none; } /* horizontaler Strich */ #content hr { height:4px; margin:0px 0px 18px 0px; border:0; } #content td hr { margin:0px 0px 0px 0px; } /* Tabellen */ #content table { table-layout:fixed; border-collapse:collapse; border-spacing:0; border:none; } #content tr { margin:0; padding:0; border:none; } #content td { margin:0; border:none; vertical-align:top; } /* Formulare */ #content form { margin:0 0 9px 0; padding:0; } #content fieldset { margin:0 0 9px 0; padding:0; border:0; font:normal 14px/18px Helvetica,Arial,sans-serif; } #content form.fldst_brdr fieldset { padding:5px; border:2px solid #a0a0a0; } #inhalt legend { margin:0 0 0 10px; padding:0px 2px; font:bold 14px/18px Helvetica,Arial,sans-serif; text-align:left; color:black; } #content label, #content input, #content textarea, #content select { display:block; float:left; margin:0 0 4px 0; } #content fieldset span.pflichtfeld { margin-left:2px; font:bold 11px/22px Verdana,Arial,sans-serif; color:#b84747; } #content fieldset.error, #content textarea.error, #content input.error { border:solid 2px red !important; } #content label { font:normal 14px/18px Helvetica,Arial,sans-serif; width:80px; text-align: right; padding-right:10px; } #content input.submit { width:auto; position:relative; left:90px; margin:0 5px 0 0; } /*#inhalt input.submit { margin-left:95px; margin-bottom:10px; width:auto; display:inline; } */ #content form p.error, #content form li.error { margin-top:0px; margin-bottom:3px; font:normal 12px/14px Helvetica,Arial,sans-serif; color:red; } #content fieldset ul, /* U.a. für Liste der User Infos bei Fehleingaben */ #content fieldset p { margin:0 0 10px 95px; } #content fieldset div.radio_checkbox { margin-left:95px; } #content fieldset div.radio_checkbox input { float:left; margin-bottom:0px; margin-right:5px; display:inline; } #content fieldset div.radio_checkbox label { float:left; text-align:left; margin-left:0px; margin-bottom:10px; padding-right:0px; width:433px; } /* #inhalt fieldset.radio input { margin-left:95px; margin-bottom:0px; margin-right:5px; display:inline; } #inhalt fieldset.radio label { text-align:left; margin-bottom:10px; padding-right:0px; width:auto; } */ /* #content form p, #content form li { font-weight:bold; color:red; } */ #content form p { margin:0 0 0 90px; text-indent:0px; } #content form ul { margin:0 0 0 104px; } #content form li { margin:0 0 0 0px; } #content form br { clear:left; } /* für Anmeldung */ #content label.disabled { font-style:italic; color:#a0a0a0; } #content label.disabled em { color:#a0a0a0; } /* Flash Player für O-Ton */ #mediaplayer { width:400px; height:383px; margin-left:auto; margin-right:auto; } /* Autorin - Lebenslauf */ #content div.lebenslauf { padding:40px 10px 10px 20px; } #content div.lebenslauf h2 { margin-left:150px; margin-bottom:0px; margin-top:0px; padding:14px 0 5px 5px; text-align:left; font-size:28px; } #content div.lebenslauf h3 { margin-left:150px; margin-bottom:0px; margin-top:0px; padding:14px 0 5px 5px; font-size:21px; font-style:normal; font-weight:bold; } #content div.lebenslauf h4 { float:left; width:145px; margin-bottom:0px; text-align:right; } #content div.lebenslauf p { margin-left:150px; margin-bottom:0px; padding:0 0 10px 5px; text-indent:0px; border-left:2px solid black; } /* Texte - Der Selbstläufer */ #content div.selbstlaeufer { float:left; background-color:white; margin:0px 0px 18px 140px; padding:0; border:1px solid black; border-bottom:4px solid black; border-right:4px solid black;} #content p.selbstlaeufer { font-style:italic; text-align:center; margin:108px 2px; padding:0; } #content span.selbstlaeufer { font-size:11px; line-height:14px; } /* Texte - Kolumne - 2009 - Kunst der Krisen */ #content p.krisen { margin-left:56px; margin-right:56px; text-indent:0px; font-style:italic; } #content dl.krisen { margin:0 0 18px 14px; } #content dl.krisen dt { float:left; padding-left:14px; width:130px; background:url(/icons/tick.gif) no-repeat left center; } #content dl.krisen dd { margin-left:158px; margin-bottom:9px; } /* Texte - Kolumne - Sendling berührt - Logo */ #content div.sendling { margin:0 0 18px 0; padding:0; } #content div.sendling hr { margin:0; padding:0; } #content div.sendling img { float:right; margin:9px 0; padding:0; width:100px; height:150px; } #content div.sendling h1 { margin:40px 0 0 0; padding:0; text-align:center; font:normal 60px/60px 'Times New Roman',Times,serif; color:#808080 !important; } #content div.sendling h2 { margin:-30px 0 0 0; padding:0; text-align:center; font:normal 50px/50px 'Times New Roman',Times,serif; color:#000000; } #content div.sendling br { clear:right; } /* Lesungen Vorschau + Rückschau Liste */ #content dl.lesungen { margin:0; } #content dl.lesungen dt { float:left; width:80px; margin:0 0 18px 0; text-align:right; } #content dl.lesungen dd { margin:0 0 18px 90px; } #content dl.lesungen dd hr { clear:left; } /* Referenzen - Veröffentlichungen */ #content div.buch { margin:0 0 0 50px; padding:0; } #content div.buch div { float:left; margin:0; } /* Textname(n) */ #content div.buch ul { margin:18px 0 27px 0; } #content div.buch ul li { list-style:none; margin:0 0 9px 0; } /* Platz für Bild */ #content div.buch-bild { float:left; width:150px; text-align:left; } /* Buch Titel */ #content div.buch h1 { font:bold 16px/19px Verdana,Arial,sans-serif; text-align:left; margin:0 0 5px 0; text-decoration:none; } /* Buch Untertitel */ #content div.buch h2 { font:bold 14px/17px Verdana,Arial,sans-serif; text-align:left; margin:0 0 14px 0; text-decoration:none; } /* Buch ISBN */ #content div.buch h3 { font:normal 13px/13px "Courier New",Courier,monospace; text-align:left; margin:0 0 14px 0; text-decoration:none; } /* Buch Infotext */ #content div.buch h4 { font:normal 13px/13px Verdana,Arial,sans-serif; text-align:left; margin:0 0 3px 0; text-decoration:none; } /* Buch Preis */ #content div.buch h5 { font:bold 13px/13px Verdana,Arial,sans-serif; text-align:left; margin:0 0 3px 0; text-decoration:none; } /* Buch Liefebarkeit */ #content div.buch h6 { font:normal 13px/13px Verdana,Arial,sans-serif; text-align:left; margin:13px 0 18px 0; text-decoration:none; } #content div.buch a { text-decoration:underline; } /* Ende des Eintrags */ #content div.buch br { clear:left; } /* Gästebuch */ #content div.gaestebuch { margin:0 0 12px 0; } #content div.gaestebuch h5 { float:left; margin:0 0 6px 0; } #content div.gaestebuch p { margin:0 0 6px 60px; text-indent:0px; } /* Kontakt */ #content div.kontakt { margin-left:95px; } #content div.kontakt dt { float:left; margin:0 0 18px 0; font-weight:bold; } #content div.kontakt dd { margin:0 0 18px 95px; } /* Links */ #content dl.links dt { margin:0 0 0 0; } #content dl.links dt a { font-weight:bold; } #content dl.links dd { margin-left:50px; margin-bottom:18px; } /**********************************************************************/ /* Definition skyscraper 140x620 = (10+120+10) * (10+600+10) bei x=864, y=144 */ /**********************************************************************/ #skyscraper { position:absolute; top:144px; left:864px; width:120px; height:600px; border:none; padding:10px; } #skyscraper img { margin:0; padding:0; border:none; height:600px; width:120px; } #skyscrap_r { position:absolute; top:144px; left:864px; width:120px; height:600px; border:none; padding:10px; } #skyscrap_r img { margin:0; padding:0; border:none; height:600px; width:120px; } /**********************************************************************/ /* Definition der Farben siehe "color_ordner.css" */ /**********************************************************************/ /* Dort gibt es folgende class-Definitionen: */ /* .bg_color_normal = Hintergrundfarbe im vollen Farbton (für Links, hr, etc.) */ /* .color_normal = Textfarbe im vollen Farbton (für Überschrift, hr, etc.) */ /* .bg_color_medium = Hintergrundfarbe mit 60% (für Flächen) */ /* .bg_color_light = Hintergrundfarbe mit 80% (für Flächen) */ /**********************************************************************/