/*
  Foundation Top Bar

  Requires:
    -jquery.foundation.topbar.js

  Notes:
    - <nav class="top-bar"> can have .fixed added to make it stick to the top of viewport. Can add .contain-to-grid to top-bar to make it full width but content on grid.
    - <li class="name"> creates a branding area that can be linked to homepage
      - Can include text, image or both inside this <li>.
    - <li class="divider"> creates a divider between nav items, add margins for space
    - <li class="search"> Needs to hold a <form> which can use .row.collapse and pre/postfix buttons or default type="search"
*/

  /* Element that controls breakpoint, no need to change this ever */
  .top-bar-js-breakpoint { width: $topBarBreakPoint !important; visibility: hidden; }

  /* Wrapped around .top-bar to contain to grid width */
  .contain-to-grid { width: 100%; background: $topBarBgColor; }

  /* Wrapped around .top-bar to make it fixed at the top */
  .fixed { width: 100%; left: 0; position: fixed; top: 0; z-index: 99; }

  /* <nav> */
  .top-bar { background: $topBarBgColor; min-height: $topBarHeight; line-height: $topBarHeight; margin: 0 0 $topBarBtmMargin 0; padding: 0; width: 100%; position: relative;

    /* Contain width to .row width */
    .contain-to-grid & { max-width: $rowWidth; margin: 0 auto; }

    /* First <ul> for branding, title, name, etc */
    &>ul {
      .name {
        h1 { line-height: $topBarHeight; margin: 0;
          a { font-weight: $topBarTitleWeight; padding: 0 $topBarHeight / 2; font-size: $topBarTitleSize !important; }
        }
        img { margin-top: -5px; vertical-align: middle; }
      }
      img { margin-top: -5px; vertical-align: middle; }
    }
  &.expanded { height: inherit; }

  /* topbar global <ul> styles */
  ul { margin-left: 0; display: inline; height: $topBarHeight; line-height: $topBarHeight; list-style: none;

    /* Main Navigation links style */
    &>li { float: left;
      a:not(.button) { color: $topBarLinkColor; display: block; font-size: $topBarLinkSize; font-weight: $topBarLinkWeight; height: $topBarHeight; line-height: $topBarHeight; padding: 0 $topBarHeight / 3; }
      &:not(.name) {
        &:hover, &.active, &:focus { background: darken($topBarBgColor, 15%);
          a { color: darken($topBarLinkColor, 15%); }
        }
      }

      /* Dividers between navigation */
      &.divider { background: darken($topBarBgColor, 15%); @include box-shadow(1px 0 0 rgba(255,255,255,0.10)); height: 100%; margin-right: 1px; width: 1px; }

      /* Put a button in an <li> but give is a class */
      &.has-button {
        a.button { margin: 0 $topBarHeight / 4; }
        &:hover, &:focus { background: $topBarBgColor;
          a { color: #fff; }
        }
      }


      /* Put a search bar or text input in the bar */
      &.search { padding: 0 $topBarHeight / 3;
        form { display: inline-block; margin-bottom: 0; vertical-align: middle; width: $topBarSearchWidth;
          input[type=text] { @include border-right-radius(0); float: left; font-size: ms(0) - 1; margin-top: -1px; height: $topBarHeight / 2; //28px
                            margin-bottom: 0; width: $topBarSearchWidth - 70px;
            &+.button { border-left: none; @include border-left-radius(0); float: left; font-size: ms(0) - 2; margin-top: -1px; padding: 5px 12px 4px; }
          }
          input[type=search] { font-size: 16px; margin-bottom: 0; }
        }
        input[type=search] { font-size: 16px; margin-bottom: 0; }
      }
      &:hover, &:focus { background: $topBarBgColor; }

      /* Put login bar in the top bar */
      &.login {padding: 0 $topBarHeight / 3;
        form {display: inline-block; margin-bottom: 0; vertical-align: middle; width: $topBarLoginWidth;
          input{float: left; width: auto; font-size: ms(0) - 1; margin-top: -1px; height: $topBarHeight / 2; margin-bottom: 0; }
          input[type=text]{ @include border-right-radius(0); width: $topBarLoginInputWidth;}
          input[type=password] { margin-bottom: 0; @include border-left-radius(0); width: $topBarLoginInputWidth;
            &+.button {border-left: none; @include border-left-radius(0); @include border-right-radius(2px); float: left; font-size: ms(0) - 2; margin-top: -1px; padding: 5px 12px 4px; width: $topBarLoginButtonWidth;}
          }
        }
        &:hover, &:focus { background: $topBarBgColor; }
      }

      /* Hide the triangle for breakpoint menu */
      &.toggle-topbar { display: none; }

        /* li.has-dropdown */
        &.has-dropdown { position: relative;
          &:hover, &:focus { &>.dropdown { display: block; visibility: visible; } }
          a { padding-right: $topBarHeight * .75;
            &:after { @include cssTriangle($topBarDropToggleSize, $topBarDropToggleColor, top); margin-right: $topBarHeight / 3; margin-top: -$topBarDropToggleSize / 2; position: absolute; right: 0; top: 50%; }
          }
          .dropdown { min-width: 100%; background: $topBarDropBgColor; left: 0; margin: 0; padding: $topBarHeight / 5 0 0 0; position: absolute; visibility: hidden; z-index: 99;
            li { background: $topBarDropBgColor; line-height: 1; min-width: 100%; padding-bottom: 5px;
              a { color: $topBarDropLinkColor; font-weight: normal; height: 100%; line-height: 1; padding: 5px $topBarHeight / 3 + 2 5px $topBarHeight / 3; white-space: nowrap;
                &:after { border: none; }
                &:hover, &:focus { background: lighten($topBarDropBgColor, 10%); }
              }
              label { color: lighten($topBarDropBgColor, 30%); font-size: ms(0) - 4; font-weight: $topBarLinkWeight; margin: 0; padding-left: $topBarHeight / 3; text-transform: uppercase; }
              &.divider { border-top: solid 1px darken($topBarDropBgColor, 20%); @include box-shadow(0 1px 0 rgba(255,255,255,.10) inset); height: 10px; padding: 0; width: 100%; }
              &:last-child { padding-bottom: 10px; }
              &.active a { background: darken($topBarBgColor, 15%); }
            }
          }

        /* Dropdown Level 2+ */
        .dropdown li.has-dropdown {
          &>a { padding-right: $navBarHeight * .75;
            &:after { border: none; content:"\00bb"; right: 5px; top: 6px; }
          }
          .dropdown { position: absolute; left: 100%; top: 0; }
          &:hover, &:focus {
            &>.dropdown { display: block; }
          }
        }
      }
    }

    /* Left Side <ul> */
    &.left { float: left; width: auto; margin-bottom: 0; }

    /* Right Side <ul> */
    &.right { float: right; width: auto; margin-bottom: 0;
      /* Dropdown Right Side Alignment */
      .has-dropdown .dropdown { left: auto; right: 0px;
        li.has-dropdown > .dropdown { right: 100%; left: auto; width: 100%; }
      }
    }
  }

  .js-generated { display: none; }

}

/* Firefox Fixes */
@-moz-document url-prefix() {
  .top-bar ul li .button.small { padding-bottom: 6px; }
  .top-bar ul li.search form input[type=search] { font-size: 14px; height: 22px; padding: 3px; }
}

/* IE8 Fixes */
.lt-ie9 .top-bar ul li a { color: $topBarLinkColor; display: block; font-weight: $topBarLinkWeight; font-size: $topBarLinkSize; height: $topBarHeight; line-height: $topBarHeight; padding: 0 $topBarHeight / 3;
  &.button { height: auto; line-height: 30px; margin-top: 7px; }
  img { margin-top: -5px; vertical-align: middle; }
}
.lt-ie9 .top-bar section > ul > li
{
 a
  {
&:hover, &:focus {color: darken($topBarLinkColor, 20%); }
}
  &:hover, &:focus { background: darken($topBarBgColor, 15%) }
&.search:hover,&.search:focus,&.has-button:hover,&.has-button:focus { background: none }
  &.active { background: darken($topBarBgColor, 15%); color: darken($topBarLinkColor, 15%); }
}
.lt-ie9 .top-bar ul li.has-dropdown {
  padding-right: $topBarHeight * .75;
  &>ul li { padding-right: 0; }
}
