img.mini_left {border: 1px solid white; } /* border around left column images */
	img.mini_right {position: relative; top: -350px; left: 445px; border: 1px solid white;} /* border around left column images */

	div#minis a:hover {background: #00548B; color:  #00548B; text-decoration: none;} /* this seems to be necessary for it to work properly in IE6, I'm honestly not sure why */
	div#minis a img.big {height: 0; width: 0; border-width: 0; color:  #00548B; text-decoration: none;} /* hide the big image by making its height and width 0 */
	div#minis a:hover img.big {position:absolute; top:97px; left:52px; height:350px; width:350px; border:none; color:  #00548B; text-decoration: none;} /* make the big image appear in the same space as the frame at right when the visitor hovers over one of the image in left column */
	
	div#minis a:hover {background: #00548B; color:  #00548B; text-decoration: none;} /* this seems to be necessary for it to work properly in IE6, I'm honestly not sure why */
	div#minis a img.big {height: 0; width: 0; border-width: 0; color:  #00548B; text-decoration: none;} /* hide the big image by making its height and width 0 */
	div#minis a:hover img.big {position:absolute; top:97px; left:52px; height:350px; width:350px; border:none; color:  #00548B; text-decoration: none;} /* make the big image appear in the same space as the frame at right when the visitor hovers over one of the image in left column */

	
	#frame {position:absolute; top: 95px; left:50px; height:350px; width:350px; border:2px solid white;font: 1em "Verdana", Georgia, sans-serif;color:white;padding:10px} /* create an empty frame so that visitors expect something to go there */
	p {margin-bottom:26px} /*add bottom margin to p elements so that they are (roughly) aligned with the big image frame */