/* Alle Styles die unter @media print definiert wurden werden nur fuer den Ausdruck der Seite verwendet, nicht zur Anzeige am Bildschirm. */
@media print {

    /* Blendet die linke Navigation aus wenn man die seite druckt.*/
    #leftNav {
        display: none!important;
    }
    .contentArea {
        margin-left: 1px!important;
    }
}

/* Alle Styles die unter @media all definiert wurden werden fuer den Ausdruck und die Anzeige an allen am Bildschirm verwendet. */
@media all {
    body {
        padding-top: 0px; /*  statt 2px / vor 13.07.2019: 5px  Positionierung des body im frameset */
		
    }

    /* Diese Klasse formatiert alle */ 
    .contentArea {
        padding-top: 17px;  /* vor 13.07.2019: 11  */
        width: 80%; 
        float: left;
        margin-left: 150px;
        position: absolute;
    }

    /* Diese Klasse Versteckt ein Element, an dieser Klassen sollten keine Aenderungen vorgenommen werden, da diese auch unter keinen Umst�nden nicht sichtbar sind. */
    .hide {
        display: none;
        background: none; 
        z-index: -1;
        width: 0px;
        height: 0px;
    }

    .mainnav {
        margin: -9px 0px 0px 0px; /* vor 13.07.2019: -11  verschiebt die Navigation um 11px nach oben, veraendert man diesen Wert dann wird die nur der Navigationstext und nicht der Hintergrund verschoben */
        left: 140px;
        padding: 0;
        position: absolute;
     }

    /* Diese Klasse sorgt dafuer dass die Pfadelemente der Navigation in einer Zeile angezeigt werden. */
    .path {
        display: inline;
        font-size: 12px; /* str eingefaerbt */ 	
     }

    /* Diese Klasse ist zustaendig die Ausgangsposition und Gestaltung der Submenueboxen zu uebernehmen. */
    .path ul{
        margin-top: 0px; 
        border: 1px outset grey; /* erzeugt einen grauen Rahmen um die Submenueboxen */
        opacity: 1; /* Sichtbarkeit der Untermenues. Werte zwischen 0 und 1 moeglich. 0 = unsichtbar; 1 = volle Sichtbarkeit */
    }

    /*
     * Diese Klasse verschiebt alle Submenueboxen, die nach der ersten Submenuebox aufgeklappt werden um 19 Pixel nach oben, 
     * damit das erste Element der neuen Submenuebox auf der Hoehe des aktuellen gehoverten Menuepunktes ist.
    */
    .path li ul{
        margin-top: -19px;
    }

    /* Diese Klasse wird dazu verwendet die Submenueboxen anzuzeigen. */
    .show {
        display: block; /* Anzeigen der Submenuebox als ein Block */
        position: absolute; /* Die Position der Submenuebox soll absolut zur Position der Elternelemente sein. */
        background: #ddd; /* Hintergrundfarbe der Unterkategorien */
    }
    
    /* Diese Klasse enthaelt dich wichtigsten Einstellungen fuer die Navigation */ 
    #nav {
        /* background-image:url(../intro/images/menu_horiz_semi_22.gif); */ /* Hintergrundbild der Navigationsleiste */
        background-repeat:repeat-x; /* Horizontales Kacheln des Hintergrundbilds */
        /* background-image:url(../intro/images/br_rohre.jpg); /* Hintergrundbild der Navigationsleiste */
        /* background-repeat:no-repeat; /* Horizontales Kacheln des Hintergrundbilds */
        margin-top:0px; /* vor 13.07.2019: -10 Positionierung der Navigationsleiste: Abstand oben */
        position:fixed; /*Verhindert, dass die Navigation beim Scrollen der Seite verschwindet */
        width:5400px; /* Breite der Navigationsleiste */
        /* left: expression( document.body.scrollLeft + 'px' ); /* loest Fehlermeldungen aus */
        /* top: expression( document.body.scrollTop + 'px' ); /*  loest Fehlermeldungen aus  */
        z-index: 100;
        height: 20px;
    }

    /* Diese Klasse formatiert alle ul-Tags der Navigation */
    #nav ul {
        list-style-type: none;
        padding-left: 0px;
    }
    
    /* Diese Klasse formatiert alle li-Tags der Navigation */
    #nav li {
        padding: 0px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 2px;
        padding-bottom: 2px;
    }
    
    /* Diese Klasse legt die formate fuer alle a-Tags die sich in li-Tags befinden fuer die Navigation fest. */
    #nav li a {
        color:black; /* Schriftfarbe der Menueeintruege*/
        /* font-weight: bold; /* str  deaktiviert Schrifttyp der Menueeintraege */
        background: transparent; /* Hintergrundfarbe: Transparent, weil der Container den Hintergrund bereitstellt */
        text-decoration: none; /* Unterdrueckt dass Hyperlinks in der Navigation unterstrichen sind */
        white-space:  nowrap; /* Verhindert Zeilenumbrueche */
    }
    
    /* Diese Klasse formatiert alle Hyperlinks in li-Tags wenn mit der Mause auf den Link gezeigt wird. */
    #nav li a:hover {
        color:red; /* Schriftfarbe wird zu rot geaendert beim Draufzeigen mit der Maus.*/
    }
    
    /* Diese Klasse formatiert alle li-Tags wenn mit der Mause auf den li-Tag gezeigt wird. */
    #nav li:hover {
        background-image: url(../intro/images/menu_horiz_semi_aktiv_20.gif);  /* Hintergrundbild der Menueeintraege bei Draufzeigen mit der Maus anzeigen */
    }

    /* Damit alle Links in den Boxen der Top-Navigation die geoeffnet werden ueber die gesammte Laenger angezeit werden.*/
    .show li a {
        display: block;
    }
	
	
    /* Eigenschaften der Pfeilgrafik der Menueeintraege in den Submenueboxen, die Untereintraege besitzen */
    .mainnavArrow {
        width: 8px; /* Anzeige Breite der Grafik */
        height: 8px; /* Anzeige Hoehe der Grafik */
        border: none; /* Die Grafik soll ohne Rahmen angezeigt werden. */
        position:absolute; /* Die Position der Grafik wird absolut zum Eltern Element angegeben */
        right:9px; /* Die Grafik ist 9px vom rechten Rand des Eltern Elements entfernt.*/
        margin-top: -13px; /* Die Grafik ist um 13px nach oben verschoben. */
    }

    /* Eigenschaften der Pfeilgrafik der Menueeintraege im Navigationspfad, die Untereintraege besitzen */
    .mainnavArrowPath {
        width: 8px; /* Anzeige Breite der Grafik */
        height: 8px; /* Anzeige Hoehe der Grafik */
        border: none; /* Die Grafik soll ohne Rahmen angezeigt werden. */
        position: relative;/* Die Position der Grafik wird relative zum Eltern Element angegeben */
        left: 2px; /* Die Grafik wird um 2 px nach links verschoben und hat so mehr Abstand zum Text */
   }

    /* Diese Klasse positioniert die mannavbox, welche die Baumstruktur der Navigation beinhaltet.*/
    #mainnavBox {
        padding-bottom: 0px;
        padding-top: 0px;
        width: 150%;
    }

    /* Formatierung eines Links in der horizontalen Navigation. */
    #mainnavBox .mainnavLink {
        font-weight: normal;
    }

    /* Hervorhebung des bisher eingestellten Pfades (gelb hinterlegt) */
    #mainnavBox .bold{
        background-color: #fffa70; 
    }

    /* Diese Klasse wird im Internetexplorer dazu verwendet die Submenuboxen anzuzeigen. */
    .showIE {
        position: absolute;
        margin: 20px 0px 0px;
        display: block;
        position: absolute;
        padding-left: 0px;
        background:#ddd; 
    }

    #nav .mainnavLink div {
        left: 16px;
        position: relative;
        top: 2px;
    }

