/* kloster-ukulelen-2018.css // Revision: 31x.10.2018 // copyright: pepe */
/* ==================================================================== */

/* CSS-Klassen für die GLOBALE Einstellung des Templates */
        
.cf:before, .cf:after,
.clearfix:before, .clearfix:after { content:""; display:table; }
.cf:after, 
.clearfix:after { clear:both; }
.cf, 
.clearfix { *zoom:1; }

/* Für die Navigation in der linken Seitenspalte */
.vcss_menu ul       { width: 100%; /* Width of Menu Items */ margin-bottom:15px; }	
.vcss_menu li ul    { left: 100%;  /* Set 1px less than menu width */ margin-left:-2px; }
.vcss_menu li ul li { border-left:1px solid transparent; }
.vcss_menu li ul li.sub_ul.sub_first a { border-left:1px solid #fff; }


body { 
    background:#fff;      /* Hintergrund:  weiss       */
    background: #F0EFE6;  /* Hintergrund:  beige       */
    color: #54270c;       /* Schriftfarbe: dunkelbraun */
} 

/* Globale Schrift-Arten und Schrift-Grössen */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 { margin-top: 0px; }

h1 { font-size: 20px; color: #52140C; margin-bottom: .3em; font-style: italic; }
h--1 { font-size: 20px; color: #607e15; margin-bottom: .3em; font-style: italic; }

h2 { font-size: 16px; color: #793811; margin-bottom: .5em; }
h--2 { font-size: 16px; color: #e4fca7; margin-bottom: .5em; }

h3 { font-size: 16px; color: #52140C; margin-bottom: .3em; }
h4 { font-size: 15px; color: #793811; margin-bottom: .5em; }

p  { font-size: 14px; line-height: 1.4em; margin-bottom: .5em; }
.right-container p { font-size: 13px; }
.right-container p.image_caption { font-size: 11px; }


ul {
/* IE7: reset rtl list margin. (#7334) */
   *margin-right: 0px;
/* preserved spaces for list items with text direction other than the list. (#6249,#8049)*/
	padding: 0 40px;
padding: 0 0 0 20px;
}

i.fb { padding-right: .4em; }

.nav.nav-pills>li>a {
   position: relative;
   display: block;
   padding: 10px 15px 10px;
}

div.link-top { 
    text-align: right !important;
}

/* Abstand "vor" und Abstand "nach" ContentParts */
.spaceAfterSummary { /* border-top:1px solid GREEN;*/ margin-top: 30px; }
.spaceAfterArticleSystem { /* border-top:1px solid GREEN;*/ margin-top: 15px; }
.spaceBeforeCP     { /* border-top:1px solid RED; */ clear: both; height: 1px; margin-top: -1px; }
.spaceAfterCP      { /* border-top:1px solid BLUE; */ }


/* Farb Palette */
.transparent { background-color: transparent; }

.weiss      { background-color: #fff; }
.hellgrau   { background-color: #eee; }
.grau       { background-color: #ccc; }
.dunkelgrau { background-color: #555; }
.schwarz    { background-color: #000; }

.hellblau   { background-color: #2f5a94; }
.blau       { background-color: #2f5a94; }
.dunkelblau { background-color: #2f5a94; }


.schatten { 
   -webkit-box-shadow: inset 0 5px 8px -5px rgba(0, 0, 0, 0.7);
   box-shadow: inset 0 5px 8px -5px rgba(0, 0, 0, 0.7);
}
.schatten-oben { 
   -webkit-box-shadow: inset 0 7px 6px -7px rgba(0, 0, 0, 0.7);
   box-shadow: insert 0 7px 6px -7px rgba(0, 0, 0, 0.7);
}

.whiteshadow,
.weiss-mit-schatten {
    background-color: #fff;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.4);
}


.inverse    { color: #fff; }
.inverse h1 { color: #fff; }
.inverse h2 { color: #ccc; }
.inverse p  { color: #eee; }


.article-summary-image { 
   float:left; width: 48.5%; margin: 0 3% 2% 0; 
}
   .article-summary-image img.image-thumb,
   .article-summary-image img.image-article-summary { 
      float: left; width: 100%; height: auto; display: inline-block; }   
   .caption   { 
      display: inline-block; font-size: 11px; color: #369; margin-top: 3px; }
   .copyright { color: #666; }

.article-summary-text { margin: 0; }

.article-system { clear: both; 
    background: #f0efe6; 
    background: rgba(124, 124, 124, 0.15);
    padding: 10px 15px 10px; 
    margin: 15px 0 0; 
}

.bildunterzeile, .image_caption, .image-caption, .caption { 
   font-size: 11px; color: #369; margin: 5px 0; }



/* ==================================================================== */
/* CSS-Klassen für den KOPF-Bereich des Templates ===================== */
/* ==================================================================== */

/* ==================================================================== */
/* CSS-Klassen für den MITTEL-Bereich des Templates =================== */
/* ==================================================================== */

/* ==================================================================== */
/* CSS-Klassen für den UNTEREN-Bereich des Templates ================== */
/* ==================================================================== */


/* ==================================================================== */
/* CSS-Klassen für den kompletten BOOTSTRAP-PART des Templates ======== */
/* ==================================================================== */

.container { max-width: 970px; max-width: 992px; z-index: 1; }

.row      { margin-bottom: 10px; }
    .row .row { margin-top: 10px; margin-bottom: 0; }
    .row.unten_88 { margin-bottom: 3px; }

.equal-height, .equal-height > div[class*='col-'] {  
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   flex: 1 0 auto;
}

hr { margin-top: 20px; margin-bottom: 20px; }

.bs-teaser-row hr { margin-top: -15px; margin-bottom: 10px; border-color: #ccc; }

/* Basis-Einstellung der COLs */    
[class*="col-"] {
   padding-top: 15px;
   padding-bottom: 15px;
   background-color: #eee;
   background-color: rgba(86,61,124,.15);
   border: 1px solid #ddd;
   border: 1px solid rgba(86,61,124,.2);
}


.topbar { 
    height: 30px; 
    background: #E0DFD6; 
    background: #fff; 
    font-size: 12px; 
}
.topbar .nav > li > a { 
    position: relative; 
    display: block; 
    padding: 7px 10px 6px;
}
/* =============================================================== */
/* ===== Smartphone + iPhone 3+4 :: 320px Formatierungen ========= */
/* =============================================================== */
@media only screen and (max-width: 320px) {

    .topbar .nav span { display: none; }
}

.navbar-brand {
    height: 40px;
    padding: 10px 10px 10px 10px;
}

.navbar-toggle {
    padding: 9px 10px;
    margin-top: 3px;
    margin-right: 15px;
    margin-bottom: 3px;
}

.logo-und-slogan {
   height: 40px; 
   background: #ddd;   
}
.logo { 
   float:left; 
   padding-top: 3px; 
   font-size:20px; 
}
.logo span { 
   font-size: 24px; 
}
.slogan { 
   float: right; 
   color: #666; 
   font-size: 16px; 
   margin-top: 9px; 
}

.slogan-2 {
    font-size: 14px; 
    color: #ccc;
}
@media only screen and (max-width: 415px) {
    .slogan-2 { display: none; }
}

nav .navbar-fixed-top { z-index: 10; }

/* Ausnameregel für "disabled" Kategorien in der horizontalen Navigation */
#navbar ul.nav li.dropdown.sub_ul ul.dropdown-menu li.disabled a {
    border-left: 3px solid red;
}
#navbar ul.nav li.dropdown.sub_ul ul.dropdown-menu li.active.disabled a {
    color: #ccc;
}



/* Aufklappen von Menues bei "hover". Kein Mausklick mehr erforderlich! */
/* .dropdown:hover .dropdown-menu { display: block; } */

[class*="col-"].FE-User-only-Block {
   background-color: red;
   color: white;
   text-align: center;
   height: 24px;
   padding: 2px 10px 0px;
   margin: 27px 0 -40px;   /* Variante mit Topbar */
   margin: 20px 0 -30px;   /* Variante mit flacher Topbar */
/* margin: 67px 0 -80px;*/ /* Variante mit Logo und Slogan */
   border: 0px solid #999;
}

.hauptcontainer {
/*
    background: white;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
*/
}
.hauptcontainer .content-container p {
    /* background: yellow !important; */
    /* font-size: 100% !important; */
}

    
[class*="col-"].bild-im-header {
/* min-height: 240px; */
    margin-top: 20px;
/*  Variante mit Logo und Slogan
    margin-top: 74px;
*/ 
   padding: 4px;
   background-color: #fff;
   border:  1px solid #ddd;
b--ackground-color: #8E4215;
b--order:  1px solid #651E11;
}

/* Schattenwurf für bild-im-header */
.shattenwurf {
   position: relative;
   background-color: #999;
}
.schattenwurf:before, 
.schattenwurf:after {
   z-index: -1;
   position: absolute;
   content: "";
   width: 50%;
   max-width: 500px;
   top: 80%;
   bottom: 15px;
   left: 5px;   
   background: #999;
   -webkit-box-shadow: 0 15px 10px #999;
   -moz-box-shadow: 0 15px 10px #999;
   box-shadow: 0 15px 10px #999;
   -webkit-transform: rotate(-3deg);
   -moz-transform: rotate(-3deg);
   -o-transform: rotate(-3deg);
   -ms-transform: rotate(-3deg);
   transform: rotate(-3deg);
}
.schattenwurf:after {
   -webkit-transform: rotate(3deg);
   -moz-transform: rotate(3deg);
   -o-transform: rotate(3deg);
   -ms-transform: rotate(3deg);
   transform: rotate(3deg);
   right: 5px;
   left: auto;
}
    
    
[class*="col-"].b-jumbotron {
   padding: 0px;
   background-color: transparent;
   border: 0px solid #ddd;
}
[class*="col-"].breiter-container {
   padding: 0px;
   background-color: #fff;
   border: 0px solid #ddd;
}
[class*="col-"].breadcrumb-container {
    padding: 10px 15px;
background-color: transparent;
    border-radius: 4px;
    border: 0px solid #ddd;
    font-size: 11px;
}
    

[class*="col-"].left-container {
   z-index:100;
   padding: 15px 15px;
   background-color: #F0EFE6;;
   border: 0px solid #ddd;
}
[class*="col-"].left-container.transparent {
   background-color: transparent;
}
.left-content {
    background-color: #fff;
background-color: transparent;
    width: 100%;
}
    
[class*="col-"].content-container {
   z-index:50;
b--ackground-color: #fff;
background-color: transparent;
   border: 0px solid #ddd;
}
    

[class*="col-"].bilder-2oder4 {
   padding: 10px;
   background-color: #eee;
   border: 5px solid #fff;
}
[class*="col-"].bild-mit-text {
   padding: 10px; 
   background-color: #eee;
   border: 5px solid #fff;
}
    
[class*="col-"].bilder-spezial-mit-text {
   padding: 10px 10px 0px; 
   background-color: #fff;
   border: 0px solid #fff;
}

[class*="col-"].bs_angebot_2 {
   padding: 10px 10px 0px; 
   background-color: #fff;
   border: 0px solid #fff;
}

    
.content-01 {
    background: #ddd;
background: rgba(124, 124, 124, 0.10);
    padding: 10px 15px;
    margin: 15px 0 0;
}
.content-02, .content-04 {
   background: #fff;
background: transparent;
   margin: 15px 0 0;
}
.content-03 {
    background: #fff;
    background: rgba(124, 124, 124, 0.10);
b--ackground: transparent;
    padding: 14px;
    margin: 15px 0 0;
    border: 1px solid #f0efe6;
}
     
     
     
[class*="col-"].right-container {
   padding: 15px 15px;
margin: 0 0 15px;
   background-color: #ddd;
background-color: #F0EFE6;
   border: 0px solid #ddd;
}
@media only screen and (min-width: 376px) { 
    [class*="col-"].right-container.small-only {
        display: none;
    }
}
[class*="col-"].right-container.no-background,
[class*="col-"].right-container.transparent {
   background-color: transparent;
   border:  0px solid red;
   margin-bottom: 0;
}



[class*="col-"].content-plus-right {
    padding: 15px 15px 10px;
m--argin:  10px 0 10px;
    background-color: #fff;
    background: rgba(124, 124, 124, 0.10);
    border: 0px solid #ddd;
}
[class*="col-"].content-plus-right.transparent {
    background: transparent;
}

[class*="col-"].leer-container {
   height:0;
   padding: 0px;
   background-color: transparent;
   border: 0px solid #ddd;
}
[class*="col-"].content-und-right {
   padding: 10px;
   background-color: #eee;
   border: 0px solid #ddd;
   border-top: 3px double #fff;
}

[class*="col-"].bs_angebot {
   padding: 15px 15px 10px;
   background-color: #fff;
   border: 0px solid #ddd;
}

[class*="col-"].unten-00 {
   padding: 15px 15px 10px;
   background-color: #fff;
b--ackground: rgba(124, 124, 124, 0.05);
   border: 0px solid #ddd;
}        
[class*="col-"].unten-01, [class*="col-"].unten-03 {
   padding: 15px 15px 10px;
padding: 10px 15px 10px;
   background-color: #eee;
background: transparent;
   border: 0px solid #ddd;
border-top: 0px double #fff;
}
[class*="col-"].unten-02, [class*="col-"].unten-04 {
   padding: 10px 15px 10px;
   background-color: #fff;
   border: 0px solid #ddd;
}
[class*="col-"].unten-05-schwarz {
   color: #fff;
   padding: 10px 15px 10px;
   background-color: #000;
   border: 0px solid #ddd;
   }
   [class*="col-"].unten-05-schwarz h3 { color:#fff; }
   [class*="col-"].unten-05-schwarz h4 { color:#ccc; }

[class*="col-"].unten-88 {
   padding: 2px 15px 2px;
   background-color: #ae6051;
   border: 0px solid #999;
}
    
[class*="col-"].bg-eee {
   background-color: #eee;
   border: 0px;
   margin: 10px 0 0 0;
   border-top: 1px solid #ccc;
}


[class*="col-"].bs-imagetext {
   background-color: #fff;
   border: 0px;
   border-top: 1px solid #ccc;   
}

[class*="col-"].bs_imagetext {
   background-color: #fff;
    border: 0px;
    border-top: 1px solid #ccc;   
min-height: 420px;
   
background-color: transparent;
border-top: 0px solid #ccc;
padding: 15px 0 0;
}
[class*="col-"].bs-imagetext.no-border,
[class*="col-"].bs_imagetext.no-border {
   border: 0;
}

/*    
bs-col-12-6-4 => array ( 
   title   =>  bootstrap col-xs12-sm6-md4 kein-rahmen
   prefix  =>  <div class="col-xs-12 col-sm-6 col-md-4 kein-rahmen"> 
   suffix  =>  </div>
*/   
[class*="col-"].kein_rahmen {
   background-color: white;
   margin: 10px 0 0 0;
   border: 0px;
   border-top:    0px solid green;
   border-bottom: 0px solid green;
}



/*
bs-row-bluelinen-col-12 => array (
	title   => Bootstrap bs-row-blueLinen_col_12
	prefix  => <div class="row blueLinen_row">
	              <div class="col-xs-12 blueLinen_col">
	suffix  =>    </div>
	           </div>
*/
.blueLinen_row {
/*  background: #f5f5f5 url('../xtra-Templates/blueLinen.png') left top repeat;
    background: transparent;
*/
    background: #ffffee; /* hell-gelb */
    margin: 15px 0;
    padding: 0;
    border:  0;
    border-top:    3px double red;
    border-bottom: 3px double red;
}

[class*="col-"].blueLinen_col {
   background: #111 url('../xtra-Templates/blue--Linen.png') left top repeat;
   background: #ddd;
   border:  0;
}

.r--ow.blueLinen_row [class*="col-"].blueLinen_col h3 { color:#eee; }
.r--ow.blueLinen_row [class*="col-"].blueLinen_col h4 { color:#aaa; }
.r--ow.blueLinen_row [class*="col-"].blueLinen_col p  { color:#eee; }

.durchgestrichen { text-decoration: line-through; }

.adresse-schmal { 
    min-height: 30px;
    font-size: 12px;
    text-align:  center;
    background: rgba(124, 124, 124, 0.3); 
    b--ackground: #E0DFD6;
    background: #FFF;
    color: #eee; 
    padding: 0px 15px 0px; 
    margin: 0 -15px;
    }    
    .adresse-schmal .nav > li > a { 
        position: relative; 
        display: block; 
        padding: 6px 10px 7px;
    }

@media only screen and (max-width: 767px) {
    .a--dresse-schmal { display: block; }
}
@media only screen and (min-width: 768px) {
    .a--dresse-schmal { display: none; }
}


.footer { 
    b--ackground: #E0DFD6;
    background: rgba(124, 124, 124, 0.10);
    b--ackground: #F0EFE6;
    border-top: 1px solid #D3D2C9;
}

.bottom_navi .nav > li > a { 
    position: relative; 
    display: block; 
    padding: 6px 10px 7px;
}


.t--itel-rot {  
    padding-top: 30px;
    border-top: 1px solid #999;
    color: red;
}


/* =============================================================== */
/* ContentPart "NEWS"                                              */
/* =============================================================== */
.pepes_NewsTeaserList { /* background: #ffeeff; */}
.pepes_NewsArticle    { /* background: #eeffee; */}

.newsEntry { padding: 5px 0 0px 0; }

.newsImageTeaser { float: left; border: 0px solid #f6ecee; margin: 3px 3% 5px 0; padding: 0px 0px 0 0; }
.newsImageDetail { float: left; border: 0px solid #f6ecee; margin: 5px 3% 5px 0; padding: 0px 0px 0 0; }

.news_teaser { text-align: left; font-size:100%; }
.news_text   { font-size: 100%; }

.hrNews { clear: both; margin: 5px 0 5px; padding: 5px 0 0px; height: 0; border: 0; border-bottom: 1px dotted #CCC; }

.news_read-more { text-align: right; margin-top: 5px;                    }
.news_back { clear: both; margin-top: 5px; }

.news_topic { margin-bottom: 5px; }

.link.news_zusatzinfos { clear:both; text-align:right; margin-top:15px; }
.link.news_zusatzinfos a { color: red; }

.link.news_read-more {  }
.link.news_read-more a { color: red; }

.link.news_back a { color: red; }

.news_tags { clear: both; color: darkgreen; margin-top: 5px; }

.image-gallery {
    clear: both;
    border-top: 1px dotted #333;
    margin: 15px 0;
}
    .image-gallery-item {
        float: left;
        width: 24%;
        margin: 1% .5% 0 .5%;
    }
    @media only screen and (max-width: 768px) {    
        .image-gallery-item {
            float: left;
            width: 49%;
            margin: 1% .5% 0 .5%;
        }
    }
    @media only screen and (max-width: 320px) {    
        .image-gallery-item {
            float: left;
            width: 99%;
            margin: 1% .5% 0 .5%;
        }
    }

    .image-gallery-item img {
        max-width: 100%;
        height: auto;
        display: inline-block;
    }

/* =============================================================== */
/* ContentPart "KONTAKT"                                           */
/* =============================================================== */
.kontakt { /* background: #ffeeff; */ 
    background: #eee;
    border: 1px solid #ccc;
    margin-top: 10px;
    padding: 10px;
}
hr.hr2 { 
    margin-top: 15px; margin-bottom: 15px; 
    height: 0px; 
    border-top: 2px solid #fff;
}   
.form-type-checkbox .form-checkbox input[type=checkbox] { /* background: #eeffee; */
    margin-right: 5px;
}


/* =============================================================== */
/* Bootstrap-Anpassungen                                           */
/* =============================================================== */

/* Horizontale Navigation */

.navbar-default .navbar-toggle,
.navbar-inverse .navbar-toggle{
    border: 1px solid transparent;
}
.navbar-default .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:hover {
    border: 1px solid transparent;
    background: #666;
    background: rgba(124, 124, 124, 0.20);
}

.navbar.navbar-default.pepes-custom {
    b--ackground-color: #54719e;
    b--ackground-color: #555;
    b--order-bottom: 3 double #fff;
}

.navbar-header a.navbar-brand {
    color: #fff;
}
.navbar-header a.navbar-brand:hover {
    background: #666;
    background: rgba(124, 124, 124, 0.20);
    color: #fff;
}

.n--av.navbar-nav.navbar-right li a {
    color: #fff;
}
.n--av.navbar-nav.navbar-right li a:hover {
    background: #6a8fc3;
    background: #666;
    color: #fff;
}
.n--av.navbar-nav.navbar-right li.active a {
    background: #102649;
    background: #333;
    color: #fff;
}
.n--av.navbar-nav.navbar-right li.active a:hover {
    background: #102649;
    background: #444;
    color: #eee;
}

.navbar-inverse .navbar-nav>.disabled>a, 
.navbar-inverse .navbar-nav>.disabled>a:focus, 
.navbar-inverse .navbar-nav>.disabled>a:hover {
    color: red;
    color: #666;
    border-bottom: 0px solid red;
}