@import 'nib'

red = #cc3d33

body, input {
  font: 14px Lucida Grande, sans-serif;
  color: #666;
}

small.heart {
  position:absolute;
  font-size:10px;
  right:0;
  padding:1em;
}

pre.sh {
  background:#fff;
  padding:0.4em 0;
}

pre.sh::before {
  content: "$ "
}

body {
  background: #C3BDB3;
  border-top: solid 6px red;
  text-align: center;
}

input {
  font-family: Georgia, serif;
  border: solid 1px #ddd;
  padding: 0.5em;
  &:hover { border-color: #bbb; }
}

a:link, a:visited, a:active {
  text-decoration: none;
  color: red;
  &:hover { text-decoration: underline; }
}

h1, h2, h3, h4, h5, h6 {
  color: #000;
}

form {
  a.email-label, label {
    display: inline-block;
    width: 30%;
    font-weight:bold;
    vertical-align: top;
    line-height: 30px;
  }
  input, select {
    display: inline-block;
    width: 65%;
  }
  a.email-field {
    display: inline-block;
    width: 65%;
  }
  a.email-field input {
    background:#eee;
    font-style:italic;
    width: 100%;
  }
  a.email-field:hover input {
    background:#fff;
    cursor:hand;
    cursor:pointer;
  }
  a.email-field span {
    position:absolute;
    right:0;
  }
  fieldset {
    position:relative;
    border-width:0;
    margin-bottom:5px;
  }
  fieldset.buttons {
    border-top-width: 1px;
    padding-top: 1em;
    .btn {
      margin-right: 0.5em;
    }
  }
  .form-help {
    font-style: italic;
    font-size:0.9em;
    color:#777;
  }
}

// utilities

.btn {
  display: inline-block;
  padding: 0.5em 1.5em;
  background: red;
  border-radius: 5px;
  border:0;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  &:hover, &:active {
    background: #89221B;
  }
}

.error {
  color: red;
  font-weight: bold;
}

// layout

#wrap {
  background-color: #f4f4f2;
  padding: 49px 16px 72px;
}

#content {
  width: 953px;
  margin: 0 auto;
  text-align: left;

  nav {
    float: left;
    margin: 0 5px 0 0;
    width: 140px;
    font-size: 11px;
    text-transform: uppercase;
    &, a {
      color: #999;
    }
    ul {
      margin: 0;
      padding: 0;
      li {
        border-top: solid 1px #ccc;
        a {
          display: block;
          padding: 0 0 0 35px;
          line-height: 23px;
          background: url('/static/icons-interior.png') no-repeat -156px 3px;
        }
      }
      li:first-child { border-top: none; }
      for link, i in home download about npm docs blog community logos jobs {
        li.{link} a {
          background-position: -156px -24*i+3px;
        }
        li.{link} a:hover {
          background-position: -331px -24*i+3px;
          color: #000;
        }
        li.{link}.current a {
          background-position: 2px -24*i+3px;
          color: red;
          font-weight: bold;
        }
      }
    }
  }
  .profile {

    padding-left: 0;
    .profsub {
      margin:1em 0 0 0;
      font-size:11px;
    }
    .profsub a:first {
      border-right: 1px solid #999
    }
  }

  aside.login {
    background: linear-gradient(top, hsla(0, 0%, 50%, 0.1), transparent);
    float: right;
    padding: 1em;
    width: 220px;
  }

  #page {
    line-height: 150%;
    margin-left 120px + 80px;
    margin-right: 220px + 40px;

    header {
      form input {
        font-size: 18px;
        width: 50%;
        float: right;
      }
    }
  }
  #npm-logo {
    position: relative;
    top: -10px;

    img {
      border: 0;
      width: 200px;
      height: 78px;
      image-rendering: -o-crisp-edges;
      image-rendering: -moz-crisp-edges;
      image-rendering: -webkit-optimize-contrast;
      image-rendering: crisp-edges;
    }
  }
}

