.nav-bar { height: $navBarHeight; background: lighten($black, 30%); margin-left: 0; margin-top: $navBarHeight / 2; padding: 0;

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

      &:first-child { @include box-shadow(0 0 0); }
      &:last-child { border-#{$defaultOpposite}: solid 1px lighten($black, 20%); @include box-shadow(1px 0 0 fade-out($shinyEdge, .3) inset, 1px 0 0 fade-out($shinyEdge, .3)); }

      &.active { background: $mainColor; border-color: darken($mainColor, 10%);
        &>a { color: $white; cursor: default; }
        &:hover { background: $mainColor; cursor: default; }
      }
      &:hover { background: lighten($black, 20%); }

      &>a { color: darken($white, 10%); }
      ul { margin-bottom: 0; }
      .flyout { display: none; }

      &.has-flyout {
        &>a:first-child { padding-#{$defaultOpposite}: $navBarHeight; position: relative;
          &:after { @include cssTriangle(4px, darken($white, 10%), 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-child { padding-#{$defaultOpposite}: 55px;}
          &>a.flyout-toggle { border-#{$defaultFloat}: 1px dashed #666; }
        }
      }
    }

    &>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 lighten($black, 20%); @include box-shadow(none);

        &.has-flyout>a:first-child:after { @include cssTriangle(4px, darken($white, 10%), $defaultFloat); }
        .flyout { #{$defaultFloat}: 100%; top: -1px;
          &.right { #{$defaultFloat}: auto; #{$defaultOpposite}: 100%; }
        }
        &.active { border-#{$defaultOpposite}: solid 1px darken($mainColor, 10%); }
        &:last-child { border-bottom: solid 1px lighten($black, 20%);}
      }
    }

  }

  .flyout { background: darken($white, 5%); padding: $navBarHeight / 2; margin: 0; border: 1px solid darken($white, 15%); position: absolute; top: $navBarHeight - 1; #{$defaultFloat}: -1px; width: $navFlyoutBaseWidth; z-index: 40; @include box-shadow(0 1px 5px rgba(#000, .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 #CCC;
      a { background: darken($white, 5%); border: 1px solid darken($white, 10%); border-width: 1px 1px 0 0; color: #555; 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 { background: darken($white, 8%); color: #333; }
      }
      &.active { margin-top: 0; border-top: 1px solid lighten($black, 30%); border-#{$defaultFloat}: 4px solid lighten($black, 10%);
        a { background: lighten($black, 30%); border: none; color: #fff; height: auto; margin: 0; position: static; top: 0; @include box-shadow(0 0 0); }
      }
    }

  }