html, body, body div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

blockquote, q { 
	quotes: none; 
	margin-left: -2px;
	padding-left: 80px;
	color: #595959;
	font-size: 13px;
	font-family: Arial, Verdana, sans-serif;
	letter-spacing: 0;
	line-height: 20px;
}

ul, ol{
    
    padding-left:85px;
}

li {
	margin-left: -2px;
	padding-left: 10px;
	color: #595959;
	font-size: 13px;
	font-family: Arial, Verdana, sans-serif;
	letter-spacing: 0;
	line-height: 20px;
}

blockquote:before, blockquote:after,
q:before, q:after { content: ""; content: none; }

ins { background-color: #ff9; color: #000; text-decoration: none; }

mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

/*hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }*/

hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:1px;margin:0 0 17px;border:none;}

hr.space {background:#fff;color:#fff;visibility:hidden;}



/**
 * TYPOGRAPHY
 * ======================================================== */

body {
  color: #666666;
  font-family: 'Myriad Pro', 'Trebuchet MS', Arial, Sans-Serif;
  padding-top: 50px;
}

h1 {
  color: #000000;
  font-size: 50px;
  line-height: 24px;
  font-weight: 600;
}

h2 {
  color: #000000;
  font-size: 30px;
  font-weight: 600;
  line-height: 24px;
  margin-left: -2px;
}

h3 {
  color: #000000;
  font-size: 18px;
  line-height: 24px;
  font-weight: normal;
  margin-left: -2px;
  padding-left: 60px;
}

  h3.large {
    font-size: 20px;
    font-style: bold;
  }
  
  #post-it figcaption h3 {
    font-weight: 600;
  }

p {
  color: #666666;
  font-size: 13px;
  font-family: Arial, Sans-Serif;
  line-height: 20px;
}

  figcaption p {
    font-size: 12px;
    font-style: italic;
    line-height: 18px;
  }
  
  .col p {
    font-size: 15px;
    color: #262626;
    line-height: 22px;
  }

figcaption span {
  font-family: Arial, Sans-Serif;
  line-height: 20px;
  color: #666666;
  font-size: 14px;
  font-style: italic;
  line-height: 20px;
}

  figcaption span.small {
    font-size: 13px;
    line-height: 20px;
  }

  figcaption span.v-small {
    font-size: 12px;
    line-height: 20px;
  }
  
    figcaption span.black {
      color: #000000;
    }
    
    figcaption span.bold {
      font-weight: bold;
      font-style: normal;
    }
    
    #about span {
      display: block;
    }

section a {
  color: #262626;
  text-decoration: none;
  border-bottom: 2px solid #929292;
}

/**
 * LAYOUT
 * ======================================================== */
 
.container {
  width: 100%;
}

  .container.dark {
    background-color: #f4f4f4;
    border-top: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
  }
  
section {    
    height: 100%;
    margin: 0 auto;
    position: relative;    
    width: 940px;    
}

    section div.intro-text {        
      width: 245px;
      padding-top: 58px;
    }
    
      section div.intro-text p {
        width: 215px;
      }
    
    section div.body-text p {
      width: 460px;
    }
    
.col {
  float: left;
  width: 440px;
}

  /*.col.right {
    margin-left: 85px;
  }*/
  
  #intro .col {
    width: 600px;
  }        


/**
 * VIEWS
 * ======================================================== */
 
#intro {
 height: 380px;
 background: #212121 url('../../assets/marquee_bg.jpg') center no-repeat;
}
  #intro section {
	width: 610px;
    padding-top: 82px;
  }
  
  #intro h1 {
    margin-bottom: 10px;
    margin-left: -2px;
    text-indent: -9999px;
  }
  
  #intro h3 {
    margin-bottom: 43px;
    text-indent: -9999px;
  }
  #intro p {
    color: #d9d9d9;
    text-align: center;
    font-size: 15px;
  }
  #intro a {
	font-weight: bold;
    color: #fff;
  }
  #intro .app-button {
    position: absolute;
    top: 76px;
    right: 0;
  }
  