/*
 ************************ Styles fuer die linke Navigation *********************************
*/

    #leftNav { /* Positionierung der gesammten Navigation in der linken Spalte */
        background-color: #FFFFFF;         /* Farbe gesamte Leiste links */
        /* background:  url("../images/navlinks.jpg") repeat scroll 0 0 transparent; */
        float: left;
        height: 100%;
        left: 0;
        margin: 20px 31px 0px -1px;  /* vor 13.07.2019: 10px  */
        position: fixed;   /* linke Navigation wahlweise position: absolute;  position: fixed; */
        padding-top: 20px; 
        width: 140px;      /* bis 2/2013 130px */
        z-index: 50;
    }

    #leftNav ul { /* Positionierung der jeweiligen Navigations Gruppe Elternmenü und Kinder der aktuellen Ebene in der linken Spalte */
        padding: 0 10px 0 3px;   
    }

    #leftNav li { /* Die Menueeintraege sollen Raender unten und oben haben */
        border-bottom: 1px solid #E8E8E8;
        border-top: 1px solid #FFFFFF;
        list-style: none outside none;
    }
    
    #leftNav .first { /* Der erste Menueeintrag soll kein Rand oben haben */
        border-top: medium none;
    }
    
    #leftNav .last { /* Der letzte Menueeintrag soll kein Rand unten haben */
        border-bottom: medium none;
    }
    
    #leftNav .leftNavArrow { /* Positionierung der Pfeile in der horizontalen Navigation */
        height: 10px;
        left: 123px;
        margin-top: -10px;
        position: absolute;
        width: 8px;
    }
    
    #leftNav .mainnavArrow { /* Positionierung der Pfeile in der horizontalen Navigation */
        border: medium none;
        height: 8px;
        margin: 0px;
        position: relative;
        right: 2px;  /* Ueberlapp rechter Pfeil  */
        width: 8px;
    }
    
    #leftNav .mainnavBackArrow { /* Positionierung der Pfeile der Links zu den Elternseiten in der horizontalen Navigation */
        border: medium none;
        height: 9px;
        ime-mode: auto;
        margin: 2px 3px 0px 0px;   /* 2. Parameter bestimmt Text-Abstand von linkem Rand  */
        position: relative;
        vertical-align: text-top;
        width: 9px;
    }
    
    #leftNav .childUl { /* Positionierung der gesamten liste mit den Kindern in oeffnenden Fenster */
        background: none repeat scroll 0 0 #DEDEDE;
        border: 2px solid #E5E5E5;
        margin: 0px;
        position: relative;
        top: 0;
    }
    
    #leftNav .childLi { /* Positionierung des Kindes eines Menueeintrages. */
        display: inline-table;
        border: none;
        border-top-width: 0px;
        border-bottom-width: 0px;
        border-left-width: 0px;
        border-right-width: 0px;
        display: inline-table;
        padding: 15px 20px;
        font-size: 11pt; /* Groesse des Fonts Nav links in Mitte */
        width: 230px;
        vertical-align: top;
        float:left;  
    	/* textunterlegte Bereiche: background:#777; */
    }
    
    #leftNav .childLi a { /* Gestaltung des Links des Kindes eines Menueeintrages. */
        color: #222;
        font-weight: bold;
        text-decoration: none;
        font-size: 9pt; /* Ueberschriften */
    }
    
    #leftNav .childChildList a {
        color: #333333;
        font-size: 9pt;
        font-weight: normal;
    	/* ausgeklappte Texte */
    	/* padding möglich - aber Nachbarzeilen kanibalisieren sich */
    	/* background-image: url(../images/peter.jpg); */
    	/* background: #222; */
}

