/* Style the thumbnails */
.pika-thumbs li {
   overflow: hidden;
   width: 55px;
   height: 55px;
   margin: 0 2px 3px 2px;
   padding: 0;
   list-style-type: none;
   background: transparent;
   box-shadow: 2px 2px 1px rgba(0,0,0, 0.2);
   cursor: pointer;
}
   .pika-thumbs li .clip {
      position: relative;
      height:100%;
      text-align: center;
      vertical-align: middle;
      overflow: hidden;
   }

/* jCarousel Styles */
.jcarousel-container {
   position: absolute;
   width: 86%;
   height: 60px;
   margin: 40px 7% 0 7%;
   padding: 0 25px 0 25px;
   /* zorg dat IE dit element niet als leeg (dus niet aanwezig) beschouwt */
   background: url(../../../images/clear.gif) repeat 0 0 transparent;
}
.jcarousel-list-horizontal {
   margin: 0 auto !important;
   padding-bottom: 3px;
}
.jcarousel-clip-horizontal {
   position: relative;
   text-align: center;
   overflow: hidden;
   height: 60px;
   width: 90%;
   padding: 0;
   margin: 0 5%;
   top: 0;
   left: 0;
}
.jcarousel-prev-horizontal {
   position: absolute;
   top: 0;
   left: 0;
   height: 60px;
   width: 5%;
   background: url("prev.png") no-repeat 50% 50% transparent;
}
.jcarousel-next-horizontal {
   position: absolute;
   top: 0;
   right: 0;
   height: 60px;
   width: 5%;
   background: url("next.png") no-repeat 50% 50% transparent;
}

/* The stage is the wrapper. The image fills 100% the height of the stage */
.pika-stage {
   position: relative;
   float: right;
   width: 100%;
   padding: 0;
   margin: 0;
   background: transparent;
   text-align:center;
}
   .pika-stage img {
      width: 100%;
      border-top: 1px solid #555;
      border-bottom: 1px solid #555;
      -moz-box-shadow:    5px 5px 10px 0px rgba(0,0,0, 0.2);
      -webkit-box-shadow: 5px 5px 10px 0px rgba(0,0,0, 0.2);
      box-shadow:         5px 5px 10px 0px rgba(0,0,0, 0.2);
   }
   .pika-stage .caption {
      position: absolute;
      padding: 10px;
      text-align: right;
      bottom: 50px;
      right: 10px;
      background: #000; background: rgba(0,0,0,0.75);
      border: 1px solid #141414;
      font-size: 11px;
      color: #fafafa;
   }
      .pika-stage .caption p {
         padding: 0;
         margin: 0;
         line-height: 14px;
      }

/* This play, pause, prev and next buttons */
.pika-imgnav a {
   position: absolute;
   text-indent: -5000px;
   display: block;
   z-index:3;
}
   .pika-imgnav a.previous {
      background: url(prev.png) no-repeat 50% 45%;
      height: 100%; width: 8%;
      top: 0; left: 0;
      cursor:pointer;
   }
   .pika-imgnav a.next {
      background: url(next.png) no-repeat 50% 45%;
      height: 100%; width: 8%;
      top: 0; right: 0;
      cursor:pointer;
   }
   .pika-imgnav a.play {
      background: url(play.png) no-repeat 0% 50%;
      height: 100px; width: 44px;
      top: 0; left: 50%;
      cursor:pointer;
      display: none;
   }
   .pika-imgnav a.pause {
      background: url(pause.png) no-repeat 0% 50%;
      height: 100px; width: 44px;
      top: 0; left: 50%;
      cursor:pointer;
      display:none;
   }

/*for the tool tips*/
.pika-tooltip {font-size:12px;position:absolute;color:white;padding:3px; background-color: rgba(0,0,0,0.7);border:3px solid black;}
.pika-counter {display: none; position: absolute;bottom: 15px;right:15px;color:white;background:rgba(0,0,0,0.7);font-size:11px;padding:3px;-moz-border-radius: 5px;border-radius:5px;}

/* If using user thumbnails there's a pause well the new large image loads. This is the loader for that */
.pika-loader { background:url(loading.gif) 3px 3px no-repeat #000; background-color:rgba(0,0,0,0.9); color:white; width:60px; font-size:11px; padding:5px 3px;
   text-align:right; position:absolute; top:15px; right:15px; }

.pika-textnav {display:none;}