#sliderFrame 

{ position:relative; width:646px; margin:0 auto;

 /*center-aligned*/}

#slider, #slider div.sliderInner { width:646px;height:333px;/* Must be the same size as the slider images */}

#slider {background:#fff url(loading.html) no-repeat 50% 50%;position:relative;margin:0 auto; /*center-aligned*/ transform: translate3d(0,0,0);}

/* image wrapper */

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

#slider .video {background:transparent url(video.html) no-repeat 50% 50%;}

/* Caption styles */

#slider div.mc-caption-bg, #slider div.mc-caption-bg2 {position:absolute;

width:100%; height:auto; padding:10px 0;/* 10px will increase the height.*/

	left:0px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/

	bottom:0px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/

	overflow:hidden;

	font-size: 0;}

#slider div.mc-caption-bg 

{/* NOTE: Its opacity is to be set through the sliderOptions.captionOpacity setting in the js-image-slider.js file.*/

	background:Black;/* or any other colors such as White, or: background:none; */}

#slider div.mc-caption-bg2 { background:none;}

#slider div.mc-caption {font: bold 14px/20px Arial;color:#EEE;z-index:4;text-align:center; background:none;}

#slider div.mc-caption a {color:#006600;}

#slider div.mc-caption a:hover {color:#009900;}

/* ------ built-in navigation bullets wrapper ------*/

/* Note: check themes\2\js-image-slider.css to see how to hide nav bullets */

#slider div.navBulletsWrapper  { top:310px;/* Its position is relative to the #slider */text-align:center;background:none;position:relative;z-index:5;}

/* each bullet */

#slider div.navBulletsWrapper div 

{ width:14px; height:13px; font-size:0;color:White;/*hide the index number in the bullet element*/

background:transparent url(images/bullet.png) no-repeat 0 0;  display:inline-block; *display:inline; zoom:1;overflow:hidden;cursor:pointer;

 margin:0 2px;/* set distance between each bullet*/}

#slider div.navBulletsWrapper div.active {background-position:0 -13px;}

/* --------- Others ------- */

#slider div.loading { width:100%; height:100%; background:transparent url(loading.html) no-repeat 50% 50%; filter: alpha(opacity=60);

 opacity:0.6; position:absolute; left:0; top:0;   z-index:0;}

#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;}