/** Version vom 9.März 2016 **/

@import url('fonts/architect.css');
@import 'btn-slide.css';

/* -- Modifikation event-gallery --- */
div#events .item-container{
  width: 50%;
}
/** falsche Anzeige der Thumbnails Eventgallery 2017-03-22 **//
.eventgallery-events-gridlist a {
  display: block;
}

#events	.content { position: relative; 
    top: 0; left: 0; background: none; 
    padding: 1px 1px; 
    border: 1px solid #ccc; 
    overflow: visible; }
#events .content > * { opacity: 0.8; 
    -webkit-transform: none; 
    -webkit-transform: translateX(0); 
    -moz-transform: translateX(0%); 
    -ms-transform: translateX(0%); 
    -o-transform: translateX(0%); 
    -webkit-transition: all 0.6s ease; 
    -moz-transition: all 0.6s ease; 
    -ms-transition: all 0.6s ease; 
    -o-transition: all 0.6s ease; }

/* www.zitate.de, CSS wird von website geholt
-----------------------------------------------------------*/
blockquote { 
    border: 0px dashed black;
    width:400px; 
    position:relative; 
    left:0%; 
    text-align: left;
    line-height:1.3em; 
    padding-top:40px; 
    background:url("dq1.jpg") no-repeat top left; 
}

div.quote * a {
    text-decoration:none;
    line-height:1.3em; 
    font-size:1.5em; 
    font-family: 'Pacifico', cursive;
    color:red; 
}
div.quotation{
    padding-bottom:10px; 
    padding-right:20px;
    background:url("dq2.jpg") no-repeat bottom right; 
}
div.quote div.source, div.quote div.source a {
    font-size:1em; 
    color: gray;
    text-align:right; 
} 
/* Reiseberichte in Handschrift
------------------------------------------------------------*/
#reisefont{
    font-family: 'architects_daughterregular';
}

#nea-centercontent{
width: 720px;
margin: auto;
border: 1px solid black;
float: center;  /* Lage innerhalb des Browserfensters */
padding-top:20px;
}
/** tooltip - Erklärungsfenster
---------------------------------------------------------------**/
.nea-tooltip { position: relative; }
.nea-tooltip a { 
    text-decoration : none;
    color : green;
    font-family: Verdana, Geneva, sans-serif; 
    font-weight: bold;
}

.nea-tooltip a span { 
    display: none; 
    color: #FFFFFF;
}
.nea-tooltip a:hover span { 
    display: block; 
    position: absolute; 
    background: #aaa ; 
    height: 40px; 
    width: 250px; 
    left: 50px; 
    top: -50px; 
    color: #FFFFFF; 
    padding: 5px 5px 5px 10px; 
    font-size: 0.8em;
}

/** sticker mit tesafilm - roter Hintergrund 
----------------------------------------------------------------**/
/**FIRST CREATE THE BOX**/
#tape{
  color:#fff;
  position: relative; /*lets us later position the tape relative to the box*/
  width:200px;
  margin:80px; /*you need enough margin to accomodate the tape*/
  background:#832436;
  padding:30px;
  /*add a small drop shadow to the box*/
  -webkit-box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .75);
  -moz-box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .75);
  box-shadow: 0 4px 10px -4px rgba(0, 0, 0, .75);
}

/*The basic styling of the tape strips*/
#tape:before, #tape:after{
  content: ''; /*create a blank pseudo element, if you wanted something written on the tape, place it between the ' '*/
  display: block;
  position: absolute; /*positions the tape relative to the box created above rather than the whole page*/
  background-color: rgba(220,212,176,0.85); /*using rgba for the colour lets us make the tape a little transparent*/
  height: 25px; /*height of the tape*/
}

/* Position the sticky tape strips - first the left strip */
#tape:before { /*using :before places the tape on the left of the box*/
  left:-15px; /*position from the left edge of the #tape div - a negative value moves the tape 5px to the left of the box's edge*/
  top: -15px; /*position from the top edge of the #tape div - a negative value moves the tape 15px above of the box's edge*/
  width: 50px; /*width of the tape*/
  /*rotate the tape 12 degrees anti-clockwise*/
  -webkit-transform: rotate(-12deg);
  -moz-transform: rotate(-12deg);
  -o-transform: rotate(-12deg);
  -ms-transform: rotate(-12deg);
}
/* Now position the right strip of tape */
#tape:after { /*using :after places the tape on the right of the box*/
  left:198px; /*position from the left edge of the #tape div*/
  top: -10px; /*position from the top edge of the #tape div - a negative value moves the tape 10px above of the box's edge*/
  width: 70px; /*width of the tape*/
  /*rotate the tape 20 degrees clockwise*/
  -webkit-transform: rotate(20deg);
  -moz-transform: rotate(20deg);
  -o-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
}
 /* Akkordeon für FAQ *******************/
