/* ---------- Top Elements ----- */

html {
  overflow-y: scroll;
}

/* ---------- Body ----- */

body {
  font-family: 'Source Sans Pro', Arial, sans-serif; 
  font-size: 16px; 
  font-weight: 400;
  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: #17420B;
}  /* Ueberschriften */
a {
    color: #323232;
}                       /* Links */
a:hover, a:focus {
    color: #cccccc;
}        /* Selektierte und aktive Links */

/* ---------- Schriftgroessen festlegen ----- */

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;	
    line-height: 1.3;	
    margin: 0.5rem 0;
} 

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 #438032;}
blockquote {
    border: 1px solid #323232;
}
input, select, textarea, blockquote {border: 1px solid #203e98; background: #eee;}
area, usemap, a img {border:0;}
input[type="image"] {border:none; background: transparent;}
pre, code {
	text-align: left;
	overflow: auto;
	word-wrap: normal;
	border: 1px solid #cccccc;
	box-shadow: inset 0 0 .5em #cccccc;
	padding: .7em 1em;
	font-size: 14px;
	background-color: #fbfaf9;
}

/* ---------- Links, Bild im Absatz ----- */

a {text-decoration: none;}
a:hover, a:focus {text-decoration: underline;}
a:hover, a:active, a:focus {outline: 0;}
p img {max-width:100% ! important; height:auto;}

/* ---------- Sizes and margins ----- */

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; list-style-type: square;}
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_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: 20px 0 0 0; width:100%; font: 0.85em;}
table.table caption {font-size:1.1em; text-align: left;}
table.table th {font-size:0.9em; padding: 4px; text-align: left; vertical-align: top; background: rgba(100, 100, 100, 0.1); 
                border: none; border-bottom: 1px solid #ccc;}
table.table tbody td {font-size:0.9em; padding: 4px; border: none; border-bottom: 1px solid #ccc;}
table.table tbody tr:nth-of-type(2n) {background: none repeat scroll 0 0 #fff;} /* Jede zweite Zeile andere Farbe */
table.table tbody tr:hover td {background-color:#eee;}

/* ---------- Verschiedenes fuer Bilder ----- */

.picfull   {              max-width:100%;                        height: auto;}
.pic2left  {float: left;  max-width:48%; margin: 3px 3% 2px 0;   height: auto;}
.pic2right {float: right; max-width:48%; margin: 3px 0 2px 0.9%; height: auto;}
.pic3left  {float: left;  max-width:32%; margin: 3px 1.5% 2px 0; height: auto;}
.pic3right {float: right; max-width:32%; margin: 3px 0 2px 0.3%; height: auto;}
.pic4left  {float: left;  max-width:24%; margin: 3px 1% 2px 0;   height: auto;}
.pic4right {float: right; max-width:24%; margin: 3px 0 2px 0.5%; height: auto;}
@media (max-width: 900px) {
	.pic2left, .pic2right {max-width: 100%;  margin: 3px 0 2px 0;}
	.pic3left, .pic3right, .pic4left, .pic4right  {max-width: 49%;}
}
@media (max-width: 600px) {
	.pic2left, .pic2right {max-width: 100%;  margin: 3px 0 2px 0;}
	.pic3left, .pic3right, .pic4left, .pic4right  {max-width: 49%;}
}	

/*---------- Spezielle Auszeichnungen ----- */

/* 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;}

/* ---------- 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 .withlogo) mit Site-Titel (.wstitle) und Kopfzeile (.wsheader) -----  */

.header {
  float: left;
  width: 100%;    
  margin: 0 0 0 0;
  padding: 0 0 0 0; 
  min-height: 150px;
  /* Aktivieren der Background-Color. Verdeckt dann aber den Slider
  background-color: #ccc; 
  */
}

.header .wstitle {
  padding: 30px 0 0 20px;
  margin: 0 0 0 0;
  font-size: 48px;
  font-weight: bold;
 }
 
.header .wstitle a {
  text-decoration: none;
  color: #ffffff;
 }

.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 0 0 0;           
     min-height: 10px;
   }
  
   .header .wstitle {
    padding: 10px 0 0 5px;     
    width: 90%;   /* Button Mobilemenu */
    font-size:100%;
  }
  .header .wsheader {
    padding: 0 0 0 5px;
    font-size:80%;
    width: 90%; /* Button Mobilemenu */  
    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 0 0 0;
  padding: 0 0 0 0;
  background: #f4f6f5;
}

/* ---------- Box linke Seite (.leftbox). Umschliesst Menubox, Suche und Infobox. ID wegen showmenu()! -----  */

.leftbox {
  display: block; /* Box sichtbar. aus bei Mobile */
  float: left;
  width: auto;    
  max-width: 20%;
  height: auto;    
  padding: 0 0 0 0;    
}
@media screen and (max-width: 900px) {
  .leftbox {
    max-width: none;    
  }
}

/* ---------- Box fuer Menue und Suche -----  */

.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;
}

.login i {
  padding: 0 10px 0 0;
}

.login a:hover {
  text-decoration: none;
}

/* ---------- Content (Alle Bereiche) -----  */

.infobox {
  font-size: 85%;
}

.contentside {
  font-size: 14px;
}

/* Box fuer Informationen unter dem menue */
.infobox {
  float: left;
  min-height: 10px;
  width: auto;
  padding: 10px 10px 10px 10px;
  margin: 5px 5px 0 5px;
  border-top: 1px dotted #ccc;
}

/* 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 { 
  width: 100%; 
  padding: 10px 0 0 0;
}

/* Content wird schmaler, wenn Sidebar Daten hat */
.contentsmall {
  float: left;
  width: 70%; 
  padding: 10px 10px 0 0;
}

/* Sidebar rechts. Ist nur aktiv wenn Daten dafuer vorhanden sind */
.contentside {
  float: left;
  width: 27%; 
  padding: 10px 0 0 5px;
}

 /* Unterer Bereich gesamte Breite */
.contentbottom {
  float: left;
  width: 100%; 
  padding: 10px 0 0 0;
  margin: 10px 0 0 0;
  border-top: 1px dotted #ccc;
}

@media screen and (max-width: 900px) {
  .contentbox {
    max-width: 98%;
    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: 99%;	
  }
  .contentside {    
    width: 100%;
    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 <p> */
}

@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 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_PREVNEXT)
  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;
  }
}

