/* Stanfield's Style Sheet */



/* All html pages */
a:active 		{color:#00ff00 !important; }
a:hover 			{color:#ff0000 !important;}
a:link 			{color:#D2691E; }
a:visited 		{color:#D2691E;}
a.mainLink  {
	text-decoration: none;
	color: #ffffff;
}
body 				{background-color:#ffffcc; font-size:10px; font-family:Comic Sans MS,Arial, sans-serif; color:#D2691E; }
hr					{color:#D2691E; width:100%;}
table.center {margin-left:auto; margin-right:auto;}
.important		{font-family:Comic Sans MS,Arial, sans-serif; font-size:15px; color:#ffffff; }
.blockcenter	{text-align:center; }
.copyright		{font-size:10px; color:#ffffff; }
div.linkbar {
	width: 100%;
	height: 25;
	background-image: url("graphics/linkbar.gif"); 
	margin-left: 0px;
	margin-right: 0px;
}
span.pupName {
	color: #b92c35;
	font-weight: bolder;
}

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.thumbnail{
position: relative;
z-index: 0;
}

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

.thumbnail 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 span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 150px; /*position where enlarged image should offset horizontally */
top: 100px;

}

/*define a class for the hyperlink, call it "imPop." 
You need to establish: relative positioning and z-index 
this way the pop-up image will load overtop of the page 
content instead of repositioning it.*/

a.imPop {   
   position:relative;   
   z-index:20;   
}   

/*define the hover effect for our "imPop" link container class*/
a.imPop:hover {   
    display:inline;   
    z-index:30;   
}   

/*increase the z-index, so that any links you are hovering over will 
appear on top of any other nearby "imPop" links. In order to get the 
popup to work in IE, we need to set the display property of the link to 
"inline." Now we need to define the initial state for the span that 
contains our image thumbnail. All we want to do is hide it.*/
a.imPop span {   
    display:none;   
}   

/*define the hover effect for the span when our mouse is over its container class, 
"imPop." You need assign it a block-level display type and position it absolutly 
within "imPop," 1em from the top and 1em from the left. you will also specify 
the height and width of the span (equal to the height and width of our thumbnail).*/ 

a.imPop:hover span {   
    display:block;   
    position:absolute;   
    top:1em;   
    left:1em;   
    width:64px;   
    height:64px;   
}