#about {
  
}
  #about .intro-text h2 {
    margin-bottom: 20px;
  }
  
  #about figure.legend {
    margin-top: 155px;
    position: relative;
  }
  
    #about figure.legend span.top {
      position: absolute;
      top: -35px;
      left: 0;
    }
  
    #about figure.legend div {
      position: absolute;
      left : 95px;
      top: 21px;
    }
    
    #about figure.legend div span {
      margin-bottom: 50px;
    }
  
  #about figure.homepage {
    position: absolute;
    top: -150px;
    right: -50px;
  }
  
  #about .intro-text.lower {
    margin-top: 42px;
    *margin-top: 0;
    *padding-top: 100px;
  }
  
    #about .intro-text.lower p {
      margin-bottom: 20px;
      width: 205px;
    }
  
  #about figure.autopost {
    position: absolute;
    right: 5px;
    top: 1143px;
  }
  
  #about figure.social-media {
    margin-top: 185px;
    *padding-top: 185px;
    position: relative;
    width: 100%;
  }
    
    #about figure.social-media figcaption {
      position: absolute;
      top: -12px;
      *top: 150px;
      left: 0px;
      width: 100%;
    }
      
      #about figure.social-media figcaption div {
        position: absolute;
        left: 0;
        top: 0;
        width: 50%;
      }
      
      #about figure.social-media figcaption div.right {
        left: 50%;
        text-align: right;
      }
      
      #about figure.social-media figcaption span {
        margin-bottom: 280px;
      }
      
      #about figure.social-media figcaption span.fb {
        margin-right: 10px;
      }
      
      #about figure.social-media figcaption span.bottom {
        margin-bottom: 0;
      }
      
  #about .body-text {
    padding: 70px 0 75px 0;
  }
  
  #about .invitation {
    position: absolute;
    right: 0;
    bottom: 55px;
  }
  
#post-it {
  min-height: 1258px;
}
  
  #post-it .intro-text h2 {
	margin-top: 12px;
    margin-bottom: 20px;
  }
  
  #post-it .intro-text p {
    margin-bottom: 30px;
  }
  
  #post-it figure.postit-top {
    position: absolute;
    top: 63px;
    right: 0;
  }

  #post-it figure.postit-icon {
    position: absolute;
    top: 330px;
    left: 50px;
  }

    #post-it figure.postit-icon img {
      position: relative;
      left: 5px;
    }

    #post-it figure.postit-icon figcaption {
      position: relative;
      width: 120px;
    }

  #post-it figure.postit-bottom {
    margin-top: 345px;
    position: relative;
  }
  
    #post-it figure.postit-bottom figcaption span {
      position: absolute;
      top: -20px;
      left: 170px;
    }
    
    #post-it figure.postit-bottom figcaption div {
      width: 230px;
      *width: 235px;
      float: left;
      margin-top: 10px;
      position: relative;
    }
    
      #post-it figure.postit-bottom figcaption div:nth-child(3) {
        left: 20px;
      }
      
      #post-it figure.postit-bottom figcaption div:nth-child(4) {
        left: 27px;
      }
      
      #post-it figure.postit-bottom figcaption div:nth-child(5) {
        left: 35px;
      }
    
        #post-it figure.postit-bottom figcaption div p {
          width: 190px;
          margin-top: 10px;
        }

#indicators {
  min-height: 640px;
}

  #indicators h2 {
    margin-bottom: 20px;
  }
  
    #indicators figure figcaption {
      margin-top: 105px;
    }
      
      #indicators figure figcaption span.last {
        margin-left: 388px;
      }
    
    #indicators figure img {
      position: absolute;
      top: 0;
      left: 220px;
    }
    
      #indicators figure img.lower {
        top: 340px;
        left: 0;
      }