/* ---------- Spezialitaeten fur mobile Navigation ----- */

.mobiletop {
  display: none;    /* Schalter Hamburgermenue (aus) */
  height: 60px;
  float: right;
}

.mobiletop a {
  display: block; 
  float: right;
  font-size: 40px;
  text-decoration: none;
  outline: none;
  margin: 0 0 0 0;
  padding: 0 10px 0 0;
  color: #ffffff;
}

@media screen and (min-width: 901px) { /* Reset fuer linke Box */
  .leftbox {
    display: block ! important;
  }
}

@media screen and (max-width: 900px) { /* Ausschalten leftbox fuer mobiles Menue und einschalten mobiletop */
  .mobiletop {
    display: block;  /* Schalter Hamburgermenue (ein) */
    color: #ffffff;
  }
  .leftbox {
    display: none; /* Box auf unsichtbar. Wird durch js (showmenu()) wieder eingeblendet */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 500;
    float: none;
    width: 250px;
    margin: 0 0 0 0;
    box-shadow: 0 20px 50px 0 rgba(0, 0, 0, 0.3);
    background: #e9e9e9;
  }
  .leftbox .menubox {
    padding: 10px 15px 10px 10px;        
  }
}

/* ---------- Die Navigation. See also: template.js -----  */

/*menu */
#nav {
  width :100%; 
  margin-top:-1px;
  padding: 0 0 0 0;
  float: left;    
}

#nav ul { /* all lists */	
  padding: 0 0 0 0;
  margin: 0 0 0 0;
  list-style-image: none;
  list-style-type: none;
  padding-bottom: 5px;
}

#nav li { /* all list items */
  display:block; 
  float: left;
  width: 100%;
  list-style-image: none;
  list-style-type: none;	
  font-size: 16px;
  font-weight: bold;
  padding: 0 0 0 0;
}

/* Fuer dicke Finger bei mobilen Geraeten */	
@media screen and (max-width: 900px) {
  #nav li {
    padding: 10px 0 5px 0;
    border-bottom : 1px solid #ccc;
  }
}
	
/*Level 1 and more*/
#nav a {			
	display : block;	
	text-decoration : none;	
	padding: 0 0 20px 20px;
	font-weight: normal;	
}

#nav li a.menu-current, 
#nav li a.menu-parent {
  font-weight: bold;
}

#nav  a:hover ul li {
  z-index: 1000;
}
#nav  a.menu-expand { 
  background: url(img/haschild.png) no-repeat 2px 5px;
}

#nav  a.menu-expand.isopened { 
  background: url(img/isclicked.png) no-repeat 2px 5px;
}

#nav li li a {
  padding-left: 30px; 
  font-size: 1em; 
}

#nav li li li a {
  padding-left: 40px; 
  font-size: 0.95em;
}

#nav li li li li a {
  padding-left: 50px; 
  font-size: 0.9em;
}

#nav li ul { display:none;}

#nav li.menu-current>ul, 
#nav li.menu-parent>ul, 
#nav li.isopened>ul { 
  display:block ! important;
}

#nav li.menu-current li>ul, 
#nav li.isopened li>ul {
  display: none;
}
	
/* eof */