ul#faq{
width:90%;
}
ul#faq li {
list-style-type:none;
height: 30px; /*Set this to slightly larger than the height of the a: element below so that only the question shows */
overflow: hidden;
margin-bottom: 20px;
border: 1px solid #ccd6dc;
transition: height ease-in-out 600ms; /*speed at which the dropdown appears*/
-o-transition: height ease-in-out 600ms;
-moz-transition: height ease-in-out 600ms;
-webkit-transition: height ease-in-out 600ms;
}
ul#faq a {
display: block;
height: 30px;
padding:5px 5px 0 5px;
font-size:95%;
color: #1e1e1e;
text-decoration: none;
background:#eceecb;
}
ul#faq li:hover {
height:100px;
}
ul#faq .long:hover { /*this is for longer answers*/
height:130px;
}
ul#faq li:hover a {
font-weight: bold;
font-size:90%;
}

 /** Gedankenwolke **********************/
     /****** FIRST CREATE THE BUBBLE *****/
    p.thought {
    position:relative; /*see the support section below for more info*/
    width:400px; /*size of the bubble*/
    padding:20px 40px;
    margin:10px 10px 80px 40px;
    /**give the bubble's background a gradient**/
    background:#f7a944; /*fallback colour for non-supporting browsers*/
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#fac868), to(#f3961c));
    background:-moz-linear-gradient(#fac868, #f3961c);
    background:-o-linear-gradient(#fac868, #f3961c);
    background:linear-gradient(#fac868, #f3961c);
    /**give the corners a large curve**/
    -webkit-border-radius:180px;
    -moz-border-radius:180px;
    border-radius:180px;
    /**add a drop shadow to the bubble**/
    -webkit-box-shadow: -3px 4px 8px #989898;
    -moz-box-shadow: -3px 4px 8px #989898;
    box-shadow: -3px 4px 8px #989898;
    /**style the text**/
    color:#575544;
    font-size:1em;
    letter-spacing:.06em;
    }

    /******NOW CREATE THE THOUGHT CIRCLES*****/
    /****FIRST THE LARGE CIRCLE***/
    p.thought:before {
    content:"";
    position:absolute; /*see the support section below for more info*/
    bottom:-40px; /*distance from the bottom of the bubble*/
    left:20px; /*distance from the left edge of the bubble*/
    background:#f3961c;
    width:30px; /*same as the height*/
    height:30px; /*same as the width*/
    /*add a curve to the corners the same size as the height and width*/
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius:30px;
    /*add a drop shadow*/
    -webkit-box-shadow: -3px 3px 4px #989898;
    -moz-box-shadow: -3px 3px 4px #989898;
    box-shadow: -3px 3px 8px #989898;
    }
    /*****NOW THE SMALL CIRCLE***/
    /**Created exactly the same way as the large circle, except with smaller width, height and border-radius**/
    p.thought:after {
    content:"";
    position:absolute;
    bottom:-55px;
    left:0;
    width:15px;
    height:15px;
    background:#f3961c;
    -webkit-border-radius:15px;
    -moz-border-radius:15px;
    border-radius:15px;
    -webkit-box-shadow: -3px 3px 4px #989898;
    -moz-box-shadow: -3px 3px 4px #989898;
    box-shadow: -3px 3px 8px #989898;
    }

/** Dymoaufkleber ********************/
    /*STYLE THE PARAGRAPHS*/
    .label p{
    line-height:1.5em;
    margin-bottom:10px;
    font-family: 'Arimo', Verdana, Arial, Helvetica, sans-serif;
    font-size:.875em;
    color:#333;
    }

    /*THE BASIC STYLE IS THE SAME FOR EACH HEADING*/
    h3.label1, h3.label2, h3.label3{
    display: inline-block; /*stops the background spanning the full width of the containing element*/
    padding:5px 20px 5px 10px;
    font-family: 'Metrophobic', Arial, Helvetica, sans-serif; /*Metrophobic is available at http://www.google.com/webfonts/specimen/Metrophobic*/
    color: #fff;
    font-size:1.1em;
    text-transform: uppercase;
    letter-spacing: 0.1em; /*increase the gap between letters*/
    word-spacing: 5px; /*increase the gap between words*/
    /*add a shadow to the text*/
    text-shadow: 0px 1px 0px #282828;
    /*and add a shadow to the box containing the heading*/
    -webkit-box-shadow: rgba(51, 51, 51, .75) 0 0 5px;
    -moz-box-shadow: rgba(51, 51, 51, .75) 0 0 5px;
    box-shadow: rgba(51, 51, 51, .75) 0 0 5px;
    /*Make IE work with CSS3Pie - see http://css3pie.com/ for more info and to download the latest version*/
    behavior: url(pie/PIE.htc);
    }

    /*NOW APPLY INDIVIDUAL STYLES TO EACH HEADING*/
    /**ORANGE HEADING**/
    h3.label1{
    background:#ca4b29;
    border: 1px solid #ab5324; /*slightly darker than the background colour*/
    margin:-20px 0 15px -20px; /*negative margins move the heading partially outside the containing element*/
    /*Rotate the heading 2 degrees anti-clockwise - see http://cssdemos.tupence.co.uk/transform-rotate.htm*/
    -webkit-transform:rotate(-2deg);
    -moz-transform: rotate(-2deg);
    -o-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
    -webkit-backface-visibility: hidden; /*prevent rotated text being jagged in Chrome and Safari*/
    }
    /**GREEN HEADING**/
    h3.label2{
    background: #448d35;
    border: 1px solid #357129;
    margin: 10px 0 5px 0;
    /*Rotate the heading 2 degrees clockwise*/
    -webkit-transform:rotate(2deg);
    -moz-transform: rotate(2deg);
    -o-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);
    -webkit-backface-visibility: hidden; /*prevent rotated text being jagged in Chrome and Safari*/
    }
    /**PURPLE HEADING**/
    h3.label3{
    float: right; /*places the heading on the right and, as the float hasn't been cleared, the text wraps around it*/
    background:#953083;
    border: 1px solid #651d58;
    margin:5px -15px -5px 0;
    padding:5px 20px 5px 10px;
    /*rotate the heading 3 degree clockwise*/
    -webkit-transform:rotate(3deg);
    -moz-transform: rotate(3deg);
    -o-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
    -webkit-backface-visibility: hidden; /*prevent rotated text being jagged in Chrome and Safari*/
    }