body { font-family: arial; font-weight: bold;}
.subHeader {font-family: verdana, arial;  color: white;  background-color: navy;
  font-size: 75%;  text-align: center;  margin: 0;  padding: 0.5ex 0; }
.subHeader a {color: white;  background-color: navy; text-decoration: none;
  font-weight: bold; margin: 0;  padding: 0 1ex; }
.subHeader a:hover {  color: navy;  background-color: white; }
.mt { font-family: arial; font-weight: bold; color:teal; }
.mh { font-family: arial; font-weight: bold; color: navy; }
.mp { font-family: arial; font-weight: bold; color: black; }

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

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

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

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

.thumbnail:hover img{
border: 2px solid black;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
}

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

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

.intpic img{
border: 1px solid black;
margin: 0;
}

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

.intpic:hover img{
border: 2px solid black;
}

.intpic span{ /*CSS for enlarged image*/
position: absolute;
left: -1000px;
visibility: hidden;
color: black;
text-decoration: none;
}

.intpic span img{ /*CSS for enlarged image*/
border-width: 0;
}

.intpic:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: -325px;
left: 100px; /*position where enlarged image should offset horizontally */
z-index: 10;
}