<script type="text/javascript" src="./themes/js/easySlider1.5.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$("#slider").easySlider({
				auto: true,
				continuous:false
			});
		});
	</script>

<style type="text/css">
    /* image replacement */
        .graphic, #prevBtn, #nextBtn{
            margin:0;
            padding:0;
            display:block;
            overflow:hidden;
            text-indent:-8000px;
            }
    /* // image replacement */


	#container{
		margin:0 auto;
		position:relative;
		text-align:left;
		width:696px;
		background:#fff;
		margin-bottom:2em;
		}

	#content1{
		position:relative;
		}

/* Easy Slider */

	#slider{}
	#slider ul, #slider li{
		margin:0;
		padding:0;
		list-style:none;
		}
	#slider li{
		/*
			define width and height of list item (slide)
			entire slider area will adjust according to the parameters provided here
		*/
		width:696px;
		height:241px;
		overflow:hidden;
		}
	#prevBtn, #nextBtn{
		display:block;
		width:30px;
		height:77px;
		position:absolute;
		left:-30px;
		top:71px;
		}
	#nextBtn{
		left:696px;
		}
	#prevBtn a, #nextBtn a{
		display:block;
		width:30px;
		height:77px;
		background:url(./themes/pics/btn_prev.gif) no-repeat 0 0;
		}
	#nextBtn a{
		background:url(./themes/pics/btn_next.gif) no-repeat 0 0;
		}

/* // Easy Slider */

</style>



	<div id="content1">

		<div id="slider">
			<ul>
				<li><img src="./themes/pics/01.jpg" /></li>
				<li><img src="./themes/pics/02.jpg" /></li>
				<li><img src="./themes/pics/03.jpg" /></li>
				<li><img src="./themes/pics/04.jpg" /></li>
				<li><img src="./themes/pics/05.jpg" /></li>
			</ul>
		</div>