/* -- Allgemeines -- */
body {
 background: white;                        /* Der Browserhintergrund ist erst mal weiß */
 color: black;                             /* Schrift schwarz, wird weiter unten überlagert. */
 margin: 0;
 padding: 0;
 text-align: center;                       /* Zentrierung des containers für den IE. */
 font-size: 100.01%;                       /* Umgeht den Font-Size-Bug im Safari, älteren Operas und IE */
 font-family: verdana, arial, sans-serif;  /* Alle Texte ohne Serifen darstellen. */
}

.skip { /* Da ein wichtiger Screenreader das display: none; auch fälschlicherweise für sich versteht und nichts vorließt obwohl das hier sich vor allem an Blinde richtet, muss man es so lösen dass man diesen Link außerhalb des Sichtfeldes bringt. Somit wird er trotzdem vorgelesen. */
 position: absolute;
 margin-left: -10000px;
}
td {
 line-height: 1em;
}
th {
 line-height: 1em;
 text-align: left;
}
hr {
 margin: 30px 0px;
 height: 1px;
 background-color: #CCCCCC;
 color: #CCCCCC;
 border: 0px;
}

/* -- Layoutspezifisches -- */
#container {                               /* Das ganze Layout soll als Blatt auf der Seite "schweben". */
 width: 749px;                             /* Eine feste Breite. */
 background: url(backgrnd.png) #FAFAFA;    /* Hintergrundbild für den senkrechten Strich. (Hintergrund ist etwas grau, wenn Bild nicht lesbar sein sollte.) */
 background-repeat: repeat-y;
 margin: 0 auto;                           /* Hiermit zentrieren wir unsere Seite (außer im IE). */
 text-align: left;                         /* Ausgleich der Zentrierung für den IE im Body-Tag */
 padding: 0px 0px;                         /* Platz fuer den Rahmen aus dem Hintergrundbild. */
  /*border: 1px solid red;                   /* zu Testzwecken */
}

/* - Der Kopfbereich besteht aus einem ueber die ganze Breite laufenden Bild. - */
#logo {
 width: 737px;                             /* Die Breite des Bildes gibt die Breite für den Kopf vor. */
 height: 204px;                            /* Die Höhe des Bildes (plus 1 Pixel fuer den Rand). */
 margin: 0px 6px;                          /* Manche Browser haben 0px voreingestellt aber nicht alle; deshalb vereinheitlichen wir das. */
}
#logo a img {
 width: 737px;                             /* Die Breite des Bildes ist fix. */
 height: 203px;                            /* Die Höhe des Bildes ist fix. */
 border: 0px;
 border-bottom: 1px solid #0E318C;         /* Eine optische Abgrenzung zum Body. */
}

/* - Rechte Spalte - für Menu und Info - */
#right {
 width: 250px;                             /* Feste Breite der Spalte, damit es zu dem senkrechten Schnitt passt. */
 float: right;                             /* Damit erreichen wir, dass der Inhalt links neben der Navigation vorbeifließt und nicht erst unten drunter anfängt. */
 background-color: #fff;                   /* Hintergrund der rechten Spalte soll weiß sein, falls das background-image des containers versagt. */
 color: #777777;                           /* Texte in etwas hellerem grau als der Hauptfließtext */
 margin: 0px 6px;
 padding: 0px;
  /*border: 1px solid green;                 /* zu Testzwecken */
}
#right a {                                 /* Die Links sollen - nur hier in der rechten Spalte - der Textfarbe entsprechen. */
 color: #777777;
 text-decoration: none;
}
#right a:hover, #right a:active, #right a:focus {
 color: black;                             /* Beim Überfahren (oder fokussieren) werden Links schwarz... */
 text-decoration: underline;               /* ... und unterstrichen. */
}
#right h3 {                                /* Ueberschriften sollen in einem Balken dargestellt werden. Die Hintergrundfarbe folgt weiter unten. */
 padding: 5px 20px;
 margin: 0px;
 margin-top: 20px;
 font-size: 0.9em;
 color: #333333;                           /* Farbe dunkelgrau (Hintergrundfarbe weiter unten differenziert) */
}
#right h3 a {
 color: #333333;                           /* Links dunkelgrau (wie alle anderen h3-s rechts) */
}
#right ul {
 margin: 0px;
 padding: 0px;
  /*border: 1px solid yellow;*/
}
#right ul li {                             /* Die einzelnen Links in der Navigation */
 list-style-type: none;                    /* Die Bullets vor den Menüpunkten schalten wir ab. */
 margin: 0px;
 padding: 3px 20px;
}
/* - Navigation/Menü - */
#menu {
 margin: 20px 8px 0px 12px;
  /*border: 1px solid red;                   /* zu Testzwecken */
}
#menu h3 {
 background-color: #CCCCCC;                /* Hintergrund grau */
}
#menu ul li {
 border-top: 1px solid #CCCCCC;            /* Eine optische Trennungslinie zwischen den einzelnen Bereichen der Navigation. */
 font-size: 0.8em;                         /* Links verkleinert darstellen. */
