/* FilterSurf-Homepage CSS */

/*
 * Seitenhintergrund in Grau
*/
body {
  font: 0.8em/1.2em Trebuchet MS, sans-serif;
  margin: 0;
  padding: 0;
  margin-bottom: 1em;
  background-color: #EEEEEE;
}

/*
 * allgemeine Klasse für markante TODO-Hervorhebungen
*/
.todo {
  color: red;
  font-weight: bold;
  width: 80%;
  padding: 1em;
  margin: 1em;
  text-align: center;
  border: 2px solid red;
}

/*
 * beliebiges unsichtbares Element
*/
.noshow {
  display: none;
}

/*
 * Links haben prinzipiell keine Unterstreichung
*/
a {
  color: #269A26; 
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: #9fcd9f; 
}

/*
 * small Text immer mit 115% Zeilenhöhe
*/
small {
  font-size: 90%;
  line-height: 115%;
}


/*
 * Text in TDs von Tabellen sollen grundsätzlich oben ausgerichtet werden.
*/
td {
  vertical-align: top;
}


/*
 * Die Outerbox sorgt dafür, dass  der Seiteninhalt zentriert erscheint
 * und einen weißen Hintegrund hat
*/
div.outerbox {
  max-width: 70em; /* Achtung! IE5/6 kann das nicht --> fs-ie.css */
  margin-left:auto; margin-right:auto;
  margin-top: 1em;  
  margin-bottom: 1em;
  border: 1px solid gray;
  background-color: white;
}

/*
 * Seitenkopf mit Grafik
*/
div.header {
  position: relative;
  width: 100%;
  height: 80px;
  border-bottom: 1px solid #CCCCCC; 
  padding: 0px;
  margin: 0px;
}

/*
 * Header-Bild, das am rechten Rand kleben soll
*/
div.header img.headerimg {
  float: right;
  margin: 0px;
  border: 0px;
  text-align: right;
}

div.header img.logoimg {
  position: relative;
  left: 13px;
  margin: 0px;
  border: 0;
  top: 5px;
}

/*
 * Header-Text, der links positioniert wird
*/
div.header div.text {
  position: absolute;
  top: 20px; 
  font-size: 40px; 
  line-height: 40px;
  font-weight: bold;
  margin-left: 120px;  
}


/*
 * Navibar unter dem Header, die die aktuelle Seitenposition anzeigt
*/
div.navibar {
  font-size: 12px;
  margin: 5px 0px 20px 5px;
}


/* enthält leftbox und Content 
 * relative Positionierung, damit container an der richtigen Stelle
 * (unter dem Header) beginnt und noch 20px nach unten versetzt wird
 *
 * Wichtig: position: relative *muss* angegeben werden, da defaultmäßig
 * position: static gilt; dann können für Kind-Elemente keine relativen /
 * absoluten Positionierungen mehr verwendet werden
 *
 * Früher: Durchsichtiger Border, damit auch der IE kapiert, wie weit nach unten
 * die Seite reicht (und der Footer noch angezeigt wird). Mittlerweile kümmert
 * sich der Footer selbst darum; darum ist der Border hier auskommentiert.
*/
div.container {
  /* border: 1px solid white; */
  position: relative;
  top: 10px;
}


/* Fakebox sorgt dafür, dass die Outerbox eine Mindestlänge hat, die ausreicht,
 * um das Menü in der Leftbox noch vollständig zu umrahmen. Da der IE kein
 * min-height unterstützt kommt hier eine "blinde" Box zum Einsatz, die nicht
 * angezeigt wird, jedoch der Outerbox hilft, die richtige Höhe zu finden.
 * Wenn genügend Text in einer Seite enthalten ist (in div.content), dann
 * stellt sich dieses Problem natürlich erst überhaupt nicht.
 *
 * Achtung: Die angegebene height muss in etwa der Höhe von div.leftbox
 * entsprechen (kann man mit dem DOM Inspector nachmessen); muss bei
 * Änderungen angepasst werden!
*/
div.fakebox {
  height: 590px;
  width: 1px;
  position: relative;
  float: left; 
}


