/* used by album.php, photo.php, showcase.php and showcase-photo.php */

.thumbnail {
	float: left;
	width: 120px;
/*	border: double #724CDF; */
	margin-right: 5px;
	font-size: 10px;
	font-weight: bold;
	margin-bottom: 20px;
	border-radius: 2px;
	padding-top: 5px;
	padding-right: 8px;
	padding-bottom: 2px;
	padding-left: 5px;
	min-height: 70px;
}


/* code from www.dynamicdrive.com */

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

/* ------------------------------- thumbnail: original styles ------------------------------ */
/*

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}
*/

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow; 
/* margin-top: 180px; */
padding-top: 5px; 
padding-right: 1px; 
padding-bottom: 5px;
padding-left: 5px; 
top: -1000px; 				
left: -1000px; 
border: 1px solid gray; 
visibility: hidden;
color: black;
text-decoration: none;
max-width: 710; /* my addition */
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
max-width: 700; /* my addition */
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 300px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

/* ------------------------------- thumbnail2: copies for displaying main image lower down the page ------------------------------ */
/* ------------------------------- identical to original except for top=750 sepecified for hover --------------------------------- */
.thumbnail2 {
	float: left;
	width: 120px;
/*	border: double #724CDF; */
	margin-right: 5px;
	font-size: 10px;
	font-weight: bold;
	margin-bottom: 20px;
	border-radius: 2px;
	padding-top: 5px;
	padding-right: 8px;
	padding-bottom: 2px;
	padding-left: 5px;
	min-height: 70px;
	max-width: 710; /* my addition */ 
}

.thumbnail2 img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail2:hover{
background-color: transparent;
}

.thumbnail2:hover img{
border: 1px solid blue;
}

.thumbnail2 span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow; 
// margin-top: 180px;
padding-top: 5px; 
padding-right: 1px; 
padding-bottom: 5px;
padding-left: 5px; 
top: -1000px; 				
left: -1000px; 
border: 1px solid gray; 
visibility: hidden;
color: black;
text-decoration: none;
max-width: 710; 
}

.thumbnail2 span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
max-width: 700; 
}

.thumbnail2:hover span{ /*CSS for enlarged image
visibility: visible;
top: 0;
left: 300px; /*position where enlarged image should offset horizontally
top: 750px; 
z-index: 50; */
}