/* general styling for this example */
* { margin: 0; padding: 0; }
body { padding: 20px; }

/* begin gallery styling */
#jgal { margin-top: 510px; list-style: none; width: 460px; }
#jgal li { opacity: .3; float: left; display: block; width: 20px; height: 20px; background-position: 76% 30%; border: 1px solid #fff; cursor: pointer; margin-right: 2px; margin-bottom: 2px; }
#jgal li img { position: absolute; top: 15px; left: 15px; display: none; }
#jgal li p { cursor: none; display: none;}
#jgal li.active img { margin-top: 25px; margin-right: 0px; cursor: none; display: block; border: 1px solid #fff;}
#jgal li.active p { width: 300px; position: absolute; left: 0px; top: 15px; margin-right: 25px; margin-top: 25px; color: ivory; font-size: 0.60em; cursor: none; display: inline;}
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }

#jgal li.active a:link {
color: black;
background-color: ivory;
text-decoration: none;
}

#jgal li.active a:visited
{
color: black;
background-color: ivory;
text-decoration: none;
}

#jgal li.active a:hover
{
color: ivory;
text-decoration: none;
background-color: transparent;
}

#jgal li.active a:active
{
color: black;
background-color: ivory;
text-decoration: none;
}


/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }