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

/*#sliderFrame {position:relative;width:700px;margin: 0 auto;} /*remove the "margin:0 auto;" if you want to align the whole slider to the left side*/

/*#ribbon {width:111px;height:111px;position:absolute;top:-4px;left:-4px;background:url(ribbon.png) no-repeat;z-index:7;}*/
        
		
#slider {
    width:100%; max-width:625;height:345px;/* Make it the same size as your images */
	background:#fff url(loading.gif) no-repeat 50% 50%;
	position:relative;
	margin:0 auto;/*make the image slider center-aligned */
    box-shadow: 0px 1px 5px #999999;
}
#slider img {
	position:absolute;
	border:none;
	display:none;
}




/* ------ built-in navigation bullets wrapper ------
div.navBulletsWrapper  {
	top:320px; left:280px; /* Its position is relative to the #slider 
	width:150px;
	background:none;
	padding-left:20px;
	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:11px;/* distance between each bullet
    _position:relative;/*IE6 hack
}

div.navBulletsWrapper div.active {background-position:0 -11px;}*/


/* --------- 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);
}


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