/* Drucker brauchen ganz andere CSS Angaben als Bildschirme. Aus diesem Grund
   haben wir fuer diese auch eine eigene CSS Datei. */

body {
 background: white;
 color: black;
 font-family: verdana, arial, sans-serif; /* Drucker sollten alles mit einer Schriftart mit Serifen drucken, da diese auf dem Papier wesentlich leichter zu lesen ist. Schriftarten mit Serifen sind zum Beispiel Georgia, Times New Roman. Am Ende sollte immer die Schriftfamilie hier mit Serifen: "serif" stehen. */
}
#logo {
 text-align: right;
 line-height: 0.8em;
 font-size: 3em;
 font-family: verdana, arial, sans-serif; /* Da das Logo aehnlich wie auf dem Bildschirm aussehen soll nehmen wir hier auch die gleiche Schriftart. */
 letter-spacing: -3px;
}
#logo a {
 text-decoration: none; /* Hier lassen wir den Unterstrich weg. */
}
h2, h3, h4 { font-weight: normal; }
h1, h2, h3, h4, h5, h6 { /* Alle Ueberschriften bekommen eine besondere Farbe, und da sie sehr gross sind, koennen wir es uns erlauben hier eine Schrift mit Serifen zu waehlen. Wir spielen hier ein wenig mit Typographie, und entgegen dem Einheitsbrei auf vielen Seiten. */
  color: #9F3662;
  font-family: verdana, arial, sans-serif;
}
#subnav {
  width: 20%; /* Je kleiner das Fenster desto kleiner soll auch die Breite der Subnavigation werden, damit immer genuegend Platz fuer den richtigen Inhalt bleibt. */
  min-width: 8em; /* Damit uns die Subnavigarion nicht zu sehr zusammengeschoben wird. */
  float: right; /* Damit erreichen wir dass der Inhalt links neben der Subnavigation vorbeifliesst und nicht erst unten drunter anfaengt. */
  padding: 70px 1% 1em 1%;
  margin: 1em 1% 0 1%;
  border-left: 2px dotted #aaa; /* Hiermit trennen wir optisch die Subnavigation vom eigentlichen Inhalt ab. */
  border-bottom: 2px dotted #aaa;
  font-size: 0.9em; /* Die Schriftgroesse setzen wir hier ein wenig herunter damit erkennbar wird, dass das Informationen zweiter Rangordnung sind. */
  overflow: auto; /* scrollen erlauben, wenn hoch genug */
  max-height: 2700px;
}
#subnav dt { /* Die einzelnen Ueberschriften in der Subnavigation */
  font-size: 1.2em;
  font-family: verdana, arial, sans-serif;
  padding: 0.5em;
  margin-top: 1em;
  border-top: 2px dotted #aaa; /* Hier eine optische Trennungslinie zwischen den einzelnen Bereichen der Subnavigation. */
}
#subnav dd { /* Die Unterpunkte der Subnavigation. */
  padding: 0;
  margin: 0.2em 0;
}
.skip, #menu { /* Wenn sich jemand eine Seite aus dem Internet ausdruckt dann will er mit hoher Wahrscheinlichkeit den Inhalt drucken und nicht das Menue oder sonstige Angaben die fuer die Navigation auf dem Bildschirm gedacht sind. Deshalb lassen wir diese vom Papier verschwinden. Das spart auch viel Paphier und Tinte. */
 display: none;
}
#main a:link:after, #main a:visited:after { /* Auf dem gedruckten Blatt Papier kann man keinen Link klicken. Deshalb drucken wir den gesammten URL dieses Links dahinter an. Dies funktioniert allerdings nicht im IE. Wer mehr zu diesem Thema wissen will sei auf <http://www.alistapart.com/articles/goingtoprint/ verwiesen.> */
   content: " (" attr(href) ") ";
   padding: 0 5% 0 20px;
   font-size: 0.9em; }
#main a[href^="/"]:after { /* Der Mozilla/Firefox zeigen, im Gegensatz zum Opera, die Domain nicht von selbst an. Hier muessen wir mittels CSS3, welches er schon zum Teil versteht, nachhelfen. */
 content: " (http://example.org" attr(href) ") ";
}
.fleft { /* Damit die Fliesseigenschaften auch beim Drucken beachtet werden. */
 float: left;
 margin: 0 1em 0.2em 0;
}
.fcenter {
/*  float: center; */
  margin: 0 30% 0 30%;
  padding: 1px;
}
.fright {
 float: right;
 margin: 0 0 0.2em 1em;
}