/* In der Leftbox ist das Menü enthalten; kein float nötig (content verwendet
 * für die Ausrichtung ein padding-left).
 * Absolute Positionierung "relativ" zum div.container, damit der IE kein
 * Flatterlayout erzeugt (das wäre der Fall, wenn hier relative stünde)
*/
div.leftbox {
  z-index: 20;
  position: absolute;
  /*float: left;*/
  left: 10px;
  top: 0px;
}


/*
 * Enthält den eigentlichen Seiteninhalt
 * Relative Positionierung zum Container
 * Wichtig: Hier kein "left", sondern padding-left, da sonst der Inhalt
 * rechts um die angegebene Verschiebung aus dem Browserfenster herausragt!
*/
div.content {
  z-index: 10;
  font: 1.2em/1.5em Trebuchet MS, sans-serif;
  position: relative;
  padding-left: 235px;
  padding-right: 20px;
}

/*
 * Die rightbox sieht genauso aus wie ein Menükasten, wird jedoch am
 * rechten Seitenrand im Content eingeblendet.
 * Achtung: menu.css muss unbedingt geladen werden und die korrekte
 * Klasse ist dann class="menu rightbox"
*/
div.content div.rightbox {
  /* die Position-Angabe ist wichtig,
   * da der IE sonst Probleme mit display: block
   * hat und das führt zum Flackern des Mouseovers
   * bei den a.entry-Einträgen
  */
  position: relative;
  margin: 1em;
  margin-top: 0;
  float: right;
  font-size: 12px;
}

div.content div.rightbox a.entry {
  line-height: 15px;
  height: 15px;
}

/*
 * Hintergrundverlauf für Überschriften
*/
div.content div.heading {
  background: url(img/gradient.png);
  height: 30px;
  border: 1px solid #DDDDDD;
  margin-bottom: 1em;
}

/*
 * Große Überschrift (angepasst für div.heading)
*/
div.content div.heading h1 {
  margin: 0px;
  margin-top: 2px;
  margin-left: 5px;
  padding: 0px;
  line-height: 24px;
  font-size: 24px;
  font-weight: bold;
  color: white;
}

/*
 * Padding für H1-Überschrift (falls ein Heading-Icon angezeigt wird)
*/
div.content div.heading h1.paddedleft {
  padding-left: 130px;
}

/*
 * Icon für Überschriften
*/
div.content img.headingicon {
  position: absolute;
  top: -40px;
  width: 128px;
  height: 128px;
}

/*
 * Kleine Überschrift (für Zwischenüberschriften)
*/
div.content h2 {
  font-size: 1.2em; 
  line-height: 1.2em;
  margin-top: 2em;
  margin-bottom: 0.2em;
  color: #666666; 
}

div.content h3 {
  font-size: 1.0em;
  line-height: 1.0em;
  margin-top: 1em;
  margin-bottom: 0.2em;
  color: #666666;
  font-weight: bold;
}

/*
 * Absätze
*/
div.content p {
  margin-top: 0em;
}

div.content p.paddedleft {
  padding-left: 140px;
}

div.content p.error {
  color: red;
  font-weight: bold;
}

/*
 * News
*/

div.content table.news {
  font-size: 90%;
  line-height: 115%;
}


/*
 * Footer der Seite (mit Impressum und Copyright)
*/
div.content div.footer {
  border-top: 1px solid #888888;
  margin-top: 0.75em; 
  margin-bottom: 2em; 
  width: 100%;
  clear: both;
}

div.content div.footer td {
  color: #888888;
  font-size: 90%; 
}

/*
 * Links im Footer der Seite
*/
div.content div.footer a {
  color: #888888; 
  text-decoration: none;
}

div.content div.footer a:hover {
  color: #888888; 
  text-decoration: underline;
}