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

/* thumbnails für jcepopup
----------------------------------------------*/
.nea-thumbnail{
    float: left;
    background-color:#eae9d4;
    border: 1px solid #999;
    border-radius: 4px;
    margin: 0 5px 15px 0;
    padding: 6px;
}
.nea-clearboth{
   clear : both; 
}    
.nea-imgrand{
    padding: 10px;
  /*  float:right; */
    margin:0 0 0 10px;
    background: #fff;
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.4);
    -moz-box-shadow: 0 0 4px rgba(0,0,0,.4);
    box-shadow: 0 0 4px rgba(0,0,0,.4);
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
   }


/* caption für Bilder */
ul#caption {
  list-style-type:none; /*remove the bullet point from the list items*/
}
ul#caption li{
  display:inline-block; /*places the images in a line*/
  padding:0 10px; /*padding around the images*/
  /*style the caption text*/
  font-size:90%;
  font-weight: bold;
  /*Droid Sans is available at Google Webfonts*/
  font-family:'droid sans', sans-serif; 
  color:#525252;
  text-align:center;
}

/**Add a small drop shadow to the images**/
#caption img{
    -webkit-box-shadow: 2px 2px 10px #919191;
    -moz-box-shadow: 2px 2px 10px #919191;
    box-shadow: 2px 2px 10px #919191;
}

li.below:after{ 
    /* by using :after we place the caption after the image, when used 
    with display:block this will be underneath the image*/
    content: attr(title); /*places the contents of title below the image*/
    display:block; 
    /*puts the caption on its own line instead of at the side of the image*/
}
li.above:before{
    /* by using :before we place the caption before the image, when used 
    with display:block this will be on top of the image*/
    content: attr(title); /*places the contents of title below the image*/
    display:block; 
    /*puts the caption on its own line instead of at the side of the image*/
}

/** Popup-Bilder durch mouse-over ***************/
ul.enlarge{
    list-style-type:none; /*remove the bullet point*/
    margin-left:0;
}
ul.enlarge li{
    display:inline-block; /*places the images in a line*/
    position: relative;
    z-index: 0; /*resets the stack order of the list items - later we'll increase this*/
    margin:10px 40px 0 20px;
}
ul.enlarge img{
    background-color:#eae9d4;
    padding: 6px;
    -webkit-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
    -moz-box-shadow: 0 0 6px rgba(132, 132, 132, .75);
    box-shadow: 0 0 6px rgba(132, 132, 132, .75);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
ul.enlarge span{
    position:absolute;
    left: -9999px;
    background-color:#eae9d4;
    padding: 10px;
    font-family: 'Droid Sans', sans-serif;
    font-size:.9em;
    text-align: center;
    color: #495a62;
    -webkit-box-shadow: 0 0 20px rgba(0,0,0, .75));
    -moz-box-shadow: 0 0 20px rgba(0,0,0, .75);
    box-shadow: 0 0 20px rgba(0,0,0, .75);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius:8px;
}
ul.enlarge li:hover{
    z-index: 9999;
    cursor:pointer;
}
ul.enlarge span img{
    padding:2px;
    background:#ccc;
}
ul.enlarge li:hover span{
    top: 40px; /*the distance from the bottom of the thumbnail to the top of the popup image*/
    left: -20px; /*distance from the left of the thumbnail to the left of the popup image*/
}
ul.enlarge li:hover:nth-child(2) span{
    left: -100px;
}
ul.enlarge li:hover:nth-child(3) span{
    left: -350px;
}
    /**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/
ul.enlarge img, ul.enlarge span{
    behavior: url(pie/PIE.htc);
}

/*** Lightbox-Verhalten- popup durch anklicken **/
.lightbox {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    text-align: center;
    background: rgba(0,0,0,0.7);
    font-family:'Bitter', sans-serif;
    font-size:1.2em;
    }
.lightbox img {
    display:none;
    margin-top: 100px;
    padding: 10px 10px 25px 10px !important;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    transition: opacity .25s ease-in-out;
     background: #fff;
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.4);
    -moz-box-shadow: 0 0 4px rgba(0,0,0,.4);
    box-shadow: 0 0 4px rgba(0,0,0,.4);
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}
a.lightbox{
    color:#232323;
    text-decoration:none;
    font-size:1em;
    }
    a.lightbox:after{
    content: attr(title);
    display: block;
    margin-top:-30px;
}
.imgleft{
    padding: 10px;
    float:left;
    margin:0 10px 10px 0;
    background: #fff;
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.4);
    -moz-box-shadow: 0 0 4px rgba(0,0,0,.4);
    box-shadow: 0 0 4px rgba(0,0,0,.4);
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}
.imgright{
    padding: 10px;
    float:right;
    margin:0 0 0 10px;
    background: #fff;
    -webkit-box-shadow: 0 0 4px rgba(0,0,0,.4);
    -moz-box-shadow: 0 0 4px rgba(0,0,0,.4);
    box-shadow: 0 0 4px rgba(0,0,0,.4);
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}
.lightbox:target {
    width: auto;
    height: auto;
    bottom: 0;
    right: 0;
}
.lightbox:target img {
    display:inline-block;
}

/** drei Polaroid mit Tesafilm *********/
figure, figcaption {
display: block;
}
#polaroid{
width:100%;
overflow:hidden;
padding:20px 10px;
}
#polaroid figure{
float:left;
position:relative;
width:150px;
margin:20px 30px;
padding: 6px 8px 10px 8px;
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
background: #eee6d8;
background: -webkit-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
background: -moz-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
background: -o-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
background: -ms-linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
background: linear-gradient(top, #ede1c9, #fef8e2 20%, #f2ebde 60%);
-webkit-transform:rotate(-1deg);
-moz-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
transform: rotate(-1deg);
-webkit-backface-visibility:hidden; /*prevent rotated text being jagged in Chrome and Safari*/
}
#polaroid figure:nth-child(even) {
-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*/
-webkit-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
-moz-box-shadow: 4px 4px 8px -4px rgba(0, 0, 0, .75);
box-shadow: -4px 4px 8px -4px rgba(0, 0, 0, .75);
}
#polaroid figure:before {
content: '';
display: block;
position: absolute;
left:5px;
top: -15px;
width: 75px;
height: 25px;
background-color: rgba(222,220,198,0.7);
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
-o-transform: rotate(-12deg);
-ms-transform: rotate(-12deg);
}
#polaroid figure:nth-child(even):before {
left:100px;
top: -15px;
width: 55px;
height: 25px;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-o-transform: rotate(12deg);
-ms-transform: rotate(12deg);
}
#polaroid figcaption{
text-align:center;
font-family: 'Reenie Beanie', cursive; /*Reenie Beanie is available through Google Webfonts http://code.google.com/webfonts/specimen/Reenie+Beanie*/
font-size:1em;
color:#454f40;
letter-spacing:0.09em;
}
/**IE Hacks - see http://css3pie.com/ for more info on how to use CS3Pie and to download the latest version**/
#polaroid figure{
-pie-background: linear-gradient(#ede1c9, #fef8e2 20%, #f2ebde 60%);
behavior: url(assets/pie/PIE.htc);
position:relative; /*required to make PIE work*/
padding-top:10px\9;
padding-right:10px\9;
}