/* CSS Document */
body { background: #f9f9f9; line-height: 1.3; } /* line-height 1.3 (18.2px bei p, bei Überschriften aber entsprechend größer, daher nicht als px angabe) default von Bootstrap zu gross mit 1.42 */
h1, h2 { color:#123; }
h3, h4 { color:#333; }  /* color:#624F70; */
h2 { font-size: 22px; font-weight: bold; } 
.header-jetzttv { position: relative; max-height: 220px; min-height: 100px; overflow: hidden; }
.header-jetzttv >img { min-height: 100px; }
.header-jetzttv-text { font-size: 65px; position: absolute; bottom: 0; left: 22%; color: white; }
.header-jetzttv-text >a { color: white !important; text-decoration: none; }
.header-jetzttv-text >a:link, .header-jetzttv-text >a:hover, .header-jetzttv-text >a:visited { color: white !important; text-decoration: none; }  
.header-jetzttv-text>span { font-size: 25px; margin-left: 8px; }
div.header-language { position: absolute; top: 20px; right: 20px; }
div.header-language >a { margin: 4px; }
.navbar-brand { font-size: 25px; position: absolute; left: 25px; color:white !important; }
nav.navbar-default a.navbar-brand:link, nav.navbar-default a.navbar-brand:hover { color: white !important; }  /* Jetzt-TV Logo - Farbe des oberen Header Backgrounds ist #23527c oder #624F70*/
nav.navbar-default ul.navbar-nav>li>a:hover { color: rgb(211,211,211); } /* Hauptmenü - Farbe der Links ist #337ab7 , farbe des Menü-Hintergruns helles grau #e7e7e7*/ 

nav.navbar {
	background-color: #624F70;
 /* background: rgba(0, 0, 0, 0) linear-gradient(to right, #E6AA00 0%, #E45804 50%) repeat scroll 0 0; */
	border:0px;
	border-radius: 0px;
	color:white;
}
 /* nav.navbar == oberste Menüzeile */
nav.navbar a:link { color: rgb(211,211,211); }
nav.navbar a:visited { color: rgb(211,211,211); }
nav.navbar ul.nav >li >a:visited { color: rgb(211,211,211); }
/* nav.navbar ul.nav >li >a:hover {  } */ /* weiß auch handy schlecht erkennbar */
nav.navbar ul.nav >li >a:focus { color: rgb(211,211,211) !important; } 
nav.navbar ul.nav >li >a:hover, nav.navbar ul.nav >li >a:active { color: darkorange; } /* darkgrey #a9a9a9;*/
/* nav.navbar ul.nav >li.active >a, nav.navbar ul.nav >li.open >a, nav.navbar ul.nav >li.open >a:focus, nav.navbar ul.nav >li >a:active { color: white !important; } */
nav.navbar ul.nav >li.active >a { background-color: #e7e7e7; color: #555 !important; } 
nav.navbar ul.nav >li.active >a:hover, nav.navbar ul.nav >li.dropdown-submenu >a:focus, nav.navbar ul.nav >li.dropdown-submenu >a:hover { background-color: #e7e7e7; color: darkorange !important; } /*  #555 */ 
/* auch seitliche Menüzeile */ 
ul.dropdown-menu a:link { color: #333; }
ul.dropdown-menu a:visited { color: #333; }
ul.dropdown-menu a:hover { color: #333; }
ul.dropdown-menu a:active { color: #333; }
.filterSearchBox { display:inline-block; padding-left: 10px; }
.filterSearchBox >input { margin: 8px 0 0 8px; color: #23527c; }  
span.glyphicon-search { font-size: 16px; vertical-align: text-bottom; padding-left: 8px; margin-right: 4px; }  

div.row > div.col-md-6 { margin: 0 20px; } /* platz zwischen den Spalten */
div.col-md-6 h2::first-letter { color: #f60; font-size: 150%; }
#c9878 >iframe { width: 555px; height: 350px; } /* IFrame startseite termine */ 
div.ce-border iframe { border: 1px solid silver; }
div.ce-border img, div.sidebarRight div.ce-gallery img { border: 1px solid silver; } /* ist border in typo3 angehakt, ist es div.ce-gallery .ce-border; in der Rechten Spalte aber immer mit Border, auch wenn Border in Typo3 nicht angehakt, da manchmal vergessen */
div.dateCurrent { height: 5px; font-size: 12px; display:block; } /* Datum oben rechts Startseite */
div.dateCurrent >span { float: right; } 
div.ce-gallery img { padding: 3px; margin-bottom: 10px; } /* kleinen abstand zum Bild mit padding 3px */
div.ce-gallery figure img { margin-bottom: 1px; } /* mit Bildunterschrift, dann nur kleine margin hier + dafür unter figcaption */
div.ce-gallery figcaption { font-size: 12px; margin-bottom: 10px; text-align:center; } /* Bildunterschrift rechte Spalte */
div.col-md-6 div.ce-gallery img { border-radius: 20px; } /* Bilder rounded in der mittleren spalte */
div.col-md-6 div.ce-gallery div.ce-inner div.ce-column { margin-right: 15px; } /* vierer Bildgruppen, mehr abstand */
div.col-md-6 div.ce-gallery div.ce-row { margin-bottom: 0; } /* bereits beim img tag angegeben */
div.col-md-6 div.ce-textpic.ce-center.ce-above { margin-top: 15px; } /* vierer Bildgruppe mehr Abstand nach oben */

div.col-md-6 a[class="internal-link"] { color: #f60; } /* z.B. oben Unsere Vision ist als HTML Text */
div.col-md-6 div.ce-bodytext a[class="internal-link"], span.readMoreLink { color: #f60; font-size: 13px !important; font-weight:600; } /* Link Zum Video */
span.readMoreLink:hover { text-decoration: underline; cursor: pointer; }
div.col-md-6 div.ce-bodytext p { margin: 0; } /* damit identisch zum alten Typo3, sonst waren abstände zu groß */
div.col-md-6 div.ce-bodytext .csc-frame-frame2 { background-color: #ffffc0; border: 1px solid silver; padding: 4px 8px; font-size: 12.8px; overflow: hidden; margin-bottom: 5px; } /* Newskasten, csc-frame 1 ist grauer Hintergrund */
div.col-md-6 p.align-right { float: right; } /* Datum oben Startseite */
div.col-md-2 h2 { font-size: 14px; font-weight: bold; color: #778899; text-align:center; margin: 20px 0 4px 0; }  /* Sidebar Right und Border */
div.col-md-2 div.ce-gallery { margin: 2px 0 5px 0; } /* Spenden Btn oben rechts */ 
div.socialShare { margin: 10px 0; text-align: center; }
div.socialShare >span { padding: 5px; margin: 0 3px; cursor: pointer; }
div.socialShare >span:hover { background-color: #e7e7e7; }
.visionBox { color:#8FBC8F; text-align: justify; }
.contentPagination { width: 200px; display: block; margin: 20px auto; } 
.contentPagination >span.caret { float: right; margin-top: 8px; }    
a.videoLink, a.download { color: #f60; }
div.col-md-6 a[title="Video ansehen"], div.col-md-6 div.ce-bodytext >p>img[alt="Video ansehen"]+a[class="external-link-new-window"] { color: #f60 !important; } /* ältere noch ohne class=videoLink, nicht alle mit title = Video ansehen */
div.col-md-6 div.ce-bodytext >p>img[alt="Video ansehen"] {display: none; } /* altes image nicht mehr anzeigen aus RTE migrated */
a.videoLink:before, div.col-md-6 div.ce-bodytext >p>img[alt="Video ansehen"]+a[class="external-link-new-window"]:before { /* nicht alle hatten title = Video ansehen */
    content: "\e158"; /* == Bootstrap .glyphicon-expand */      
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-right: 4px;
    color: #123;
    font-size: 16px;
} 
a.download:before { 
    content: "\e035";  /* == Bootstrap .glyphicon-headphones */
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-right: 6px;
    color: #123;
    font-size: 16px;
} 
div.sidebarRight { width: 180px; padding-top: 4px; }
div.sidebarLeft { padding-left: 0; margin-left: 20px; }
div.col-md-6 { width: 585px; }
div.container { width: 1170px; }
div.tx-indexedsearch td { padding: 0 4px 4px 0; } /* Volltextsuche Suchformular */
div.tx-indexedsearch  input.tx-indexedsearch-searchbox-sword { width: 250px; padding: 2px 4px; }
/* li.dropdown-submenu ul.dropdown-menu { max-height: 700px; overflow: auto; }*/  /* Spirituelle Lehrer mit Scrollbar */
/* Diese Menüs hier zusätzlich noch in template-script.js angegeben mit den ids, damit sie nicht zuklappen bei mouse over */
/* wenn filterSearchBox active ist, dann die anderen sonst zugeklappten auch aufklappen mit dem style */
div.filterSearchBox.active ~ul.navbar-nav>li>ul.dropdown-menu, #menu6 ~ul.dropdown-menu, #menu103~ul.dropdown-menu, #menu750~ul.dropdown-menu { /* Menü Filmberichte sowie für die englische Seite Various und Filmberichte, hier die Klasse .dropdown-menu verändern, so dass normal aufgeklappt, spart das entfernen der Klasse per JS */
  position: initial; /* default value static */
  display: block !important;
  float: none;
  width:180px;
  min-width: 160px;  
  padding: 0;
  margin: 0 0 0 16px;
  list-style: initial;
  list-style-type:none;
  font-size: 12px;
  text-align: left;
  background-color: rgb(230,222,237);  
  top: auto; /* zurücksetzen der zugewiesenen settings */
  left: auto;
  z-index: auto;
  border: 0 none;
  border-radius: initial;
  box-shadow: none;
  background-clip: initial;   
} 
div.filterSearchBox.active ~ul.navbar-nav>li>ul.dropdown-menu >li >a { white-space: normal; } /* damit umbruch bei langen zeilen */
div.footer-fluid { height: 60px; padding: 20px; background-color: #333; color:grey; min-width: 500px; margin: 28px 0 0 0; } 
div.footer-fluid >div.container { width: 480px; }
div.footer-fluid a { margin: 0 4px; color: grey; }
div.footer-fluid a:link { color: grey; }
div.footer-fluid a:visited { color: grey; } 
div.footer-fluid a:hover { color: grey; text-decoration: underline; } /* olivedrab */

div.sidebarLeft { width: 200px; }
div.sidebarLeft li.dropdown-submenu >a { padding: 12px; margin: 5px; width: 180px; }
#menu726 { color:rgb(107, 185, 24); } /* Menü Häufig */
#menu727, #menu750 { color:#f60; } /* Kongresse/Festivals und Englische Seite Various */
#menu728 { color: mediumvioletred } /* Frauen / Weiblichkeit */
#menu729 { color: #123; } /* Wirtschaft */
#menu730 { color: rgba(183, 89, 51, 0.85); } /* KünstlerInnen */
#menu783 { color: #624f70; } /* Yogalehrende */
#menu731 { color: #337ab7; } /* Weitere */
#menu6, #menu103 { color: #336db7; } /* Sp. Lehrer DE + Englisch */ 
/* menu6 == filmberichte div.sidebarLeft li.dropdown-submenu >a[href$="filmberichte"] */
#menu6 ~ul.dropdown-menu >li>a { display: inline; padding: 0; white-space: normal; }
#menu6 ~ul.dropdown-menu >li { padding: 4px 8px; }
#menu6 ~ul.dropdown-menu >li:hover { background-color: white; }
#menu6 ~ul.dropdown-menu >li>a:hover { background-color: white; }
#menu6 ~ul.dropdown-menu >li.menuSpacer { font-weight: bold; }
@media only screen and (min-width: 1700px) {  /* Min-Width */
   .header-jetzttv-text { bottom: 25px; } /* statt 10px, also etwas höher setzen */  
}
@media only screen and (min-width: 1400px) {  /* Min-Width */
   .header-jetzttv-text { bottom: 10px; } /* statt 10px, also etwas höher setzen */  
}
/* Menü oben, unter 1400px Menü mittig; unter 1200 Menüpunkt "Spende" ausblenden, sonst überlagerung */  
@media only screen and (max-width: 1400px) {
   nav.navbar div.navbar-collapse { text-align: center; }
   nav.navbar ul.navbar-nav { display: inline-block; float: none; } /* war vorher float left */
}
@media only screen and (max-width: 1200px) {   
   div.container { width: 100%; }
   .header-jetzttv-text>span { display: none; } /* gelebte Weisheit raus, nur Jetzt-TV zeigen */
}
@media only screen and (max-width: 1020px) { 
   div.sidebarRight { display: none; } /* Rechte Sidebar ausblenden */
   div.sidebarLeft { float: left; }
   div.row >div.col-md-6 { float: left; margin-right: 0; } /* mittlere spalte hat noch padding, sonst zu viel ohne rechte spalte */
   nav.navbar-default a.navbar-brand { display: none; } /* Jetzt-TV raus, Home noch da */
}
@media only screen and (max-width: 900px) { 
   #menu677 { display:none; }  /* 677 == Menü Datenschutz nav.navbar ul.nav li a[href$="datenschutz"] */     
   div.row >div.col-md-6 { margin-left: 0; }
}
/* linke Menü horizontal oben anzeigen, abstand nach unten zufügen, Sp. Lehrer und Home Btn ausblenden (rechte Banner oben bereits ausgeblendet) */         
@media only screen and (max-width: 840px) { 
   div.sidebarLeft { margin-bottom: 20px; width: 90%; }     
   .filterSearchBox { margin-top: 0; }
   .filterSearchBox >span.searchText { display:none; }
   .filterSearchBox >input { width: 78%; }
   span.glyphicon-search { font-size: 20px; float:left; margin-top: 14px; margin-right: 10px; }  

   ul.navbar-nav { float:left; margin:3px 0 0 0; padding:0; }
   ul.nav >li { float:left; }  
   .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover, .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus { color: white; } /* war default #333 sehr dunkel */
 /* div.sidebarLeft >ul.nav >li.dropdown-submenu { display: none; }*/ /* mehrspaltig nicht mehr anklickbar, daher raus */
   #menu5, #menu103, #menu750 { display: none; } /* 103 und 750 für englische Seite, menu5 für Links */   
   #menu6 + ul.dropdown-menu, #menu103 + ul.dropdown-menu { max-height: 400px; overflow: scroll; } /* sichtbar, aber mit scrolleiste */
   div.row >div.col-md-6 { margin-left: 20px; }  
   .visionBox { display: none; } /* visionstext raus */
   nav.navbar ul.nav >li.active >a { background-color:transparent; color: darkgrey !important; } 
    nav.navbar ul.nav >li.active >a:hover, nav.navbar ul.nav >li.dropdown-submenu >a:focus, nav.navbar ul.nav >li.dropdown-submenu >a:hover { background-color: transparent; color: darkorange !important; } /*  #555 */
   .navbar-default .navbar-nav .open .dropdown-menu>li>a { color: #e7e7e7; } /* Mobile Style Menü */
   .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus { background-color: transparent; color: darkorange !important; }
   .navbar-nav .open .dropdown-menu>li>a { padding-top:10px; padding-bottom: 10px; } /* statt 5px, leichter für touch */ 
   /* .header-jetzttv { display: none; } */ /* header-img raus */   
}

@media only screen and (max-width: 625px) { /* iframe externe termine raus */
  #dropdownMenu1 { display: none; }  
  .visionBox~hr { display: none; } /* visionstext -trenner raus, überlagerung */
  div.row > div.col-md-6 { margin: 0 2px; padding: 0 10px; } /* statt vorher 15px; */  
}
@media only screen and (max-width: 420px) { 
  div.row > div.col-md-6 { padding: 0 5px; }   
} 
/*
div.teaser-container {
	border:2px solid #b0a7b7;
	background-color: #efedf0;
}	*/
	/*	
div.sidebar h2 {
	font-size: 16px;
	border-bottom: 1px solid #b0a7b7;
	text-transform: uppercase;
	font-weight: bold;
}   */
 /* Video QuickBox rechts und Video Fenster Startseite */
    .quickBoxRightContainer {
            width: 110px;
            height: 275px;
            position: fixed;
            overflow: hidden;
            top: 35%;
            right: 0px;      
            z-index: 25;     
        }
        .quickBoxRight {
            width: 90px;
            height: 42px;  
            float: right;                      
            margin: 0px -3px 10px 0px;
            padding: 4px 6px;            
            cursor: pointer;
            border: 4px solid blue;
            border-right: none;
            background-color: yellow;
        }
        div.quickBoxRight:hover {
            margin-right: 0px;
        }
        .disableDiv {
            position: fixed;
            top: 50%;
            left: 0px;
            width: 100%;
            height: 650px;
            margin-top: -325px;
            z-index: 50;
            opacity: 0.90;
            border-top: 2px solid teal;
            border-bottom: 2px solid teal;
            background-color: gray;
        }
        .liveSatsangDiv {
            position: fixed;
            top: 50%;
            left: 50%;
            width: 720px; /* video iframe width */
            height: 465px; /* video height + 30px */
            margin-top: -262px;
            margin-left: -460px; /* (video + chat)width / 2 */ 
            z-index: 100;
            border: none;
        }
        .liveSatsangTopDiv {
            width: 100%;
            height: 30px;
        }
        .liveSatsangBottomDiv {
            width: 100%;
            height: 435px; /* video height */
            border: 2px solid black;
        }       
        .closeBtn {
            float: right;
            position: relative;
            top: 12px;
            left: 17px;        
            margin: 0px;   
            cursor: default;
            z-index: 101;
        }
        .liveChatDiv {
            position: fixed;
            top: 50%;
            left: 50%;
            width: 350px; /* chat width */
            height: 435px; /* liveSatsangBottomDiv height */
            margin-top: -232px;
            margin-left: 300px;  /* liveSatsangVideo Width/2 */
            z-index: 100;
            border: none;
        }