p   { margin-top:0px; margin-bottom:3px;
      font-family:Verdana,Arial,Helvetica; font-size:0.75em; line-height:11pt; color: #000000;
    }

ul  { margin-left:10pt; margin-top:0px; margin-bottom:0px; padding-left:0px;
      font-family:Verdana,Arial,Helvetica; font-size:0.75em; line-height:11pt; color: #000000;
    }
li  { margin-bottom:0px; margin-left:10px;
    }

td,
th  { /*padding-top:0px; padding-bottom:0px;*/
      font-family:Verdana,Arial,Helvetica; line-height:11pt; font-size:0.8em; color: #000000;
      text-align:left; vertical-align:top;
    }

h1  { margin-top:6px; margin-bottom:6px;
      padding-top:0px; padding-bottom:0px;
      font-family:Verdana,Arial,Helvetica; font-size:13pt; line-height:1.05em; color:#374b5e; font-weight:bold;
    }

h2  { margin-top:6px; margin-bottom:6px;
      padding-top:0px; padding-bottom:0px;
      font-family:Verdana,Arial,Helvetica; font-size:11pt; line-height:1em; color:#374b5e; font-weight:bold;
    }

h3  { margin-top:6px; margin-bottom:6px;
      padding-top:0px; padding-bottom:0px;
      font-family:Verdana,Arial,Helvetica; font-size:10pt; line-height:1em; color:#374b5e;
    }

h4  { margin-top:6px; margin-bottom:6px;
      padding-top:0px; padding-bottom:0px;
      font-family:Verdana,Arial,Helvetica; font-size:9pt; line-height:0.875; color:#374b5e;
    }

h5  { margin-top:3px; margin-bottom:3px;
      padding-top:0px; padding-bottom:0px;
      font-family:Verdana,Arial,Helvetica; font-size:8pt; line-height:0.8em; color:#374b5e;
    }

