/* *** Generated by www.addinteractive.com *** */
/* *** modified by ute bender 27022006 *** */



/* ############################################################################*/
/* BARIEREFREIE ZUSATZINFORMATIONEN IN VERSTECKTEN DIV/
/* ############################################################################*/

/* -- Accessibility Tweaks: Zusatzinformationen der Seite ohne css und fŸr Screenreader -- */



#skipNav {position: absolute; left: -9999px;}


.invisible, dfn {
    position: absolute;
    left: -1000px;
    top: -1000px;
    width: 0px;
    height: 0px;
    overflow: hidden;
    display: inline;
}

/* ############################################################################*/
/* GLOBALE FORMATIERUNGEN*/
/* ############################################################################*/


/* --------Globale Tag Definitionen ------------------- */
body {
background-color: #cccccc;
font-size: .7em;
font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
color:#003366;
padding:0;
margin:0;
}

a, a:link, a:visited  {
color: #003366;
text-decoration:none;
font-weight:bold;
}

a:hover, a:active {
color: #009de0;/* hier die Link-Hausfarbe ndern*/
text-decoration:underline;
}


.global {
background: transparent url(../img/buttons/bu_link.gif) no-repeat 0 0.2em;
padding-left:1.2em;
}

img.download {vertical-align:middle;}
img {border:none;}



/* ############################################################################*/
/* Website LAYOUT FORMATIERUNG - 3 spaltiges BOXEN MODEL mit Header und Footer*/
/* ############################################################################*/


/* #################################################### */
/* Der CONTAINER div zentriert das Layout und gibt ihm die Breite */

#container {
width: 69em;
padding:0;
margin:0 auto 0 auto;
background-color:#FFFFFF;
} 

/* #################################################### */ 
/* Div OUTER und INNER */

/* Der outer div hat links und rechts einen farbigen Border mit der Breite der Navigationen. 
Dieser richtet sich nach der Lnge der Inhalte aus. Die Hhe der Farbflchen wird durch das 
img des Container div unterstŸtzt*/

#outer{ 
border-left: solid 17.4em #DDE6ED;  /* linke Menue Spalten Farbe 17.4em */ 
border-right: solid 10.7em #DDE6ED; /* rechte Menue Spalten Farbe  */ 
background-color: #ffffff; /* Farbe fuer Inhalt Spalten  */
} 

/*Der inner div ist die EXTRA Schlaufe fŸr den IE PC. Alle anderen Browser wŸrden diese nicht brauchen. 
Im inner div befindet sich der hauptNavigation, kursNavigation und der content div. 
Der hauptNavigation div wird links auf eine negative position gesetzt, 
so dass er rechts bŸndig mit dem Border des outer div zusammenkommt.*/

#inner{/*** IE needs this or the contents won't show outside the parent container. ***/
margin:0; 
width:100%; 
} 

hr{

color:#003366;
}

/* #################################################### */
/* Div HEADER zur Positionierung von LOGO, Bild, Adresse, Supportnavigation und Pfadnavigation */

#header {
background-color: #ffffff;
padding:0;
margin:0;
border-right: solid 10.7em #DDE6ED; /* rechte Menue Spalten Farbe  */
}


/* #################################################### */ 
/* Positionen von Haupt- und Kursnavigavtion */

/*  Box fŸr die linke Hauptnavigation */

#Navigation {
 width:17.4em;
 float:left;
 position:relative;/*** IE needs this or the contents won't show outside the parent container. ***/  
 margin-left:-194px; 
 margin-right:1px;
 padding-bottom:19em;/*** Abstand des Navigationsinhalts zur #vhsCI bottom box ***/ 

}

/*  Box fŸr die rechte Kurssuche und Kursnavigation */

  #kurssuche { /*Box fŸr die Kurssuche*/
    width:11.9em;
    position: absolute; /*** IE needs this or the contents won't show outside the parent container. ***/ 
    font-size:0.9em;
    top:0;
    margin-left:45.6em;
 }
  
