/* FONTS */
@font-face { font-family: 'Negotiate'; src: url('/fonts/negotiate_free-webfont.eot'); src: local('☺'), url('/fonts/negotiate_free-webfont.woff') format('woff'), url('/fonts/negotiate_free-webfont.ttf') format('truetype'), url('/fonts/negotiate_free-webfont.svg#webfont') format('svg'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'Calibri'; src: url('/fonts/calibri-webfont.eot'); src: local('☺'), url('/fonts/calibri-webfont.woff') format('woff'), url('/fonts/calibri-webfont.ttf') format('truetype'), url('/fonts/calibri-webfont.svg#webfontvreZKQqB') format('svg'); font-weight: normal; font-style: normal; }

/* GENERIC */
body {
  background: #fff;
  color: #333;
  font: 15px/22px Calibri, Helvetica, Arial, sans-serif;
}
a {
  color: #069;
}
p {
  margin: 0 0 10px;
}

/* PAGE STYLES */

/* Homepage */
#home .top-in {
  color: #fff;
  height: 420px;
}
  #home .bottom {
    background: #efefef;
  }
    #home h3 {
      background: url(/images/bg_gradient_medium.png) repeat-x;
    }
    #home .col {
      border: 1px solid #ccc;
      width: 233px;
    }
  #home .content h2 {
    font: 17px/27px Calibri, Helvetica, Arial, sans-serif;
  }
  #home .mid {
    background: #efefef url(/images/bg_gradient_light.png) repeat-x left bottom;
  }
    #home .mid .left {
      width: 535px;
    }
      #home .mid .left a:first-child {
        margin: 0 20px 0 0;
      }
    #home .mid .right {
      text-align: right;
      width: 435px;
    }
      #home .mid .right a {
        margin: 0 5px 0 0;
      }
    #home .mid-in {
      margin: 0 auto;
      padding: 9px 0 4px;
      width: 980px;
    }

/* Examples */
#examples .top-in {
  background: url(/images/bg_examples.png) repeat-x;
  height: 470px;
  position: relative;
}
  #examples .bottom {
    margin-top: 10px;
  }
    #examples .bottom-in {
      padding: 0;
    }
  #examples .col {
    margin: 0 20px 0 0;
    width: 310px;
  }
    #examples h3 a {
      background: url(/images/icon_arrow.png) no-repeat 100% top;
      padding-right: 25px;
    }
  #examples .website {
    float: left;
  }
  #examples .logo {
    float: right;
  }
  #examples .mobile {
    bottom: 15px;
    height: 134px;
    left: 50%;
    margin-left: -41px;
    position: absolute;
    width: 82px;
  }
    #examples .mobile .blockup-in {
      background: url(/images/bg_mobile_small.png) no-repeat;
      height: 100%;
      width: 100%;
    }
  
/* Tour */
#tour .top {
  background: url(/images/bg_features.png) repeat;
}
  #tour .top-in {
    height: 530px;
    position: relative;
    text-align: center;
  }
  #tour .bottom {
    background: #efefef;
  }
    #tour h3 {
      background: url(/images/bg_gradient_medium.png) repeat-x;
    }
      #tour h3 a {
        background: url(/images/icon_arrow.png) no-repeat 100% 2px;
        color: #666;
        display: inline-block;
        padding: 0 27px 0 0;
        text-decoration: none;
      }
    #tour .col {
      border: 1px solid #ccc;
      color: #999;
      cursor: pointer;
      width: 233px;
    }
  #tour .current, #tour .col.hover {
    border: 1px solid #333;
    color: #333;
  }
    #tour .current h3, #tour .col.hover h3 {
      background: url(/images/bg_gradient_dark.png) repeat-x;
    }
      #tour .current h3 a, #tour .col.hover h3 a {
        color: #fff;
      }
        #tour .current h3 a {
          background: url(/images/icon_arrow_current.png) no-repeat 100% 2px;
        }
  #tour .thumb {
    background: #efefef;
    border: 1px solid #ccc;
    margin: 0 0 10px;
  }
    #tour .current .thumb, #tour .col.hover .thumb {
      border: 1px solid #999;
    }

