/*******************************************************************************
 * filename: ttv_style.css
 * author:   Sebastian Mayer
 * description:
 *  Formatangaben, die das Layout der TTV Homepage festlegen
 *  und Formatangaben, die allgemein für Textelemente gelten
 *******************************************************************************
 */  
 
 
/*******************************************************************************
 * Allgemeine Formatangaben für Textelemente. Gelten, solange sie nicht an
 * anderer Stellen spezialisiert oder überschrieben werden.
 *******************************************************************************
 */

/* Standardformatierung von Schrift */ 
body {
  font-family: Verdana, Helvetica;
  font-size: 12px;
  color: #000000;
}

/* Standardformatierung von Lins */
a,a:link,a:active,a:visited,a:hover {
  color: #006699; /* #7FB2CC */
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* Standardformatierung für Überschriften als Gestaltungselement.
 * Diese Überschriften sind nicht als Überschriften in Artikeln gedacht.
 * Entsprechende Formatierung dafür finden sich in der ttv_style_page.css.
 */
h1 {
  font-family: Arial, Helvetica;
  font-size: 20px;
  letter-spacing: 0.2em;
  text-align: center;

  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;

  margin-bottom: 30px;
  padding-top: 3px;
  padding-bottom: 3px;  
  
  /* background: url(../gfx/headline.png) no-repeat; */

}

h2 {
  font-family: Arial, Helvetica;
  font-size: 14px;
  letter-spacing: 0.0em;
  text-align: left;
  
  /* background: url(../gfx/black_dot.png) repeat-x center; */
}

h2.bullet {     /* weniger Abstand zum nachfolgenden Element */ 
  font-size: 14px;
  text-align: left;
  letter-spacing: 0.0em;

  border: 0px;
  
  margin: 0px;
  margin-bottom: 10px;
  padding-left: 20px;
  
  background: url(../gfx/listItem2.png) no-repeat;
  background-position: left center;
}

h3 {
  font-family: Arial, Helvetica;
  font-size: 14px;

  margin: 0px;
  margin-bottom: 6px;
  padding-bottom: 2px;
  padding-left: 1px;
  
  border-bottom: 1px solid #000000;
}


/* Absatz- und Blockelemente, die auf der gesamten Homepage
 * zum Einsatz kommen.
 */
.indented { /* eingerückter Absatz */
  padding-left: 10px;
  margin-bottom: 15px;
}

.bookstyle { /* Absatz mit eingerückter erster Zeile */
  text-indent: 0.5cm;
  margin: 0px;
}


/*******************************************************************************
 * Werbeblöcke
 *******************************************************************************
 */
#ads1 { /* Werbeblock oben mitte */
 text-align: center;
 margin-left: 5px;
 margin-right: 5px;
 margin-bottom: 15px;
}

#ads2 { /* Werbeblock rechts */
 margin-top: 15px;
}

#ads3 { /* Werbeblock links */
 padding-top: 15px;
 background: #FFFFFF;
} 

.adsLabel {
 font-size: 10px;
 color: #666666;
 padding-left: 10px;
 text-align: left;
}

/*******************************************************************************
 * Profiltabellen
 *******************************************************************************
 */

table.profile {
 border-top: 1px solid #f0f0f0;
 border-bottom: 1px solid #f0f0f0;
 margin-left: 10px;
 margin-bottom: 20px;
 padding: 0px;
 width: 80%;
}

table.profile td {
 vertical-align: top;
 
}

td.profile_picture {
 padding: 0px;
}

td.profile_name {
 font-size: 14px;

 height: 20px;
 width: 100%;

 padding-left: 5px;

 background-color: #f0f0f0;

}

td.profile_text {
 padding-left: 5px;
}


/*******************************************************************************
 * Layout: Positionierung der gesamten Seite
 *******************************************************************************
 */ 

body {
  text-align: center; /* sorgt dafür, dass der page container zentriert wird */
  background: #FFFFFF;
}

/* Page-Container, umgibt alle anderen Strukturelemente */
#page {
  
  width: 910px;
  margin: 5px auto; /* 5px Abstand nach oben und unten, Abstand nach lins und
                     * rechts wird automatisch festgelegt */
  text-align: left; /* Elemente im Container werden linksbündig dargestellt */
}


/*******************************************************************************
 * Layout: Top-Navigation (für Interessierte)
 *******************************************************************************
 */ 

#topnav { /* Container, der die Elemente der Top-Navigation umgibt */
  text-transform: uppercase; /* alles wird groß geschrieben */
  
  border: 1px solid #666666;
  border-width: 1px 0px; /* kein Rand links und rechts */
  
  width: 890px; /* reale Breite: width + padding-left + padding-right = 910px */
  height: 10px;
  margin: 5px 0px; /* 5px Abstand nach oben und unten */
  
  padding: 10px; /* 10px Abstand der inneren Elemente zum Rand von #topnav */
}

#topnav ul {
  margin: 0px;
  padding: 0px;
  
  list-style-type: none; /* kein Symbol vor Listeneinträgen */
  
}

#topnav li {
  font-size: 10px;
  color: #000000;
  
  padding-left: 8px;
  padding-right: 8px;
  
  float: left;
}

#topnav a,#topnav a:link,#topnav a:active,#topnav a:visited,#topnav a:hover {
  color: #000000;
  text-decoration: none;
}

#topnav a:hover {
  text-decoration: underline;
}

