/* Just for the example. Fee free to delete these three lines */
.pikachoose {
    width: auto;
    margin: 1.5em auto;
}

/* Style the thumbnails */
.pika-thumbs {
    padding: 0!important;
    margin: 0!important;
    list-style: none!important;
}
.pika-thumbs li {
    background: #fafafa;
    width: 100px;
    height: 100px;
    float: left;
    padding: 0;
    margin: 0 5px 10px;
    border: 3px solid #ffffff;
    overflow: hidden;
    list-style-type: none;
    cursor: pointer;
}
.pika-thumbs li .clip {
    text-align: center;
    vertical-align: center;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.pika-thumbs li img { height: 100%; }

/* The stage is the wrapper. The image fills 100% the height of the stage */
.pika-stage {
    text-align: center;
    height: 240px;
    background: transparent;
    margin: 0 auto 10px;
    width: auto;
    position: relative;
    overflow: hidden;
}
.pika-stage a { display: block; }
.pika-stage img {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}
.pika-stage .caption {
    font-size: 11px;
    text-align: right; 
    color: #fafafa;
    background: #000;
    background: rgba(0,0,0,0.75);
    padding: 10px;
    border: 1px solid #141414;
    position: absolute;
    bottom: 24px;
    right: 10px;
}
.pika-stage .caption p {
    padding: 0;
    margin: 0;
}

/* Ths play, pause, prev and next buttons */
.pika-imgnav a {position: absolute; text-indent: -5000px; display: block;z-index:3;}
.pika-imgnav a.previous, 
.pika-imgnav a.next {
    text-indent: -2000px;
    background-color: transparent;
    background-repeat: no-repeat;
    display: block;
    height: 100%;
    width: 33%;
    top: 0;
    cursor: pointer;
    overflow: hidden;
}

.articulo-extend-imgs .pika-imgnav a.previous {
    display:none;
}
.articulo-extend-imgs .pika-imgnav a.next {
    display:none;
}
.pika-imgnav a.play {background: url('/concrete/images/pikachoose/play.png') no-repeat 0% 50%; height: 100px; width: 44px;top:0;left:50%;display: none;cursor:pointer;}
.pika-imgnav a.pause {background: url('/concrete/images/pikachoose/pause.png') no-repeat 0% 50%; height: 100px; width: 44px;top:0;left:50%;display:none;cursor:pointer;}

/* The previous and next textual buttons */
.pika-textnav {
    display: none;
    width: 100%;
    margin: 10px 0 0 0;
    position: absolute;
    bottom: 10px;
    overflow: hidden;
}
.pika-textnav a {font-size: 12px; text-decoration: none; color: #333; padding: 4px;}
.pika-textnav a.previous {float: left; width: auto; display: block;}
.pika-textnav a.next {float: right; width: auto; display: block;}

/*for the tool tips*/
.articulo-extend-imgs .pika-tooltip {
    background: url("/concrete/themes/recursos/imaxes/estandar/elementos-xenericos/iconografia/gal-lupa.png") no-repeat scroll 0 0 transparent;
    bottom: 10px;
    display: block;
    height: 22px;
    overflow: hidden;
    position: absolute;
    right: 10px;
    text-indent: 100px;
    width: 22px;
}
.articulo-extend-imgs .pika-counter {
    display: none;
}

/* If using user thumbnails there's a pause well the new large image loads. This is the loader for that */		
.pika-loader{ background:url('/concrete/images/pikachoose/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; }


/* jCarousel Styles */
/*if you're not using the carousel you can delete everything below this */
.articulo-extend-imgs .jcarousel-skin-pika .jcarousel-container-horizontal {
    padding: 0 15px;
    margin: 0;
}
.articulo-extend-imgs .jcarousel-skin-pika .jcarousel-clip-horizontal {
    width: 270px;
    height: 86px;
    overflow: hidden;
}
.articulo-extend-imgs .jcarousel-skin-pika .jcarousel-item-horizontal {
    width: 80px;
    height: 80px;
    margin: 0 2px;
    padding: 0;
    border: 3px solid #DFE5F0;
}


.articulo-extend-imgs .jcarousel-prev{
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 13px;
    height: 78px;
    cursor: pointer;
    background-image: url("/concrete/themes/recursos/imaxes/estandar/elementos-xenericos/iconografia/gal-btn-esq.png");
    background-position: 5%;
    background-repeat:no-repeat;
    z-index:25;
}

.articulo-extend-imgs .jcarousel-next{
    position: absolute;
    bottom: 5px;
    right: 0;
    width: 13px;
    height: 78px;
    cursor: pointer;
    background-image: url("/concrete/themes/recursos/imaxes/estandar/elementos-xenericos/iconografia/gal-btn-der.png");
    background-position: 95%;
    background-repeat: no-repeat;
    z-index:25;
}
.articulo-extend-imgs .jcarousel-prev-disabled, 
.articulo-extend-imgs .jcarousel-next-disabled { background-image: none; }