body {
  background-color: #FFFAF3;
  margin: 3% 5% 3% 5%;
  color: #000000;
}
h1 {
  font-family: Arial,sans-serif;
  font-weight: bold;
  font-size: 1.8em;
  margin-bottom: 1em;
}
h1 .name {
  font-weight: normal;
  font-size: 0.6em;
}
p {
  font-family: Arial,sans-serif;
  font-weight: normal;
  font-size: 1em;
  line-height: 1.3em;
}
p.note {
  font-size: 0.8em;
}
p .name {
  font-style: italic;
}
dt {
  font-family: Arial,sans-serif;
  font-weight: bold;
  font-size: 1em;
  line-height: 1.3em;
  margin-top: 1em;
  margin-bottom: 0.2em;
}
dd {
  font-family: Arial,sans-serif;
  font-weight: normal;
  font-size: 1em;
  line-height: 1.3em;
}
a {
  color: #005A00;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.note {
  font-size: 0.8em;
  font-weight: normal;
  font-style: italic;
}
/* link bar at the bottom
   This bar schould be displayed at fixed position with text align right and 
   the body showing through the bar background. Indeed, Firefox seems to be 
   the only browser, which is able to support all effects.
*/
#footer { 
  font-family: Arial,sans-serif;
  font-size: 0.8em;
  font-style: italic;
  text-align: right;
  opacity: .8;
}
div[id="footer"] {           /* exclude IE */
  position: fixed;
  bottom: 0;
  background-color: #FFFAF3; 
  padding: 1em 1% 0.5em 0;   /* next 3 lines are for Opera */
  width:102%;
  right: 5%;
}
:root div[id="footer"] {     /* for Firefox */
  right: 0;
  margin: 0;
  padding: 1em 5% 0.5em 5%;
  width: 100%;
}