html {
  background-color: white;
  background-image: url("./graphics/bg-sidebar.gif");
  background-repeat: repeat-y;
}

body {
  margin: 0;
  padding: 0;
  background-image: url("./graphics/bg-sidebar.gif");
  background-repeat: repeat-y;
  background-color: white;
  position: relative;
  font-family: Verdana, Arial, sans-serif;
  font-size: 12px;
}

a {
  color: #e00;
  text-decoration: none;
  font-weight: normal;
}

a:hover {
  text-decoration: underline;
}

a img {
  border: none;
}

a[type^="audio"]:before {
  content: url("graphics/audio-link.gif");
  display: inline;
  margin-right: .6em;
}

br.clear { clear: both; }

strong { color: #444; font-weight: bold; }


p, ul, ol, table {
  margin: .8em 0;
}

ul {
  padding-left: 2.5em;
}

h1, h2, h3, h4, h5, h6 {
  color: #444; 
}

h1 { font-size: 175%; }
h2 { font-size: 150%; }
h3 { font-size: 140%; }
h4 { font-size: 120%; }
h5 { font-size: 110%; }
h6 { font-size: 100%; }

h1 {
  margin: 0;
  clear: left;
}

h2.clear { clear: both; }

h2.untertitel {
  margin: 0;
  font-size: 110%;
  font-style: italic;
}

h1 + div, h1 + h2.untertitel + div { 
  margin-top: 1.5em;
}

h2 { margin-bottom: .3em; }

h3, h4 { margin-bottom: .8em; }

h4 { margin-bottom: 0; }
h4 ~ p { margin-top: 0.2em; }

h2.invert { color: #fff; background-color: #555; padding: .1em .2em; }

h2.audio:after {  
  content: url("graphics/lautsprecher.gif");
  margin-left: .5em;
}

hr { display: none; }

.warnung {
  color: #e00;
  background-color: #fff;
  font-weight: bold;
}

/*
   +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
   SEITENKOPF: #head
   +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
   Der Seitenkopf enthaelt das StattReisen-Logo (mit alternativem
   Text) sowie die Links zu den Berlin- und Studienreisen-Seiten.
   +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/

#head {
  background-color: #e00;
  height: 60px;
  position: relative;
  background-image: url("./graphics/dot-999999.gif");
  background-repeat: repeat-x;
  background-position: left bottom;
}

#head a.logo {
  width: 180px;
  height: 48px;
  background-color: white;
  background-image: url("./graphics/logo.gif");
  background-repeat: no-repeat;
  background-position: 12px 8px;
  position: absolute;
  bottom: 0;
  left: 10px;
  -moz-border-radius: .8em .8em 0 0;
  -webkit-border-radius: .8em .8em 0 0;
}

#head a.logo strong {
  display: none;
}

/* Tabs */

#head em {
  display: block;
  width: auto;
  position: absolute;
  bottom: 0;
  left: 205px;
  color: white;
  font-size: normal;
  font-weight: bold;
  font-style: normal;
  border: none;
  width: auto;
  border-spacing: 1px 0px;
}

#head em a {
  display: block;
  float: left;
  margin: 0px;
  margin-right: 1px;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  border-bottom: 1px solid #999;
  background: transparent url("./graphics/bg-tabs.gif") 100% 0px no-repeat;
}

#head em a b {
  display: block;
  margin-right: 8px;
  padding: 3px 0px 3px 8px;
  background: transparent url("./graphics/bg-tabs.gif") 0px 0px no-repeat;
}

#head em a:hover {
  color: #fff;
  text-decoration: none;
  background: transparent url("./graphics/bg-tabs.gif") 100% -280px no-repeat;
}

#head em a:hover b {
  background: transparent url("./graphics/bg-tabs.gif") 0px -280px no-repeat;
}

#head em a.active {
  color: #fff;
  border-color: #666;
  background: transparent url("./graphics/bg-tabs.gif") 100% -140px no-repeat;
}

#head em a.active b {
  background: transparent url("./graphics/bg-tabs.gif") 0px -140px no-repeat;
}

#head em a.active:hover {
  background-color: #666;
  border-color: #666;
  background: transparent url("./graphics/bg-tabs.gif") 100% -140px no-repeat;
}

#head em a.active:hover b {
  background: transparent url("./graphics/bg-tabs.gif") 0px -140px no-repeat;
}


