// Menu
// Styles for Menus and Navs
// --------------------------------------------------

// General
// --------------------------------------------------
.navbar {
  .btn-navbar-search {
    padding: 4px 11px 3px;
    span {
      line-height: 1.1em;
    }
  }
}

// Main Menu
// --------------------------------------------------
#main-menu {
  > ul.menu {
    margin: 0;
    padding: 0;
    @include clearfix();
    overflow: visible;
    > li {
      margin: 0;
      padding: 0;
      position: relative;
      float: left;
      list-style: none outside none;
      position: relative;
      > a {
        float: none;
        padding: 10px 15px 10px;
        color: $navbarLinkColor;
        text-decoration: none;
        text-shadow: 0 1px 0 white;
        display: block;
        &:hover {
          color: $navbarLinkColorHover;
          text-decoration: none;
          background-color: $navbarLinkBackgroundHover;
        }
        &:focus, 
        &.active {
          color: $navbarLinkColorActive;
          text-decoration: none;
          background-color: $navbarLinkBackgroundActive;
          @include box-shadow(inset 0 3px 8px rgba(0, 0, 0, 0.125));
        }
      }
      > ul.menu {
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
        display: none;
        float: left;
        min-width: 160px;
        padding: 5px 0;
        margin: 2px 0 0;
        list-style: none;
        background-color: $dropdownBackground;
        border: 1px solid $dropdownBorder;
        @include border-radius(6px 6px 6px 6px);
        @include box-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
        li {
          list-style: none outside none;
          margin: 0;
          padding: 0;
          a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 20px;
            color: $dropdownLinkColor;
            white-space: nowrap;
            &:focus, &:hover {
              color: $dropdownLinkColorHover;
              text-decoration: none;
              outline: 0;
              background-color: $dropdownLinkBackgroundActive;
              @include ctb-gradient-vertical($dropdownLinkBackgroundActive, darken($dropdownLinkBackgroundActive, 5%));
            }
          }
        }
        &:before {
          position: absolute;
          top: -7px;
          left: 9px;
          display: inline-block;
          border-right: 7px solid transparent;
          border-bottom: 7px solid #CCC;
          border-left: 7px solid transparent;
          border-bottom-color: rgba(0, 0, 0, 0.2);
          content: '';
        }
        &:after {
          position: absolute;
          top: -6px;
          left: 10px;
          display: inline-block;
          border-right: 6px solid transparent;
          border-bottom: 6px solid white;
          border-left: 6px solid transparent;
          content: '';
        }
      }
      &.open {
        > a {
          color: #555;
          background-color: #E5E5E5;
        }
        ul.menu {
          display: block;
        }
      }
    }
  }
}


@media (max-width: 979px) {
  #main-menu {
    float: none;
    > ul.menu {
      li {
        display: block;
        float: none;
        margin-bottom: 2px;
        a {
          display: block;
          padding: 9px 15px;
          font-weight: bold;
          color: #777777;
          @include border-radius(3px);
          &:hover {
            background-color: #f2f2f2;
          }
        }
        &.open {
          ul.menu {
            display: none !important;
          }
        }
      }
    }
  }
}

@media (min-width: 980px) {
  .nav-collapse.collapse {
    height: auto !important;
    overflow: visible !important;
  }
}

// Pane Menu Tree
// --------------------------------------------------
.pane-menu-tree {  
  padding: 0;
  background-color: #fff;
  margin: 0 0 30px;
  @include border-radius(6px);
  @include box-shadow(0 1px 4px rgba(0, 0, 0, 0.065));
  .pane-title {
    padding: 8px 14px;
    margin: 0 0 -1px;
    border: 1px solid #e5e5e5;
  }
  .pane-content {
    ul.menu {
      margin: 0;
      padding: 0;
      li {
        list-style: none outside none;
        margin: 0;
        padding: 0;
        a {
          display: block;
          margin: 0 0 -1px;
          padding: 8px 14px;
          border: 1px solid #e5e5e5;
          &:hover {
            background-color: #f5f5f5;
            text-decoration: none;
          }
        }
        &.active-trail {
          > a {
            color: #ffffff;
            text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
            background-color: #0088cc;
          }
          > ul.menu {
            display: block;
            li {
              a {
                padding-left: 30px;
              }
              &.active-trail {
                > a {
                  background-color: #F5F5F5;
                  color: #0088CC;
                  text-shadow: none;
                }
              }
            }
          }
        }
      }
      ul.menu {
        display: none;
      }
    }
  }
}