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

#sliderFrame, #sliderFrame div {box-sizing: content-box;}
#sliderFrame {position: relative; margin: 100px auto 100px auto;}
#slider, #slider div.sliderInner {width: 550px; height: 400px;/* Must be the same size as the slider images */}
#slider {background: #ffffff url("loading.gif") no-repeat 50% 50%; position: relative; margin: 0 auto; /*center-aligned*/
  transform: translate3d(0,0,0); box-shadow: 0px 5px 5px #999999;}

/* image wrapper */
#slider a.imgLink, #slider div.video {z-index: 2; position: absolute; top: 0px; left: 0px; border: 0px; padding: 0px; margin: 0px; width: 100%; height: 100%;}

/* each bullet */
#slider div.navBulletsWrapper div {
    width: 11px; height: 11px; font-size: 0; color: White;/*hide the index number in the bullet element*/
    background: transparent url("bullet.png") no-repeat 0 0; display: none;
    overflow: hidden; cursor: pointer; margin: 0 6px;/* set distance between each bullet*/}
#slider div.navBulletsWrapper div.active {background-position: 0px -11px;}

/* --------- Others ------- */
#slider div.loading {width: 100%; height: 100%; background: transparent url("loading.gif") no-repeat 50% 50%;
filter: alpha(opacity=60); opacity: 0.6; position: absolute; left: 0; top: 0; z-index:9;}
#slider img, #slider>b, #slider a>b {position: absolute; border: none; display: none;}
#slider div.sliderInner {overflow: hidden; -webkit-transform: rotate(0.000001deg);/* fixed the Chrome not crop border-radius bug*/
position: absolute; top: 0; left: 0;}
#slider>a, #slider video, #slider audio {display: none;}
#slider div {-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);}