/* CSS Document */

#gallery ul { overflow: hidden; padding: 5px; }
#gallery ul > li {
    position: relative;
    float: left;
    list-style: none;
    margin: 3px 3px 20px 3px;
    font-size: 10px;
	
}
#gallery ul a { text-decoration: none; display: block; }

#gallery ul li img { display: block; position: relative; z-index: -1; } /* IE8 fix, background colour appears behind img for uknown reason set negative z-index */
#gallery ul li:not([class=na]) img { position: static; } /* Reset relative position, as this plays havoc with good browsers */

#gallery ul a:hover, ul a:focus
{
	display: block;
	outline: none;
	-moz-box-shadow: 3px 3px 5px #000;
	-webkit-box-shadow: 3px 3px 5px #000;
	box-shadow: 3px 3px 5px #000;
}
#gallery ul a:hover img, ul a:focus img {
	outline: 3px solid #ccc;
}

#gallery ul a:hover:after,
#gallery ul a:focus:after
{
    content: attr(title);
    color: #000;
    position: absolute;
    bottom: 0;
    height: 40px;
    line-height: 40px;
    text-align: center;
	font-family:Garamond, Helvetica, serif;
	font-size: 15px;
    font-weight: bold;
    width: 100%;
    background: rgb(55,139,174);
    background: rgba(55,139,174,0.7);
    background: -moz-linear-gradient(top, rgba(55,139,174,0.7), rgba(204,204,204,0.7)); /* Firefox 3.6+ */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(55,139,174,0.7)), to(rgba(55,139,174,0.7))); /* Safari */
    display: block;
    text-shadow: 1px 1px 1px #fff;
}
#gallery ul a.offset:hover:after,
#gallery ul a.offset:focus:after { top: 50%; margin-top: -15px; }