/*
 * CSS-Theme (Screen-Darstellung)
 *
 * Zentrum Bayern Familie und Soziales
 * 
 * 
 * (c) 2013
 */


/******************************************************
  *	
  *		Grundger?st (Erweitertes-Template)
  *
  ******************************************************/

/* Hintergrundfarbe und Standard-Schrift definieren */

body {
    background-color: #efefef;
    font-family: Arial, Helvetica, sans-serif;
}

/* 
	* Definiert die Hintergrundfarbe 
	* der Footer-Leiste
	*/

#footer {
    background-color: #328796;
}

/* 
	* Linkfarbe
	*/

.nav-footer ul li a {
    color: #FFFFFF;
}


@media only screen and(max-width : 768px) {
    .nav-footer ul li a {
        background-image: url('/imperia/md/images/stmas/zbfs/system/icons/nav-arrows.png');
    }
}

/* 
	* Buttons für mobile Version
	*/
.header-buttons > div {
    background-image: url('/imperia/md/images/stmas/zbfs/system/buttons/header-buttons.png');
}

@media only screen and(-webkit-min-device-pixel-ratio: 1.5),
only screen and(min-device-pixel-ratio: 1.5) {
    .header-buttons > div {
        background-image: url('/imperia/md/images/stmas/zbfs/system/buttons/header-buttons@2x.png');
    }
}

/******************************************************
  *	
  *		Haupt-Navigation (Desktop-Version)
  *
  ******************************************************/


/* 
	* Definiert den Hintergrund der Hauptnavigationsleiste,
	* welcher in der Regel ein Farbverlauf als Grafik-Datei
	* ist (1x65px). Die Hintergrundfarbe gibt den untersten 
	* Farbwert des Farbverlaufes an, f?r den Fall dass die
	* Navigationsleiste h?her als die Grafik ausf?llt.
	*/

.context-desktop #nav-main {
    background-image: url('/imperia/md/images/stmas/zbfs/system/backgrounds/nav-main.png') !important;
    background-color: #9bdedf !important;
}

/* 
	* Standard Schriftfarbe der Hauptnavigationspunkte. Je
	* nach Anzahl der Navigationseintr?ge muss die Breite
	* entsprechend angepasst werden um die Navigationspunkte
	* optimal ?ber die ganze Breite zu verteilen.
	*/

.context-desktop #nav-main li a {
    width: 117px;
    color: #29717e;
}

/* 
	* Breite f?r letzten Men?punkt individuell vergeben um die
	* Gesamtbreite der Hauptnavigation optimal auszuf?llen
	*/

.context-desktop #nav-main li:first-child a {
    width: 118px;
}
.context-desktop #nav-main li:last-child a {
    width: 119px;
}

/* 
	* Schrift- und Hintergrundfarbe f?r Mouseover
	*/

.context-desktop #nav-main .horizontal-menu > li > a:focus,
.context-desktop #nav-main .horizontal-menu > li > a:active,
.context-desktop #nav-main .horizontal-menu > li > a:hover,
.context-desktop #nav-main .horizontal-menu > li > a.active {
    color: #FFFFFF;
    background-color: #328796 !important;
}
#nav-main .horizontal-menu li a.active span {
    border-right: 1px solid #328796;
}
/* 
	* Dropdown-Men?: Hintergrund- und Rahmenfarbe
	*/

.context-desktop #nav-main li:hover .dropdown-menu,
.context-desktop #nav-main li:focus .dropdown-menu,
.context-desktop #nav-main li.aktiv .dropdown-menu {
    background-color: #effafa;
    border-color: #52c7c9;
}
#nav-main .horizontal-menu li:hover .dropdown-menu a span {
    border-right: none;
}
#nav-main .dropdown-menu li a {
    color: #6d6e71 !important;
}

#nav-main .dropdown-menu li a:hover {
    color: #1eb6b9 !important;
}

/* 
	* Dropdown-Men?: Rahmenfarbe f?r Spaltentrennlinien
	*/

.context-desktop #nav-main .dropdown-menu .col {
    border-color: #cde3e6;
}

