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

#sliderFrame, #sliderFrame div {
    box-sizing: content-box;
}
/*slider frame*/
#sliderFrame {position:relative;background-color:transparent;}      

#slider, #slider div.sliderInner {
    width:950px;height:402px;/* Must be the same size as the slider images */
left: 10px;
}

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

/* the link style (if slide image is wrapped in a link) */
#slider a.imgLink, #slider .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.png) no-repeat 50% 50%;
}

/* Caption styles */
div.mc-caption-bg, div.mc-caption-bg2 {
	position:absolute;
	width:50%;
	height:auto;
	padding:0;
	left:320px; /*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:120px;*/
	z-index:3;
	overflow:hidden;
	font-size: 0;
}
div.mc-caption-bg {
	background-color:none;
}
div.mc-caption {
	font: 16px Arial;
	color:#000;
	z-index:4;
	padding:6px 0;/*Adding a padding-left or padding-right here will make the caption area wider than its background. Sometimes you may need to define its width again here to keep it the same width as its background area (div.mc-caption-bg).*/
	text-align:center;
}
div.mc-caption a {
	color:#000;
}
div.mc-caption a:hover {
	color:#000;
}


/* ------ built-in navigation bullets wrapper ------*/
#slider div.navBulletsWrapper  {
	display:none;
}


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

#slider div.loading 
{
    width:100%; height:100%;
    background:transparent url(./images/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);}



/*----------- 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 nav bar ---------- */
a.group2-Prev, a.group2-Next, a.group2-Play, a.group2-Pause 
{
    width:20px; height:20px;

position:relative;
top: -26px;
right:780px;
    background:transparent url(./images/navbuttons.gif); 
    display:inline-block; 
    *display:inline;zoom:1;/*IE hack*/
    margin-left:4px; margin-right:4px;
    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;}