#community {
  min-height: 750px;
}
  #community h2 {
    margin-bottom: 20px;
    line-height: 30px;
  }
  
  #community h3 {
    font-weight: 600;
  }
  
  #community .intro-text {
	position: absolute;
	z-index:2;
    margin-bottom: 25px;
  }

  #community .intro-text p {
    margin-bottom: 25px;
  }
  
  #community figure {
    position: absolute;
    top: 57px;
    right: -5px;
  }

    #community figure figcaption {
      position: absolute;
      left: 220px;
      top: 360px;
      *width: 722px;
    }
    
      #community figure figcaption div {
        width: 200px;
        float: left;
        padding-left: 40px;
      }
      
      #community figure figcaption div h3 {
        margin-bottom: 10px;
      }
      
      #community figure figcaption div p {
        width: 192px;
      }
  
#iconography {
  min-height: 1460px;
}

  #iconography h2 {
    margin-bottom: 20px;
  }
  
  #iconography figure {
    position: absolute;
    right: -20px;
    top: 58px;
  }
  #iconography .intro-text.lower {
    margin-top: 672px;
    *margin-top: 0;
    *padding-top: 730px;
  }
  
  #iconography figure.right {
    right: -20px;
    top: 888px;
  }
  
  #iconography figure.lower {
    left: 0;
    top: 1158px;
  }

#time-to-post {
  height: 280px;
  background: #212121 url('../../assets/footer_bg.jpg') center no-repeat;
}  
  
  #time-to-post h2 {
	color: #fff;
    margin-bottom: 25px;
  }
  
  #time-to-post figure {
    position: absolute;
    top: -96px;
    right: 49px;
  }
 
#footer-wrapper {
    float: left;
    height: 100px;
}
  
  #footer-wrapper h2 {
    margin-bottom: 25px;
  }

  footer {
    font-size: 12px;
    height: 15px;
    margin: 8px auto;
    padding: 30px 0;
    width: 940px;
  }

  footer p {
    float: left;
    width: auto;
  }

  footer strong {
    color: #000;
    font-weight: bold;
  }

  footer nav {
    float: right;
    width: 500px;
  }
    
    footer a {
      color: #262626;
      text-decoration: none;
    }

    footer a:hover {
      color: #262626;
      text-decoration: underline;
    }
    
    footer nav ul {
      float: right;
      margin-top: 2px;   
    }
    
      footer nav ul li {
        display: inline;
        margin-left: 20px;
      }

  
/**
 * IMAGE REPLACEMENT
 * ======================================================== */
.ir {
  background-image: url('../../assets/sprites.png');
  background-repeat: no-repeat;
} 

.app-button {
  width: 222px;
  height: 52px;
  border: none;
}

.app-button.android-market {
  background-position: -10px -15px;
}

  .app-button.android-market:hover {
    background-position: -10px -75px;
  }
  
  .app-button.android-market:active {
    background-position: -10px -140px;
  }

.app-button.app-store {
  background-position: -10px -347px;
}

  .app-button.app-store:hover {
    background-position: -10px -407px;
  }

  .app-button.app-store:active {
    background-position: -10px -472px;
  }

#intro .orange {
  background: url('../../assets/orange.png') no-repeat right 4px;
}


#about .invitation {
  width: 440px;
  height: 87px;
  background-position: -60px -235px;
}



/**
 * HELPERS
 * ======================================================== */

.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
  .ir br { display: none; }

.hidden { display: none; visibility: hidden; }


.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
  .visuallyhidden.focusable:active,
  .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

.invisible { visibility: hidden; }

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
.ib {
  display: inline-block;
  *display: inline;
  zoom: 1;
}

/**
 * PRINT STYLES
 * ======================================================== */
 
@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
  -ms-filter: none !important; } 
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid;  }
  thead { display: table-header-group; } 
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}

