Webseitenbau
Home
Site/Index
 
Web Webseitenbau
Google English français  
⬆3. 6. 1 Das Stylesheet dieser Website

3.6.1 Stylesheet dieser Website

-

1 Allgemein

Allgemeine Bemerkungen

Arten der Einbindung von Stylesheets

Pfeil nach rechts (Icon)
      120 x 120 Pixel CSS: External Stylesheet

Pfeil nach rechts (Icon)
      120 x 120 Pixel CSS: Internal Stylesheet

Pfeil nach rechts (Icon)
      120 x 120 Pixel CSS: Inline Stylesheet

Separate Stylesheets

Formular-Stylesheet

Pfeil nach rechts (Icon)
      120 x 120 Pixel Formulare: Stylesheet

Definitionen der Farben

Datei-Endungen

Verwendung des vorliegenden Stylesheets

Pfeil nach rechts (Icon)
      120 x 120 Pixel Webseitenbau

Pfeil nach rechts (Icon)
      120 x 120 Pixel Internet-Vademecum

-

2 Ablageort des Stylesheets herausfinden

Wo ist das Stylesheet gespeichert?

  1. Im Kopfbereich jedes HTML-Dokumentes ist angegeben wo sich das Stylesheet befindet.

    <link rel='stylesheet' type='text/css' href='../../styles/allgemein.css.php'>

  2. Der Name und Ablageort des Stylesheet der Website ist demnach wie folgt:

    '../../styles/allgemein.css.php'

  3. Der URL des Stylesheets lautet daher

    http://webbau.brandenberger.eu/styles/allgemein.css.php

-

3 Aufrufen des Stylesheets durch den Anwender

Vorgehen

  1. Mit der rechten Maustaste auf die Website klicken und den Quelltext öffnen.
  2. Name und Ablageort des Stylesheets notieren.
  3. Ganzen Pfad im Browser eingeben.

Das Stylesheet kann durch jeden Anwender eingesehen werden

-

5 Anzeige des allgemeinen Stylesheets dieser Website

Pfad: http://webbau.brandenberger.eu/styles/allgemein.css.php





/***********************************************************/
/* http://webbau.brandenberger.eu/styles/allgemein.css.php */
/* CSS-Definitionen für Vademecum und Webbau               */
/* Normalausgabe für Opera, IE und Firefox                 */
/* von Alfred Brandenberger - alfred@brandenberger.eu      */
/***********************************************************/

/* Die folgende Include-Datei liest die Farben ein.
Achtung: Die Farben müssen zum Teil im Kopf 
und in anderen Dateien von Hand geändert werden.
In der Datei  /webbau/styles/farbe-louis.php
ist angegeben, wo die Farben sonst noch von Hand
eingegeben werden müssen.
*/


/* Menuübreite: 14.7em */

/***********************************************************/
/* Kopfbereich                                             */
/***********************************************************/

#kopfbehaelter {
position:fixed; top:0; left:0; right:0;
z-index:0;
margin:0;
padding:0; 
background: #283A4B;
color:#D7E1EA;
}

#kopf {
position:fixed; top:0; left:0; right:0;
border:none;
padding-top:0.5em;
z-index:0;                          /* Louis geändert am 27.10.2013, vorher 3 */
background:#283A4B;
color:#D7E1EA;
text-align:center;
font-size:1.38em; 
font-weight:bold; 
letter-spacing:1px;
height:2.7em;                           /* Louis hinzugefügt am 27.10.2013 */
}

/* Dies wird vom IE6 nicht verstanden */
/* Darum kann kein h1 verwendet werden*/
#kopf h1 {
position:fixed; top:0; left:0; right:16px;
height:100%;
border:none;
margin-top:0;
padding-top:0;
z-index:3;
text-align:center;
font-size:1.38em;
font-weight:bold;
letter-spacing:0.1em;
}

#suchen-website {
position:fixed; top:0; right:0;
padding:2px 0 0 0;
z-index:4;
font-size:0.88em;
font-weight:bold;
}

#sprache {
position:fixed; top:56px; right:2.4em;
z-index:4;
font-size:0.75em;
font-weight:bold;
}

#home, #site, #home_aktiv, #site_aktiv, #aktuelles_kap {
position:fixed; left:14.2em;
z-index:3;
background:#283A4B;
color:#D7E1EA;
font-size:0.88em;
font-weight:normal;
padding:2px 2px 0 2px;
line-height:1.3em;
}

#home, #home_aktiv {
top:2px; 
}

#home_aktiv {
background:#D7E1EA;
color:#283A4B;
font-weight:bold;
}

#site, #site_aktiv{
top:1.6em;
}

#site_aktiv {
background:#D7E1EA;
color:#283A4B;
font-weight:bold;
}

/* Aktuelles Kapitel ist die Anzeige unterhalb der Site*/
#aktuelles_kap {
top:2.8em;
width:50em;
margin-left:-1.35em;
padding-left:0;
z-index:2; 
text-align:left;
font-size:0.96em; 
font-weight:normal;
}

/***********************************************************/
/* Inhalt-Bereich                                          */
/***********************************************************/

#inhalt {
margin-top:-3.2em; /* Damit der Abstand oben im IE und Opera gleich gross aussehen */
padding:4.5em 2px 25em 12.42em; /* padding top für Ausgleich im IE und Opera */
z-index:2;
}

/***********************************************************/
/* Menübereich                                             */
/***********************************************************/

#menue li {                                                 /* Rand im Menü */
margin: 0;
padding-left:2px;
}