/*
   +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
   HORIZONTALE NAVIGATION: #topbar
   +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/

#topbar {
  margin-left: 200px;
  background-color: #666;
  color: #fff;
  border-top: 0px solid #999;
}

#topbar ul {
  display: block;
  float: right;
  list-style-type: none;
  padding: 0;
  margin: 0;
  margin-right: 210px;
  margin-right: 1em;
  border-top: 0px solid white;
  border-right: 1px solid white;
}

#topbar ul li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

#topbar ul li a {
  display: block;
  padding: 3px .5em;
  border-left: 1px solid white;
  background-color: #666;
  color: #fff;
  font-weight: normal;
  font-size: 90%;
  text-decoration: none;
  position: relative;
}

#topbar ul li a:hover {
  background-color: #888;
  color: #fff;
}

#topbar ul li a.active,
#topbar ul li a.active:hover {
  background-color: #fff;
  color: #666;
}

/*
   +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
   VERTIKALE NAVIGATION: #sidebar
   +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/

#sidebar {
  display: block;
  position: absolute;
  left: 0px;
  top: 60px;
  width:200px;
}

#leftnav {
  border-left: 10px solid #666;
  border-right: 10px solid #666;
  border-bottom: 10px solid #666;
  padding-top: 1.5em;
  background-color: #fff;
  -moz-border-radius: 0 0 .8em .8em;
  -webkit-border-radius: 0 0 .8em .8em;
}


#leftnav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#leftnav ul li {
  display: block;
  padding: 0;
  margin: 0;
  border: 1px solid white;
  border-top: none;
}

#leftnav ul li a {
  /* position and width are essential for IE */
  position: relative;
  border: 0px solid red;
/*
  width: 172px;
*/

  display: block;
  padding: 2px 4px;
  color: #444;
  font-weight: normal;
  font-size: 90%;
  text-decoration: none;
}

#leftnav ul li a.active,
#leftnav ul li a.active:hover {
  background-color: #666;
  color: #fff;
  font-weight: normal;
}

#leftnav ul li a:hover {
  background-color: #888;
  color: #fff;
}


#leftnav div {
  border-top: 1px dotted #666;
  padding-top: 1px;
}

/* stupid IE knows no dotted */
* html #leftnav div {
  background-image: url("./graphics/dotted-666666.gif");
  background-repeat: repeat-x;
  padding-top: 2px;
  border-top: none;
  width: 100%;
}

#footer {
  margin-left: 200px;
  padding: 0 1em;
  padding-bottom: 1em; /* IE ignores margin at page end */
  padding-top: 1px; /* otherwise IE won't display the border */
  clear: both;
  text-align: left;
  color: #555;
}

#footer p {
  font-size: 90%;
  margin: 0;
  padding-top: .4em;
}

#footer p.copyright {
  border-top: 1px dotted #555;
}

#footer p.fusstext {
  font-size: smaller;
}

#footer.two-cols {
  padding-right: 210px;
}


/*
   +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
   CONTENT: #content
   +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/

#content {
  position: relative;
  margin-left: 200px;
  padding-top: 1.5em;
  padding-left: 1em;
  padding-right: 1em;
  min-width: 400px;
  margin-bottom: 2em;
}

#content.two-cols {
  padding-right: 210px;
}

#content.two-cols #main {
  width: 100%; /* IE sucks */
}

#main {
  width: 100%; /* IE sucks */
}

#content.two-cols #right {
  display: block;
  margin-top: 1.5em;
  margin-right: 1em;
}

#right {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 180px;
}

#right .infobox {
  color: #000;
  background-color: #fff;
  border: 1px solid #666;
  font-size: 90%;
  font-weight: normal;
  padding: 0;
  margin: 0;
  margin-bottom: 1em;
  font-size: 90%;
  -moz-border-radius: .9em .9em .8em .8em;
  -webkit-border-radius: .9em .9em .8em .8em;
}

#right .infobox h2 {
  font-size: 100%;
  font-weight: normal;
  color: #fff;
  background-color: #666;
  margin: 0;
  padding: 3px;
  padding-left: 5px;
  -moz-border-radius: .8em .8em 0 0;
  -webkit-border-radius: .8em .8em 0 0;
}

#right .infobox p {
  margin: 0;
  padding: 3px;
}


#right div.reisefuehrer {
  width: 180px;
  margin: 2em 0;
  text-align: center;
}

#right div.reisefuehrer h2 {
  font-size: 90%;
  font-weight: normal;
}

#right div.reisefuehrer img {
  width: 85px;
}

/* Fotos mit Bildunterschrift und Zoom onmouseover */