/*  fuer den IE muessen die Box in diesem Fall andere Breite bekommen */
* html #kurssuche {
    margin-left:45.3em; 
    }   


#kursNavigation{
 width:11.9em; 
 float:right; 
 position: absolute; /*** IE needs this or the contents won't show outside the parent container. ***/ 
margin-left:45.6em;
 font-size:0.9em;
}

/*  fuer den IE muessen die Box in diesem Fall andere Breite bekommen */
* html #kursNavigation {
    margin-left:45.3em; 
    }
    
/*nicht in Gebrauch*/   
 #kursNavigationRelative{
 width:11.9em; 
 position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/ 
 margin-right:-11.9em;
 font-size:0.9em;
 float:right; 
}


/* #################################################### */ 
/* Div CONTENT: Position und Breite vom Seiteninhalt */ 

#content{ 
position: relative;
margin:0 1.5em 3em 1.5em;
padding:0;
background-color: #ffffff;
border-top:#003366 solid 1px;
}

/*  fuer den IE muessen die Position in diesem Fall eine Breite bekommen */
* html #content {
 width:37.5em;/*WICHTIG: Ohne Breite werden im Win IE die Float Bilder nicht angezeigt*/
}

/*  ###################################################### */
/*  FOOTER Definitionen */

#footer {
margin:0;
text-align: left;
position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/
border-right: solid 10.7em #DDE6ED; /* rechte Menue Spalten Farbe  */
}

.clear {
padding-bottom: 1px;    /* for Gecko-based browsers */
margin-bottom: -1px;    /* for Gecko-based browsers */
clear:both; /*** Wichtig: Damit sich der Footer an der Lnge der Containerinhalte ausrichtet ***/
} 

/* ----------Blaues VHS CI Classic Keyvisual Layout Element im Footer----------------- */

#vhsCI {
position: absolute; /*** absolute Ausrichtung am bottom des footers ***/
top: -14.4em; 
left:0;
width: 17.4em; 
height: 17em; 
background: transparent url(../upload/logos/vhs-blue.gif) no-repeat;
}

/*  fuer den IE muessen die Links in diesem Fall eine Breite bekommen */
* html #vhsCI {
    top: -13.8em; 
    top: -14.4em; 
 }
 
/* ############################################################################*/
/* LAYOUT FORMATIERUNG - HEADER */
/* ############################################################################*/ 
 
/* --- Div und Klassen fŸr LOGO und Bild, kein Zeilenumbruch------- */

#bilder {
background-color: #ffffff;
padding:0;/* Win Mozilla Firefox akzeptiert kein margin-top */ 
position: relative;
white-space:nowrap;
text-align:right;
margin:0;
}
 
.logo {
 padding-right:.5em;/* Klasse fŸr LOGO Abstand zum Bild */ 
 padding-left:.5em
 }
 
/* --- Klasse fŸr fŸr Positionierung der Adresse------- */ 

.adresse{
font-size: 1em;
top:0;
margin:0;
right:1em;
position:absolute;
}

/*  fuer den IE muessen die Position in diesem Fall eine Breite bekommen */
* html .adresse {
right:11.9em;
 }
 
 #logotext {/* div fŸr LOGO Zusatztext*/  
    width:18.4em;
    position: relative; /*** IE needs this or the contents won't show outside the parent container. ***/ 
    margin:0;
    font-size:0.9em;
    background-color: #FFFFFF;
    padding:.5em 0;
    text-align: right;
  } 

/* klasse fŸr Navigationspfad im Header*/  
.pfad {
 padding-left:19em;/* Klasse fŸr die Positionierung der Pfadnavigation */
}

.pfad a{
font-weight:normal;
}

/* Link Aktive Rubrik : klasse fŸr Navigationspfad im Header*/ 
.pfadlink {
color: #009de0;/* hier die Link-Hausfarbe ndern*/
font-weight:bold;
}
/* ############################################################################*/
/* LAYOUT FORMATIERUNG - CONTENT */
/* ############################################################################*/ 



table{
border-spacing:.7em;
}
td {
border-bottom:1px solid #c4c4c4;
vertical-align:top;
}