/**************************************************/
/*  Navigation Component
/**************************************************/

    .nav-component ul li.home a,
    .nav-component ul li.launch a,
    .nav-component ul li.twitter a,
    .nav-component ul li.facebook a
{   background-image: url(../../assets/nav-component-sprite.png);
    background-repeat: no-repeat; }

    .nav-component
{   height: 50px;
    width: 100%;
    min-width: 1024px;
    z-index: 999;
    font-size: 14px;
    line-height: 14px;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    text-shadow: 0 1px 0 rgba(0,0,0,1);
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    background: -webkit-linear-gradient(bottom, #101010 0%, #202020 100%);
    background: -moz-linear-gradient(bottom, #101010 0%, #202020 100%);
    background: -o-linear-gradient(bottom, #101010 0%, #202020 100%);
    background: -ms-linear-gradient(bottom, #101010 0%, #202020 100%);
    background: linear-gradient(bottom, #101010 0%, #202020 100%);
    background-color: #202020;
    -webkit-box-shadow: 0 2px 0 rgba(0,0,0,0.1);
    -moz-box-shadow: 0 2px 0 rgba(0,0,0,0.1);
    box-shadow: 0 2px 0 rgba(0,0,0,0.1); }

    .nav-component ul
{   width: 100%;
    display: block;
    margin: 0 auto;
    padding: 0; }

    .nav-component ul li
{   display: block;
    float: right;
    border-left: 1px solid #000;
    -webkit-box-shadow: inset 1px 0 0 #262626, -1px 0 0 #262626;
    -moz-box-shadow: inset 1px 0 0 #262626, -1px 0 0 #262626;
    box-shadow: inset 1px 0 0 #262626, -1px 0 0 #262626; }

        .nav-component ul li:hover
    {   background-image: -webkit-linear-gradient(bottom, #1c1c1c 0%, #292929 100%);
        background-image: -moz-linear-gradient(bottom, #1c1c1c 0%, #292929 100%);
        background-image: -o-linear-gradient(bottom, #1c1c1c 0%, #292929 100%);
        background-image: -ms-linear-gradient(bottom, #1c1c1c 0%, #292929 100%);
        background-image: linear-gradient(bottom, #1c1c1c 0%, #292929 100%); }

        .nav-component ul li.home
    {   float: left;
        border: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none; }

        .nav-component ul li.title
    {   float: left;
        padding: 17px 0 19px 15px; }

            .nav-component ul li.title:hover
        {   background: none; }

        .nav-component ul li a
    {   display: block;
        height: 50px;
        padding: 0 15px;
        color: #fff;
        text-decoration: none; }

            .nav-component ul li.launch a
        {   font-size: 13px;
            line-height: 13px;
            font-style: italic;
            padding: 18px 20px 17px 57px;
            height: 15px;
            color: #ccc;
            background-position: 8px -476px; }

                .nav-component ul li.launch a:hover
            {   background-position: 8px -529px; }

            .nav-component ul li.home a,
            .nav-component ul li.twitter a,
            .nav-component ul li.facebook a
        {   padding: 49px 0 0 49px;
            overflow: hidden;
            height: 1px;
            width: 1px; }

            .nav-component ul li.home a
        {   background-position: -1px -5px; }

                .nav-component ul li.home a:hover
            {   background-position: -1px -57px; }

                .nav-component ul li.home a:active
            {   background-position: -1px -110px; }

            .nav-component ul li.twitter a
        {   background-position: 0 -321px; }

                .nav-component ul li.twitter a:hover
            {   background-position: 0 -371px; }

                .nav-component ul li.twitter a:active
            {   background-position: 0 -424px; }

            .nav-component ul li.facebook a
        {   background-position: 0 -165px; }

                .nav-component ul li.facebook a:hover
            {   background-position: 0 -216px; }

                .nav-component ul li.facebook a:active
            {   background-position: 0 -269px; }

            .nav-component ul li.app a
        {   background-position: 0 -165px; }

                .nav-component ul li.app a:hover
            {   background-position: 0 -216px; }

                .nav-component ul li.app a:active
            {   background-position: 0 -269px; }