#box { 
text-align:center; 
font-size: 13px; 
} 

/* The containing box for the gallery. */ 
#container_box { 
position:relative; 
width:700px; 
height:525px; 
margin:20px auto 0 auto; 
border:1px solid #555555; 
} 

/* Removing the list bullets and indentation */ 
#container_box ul { 
padding:0; 
margin:0; 
list-style-type:none; 
} 

#container_box p { 
font-size:11px; 
} 

/* Remove the images and text from sight */ 
#container_box a.gallery span { 
position:absolute; 
width:1px; 
height:1px; 
top:-1px; 
left:-1px; 
overflow:hidden; 
background:#ffffff; 
} 

/* Adding the thumbnail images */ 
#container_box a.gallery, #container a.gallery:visited { 
display:block; 
color:#000000; 
text-decoration:none; 
border:1px solid #000; 
margin:1px 2px 1px 2px; 
text-align:left; 
cursor:default; 
} 
#container_box a.slidea { 
background:url(images/gallery1_thumbnail.jpg); 
width:100px; 
height:100px; 
} 
#container_box a.slideb { 
background:url(images/gallery2_thumbnail.jpg); 
width:100px; 
height:100px; 
} 



#container_box a.slidec { 
background:url(images/gallery3_thumbnail.jpg); 
width:100px; 
height:100px; 
} 
#container_box a.slided { 
background:url(images/gallery4_thumbnail.jpg); 
width:100px; 
height:100px; 
} 


#container_box a.slidee { 
background:url(images/gallery5_thumbnail.jpg); 
width:100px; 
height:100px; 
} 




/* set the size of the unordered list to neatly house the thumbnails */ 
#container_box ul { 
width:260px; 

} 
#container_box li { 
float:left; 
} 

/* move the thumbnails into the correct position */ 
#container_box ul { 
margin:5px; 
float:right; 
} 

/* change the thumbnail border color */ 
#container_box a.gallery:hover { 
border:1px solid #ffffff; 
} 

/* styling the :hover span */ 
#container_box a.gallery:hover span { 
position:absolute; 
width:320px; 
height:500px; 
top:10px; 
left:20px; 
color:#000; 
background:#ffffff; 
} 

#container_box { 
background:#ffffff url(images/gallery1_fullsize.jpg) 20px 10px no-repeat; 
}