#tour .wireframe.editor .top-in { background: url(/images/bg_features_wireframe_editor.png) no-repeat center 90px; }
#tour .wireframe.settings .top-in { background: url(/images/bg_features_wireframe_settings.png) no-repeat center 90px; }
#tour .wireframe.contributors .top-in { background: url(/images/bg_features_wireframe_contributors.png) no-repeat center 90px; }
#tour .wireframe.versions .top-in { background: url(/images/bg_features_wireframe_versions.png) no-repeat center 90px; }

#tour .screenshot.editor .top-in { background: url(/images/bg_features_screenshot_editor.png) no-repeat center 90px; }
#tour .screenshot.settings .top-in { background: url(/images/bg_features_screenshot_settings.png) no-repeat center 90px; }
#tour .screenshot.contributors .top-in { background: url(/images/bg_features_screenshot_contributors.png) no-repeat center 90px; }
#tour .screenshot.versions .top-in { background: url(/images/bg_features_screenshot_versions.png) no-repeat center 90px; }

#editor .screen .thumb-in { background: url(/images/bg_features_screenshot_editor.png) no-repeat -490px -211px; }
#settings .screen .thumb-in { background: url(/images/bg_features_screenshot_settings.png) no-repeat -150px -100px; }
#contributors .screen .thumb-in { background: url(/images/bg_features_screenshot_contributors.png) no-repeat -151px -160px; }
#versions .screen .thumb-in { background: url(/images/bg_features_screenshot_versions.png) no-repeat -10px -70px;
}

#editor .frame .thumb-in { background: url(/images/bg_features_wireframe_editor.png) no-repeat -686px -211px; }
#settings .frame .thumb-in { background: url(/images/bg_features_wireframe_settings.png) no-repeat -335px -98px; }
#contributors .frame .thumb-in { background: url(/images/bg_features_wireframe_contributors.png) no-repeat -335px -160px; }
#versions .frame .thumb-in { background: url(/images/bg_features_wireframe_versions.png) no-repeat -195px -70px; }

#editor .frame.thumb, #settings .frame.thumb, #contributors .frame.thumb, #versions .frame.thumb {
  background: url(/images/bg_features.png) repeat;
}
 
/* Compare */
#compare .top {
  background: url(/images/bg_compare_bg.jpg) repeat-x;
}
  #compare .top-in {
    background: url(/images/bg_compare.png) no-repeat center 85px;
    height: 550px;
    position: relative;
    text-align: center;
  }
  #compare .bottom {
    margin-top: 10px;
  }
    #compare .bottom .col {
      margin: 0 20px 0 0;
      width: 310px;
    }
    #compare .bottom-in {
      padding: 0;
    }
  #compare table {
    border-collapse: collapse;
    margin: 30px auto 0;
    width: 920px;
  }
    #compare table td {
      border: 1px solid #ccc;
      padding: 5px;
      text-align: left;
      width: 15%;
    }
      #compare table td:first-child {
        background: #efefef;
        border-left: 0;
        color: #333;
        font: bold 13px/19px Helvetica, Arial, sans-serif;
        padding: 12px 10px; /* TODO: Back to padding: 10px; once we have PSD conversion */
        width: 23%;
      }
      #compare table td:last-child {
        border-right: 0;
      }
    #compare table th {
      color: #999;
      font: bold 13px Helvetica, Arial, sans-serif;
      padding: 15px 0 7px;  /* TODO: Back to padding: 7px 0; once we have PSD conversion */
      text-align: center;
      vertical-align: middle;
    }
      #compare table th:first-child {
        color: #333;
        font: 19px Calibri, Helvetica, Arial, sans-serif;
        text-align: left;
      }
    #compare table tr:last-child td {
      border-bottom: 0;
      color: #999;
      font: bold 13px/17px Helvetica, Arial, sans-serif;
      text-align: center;
      vertical-align: middle;
    }
      #compare table tr:last-child td:first-child {
        color: #333;
        font: bold 13px/19px Helvetica, Arial, sans-serif;
        text-align: left;
        vertical-align: top;
      }
      #compare table tr:last-child td a {
        color: #666;
        font: bold 15px Helvetica, Arial, sans-serif;
      }
    #compare table .us {
      background: url(/images/bg_us.png) no-repeat center center;
    }
      #compare table .them {
        background: url(/images/bg_them_full.png) no-repeat center center;
      }
      #compare table .them.half {
        background: url(/images/bg_them_half.png) no-repeat center center;
      }

