body
{
/*  background: #1a1b1f;
  color: #7c7d82;
*/  
  font-size: 14px;
  font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
  background: url(../img/bg.png) repeat; 
  margin: 0 auto;
  color: #9a9ca3;
  position: relative;
  min-width: 1080px;
}


/* General Layout */

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

div.offscreen.right
{
  float: right;
}

div.offscreen.left
{
  float: left;
}

div.column1, div.column2, div.column3
{
  float: left;
  width: 280px;
  padding: 0 30px;
}
div.column1 { padding-left: 0; }
div.column2 { padding-right: 0; }

/*div > p { clear: left; }*/

/* Typography */

a, a:visited
{
  color: #9a9ca3;
  border-bottom: 1px solid #7c7d82;
  text-decoration: none;
}
a:hover
{
  color: #babcd3;
}

p 
{
  margin: 1em 0;
  line-height: 1.4em;
  font-family: "Helvetica Neue", "HelveticaNeue", Arial, Helvetica, sans-serif;
}

h2 
{
  font-size: 180%;
  margin-top: 2em;
  padding-top: .5em;
  color: #babcc3;
  letter-spacing: 1px;
}

h3 
{
  font-size: 110%;
  margin-top: 2em;
  margin-bottom: 0;
  color: #9a9ca3;
}

p strong 
{ 
  color: #9a9ca3; 
  text-transform: uppercase;
  font-size: 80%;
  letter-spacing: 2px;
}

/* Movie Block */

div.movie
{
  width: 854px;
  margin: 4em auto;
  margin-bottom: 12em;
}


/* Title Block */

div.header
{
  margin-top: 12em;
  background: url(../img/briefs-logo-backlit.png) 0 20px no-repeat;
}

h1#title
{
  margin-left: 330px;
  width: 447px;
  height: 102px;
  text-indent: -9999px;
  background: url(../img/title.png) 0 0 no-repeat;
}

div.header p.callout
{
  padding-top: 1em;
  padding-left: 330px;
  width: 500px;
  font: 24px/35px  'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  font-weight: 300;
  letter-spacing: 1px;
  text-shadow: #000 0 -1px 0;
  opacity: 0.8;
}

ul#navigation
{
  list-type: none;
  background: url(../img/navigation-button-bg.png) top left no-repeat;
  margin-left: 330px;
}

ul#navigation li
{
  display: inline-block;
  text-indent: 0;
  margin: 0;
}
ul#navigation li a
{
  display: block;
  height: 51px;
  border-bottom: 0;
  text-indent: -9999px;
}

li#video_nav a    { width: 107px; }
li#docs_nav a     { width: 100px; }
li#twitter_nav a  { width: 221px; }

div#purchase_button
{
  position: absolute;
  top: 281px;
  left: 10px;
  z-index: 100;
}

div#purchase_button > a
{
  display: block;
  width: 253px;
  height: 51px;
  background: url(../img/purchase-button.png) top left no-repeat;
  border-bottom: 0;
  text-indent: -9999px;
}

div#purchase_button p
{
  text-align: center;
  width: 253px;
  font: 12px/15px Times, "Times New Roman", Georgia, sans-serif;
  font-style: italic;
}

/* Sketch details */

div.idea
{
  margin-top: 9em;
  padding-top: 3em;
  padding-left: 30px;
  margin-right: 0;
  background: url(../img/idea-cards.png) 640px 0 no-repeat;
  height: 566px;
  width: 1080px;
}

/* Phone details */

div.phone, div.desktop, div.idea
{
  color: #7c7d82;
  text-shadow: #000 0 -1px 0;
  opacity: .90;
}

div.phone p,
div.desktop p,
div.idea p
{
  font: 13px/20px "Lucida Grande", Verdana, Arial, sans-serif;
}

div.phone h2,
div.desktop h2
{
  width: 620px;
}

div.phone
{
  margin-top: 8em;
  padding-left: 30px;
  background: url(../img/iphone-sketch.png) 340px 64px no-repeat;
  height: 851px;
  width: 1080px;
}

div.phone.thumb_browse { background-image: url(../img/browse-large.png); }
div.phone.thumb_play { background-image: url(../img/iphone-sketch.png); }
div.phone.thumb_share { background-image: url(../img/share-large.png); }

div.phone p.footnote
{
  font-size: 11px;
  margin-top: 0;
}

div.phone div.column2
{
  margin-left: 420px;
}

div.phone div.column2,
div.phone div.column1
{
  margin-top: 4em;
}

a.capped 
{
  display: inline-block;
  padding-left: 47px;
  background: url(../img/web-link-cap-left.png) 0 50% no-repeat;
  border-bottom: 0;
  font: 11px/17px "Lucida Grande", Verdana, Arial, sans-serif;
  color: #fff;
}

a.capped span
{
  background: url(../img/web-link-cap-right.png) 100% 50% no-repeat;
  display: inline-block;
  padding-top: 12px;
  height: 29px;
  padding-right: 12px;
}


div.thumbs_chooser
{
  margin-top: 2em;
  margin-left: -1em;
  background: url(../img/thumbs-bg.png) top left no-repeat;
  width: 307px;
  height: 195px;
  padding-left: 2px;
}

div.thumbs_chooser a
{
  display: inline-block;
  width: 80px;
  height: 148px;
  background: url(../img/thumb-build-large.png) 50% 50% no-repeat;
  border-bottom: 0;
  padding: 1.5em 18px 2em 0;
  text-indent: -9999px;
}

div.thumbs_chooser a#thumb_play  { background-image: url(../img/thumb-play-large.png); }
div.thumbs_chooser a#thumb_share { background-image: url(../img/thumb-bcast-large.png); }

/* Desktop Details */

div.desktop
{
  margin-top: 6em;
  padding-top: 2em;
  padding-left: 380px;
  background: url(../img/macbook-bs.png) -500px 0 no-repeat;
  height: 540px;
}

a#dl_starterkit
{
  margin-top: 1.5em;
  margin-left: -2em;
  display: inline-block;
  width: 296px;
  height: 75px;
  background: url(../img/starterkit-dl-bg.png) top left no-repeat;
  border-bottom: 0;
  font: 14px/18px "Lucida Grande", Verdana, Arial, sans-serif;
  padding-left: 54px;
  padding-top: 18px;
}

a#dl_starterkit span.title
{
  color: #fff;
  font-weight: bold;
  display: block;
}

a#dl_starterkit span.byline
{
  font-size: 12px;
  color: #fff;
  opacity: .80;
}

/* Footer */

div.footer { margin-top: 130px; margin-bottom: 30px; clear: both; letter-spacing: 0; }
div.footer p
{
  color: #555;
  font: 0.85em/1.3em "Lucida Grande", Verdana, Arial, sans-serif;
  text-align: center;
  letter-spacing: 0;
}
div.footer p a
{
  color: #666;
  text-decoration: none;
  border-bottom: 1px solid #444;
}
div.footer p em { display: block; }
div.footer p#more_copyright { color: #3a3a3a; font-size: 0.80em; }