#phoneCarousel{
	/*	This is the carousel section, it
		contains the stage and the arrows */
	height:270px;
	margin:0px auto 0px;
	position:relative;
	width:420px;
        /*border: solid 1px green;*/
}


#phoneCarousel .arrow{
	/* The two arrows */
	width:39px;
	height:39px;
	background:url('../../images/arrows.png') no-repeat;
	position:absolute;
	top:50%;
	margin-top:-22px;
	left:0;
	cursor:pointer;
}

#phoneCarousel .next{
	/* Individual styles for the next icon */
	background-position:right top;
	left:auto;
	right:0;
}

/* Hover styles */

#phoneCarousel .arrow:hover{
	background-position:left bottom;
}

#phoneCarousel .next:hover{
	background-position:right bottom;
}

#stage{
	/* The stage contains the animated phone images */
	left:50px;
	/*margin-left:-350px;*/
	position:absolute;
	width:320px;
	height:100%;
        /*border: solid 1px red;*/
}

#stage img{
	/* Hiding all the images by default */
	display:none;
        width: 180px;
        cursor: pointer;
        border: solid 1px #ffffff;
        box-shadow: 0 0 2px #000000;
        /*height: 220px;*/
}
#stage img:hover{
        box-shadow: 0 0 4px #000000;
}

#stage .default{
	/*	This class is applied only to the iphone img by default
		and it is the only one visible if JS is disabled */
	display:block;
	left:50%;
	margin-left:-135px;
	position:absolute;
}

#stage .animationReady{
	/* This class is assigned to the images on load */
	display:block;
	position:absolute;
	top:0;
	left:0;
}