#oben { 
  position: absolute;
  top: 0px;
  height: 86px;
  margin: 0; padding: 0;
  background-image:url("/fileadmin/oblin.gif"); background-repeat:repeat-x;
  max-width: 870px;
}

#menu { 
  position: absolute;
  top: 86px;
  background: #bbd760;
  margin: 0; padding: 0;
  padding-top: 1ex;
  padding-bottom: 1ex;
  width: 200px;
  overflow: hidden;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;
}

#menu a {
  color: blue;
  background: transparent;
  text-decoration: none;
  display: block; /* Damit der Link in der ganzen Breite des Menüs aktiv ist */
}

#menu ul {
  padding: 0;
  margin: 0;
  list-style: none;
  margin-top: 1ex;
  margin-bottom: 0px;
  padding-bottom: 0px;
  padding-left: 0.5em;
  margin-left: 0.5em;
  padding-right: 0.5em;
  margin-right: 0.5em;
}

#menu ul li {
  padding: 0;
  margin: 0;
  padding-left: 0.2em;
}

#menu ul ul {
  padding: 0;
  margin: 0;
  padding-left: 0.5em;
  margin-left: 0.5em;
  padding-right: 0px;
  margin-right: 0px;
}

#menu ul li {
  margin-top: 0.5ex;
  margin-bottom: 0.5ex;
}

#menu ul li {
  /* Rahmen für Erhöhungseffekt */
  border-top: 1px solid #e4d9c0;
  border-right: 1px solid #837c6b;
  border-bottom: 1px solid #837c6b;
  border-left: 1px solid #e4d9c0;
}

#menu ul li ul li {
  /* Erhöhungseffekt mit Randausgleich rechts */
  border-top: 1px solid #e4d9c0;
  border-right: 0px solid #837c6b;  /* Rechter Rand absolut wie auf erster Ebene */
  padding-right: 1px; /* Damit der Platz für die Schrift konstant bleibt */
  border-bottom: 1px solid #837c6b;
  border-left: 1px solid #e4d9c0;
}

#menu ul li ul li ul li {
  /* Rechter Rand absolut wie auf erster Ebene */
  margin-right: -1px;
}

/* Effekt für ausgewählte Elemente: Weiße Schrift und je nach Browser auch vertieft. */
#menu a:hover {
  color: white;
  background: transparent;
}
#menu ul li:hover { /* Ausgewähltes Listenelement */
  /* Rahmen für Vertiefungseffekt */
  border-top: 1px solid #99917d;
  border-right: 1px solid #e4d9c0;
  border-bottom: 1px solid #e4d9c0;
  border-left: 1px solid #99917d;
}
#menu ul li:hover a {
  color: white;
}
#menu ul li:hover ul li { /* Unterelement des ausgewählten */
  /* Voller Erhöhungseffekt */
  border-top: 1px solid #e4d9c0;
  border-right: 1px solid #837c6b;
  border-bottom: 1px solid #837c6b;
  border-left: 1px solid #e4d9c0;
}
#menu ul li:hover ul li a {
  color: blue;
}
#menu ul li:hover ul li:hover { 
  /* Vertiefungseffekt mit Randausgleich rechts */
  border-top: 1px solid #99917d;
  border-right: 0px solid #e4d9c0;
  padding-right: 1px;
  border-bottom: 1px solid #e4d9c0;
  border-left: 1px solid #99917d;
}
#menu ul li:hover ul li:hover a { 
  color: white;
}
#menu ul li:hover ul li:hover ul li a { 
  color: blue;
}
#menu ul li:hover ul li:hover ul li:hover a { 
  color: white;
}

/* Den Pfad zum aktiven Untermenü hervorheben */
#menu ul li.selection a {
  color: white;
  background: transparent;
}
#menu ul li.selection ul li a {
  color: blue;
  background: transparent;
}
#menu ul li.selection ul li.selection a {
  color: white;
  background: transparent;
} 
#menu ul li.selection ul li.selection ul li a {
  color: blue;
  background: transparent;
}
#menu ul li.selection ul li.selection ul li.selection a {
  color: white;
  background: transparent;
}

#esslingen {
  position: absolute;
  top: 86px;
  left: 220px;
  max-width: 660px;
}

#content {
  float: left;
  position: absolute; 
  top: 86px;
  left: 200px;
  margin-left: 1em;
  text-align: left;
  padding: 25px 0 0 5px; /* Abstand zum Menü und zum Logo, Wort "Esslingen. */
  max-width: 660px;

  font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;
}

/* Zeilenabstand verringern */
.bodytext {
  margin: 0;
  margin-bottom: 1pt;
}
#content h1, h2, h3, h4, h5 {
  margin-bottom: 1ex;  /* Unterschiedliche Größe ergibt sich aus Schriftgröße der Überschriften. */
}

/* Allgemeiner Tabellenhintergrund: JSPE-Blau */
#content .contenttable {
  background: #DDDDFF;
  /* Der Internet-Explorer braucht die Schrift hier noch mal. */
  font-family: Arial, Helvetica, sans-serif;
  font-size: 10pt;*/
  padding-bottom: 2ex;
  margin-bottom: 2ex;
}

/* Abweichung für Layout 1: Keine Hintergrundfarbe, nur Zeilenköpfe blau */
.contenttable-1 {
  background: transparent;
}
.contenttable-1 .tr-0 {
  background: #DDDDFF;
}

.csc-uploads-fileName {
  padding: 0 1em 0 1em;
}

.csc-uploads-fileSize {
  padding: 0 1em 0 1em;
}

/* Fuer Konzertkalender und Probentermine */
.konzerttitel {
  font-size: 13pt;
}

.abteilung {
  color: blue;
  background: #bbd760;
}

/* Ankündigung des nächsten Konzerts auf der Hauptseite. */
#content .naechstesKonzert {
  max-width: 20em;
  float: right;
  border: 1px solid;
  background: #c7d3eb;
  padding: 1ex;
  margin: 0 0 1ex 2em;
  clear: right;
}
#content .naechstesKonzert .ankuendigung {
  display: block;
  font-weight: bold;
  font-size: 12pt;
  margin-bottom: 0.5ex;
}
#content .naechstesKonzert .titel {
  display: block;
  font-size: 12pt;
  margin-bottom: 0.5ex;
}
#content .naechstesKonzert .zeit {
  display: block;
}
#content .naechstesKonzert .ort {
  display: block;
}
#content .naechstesKonzert .programm {
  display: block;
  margin-top: 0.5ex;
}
#content .naechstesKonzert .programm  .werk {
  display: block;
  text-indent: -1em;
  margin-left: 1em;
}

/* Ankündigung vor der Startseite */
#announcement {
  display: block;
  position: absolute;
  margin: 0; padding: 0;
  background: white;
  top: -60px; left: -150px;
  width: 120%;
  height: 500px;
  z-index: 1000;
  border: 1px solid black;
}

#announcement-decoration { 
  position: absolute;
  top: 0px;
  height: 86px;
  margin: 0; padding: 0;
  background-image:url("/fileadmin/oblin.gif"); background-repeat:repeat-x;
  width: 100%;
}

#announcement-decoration-text {
  position: absolute;
  top: 45px;
  left: 20px;
  font-size: 35px;
  font-weight: bold;
  margin-left: 10px;
}

#announcement-text {
  position: absolute; 
  top: 86px;
  left: 20px;
  margin-left: 10px;
  padding-top: 20px; /* Abstand zur Grafik */
  width: 700px;
}

#announcement-closer {
  position: absolute;
  bottom: 2ex;
  width: 100%;
}