/*
Theme Name: twentytwelve-miti
Description: Theme for bloxi.de based on twentytwelve
Author: MITI
Template: twentytwelve
*/


@import url("../twentytwelve/style.css");

/* Zeilenabstand für Blogbeiträge anpassen, nachfolgende Inhalte etwas heranrücken */
h1.entry-title {
	line-height: 1.45 !important;
	margin-bottom: -0.5em !important;
}


/* button zur weiterleitung auf die kalenderblatt-beiträge */
a.nav-kb, a.nav-kb:visited  {
  text-decoration:none;
  background-color:#cc0000;
  border: 0px solid;
  border-radius: 8px;
  color: #fff;
  padding: 5px 10px;
  font-size: 100%;
  text-overflow: ellipsis;
  overflow: hidden; 
  display: inline-block; 
  white-space: nowrap; 
  max-width: 95%;
 }
 
 a.nav-kb:hover {
   font-weight: bold;
   /* padding: 5px 5px; */
 
 }
 

/* für die überschriften vor ... im kalenderblatt mit den beiträgen */
h1.kb-vor {
  font-family: 'Rock Salt', sans-serif !important;
  font-size: 22px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  margin-top: 1.75em;
  margin-bottom: 0.1em;
}

h1.kb-title {
  font-family: 'Rock Salt', sans-serif !important;
  font-size: 26px !important;
  font-style: normal !important;
  font-weight: 400 !important;
  margin-top: 0em;
  margin-bottom: 0.5em;
}

/* für die Bilder auf der Seite mit der Zusammenschau der Fake-GIFs */

div.miti_fake_mosaik {
	line-height: 0;
}

div.miti_fake_mosaik img {
	width: 216px;
	height: 216px;
	border: 0px;
	margin: 0px;
	border-radius: 0px;
	box-shadow: none;
}


/* eingefügt, weil ab WP 5.7.1 plötzlich Leerabsätze für den [MitiKarte] auftauchen */

p:empty::before {
	content: "" !important;
	display: none !important;
}

/* für den Gasspeicher Füllstand */

.gasspeicher-fuellstand {
	font-size: 58px; 
	text-align: center; 
	margin-top: -25px; 
	margin-bottom: -25px; 
	font-weight: bolder;
}

.gasspeicher-fuellstand a:link,
.gasspeicher-fuellstand a:visited,
.gasspeicher-fuellstand a:hover,
.gasspeicher-fuellstand a:active {
    text-decoration:none;
	cursor: pointer;
	color: black !important;
}

/* für die OSM-Karte */
.ol-attribution {
    display: none !important; /* OSM-Info-Zeile unten rechts ausblenden */
}

/* für die Popups in den OSM-Karten */

.ol-popup {
	width: 220px !important;
	transform: rotate(1deg);
	max-height: 380px;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 15px 12px 2px 12px!important;
}

.ol-popup::before, .ol-popup::after {
	display:none; 
	content: "" !important;
} 

.ol-popup img {
	border-radius: 0px; /* alles andere erzeugt artefakte am oberen und unteren rand des panels 6px; */
	/* width:96% !important; */
	display: block;
	max-height: 200px;
	margin-bottom: 6px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 4px;
}

.ol-popup a:link,
.ol-popup a:visited,
.ol-popup a:hover,
.ol-popup a:active {
    text-decoration:none;
	cursor: pointer;
	color: black;
	font-family: 'Rock Salt';
	font-size: 12px;
	font-style: normal;
	line-height: 14px;
	hyphens: auto;
}

/* Klassen für Rahmen um die über den Shortcode gallery erzeugten Gallerien */

.miti-gallery-frame {
  background-color: #ddc;
  border: solid 5vmin #eee;
  border-bottom-color: #fff;
  border-left-color: #eee;
  border-radius: 2px;
  border-right-color: #eee;
  border-top-color: #ddd;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25) inset, 0 5px 10px 5px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  display: inline-block;
  /*margin: 10vh 10vw;
  height: 80vh; */
  padding: 6px;
  position: relative;
  text-align: center;
  width: 100%;
}
.miti-gallery-frame:before { /* Erhöhung im Rahmen, davon die Innenseite */
  border-radius: 2px;
  bottom: -2vmin;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25) inset;
  content: "";
  left: -2vmin;
  position: absolute;
  right: -2vmin;
  top: -2vmin;
}
.miti-gallery-frame:after { /* Erhöhung im Rahmen, davon die Außenseite */
  border-radius: 2px;
  bottom: -2.5vmin;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.25);
  content: "";
  left: -2.5vmin;
  position: absolute;
  right: -2.5vmin;
  top: -2.5vmin;
}



/* Klassen für die Darstellung der Womo-Stellplätze auf gelochtem Schreibpapier */