#topnav span.ttvpres { /* Textelement "Der TTV präsentiert" */
  font-size: 8px;
  color: #A0A0A0;
  
  float: left;  /* nächstes Element (ul-Liste mit Top-Navigations-Einträgen)
                 * wird links vom Textblock dargestellt */ 
  
  margin-right: 86px; /* Abstand zur Liste */
}

#topnav span.login { /* Textelement für Login/Logout-Button */
  display: block; /* macht das Element zum Block, der den Platz zwischen Liste
                   * und rechtem #topnav-Rand ausfüllt */
  clear: none;    /* durch #ttvpress eingeleiteter Linksumfluss wird bebehalten */

  text-align: right; /* Text erscheint rechtsbündig */
  font-size: 10px;
}


/*******************************************************************************
 * Layout: Left-Navigation (für Vereinsmitglieder)
 *******************************************************************************
 */ 

#leftnav { /* Container, der die Elemente der Left-Navigation umgibt */
  float: left; /* sorgt dafür, dass der content-Container links neben der
                * Left-Navigation angezeigt wird */
  width: 178px;

  margin-bottom: 5px;

  background: url(../gfx/nav1_bg.png) repeat-y; /* Hintergrund der linken
    * Navigation. Die abgerundeten Ecken müssen durch zwei Graphiken, die per
    * HTML in das Dokument eingefügt werden realisiert werden */
} 

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

#leftnav li { /* erste Navigationsstufe */
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  color: #FFFF00;
  
  padding: 2px;
  padding-left: 14px; 
}

#leftnav li.level2 { /* zweite Navigationsstufe */
  padding-left: 27px;
}
#leftnav li.level3 { /* dritte Navigationsstufe */
  padding-left: 40px;
}

#leftnav .listSymbol {
  font-weight: bold;
  color: #FFFF00;
  
  margin-right: 4px; /* Abstand zum Listeneintragstext */
}

#leftnav a,#leftnav a:link,#leftnav a:active,#leftnav a:visited,#leftnav a:hover {
  color: #000000;
  text-decoration: none;
}
#leftnav a:hover {
  text-decoration: underline;
}

#leftnav a.nav_on,#leftnav a:link.nav_on,#leftnav a:active.nav_on,#leftnav a:visited.nav_on,#leftnav a:hover.nav_on {
  
  color: #000000;
  text-decoration: underline;
}


/*******************************************************************************
 * Layout: Seiteninhalt
 *******************************************************************************
 */
 
.narrowcolumn { /* schmale Inhaltsspalte */

  width: 490px;
}

.widecolumn {   /* breite Inhaltsspalte */

  width: 700px;
}

#content { /* Container, der den eigentlichen Seiteninhalt umgibt */

  line-height: 150%; /* 1,5-fache Zeilengröße */
  
  float: left; /* sorgt dafür, dass ggf. der Terminschnellzugriff links
                * neben dem Inhalt dargestellt wird */
  margin-left: 10px;
  padding: 10px;
}


/*******************************************************************************
 * Layout: Bottom-Navigation bzw. Impressum & Haftungsausschluss
 *******************************************************************************
 */

#bottomnav {
  
  clear: both; /* vorherige Links- und Rechtsumflüsse werden aufgehoben */
  
  font-size: 10px;
  color: #A0A0A0;
  text-align: right;
  
  border: 1px solid #666666; /* links und rechts kein Rand */
  border-width: 1px 0px;
  
  width: 895px; /* reale Breite: width + padding-left + padding-right = 910px */
  margin: 5px 0px; /* 5px Abstand nach oben und unten */
  
  padding: 5px;
  padding-right: 10px;
}

/*******************************************************************************
 * Newsartikel
 *******************************************************************************
 */

.newsarticle {
 padding-top: 15px;
 margin-bottom: 15px;
 border-top: 1px solid #000000;
}

#firstArticle {
 padding-top: 0px;
 border-top: 0px;
}

.newsarticle h1 {
 font-family: Arial;
 font-size: 18px;
 font-color: #000000;
 font-weight: bold;
 text-align: left;
 letter-spacing: 0.0em;
 
 margin: 0px;
 padding: 0px;
 border: 0px;
}

.newsarticle strong {
 font-weight: bold;
 font-size: 12px;
}

.newsarticle small {
 color:#7FB2CC;
 font-size:10px;
}

/*******************************************************************************
 * Layout: Spezialnavigation
 *******************************************************************************
 */
#specialnav {
   float: left; 
   width: 180px;
   margin-left: 20px;
   padding-top: 15px;
}

#specialnav b {
  font-size: 10px;
  color: #006699;

  margin-bottom: 2px;
}

#specialnav a,#specialnavs a:link,#specialnavs a:active,#specialnav a:visited,#specialnav a:hover {
  color: #000000; 
}

/*******************************************************************************
 * Layout: Terminschnellzugriff
 *******************************************************************************
 */

#jahrestermine {
 margin-top: 10px;
 margin-bottom: 10px;

 font-size: 11px;
}

#jahrestermine a {
 font-weight: bold;
}
 
 #dates {
   float: left; 
   width: 180px;
   margin-left: 20px;
   padding-top: 15px;
}

#dates .date {
  font-size: 11px;
  
  margin-bottom: 14px;
  padding-left: 2px;

  
  background: url(../gfx/le_gelb2.png) no-repeat;
}

#dates b {
  font-size: 10px;
  color: #006699;

  margin-bottom: 2px;
}

#dates a,#dates a:link,#dates a:active,#dates a:visited,#dates a:hover {
  color: #000000; 
}

/*******************************************************************************
 * Bildergalerie
 *******************************************************************************
 */
ul.subFolderList {
 list-style-image: url(../gfx/listItem1.png);
}