/* font-weight: bold; */
/* color: #283F89;                           /* Die aktuelle Seite in Blau hervorheben. */
}
#menu ul li.navi_act a, #menu ul li.navi_cur {
 color: #283FC0;                           /* Die aktuelle Seite in Blau hervorheben. */
}
/* - Infos (unterhalb des Menüs) - */
#info {
 margin: 20px 8px 0px 12px;
  /*border: 1px solid red;                   /* zu Testzwecken */
}
#info h3 {
 background-color: #939FC4;                /* Hintergrund der Überschriften blau */
}
#info li {                                 /* Aufzählungen (von Links) kommen klein und fett daher */
 font-size: 0.6em;
 font-weight: bold;
 padding-left: 20px;
}
#info p {                                  /* Normaler Fließtext in der Infospalte */
 font-size: 0.7em;
 padding-left: 20px;
}


/* - Rootline (Klickpfad) - */
#rootline {
 margin: 4px 300px 4px 40px;               /* Ränder passend zum #main */
 font-size: 0.7em;                         /* Verkleinert darstellen. */
 color: #666666;                           /* Farbe für die Trennzeichen ">" */
  /*border: 1px solid red;                   /* zu Testzwecken */
}
#rootline2 {
 padding-left: 30px;                       /* Ränder passend zum #main */
}
#rootline a {
 text-decoration: none;
 color: #666666;                           /* Text wie die Trennzeichen im helleren dunkelgrau */
}
#rootline a:hover, #rootline a:active, #rootline a:focus {
 text-decoration: underline;
 color: black;                             /* Beim Überfahren werden Links schwarz. */
}
#rootline span.rline_cur {
 color: #FF9900;                           /* Die aktuelle Seite in Orange hervorheben. */
}


