@charset "utf-8";
/* CSS Document */
/*
    NOTES: Some things to note when modifying the gallery:

    - A fixed width (pixels) is required for the external controller.
      You *may* be able to set percentage widths if you play with the controller container classes.
*/


/* Shared Classes -------------------------------------------------------------------- */

/* background colors */

    #sgal-external-viewer,
    .sgal-thumbnails td
    {
        background-color: #eaeaea;
    }

    .sgal-controls
    {
        background-color: #dadada;
    }

    .sgal-filmstrip-scroller .scrubber
    {
        background-color:#dddddd;
    }

    .sgal-product .sgal-thumbnails
    {
        background-color:#333333;
    }

    .sgal-caption-panel
    {
        background-color:#cccccc;
    }

    .sgal-filmstrip-scroller .gutter
    {
        background-color:#ffffff;
    }


/* text colors */

    .sgal-controls
    {
        color:#555555;
    }

    .sgal-caption-panel .caption-info,
    .sgal-caption-panel .caption-content
    {
        color:#ccc;
    }


/* border colors */

    .sgal-thumbnails td,
    .sgal-thumbnail-selected
    {
        border-color:#ffffff;
    }

    .sgal-thumbnail
    {
        border-color:#888888;
    }

    .sgal-filmstrip-scroller .scrubber
    {
        border-color:#999999;
    }


/* rounded corners */

    .scrubber,
    .gutter,
    .sgal-controls
    {
        -moz-border-radius:4px;
        -webkit-border-radius:4px;
        -o-border-radius:4px;
        border-radius:4px;
    }

    #sgal-external-ctrl .sgal-controls
    {
        -moz-border-radius:0 0 4px 4px;
        -webkit-border-radius:0 0 4px 4px;
        -o-border-radius:0 0 4px 4px;
        border-radius:0 0 4px 4px;
    }


/* Viewer -------------------------------------------------------------------- */

    #sgal-external-viewer
    {
        float:left; /* prevent div from scaling 100% - if you want to set the size via js  */
        /*width:280px; */ /* sets the div size using css */
        /*height:260px; */ /* sets the div size using css */
    }

    .sgal-fullscreen-viewer
    {
        background:url(../images/iconset-grey/bg_screen.png);
        z-index:100000;
    }

    .sgal-fullscreen-viewer .sgal-slide-panel
    {
        line-height: 0em;
    }

    .sgal-slide-zoomin
    {
        cursor:url(../images/zoomin.cur),pointer;
    }

    .sgal-slide-zoomout
    {
        cursor:url(../images/zoomout.cur),pointer;
    }

    .sgal-loader
    {
        background:url(../images/iconset-grey/loading.png) center center no-repeat;
        width: 60px;
        height:60px;
        top:50%;
        left:50%;
        margin-top:-30px;
        margin-left:-30px;
    }



/* Controller -------------------------------------------------------------------- */

    .sgal-controls
    {
        padding:4px;
        text-align:left;
    }

    .sgal-controls
    {
        opacity: 0;
        padding: 4px;
        text-align: left;
    }

    .sgal-controls:hover
    {
        opacity:1;
    }

    .sgal-buttons
    {
        float:right;
        padding:4px 0 0 0;
    }

    .sgal-ctrl-btn
    {
        width:25px;
        height:25px;
        float: left;
        margin:0px 6px;
    }

    .sgal-controls .space
    {
        background:url('../images/iconset-grey/space.gif')
    }

    .sgal-controls .separator
    {
        background:url('../images/iconset-grey/separator.png')
    }

    .sgal-controls .button-prev
    {
        background:url('../images/iconset-grey/btn_prev.png')
    }

    .sgal-controls .button-next
    {
        background:url('../images/iconset-grey/btn_next.png')
    }

    .sgal-controls .button-play
    {
        background:url('../images/iconset-grey/btn_play.png')
    }

    .sgal-controls .button-pause
    {
        background:url('../images/iconset-grey/btn_pause.png')
    }

    .sgal-controls .button-minimize
    {
        background:url('../images/iconset-grey/btn_minimize.png')
    }

    .sgal-controls .button-maximize
    {
        background:url('../images/iconset-grey/btn_maximize.png')
    }

    .sgal-controls .button-caption
    {
        background:url('../images/iconset-grey/btn_caption.png')
    }

    .sgal-controls .button-noscalebutton
    {
        background:url('../iconset-grey/images/btn_noscale.png')
    }

    .sgal-controls .button-noscale
    {
        background:url('../images/iconset-grey/btn_noscale.png')
    }

    .sgal-controls .button-fit
    {
        background:url('../images/iconset-grey/btn_fit.png')
    }

    .sgal-controls .button-crop
    {
     background:url('../images/iconset-grey/btn_crop.png')
    }

    .sgal-controls .button-minimize
    {
        background:url('../images/iconset-grey/btn_minimize.png')
    }

    .sgal-controls .button-maximize
    {
        background:url('../images/iconset-grey/btn_maximize.png')
    }

    .sgal-controls .button-pause-1
    {
        background:url('../images/iconset-grey/pause_states/pause_1.png')
    }

    .sgal-controls .button-pause-2
    {
        background:url('../images/iconset-grey/pause_states/pause_2.png')
    }

    .sgal-controls .button-pause-3
    {
        background:url('../images/iconset-grey/pause_states/pause_3.png')
    }

    .sgal-controls .button-pause-4
    {
        background:url('../images/iconset-grey/pause_states/pause_4.png')
    }

    .sgal-controls .button-pause-5
    {
        background:url('../images/iconset-grey/pause_states/pause_5.png')
    }

    .sgal-controls .button-pause-6
    {
        background:url('../images/iconset-grey/pause_states/pause_6.png')
    }

    .sgal-controls .button-pause-7
    {
        background:url('../images/iconset-grey/pause_states/pause_7.png')
    }

    .sgal-controls .button-pause-8
    {
        background:url('../images/iconset-grey/pause_states/pause_8.png')
    }

    .sgal-controls .button-pause-9
    {
        background:url('../images/iconset-grey/pause_states/pause_9.png')
    }

    .sgal-controls .button-pause-10
    {
        background:url('../images/iconset-grey/pause_states/pause_10.png')
    }

    .sgal-controls .button-pause-11
    {
        background:url('../images/iconset-grey/pause_states/pause_11.png')
    }

    .sgal-controls .button-pause-12
    {
        background:url('../images/iconset-grey/pause_states/pause_12.png')
    }

    .sgal-controls .button-pause-13
    {
        background:url('../images/iconset-grey/pause_states/pause_13.png')
    }

    .sgal-controls .button-pause-14
    {
        background:url('../images/iconset-grey/pause_states/pause_14.png')
    }

    .sgal-controls .button-pause-15
    {
        background:url('../images/iconset-grey/pause_states/pause_15.png')
    }

    .sgal-controls .button-pause-16
    {
        background:url('../images/iconset-grey/pause_states/pause_16.png')
    }

    .button-side-prev
    {
        width:51px;
        height:51px;
        position:absolute;
        top:50%;
        left:20px;
        margin-top:-25px;
        background:url('../images/btn_prev.png');
        z-index:10;
        cursor:pointer;
    }
    .button-side-next
    {
        width:51px;
        height:51px;
        position:absolute;
        top:50%;
        right:20px;
        margin-top:-25px;
        background:url('../images/btn_next.png');
        z-index:10;
        cursor:pointer;
    }

    .button-close
    {
        width:51px;
        height:51px;
        position:absolute;
        top:0;
        right:0;
        background:url('../images/btn_close.png');
        z-index:11;
        cursor:pointer;
    }

