/* regole di base */
#sequence{
	border: 0px;
	margin: 0px auto;
	position: relative;
	width: 746px;
}

	#sequence ul,
	#sequence li {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
	
	#sequence li > *{
		position: absolute;
	}
	
/* stile dei frame contenitori*/
.frame {
	background: #FFF;
	color: #333;
	padding: 0px;
	top: 0;
	height: 490px;
	width: 746px;
	
	/* stato iniziale */
	left: 0px; 
	opacity: 0;
	filter: alpha(opacity=00); /* IE6-IE8 */
	
	-moz-transition: all 1s; 
	-webkit-transition: all 1s;  
	-ms-transition: all 1s;  
	-o-transition: all 1s;  
	transition: all 1s;  
}

/* stato intermedio */
.frame.animate-in {
	left: 0;
	opacity: 1;
	filter: alpha(opacity=100); /* IE6-IE8 */
}

/* stato finale */
.frame.animate-out {
	left: 0px;
	opacity: 0;
	filter: alpha(opacity=00); /* IE6-IE8 */
}


	/* testo aggiuntivo */
	.claim {
		color: #FFF;
		font: normal 24px Lato, sans-serif, Arial;
		top: -200px;
		left: 20px;
		opacity: 0;
		filter: alpha(opacity=00); /* IE6-IE8 */
		text-shadow: 2px 2px 2px #333333;
		-moz-transition: all 1s; 
		-webkit-transition: all 1s;  
		-ms-transition: all 1s;  
		-o-transition: all 1s;  
		transition: all 1s; 
	}
		.claim.animate-in {
			top: 500px;
			opacity: 1;
			filter: alpha(opacity=100); /* IE6-IE8 */
	
		}

		.claim.animate-out {
			top: 736px;
			opacity: 0;
			filter: alpha(opacity=00); /* IE6-IE8 */
	
		}
		
		
	/* controlli */
	.btn,
	.btn:visited {

		color: #FFF;
		display: block;
		left: 0;
		outline: 0;
		padding: 0px;
		position: absolute;
		top: 0px;
		height: 489px;
		width: 746px;
		z-index: 10;
	}
	.btn.next {
		left: auto;
		right: 0;
	}
	
	
	/* navigazione */
.sequence-navigator {
		display: block;
		left: -1;
		padding: 0px;
		position: absolute;
		top: 494;

		z-index: 10;
		
	}
.sequence-navigator a,
.sequence-navigator a:visited {
		background: #FFF;
		color: #999;
		margin-left: -5px;
		outline: 0;
		padding: 5px;
	}
.sequence-navigator a.active {
		color: #FFF