/* */ /* allg. Body Element einstellen */ /* */ body { /*background-color:silver*/ background-image:url("/grafik/hintergrund2.gif"); background-repeat:repeat-y; margin:0px; padding:0px; font-size:100.01% } /* */ /* Schriftformatierungen */ /* */ h1 {font-family:arial, helvetica, verdana, sans-serif; font-size:1.2em; font-weight:normal} h2 {font-family:arial, helvetica, verdana, sans-serif; font-size:1em; font-weight:bold} p, a, th, td {font-family:arial, helvetica, verdana, sans-serif; font-size:1em} .miniText {font-family:arial, helvetica, verdana, sans-serif; font-size:0.8em} /* */ /* ul und li müssen in dieser Reihenfolge definiert werden, ansonsten */ /* wird der Text bei den Listenelementen bei Netscape nicht richtig */ /* formatiert (Info kann auch veraltet sein) */ /* */ ul, ol {font-family:arial, helvetica, verdana, sans-serif; font-size:1em} li {font-family:arial, helvetica, verdana, sans-serif; font-size:1em} /* */ /* Hover Links einstellen */ /* */ /* Das dient hier für den Farbwechsel beim Überfahren der Links mit der Maus */ /* Früher war das nur mit JavaScript möglich. Es sind noch deutlich interessantere und */ /* abgefahrenere Techniken damit möglich. Das ist die einfachste Sparversion. */ a:link {text-decoration:none; color:blue} a:visited {text-decoration:none; color:blue} a:hover {text-decoration:none; color:maroon} a:active {text-decoration:none; color:black} #linklisteNavigation a:link {text-decoration:none; color:silver} #linklisteNavigation a:visited {text-decoration:none; color:silver} #linklisteNavigation a:hover {text-decoration:underline; color:silver} #linklisteNavigation a:active {text-decoration:none; color:red} /* Bilder, die als Verweis dienen, sollen keinen Rahmen bekommen. */ /* "a img" legt die Verschachtelung von Elementen fest. */ /* Hier also etwas in der Art: ... */ a img {border:0} /* */ /* Titelleiste */ /* */ /* Die Titelleiste ist der oberste 'Rahmen'. Darunter befindet sich dann der Container der */ /* seinerseits zwei 'Rahmen' enthält, nämlich die Navigation auf der linken Seite und den */ /* Textbereich auf der rechten Seite. */ /* mit 'logo' ist das kleine Bild auf der linken Seite gemeint und wird hier absolut */ /* positioniert. mit 'ueberschrift' ist die jeweilige Überschrift über der Seite in der */ /* Titelleiste gemeint. Ich habe sie so formatiert, dass sie auf der selben Höhe wie der */ /* Text beginnt (vom linken Rand aus gesehen) */ #titelleiste {position:relative; top:0px; height:100px; background-color:#781e1e /*background-image:url("/grafik/maroon.gif")*/} #logo {position:absolute; top:0px; left:10px; border-style:none} #ueberschrift {padding-left:205px; padding-top:20px; color:silver} /* */ /* Container für linke Navigation und rechten Textbereich */ /* */ .container {position:relative; /*top:10px;*/ height:0px} #navigation {position:absolute; width:168px; padding-left:10px; padding-top:15px} #textbereich {position:absolute; left:205px; padding-right:10px; padding-top:15px} /* */ /* Definition der linken Navigationslinks im Container als Liste */ /* */ #linklisteNavigation {list-style:none; margin:0px; padding:0px} #linklisteNavigation li {padding-bottom:10px} #linklisteNavigation .ebene2 {list-style-type:disc; margin-top:-12px; margin-left:25px} #abgesetztNavi {padding-top:50px} /*****************************************************************/ /* [für den Admin Bereich] */ /*****************************************************************/ /* */ /* Definition der linken Navigationslinks im Container als Liste */ /* */ #linklisteAdmin {list-style:none; margin:0px; padding:0px} #linklisteAdmin li {padding-bottom:25px} #linklisteAdmin .ebene2 {list-style-type:disc; margin-top:-12px; margin-left:25px} #linklisteAdmin a:link {text-decoration:none; color:silver} #linklisteAdmin a:visited {text-decoration:none; color:silver} #linklisteAdmin a:hover {text-decoration:underline; color:silver} #linklisteAdmin a:active {text-decoration:none; color:red} /*****************************************************************/ /* */ .bild {float:left; margin-right:0.35cm; margin-bottom:0.35cm} .bild_rechts {float:right; margin-left:0.35cm; margin-bottom:0.35cm} /* */ /* Einzeln definierte Elemente */ /* */ /* Zum Erzwingen eines Blocklevel Elementes als Inline Element */ /* Wird benötigt um unterschiedliches Verhalten bei Netscape und IE anzugleichen */ .inlineElement {display:inline} /* Text wird rot dargestellt */ .rot {color:red} /* Markierung einer Box für abgehobene Informationen z.B. auf der Homepage */ .infobox {vertical-align:top; border-width:1px; border-style:solid; border-color:black; background-color:#9d9d9d; padding:5px 5px} /* Der ausgezeichnete Text wird horizontal zentriert dargestellt */ .zentrierterText {text-align:center} /* Text wird unterstrichen dargestellt */ .unterstrichen {text-decoration:underline} /* Text wird oben ausgerichtet */ .ausrichtungOben {vertical-align:top} /* Abstände nach rechts */ .paddingRight2cm {padding-right:2cm} .paddingRight1cm {padding-right:1cm} /* Abstände nach links */ .paddingLeft2cm {padding-left:2cm} .paddingLeft1cm {padding-left:1cm} /* Abstände nach unten */ .marginBottom2cm {margin-bottom:2cm} .marginBottom1cm {margin-bottom:1cm} /* Tabelle Anmeldung-Kontoverbindung-Zu_den_Flyern formatieren */ .seminarTabellen td {padding-right:1.5cm; padding-bottom:0.5cm ; vertical-align:top} /* Tabelle bei der Downloadseite der Flyer */ #downloadFlyer td {padding-right:2cm; vertical-align:top} #downloadFlyer th {border-bottom:solid black 1px; text-align:left} /* Aktuelle Position im linken Navigationsmenü markieren */ .aktuellePosition {text-decoration:underline; color:silver; font-weight:bold} .aktuellerOberpunkt {text-decoration:none; color:silver; font-weight:bold} /* Formatierung der Adressenliste (Tabelle) */ #adressenliste {border:solid black 1px; border-collapse:collapse;} #adressenliste th {border-bottom:solid black 1px; padding:5px 10px 5px 5px; text-align:left; font-size:0.85em; background-color:#cbcbcb} #adressenliste td {border-bottom:solid black 1px; padding-left:5px; padding-right:10px; text-align:left; font-size:0.85em; background-color:#d8d8d8} /* Markieren der Eingabefelder in Formularen beim Anklicken (fokussieren). */ /* Dadurch erhält man ein direktes Feedback das man Daten ins Feld eingeben kann. */ textarea:focus, input[type="text"]:focus {background-color: #ff9292}