.allCategories .childChildList {
    padding: 0;
}

#leftNav .childLi .emptyLi {
    list-style: none;
    height: 20px;
}

#leftNav .childLi .allCategories {
    list-style: none;
    font-weight: bold;
}

#leftNav .childLi .allCategories a {
    font-weight: bold;
    font-style: italic;
}

#leftNav .childLi li { /* Felder rechts */
    border: medium none;
    line-height: 20px;
    list-style-type: square;
}

#leftNav .leftNavLi {   /* Felder links */
    padding: 6px 5px;
}

#leftNav .leftNavLi:hover {
    background-color: #fffa00;
}

#leftNav .activeLeftNavLi {  /* aktves Feld links unten  */
	background-color: #fffa70; /* Aktiver Pfad unten */
}

#leftNav .childBox {   /* gesamter Rahmen rechts */
    background: #D0D0D0 none repeat scroll 0pt 50%;
    left: 140px;
    margin-top: -20px;
    position: absolute;
    z-index: 220;
	/* background-image: url(../images/peter.jpg); */
}

#leftNav .adapter {   /* Rand zwischen Navigationsleiste links und Fenster rechts */
    height: 100%;
    left: -25px;
    position: absolute;
    width: 50px;
    z-index: 200;
}

#leftNav .mainnavLink {      /* innere Rahmen links */
    display: block;
    color: #222;
    font-weight: bold;
    text-decoration: none;
    font-size: 9pt;  /* Textgroesse Menu links, feststehend */
    z-index: 210;
    word-wrap: break-word;
    padding-right: 5px;
}

#leftNav .mainnavLink:hover, #leftNav .childLi a:hover{  /* kleine Rahmen rechts */
    color: red;
}

#leftNav .parents .mainnavLink {
    color: #444;
	width: 119px; 
}

#leftNav .parents .leftNavLi  {
    position: relative;
    background-color: #fffa70; /* Aktiver Pfad links (Parent Links eingefaerbt)  */
    /* background-image:  url(../images/left_nav_parent.gif); */
}

#leftNav .childs {
    margin: 0px 0px 0px 3px;
}

#leftNav .childChildList {
    margin-left: 25px;
}

/*
 ********************************* Styles fuer die Startseite *************************************
*/