th{ 
padding-bottom:.5em; 
font-weight:bold; 
text-align:left;
}

caption{ 
font-weight:bold;
padding-bottom:.5em; 
}

h1{ 
text-decoration:none; 
text-align: left; 
font-size:1.2em; 
font-weight:normal; 
border-top: 1px solid #003366; 
border-bottom: 1px solid #003366;
margin: 1.2em 0 0 0; /* bestimmt den Abstand zum #content border*/
padding:0;
background-color:#DDE5ED;
display:block;
}

h1 a { /* Ankerlinks in H1*/
text-decoration:none; 
font-weight:normal; 
}

h1 img { /* Images in H1 werden immer rechts positioniert*/
border: 0px; 
float:right;
padding:0;
margin:0; 
}

h2 {
font-size: 1.5em;
margin:.5em 0 0 0;
}

h3 {
font-size:1.1em;
font-weight: bold;
padding:0 0 .5em 0;
margin:0;
}

p {
padding:.5em 0;
margin:0;
 }
 
 dt{
font-size:1em;
font-weight: bold;
padding:.5em 0;;
 }
 


/* Bilder im Content */
.bildrechts {
border: 0px; 
float:right; 
padding: 0 0 1em 1em; /* top right bottom left */
} 

.bildlinks {
border: 0px; 
margin:1em 1em 0 0; /* top right bottom left */
}

/* Auszeichnung fŸr Acronyme und AbkŸrzungen*/
abbr, acronym {
  font-variant: normal;
  text-transform: none;
  text-decoration:none;
}

acronym:hover, abbr:hover {
cursor: help
}

/* Die clear Eigenschaft vermeidet, dass auch ein zweite Textabsatz ein float positioniertes Bild umfliesst */
.absatzclear{
clear:right;
padding:0;  
margin:0;
}

/*Rubrikseiten Definitionen*/
#rubrik h1{
clear:right;/* Die clear Eigenschaft vermeidet, dass auch ein zweite Textabsatz ein float positioniertes Bild umfliesst */
padding:0;  
margin-top:1em;
}

#rubrik p img{
border: 0px; 
float:right; 
padding: 0 0 1em 1em; /* top right bottom left */

}

/*Text-Bildseiten Definitionen*/
#textBild p img{
border: 0px; 
float:right; 
padding: 0 0 1em 1em; /* top right bottom left */
}

#textBild p{
clear:right;/* Die clear Eigenschaft vermeidet, dass auch ein zweite Textabsatz ein float positioniertes Bild umfliesst */
padding:0;  
margin-top:1em;

}
.suche{ 
text-align: left; 
font-size:1.2em; 
font-weight:normal; 
border-top: 1px solid #003366; 
border-bottom: 1px solid #003366;
margin: 1.2em 0 0 0; /* bestimmt den Abstand zum #content border*/
padding:0 .5em 0 0;
background-color:#DDE5ED;
}

/*  ###################################################### */
/*  Homepage Boxen definitionen "A" zweite Reihe, "B" fŸr mgliche dritte Reihe*/

#boxlinks, #boxlinksA, #boxlinksB{
position:absolute;
left:0;
margin:0;
width:18em;
}

#boxrechts, #boxrechtsA, #boxrechtsB{
position:relative;
margin-left:19.5em;
width:18em;
}

#boxlinks h1, #boxrechts h1, #boxlinksA h1, #boxrechtsA h1, #boxlinksB h1, #boxrechtsB h1{
border-left: 1px solid #003366; 
border-right: 1px solid #003366;
margin-top:2em;
}

#boxlinks img, #boxlinksA img, #boxlinksB img, #boxrechts img, #boxrechtsA img, #boxrechtsB img{ /* Bilder werden rechtspositioniert*/
border: 0px; 
float:right;
padding:0;
margin:0;
}

/*Linklisten fŸr den Boxencontent*/
#boxlinks ul, #boxrechts ul, #boxlinksA ul, #boxrechtsA ul, #boxlinksB ul, #boxrechtsB ul{

