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

/*thumbnail-tl means top left and is for the images on the top left of the window*/
/*similarly, tr means top right, bl bottom left and lr bottom right*/
/*it's fairly inelegant, and is because I don't want the popups disappearing offscreen if they are located near the bottom or right hand edges*/

/*TOP LEFT!!!!!!!!*/
.thumbnail-tl{
position: relative;
z-index: 0;
}

.thumbnail-tl:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail-tl span{ /*CSS for enlarged image*/
	position: absolute;
	background-color: lightyellow;
	padding: 5px;
/*	left: -1000px;*/
	border: 1px dashed gray;
	visibility: hidden;
	color: black;
	text-decoration: none;
}

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

.thumbnail-tl:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 35px;
left: 35px; /*position where enlarged image should offset horizontally */
}

/*TOP RIGHT!!!!!!!!*/
.thumbnail-tr{
position: relative;
z-index: 0;
}

.thumbnail-tr:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail-tr span{ /*CSS for enlarged image*/
	position: absolute;
	background-color: lightyellow;
	padding: 5px;
/*	left: -1000px;*/
	border: 1px dashed gray;
	visibility: hidden;
	color: black;
	text-decoration: none;
}

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

.thumbnail-tr:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 35px;
right: 35px; /*position where enlarged image should offset horizontally */
}

/*BOTTOM LEFT!!!!!!!!*/
.thumbnail-bl{
position: relative;
z-index: 0;
}

.thumbnail-bl:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail-bl span{ /*CSS for enlarged image*/
	position: absolute;
	background-color: lightyellow;
	padding: 5px;
/*	left: -1000px;*/
	border: 1px dashed gray;
	visibility: hidden;
	color: black;
	text-decoration: none;
}

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

.thumbnail-bl:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
bottom: 35px;
left: 35px; /*position where enlarged image should offset horizontally */
}

/*BOTTOM RIGHT!!!!!!!!*/
.thumbnail-br{
position: relative;
z-index: 0;
}

.thumbnail-br:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail-br span{ /*CSS for enlarged image*/
	position: absolute;
	background-color: lightyellow;
	padding: 5px;
/*	left: -1000px;*/
	border: 1px dashed gray;
	visibility: hidden;
	color: black;
	text-decoration: none;
}

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

.thumbnail-br:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
bottom: 35px;
right: 35px; /*position where enlarged image should offset horizontally */
}