@import "./../../../styles/less/bootstrap/variables.less";
@import "./../../../styles/less/bootstrap/mixins.less";

// ----------------------------------------------------------
// Custom Navigation Elements
// ----------------------------------------------------------

.pill-tabs      {
  li            {
    > a         { color:@trim-color; cursor:pointer; font-weight:bold; }
    &.active, &.active:hover {
      > a       { background-color:@trim-color; color:#FFF; }
    }
  }
}
.dropdown-header {
  background     :none;
  color          :#BBB;
  text-transform :uppercase;
  border-top     :1px solid #E2E2E2;
  margin-top     :10px;
  padding-top    :12px;
  padding-bottom :6px;
}
.dropdown-header:first-child { margin-top:0; border-top:none; }

.navbar { height:67px; background:#FFF url('../images/nav-main-bg.png') left bottom repeat-x; .box-shadow(0 3px 8px -2px rgba(0,0,0,0.25));
  .header-area  {
    .header-buttons
                { margin:24px 8px 0 0; position:relative;
      .btn      { margin-right:5px; }
      .fa-fw    { text-align:left; }
      .dropdown-menu
                { margin-top:45px; font-size:12px; padding:10px 0;
        >li > a { padding:8px 18px; }
      }
    }
  }
  .navbar-header {
    .navbar-brand img { max-height:36px; max-width:160px; }
  }
  .brand-logo {
    height: 45px;
    margin: 10px;
  }
  .navbar-text  { margin-top:22px; font-size:12px; }
  .btn-group    { margin-top:12px;
    .btn        { font-size:12px; }
  }
  .navbar-toggle { margin-top:14px;
    .icon-bar   { background:#000; }
  }
}

.navbar-app     { height: 100%; width: 92px; position: fixed; left: 0px; top: 67px; bottom: 0px; border-right: 1px solid #95969B;
                  padding: 0; background: #3F4452 url('../images/nav-app-bg.png') right top repeat-y; z-index: 1020;

  ul.nav        { list-style:none; height:100%;
    > li        { display:block; border-bottom:1px solid #42454E; margin:0; padding:0; font-size:12px; background:transparent url('../images/nav-app-item-bg.png') left bottom repeat-x;
      > a       { margin:0; padding:16px 5px 14px; text-align:center; color:#C0C1C4; background:transparent; }
      span      { display:block; margin-top:6px; }
      &:hover, &.open { background:#353944;
        > a     { color:#FFF; background:none; }
      }
      &.active  {
          > a   { color:@trim-color; }
      }
      &:last-child { border-bottom:none; }
    }
    li.dropdown { position:static;
      &:hover > ul.dropdown-menu { display:block; }
    }
    .dropdown-menu { top:-2px; left:91px; border-radius:0; border:0; width:188px; height:100%; .box-shadow(none); background:#353944; padding:12px 0;
      > li      {
        a       { color:#FFF; font-size:12px; padding:12px 16px 13px 26px; background:none;
          &:hover, &:active { background:#3D4049; }
        }
      }
      .divider  { opacity:0.12; }
    }
  }
}

/*  Mobile @1200px
────────────────────────────────────────────────────────────*/
@media ( max-width  : @screen-lg ) {
  .navbar {
    .navbar-right {
      padding-top   : 5px;
      position      : relative;
      z-index       : 9999;
    }
  }
}

/*  Desktop @992px
────────────────────────────────────────────────────────────*/
@media ( min-width: ( @screen-sm + 1 ) ) and ( max-width: @screen-md ) {
  .navbar {
    .navbar-right {
      padding-top   : 5px;
      position      : relative;
      z-index       : 9999;
    }
  }
}

/*  Mobile @768px
────────────────────────────────────────────────────────────*/
@media ( min-width: ( @screen-xs + 1 ) ) and ( max-width: @screen-sm ) {
  .navbar {
    .navbar-right {
      padding-top   : 5px;
      position      : relative;
      z-index       : 9999;
    }
    .navbar-highlight {
      // background-color: #222;
      // border-color: #101010;
      background-color: #FFF;
      margin-top: 0px;
      overflow-y: visible;
    }
  }
}

/*  Mobile @480px
────────────────────────────────────────────────────────────*/
@media ( max-width    : @screen-xs ) {
  body {
    padding-top       : 40px;
  }
  .navbar {
    height            : 49px;

    .btn {
      .button-size(@padding-xs-vertical; @padding-xs-horizontal; @font-size-small; @line-height-small; @border-radius-small);
    }

    .pull-left h3,
    .pull-left.h3 {
      font-size       : @font-size-h3;
    }

    .navbar-header {
      height: 50px;

      .header-buttons {
        position      : absolute;
        top           : 0;
        right         : 12px;
        margin-top    : 12px;
      }
    }

    .navbar-toggle {
      margin-top      : 5px;
    }

    .brand-logo {
      height          : 28px;
      padding         : 0;
      padding-top     : 5px;
    }

    .navbar-right {
      padding-top     : -5px;
      position        : relative;
      z-index         : 9999;
    }
  }
  .navbar-app {
    width             : 50px;
    top               : 50px;

    ul.nav {
      > li {
        i { font-size : 1.6em; }
        span { display: none; }
      }
      .dropdown-menu {
        left          : 49px;
      }
    }
  }
}