#right .fotobox {
  border: none;
  text-align: left;
  font-size: 90%;
  color: #fff;
  background-color: #666;
  margin-bottom: 1em;
  width: 100%;
  position: relative;
  background-image: url("./graphics/lupe-fff.gif");
  background-repeat: no-repeat;
  background-position: 97% 97%;
}

#right .fotobox p {
  margin: 0;
  padding: 3px;
  padding-right: 16px; /* platz fuer lupe */
}

#right .fotobox img,
#right .fotobox img.thumb {
  display: block;
  width: 178px;
  border: 1px solid #666;
  position: relative;
}

/* In einer perfekten, IE-freien Welt wuerde es der auskommentierte
Selector tun. Da der IE das aber nicht kann, setzen wir die
'zoom'-Klasse per Javascript. */
/* #right .fotobox:hover img */
#right .fotobox img.zoom {
  width: auto;
  border: 1px solid #666;
  position: absolute;
  right: 0px;
  top: 0px;
  z-index: 99;
}

div.left-advert {
  margin: 10px;
  display: block;
}

div.left-advert h2 {
  color: #fff;
  font-size: 100%;
  text-align: center;
}

div.left-advert p {
  border: 0px solid #666;
  color: #444;
  background-color: #fff;
  font-size: 90%;
  padding: 3px;
  text-align: center;
  -moz-border-radius: .8em;
  -webkit-border-radius: .8em;
}

div#partner.left-advert p a {
  display: block;
  font-weight: bold;
}

#adsense {
  padding: 0 1em;
  margin-left: 200px;
  margin-bottom: 1em;
}

#adsense object,
#adsense iframe {
  width: 728px;
  height: 15px;
}

div.ads {
  margin: 3em 0;
  font-size: 10px;
  padding-bottom: 1em;
}

div.ads iframe,
div.ads div,
div.ads > p,
div.ads > a {
  margin: .5em;
}

#right div.ads {
  text-align: center;
}

div.ads iframe.amazon {
  border: none;
  overflow: hidden;
  width: 120px;
  height: 240px;
}

/*
   +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
   OME stuff
   +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/

div.foto {
  text-align: left;
  margin-top: 0em;
}

div.foto.rechts {
  float: right;
  padding: 0 0 .2em 1em;
}

div.foto.links {
  float: left;
  padding: 0 1em .2em 0;
}

div.foto img {
  display: block;
  margin-bottom: 0;
  border: none;
}

div.foto.rahmen img {
  border: 1px solid #555;
}

div.foto p {
  margin: 0;
  padding: .3em 0;
  color: #444;
  background-color: transparent;
  font-size: 90%;
}

div.foto.invers p {
  color: white;
  background-color: #555;
  padding: 3px;
}

span.bildautor {
  display: block;
}

.kasten {
  border: 1px solid #555;
  padding: 6px;
  margin: 1em 0;
}

/* TABELLEN */

table {
  border: none;
  border-spacing: 0;
  border-collapse: collapse;
}

table th, table td {
  padding: 4px;
  text-align: left;
  vertical-align: top;
}

td > *:first-child, th > *:first-child {
  margin-top: 0;
}

td > *:last-child, th > *:last-child {
  margin-bottom: 0;
}

table.anderswo {
  border-top: 1px solid #555;
}

table.anderswo th {
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid #555;
  font-weight: bold;
  font-size: 110%;
  color: #444;
  padding: .3em;
  padding-right: 1em;
}

table.anderswo td {
  vertical-align: top;
  border-bottom: 1px solid #555;
  padding-right: .3em;
}

table.termine th {
  border-bottom: 2px solid #e00;
  color: #444;
}

table.termine td {
  border-bottom: 1px solid #555;
}

table.kombis {
  width: 100%;
}

table.kombis td {
  border-bottom: 1px solid #555;
}

table.kombis th  /* Kombitypen (2er, 3er ...) */ {
  color: #fff;
  font-weight: bold;
  background-color: #e00;
  border-top: 10px solid #fff;
}

table.termine tr:hover td,
table.kombis tr:hover td {
  background-color: #ccc;
}

/* Anmeldung */
table.termine td.anmeldung em,
table.termine td.anmeldung a {
  font-size: 80%;
  font-weight: normal;
  font-style: normal;
  width: auto;
}

table.termine td.anmeldung em {
  color: #999;
}

table.termine tr:hover td.anmeldung em {
  color: #666;
}

/* Kontakt */

table.kontakt {
  border: none;
  border-spacing: 0;
}

table.kontakt th, table.kontakt td {
  padding: 0;
  vertical-align: top;
  text-align: left;
}

