/* CSS Document */

#wrapper {
width: 754px;
position: relative;
left: 50%;
margin-left:-377px;
}

/* general styling for this example */


/* begin gallery styling */
#jgal { list-style: none; width: 150px; height: 180px; margin-top:15px; margin-left: 150px; padding-left:15px;}
#jgal li { opacity: .5; float: left; display: inline; width: 61px; height: 59px; background-position: 20% 60%; cursor: pointer; border: 1px solid #fff; outline: 1px solid #ddd; margin-bottom: 10px; margin-right: 5px;}
#jgal li img { position: absolute; top: 362px; left: 56%; display: none;}
#jgal li.active img { display: block; }
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }

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

<!--[if lt IE 8]>
<style media="screen,projection" type="text/css">
#jgal li { filter: alpha(opacity=50); }
#jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
</style>
<![endif]-->


<script type="text/javascript">document.write("<style type='text/css'> 
#gallery { display: none; } </style>");</script>

<!--[if lt IE 6]>
<style media="screen,projection" type="text/css">#gallery { display: block; }</style>
<![endif]-->