/* 
	* Dropdown-Men?: Listen-Icon f?r Navigationspunkte
	* der zweiten Ebene definieren.
	*/

.context-desktop #nav-main .dropdown-menu ul li {
    background-image: url('/imperia/md/images/stmas/zbfs/system/icons/nav-main-list.png');
}
/******************************************************
  *	
  *		Haupt-Navigation (Mobile-Version)
  *
  ******************************************************/

.context-mobile #nav-main a {
    background-image: url('/imperia/md/images/stmas/zbfs/system/icons/nav-arrows.png');
}

.context-mobile #nav-main > ul > li > a {
    width: auto;
    color: #FFFFFF;
    background-color: #328796;
}

.context-mobile #nav-main .dropdown-menu ul > li > a {
    width: auto;
    color: #6d6e71;
    background-color: #effafa;
    border-color: #cde3e6;

}

#nav-meta ul li {
    font-size: 85%;
}
/******************************************************
  *	
  *		Breadcrumb-Navigation (Desktop-Version)
  *
  ****************************************************/

/* 
	* Breadcrumb-Menü: Pfeil-Icon
	*/

#breadcrumb ol li a {
    color: #328796;
    background-image: url('/imperia/md/images/stmas/zbfs/system/icons/icons.gif');
    background-position: 0 -496px;
}

#breadcrumb ol li strong {
    background-image: url('/imperia/md/images/stmas/zbfs/system/icons/icons.gif');
    background-position: 0 -597px;
}


/******************************************************
  *	
  *		Contentelemente
  *
  ******************************************************/

/* 
	* Schriftfarbe der Headlines
	*/

.rte h1 {
    color: #328796;
}

.rte h2 {
    color: #328796;
}

.rte h3 {
    color: #6d6e71;
}

.rte h4 {
    color: #6d6e71;
}

/* 
	* Schriftfarbe f?r Standardtexte
	*/

.rte,
.rte p,
.rte li,
.rte address,
.form label {
    color: #6d6e71;
}

/* 
	* Schriftfarbe f?r Textlinks
	*/

.rte a {
    color: #328796;
    font-weight: normal;
}

.rte a:active,
.rte a:focus {
    color: #2a7380;
}
.rte a:visited {
    color: #112e33;
}
/* 
	* Aufz?hlungszeichen f?r Listen
	*/

.rte > ul li,
.rte .newsbox li,
.rte .modul-sitemap li,
#marginalie.rte .teaser-box li {
    background-image: url('/imperia/md/images/stmas/zbfs/system/icons/list.png');
}


/******************************************************
  *	
  *		Content-Modul: Tabelle
  *
  ******************************************************/

/* 
	* Formatierung des Tabellen-Kopfes:
	* - Hintergrundfarbe
	* - Textfarbe
	* - Rahmenfarbe
	*/

table th {
    background-color: #CDE3E6;
    color: #6D6E71;
    border-bottom: 1px solid #fff;
    border-right: 1px solid #fff;
    padding-left: 5px;
    vertical-align: top;
    text-align: left;
    font-size: 0.9358em
}

/* 
	* Formatierung der Tabellen-Zellen:
	* - Standard-Textausrichtung
	* - Textfarbe
	* - Rahmenfarbe
	*/
table td {
    vertical-align: top;
    padding-left: 5px;
    text-align: left;
    color: #6D6E71;
    border-bottom: 1px solid #c6effa;
    border-right: 1px solid #c6effa;
    font-size: 0.9358em
}

/* 
	* Farbe f?r alternierende Zeilenfarbe
	*/
/*
	table.default tr.odd td {
		background-color:#EEEEEE;
		}
	*/


/******************************************************
  *	
  *		Content-Modul: Formulare
  *
  ******************************************************/

/* 
	* Hintergrundfarbe der Formulare
	*/

.form {
    background-color: #ebf9fd;
}

/* 
	* Rahmenfarbe von Feldern
	*/

.form .field-text,
.form .field-select,
.form .field-textarea {
    border-color: #cccccc;
}

/* 
	* Rahmenfarbe von aktiven Feldern
	*/

.form .field-text:hover,
.form .field-select:hover,
.form .field-textarea:hover {
    border-color: #328796;
}