table.kontakt th { color: #444; }

table.kontakt thead th {
  border-bottom: 2px solid #e00;
  font-size: 110%;
  padding-bottom: .1em;
}

table.kontakt tbody th,
table.kontakt tbody td {
  padding: .3em 2em .3em 0;
  border-bottom: 1px solid #555;
}

/* Studienreisen-Programm */

table.programm { border-spacing: 0; }

table.programm tr {
  vertical-align: top;
}

table.programm th {
  text-align: right;
  padding-right: 1em;
  color: #444;
  white-space: nowrap;
}

table.programm  th,
table.programm  td {
  padding: .3em 1em .3em 0;
}

table.programm tbody > tr:first-child th,
table.programm tbody > tr:first-child td {
  border-top: 1px solid #555;
}
table.programm tbody:first-child > tr th,
table.programm tbody:first-child > tr td {
  border-top: none;
}

table.programm td ul { margin-top: 0; }
table.programm td em { display: block; margin-bottom: 0.5em; }


/* Galerie: thumbnails */

div.galerie-toc {
  clear: right;
  width: 700px;
  margin: auto;
}

div.galerie-toc div {
  width: 202px;
  height: 200px;
  float: left;
  margin: 10px;
}

div.galerie-toc div p {
  margin: 0;
  margin-bottom: .2em;
}

div.galerie-toc div a {
  display: block;
  width: 200px;
  border: 1px solid #555;
  overflow: hidden;
}

div.galerie-toc div p a {
  display: inline;
  border: none;
}

div.galerie-toc div a ~ p {
  font-size: 80%;
  margin-top: .5em;
}

div.galerie-toc div a img {
  display: block;
  border: none;
  min-width: 200px;
}

div.galerie-vollbild {
  clear: right;
  text-align: center;
}

table.galerie {
  margin: 2em auto;
}

table.thumbnails {
  margin: 1em auto;
}

table.thumbnails td {
  padding: 6px;
}

table.thumbnails img {
  border: 1px solid #555;
}

img.foto, img.thumbnail {
  border: 1px solid #555;
}

/* Übersicht Studienreisen */

table.reisetoc {
  border: none;
  border-collapse: collapse;
  border-spacing: 0;
}

table.reisetoc th {
  color: #555;
  text-align: right;
  vertical-align: top;
  font-weight: bold;
  font-size: 105%;
  padding: .8em .5em 0 0;
  white-space: nowrap;
  border-top: 1px solid #666;
}

table.reisetoc td {
  padding: .8em 2em 1em 0;
  border-top: 1px solid #666;
}

table.reisetoc td h3 {
  margin: 0;
  font-size: 100%;
  font-weight: bold;
  margin-top: 0px;
  margin-bottom: .2em;
}

table.reisetoc td h3 a {
  font-weight: bold;
}

table.reisetoc td p {
  margin-top: 0px;
  margin-bottom: .7em;
}

.tourenuebersicht dl dt {
  color: #444;
  font-weight: bold;
  font-size: 115%;
  margin-bottom: .5em;
  padding-bottom: .2em;
  border-bottom: 2px solid #444;
}

.tourenuebersicht dl dl dt {
  border: none;
  margin: .5em 0 0 0;
  padding: 0;
}

.tourenuebersicht dl dd {
  margin: .2em 0 .2em 2em;
}

.tourenuebersicht dl dd.offen a {
  font-weight: bold;
}

div#tourenbeschreibung + * {
  clear: both;
}

table.tourdaten {
  border: none;
}

table.tourdaten td,
table.tourdaten th {
  vertical-align: top;
  border: 1px solid #666;
  padding: .3em;
}

table.tourdaten th {
  padding: .3em;
  font-weight: normal;
  text-align: left;
  color: #fff;
  background-color: #666;
  border-bottom: 1px solid white;
}

table.tourdaten tr:last-child th {
  border-bottom: 1px solid #666;
}

div.zusatzinfo {
  margin: 1.5em 0;
}

/* "Neu" in Tourenueberschriften */
h1.tourtitel strong {
  color: #e00;
  font-style: italic;
  font-weight: bold;
}

/* FORMULARE */

fieldset {
  border: 1px solid #555;
  margin-bottom: 1em;
  padding: 8px;
}

legend {
  color: #fff;
  background-color: #555;
  font-weight: bold;
  padding: .1em .5em;
}


fieldset table { margin: 0; }
fieldset table th { font-weight: normal; }

div.control { margin: .4em 0; }