/* About */
#about .top-in {
  background: url(/images/bg_about.jpg) repeat-x;
  height: 420px;
}
  #about .bottom {
    margin: 35px auto 20px;
  }
    #about .bottom-in {
      padding: 0;
    }
  #about .col {
    margin: 0 20px 0 0;
    width: 310px;
  }
    #about .dropcap {
      display: inline;
      margin: -20px 2px 2px 0;
      vertical-align: bottom;
    }
    #about .old {
      float: right;
      margin: 5px 0 5px 15px;
    }
  #about .jim {
    left: -25px;
    position: absolute;
    top: 10px;
  }
  #about .adam {
    left: 320px;
    position: absolute;
    top: 10px;
  }
  #about .paul {
    right: -50px;
    position: absolute;
    top: 10px;
  }
  
/* Plans & Pricing */
#plans .header {
  background: url(/images/bg_opacity_white_20.png) repeat;
}
  #plans .bottom {
    margin-top: 10px;
  }
    #plans .bottom-in {
      padding: 0;
    }
  #plans .top {
    background: url(/images/bg_plans_bg.jpg) repeat;
  }
    #plans .top-in {
      background: url(/images/bg_plans.png) no-repeat center 85px;
      height: 545px;
      position: relative;
      text-align: center;
    }
  #plans .bottom .col {
    margin: 0 20px 0 0;
    width: 310px;
  }
  #plans table {
    border-collapse: collapse;
    margin: 65px auto 0;
    width: 920px;
  }
    #plans table td {
      border: 1px solid #ccc;
      color: #666;
      font: 17px Calibri, Helvetica, Arial, sans-serif;
      padding: 5px;
      text-align: center;
      width: 23%;
    }
      #plans table td:first-child {
        border-left: 0;
        color: #333;
        padding: 10px;
        text-align: left;
        width: 30%;
      }
      #plans table td:last-child {
        border-right: 0;
      }
    #plans table th {
      color: #333;
      font: bold 23px Calibri, Helvetica, Arial, sans-serif;
      padding: 7px 0;
      text-align: center;
      vertical-align: middle;
    }
    #plans table tr:last-child td {
      border-bottom: 0;
      padding: 10px 0;
    }
    #plans table .price td {
      color: #333;
      font-weight: bold;
      text-align: center;
      vertical-align: middle;
    }
      #plans table .price td:first-child {
        color: #333;
        font-weight: normal;
        text-align: left;
      }

/* Plain vanilla pages */

#vanilla .header {
  background: #333;
}
  #vanilla .header a {
    color: #fff;
  }
  #vanilla .content {
    color: #333;
    font-size: 17px;
    line-height: 25px;
    padding: 20px 0 0;
  }
    #vanilla .content h2 {
      font: 39px Negotiate, Helvetica, Verdana, sans-serif;
    }
    #vanilla .content h3 {
      margin: 10px 0;
    }
    #vanilla .content li {
      list-style: disc;
      margin: 0 0 0 30px;
      padding: 0 0 0 10px;
    }

/* HOMEPAGE */

/* Website panel */
#website {
  background: url(/images/bg_website_bg.png) repeat-x left bottom;
}
  #website .top-in {
    background: url(/images/bg_website.png) no-repeat center bottom;
  }
  #website .blockup, #logo .blockup {
    background: url(/images/bg_monitor.png) no-repeat 100% 10px;
    float: right;
    height: 345px;
    position: relative;
    width: 440px;
  }
    #website .blockup-in {
      background: url(/images/img_screen_website.jpg) no-repeat;
      height: 195px;
      left: 76px;
      position: absolute;
      top: 29px;
      width: 344px;
    }
  #website #dd.active li {
    background: #333;
  }
  #website #dd.active #dd-handle {
    background: #999;
  }
  #website #nav-website, #website #subhead-website {
    display: block;
  }
  #website h2 {
    color: #ccc;
  }

