/*  =========================================================
Stylesheet für die Seiten des SV Burgwallbach"
Stand:  23.04.2009
Datei:  bildschirm.css
Media:  screen
Datum:  23.04.2009
Autor:  holmi
Aufbau  1. Kalibrierung und allgemeine Styles
        2. Styles für Layoutbereiche
        3. Sonstige Styles
========================================================== */

/* ======================================
   1. Kalibrierung und allgemeine Styles
   ====================================== */


/* Kalibrierung der wichtigsten Abstände */

* { padding: 0px; margin: 0px; }

h1, h2, h3, h4, p, ul, ol {
   padding: 0;
   margin: 0;
   }


/* Allgemeine Selektoren */

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

body {
  color: #000000;
  background-color: #C0C0C0;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 1.0em;
  }

h1 { font-size: 200%; }
h2 { font-size: 150%; }
h3 { font-size: 125%; }

/* Hyperlinks */
a {
  color: #2269C3;
  text-decoration: none;
  outline: none;
  }
a:link { color: #2269C3; }
a:visited { color: #2269C3; }
a:hover,
a:focus {
  color: #2269C3;
  border-bottom: 1px solid #2269C3;
}

a:active {
   color: white;
   background-color: #666666;
   }

/* Allgemeine Klassen und IDs */
.skiplink {
  position: absolute;
  left: -3000px;
  top: -2000px;
  width: 0px;
  height: 0px;
  overflow: hidden;
  display: inline;
  }

.bildlinks {
  float: left;
  padding: 3px;
  border-top: 3px solid #ccc;
  border-right: 3px solid #999999;
  border-bottom: 3px solid #999999;
  border-left: 3px solid #ccc;
  margin: 5px 5px 5px 10px;
}

.bildrechts {
  float: right;
  padding: 3px;
  border-top: 3px solid #ccc;
  border-right: 3px solid #999999;
  border-bottom: 3px solid #999999;
  border-left: 3px solid #ccc;
  margin: 5px 10px 5px 5px;
}


.clearing { clear: both; }

#logo {
  position: absolute;
  top: 10px;
  right: 30px;
  }


/* Elemente verstecken */
.versteckmich {
   position: absolute;
   left: -9999px;
   top: -9999px;
   display: inline;
   width: 0;
   height: 0;
}


/* ======================================
   2. Styles für Layoutbereiche
   ====================================== */


#wrapper {
  color: #000000;
  background-color: #ffffff;
  width: 1000px;
  margin: 10px auto;
  }

#kopfbereich {
  position: relative;
  background-color: #FFFF99;
  background: url(farbverlauf.gif) repeat-y top left;
  padding: 100px 0 0 0;
  margin: 0;
  }

  #kopfbereich p {
    position: absolute;
    top: 30px;
    left: 20px;
    color: white;
    padding: 0 30px 0 0;
    margin-bottom: 0px;
    }


/* ==============================================
   NAVIGATION
   ============================================== */

/* ==============================================
   01 Das umgebende DIV gestalten
   ============================================== */
#navibereich {
   overflow: hidden;
   color: black;
   background-color: #000000;
   padding: 5px 5px 5px 5px;
   border-top: 2px solid #ffffff;
   margin: 0;
}
/* Sternchen-Hack, hasLayout für IE5x. und 6 */
* html #navibereich { height: 1%; }

/* ==============================================
   02 Die ungeordnete Liste in Ebene 1 gestalten
   ============================================== */
#navibereich ul {
   margin: 0;
   }

#navibereich li {
   float: left;
   width: auto;
   background-color: #666666;
   list-style: none;
   border: 1px solid #C0C0C0;
   margin: 0 5px 0 0;
}
/* Liste in Ebene 2 clearen */
#navibereich li li {
   clear: both;
   border: none;
   margin-right: 0;
   }

/* ==============================================
   03 Die Hyperlinks in Ebene 1 gestalten
   ============================================== */
#navibereich a {
   display: block;
   background-color: #666666;
   color: #ffffff;
   padding: 6px;
   margin-right: 0px;
}


