// 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: $navbarLinkColorHover;
          text-decoration: none;
          background-color: $navbarLinkBackgroundHover;
        }
        ul.menu {
          display: block;
        }
      }
    }
  }
}

// Navbar Inverse
// --------------------------------------------------
.navbar-inverse {
  color: $navbarInverseText;
  #main-menu {
    > ul.menu {
      > li {
        > a {
          color: $navbarInverseLinkColor;
          text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
          text-align: center;
          &:hover {
            color: $navbarInverseLinkColorHover;
            background-color: $navbarInverseLinkBackgroundHover;
          }
          &.active {
            color: $navbarInverseLinkColorActive;
            background-color: $navbarInverseLinkBackgroundActive;
          }
        }
        &.open {
          > a {
            background-color: $navbarInverseLinkBackgroundActive;
            color: $navbarInverseLinkColorActive;
          }
        }
      }
    }
  }
}

// Navbar Fixed Top
// --------------------------------------------------
.navbar-fixed-top {
  margin-top: 0 !important;
  .container {
    @include ctb-core-span($gridColumns);
  }
}

// Footer Menu
// --------------------------------------------------
#footer-menu {
  background-color: $grayLighter;
  @include border-radius(4px);
  margin: 0 0 20px;
  padding: 20px;
  > ul.menu {
    margin: 0;
    padding: 0;
    @include clearfix();
    > li {
      float: left;
      list-style: none outside none;
      margin: 0 0 20px;
      padding: 0;
      width: 20%;
      > a,
      > span {
        font-size: 1.0em;
        font-weight: 700;
        text-transform: uppercase;
      }
      > ul.menu {
        margin: 0;
        padding: 0;
        > li {
          list-style: none outside none;
          margin: 0 5px 0 0;
          > a,
          > span {
            font-size: 0.90em;
          }
        }
      }
    }
  }
}