/* ------------------------------------------------------------------------
	IMPLEMENTATION
	
	// Single carrousel
	// Look & Feel on CSS 
	
	<script type="text/javascript">
		stepcarousel.setup({
			galleryid: 'Galeria', //id of carousel DIV
			beltclass: 'beltGF', //class of inner "belt" DIV containing all the panel DIVs
			panelclass: 'panelGF', //class of panel DIVs each holding content
			autostep: {enable:true, moveby:1, pause:3000},
			panelbehavior: {speed:500, wraparound:false, persist:true},
			defaultbuttons: {enable: true, moveby: 1, leftnav: ['buttB.png', -5, 80], rightnav: ['buttF.png', -25, 80]},
			statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
			contenttype: ['inline'] //content setting ['inline'] or ['external', 'path_to_external_file']
		});
	</script>
	<div id="Galeria" class="stepcarouselGF">
		<div class="beltGF">
			<div class="panelGF">
				CONTENIDO 1
			</div>
			<div class="panelGF">
				CONTENIDO 2
			</div>
			<div class="panelGF">
				CONTENIDO 3
			</div>
			<div class="panelGF">
				<div style="background-color: red;">
					CONTENIDO 4
				</div>
			</div>
			<div class="panelGF">
				CONTENIDO 5
			</div>
		</div>
	</div>
	
	SITE REFERENCE	
		http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm
	
	
	
------------------------------------------------------------------------- */
.stepcarouselGF{
	position: relative; /*leave this value alone*/
	overflow: scroll; /*leave this value alone*/
	width: 400px; /*Width of Carousel Viewer itself*/
	height: 250px; /*Height should enough to fit largest content's height*/
	margin: 0 auto;
	z-index: 40;
	border: 5px solid #000000;
	background-color:#f2f2f2;
}
.stepcarouselGF .beltGF{
	position: absolute; /*leave this value alone*/
	left: 0;
	top: 0;
	z-index: -1px;
}

.stepcarouselGF .panelGF{
	float: left; /*leave this value alone*/
	overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
	margin: 10px; /*margin around each panel*/
	width: 380px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
	height: 230px; /*Height should enough to fit largest content's height*/
	text-align:center;
	z-index: -1px;
	background-color: purple;
}