/* 
	* Styling der Submit-Buttons (Normal-Zustand)
	*/
.form .submit-btn {
    background-color: #FFFFFF;
    border-color: #CCCCCC;
    color: #328796;
}

/* 
	* Styling der Submit-Buttons (Hover-Zustand)
	*/

.form .submit-btn:hover,
.form .submit-btn:focus {
    background: #328796;
    color: #fff;
}


/******************************************************
  *	
  *		Content-Modul: Sprunglinks
  *
  ******************************************************/

/* 
	* Hintergrundfarbe f?r die Sprunglink-Box
	*/

.anchor-box {
    background-color: #ebf9fd;
}

/* 
	* Pfeil-Icon der Sprunklinks
	*/

.anchor-box ul li a {
    background-image: url('/imperia/md/images/stmas/zbfs/system/icons/icons.gif');
    background-position: 0 -297px;
}

/* 
	* Pfeil-Icon des nach oben Spunglinks
	*/

.top a {
    background: url('/imperia/md/images/stmas/zbfs/system/icons/icons.gif') no-repeat scroll 132% -1400px transparent;
}


/******************************************************
  *	
  *		Content-Modul: Weiterf?hrende Informationen
  *
  ******************************************************/

/* 
	* Pfeil-Icon das unterhalb des Headline-Balkens hervorkommt
	*/

.additional-informations h3 {
    background-image: url('/imperia/md/images/stmas/zbfs/system/icons/additional-link-header.jpg');
}

/* 
	* Hintergrundfarbe des Headline-Balkens
	*/

.additional-informations h3 span {
    background-color: #EFFAFA;
}

/* 
	* Horizontale Trennlinie zwischen den Links
	*/

.additional-informations ul.links li {
    background-image: url('/imperia/md/images/stmas/zbfs/system/backgrounds/border-h.gif');
}


/******************************************************
  *	
  *		Content-Modul: Slider Header
  *
  ******************************************************/

/* 
	* Hintergrundfarbe f?r Slider-Balken
	*/

.plusslider-pagination-wrapper {
    background-color: #328796;
}

/* 
	* Pagination Icons
	*/

.plusslider-pagination li {
    background-image: url('/imperia/md/images/stmas/zbfs/system/icons/plus-sprite.png');
}

/* 
	* Slider Teaser-Boxen: Hintergrundfarbe der Box
	*/
.plusslider a .teaser-box {
    color: #6d6e71;
}
.plusslider a .teaser-box,
.plusslider a .teaser-box .box-header h5 span {
    background-color: #fafafa;
}

.plusslider .transparent,
.plusslider .box-header h5 span .transparent {
    background-color: transparent !important;
}

@media only screen and(max-width : 768px) {
    .plusslider .transparent,
    .plusslider .box-header h5 span .transparent {
        background-color: #fafafa !important;
    }
    .plusslider a .teaser-box {
        position: static;
        height: 125px;
        left: 10px !important;
        top: 10px !important;
    }
    .plusslider a .teaser-box .box-header h3 {
        font-size: 89%;
    }
}
/* 
	* Slider Teaser-Boxen: Formatierung der Headline
	*/

.plusslider .teaser-box .box-header h5 {
    color: #328796;
    background-image: none;
}

/* 
	* Slider: Control-Buttons stop/play
	*/
.plusslider-pagination-wrapper a.play,
.slider-stop-control a.play {
    background-image: url('/imperia/md/images/stmas/zbfs/system/icons/control-play.png');
}

.plusslider-pagination-wrapper a.stop,
.slider-stop-control a.stop {
    background-image: url('/imperia/md/images/stmas/zbfs/system/icons/control-stop.png');
}
/******************************************************
  *	
  *		Content-Modul: Gallery
  *
  ******************************************************/

/* 
	* Hintergrundfarbe der Gallery-Box
	*/

.modul-gallery {
    background-color: #ebf9fd;
}

/* 
	* Farbe und Schriftgröße der Headline
	*/

.modul-gallery h5 {
    color: #6d6e71;
}

/* 
	* Rahmenfarbe der Vorschaubilder auf
	* der Detailseite
	*/

