/* ---------- Top Elements ----- */ html {overflow-y: scroll;} /* ---------- Body ----- */ body { /* Fonts lokal gehostet: https://google-webfonts-helper.herokuapp.com/fonts/*/ font-family: 'Source Sans Pro', 'Open Sans', 'PT Sans', 'Roboto', 'Ubuntu', Arial, sans-serif; font-size: 16px; font-weight: normal; margin: 0 0 0 0; background: #f7f7f7 url(img/body-bg.jpg) repeat-x fixed; } /* ---------- Farben ----- */ body {color: #000000;} /* Standardschriftfarbe */ h1, h2, h3, h4, h5, h6 {color: #203e98;} /* Ueberschriften */ a {color: #203e98;} /* Links */ a:hover, a:focus {color: #6192bb;} /* Selektierte und aktive Links */ /* ---------- Schriftgroessen festlegen ----- */ /* ** H1 - H6 nochmnal pruefen. Ist weiter unten auch nochmal definiert !! */ h1, h2, h3, h4, h5, h6 {font-weight: normal; line-height: 1.3; margin: 0.5rem 0; clear: both;} h1 { font-size: 2rem; } h2 { font-size: 1.8rem; } h3 { font-size: 1.6rem; } h4 { font-size: 1.4rem; } h5 { font-size: 1.1rem; } h6 { font-size: 0.9rem; } /* ---------- Rahmen ----- */ hr {border: none; border-bottom: 1px dotted #ccc; clear: both; padding-top: 5px;} address {border-left: 6px solid #203e98;} blockquote {border: 1px solid #203e98;} input, select, textarea, blockquote {border: 1px solid #203e98; background: #eee;} area, usemap, a img {border:0;} input[type="image"] {border: none; background: transparent;} /* ---------- Groessen ----- */ pre {max-height: 500px; z-index: 1;} /* z-index = Patch fuer Schattenwurf Prism Design 'coy'*/ /* ---------- Links ----- */ a {text-decoration: none;} a:hover, a:active, a:focus {outline: 0;} /* ---------- Sizes, margins and some styles----- */ p {margin-top: 1.0rem; margin-bottom: 1.0rem;} h1, h2, h3, h4, h5, h6 {font-weight: normal; margin: 0 0 10px 0; padding: 0 0 0 0;} li {padding-bottom: 4px;} /*ul {margin-top: 0; margin-bottom: 10px; margin-left: 0.7em; padding-left: 0.7em;}*/ ul li {list-style-image:url(img/li_pfeil.png);} ol {margin-top: 0; margin-bottom: 10px; margin-left: 0.9em; padding-left: 0.9em;} address {line-height:120%; margin: 10px 0 20px 0; padding-left: 10px; font-style: normal; font-weight: bold;} blockquote {padding: 10px; margin: 0 0 20px 0;} /* ---------- Icons fuer Dokumenten Links (automatisch) ----- */ a[href$=".pdf"] {background: url(img/pdficon12.png) no-repeat; padding-left: 20px;} a[href$=".doc"] {background: url(img/word.png) no-repeat; padding-left: 20px;} a[href$=".docx"] {background: url(img/word.png) no-repeat; padding-left: 20px;} a[href$=".xls"] {background: url(img/excel.png) no-repeat; padding-left: 20px;} a[href$=".xlsx"] {background: url(img/excel.png) no-repeat; padding-left: 20px;} /* ---------- Symbole für optionale Kennzeichnung von Links (manuell) ----- */ a.link_member { background-image: url(img/link_member.gif); padding-left: 19px; background-repeat: no-repeat; background-position: left;} a.link_extern { background-image: url(img/link_extern.gif); padding-left: 15px; background-repeat: no-repeat; background-position: left;} a.link_intern { background-image: url(img/link_intern.gif); padding-left: 15px; background-repeat: no-repeat; background-position: left;} a.link_download { background-image: url(img/link_download.gif); padding-left: 15px; background-repeat: no-repeat; background-position: left;} a.link_pdf { background-image: url(img/link_pdf.gif); padding-left: 20px; background-repeat: no-repeat; background-position: left;} a.link_mail { background-image: url(img/link_mail.gif); padding-left: 15px; background-repeat: no-repeat; background-position: left;} /* ---------- Table standard. ----- */ table {clear: both; border-collapse: collapse; border: none;} table td {vertical-align: top; } /* ---------- Table aufbereitet. ----- */ table.table {border-top: 1px solid #ccc; margin:0; width:100%; font: 0.85em;} table.table caption {font-size:1.1em; text-align: left;} table.table th, table.table td {font-size:0.9em; padding: 5px 0 5px 5px; text-align: left; vertical-align: top; border-bottom: 1px solid #ccc;} table.table th {background-color: rgba(100, 100, 100, 0.2);} table.table tbody tr:nth-of-type(odd) {background-color: #ffffff;} /* Jede zweite Zeile etwas dunkler */ table.table tbody tr:hover td {background-color:#d3d7cf;} /* Farbwechsel */ table.table {box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.1);} /* Schatten um Tabelle */ /* ---------- Bilder allgemein und Schatten ----- */ img {max-width:100%; height: auto;} img.shadow {box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.1);} /* hor, ver, blurradius, spread. rgba(rgb,alpha)*/ img.small {max-height: 250px;} img.smal {max-height: 250px;} /* Kompatibilitaet zur vorigen Version mit dem Schreibfehler :-) */ img.left {float: left; padding: 0; margin: 0px 15px 0px 0px;} img.center {margin: 1em auto; width: auto !important; display: block;} img.right {float: right; padding: 0; margin: 0px 0px 0 15px;} @media screen and (max-width:600px) { img {max-width:95%; padding: 0; margin: 1em 0 0 0; float: none;} } /* ---------- Spezielle Groessenanpassungen in Inhaltselementen. ----- */ img.picfull {width:100%; height: auto;} /* immer zu 100% fuellend */ @media screen and (min-width:640px) { img.pic2left, img.pic3left, img.pic4left { float: left; margin: 0 1em 1em 0; height: auto; } img.pic2right, img.pic3right, img.pic4right { float: right; margin: 0 0 1em 1em; height: auto; } img.pic2left {max-width: 49%;} /* halb */ img.pic2right {max-width: 49%;} img.pic3left {max-width: 32%;} /* drittel */ img.pic3right {max-width: 32%;} img.pic4left {max-width: 24%;} /* viertel */ img.pic4right {max-width: 24%;} } @media screen and (max-width:640px) { img.pic2left, img.pic3left, img.pic4left, img.pic2right, img.pic3right, img.pic4right { margin: 1em 0; width: auto; float: none; height: auto; } } /*---------- Spezielle Auszeichnungen fuer Absaetze ----- */ /* Großbuchstaben, kleine Schrift, Rahmen drunter */ p.title1 {padding: 0 0 0.42857em; border-bottom: 1px solid #e8e8e8; font-weight: 400; letter-spacing: 0.07143em; color: #8a8a8a; text-transform: uppercase;} /* Schwarzer Text auf grauem Hintergrund (Balken) */ p.title2 {font-weight: 400; text-align: center; color: black; background-color:#c3c3c0; height:18px; padding: 2px 0px 2px 0px; margin: 0px 0px 0px 0px;} /* Verschiedene Boxtypen */ p.box01 {background: #dcdcd9; padding: 6px 12px; border: 4px double #999;} p.box02 {background: #dcdcd9; padding: 6px 12px; border: 4px solid #999;} p.box03 {background: #dcdcd9; padding: 6px 12px; border: 1px solid #999;} p.box04 {background: #dcdcd9; padding: 6px 12px;} /*---------- Messageboxen und Standalone-Icons vom Typ info, tip, warn und note ----- */ /* Gemeinsamkeiten Boxen und Icons */ div[class*="msgbox-"] { border: 1px solid #ccc; margin: 10px 0 1em 0; min-height: 20px; padding: 10px 10px 10px 25px; position: relative; box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.1); border-radius: 5px; } span[class*="msgbox-"] {font-family: "FontAwesome"; font-size: 1.5rem; position: absolute; left: 7px; top: 7px;} div[class*="msgbox-"] p {margin: 0; padding: 0 0 0 10px;} /* Die Icons fuer die Msgbox */ span.msgbox-info::before {content: "\f05a"; color: #3465a4;} span.msgbox-tipp::before {content: "\f058"; color: #14892c;} span.msgbox-warn::before {content: "\f057"; color: #cc0000;} span.msgbox-note::before {content: "\f06a"; color: #f57900;} /* Rahmen- und Hintergrundfarbe fuer die Boxen */ div.msgbox-info {background-color: #fcfcfc; border-color: #aab8c6;} div.msgbox-tipp {background-color: #f3f9f4; border-color: #91c89c;} div.msgbox-warn {background-color: #fff8f7; border-color: #d04437;} div.msgbox-note {background-color: #fffdf6; border-color: #ffeaae;} /* Alleinstehende Icons */ span[class*="ico-"] {font-family: "FontAwesome"; speak: none; margin: 0; padding: 0; display: inline-block; font-size: inherit;} span.ico-info::before {content: "\f05a"; color: #3465a4;} span.ico-tipp::before {content: "\f058"; color: #14892c;} span.ico-warn::before {content: "\f057"; color: #cc0000;} span.ico-note::before {content: "\f06a"; color: #f57900;} /* ---------- Rahmen um Alles ----- */ .mainwrapper {max-width: 1340px; margin: 5px auto 0 auto; position: relative; box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1);} /* Standard MediaQueries: 1200px = Tablet Landscape - @media screen and (max-width: 1200px) { } 900px = Tablet Portrait u. Handy Landscape - @media screen and (max-width: 900px) {} 600px = Handy Portrait - @media screen and (max-width: 600px) {} */ @media screen and (max-width: 1200px) { .mainwrapper {margin: 0 auto 0 auto;} } /* ---------- Kopfbereich (.header) mit Site-Titel (.wstitle) und Kopfzeile (.wsheader) ----- */ /* ---------- Hinweis: Kann alternativ zum Topslider aktiviert werden. Ist derzeit deaktiviert ----- */ .header {float: left; width: 100%; margin: 0 0 0 0; padding: 0 0 0 0; min-height: 150px; /* Hier passend zur Hoehe des Bildes setzen */ /* Aktivieren der Background-Color. Verdeckt den Slider background-color: #ccc; */ } .header .wstitle {padding: 30px 0 0 20px; margin: 0 0 0 0; font-size: 48px; color: #ffffff; font-weight: bold;} .header .wsheader {padding: 0 0 0 20px; margin: 0 0 0 0; font-size: 18px; font-weight: bold; font-style: italic; color: #ffffff;} @media screen and (max-width: 600px) { .header {padding: 0; min-height: 90px;} .header .wstitle {padding: 10px 0 0 5px; width: 90%; font-size:100%;} .header .wsheader {padding: 0 0 0 5px; font-size:80%; width: 90%; line-height: 15px;} } /* ---------- Mainbox (.mainbox) umschliesst .Leftbox- und die .Contentboxen ----- */ .mainbox {float: left; width: 100%; min-height: 600px; border-top: 1px dotted #ddd; border-bottom: 1px dotted #ddd; margin: 0; padding: 0; background: #f4f6f5;} /* ---------- Box linke Seite (.leftbox). Umschliesst Menubox, Suche und Infobox. ID wegen showmenu()! ----- */ .leftbox {float: left; width: auto; max-width: 20%; height: auto; padding: 0 0 0 0;} .leftbox {display: block;} /* Box sichtbar. aus bei Mobile */ @media screen and (max-width: 900px) { .leftbox {max-width: none;} } /* ---------- Box fuer Menue, Suche, Content, Login-Logout ----- */ .menubox{padding: 15px 0 10px 5px;} /* ---------- Suche ----- */ .search_box {clear: both; padding: 5px 0 0 10px;} .search_box input.search_string {width: 75%; color: #555; padding: 2px 2px 2px 2px; border: 1px solid #999; background-color: #f7f7f7;} .search_box input.search_submit {padding: 0 0 0 5px; vertical-align: middle;} /* ---------- Symbole f. Login/Logout/Edit Page ----- */ .login {float: left; padding: 10px 0 0 15px; font-size: 15px; width: 100%;} .login span {padding: 0 10px 0 0;} .login a:hover {text-decoration: none;} .login p.display_name {margin: 0 0 0 0; padding: 0 0 0 0; font-size: 0.9rem; font-style: italic;} /* ---------- Content (Alle Bereiche) ----- */ /* Box fuer Informationen unter dem menue (Nicht im Druck!) */ .infobox {float: left; min-height: 10px; font-size: 85%; width: 90%; padding: 10px 10px 10px 10px; margin: 5px 5px 0 5px; border-top: 1px dotted #ccc;} /* Kleinere Darstellung im linken Bereich */ .infobox li {list-style-image: none;} .infobox ul {margin: 5px 0 0 10px; padding: 0;} /* umschliesst alles fur content */ .contentbox {float: left; width: 100%; max-width: 78%; min-height: 500px; margin: 5px 0 5px 0; padding: 0 0 0 10px; border-left: 1px dotted #ccc;} /* Oberer Bereich gesamte breite */ .contenttop {float: left; width: 100%; border-bottom: 1px dotted #ccc; margin: 0 0 10px 0;} /* Content hat volle Breite, wenn Sidebar keine Daten hat */ .contentfull {float: left; width: 98%; padding: 0; margin: 0;} /* Content wird schmaler, wenn Sidebar Daten hat */ .contentsmall {float: left; width: 70%; padding: 0; margin: 0;} /* Sidebar rechts. Ist nur aktiv wenn Daten dafuer vorhanden sind */ .contentside {float: right; font-size: 14px; width: 27%; padding: 0 0 0 5px; margin: 0;} /* Unterer Bereich gesamte Breite */ .contentbottom {float: left; width: 95%; padding: 10px 0 0 0; margin: 10px 0 0 0; border-top: 1px dotted #ccc;} @media screen and (max-width: 900px) { .contentbox {width: 100%; max-width: 99%; margin: 0 0 0 0; padding: 0 0 0 10px;} } /* Sidebar floating beachten!! ...*/ @media screen and (max-width: 600px) { .contenfull, .contentsmall {padding: 5px 10px 0 0; border: none; width: auto; max-width: 92%;} .contentside {float: left; width:92%; border-top: 1px dotted #ccc; margin: 15px 0 0 0;} } @media screen and (max-width: 600px) { .contentbox h1 {font-size: 1.5rem; } .contentbox h2 {font-size: 1.2rem; line-height: 20px; padding: 15px 0 0 0;} .contentbox h3 {font-size: 1.0rem;} .contentbox h4 {font-size: 0.9rem;} .contentbox p {font-size: 0.9rem; line-height: 20px;} .contentbox em {font-size: 0.9rem;} .contentbox li {font-size: 0.9rem; line-height: 15px; padding: 15px 0 0 0;} } /* ---------- Fusszeile ----- */ .footer {clear: both; float: none; margin: 0 0 0 0; width: 100%; background-color: #ffffff;} .footer p {font-size: 0.7rem; text-transform: uppercase; color: #8a8a8a; padding: 5px 0 5px 5px;} .footer a {color: inherit;} /* von .footer

*/ @media screen and (max-width: 900px) { .footer p {font-size: 9px; padding: 0 0 0 2px;} } /* ---------- Specials ----- */ .clearer {clear: both; } /* wird bei Suchergebnissen gesetzt */ .highlight {background-color: yellow;} /* ---------- Back-To-Top Icon See also: Scroll Back ToTop - Button in template.js ----- */ a.back-to-top {padding: 0 1em; border: 0; position: fixed; bottom: 30px; right: 5px; font-size: 32px; text-decoration: none;} /* ---------- Modul onebyone ----- */ .obo_grid .obo_unit {padding: 0 10px 10px 10px ;} /* padding 'oben' auf 0 passt besser */ /* ---------- Modul miniform ----- */ /* Bestaetigung auf ThankYouPage (Template email.htt angepasst!) */ div.email table {float: left; max-width: 92%; border: none;} div.email td {border: none;} /* ---------- Modul Topics ----- */ /* Topics - Definitionen Kopfzeile : .hideOnDesktops (PICTURE und TOPIC_SHORT) Fusszeile : .hideOnDesktops .showOnTablets (SEE_ALSO und SEE_preparnxt) Block2 : .showOnMobiles (Gesamter Block2) */ .hideOnDesktops {display: none;} .showOnMobiles {display: block;} @media (max-width: 600px) { .hideOnDesktops {display: block;} .showOnMobiles {display: none;} .showOnTablets {display: block;} } /* ---------- Modul Accordion ----- */ .wb-accordion .accordion-content {padding: 10px 0 15px 0;} .wb-accordion .accordion-title a:link {font-weight: normal;} .wb-accordion .accordion-title a:hover {color: #6192bb;} @media screen and (max-width: 600px) { .wb-accordion .accordion-title a:link {line-height: 15px; padding: 15px 0 15px 0; font-size: 0.9rem;} .wb-accordion .accordion-content {padding: 0 10px 0 10px;} } /* ---------- Droplet SiteMapChild ----- */ li span.sitemapcontent a {font-weight: normal;} /* ---------- Spezialitaeten fur mobile Navigation ----- */ .mobiletop {height: 60px; float: right;} .mobiletop {display: none;} /* Schalter Hamburgermenue (aus) */ .mobiletop a {display: block; float: right; font-size: 40px; text-decoration: none; outline: none; margin: 0 0 0 0; padding: 0 10px 0 0;} @media screen and (max-width: 900px) { /* Ausschalten leftbox fuer mobiles Menue und einschalten mobiletop */ .mobiletop {display: block;} /* Schalter Hamburgermenue (ein) */ .leftbox {position: absolute; top: 0; left: 0; z-index: 50; float: none; width: 250px; margin: 0; box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.3); background: #e9e9e9;} .leftbox {display: none;} /* Box auf unsichtbar. Wird durch js (showmenu()) wieder eingeblendet */ .leftbox .menubox {padding: 10px 15px 10px 10px;} } /* ---------- Brotkruemel-Navigation ----- */ .breadcrumb {text-align: left; min-height:15px; font-size: 70%; font-weight: normal; padding: 0; float: none;} /*---------- Previous - Parent - Next ----- */ .preparnxt {text-align: center; font-size: 80%; font-weight: normal; padding: 0; margin: 0 0 5px 0; width: 100%; min-height: 10px; line-height: 10px; float: left;} /*---------- Anzeige der Unterseiten ----- */ .subpages {} /* Derzeit gilt der Standard f.

  • und