
header {
  height: 60px;
  .logo-header {
    height: 60px;
    width: auto;
  }
  .user-header {
    padding: 10px 15px;
    img {
      margin-right: 0.7em;
    }
    .username {
      font-weight: 700;
      color: $white;
    }
  }
  .button-container {
    display: inline-block;
    vertical-align: top;
  }
  .username-logout {
    @extend .button-container;
    a:hover {
      text-decoration: none;
    }
    .btn-inline-header {
      height: 40px;
      display: inline-block;
    }
  }
  .search-header {
    position: relative;
    display: inline-block;
    width: 250px;
    vertical-align: top;
    margin-right: 15px;
    margin-top: 4px;
    .navbar-form {
      padding: 0;
      margin: 0;
      input[type="search"] {
        border-radius: 4px 0 0 4px;
        background: transparent;
        border-left: 1px solid $placeholder-colour;
        border-top: 1px solid $placeholder-colour;
        border-bottom: 1px solid $placeholder-colour;
        border-right: 0px solid $placeholder-colour;
        color: $white;
        @include input-placeholder($placeholder-colour);
      }
      button[type="submit"] {
        border-radius: 0 4px 4px 0;
        color: $white;
        border-left: 0px solid $placeholder-colour;
        border-top: 1px solid $placeholder-colour;
        border-bottom: 1px solid $placeholder-colour;
        border-right: 1px solid $placeholder-colour;
        -webkit-opacity: 1;
        opacity: 1;
      }
      button[type="submit"]:disabled {
        .fa {
          -webkit-opacity: 0.6;
          opacity: 0.6;
        }
      }
    }
  }
}

body.login {
  background: $first-colour; /* Old browsers */
  background: -moz-linear-gradient(-45deg,  $first-colour 0%, $second-colour 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,$first-colour), color-stop(100%,$second-colour)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg,  $first-colour 0%,$second-colour 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg,  $first-colour 0%,$second-colour 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg,  $first-colour 0%,$second-colour 100%); /* IE10+ */
  background: linear-gradient(135deg,  $first-colour 0%,$second-colour 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#205683', endColorstr='#68b0ab',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  .create-new-account {
    text-align: left;
  }
  .forgot-password {
    text-align: right;
  }
}

body:not([class*="login"]) {
  .container-fluid aside {
    ul {
      li:nth-child(8n+1) {
        a:hover {
          border-left: 5px solid $light-blue;
        }
      }
      li:nth-child(8n+2) {
        a:hover {
          border-left: 5px solid $yellow;
        }
      }
      li:nth-child(8n+3) {
        a:hover {
          border-left: 5px solid $dark-green;
        }
      }
      li:nth-child(8n+4) {
        a:hover {
          border-left: 5px solid $pink;
        }
      }
      li:nth-child(8n+5) {
        a:hover {
          border-left: 5px solid $blue;
        }
      }
      li:nth-child(8n+6) {
        a:hover {
          border-left: 5px solid $orange;
        }
      }
      li:nth-child(8n+7) {
        a:hover {
          border-left: 5px solid $green;
        }
      }
      li:nth-child(8n+8) {
        a:hover {
          border-left: 5px solid $purple;
        }
      }
    }
  }
}

.error-fixes {
  background: rgba(255,255,255,0.3);
  color: $third-colour;
  border-radius: 4px;
  margin-top: 2em;
  padding: 2em;
}


@media (max-width: $screen-sm-max) {
  .center-panel {
    margin-top: 2em
  }
}

footer {
  font-size: .9em;
  i.fa {
    color: $primary-colour
  }
  .container-footer p {
    padding: 8px 0 0 0px;
  }
}

i.fa {
  padding: 0 0.3em;
}

.shared-search {
  margin-bottom: 1rem;
  width: 100%;
  input {
    border-radius: 4px 0 0 4px;
    background: rgba(255, 255, 255, 0.3);
    border-left: 1px solid $primary-colour;
    border-top: 1px solid $primary-colour;
    border-bottom: 1px solid $primary-colour;
    border-right: 0px solid $primary-colour;
    color: $primary-colour;
  }
  button.btn.btn-default {
    border-radius: 0 4px 4px 0;
    background: rgba(255, 255, 255, 0.3);
    border-left: 0px solid $primary-colour;
    border-top: 1px solid $primary-colour;
    border-bottom: 1px solid $primary-colour;
    border-right: 1px solid $primary-colour;
  }
}
