@import "reset.css";

body {font: 62.5%/1.4 'Lucida Grande', 'Calibri', Verdana, Arial, sans-serif; background: #fff url(../images/bg_body.png) repeat-x; color: #292e2e; text-align: center;}

a {font-style: inherit; line-height: inherit;}
a:link,
a:visited {color: #318cb1;}
a:hover,
a:active {}
em {font-weight: inherit; font-style: italic;}

h1 {height: 34px; margin: 0 0 10px; overflow: hidden; text-indent: -999em; background-position: top center; background-repeat: no-repeat;}
h2 {height: 41px; margin: 0; overflow: hidden; text-indent: -999em; background-position: top left; background-repeat: no-repeat;}
h3 {margin: 0 auto; font-weight: normal; font-size: 1.6em; color: #292e2e; width: 580px;}
h4 {height: 15px; margin: 30px 15px 7px; overflow: hidden; text-indent: -999em; background-position: top left; background-repeat: no-repeat;}

p,
ul,
ol,
dl {text-align: left; margin-bottom: 1em;}

object, embed {margin: 0; padding: 0; display: block;}

h6 a {width: 275px; height: 67px; display: block; overflow: hidden; text-indent: -999em;}
h6#logo {float: left; background: url(../images/iphone_logo.png) top left no-repeat;}

h1#letters {background-image: url(../images/header_letters.png);}
h1#numbers {background-image: url(../images/header_numbers.png);}
h1#alphabet-air {background-image: url(../images/header_alphabet-air.png);}

h2#about-letters {margin-bottom: 30px; background-image: url(../images/header_about.png);}
h2#about-numbers {margin-bottom: 30px; background-image: url(../images/header_about-numbers.png);}
h2#about-alphabet-air {margin-bottom: 30px; background-image: url(../images/header_about-alphabet-air.png);}
h2#buy {background-image: url(../images/header_buy.png);}
h2#buy2 {background-image: url(../images/header_buy2.png);}
h2#coming-soon {background-image: url(../images/header_coming-soon.png);}

#meta h2#buy a {display: block; width: 310px; height: 41px;}
#meta h2#buy2 a {display: block; width: 310px; height: 41px;}

h4#support {background-image: url(../images/header_support.png);}
h4#system {background-image: url(../images/header_system.png);}
h4#about-tl {margin-top: 0; height: 17px; background-image: url(../images/header_about_tl.png);}

#header {margin: 0 auto; padding-top: 28px; width: 730px;}
#header ul#app-nav {width: 279px; float: right; padding-top: 11px; margin-bottom: 0; list-style: none; background: url('../images/bg_nav.png') top left no-repeat;}
#header ul#app-nav li {width: 93px; text-align: center; float: left; background: url('../images/bg_nav-li.png') top left repeat-x;}
#header ul#app-nav li p {text-align: center; padding-top: 5px;}
#header ul#app-nav li a {color: #666; text-decoration: none;}
#header ul#app-nav li.current a {color: #54ab74;}
#header ul#app-nav li.first {width: 78px; padding-left: 15px;}
#header ul#app-nav li.last {width: 79px; padding-right: 14px;}

#intro {margin: 0 auto; padding: 40px 0 25px; width: 730px; text-align: center;}

#feature {margin: 50px auto 0 auto; padding: 0; position: relative; width: 830px; height: 353px; background-image: url(../images/bg_feature.png)}
#feature #movie-container {width: 378px; height: 252px; margin: 0; padding: 0; position: absolute; top: 30px; left: 302px; font-size: 1px; line-height: 0;}
#feature #movie-container object {*display: none;}
#feature #movie-container object#movie {display: block;}
#feature a {width: 20px; height: 20px; display: block; position: absolute; right: 30px; overflow: hidden; background: url(../images/button_controls.png) no-repeat; text-indent: -999em;}
#feature a#play {top: 208px; background-position: -20px 0;}
#feature a#play.paused {background-position: -20px -20px;}
#feature a#mute {top: 232px; background-position: 0 0;}
#feature a#mute.muted {background-position: 0 -20px;}

#content {margin: 0 auto; padding: 0 0 0; width: 830px; width: 730px; font-size:1.2em; line-height: 1.5em;}
#content #about {width: 404px; float: left; padding-right: 16px;}
#content #meta {width: 310px; float: left;}
#content #meta ul {margin-bottom: 2em;}
#content p {padding: 0 15px 0;}
#content ul {list-style: none; padding-left: 15px; margin-bottom: 1em;}
#content ul.square li {padding-left: 20px; margin-bottom: .33em; background: url(../images/bullet.png) no-repeat 9px .6em;}

#content #inset {padding: 15px; height: auto; position: relative; background: url(../images/bg_about_tl.png) no-repeat;}
#content #inset h4#about-tl {margin: 0 0 7px;}
#content #inset p {padding: 0 0 .5em;}

#footer {clear: both; margin: 0 auto; padding: 28px 0 28px; width: 730px; border-top: 1px solid #f1f1f2;}
#footer p {float: left; color: #818484; margin-bottom: 0; line-height: 48px;}
#footer ul {float: right;}
#footer ul li {float: left;}
#footer ul li a {color: #006482; text-decoration: none;}

#footer ul li#twitter {padding-left: 31px; margin-right: 18px; background-image: url(../images/twitter.png); background-repeat: no-repeat; background-position: 0 0;}
#footer ul li#rss {padding-left: 28px; background-image: url(../images/rss.png); background-repeat: no-repeat; background-position: 0px 7px;}

#header:after, #header ul:after, #header ul li:after,
#footer p:after, #footer ul:after,
#footer ul li:after, #footer ul li img:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}