a.gallery, a.gallery:visited {
display:inline; color:#fff; text-decoration:none; 
border:1px solid #777; 
width:75px; height:63px; 
float:left; 
margin:3px;  
cursor:default;}
/*--------------------------------------------------------------------------------------
--- if we use this method, we'll either have to name each image generically 
--- img1, img2 etc in each images folder, or we'll have to server this portion
--- of the css up dynamically and save it with the appropriate names of the img's
--- downfall is that we have to keep updating it!
--- with generic names we can have a.thum set as many times as we want all in one place!
----------------------------------------------------------------------------------------*/
a.thumba {background:url(remodel01tn.jpg);}
a.thumbb {background:url(remodel02tn.jpg);}
a.thumbc {background:url(remodel03tn.jpg);}
a.thumbd {background:url(remodel04tn.jpg);}
a.thumbe {background:url(remodel05tn.jpg);}
a.thumbf {background:url(remodel06tn.jpg);}
a.thumbg {background:url(remodel07tn.jpg);}
a.thumbh {background:url(remodel08tn.jpg);}
a.thumbi {background:url(remodel09tn.jpg);}
a.thumbj {background:url(remodel10tn.jpg);}
a.thumbk {background:url(remodel11tn.jpg);}
a.thumbl {background:url(remodel12tn.jpg);}
a.thumbm {background:url(remodel13tn.jpg);}
a.thumbn {background:url(remodel14tn.jpg);}
a.thumbo {background:url(remodel15tn.jpg);}
a.thumbp {background:url(remodel16tn.jpg);}
a.thumbq {background:url(remodel17tn.jpg);}
a.thumbr {background:url(remodel18tn.jpg);}
a.thumbs {background:url(remodel19tn.jpg);}
a.thumbt {background:url(img20tn.jpg);}
a.thumbu {background:url(img21tn.jpg);}
a.thumbv {background:url(img22tn.jpg);}
a.thumbw {background:url(img23tn.jpg);}
a.thumbx {background:url(img24tn.jpg);}
a.thumby {background:url(img25tn.jpg);}
a.thumbz {background:url(img26tn.jpg);}

/* -- if only doing image and thumbs this class is not needed --*/
.gallerycontainer{
position: relative;
height:333px;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.gallery img{
/*border: 1px solid red;*/
float:left;
margin: 0 5px 5px 0;
}

.gallery:hover{
background-color: transparent;

}

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

.gallery span{ /*CSS for enlarged image*/
position: absolute;
background-color: transparent;
width:325px;
padding: 0px;
right: 0px;
border: 1px dashed #eee;
visibility: hidden;
color: black;
min-height:325px;
text-decoration: none;
}

.gallery span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 0px;

}

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

a.gallery span, a.gallery:visited span{
display:inline;cursor:default;
float:left;
}
a.gallery:hover {border:1px solid blue; white-space:normal;  z-index:100;}
a.gallery:active, a.gallery:focus {border:1px solid red;}
a.gallery, a.gallery:vistited {background:red; width:75px; height:63px; visibility:visible; z-index:40;}
.gallery:active span, .gallery:focus span {visibility:visible; z-index:40; top: -7px;}

.gallery:active span img, .gallery:focus span img {position:relative; z-index:40; top: 0px;}