/*20.10 juste petite révision mise en page*/
#myGallery1 { 
	border: 1px solid #000; 
	float: left; 
	margin-top: 5px; 
	width: 645px; 
	height: 430px; 
	z-index:5; 
}

#myGallery1 .imageElement { 
	width: 645px; 
	height: 430px; 
	z-index:5; 	
}

#myGallery2,
#myGallery3,
#myGallery4 { 
	border: 1px solid #000; 
	float: right; 
	margin-top: 3px; 
	width: 195px; 
	height: 130px; 
	z-index:5; 
}

#myGallery2 .imageElement,
#myGallery3 .imageElement,
#myGallery4 .imageElement { 
	padding: 0px; 
	width: 195px; 
	height: 130px; 
	z-index:5; 
}

.jdGallery a { 
	outline:0; 
}

.jdGallery { 
	overflow: hidden; 
	position: relative; 
}

.jdGallery img { 
	border: 0; 
	margin: 0; 
}

.jdGallery .slideElement { 
	background-color: #000; 
	background-image: url('/images/loaderblack.gif'); 
	background-position: center center; 
	background-repeat: no-repeat; 
	width: 100%; 
	height: 100%; 
}

.jdGallery .loadingElement { 
	background-color: #000; 
	background-image: url('/images/loaderblack.gif'); 
	background-position: center center; 
	background-repeat: no-repeat; 
	position: absolute; 
	left: 0; 
	top: 0; 
	width: 100%; 
	height: 100%; 
}

.jdGallery .slideInfoZone { 
	background-color: #666; 
	color: #fff; 
	margin: 0px; 
	overflow: hidden; 
	position: absolute; 
	bottom: 0; 
	left: 0; 
	text-indent: 0; 
	width: 100%; 
	height: 17px; 
	z-index: 10; 
}

* html .jdGallery .slideInfoZone { 
	bottom: -1px; 
}

.jdGallery .slideInfoZone h2 { 
	color: #fff; 
	font-size: 10px; 
	font-weight: normal; 
	margin: 2px 5px; 
	padding: 0; 
	text-align: left; 
	text-transform:none; 
}

.jdGallery .slideInfoZone p { 
	color: #eee; 
	font-size: 60%; 
	margin: 2px 5px; 
	padding: 0; 
}

.jdGallery a { 
	color: inherit; 
	font-size: 100%; 
	text-decoration: none; 
}

.jdGallery a.right,
.jdGallery a.left { 
	cursor: pointer; 
	-moz-opacity: 0.2; 
	-khtml-opacity: 0.2; 
	filter: alpha(opacity=20); 
	opacity: 0.2; 
	position: absolute; 
	width: 25%; 
	height: 99%; 
	z-index:10; 
}

* html .jdGallery a.right,
* html .jdGallery a.left { 
	filter: alpha(opacity=50); 
}

.jdGallery a.right:hover,
.jdGallery a.left:hover { 
	filter: alpha(opacity=80); 
	-moz-opacity: 0.8; 
	-khtml-opacity: 0.8; 
	opacity: 0.8; 
}

/* Pas l'air d'être une si bonne idée de remplacer les .gif par des .png -> je me contente d'ajouter un padding pour les flèches */
.jdGallery a.left { 
	background: url('/images/fleche1.png') no-repeat center left; 
	left: 0; 
	top: 0; 
	padding-left: 5px; 
}

* html .jdGallery a.left { 
	background: url('/images/fleche1.gif') no-repeat center left; 
}

.jdGallery a.right { 
	background: url('/images/fleche2.png') no-repeat center right; 
	padding-right: 5px;
	right: 0; 
	top: 0; 
}

* html .jdGallery a.right { 
	background: url('/images/fleche2.gif') no-repeat center right; 
}

.jdGallery a.open { 
	left: 0; 
	top: 0; 
	width: 100%; 
	height: 100%; 
}

.withArrows a.open { 
	background: none; 
	cursor: pointer; 
	position: absolute; 
	top: 0; 
	left: 25%; 
	width: 50%; 
	height: 99%; 
	z-index: 10; 
	-moz-opacity:0.8; 
	-khtml-opacity: 0.8; 
	opacity: 0.8; 
}

.withArrows a.open:hover { 
	background: url('/images/open.png') no-repeat center center; 
}

* html .withArrows a.open:hover { 
	background: url('/images/open.png') no-repeat center center; 
	filter: alpha(opacity=80); 
}
	
/* Gallery Sets */
.jdGallery a.gallerySelectorBtn { 
	background: #333; 
	color: #fff; 
	cursor: pointer; 
	font-size: 13px; 
	height: 20px;
	-moz-opacity: .4; 
	-khtml-opacity: 0.4; 
	opacity: .4; 
	filter: alpha(opacity=40); 
	position: absolute; 
	top: 0; 
	left: 30px; 
	/*width: 100px; background: url('img/carousel_btn.gif') no-repeat;*/
	text-align: center; 
	padding: 0 10px; 
	z-index: 15; 
}

.jdGallery .gallerySelector { 
	background: #000; 
	position: absolute; 
	top: 0; 
	left: 0; 
	z-index: 20; 
	width: 100%; 
	height: 100%; 
}

.jdGallery .gallerySelector h2 { 
	color: #fff; 
	font-size: 20px; 
	line-height: 30px; 
	margin: 0; 
	padding: 10px 20px 10px 20px; 
}

.jdGallery .gallerySelector .gallerySelectorWrapper { 
	overflow: hidden; 
}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton { 
	border: 1px solid #888; 
	color: #fff; 
	cursor: pointer; 
	float: left; 
	height: 40px; 
	margin-left: 10px; 
	margin-top: 10px; 
	padding: 5px; 
}

.jdGallery .gallerySelector .gallerySelectorInner div.hover { 
	background: #333; 
}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton div.preview { 
	border: none; 
	background: #000; 
	background-position: center center; 
	float: left; 
	margin-right: 5px; 
	width: 40px; 
	height: 40px; 
}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton h3 { 
	font-size: 12px; 
	font-weight: normal; 
	margin: 0; 
	padding: 0; 
}

.jdGallery .gallerySelector .gallerySelectorInner div.galleryButton p.info { 
	color: #aaa; 
	font-size: 12px; 
	font-weight: normal; 
	margin: 0; 
	padding: 0; 
}