/* 
CSS Reset
http://meyerweb.com/eric/tools/css/reset/
v1.0 | 20080212 
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*
Keyframes
*/

@-webkit-keyframes ball-move {
	from { 
		left: 0%; 
		-webkit-transform: translateX(-100%);
	}
	to { 
		left: 100%; 
		-webkit-transform: translateX(0%);
	}
}

@-webkit-keyframes ball-rotate {
	from { -webkit-transform: rotate(0deg); }
	to { -webkit-transform: rotate(360deg); }
}

@-webkit-keyframes cloud-move {
	from { 
		left: 100%; 
		-webkit-transform: translateX(0%);
	}
	to { 
		left: -50%; 
		-webkit-transform: translateX(-100%);
	}
}

@-webkit-keyframes shake {
	0% { -webkit-transform: translateX(5%); }
	25% { -webkit-transform: translateX(-5%); }
	50% { -webkit-transform: translateX(5%); }
	75% { -webkit-transform: translateX(-5%); }
	100% { -webkit-transform: translateX(0%); }
}

/*
Main Styles
*/

html {
	background: #253447 url(../img/bg-cogs.png) repeat center center;
}

body, .wf-loading body, .wf-inactive body {
	color: #fff;
	font-family: Verdana, sans-serif;
	font-size: 11px;
	line-height: 18px;
}

.wf-active body {
	font-family: "droid-sans-1","droid-sans-2", sans-serif;
	font-size: 13px;
}

a {
	color: #63bbf8;
	text-decoration: none;
	-webkit-transition: color .2s ease-in;
}
	a:hover, a:focus {
		color: #a6d9fc;
	}
	
h1 {
	font-size: 14px;
	font-weight: bold;
	line-height: 20px;
	padding-bottom: 16px;
	text-shadow: #201c19 0 3px 0, #201c19 0 4px 0, #201c19 -2px 2px 0, #201c19 2px 2px 0;
}

.wf-active h1 {
	font-size: 16px;
}

.fixed {
	margin:0 auto;
	position: relative;
	width: 960px;
}

.intro {
	background: #69b1e2 url(../img/bg-sky-grass.png) repeat-x center bottom;
	overflow: hidden;
	padding-bottom: 65px;
	position: relative;
}

.intro .fixed {
	background: url(../img/bg-sky-highlight.png) no-repeat center bottom;
	height: 455px;
}
	
.logo, .about, .app-store, .intro .coming-soon, .trailer {
	z-index: 2;
}
	
.logo {
	left: 22px;
	position: absolute;
	top: 44px;
}

.about {
	background: url(../img/bg-about.png) no-repeat;
	color: #555;
	font-size: 12px;
	height: 136px;
	left: 5px;
	line-height: 22px;
	padding: 23px 25px 0 25px;
	position: absolute;
	top: 139px;
	width: 330px;
	text-shadow: #ffffff 0 1px 0;
}

.wf-active .about {
	font-size: 14px;
}

.about a {
	color: #339be3;
}
.about a:hover, .about a:focus {
	color: #53b8fe;
}

.app-store, .intro .coming-soon {
	left: 95px;
	overflow: hidden;
	position: absolute;
	text-indent: -9999px;
	top: 302px;
}

.app-store {
	background: url(../img/sprite-button-app-store.png) no-repeat;
	display: block;
	height: 75px;
	width: 209px;
	-webkit-transition: -webkit-transform 0.3s ease-out;
}
.app-store:hover, .app-store:focus {
	background-position: -209px 0;
	-webkit-transform: rotate(-3deg);
}
.app-store:active {
	background-position: -418px 0;
}

.intro .coming-soon {
	background: url(../img/intro-coming-soon.png) no-repeat;
	height: 78px;
	margin-left: -10px;
	width: 213px;
}

.intro .coming-soon:hover {
	-webkit-animation-duration: 0.5s;
	-webkit-animation-iteration-count: 1;
    -webkit-animation-name: shake;
    -webkit-animation-timing-function: linear;
}
	
.trailer {
	background: url(../img/bg-trailer.png) no-repeat;
	height: 339px;
	padding: 7px 0 0 9px;
	position: absolute;
	right: 7px;
	top: 39px;
	width: 547px;
}

.trailer a {
	display: block;
	height: 328px;
	overflow: hidden;
	position: relative;
	width: 538px;
}

