﻿/* iPhone Stylesheet */


h1
{
	background:url(../../iPhone/images/iPhoneHeadline.gif) no-repeat;
	display:block;
	text-indent:-2000px;
	width:317px;
	height:15px;
	/*margin-left:15px;
	margin-bottom:10px;*/
}

a
{
	outline:none;
}

#iPhoneWrapper .left, #iPhoneWrapper .right, #iPhoneWrapper #iPhoneExamples, #iPhoneWrapper #buildYourPizza, #iPhoneWrapper #shakeUpWings, #iPhoneWrapper #playRacer
{
	float:left;
}

#iPhoneWrapper .left
{
	width:449px;
	margin-left:10px;
}

#iPhoneWrapper .left p
{
	margin-left:15px;
}

#iPhoneWrapper .left ul
{
	margin-left:48px;
}

#iPhoneWrapper .left li
{
	list-style-type:disc;
	line-height:22px;
	font-weight:bold;
}

#iPhoneWrapper #helpfulTips
{
	background:#fefaee;
	width:438px;
	overflow:hidden;
	margin-left:15px;
	margin-top:15px;
}

#iPhoneWrapper #helpfulTips h3
{
	background:url(../../iphone/images/helpfulTips.gif) no-repeat;
	width:438px;
	height:27px;
	text-indent:-2000px;
	margin-top:0;
	margin-bottom:15px;
	display:block;
}

#iPhoneWrapper h3.download
{
	color:#f82323; 
	margin:15px 0 0 15px
}

#iPhoneWrapper h3.download a
{
	color:#f82323; 
	font-size:12px; 
	font-weight:normal
}

#iPhoneWrapper #helpfulTips ul
{
	width:390px;
	margin-left:0;
}

#iPhoneWrapper #helpfulTips span
{
	color:#752325;
	font-weight:bold;
}

#iPhoneWrapper #helpfulTips li
{
	line-height:15px;
	margin-bottom:10px;
	margin-left:35px;
}

#iPhoneWrapper #helpfulTips p
{
	margin-left:15px;
	padding:0;
	font-size:10px;
}

#iPhoneWrapper #helpfulTips p a
{
	font-size:10px;
}


#iPhoneWrapper .right
{
	width:408px;
	padding:28px 0 0 10px;
	_padding-left:0;
	/*margin-left:40px;*/
}

#iPhoneWrapper #iPhoneTutorial
{
	margin-left:10px;
}

#iPhoneWrapper #readyToDownload
{
    margin-top:20px;
    margin-left:5px;
    position:relative;
    height:106px;
}

#iPhoneWrapper #readyToDownload p
{
	position:absolute;
	bottom:-5px;
	right:105px;
	font-size:10px;
    text-align:left;
}

#iPhoneWrapper .right p
{
	font-size:10px;	
	margin-top:5px;
	text-align:center;
}

#iPhoneWrapper .right span
{
	color:#752325;
}

#iPhoneWrapper .right a
{
	font-size:11px;
}

#iPhoneWrapper #iPhoneExamples
{
	margin-top:25px;
	float:left;
	width:933px;
	overflow:hidden;
}

#iPhoneWrapper #buildYourPizza, #iPhoneWrapper #shakeUpWings, #iPhoneWrapper #playRacer
{
	/*height:320px;*/
	height:260px;
	padding-top:90px;
	padding-left:0;
}

#iPhoneWrapper #buildYourPizza
{
	background:url(../../iPhone/images/buildYourPizza.gif) no-repeat;
	width:454px;
	margin-left:5px
}

ul#buildYourPizzaCarousel, ul#shakeUpWingsCarousel, ul#playRacerCarousel
{
	_width:2800px !important;
}

#iPhoneWrapper #shakeUpWings
{
	background:url(../../iPhone/images/shakeUpYourWings.gif) no-repeat;
	width:454px;
	margin-left:15px;
}

#iPhoneWrapper #playRacer
{
	background:url(../../iPhone/images/playHutRacer.gif) no-repeat;
	width:278px;
	padding-top:55px;
	height:280px;
}


/******************jCarousel CSS ***************************/
/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container {
    position: relative;
    width:195px;
    height:240px;
    left:15px;
}

.jcarousel-clip {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
    width:210px;
}

.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.jcarousel-list li,
.jcarousel-item {
    float: left;
    list-style: none;
    width:195px;
    
    /* We set the width/height explicitly. No width/height causes infinite loops. */
}

.jcarousel-item h3
{
	font-size:15px;
	font-weight:bold;
	text-align:center;
	width:140px;
	margin-top:12px;
	margin-left:30px;
	display:block;
}

/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
    z-index: 3;
    background:url(../../iPhone/images/rightArrow.gif) no-repeat;
    width:28px;
    height:28px;
    position:absolute;
    bottom:40px;
    right:-20px;
	_right:-10px;
    display: none;
    text-indent:-2000px;
    cursor:pointer;
}

.jcarousel-prev {
    z-index: 3;
    background:url(../../iPhone/images/leftArrow.gif) no-repeat;
    width:28px;
    height:28px;
    text-indent:-2150px;
    position:absolute;
    bottom:40px;
    left:-10px;
    display: none;
    cursor:pointer;
}

.jcarousel-next-disabled, .jcarousel-prev-disabled
{
	background-position:0 56px;
	cursor:default;
}

#playRacer .jcarousel-next
{
	right:-25px;
	_right:-20px;
}

#playRacer .jcarousel-prev, #playRacer .jcarousel-next
{
	bottom:5px;
	/*_bottom:25px;*/
}

#buildYourPizza .jcarousel-next
{
	right:-15px;
}