#footer {
  width: 953px;
  font-size:12px;
  overflow:hidden;
  padding:12px 0 40px;
  margin:12px auto 0;
  color:#666;

  a.footlogo {
    float:left;
    background:url(/favicon.ico) 34px -17px no-repeat;
    text-indent:-999em;
    width:160px;
    height:60px;
  }

  ul {
    float:left;
    margin:0;
    padding:0;
  }

  li {
    float:left;
    display:block;
    height:26px;
    line-height:26px;
    margin:0;
    padding:0;

    a {
      line-height:26px;
      padding:0 1em;
      display:block;
      height:100%;
      width:100%;
    }
  }

  h2 {
    color:#666;
    font-weight:normal;
    padding:0;
    margin:0;
    font-size:inherit;
  }

  .poweredby {
    clear:left;
    margin-left:184px;

    h2 {
      float:left;
      line-height:26px;
    }

    li {
      height:32px;
      padding:0 1em;
      margin-top:-6px;

      a {
        padding:0;
      }
    }
  }
}

.user {
  padding-left: 32px;
  position: relative;

  .username {
    font-weight: bold;
  }

  .avatar-medium {
    margin-right: 1em;
    float: left;
    width: 50px;
    height: 50px;
  }

  .avatar {
    position: absolute;
    top: -4px;
    left: 0;
    width: 25px;
    height: 25px;
  }
}

#index {
  table {
    width: 100%;
    border-collapse: collapse;
    tr {
      vertical-align: top;
    }
    h2 {
      white-space: nowrap;
    }
  }
}

table.downloads {
  width:auto;
  border-collapse: collapse;
  td {
    white-space: nowrap;
    padding-right:1em;
  }
  td:first-child {
    text-align:right;
  }
}


.search-results, .search-results li, .search-result ul {
  list-style:none
  margin:0;
  padding: 0;
}

.search-result {
  position:relative;
}

.search-result .details {
  position:absolute;
  top:1em;
  right:0;
}

.search-result ul li {
  display:inline;

}

.package.search-result ul.keywords {
  display:inline;
  font-size: .85em
}

html body ul.search-results .package.search-result {
  padding: .5em 0;
}


.package, #package, #profile {
  width:490px;
  > h1 {
    font: 28px Georgia, serif;
    border-bottom: solid 1px #000;
  }
  .row {
    padding:0.75em 0;
    border-top: solid 1px #ccc;
  }
  p.description {
    font: 18px Georgia, serif;
  }
  table.metadata {
    margin: 1em 0;
    width: 100%;
    tr {
      border-top: solid 1px #ccc;
    }
    th, td {
      padding: 0.5em 0;
      vertical-align: baseline;
    }
    th {
      color: #000;
      font-weight: normal;
      text-align: left;
      width: 120px;
    }
    b {
      color: #000;
      font-weight: bold;
      font-size: 14px;
    }
  }
  .details {
    ul.toc {
      padding: 0;
      margin-bottom: 0;
      font-size: 16px;
      li {
        display: inline-block;
        padding: 0.5em 32px 0.5em 16px;
        &:first-child {
          background-color: #fff;
        }
      }
    }

    section {
      padding: 16px;
      background-color: #fff;
      margin-right: -260px;

      &#readme {
        h1 { font-size: 24px; }
        img {
          max-width:100%;
        }
        pre {
          max-width:100%;
          overflow:auto;
          font-family: Monaco, monospace;
          background-color: #f9f9f8;
          padding: 16px;
        }
      }
    }
  }
  .user {
    padding: 1px;

    .avatar {
      position:relative;
      top:0;
      display:inline-block;
      vertical-align:middle;
      width: 32px;
      height: 32px;
    }
  }
}

#profile {
  position: relative;

  .avatar-large {
    display:block;
    position:absolute;
    width:248px;
    height:248px;
    top:0;
    right:-260px;
  }
  table.metadata tr:first-child {
    border-top: none;
  }
}