/* ____________ Disclaimer ______________

All props go to http://www.webreference.com/programming/css_gallery/index.html for this css, though it is modified from the original, the concept and gallery originated there. To Use it please go to that site for detailed instructions 

___________ END Disclaimer ____________*/

/* _________Image Specifications_________

Full images
- Crop to 545 pixels wide by 400 pixels high 
- name them p01.jpg, p02.jpg,...
- place in images/gallery

Thumbnail images
- Crop to 45 pixels wide by 45 pixels high
- name them p01t.jpg, p02t.jpg,...
- place in images/gallery

_______________________________________*/


/* The containing box for the gallery */
#gal_container {
	position: absolute;
	width: 621px;
	height: 400px;
	background: transparent url(../images/gallerybg.jpg) repeat-y;
	margin-left: 15px;
	display: inline;
	overflow: hidden;
	border-top: 2px solid black;
	border-bottom: 2px solid black;
	}

/* Removing the list bullets and indentation - add size - and position */
#gal_container ul {
	width: 150px;
	height: 300;
	margin: 5px 0 0 7px;
	list-style-type: none;
	}

#gal_container li {display: inline; float: left;}

/* Remove the images and text from sight */
#gal_container a.gallery span {
	position: absolute;
	width: 1px;
	height: 1px;
	top: 5px;
	left: 171px;
	overflow: hidden;
	background: transparent;
	}

/* Adding the thumbnail images */
#gal_container a.gallery, #gal_container a.gallery:visited {
	display: block;
	text-decoration: none;
	margin: 0px 5px 5px 0px;
	text-align: left;
	cursor: default;
	}
	
#gal_container a.slide-a {
	background: url(../images/gallery/p01t.jpg);
	height: 45px;
	width: 45px;
	}
	
#gal_container a.slide-b {
	background: url(../images/gallery/p02t.jpg);
	height: 45px;
	width: 45px;
	}
	
#gal_container a.slide-c {
	background: url(../images/gallery/p03t.jpg);
	height: 45px;
	width: 45px;
	}
	
#gal_container a.slide-d {
	background: url(../images/gallery/p04t.jpg);
	height: 45px;
	width: 45px;
	}

#gal_container a.slide-e {
	background: url(../images/gallery/p05t.jpg);
	height: 45px;
	width: 45px;
	}
	
#gal_container a.slide-f {
	background: url(../images/gallery/p06t.jpg);
	height: 45px;
	width: 45px;
	}

#gal_container a.slide-g {
	background: url(../images/gallery/p07t.jpg);
	height: 45px;
	width: 45px;
	}
	
#gal_container a.slide-h {
	background: url(../images/gallery/p08t.jpg);
	height: 45px;
	width: 45px;
	}
	
#gal_container a.slide-i {
	background: url(../images/gallery/p09t.jpg);
	height: 45px;
	width: 45px;
	}
	
#gal_container a.slide-j {
	background: url(../images/gallery/p10t.jpg);
	height: 45px;
	width: 45px;
	}
	
#gal_container a.slide-k {
	background: url(../images/gallery/p11t.jpg);
	height: 45px;
	width: 45px;
	}
	
#gal_container a.slide-l {
	background: url(../images/gallery/p11t.jpg);
	height: 45px;
	width: 45px;
	}

/* styling the hovers */
#gal_container a.gallery:hover {background-position: left bottom;} /* Needed for it to work in IE6 */
#gal_container a.gallery:hover span {position: absolute; width: 445px; height: 300px; color: #000; background: transparent;}
#gal_container a.gallery:hover img {float: left; margin-right: 5px;}


 /* This part is needed to prevent the thumbnails from blinking when hovered over in IE6 */
#gal_container li.a {background-image: url(../images/gallery/p01t.jpg); background-repeat: no-repeat;}
#gal_container li.b {background-image: url(../images/gallery/p02t.jpg); background-repeat: no-repeat;}
#gal_container li.c {background-image: url(../images/gallery/p03t.jpg); background-repeat: no-repeat;}
#gal_container li.d {background-image: url(../images/gallery/p04t.jpg); background-repeat: no-repeat;}
#gal_container li.e {background-image: url(../images/gallery/p05t.jpg); background-repeat: no-repeat;}
#gal_container li.f {background-image: url(../images/gallery/p06t.jpg); background-repeat: no-repeat;}
#gal_container li.g {background-image: url(../images/gallery/p07t.jpg); background-repeat: no-repeat;}
#gal_container li.h {background-image: url(../images/gallery/p08t.jpg); background-repeat: no-repeat;}
#gal_container li.i {background-image: url(../images/gallery/p09t.jpg); background-repeat: no-repeat;}
#gal_container li.j {background-image: url(../images/gallery/p10t.jpg); background-repeat: no-repeat;}
#gal_container li.k {background-image: url(../images/gallery/p11t.jpg); background-repeat: no-repeat;}
#gal_container li.l {background-image: url(../images/gallery/p12t.jpg); background-repeat: no-repeat;}