/* Iphone app - splash panel for the homepage */

/* Remove the right padding from .content - Alex, change this if it breaks anything else */

#main .content {
	padding-right:0;
}

/* Reset within the ID'd container */
#iPhoneSplash *{
	margin:0;
	padding:0;
}

/*----------------------------------------- 
	Top level container
  -----------------------------------------*/
  
#iPhoneSplash {
	position:relative;
	height:425px;
	margin-top:-40px; /*There's some weirdness going on with the displayed list item taking up space. This fixes it */
	background:transparent url(../images/iphone/bkg_iPhoneSplash.jpg) repeat-x top left;
	overflow:hidden;
}

#iPhoneSplash .liner,
#iPhoneSplash ol#splashContent{
	width:100%;
	height:100%;
}

#iPhoneSplash .liner {background:transparent url(../images/iphone/bkg_iPhoneSplash_endCap_left.jpg) no-repeat top left;}
#iPhoneSplash ol#splashContent {background:transparent url(../images/iphone/bkg_iPhoneSplash_endCap_right.jpg) no-repeat top right;}

/*----------------------------------------- 
	The content panels
  -----------------------------------------*/


#iPhoneSplash ol#splashContent {
	position:absolute;
	list-style-type:none;
}

#iPhoneSplash ol#splashContent li{display:none;}
#iPhoneSplash ol#splashContent li.current{display:block;}

#iPhoneSplash  ol#splashContent li h3 {
	position:relative;
	top:253px;
	height:48px;
	z-index:10;
	margin-left:50px;
	color:#FFF;
	font-weight:normal;
	font-size:28px;
	letter-spacing:-0.06em;
	background:transparent url(../images/iphone/bkg_splashContent_heading.jpg) repeat-x;
	line-height:42px;
	text-shadow: 0 1px 2px #000;
}

#iPhoneSplash  ol#splashContent h3 a {
	display:block;
	height:46px;
	padding:2px 0 0 140px;
	background:transparent url(../images/iphone/bkg_splashContent_heading_shadow.jpg) no-repeat left top;
}

#iPhoneSplash  ol#splashContent h3 a:link,
#iPhoneSplash  ol#splashContent h3 a:visited{
	color:#FFF;
}

#iPhoneSplash  ol#splashContent h3 a:hover{
	text-decoration:none;
	color:#B3E658;
}

#iPhoneSplash #splashContent li img{
	z-index:5;
	position:absolute;
	left:80%;
	margin:0;
}

#iPhoneSplash #splashContent li img.feature{
	z-index:15;
	left:0;
}

#iPhoneSplash #splashContent img.first{margin-left:-62%;}
#iPhoneSplash #splashContent img.second{margin-left:-42%;}
#iPhoneSplash #splashContent img.third{margin-left:-22%;}
#iPhoneSplash #splashContent img.fourth{margin-left:3.1%;}
#iPhoneSplash #splashContent img.fifth{margin-left:3.1%;}

#iPhoneSplash #splashContent li .description {
	position:relative;
	padding-left:190px;
	padding-top:56px;
	max-width:400px;
	z-index:20;
}

#iPhoneSplash #splashContent li .description h4{
	font-size:15px;
	margin-bottom:0.5em;
	color:#739439;
}

#iPhoneSplash #splashContent li .description p{
	margin-bottom:1em;
	line-height:1.4;
	font-size:12px;
}

#iPhoneSplash #splashContent li .description a{
	margin-bottom:1em;
	line-height:1.2;
	font-size:13px;
	color:#000;
}

/*----------------------------------------- 
	Adjust the stack for specific slides 
  -----------------------------------------*/

/* For the rear-most image, we display a background of alpha'd spots with some parallax style positioning*/
#iPhoneSplash #introduction img.second,
#iPhoneSplash #introduction img.second {
	z-index:4;
} 

#iPhoneSplash #introduction > img.second {
	padding:0 40%;
	margin-left:-82%;
	background:transparent url(../images/iphone/bkg_spots.png) repeat-x -120% 50%;
}