#navibereich a:hover,
#navibereich a:focus,
#startseite          #navi1 a,
#termine             #navi1 a,
#jugendturnier       #navi1 a,
#route               #navi1 a,
#wetter              #navi1 a,
#saison              #navi2 a,
#saison-1man         #navi2 a,
#saison-2man         #navi2 a,
#saison-alte-herren  #navi2 a,
#saison-jugend       #navi2 a,
#team                #navi3 a,
#team-1man           #navi3 a,
#team-2man           #navi3 a,
#team-alte-herren    #navi3 a,
#team-jugend         #navi3 a,
#gymnastik           #navi4 a,
#gymnastik-aktuelles #navi4 a,
#gymnastikgruppe     #navi4 a,
#der-svb             #navi5 a,
#svb-ehrenmtgl       #navi5 a,
#svb-geschichte      #navi5 a,
#svb-mitglieder      #navi5 a,
#svb-vorsitzender    #navi5 a,
#svb-vorstandschaft  #navi5 a {
   color: #ffffff;
   background-color: #999999;
   border-bottom: none;
}

/* Spezifität auf > 225 erhöhen (ist so 312)*/
#wrapper #navibereich #ebene1 a:active {
   color: #ffffff;
   background-color: #999999;
}

/* ==============================================
   04 Ebene 2 verstecken
   ============================================== */
#navibereich li ul {
   position: absolute;
   left: -9999px;
   top: -9999px;
   display: inline;
   width: 0;
   height: 0;
   background-color: transparent;
}

/* ==============================================
   05 Ebene 2 sichtbar machen
   ============================================== */
#navibereich li:hover ul,
#navibereich li.sfhover ul {
   left: auto;
   top: auto;
   display: block;
   width: auto;
   height: auto;
   background-color: #999999;
   border: 1px solid #000000;
   border-bottom: 2px solid #000000;
   margin-top: 1px;
   margin-left: -2px;
}

/* ==============================================
   06 Die Rausklappliste korrekt einfärben
   ============================================== */
/* Spezifität 214 */
#navibereich ul#ebene1 ul.ebene2 li a {
   background-color: #999999;
   width: 9em;
   padding-right: 0;
   border-bottom: 1px solid #000000;
   margin-right: 0;
}

/* Spezifität 224 */
#navibereich ul#ebene1 ul.ebene2 li a:hover {
   background-color: #666666;
}

/* ==============================================
   07 Schönheitsreparaturen
   a) Kopfbereich padding-bottom 10px (in bildschirm.css)
   b) Spezifität für :active auf 312 erhöhen (Zeile 57)
   c) width für Links in Ebene 2
      (ohne schrumpft das Rausklappmenü im IE7)
   ============================================== */
/* 07c - width für die Hyperlinks in Ebene 2 */
#navibereich li li a {
   width: 9em;
}

#naviort {
   position: absolute;
   top: 116px;
   left: 500px;
   color: #ffffff;
   margin-top: 8px;
   margin-left: 150px;
}

#naviort a {
   color: #ffffff;
}

/* ==============================================
   Textbereich
   ============================================== */


#textbereich {
  min-height: 610px;
  background-color: #ffffff;
  padding: 10px;
  border-left: 1px solid #000000;
  border-right: 1px solid #000000;
  }


/* ==============================================
   Fußbereich
   ============================================== */


#fussbereich {
  clear: both;
  position: relative;
  background: url(farbverlauf.gif) repeat-y top left;
  text-align: center;
  padding: 10px;
  margin-top: 0px;
  }

  #fussbereich ul { margin-bottom: 0; }

  #fussbereich li {
    display: inline;
    text-decoration: none;
    padding: 0 10px;
    }

  #fussbereich a {
    text-decoration: none;
    color: #ffffff;
    border-bottom: 0px;
    }

  #fussbereich a:hover,
  #fussbereich a:focus,
  #fussbereich a:active,
  #impressum #imp a,
  #kontakt #kon a {
    text-decoration: none;
    color: red;
    }

  #fussbereich p {
    position: absolute;
    right: 5px;
    bottom: 10px;
    padding: 0;
    margin: 0;
  }

/* ======================================
   3. Sonstige Styles
   ====================================== */


.schrift20em { font-size: 2em; }