/* Stylesheet für die Übungsseiten aus dem Buch "Little Boxes, Teil 1" */

* { padding: 0; margin: 0; }/*padding und margin werden für alle HTML-Elemente auf 0 (Null) gesetzt */

html { /* erzwingt Scrollbar im Firefox */
  height: 101%;
}

/* Gestalte das HTML-Element mit dem Namen body */
body {
  background-color: #800000; /* Hintergrundfarbe */
  color: white; /* Schriftfarbe */
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: small; /* Schriftgröße */
}

/* Gestalte das div mit id="wrapper" */
div#wrapper {
  background-color: #800000;
  background-image: url(schatten_body.gif);
  color: white;
  width: 970px; /* Breite des Inhaltsbereichs */
  margin-top: 0;
  margin-right: auto; /* Abstand rechts */
  margin-bottom: 10px;
  margin-left: auto; /* Abstand links */
}

div#kopfbereich {
  position: relative;
  color: black;
  background: #800000 url(schatten_header.gif) repeat-y top left;
  padding: 10px 10px 10px 30px;
}

div#textbereich {
  padding: 20px 30px 20px 150px;
  margin-left: 130px;
}

div#fussbereich {
  clear: both;
  color: black;
  background-color: #800000;
  background-image: url(schatten_footer.gif);
  padding-top: 10px; /* unterhalb Rahmenlinie */
  padding-right: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  margin-top: 0; /* oberhalb Linie */
}

/* Gestalte die Grafik mit id="logo" */
img#logo {
  background-color: #800000;
  color: black;
  margin-top: 30px;
  margin-left: 60px;
}

h1 { font-size: 150%;}
h2 {
  font-size: 130%;
  margin-top: 5px;
  margin-right: 20px;
  margin-bottom: 30px;
  text-align: left;
}
h3 {
  font-size: 100%;
  margin: 20px;
  text-align: center;
}
address {
  text-align: center; /* zentrieren */
  font-size: 80%; /* etwas kleiner als der Rest */
  font-style: normal; /* normale Schrift, nicht kursiv */
  letter-spacing: 2px; /* Abstand zwischen den Buchstaben */
  line-height: 1.5; /* Zeilenabstand, ohne Einheit */
}

a { text-decoration: none; } /* Unterstreichung entfernen */

a:link { color: #ffff00; }
a:visited { color: #ffff00; }

a:hover,
a:focus {
}
a:active {
  color: white;
}
a.tab:link  {
  font-family:  Arial, Verdana, Helvetica, sans-serif;
  color: yellow;
  position: relative;
  font-size: 10pt;
  text-decoration:none;
}
a.tab:visited {
  font-family:  Arial, Verdana, Helvetica, sans-serif;
  color: yellow;
  position: relative;
  font-size: 10pt;
  text-decoration:none;
}
a.tab:hover {
  font-family:  Arial, Verdana, Helvetica, sans-serif;
  color: red;
  position: relative;
  font-size: 10pt;
  text-decoration:none;
}
a.index:link  {
  font-family:  Arial, Verdana, Helvetica, sans-serif;
  color:#FFFF00;
  position: relative;
  font-size: 10pt;
  text-decoration:none;
}
a.index:visited  {
  font-family:  Arial, Verdana, Helvetica, sans-serif;
  color:#FFFF00;
  position: relative;
  font-size: 10pt;
  text-decoration:none;
}
a.index:hover  {
  font-family:  Arial, Verdana, Helvetica, sans-serif;
  color:red;
  position: relative;
  font-size: 10pt;
  text-decoration:underline;
}

div#textbereich a {
}
div#textbereich a:hover,
div#textbereich a:focus {
  color: #ff0000;
}
 div#textbereich p {
  color: white; /* Schriftfarbe */
  margin-right: 40px;
  margin-top: 20px;
  margin-left: 20px;
  margin-bottom: 20px;
  text-align: justify;
}
h2, p, ul, ol {
  margin-bottom: 1em;
  margin-left: 20px;
}

/* Verschachtelte Listen ohne Abstand */
ul ul { margin-bottom: 0; }

/* Abstand von links */
li {
  margin-left: 20px;
  margin-right: 20px;
}
i  {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 10pt;
  color: white;
  text-align: justify;
}
p.klein {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 9pt;
  color:  white;
  text-align: center;
}
p.top {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 9pt;
  color:  white;
}
p.bottom {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 9pt;
  color:  white;
}
p.unterbild {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 8pt;
  color: white; /* Schriftfarbe */
  margin-top: 20px;
  margin-bottom: 20px;
}
p.menue3 {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 10pt;
  color: white;
  text-align: justify;
  padding: 8pt;
  position:absolute;
  top:50mm;
  right:1mm;
  width:180px;
  height:530px;}