#menue {
position:fixed;
top:0.2em;
left:0;
width:14.7em;
margin:0;
padding-left:0;                                     /*Wegen Opera notwendig */
padding-bottom:46em;           /* Dies verlängert den Hintergrund nach unten */
z-index:5;
background:#283A4B;
color:#D7E1EA;
line-height:1.2em;                      /* Zeilenabstand der Kapitel im Menü */
list-style: none;
font-size:0.82em;                                             
font-weight:normal;
}

#menue_aktiv {
background:#283A4B;
color:#D7E1EA;
font-weight:bold;
}

.menue_uk1 {
padding-top:0px;
padding-bottom:0px;
line-height:1.1em;                               
background:#44627E;
color:#D7E1EA;
}

#menue_uk1_aktiv {
background:#44627E;
color:#D7E1EA;
font-weight:bold;
}

.menue_uk2 {
line-height:1.1em;              
list-style: none;
background:#A5BCCF;
color:#0E141B;
font-size:0.96em;
font-weight:normal;
}
 
#menue_uk2_aktiv { 
line-height:1.1em;              
list-style: none;
background:#D7E1EA;
color:#0E141B;
font-size:0.96em;
font-weight:bold;
}
#menue_uk2_aktiv a {
color:#000;
}

#menue hr {
background:#A5BCCF;	/* setzt die Farbe der Trennlinie im Menü*/
height:1px;	                       	/* ersetzt size=1  */
border:none;                    		/* ersetzt noshade */
}

.menue_versteckt {
display:none;
}

/***********************************************************/
/* Fussbehälter                                            */
/***********************************************************/

#fussbehaelter {
position:fixed; bottom:-1px; left:0; right:0;
z-index:6;
height:18px;
background:#283A4B;
color:#D7E1EA;
}

#fuss1 {
position:fixed; 
left:0; bottom:0;
display:inline;
padding:2px 0 2px 0.2em;
z-index:6;
font-size:0.75em;
font-weight:normal;
}

#fuss2 {
position:fixed; right:0; bottom:0;
display:inline;
margin-left:20em;
padding:1px 0.5em 1px 0;
text-align:right;
font-size:0.75em;
font-weight:normal;
}

/***********************************************************/
/* Diverses für alle Bereiche                              */
/***********************************************************/

/* Nur für den MSIE */
* html, * html body {
overflow:hidden;
bottom:0;
height:100%;
}

* html #kopfbehaelter, * html #fussbehaelter {
position:absolute;
width:100%;
padding-right:16px;
}

* html #menue {
position:absolute;
}

* html #kopf, * html #fuss1, * html #fuss2 {
height:100%;
position:static;
}

* html #inhalt {
position:absolute;
top:0; bottom:0; left:0; right:0;
height:100%;
width:100%;
overflow:auto;
margin:0;
}

/* Fügt ein Zeichen vor externe Links ein */ 
a[href^="http://"]:before { 
content: "\2197\a0" 
}

/* von Louis für interne Submenüs: Einzug für Unteruntermenüs */
li.einzug {
margin-left:2.5em ! important;
}
li.einzug2 {
margin-left:5em ! important;
}

/***********************************************************/
/* Links                                                   */
/* Die Links müssen in folgender Reihenfolge sein          */
/***********************************************************/
/* 1) a:link (noch nicht besuchter Link*/

a:link   {
color:#283A4B;            /* Für Farben Louis */
} 

#kopfbehaelter a:link {
background:transparent;
color:#D7E1EA;
text-decoration:none;
margin:0;
padding:0em;
}

#aktuelles_kap a:link {
color:#D7E1EA;
}

#menue a:link {
background:transparent;
/*color:#D7E1EA;  Louis auskommentiert 12.01.2014 */
text-decoration:none;
margin:0;
padding:0;
}
#menue a:visited {          /* Louis 12.1.2014 : Chaos im Code erweitert
background:transparent;
/*color:#D7E1EA;  Louis auskommentiert 12.01.2014 */
text-decoration:none;
margin:0;
padding:0;
}

#menue_aktiv a:link {
background:#D7E1EA;
color:#283A4B;
text-decoration:none;
margin:0;
padding:0em;
}
 
#menue_uk2_aktiv a:link {
background:#D7E1EA;
color:#283A4B;
text-decoration:none;
margin:0;
padding:0em;
}

#fussbehaelter a:link {
background:transparent;
color:#D7E1EA;
text-decoration:none;
}

/***********************************************************/
/* 2) a:visited (schon besuchter Link*/

/* a:visited {
color:#283A4B;
}  */

#kopfbehaelter a:visited {
background:transparent;
color:#D7E1EA;
text-decoration:none;
margin:0;
padding:0em;
}

#home a:visited {
background:transparent;
color:#D7E1EA;
text-decoration:none;
margin:0;
padding:0em;
}

#site a:visited {
background:transparent;
color:#D7E1EA;
text-decoration:none;
margin:0;
padding:0em;
}

#aktuelles_kap a:visited {
background:#283A4B;
color:#D7E1EA;
text-decoration:none;
margin:0;
padding:0em;
}

#menue a:visited{
background:transparent;
/*color:#D7E1EA;   Nein-auskommeniert Louis 13.10.2013 */
text-decoration:none;
margin:0;
padding:0em;
}

#menue_aktiv a:visited {
background:#D7E1EA;
color:#283A4B;   /*Nein-auskommeniert Louis 13.10.2013 */
text-decoration:none;
margin:0;
padding:0em;
}

