body {
  margin: 0;
  background-image: url(../images/frame-background.jpg);
}

/* Einfärbung der Links
   Die Links in der Leiste links werden getrennt konfiguriert! */

/* link, visited, focus, hover und active sind "Spezial-Klassen" für Links.
link: Normaler Link. Ohne Maus darüber, wurde (soweit der Browser Cache das hergibt) noch nie angeklickt.
visited: Schon einmal besuchter Link
focus: Nachdem ein Link angeklickt wurde, hat er den "Fokus" (häufig sichtbar anhand gestrichelter Linie um den Link).
       Ist für die Navigation mit der Tastatur wichtig.
hover: Gilt wenn die Maus über einem Link liegt. Klicken ist nicht notwendig.
active: Gilt genau in dem Moment, wo der Link angeklickt wird. Direkt davor gilt hover, direkt danach focus. */
a:link {
  color: #C00000; /* Textfarbe für Links */
  text-decoration: none; /* Links nicht unterstreichen */
}

a:visited {
  color: #A00000; /* s.o.; etwas dunkleres Rot */
  text-decoration: none; /* s.o. */
}

a:focus {
  color: #FF0000; /* s.o., helles Rot */
  text-decoration: none; /* s.o. */
}

a:hover {
  color: #FF0000; /* s.o. */
  text-decoration: underline; /* Links unterstreichen */
}

a:active {
  color: #FF0000; /* s.o. */
  text-decoration: underline; /* Links unterstreichen */
}

/*
   NAVIGATION
*/

#navigation ul {
  list-style: none; /* Keine Aufzählungszeichen für diese Liste */
  margin: 0; /* Kein äußerer Abstand */
  border: 0; /* Keine Begrenzungslinie */
  padding: 0; /* Kein innerer Abstand */
}

#navigation li {
  margin: 3px 0px 3px 0px; /* 3 Pixel Abstand oberhalb und unterhalb der Listenelemente. Lockert die Navigation etwas auf. Firefox und IE interpretieren diese Werte an bestimmten Stellen etwas anders, wodurch das Layout hier anders aussieht. */
  border: 0; /* Keine Begrenzungslinie */
  padding: 0; /* Kein innerer Abstand */
  width: 220px; /* Breite des Listenelements. Eigentlich überflüssig. Ohne eine Angabe an dieser Stelle verkorkst der IE allerdings die Auflistung */
}

/* Ebene #1 */

/* Werte die bei diesen Link-Klassen nicht explizit gesetzt werden, übernehmen soweit vorhanden die Werte aus obiger Link-Konfiguration (also Textfarbe und Unterstrich) */

#navigation ul a {
  display: block; /* Notwendig, damit die Links alle bis an den rechten Rand der Navigationsleiste reichen (ansonsten nur so lang wie der Begriff, der mit dem Link versehen wurde) */
  width: 209px; /* Relevant für die Länge der Linien über und unter den Navigationslinks der ersten Ebene */
  border-bottom: 1px solid #800000; /* Linie unter den Links. Gilt für Ebene 1, 2 und 3. Problem: Scheint "unter" die linke Border zu rutschen, daher nicht ganz durchgängig. */
  border-top: 1px solid #800000; /* Linie über den Links. Gilt für Ebene 1, 2 und 3. */
  border-left: 7px solid #800000; /* roter Kasten links von den Links. Gilt für Ebene 1, 2 und 3. */
  background-color: transparent; /* Sorgt dafür, daß die Hintergrundfarbe des content-divs zu sehen ist. Wichtig für den Fall, daß der Inhalt einer Seite über die normale Höhe der Navigation hinaus geht - die Leiste wird nämlich nicht mit verlängert. */
  padding-left: 5px; /* Sorgt für 5 Pixel Abstand zwischen Link und linkem Kasten */
  font-variant: small-caps; /* Kapitälchen für die Links */
  font-weight: bold; /* "fette" Links */
}

#navigation ul a:focus {
  background-color: #FFF8F0; /* Festlegen der Hintergrundfarbe */
  border-left: 7px solid #F00000; /* Festlegen der Kastenfarbe */
  text-decoration: none; /* "Normale" Links werden beim darüber fahren und anklicken unterstrichen. Diese Einstellung verhindert dies für die Navigationsleiste */
}

