/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
  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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline; }
  article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block; }
  ol, ul {
    list-style: none; }
  table {
    border-collapse: collapse;
    border-spacing: 0; }


/* #Basic Styles
================================================== */
  body {
    font: 16px/22px "proxima-nova-condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #555;
    font-weight: 300;
 }


/* #Typography
================================================== */
  h1, h2, h3, h4, h5, h6 {
    color: #333;
    line-height: 1.2; }
  .subheader { color: #777; }

  p { margin: 0 0 20px 0; }
  p img { margin: 0; }
  p.lead { font-size: 21px; line-height: 27px; color: #777;  }

  em { font-style: italic; }
  strong { font-weight: bold; color: #333; }
  small { font-size: 80%; }

/*  Blockquotes  */
  blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; }
  blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
  blockquote cite { display: block; font-size: 12px; color: #555; }
  blockquote cite:before { content: "\2014 \0020"; }
  blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }

  hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }


/* #Links
================================================== */
  a, a:visited { color: #333; text-decoration: underline; outline: 0; }
  a:hover, a:focus { color: #000; }
  p a, p a:visited { line-height: inherit; }



ul.disc {
  list-style: disc;
  padding-left: 18px;
}


body {
  position: relative;
  padding: 150px 0;
  background-color: #f5f5f5;
  background-image: url('../img/bg.jpg');
  background-repeat: repeat;
  background-position: 0 0;
}
.top-noise {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 225px;
  background: url('../img/top-noise.png') repeat-x;
}
.logo {
  display: block;
  margin: 0 auto 30px;
}
.main-heading {
  text-align: center;
  font-size: 32px;
}
.attribution {
  color: #999;
  font-size: 16px;
  line-height: 1.8;
  text-align: center;
}
.attribution a {
  color: #999;
  text-decoration: none;
  -webkit-transition: color .2s ease-in-out;
     -moz-transition: color .2s ease-in-out;
          transition: color .2s ease-in-out;

}
.attribution a:hover {
  color: #333;
}


hr {
  width: 300px;
  margin: 60px auto;
  border: none;
  height: 1px;
  background-color: transparent; /* Old browsers */
  background-repeat: repeat-y; /* Rpeat the gradient */
  background-image: -moz-linear-gradient(left, rgba(220,220,220,0) 0%, #dddddd 25%, #dddddd 75%, rgba(220,220,220,0) 100%,); /* FF3.6+ */
  background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(220,220,220,0)), color-stop(25%,#dddddd), color-stop(75%,#dddddd), color-stop(100%,#dddddd)); /* Chrome,Safari4+ */
  background-image: -webkit-linear-gradient(left, rgba(220,220,220,0) 0%,#dddddd 25%, #dddddd 75%, rgba(220,220,220,0) 100%); /* Chrome 10+, Safari 5.1+ */
  background-image: -ms-linear-gradient(left, rgba(220,220,220,0) 0%, #dddddd 25%, #dddddd 75%, rgba(220,220,220,0) 100%); /* IE10+ */
  background-image: -o-linear-gradient(left, rgba(220,220,220,0) 0%, #dddddd 25%, #dddddd 75%, rgba(220,220,220,0) 100%); /* Opera 11.10+ */
  background-image: linear-gradient(left, rgba(220,220,220,0) 0%, #dddddd 25%, #dddddd 75%, rgba(220,220,220,0) 100%); /* W3C */
}
.glue-container {
  position: relative;
  z-index: 10;
  width: 500px;
  margin: 0 auto;
}


.value-list li:nth-child(even) .value-desc {
  margin-left: 0;
  margin-right: 25px;
}


.value-graphic {
  width: 150px;
  float: left;
}

.value-desc {
  float: left;
  margin-left: 25px;
  width: 325px;
  margin-top: 10px;
}

.value-list li {
  overflow: hidden;
  margin-bottom: 40px;
}


.section-header {
  font-size: 22px;
  line-height: 28px;
  margin-bottom: 40px;
}

.subsection-header {
  color: #333;
  font-weight: 600;
  line-height: 22px;
}




@-webkit-keyframes reset {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 0;
  }
}

@-webkit-keyframes fade-in-and-down {
  0% {
      opacity: 0;
      margin-top: -30px;
  }
  100% {
      opacity: 1;
      margin-top: 0;
  }
}

@-webkit-keyframes fade-in {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

.logo,
.main-heading,
.attribution,
.main-content {
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-iteration-count: 1;
}

.logo,
.main-heading {
    -webkit-animation-name: reset, fade-in-and-down;
    -webkit-animation-duration: .5s;
}

.attribution {
    -webkit-animation-name: reset, fade-in;
    -webkit-animation-duration: .75s;
}

.main-content {
    -webkit-animation-name: reset, fade-in;
    -webkit-animation-duration: 1.5s, .75s;
}

.logo {-webkit-animation-delay: 0, 0;}
.main-heading {-webkit-animation-delay: 0, 0;}
.attribution {-webkit-animation-delay: 0, .5s;}
.main-content {-webkit-animation-delay: 0, 1.5s;}












.code-snippet {
  padding: 10px 20px;
  background-color: #e3e6e8;
  color: #47829e;
  font-size: 13px;
  margin: -10px 0 40px;
  font-family: "Menlo", "Monaco", monospace;
}
.code-value {
  color: #bd4015;
}
.code-plain {
  color: #999;
}
.get-started-list li {
  margin-bottom: 40px;
}






.short-bottom {
  margin-bottom: 12px;
}

.no-bottom {
  margin-bottom: 0;
}
.text-divider {
  margin: 0 5px;
}