.notepad {
  margin-top: 3em;
  background: #f6f6f6;
  box-shadow: 0 1px 4px hsla(0,0%,0%,.25);
  position: relative;
  background-image: -webkit-radial-gradient(#fff 21%, transparent 21%),    
                    -webkit-radial-gradient(#DDD 22%, transparent 22%),
                    -webkit-linear-gradient(top, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,0) 95%,
                                                 hsla(180,25%,50%,.1) 95%, hsla(180,25%,50%,.1) 100%);
  background-image: -moz-radial-gradient(#fff 21%, transparent 21%),
                    -moz-radial-gradient(#DDD 22%, transparent 22%),
                    -moz-linear-gradient(top, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,0) 95%,
                                                 hsla(180,25%,50%,.1) 95%, hsla(180,25%,50%,.1) 100%);
  background-image: radial-gradient(#fff 21%, transparent 21%),                                        /* Lochung */
                    radial-gradient(#DDD 22%, transparent 22%),                                        /* Schatten der Lochung */
                    linear-gradient(top, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,0) 95%,                      /*  horizontale Linien */
                                                 hsla(180,25%,50%,.1) 95%, hsla(180,25%,50%,.1) 100%);
  background-position: 6px 6px, 7px 7px, 50% 18px;
  background-repeat: repeat-y, repeat-y, repeat;
  background-size: 48px 48px, 48px 48px, 24px 24px;
  padding: 22px 12px 48px 84px;
}
.notepad:before { /* vertikale Linie rechts der Lochung */ 
  border-left: 1px solid hsla(0,75%,50%,.2);
  border-right: 1px solid hsla(0,75%,50%,.2);
  bottom: 0;
  content: '';
  left: 58px;
  position: absolute;
  top: 0;
  width: 2px;
}
.notepad:after { /* der Schatten unten rechts unter dem Blatt */
  bottom: 8px;
  border-radius: 4px;
  box-shadow: 0 10px 10px hsla(0,0%,0%,.25);
  content: '';
  height: 100px;
  max-width: 300px;
  position: absolute;
  right: 5px;
  width: 300px;
  z-index: -10; 
  -webkit-transform: rotate(2deg);    
     -moz-transform: rotate(2deg);   
      -ms-transform: rotate(2deg);   
       -o-transform: rotate(2deg);
          transform: rotate(2deg);
}

.notepad h3 { /* Style für  Überschrift im MitiWomoTable */ 
  font-family: 'Rock Salt';
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  margin: 0 0 22px 0;
}

/* Klassen für die Darstellung des Tourtagebuchs als Notebook mit Spiralbindung oben */

.notebook1 {
  display: inline-block;
  margin: 0 auto;
  position: relative;
  background-color: #946947;
  background: linear-gradient(175deg, #B69180, #946947); /*#C9A8A1*/
  width: 97%;
  box-shadow: 1px -1px 5px #555;
  border-top: 1px solid #946947;
  padding-top: 20px;
  padding-bottom: 20px;
  transform: rotate(0.25deg);
  margin-bottom: 14px;
}

.notebook1:before {
  position: absolute;
  content: '';
  top: -10px;  /* Versatz nach oben */
  left: 0;
  height: 21px; /* Höhe zum Abschneiden, damit oben und unten gleich breit */
  width: 99%;
  background-size: 18px 25px; /* erster Wert bestimmt die Breite/Anzahl, zweiter Wert das Abschneiden nach unten */
  background-image: -webkit-radial-gradient(5% 40%, circle, transparent 70%, #555 20%);
  background-image: -moz-radial-gradient(5% 40%, circle, transparent 70%, #555 20%);
  background-image: -ms-radial-gradient(5% 40%, circle, transparent 70%, #555 20%);
  background-image: -o-radial-gradient(5% 40%, circle, transparent 70%, #555 20%);
  background-image: radial-gradient(circle at 5% 40%, transparent 70%, #555 20%);
} 


.notebook1:after, .notebook4:after {
    position: absolute;
    content: '';
    bottom: -1px;
    left: 0px;
    height: 4px;
    width: 100%;
    background-size: 3px 1px;
    background-image: -webkit-radial-gradient(40% 100%, circle, transparent 20%, #946947 35%);
    background-image: -moz-radial-gradient(40% 100%, circle, transparent 20%, #946947 35%);
    background-image: -ms-radial-gradient(40% 100%, circle, transparent 20%, #946947 35%);
    background-image: -o-radial-gradient(40% 100%, circle, transparent 20%, #946947 35%);
    background-image: radial-gradient(40% 100%, circle, transparent 20%, #946947 35%);
}

.notebook2 {
  display: inline-block;
  margin: 0 auto;
  position: relative;
  background-color: #edfa77;
  background: linear-gradient(175deg, #faf5b1, #edfa77); /*#C9A8A1*/
  width: 97%;
  box-shadow: 1px -1px 5px #555;
  border-top: 1px solid #edfa77;
  padding-top: 20px;
  padding-bottom: 20px;
  transform: rotate(-0.25deg);
  margin-bottom: 14px;
}

.notebook2:before{
  position: absolute;
  content: '';
  top: -5px;
  left: 0;
  height: 10px;
  width: 99%;
  background-size: 9px 12px;
  background-image: -webkit-radial-gradient(5% 40%, circle, transparent 70%, #555 20%);
  background-image: -moz-radial-gradient(5% 40%, circle, transparent 70%, #555 20%);
  background-image: -ms-radial-gradient(5% 40%, circle, transparent 70%, #555 20%);
  background-image: -o-radial-gradient(5% 40%, circle, transparent 70%, #555 20%);
  background-image: radial-gradient(circle at 5% 40%, transparent 70%, #555 20%);
} 

.notebook2:after {
  position: absolute;
  content: '';
  bottom: -1px;
  left: 0px;
  height: 4px;
  width: 100%;
  background-size: 3px 1px;
  background-image: -webkit-radial-gradient(40% 100%, circle, transparent 20%, #edfa77 35%);
  background-image: -moz-radial-gradient(40% 100%, circle, transparent 20%, #edfa77 35%);
  background-image: -ms-radial-gradient(40% 100%, circle, transparent 20%, #edfa77 35%);
  background-image: -o-radial-gradient(40% 100%, circle, transparent 20%, #edfa77 35%);
  background-image: radial-gradient(40% 100%, circle, transparent 20%, #edfa77 35%);
}

.notebook3 {
  display: inline-block;
  margin: 0 auto;
  position: relative;
  background-color: #e6bb89;
  background: linear-gradient(175deg, #f0cc9f, #e6bb89); /*#C9A8A1*/
  width: 97%;
  box-shadow: 1px -1px 5px #555;
  border-top: 1px solid #e6bb89;
  padding-top: 20px;
  padding-bottom: 20px;
  transform: rotate(0.50deg);
  margin-bottom: 14px;
}

.notebook3:before{
  position: absolute;
  content: '';
  top: -7px;
  left: 0;
  height: 14px;
  width: 99%;
  background-size: 13px 16px;
  background-image: -webkit-radial-gradient(5% 40%, circle, transparent 70%, #555 20%);
  background-image: -moz-radial-gradient(5% 40%, circle, transparent 70%, #555 20%);
  background-image: -ms-radial-gradient(5% 40%, circle, transparent 70%, #555 20%);
  background-image: -o-radial-gradient(5% 40%, circle, transparent 70%, #555 20%);
  background-image: radial-gradient(circle at 5% 40%, transparent 70%, #555 20%);
} 

.notebook3:after {
  position: absolute;
  content: '';
  bottom: -1px;
  left: 0px;
  height: 4px;
  width: 100%;
  background-size: 3px 1px;
  background-image: -webkit-radial-gradient(40% 100%, circle, transparent 20%, #e6bb89 35%);
  background-image: -moz-radial-gradient(40% 100%, circle, transparent 20%, #e6bb89 35%);
  background-image: -ms-radial-gradient(40% 100%, circle, transparent 20%, #e6bb89 35%);
  background-image: -o-radial-gradient(40% 100%, circle, transparent 20%, #e6bb89 35%);
  background-image: radial-gradient(40% 100%, circle, transparent 20%, #e6bb89 35%);
}
.notebook4 {
  display: inline-block;
  margin: 0 auto;
  position: relative;
  background-color: #b8b894;
  background: linear-gradient(175deg, #ccccb3, #b8b894); /*#C9A8A1*/
  width: 97%;
  box-shadow: 1px -1px 5px #555;
  border-top: 1px solid #b8b894;
  padding-top: 20px;
  padding-bottom: 20px;
  transform: rotate(-0.50deg);
  margin-bottom: 14px;
}

.notebook4:before{
  position: absolute;
  content: '';
  top: -9px;
  left: 0;
  height: 16px;
  width: 99%;
  background-size: 15px 19px;
  background-image: -webkit-radial-gradient(5% 40%, circle, transparent 70%, #555 20%);
  background-image: -moz-radial-gradient(5% 40%, circle, transparent 70%, #555 20%);
  background-image: -ms-radial-gradient(5% 40%, circle, transparent 70%, #555 20%);
  background-image: -o-radial-gradient(5% 40%, circle, transparent 70%, #555 20%);
  background-image: radial-gradient(circle at 5% 40%, transparent 70%, #555 20%);
} 

.notebook4:after {
  position: absolute;
  content: '';
  bottom: -1px;
  left: 0px;
  height: 4px;
  width: 100%;
  background-size: 3px 1px;
  background-image: -webkit-radial-gradient(40% 100%, circle, transparent 20%, #b8b894 35%);
  background-image: -moz-radial-gradient(40% 100%, circle, transparent 20%, #b8b894 35%);
  background-image: -ms-radial-gradient(40% 100%, circle, transparent 20%, #b8b894 35%);
  background-image: -o-radial-gradient(40% 100%, circle, transparent 20%, #b8b894 35%);
  background-image: radial-gradient(40% 100%, circle, transparent 20%, #b8b894 35%);
}

.notebook1 h3, .notebook2 h3, .notebook3 h3, .notebook4 h3{ /* Style für  Überschrift im MitiTourTagebuch */ 
  font-family: 'Rock Salt';
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  margin: 0.5em 0 0.25em 0.4em;
  text-align: center;
}


/* Klassen für das Einfalten und Ausfalten langer Seitenelemente */

.miti-fadeout-gallery, .miti-fadeout-mititourtagebuch, .miti-fadeout-cactusmasonry, .miti-fadeout-mitiwomotable {
  position: relative;
  max-height: 230px; /* Höhe des Elements */
  overflow: hidden;
  margin-bottom: 20px;
}


.miti-fadeout-gallery:after, .miti-fadeout-mititourtagebuch:after, .miti-fadeout-cactusmasonry:after, .miti-fadeout-mitiwomotable:after {
  content: '';
  position: absolute;
  top: 33%; /* bei welcher Höhe fängt der Effekt an */
  bottom: 0;
  left: 0;
  right: 0;
  background-image: linear-gradient( rgba(255, 255, 255, 0.0) 0%, /* Abdeckung 0.0 beginnt bei 0% */
   rgba(255, 255, 255, 1) 60% ); /* volle Abdeckung wird erreicht bei 60% */
}

.miti-foldbutton-gallery, .miti-foldbutton-mititourtagebuch, .miti-foldbutton-cactusmasonry, .miti-foldbutton-mitiwomotable  {
  position:absolute; 
  bottom:10px; 
  left:4px; 
  background-color:lightgray; 
  color: black;
  z-index: 100; /* damit über dem ausgeblendeten Untergrund liegt */
  border-radius: 8px;
  cursor: pointer;
}

.miti-fadeout-mititourtagebuch {  /* Sonderfall wg. Spiralleiste oben (wird sonst verdeckt) */
  padding-top: 16px;
  max-height: 330px; /* Höhe des Elements */
}

.miti-fadeout-mititourtagebuch:after  {
  background-image: linear-gradient( rgba(255, 255, 255, 0.0) 0%, /* Abdeckung 0.0 beginnt bei 0% */
   rgba(255, 255, 255, 1) 80% ); /* volle Abdeckung wird erreicht bei 80% */
}

/* .miti-foldbutton-gallery:hover, .miti-foldbutton-cactusmasonry:hover, .miti-foldbutton-mitiwomotable:hover  {

} */




/* Titel von Page mit Kalenderblatt ausblenden, weil zusätzlich von Plugin MitiKalenderblattHeader erzeugt  */
#post-26670 .entry-header h1 {
 display: none;
}

#post-26670 .entry-content h1 {
 margin-bottom: 4px;
}

.kalenderblatt-tageslicht {
    font-size: 16px;
    font-weight: 200;
    font-style: italic;
    margin-bottom: 4px !important;
}

/* center the blockquote in the page */
.kalenderblatt-blockquote-wrapper {
   display: flex;
   /*height: 100vh;*/
   padding: 0 20px;
   margin: 20px 0 30px 0;
}

/* Blockquote main style */
.kalenderblatt-blockquote {
    position: relative;
    /*font-family: 'Barlow Condensed', sans-serif;*/
    max-width: 620px;
    margin: 20px auto;
    align-self: center;
}

/* Blockquote header */
.kalenderblatt-blockquote h1 {
    /*font-family: 'Abril Fatface', cursive;*/
    position: relative; /* for pseudos */
    color: #e74848;
    font-size: 1.8rem;
    font-weight: normal;
    line-height: 1;
    margin: 0;
    border: 6px solid gray;
    border: solid 4px;
    border-color: gray;
    border-radius:20px;
    padding: 25px;
}

/* Blockquote right double quotes */
.kalenderblatt-blockquote h1:after {
    content:"";
    position: absolute;
    border: 4px solid gray;
    border-radius: 0 50px 0 0;
    width: 60px;
    height: 60px;
    bottom: -64px;
    left: 50px;
    border-bottom: none;
    border-left: none;
    z-index: 3; 
}

.kalenderblatt-blockquote h1:before {
    content:"";
    position: absolute;
    width: 80px;
    border: 4px solid white;
    bottom: -4px;
    left: 50px;
    z-index: 2;
}

/* increase header size after 600px */
@media all and (min-width: 600px) {
    .kalenderblatt-blockquote h1 {
        font-size: 2rem;
        line-height: 1.2;
   }
}

/* Blockquote subheader */
.kalenderblatt-blockquote h4 {
    position: relative;
    /*color: #ffffff;*/
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
    padding-top: 15px;
    z-index: 1;
    margin-left:150px;
    padding-left:12px;
}


.xkalenderblatt-blockquote h4:first-letter {
  margin-left:-12px;
}







/* Widget "unsere geliebte Bloxi" */

.in-memorium li {
  margin-left: 6% !important;	
}


/* Statistikdaten mit Tafel als Hintergrundbild */
.tafelbild {
    color: white;
    background-image: url("/wp-content/themes/twentytwelve-miti/page_templates/tafel3.jpg");
    background-repeat: no-repeat;
    background-position: left top; 
    background-size: 100% 100%; 
    transform: rotate(2deg); 
}

.tafelbild-leerspalte { /* für die Spalte links und rechts, die den Rahmen überdeckt */
   width:12%; 
}

.tafelbild-leerzeile { /* für die Zeile oben und unten, die den Rahmen überdeckt */
   height:30px; 
}

td.tafelbild-zahl, td.tafelbild-zahl a, td.tafelbild-zahl a:hover, td.tafelbild-zahl a:visited { /* Mengenangaben in der Tabelle */
    text-align:right;
    font-weight: bold;
    font-family: "Rock Salt";
    font-size: 12px;
	color: white !important;
	text-decoration: none !important;
}

td.tafelbild-text, td.tafelbild-text a, td.tafelbild-text a:hover, td.tafelbild-text a:visited { /* Textangaben in der Tabelle */
    text-align:left;
    font-size: 12px;
	color: white !important;
	text-decoration: none !important;
	
}

/* Abstände vor und hinter links bzw. rechts ausgerichteten Bildern im Fließtext von Beiträgen */

div.wp-caption.alignleft > p.wp-caption-text, div.wp-caption.alignright > p.wp-caption-text {
	margin-bottom: 0px;
}

div.wp-caption.alignleft, div.wp-caption.alignright {
	margin-bottom: 0px;
	margin-top: 0px;
}


/* für die Ausgabe der Tag-Nummer bei Touren-Beiträgen */

.tag_nummer{
  width: 54px;
  height: 54px;
  border: 1px solid #000;
  background-color: #000;
  text-align: center;
  border-radius: 100%;
  font-size: 14px;
  line-height: 16px;
  padding-top: 9px;
  float: right;
  margin-top: -31px;
  color: white;
  text-transform: uppercase;
}
.tag_nummer span{
  font-size: 24px;
  display: block;
  font-weight: 800;
}


/*-- Styles für volle Breit-Seite ---------------------------------------------------------------*/

.page-template-full-width-miti  {
    width: 100%;
    margin: 0px;
	padding: 0px;
    border: 0px;
	/* background-color: coral; */
	
}

.page-template-full-width-miti .site-header { display : none; } /* Header nicht anzeigen */

.page-template-full-width-miti .entry-header {
  margin: 12px;
  display: none;
}
.page-template-full-width-miti .ueberschrift {
    font-family: 'Rock Salt' !important;
	font-size: 26px !important;
	font-style: normal !important;
	font-weight: 400 !important;
	text-align: left;
	margin: 0px 0px 5px 0px;
	padding: 0;
}	


.page-template-full-width-miti .datum {
    font-family: 'Rock Salt' !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 200 !important;
	text-align: right;
}	

.page-template-full-width-miti .site { 
    width: 100%;
	max-width: 100%;  /* muss hier definiert werden, sonst wird es von /twentytwelve/style.css über media-queries festgelegt */
    margin: 0px; 
    border: 0px; 
    padding: 0px; 
    /* background-color: coral;  */
}

.page-template-full-width-miti .site-content {
    width: 100%;
    margin: 0px; 
    border: 0px; 
    padding: 0px; 
}

.page-template-full-width-miti .site-content article {
	border: 0px;
	margin: 0px;
}

.page-template-full-width-miti #colophon { display : none; } /* colophon im footer nicht anzeigen */
.page-template-full-width-miti .entry-meta { display : none; } 


/* damit die Titelbilder der Beiträge die volle Breite des Panels ausfüllen */
.page-template-full-width-miti .wp-caption { max-width: 100% !important; } 
.page-template-full-width-miti img.size-large, 
.page-template-full-width-miti img.size-medium
 { 
  width: 100%;
  
}


 .page-template-full-width-miti .panel-links {
   width: 30%;
   padding: 20px;
   float: left;
   margin: 0px;
   border: 1px solid #aaa;
   overflow: auto; 
   background-color: white;
}
 .page-template-full-width-miti .panel-rechts {
   width: 60%;
   padding: 20px;
   float: left;
   margin: 0px;
   border: 1px solid #aaa;
   overflow: auto; 
   background-color: white;
}

.ajax-loader-gif {
  position: fixed;
  top: 50%;
  left: 77%;
  z-index: 10;
    
}

 .page-template-full-width-miti .panel-debug {
   width: 100%;
   height: 200px;
   position: fixed;
   top: 0px;
   left: 0px;
   padding: 20px;
   margin: 10px;
   border: 1px solid #aaa;
   background-color: light-grey;
   max-height: 200px;
   overflow: auto;
   background-color: #d9d9d9;
   opacity: 0.9;
   z-index: 5;
   display: none;
}

/* Styles für die übrigen Page-Templates -------------------*/

/* Hintergrundbild Wanderschuh in der Widget-Spalte */

div.wanderschuh {
    background-image: url("/wp-content/uploads/2018/01/Wanderschuh_199x147.png");
	background-repeat: no-repeat;
    background-position: center; 
	background-size: 60%; 
}

/* Hintergrundbild Womo in der Widget-Spalte */

div.womoschild {
	background-repeat: no-repeat;
    background-image: url("/wp-content/uploads/2018/01/womoschildblau_198x147.png");
    background-position: center; 
	background-size: 90%; 
}

/* Style für das Widget Orte im Blog */

div.orte_im_blog a {
text-decoration: none;
padding-left: 10px;
color: black !important;
}

div.orte_im_blog a:hover {
  font-weight: bold;
  }

div.orte_im_blog h3 { font-size: 120%;
}

/* optimierung des jetpack carousel (lightbox) */

/* Move close icon to the right. */
.jp-carousel-transitions .jp-carousel-close-hint {
position: fixed;
text-align: right;
right: 40px;
width: 100px;
}

/* increase the size of the icon */
.jp-carousel-close-hint span
{
font-size: 60px !important;
}


/* Move caption to the center & increase the font size */
.jp-carousel-info h2 {
text-align: center !important;
font-size: 40px !important;
}

/* Move the caption a bit higher than the default since on a mobile screen it gets hidden if the browser has a lower bar */
@media only screen and (max-width: 760px)
{
.jp-carousel-photo-info {
bottom: 100px !important
}
}

/* Dont display any meta info */
.jp-carousel-image-meta {
display: none;
}

/* Hide all comment stuff */
.jp-carousel-comment-form-container {
display: none !important;
}

#jp-carousel-comments-loading {
display: none !important;
}

.jp-carousel-comments {
display: none !important;
}


/* klasse für die einbindung von rechtsbündigen "wp osm plugin"-maps in blog-beiträgen */

div.wp_osm_right {
  width: 45%;
  float: right;
  margin-top: 7px;
  margin-left: 7px;
  margin-bottom: 7px;
}

/* klasse für die einbindung von zwei vertikal angeordneten "wp osm plugin"-maps in blog-beiträgen */


div.wp_osm_vert_container {
  width: 45%;
  float: right;
  margin-top: 7px;
  margin-left: 7px;
  margin-bottom: 7px;
}

div.wp_osm_vert_container>div.map {  /* erster karte etwas abstand zur zweiten verschaffen */
	margin-bottom: 7px;
}

div.wp_osm_vert_container div.map:first-child div.ol-zoom {  /* bei erster karte zoom-buttons ausblenden */
  display: none;
}	


/* klasse für die einbindung von zwei horizontal angeordneten "wp osm plugin"-maps in blog-beiträgen */

div.wp_osm_horiz_container {
  width: 100%;
  height: 200px;
  margin-top: 0px;
  margin-bottom: 12px;
}

.wp_osm_horiz_linkekarte {
 width:49%; 
 float:left;
}	

.wp_osm_horiz_rechtekarte {
 width: 49%;
 float:right;
}	

.wp_osm_horiz_linkekarte div.ol-zoom {  /* bei erster karte zoom-buttons ausblenden */
  display: none;
}	


/* Buttons für die Navigation unter Seiten mit Blogbeiträgen und unter einzelnen Beiträgen */

.nav-previous > a,  .nav-next > a {
 text-decoration:none;
 color:#cc0000;
 background-color:#cc0000;
 border: 0px solid;
 border-radius: 8px;
 color: #fff;
 padding: 5px 10px;
 font-size: 85%;
 text-overflow: ellipsis;
 overflow: hidden; 
 display: inline-block; 
 white-space: nowrap; 
 max-width: 95%;
}

.nav-previous > a:hover, .nav-next > a:hover {
  font-weight: bold;
  /* padding: 5px 5px; */

}


/* für das CactusMasonryPlus in der Seite "Übersicht" mit den letzten Beiträgen */

.cactusMasonry .gallery.metabelow .meta {
 padding-top: 2px !important;
 padding-bottom: 2px !important;

}
.cactusMasonry .gallery.metabelow .title {
	padding: 0 0 2px 0 !important;
}

.cactusMasonry .gallery.metabelow .date {
	font-size: 80% !important;
}

/* für die Anzeige der Posts und heute vor ... */

.heutevorcontainer {
  margin-top: -20px; /* hochziehen, weil davor automatisch ein leere absatz generiert wird, diesen damit überdecken */
 }

.heutevoreintrag {
   clear : both;
}

.heutevoreintrag a {
   text-decoration: none;
}

.heutevoreintrag img {
  float : left;
  margin-right: 10px;
  margin-bottom: 10px;
  margin-left: 15px;
}

.heutevoreintrag p {
    margin-left: 0px;
    margin-bottom: 4px !important; 
}


/* HDR anzeige unter den Bildern in der Galerie ausblenden */

.jp-carousel-titleanddesc-title {
display: none;
}

/* Bildunterschriten     funktiniert nicht, wirkt fälschlicherweise vor alltem auf titelbilder, noch mal untersuchen

p.wp-caption-text {
margin-bottom: 0px ;
} */



/* Blockabstände in der Widget-Area */

.widget-area .widget {
margin-bottom: 1.5em;
}


.widget-area .widget .wp-caption-text {
margin-bottom: 0px;
}

/* einstellungen für den Seitenheader */

hgroup img {  /*  Bild im Header normalerweise nicht anzeigen */
	display: none;
}

@media screen and (min-width: 960px) {  /* Bild im Header anzeigen ab Breite von 960px) */

hgroup img {
	display: block;
	float: right;
	margin: 0 0 0 0;
	width: 60%;
}

}

/* Schriften im Header */

#logo-right {  /* für das Floating neben dem Bild */
	float: left;  
}


.site-header h1 a {
  font-size: 2.2em;
  font-weight: bold;
  line-height: 70%;
}

.site-header h2  {
  font-size: 1.3em;
  margin-left: 4px;
}


/* weitere Formate */

div.site-info { display:none; }  /* keine wordpress notiz am seitenende */

div.bilderwand_links>a { /* die links zu den bilderwänden formatieren */
  text-decoration:none;
  color: black !important;
  opacity: 66%;
}

div.bilderwand_links>a:hover { /* die links zu den bilderwänden formatieren */
  opacity: 100%;
/*font-weight: bold;*/
}

header.archive-header { /* ueberschrift "seiten aus dem archiv" ausblenden */
  display: none;
}

.widget-area .widget h3 {  /* uberschriften widget-spalte */
  font-size: 16px;
  margin-bottom: 4px;
}

h1.archive-title {  /* uberschriften kategorie-archiv */
  font-size: 16px;
}

.main-navigation * {
  z-index: 3;  /* bei 2 verschwinden sub-menuüs unter dem masonry im beitrag */
}

.main-navigation li { /* Abstand zwischen den Menueeinträgen */
    margin: 0 2.2em 0 0;
}

li.menu-item a { /* eintraege im hauptmenue */
  font-size: 18px;
}

.main-navigation li ul li a /* untermenues der hauptmenues */
{
  font-size: 15px;
}

/* galerie-menü speziell stylen */

.main-navigation li#menu-item-7001 ul li a 
{
  font-size: 12px;
  text-transform: none;
  z-index: 5;
}



article.category-sticky {  /* beitraege vom typ category-sticky */
 background-color: #e6e6e6;
 padding: 8px;
 border-radius: 12px !important;
 box-shadow: 8px 8px 4px gray;
}

article.category-sticky footer.entry-meta {  /* keine Meta-Infos in den Rubriken Überschriftkästen anzeigen */
display: none;
}

/* fuer den news-ticker auf der startseite */

.ticker-news {
  margin-top: 15px;
  border-radius: 6px !important;
  margin-bottom: 30px;
  margin-left: 0px;
  margin-right: 0px;
 }

.ticker-news span {
  background: #264d00;
}

.tickercontainer,  .ticker-news, .ticker-mask ul li {
  background: #f2f2f2  !important; 
}

.ticker-news span {       
  font-family: arial,sans-serif;
   font-size: 18px;
   /* padding-top: 8px !important; */
    }

.ticker-news .tickercontainer ul.newsticker li a {
	margin-right: 24px;
}

.ticker-news ul a {
    /* über google fonts plugin eingestellt    font-family: "Rock Salt", "Courier",arial,sans-serif;
font-weight: bold; */
  text-decoration:none;
}

/* footer von infinite scroll */
div.blog-credits {
	display: none;
}


/* für das masonry */

div.cactus_masonry_databox div.cm_title  /* stil der bildbeschriftung */
{
    /* font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    padding-bottom: 7px; */
 font-size: 1.1em !important;  /* ohne important gehts nicht */
}

div.cactus_masonry_databox
{
    bottom: auto !important;
    position: relative !important;
    /* Set the colour to black to remove the box's transparency */
    background-color: black !important;
}

img.masonry_brick_img:hover
{
    /*We need to move the hover event to .masonry_brick_a*/
    opacity: 1!important;
}

.masonry_brick_a
{
    -webkit-transition: opacity 250ms ease-in-out;
    -moz-transition: opacity 250ms ease-in-out;
    -o-transition: opacity 250ms ease-in-out;
    transition: opacity 250ms ease-in-out;
 text-decoration:none !important;
}


/* transparenz-effekt des bildes bei hover zurücknehmen */
div.masonry_brick_a:hover img.masonry_brick_img, a.masonry_brick_a:hover img.masonry_brick_img, div.masonry_brick_a:hover div.cactus_masonry_cropped, a.masonry_brick_a:hover div.cactus_masonry_cropped
{
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	opacity: 0.75 !important;
}

/* für Ort und Datum über Bild */

.ort-datum-in-pic, .ort-datum-in-pic-goldframe {
    height: 25px;
	position: absolute;
    bottom: 18px;
    right: 24px;
    /*padding-left: 12px;
    padding-right: 12px;*/
	margin: 0;
	/* background-color: black;
    color: white; */

	background-color: white;
    color: black;
	opacity: 0.65;
	font-weight: bold;
}

.ort-datum-in-pic-goldframe {
    bottom: 50px;
    right: 52px;
}


.ort-datum-in-pic:before, .ort-datum-in-pic:after,
.ort-datum-in-pic-goldframe:before, .ort-datum-in-pic-goldframe:after{
    content: '';
    width: 0;
    height: 0;
}

.ort-datum-in-pic:before,.ort-datum-in-pic-goldframe:before {
    border-bottom: 25px solid white;
    border-left: 10px solid transparent;
    float:left;
    margin-left: -10px;
	padding-right: 7px;

}

.ort-datum-in-pic:after, .ort-datum-in-pic-goldframe:after {
    border-top: 25px solid white;
    border-right: 10px solid transparent;
    float:right;
    margin-right: -10px;
	padding-left: 7px;
}


.rot1 {
	transform:rotate(1deg);
}
.rot2 {
	transform:rotate(1.8deg);
}
.rot3 {
	transform:rotate(2.5deg);
}
.rot4 {
	transform:rotate(-1deg);
}
.rot5 {
	transform:rotate(-1.7deg);
}
.rot6 {
	transform:rotate(-2.5deg);
}



.ort-datum-ohne-pic {
    float:right;
    background-color: black;
    color: white;
    padding-left: 20px;
    padding-right: 20px;
}

.wowada-infozeile {  /* wenn die buttons und das datum in eigener zeile über dem text erscheinen müssen */
	margin-bottom: 2px;
}

/* für die GPX-Anzeige mit WSP GPX Maps */

div.wpgpxmaps_summary { /* der Block mit den Tourdaten unter der Grafik */
    	font-size: 16px;
    background:  #eae672; 
 border: 2px solid #ddd;
 margin: 18px 0px 12px 20px;
 padding: 28px 14px 8px 14px;    
 width: 260px;
   -webkit-box-shadow: 0 2px 12px rgba(0,0,0,.5);
    -moz-box-shadow: 0 2px 12px rgba(0,0,0,.5);
    box-shadow: 0 1px 2px #000;
      -webkit-transform: rotate(1deg);
  -moz-transform: rotate(1deg);
  -o-transform: rotate(1deg);
  -ms-transform: rotate(1deg);
  transform: rotate(1deg);
}

span.totlen, span.totaleleup , span.totaleledown , span.totaltime  {
    margin-bottom: 2px;
    display: block;
}

.summarylabel {
   font-family: 'Rock Salt';
}	


.gpx-button /* , div.wpgpxmaps_summary + a, */  { /* der Anchor zum Herunterladen */
     
 font-size: 16px;
 
 text-decoration:none;
 color: white;
 background-color:#cc0000;
 border: 0px solid;
 border-radius: 8px;
 color: #fff;
 padding: 10px 10px;
 margin: 6px 0px 6px;;
 display: inline-block;
}

.gpx-button:hover /* , div.wpgpxmaps_summary +a:hover*/  {
  font-weight: bold;
 color: white;
  /* padding: 5px 5px; */

}


/* für wandern und womo */

.wanderblock , .womoblock {
margin-top: 15px;
margin-bottom: 32px;
margin-left: 5%;
padding:      2px 8px 2px 8px; 
position: relative;
width: 90%; 
min-width: 400px;
min-height: 100px;

background:  #eae672; 

-webkit-box-shadow: 0 2px 12px rgba(0,0,0,.5);
-moz-box-shadow: 0 2px 12px rgba(0,0,0,.5);
box-shadow: 0 1px 2px #000;
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-o-transform: rotate(1deg);
-ms-transform: rotate(1deg);
transform: rotate(1deg);
}

.wanderblock {
    margin-top: 40px;
background:  #eae672 url(page_templates/wandern_tabelle_icon.png) no-repeat 8px 8px; 
/*background:  #eae672 url(page_templates/parken2_27x40.png) no-repeat 8px 8px; */
/*background-size: 10%;*/ 
}

.womoblock {
    margin-top: 15px;
    background:  #eae672 url(page_templates/parken2_27x40.png) no-repeat 8px 8px; 

}

/* der tesastreifen */ 
.wanderblock::before, .womoblock::before, div.wpgpxmaps_summary::before {
    content: ' ';
    display: block;
    position: absolute;
    left: 35%;
    top: -15px;
    width: 30%;
    height: 30px;
    z-index: 2;
    background-color: rgba(243,245,228,0.5);
    border: 2px solid rgba(255,255,255,0.5);
    -webkit-box-shadow: 0 0 5px #888;
    -moz-box-shadow: 0 0 5px #888;
    box-shadow: 2px 2px 2px #000;
    -webkit-transform: rotate(-6deg);
    -moz-transform: rotate(-6deg);
    -o-transform: rotate(-6deg);
    transform: rotate(-6deg);
}

.infoboxneu h3 { font-size: 200%; margin-left: 130px;}


.wanderblock p.wandertitel {
    font-family: 'Rock Salt';
	font-size: 26px;
	font-style: normal;
	font-weight: 400;
	text-align: left;
	padding: 0;
	margin-top: 14px;
	margin-left: 70px;
	margin-bottom: 20px;
	color: black;
}

.womoblock p.womotitel {
    font-family: 'Rock Salt';
	font-size: 26px;
	font-style: normal;
	font-weight: 400;
	text-align: left;
	padding: 0;
	margin-top: 4px;
	margin-left: 38px;
	margin-bottom: 20px;
	color: black;
}

.wandern-button-in-pic, .wandern-button-in-pic-goldframe {
	position: absolute;
	width: 80px;
	height: 40px;
	background-position: center center;
	background-size: 74px 39px;
	background-repeat: no-repeat !important;
	bottom: 15px;
	/* background:url('...'); funktioniert hier nicht, weil WP dieses Property in seinen Style überschreibt und !important verhindert, dass diese Einstellung per JS überschrieben werden kann */
	
}

.wandern-button-in-pic-goldframe {
	bottom: 50px;
}


.womo-button-in-pic, .womo-button-in-pic-goldframe {
	position: absolute;
	width: 80px;
	height: 40px;
	background-position: center center;
	background-size: 74px 36px;
	background-repeat: no-repeat !important;
	bottom: 15px;
	/* background:url('...'); fnktioniert hier nicht, weil WP dieses Property in seinen Style überschreibt und !important verhindert, dass diese Einstellung per JS überschrieben werden kann */
	
}

.womo-button-in-pic-goldframe {
	bottom: 50px;
}


.wandern-button {
	width: 80px;
	height: 40px;
	background-position: center center;
	background-size: 74px 36px;
	background-repeat: no-repeat !important;
	bottom: 10px;
	/* background:url('...'); fnktioniert hier nicht, weil WP dieses Property in seinen Style überschreibt und !important verhindert, dass diese Einstellung per JS überschrieben werden kann */
}

.womo-button {
	width: 80px;
	height: 40px;
	background-position: center center;
	background-size: 74px 36px;
	background-repeat: no-repeat !important;
	bottom: 10px;
	/* background:url('...'); fnktioniert hier nicht, weil WP dieses Property in seinen Style überschreibt und !important verhindert, dass diese Einstellung per JS überschrieben werden kann */
}

table.wandern-table, table.womo-table, table.womo-liste { 
border-collapse:collapse;
border-spacing:0;
width:100%;
display:table;
border:4px solid #ccc;
padding-bottom: 8px;
margin-bottom: 20px;
}

table.wandern-table th, table.wandern-table td, table.womo-table th, table.womo-table td, .table.womo-liste th, table.womo-liste td { 
    border-bottom:1px solid #ddd; 
    border-top: 1px solid #ddd;
    padding: 6px 10px 6px 10px;
    display:table-cell;
    line-height: 24px;
    vertical-align: middle;
    font-size: 12px;
    color: rgb(117,117,117);
} 
table.wandern-table tr:nth-child(odd), table.womo-table tr:nth-child(odd), table.womo-liste tr:nth-child(odd){background-color:#fff}
table.wandern-table tr:nth-child(even), table.womo-table tr:nth-child(even), table.womo-liste tr:nth-child(even) {background-color:#f1f1f1}
table.wandern-table th, table.womo-table th, table.womo-liste th{
    padding:8px 8px;
    display:table-cell;
    text-align:left;
    vertical-align:top;
    font-weight: bold;
    text-transform: uppercase;
    color: #636363;}
table.wandern-table td:first-child, table.womo-table td:first-child, table.womo-liste td:first-child {padding-left:16px}

a.womo-ort-link:link, a.womo-ort-link:visited {
	color: black;
	text-decoration: none;
    font-weight: bold;
}

/*a.womo-ort-link:hover {
	
}*/


.tooltip {
    position: relative;
    display: inline-block;
    /*border-bottom: 1px dotted black;*/
}

.tooltip .tooltiptext-breit {
    visibility: hidden;
    width: 380px;
    background-color: #555;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 15px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 10px;
    margin-left: -20px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext-schmal {
    visibility: hidden;
    width: 220px;
    background-color: #555;
    color: #fff;
    text-align: left;
    border-radius: 6px;
    padding: 15px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 10px;
    margin-left: -20px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip .tooltiptext-breit::after, .tooltip .tooltiptext-schmal::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 18px;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext-breit, .tooltip:hover .tooltiptext-schmal {
    visibility: visible;
    opacity: 1;
}

.geo_k {
	font-size: 75%;
}

img.i_icon   {
 height: 16px; 
 width: 16px;
 border: none;
 box-shadow: none;
 transform: translateY(3px);
}
img.i_psst, img.i_strom  {
 height: 12px; 
 width: 12px;
 border: none;
 box-shadow: none;
}


@font-face {
    font-family: DropCapFont;
	src: url('page_templates/Roycroft-Initials.ttf');
}


span.drop-cap-goldframe {
    font-family: DropCapFont;
	float: left;
    font-size: 600%;
    line-height: 40%;
}

span.drop-cap {
	float: left;
    font-size: 400%;
    line-height: 80%;
	font-weight:900;
}

/* Anpassungen für Firefox 
@-moz-document url-prefix() {
  span.drop-cap {
    margin-top: .15em;
  }
}
*/

img.goldframe {
  border-image: url('page_templates/goldframe.png') 93 92 87 92 stretch stretch; 
  border-color: #f4be52;
  border-style: inset;
  border-image-width: 60px;
  border-width: 32px;
  border-image-outset: 10px;	
  /*display: block;*/
  /*width: 40%;
  height: auto;*/
  background-color: #ffe;
  margin: 0 auto;
}
/*@media all and (max-width: 500px) {
  img.frame { 
    border-width: 0px;
    width: 100%; }
}*/

/* Breitenanpassugen durch Media-Queries */

@media screen and (max-width: 800px) {
	/* für Ort und Datum über Bild */

.ort-datum-in-pic, .ort-datum-in-pic-goldframe {
    top: 15px;
	bottom: unset;
    right: 20px;
}

.ort-datum-in-pic-goldframe {
    top: 47px;
	bottom: unset;
    right: 52px;
}
}