
#phoneCarousel{
	/*	This is the carousel section, it
		contains the stage and the arrows */
	height:390px;
	margin:90px auto 120px;
	position:relative;
	width:800px;
}


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

#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:50%;
	margin-left:-350px;
	position:absolute;
	width:700px;
	height:100%;
}

#stage img{
	/* Hiding all the images by default */
	display:none;
}

#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;
}

.text{	margin-top:70px;width:700px;}

.text p,
.text h3{
	padding-bottom:15px;
	line-height:1.4;
	text-align:justify;
}

.text h3{	font-size:30px;}
.text p{	font-size:20px;}

.thumb{	float:left;margin-right:40px;}

.availableAppStore{float:right;}


/* The styles below are only necessary for the purposes of Tzine's demo */

h2{
	font-size:22px;
	font-style:italic;
	font-weight:normal;
	position:absolute;
	right:0;
	top:52px;
}

h2 a{
	color:#666666;
}

#thanks{
	color:#aaa;
	font-size:12px;
	text-align:center;
	padding:50px;
}
#thanks a{ color: #888;}

a, a:visited {
	text-decoration:none;
	outline:none;
}

a:hover{	text-decoration:underline;}
a img{	border:none;}