#menue_uk2_aktiv a:visited {
background:transparent;
color:#283A4B;       /*Nein-auskommeniert Louis 13.10.2013 */ 
text-decoration:none;
margin:0;
padding:0em;
}
#menue_uk1_aktiv a:visited {           /* Louis: Chaos im Code erweitert 14.1.2014 */
color:#D7E1EA;       
}
.menue_uk2 a:link {            /* Louis: Chaos im Code erweitert 14.1.2014 */
color:#283A4B;       
}
.menue_uk2 a:visited {            /* Louis: Chaos im Code erweitert 14.1.2014 */
color:#283A4B;       
}
.menue_uk0 a {            /* Louis: Chaos im Code erweitert 14.1.2014 */
color:#D7E1EA;       
}
.menue_uk0 a:link {            /* Louis: Chaos im Code erweitert 14.1.2014 */
color:#D7E1EA;       
}
.menue_uk0 a:visited {            /* Louis: Chaos im Code erweitert 14.1.2014 */
color:#D7E1EA;       
}
.menue_uk1 a {            /* Louis: Chaos im Code erweitert 14.1.2014 */
color:#D7E1EA;       
}
.menue_uk1 a:link {            /* Louis: Chaos im Code erweitert 14.1.2014 */
color:#D7E1EA;       
}
.menue_uk1 a:visited {            /* Louis: Chaos im Code erweitert 14.1.2014 */
color:#D7E1EA;       
}
/***********************************************************/
/* 3) a:hover (Benutzer hovert mit der Maus) */

a:hover {
color:;
} 

#kopf a:hover, #home a:hover, #site a:hover, #aktuelles_kap a:hover{
color:;
}

#menue a:hover {
color:;
}

#menue_uk2_aktiv a:hover {
background:transparent;
color:;                /* Schriftfarbe des aktiven uk2*/
text-decoration:none;
margin:0;
padding:0em;
}

#fussbehaelter a:hover {
color:;
text-decoration:none;
}

/***********************************************************/
/* 4) a:active 
(Anzeige, wenn man mit der linken Maustaste auf den Link drückt)*/

a:active {
color:#6D3758;
} 

#aktiv {
text-decoration:none;
} 

/***************************************************************/
/* Internet-Vademecum: Inhalt-Bereich                          */
/* Achtung: Wegen Anpassung des Menues an den IE6              */
/* sind viele Formatierungen evtl. nicht mehr W3C CSS Konform  */
/***************************************************************/

/*body früher: font-size:100.1%*/

body {
position:absolute;
background:#FFFFFF;
color:#000000;
font-family:Verdana,Helvetica,sans-serif;
font-size:103%;
}

html, body { 
top:0; left:0; right:0;
min-height:100%;
/* wegen dem IE notwendig*/
margin:0;
padding:0;
/* wegen dem IE notwendig*/
width:100%;
}

p {
margin:1em 0;
padding-left:5px;                  /*2016-02-19 damit links Abstand vom Rand*/
}

/* Normaler Abschnitt aber eingeschoben */
/* Angewendet in webbau.brandenberger.eu/html/dokument */
/* Angewendet in /themen/klima/kontroverse.php */
.e {
margin:1em 0 1em 1em;       /*2016-02-25 links Abstand vom Rand 1 anstatt 0.5em*/
padding:0;
}

/* Fett mit grösserem oberen Abstand für kleine Titel*/
/* Angewendet in Webbau /php/navigation/array.php*/
p.fetta {
margin-top:1.2em;
font-weight:bold;
}

/* Kleine Schrift z.B. Sprache bei Titeln (span class="klein")*/
/* Beispiel auch das 2 bei CO2 */
.klein {
font-size:0.82em;
letter-spacing:0;
font-weight:bold;
}

/* Halber Zeilenabstand oben */
.halb {
margin-top:-0.5em;
}

/* Halber Zeilenabstand oben und linker Abstand wie class="e" */
.he {
margin-top:-0.5em;
margin-left:0.5em;
}

/* Jahresangaben in Verzeichnissen Variante 1*/
/* Beispiel p class="jahr" (ohne b) bei nachfolgenden Überschriften */
.jahr {
margin-bottom:-72px;
font-weight:bold;
}

/* Jahresangaben in Verzeichnissen Variante 2 */
/* Beispiel li class="jahra" (mit a) im Verzeichnis */
.jahra {
margin-top:0.5em;
font-weight:bold;
}

/* Jahresangaben in Verzeichnissen Variante 2 */
/* Beispiel p class="jahrb" (mit b) bei nachfolgenden normalen Links (z.B. in Echo */
/* Das b erzeugt einen grösseren unteren Abstand (b=bottom) */
.jahrb {
margin-top:0.5em;      /* gleich wie jara ?????? */
font-weight:bold;
}

h1 {
margin-top:2.7em;
padding:10px 10px;
border-style:solid; border-width:0;
border-left-color:#283A4B;
border-top-color:#283A4B;
border-right-color: #283A4B;
border-bottom-color: #283A4B;
background: #283A4B ;
color: #D7E1EA;
font-size:1.25em; font-weight:bold; letter-spacing:0.02em;
}

/* Bei h2 wurde margin-top wegen Anklicken des Unterkapitels zugefuegt*/
h2 {
margin-top:2.7em;
padding:8px 10px;
border-style:solid; border-width:4px;
border-left-color:#A5BCCF;
border-top-color:#A5BCCF;
border-right-color:#283A4B;
border-bottom-color:#283A4B;
background:#44627E;
color:#D7E1EA;
font-size:1.32em; font-weight:bold; letter-spacing:0.02em;
}

