@charset "UTF-8";
@media all {
 
    /**
    * 1.1 Regeln für allgemeine ELEMENTE
    */

    * {
	margin: 0;
	padding: 0;
    }

    body {
	margin: 2em 10% 4em;
	max-width: 59.6em;
    }

    address{
	font-style: normal;
	margin-bottom: 1em;
    }

    ul {
	list-style: square inside;
    }
    
    dt {
	 float: left;
	 clear: left;
	 font-weight: bold;
	 padding: 0 0.5em 0 0;
    }
        
    table, div,  #foot address	{
	clear:both;
    } 

    img {
	vertical-align: bottom;
    }

     
    a img { 
	border: 0; 
    }

    ul ul {
	margin-left: 2em;
	list-style: circle inside;
    }
    /**
     * 1.2 Regeln für besondere BEREICHE 
     * id (head, navigation, intro, main, foot)
     */

    /**
     * 1.2.1 Kopfbereich
     * @section head
     */
    #head h1 {
	padding-left:0;
    }
    
    #head li {
	list-style: none;
	display: inline;
    }
    
    /**
     * 1.2.2 Navigation
     * @section navigation
     */

     ul#navigation {
	float: left;
	w\idth: 100%;         /* Navigation springt sonst vor dem IE5.01 davon */
	margin: 1em 0 1.5em;
	padding: 0;
	border: solid #333;
	border-width: 1px 0;
    } 
    #navigation li {
	float: left;
	}   
    #navigation strong, 
    #navigation a {
	float: left;
    	padding: 0.5em 1.5em;
	text-decoration: none;
	font-weight: normal;
        white-space: nowrap;
    }
    
    /**
     * 1.2.3 Einleitung
     * @section intro
     */

    #intro * {
	margin-bottom: 0;
    }
    #intro h1{
	margin-bottom: 0.5em;
    } 
    #intro h2, 
    #intro h3 {
	font-size: 1em;
	font-weight: bold;
	padding-left:0;
    }
    #intro img {
	float:right;
	margin-left: 1em;
    }

    /**
     * 1.2.4 Hauptteil
     * @section main
     */
    #main {
	clear: both;
	padding: 1em 0;
	margin: 0;
    }

    #main h2,img {
	clear:left;
    }
    #main p,
    #main ul,
    #main dl, 
    #main img {
	 margin-bottom: 1em;
    }
    #main p+ul.inline {
	margin-top: -1em;
    }
    #main img {
	float: left;
	margin-right: 1em;
    }

    #main .sitemap ul {
	margin-bottom: 0;
    }

    /**
     * Fusszeile
     * @section foot
     */
    
    #foot address{
	font-style: normal;
	font-size: 0.9em;
	text-align: center;
	margin-bottom: 0;
    }

    /**
     * 1.3 Regeln für besondere KLASSEN  class="..."
     *
     */


    /**
     * class="spachenwahl"
     * Bedeutung: Ein Navigationmenu das der Auswahl der Spache der Seite dient.
     */

    .sprachenwahl {
	text-align:right;
	font-size: 0.9em;
    }  

    /**
     * class="inline"
     * Eine Liste soll inline dargestellt werden. (Leider kenn generisches Markup)
     */
    .inline li {
	list-style: none;
	display: inline;
    }

    /*
     * class="beschreibung" z.B. Beschreibung eines Bildes
     * class="navinst" Navigation instruction: Eine Anweisung zur Navigation wie z.B. "klicken sie hier"
     */
    .beschreibung, .navinst {
	font: 80%/120% Verdana,sans-serif;
    }

     /*
     * class="vcard"
     * Bedeutung: Blöcke mit Kontaktinformation werden so zusammengefasst.
     */
    div.vcard {
	float: left;
	clear: none;
	margin-right: 1em;
	margin-bottom: 1em;
	width: 26em;
	}

    .vcard dt {
	float: none;
	clear: none;
	display: run-in; /* Funktioniert nur in Opera und IE8, Chrome; nicht in IE 7 und Firefox */
	}

    /**
     * 1.4 Die Homepage sieht anders aus
     * @section homepage
     */

    #main.homepage{
	border-top-width: 0;
	padding-top: 0;
	padding-right: 278px;
	position: relative;
	background: url(../bildmaterial/sonstiges/thg.jpg) right repeat-y;
        min-width: 18em;
    }

  
    #main.homepage p, 
    .homepage h2, 
    .homepage h3, 
    .homepage ul,
    .homepage dl
    {
	padding-right: 1ex;
    }

    #main.homepage h2+p {
	margin-top: 0.5em;
    }
    
    #main.homepage dl {
	margin-bottom: 0;
    }

    /* 
     * Platzierung der Bilder auf der Home-Page
     * Danke an Susanne Jäger für den Vorschlag in <news:  >
     */
    
    #main.homepage h3 a img {
	position: absolute; 
	right: 80px;
	border: 2px solid black;
	margin: 0;
    } 
    
    .item1 img {
       top: 45px
   }

   .item2 img {
       top: 180px
   }
   
   .item3 img {
       top: 315px
   }

   .item4 img {
       top: 450px
   }

 
}