/* Mobile panel */
#mobile {
  background: url(/images/bg_mobile_bg.jpg) repeat-x left bottom;
}
  #mobile .top-in {
    background: url(/images/bg_mobile.png) no-repeat center top;
  }
  #mobile .blockup {
    float: right;
    height: 345px;
    position: relative;
    width: 450px;
  }
    #mobile .blockup-in {
      background: url(/images/img_screen_mobile.png) no-repeat;
      bottom: 0;
      height: 325px;
      left: 85px;
      position: absolute;
      width: 317px;
    }
  #mobile #dd.active li {
    background: #987851;
  }
  #mobile #dd.active #dd-handle {
    background: #c7b296;
  }
  #mobile #nav-mobile, #mobile #subhead-mobile {
    display: block;
  }
  #mobile h2 {
    color: #fff;
  }

/* Logo panel */
#logo {
  background: url(/images/bg_logo_bg.png) repeat-x left bottom;
}
  #logo .top-in {
    background: url(/images/bg_logo.png) no-repeat center bottom;
  }
  #logo .blockup-in {
    background: url(/images/img_screen_logo.png) no-repeat;
    height: 195px;
    left: 76px;
    position: absolute;
    top: 29px;
    width: 344px;
  }
  #logo #dd.active li {
    background: #35A8EC;
  }
  #logo #dd.active #dd-handle {
    background: #71C7F7;
  }
  #logo #nav-logo, #logo #subhead-logo {
    display: block;
  }
  #logo h2 {
    color: #efefef;
  }

#website #dd.active #nav-website a, #mobile #dd.active #nav-mobile a, #logo #dd.active #nav-logo a {
  background: url(/images/bg_opacity_white_10.png) repeat;
  border-radius: 10px 0 0 0;
  -moz-border-radius: 10px 0 0 0;
  -webkit-border-radius: 10px 0 0 0;
}
  .blockup-in a {
    display: block;
    height: 100%;
    width: 100%;
  }

/* Dropdown */

#dd {
  background: url(/images/bg_opacity_white_10.png) repeat;
  display: block;
  height: 76px;
  margin: 10px 0 5px;
  position: relative;
  width: 521px;
  z-index: 99;

  /* Border radius */
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
  #dd-dd {
    left: 0;
    position: absolute;
    top: 0;
    width: 450px;
  }
    #dd li {
      border-top: #333;
      display: none;
    }
      #dd li.current {
        background: none;
        border-top: none;
        display: block;
      }
    #dd li a {
      display: block;
      padding: 6px 10px 9px 20px;
      text-decoration: none;
    } 
    #dd-handle {
      background: url(/images/bg_opacity_white_30.png) repeat;
      cursor: pointer;
      padding: 25px 25px 26px;
      position: absolute;
      right: 0;
      top: 0;

      /* Border radius */
      border-radius: 0 10px 10px 0;
      -moz-border-radius: 0 10px 10px 0;
      -webkit-border-radius: 0 10px 10px 0;
    }
    /* Active dd */
    #dd.active {
      border-radius: 10px 10px 10px 0;
      -moz-border-radius: 10px 10px 10px 0;
      -webkit-border-radius: 10px 10px 10px 0;
    }
      #dd.active li {
        display: block;
      }
        #dd.active li a:hover {
          background: url(/images/bg_opacity_white_10.png) repeat;
        }
          #dd li:first-child a:hover, #dd.active li:first-child {
            border-radius: 10px 0 0 0;
            -moz-border-radius: 10px 0 0 0;
            -webkit-border-radius: 10px 0 0 0;
          }
          #dd li:last-child a:hover, #dd.active li:last-child {
            border-radius: 0 0 10px 10px;
            -moz-border-radius: 0 0 10px 10px;
            -webkit-border-radius: 0 0 10px 10px;
          }

/* Misc IDs */

#quote {
  color: #333;
  font: italic 15px Georgia, 'Times New Roman', serif;
  padding: 15px 0 0;
}
  #quote a {
    color: #666 !important;
  }
  #quote-refresh {
    display: inline-block;
    padding: 0 0 0 3px;
    vertical-align: middle;
  }
  #compare #quote { text-align: right; }

/* Main classes */

