/* Top Content
------------------------------------------------------------ */

#main-content {
    position: relative;
    background: #77a0bf;
    background: -moz-linear-gradient(top, #21347f 0%, #77a0bf 60%, #cddbe7 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #21347f), color-stop(60%, #77a0bf), color-stop(100%, #cddbe7));
    background: -webkit-linear-gradient(top, #21347f 0%, #77a0bf 60%, #cddbe7 100%);
    background: -o-linear-gradient(top, #21347f 0%, #77a0bf 60%, #cddbe7 100%);
    background: -ms-linear-gradient(top, #21347f 0%, #77a0bf 60%, #cddbe7 100%);
    background: linear-gradient(top, #21347f 0%, #77a0bf 60%, #cddbe7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#21347f', endColorstr='#77a0bf', GradientType=0);
    background-repeat: no-repeat;
    padding: 50px 0 0 0;
}

/* iPhone Preview
------------------------------ */

#iphone {
    position: relative;
    background-repeat: no-repeat;
    float: left;
    width: 330px;
    height: 630px;
    perspective: 600px;
    overflow: hidden;
    cursor: pointer;
}

#video-button {
	width: 83px;
	height: 86px;
	background-repeat: no-repeat;
	background-size: 83px 180px;
	background-position: 0 0;
	position: absolute;
	top: 260px;
	left: 127px;
	z-index: 9999;
	-webkit-transition: opacity 0.2s ease-in-out;
}

#iphone:hover #video-button {
	background-position: 0 -95px;
}

#iphone #iphone-glare {
    position: absolute;
    background-repeat: no-repeat;
    top: 0;
    left: 0;
    width: 330px;
    height: 675px;
    z-index: 99;
}

#iphone video {
    position: absolute;
    top: 115px;
    left: 27px;
    z-index: 98;
}

#iphone img {
    display: block;
    position: absolute;
    top: 114px;
    left: 27px;
}

/* App Details
------------------------------ */

#details {
    float: right;
    margin: 200px 0 0 0;
    width: 350px;
}

/* Logo */

#details h1#logo a {
    display: block;
    background-repeat: no-repeat;
    background-size: 374px 54px;
    width: 374px;
    height: 54px;
    text-indent: -9999px;
    margin: 0 0 8px -1px; /* Compensate alignment for 5px of drop shadow */
}

/* Tagline */

#details h2#tagline {
    display: block;
    background-repeat: no-repeat;
    background-position: right;
    background-size: 305px 36px;
    width: 351px;
    height: 36px;
    text-indent: -9999px;
    margin: 0 0 40px 0;
}

/* Shut Down Notice */
#shutdown_notice {
	display: block;
    color: #fff;
	font-size:20px;
	font-weight: bold;
	margin: 0 auto;
	text-decoration: underline;
	text-align: center;
}

/* App Store Button */

#app-store-button-iphone {
	display: none;
}

a.app-store-button {
    display: block;
    background-color: #ff5b00;
    background-image: -o-linear-gradient(top, #ff7800, #ff5b00);
    background-image: -moz-linear-gradient(top, #ff7800, #ff5b00);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff7800), color-stop(1.0, #ff5b00));
    height: 70px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 30px;
    border: 1px solid rgba(0, 0, 0, 0.4);
    border-bottom: none;
    -o-border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -o-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 -1px rgba(0, 0, 0, 0.2), inset 0 -4px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 30, 0.6);
    -moz-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 -1px rgba(0, 0, 0, 0.2), inset 0 -4px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 30, 0.6);
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 -1px rgba(0, 0, 0, 0.2), inset 0 -4px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 30, 0.6);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), inset 0 -1px rgba(0, 0, 0, 0.2), inset 0 -4px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 30, 0.6);
}

a.app-store-button img {
    display: block;
    -moz-user-select: none;
    -webkit-user-select: none;
}

a.app-store-button:hover {
    background-image: -o-linear-gradient(top, #ff8111, #ff6611);
    background-image: -moz-linear-gradient(top, #ff8111, #ff6611);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff8111), color-stop(1.0, #ff6611));
}

a.app-store-button:active {
    position: relative;
    top: 4px;
    height: 66px;
    background-image: -o-linear-gradient(top, #ff5b00, #ff7800);
    background-image: -moz-linear-gradient(top, #ff5b00, #ff7800);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff5b00), color-stop(1.0, #ff7800));
    border-color: #702700;
    -o-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.8), 0 1px rgba(255, 255, 255, 0.3);
    -moz-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.8), 0 1px rgba(255, 255, 255, 0.3);
    -webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.8), 0 1px rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.8), 0 1px rgba(255, 255, 255, 0.3);
}

/* Bottom Content
------------------------------------------------------------ */

#sub-content {
    margin: 20px 0 0 0;
}

/* Features
------------------------------ */

#sub-content .feature {
    width: 230px;
    float: left;
    margin: 0 40px 0 0;
    text-align: justify;
}

#sub-content .feature:last-child {
    margin-right: 0;
}

/* Clouds Overlay
------------------------------------------------------------ */

.clouds-foreground {
    position: absolute;
    bottom: 0;
    background-repeat: repeat-x;
    background-position: 0 100%;
    width: 100%;
    height: 200px;
    z-index: 999;
}

.clouds-midground {
    position: absolute;
    bottom: 0;
    background-repeat: repeat-x;
    background-position: 0 100%;
    width: 100%;
    height: 200px;
    z-index: 998;
}

.clouds-background {
    background-repeat: repeat-x;
    background-position: 0 100%;
}

/* Plane Contrail
------------------------------------------------------------ */

.plane {
    background-repeat: no-repeat;
    background-position: -1012px 15%;
}