/* This style sheet is for the hover effect on thumbnail images, which displays the medium dimension image when a visitor hovers the mouse over the thumbnail */

/* positioning and styles for left floated unordered list within which images are placed for the thumbnail gallery with pseudo popup */

.thmgallery { /* apply class to ul to enclose all thumbs */
	position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
	/* width: 90%; this width creates a flexible boundary so that the number of thumbs displayed horizontally will depend on user's display width */
}
.thmgallery li{ /* force list item to act as an image frame */
	background: #FFF;
	display: inline;
	float: left;
	margin: 7px;
	height: 175px;
	width: 175px;/**/
	position: relative;
	text-align:center;
}
.thm img{
	/*border: 5px solid #FFF;
	padding-top: 3px;*/
	border-top:4px solid #FFF;
	border-right: 2px solid #CCC;
	border-bottom: 3px solid #999;
	border-left: 4px solid #FFF;
	padding: 5px 7px 6px 5px;
}

/* styles for medium dimension image that "pops up" on rollover */
.thm:hover{
	background-color: transparent;
}
.thm:hover img{
	border: 5px solid #FFF;
	padding-top: 3px;
}
.thm span{ 
position: absolute;
background-color: #FFF;
padding: 5px;
left: -1000px; /* this isn't really necessary, but in case visibility setting doesn't work */
border-top: 0;
border-right: 2px solid #CCC;
border-bottom: 2px solid #CCC;
border-left: 0;
visibility: hidden;
text-decoration: none;
}

.thm span img{ 
border-width: 0;
padding: 2px;
}

.thm:hover span{  /* "pop-up" image is centered relative to thumb image and overlays all else */
	display: block;
	top: -50%;
	left: -50%;
	z-index: 1;
	visibility: visible;
}