p.menue4 {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 10pt;
  color: white;
  text-align: justify;
  padding: 8pt;
  position:absolute;
  top:31mm;
  right:1mm;
  width:180px;}
small {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  color:  white;
}
hr {
  width: 70%;
  margin: 20px auto;
}
td.ue1 {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size:  8pt;
  color: #000000;
  margin: 20px;
  width: 20%;
}
td.ue2 {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size:  10pt;
  font-weight: bold;
  text-align: center;
  padding-right: 20px;
  color: #800000;
  width: 60%;
}
td.stati {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 10pt;
  color: white;
  text-align: center;
}
td.links {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 10pt;
  color: white;
  text-align: left;
}
td.block {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 10pt;
  color: white;
  text-align: justify;
}
table {
  margin-left: 20px;
}
table.phpsite {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 10pt;
  color: white;
}
/* Das Kontaktformular */
form {
  background-color: #800000;
  width: 230px; /* Breite des Formulars */
  padding: 20px;
  text-align: center;
}
label { /* Beschriftung auf eigener Zeile */
  display: block;
  cursor: pointer; /* Mauszeiger wird zur Hand */
}
.bildlinks {
  float:left;
  padding: 3px;
  margin-top: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 20px;
}
.bildrechts {
  float:right;
  padding: 3px;
  margin-top: 10px;
  margin-right: 40px;
  margin-bottom: 10px;
  margin-left: 10px;
}
a.unsichtbar {
  color: #800000; /* Schriftfarbe */
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: small; /* Schriftgröße */
}
.land {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 10pt;
  color: white;
  text-align: justify;
}
.gallery {
  zoom:1;
  align:center
}
.gallery a {
  display:block;
  float:left;
  margin:5px;
  opacity:0.87;
  text-align:center;
}
.gallery a:hover {opacity:1;}
.gallery a img {
  border:none;
  display:block;
}
.gallery a#vlightbox {display:none}
#buttons {
  clear:left;
  float:left;
  width:5px;
  margin-left: 40px;
}
div.menue {
  font:normal 12px Verdana,sans-serif;
  line-height:19px;
  background: url(but-rot-gelb.gif) no-repeat;
  width:200px;
  height:21px;
  margin:2px;
}
div.submenue {
  font:normal 12px Verdana,sans-serif;
  line-height:19px;
  background: url(but-rot-orange.gif) no-repeat;
  width:200px;
  height:21px;
  margin:2px;
}
div.subsubmenue {
  font:normal 12px Verdana,sans-serif;
  line-height:19px;
  background: url(but-rot-grau.gif) no-repeat;
  width:200px;
  height:21px;
  margin:2px;
}
div.menue a:link, div.menue a:visited, div.menue a:hover, div.menue a:active {
  padding-left:20px;
  display:block;
  width:100%;
  text-decoration:none;
}
div.menue a:link, div.menue a:visited, div.menue a:hover, div.menue a:active {
 voice-family: "\"}\""; /* dieser 'Tantek-Hack' versteckt die nachfolgenden Regeln */ voice-family: inherit; /* vor alten Browsern und dem Internet Explorer bis V. 5.5 */ width:200px;            /* die standardkonvormen Browser interpretieren die Angabe */}
div.menue a:link, div.menue a:visited, div.submenue a:link, div.submenue a:visited, div.subsubmenue a:link, div.subsubmenue a:visited {color:#fc0; background:transparent;}
div.menue a:hover, div.submenue a:hover, div.subsubmenue a:hover {
  color:#fff;
  background: url(but-rot-rot.gif) no-repeat;
}
div.menue a:active, div.submenue a:active, div.subsubmenue a:active {
  color:#fff;
  background:transparent;
}
div.submenue {margin-left:15px;}
div.submenue a {
  padding-left:20px;
  display:block;
  width:200px;
  text-decoration:none;
}
div.subsubmenue {margin-left:30px;}
div.subsubmenue a {
  padding-left:20px;
  display:block;
  width:200px;
  text-decoration:none;
}
a#extra {
  color:white;
  background: url(but-rot-rot.gif) no-repeat;
}
a.subaktuell:link {
  font-family:  Arial, Verdana, Helvetica, sans-serif;
  color: red;
  position: relative;
  font-size: 1em;
  text-decoration: none;
  line-height: 1.3em;
}
a.subaktuell:visited {
  font-family:  Arial, Verdana, Helvetica, sans-serif;
  color: red;
  position: relative;
  font-size: 1em;
  text-decoration: none;
  line-height: 1.3em;
}
a.subaktuell:hover {
  font-family:  Arial, Verdana, Helvetica, sans-serif;
  color: red;
  position: relative;
  font-size: 1em;
  text-decoration: none;
  line-height: 1.3em;
}