text-align: left;
margin:0;
padding-left:1.5em;
}

#boxlinks li, #boxrechts li,#boxlinksA li, #boxrechtsA li,#boxlinksB li, #boxrechtsB li{
list-style:outside url(../img/buttons/bu_link.gif);
}

/*  ###################################################### */
/*  Listendefinition fŸr die Downloadlinks im Content*/

.download ul{
text-align: left;
padding-left:1.5em;
margin:.5em 0 0 0;
}

.download li{
list-style:outside url(../img/buttons/bu_down.gif);
line-height:1.2em;
}

/*  ###################################################### */
/* Listendefinition fŸr die Anker und Subthemenlinks im Contentheader - 3. Navigations Ebene*/

/*ListenŸberschrift*/

.anker h2{
font-size:1.1em;
font-weight:normal;
margin-top: 1em; /* bestimmt den Abstand zum #content border*/
padding:0;
}

/*Listenlinks position*/
.anker ul{
text-align: left;
margin:0;
padding-left:1.5em;
border-bottom:#003366 solid 1px;
padding-bottom:1em;/*Abstand zum unteren border*/
}

.anker li{
list-style:outside url(../img/buttons/bu_link.gif);
line-height:1.2em;
}

/*Link aktiv Makierung*/
.anker li strong {
font-weight:bold;
font-size:1em;
text-decoration:none;
color:#009de0;/*hier die Hausfarbe eintragen*/
}

/*Link aktiv Makierung*/
.anker ul li b {
font-weight:bold;
font-size:1em;
text-decoration:none;
color:#009de0;/*hier die Hausfarbe eintragen*/
}

/*Link aktiv Makierung*/
.aktiverLink{
font-weight:normal;
font-size:1em;
color:#FFCC00;/*hier die Hausfarbe eintragen*/
}

/* ############################################################################*/
/* LINK LISTEN - Hauptnavigation, Kursnavigation, Footer, Suportnavigation*/
/* ############################################################################*/




/* ############################################################################*/
/* --------------HAUPTNAVIGATION------------- */
 

/*  Um die unterschiedlichen Standard-Abstaende fuer versch. Broweser zu ueberschreiben. . */
#Navigation ul, #Navigation ol, #Navigation li {
    padding: 0;
    margin: 0;
    list-style: none;
    }

/*  In der Navigation sollen keine Linien unter den Links sein, ausserdem sollen alle Links Block-Elemente sein, 
damit die ganze Navigations-Flaeche klickbar wird. Die Links sollen Fett sein. */


    
    
/* ################*/
/* --- LEVEL 1 --- */
/* ################*/
#Navigation li a, #Navigation  li a:link, #Navigation  li a:visited {
    text-decoration: none;
    display: block;
    color: #003366;
    font-weight: bold;
    font-size: 1em;
    padding: .6em .7em .6em 1.2em;
    }

/*  fuer den IE muessen die Links in diesem Fall eine Breite bekommen */
* html #Navigation a {
    width: 15.5em;  
    }

/*  Bei Hover ueber einen Level 1 Eintrag bekommt der a des Eintrages ein Hintergrundbild - blauer Pfeil - und ein Hintergrundfarbe */

#Navigation li a:hover, #Navigation li a:focus, #Navigation li a:active {
    background: url(../img/buttons/bu_link.gif) no-repeat 0 0.8em;
    background-color: #FFFFFF;
    color: #009de0; /* hier die Link-Hausfarbe ndern*/
}

/*  Dies ist der Zustand, wenn man auf der Seite des Level 1 Eintrages ist. Es ist also ein zweite UL vorhanden, 
der Navigationspunkt ist ausgeklappt. Das Hintergrundbild zeigt fŸr "normale" User an, dass dieser Punkt ausgewaehlt ist */