h3 {
margin-top:1.5em;
padding:8px 5px;
border-style:solid; border-width:4px;
border-left-color:#D7E1EA;
border-top-color:#D7E1EA;
border-right-color:#44627E;
border-bottom-color:#44627E;
background:#A5BCCF;
color: #283A4B;
font-size:1.32em; font-weight:bold; letter-spacing:0.02em;
}

/* Schrift von h3 aber ohne box*/
.h3 {
margin-top:1.3em; /*nur wegen dem IE*/
padding:8px 5px;
background:transparent;
color: #283A4B ;
font-size:1.32em; 
font-weight:bold; 
letter-spacing:0.02em;
}

h4 {
padding:8px 5px;
border-style:solid; border-width:4px;
border-left-color:#D7E1EA;
border-top-color:#D7E1EA;
border-right-color:#A5BCCF;
border-bottom-color:#A5BCCF;
background:#D7E1EA;
color: #283A4B;
font-size:1.2em; 
font-weight:bold; 
letter-spacing:0.02em;
}

h5 {
margin:1em 0;
padding:2px;
border-style:solid; border-width:2px;
border-left-color:#D7E1EA;
border-top-color:#D7E1EA;
border-right-color:#A5BCCF;
border-bottom-color:#A5BCCF;
background: #E8EEF3 ;
color: #283A4B ;
font-size:1.12em; 
font-weight:bold; 
letter-spacing:0.01em;
}

.h5box {
margin:0;
padding:2px;
border-style:solid; border-width:1px;
border-left-color:#D7E1EA;
border-top-color:#D7E1EA;
border-right-color:#A5BCCF;
border-bottom-color:#A5BCCF;
background: #E8EEF3 ;
color: #283A4B ;
font-size:1.12em; 
font-weight:bold; 
letter-spacing:0.01em;
}

/* Schrift von h5 ohne box */
.h5 {
padding:2px 0 2px 2px;
margin:0;
background:transparent;
color: #283A4B ;
font-size:1.12em; 
font-weight:bold; 
letter-spacing:0.01em;
}


/* wird nicht mehr gebraucht*/
/* Titel von h5 aber ohne box*/
.h5titel {
padding:2px 0 0 2px;  
margin-top:1em;
margin-bottom:0.7em;  /* Kontrolle: Klimaverlauf/Geschichte */
                      /* am 2015-01-29 margin-bottom:... zugefügt damit */ 
                      /* der nächste Abschnitt mit class="halb" oder "gelb" */
background:transparent;
color: #283A4B ;
font-size:1.12em; 
font-weight:bold; 
letter-spacing:0.01em;
}

/* Ersatz a für h5titel (a = Abstand oben) */
/* Ähnlich wie h5titel aber mit kleinerem Abstand unten */
/* Versuchsweise angewendet in Webbau /php/navigation/array.php*/
.h5a {
margin-top:1em;
margin-bottom:-0.3em;  
background:transparent;
color: #283A4B ;
font-size:1.12em; 
font-weight:bold; 
letter-spacing:0.01em;
}

/* e = Einzug links und a = Abstand oben */
/* Versuchsweise angewendet in /themen/klima/kontroverse.php */
.h5ea {
margin-top:1em;
margin-left:0.5em;
margin-bottom:-0.3em;  
background:transparent;
color: #283A4B ;
font-size:1.12em; 
font-weight:bold; 
letter-spacing:0.01em;
}

/* Ersatz b für h5titel (b = Abstand bottom) */
/* Ähnlich wie h5titel auch mit grossem Abstand oben und unten für class halb */
/* Versuchsweise angewendet in webbau.brandenberger.eu/php/einleitung/bezeichnungen */
.h5b {
margin-top:1em;
margin-bottom:0.7em;  
background:transparent;
color: #283A4B ;
font-size:1.12em; 
font-weight:bold; 
letter-spacing:0.01em;
}

/* Schrift von h6 ist wegen Webbau so komisch */
/* Schrift von h6 verwendet in /css/erstellen/external.php */
/* /css/erstellen/internal.php und /css/spezifikation/prinzip.php */
h6 {
background:transparent;
color: fuchsia;
font-size:1em; 
font-weight:bold; 
letter-spacing:0.02em;
}

/***********************************************************/
/* Farbe: Grund  */
/***********************************************************/
/* Hintergrund wie Home*/
.home {
background:#283A4B;
color:#D7E1EA;
}

/***********************************************************/
/* Farbe: Schwarz                                          */
/* Alternative Angabe: "black"                             */
/*Im Stylesheet: $... = "#000000"; oder $... = "black";    */
/*Im HTML-Quelltext: color:"#000000" oder color:"black"    */
/***********************************************************/

/* Schwarzer Rahmen */
.box-schwarz {
border-style:solid; 
border-width:2px; 
margin:1em 0;
padding:0 1em;
border-color:#000000;
background:#FFFFFF;
color:#000000;
}

/* Schwarzer Rahmen mit innerem oberem grossen Abstand für Farben-Text */
.box-schwarzb {
border-style:solid; 
border-width:2px; 
margin:1em 0;
padding:1.4em 0.5em 0 0.5em;
border-color:#000000;
background:#FFFFFF;
color:#000000;
}