#navigation ul a:hover {
  background-color: #FFF8F0; /* siehe oben */
  border-left: 7px solid #D00000; /* s.o. */
  text-decoration: none; /* s.o. */
}

#navigation ul a:active {
  background-color: #FFF8F0; /* s.o. */
  border-left: 7px solid #F00000; /* s.o. */
  text-decoration: none; /* s.o. */
}

/*
Selbst erstellte Klasse für Links. Sinnvoll, um zu markieren auf welcher Seite man sich gerade befindet.
Dazu ist in jeder Seite der entsprechende "eigene" Link mit dem Zusatz class="current" zu versehen.
Das gilt natürlich nur für die Navigationsleiste.
*/

#navigation ul a.current {
  background-color: #FFFFFF; /* Festlegen der Hintergrundfarbe */
  border-left: 7px solid #F00000; /* Festlegen der Kastenfarbe */
  border-bottom: 1px solid #F00000;
  border-top: 1px solid #F00000;
  color: #FF0000; /* Festlegen der Textfarbe */
  text-decoration: none; /* s.o. */
}

/* Ebene #2 */

#navigation ul ul {
  margin-left: 14px; /* Sorgt für die Einrückung der zweiten Navigationsebene */
}

/* Die Links auf Ebene zwei übernehmen die Eigenschaften der Links von Ebene 1 */

#navigation ul ul a {
  width: 195px; /* Relevant für die Länge der Linien über und unter den Navigationslinks der zweiten Ebene */
}

/* Ebene #3 */

/* Die Links auf Ebene drei übernehmen die Eigenschaften der Links von Ebene 1 und 2 */

#navigation ul ul ul a {
  width: 181px; /* Relevant für die Länge der Linien über und unter den Navigationslinks der dritten Ebene */
}

/* Einfaerben des Navigationspunktes dessen Inhalt gerade angezeigt wird
   Funktioniert ohne Javascript. Das Einfuegen neuer Navigationspunkte erfordert allerdings Anpassungen
   in diesem Bereich. */

/* Verschiedene Tabellenformatierungen */

/* Tabellenformatierung fuer die Auflistung der Kurse im Kursangebot */
table#kurse {
	border: 1px #FF0000 solid;
	margin: 0px;
	width: 100%;
	border-collapse: collapse;
}

table#kurse td.caption {
   background: #EDDED9;
	padding: 10px;
	border-bottom: 1px #FF0000 dotted;
	text-align: center;
}

table#kurse tr.even {
	background: #FEEFEA;
}

table#kurse th {
	background: #EDDED9;
	border-left: 1px #FF0000 dotted;
	border-bottom: 1px #FF0000 solid;
	padding: 3px;
	text-align: center;
}

table#kurse th.pdf {
	width: 50px;
}

table#kurse th.dauer {
	width: 75px;
}

table#kurse th.beginn {
	width: 75px;
}

table#kurse th.beginn_privatschule {
	width: 125px;
}

table#kurse th.gebuehren {
	width: 75px;
}

table#kurse th.gebuehren_privatschule {
	width: 175px;
}

table#kurse th.date {
	font-size: 10px;
}

table#kurse td {
	border-left: 1px #FF0000 dotted;
	border-bottom: 1px #FF0000 solid;
	padding: 3px;
	text-align: center;
}

table#kurse td.left {
	text-align: left;
}

/* Fuer Listen ohne weiteren Text drumherum, die alleine in einem Tabellenfeld stehen.
Ohne diesen Eintrag wuerde oben und unten ein Abstand von mehreren Pixeln sein, praktisch
wie ein Absatz. Sieht mies aus und ist in diesem Fall daher nicht gewuenscht. */
ul#no_margin {
	margin: 0px;
}

/* Tabellenformatierung fuer die "Detailanzeige" der Kurse. */
table#kurse_detail {
	border: 1px #FF0000 solid;
	margin: 0px;
	width: 100%;
	border-collapse: collapse;
}

