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

/*slider frame*/

#sliderFrame {
    width:1000px;
    margin: 0px auto 30px; /*this makes the image slider center-aligned. Remove this line if you want to align the whole slider to the left side*/
	}      
*/

#slider {
    width:1000px;
	height:385px;/* Make it the same size as your images */
	background: #FFFFFF;
	position:relative;
	margin:0 auto;/*make the image slider center-aligned */
	}
	#slider img {
		width: 990px;
		height: 375px;
		position:absolute;
		top: 5px;
		left: 5px;
		border:none;
		visibility:hidden;
		}

	/* the link style (if an 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: 980px;
	padding: 5px;
	left: 5px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/
	bottom: 5px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/
	z-index:3;
	overflow:hidden;
	font-size:0;
	background: url(../img/slider/bg_caption.png) repeat;
	}
	div.mc-caption-bg {
		background:transparent; /*Caption background color. Can be set to "background:transparent;", or set to semi-transparent through the sliderOptions.captionOpacity setting in the javascript.*/
		}
div.mc-caption {
	font: 12px Arial;
	font-weight: normal;
	color:#ccc;
	z-index:4;
	text-align:left;
	padding: 0 10px;
	}
	div.mc-caption strong {
		font-size: 14px;
		font-weight: bold;
		}
	div.mc-caption a { 
		color:#66FFFF;
		}


/* ------ built-in navigation bullets wrapper that is relative to the #slider ------*/
div.navBulletsWrapper {
	display:none;
	}


/*thumbnails*/
#thumbs {
    background: #FFF;
	-moz-box-shadow: 0px 0px 7px #999; 
	-webkit-box-shadow: 0px 0px 7px #999; 
	box-shadow: 0px 0px 7px #999; 
	padding: 5px 0;
    text-align:center;
    font-size:0;
	width: 680px;
	margin-left: 160px;
	display: none;
	}
	#thumbs .thumb {
		display:inline-block;
		*display:inline;zoom:1;/*IE6, IE7 hack*/
		margin-right: 5px;/*this determins the distance between each thumbnail*/
		}
		#thumbs .thumb:last-of-type {margin-right: 0}
		#thumbs .thumb img{
			cursor:pointer; 
			width:130px; 
			height:50px; 
			opacity:0.5;
			/*filter: url(filters.svg#grayscale);	 
			filter: gray;
			-webkit-filter: grayscale(1);*/
			filter: grayscale(1);
			-webkit-filter: grayscale(1);
			-moz-filter: grayscale(1);
			-o-filter: grayscale(1);
			-ms-filter: grayscale(1);
			-webkit-transition-property: opacity;
			-webkit-transition-duration: 0.6s;
			-moz-transition-property: opacity;
			-moz-transition-duration: 0.6s;
			transition-property: opacity;
			transition-duration: 0.6s;
			z-index: 10000;
			}
		#thumbs .thumb-on img{
			opacity:1;
			/*filter: none;
			-webkit-filter: none;*/
			filter: grayscale(0);
			-webkit-filter: grayscale(0);
			-moz-filter: grayscale(0);
			-o-filter: grayscale(0);
			-ms-filter: grayscale(0);
			}

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

/*--------- PREV / NEXT -----------*/
a.group1-Prev, a.group1-Next {
	display: block;
	height: 50px;
	width: 26px;
	position: absolute;
	top: 167px;
	z-index: 100;
	cursor: pointer;
	}
	a.group1-Prev {
		left: -26px;
		background: url(../img/slider/prev.png);
		}
		a.group1-Prev:hover {background: url(../img/slider/prev-hover.png)}
	a.group1-Next {
		right: -26px;
		background: url(../img/slider/next.png);
		}
		a.group1-Next:hover {background: url(../img/slider/next-hover.png)}
		
/*--------- BANDEAU ----------*/
#ribbon {
	width: 135px;
	height: 130px;
	position: absolute;
	top: -5px;
	right: -5px;
	background: url(../img/slider/ribbon.png) no-repeat;
	z-index: 7;
	}