.trailer span {
	background: url(../img/sprite-button-play.png) no-repeat;
	display: block;
	height: 110px;
	left: 50%;
	margin: -55px 0 0 -54px;
	overflow: hidden;
	position: absolute;
	text-indent: -9999px;
	top: 50%;
	width: 109px;
}
.trailer a:hover span, .trailer a:focus span {
	background-position: -109px 0;
}
.trailer a:active span {
	background-position: -218px 0;
}
		
.ball {
	background: url(../img/shadow-small.png) no-repeat bottom center;
	bottom: 50px;
	height: 42px;
	padding-bottom: 2px;
	position: absolute;
	width: 42px;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: ball-move;
    -webkit-animation-timing-function: linear;
}

.ball div {
	background-repeat: no-repeat;
	background-position: center center;
	height: 42px;
	width: 42px;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: ball-rotate;
    -webkit-animation-timing-function: linear;
}
	
.ball-blue {
	background-image: url(../img/shadow-large.png);
	bottom: 28px;
	height: 87px;
	left: 22%;
	width: 87px;
	z-index: 2;
    -webkit-animation-duration: 20s;
}
.ball-blue div {
	background-image: url(../img/ball-blue.png);
	height: 87px;
	width: 87px;
	-webkit-animation-duration: 2s;
}

.ball-green { 
	left: 85%; 
	-webkit-animation-duration: 30s;
}
.ball-green div { 
	background-image: url(../img/ball-green.png); 
    -webkit-animation-duration: 2.2s;
}

.ball-gray { 
	left: 55%; 
	-webkit-animation-duration: 35s;
}
.ball-gray div { 
	background-image: url(../img/ball-gray.png); 
    -webkit-animation-duration: 2.4s;
}
	
.ball-orange { 
	left: 40%; 
	-webkit-animation-duration: 40s;
}
.ball-orange div { 
	background-image: url(../img/ball-orange.png); 
    -webkit-animation-duration: 2.6s;
}

.ball-purple { 
	left: 8%; 
	-webkit-animation-duration: 50s;
}
.ball-purple div { 
	background-image: url(../img/ball-purple.png); 
    -webkit-animation-duration: 3s;
}

.cloud {
	background-repeat: no-repeat;
	display: block;
	position: absolute;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: cloud-move;
    -webkit-animation-timing-function: linear;
}

.ie7 .cloud, .ie6 .cloud {
	z-index: -1;
}

.cloud-1 {
	background-image: url(../img/cloud-1.png);
	height: 61px;
	left: 8%;
	top: 20px;
	width: 176px;
	-webkit-animation-duration: 120s;
}
.cloud-2 {
	background-image: url(../img/cloud-2.png);
	height: 65px;
	left: -5%;
	top: 200px;
	width: 189px;
	-webkit-animation-duration: 180s;
}
.cloud-3 {
	background-image: url(../img/cloud-3.png);
	height: 61px;
	left: 90%;
	top: -10px;
	width: 176px;
	-webkit-animation-duration: 240s;
}
.cloud-4 {
	background-image: url(../img/cloud-4.png);
	height: 31px;
	left: 35%;
	top: 300px;
	width: 274px;
	-webkit-animation-duration: 100s;
}

.info {
	background: #534741 url(../img/bg-ground.png) repeat center top;
	height: 315px;
	padding-top: 20px;
}

.section {
	background: url(../img/bg-section.png) no-repeat;
	float: left;
	height: 236px;
	margin: 10px;
	padding: 20px;
	position: relative;
	width: 260px;
}

.section-gallery {
	height: 246px;
	padding: 15px;
	width: 270px;
}

.section-gallery h1 {
	padding-bottom: 8px;
	padding-left: 5px;
	padding-top: 5px;
}

.section-gallery li {
	float: left;
	padding: 5px;
}

.section-gallery a {
	background: #fff;
	display: block;
	height: 60px;
	overflow: hidden;
	width: 80px;
	-moz-box-shadow: #201c19 0 3px 0, #201c19 0 4px 0, #201c19 -2px 2px 0, #201c19 2px 2px 0;
	-webkit-box-shadow: #201c19 0 3px 0, #201c19 0 4px 0, #201c19 -2px 2px 0, #201c19 2px 2px 0;
	box-shadow: #201c19 0 3px 0, #201c19 0 4px 0, #201c19 -2px 2px 0, #201c19 2px 2px 0;
}

.section-gallery img {
	-webkit-transition: opacity .2s ease-out;
}

.section-gallery a:hover img, .section-gallery a:focus img {
	opacity: 0.5;
}

.section-features ul {
	background: url(../img/bg-feature-icons.png) no-repeat;
	margin-left: -15px;
	min-height: 63px;
	padding-left: 75px;
}

