@charset "utf-8";
/* CSS Document */

/* general styling for this example */
#gallery_block {
position: relative;
width: 643px;
}

#gallery_block ul {
margin: 0px;
padding: 0px;
}


#jgal {
list-style: none;
display: block;
width: 164px;
height: 300px;
overflow: visible;
}
	#jgal li {
	opacity: .5;
	float: left;
	display: block;
	width: 50px;
	height: 30px;
	background-position: 50% 50%;
	cursor: pointer;
	border: 3px solid #fff;
	outline: 1px solid #ddd;
	margin-right: 10px;
	margin-bottom: 10px;
	}
	#jgal li img {
	position: absolute;
	top: 0px;
	left: 164px;
	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_s {
list-style: none;
display: block;
}
#gallery_s li {
float: left;
margin: 0 10px 10px 0;
}


/* in <header>

<!--[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_s { display: none; } </style>");</script>

<!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery_s { display: block; }</style><![endif]-->

*/

/* in <body>

<ul id="gallery_s">
<li><img src="#" alt=""></li>
</ul>

*/

/* thanks! - http://monc.se/kitchen/80/lightweight-image-gallery-with-thumbnails */
