/**
 * This file contains the style definitions for the JacDiaporama lighterbox javascript. It's
 * necessary to load this file, when using the JacDiaporama, because it not only contains simple
 * style definitions for the lighterbox itself, but also the definitions for the transitions. Of
 * course you can overwrite this definitions or fork this file and customize it for your needs.
 *
 * @version 1.2.2
 * @file diaporama.css
 * @author Martin Wilde
 * @company JAC Systeme GmbH
 * @copyright 2014 by CJW Network
 */

#diaporama-backstage {
    z-index: 9000;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    /* IE workaround */
    background: #000;
    filter: alpha(opacity=80);
    background: rgba( 0, 0, 0, .8 );
    /*transition*/
    -webkit-transition:opacity 0.5s, -webkit-transform 0.5s;
       -moz-transition:   opacity 0.5s, -moz-transform 0.5s;
        -ms-transition:    opacity 0.5s, -ms-transform 0.5s;
         -o-transition:     opacity 0.5s, -o-transform 0.5s;
            transition:        opacity 0.5s, transform 0.5s;
}

#diaporama-wrapper {
    z-index: 10000;
    position: fixed;
    width: 60%;
    height: 80%;
    left: 20%;
    top: 10%;
    background: #FFF;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 0 15px white;
    /*transition*/
    -webkit-transition:opacity 0.5s, -webkit-transform 0.5s, width 0.5s, height 0.5s, left 0.5s, top 0.5s;
       -moz-transition:   opacity 0.5s, -moz-transform 0.5s, width 0.5s, height 0.5s, left 0.5s, top 0.5s;
        -ms-transition:    opacity 0.5s, -ms-transform 0.5s, width 0.5s, height 0.5s, left 0.5s, top 0.5s;
         -o-transition:     opacity 0.5s, -o-transform 0.5s, width 0.5s, height 0.5s, left 0.5s, top 0.5s;
            transition:        opacity 0.5s, transform 0.5s, width 0.5s, height 0.5s, left 0.5s, top 0.5s;
}

#diaporama-load {
    background: url("../images/diaporama/load.gif");
}

#diaporama-title {
    position: absolute;
    left: 12px;
    bottom: 12px;
    font-family: sans-serif;
}

#diaporama-title-head {
    margin-bottom: .2em;
}

#diaporama-title span {
    margin: 0;
    font-weight: bold;
}

#diaporama-title-span {
}

.diaporama-hidden {
    opacity: 0;
    filter: alpha(opacity=0);
    /*transition*/
    -webkit-transition:opacity 0.5s, -webkit-transform 0.5s;
       -moz-transition:   opacity 0.5s, -moz-transform 0.5s;
         -o-transition:     opacity 0.5s, -o-transform 0.5s;
            transition:        opacity 0.5s, transform 0.5s;
}

.none {
    display: none;
}

#content img {
    float: left;
    width: 100px;
    margin: 5px;
}

#diaporama-image-wrapper {
    width: 100%;
    height: 85%;
    margin: 0 auto;
    overflow: hidden;
    white-space: nowrap;
    /* BUG: Wrong placement of cursor image, due to the fact that browser uses the left top corner
    as pointing zone. Because of that we're going to use the standard e-resize cursor! */
    cursor: e-resize;
    /*cursor: url("../images/diaporama/controls-next.png"), pointer;*/
    -webkit-transform: translate3d( 0, 0, 0 );
            transform: translate3d( 0, 0, 0 );
}

#diaporama-image-wrapper.p {
    /* BUG: Wrong placement of cursor image, due to the fact that browser uses the left top corner
    as pointing zone. Because of that we're going to use the standard w-resize cursor! */
    cursor: w-resize;
    /*cursor: url("../images/diaporama/controls-previous.png"), pointer;*/
}

#diaporama-images-div-previous {
    margin-left: -100%;
}


#diaporama-image-wrapper img {
    width: 100%;
    display: block;
    margin: 0 auto;

    /* CSS-Hack-Fix for IE, so it's scaling the images bicubic, rather than by nearest neighbour */
    -ms-interpolation-mode: bicubic;
}

#diaporama-image-wrapper img.prt {
    width: auto;
    height: 100%;
}

#diaporama-image-wrapper img.auto {
    width: auto;
    max-width: 100%;
    max-height: 100%;
}

#diaporama-image-wrapper div {
    width: 100%;
    height: 100%;
    display: inline-block;
    overflow: hidden;
}

#diaporama-images-wrapper div, #diaporama-images-wrapper img {
    -webkit-transform: translate3d( 0, 0, 0 );
}

.next #diaporama-images-div-previous {
    margin-left: -200%;

    /*transition*/
    -webkit-transition:margin 0.5s, -webkit-transform 0.5s;
       -moz-transition:   margin 0.5s, -moz-transform 0.5s;
         -o-transition:     margin 0.5s, -o-transform 0.5s;
            transition:        margin 0.5s, transform 0.5s;
}