/***********************************************************/
/* Weiss                                                   */
/* Alternative Angabe: "white";                            */
/*Im Stylesheet: $... = "#FFFFFF"; oder $... = "white";    */
/*Im HTML-Quelltext: color:"#FFFFFF" oder color:"white"    */
/***********************************************************/

/* kein Style */

/***********************************************************/
/* Farbe: Blau-Grün                                        */
/* Für Blau-Grün werden die Grundfarbe von Louis verwendet */
/***********************************************************/

/* class="blau-gruen" Blau-Grüner Hintergrund zum Hervorheben von Text */
.blau-gruen {
padding:2px;
background:#D7E1EA;
color:#000000;
}

/* class="box-blau-gruen" Blau-gruene Box (Hintergrund mit Rahmen) */
.box-blau-gruen {
border-style:solid; 
border-width:3px;
background:#D7E1EA;
border-left-color: #E8EEF3 ;
border-top-color: #E8EEF3 ;
border-right-color: #A5BCCF ;
border-bottom-color:#A5BCCF;
color:#000000;
padding:0.5em;
}


/***********************************************************/
/* Farbe: Blau  */
/***********************************************************/

/* blaue Schrift: class="text-blau" */
.text-blau {                          /* Noch nicht definiert, noch nicht verwendet */     
color: #B3C5D6;
}

.titel-blau {
text-align:center;
color:#B3C5D6;
font-size:1.32em; 
font-weight: bold; 
}

.untertitel-blau {
text-align:center;
color:#B3C5D6;
font-size:0.93em; 
font-weight: bold; 
}

/* Blauer Hintergrund */
.blau {
padding:2px;
background:#B3C5D6;
color:#000000;
}

/* Blaue Box */
.box-blau {
display:block;
border-style:solid; 
border-width:3px;
padding:0.5em;
background:#B3C5D6;
border-left-color: #D4DFE8 ;
border-top-color: #D4DFE8 ;
border-right-color: #7092B2 ;
border-bottom-color:#7092B2;
color:#000000;
}

/***********************************************************/
/* Farbe: Blau für Sprachen  */

/* Kleiner blauer Hintergrund mit Spreizung des Textes der Sprache Französisch: class="fr" */
.fr {
background:#3F8DDA ;
color:white ;
padding:0;
font-size:15px;
font-weight:bold;
letter-spacing:3px;
}

/* Kleiner blauer Hintergrund ohne Spreizung des Textes */
.frn {
background:#3F8DDA ;
color:white ;
padding:0;
font-size:12px;         /* Bemerkung: Die Schrift ist etwas kleiner als mit Spreizung */
font-weight:bold;
letter-spacing:0;
}

/* Grosser blauer Hintergrund mit Spreizung des Textes der Sprache Französisch: class="frg" */
.frg {
background:#3F8DDA ;
color:white ;
padding:0;
font-size:0.88em;
font-weight:bold;
letter-spacing:3px;
padding:2px;
}

/* Grosser blauer Hintergrund ohne Spreizung des Textes der Sprache Französisch: class="frgn" */
.frgn {
background:#3F8DDA ;
color:white ;
padding:0;
font-size:0.88em;
font-weight:bold;
letter-spacing:0;
padding:2px;
}

/***********************************************************/
/* Farbe: Grau  */
/***********************************************************/

/* Graue Box display:block */ 
.box-grau {
display:block;
border-style:solid; 
border-width:3px;
padding:5px;
background:#F2F2F2;
border-left-color: #BFBFBF ;
border-top-color: #BFBFBF ;
border-right-color: #808080 ;
border-bottom-color:#808080;
color:#000000;
}

/* Graue Box display:inline */
/* ohne display:block Daher Rahmen nur um den Text */
.inlinebox-grau {
border-style:solid; 
border-width:3px;
padding:5px;
background:#F2F2F2;
border-left-color: #BFBFBF ;
border-top-color: #BFBFBF ;
border-right-color: #808080 ;
border-bottom-color:#808080;
color:#000000;
}

/* Tabelle mit Links "table-normal" mit normaler Schrift */
.table-normal {
background:#E8EEF3;
color:#808080;
}

/* Tabelle mit Links class="table-link" und kleiner Schrift*/
.table-link {
margin-top:0.5em;
background:#E8EEF3;
color:#808080;
font-size:85%;
border-color:#E8EEF3;
}

/* Tabelle 1 neue Farbe 1 und grösser in Webbau  mit Links "table-link1"
Ausgeschaltet, da ich nicht weiss wofür
.table-link1 {
background:;
color:#000000;
font-size:95%;
border:0;                   
}
*/

/* Tabelle oder Box für "Weiter" mit Links class="weiter" und kleiner Schrift*/
.weiter {
margin-bottom:1.5em;
padding:2px 5px; 
background:#E8EEF3;
color:#808080;
font-size:95%;
border-color:#E8EEF3;
}

/* Tabelle für "Welt" mit Links class="welt" und kleiner Schrift*/
.welt {
margin-top:1.5em;
margin-bottom:1.5em;
font-size:92%;
}

/***********************************************************/
/* Farbe: Rot  */
/***********************************************************/

/* Rote Schrift: class="text-rot" */
.text-rot {                               
color: #D42B34;
}

/* Titel mit class="titel_rot"> formatieren */
.titel-rot {
text-align:center;
font-size:1.2em; 
font-weight: bold; 
color: #D42B34;
}

/* Roter Hintergrund: classs="rot"  */
.rot {
padding:1px;
background:#D42B34;  /* noch nicht verwendet  */
color:#000000;
}