/* - Der Hauptinhaltsteil - */
#main {
 margin: 30px 300px 10px 40px;             /* Der rechte Abstand 300px stellt sicher, dass auch nach dem Umfließen der Navigation der Text genau so breit wird wie oben und ein zwei Columnen Eindruck entsteht. */
 font-size: 0.8em;                         /* Ein Kompromiss über den man sicherlich streiten kann, aber viele Leute empfinden die von Ihnen selbst eingestellte Textgröße für zu groß, wissen aber nicht wie man das ändert. */
 line-height: 1.5em;                       /* Zur besseren Lesbarkeit erhöhen wir den Zeilenabstand. */
 color: #333333;                           /* Fließtext in dunkelgrau */
  /*border: 1px solid red;*/
}
h1, h2, h3, h4, h5, h6 {                   /* Alle Überschriften in blau */
 color: #283F89;                           /* BK-blau wäre #0E318C */
 font-family: "Lucida Grande", verdana, trebuchet, arial, sans-serif ; /* Ohne Serifen darstellen. */
}
#main h1, #main h2 {                       /* Die Abschnittsüberschriften werden in Boxen dargestellt. */
 background: #FFFFFF;                      /* Hintergrund der Boxen ist weiß. */
 padding: 18px 10px;                       /* Die Boxen haben einen großzügigen Abstand zum Text */
 border: 1px solid #CCCCCC;                /* Grauer Rand der Boxen */
 border-top: 4px solid #283F89;            /* Oben ein dicker blauer Rand */
 margin-top: 30px;                         /* Deutlicher Abstand zum vorhergehenden Absatz */
 font-size: 1.4em;                         /* Große Schrift */
}
#main h3 {
 margin-top: 30px;                         /* Deutlicher Abstand zum vorhergehenden Absatz */
 margin-bottom: 0px;                       /* Kleiner Abstand zum nachfolgenden Absatz */
 font-size: 1.1em;
}
#main h4 {
 margin-top: 30px;                         /* Deutlicher Abstand zum vorhergehenden Absatz */
 margin-bottom: 10px;                      /* Kleiner Abstand zum nachfolgenden Absatz */
 font-size: 1.0em;
}
#main a {                                  /* Alle unbesuchten Links bekommen eine blaue Farbe und werden unterstrichen, damit man Sie gleich im Text erkennt. */
 color: #283F89; 
 text-decoration: underline;
}
#main a:visited { 
 color: #666666;                           /* Besuchte Links werden heller grau. Somit erkennt man wo man sich schon befunden hat. */
}
#main a:hover, #main a:active, #main a:focus {
 color: black;                             /* Beim Überfahren werden Links schwarz. */
}
#main a.external-link-new-window:before, #main a.external-link:before { 
 content: "\2197\00A0";                    /* Pfeil vor externen Links */
}
#main a.download:before { 
 content: "\274F\00A0";                    /* Download-Links */
}
#main a[href$=".pdf"]:before {             /* PDF-Links */
 content: url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%0C%00%00%00%0A%08%03%00%00%01%C0%F5%7F%5E%00%00%03%00PLTE%00%00%00%00%00%FF%001%D6%00k%AD%08%9C%84%10%94%7B!%8C%7B!%AD%94)%B5%A59sk9%BD%A5B%BD%ADR%C6%ADR%C6%BDZZZs%CE%BD%84%D6%D6%AD%DE%D6%BD%EF%FF%CE))%CE99%CEJJ%D6ZZ%D6%7B%7B%DE%9C%9C%DE%B5%B5%E7%C6%C6%E7%E7%E7%EF%EF%EF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%FF%0F%EAw%84%00%00%00%09pHYs%00%00%0B%12%00%00%0B%12%01%D2%DD~%FC%00%00%00%09tEXtComment%00%00%89*%8D%06%00%00%00LIDATx%9C5%8A%C1%01%C00%08%02%D9AML%D0%FD%D7%AC%DA%96%CFy%08%22%C1D%80%A0%143%E1%E5%B4%BAc%B1%F4%F8%F2lC6h%98%F24%FCJ%83%DC%98I%C4%EE%F7%0C%83W%17%C7%60%A2%22%FB%13V%5C%F5%95%3F-%0F%FF%09%0A%B1%DB%A1%EEp%00%00%00%00IEND%AEB%60%82");
}
#main img {                                /* alle Bilder bekommen einen Abstand */
/* border: solid 1px #aaa;
 padding: 5px;
/* max-width: 95%;                           /* gute Broser machen ein zu großes Bild, welches das Design sprengen würde, funktioniert beim IE leider nicht */
}
div.csc-frame {                            /* Rahmen um spezielle Absätze zulassen */
 border: solid 1px #CCCCCC;
 background: #FFFFFF;                      /* Hintergrund der Boxen ist weiß. */
 padding-left: 20px;
 padding-right: 20px;
 margin-top: 20px;
 margin-bottom: 20px;
}
.csc-textpic-caption {                     /* Bildunterschriften verkleinert darstellen */
 font-size: 0.85em; 
 line-height: 1.4em;
}  

/* - Footer - */
#foot {
 clear: both;                              /* Damit das Hintergrundbild des containers bis nach unten läuft. */
 margin: 0px 6px;
 border-bottom: 1px solid #0E318C;         /* Eine optische Abgrenzung - vor allem wichtig falls nicht ganzseitig. */
}


/* - Hässliche Workarounds,, um das "clear: both" zu verhindern, dass Elemente erst unterhalb der rechten Menuspalte beginnen lässt. - */
DIV.csc-textpic DIV.csc-textpic-left DIV.csc-textpic-above DIV.csc-textpic-border { clear: left; }
DIV.csc-textpic-imagewrap { clear: left; }
DIV.csc-textpic-image DIV.csc-textpic-firstcol DIV.csc-textpic-lastcol { clear: left; }
DIV.csc-textpic-clear { clear: left; }
#main h1, #main h2 { clear: left; }

<!-- 27.10.2006 Jens Malmstroem -->