  .nav-bar { height: $navBarHeight; background: $navBarBackgroundColor; margin-left: 0; margin-top: $navBarHeight / 2; padding: 0;

    &>li { float: $defaultFloat; display: block; position: relative; padding: 0; margin: 0; border: 1px solid $navBarBorderColor; border-#{$defaultOpposite}: none; line-height: $navBarHeight - 2; @include box-shadow(1px 0 0 fade-out($shinyEdge, .3) inset);

      &:first-of-type { @include box-shadow(0 0 0); }
      &:last-of-type { border-#{$defaultOpposite}: solid 1px $navBarBorderColor; @include box-shadow(1px 0 0 fade-out($shinyEdge, .3) inset, 1px 0 0 fade-out($shinyEdge, .3)); }

      &.active { background: $navBarActiveColor; border-color: $navBarActiveBorderColor;
        &>a { color: $navBarLightBaseColor; cursor: default; }
        &:hover { background: $navBarActiveColor; cursor: default; }
      }
      &:hover { background: $navBarBorderColor; }

      &>a { color: $navBarTextColor; }
      ul { margin-bottom: 0; }
      .flyout { display: none; }

      &.has-flyout {

        &>a:first-of-type { padding-#{$defaultOpposite}: $navBarHeight; position: relative;
          &:after { @include cssTriangle(4px, $navBarTextColor, top); position: absolute; #{$defaultOpposite}: $navBarHeight / 2; top: ($navBarHeight / 2) - 3; }
        }
        &>a.flyout-toggle { border-#{$defaultFloat}: 0 !important; position: absolute; #{$defaultOpposite}: 0; top: 0; padding: ($navBarHeight / 2); z-index: 2; display: block; }
        &.is-touch {
          &>a:first-of-type { padding-#{$defaultOpposite}: 55px;}
          &>a.flyout-toggle { border-#{$defaultFloat}: 1px dashed $navBarTouchFlyoutBorderColor; }
        }
        &:hover .dropdown { display: block; }
      }
    }

    &>li>a:first-child { position: relative; padding: 0 ($navBarHeight / 2); display: block; text-decoration: none; font-size: ms(0); }
    &>li>input { margin: 0 10px; }

    &.vertical { height: auto; margin-top: 0;

      &>li { float: none; border-bottom: none; border-#{$defaultOpposite}: solid 1px $navBarBorderColor; @include box-shadow(none);

        &.has-flyout>a:first-of-type:after { @include cssTriangle(4px, $navBarTextColor, $defaultFloat); }
        .flyout { #{$defaultFloat}: 100%; top: -1px;
          &.right { #{$defaultFloat}: auto; #{$defaultOpposite}: 100%; }
        }
        &.active { border-#{$defaultOpposite}: solid 1px $navBarActiveBorderColor; }
        &:last-of-type { border-bottom: solid 1px $navBarBorderColor;}
      }
    }

  }

  .flyout { background: $navBarFlyoutBackground; padding: $navBarHeight / 2; margin: 0; border: 1px solid $navBarFlyoutBorder; position: absolute; top: $navBarHeight - 1; #{$defaultFloat}: -1px; width: $navFlyoutBaseWidth; z-index: 40; @include box-shadow(0 1px 5px rgba($black, .1));

    p { line-height: 1.2; font-size: ms(0) - 1; }
    *:first-child { margin-top: 0; } /* remove margin on any first-child element */
    *:last-child { margin-bottom: 0; } /* remove margin on last element */

    &.small { width: $navFlyoutBaseWidth / 1.5; }
    &.large { width: $navFlyoutBaseWidth * 1.75; }

    &.right { left: auto; right: -2px; }
    &.left { right: auto; left: -2px; }
    &.up { top: auto; bottom: $navBarHeight - 1; }

  }

  ul.flyout, .nav-bar li ul { padding: 0; list-style: none;

    li { border-#{$defaultFloat}: solid 3px $navBarFlyoutSideBorder;
      a { background: $navBarFlyoutBackground; border: 1px solid $navBarTextColor; border-width: 1px 1px 0 0; color: $navBarFlyoutTextColor; display: block; font-size: ms(0); height: auto; line-height: 1; padding: (($navBarHeight / 2) - 5) ($navBarHeight / 2); @include box-shadow(0 1px 0 $shinyEdge inset);
        &:hover, &:focus { background: $navBarFlyoutHover; color: $navBarFlyoutTextHover; }
      }
      &.active { margin-top: 0; border-top: 1px solid $navBarBackgroundColor; border-#{$defaultFloat}: 4px solid $navBarFlyoutActiveBorder;
        a { background: $navBarBackgroundColor; border: none; color: $navBarFlyoutTextActive; height: auto; margin: 0; position: static; top: 0; @include box-shadow(0 0 0); }
      }
    }

  }