.modul-gallery .thumb-navigator a {
    border: 1px solid #FFFFFF;
}

.modul-gallery .thumb-navigator a:hover {
    border: 1px solid #666666;
}

.modul-gallery .thumb-navigator a.current {
    border: 1px solid #f92828;
}

/* 
	* Rahmenfarbe und -dicke der Vorschaubilder
	* auf der Gallery ?bersichtsseite
	*/

.modul-gallery-overview .thumb-navigator a {
    border: 3px solid #FFFFFF;
}

.modul-gallery-overview .thumb-navigator a:hover {
    border: 3px solid #666666;
}


/******************************************************
  *	
  *		Content-Modul: Publikationen
  *
  ******************************************************/

/* 
	* Hintergrundfarbe der Publikationen-Box
	*/

.modul-publication {
    background-color: #ebf9fd;
}

/* 
	* Rahmenfarbe und -dicke des Vorschaubildes
	*/

.modul-publication .preview {
    border-left: 1px solid #CDE3E6;
    border-right: 1px solid #CDE3E6;
}


/******************************************************
  *	
  *		Content-Modul: Newsfeed
  *
  ******************************************************/

/* 
	* Hintergrundfarbe der Newsfeed-Box
	*/

.modul-newsfeed {
    background-color: #ebf9fd;
}

/* 
	* Rahmenfarbe und -dicke des Vorschaubildes
	*/

.modul-newsfeed .preview {
    border-left: 1px solid #CDE3E6;
    border-right: 1px solid #CDE3E6;
}


/******************************************************
  *	
  *		Content-Modul: Indexsuche
  *
  ******************************************************/

/* 
	* Hintergrundfarbe der Indexsuche-Box
	*/

.modul-indexsearch {
    background-color: #ebf9fd;
}

/* 
	* Hintergrundfarbe des aktiven Buchstaben
	* in der Alpahbet Auswahl
	*/

.modul-indexsearch ul li a:hover,
.modul-indexsearch ul li a:focus,
.modul-indexsearch ul li a:active {
    padding-left: 2px;
    padding-right: 2px;
    background-color: #CDE3E6;
}

.modul-indexsearch ul li a.active {
    background-color: #CDE3E6;
}

/******************************************************
  *	
  *		Content-Modul: Suche
  *
  ******************************************************/

/* H3 einheitlich die Linkfarbe zuweisen */
.search-results ol li,
.search-results h3 {
    color: #328796 !important;
}

/******************************************************
  *	
  *		Content-Modul: Veranstaltungen
  *
  ******************************************************/

/* 
	* Hintergrundfarbe der Text-Box
	*/

.modul-eventlist .info {
    background-color: #ebf9fd;
}

/* 
	* Textfarbe der Headline
	*/

.modul-eventlist .info h4 {
    color: #6d6e71;
}

/* 
	* Textfarbe des Datums
	*/

.modul-eventlist .date,
.modul-newslist .date {
    color: #328796 !important;
}


/******************************************************
  *	
  *		Marginalie Allgemein
  *
  ******************************************************/

/* 
	* Headline der Topic-Box
	*/

#marginalie .teaser-box .box-header h5,
#marginalie .topicbox .box-header h5 {
    background-image: url("/imperia/md/images/stmas/zbfs/system/backgrounds/headline-h5.png");
    color: #328796;
}

/* 
	* Rahmenfarbe der Modul-Boxen
	*/

#marginalie .teaser-box .box-body {
    border-color: #cde2e5;
}

/******************************************************
  *	
  *		Marginalien-Modul: Service-Box
  *
  ******************************************************/

/* 
	* Hintergrundfarbverlauf der Service-Navigiation
	*/

.modul-servicenav a {
    background-color: #d3f0f0;
    background-image: url('/imperia/md/images/stmas/zbfs/system/backgrounds/service-nav.png');
}

/* 
	* Icons der Service-Navigiation
	*/

.modul-servicenav a span {
    background-color: transparent;
    background-image: url('/imperia/md/images/stmas/zbfs/system/icons/service-nav.png');
}


/******************************************************
  *	
  *		Content-Modul: InfoBox
  *
  ******************************************************/