#Navigation li.act a, #Navigation  li.act a:link, #Navigation  li.act a:visited {
    background:#FFFFFF url(../img/buttons/bu_link.gif) no-repeat 0 0.8em;
    color: #009de0; /* hier die Link-Hausfarbe ndern*/
    display:block;
    
  }
        
  
  #Navigation li.open a, #Navigation  li.open a:link, #Navigation  li.open a:visited {
    background:transparent url(../img/buttons/bu_link.gif) no-repeat 0 0.8em;
    color: #003366; /* hier die Link-Hausfarbe ndern*/
    display:block;
  }
  
  #Navigation li.open a:hover, #Navigation li.open a:focus, #Navigation li.open a:active {
    background-color: #FFFFFF;
    color: #009de0; /* hier die Link-Hausfarbe ndern*/
}
    
/* ################*/
/* --- LEVEL 2 --- */
/* ################*/

/* Fuer normale Level 2 Eintraege muessen wir ein paar Sachen von Level 1 ueberschreiben */
/*  Level 2 Eintraege haben kein anderes Icon aber anderes Paddings etc. */
#Navigation li.sec {
  margin:0;
  padding:0;/* controls heigth of menu items */
  display:block;
  }
  
/*  fuer den IE muessen die Links in diesem Fall eine Breite bekommen - beinflusst sonst den benachbarten div #kurssuche*/
* html #Navigation li.sec a , * html #Navigation li.act1 a{
    width: 14.5em;  
    }

#Navigation li.sec a, #Navigation  li.sec a:link, #Navigation  li.sec a:visited{
    padding: .4em .7em .4em 2.2em;
    font-weight: normal;
    height:1%;   /* IE Helper for 'block' and 'padding'*/
    text-decoration:none;
    background-color:transparent;
    background-image:none;
        color: #003366;
  }

/*  Und hier machen wir das gleiche wie oben, muessen es aber für Level 2 Eintraege aufgrund ihrer geaenderten Position etwas neu anpassen */

#Navigation li.sec a:hover, #Navigation li.sec a:focus, #Navigation li.sec a:active {
    background: #FFFFFF url(../img/buttons/bu_link.gif) no-repeat 1.2em 0.6em;
    color: #009de0; /* hier die Link-Hausfarbe ndern*/
    font-weight:bold;
    }

/*  und fuer den aktiven Level 2 Eintrag Angabe der Hintergrundfarbe, Hintergrundbild, Linkfarbe und padding */

#Navigation li.act1 a, #Navigation li.act1 a:link, #Navigation li.act1 a:visited {
    background: #FFFFFF url(../img/buttons/bu_link.gif) no-repeat 1.2em 0.6em;
    color: #009de0; /* hier die Link-Hausfarbe ndern*/
    font-weight:bold;
    display:block;
    padding: .4em .7em .4em 2.2em;
    
    }


/* ############################################################################*/
/* --------------KURSNAVIGATION------------- */
 

/*  Um die unterschiedlichen Standard-Abstaende fuer versch. Broweser zu ueberschreiben. . */
#kursNavigation ul, #kursNavigation ol, #kursNavigation li {
    padding: 0;
    margin: 0;
    list-style: none;
    }


/*  In der Kursnavigation sollen keine Linien unter den Links sein, ausserdem sollen alle Links Block-Elemente sein, 
damit die ganze Navigations-Flaeche klickbar wird. Die Links sollen Fett sein und das Hintergrundbild - blauer Pfeil - haben. */

#kursNavigation a {
    text-decoration: none;
    display: block;
    color: #003366;
    font-weight: bold;
    /*font-size: 1em;*/
    background: url(../img/buttons/bu_link.gif) no-repeat 0 0.8em;
    }

/*  fuer den IE muessen die Links in diesem Fall eine Breite bekommen */
* html #kursNavigation a {
    width:11em;
    margin-right:-10.6em;
    }

/* --- Nur LEVEL 1 Hover Effekt, da bei Klick die Kursangebotseite aufgerufen wird--- */

#kursNavigation ul li a {
    padding: .6em .7em .6em 1.2em;
    }

/*  Bei Hover ueber einen Level 1 Eintrag bekommt der a des Eintrages ein Hintergrundbild - blauer Pfeil - und ein Hintergrundfarbe */

