/*slider frame*/
#sliderFrame {position:relative;background:White;}       
#slider {width:580px;height:280px;/* Make it the same size as your images */background:transparent url(loading.gif) no-repeat 50% 50%;	position:relative;	margin:0 auto;/*this makes the image slider center-aligned. Remove this line if you want to align the whole slider to the left side*/}
#slider img {position:absolute; border:none; visibility:hidden;}
/* the link style (if slide image is wrapped in a link) */
#slider a.imgLink {z-index:2;	display:none;position:absolute;	top:0px;left:0px;border:0;padding:0;margin:0;	width:100%;height:100%;}
/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {position:absolute; width:190px; height:auto;	padding:20px; right:30px; /* or left: ??px; */	bottom:30px;/* or top: ??px; */	z-index:3;	overflow:hidden;	font-size:0;}
div.mc-caption-bg {	background-color:White; /*Caption background color. Can be set to "background:transparent;", or set to semi-transparent through the sliderOptions.captionOpacity setting in the javascript.*/	border-radius: 5px;}
div.mc-caption {font:bold 15px/20px Arial;	color:#000000;	z-index:4;	padding:0px;	text-align:center;}
div.mc-caption a { color:#66FFFF;}
/* ----------- thumbnails ----------- */
#thumbs { background:white url(thumbs-bar.gif) repeat-x 0 0; border:1px solid white; text-align:center; font-size:0px; line-height:45px;/*Setting the expected height to line-height fixes many IE8 erratic behaviours*/}
#thumbs .thumb {width:60px;height:45px; cursor:pointer; text-align:center; border-left:1px solid #FFF; border-right:1px solid #DDD; display:inline-block;    *display:inline;zoom:1; /*IE Hack*/}
#thumbs .thumb-on {background-image: url(active-bg.png);}
#thumbs .thumb img {vertical-align:middle;}
/* ------ built-in navigation bullets wrapper ------*/
div.navBulletsWrapper  {top:10px; left:400px; /* Its position is relative to the #slider. Don't set #slider "overflow:hidden;" if bullets are to be positioned outside of the #slider. */	width:auto; background:none; position:relative; z-index:5;	cursor:pointer;}
/* each bullet */
div.navBulletsWrapper div {width:11px; height:11px; background:transparent url(bullet.png) no-repeat 0 0;    float:left;overflow:hidden;vertical-align:middle;cursor:pointer;    margin-right:20px;/* distance between each bullet*/    _position:relative;/*IE6 hack*/}
div.navBulletsWrapper div.active {background-position:0 -11px;}
/*----------- navigation buttons on both sides of the slider -----------*/
.group1-Wrapper {position:absolute;    z-index:20;    top:120px;    margin-left:50%;/* position it in the middle of #sliderFrame */    width:1px;}
a.group1-Prev, a.group1-Next{    width:50px;height:150px;    background:transparent url(navButtons2.gif);     display:block;     cursor:pointer;    position:absolute;    top:0;    user-select: none;}
a.group1-Prev{background-position:0 0; left: -510px;}
a.group1-Next {background-position:0 -150px;left:460px;}
a.group1-Prev:hover{background-position:50px 0;}
a.group1-Next:hover {background-position:50px -150px;}
/* ----------- navigation buttons in the thumbnails bar ---------- */
a.group2-Prev, a.group2-Next, a.group2-Play, a.group2-Pause {    width:20px; height:20px;     background:transparent url(navButtons.gif);     display:inline-block;     *display:inline;zoom:1;/*IE hack*/    margin-right:8px;    vertical-align:middle;    cursor:pointer;}
a.group2-Pause{background-position:0 0;}
a.group2-Play {background-position:0 -20px;}
a.group2-Next {background-position:0 -40px;}
a.group2-Prev {background-position:0 -60px;} 

a.group2-Pause:hover{background-position:20px 0;}
a.group2-Play:hover {background-position:20px -20px;}
a.group2-Next:hover {background-position:20px -40px;}
a.group2-Prev:hover {background-position:20px -60px;} 
/* --------- Others ------- */
#slider {	transform: translate3d(0,0,0);    -ms-transform:translate3d(0,0,0);    -moz-transform:translate3d(0,0,0);    -o-transform:translate3d(0,0,0);}