/* Aufraeumen und Grundeinstellungen:
   Absatzbreite und Breite Aufzaehlungen */
body {
  /* Evtl. Voreinstellungen zuruecksetzen */
  margin: 0;
  padding: 0;
  border:none;

  font-family: "Helvetica", "Arial", sans-serif;
    font-size:   100% ;
  line-height: 170%; /* Helvetica braucht vieel Durchschuss */
  margin:      2em ; /* Seite soll nicht am Browserrand kleben */
  width: 70em;
}

/* Links */
a { /* Aendern Vorgabe:  etwas dicker unterstrichen mit genuegend Abstand */
  text-decoration: none;
  padding-bottom: 0.1em;
  border-bottom: solid 0.1em #336699;
}




p          { color: #000000; background: #ffffff; }
/* Links Farben: Blau, lila und beim Draufklinken invers */
a          { color: #336699;  background: transparent; }
a:link     { color: #336699;  background: transparent; }
a:visited  { color: #996633;  background: transparent; }
a:hover    { color: #ffffff;  background: #000000;     }
a:focus    { color: #ffffff;  background: #000000;     }
a:active   { color: #ffffff;  background: #000000;     }


/* Absatzbreiten */

p      {width: 70em;} /* Maximalbreite Absaetze */
ol, ul {width: 67em;} /* Maximalbreite Absaetze minus Einrueckung */
hr     { /* Horizontale Linie auf Absatzbreite mit Ausrichtung Links (margin-right: auto) */
  width: 70em;
  margin: .6em auto .6em 0 ;
  height: .1em;
  background-color: #000000;

}

/* Texteinschuebe als Blockquotes */
blockquote { margin: 0 ; padding: 0; }

/* BEISPIELE mit Firma Lötgens als kursives Block-Zitat -- wird im Quelltext
 * hervorgerufen durch:

> _Dies ist ein Absatz, indem es um die Firma Lötgens geht. Hier steht
am Beginn des Absatzes eine spitze Klammer und ein Unterstrich und am Ende ein
Unterstrich.
*/

/* Formatierung mit grauem Hintergrund und roter Linie links */


blockquote p {
  margin: 0.6em 0 1.6em 0;
  padding: 0.6em 0.6em 0.6em 1em ;

  width: 70em;
  background-color: #dddddd;
  border-left: solid 0.6em #FF0000;
}

/* AUFGABEN als numerierte Liste mit schwarzem Rand -- wird im Quelltext
 * hervorgerufen durch:

> 1. Dies ist Aufgabe 1.
> 2. Hier steht am Beginn des Absatzes eine spitze Klammer und die Numerierung.

Formatierung mit grauem Hintergrund und schwarzer Linie links */
blockquote { margin: 0 ; padding: 0; }

blockquote ol {
  margin: 0.6em 0 1.6em 0;
  padding: 0.6em 0.6em 0.6em 2.6em ;

  width: 70em;
  background-color: #eeeeee;
  border-left: solid 0.2em #000000;
}


/* WICHTIG:-Bereiche */
/* Fett und kursiv schwer zu lesen -- ein wenig sperren: */

 p  strong  {
   letter-spacing: 0.03em;
 }

/* CODEBEISPIELE und der Beispielhoax (<pre><code>) auf lesbarerere Schrift
 * Consolas bzw Bitstream Vera Sans Bold Oblique gesetzt. */
pre, code, pre code {
  font-family: "Bitstream Vera Sans Bold Oblique";
  font-size: 120%;
  background-color:#dddddd; color:#000666;
  }
  /*font-family: "Consolas";


/* Aufzaehlungspunkte vertikaler Abstand */
li {margin-bottom: 0.6em;}

/* Lesbare huebsche Tabellen */
table {
  max-width:       70em; /* Maximale Breite begrenzen */
  margin:          none; /* Vorher aufraeumen: */
  padding:         none;
  border:          none;
  margin-bottom:   2em;
  border-collapse: collapse; /* Keine toten Zwischenraeume zwischen
  Tabellenzeilen und Zellen der Tabelle */
  border-top:      0.2em solid #000000; /* Tabelle beginnt und endet mit  */
  border-bottom:   0.2em solid #000000; /* dicker schwarzer Linie.        */
}

/* 1. Vertikales und 2. horizontales Innenpolster in jeder Zelle */
table thead tr.header th ,
table tbody tr.odd    td ,
table tbody tr.even   td { padding: 0.6em 0.6em;}

table thead { /* Tabellenkopf mit grauem Hintergrund und duennerer Linie
  zwischen Tabellenkopf und dem Rest der Tabelle  */
  margin:           none;
  border:           none;
  border-bottom:    0.1em solid #000000;
  background-color: #dddddd;
}

/* "Gestreifte" Tabelle -- Tabellenzeilen sind in von Markdown erzeugter
 * HTML-Datei abwechselnd mit der Klasse odd oder even ausgewiesen: */
table tbody tr.odd  td { background: #ffffff;}
table tbody tr.even td { background: #eeeeee;}


/* In dem von Markdown erzeugten Code bilden Bilder, deren Beschreibungen
 * nicht verlinkt werden, mit der Bildbeschreibung einen gemeinsamen
 * Absatz. Das sieht schlecht aus. Deswegen wird die img-Umgebung als Block
 * formatiert, um einen Umbruch zu erwingen.  */
p img {
  display:       block;
  margin-bottom: 0.6em;
}

p a img { /* Blauer Rahmen um Bilder, die auf eine Bildbeschreibung verlinken */
  padding: 0.1em;
  border: 0.5em solid #336699;
}

/* Anderer Rahmen um Bilder, deren Beschreibung bereits gelesen wurde.
   Fetter roter Rahmen beim mouseover */
p a          img { border-color: #336699;  border-width: 0.1em;  padding: 0.1em;}
p a:link     img { border-color: #336699;  border-width: 0.5em;  padding: 0.1em;}
p a:visited  img { border-color: #99ffbb;  border-width: 0.5em;  padding: 0.1em;}
p a:hover    img { border-color: #ff0000;  border-width: 0.5em;  padding: 0.1em;}
p a:focus    img { border-color: #ff0000;  border-width: 0.5em;  padding: 0.1em;}
p a:active   img { border-color: #ff0000;  border-width: 0.5em;  padding: 0.1em;}


/*


[ ![description of image outsourced](Bilder/240_02.jpg) ](bilder.html#bildbeschreibung-von-bild-14.2.4-6)
**Abb. 14.2.4-6:**



 */