// Fonts
$Helvetica: 'Helvetica Neue', Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif;
$Consolas: Consolas, Menlo, "Courier New", monospace;
$RockwellBoldItalic: 'Rockwell Bold Italic', 'Courier Bold', Courier, Georgia, Times, 'Times New Roman', serif;
$Rockwell: 'Rockwell', 'Courier Bold', Courier, Georgia, Times, 'Times New Roman', serif;

@font-face {
  font-family: 'Rockwell';
  src: url('../fonts/rockwell-standard.eot');
  src: url('../fonts/rockwell-standard.eot?#iefix') format('embedded-opentype'),
  url('../fonts/rockwell-standard.woff') format('woff'),
  url('../fonts/rockwell-standard.ttf') format('truetype');
} 
@font-face {
  font-family: 'Rockwell Bold Italic';
  src: url('../fonts/rockwell-bold-italic.eot');
  src: url('../fonts/rockwell-bold-italic.eot?#iefix') format('embedded-opentype'),
  url('../fonts/rockwell-bold-italic.woff') format('woff'),
  url('../fonts/rockwell-bold-italic.ttf') format('truetype');
} 

// Mixins
@mixin border-radius($radius: 5px) {
  -webkit-background-clip: padding-box;
  -webkit-border-radius: $radius;
  -moz-background-clip: padding-box;
  -moz-border-radius: $radius;
  border-radius: $radius;
  background-clip: padding-box;
}
@mixin box-shadow($horizontal: 0px, $vertical: 1px, $blur: 2px, $color: #CCC) {
  -webkit-box-shadow: $horizontal $vertical $blur $color;
  -moz-box-shadow: $horizontal $vertical $blur $color;
  box-shadow: $horizontal $vertical $blur $color;
}
@mixin inset-box-shadow($horizontal: 0px, $vertical: 1px, $blur: 2px, $color: #CCC) {
  -webkit-box-shadow: inset $horizontal $vertical $blur $color;
  -moz-box-shadow: inset $horizontal $vertical $blur $color;
  box-shadow: inset $horizontal $vertical $blur $color;
}
@mixin multi-color-border($top, $sides, $bottom) {
  border-top: 1px solid $top;
  border-left: 1px solid $sides;
  border-right: 1px solid $sides;
  border-bottom: 1px solid $bottom;
}
@mixin multi-border-radius($topLeft: 5px, $topRight: 5px, $bottomRight: 5px, $bottomLeft: 5px) {
  -webkit-border-top-left-radius: $topLeft;
  -webkit-border-top-right-radius: $topRight;
  -webkit-border-bottom-right-radius: $bottomRight;
  -webkit-border-bottom-left-radius: $bottomLeft;
  -moz-border-radius-topleft: $topLeft;
  -moz-border-radius-topright: $topRight;
  -moz-border-radius-bottomright: $bottomRight;
  -moz-border-radius-bottomleft: $bottomLeft;
  border-top-left-radius: $topLeft;
  border-top-right-radius: $topRight;
  border-bottom-right-radius: $bottomRight;
  border-bottom-left-radius: $bottomLeft;
}
@mixin vertical-gradient($start: #000, $stop: #FFF) {
  background: $start;
  background: -webkit-gradient(linear, left top, left bottom, from($start), to($stop));
  background: -moz-linear-gradient(center top, $start 0%, $stop 100%);
  background: -moz-gradient(center top, $start 0%, $stop 100%);
  background: linear-gradient(to bottom, $start 0%, $stop 100%);
}
@mixin vertical-gradient-with-image($image, $start: #000, $stop: #FFF) {
  background: $start;
  background: $image, -webkit-gradient(linear, left top, left bottom, from($start), to($stop));
  background: $image, -moz-linear-gradient(center top, $start 0%, $stop 100%);
  background: $image, -moz-gradient(center top, $start 0%, $stop 100%);
  background: $image, linear-gradient(to bottom, $start 0%, $stop 100%);
}
@mixin opacity($op) {
  -khtml-opacity: $op;
  -moz-opacity: $op;
  opacity: $op;
}

// Page
html, body {
  background: #F2F2F2;
}
body {
  color: #666;
  font: normal 14px/16px $Helvetica;
  text-rendering: optimizeLegibility;

  li {
    line-height: normal;
  }
}

// Utils
.group:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.hidden {
  display: none;
}
[ng\:cloak], [ng-cloak], .ng-cloak {
  display: none;
}

