/* http://www.menucool.com */

body {
    margin: 0;
    padding: 0;
}

.slider-wrapper {
    position:relative;
    width: 100%;
    margin:0 auto;
}

#zoom-slider {
    width: 100%;
    height:600px;/* Make it smaller than your images for zooming effect */
    /*border:10px solid black;*/
    background:#CCC url(../../img/zoom-slider/loading.gif) no-repeat 50% 50%;
    overflow:hidden;
    position:relative;
    margin:0 auto;/*make the image slider center-aligned */
    /*box-shadow: 0px 1px 5px #222222;*/
    /*border-radius:6px;*/
}

#zoom-slider img {
    position:absolute;
    display:none;
    top:0px;
    z-index:1;
    -ms-interpolation-mode: bicubic;
    image-rendering: optimizeQuality;
    width: 120%;
}

/* Caption styles */
div.zs-caption-bg, div.zs-caption-bg2 {
    position:absolute;
    left: 5%;       /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/
    bottom: 5%;     /*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:350px;*/
    width:90%;
    height:auto;
    padding:15px 0;
    text-align: center;
    z-index:6;
    overflow:hidden;
    font-size:0;
}
div.zs-caption-bg {
    /*background:#000;Caption background color. Can be defined as semi-transparent through the javascript slideshowOptions setting.*/
    /*border-radius: 5px;*/
    /*border:1px solid #CCCCCC;*/
}
div.zs-caption {
    font:17px/19px Verdana, Arial;
    line-height: 22px;
    color:White;
    z-index:7;
    text-align:center;/* When captionEffect was set to rotate through javascript, and setting "text-align:left" will create a fly-in effect, and setting "text-align:center" will get the rotate effect. */
    overflow:hidden;
}
div.zs-caption a {
    color:#09F;
}


/* navigation bullets wrapper */
div.navBulletsWrapper  {
    top:30px;
    left:20px;
    display: inline-block;
    background:none;
    padding-left:20px;
    position:relative;
    z-index:8;
    cursor:pointer;
}

/* each bullet */
div.navBulletsWrapper div 
{
    width:12px; height:12px;
    background:transparent url(../../img/zoom-slider/bullets.png) no-repeat 0 0;
    float:left;
    overflow:hidden;
    vertical-align:middle;
    cursor:pointer;
    margin-right:11px;      /* distance between each bullet*/
    _position:relative;     /*IE6 hack*/
}

div.navBulletsWrapper div.active {background-position:0 -12px;}


/* --------- Others ------- */
#zoom-slider img
{
    transform: translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
}