body {
  margin:0;
  padding:0;
  background-color:#fff;
  font-family: Verdana, Arial, sans-serif;     /* wird Verdana nicht gefunden wird Arial probiert, weird das auch nicht gefunden, wird die standard-serifenlose schriftart genommen */
  font-size:0.7em;
}

#container {       /* das div um alles mittig auszurichten */
  margin: 0 auto 26px;  /* abstand nach oben: 26pixel; abstand zu den seiten: selbst bestimmen */
  width: 758px;    /* breite der weissen box (sollte unter 800 sein für leute mit dieser auflösung) */
  text-align: left;/* alles darunter bitte links ausrichten */
  border-color:#093;
  border-style:solid;
  border-width:0px 1px 1px 1px;
  background-color:white;
}

#header {
  white-space:nowrap;
  border-bottom:3px solid #093;
  height:119px;
  text-align:right;
  font-family:Arial, sans-serif;
}

/* logo im header mit schriftzug */
#header_logo {
  float:left;
  text-align:left;
  padding-left:15px;
  padding-top:67px;
}
#header_logo img {
  padding-left:3px;
}
#header_logo h2 {
  font-size:11px;
  margin:3px;
  color:black;
  font-weight:normal;
  font-style:normal;
  letter-spacing:1px;
}
#header_logo h1 {
  font-size:16px;
  margin:3px;
  color:#093;
  font-weight:bold;
  font-style:normal;
}

img { border:0px none transparent; }

#header img.header_bilder {
  border:1px solid #093;
  border-style:solid solid none;
  margin-right:10px;
  margin-top:18px;
}
#header img.header_bilder#header_bilder_letztes {
  border-right-style:none;
  margin-right:0;
}

/* die #header_linie ist ein leeres <div>, das den ersten
   farbstreifen zwischen header und menü darstellt */
#header_linie {
 background-color:#DCE4F7;
 height:2px;
 overflow:hidden;
}

/* #menu_top ist die leiste oben, mit den vier links */
/* die border-top-eigenschaft ist der zweite farbstreifen */
#menu_top {
  border-top:1px solid #183E77;
  background-color: #409D40;
  margin-top: 0px;
  padding-top:8px;
  padding-left:321px;
}

#menu_top table {
  table-layout:fixed;
}
#menu_top td {
  border-left:1px solid white;
  width:111px;
  height:14px;
}
#menu_top td#menu_top_letztes {
  width:80px;
}

#menu_top td a {
  text-transform:uppercase;
  color:white;
  font-weight:bold;
  font-size:11px;
  text-decoration:none;
  display:block;
  position:relative; /* das verschiebt den link um einige pixel nach oben, */
  top:-1.5px;        /* weil er normalerweise in der leiste zentriert stehen würde */
  margin-left:6px;
}
/* eigenschaften für links im menü in dem grünen balken (Start,Kontakt,...) wenn die maus drüber ist, oder die seite aufgerufen ist */
#menu_top td a:hover,
#menu_top td.menu_aktiviert a {
  color:#9F9;
}
/* für den IE den menütext ein pixel weiter runter, da er den sonst abschneidet (Bug)  */
* html #menu_top td a { margin-top:-3px; }

#body {
  min-height:340px;
  background:white url(pix/bg.gif);
  background-repeat:repeat-y;
  position:relative;
}
/* der IE benötigt eine mindesthöhe für den inhalt, falls einmal
   sehr wenig text drinsteht, andernfalls würde der footer zu weit hochwandern */
* html #body {
  height:550px;
}



#menu_left {
  float:left;
  width:180px;
  height:100%;
  background-color:#F0F0F0;
  border-right:1px solid #E5E5E5;
  margin-right:7px;
}
#menu_left ul {
  margin:0;
  padding:0;
  padding-left:16px;
  margin-top:38px;
  list-style-type:none;
  list-style-image:url();
}

/* Mozilla hat probleme mit den Haken, daher werden sie für Ihn als Hintergrundbild eingesetzt */
html>body #menu_left ul li a {
 margin-left:-12px;
 padding-left:12px;
 background:url(pix/list_bullet.png) no-repeat;
}
/* IE bekommt die haken normal als list-style-image */
* html #menu_left ul li {
 display:inline;
 list-style-image:url(pix/list_bullet.png);
}

#menu_left ul li.menu_left_gap a {
  margin-top:43px;
}
#menu_left ul li a {
  font-size:10px;
  font-weight:bold;
  color:black;
  text-decoration:none;
  display:list-item;
  margin-top:2px;
  text-transform:uppercase;
  line-height:170%;
}

/* aktive bzw berührte menüs grün */
#menu_left ul li a:hover,
#menu_left ul li.menu_aktiviert a {
  color:#093;
}
/* aktive und berührte menüs haben grüne haken */
/* für mozilla und co */
html>body #menu_left ul li a:hover,
html>body #menu_left ul li.menu_aktiviert a {
  background-image:url(pix/list_bullet_hover.png);
}
/* für IE */
* html #menu_left ul li a:hover,
* html #menu_left ul li.menu_aktiviert a {
  list-style-image:url(pix/list_bullet_hover.png);
}
/* ende grüne haken  */