/* Thumbnails -------------------------------------------------------------------- */

    .sgal-thumbnails td
    {
        padding:4px;
        text-align:center;
        border-width:4px;
        border-style:solid;
        vertical-align:top;
    }

    .sgal-thumbnail-link
    {
        display:block;
    }

    .sgal-thumbnail,
    .sgal-thumbnail-selected
    {
        margin:0 auto;
        padding:0;
        display:block;
    }

    .sgal-thumbnail
    {
        border-width:1px;
        border-style:solid;
    }

    .sgal-thumbnail-selected
    {
        border-width:1px;
        border-style:solid;
    }

    .sgal-filmstrip .sgal-thumbnail,
    .sgal-filmstrip .sgal-thumbnail-selected
    {
        padding:0;
        margin:0 2px;
    }

    .sgal-filmstrip-thumbnail-link,
    .sgal-filmstrip-thumbnail-link img
    {
        display: inline;
    }



/* Filmstrip -------------------------------------------------------------------- */


    #sgal-internal-ctrl
    .sgal-filmstrip,
    #sgal-internal-ctrl .sgal-filmstrip-scroll-pane
    {
        width:100%;
    }

    .sgal-filmstrip-scroll-pane
    {
        overflow: auto;
        width: 100%;
        float:left;
        overflow:hidden;
    }

    .sgal-filmstrip-scroller
    {
        float:left;
        margin-top:2px;
    }

    .sgal-filmstrip-scroller .gutter
    {
        padding:2px;
    }

    .sgal-filmstrip-scroller .scrubber
    {
        position:relative;
        height:20px;
        background:url(../images/iconset-grey/bg_scrubber.png) top left repeat-x;
        cursor:pointer;
        border-width:1px;
        border-style:solid;
    }

    .sgal-filmstrip-scroller .scrubber-icon
    {
        width:100%;
        height:100%;
        background:url(../images/iconset-grey/icon_scrub.png) center center no-repeat;
    }



/* Captions -------------------------------------------------------------------- */

    #sgal-external-caption .sgal-caption-panel
    {
        position:relative;
    }

    .sgal-fullscreen-viewer .sgal-caption-panel
    {
        width:90%;
    }

    .sgal-fullscreen-viewer .sgal-controls .sgal-caption-panel
    {
        margin-top:0;
        width:auto;
    }

    .sgal-caption-panel
    {
        margin:0 auto;
        padding:0;
    }

    .sgal-caption-panel .caption-info
    {
        padding:4px 10px;
    }

    .sgal-caption-panel .caption-content
    {
        padding:0 10px 10px 10px;
    }

    .sgal-thumbnails .info
    {
        text-align:left;
    }



/* --------------------------------------------------------------------------------------------------- */

/* Overrides for Products Gallery -------------------------------------------------------------------- */

    .sgal-product #sgal-external-viewer
    {
        width:280px;
        height:260px;
    }

    .sgal-product .sgal-thumbnails
    {
        margin:0;
        padding:0;
        border-collapse:collapse;
    }

    .sgal-product .sgal-thumbnail-item
    {
        padding:0;
        margin:0;
    }

    .sgal-product .sgal-thumbnails td
    {
        border:none;
        padding:4px 0;
        margin:0;
    }

    .sgal-caption-panel
    {
        background:url(../images/iconset-grey/bg_screen_ninetypercent.png);
    }

/* --------------------------------------------------------------------------------------------------- */

/* Overrides for Responsive------ -------------------------------------------------------------------- */

    @media (max-width: 480px)
    {
        .sgal-slide-panel,
        .sgal-slide-container,
        #sgal-external-viewer
        {
            height: 187px !important;
            top: 0 !important;
            width: 280px !important;
        }
    }