#kursNavigation ul li a:hover, #kursNavigation ul li a:focus, #kursNavigation ul li a:active {
    background: url(../img/buttons/bu_link.gif) no-repeat 0 0.8em;
    background-color: #FFFFFF;
    color: #009de0; /* hier die Link-Hausfarbe ndern*/
    }

/*  Blauer Flie§text in der Kursangebot Box */

#kursNavigation p{
    padding: .6em .7em .6em 1.2em;
    }
  
 /* ############################################################################*/ 
 /* FORM und KURSSUCHE Header Formatierung*/

  
  #kurssuche strong{
    padding: .5em .5em .5em 1.2em;
    font-weight: bold;
    font-size:1.1em;
    color: #FFFFFF;
    background-color:#003366;
    display:block;
    
  }
  
  #kurssuche h4 {
    padding: .5em .5em .5em 1.2em;
    font-weight: bold;
    font-size:1.1em;
    color: #FFFFFF;
    background-color:#003366;
    display:block;
    margin:0;
  }
  
  #kurssuche form{
    margin:0;
    padding:0;
  }
  
    #kurssuche form input {
    padding:0;
    margin:0;
    font:normal 0.9em verdana,arial,helvetica,sans-serif;
  }
  
   #kurssuche p{
    padding:.5em 0 .5em 1.2em;
    }
    
    .feld{
    padding:0;
    }
        
    .fett {
    font-weight:bold;
    font-size:1.1em;
    vertical-align:super;
    padding-right:1em;
    }


/* ############################################################################*/
/*----------- SUPPORT Navigation im Header ------------*/
 
  ul#supportNavigation {
    font-size: 1em;
    text-align:right;
    padding:.5em 0em;
    top:0;
    margin:0;
    }
 
  ul#supportNavigation li {
    list-style: none;
    display: inline;
    }

/*----------- mit span wird hier der aktive Link gekennzeichnet  ------------*/

  ul#supportNavigation a, ul#supportNavigation span {
    padding: 0.2em 1em;
  }
  
  * html ul#supportNavigation a, * html ul#supportNavigation span {
    width: 1em;    /* nur fuer IE 5.0x erforderlich */
    width: auto;  /* sicherheitshalber fuer IE 6 zurueckgesetzt */
  }
  
  ul#supportNavigation a:hover, ul#supportNavigation a:focus, ul#supportNavigation a:active, ul#supportNavigation span {
    color: #009de0; /* hier die Link-Hausfarbe ndern*/ 
    text-decoration:underline;
    font-weight:bold;
  }
  

 
/* ############################################################################*/ 
/*----------- SUPPORT Navigation im Footer ------------*/

 #footerNavigation{
    padding-left:19em;
    margin:0;
    background-color:#FFFFFF;
    }
 
 #footerNavigation ul{
    border-top:#003366 solid 1px;
    width:37em;
    margin:0;
    padding:.5em 0;
    }
 
 #footerNavigation li{
    margin:0 .5em;
    padding:0;
    display: inline;
    list-style: none;
    }
    
    
 /* Button Klassen fŸr die Footernavigation */
 .back  {
    background: url(../img/buttons/bu_back.gif) no-repeat 0 0.2em;
    padding-left:1.2em; 
}

 .print  {
    background: url(../img/buttons/bu_druck.gif) no-repeat 0 0.2em;
    padding-left:1.2em; 
}

 .text  {
    background: url(../img/buttons/bu_top.gif) no-repeat 0 0.2em;
    padding-left:1.2em; 
}


/* ############################################################################*/
/* --------------SITEMAP STYLES FUER CONTENIDO TEMPLATES------------- */
 

a.sitemap3 {
    font-weight:normal;
margin-left:0;
border-left:1px solid #003366;
padding-left:1em;
/*background-color:#F2F5F8;*/
}

.sitemap {
background: transparent url(../img/bu_link.gif) no-repeat 0 0.2em;
padding-left:1.2em;
line-height:1.8em;
}