a   { color:#4F6680; text-decoration: none; font-weight:bold;}
a:hover {color:#374b5e; text-decoration: underline; }

img { border-width:0px; border:none; }


/*********** Div-Bereich unmittelbar im Body-Tag, um in alten Browsern den Float-Befehle zu überlisten ***********/
div.body
 { width:990px;
   background-color:#fff;
   margin:0;
   position:absolute;
 }

/************************************************************** Kopf-Bereich  **************************************************************/
/*  Aussehen des obersten Kopfzeile */
#kopfleiste
  { width:990px;
    padding-top:3px; padding-bottom:3px;
    vertical-align:middle;
    background-color:#f57920;
    font-family:Verdana,Arial,Helvetica; font-size:8pt; color:#FFFFFF;
  }

/* Festlegeung der Positionierung und des aussehens der Icons im Kopfbereich */
#kopfleiste img.kopficon
  { width:20px; height:13px;
    margin-left:5px; margin-right:40px;
    vertical-align:middle;
    border-width:0px;
  }

/* Aussehen des Kopfbereiches mit Logo und Bild */
#kopfbereich
  { position:relative;
    width:990px; height:66px;
  }
/* darin eingebettet */
#kopfbereich div.kopflogo
  { position:absolute; left:15px;
    width:220px;
    padding-top:3px; padding-bottom:3px;
  }
#kopfbereich div.kopfbild
  { position:absolute; left:255px;
    width:735px;
    padding-top:3px; padding-bottom:3px;
  }

/************************************************************** Fuss-Bereich  **************************************************************/
/*  Aussehen der Zeile im Fußbereich */
#fussbereich
  { position:relative;
    width:990px;
    padding-top:3px; padding-bottom:3px;
    margin-top:15px;
    clear:both;
    background-color:#374b5e;
    font-family:Verdana,Arial,Helvetica; font-size:8pt; color:#FFFFFF;
  }

/************************************************************** Menü-Bereich  **************************************************************/
/*  Aussehen des Menü-Bereiches */
#menue
  { width:235px;
    float:left;
  }

/* div-Bereiche im Menübereich */
#menue div
  { margin:0px;
    padding:3px 15px 3px;
    border-width: 0px 2px 1px; border-style:solid; border-color:#f57920;
    font-family:Verdana,Arial,Helvetica; font-size:8pt;
    letter-spacing:1pt; text-transform:uppercase;
  }
/*mit Ausnahme der untersten und der aktiven */
#menue div.letzter
  { border-width: 0px 2px 0px; }
#menue div.aktiv
  { border-width: 0px 2px 0px;
    background-color:#feb280;
  }

/* sowie der oberen farbigen und der unteren eingerahmten Bereiche */
/* in dem Folgenden ist die Überschrift für den Bereich mit drin */
#menue div.ecken_o_235
  { border-width:0px;
    padding: 5px 15px 5px;
    background-image:url(/bilder/ecken_o_235.gif); background-repeat:no-repeat; background-position:top;
    text-align:center;
    font-weight:bold; font-size:10pt; text-transform:none;
  }
#menue div.rahmen_u_235
  { width:235px; height:5px;
    border-width:0px;
    padding:0px;
    margin-bottom:15px;
    background-image:url(/bilder/rahmen_u_235.gif); background-repeat:no-repeat; background-position:bottom;
    font-size:0pt;
  }
/* in dem Menü-Bereich werden die Links nicht unterstrichen in Graublau angezeigt und beim Überfahren Schwarz */
#menue a
  { color:#374b5e; text-decoration:none; font-weight:normal;}
#menue a:hover
  { color:#000000; }
#menue div.aktiv a
  { color:#000000; font-weight:bold; }


/************************************************************** Haupt-Bereich **************************************************************/
/*  Aussehen des Hauptbereiches 20px linksaußen + 735px breit = 755px */
#haupt
  { width:735px;
    margin-left:20px;
    float:left;
  }
#haupt p
  { text-align:left; }
#haupt p.rechtsbuendig
  { text-align:right; }
#haupt p.medium
  { margin-top:0px; margin-bottom:5px;
    font-family:Verdana,Arial,Helvetica; font-size:9pt; line-height:11pt; color: #000000;
  }

/****************** Haupt-Bereich / Kopfzeile ******************/
#haupt div.kopfleiste
  { padding:3px;
    position:relative;
    margin-bottom:15px;
  }
/* Positionierung für den Anmeldebutton und die Überschrift in der Kopfleiste des Hauptbereiches */
/* kleine Länderflagge ganz links */
#haupt div.kopfleiste img
  { width:33px; height:20px;
    vertical-align:middle;
    border-width:0px;
    margin-right:10px;
  }
/* Überschrift Ländername */
#haupt div.kopfleiste h1
  { margin:0px;
    padding:0px;
    color:#FFFFFF;
  }
/* Anmeldebutton ganz rechts */
#haupt div.kopfleiste h3
  { position:absolute;
    right:10px; top:0px;
    padding:0px;
  }
/* Verlinkungen in der Kopfzeile */
#haupt div.kopfleiste a
  { color:#FFFFFF; }
#haupt div.kopf_leiste a:hover
  { color:#000000; }

/****************Hauptcontainer für mittlere und rechte Spalten im Hauptbereich *******************/
#container
  { width:auto;
    position:absolute;
  }
/****************** ProgrammTyp-Bereich als Blocks staat Tabelle******************/
/**************mittlere Spalte****************/
div.teaserSpalte
  { width:485px;
    margin-right:10px;
    float:left;
  }
div.teaser
  { width:485px;
    margin:0;
    border:0;
    position:relative;
  }
.teaserBox ul
  { list-style-image:url(/Bilder/Icons/ul-teaser.gif);
    background-repeat:no-repeat;
    list-style-position:outside;
  }
.teaserBild
  { float:left;
    padding-right:10px;
  }
/***************rechte Spalte****************/
div.boxSpalte
  { width:235px;
    overflow:hidden;
  }
div.infoBox     /*ohne farbige Rahmen*/
  { padding:3px 10px;
    border-width:0 2px;
    border-color:transparent;
  }
.infoBox p
  { font-size:8pt;
    line-height:10pt;
    margin:2px 0 2px;
  }
.infoBox ul
  { list-style-image:url(/Bilder/Icons/listImage.gif);
    background-repeat:no-repeat;
    list-style-type:none;
  }
.infoBox li
  { font-size:8pt;
    line-height:10pt;
  }
.boxSpalte h3.Anmeldung
  { margin:0px;
  }
.boxSpalte h3.Anmeldung a
  { color:#fff;
  }
.boxSpalte h3.Anmeldung a:hover
  { color:#374b5e;
  }

/* Boxrahmen gestaltet in KulturLife-Orange*/
div.infoBox_KL     /*mit Rahmen in Orange*/
  { border-width:0 2px;
    border-style:solid;
    border-color:#f57920;
    padding:3px 10px;
  }
.infoBox_KL p
  { font-size:8pt;
    line-height:10pt;
    margin:2px 0 2px;
  }
.infoBox_KL ul
  { list-style-image:url(/Bilder/Icons/listImage.gif);
    background-repeat:no-repeat;
    list-style-type:none;
  }
.infoBox_KL li
  { font-size:8pt;
    line-height:10pt;
  }

/*** Sondertags für das VOLUNTEER PROGRAMM ***/
.infoBox_VL     /* mit roten Rahmen für Volunteer */
  { border-width:0px 2px;
    border-style:solid;
    border-color:#d84e4e;
    padding:3px 15px;
  }
.infoBox_VL ul
  { list-style-image:url(/Bilder/Icons/listImageV.gif);
    background-repeat:no-repeat;
    list-style-type:none;
  }
/** Bereich fürs Volunteer-Programm **/
table.projektliste
  { border-width:0px;
    border-style:solid;
  }
table.projektliste td
  { padding-left:5px;
    font-size:0.7em;
  }

/****************** Haupt-Bereich / Aussehen eines einzelnen ProgrammTypbereiches ******************/
#haupt table.ProgrammTyp
  { width:735px;
    table-layout:fixed;
    empty-cells:show;
    margin:0px;
  }
/* Bild oberhalb der Überschrift */
#haupt table.ProgrammTyp img
  { border-width:0px;
    margin:0px;
    display:block;
  }
/* Überschrift mit Programmbereich HS,WE,FA */
#haupt table.ProgrammTyp h2
  { margin:0px;
    padding:5px;
    color:#FFFFFF;
  }
/* in dieser Überschrift enthaltene Links werden Weiss ohne Unterschrift beim und Überfahren Schwarz */
#haupt table.ProgrammTyp h2 a
  { color:#FFFFFF;
    text-decoration:none;
  }
#haupt table.ProgrammTyp h2 a:hover
  { color:#000000; }
/* normaler Absatz im programmfenster mit Abstand zum Rand */
#haupt table.ProgrammTyp p
  { text-align:left;
    margin:0px;
  }
#haupt table.ProgrammTyp p.rechtsbuendig
  { text-align:right; }

/****************** Haupt-Bereich / Aussehen eines einzelnen Programmbereiches *********************/
#haupt table.Programm
  { width:735px;
    table-layout:fixed;
    empty-cells:show;
    margin:0px;
  }
/* die Überschriften mit Innnenabstand von 5 px */
table.Programm h2
  { padding:3px;
    margin:0px 0px 5px;
    text-align:left;
  }
/* Links werden nicht unterstrichen */
table.Programm h2 a
  { text-decoration:none; }
/* und beim überfahren Schwarz */
table.Programm h2 a:hover
  { color:#000000; }

/* für die Überschrift Anmeldung wird die Farbe zusätzlich auf Weiss gesetzt*/
table.Programm h3.Anmeldung
  { margin:0px;
    color:#000000;
  }
/* in dieser Überschrift enthaltene Links werden Weiss ohne Unterschrift beim Überfahren Graublau */
table.Programm h3.Anmeldung a
  { color:#FFFFFF; }
table.Programm h3.Anmeldung a:hover
  { color:#374b5e; }
table.Programm ul
  { padding:10px 0px 10px 0px; }

/********Haupt-Bereich für Programme*******/
div.blockLang     /*Block für Text in ganzer Länge des Bodys*/
  { padding-right:10px;
    position:relative
  }
div.blockMittel   /*Block für Text neben dem Bild und bis zum rechten Rahm*/
  { width:560px;
    left:170px;
    top:0;
    position:relative;
  }
div.programm
  { width:735px;
    border:0;
    margin:10px 0px 0px 0px;
    position:relative;
    float:left;
  }
div.bild      /*Box für das Bild - wird zur linken Spalte, mit top:30px */
  { width:160px;
    height:120px;
    border:0;
    left:0;
    top:30px;
    position:absolute;
    z-index:3;
  }
div.bildTop      /*Box für das Bild - wird zur linken Spalte, mit top:0 */
  { width:160px;
    height:120px;
    border:0;
    left:0;
    top:0;
    position:absolute;
    z-index:3;
  }

div.infos    /* wird den Inhalt/Infos einrahmen und zur mittleren Spalte*/
  { width:375px;
    height:140px;
    left:170px;
    right:185px;
    top:0;
    position:relative;
    z-index:2;
  }
div.infosLang    /* wie div.infos, aber mit Länge 150px */
  { width:375px;
    height:180px;
    left:170px;
    right:185px;
    top:0;
    position:relative;
    z-index:2;
  }
div.infosKurz    /* wie div.infos, aber mit Länge 100px */
  { width:375px;
    height:100px;
    left:170px;
    right:185px;
    top:0;
    position:relative;
    z-index:2;
  }
div.leistungen   /*beeinhaltet die Leistungen und wird zur rechten Spalte*/
  { width:165px;
    top:0;
    right:10px;
    border:0;
    position:absolute;
    padding-left:0px;
    z-index:1;
  }
div.rahmen     /*Box für die Bildrahmen*/
  { width:160px;
    height:120px;
    border:0;
    left:0;
    top:30px;
    position:absolute;
    z-index:4;
  }

div.rahmen_160  /* Bildrahmen mit weißen Ecken 160x120 */
  { width:160px;
    height:120px;
    border:0;
    left:0;
    position:absolute;
    background-image:url(/bilder/rahmen_weiss_160x120.gif);
    z-index:4;
  }

/* in dieser Überschrift enthaltene Links werden Weiss ohne Unterschrift beim Überfahren Graublau */
.leistungen h3.Anmeldung
  { margin:0;
    color:#000000;
  }
.leistungen h3.Anmeldung a
  { color:#FFFFFF; }
.leistungen h3.Anmeldung a:hover
  { color:#374b5e; }
.leistungen p
  { font-size:0.7em;
    line-height:12px;
    color:#424242;
  }

/*Bereich für die eingeblendete Info*/
div.mehrInfos
  { width:560px;
    left:0px;
    margin:0;
    position:relative;
  }
.infos ul
  { line-height:12pt;
    padding:5px 0px 10px 0px;}
.infosKurz ul
  { line-height:12pt;
    padding:5px 0px 10px 0px;}
.infosLang ul
  { line-height:12pt;
    padding:5px 0px 10px 0px;}

 /* Leistungen-Zeichenerklärung */
div.zeichenerklärung
  { width: auto;
    padding:3px;
    margin:0;
  }
.zeichenerklärung ul
  { margin:0;
    padding:0;
    list-style: none;
  }
.zeichenerklärung li
  { width:135px;
    margin:0;
    padding:0;
    font-size:7pt;
    color:#374b5e;
    text-align:left;
    float:left;
  }

/****************** beliebiger Bereich / Aussehen eines tabellarischen Auflistung  *********************/
table.auflistung td
  { padding:5px; }

table.auflistung h3
  { margin:0px; }

div.info
  { position:relative;
    background-color:#FFFFA0;
    text-decoration:none;
    display:inline;
  }
div.info:hover
  { color:#000000; }

div.infobox
  { position:absolute;
    bottom:10px;
    width:300px;
    padding:5px;
    background-color:#FFFFA0;
    text-decoration:none;
    visibility:hidden;
    border-style:solid;
    border-width:1px;

    max-height:425px;
    overflow:auto;
    scrollbar-base-color:#FFFFA0;
    scrollbar-3d-light-color:#FFFFFF;
    scrollbar-arrow-color:#374B5E;
    scrollbar-darkshadow-color:#374B5E;
    scrollbar-face-color:#FFFF80;
    scrollbar-highlight-color:#374B5E;
    scrollbar-shadow-color:#374B5E;
    scrollbar-track-color:#FFFFE0;
  }

div.infobox ul
  { font-size:8pt;
    line-height:10pt;
    text-align:left;
    text-decoration:none;
  }

/****************** Bereich für Content in der Breite des Footers   *********************/
.infoBarContainer
  { clear:both;
    z-index:1;
    margin:auto;
    background-color:#d8d8d8;
    margin-top:5px;
    margin-bottom:-10px;
    width:100%;
    border-bottom-style:solid;
    border-bottom-color:#bcccdb;
    border-bottom-width:1px;
  }
infoBar
  { display:inline;
    margin:auto;
  }
.infoBarBox
  { padding:5px 8px 5px 8px;
    background-color:#f9f6f6;
    height:110px;
  }
.infoBarBox p
  { font-size:8pt;
    line-height:9pt;
    font-family:Verdana,Arial,Helvetica;
    color:#374b5e;
    text-align: justify;
  }
/*Tabelle für Logos*/
table.partner
  { border:0;
    width:100%;
    padding-top:3px;
  }
.partner td
  { width:20%;
    height:35px;
    text-align:center;
  }
/****************** Element: TOP *********************/
div.top
  { width:560px;
    text-align:right;
    padding:0px;
    background-repeat:no-repeat;
    background-position:bottom;
    border:0;
    font-size:9pt;
  }

/************ Rahmen für Programme Intros auf Startseite **************/
.programmIntro
  { margin:0; }
.programmIntro p
  { padding: 0 10px; }
.programmIntro a.link_weiss
  { padding-left:10px;
    color:#fff;
  }
.programmIntro a:hover.link_weiss
  { color:#5E9CA8; text-decoration:underline;}

/* DEFINITION DER FORMATE FÜR KLASSEN */
/********************************************************** Globale Einstellungen  *******************************************************/
/* Festlegen der (H)inter(G)rundeigenschaften */
.HG_orange      { background-color:#f57920; }
.HG_orange_hell { background-color:#feb280; }
.HG_blau_hell   { background-color:#add9e3; }    /* findet nur noch Verwendung bei den Übersichtstabellen */
.HG_blau_hell2  { background-color:#bfdce3; }    /* für Formulare*/
.HG_grau_blau   { background-color:#374b5e; }    /* für die farbige Leiste im Kopf und Fußbereich */
.HG_grau_hell   { background-color:#E3E4E6; }
.HG_xx          { background-color:#5E9CA8; }

/* Programmtypabhängige Farbgebung */
.HG_HS          { background-color:#6FAE48; }
.HG_HS_hell     { background-color:#B4CDB4; }
.HG_WE          { background-color:#106093; }
.HG_WE_hell     { background-color:#9daec8; }
.HG_FA          { background-color:#DEC32E; }
.HG_FA_hell     { background-color:#E9DBAF; }
.HG_VL          { background-color:#D74040; }
.HG_VL_hell     { background-color:#D84E4E; }
.HG_VL_grau     { background-color:#E8E0E0; }


/* Festlegen der (R)ahmenfarben */
.R_orange    { border-color:#f57920; }
.R_gr-bl     { border-color:#374b5e; }
.R_HS        { border-color:#6FAE48; }
.R_FA        { border-color:#DEC32E; }
.R_WE        { border-color:#106093; }
.R_WE_hell   { border-color:#9daec8; }
.R_VL         { border-color:#D74040; }
.R_VL_hell    { background-color:#D84E4E; }

/* Definition von Schriftfarben/-grad */
.FONT_weiss      { color:#FFFFFF; }
.FONT_gr-bl      { color:#374b5e; }
.FONT_orange     { color:#f57920; }
.FONT_aktiv      { color:#000000; font-weight:bold; }
.FONT_hell_blau  { color:#d8d8d8;}
.FONT_klein      { font-size:0.55em; }
.FONT_medium     { font-size:0.7em; }

/* Einrahmung mit Abstand 3px oben und unten mit folgenden Angaben: oben, rechts, unten, links */
.R_s             { padding:0px;                  /* für die Einrahmung im Programm-unter-Typen -Bereich */
                   border-width: 0px 2px;        /* seitlich und unten */
                   border-style:solid;
                 }
.R_s_u_IA_3      { padding:3px 0px 3px;          /* für den Menü-Bereich */
                   border-width: 0px 2px 1px;    /* seitlich und unten */
                   border-style:solid;
                 }

.R_s_IA_3        { padding:3px 0px 3px;          /* für den Menü-Bereich */
                   border-width:0px 2px;         /* seitlich */
                   border-style:solid;
                 }

.R_s_IA_5        { padding:5px;                  /* für sonstige Einrahmungen im Textbereich */
                   border-width:0px 2px;         /* seitlich */
                   border-style:solid;
                 }

.ecken_u_165 { padding:5px 5px 5px; background-image:url(/bilder/ecken_u_165.gif); background-repeat:no-repeat; background-position:bottom; border-width:0px; }
.ecken_u_235 { padding:5px 5px 5px; background-image:url(/bilder/ecken_u_235.gif); background-repeat:no-repeat; background-position:bottom; border-width:0px; }
.ecken_u_360 { padding:5px 5px 5px; background-image:url(/bilder/ecken_u_360.gif); background-repeat:no-repeat; background-position:bottom; border-width:0px; }
.ecken_u_735 { padding:5px 5px 5px; background-image:url(/bilder/ecken_u_735.gif); background-repeat:no-repeat; background-position:bottom; border-width:0px; }

.ecken_o_165 { padding:5px 5px 5px; background-image:url(/bilder/ecken_o_165.gif); background-repeat:no-repeat; background-position:top; border-width:0px; }
.ecken_o_235 { padding:5px 5px 5px; background-image:url(/bilder/ecken_o_235.gif); background-repeat:no-repeat; background-position:top; border-width:0px; }
.ecken_o_360 { padding:5px 5px 5px; background-image:url(/bilder/ecken_o_360.gif); background-repeat:no-repeat; background-position:top; border-width:0px; }

.rahmen_u_165 { height:5px; padding:0px; font-size:0px; background-image:url(/bilder/rahmen_u_165.gif); background-repeat:no-repeat; background-position:bottom; border-width:0px; }
.rahmen_u_235 { height:5px; padding:0px; font-size:0px; background-image:url(/bilder/rahmen_u_235.gif); background-repeat:no-repeat; background-position:bottom; border-width:0px; }
.rahmen_u_360 { height:5px; padding:0px; font-size:0px; background-image:url(/bilder/rahmen_u_360.gif); background-repeat:no-repeat; background-position:bottom; border-width:0px; }
.rahmen_o_165 { height:5px; padding:0px; font-size:0px; background-image:url(/bilder/rahmen_o_165.gif); background-repeat:no-repeat; background-position:bottom; border-width:0px; }
.rahmen_o_235 { height:5px; padding:0px; font-size:0px; background-image:url(/bilder/rahmen_o_235.gif); background-repeat:no-repeat; background-position:bottom; border-width:0px; }
.rahmen_o_360 { height:5px; padding:0px; font-size:0px; background-image:url(/bilder/rahmen_o_360.gif); background-repeat:no-repeat; background-position:bottom; border-width:0px; }

/*Ecken für Blocks 480*/
.ecken_o_480 { width:480px; height:5px; padding:0px; font-size:0px; background-image:url(/bilder/ecken_o_480.gif); background-repeat:no-repeat; background-position:top; border-width:0px; }
.ecken_u_480 { width:480px; height:5px; padding:0px; font-size:0px; background-image:url(/bilder/ecken_u_480.gif); background-repeat:no-repeat; background-position:bottom; border-width:0px; }

/* Festlegung der Breite und der unteren Abstände der Bereiche auf der Seite */

td.Trennlinie { border-bottom-width:1px; border-bottom-style:dashed; border-bottom-color:#374b5e;  }

div.dummy      { clear:both; }
div.Trennlinie { clear:left; margin-top:0px; margin-bottom:10px; padding:0px; border-bottom-width:1px; border-bottom-style:dashed; border-bottom-color:#BDBDBD; height:10px; }
div.bild       { width:120px; height:90px; margin-right:10px; float:left; }
div.abstand    { height:15px;}

/* rechtsbüdiger Absatz */
.rechtsbuendig { text-align:right; }
.linksbuendig  { text-align:left;  }

table.ablauf    { border-collapse:collapse; border-width:1px; border-style:solid; border-color:#374b5e; }
table.ablauf td { padding:5px; border-width:1px; border-style:dashed; border-color:#374b5e; }
table.ablauf th { padding:5px; border-width:1px; border-style:dashed; border-color:#374b5e; text-align:center; font-weight:bold; }