/*-----------------------------------------------
    Base Styles (for all media types)
  ----------------------------------------------- */

  /* Hidden */
  #branding p,
  #nav h2,
  #legal h2,
  #home-page #subscribe label span {
    display: block;
    position: absolute;
    left: -99999px;
  }
  
  /* Remove the border around linked images. */
  a img {
    border-width: 0;
  }
  a:focus {
    outline: none;
  }
  button {
    cursor: pointer;
  }


/*  =Typography
  ----------------------------------------------- */
  body {
    font-size: 11px;
    line-height: 1.55;
  }
  h1, h2, h3, h4, h5, h6,
  p, dl, ul, ol, form,
  #home-page #intro blockquote,
  #home-page #comments blockquote {
    margin-top: 1.55em;
    margin-bottom: 0;
  }
  blockquote {
    margin: 0;
    padding: 0;
  }

  h1 {
    font-size: 18px;
  }
  h2 {
    font-size: 14px;
  }
  h3, h4, h5, h6 {
    font-size: 12px;
  }
  #privacy-page #content h3 {
    font-weight: normal;
    text-transform: uppercase;
  }
  #home-page #recent h3,
  #home-page #recent .intro{
      padding-top: 1.55em;
  }
  #home-page #recent h3.title {
      padding-top: 0;
  }

  /* Style */
  #home-page #intro h2,
  #home-page #intro .cite {
    font-style: italic;
  }
  .required-note em,
  form .note,
  #home-page #subscribe form .placeholder {
    font-style: normal;
  }

  /* Weight */
  #nav p a,
  form label span,
  #confirmation-page #content .more {
    font-weight: bold;
  }
  form .note strong {
    font-weight: normal;
  }
  #info h2,
  #home-page #comments h2,
  #home-page #recent h2,
  form .note strong {
    text-transform: uppercase;
  }

  /* Size */
  #home-page #subscribe h1 {
    font-size: 30px;
  }
  #home-page #intro h2 {
    font-size: 21px;
  }
  #home-page #recent h3.title {
    font-size: 18px;
  }
  #home-page #intro .cite {
    font-size: 16px;
  }
  #home-page #intro {
    font-size: 14px;
  }
  #home-page #subscribe input,
  form .placeholder {
    font-size: 13px;
  }
  #home-page #subscribe form input::-webkit-input-placeholder {
    font-style: normal;
    font-size: 13px;
  }
  #home-page #comments h2,
  #home-page #recent h2,
  #home-page #recent h3 {
    font-size: 12px;
  }
  #nav,
  textarea,
  .text input {
    font-size: 11px;
  }
  form .note,
  .required-note,
  .disclosure {
    font-size: 10px;
  }
  #info,
  #info h2,
  form label .note,
  #home-page #comments .note {
    font-size: 9px;
  }

  /* Verdana */
  body,
  #info h2,
  #home-page #recent h3 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
  }

  /* Lucida Grande */
  textarea,
  .text input,
  form .placeholder {
    font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
  }
  /* TRICKY: This has to be in a separate rule set (if it's combined with other selectors, Firefox will ignore the entire set). */
  form input::-webkit-input-placeholder {
    font-family: "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
  }

  /* Arial */
  h1, h2, h3, h4, h5, h6,
  #home-page #intro,
  #home-page #recent h3.title,
  button {
    font-family: Arial, Helvetica, sans-serif;
  }

  /* Helvetica Neue (light) */
  #home-page #intro h2,
  #home-page #intro .cite,
  #home-page #subscribe h1 {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 200;
  }


/*  =Color
  ----------------------------------------------- */

  /* Teal (light) */
  #container {
    background-color: #799da5;
  }

  /* Teal (dark) */
  a,
  #home-page #recent .intro strong,
  #home-page #recent .intro p,
  #home-page #recent .more a:hover span,
  #home-page #recent .more a:active span {
    color: #336678;
  }

  /* Mocha */
  #home-page #comments h2,
  #home-page #recent h2,
  .required-note em,
  .required em,
  form .error-message li {
    color: #a54b00;
  }

  /* Mocha (50% lighter) */
  form .error input[type=text],
  form .error input[type=email],
  form .error input[type=username],
  form .error input[type=password],
  form .error textarea {
    border-color: #d2a580 !important;
  }

  /* Snow */
  #content {
    background-color: #fff;
  }
  #info a:hover,
  #info a:active {
    color: #fff;
  }

  /* Mercury */
  #nav a:hover,
  #nav a:active,
  #info,
  #info a {
    color: #e1e1e1;
  }

  /* Magnesium */
  body {
    background-color: #b4b4b4;
  }

  /* Aluminum */
  #home-page #subscribe form .placeholder {
    color: #999;
  }
  #home-page #subscribe form input::-webkit-input-placeholder {
    color: #999;
  }

  /* Tungsten */
  #home-page #recent .byline,
  #home-page #recent .date,
  .required-note,
  form .note {
    color: #4b4b4b;
  }
  
  /* Lead */
  body,
  #nav ul a,
  #home-page #recent .more a {
    color: #1e1e1e;
  }
  
  /* Charcoal */
  #home-page #comments {
    color: #333;
  }

  /* Licorice */
  form .error-message li span {
    color: #000;
  }
  


/*  =Special Effects
  ----------------------------------------------- */
  a {
    text-decoration: none;
    -moz-transition: color 0.3s;
    -webkit-transition: color 0.3s;
    transition: color 0.3s;
  }
  #connect a {
    -moz-transition: opacity 0.3s;
    -webkit-transition: opacity 0.3s;
    transition: opacity 0.3s;
  }
  #connect a {
    opacity: 0.75;
  }
  #connect a:hover,
  #connect a:active {
    opacity: 1;
  }
  #content a:hover,
  #content a:active,
  #home-page #recent .more a span,
  #confirmation-page #content .more a span:hover,
  #confirmation-page #content .more a span:active {
    border-bottom: 1px dotted;
  }

  /* Reset the default style */
  #home-page #recent .more a:hover,
  #home-page #recent .more a:active,
  #confirmation-page #content .more a:hover,
  #confirmation-page #content .more a:active {
    border-bottom-width: 0;
  }