#menu_left ul li ul li a {
  color:black !important;
}
/* aktivierte bzw berührte untermenüs */
#menu_left ul li ul li.untermenu_aktiviert a, #menu_left ul li ul li a:hover {
  color:#093 !important;
}
#menu_left ul li ul * {
  list-style-image:url() !important;
  background:none !important;
}

/* ausehen der untermenüs */
#menu_left ul li ul {
 display:none;
 background-color:white;
 border-top:1px solid #ccc;
 border-bottom:1px solid #ccc;
 margin:  16px 0 16px -16px;
 padding: 0px  0  3px  16px;
 width:100%;
}
#menu_left ul li.menu_aktiviert ul {
 display:block;
}

#menu_left ul li ul li a {
 font-weight:normal;
}

#content {
  border-left:1px solid #CCC;
  border-right:1px solid #CCC;
  padding:36px 32px 64px 38px;
  width:384px;
  min-height:600px;
  margin-left:3px;
  line-height:139%;
  font-size:12px;
}
head + body #content {
 overflow:auto;
}
#bilder_unten {
  border-left:1px solid #CCC;
  border-right:1px solid #CCC;
  width:335px;
  padding-left:119px;
  padding-bottom:11px;
  overflow:hidden;
  margin-left:191px;
  white-space:nowrap;
}
* html #bilder_unten  {
  margin-left:191px;
}
* html #content {
  margin-left:188px;  /* das übliche: extraabstand für den IE (drei pixel mehr nach links */
}
#content.iframeseite {
 padding:0;
 padding-bottom:1.5cm;
 width:454px;
}

/* die rechte spalte im layout */
#right {
  text-align:right;
  font-size:9px;
  float:right;
  width:112px;
  padding:0;
  padding-top:27px;
  position:absolute;
  right:0px;
  top:0px;
  background:url(pix/bg_rechts_weiss.png) no-repeat 0px 0px;
}

#right img {         /* die bilder in der rechten spalte */
  border:1px solid #CCC;
  border-right-style:none;
  margin-top:10px;
}
#right img#icon {    /* das bild mit dem text */

}
#bilder_unten img.mini {    /* logobilder unten */
  border:1px solid #CCC;
  margin-left:10px;
}

#start img#bild {         /* das Bild auf der Startseite, evi */
  border:1px solid #CCC;
}


#footer {
  background-color:#409D40;
  padding:5px;
  padding-top:6px;
  height:13px;
}
#footer #footer_copyright {
  float:left;
  display:block;
  color:#8FC385;
  font-size:11px;
  font-weight:bold;
}
#footer #footer_link_top {
  float:right;
  display:block;
  text-transform:uppercase;
  color:white !important;
  font-weight:bold;
  font-size:11px;
  text-decoration:none;
  padding-right:2px;
}

#designimbusch a:link,
#designimbusch a:visited {
        text-decoration:none;
        color:#333;
}
#designimbusch a:hover {
        color:#093;
}


/* iframe für externe seiten */
iframe#iframe_inhalt {
 width:100%;
 height:600px;
 border-style:none;
}


/* allgemeine stile */
p {
 font-size:1.0em;
 margin-bottom:2em;
}

p.enger {
 font-size:1.0em;
 margin-bottom:0.5em;
}


/* normale links in zwei klassen */
a {
  color:#093;
  text-decoration:none;
}
a.schwarz {
  color:black;
}

/* die überschriften */
/* seitenhaupttitel (oben links) */
h1 {
  font-size:1em;
  font-weight:bold;
  color:#093;
  margin-bottom:2em;
}
/* schwarze überschriften der einzelnen seiten */
h1.schwarz {
  color:black;
}
h1.rot {
  color:#cc0000;
}
/* zwischenüberschriften */
h2 {
  font-size:1em;
}
/* grüne zwischenüberschriften */
h2.gruen {
  font-size:1em;
  font-weight:bold;
  color:#093;
}

h3 {
  font-size:1em;
}

/* zwischenüberschrift in grauem balken */
h2.balken {
 padding:3px 40px;
 margin-left:-38px;
 margin-right:-32px;
 margin-top:32px;
 width:374px;
 color:#000;
 font-size:1.0em;
 background-color:#F0F0F0;
 border-top:   1px solid #CCC;
 border-bottom:1px solid #CCC;
}


hr {
 height:1px;
 color:#CCC;
}

