/* Reset styles (see http://meyerweb.com/eric/tools/css/reset/index.html) */
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;
}
sub {
   vertical-align:sub;
   font-size:85%;
}
sup {
   vertical-align:super;
   font-size:85%;
}
small {
   font-size:85%;
}

p, h2 {
   padding-bottom:1.5em;
}

h2 {
   font-size:120%;
}

html, body {
   height:100%;
}

body {
   font-family:'Expletus Sans', arial, serif;
   text-shadow:1px 1px 3px black;
   background-image:url(background.png);
   background-color:black;
   color:white;
}

h1, h2 {
   font-family:'Neuton', arial, serif;
   font-weight:500;
}

.header {
   position:absolute;
   left:0;
   right:0;
   height:130px;
   background-image:url(headerbackground.png);
}

.header .logo {
   position:absolute;
   left:330px;
   top:20px;
   width:64px;
}
.header h1 {
   position:absolute;
   font-size:40px;
   left:404px;
   top:24px;
}

.header .nav {
   position:absolute;
   font-size:10px;
   right:9px;
   top:9px;
}
.header .nav a {
   color:#ccf;
}

.aside {
   position:absolute;
   top:120px;
   left:0px;
}

.aside .iPhone {
   cursor:pointer;
   position:absolute;
   z-index:10;
   top:40px;
   left:58px;
}

.aside .badge {
   cursor:pointer;
   position:absolute;
   z-index:20;
   top:40px;
   left:129px;
}
.aside .badge img {
   width:147px;
   height:147px;
}

.aside .screenshots {
   z-index:1;
   position:absolute;
   left:74px;
   top:107px;
   width:184px;
   height:348px;
   overflow:hidden;
}

.aside .screenshots img {
   position:absolute;
   left:196px;
   top:0px;
   width:184px;
}
.aside .screenshots img:first-child {
   left:0px;
}

.articlewrapper {
   min-height:100%;
}

.article {
   padding:150px 9px 2.1em 330px;
   font-size:14px;
   line-height:140%;
}

.article .appStore + h2{
   padding-top:40px;
}

.article .appStore,
.article .figure {
   float:right;
   border-left:3px transparent solid;
   border-right:3px transparent solid;
}
.article .figure img {
   width:185px;
   height:253px;
}

.article .appStore img {
   height:70px;
}

.footer a {
   color:#ccf;
   text-decoration:none;
}
.footer a:focus,
.footer a:hover {
   text-decoration:underline;
}
.footer {
   position:relative;
   top:-2.1em;
   height:0px;
   font-size:75%;
}
.footer .right {
   position:absolute;
   right:9px;
}
.footer .left {
   position:absolute;
   left:9px;
}

@media print {
   body {
      text-shadow:none;
      color:black;
      background-image:none;
      background-color:white;
   }
   .header {
      background-image:none;
   }
   .noPrint {
      display:none;
   }
   .aside {
      top:70px;
   }
   .article {
      padding-top:100px;
   }
   .footer a {
      color:#558;
   }
}