/* Roter Rahmen class="box-rot"  */
.box-rot {
border-style:solid;
border-width:5px; 
padding:0.5em;
border-color: #D42B34;
background:#FFFFFF;                  /* Hintergrund: Weiss */
color:#000000;                       /* Schrift: Schwarz */
text-align:center;                   /* Achtung: Zentriert */
}

/* Dünner roter Rahmen class="box-rotduenn" */
.box-rotduenn {
border-style:solid; 
border-width:2px; 
border-color: #D42B34;
color:#000000;                       /* Schrift: Schwarz */
text-align:left;
padding-left:1em;
}

/* Dünner roter Rahmen mit innerem oberem grossen Abstand für Farben-Text */
.box-rotduennb {
border-style:solid; 
border-width:2px; 
border-color: #D42B34;
color:#000000;                       /* Schrift: Schwarz */
text-align:left;
padding:1.4em 0.5em 0 0.5em;
}

/* Kleiner roter Hintergrund der Sprache Englisch: class="en" */
.en {
background:#D42B34 ;  
color:white;           
padding:0;
font-size:15px;
font-weight:bold;
}

/* Grosser roter Hintergrund der Sprache Englisch: class="eng" */
.eng {
background:#D42B34 ;
color:white ;
padding:0;
font-size:0.88em;
font-weight:bold;
padding:2px;
}

/***********************************************************/
/* Farbe: Gelb           */
/***********************************************************/

/* Gelber Hintergrund: class="gelb"  */
.gelb {
margin-top:-0.5em;
padding:1px;
background:#F5F08F;
color:#000000;
}

/* Gelber Hintergrund mit grossem oberen Abstand  */
.gelboben {
margin-top:0.5em;
padding:1px;
background:#F5F08F;
color:#000000;
}

/* Achtung: soll ersetzt werden !!!!!!  */
/* Gelber Hintergrund mit kleinem oberen Abstand  */
.halbgelb {
margin-top:-0.5em;
padding:1px;
line-height:120%;
background:#F5F08F;
color:#000000;
}

/* Mit class="gelbfett" für Text fett und Hintergrund gelb */
/* Abstand oben ist kleiner als ein Leerabstand */
.gelbfett {
margin-top:-0.5em;
padding:1px;
background:#F5F08F;
color:#000000;
font-weight:bold;
line-height:120%;
}

/* Gelber Hintergurund und roter Rahmen fuer Posteingang (vorne=outset)*/
.box-gelb {
width:70%;
display:block; 
border-style:outset; 
border-width:3px; 
padding:0.5em;
border-color:#D42B34;
background:#F5F08F; 
color:#000000;
}

/***********************************************************/
/* Farbe: Grün  */
/***********************************************************/

/* Grüne Schrift: class="text-gruen" */
.text-gruen {                               
color: ;    /* noch nicht definiert - noch nicht verwendet  */
}

/* Grüner Hintergrund: class="gruen" */
.gruen {
background:#D0E5CD;
color:#000000;
padding:1px;
}

/* Gruener Hintergurund mit Rahmen */
.box-gruen {
display:block; 
border-width:3px; 
padding:0.5em;
border-color:#99CC66; 
background:#D0E5CD; 
color:#000000;
}

/* Mit span class="gruenklein" kann Text klein und grünem Hintergrund hervorgehoben werden */
.gruenklein {
background:#D0E5CD;
color:#000000;
padding:1px;
font-size:0.75em;
font-weight:bold;
}

/* Kleiner grüner Hintergrund von Sprache Deutsch: class="de" */
.de {
background:#2FBE27 ;
color:white ;
padding:0;
font-size:15px;
font-weight:bold;
}

/* Grosser grüner Hintergrund der Sprache Deutsch: class="deg" */
.deg {
background:#2FBE27 ;
color:white ;
padding:0;
font-size:0.88em;
font-weight:bold;
padding:2px;
}

/***********************************************************/
/* Farbe: Violett  */
/* Diese Farbe wird ausschliesslich im Webbau verwendet    */
/* Diese Farbe ist ähnlich der Farb Wichtig im Vademecum   */
/***********************************************************/

/* Mit class="violett" kann Text mit violettem Hintergrund hervorgehoben werden */
.violett {
padding:2px;
background:#E1C6C6;
}

/***********************************************************/
/* Farbe: Wichtig                                          */
/* Vor allem für Videos                                    */
/* Diese Farbe ist ausschliesslich im Vademecum            */
/***********************************************************/

/* class="wichtig" */
.wichtig {
padding-top:1px;                       
padding-bottom:1px;                       
background:#E1C6C6;
color:#000000;
font-size:98%;
}

/***********************************************************/
/* Farbe: Wiki  */
/***********************************************************/

/* Hintergrund mit Farbe Wiki  */
.wiki {
margin-top:-0.5em;
padding:1px;
line-height:120%;
background:#F0DBBD;
}

/* Hintergrund von der Farbe "wiki" und Schrift "fett" */
/* Mit span class="wikifett" kann Text etws kleiner fett hervorgehoben werden */
/* Abstand oben ist kleiner als ein Leerabstand */
/* Formatiert wie "gelbfett" */
.wikifett {
margin-top:-0.5em;
padding:1px;
background:#F0DBBD;
color:#000000;
font-weight:bold;
line-height:120%;
}

/* Tabelle mit class="table-wiki"   */
.table-wiki {
background:#F0DBBD;
font-size:85%;
}