/* It's personalised! */
#iPhoneSplash #personalised img.first{
	margin-left:0;
	left:30px;
	background:transparent url(../images/iphone/bkg_spots.png) repeat-x -120% 50%;
}

#iPhoneSplash #personalised .description{padding-left:220px!important;}

/* It's mobile!
	(use #iPhoneSplash #mobile) 
 */
 
 #iPhoneSplash #mobile img.overlay {
	z-index:16;
	left:0;
	margin:0;
}

/* It's fast! 
	(use #iPhoneSplash #fast)
*/

#iPhoneSplash #fast img.overlay {
	z-index:16;
	left:0;
	margin:0;
}

/* Go get 'em! 
	(use #iPhoneSplash #get)
*/

#iPhoneSplash #get img#coins{
	margin-top:182px;
	margin-left:130px;
}

#iPhoneSplash #get h3{
	text-indent:64px;
}

#iPhoneSplash #get .storeLink,
#iPhoneSplash #get .storeLink a{
	background-color:transparent;
	background-image:url(../images/iphone/bkg_splashNav.png);
	background-repeat:no-repeat;
}

#iPhoneSplash #get .storeLink {
	background-position:100% 0;
	padding-right:10px;
}
#iPhoneSplash #get .storeLink a{
	display:block;
	height:20px;
	margin-left:-10px;
	padding:4px 10px 0 16px;
	background-position:0 0;
	color:#0066CC;
}

#iPhoneSplash #get .storeLink {
	font-weight:bold;
	text-align:right;
	float:right;
	height:24px;
}

#iPhoneSplash #get .storeLink:hover {background-position:100% -27px;}
#iPhoneSplash #get .storeLink a:hover{background-position:0 -27px;color:#FFF;text-decoration:none;text-shadow: 0 1px 2px #6E9E3A;}

/*----------------------------------------- 
	The navigation list
  -----------------------------------------*/

#iPhoneSplash #splashNav,
#iPhoneSplash #splashNav ol {
	background-color:transparent;
	background-image:url(../images/iphone/bkg_splashNav.png);
	background-repeat:no-repeat;
	background-position:top left;
}

#iPhoneSplash #splashNav {
	position:absolute;
	bottom:24px;
	height:24px;
	padding:0 0 0 10px;
	margin:0 5%;
	width:90%;
	z-index:50;
} 

#iPhoneSplash #splashNav ol {
	list-style:none;
	height:24px;
	margin:0 -10px 0 0;
	background-position:top right;
}

#iPhoneSplash #splashNav li,
#iPhoneSplash #splashNav h3{
	float:left;
	height:24px;
	margin:0;
	line-height:auto;
}

#iPhoneSplash #splashNav li{
	background:transparent url(../images/iphone/bkg_splashNav_li.jpg) no-repeat center right;
}

#iPhoneSplash #splashNav a{
	display:block;
	height:12px;
	margin-right:2px;
	padding:6px 15px;
	font-weight:bold;
	font-size:13px;
	line-height:12px!important;
	color:#3f3f3f;
	white-space:no-wrap;
	cursor:pointer;
}


#iPhoneSplash #splashNav .current a,
#iPhoneSplash #splashNav .current a:hover{
	background:transparent url(../images/iphone/bkg_splashNav.png) no-repeat -400px -27px;
	color:#FFF;
	text-shadow: 0 1px 2px #6E9E3A;
	text-decoration:none;
}

#iPhoneSplash #splashNav li.first {
	margin-left:-10px;
}

#iPhoneSplash #splashNav li.first a {background-position:0 -27px;}
#iPhoneSplash #splashNav li.first a:hover {background-position:0 -55px;}

#iPhoneSplash #splashNav a:hover{
	text-decoration:none;
	background:transparent url(../images/iphone/bkg_splashNav.png) no-repeat -400px -55px;
}