body {
  padding-top: 160px;
  padding-bottom: 20px;
  font-family: 'Open Sans', sans-serif;
}

.navbar {
  &.navbar-inverse {
    background: #292929;
    border-color: #292929;
    border-bottom: 1px solid #000000;
  }

  .navbar-header {
    .navbar-brand {
      color: #cccccc;
      font-weight: bold;
      position: relative;
      top: 0;

      &:hover {
        color: #ffffff;
      }
    }
  }
}

.subnavbar {
  margin-bottom: 2.5em;
  border-top: 1px solid #595959;

  &.navbar-fixed-top {
    top: 50px;
  }

  .subnav-toggle {
    display: none;
    padding: .5em 0;
    margin: 0 auto;
    font-size: 18px;
    text-align: center;
    color: #ff9900;

    &:hover {
      text-decoration: none;
    }
  }

  .subnavbar-inner {
    height: 80px;
    background-image: -webkit-gradient(linear, left 0%, left 100%, from(#414141), to(#323232));
    background-image: -webkit-linear-gradient(top, #414141, 0%, #323232, 100%);
    background-image: -moz-linear-gradient(top, #414141 0%, #323232 100%);
    background-image: linear-gradient(to bottom, #414141 0%, #323232 100%);
    background-repeat: repeat-x;
    border-bottom: 1px solid #000;
  }

  .subnav {
    float: right;
  }

  .mainnav, .subnav {
    display: inline-block;
    height: 80px;
    padding: 0;
    margin: 0;
    border-left: 1px solid #292929;
    border-right: 1px solid #4a4a4a;

    > li {
      float: left;
      min-width: 90px;
      height: 80px;
      padding: 0;
      margin: 0;
      text-align: center;
      list-style: none;
      border-left: 1px solid #4a4a4a;
      border-right: 1px solid #292929;

      > a {
        display: block;
        height: 100%;
        padding: 0 15px;
        font-size: 12px;
        font-weight: bold;
        color: #636363;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
        text-decoration: none;

        &:hover {
          color: #888;
        }

        > i {
          position: relative;
          top: 2px;
          display: inline-block;
          width: 24px;
          height: 24px;
          margin-top: 12px;
          margin-bottom: 9px;
          font-size: 28px;
        }

        > span {
          display: block;
          padding-bottom: 2px;
        }
      }

      &.active > a {
        background: #333333;
        color: #ff9900;
      }
    }
  }

  .dropdown {
    > .dropdown-menu {
      top: 97%;
      text-align: left;
      -webkit-border-top-left-radius: 0;
      -webkit-border-top-right-radius: 0;
      -moz-border-radius-topleft: 0;
      -moz-border-radius-topright: 0;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      max-height: 480px;
      overflow-x: hidden;
      overflow-y: auto;

      a {
        font-size: 12px;
      }

      &::before, &::after {
        content: '';
        display: inline-block;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #CCC;
        border-bottom-color: rgba(0, 0, 0, 0.2);
        position: absolute;
        top: -7px;
        left: 9px;
      }

      &::after {
        border-left-width: 6px;
        border-right-width: 6px;
        border-bottom-width: 6px;
        border-bottom-color: #fff;
        top: -6px;
        left: 10px;
      }

      > li {
        > a {
          padding: 5px 9px;
          margin: 0 6px;
          font-size: 12px;

          &:hover, &:focus {
              color: #FFF;
              background-color: #ff9900;
              text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
          }
        }
      }
    }
  }
}

.widget {
  position: relative;
  clear: both;
  width: auto;
  margin-bottom: 2em;

  .widget-header {
    position: relative;
    height: 40px;
    line-height: 40px;
    background: #E9E9E9;
    background: -moz-linear-gradient(top, #fafafa 0%, #e9e9e9 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafa), color-stop(100%, #e9e9e9));
    background: -webkit-linear-gradient(top, #fafafa 0%, #e9e9e9 100%);
    background: -o-linear-gradient(top, #fafafa 0%, #e9e9e9 100%);
    background: -ms-linear-gradient(top, #fafafa 0%, #e9e9e9 100%);
    background: linear-gradient(top, #fafafa 0%, #e9e9e9 100%);
    border: 1px solid #D5D5D5;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-top-right-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-topright: 4px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    -webkit-background-clip: padding-box;

    h3 {
      left: 10px;
      display: inline-block;
      margin-top: 0;
      margin-right: 3em;
      font-size: 15px;
      color: #555555;
      line-height: 18px;
      text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);
    }

    [class^="glyphicon-"], [class*="glyphicon-"] {
      margin-left: 12px;
      margin-right: 6px;
      display: inline-block;
      font-size: 16px;
      color: #555555;
    }
  }

  .widget-content {
    padding: 15px 15px 10px;
    background: #FFF;
    border: 1px solid #D5D5D5;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;

    &:before {
      content: " ";
      display: table;
    }

    &:after {
      content: " ";
      display: table;
      clear: both;
    }
  }

  .widget-header + .widget-content {
    border-top: none;
    -webkit-border-top-left-radius: 0;
    -webkit-border-top-right-radius: 0;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-topright: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }

  &.widget-table {
    .widget-content {
      padding: 0;
    }

    .table {
      margin-bottom: 0;
      border: none;

      tr {
        td {
          border-top: none;
        }

        th:first-child, td:first-child {
          border-left: none;
        }

        th:last-child, td:last-child {
          border-right: none;
        }

        &:last-child td {
          border-bottom: none;
        }
      }

      &.table-bordered {
        thead tr {
          background-image: -webkit-gradient(linear, left 0%, left 100%, from(#f5f5f5), to(#e2e2e2));
          background-image: -webkit-linear-gradient(top, #f5f5f5, 0%, #e2e2e2, 100%);
          background-image: -moz-linear-gradient(top, #f5f5f5 0%, #e2e2e2 100%);
          background-image: linear-gradient(to bottom, #f5f5f5 0%, #e2e2e2 100%);
          background-repeat: repeat-x;

          th {
            padding-top: 8px;
            padding-bottom: 8px;
            font-size: 13px;
            font-weight: 600;
            color: #444;
            border-left: 1px solid #F1F1F1;
            border-right: 1px solid #CCC;
            -webkit-box-shadow: inset 0 1px 0 #ffffff;
            box-shadow: inset 0 1px 0 #ffffff;
          }
        }
      }

      &.table-hover {
        tr:hover td {
          color: #ff9900;
          cursor: pointer;
        }

        tr.active {
          color: #ff9900;
          background-color: #f5f5f5;
        }
      }
    }
  }

  &.widget-stats, &.widget-chart, &.widget-tool {
    .widget-content {
      background: #E9E9E9;
      background:-moz-linear-gradient(top, #FAFAFA 0%, #E9E9E9 100%);
      background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#E9E9E9));
      background:-webkit-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
      background:-o-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
      background:-ms-linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
      background:linear-gradient(top, #FAFAFA 0%,#E9E9E9 100%);
    }
  }

  &.widget-chart {
    .widget-content {
      padding: 0;
    }
  }

  &.widget-tool {
    .btn-primary {
      background-color: #FF9900;
      border-color: #FF9900;
    }

    .form-control {
      border-radius: 0;
    }

    .help-block {
      margin-bottom: 9px;
    }

    .table {
      background-color: white;
    }
  }
}

.stats-container {
  width: 100%;
  display: table;
  padding: 0 0 0 10px;
  margin-top: 0.5em;
  margin-bottom: 1.9em;

  .stat {
    display: table-cell;
    width: 40%;
    vertical-align: top;
    font-size: 11px;
    font-weight: bold;
    color: #999999;

    .value {
      display: block;
      margin-bottom: 0.55em;
      font-size: 30px;
      font-weight: bold;
      letter-spacing: -2px;
      color: #444444;
    }
  }

  &.big {
    margin-bottom: 1em;

    .stat {
      width: 25%;
      height: 90px;
      text-align: center;
      padding: 0;
      position: relative;
      border-right: 1px solid #cccccc;

      &:last-child {
        border-right: none;
      }

      h4 {
        font-size: 11px;
        font-weight: bold;
        color: #777777;
        margin-bottom: 1.5em;
      }

      .value {
        font-size: 56px;
        font-weight: normal;
        color: #333333;
        line-height: 1em;
      }
    }
  }
}

.error-container {
  margin-top: 4em;
  margin-bottom: 4em;
  text-align: center;
  font-family: 'Open Sans', sans-serif;

  h1, h2 {
    font-family: 'Open Sans', sans-serif;
  }
  
  h1 {
    margin-bottom: .5em;
    font-size: 120px;
    line-height: 1em;
  }

  h2 {
    margin-bottom: .75em;
    font-size: 28px;
  }

  .error-detail {
    margin-bottom: 1.5em;
    font-size: 16px;
  }

  .error-action {
    a {
      margin: 0.5em;
    }

    i {
      margin-right: 0.5em;
    }

    .btn-primary {
      background-color: #ff9900;
      border-color: #ff9900;
    }
  }
}

.footer-links {
  margin: 10px 0;
  padding-left: 0;
  text-align: center;

  li {
    display: inline;
    padding: 0 2px;
  }
}

@media (max-width: 950px) {
  .stats-container {
    &.big {
      .stat {
        width: 49%;
        display: block;
        float: left;
        margin-bottom: 3em;

        &:nth-child(2) {
          border-right: none;
        }

        &:nth-child(3) {
          border-left: none;
        }
      }
    }
  }
}

#slab_stats {
  th {
    cursor: pointer;

    &:hover {
      color: #FF9900;
    }

    > i {
      display: none;
    }
  }

  th.active {
    background-color: initial;
    color: #FF9900;

    > i {
      display: inline-block;
    }
  }
}

#slab_table {
  max-height: 300px;
  padding-right: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}


/* NProgress */
/* Make clicks pass-through */
#nprogress {
  pointer-events: none;
  -webkit-pointer-events: none;
}

#nprogress .bar {
  background: #ff9900;

  position: fixed;
  z-index: 1050;
  top: 0;
  left: 0;

  width: 100%;
  height: 4px;
}

/* Fancy blur effect */
#nprogress .peg {
  display: block;
  position: absolute;
  right: 0px;
  width: 100px;
  height: 100%;
  box-shadow: 0 0 10px #ff9900, 0 0 5px #ff9900;
  opacity: 1.0;

  -webkit-transform: rotate(3deg) translate(0px, -4px);
  -moz-transform: rotate(3deg) translate(0px, -4px);
  -ms-transform: rotate(3deg) translate(0px, -4px);
  -o-transform: rotate(3deg) translate(0px, -4px);
  transform: rotate(3deg) translate(0px, -4px);
}

/* Remove these to get rid of the spinner */
#nprogress .spinner {
  display: block;
  position: fixed;
  z-index: 100;
  top: 15px;
  right: 15px;
}

#nprogress .spinner-icon {
  width: 14px;
  height: 14px;

  border:  solid 2px transparent;
  border-top-color:  #ff9900;
  border-left-color: #ff9900;
  border-radius: 10px;

  -webkit-animation: nprogress-spinner 400ms linear infinite;
  -moz-animation:    nprogress-spinner 400ms linear infinite;
  -ms-animation:     nprogress-spinner 400ms linear infinite;
  -o-animation:      nprogress-spinner 400ms linear infinite;
  animation:         nprogress-spinner 400ms linear infinite;
}

@-webkit-keyframes nprogress-spinner {
  0%   { -webkit-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes nprogress-spinner {
  0%   { -moz-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes nprogress-spinner {
  0%   { -o-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes nprogress-spinner {
  0%   { -ms-transform: rotate(0deg);   transform: rotate(0deg); }
  100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
  0%   { transform: rotate(0deg);   transform: rotate(0deg); }
  100% { transform: rotate(360deg); transform: rotate(360deg); }
}
/* NProgress */
