img.mini {
	 border: 0px solid red;
	 margin: 0px 10px 10px 0px;
	}
	 /* no border around left column images */
	div#minis a:hover {
	 background:#eee;
		} /* 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: 100%;
	 border-width: 0;
	 
	 } /* hide the big image by making its height and width 0 */
	div#minis a:hover img.big {
	 position:absolute;
	 top:50px;
	 left:500px;
	 min-height:133px;
	 min-width: 100px;
	 max-width: 100px;
	 border: 0px solid red;
	 
	 } /* 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:0px;
	 left:3px;
	 height:355px;
 	 max-width: 95%px;
	 border: 0px solid black;
	 font: 1em "Trebuchet MS", Verdana, sans-serif;
	 color:red;
	 padding:10px

	 } /* create an empty frame so that visitors expect something to go there */