/* Gallery Image Viewer by I Do, I Do web design */

/* Gallery division */
.gallery {
	display:block;
	position:relative;
	height:378px;
}

.rightbar {
	/* set dimensions for gallery as required */
	width:580px;
}

/* define the space for the big image to sit in */
.gallery .mainImg {
	position:relative;
	height:377px;
	width:251px;
}

/* explicit width on default image to force IE to wrap alternate text */
.gallery .mainImg img {
	width:251px;
	height:377px;
	text-align:center;
	border:none;
}

.rightbar .mainImg {
	/* position as required */
	left:14px;
	top:0px;
}

/* image selection bar containing the thumbnails */
.selectimage{
	display:block;
	position:absolute;
	z-index:5; /* allows text links to be visible when thumb images are off */
}

.rightbar .selectimage {
/*  set dimensions of selection bar as required
	here each thumb is 76 wide with 2 from border and 8 from margins = 86
	so for a maximum of 3 the making bar width is 3*86 = 258 */
	width:258px; /* required to form a column */
/*  position as required, logic as above */
	top:0px;
	/* positions to right of containing div */
	right:0;
}

/* CSS Play has this too "to make IE :active work first time"
a, a:visited {color:#000;} */

/* container for each thumbnail */
.selectimage .thumbImg{
	display:block;
	/* fix margin bug in IE6 */ 
	display:inline-block;
	/* Must specifiy size of each thumbnail */
	height:76px;
	width:76px;
	/* float each thumbnail from left */
	float:left;
	margin:4px;
	border:1px solid #DDD; /* colour set to make normal border look transparent against background */
	text-align:center;
	line-height:76px; /* centres text link alternative */
	outline: none; /* removes outline set by javascript focus for safari */
}

.gallery a{
	text-decoration:none;
	border:none;
}
/* hide text link unless images are off */
.gallery a span.textlink{
	position:relative;
	z-index:-1;
}

/* override for two line text link */
.gallery a span.long{
	display:block;
	line-height:normal;
	padding-top:22px;
}

/* individual thumbnail images */
/* fillers specified on links or on a span as required, alternatively left out entirely */

#g1_img1 {background:url(../images/g11th.jpg);}
#g1_img2 {background:url(../images/g1th2.jpg);}
#g1_img3 {background:url(../images/g1th3.jpg);}
#g1_img4 {background:url(../images/g1th4.jpg);}
#g1_img5 {background:url(../images/g1th5.jpg);}

#g2_img1 {background:url(../images/rj_55034th.jpg);}
#g2_img2 {background:url(../images/g2th2.jpg);}
#g2_img3 {background:url(../images/g2th3.jpg);}
#g2_img4 {background:url(../images/g24th.jpg);}
#g2_img5 {background:url(../images/g25th.jpg);}

#bm_img1 {background:url(../images/bth1.jpg);}
#bm_img2 {background:url(../images/prom2th.jpg);}
#bm_img3 {background:url(../images/bth3.jpg);}
#bm_img4 {background:url(../images/bth4.jpg);}
#bm_img5 {background:url(../images/bth5.jpg);}

/* Big Image to be displayed from click */
/* display:none stops all big images displaying at once */
.selectimage .bigImg {
	display:none;
}

/* no border around the big image */
.selectimage .bigImg img {border:none;}

/* hover state MUST be different from active & focus for IE to notice state change */
.selectimage a.thumbImg:hover {border:1px solid #999;}

/* border on thumb links as they are used */
.selectimage a.thumbImg:active, .selectimage a.thumbImg:focus {border:1px solid #CCC;}

/* show Big Image on click */
.selectimage a.thumbImg:active .bigImg, .selectimage a.thumbImg:focus .bigImg{
	display:block;
	/* See help notes on useable tags with classes containing positioning and also location of settings */
	position:absolute;
	/* dimensions are optional setting them makes alt text alignment nicer but see help notes on useable tags*/
	height:378px;
	width:252px;
	line-height:378px;
	text-align:center;
}

.rightbar a.thumbImg:active .bigImg, .rightbar a.thumbImg:focus .bigImg {
	/* position as required */
	left:-308px;
	top:0px;
}

/* text styles for information when images are not viewable */
.gallery h3, .gallery h4, .gallery em {clear:both; margin:0; padding:0px; text-align:center; font-weight:normal;}
.gallery h3 {font-size:14px;}
.gallery h4 {font-size:12px; font-style:normal;}
.gallery p {text-align:center;}

/* Message text */
.gallery p.selecttext{
	clear:both;
	padding:0;
	text-align:left;
	margin:0 0 0 5px;
}