<!-- DC Media Slider CSS -->	
<link rel="stylesheet" type="text/css" media="all" href="dreamcodes/sliders/media-slider/css/jquery.mediaslider.0.3.css" />

<!-- DC Javascript Library -->
<script type="text/javascript" src="dreamcodes/jquery.min.js"></script> <!-- jQuery Library (do not call twice on same page) -->
<script type="text/javascript" src="dreamcodes/jquery.easing.js"></script> <!-- jQuery Easing (do not call twice on same page) -->

<!-- DC Media Slider JS -->
<script src="dreamcodes/sliders/media-slider/js/jquery.timers-1.2.js" type="text/javascript"></script>
<script src="dreamcodes/sliders/media-slider/js/jquery.mediaslider.0.3.min.js" type="text/javascript"></script>

<!-- DC Media Slider Settings -->
<script type="text/javascript">
		
		$(document).ready(function() {
			
			$(".media-carousel").dualSlider({
				auto:true, // auto play slides
				autoDelay: 4000, // time before next slide (4000 = 4 seconds)
				easingCarousel: "swing", // slide effect
				easingDetails: "easeOutBack",
				durationCarousel: 800,
				durationDetails: 500
			});
			
		});

</script>

<!-- DC Media Slider Start -->
<div style="width:980px; margin:0 auto; padding:10px; position:relative;"> <!-- define slider container width (strict enforce) -->
<div class="media-carousel clearfix">

	<div class="panel">
		<div class="details_wrapper">
			
			<div class="details">
			
				<!-- Slide 1 -->
				<div class="detail">
					<h2><a href="#">Media Slider</a> supports:</h2> YouTube, Vimeo, Flash, Images, Inline Content & more!<br /><br />
					<a href="#" title="Read more" class="more">Read more</a>
				</div>
				
				<!-- Slide 2 -->
				<div class="detail">
					<h2><a href="#">Vimeo</a> Supported.</h2> This caption is completely customizable.<br /><br />
					<a href="#" title="Read more" class="more">Read more</a>
				</div>
				
				<!-- Slide 3 -->
				<div class="detail">
					<h2><a href="#">YouTube</a>: Supported.</h2> Embed videos in seconds!<br /><br />
					<a href="#" title="Read more" class="more">Read more</a>
				</div>
			
			</div><!-- /details -->
			
		</div><!-- /details_wrapper -->
		
		<div class="paging">
			<div id="numbers"></div>
			<a href="javascript:void(0);" class="previous" title="Previous" >Previous</a>
			<a href="javascript:void(0);" class="next" title="Next">Next</a>
		</div><!-- /paging -->
		
		<a href="javascript:void(0);" class="play" title="Turn on autoplay">Play</a>
		<a href="javascript:void(0);" class="pause" title="Turn off autoplay">Pause</a>
		
	</div><!-- /panel -->

	<div class="backgrounds">
		
		<div class="item item_1">
	    <img src="dreamcodes/sliders/media-slider/images/banner1.jpg" width="704" height="341" />
            </div><!-- /item -->
		
		<div class="item item_2">
			<iframe src="http://player.vimeo.com/video/4749536?color=ffffff" width="704" height="340" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

		</div><!-- /item -->
		
		<div class="item item_3">
			<iframe width="704" height="340" src="http://www.youtube.com/embed/FG0fTKAqZ5g?rel=0" frameborder="0" allowfullscreen></iframe>			
		</div><!-- /item -->
		
	</div><!-- /backgrounds -->

</div> <!-- /media-carousel -->
</div>		
<!-- DC Media Slider Ends -->
<div class="tsc_clear"></div> <!-- line break/clear line -->