#gallery {width: auto; height: auto; border: 1px none #333; background: whitesmoke; position:relative;
	color: whitesmoke;
	border-top: 1px solid navy;
	padding-top: 20px;
	margin-bottom: 100px;
}
/* use these if you what a big image already when the gallery opens*/

#gallery ul li a {display:block; width: 200px; height: 275px; text-decoration:none;
}

/*#gallery b.default {position:absolute; left:10px; top:10px; width:548px; height:380px; text-align:center;}
#gallery b.default img {display:block; margin:0 auto 10px auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}
#gallery b.default span {display:block; color:#fff; font-family:verdana, arial, sans-serif; font-weight:normal; font-size:11px; width:350px; margin:0 auto;}*/

#gallery ul {list-style:none; margin: 0 0 60px; width: auto; position: relative; float: left;
	z-index: inherit;
	padding-left: 25px;
	height: 90%;
	padding-bottom: 20px;
}
#gallery ul li {display:inline; width: 225px; height: 300px; float:left; margin:0 0 5px 5px;}
#gallery ul li a span {display: block;
	color: navy;
	font: medium Verdana, "Lucida Grande", Lucida, sans-serif;
	margin: 5px;
	text-align: center;
	text-indent: 0;
}
#gallery ul li a img {display:block; width: 200px; height: auto;
	border: 1px solid navy;
	padding: 1px;
}
/*#gallery ul li a:hover {white-space:normal; border-color:#555 #ddd #eee #333; background:#777;}
#gallery ul li a:hover b {position:absolute; left:-548px; top:0; width: 548px; height: 600px; text-align:center; z-index:20;
	color: navy;
	background-color: whitesmoke;
}
#gallery ul li a:hover span {display:block; color: navy; font-family:verdana, arial, sans-serif; font-weight:normal; font-size: medium; width:350px; margin:0 auto;}
#gallery ul li a:hover img {margin:0 auto 10px auto; width:auto; height: auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}

#gallery ul li a:active, #gallery ul li a:focus {white-space:normal; border-color:#555 #ddd #eee #333; background: whitesmoke;}
#gallery ul li a:active b, #gallery ul li a:focus b {position:absolute; left:-548px; top:0; width: 548px; height: 600px; text-align:center; z-index:10;}
#gallery ul li a:active span, #gallery ul li a:focus span {display:block; color: navy; font-family:verdana, arial, sans-serif; font-weight:normal; font-size: medium; width:350px; margin:0 auto;}
#gallery ul li a:active img, #gallery ul li a:focus img{margin:0 auto 10px auto; width:auto; height: auto; border:1px solid #eee; border-color:#555 #ddd #eee #333;}

/* It looks like for IE the roll-over and clicked images need to be presented full size (h,w,auto). Height of the b styles should match that of the gallery. Clicking freezes the large image in IE and FF but not Safari */

* {
	
}