/***********************************************************/
/* Farbe: Suchen                                           */
/* Vor allem für die Google-Suche                          */
/* Diese Farbe ist ausschliesslich im Vademecum            */
/***********************************************************/

/* Hintergrund von Formulare "Suchen" */
.suchen {
background:#D0E5CD;
padding:1em;
}

/***********************************************************/
/* Farbe: Code                                             */
/***********************************************************/

/* Allgemeiner code..../code */
code {
padding:1px 0.2em; 
background:#E6E6E6;
color:#000000;
font-size:105%;
font-weight:bold;
}

/* Code im Menü, etwas verschieden von Code im Text */
#menue code {
padding:0;
background:#BFBFBF;
color:#000000;
}

/***********************************************************/
/* class="pre"                                        */
/* Text in Monospace (gleichmässige Breite                 */
/* Wird ausschliesslich im Webbau benutzt                  */
/***********************************************************/

/* Allgemein class="pre" */
pre {
font-family:monospace;
font-size:0.93em;
}

/* Ausgerichteter Text mit schwarzem Rahmen (Verwendet in Webbauu Beispiel) */
pre.text-box {
font-family:sans-serif;
border-style:solid; border-width:1px; padding:5px;
border-color:#000000; background:#FFFFFF; color:#000000;
}

/***********************************************************/
/* pre class="code"                                        */
/* Darstellung: Codes ausschliesslich im Webbau        */
/***********************************************************/

/* Darstellung Codes */
pre.code {
border-style:solid;
border-width:3px;
padding:5px;
border-left-color: #BFBFBF ;
border-top-color: #BFBFBF ;
border-right-color: #808080 ;
border-bottom-color:#808080;
background:#E6E6E6;
color:#000000;
}


/***********************************************************/
/* pre class="quell"                                       */
/* Darstellung: Quelltext ausschliesslich im Webbau        */
/***********************************************************/

/* Darstellung Quelltext */
pre.quell {
border-style:solid;
border-width:3px; 
padding:5px;
background:#F0DBBD; 
border-color:#DCAD6A; 
color:#000000;
}

/***********************************************************/
/* pre class="style"                                       */
/* Darstellung: Stylesheets ausschliesslich im Webbau      */
/***********************************************************/

/* Darstellung Stylesheet */
pre.style {
border-style:solid; 
border-width:3px; 
padding:5px;
background:#F5F08F; 
border-color:#D8CE13; 
color:#000000;
}

/***********************************************************/
/* p class="php"                                         */
/* pre class="php"                                         */
/* Darstellung: PHP-Befehle ausschliesslich im Webbau      */
/***********************************************************/

/* Darstellung PHP */
pre.php {
border-style:solid;
border-width:3px;
padding:5px;
background:#E1C6C6; 
border-color:#D8B7B6; 
color:#000000;
}

/* Darstellung PHP normal (nicht pre)*/
.php {
background:#E1C6C6; 
color:#000000;
}


/***********************************************************/
/* pre class="js"                                         */
/* Darstellung: JavaScript ausschliesslich im Webbau      */
/***********************************************************/

/* Darstellung javascript */
pre.js {
border-style:solid; 
border-width:3px;  
padding:5px;
background:#E9D6FF;
border-color:#A557FF;  
color:#000000;
}

/****************************************************************************/
/* Zum Teil spezielle Formatierung fuer Beispiele                           */
/* Bei Aenderung: Beispiele kontrollieren!!                                 */
/* Achtung: im Kopf von verschiedenen Kapiteln hat es noch mehr CSS-Angaben */
/****************************************************************************/

em {
font-style:italic;
}

/* provisorisch auf alt umgetauft am 2015-03-06 */ 
ul.alt {
margin:-0.3em 0 0.9em 1em;  /* Kontrolle: Normen/Allgemein */ 
list-style-type:disc;
}

/* Typisches Beispiel in /grundlagen/grundlagen/begriffe.php */ 

ul { 
margin-top:1em;             /* zugefügt am 2015-03-06 */
margin-left:-0.5em;
} 

/* class="link" */
ul.link { 
list-style-type:square;
margin-top:1em;             
margin-left:0.5em;          /* geändert am 2015-03-05*/
} 

/* Für Links, die fast ganz link den das Quadrat haben, wie z.B. in Tabellen */
/* class="linkrand" */
ul.linkrand { 
list-style-type:square;
margin-top:1em;             /* zugefügt am 2015-03-05 */
margin-left:-0.8em; 
} 

/* Für Links, die zum Beispiel in den News ohne linken Abstand sein sollen */
/* Beispiel div class="rand" */
/* class="rand" */
.rand { 
margin-left:-2em; 
} 

ul.verzeichnis { 
/* class="verzeichnis" */
/* Für normales Inhaltsverzeichnis */
/* Für normales eingeschobenes Verzeichnis 1-9 */
/* Beispiel: /themen/klima/einfuehrung.php */
/* Beispiel: /grundlagen/normen/allgemein.php */
list-style-type:circle; 
margin: 0 0 0 -0.8em;
line-height:1.5em;
}

ul.verzeichnisa { 
/* class="verzeichnisa" mit grösserem Abstand oben */
/* Achtung: getrennte Verzeichnisse (mit neuem vereichnisa) */
/* Beispiel: http://vademecum.brandenberger.eu/themen/klima-1/co2.php */
list-style-type:circle; 
margin: 0.6em 0 0 -0.8em;
line-height:1.5em;
}