/* allgemeine stile von formularelementen */
input, textarea {
 font-family: Verdana, Arial, sans-serif;
 /* schirtart muss hier nochmal angegeben werden, das der IE die seitenschriftart für formulare ignoriert */
 font-size:100%;
 /* schriftgröße so wie alles andere (manche browser machen sonst eine andre in formularen */
 border:1px solid #BBB;
 background-color:white;
 color:#333;
 padding:1px;
}
input:focus, textarea:focus {
 border:1px solid #093;
 background-color:#F0F9F3;
 color:#000;
 padding:1px;
}

button {
 color:#333;
 padding:3px;
 border: 1px outset #AAA;
 background-color: #FFF;
 font-weight:bolder;
}
button:hover {
 color:black;
 border-color: #999;
 background-color: #DDD;
}
button:active {
 border-style: inset;
}

/* pressemitteilungen */
.pressemitteilung {
  border-bottom:1px solid #C9C8C8;
  padding:10px 20px 36px 0px;
}
.letzte_pressemitteilung {
  border-bottom-style:none;
}
.pressemitteilung .presse_datum {
 font-weight:normal;
 font-style:normal;
 font-size:80%;
 color:#333;
}
.pressemitteilung h3 {
 margin:0;
 font-size:1.0em;
 font-weight:bold;

}
.pressemitteilung h4 {
 margin:0;
 font-weight:normal;
 font-style:normal;
 font-size:80%;
 color:#333;
 line-height:140%;
}

/* Trägerprofil und Satzung */
#traegerprofil h1, #traegerprofil h2 {
 text-align:center;
 font-size:140%;
 line-height:120%;
 margin-top:3em;
 color:black;
}
#traegerprofil h2, #traegerprofil h3, #traegerprofil h4 {
 font-size:100%;
 color:black;
}
#traegerprofil #profil_footer {
 font-size:8px;
 font-style:italic;
 line-height:110%;
 text-align:center;
 border-color:#093;
 margin-top:4em;
}
#traegerprofil #profil_header {
 font-size:9px;
 font-style:italic;
 line-height:110%;
 text-align:center;
}

#satzung h1, #satzung h2 {
 text-align:left;
 font-size:140%;
 line-height:120%;
 color:black;
}
#satzung h2 {
 font-size:110%;
 color:black;
 margin-top:2em;
}

#satzung ul, #satzung ol {
 margin-left:1em;
 padding-left:1em;
}
#satzung div {
 margin-bottom:1em;
}

/* Mitgliederliste */
#mitgliederliste li {
 margin-bottom:1em;
}

/* Linkliste */
.linkliste th img {
 border:1px solid #CCC;
 margin-right:18px;
 margin-top:3px;
}
.linkliste td, #linkliste th {
 vertical-align:bottom;

}
.linkliste td {
 padding-bottom:15px;
 border-bottom:1px solid #CCC;
}


/* einiges styles speziell für die bildungsangebotseite */
#bildungsangebot h2 {
  margin-top:72px;
}
#bildungsangebot h3 {
  margin-top:48px;
}
#bildungsangebot h4 {
  font-size:1em;
  font-weight:normal;
  color:#555;
  margin-top:0;
}

#bildungsangebot table.angebot td {
  border:1px solid #CCC;
  padding:2px;
}
#bildungsangebot table.angebot {
  border-collapse:collapse;
  width:100%;
}

#bildungsangebot table td, #bildungsangebot table th {
  vertical-align:top;
}
#bildungsangebot table ol {
  margin-top:0;
  margin-bottom:0;
}
#bildungsangebot table.kosten th {
  font-weight:normal;
  text-align:left;
  border-style:none;
}
#bildungsangebot table.kosten td {
  border-style:none;
}

/* belegungsformular */
p#belegungsformular_link {   /* der link unter den kontaktdaten */
 margin-top:3em;
}

#belegungsformular {
 padding:14px;
 background-color:#F0F0F0;
 border:1px solid #DDD;
}
#belegungsformular button {
 margin-right:5px;     /* abstand zwischen den beiden buttons */
}
#belegungsformular button#resetbutton {
 font-weight:normal;
}

#belegungsformular #belegungsformular_anfragedaten {
 border-top:1px solid #CCC;   /* graue linie zum oberen formularbereich */
 padding-top:2em;
 margin-top:2em;
}

#belegungsformular #belegungsformular_anfragedaten input,
#belegungsformular #belegungsformular_anfragedaten textarea {
 width:352px;
 display:block;
 margin-bottom:9px;
}
/* der IE macht das formular 2px zu breit...daher müssen die eingabefelder etwas schmaler sein */
* html #belegungsformular #belegungsformular_anfragedaten input,
* html #belegungsformular #belegungsformular_anfragedaten textarea {
 width:350px;
}
/* hinweis zumfeld ("zb zelt ..."), <samp></samp>  ist der html-tag für beispiele */
#belegungsformular #belegungsformular_anfragedaten samp {
 font-family: Verdana, Arial, sans-serif;
 /* schriftart muss wieder angegeben werden, da beispiele normalerweise in festbreitenschrift angezeigt werden */
 color:#AAA;
}</div>