@import "prefixer";
@import "variables";

@grid-float-breakpoint:     @screen-xs-min;

.backdrop  {
  .navbar-nzbdrone {
    background-color : #000000;
    .opacity(0.85);
    padding-bottom: 10px;
  }
}

.navbar-nzbdrone {
  text-align    : center;

  i:before {
    font-size : 35px;
    display: block;
  }
  
  .navbar-nav, .navbar-nav>li {
    float          : none;
  }

  .navbar-toggle {
    border-color: #333;

    &:hover,
    &:focus {
      background-color: #333;
    }

    .icon-bar {
      background-color: #ffffff;
    }
  }

  .navbar-brand {
    position: absolute;

    @media (max-width: @screen-xs-max) {
      padding: 9px 15px;
      font-size: 14px;
    }

    @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
      padding: 20px 15px;
    }

    @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
      padding: 30px 15px;
    }

    @media (min-width: @screen-lg-min) {
      padding: 22px 15px;
    }
  }

  .logo-text {
    color: white;
    font-weight: 300;

    .highlight {
      font-weight: 400;
      color: @droneTeal;
    }
  }

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

    a {
      display     : block;
      color       : #b9b9b9;
      font-weight : 100;

      &:hover {
        background-color : #555555;
        text-decoration  : none;
      }

      .label {
        cursor: pointer;
      }

      &:focus {
        text-decoration : none;
      }

      @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
        border-radius : 6px;
        padding       : 5px 0px 5px;
        min-height    : 76px;
        min-width     : 64px;
        margin        : 20px 5px 5px;
      }

      @media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
        border-radius : 6px;
        padding       : 15px 10px 5px;
        min-height    : 76px;
        min-width     : 64px;
        margin        : 20px 10px 5px;
      }

      @media (min-width: @screen-lg-min) {
        border-radius : 6px;
        padding       : 15px 10px 5px;
        min-height    : 76px;
        min-width     : 84px;
        margin        : 20px 10px 5px;
      }
    }

    .health {
      .label {
        position : absolute;
        top      : 10px;
        right    : 10px;
      }
    }
  }

  @media (max-width: @screen-xs-max) {
    text-align : left;

    i:before {
      font-size : 14px;
      display: inline-block;
    }

    li {
      display: block;

      a:hover {
        background-color: transparent;
      }

      .health {
        margin-left: 5px;

        .label {
          position : static;
        }
      }
    }
  }
}

.search {

  i:before {
    font-size: 14px;
  }

  .input-group {
      input, .input-group-addon {
        background-color: #333333;
      }
  }

    input, .input-group-addon {
      border-color: #333333;
      color: #cccccc;
    }

  ul {
    text-align: left;
  }

  .tt-dropdown-menu {

    background-color: #333333;
    color: #cccccc;
    opacity: .95;

    .tt-suggestion {
      color: #cccccc;

      &.tt-cursor {
        //item selected

        background-color: @droneTeal;
        color: #222222;

        a {
          //link in item selected
          color: #222222;
        }
      }
    }
  }
}

//.screen-size {
//  color: @droneTeal;
//  &:after {
//    content: "unknown";
//  }
//
//  @media (min-width: @screen-xs-min) {
//    &:after {
//      content: "xs";
//    }
//  }
//
//  @media (min-width: @screen-sm-min) {
//    &:after {
//      content: "sm";
//    }
//  }
//
//  @media (min-width: @screen-md-min) {
//    &:after {
//      content: "md";
//    }
//  }
//
//  @media (min-width: @screen-lg-min) {
//    &:after {
//      content: "lg";
//    }
//  }
//}