html
{  font-family:          arial,sans-serif;
   font-size:            16px;
}
body
{  width:                900px;
   margin:               25px auto;
   background-color:     #dddddd;
   counter-reset:        zaehler;
}
p
{  text-align:           justify;
}
dt
{  margin-top:           0.3em;
}
dt:after
{  content:              ":";
}
dd
{  margin-left:          10em;
   margin-top:           -19px;
}
div
{  width:                900px;
   border:               2px solid black;
   border-color:         white black black white;
}
div div
{  border:               1px dotted black;
   padding:              5px;
   font-size:            12px;
   background-color:     #eeeeee;
   background-repeat:    no-repeat;
   white-space:          pre-wrap;
}
.quell
{  margin:               6px 3px 6px 6px;
   padding-top:          20px;
   width:                429px;
   float:                left;
   font-family:          monospace, sans-serif;
   height:               170px;
   background-image:     url(quelltext.gif);
}
.css
{  margin:               6px 6px 6px 453px;
   padding-top:          20px;
   width:                429px;
   font-family:          monospace, sans-serif;
   height:               170px;
   background-image:     url(css.gif);
}
.ergebnis
{  clear:                left;
   margin:               1px 6px 6px 6px;
   width:                876px;
   background-image:     url(ergebnis.gif);
   padding-bottom:       0px;
}
.code
{  font-family:          monospace, sans-serif;
}
h1
{  font-size:            24px;
}
h2
{  font-size:            20px;
}
h3
{  font-size:            18px;
   margin-top:           2em;
}
h3:before
{  content:              counter(zaehler) ". ";
   counter-increment:    zaehler;
}
.rot
{  color:                red;
}
.tooltipp, .tooltipp-2, .tooltipp-3
{  color:                green;
   text-decoration:      underline;
   cursor:               help;
}
#h1-kapitel-pseudo
{  height:               38px;
   position:             relative;
}
#h1-kapitel-pseudo:before
{  content:              url(pfeil-links.gif) " ";
   bottom:               -10px;
   position:             relative;
}
#h1-kapitel-pseudo:after
{  content:              " " url(pfeil-rechts.gif);
   bottom:               -10px;
   position:             relative;
}
#h1-kapitel-hover
{  position:             relative;
}
#h1-kapitel-hover:hover:before
{  content:              url(pfeil-links.gif) " ";
   bottom:               -10px;
   position:             relative;
}
#h1-kapitel-hover:hover:after
{  content:              " " url(pfeil-rechts.gif);
   bottom:               -10px;
   position:             relative;
}
#gerade:hover:after
{  content:         "Eine Zahl ist gerade, wenn sie durch zwei teilbar ist.";
}
#primzahl:hover:after
{  content:         "Eine Zahl, die genau zwei Teiler besitzt, heißt Primzahl.";
}
.tooltipp-2
{  position:             relative;
}
.tooltipp-2:hover:after
{  position:             absolute;
   bottom:               1em;
   left:                 1em;
}
#gerade-2:hover:after
{  content:         "Eine Zahl ist gerade, wenn sie durch zwei teilbar ist.";
}
#primzahl-2:hover:after
{  content:         "Eine Zahl, die genau zwei Teiler besitzt, heißt Primzahl.";
}
.tooltipp-3
{  position:             relative;
}
.tooltipp-3:hover:after
{  position:             absolute;
   bottom:               1em;
   left:                 1em;
   width:                20em;
   color:                blue;
   background-color:     silver;
   border:               1px solid red;
}
#gerade-3:hover:after
{  content:         "Eine Zahl ist gerade, wenn sie durch zwei teilbar ist.";
}
#primzahl-3:hover:after
{  content:         "Eine Zahl, die genau zwei Teiler besitzt, heißt Primzahl.";
}
.tooltipp-4
{  color:                green;
   border-bottom:        1px dotted green;
   position:             relative;
   cursor:               help;
}
.tooltipp-4:hover:after
{  position:             absolute;
   bottom:               1em;
   left:                 1em;
   width:                20em;
   color:                blue;
   background-color:     silver;
   border:               1px solid red;
}
#gerade-4:hover:after
{  content:         "Eine Zahl ist gerade, wenn sie durch zwei teilbar ist.";
}
#primzahl-4:hover:after
{  content:         "Eine Zahl, die genau zwei Teiler besitzt, heißt Primzahl.";
}
.tooltipp-5
{  color:                green;
   border-bottom:        1px dotted green;
   position:             relative;
   cursor:               help;
}
.tooltipp-5:hover:after
{  position:             absolute;
   margin-top:           -2.5em;
   margin-left:          -1em;
   width:                20em;
   color:                blue;
   background-color:     silver;
   border:               1px solid red;
   text-align:           left;
}
#gerade-5:hover:after
{  content:         "Eine Zahl ist gerade, wenn sie durch zwei teilbar ist.";
}
#primzahl-5:hover:after
{  content:         "Eine Zahl, die genau zwei Teiler besitzt, heißt Primzahl.";
}
img
{  border:               2px solid black;
   border-color:         black white white black;
}
.kapitel-10
{  overflow:             hidden;
   margin:               6px;
}
.kapitel-10 p
{  text-align:           right;
}
#gerade-5a:hover:after
{  content:         "Eine Zahl ist gerade, wenn sie durch zwei teilbar ist.";
}
#primzahl-5a:hover:after
{  content:         "Eine Zahl, die genau zwei Teiler besitzt, heißt Primzahl.";
}
#gplusone
{position: fixed;
 top: 10px;
 left:10px;
 border: none;
}