@import url(https://fonts.googleapis.com/css?family=Open+Sans);

@import url("default-settings.css");
@import url("redaxo_responsive_menu.css");

/*	USED COLORS - Development
*******************************************************************************
Blaue Schrift						0c4077
Gelb								ffe54f

Dunkelgrau (schrift)				313131 => NEU: 414341

Hellgrau (Menuhintgrund):			dddedf

body background						4f5953  5f5f5f
************************************************************************************* */
html, body {
font-family: Helvetica, Arial, Tahoma, Geneva, Verdana, sans-serif;
font-size: 14px; line-height: 20px; font-weight: 100; color: #414341;
/* Woerter in die naechste Zeile umbrechen, wenn sie ansonsten das umschliessende Element verlassen wuerden. */
word-wrap:break-word;
height: 100%;
}
html { overflow: scroll; overflow-x: auto; background-color: #FFF; }

/* Content Elements
************************************************************************************* */
input { font-family: Helvetica, Arial, Tahoma, Geneva, Verdana, sans-serif; }

hr { width: 100%; height: 5px; background: #dddedf; border: none; margin: 0 0 10px 0; }

h1, h2, h3, h4, h5, h6 { clear: both; margin: 0 0 10px 0; padding: 0; color: #0c4077; font-weight: 100; }
h1 { font-size: 24px; line-height: 30px; }
h2 { font-size: 21px; line-height: 30px; }
h3 { font-size: 18px; line-height: 24px; }
h4 { font-size: 16px; line-height: 20px; }
h5 { font-size: 14px; line-height: 20px; }
h6 { font-size: 14px; line-height: 20px; font-weight: bold; }

h1 { margin: 0 0 20px 0; padding: 0 0 10px 0; border-bottom: 5px solid #DDD; }

a { color: #0c4077; text-decoration: underline; }
a:hover { color: #414341; }

td { vertical-align: top; }

p { margin: 0 0 10px 0; padding: 0; }

strong { font-weight: bold; }

ul { margin: 0 0 10px 0; padding: 0; }
ul li { list-style-type: disc; list-style-position: outside; margin: 0 0 5px 16px; padding: 0; }


/* ----------------------------------------------------------------------------------
   CSS-Einstellungen fuer das Addon Modulhelper (bzw. bw_modulhelper)
---------------------------------------------------------------------------------- */ 
/* ------------ Outer Box ------------ */
/* Ausgangswerte: (Seitenbreite: 735px | Abstand: 30px) */
.outer_box { clear: both; display: block; float: left; width: 91.84%; margin: 0 0 10px 4.08%; padding: 0; }

.box_width_full { width: 100%; margin: 0 0 10px 0; }
.box_width_1_2 { clear: none; width: 43.88%; }
.box_width_1_3 { clear: none; width: 27.89%; }
.box_width_2_3 { clear: none; width: 59.86%; }
.box_width_1_4 { clear: none; width: 19.9%; }


.outer_box.box_bg_gray { clear: both; display: block; float: none; width: 91.84%; margin: 0 0 20px 0; padding: 20px 4.08%; background-color: #E9E9E9; }


/* ----------------------------------------------------------------------------------
 Clearfix, um das Floating innerhalb der Container aufzuheben fuer Firefox, IE8, Opera, Safari, etc.
---------------------------------------------------------------------------------- */ 
.outer_box_inner:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* + html .outer_box_inner { display: inline-block; } /* fuer IE7 */
* html .outer_box_inner { height: 1%; } /* fuer IE6 */


/* ------------ Moduleinstellungen ------------ */
.text_bild .flLeft { float: left; display: block; width: auto; max-width: 47.69%; margin: 0 10px 0 0; overflow: hidden; }
.text_bild .flRight { float: right; display: block; width: auto; max-width: 47.69%; margin: 0 0 0 10px; overflow: hidden; }
.text_bild .image span.small { display: block; }

.zweispalter { background-image: url(bg_zweispalter.png); background-repeat: repeat-y; background-position: center top;  }
.zweispalter .flLeft { float: left; display: block; width: 47.69%; margin: 0; overflow: hidden; }
.zweispalter .flRight { float: right; display: block; width: 47.69%; margin: 0; overflow: hidden; }

.flLeft img { margin: 0 15px 5px 0; }
.flRight img { margin: 0 0 5px 15px; }

/* ----------------------------------------------------------------------------------
   Ausrichtung der Seite und der <div>-Container (Reihenfolge von oben nach unten)
---------------------------------------------------------------------------------- */ 
#page_bg { position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0; padding: 0; z-index: 1; }

/* Relative Bloecke innerhalb von "page" */
#Stripe_1, #Stripe_2, #page, #header, #logo, #header_menu, #header_image, #header, #searchelements, #languageSwitcherBox, #navigation_not_responsive, #wrapper, #sidebar, #content, #footer_bg, #footer {
display: block; position: relative; top: 0; left: 0; width: 100%; height: auto; margin: 0; padding: 0; z-index: 1; }

#Stripe_1 { position: absolute; top: 161px; height:182px; margin: 0; background: #DDD; z-index: 1; }
#Stripe_2 { position: absolute; top: 434px; height:37px; margin: 0; background: #DDD; z-index: 1; }

#page { display: block; position: relative; top: 0; left: 0; width: 1000px; height: auto; margin: 0 auto; padding: 0; z-index: 10; }

#header { }

#logo { display: block; width: 445px; height: auto; margin: 0; text-align:left; }
#logo a { display: block; }

#languageSwitcherBox { position: absolute; top: auto; bottom: 50px; left: auto; right: 0; width: auto; white-space: nowrap; }
#languageSwitcherBox a { text-decoration: none; color: #999; }
#languageSwitcherBox a:hover { text-decoration: none; color: #0c4077; }
#languageSwitcherBox a.active { text-decoration: none; color: #414341; }



#searchelements { position: absolute; top: auto; bottom: 0; left: auto; right: 0; width: 220px; text-align: right; }
.search_it_flex { text-align: right; }

#header_menu { display: block; width: auto; margin: 0; padding: 5px 0 5px 17px; background-color: #DDD; text-align: left; }
#header_menu ul { list-style: none; margin: 0; padding: 0; width: 100%; }
#header_menu ul li { list-style-type: none; display: inline-block; margin: 0; padding: 0; }
#header_menu ul li a { display: block; margin: 0; padding: 5px 25px; color: #414341; font-family: 'Open Sans', Helvetica, Arial, Tahoma, Geneva, Verdana, sans-serif; font-weight: 400; font-size: 16px; line-height: 20px; text-transform: none; text-decoration: none; } 
#header_menu ul li a:hover { color: #414341; background-color: #fff; text-decoration: none; }
#header_menu ul li a.rex-current,
#header_menu ul li a.rex-active {  color: #0c4077; background-color: #fff; }

#header_image { height: 310px; background-color: #fff; overflow: hidden; }
#header_image img { display: block; margin: 0; padding: 0; }

#wrapper { }
#sidebar_bg { position: absolute; top: 0; left: 0; width: 26.5%; height: 100%; background: #DDD; z-index: 1; }
#sidebar { display: block; float: left; width: 26.5%; min-height: 400px; z-index: 10; }
#content { display: block; float: right; width: 73.5%; min-height: 400px; padding: 30px 0 10px 0; }

#footer_bg { clear: both; margin: 0; padding: 0; background: #343434; }
#footer { width: 1000px; margin: 0 auto; padding: 25px 0 15px 0; font-style: normal; color: #fff; }
#footer a { text-decoration: underline; color: #ffe54f; }
#footer a:hover { color: #fff; }

#footer .cell { display: block; float: left; width: 19.9%; margin: 0 0 15px 4.08%; padding: 0; text-align: left; font-size: 14px; line-height: 20px; }
#footer .cell_last { text-align: right; color: #ffe54f; }


#footer_bottom { clear: both; width: auto; margin: 0 4.08% 0 0; text-align: right; }
#footer_bottom span { display: inline-block; margin: 0 10px; }



/* Suche */
.search_it_form { display: block; margin: 0; padding: 0; font-size: 14px; line-height: 18px; color: #000; text-align: left; }
.search_it_form label { display: none; margin: 0 5px 10px 0; padding: 3px 0; }
.search_it_form .search_it_text,
.search_it_form .search_it_button { display: inline-block; width: 110px; height: auto; margin: 0 5px 10px 0; padding: 3px 5px; 
border: solid 1px #4d4d4d; border-radius: 5px; box-shadow: none; background: #FFF; font-size: 14px; line-height: 18px; color: #000; }
.search_it_form .search_it_button { width: auto; margin: 0 0 10px 0; padding: 3px 5px; border: none; background: #4d4d4d; color: #FFF; text-align: center; }
.search_it_form .search_it_button:hover { opacity: 0.6; }

.search_highlighter { background-color: #FFC; }


/* ----------------------------------------------------------------------------------
   Module
---------------------------------------------------------------------------------- */ 
#hilfsnav_bg { clear: both; display: block; width: 100%; height: auto; margin: 0 0 30px 0; padding: 0; z-index: 99; background-color: #E9E9E9; }
#hilfsnav { display: block; width: auto; height: auto; margin: 0; padding: 0 4.08%; }
#hilfsnav a { display: inline-block; width: auto; height: auto; margin: 0 5px 0 0; padding: 5px 15px; font-size: 14px; line-height: 30px; color: #414341; text-decoration: none; }
#hilfsnav a:hover { text-decoration: none; color: #414341; background-color: #FFF; }
#hilfsnav a.active { color: #414341; background-color: #FFF; }
/* #hilfsnav a.first { border-left: none; } */

.download_box a.download_hdl { display: inline-block; padding: 5px 0 0 0; text-decoration: none; color: #414341; font-size: 14px; line-height: 24px; }
.download_box a.download_hdl:hover { text-decoration: none; color: #0c4077; }
.download_box a.download_hdl span { font-size: 16px; }

#news_teaser a { text-decoration: none; color: #414341; }
#news_teaser a:hover { text-decoration: none; color: #0c4077; }
#news_teaser hr { width: 100%; height: 1px; background: #CCC; margin: 0 0 10px 0; }


.news_headline { clear: both; display: block; margin: 0 0 10px 0; padding: 5px 4.08%; color: #0c4077; font-size: 21px; line-height: 30px; font-weight: 100; background-color: #dddedf; }
.news_images img { display: block; margin: 0 0 10px 0; }

.geschichte { margin-bottom: 30px; }
.geschichte_headline { clear: both; display: block; margin: 0 0 10px 0; padding: 0 0 10px 0; color: #0c4077; font-size: 21px; line-height: 30px; font-weight: 100; border-bottom: 5px solid #DDD; }

.job { clear: both; }
.job_download_link a { display: inline-block; margin: 0 0 10px 0; padding: 5px 10px; background-color: #0c4077; color: #FFF; text-decoration: none; }
.job_download_link a:hover { background-color: #414341; color: #FFF; text-decoration: none; }



/* Ausgangswerte: (Seitenbreite: 735px | Abstand: 20px) + 10px bei den Bilder aber dann bei 695px ) */
.gallery_box { clear: both; display: block; width: 94.56%; margin: 0 0 20px 0; padding: 20px 2.72%; }
.gallery_box.gallery_bg_gray { background-color: #E9E9E9; }
.gallery_box .slider_image { display: block; width: auto; margin: 0; padding: 0 10px; }
.gallery_box .gallery_box_text { clear: both; display: block; padding: 20px 0 0 0; }

/* Video per YouTube */
.video { position:relative; padding: 0 0 56.25% 0; margin: 0 0 20px 0; /* 56.25% wegen 16:9 Format */ height:0; overflow:hidden; }
.video iframe { position: absolute; top: 0; left: 0; width: 100% !important; max-width: 640px; height: 100% !important; border: none; }



/* ----------------------------------------------------------------------------------
   Responsive Webdesign
---------------------------------------------------------------------------------- */ 
@media all and (min-width:1000px) {
#page_bg { overflow: hidden; }
#page { width: auto; max-width: 1000px; overflow: hidden; }
#footer { width: auto; max-width: 1000px; overflow: hidden; }
}
@media all and (max-width:1000px) {
/* mit dem Setzen der Breite auf geht das reponsive Webdesign erst richtig los */
#page_bg { min-width: 300px; overflow: hidden; }
#page { width: 100%; min-width: 300px; margin: 0; overflow: hidden; }

#Stripe_1, #Stripe_2 { display: none; }

#logo { width: 44.5%; max-width: 445px; min-width: 220px; }
#languageSwitcherBox { right: 10px; }
#searchelements { right: 10px; }

#header_menu { padding: 5px 0; }
#header_menu ul li a { padding: 5px 15px; font-size: 16px; line-height: 20px; } 

#header_image { height: auto; }


#footer { width: auto; min-width: 280px; padding: 15px 10px 5px 10px; overflow: hidden; }


}

@media screen and (max-width: 768px) {
.outer_box { clear: both; float: none; width: 91.84%; margin: 0 4.08% 10px 4.08%; }
.box_width_full { width: 100%; margin: 0 0 10px 0; }

#logo { padding: 0 0 10px 0; }
#languageSwitcherBox { bottom: 10px; }
#searchelements { position: relative; top: 0; left: 0; padding: 0 10px; text-align: left; }
.search_it_flex { text-align: left; }


#header_menu ul li a { padding: 5px 10px; font-size: 15px; line-height: 20px; } 
#header_menu ul li.rex-article-1 { display: none; }

#sidebar_bg { display: none; }
#sidebar { float: none; width: 100%; min-height: 0; background: #dddedf; }
#content { float: none; width: 100%; min-height: 100px; }

#footer a { text-decoration: underline; color: #ffe54f; }
#footer a:hover { color: #fff; }

#footer .cell, #footer .cell_logo,
#footer .cell_last, #footer .cell_logo_last { float: left; width: 32.33%; margin: 0 1% 10px 0; text-align: left; }

}

@media screen and (max-width: 480px) {
.outer_box { clear: both; float: none; width: auto; margin: 0 10px 10px 10px; }
.text_bild .flLeft,
.text_bild .flRight { float: none; width: auto; max-width: none; margin: 0 0 10px 0; }
.zweispalter .flLeft { float: none; width: auto; margin: 0 0 10px 0; }
.zweispalter .flRight { float: none; width: auto; margin: 0; }

#footer .cell, #footer .cell_logo,
#footer .cell_last, #footer .cell_logo_last { width: 49.0%; }


#footer_bottom { text-align: left; }
#footer_bottom span { display: block; height: 1px; margin: 0; overflow: hidden; }
}

/*
@media screen and (max-width: 360px) {
.search_it_form .search_it_text,
.search_it_form .search_it_button { width: 80px; margin: 0 3px 10px 0; padding: 3px 3px; border-radius: 3px; font-size: 12px; line-height: 16px; }
.search_it_form .search_it_button { width: auto; }
}
*/

@media screen and (max-width: 320px) {
#footer .cell, #footer .cell_logo,
#footer .cell_last, #footer .cell_logo_last { float: none; width: auto; margin: 0 0 10px 0; }
	
}