/** 
 * 2 Regeln für die Bilschrimdarstellung
 */

@media screen, projection, tv {
   
   /** 
    * Farben
    */

    body, h3, #head h1, #intro h2, #intro h3, #main h2:first-child {
    	color: black;
	background-color: white;
    }
    
   
    h1,h2, #navigation strong,#foot address, #main.homepage h2:first-child {
	color: white;
	background-color: #333;
   }

       a:link {
	color: #BE0023;
	background-color: transparent;
    }

       a:visited {
	color: maroon;
	background-color: transparent;
       }
       
       caption, #navigation a:hover, #navigation a:focus {
	   color: white;
	   background-color: #BE0023;
       }
       #navigation a:visited:hover {
	color: white;
	background-color: maroon;
    }

       #foot address a {
	   color: #F77;
	   background-color: transparent;
       }
       
       /*
	* class="na"
	* Bedeutung: "na" = "not avialable": Funktion nicht verfügbar
	*/
       .na {
	   color: silver;
       }

    /**
     * Class="gerade"
     * Bedeutung: Die Klasse bezeichnet z.B. gerade Zeilen einer Tabelle; Diese konnen so z.B. farblich anders hinterlegt werden
     */
    .gerade th, .gerade td {
	color: black;
	background-color: #eeeeee;
    }


    /**
     * 2.1 Regeln für allgemeine ELEMENTE
     */



   body, td, th { font: normal 90%/160% Verdana, sans-serif; }
    td, th { f\ont-size: 100%; }


    h1, h2, #main.homepage h2:first-child {
	font: normal 100%/160% Verdana, sans-serif;
	padding-left: 0.5em;
	margin-top: 0;
    }

    h3, #main h2:first-child {
	font: bold 100%/160% Verdana, sans-serif;
	padding-left: 0;
	margin-top: 0.5em;
    }  
    
    caption {
	font-weight:bold;
    }

    table {
	border: solid #BE0023;
	border-width: 0 0 1.5em;
    }

    /** 
     * 2.2 Regeln für Besondere Bereiche (id=..)
     */
    
    /* 
     * Hauptteil
     * Schwarzer Balken grenzt den Hauptteil von der Einleitung ab 
     */

      #main {
	border: solid #333;
	border-width: 1.5em 0 0;
      }
      
      #foot.homepage {
	  position: relative;
	  /*min-width: 350px;*/
	  min-width: 25em;
      }

      #foot.homepage .nav p {
	  position: absolute;
	  margin-right: 1em;
	  right: 278px;
	  top: -2em;
	  }

    /**
     *  2.3 Regeln für Besondere Klassen (class= ...)
     */

      .nav p {
	  float: left;
      }
      
      .nav p+p {
	  float: right;
      }

      p.sm {
	  text-align: right;
      }

    /**
     * 2.4. Regeln für die Home-Page
     *      Die Home-Page sieht anders aus:
     */

    .homepage h2 {
    	border-left: 1.6em solid #BE0023;
    }  
    
}

/**
*
* 3. Media print  Regeln für den Druck
*
*/

@media print {

    /*
     * 3.1 Regeln für allgemeine Elemente
     */ 
    
    * {
        color: black!important;
	background: white!important;
	}
    
    body {
	/*margin: 11.1% 11.1% 22.2%*/ /*Neunteilung */
	margin: 0/* 10%*/;
    }
 

    h2 {
	margin: 0.5em 0;
    }

    table {
	border: solid black;
	border-width: 1.5pt 0;
    }
    
    a {
	text-decoration: none;
	}
    
    abbr, acronym {
	border: none;
	 }
    /*
     * 3.2 Regeln für Besondere Beireich und Klassen
     */
    
    #intro {
	margin-top: 2em;
    }
    h1.logo {
	margin: 0 0 0.5em;
    }

    /* Der Link-Text der folgenden Elemente bietet im Druck keinen relevanten Inhalt.
     * zu solchen Links zählt die Navigation, die Sprachenwahl und sog. "mehr" Links
     */
    
    #navigation, 
    .sprachenwahl,
    .breadcrumb,
    .nav,
    .navinst,
    .na,
    a.more {
	display: none;
    }


    /* 
     *  3.3 Regeln für die Home-Page
     *       Die Home-Page sieht anders aus:
     */
    
    #main.homepage{
	border-top-width: 0;
	padding-top: 0;
	padding-right: 120px;
	position: relative;
	background: none;
        min-width: 18em;
    }

    #main.homepage h3 a img {
	right: 0;
	}
    

}