#marginalie .infobox,
.infobox {
    border: 2px solid #328796;
    margin-top: 20px;
    padding: 5px;
    margin-bottom: 20px;
}


#marginalie .infobox h5,
.infobox h5 {
    font-size: 0.978em;
    color: #328796;
    font-weight: bold;
}

#marginalie .infobox h5 {
    background-position: 1px -222px !important;
    background-image: url("/imperia/md/images/stmas/zbfs/system/icons/service-nav.png");
}
/******************************************************
  *	
  *		Content-Modul: Contextnav
  *
  ******************************************************/

/* 
	* Hintergrundfarbe der Newsfeed-Box
	*/

.modul-contextnav .contextnav-wrap {
    background-image: url('/imperia/md/images/stmas/zbfs/system/backgrounds/divider-contextnav.png');
}
/******************************************************
  *	
  *		Custom Styles...
  *
  ******************************************************/
.rte a.downinline {
    background: url("/imperia/md/images/stmas/zbfs/system/icons/icons.gif") no-repeat scroll 0 -197px rgba(0, 0, 0, 0);
}

.rte a.download {
    background: url("/imperia/md/images/stmas/zbfs/system/icons/icons.gif") no-repeat scroll 0 -197px rgba(0, 0, 0, 0);
}

.rte a.extinline {
    background: url("/imperia/md/images/stmas/zbfs/system/icons/icons.gif") no-repeat scroll 0 -99px rgba(0, 0, 0, 0);
}
.rte a.external {
    background: url("/imperia/md/images/stmas/zbfs/system/icons/icons.gif") no-repeat scroll 0 -99px rgba(0, 0, 0, 0);
}
/******************************************************
  *	
  *		Marginalien-Modul: Themen und Aktionen ext Linksymbol
  *
  ******************************************************/
#marginalie .topicbox .teaser a.extinline {
    background: none;
}
#marginalie .topicbox .teaser a.extinline span {
    background: url("/imperia/md/images/stmas/zbfs/system/icons/icons.gif") no-repeat scroll 0 -99px rgba(0, 0, 0, 0);
    padding-left: 15px;
}

/******************************************************
  *	
  *		CONTENT Zweispaltig mit Bild
  *
  ******************************************************/
.zweispaltig_main_div {
    float: left;
    width: 100%;
    margin-bottom: 27px
}
.rund_ecken {
    -moz-border-radius: 7px; /* Firefox */
    -webkit-border-radius: 7px; /* Chrome, Safari */
    -khtml-border-radius: 7px; /* Konqueror */
    border-radius: 7px; /* CSS3 */
    behavior: url('border-radius.htc');

}
.zweispaltig_links_div {
    float: left;
    width: 45%;
    border: 1px solid #d3d3d3;
    padding: 5px;
    background-color: #fff;
}
.zweispaltig_rechts_div {
    float: right;
    width: 45%;
    border: 1px solid #d3d3d3;
    padding: 5px;
    background-color: #fff;
}
.zweispaltig_links_div img,
.zweispaltig_rechts_div img {
    width: 207px;
    margin-bottom: 20px;
}
/******************************************************
*	
*		Content-Modul: BildBox 2 Nebeneinander 
*
******************************************************/
.bildbox_theme {
    background-color: #328796;
}

/******************************************************
*	
*		Content-Modul: Akkordeon Grauer Rahmen um Absatz
*
******************************************************/
.ui-accordion div.grauer_rahmen {
    border: 1px solid #d1d1d1;
    padding: 5px;
    background-color: #f8f8f8;
}
.ui-accordion div.grauer_rahmen > p {
    margin-top: 10px;
    margin-bottom: 10px;
}


/******************************************************
*	
*		Content-Modul: Rubrik Buttons
*
******************************************************/


.bt_rubrik {
    padding-left: 36px;
}

.bt_rubrik a div {
    background: #a9e3e4;
    box-shadow: inset 0 1px 3px 0 #91b8b3;
    border-radius: 5px;
    float: left;
    display: block;
    width: 158px;
    text-align: center;
    margin: 10px 10px 0 0;
    padding: 15px 0;
}