.bottom {
  margin: 20px auto;
  width: 980px;
}
  .bottom-in {
    padding: 8px;
  }
  .bottom h3 {
    border-bottom: 1px solid #ccc;
    color: #333;
    font-size: 19px;
    font-weight: normal;
    padding: 10px;
  }
  .bottom img {
    display: block;
    margin: 0 0 7px;
  }
  .bottom .col {
    background: #fff;
    color: #666;
    margin-right: 8px;
  }
    .bottom .col-in {
      padding: 7px;
    }
.content {
  margin: 0 auto;
  position: relative;
  width: 980px;
}
.footer {
  border-top: 1px solid #efefef;
  color: #999;
  margin: 0 auto;
  padding: 10px 0 20px;
  width: 980px;
}
  .footer a {
    color: #999;
    font-size: 13px;
    margin: 0 15px 0 0;
  }
.header {
  background: url(/images/bg_opacity_white_10.png) repeat;
}
  .header-in {
    margin: 0 auto;
    padding: 10px 0;
    position: relative;
    width: 980px;
  }
  .header h1 a {
    background: url(/images/bg_logo_white.png) no-repeat;
    display: block;
    height: 55px;
    text-indent: -10000px;
    width: 150px;
  }

/* Secondary classes */

.blockup.website, .blockup.logo {
  background: url(/images/bg_monitor.png) no-repeat;
  height: 329px;
  margin: 30px 0 0;
  position: relative;
  width: 384px;
}
  .blockup.website .blockup-in, .blockup.logo .blockup-in {
    height: 195px;
    position: absolute;
    top: 19px;
    width: 344px;
  }
  .blockup.website .blockup-in {
    background: url(/images/img_screen_website.jpg) no-repeat;
    left: 20px;
  }
  .blockup.logo .blockup-in {
    background: url(/images/img_screen_logo.png) no-repeat;
    left: 21px;
  }
.col {
  float: left;
}
  .col:last-child {
    margin-right: 0 !important;
  }
  .col #quote {
    color: #666;
    font-size: 13px;
    padding: 0;
    text-align: right;
  }
    .col #quote-refresh {
      padding: 5px 0 0 5px;
    }
.fyi {
  color: #999;
  font-size: 13px;
}
.headline {
  font: 49px Negotiate, Helvetica, Arial, sans-serif;
  padding: 10px 0 15px;
}
.nav {
  font: bold 13px/22px Helvetica, Arial, sans-serif;
  height: 43px;
  padding: 10px 0 0;
  position: absolute;
  right: 0;
  top: 14px;
}
  .nav .btn {
    margin-top: -5px;
  }
  .nav a {
    display: inline-block;
    padding: 3px 13px;
    text-decoration: none;
  }
  .nav li {
    float: left;
    height: 100%;
    margin: 0 15px 0 0;
  }
    .nav .nav-login {
      margin: 3px 0 0;
    }
      .nav .nav-login a {
        color: #333 !important;
        padding: 2px 20px;
      }
        .nav .nav-login .btn {
          background-color: #fff;
        }
.note {
  color: #999;
}
.thumb .overlay {
  background: url(/images/bg_opacity_black_75.png) repeat;
  color: #fff;
  font-size: 12px;
  padding: 0 10px 0 0;
  text-align: right;
}
  .thumb .overlay span {
    background: url(/images/icon_arrow_small.png) no-repeat center center;
    display: inline-block;
    height: 5px;
    width: 10px;
  }
  .col .thumb {
    opacity: .5;
  }
    .col.current .thumb, .col:hover .thumb {
      opacity: 1;
    }
    .thumb-in {
      padding: 50px 0 0;
    }
.top h2 {
  display: none;
}
  .top a {
    color: #fff;
  }
.twitter {
  background: url(/images/twitter.png) no-repeat 0 0;
  padding: 2px 5px 2px 21px;
}

/* Current nav styles */

.nav li a:hover, #examples .nav-examples a, #tour .nav-tour a,
#compare .nav-compare a, #about .nav-about a, #plans .nav-plans a {
  background: url(/images/bg_opacity_white_30.png) repeat;
  border-radius: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 20px 20px 20px 20px;
}