// Global
header.main {
  background: #12343D url('../img/header-bg.gif') top left repeat-x;
  border-bottom: 1px solid #DDDDDD;
  height: 66px;
  position: relative;
  z-index: 50;

  div.inner {
    border-left: 1px solid rgba(229, 229, 229, .25);
    height: 65px;
    margin: 0 auto;
    position: relative;
    width: 95%;

    div.shadey {
      background: transparent url('../img/header-inner-bg.png') top left no-repeat;
      height: 65px;
      left: -157px;
      pointer-events: none;
      position: absolute;
      top: 0;
      width: 432px;
      z-index: 49;
    }
    form.search {
      float: left;
      padding: 17px 0 0 20px;
      position: relative;
      z-index: 50;
      width: 25%;

      input {
        background: #17484F url('../img/search-icon.png') top left no-repeat;
        background: rgba(43, 82, 93, .5) url('../img/search-icon.png') 8px center no-repeat;
        border: 1px solid #3A5E67;
        color: #FFF;
        font: normal 12px $Helvetica;
        height: auto;
        margin: 0;
        padding: 7px 7px 7px 28px;
        width: 86%;
        @include border-radius(3px);
        @include inset-box-shadow(0, 1px, 0px, #1D4249);

        &:focus {
          border-color: #62D5E1;
        }
        &::-webkit-input-placeholder {
          color: #72979C;
        }
        &:-moz-placeholder {
          color: #72979C;
        }
      }
    }
    nav.public {
      float: left;
      width: 481px;

      ul {
        margin: 0;
        padding: 17px 0 0 20px;

        li {
          display: block;
          float: left;

          a {
            border-bottom: 2px solid transparent;
            color: #FFF;
            display: block;
            float: left;
            font: 500 14px $Helvetica;
            padding: 6px 7px 5px 7px;
            margin-right: 16px;
            text-decoration: none;
            -webkit-transition: border .03s linear;
            -moz-transition: border .03s linear;
            -o-transition: border .03s linear;
            transition: border .03s linear;

            &:hover {
              border-bottom: 2px solid #3A5E67;
            }
            &.active {
              border-bottom: 2px solid #85D2DD;
            }
          }
          button#add-snipt {
            font-size: 15px;
            font-weight: bold;
            margin-top: -3px;
            padding: 7px 12px 9px 12px;

            i {
              margin-left: 5px;
              margin-top: 2px;
            }
          }
          &.add-snipt {
            float: right;
            margin-right: 13px;
          }
          &.teams-nav, &.add-snipt {
            position: relative;

            > ul {
              background: transparent url('../img/aside-nav-open-bottom-bg.gif') top left repeat;
              display: none;
              left: -5px;
              padding: 10px 0;
              position: absolute;
              top: 48px;
              width: 189px;
              @include multi-border-radius(0, 0, 10px, 10px);

              li {
                float: none;
                list-style-type: none;

                a {
                  border: none;
                  color: #B0D7DD;
                  display: block;
                  float: none;
                  font: bold 12px $Helvetica;
                  margin: 0;
                  overflow: hidden;
                  padding: 7px 20px 7px 20px;
                  text-overflow: ellipsis;
                  white-space: nowrap;

                  &:hover {
                    background: rgba(#103A42, .5);
                    text-decoration: none;
                  }
                  i {
                    margin-right: 9px;
                    opacity: .3;
                  }
                }
              }
            }

            &.open {
              > a {
                background: #406064;
                border-radius: 5px;
              }
              > ul {
                display: block;
              }
            }
            span.as {
              color: #7C8D8E;
              margin-right: 2px;
            }
          }
        }
      }
    }
    aside.nav {
      float: right;
      height: 65px;
      margin: 0;
      position: relative;
      width: 189px;

      a.mini-profile {
        display: block;
        padding: 14px 13px 8px 13px;

        span.avatar {
          background-repeat: no-repeat;
          border: 1px solid #3A5E67;
          display: block;
          float: left;
          height: 35px;
          width: 35px;
          @include border-radius();
        }
        span.info {
          span.username {
            color: #FFF;
            display: inline-block;
            font: 500 14px $Helvetica;
            margin: 1px 0 0 8px;
            max-width: 88px;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          i {
            display: block;
            float: right;
            margin: 1px 0 0 8px;
            opacity: .3;
          }
          span.type {
            color: #72979C;
            display: inline-block;
            font: bold 11px $Helvetica;
            margin: 1px 0 0 8px;
            min-width: 100px;
            padding-bottom: 7px;
            text-transform: uppercase;
          }
        }
        &:hover {
          background: rgba(#5C8086, .2);
          text-decoration: none;

          i {
            background-position: -313px -119px;
          }
        }
      }
      ul {
        background: transparent url('../img/aside-nav-open-bottom-bg.gif') top left repeat;
        display: none;
        left: 0;
        margin: 0;
        padding: 10px 0;
        position: absolute;
        top: 65px;
        width: 189px;
        z-index: 51;
        @include multi-border-radius(0, 0, 10px, 10px);

        li {
          list-style-type: none;

          a {
            color: #B0D7DD;
            display: block;
            font: bold 12px $Helvetica;
            padding: 7px 0 7px 37px;

            &:hover {
              background: rgba(#103A42, .5);
              text-decoration: none;
            }
            i {
              margin-right: 9px;
              opacity: .3;
            }
          }
        }
      }
      &.open {
        a.mini-profile {
          background: transparent url('../img/aside-nav-open-top-bg.gif') top left repeat-x;
          opacity: 1;

          span.avatar {
            border-color: #92B6BD;
          }
          i {
            background-position: -288px -120px;
          }
          span.info {
            span.type {
              color: #B0D7DD;

              span.is-pro {
                color: #85D2DD;
              }
            }
          }
        }
        ul {
          display: block;
        }
      }
    }
  }
}
.main-logo {
  float: left;
  margin: 0;
  position: relative;
  z-index: 50;

  a {
    color: #F9F9F9;
    display: block;
    font: normal 36px $RockwellBoldItalic;
    float: left;
    letter-spacing: -1px;
    margin: 11px 0 0 16px;
    text-decoration: none;
    text-shadow: 0 1px 2px black;

    span {
      color: #87D2DC;
    }
    &:focus {
      outline: none;
    }
    &:hover {
      text-shadow: 0 0 100px white;
    }
  }
}
header.sub {
  @include vertical-gradient(#ECECEC, #DBDBDB);

  div.inner {
    border-left: 1px solid #d0d0d0;
    margin: 0 auto;
    position: relative;
    width: 95%;
    z-index: 49;

    ul.bcrumb {
      float: left;
      margin: 0;
      padding-left: 16px;
      width: 82%;

      li {
        display: inline-block;
        float: left;
        line-height: normal;
        max-width: 490px;
        overflow: hidden;
        padding: 2px 0 4px 0;
        text-overflow: ellipsis;
        white-space: nowrap;

        a {
          color: #999999;
          font: bold 12px $Consolas;
          text-decoration: none;
          text-shadow: 0 1px 0 #FFF;

          &:hover {
            text-decoration: underline;
          }
        }
        &.compact {
          float: right;

          a {
            background: transparent url('../img/compact-icon.png') left 1px no-repeat;
            display: inline-block;
            margin-right: 15px;
            padding-left: 15px;
          }
        }
        &.normal {
          float: right;

          a {
            background: transparent url('../img/normal-icon.png') left 1px no-repeat;
            display: inline-block;
            margin-right: 15px;
            padding-left: 15px;
          }
        }
        &.rss {
          float: right;

          a {
            background: transparent url('../img/rss-icon.png') center left no-repeat;
            display: inline-block;
            margin-right: 15px;
            padding-left: 15px;
          }
        }
      }
      .prompt {
        color: #999999;
        font: bold 12px $Consolas;
        margin-right: 3px;
        margin-top: 2px;
        text-shadow: 0 1px 0 #FFF;
      }
      span.prompt {
        float: left;
        margin-left: 3px;
      }
    }
    div.shortcuts {
      color: #999999;
      float: right;
      font: bold 12px $Consolas;
      padding-top: 4px;
      text-shadow: 0 1px 0 #FFF;
    }
  }
}
section.main {
  height: 100%;
  margin: 0 auto;
  position: relative;
  width: 95%;

  .site-notice {
    border-left: 1px solid #DDDDDD;
    display: block;
    margin-bottom: 0;
    margin-top: 30px;
    position: relative;
    text-align: left;
    z-index: 49;
    @include multi-border-radius(0, 3px, 3px, 0);

    span {
      text-decoration: underline;
    }
    &:hover {
      text-decoration: none;
    }
  }
  div.ruler {
    background: #DDDDDD;
    height: 100%;
    position: fixed;
    top: 0;
    width: 1px;
    z-index: 48;
  }
  div.left-y {
    margin-left: 0;
  }
  div.right-y {
    margin-left: 77%;
  }
  div.inner {
    box-sizing: border-box;
    float: left;
    padding-left: 1px;
    width: 81%;
  }
  aside.main {
    float: right;
    padding-top: 30px;
    width: 18%;

    div.save-nate {
      a {
        background: #0D353C;
        border: 4px solid #2D8DA8;
        color: #83D2DD;
        display: block;
        font: bold 14px $Helvetica;
        margin: 0 0 30px 15px;
        padding: 10px 0;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        @include border-radius;

        &:hover {
          background: #124B55;
          color: #8FE6F2;
        }
      }
    }
    section.ad {
      background: #FBFBFB;
      border: 1px solid #E8E8E8;
      border-bottom: 0;
      height: 231px;
      margin: 0 0 0 15px;
      width: auto;
      @include multi-border-radius(5px, 5px, 0, 0);

      &.wide-sky {
        border-bottom: 1px solid #E8E8E8;
        height: auto;
        margin-bottom: 30px;
        padding: 4px 0 4px 7px;
        @include border-radius(5px);
      }
    }
    div.go-pro {
      background: #FBFBFB;
      border: 1px solid #E8E8E8;
      margin: 0 0 30px 15px;
      text-align: center;
      padding: 18px 0;
      text-shadow: 0 1px 0 blue;
      @include multi-border-radius(0, 0, 5px, 5px);
    }
    section.tags {
      margin: 0 0 30px 15px;

      h1 {
        background: transparent url('../img/tags-icon.png') 0 0 no-repeat;
        color: #3BAAF3;
        font: bold 12px $Helvetica;
        padding-bottom: 5px;
        padding-left: 22px;
      }
      ul {
        margin: 0 0 15px 0;

        li {
          list-style-type: none;
          margin-left: 22px;
        }
      }
      a {
        color: #5AB6F4;
        display: block;
        font: normal 12px $Helvetica;
        padding: 3px 0;
        text-decoration: none;

        span {
          border-bottom: 1px solid #5AB6F4;
        }
        &:hover {
          span {
            border-bottom: 1px solid #2B6E9B;
            color: #2B6E9B;
          }
        }
        &.view-all {
          font-weight: bold;
          margin: 0 0 0 22px;
        }
        &.active {
          span {
            border-bottom: 1px solid #2B6E9B;
            color: #2B6E9B;
          }
        }
      }
      a.all-tags {
        font-weight: bold;
        margin-left: 22px;

        span {
          border-bottom: 1px solid #5AB6F4;
        }
      }
      div.alt-links {
        margin: 0 0 30px 22px;
      }
      a.alt-link {
        display: inline-block;
        font-weight: bold;

        &.active {
          color: #2B6E9B;
        }
      }
    }
    nav.footer {
      margin: 0 0 32px 15px;

      ul {
        margin: 0;

        li {
          background: transparent url('../img/api-icon.png') top left no-repeat;
          list-style-type: none;
          margin: 0;
          padding-left: 22px;

          a {
            color: #999;
            display: block;
            font: bold 12px/18px $Helvetica;
            padding: 3px 0;
            text-decoration: none;

            span {
              border-bottom: 1px solid #999;
            }
            &:hover {
              span {
                border-bottom: 1px solid #333;
                color: #333;
              }
            }
            &.active {
              span {
                border-bottom: 1px solid #333;
                color: #333;
              }
            }
          }
          &.api {
            padding-top: 1px;
          }
          &.twitter {
            background: transparent url('../img/twitter-icon.png') 4px 7px no-repeat;
          }
          &.pro {
            background: transparent url('../img/upgrade-icon.png') 2px 7px no-repeat;
          }
          &.groups {
            background: transparent url('../img/groups-icon.png') 2px 7px no-repeat;
          }
          &:first-of-type {
            a {
              padding-top: 0;
            }
          }
          &.blog {
            background: transparent url('../img/blog-icon.png') 3px 7px no-repeat;
          }
          &.roadmap {
            background: transparent url('../img/roadmap-icon.png') 2px 7px no-repeat;
          }
        }
      }
    }
    div.linode {
      background: transparent url('../img/linode.png') top left no-repeat;
      background-size: 100%;
      clear: both;
      float: left;
      margin-bottom: 30px;
      margin-left: 17px;
      padding-bottom: 20px;
      position: relative;
      width: 153px;

      a {
        display: block;
        height: 68px;
        color: #989898;

        span {
          font: bold 11px $Helvetica;
          left: 40px;
          position: absolute;
          top: 0px;
        }
      }
    }
    section.tag-detail {
      margin: -12px 0 30px 15px;

      div.heading {
        border-bottom: 1px solid #DDDDDD;

        h1 {
          background: #F5F3F5;
          color: #3BAAF3;
          display: inline-block;
          font: bold 12px $Helvetica;
          text-transform: uppercase;
          margin: 0 0 0 16px;
          padding: 0 6px;
          position: relative;
          top: 8px;

          span {
            color: #2770A1;
          }
        }
      }
    }
  }
  div.rochester-made {
    margin: 50px 0 30px 0;
    text-align: center;
  }
}
section.main-edit {
  div.inner {
    float: none;
    width: 100%;
  }
}
section.code {
  height: 230px;
  overflow: hidden;
  position: relative;
  z-index: 49;

  table.highlighttable {
    background: #F7F7F7;
    height: 100%;
  }
  td {
    padding: 0;
    vertical-align: top;

    &.linenos {
      border-right: 1px solid #DDDDDD;
      min-width: 28px;

      div.linenodiv {
        pre {
          background: #F7F7F7;
          border: 0;
          line-height: 16px;
          margin: 0;
          padding: 4px 3px 0 0;
          white-space: normal;
          @include border-radius(0);

          a, span {
            color: #999;
            display: block;
            font: normal 12px/16px $Consolas;
            margin: 0;
            padding: 0;
            text-align: right;
            text-decoration: none;
            white-space: nowrap;

            &:hover {
              cursor: pointer;
              text-decoration: underline;
            }
          }
        }
      }
    }
    &.code {
      background: #FFFFFF;

      div.highlight {
        pre {
          background: transparent;
          border: none;
          font: normal 12px/16px $Consolas;
          margin: 0;
          min-height: 220px;
          min-width: 589px;
          overflow-x: auto;
          padding: 4px 0 4px 0;
          white-space: pre;
          word-wrap: normal;
          @include border-radius(0);

          &::-webkit-scrollbar {
            background: #F7F7F7;
            height: 16px;
            width: 16px;
            -webkit-appearance: none;
          }
          &::-webkit-scrollbar-thumb {
            border: 4px solid #F7F7F7;
            border-radius: 16px;
            background-color: #C7C7C7;
          }

          > span {
            display: block;
            padding: 0 4px;
          }
        }
      }
    }
  }
  a.expand, a.view-full {
    background: #FFF url('../img/expand.png') 15px 18px no-repeat;
    border-top: 1px solid #F1F1EE;
    bottom: 0;
    color: #999999;
    display: block;
    font: bold 12px $Helvetica;
    padding: 15px 40px 15px 40px;
    position: absolute;
    text-decoration: none;
    text-transform: uppercase;
    width: 100%;
    @include box-shadow(0, -25px, 25px, #FFF);

    span.collapse {
      display: none;
    }
    span.lines {
      font: normal 10px $Helvetica;
      margin-left: 5px;
      vertical-align: 1px;
    }
    &:hover {
      color: #3BAAF3;
      font-weight: bold;
    }
    &:focus {
      outline: none;
    }
  }
  a.view-full {
    background: #FFF url('../img/view-full.png') 15px 17px no-repeat;
  }
  textarea.raw, textarea.description {
    display: none;
  }
  div.markdown {
    margin: 0 15px;
    min-height: 173px;
    padding: 13px 0 4px 0;

    pre {
      min-height: 0;
      margin: 20px 0 !important;
    }
    iframe.twitter-tweet {
      margin: 20px 0 !important;
      width: 100%;
    }
  }
}
footer.snipt-attrs {
  clear: both;
  padding-bottom: 20px;

  ul.attrs {
    margin: 14px 0 0 15px;

    li {
      background: transparent url('../img/calendar-icon.png') top left no-repeat;
      color: #999;
      display: inline;
      font: normal 12px $Helvetica;
      margin-right: 15px;
      padding: 1px 0 0 24px;

      a {
        color: #999;
        font: normal 12px $Helvetica;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
      &.author {
        background-image: none;
        padding-left: 0;

        span.avatar {
          background-color: transparent;
          background-position: top left;
          background-repeat: no-repeat;
          display: inline-block;
          height: 15px;
          margin-right: 7px;
          vertical-align: -3px;
          width: 15px;
          @include border-radius(3px);
        }
        span.pro {
          a {
            color: #3299B7;
            font: italic bold 10px $Helvetica;
            margin-left: 5px;
            text-transform: uppercase;

            &:hover {
              text-decoration: underline;
            }
          }
        }
        span.gittip {
          a {
            background: #DFF0D8;
            border: 1px solid #CBDDBB;
            color: #468847;
            font: bold 10px $Helvetica;
            margin-left: 5px;
            padding: 0 3px;
            text-transform: uppercase;
            @include border-radius(3px);

            span {
              font-family: $Consolas;
            }
            &:hover {
              background: #E6F7DF;
              text-decoration: none;
            }
          }
        }
      }
      &.comments {
        background: transparent url('../img/comments-icon.png') 0 2px no-repeat;
      }
      &.raw {
        background-image: none;
        float: right;
        margin-right: 15%;
        padding-left: 0;
      }
      &.report-spam {
        background-image: none;
        float: right;

        a {
          color: #eaa4a6;
        }
      }
      &.tweet {
        background: none;
        margin: -1px 0 0 0;
        padding: 0;
        vertical-align: -6px;

        a {
          color: transparent;
        }
      }
    }
  }
}
article.snipt {
  margin: 30px 0;
  position: relative;

  div.number {
    color: #CCC;
    font: normal 12px $Helvetica;
    left: -115px;
    position: absolute;
    text-align: right;
    top: 4px;
    width: 100px;
  }
  div.container {
    background: #FFF;
    border: 1px solid #DDD;
    border-left: 0;
    float: left;
    position: relative;
    width: 85%;

    div.ruler {
      background: #DDD;
      height: 1px;
      left: -3000px;
      position: absolute;
      top: auto;
      width: 3000px;
    }
    div.top-x {
      top: -1px;
    }
    div.bottom-x {
      bottom: -1px;
    }
    div.ad-x {
      bottom: 24px;
    }
    header {
      border-bottom: 1px solid #F1F1EE;
      min-height: 58px;
      @include inset-box-shadow(0, -1px, 0, #FFF);
      @include vertical-gradient(#FFF, #FFFAF2);

      h1 {
        clear: left;
        font: bold 16px/20px $Helvetica;
        margin: 8px 15px 10px 15px;

        a {
          color: #666;
          display: block;
          overflow: hidden;
          text-overflow: ellipsis;
          text-decoration: none;
          white-space: nowrap;
          -webkit-transition: color .03s linear;
          -moz-transition: color .03s linear;
          -o-transition: color .03s linear;
          transition: color .03s linear;

          &:hover {
            color: #3BAAF3;
          }
        }
      }
      h2 {
        border: 1px solid #E9E9E9;
        border-top: 0;
        color: #73BBC5;
        display: inline-block;
        font: normal 12px $Helvetica;
        margin: 0 0 0 15px;
        padding: 3px 8px 2px 8px;
      }
    }
    section.emacs, section.default {
      a.expand {
        @include box-shadow(0, -25px, 25px, #F8F8F8);
      }
    }
    section.friendly {
      a.expand {
        @include box-shadow(0, -25px, 25px, #F0F0F0);
      }
    }
    section.fruity {
      a.expand {
        @include box-shadow(0, -25px, 25px, #111111);
      }
    }
    section.manni {
      a.expand {
        @include box-shadow(0, -25px, 25px, #F0F3F3);
      }
    }
    section.monokai {
      a.expand {
        @include box-shadow(0, -25px, 25px, #272822);
      }
    }
    section.native {
      a.expand {
        @include box-shadow(0, -25px, 25px, #202020);
      }
    }
    section.perldoc {
      a.expand {
        @include box-shadow(0, -25px, 25px, #EEEEDD);
      }
    }
    section.tango {
      a.expand {
        @include box-shadow(0, -25px, 25px, #F8F8F8);
      }
    }
    &:after {
      background: transparent url('../img/snipt-drop-shadow.png') top left no-repeat;
      bottom: -15px;
      content: "";
      display: block;
      height: 15px;
      position: absolute;
      right: 0px;
      width: 318px;
      z-index: 51;
    }
    div.markdown {
      line-height: 20px;

      h1, h2, h3, h4, h5, h6 {
        line-height: 29px;
        margin-bottom: 9px;
        margin-top: 0;
      }
      h1 {
        font-size: 20px;
      }
      h2 {
        font-size: 19px;
      }
      h3 {
        font-size: 18px;
      }
      h4 {
        font-size: 17px;
      }
      h5 {
        font-size: 16px;
      }
      h6 {
        font-size: 15px;
      }
      li {
        line-height: 20px;
        margin: 9px 0;
      }
      iframe {
        max-width: 100%;
      }
    }
    &.with-description {
      td.linenos {
        padding-bottom: 20px;
      }
    }
  }
  aside {
    float: left;
    margin: 23px 0 0 0;
    width: 14%;

    ul.options {
      margin: 0;

      li {
        list-style-type: none;
        margin: 2px 0;

        a {
          background: rgba(128, 128, 128, .15) url('../img/edit-icon.png') 14px center no-repeat;
          color: #000;
          display: block;
          font: bold 12px $Helvetica;
          opacity: .5;
          padding: 7px 10px 7px 35px;
          position: relative;
          text-decoration: none;

          &:hover, &.hover {
            background-color: rgba(128, 128, 128, .18);
            opacity: 1;
            text-decoration: none;
          }
          &.edit {
            &:after {
              background: #F5F2F3;
              content: "";
              height: 20px;
              position: absolute;
              right: 5px;
              top: -3px;
              width: 3px;
              -webkit-transform: rotate(-45deg);
              -moz-transform: rotate(-45deg);
            }
          }
          &.copy {
            background-image: url('../img/copy-icon.png');
          }
          &.download {
            background-image: url('../img/download-icon.png');
          }
          &.history {
            background-image: url('../img/copy-icon.png');
          }
          &.secure-view-log {
            background-image: url('../img/copy-icon.png');
          }
          &.embed {
            background-image: url('../img/embed-icon.png');
          }
          &.favorite {
            background-image: url('../img/favorite-icon.png');
          }
        }
      }
    }
    section.meta {
      padding-top: 10px;

      h2 {
        background: transparent url('../img/snipt-tags-icon.png') 15px center no-repeat;
        color: #999999;
        font: bold 12px $Helvetica;
        padding: 7px 0 7px 35px;
      }
      ul {
        margin: 0;

        li {
          color: #999;
          font: normal 12px $Helvetica;
          list-style-type: none;
          margin: 5px 10px 5px 35px;

          a {
            border-bottom: 1px solid #999;
            color: #999;
            display: inline-block;
            font: normal 12px $Helvetica;
            max-width: 72px;
            overflow: hidden;
            text-overflow: ellipsis;
            text-decoration: none;
            white-space: nowrap;

            &:hover {
              border-color: #000;
              color: #000;
            }
          }
        }
        &.expanded {
          li {
            display: block;
          }
        }
      }
    }
  }
  section.description {
    padding: 10px 20px 20px 20px;
    position: relative;
    z-index: 50;
    @include box-shadow(0, -10px, 15px, white);

    h1 {
      border-bottom: 1px dotted #E9E9E9;
      color: #797979;
      font: bold 12px $Helvetica;
      margin: 0;
      margin-bottom: 15px;
      padding-bottom: 10px;
      text-transform: uppercase;
    }
  }
  div.expanded {
    section.code {
      height: auto;

      div.highlight {
        pre {
          margin-bottom: 46px !important;
        }
      }
      div.markdown {
        margin-bottom: 47px;

        pre {
          margin-bottom: 20px !important;
        }
      }
      a.expand {
        background-image: url('../img/collapse.png');
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;

        span.expand {
          display: none;
        }
        span.collapse {
          display: inline;
        }
        span.lines {
          display: none;
        }
      }
    }
  }
  div.modal {
    textarea {
      font: normal 12px/16px $Consolas;
      height: 200px;
      margin: 0;
      width: 515px;
    }
  }
  &.selected {
    div.container {
      -webkit-box-shadow: 0 0 20px #85D2DD;
      -moz-box-shadow: 0 0 20px #85D2DD;
      box-shadow: 0 0 20px #85D2DD;

      &:after {
        display: none;
      }
    }
  }
  &.favorited {
    div.container {
      header {
        @include vertical-gradient-with-image(url('../img/favorited-icon.png') top right no-repeat, #FFF, #FFFAF2);

        h1 {
          a {
            padding-right: 25px;
          }
        }
      }
    }
    &.compact {
      div.container {
        header {
          @include vertical-gradient-with-image(url('../img/favorited-icon.png') right -12px no-repeat, #FFF, #FFFAF2);
          background-size: 25px 37px;
        }
      }
    }
  }
  &.blog-post {
    div.container {
      header {
        @include vertical-gradient(#FFF, #F0F4FC);
        @include inset-box-shadow(0, -1px, 0, #E3E9F5);
      }
    }
    &.compact {
      div.container {
        header {
          @include inset-box-shadow(0, -1px, 0, #F1F5FC);
        }
      }
    }
  }
  &.blog-post.favorited {
    div.container {
      header {
        @include vertical-gradient-with-image(url('../img/favorited-icon.png') top right no-repeat, #FFF, #F0F4FC);

        h1 {
          a {
            padding-right: 25px;
          }
        }
      }
    }
    &.compact {
      div.container {
        header {
          @include vertical-gradient-with-image(url('../img/favorited-icon.png') right -12px no-repeat, #FFF, #F0F4FC);
          @include inset-box-shadow(0, -1px, 0, #F1F5FC);
          background-size: 25px 37px;
        }
      }
    }
  }
  &.snipt-expand {
    div.container {
      section.code {
        height: auto;
      }
    }
  }
  &.compact {
    margin: 0;

    div.container {
      border-bottom: 0;
      width: 100%;

      div.bottom-x {
        display: none;
      }
      header {
        border-color: #FFFBF3;
        min-height: 0;

        h1 {
          margin: 8px 15px 8px 15px;
        }
      }
      &:after {
        display: none;
        -webkit-box-shadow: 0 0 20px #85D2DD;
        -moz-box-shadow: 0 0 20px #85D2DD;
        box-shadow: 0 0 20px #85D2DD;

        &:after {
          display: none;
        }
      }
    }
    &.selected {
      div.container {
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;

        &:after {
          display: none;
        }
      }
    }
    &:first-of-type {
      margin-top: 30px;
    }
    &:last-of-type {
      margin-bottom: 50px;

      div.container {
        border-bottom: 1px solid #DDDDDD;
      }
    }
  }
}
article.private-snipt {
  div.container {
    header {
      @include vertical-gradient-with-image(url('../img/private-icon.png') top right no-repeat, #FFF, #FFFAF2);

      h1 {
        a {
          padding-right: 25px;
        }
      }
    }
  }
  &.blog-post {
    div.container {
      header {
        @include vertical-gradient-with-image(url('../img/private-icon.png') top right no-repeat, #FFF, #F0F4FC);

        h1 {
          a {
            padding-right: 25px;
          }
        }
      }
    }
  }
  &.compact {
    div.container {
      header {
        @include vertical-gradient-with-image(url('../img/private-icon.png') right -7px no-repeat, #FFF, #FFFAF2);
        background-size: 24px 29px;
      }
    }
  }
}
article.secure-snipt {
  div.container {
    header h1:after {
      color: #468847;
      content: 'secure';
      display: block;
      font-size: 12px;
      text-transform: uppercase;
      position: absolute;
      right: 48px;
      top: 21px;
    }
  }
}
div.pagination {
  margin: 0 15px 35px 15px;
  text-align: center;

  ul {
    background: #FFF;

    li {
      a {
        color: #3BAAF3;
      }
    }
  }
}
div.modal {
  .modal-header {
    .close {
      line-height: 20px;
      margin-top: 0;
    }
    h3 {
      font-size: 20px;
      line-height: 0;

      span {
        display: inline-block;
        line-height: 27px;
        max-width: 400px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    h4 {
      color: #AAA;
      font-size: 16px;
      margin: 0;
    }
  }
}
div#disqus_thread {
  margin-bottom: 0;
  margin-left: 15px;
  width: 97%;

  #dsq-content {
    margin-top: -44px;

    #dsq-global-toolbar {
      margin-bottom: 18px;
      margin-top: 0;
    }
    #dsq-sort-by {
      display: none;
    }
    .dsq-comment-text {
      color: #666;
    }
    h3 {
      display: none;
    }
    .dsq-textarea-wrapper {
      overflow: hidden;
    }
  }
  #dsq-footer {
    display: none;
  }
}
div#keyboard-shortcuts {
  table {
    margin-bottom: 0;
  }
}
div.profile {
  background: rgba(128, 128, 128, .08);
  margin: 0 0 30px 15px;
  @include border-radius(8px);

  img {
    @include multi-border-radius(8px, 8px, 0, 0);
  }
  div.meta {
    font: bold 14px $Helvetica;
    padding: 10px;

    div.username {
      max-width: 95px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    div.member-since {
      color: #909090;
      font: bold 10px $Helvetica;
      margin-top: 6px;
      text-transform: uppercase;
    }
  }
  div.urls {
    border-top: 1px solid #D8D8D8;
    color: #909090;
    line-height: 15px;
    font-size: 11px;
    margin-top: 10px;
    padding: 9px 0 5px 0;

    a {
      display: block;
    }
  }
  a.pro {
    background: #DFDFDF;
    color: #3299B7;
    display: block;
    font: bold italic 11px $Helvetica;
    margin: 0 10px 10px 10px;
    padding: 5px 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    @include border-radius(3px);
    @include box-shadow(0, 0, 3px, #FFF);

    &:hover {
      background: #D8D8D8;
    }
  }
  a.gittip {
    background: #DFF0D8;
    clear: left;
    color: #468847;
    display: block;
    font: bold 11px $Helvetica;
    margin: 0 10px 10px 10px;
    padding: 4px 0;
    text-align: center;
    text-transform: uppercase;
    @include border-radius(3px);
    @include box-shadow(0, 0, 3px, #B4C4A6);

    &:hover {
      background: #E6F7DF;
      text-decoration: none;
    }
  }
  &.team-settings {
    margin-top: -20px;

    span.title {
      color: #949494;
      display: block;
      font-size: 11px;
      margin-bottom: 10px;
      text-transform: uppercase;
    }
    a {
      background: #dbdbdb;
      box-sizing: border-box;
      display: block;
      margin-bottom: 5px;
      padding: 5px 8px;
      text-decoration: none;
      width: 100%;
      @include border-radius(3px);

      &:hover {
        background: #c8c8c8;
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}
div.empty-snipts {
  background: rgba(128, 128, 128, .08);
  font: bold 18px $Helvetica;
  margin: 30px 30px 0 30px;
  padding: 10px;
  text-align: center;
  text-shadow: 0 1px 1px #FFF;
  @include border-radius(8px);
}
div.site-notice {
  border-left: 0;
  margin: 30px 30px 30px 0;
  padding-right: 14px;
  text-align: center;
  @include multi-border-radius(0, 4px, 4px, 0);

  a {
    color: #3A87AD;
    font-weight: bold;
    text-decoration: underline;
  }
}
a.go-pro {
  background: transparent url('../img/showroom-ad.jpg') top left no-repeat;
  border: 1px solid #DDDDDD;
  border-left: 0;
  border-right: 0;
  color: #797979;
  display: block;
  height: 75px;
  margin: 30px 0;
  width: 749px;
}
div.get-support {
  bottom: 20px;
  right: 20px;
  position: fixed;
}
div.dmca {
  background: #e8e8e8;
  border-top: 1px solid #DDDDDD;
  font-size: 18px;
  line-height: 26px;
  margin-top: 50px;
  padding: 40px;
  position: relative;
  text-align: center;
  z-index: 999;
}

// Pages
body.account {
  section.profile {
    aside {
      float: left;
      padding-top: 35px;
      width: 16%;

      ul {
        li {
          a {
            color: #43A8C6;
          }
          &.active {
            a {
              background: #DDDDDD;
              color: #797979;
              text-shadow: 0 1px 0 white;
            }
          }
        }
      }
    }
    section.content {
      background: white;
      border-bottom: 1px solid #DDDDDD;
      border-left: 4px solid #DDDDDD;
      box-sizing: border-box;
      float: right;
      min-height: 272px;
      width: 84%;
      @include multi-border-radius(0, 0, 0, 10px);

      div.def {
        background: #FAFAFA;
        border: 1px solid #DDDDDD;
        margin: 15px;
        padding: 30px 10px 10px;
        position: relative;
        @include border-radius;

        &:before {
          background: #F5F5F5;
          border: 1px solid #DDDDDD;
          color: #43A8C6;
          content: attr(data-title);
          left: -1px;
          font: normal 12px $Helvetica;
          padding: 3px 7px;
          position: absolute;
          top: -1px;
          @include multi-border-radius(4px, 0, 4px, 0);
        }
      }
      p.alert {
        line-height: 20px;
        margin: 15px;
      }
      form {
        span.help-block {
          color: #999;
          font: normal 12px $Helvetica;
        }
        div.control-group:last-of-type {
          margin-bottom: 0;

          input, select {
            margin-bottom: 0;
          }
          span.help-block {
            margin-bottom: 0;
            margin-top: 10px;
          }
        }
        div.form-actions {
          margin-top: 15px;
          padding-bottom: 0;
          @include vertical-gradient(#F5F5F5, white);
        }
      }
    }
  }
}
body.blog {
  article.snipt {
    section.code {
      height: auto;
    }
  }
}
body.detail {
  section.main {
    div.inner {
      section.snipts {
        article.snipt {
          div.container {
            header {
              h1 {
                a {
                  white-space: normal;
                }
              }
            }
            section.code {
              height: auto;
            }
            &.full-screened {
              &:after {
                display: none;
              }
            }
          }
        }
      }
    }
  }
}
body.error {
  section.main {
    div.inner {
      color: #CCC;
      font: bold 50px $Helvetica;
      padding: 63px 0;
      text-align: center;
      text-transform: uppercase;
    }
  }
  div.rochester-made {
    margin-top: 54px;
  }
}
body.is-pro {
  section.main {
    div.inner {
      section.snipts {
        article.snipt {
          margin-bottom: 0;
          margin-top: 30px;

          &.compact {
            margin: 0;
          }
          &:first-of-type {
            margin-top: 30px;
          }
          &:last-of-type {
            margin-bottom: 50px;
          }
        }
      }
    }
  }
  div.get-support {
    display: none;
  }
}
body.pro {
  div.pro-hero {
    background: transparent url('../img/pro-hero-bg.png') top left repeat;
    border-bottom: 1px solid #DDDDDD;
    color: #797979;
    font: normal 36px $RockwellBoldItalic;
    padding: 30px 0;
    position: relative;
    text-align: center;
    text-shadow: 0 1px 0 white;
    z-index: 50;

    span {
      color: #3299B7;
    }
    span.pro {
      font: bold italic 33px $Helvetica;
    }
  }
  div.static-box {
    border-top: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-top: 20px;
    position: relative;
    z-index: 49;
    @include multi-border-radius(0px, 0px, 4px, 4px);

    p:first-of-type {
      margin-top: 10px;
    }
  }
  h2 {
    span.pro {
      color: #3299B7;
      font-style: italic;
      font-weight: bold;
    }
  }
  h3, h4 {
    text-align: center;
  }
  h3 {
    font-size: 23px;

    span {
      color: #999999;
    }
    span.pro {
      color: #3299B7;
      font-style: italic;
      font-weight: bold;
    }
  }
  h4 {
    margin-bottom: 35px;
  }
  a.stripe {
    background: #F2F2F4;
    border: 1px solid #DDDDDD;
    display: block;
    float: right;
    margin: 3px 0 0 0;
    padding: 5px 10px;
    opacity: .6;
    @include border-radius();

    img {
      width: 50px;
    }
    &:hover {
      opacity: 1;
    }
  }
  form {
    div.cards {
      img {
        height: 18px;
      }
    }
    select.exp-month {
      margin-right: 5px;
    }
    legend {
      font-size: 13px;
    }
    div.security {
      background: #FCF8E3 url('../img/private-icon.png') 7px -15px no-repeat;
      border: 1px solid #FBEED5;
      color: #C09853;
      display: inline-block;
      font-size: 12px;
      margin-left: 10px;
      margin-top: -1px;
      padding: 6px 10px 6px 33px;
      @include border-radius;

      a {
        color: #C09853;
        font-weight: bold;
        text-decoration: underline;

        &:hover {
          color: #816638;
        }
      }
    }
    fieldset {
      position: relative;
    }
    div.payment-errors {
      display: none;
    }
    div.payment-loading {
      background: rgba(#F2F2F2, .6);
      display: none;
      height: 345px;
      left: 0;
      position: absolute;
      top: 156px;
      width: 100%;

      span {
        background: #FFF;
        border: 3px solid #3299B7;
        color: #666;
        display: block;
        font-weight: bold;
        margin: 122px auto 0 auto;
        padding: 10px;
        text-align: center;
        width: 120px;
        @include border-radius;
      }
      &.-teams {
        height: 581px;
        top: 449px;
      }
    }
    div.stripe {
      color: #C2C2C2;
      font: bold 11px/15px $Helvetica;
      margin: 10px 65px 0 92px;
      text-align: center;

      a {
        color: #a2a2a2;

        &:hover {
          text-decoration: underline;
        }
      }
    }
    &.form-horizontal {
      fieldset {
        padding-top: 18px;
      }
      div.form-actions {
        margin-top: 18px;
      }
    }
  }
  div.login-first {
    background: #FFF;
    border: 3px solid #3299B7;
    color: #666;
    display: block;
    font-size: 18px;
    font-weight: bold;
    margin: 0 auto 10px auto;
    padding: 20px;
    text-align: center;
    width: 400px;
    @include border-radius;
  }
}
body.search {
  div.empty-snipts {
    margin-top: 20px;
  }
  div.static-box {
    border-left: 0;
    margin-left: 0;
    margin-right: 30px;
    @include multi-border-radius(0px, 4px, 4px, 0px);

    form {
      margin-bottom: 0;

      input.search-query {
        width: 73%;
      }
      label.mine-only {
        margin: -7px 10px 0 10px;

        input {
          margin-right: 7px;
        }
      }
      button {
        padding: 4px 16px 4px;
      }
    }
  }
}
body.snipt-page {
  section.main {
    div.inner {
      section.snipts {
        article.snipt {
          div.container {
            header {
              h1 {
                a {
                  white-space: normal;
                }
              }
            }
            section.code {
              height: auto;
            }
          }
        }
      }
    }
    aside.api-info {
      float: right;
      width: 190px;

      div.api-inner {
        background: rgba(#99D0DA, .3);
        font: normal 11px $Helvetica;
        margin: 0 0 30px 15px;
        padding: 10px;
        @include border-radius(8px);

        h5 {
          margin-bottom: 5px;
          margin-top: 0;
        }
        ul {
          margin: 0;

          li {
            margin: 2px 0;
            list-style-type: none;

            input {
              margin-bottom: 0;
              margin-top: 5px;
              width: 145px;
            }
          }
        }
      }
      &.api-creds {
        div.api-inner {
          margin-bottom: 0;
        }
      }
      &.immediate-help {
        margin-top: 20px;

        p {
          margin: 0;
        }
      }
    }
    aside.main {
      nav.footer {
        float: left;
      }
    }
  }
  div#disqus_thread {
    width: 97%;
  }
}
body.signup {
  form.form-horizontal {
    padding: 0;
    padding-bottom: 20px;

    fieldset {
      padding-top: 0 !important;
    }
  }
}
body.static {
  .static-box {
    background: rgba(#FFF, .65);
    border: 1px solid #DDDDDD;
    margin: 30px;
    padding: 20px;
    @include border-radius(4px);

    div.form-actions {
      margin-bottom: 0;
      padding-bottom: 0;
      @include vertical-gradient(#F5F5F5, #FBFBFB);

      a.pull-right {
        margin-left: 5px;
      }
    }
    div.alert {
      ul {
        margin: 0;

        li {
          list-style-type: none;
        }
      }
    }
    div.alert-info {
      a {
        color: #3A87AD;
        text-decoration: underline;
      }
    }
    ul {
      margin-bottom: 15px;
      margin-top: 15px;

      li {
        font-size: 13px;
        line-height: 18px;
        margin: 5px 0;
      }
    }
    h2 {
      font-size: 24px;
      line-height: 36px;
      margin: 0;
    }
    h3 {
      margin-bottom: 20px;
    }
    p {
      line-height: 20px;
      margin: 15px 0;
    }
    span.pro {
      color: #3299B7;
      font-family: $Helvetica;
      font-style: italic;
      font-weight: bold;
    }
  }
  aside.main {
    padding-top: 30px;

    nav.footer {
      margin-top: 10px;
    }
  }
  div.alert-alone {
    margin: 0;
  }
  form.form-horizontal {
    legend + .control-group {
      margin-top: 0;
    }
    div.form-actions {
      margin-top: 27px;
      padding-left: 0;
      text-align: center;
    }
    fieldset {
      padding-top: 27px;

      legend {
        margin: 0;
      }
    }
  }
  div#disqus_thread {
    margin-left: 20px;
    width: 96%;

    div#dsq-content {
      margin-top: 23px;
    }
  }
}
div.info {
  background: #415A63 url('../img/homepage-header-bg.jpg') top center no-repeat;
  color: white;
  font: bold 24px $Helvetica;
  margin-bottom: 30px;
  padding: 60px 0;
  text-align: center;
  @include multi-border-radius(3px, 3px, 0, 0);

  span {
    color: #28C548;
  }
  h4 {
    margin-bottom: 0;
    margin-top: 40px;
  }
  p.sub {
    color: #F2F2F2;
    font: normal 18px/24px $Helvetica;
    margin-bottom: 0;
    margin-top: 40px;
    padding: 0 60px;
    text-shadow: 0 1px 0 #153A42;

    a {
      color: white;
      text-decoration: underline;
    }
  }
}
body.pro-signup {
  div.info {
    padding: 49px 0;
  }
  form ul.features {
    margin: 20px auto 0 auto;
    padding: 0;
    width: 328px;

    li {
      font-size: 16px;
      font-weight: normal;
      line-height: 22px;
      margin: 10px 20px;
      text-align: left;
    }
  }
}
body.pro-signup-complete {
  div.info {
    margin-bottom: 0;
    @include border-radius(3px);

    p.sub {
      margin-top: 20px;
      padding: 0 90px;
    }
  }
  form.form-horizontal {
    padding-bottom: 0;
  }
}
body.stats {
  table {
    margin-bottom: 0;
  }
}
body.tags {
  div.alert {
    margin: 30px 30px 10px 30px;
  }
  div.static-box {
    margin-top: 10px;

    ul {
      margin-top: 0;
    }
  }
  div.pagination {
    margin-bottom: 8px;
    margin-top: 20px;
  }
  aside.main {
    padding-top: 30px;
  }
}
body.editing {
  section.main {
    div.inner {
      width: 100%;
    }
  }
}
body.editing {
  div.right-y {
    display: none;
  }
  header.main, header.sub {
    display: none;
  }
  header.fixed-save {
    background: #FFF url('../img/header-fixed-save.gif') top left repeat;
    border-bottom: 1px solid #DDDDDD;
    height: 40px;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 50;

    div.inner {
      float: none;
      margin: 0 auto;
      padding-top: 6px;
      width: 95%;

      .cancel, .save, .save-and-close {
        float: right;
        margin-left: 10px;
      }
    }
  }
  section.main {
    div.inner {
      section.snipts {
        article.snipt {
          margin-bottom: 0;
          margin-top: 15px;

          div.container {
            box-sizing: border-box;
            width: 78%;

            header {
              h1 {
                a {
                  white-space: normal;
                }
              }
            }
            section.code {
              height: auto;

              td.code {
                div.highlight {
                  pre {
                    width: 810px;
                  }
                }
              }
            }
            &.full-screened {
              &:after {
                display: none;
              }
            }
          }
          aside {
            margin-right: 0;
          }
          footer {
            ul.attrs {
              li.raw {
                margin-right: 100px;
              }
            }
          }
        }
        article.editing {
          margin-top: 50px;

          &:first-of-type {
            margin-top: 50px;
          }
          div.container {
            width: 78%;

            section.code {
              padding: 0;

              .CodeMirror {
                cursor: text;
                font: normal 12px/16px $Consolas;
              }
              .CodeMirror-fullscreen {
                display: block;
                left: 0;
                height: 100%;
                position: fixed;
                top: 0;
                width: 100%;
                z-index: 9999;
              }
              textarea.editor {
                border: 0;
                margin: 0;
                width: 684px;
              }
            }
            header {
              h1 {
                margin: 4px 0 5px 8px;

                input {
                  color: #666;
                  font: bold 16px/20px $Helvetica;
                  margin: 0;
                  width: 97%;
                }
              }
              h2 {
                border: none;
              }
            }
          }
          aside {
            margin-top: 0;
            width: 22%;

            div.type-lexer {
              padding-right: 10px;
            }
            div.chosen-container {
              width: 100% !important;
            }
            label {
              margin: 20px 0;

              & > span {
                color: #32A8F6;
                display: block;
                font: bold 12px $Helvetica;
                margin-bottom: 5px;
                text-transform: uppercase;
              }
            }
            div.in {
              padding-left: 10px;

              & > label {
                margin-top: 6px;
              }
              textarea {
                box-sizing: border-box;
                height: 100px;
                font: normal 12px $Helvetica;
                padding: 7px 9px;
                width: 96%;
              }
              label.public, label.blog-post, label.secure {
                background: #EFEEEF;
                border: 1px solid #DDDDDD;
                cursor: pointer;
                margin-right: 11px;
                padding: 3px 5px;
                @include border-radius;

                input {
                  display: inline-block;
                  margin: 4px 4px 0 4px;

                  &:focus {
                    outline: none;
                  }
                }
                span {
                  color: #7B7B79;
                  display: inline-block;
                  text-transform: none;
                  vertical-align: -3px;
                }
                div.info {
                  background: transparent;
                  color: #7B7B79;
                  font-size: 12px;
                  font-style: italic;
                  margin: 0;
                  padding: 10px;
                }
                &.is-private {
                  background: #EFEEEF;

                  div.info.private {
                    display: block;
                  }
                  div.info.public {
                    display: none;
                  }
                }
                &.is-public {
                  background: #F2DEDE;
                  border: 1px solid #EED3D7;

                  div.info.private {
                    display: none;
                  }
                  div.info.public {
                    display: block;
                  }
                  span {
                    color: #B94A48;
                  }
                }
                &.is-blog-post {
                  background: #DAE3EE;
                  border: 1px solid #C8D1DE;
                }
                &.secure {
                  &.is-secure {
                    background: #DFF0D8;
                  }
                  &.disabled {
                    opacity: .2;
                  }
                }
              }
            }
            div.editor-settings {
              padding: 0 10px;

              h2 {
                border-bottom: 1px solid #DDDDDD;
                color: #7D7D7B;
                font: bold 12px $Helvetica;
                margin-bottom: 20px;
                padding-bottom: 5px;
                text-transform: uppercase;

                a {
                  float: right;
                  font: bold 10px $Helvetica;
                  margin-top: 2px;
                }
              }
              h4 {
                background: #EFEEEF;
                border: 1px solid #DDDDDD;
                font: normal 11px/14px $Helvetica;
                margin: 0 0 20px 0;
                padding: 7px 6px;
                @include border-radius;
              }
              label {
                margin: 20px 0 0 0;
              }
              label:first-of-type {
                margin: 0;
              }
            }
          }
        }
      }
    }
  }
  div.rochester-made {
    width: 840px;
  }
  div.site-notice, a.go-pro {
    margin-right: 100px;
  }
  div.showroom-container {
    background: transparent url('http://showroom.is/static/img/background.jpg') top left repeat;
    border: 1px solid #DDDDDD;
    border-left: 0;
    margin: 30px 0;

    a.go-pro {
      border: 0;
      margin: 0 auto;
    }
  }
}

html.homepage {
  background: white;
}
body.homepage {
  background: white;

  a.button {
    background: #54737E;
    border: 2px solid white;
    color: white;
    font: bold 16px $Helvetica;
    display: inline-block;
    margin-top: 30px;
    margin-left: 20px;
    padding: 5px 20px 7px 20px;
    text-decoration: none;
    @include border-radius;

    &:hover {
      background: #39525C;
    }
  }
  header.main {
    background: #415A63 url('../img/homepage-header-bg.jpg') top center no-repeat;
    height: auto;
    @include inset-box-shadow(0, -6px, 17px, #31454D);

    div.container {
      border-left: 0;

      h1.main-logo {
        margin-left: 20px;

        a {
          float: none;
          margin-left: 0;
        }
      }
      nav {
        padding: 16px 0 0 0;

        ul {
          margin: 0;
          text-align: right;

          li {
            display: inline-block;
            list-style-type: none;

            a {
              color: #90A5AD;
              display: inline-block;
              font: bold 16px $Helvetica;
              padding: 5px 20px 7px 20px;

              &:hover {
                color: white;
                text-decoration: none;
              }
              &.button {
                color: white;
              }
            }
          }
        }
      }
    }
    div.sub {
      padding: 58px 0;
      text-align: center;

      h2 {
        color: white;
        font: normal 28px $RockwellBoldItalic;
        margin: 0;
      }
      h3 {
        color: #A4C9CD;
        font: normal 20px $Rockwell;
        margin: 0;
        margin-top: 10px;
      }
    }
  }
  section.coders {
    overflow: hidden;
    padding: 30px 0 70px 0;
    text-align: center;

    h4 {
      color: #344547;
      font: normal 20px $Rockwell;
      margin: 0;
      margin: 50px 0;
    }
    a.button {
      background: #D4F5F9;
      border-color: #88D2DC;
      color: #3B525A;
      margin-bottom: 30px;
      margin-left: 0;

      &:hover {
        background: #e9f7f9;
      }
    }
    div.faces {
      border-left: 0;
      border-right: 0;
      height: 50px;
      margin: 0 auto;
      width: 5000px;

      a {
        display: block;
        float: left;
        height: 50px;
        width: 50px;

        img {
          // From: http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html
          filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
          filter: gray; /* IE6-9 */
          -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
          height: 50px;
          width: 50px;
        }
      }
    }
  }
  section.features {
    header {
      border-bottom: 2px solid #EAEAEA;
      text-align: center;

      h1 {
        color: #3A5159;
        font: bold 26px $Rockwell;
      }
    }
    div.row {
      div.inner {
        margin: 0 auto;
        width: 360px;
      }
      h2 {
        color: #3A5159;
        font: bold 20px $Rockwell;
        margin-bottom: 5px;
        margin-top: 35px;
      }
      p {
        color: #656565;
        font: 500 16px/24px $Helvetica;

        code.good {
          color: #468847;
        }
      }
      &.feature {
        height: 232px;
        margin: 10px 0 10px 43px;
      }
      &.blog {
        background: url('../img/homepage-feature-blog.png') 699px 34px no-repeat;
        height: 176px;
      }
      &.browse {
        background: url('../img/homepage-feature-browse.png') 720px top no-repeat;
        height: 140px;
      }
      &.share {
        background: url('../img/homepage-feature-share.png') left top no-repeat;
        height: 176px;
      }
      &.store {
        background: url('../img/homepage-feature-store.png') left top no-repeat;

        div.inner {
          margin-top: 65px;
        }
      }
    }
  }

  /* Large desktop */
  @media (min-width: 1200px) {
    section.features {
      div.feature {
        div.inner {
          margin: 0 auto;
          width: 560px;
        }
        &.blog {
          background: url('../img/homepage-feature-blog.png') 914px 27px no-repeat;
        }
        &.browse {
          background: url('../img/homepage-feature-browse.png') 914px top no-repeat;
        }
        &.share {
          background: url('../img/homepage-feature-share.png') 37px top no-repeat;
        }
        &.store {
          background: url('../img/homepage-feature-store.png') left top no-repeat;
        }
      }
    }
  }

  /* Portrait tablet to landscape and desktop */
  @media (min-width: 768px) and (max-width: 979px) {
    section.features {
      div.feature {
        background: none !important;
        height: auto !important;
        margin-left: 0 !important;

        div.inner {
          margin: 0 auto;
          width: 80%;
        }
        &.store {
          div.inner {
            margin-top: 0 !important;
          }
        }
        &:last-of-type {
          margin-bottom: 35px;
        }
      }
    }
  }

  /* Landscape phone to portrait tablet */
  @media (max-width: 767px) {
    padding: 0;

    header.main {
      div.container {
        h1.main-logo {
          margin-left: 0;
          text-align: center;
        }
        nav {
          clear: both;
          padding-top: 45px;

          ul {
            text-align: center;

            li:first-child {
              a {
                padding-left: 0;
              }
            }
          }
        }
        div.sub {
          padding: 58px 20px;
        }
      }
    }
    section.coders {
      h4 {
        padding: 0 20px;
      }
    }
    section.features {
      div.feature {
        background: none !important;
        height: auto !important;
        margin-left: 0 !important;

        div.inner {
          margin: 0 auto;
          width: 80%;
        }
        &.store {
          div.inner {
            margin-top: 0 !important;
          }
        }
        &:last-of-type {
          margin-bottom: 35px;
        }
      }
    }
  }

  /* Landscape phones and down */
  @media (max-width: 480px) {
    section.features {
      div.feature {
        margin-left: 0 !important;
      }
    }
  }

}
body.jobs {
  section.jobs {
    margin: 30px;

    h4 {
      border-bottom: 1px solid #C0C0C0;
      color: #999999;
      font-size: 14px;
      margin-top: 30px;
      padding-bottom: 5px;
      padding-left: 10px;
    }
    ul {
      margin: 0;

      li {
        list-style-type: none;
        margin: 10px 0;

        a {
          background: #FBFBFB;
          border: 1px solid #DDDDDD;
          color: #333333;
          display: block;
          padding: 10px;
          @include border-radius;
          @include box-shadow(0, 1px, 1px, rgba(0, 0, 0, .3));

          &:hover {
            background: rgba(#FBFBFB, .5);
          }
          span.left {
            float: left;

            span {
              display: block;

              &.job {
                color: #3096B4;
                font-size: 16px;
                font-weight: bold;
                margin-bottom: 4px;
              }
            }
          }
          span.right {
            float: right;

            span {
              display: block;
              text-align: right;

              &.location {
                color: #999999;
                font-size: 16px;
                font-weight: bold;
                margin-bottom: 4px;
              }
            }
          }
          img {
            float: left;
            height: 39px;
            margin-right: 10px;
          }
        }
      }
    }
  }
  div.job-twitter {
    margin-bottom: 15px;
    margin-left: 15px;
    text-align: center;
  }
  div.post-job {
    background: white;
    border: 1px solid #DDDDDD;
    margin-bottom: 30px;
    margin-left: 15px;
    padding: 15px;
    @include border-radius;

    p {
      font-size: 12px;
      margin-bottom: 0;
      margin-top: 15px;
    }
    a {
      width: 103px;
    }
  }
  div.static-box {
    border: 1px solid #DDDDDD;
    margin-left: 30px;
    @include border-radius(50px);

    form input.search-query {
      width: 618px;
    }
  }
  div.loading-jobs {
    color: #777777;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
  }
  div.pagination {
    button.btn {
      &:active, &:focus {
        outline: none !important;
      }
    }
  }
}

div.exclusive-ad {
  color: #666666;
  height: 192px;
  margin: 0 0 30px 15px;
  padding: 10px;
  padding-top: 0;
  text-align: center;
  @include border-radius(8px);
  @include vertical-gradient(#F2F2F2, white);

  h3 {
    font: bold 12px/16px $Helvetica;
    margin: 0;
  }
  p {
    font: normal 12px/16px $Helvetica;
    margin-top: 5px;

    a {
      font-weight: bold;
    }
  }
  a.logo {
    display: block;
    text-align: center;

    img {
      display: inline-block;
      margin: 10px 0;
      max-height: 100px;
    }
  }
}
a.snipt-promo {
  background: #5CB85C;
  border: 1px solid #4CAE4C;
  color: white;
  display: block;
  font: bold 20px Helvetica;
  margin-top: 30px;
  padding: 25px 15px 25px 28px;
  text-decoration: none;
  text-shadow: 0 1px 0 #448944;

  span.pro {
    color: #468847;
    font-family: $RockwellBoldItalic;
    font-size: 22px;
    text-shadow: 0 1px 0 white;

    &.-logo {
      color: white;
      font-weight: normal;
      text-transform: lowercase;
      text-shadow: 0 1px 0 #448944;
    }
    span {
      color: #99eefa;
    }
  }
  button {
    margin-top: -10px;
  }
  &:hover {
    background: #55a955;
  }
}

div.team-controller {
  div.add-member {
    input {
      margin-bottom: 0;
      width: 50%;
    }
    ul {
      margin: 12px 0 0 0;
    }
  }
  li.user {
    box-sizing: border-box;
    list-style-type: none;
    margin: 0;
    padding: 10px;
    width: 42%;
    @include border-radius(3px);

    span {
      font-size: 16px;
    }
    a.btn {
      float: right;
    }
    img {
      margin-right: 10px;
    }
    &:last-of-type {
      margin-bottom: 0;
    }
    &:hover {
      background: #ebebeb;
    }
  }
  ul.member-list {
    margin: 0;
  }
}

div.payment-form {
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

div.with-teams-search {
  display: inline-block;
  width: 87%;

  input.search-query {
    width: 69% !important;
  }
  select {
    display: inline-block;
    width: 25%;
  }
}

div.team-search {
  form {
    margin: 0;
    padding: 5px;
  }
  input {
    box-sizing: border-box;
    margin: 0;
    padding: 15px 10px;
    width: 100%;
  }
}

div.video-container {
  text-align: center;
  padding: 20px;
}

video {
  border: 10px solid #E4E2E4;
  border-radius: 5px;
  box-sizing: border-box;
  height: auto;
  margin-top: 50px;
  max-width: 100%;
  width: 1056px;
}

div.snipt-log {
  background: #E9E9E9;
  display: none;
  padding: 40px;
  margin-bottom: 50px;

  section.code {
    border: 1px solid #DDDDDD;
    height: auto;
    margin-top: 10px
  }
}
div.secure-view-log {
  background: #E9E9E9;
  display: none;
  padding: 10px 0 25px 0;
  margin-bottom: 20px;

  footer {
    padding-bottom: 0;
  }
}

div.ad-inner {
  text-align: center;

  > div {
    display: inline-block !important;
  }
}

div.bsap_adhere {
  text-align: center;

  a {
    background: none !important;
    border: none !important;
    border-top: 1px solid #DDDDDD !important;
    color: #B3B3B3 !important;
    font: bold 11px Helvetica !important;
    letter-spacing: 1px !important;
    margin: 16px 0 5px 1px !important;
    padding-top: 12px !important;
    text-transform: uppercase;

    &:hover {
      color: #6F6F6F !important;
    }
  }
}

div.inline-ad {
  background: #FBFBFB;
  border-top: 1px solid #DDDDDD;
  height: 24px;

  span.block {
    background-color: #BB0017;
    border-right: 1px solid #DDDDDD;
    display: inline-block;
    height: 24px;
    width: 28px;
  }
  p {
    color: #6A6A6A;
    display: inline-block;
    font-size: 12px;
    margin: 4px 0 0 3px;
    vertical-align: top;

    a {
      color: #6A6A6A;
      text-decoration: underline;
    }
  }
  span.ad {
    color: #9E9E9E;
    display: inline-block;
    float: right;
    font-size: 10px;
    margin: 3px 7px 0 0;
    text-transform: uppercase;
  }
}