@charset "UTF-8";
/* CSS Document */

/* @override 
	http://localhost:8888/jo_metson_scott/css/jd.gallery.css
	http://www.voodoo6.com/jo_metson_scott/css/jd.gallery.css
*/

#myGallery {
	position: relative;
	left: 215px;
	height: 510px;
	width: 567px;
	z-index:5;
	}

.imageElement {
	border: none;
	visibility: hidden; /* needed to prevent all content flashing up until page loads see http://smoothgallery.jondesign.net/forums/viewtopic.php?id=1660 */
}

.jdGallery { /* NOTE : IE6 needs 'overflow:hidden' in order to position the fade transition effect correctly (which was on original code) but it causes the caption and next/previous links to be hidden! - what to do.. */
	position: relative;
}

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

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

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

.jdGallery .slideInfoZone {
	position: absolute;
	z-index: 10;
	width: 400px;
	top: 515px;
	left: 0px;
}

.jdGallery .slideInfoZone h2 {
	font-size: 85%;
	line-height: 100%;
	padding: 0;
	margin: 0;
	color: #6b6b6b;
}

.jdGallery .slideInfoZone p {
	font-size: 85%;
	line-height: 100%;
	padding: 0;
	margin: 0;
	color: #6b6b6b;
}

#thumbnails {
	position: absolute;
	bottom: 0;
}

/*#thumbnails a.carouselBtn {
	display: none;
	position: absolute;
	bottom: 0;
	right: 30px;
	height: 20px;
	/*width: 100px;* 
	background: url('img/carousel_btn.gif') no-repeat;*/
/*	text-align: center;
	padding: 0 10px;
	font-size: 13px;
	background: #333;
	color: #fff;
	cursor: pointer;
}*/

#thumbnails .carouselWrapper {
	position: absolute;
	width: 210px;
	height: auto;
	background: transparent;
	color: #fff;
      top:-340px
}

#thumbnails2 .carouselWrapper {
	position: absolute;
	width: 210px;
	height: auto;
	background: transparent;
	color: #fff;
      top:-140px
}

/* #thumbnails .carousel .carouselWrapper {
	position: absolute;
	width: 840px;
	height: 90px;
	top: 0px;
	right: 0;
	bottom: 0;
	overflow: hidden;
	text-align: right;
} */

#thumbnails .carouselInner {
	position: relative;
}

#thumbnails .carouselInner .thumbnail {
	float: left;
	display: inline;
	cursor: pointer;
	background: #ffffff;
	background-position: center center;
	margin: 2px 2px 0 0;
	width: 62px;
	height: 62px;
}

#thumbnails .label {
	font-size: 13px;
	position: absolute;
	bottom: 5px;
	left: 10px;
	padding: 0;
	margin: 0;
}

#thumbnails .label .number {
	color: #b5b5b5;
}

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

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

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

.jdGallery a.left:hover {
	background: url('img/fleche1_v2.png') no-repeat center left;
}

.jdGallery a.left {
	left: 0;
	top: 0;
	/* background: url('img/fleche1.png') no-repeat center left; */
}

/* * html .jdGallery a.left {
	background: url('img/fleche1.gif') no-repeat center left; } */
	
.jdGallery a.right:hover {
	background: url('img/fleche2_v2.png') no-repeat center right;
}

.jdGallery a.right
{
	right: 0;
	top: 0;
	/* background: url('img/fleche2.png') no-repeat center right; */
}

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

/* Link open code removed - see original file if needed */

#image_nav {
	position: absolute;
	text-align: right;
	top: 515px;
	z-index: 10;
	width: 100%;
	font-size: 85%;
	line-height: 100%;
	color: #6b6b6b;
}

#image_nav a {
	padding: 0 0 0 5px;
}

#image_nav a:hover {
	color: #378eb4;
}

/* remote rollover code - not fully working in IE6 and not sure if page benefits for having it or not. TO DO: figure out how to get rollover working so that the next/previous text links highlight when the next/previous image areas are rolled over - currently it only works one way round - see p.106 in CSS mastery book. Also, to make this work '<span class="hotspot"></span>' needs adding to the html in the next/prev text link code.

a.back .hotspot {
	position: absolute;
	left: 0;
	top: -515px;
	width: 25%;
	height: 500px;
}

a.next .hotspot {
	position: absolute;
	right: 0;
	top: -515px;
	width: 25%;
	height: 500px;
}

#image_nav a.back:hover .hotspot {
	background: url('img/fleche1_v2.png') no-repeat center left;
}

#image_nav a.next:hover .hotspot {
	background: url('img/fleche2_v2.png') no-repeat center right;
}
*/

	
/* Gallery Set Code removed - see original file if needed */