.title1{
font-size:17px;
border-bottom: solid 1px #FF3333;
display:inline-block;
width:100%;
margin-top:10px;
}
img .figure{
 float: right;
 margin-left:10px;
 margin-bottom:10px;
 padding:10px;}

.figure {
	float: left;
	width: 180px;
	margin: 0 10px 10px 10px;
	text-align: center;
}
.photo {
		background: url(drop_shadow.gif) no-repeat right bottom;
}
.photo img {
	border: 1px solid #666;
	background-color: #FFF;
	padding: 4px;
	position: relative;
	top: -5px;
	left:-5px;
}
.figure p {
	font: 1.1em/normal Arial, Helvetica, sans-serif;
	text-align: center;
	margin: 10px 0 0 0;
	height: 5em;
}
/* IE 5/6 border erase bug */
* html #gallery {
	width: 100%;
}
* html #gallery img {
	width: 98%;
}
#gallery .figure p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	text-align: center;
	line-height: normal;
	margin: 0;
}
.w300{
 width: 310} 
.info{
    position:relative; /*this is the key*/
    z-index:24; background-color:#ccc;
    color:#000;
    text-decoration:none;}

a.info:hover{z-index:25; background-color:#000;}

a.info span{display: none;z-index:10000;
            }

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    bottom:60px; left:30px; width:20em;height:30em;
    border:1px solid #ccc;
    background-color:#fff; color:#000;
    text-align: center;}