.bt_rubrik a:hover div {
    background: #328796;
    text-decoration: none;
}

.bt_rubrik a:hover div p {
    text-decoration: underline;
    color: white
}

.bt_rubrik a div p {
    margin: 0;
    padding: 17px 0;
    color: #2c6671;
    font-size: 1em;
}

.select-wrapper {
    width: 100px;
    float: right;
}
@media only screen and(max-width : 768px) {
    .select-wrapper {
        width: 100%;
        float: none;
    }
}
.select-wrapper select {
    width: 100%;
    height: 40px;
    padding-left: 10px;
    font-size: 16px;
    float: right;
    box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.3);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

/******************************************************
*	
*		Content-Modul: 2 Spaltig Flexblock
*
******************************************************/
div.flexblock {
    display: flex;
}
a.flexlink {
    display: block;
}
div.flexitem {
    min-height: 290px;
    border: 1px solid #328796;
    border-radius: 20px;
    padding: 10px 10px 5px 15px;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0;
}
div.margin5r {
    margin-right: 5px;
}
li.listicon {
    padding: 0 0 0 2rem !important;
    background: none !important;
}
li.listicon:before {
    background-image: url('/imperia/md/images/stmas/zbfs/system/icons/list_icon.svg');
    content: "";
    display: inline-block;
    margin: 0 1rem 0 -2rem;
    width: 1rem;
    height: 1rem;
    background-size: 0.9rem 0.9rem;
    background-repeat: no-repeat;
    background-position: left bottom;
    padding-top: 13px;
}

img.fleximg {
    float: left;
    width: 22px !important;
    padding: 0 10px;
}

@media only screen and(max-width : 768px) {
    div.flexblock {
        flex-direction: column;
    }
    div.margin5r {
        margin-bottom: 5px;
    }
    div.flexitem {
        min-height: auto;
    }
}

.hasDatepicker,
.ui-datepicker-trigger {
    padding: 10px;
    background-color: #efefef;
    border: 1px solid lightgrey;
}

table.default tr:nth-child(even) {
    background-color: #f2f2f2;
}

td.ui-datepicker-current-day a {
    background-color: #328796 !important;
    color: white !important;
}

.btn {
    color: #328796;
    float: right;
    overflow: visible;
    /*! margin-bottom: 10px; */
    padding: 3px 10px;
    background: #fff;
    border: 1px solid #CCCCCC;
    cursor: pointer;
    font-size: 80%;
    font-weight: bold;
    width: auto;
}
.btn:hover,
.btn:active {
    color: #fff;
    background: #328796;
}

.question,
.answer {
    background-color: #ebf9fd;
    padding: 20px;
    margin-bottom: 10px;
    float: left;
    width: 90%
}
.content h3 {
    margin-top: 20px;
}
.test-content {
    padding: 20px;
}


.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    border: 1px solid #328796 !important;
    background: #328796 !important;
}


.link-btn {
    border: 1px solid #000;
    border-radius: 8px;
    padding: 10px;
    background-color: #328796;
    color: #fff !important;
    font-weight: bold !important;
}

.link-btn:hover,
.link-btn:focus,
.link-btn:active {
    background-color: #F5FCFC;
    color: #000 !important;
}

	/* 
	* Styling des Youtube Aktivieren Buttons (Normal-Zustand)
	*/
	.youtube_overlay {
		opacity: 0.95;
	}
	.youtube_overlay h4 {
		font-weight: bold;
		font-size: 1.083em;
        color: #328796;
	}
	.youtube_overlay ul li {
		background: none!important;
		font-size: 1em!important;
	}
	.youtube_overlay a.btn_youtube_aktivieren {
		background-color: #328796!important;
		color: #fff;
		padding: 10px 20px;
		display: inline-block;
	}

	/* 
	* Styling Youtube Aktivieren Buttons (Hover/Focus-Zustand)
	*/
	.youtube_overlay a.btn_youtube_aktivieren:hover,
	.youtube_overlay a.btn_youtube_aktivieren:focus {
		text-decoration: none;		
		background-color: #ffffff!important;
		color: #2b7380;
        box-shadow: inset 0 0 0 2px #2b7380;
	}