ul.verzeichnis-0 { 
/* class="verzeichnis-0" */
/* Für eingeschobenes Verzeichnis ohne Nummer vorher */
/* Beispiel: /include/klima/inhalt/treibhaus_effekt.php  */
list-style-type:circle;
margin:0 0 0 -1.5em;
line-height:1.5em;
}

ul.verzeichnis-1 { 
/* class="verzeichnis-1" */
/* Für normales eingeschobenen Inhaltsverzeichnis 10 und mehr (1-9 mit  ) */
/* Beispiel: /themen/klima/news.php */
/* Beispiel: /include/klima/erdtemp.php */
/* Beispiel: /include/klima/erdtemp.php */
list-style-type:circle;
margin:0 0 0 0;
line-height:1.5em;
}

ul.verzeichnis-a { 
/* class="verzeichnis-a" */
/* Für normales eingeschobenen Inhaltsverzeichnis a, b, c */
/* Beispiel: /themen/klima/news.php */
/* Beispiel: /include/klima/erdtemp.php */
/* Beispiel: /include/klima/erdtemp.php */
list-style-type:circle;
margin:0 0 0 -0.5em;
line-height:1.5em;
}

ul.verzeichnis-f { 
/* class="verzeichnis-f" */
/* Für fettes separates Inhaltsverzeichnis  */
/* Format grösser als fett und kleiner als h5 */
/* Beispiel: /themen/klima/ursache.php */
/* Beispiel: /themen/klima-1/oszillation.php */
/* Beispiel: /themen/klima-2/schwindel.php */
/* Beispiel: /themen/klima-2/hysterie.php */
/* Beispiel: /themen/klima-2/argumente.php (speziell fettes Verzeichnis) */
/* Beispiel: /include/klima/modell.php (speziell für line-height) */
list-style-type:circle; 
margin: 0.5em 0 0.2em -0.8em;
font-size:1.05em;
font-weight:bold;
line-height:1.3em;
}

ul.verzeichnis-2 {
/* class="verzeichnis-2" */
/* Für separates Verzeichnis unterhalb fetten Verzeichnistitel 1-9 */
/* Beispiel: /themen/klima/ursache.php */
/* Beispiel: /themen/klima-1/oszillation.php */
/* Beispiel: /themen/klima-2/schwindel.php */
list-style-type:circle;
margin:0 0 0 1.5em;
line-height:1.5em;
}

ul.verzeichnis-3 {
/* class="verzeichnis-3" */
/* Für separates Verzeichnis unterhalb fetten Verzeichnistitel 10 und mehr (1-9 mit  )*/
/* Beispiel: /themen/klima-2/hysterie.php */
/* Beispiel: /themen/skandal/manipulation.php */
list-style-type:circle;
margin:0 0 0 2.4em;
line-height:1.5em;
}

/* ul class="self" und das Bild mit Self wegnehmen  */
/* angewandt in  webbau/php/einleitung/test.php */
ul.self {
list-style-type:none;
margin-top:-1em; 
margin-left:6.8em;
}

/* in den Verszeichnissen den Abstand oberhalb li vergrössern*/
.lia {
margin-top:0.5em; 
}

ol {
margin:0.9em 0 0.9em 3em;
padding:0;
}

ol li { /* Abstand oben und unten in den numerierten Aufzählungen */
margin:0.7em 0;
} 

/* a=class="a" Anker oben unsichtbar und mit Abstand zum folgenden Text */
.a { 
visibility:hidden;
margin:-3em 0 3.7em 0;
} 

/* a=class="a-top" Anker zuoberst anstatt top */
.a-top { 
visibility:hidden;
margin:-1.5em 0 3.7em 0;
} 


/* a=class="a_tabelle" Anker oben unsichtbar und mit Abstand zum Text in Tabelle */
.a_tabelle { 
visibility:hidden;
margin:-4.1em 0 4.7em 0;
} 

/* a=class="an" Anker oben unsichtbar mit nur kleinem Abstand im Text
Wird vor allem im Stichwortverzeichnis gebraucht */
.an { 
visibility:hidden;
margin:-4.7em 0 4.1em 0;
} 

/* class="b" Im Who: Pfeil nach oben, links oberhalb vom unteren Bild */
.b { 
margin-bottom:-1.2em;   /* geht nicht!!!! im Text p style="margin-bottom:-1.2em" */
} 

/* hr class="b" mit grösserem unterem Abstand (wenn unten z.B. gelb) */
hr.b {
background:#999;	/* setzt die Farbe */
height:1px;		/* ersetzt size=1  */
border:none;		/* ersetzt noshade */
margin-bottom:1.2em;
}

/* hr class="duenn" Dünner Trennstrich  */
hr.duenn {
background:#999;	/* setzt die Farbe */
height:1px;		/* ersetzt size=1  */
border:none;		/* ersetzt noshade */
}

/* hr class="ah" Nach dem Anker einen Trennstrich */
/* Anwendung in Who is who */
.ah { 
margin:-1em 0 0 0;
}

/* Mit span class="fett" kann Text fett hervorgehoben werden */
/* Abstand oben ist kleiner als ein Leerabstand */
.fett {
margin-top:-0.5em;
font-weight:bold;
}

/* Mit span class="fettgross" kann Text fett und etws grösser hervorgehoben werden */
/* Die Grösse ist etwas grösser als normal aber kleiner als mit h5 */
/* Das Margin wirkt nicht bei span="fettgross" sondern nur bei p class="fettgross"  */
.fettgross {
font-size:1.05em;
font-weight:bold;
margin:1em 0 -0.3em 0;
}