/* */
/* screen=Bildschirm und - projection - für ältere Browser z.B. NN4 damit die Inhalte strukturiert und nicht interpretiert werden. */
* { /* alle Elemente werden auf 0 gesetzt */
margin: 0; /* alle Elemente werden auf 0 gesetzt */
padding: 0; /* alle Elemente werden auf 0 gesetzt */
}
body {
font: 80% Verdana, Arial, Helvetica, sans-serif; /* Schrifttyp und Größe */
color: #000; /* Schriftfarbe */
background: #fff; /* Hintergrundfarbe */
/* wenn der Bereich zentriert werden soll dann
text-align: center;
*/
}
a { /* alle Link`s */
color: #0000FF; /* Farbe des Textes (dunkelblau) */
text-decoration: none; /* Aussehen des Textes wird auf 0 gesetzt */
}
a:hover { /* alle Link`s beim drüber fahren der Maus */
text-decoration: underline; /* Text wird unterstrichen */
}
a img { /* verlinkte Bilder */
border: 0 none; /* keine Umradung z.B. bei einem Bild */
}
h1, h2, h3 { /* Überschriften */
font-family: Arial, Geneva, sans-serif; /* Schrifttyp und Größe */
color: #0000FF; /* Farbe des Textes */
background: transparent; /* transparenter Hintergrund */
}
h1 { /* Überschriften erster Ordnung */
font-size: 1.6em; /* Schriftgröße */
}
h2 { /* Überschriften zweiter Ordnung */
font-size: 1.4em; /* Schriftgröße */
}
h3 { /* Überschriften dritter Ordnung */
font-size: 1.2em; /* Schriftgröße */
}
p, li { /* p ist ein Abschnitt bzw. Absatz - li sind Listenelemente */
font-size: 0.80em; /* Schriftgröße */
}
p { /* ist ein Abschnitt bzw. Absatz */
line-height: 140%; /* Abstand zwischen den Zeilen */
}
ul {/* ungeordnete Liste */
list-style-type: square; /* Rechtecke */
}
#wrapper { /* oder auch container genannt ist das erste DIV Element */
color: #000; /* Farbe des Textes */
background: transparent; /* Hintergrund transparent */
border-top: 3px solid #ffff; /* oberer Abstand Rahmenlinie */
text-align: left;
width: 900px;
margin: 0 auto;
position: relative;
border-left: 1px solid #333;
border-right: 1px solid #333;
}
#header {
/* background: #f5f5f5 Hintergrund ist transparent - mit einem Hintergrundbild - oben rechts - nicht wiederholend */
border-bottom: 1px solid #333333; /* untere Rahmenlinie - 1px - durchgehend - Farbe:pink */
background: transparent url(/images/back1-3.jpg) no-repeat;
}
#logo { /* z.B. ein Bild */
/*background: transparent url(../images/logo.png) 0 0.2em left no-repeat;*/
padding: 25px 3px; /* Abstand oben rechts unten links */
height: 200px;
}
address { /* Adresse */
padding: 0 50px 20px 75px; /* Abstand oben rechts unten links */
font-style: normal; /* z.B. kann somit eine kursiv Schrift zurück gesetzt werden */
font-weight: bold; /* Fett schrift */
}
#main { /* MAIN - Bereich */
margin-top: 25px;
}
#content address {/* Adresse im Content-Bereich */
padding-left: 0; /* Abstand links - es wird somit der obere Bereich "address" überschrieben */
}
#column { /* somit kann ein Element aus dem normalen Textfluss heraus gelöst werden und nach rechts sich verschieben */
float: right; /* nach rechts - die anderen Elements schliessen sich links an */
width: 416px; /* Breite des Elements - sollte gemacht werden */
padding: 0 20px 0 0; /* Abstand des Elements */
}
#column img { /* alle Bilder im Elemente column sollen ... */
/* border: 8px solid #cc0066; /* einen Rahmen mit 8px in Farbe ... bekommen */
border: 1px solid #00; /* einen Rahmen mit 8px in Farbe ... bekommen */
margin: 20px 0; /* Freiraum nach oben und unten */
}
#column h2 { /* h2 Überschriften im Elemente column sollen ... */
margin: 0 0 10px 0; /* Freiraum nach rechts */
color: #000; /* Farbe des Textes */
background: transparent; /* Hintergrund transparent */
}
blockquote { /* Zitat */
color:#cc0066; /* Farbe des Textes */
font: bold 1.4em Arial, Helvetica, sans-serif; /* Fettschrift - Größe - Schrifttyp */
}
cite { /* Zitat-Quelle */
display: block; /* soll in einer eigenen Zeile stehen */
color: #000; /* Farbe des Textes */
font-size: 70%; /* Größe des Textes */
font-style: normal; /* z.B. kann somit eine kursiv Schrift zurück gesetzt werden */
font-weight: normal; /* z.B. kann somit eine Fettschrift zurück gesetzt werden */
}
#content { /* Element Content */
margin: 0 460px 0 20px; /* Freiraum nach rechts und links */
}
#content h2, #content h3 {/* Überschriften im Content Bereich */
margin: 15px 0; /* Freiraum oben rechts unten links */
}
#content p { /* Absatz im Content */
margin: 10px 0; /* Freiraum oben rechts unten links */
}
#content ul { /* ungeordnete Liste im Content */
margin: 10px 25px; /* Freiraum oben rechts unten links */
}
#content li { /* Liste im Content */
padding: 3px 0; /* Abstand oben rechts */
}
#nav { /* Navigation */
position: absolute; /* wird komplett aus dem Textfluss gelöst */
top: 0; /* ausrichten oben */
links: 0; /* ausrichten links */
width: 100%; /* ist nur für den Opera wichtig */
background: transparent url(../images/fvlh1.gif); /* Hintergrund */
border-bottom: 1px solid #717171; /* untere Rahmenlinie dunkelgrau */
}
#nav li { /* Listen im Navigationsbereich */
display: inline; /* werden nebeneinander und nicht untereinander gesetzt */
}
#nav a { /* Links im Navigationsbereich */
text-decoration: none; /* keine Textauszeichnung */
display: block; /* damit werden die z.B. die Listen-Elements wieder untereinander geschrieben */
float: right; /* werden nach rechts gefloatet */
padding: 3px 20px; /* Abstände oben rechts unten links */
font-weight: bold; /* Fettschrift */
line-height: 1.5em; /* Zeilenhöhe */
color: #666666; /* Schriftfarbe */
background: transparent; /* transparenter Hintergrund */
}
#nav a:hover { /* Links im Navigationsbereich */
color: #000; /* Farbe */
/* background: transparent; Hintergrund */
text-decoration: underline;
}
#home {
color: #00FF00;
}
#home li { /* Listen im Navigationsbereich */
display: inline; /* werden nebeneinander und nicht untereinander gesetzt */
}
#home a { /* Links im Navigationsbereich */
text-decoration: none; /* keine Textauszeichnung */
display: block; /* damit werden die z.B. die Listen-Elements wieder untereinander geschrieben */
float: left; /* werden nach rechts gefloatet */
padding: 3px 20px; /* Abstände oben rechts unten links */
font-weight: bold; /* Fettschrift */
line-height: 1.5em; /* Zeilenhöhe */
color: #666666; /* Schriftfarbe */
background: transparent; /* transparenter Hintergrund */
}
#home a:hover { /* Links im Navigationsbereich */
color: #000; /* Farbe */
/* background: transparent; Hintergrund */
text-decoration: underline;
}
p.footer { /* Absatz im Bereich Footer */
border-top: 1px solid #333; /* Schriftgröße */
color: #333333; /* Schriftfarbe */
background: transparent url(../images/fvlh1.gif);
padding: 10px; /* innen Abstand */
margin-top: 20px; /* Abstand oben */
}
p.footer a { /* Links im Navigationsbereich */
text-decoration: none; /* werden nach rechts gefloatet */
padding: 3px 20px; /* Abstände oben rechts unten links */
font-weight: bold; /* Fettschrift */
line-height: 1.5em; /* Zeilenhöhe */
color: #666666; /* Schriftfarbe */
background: transparent; /* transparenter Hintergrund */
}
p.footer a:hover { /* Links im Navigationsbereich */
color: #000; /* Farbe */
/* background: transparent; Hintergrund */
text-decoration: underline;
}
p.footer img { /* Bilder im Bereich Footer */
padding: 4px 20px 4px 10px; /* innen Abstände */
vertical-align: middle;
}
/* Klassen */
.teaser { /* . ist eine Klasse z.B. .teaser ist die Klasse Teaser */
font-weight: bold; /* Fett-Schrift */
}
.nowrap { /* span Bereich um einen Zeilenumbruch zu vermeiden */
/* lustiger Text der nicht umgebrochen werden soll */
white-space: nowrap; /* Zeilenumbruch vermeiden */
}
a.pfeil {
display: block; /* wichtig für Internet-Explorer 5 */
color: #cc0066; /* Schriftfarbe */
background: transparent url(../img/pfeil.gif) 0 0.2em no-repeat; /* Hintergrund - transparent - Link Grafik - Abstand - nicht wiederholend */
padding-left: 30px; /* Abstand links */
font-size: 125%; /* Schriftgröße */
font-weight: bold; /* Fettschrift */
}