.bodyStyle {
    margin: 0px;     /* damit Bild oben, links anfaengt */
}

.page {
    width: 1000px;   /* Breite */
    margin-top: 0px; 
}

.row1,
.row2,
.row3,
.row4,
.row5,
.row6,
.row7 {
    clear: both;
    width: 1000px;
}

.row2 {
/*
    background: #F6EF3F;
    height: 12px;
    width: 100%;
    font-size: 10pt;
*/
}

.row3 {
    /*  background: url('../intro/images/intro_row3_background.gif') repeat-x scroll 0 0; /* unter Bild */
    height: 210px;
}

.row4 {
    height: 15px;
}

.row5 {
    height: 10px;
}

.row6 {
    height: 1px;           /* neu fuer framelos */
	}

.row7 {
    height: 20px;          /* war 20px neu fuer framelos */
}

.rowHide {
    display: none;        /* unbenutzt */
}

/* linker Bildteil oben */
.col1 {
    background-color: #777777;
    height: 313px;      /* neu fuer framelos */
    float: left;
    text-align: center;
    border-style: none; /* neu fuer framelos */
}

/* rechter Textteil oben */
.col2 {
    background-image:url(../images/hifi_70_72.gif); background-repeat:no-repeat; background-position:400px 30px;
    background-color: #DBDBDB; 
    border-left: 2px solid #FFFFFF;
    float: left;
    height: 313px; 
    margin-left: -2px;
    position: relative;
	font-size: 13px;
    width: 50%;
    z-index: 100;
}

/* die Listen, die die Bildwechsel auslösen */
.linksList, .linksListLast {
    display: block;
    float: left;
    padding-left: 3%;      /* im Original 4%*/
    width: auto;
}

.linksListLast {
    margin-right: 0px!important;
}

.linksList li {
    list-style: none;
}

/* fuer die ul-Listen */
.links {    
    font-size: 12pt;
    font-weight: normal;
    padding-left: 0;
    text-align: left;
}

.links li {  
    list-style-image: url("../intro/images/pfeil_intro.gif");
    padding: 5px 0;
    width: 140px;
}

/* fuer die Formatierung der Links unter dem Bild */
.bodyStyle a {  
    color: #5A5A5A;
    font-size: 9pt;
    text-decoration: none;
    white-space: normal;
    word-wrap: break-word;
}


.bodyStyle a:hover {  
    text-decoration: underline;
    color: #191919;
}

.title {
    /* font-weight: bold; */
    font-size: 11pt;
    list-style: none;
    margin-bottom: -10px;
    margin-top: 10px;  /* vor 25.7.19: 20px */
    text-align: left;
}

/* fuer die ul-Liste ganz rechts */
.furtherLinks {
    border-left: 1px solid #000000;
    margin-left: 0.5%;
    margin-right: 0px;
	margin-top: 0px;  /* wg. fehlender Ueberschrift */
    padding-left: 30px;
}

/* fuer die ul-Liste ganz rechts */
.furtherLinksHeader {
    border-left: 1px solid #000000;
    margin-left: 0.5%;
    margin-right: 0px;
	/* margin-top: 0px; wg. fehlender Ueberschrift */
    padding-left: 30px;
}

/* teaser ist zur Formatierung der Textboxen rechts oben unter col2 */
#teaser {
    float: left;
    margin-left: 15px;
    margin-top: 50px;
    position: relative;
    width: 390px;
}
#teaserTitle {
    font-weight: bold;
	white-space:nowrap;
}
#teaserText {
}

/* #teaserText ul li {
     list-style-image: url("../img/pfeil.png");
}*/

#img {
    height: 313px;
    position: relative;
    width:500px;
    z-index: 1;
}

/* grauer Kasten mit Schliessungsdatum */
.footer {
    /* background: none repeat scroll 0 0 #DBDBDB;  */
    background-color: #DBDBDB;
    /*  margin: 0px auto! important; */
    padding: 3px;
    position: relative;
    /* top: 60%; */
    width: 994px;
}

.footer li {
    display: inline;
    margin: 0px 8px;  /* 12 -> 10 -> 8 */
    font-size: 8pt;
	color: #333333;
}

.footer a {
    font-size: 8pt;
}

.navZeile {
	background: none repeat scroll 0 0 #DBDBDB;
	height: 30px; 
}

/* unten: die rote Markenzeile */
.marken  {
    display: inline;
    margin: -8px -8px;
    font-size: 6pt;
}

.marken li {
    display: inline;
    margin: 0px 6px;  
    font-size: 6pt;
}

.marken a {
    color: #ff0000;
    font-size: 7pt;
}

}   /*  @media all */