.section-features li {
	padding-bottom: 16px;
}

.section-cta {
	background-image: url(../img/bg-section-lower-third.png);
	height: 276px;
	overflow: hidden;
	padding: 0;
	width: 300px;
}

.ie6 .section-cta {
	margin-right: -10px;
}

.section-cta h1 {
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 20px;
}

.quotes {
	height: 120px;
	overflow: hidden;
	position: relative;
	width: 300px;
}

.quotes ul {
	height: 120px;
	width: 300px;
}

.quotes li {
	display: block;
	float: left;
	height: 120px;
	padding: 0 20px;
	width: 260px;
}

.quotes q:before, .quotes q:after {
	color: #fff;
	color: rgba(255,255,255,0.6);
}

.quotes q:before {
	content: '\201C';
	margin-left: -5px;
}
.quotes q:after {
	content: '\201D';
}

.author {
	font-size: 12px;
	font-weight: bold;
	line-height: 22px;
	padding-top: 3px;
}

.wf-active .author {
	font-size: 14px;
}

.score {
	font-size: 11px;
	font-weight: normal !important;
	text-transform: uppercase;
}

.wf-active .score {
	font-size: 13px;
}

.cta, .section-cta .coming-soon {
	bottom: 16px;
	display: block;
	left: 50%;
	margin-left: -134px;
	position: absolute;
}

.cta {
	background: url(../img/sprite-button-cta.png) no-repeat;
	height: 65px;
	overflow: hidden;
	text-indent: -9999px;
	width: 272px;
}

.cta:hover, .cta:focus {
	background-position: 0 -65px;
}

.cta:active {
	background-position: 0 -130px;
}

.section-cta .coming-soon {
	background: url(../img/icon.png) no-repeat;
	font-size: 14px;
	font-weight: bold;
	height: 58px;
	line-height: 22px;
	padding-top: 7px;
	padding-left: 75px;
	width: 197px;
}

.section-cta .coming-soon strong {
	color: #fff;
}

.byline {
	background: url(../img/bg-cave.png) repeat-x center top;
	background: url(../img/bg-cave.png) repeat-x center top, url(../img/bat-1.png) no-repeat 4% 20px, url(../img/bat-2.png) no-repeat 20% 8px, url(../img/bat-3.png) no-repeat 96% 20px;
	font-size: 12px;
	height: 160px;
	line-height: 24px;
}

.wf-active .byline {
	font-size: 14px;
}

.byline a {
	color: #a2bee4;
}

.byline a:hover, .byline a:focus, .byline strong {
	color: #ffffff;
}

.byline strong {
	font-weight: normal;
}

.backabit-logo, .byline ul {
	position: absolute;
}

.backabit-logo {
	background: url(../img/backabit-logo.png) no-repeat;
	display: block;
	height: 76px;
	left: 280px;
	overflow: hidden;
	text-indent: -9999px;
	top: 56px;
	width: 173px;
	-webkit-transition: -webkit-transform 0.25s;
}

.backabit-logo:hover, .backabit-logo:focus {
	-webkit-transform: rotate(-2deg);
	-moz-transform: rotate(-2deg);
	transform: rotate(-2deg);
}

.byline ul {
	background: url(../img/byline-rule.png) no-repeat left center;
	height: 49px;
	left: 480px;
	padding: 3px 0 0 25px;
	top: 74px;
}

.byline li a {
	background-position: 0 3px;
	background-repeat: no-repeat;
	display: inline-block;
	padding-left: 24px;
}
.twitter {
	background-image: url(../img/twitter.png);
}
.email {
	background-image: url(../img/email.png);
}

/*
JavaScript
*/

#quote-prev, #quote-next {
	background: url(../img/sprite-quote-nav.png) no-repeat;
	bottom: 20px;
	display: block;
	height: 33px;
	overflow: hidden;
	position: absolute;
	text-indent: -9999px;
	width: 36px;
}

#quote-next {
	background-position: -36px 0;
	right: 15px;
}
#quote-next:hover, #quote-next:focus {
	background-position: -36px -33px;
}
#quote-next:active {
	background-position: -36px -66px;
}

#quote-prev {
	right: 51px;
}
#quote-prev:hover, #quote-prev:focus {
	background-position: 0 -33px;
}
#quote-prev:active {
	background-position: 0 -66px;
}

.dot {
	background: url(../img/dot.png) no-repeat;
	bottom: 20px;
	height: 5px;
	left: 20px;
	position: absolute;
	width: 5px;
}