div.control.error label, tr.control.error th { color: red; }

fieldset { width: 80% }

fieldset fieldset { margin-top: 1em; border-style: dotted;  width: auto; }

/* Hauptfehlermeldung */
p.formerror strong { color: red; }

fieldset.control.error p  { margin: .2em 0; }
fieldset.control.error p strong { font-weight: normal; color: red; }


table.formular-vorschau {
  border: 1px solid #555;
  cell-spacing: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

table.formular-vorschau tr {
  vertical-align: top;
  text-align: left;
}

table.formular-vorschau th {
  border-top: 1px solid #555;
  color: #555;
  padding: 2px;
}

table.formular-vorschau td {
  border: 1px solid #555;
  padding: 2px;
}


/* Styles für Homepage */

div.intro {
  border: 0px dotted green;
  border-bottom: 1px dotted white; /* Mozilla 1.4  */
  margin-bottom: 2em;
}

div.intro p { text-align: left; margin: 1em 0; }
div.intro img { float: right; border: 1px solid #666; margin-top: 0em; }
div.intro h2, div.intro p { padding-right: 220px; }
div.intro h2 a { color: #444; font-weight: bold; }


/* Partnerliste */

div.partnerliste { margin-top: 2em; }

div.partnerliste div {
  border: 0px dotted #888;
  padding: 0em;
  margin: .5em;
  width: 30%;
  height: 170px;
  overflow: hidden;
  float: left;
}

div.partnerliste div img {
  display: block;
  margin-top: 1em;
}

div.partnerkategorien {
  clear: both;
}

div.partnerkategorien h3:target {
  padding-bottom: .2em;
  border-bottom: 2px solid #666;
}

/* Monatsauswahl fuer Terminkalender Stadtfuehrungen */

form#monatsmenue {
  float: right;
  margin-top: 1.5em;
  display: block;
}

/* Studienreisen Startseite */
table#reisen-start { text-align: center; margin-top: 1.5em; }
table#reisen-start td { width: 12%; text-align: center; vertical-align: middle; padding: 2px; }
table#reisen-start td strong {  text-transform: uppercase; }
table#reisen-start td em {  font-weight: bold; font-style: italics; color: #444; }


table.berlin-team { width: 100%; border: none; }
table.berlin-team div.foto { margin-right: 1em; }
table.berlin-team div.foto p { margin-right: -1em; }

div.berlin-team div.foto.links {
  margin: 1em 5% 0 0;
  height: 170px;
}

div.berlin-team div.foto p { margin-right: -1em; }


/* studienreisen/reisefuehrer.html */

ul.reisefuehrer {
  list-style-type: none;
  padding: 0;
  margin: 1em 0;
}

ul.reisefuehrer li {
  display: block;
  float: left;
  margin: 0 1em 1em 0;
}

div.team-ges p {
  mmin-height: 24em;
  width: 45%;
  margin: 1em 2em 1em 0;
  cclear: both;
  float: left;
}

div.team-ges p img {
  float: right;
  margin: .2em 0 .5em .5em;
  border: 1px solid #666;
}

div.team-office p {
  mmin-height: 24em;
  width: 29%;
  margin: 1em 2em 1em 0;
  cclear: both;
  float: left;
}

div.team-office p img {
  float: right;
  margin: .2em 0 .5em .5em;
  border: 1px solid #666;
}

div.ome-start {
  margin: 1.5em 0;
  text-align: center;
}

div.ome-start img {
  display: inline-block;
  margin-right: 5px;
  border: 1px solid #555;
}

#right .infobox.reisen {
  padding-bottom: 1em;
  text-align: left;
}

#right .infobox.reisen h2 {
  margin-bottom: 1em;
}

#right .infobox.reisen h3 {
  font-size: 100%;
  font-weight: bold;
  padding: 0 .5em;
  margin-top: 3px;
  margin-bottom: .1em;
}

#right .infobox.reisen ul {
  margin: 0;
  padding: 0;
  margin-bottom: 4px;
}

#right .infobox.reisen li {
  margin: 0;
  padding: 0;
  padding: 0 1.5em;
  list-style-type: none;
}

#right .logo {
  text-align: center;
}

div.start { width: 800px; }

div.start div.spalte {
  width: 320px;
  float: left;
  margin: 0 5%;
}

table.programm td li.eiserner-vorhang {
  position: relative;
  padding-right: 50px;
}

table.programm td li.eiserner-vorhang a {
  position: absolute;
  bottom: 0px;
  right: 0px;
}