table#kurse_detail td.kurse_detail_left {
	border-right: 1px #FF0000 dotted;
	border-bottom: 1px #FF0000 dotted;
	text-align: right;
	background: #EDDED9;
	width: 110px;
	vertical-align: top;
	font-weight: bold;
	font-variant: small-caps;
	padding: 5px 8px 5px 8px;
}

table#kurse_detail td.kurse_detail_right {
	text-align: justify;
	padding: 5px 8px 5px 8px;
	border-bottom: 1px #FF0000 dotted;
}

/* "Verschiebt" Listen ein wenig nach links (sofern sie in einer der Kurs-Detail Tabellen auf der rechten Seite stehen) */
table#kurse_detail td.kurse_detail_right ul {
	padding-left: 25px;
}

/* div-Positionierung */

/* Legt die Größe des eigentlichen Inhaltsfensters fest (Rahmen für navigation-, main-bottom- und main-top-div) */
div#content {
	position: relative;
	margin: 0px auto;
	width: 1000px;
	height: auto;
	min-height: 750px;
	background: #FEEFEA;
	border: 1px #FF0000 solid;
	font-family: Arial;
	font-size: 12px;
	padding: 0px;
	overflow: hidden;
	_overflow: ;
	_height: 630px;
}

/* Positionierung der Navigationsleiste
   Die Hintergrundfarbe wird allerdings im content-div festgelegt! */
div#navigation {
 	position: absolute;
	left: 0px;
	top: 0px;
	margin: 0px; /* Kein äußerer Abstand */
	border: 0px; /* Keine Begrenzungslinie */
	padding: 0px; /* Kein innerer Abstand */
	height: inherit; /* Höhe der Navigation was: 730px*/
	overflow: hidden;
	width: 220px; /* Breite der Navigation */
}

/* div fuer die "top"-Navigation (Rackow-Schulen, staatlich anerkannte Ersatzschule + vier Links) */
div#top {
	position: absolute;
  margin: 0px;
  left: 221px;
  top: 0px;
  width: 777px;
  max-width: 777px;
  min-height: 100px;
  _height: 100px;
  background: #FFFFFF;
  border-bottom: 1px dotted #FF0000;
  border-left: 1px dotted #FF0000;
}

/* div fuer den eigentlichen Inhalt der Seite */
div#main_bottom {
	position: relative;
	top: 101px;
	left: 221px;
	overflow: hidden;
	margin: 0px;
	padding: 20px;
	padding-top: 40px;
	width: 738px;
	max-width: 738px;
	min-height: 629px;
	height: auto;
	_height: 100%;
	_overflow: ;
	background: #FFFFFF url(../images/main-background.gif) no-repeat fixed center top;
	border-left: 1px dotted #FF0000;
	border-bottom: 1px solid #FF0000;
	font-family: Arial;
	font-size: 10pt;
}

div#filler{
  height: 100px;
}

/* div fuer den "Letzte Aenderung"-Text */
div#last_change  {
	position: absolute;
	left: 779px;
	top: 120px;
	width: 200px;
	color: #D0D0D0;
	text-align: right;
}

/* Textformatierungen */

div#top h1 {
  margin: 0;
  font-family: Arial;
  font-size: 20pt;
  font-weight: bold;
  letter-spacing: 0.3em;
  text-align: center;
}

div#top h2 {
  margin: 0;
  font-family: Arial;
  font-size: 12pt;
  font-weight: normal;
  word-spacing: 0.2em;
  text-align: center;
}

div#main_bottom h1 {
  font-family: Arial;
  font-size: 12pt;
  font-weight: bold;
  text-align: center;
}

div#main_bottom img.gallery {
  padding: 1px;
  border: 1px solid #FF0000;
}

/* Tooltips */

/* Relativer Tooltip */
a.tooltip, a.tooltip:link, a.tooltip:visited, a.tooltip:active  {
  position: relative;
  border-bottom: 1px dotted #FF0000;
  border-left: 1px dotted #FF0000;
  }

a.tooltip:hover {
  background: transparent;
  text-decoration: none;
  }

a.tooltip span {
  display: none;
}

a.tooltip:hover span {
  display: block;
  position: absolute;
  top: 20px;
  left: 0;
  z-index: 100;
  padding: 1px;
  border: 1px solid #FF0000;
  background: #FFFFFF;
}