#diaporama-title-head, #diaporama-title-which {
    opacity: 1;
    /*transition*/
    -webkit-transition:opacity 0.33s, -webkit-transform 0.33s;
       -moz-transition:   opacity 0.33s, -moz-transform 0.33s;
         -o-transition:     opacity 0.33s, -o-transform 0.33s;
            transition:        opacity 0.33s, transform 0.33s;
}

.next #diaporama-title-head, .next #diaporama-title-which,
.prev #diaporama-title-head, .prev #diaporama-title-which {
    opacity: 0;

    /*transition*/
    -webkit-transition:opacity 0.33s, -webkit-transform 0.33s;
       -moz-transition:   opacity 0.33s, -moz-transform 0.33s;
         -o-transition:     opacity 0.33s, -o-transform 0.33s;
            transition:        opacity 0.33s, transform 0.33s;
    /*transform*/
    -webkit-transform:translate3d(-10%, 0, 0);
       -moz-transform:translate3d(-10%, 0, 0);
        -ms-transform:translate3d(-10%, 0, 0);
         -o-transform:translate3d(-10%, 0, 0);
            transform:translate3d(-10%, 0, 0);
}

.prev #diaporama-images-div-previous {
    margin-left: 0;

    /*transition*/
    -webkit-transition:margin 0.5s, -webkit-transform 0.5s;
       -moz-transition:   margin 0.5s, -moz-transform 0.5s;
         -o-transition:     margin 0.5s, -o-transform 0.5s;
            transition:        margin 0.5s, transform 0.5s;
}

#diaporama-controls {
    position: absolute;
    width: 168px;
    height: 24px;
    bottom: 12px;
    right: 12px;
}

#diaporama-controls-last,
#diaporama-controls-previous,
#diaporama-controls-play,
#diaporama-controls-next,
#diaporama-controls-first,
#diaporama-controls-close {
    width: 24px;
    height: 24px;
    margin: 0 4px;
    float: left;
    cursor: pointer;
    -webkit-transition: .33s -webkit-filter, .2s background-position;
    -webkit-filter: grayscale(100%);
    background: url( "../images/diaporama/controls-sprite.png" ) no-repeat 0 0;
}

#diaporama-controls-last:hover,
#diaporama-controls-previous:hover,
#diaporama-controls-play:hover,
#diaporama-controls-next:hover,
#diaporama-controls-first:hover,
#diaporama-controls-close:hover {
    -webkit-filter: grayscale(0%);
}

#diaporama-controls-first {}
#diaporama-controls-previous {
    background-position: -24px 0;
}
#diaporama-controls-play {
    background-position: -48px 0;
}
#diaporama-controls-play.pause {
    background-position: -72px 0;
}
#diaporama-controls-next {
    background-position: -96px 0;
}
#diaporama-controls-last {
    background-position: -120px 0;
}
#diaporama-controls-close {
    position: absolute;
    background-position: -144px 0;
    top: 6px;
    right: 6px;
    border-radius: 9999px;
    box-shadow: 0 0 2px 0px white;
}

#diaporama-controls-close:hover {
    box-shadow: 0 0 5px white;
    -webkit-transition: .33s box-shadow;
}

a[rel="diaporama"] {
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
}

/* Translate and user selection bugfix */
#diaporama-backstage, #diaporama-wrapper,
#diaporama-title, #diaporama-title-head,
#diaporama-title-span, #diaporama-title-which,
#diaporama-image-wrapper, #diaporama-images-div-previous,
#diaporama-images-div-next, #diaporama-images-div-current,
#diaporama-images-previous, #diaporama-images-current,
#diaporama-images-next {
    /*transform*/
   /* Commented out because of Chrome Bug where Chrome won't show the black backstage element. This
    * element will only be shown if the Window is resized and the window content is redrawn. To
    * prevent this bug we won't use the translate3d option here
    */
   /*
    -webkit-transform:translate3d(0, 0, 0);
       -moz-transform:translate3d(0, 0, 0);
        -ms-transform:translate3d(0, 0, 0);
         -o-transform:translate3d(0, 0, 0);
            transform:translate3d(0, 0, 0);
   */
    -moz-user-select: none;
    -webkit-user-select: none;

    /*transform-style*/
    -webkit-transform-style:preserve-3d;
       -moz-transform-style:preserve-3d;
        -ms-transform-style:preserve-3d;
         -o-transform-style:preserve-3d;
            transform-style:preserve-3d;
}

/* BUGFIX:
    BUG: FireFox (Version 26);
    If "text-overflow: ellipsis;" is defined, instead of the image, which should be shown, the string
    "..." will be displayed. So we're going to reset this setting, to avoid this behaviour by setting
    the "text-overflow" property to the default value "clip".
 */
#diaporama-wrapper div {
    text-overflow: clip;
}