// ----------------------------------- Header
#header {
  @mixin primary-gradient;
  @mixin shadow;
  @mixin text-shadow #000;
  display: table;
  height: 20px;
  width: 100%;
  overflow: visible;
  position: inherit;
  padding: 5px 0;
  z-index: 900;

  h1 {
    display: table-cell;
    vertical-align: middle;
    white-space: nowrap;
    color:  $page-header-text-color;
    margin-right: 20px;
    margin-bottom: 0px;
    padding: 3px $horizontal-page-margin 0 $horizontal-page-margin;
    font-size: 1.3em;
    font-weight: normal;
    line-height: 1.2;

    a {
      text-decoration: none;

      &:hover {
        color: #fff;
      }
    }

    img {
      position: relative;
      top: -2px;
    }
  }

  a, a:link { color: $page-header-text-color; }

  .header-item {
    top: 2px;
    position: relative;
    height: 20px
  }

  ul.tabs {
    display: table-cell;
    vertical-align: middle;
    height: 100%;
    margin: 0;
    padding: 0;

    li {
      /* Hover on li, display the ul */
      &:hover > ul { display: block;}
    }

    & > li {
      display: inline-block;
      margin-right: 4px;
      margin-top: 5px;
      margin-bottom: 5px;
      font-size: 1.0em;
      position: relative;

      a {
        text-decoration: none;
        padding: 6px 10px 4px 10px;
        position: relative;
        @mixin rounded 10px;
      }

      &.current > a {
        background: $current-menu-item-background;
        color: #fff;
      }

      &.has_nested > a {
        background: url($menu-arrow-light-icon-url) no-repeat calc(100% - 7px) 50%;
        padding-right: 20px;
      }

      &.has_nested.current > a {
        background: $current-menu-item-background url($menu-arrow-dark-icon-url) no-repeat calc(100% - 7px) 50%;
        padding-right: 20px;
      }

      &:hover > a {
        background: $hover-menu-item-background;
        color: #fff;
      }

      &.has_nested:hover > a {
        @mixin rounded-top 10px;
        border-bottom: 5px solid $hover-menu-item-background;
        background: $hover-menu-item-background url($menu-arrow-dark-icon-url) no-repeat calc(100% - 7px) 50%;
        z-index: 1020;
      }


      /* Drop down menus */
      ul {
        background: $hover-menu-item-background;
        @mixin rounded-all 0,10px,10px,10px;
        @mixin shadow 0, 1px, 3px, #444;
        position: absolute;
        width: 120%;
        min-width: 175px;
        max-width: calc(100% + 20px);
        margin-top: 5px;
        float: left;
        display: none;
        padding: 3px 0px 5px 0;
        list-style: none;
        z-index: 1010;

        li {
          position: relative;
          margin: 0px;
          a {
            background: none;
            display: block;
            &:hover { color: #fff; background: none; }
          }

          &.current {
            a { @mixin rounded 0 }
          }

          &.has_nested > a {
            background: url($menu-arrow-right-light-icon-url) no-repeat calc(100% - 7px) 55%;
            padding-right: 20px;
          }

          &.has_nested:hover > a {
            background: url($menu-arrow-right-dark-icon-url) no-repeat calc(100% - 7px) 55%;
            color: #fff;
          }

          ul {
            @mixin rounded-all 10px,10px,10px,10px;
            margin-top: 0;
            top: -3px;
            left: 100%;

            /* Create an invisible backdrop that adds 8px margin around the dropdown menu or submenu
               that maintains the hover. This makes it much easier to navigate to submenus in
               particular without losing hover accientally, especially near rounded corners. */
            &:after {
              content: "";
              display: block;
              position: absolute;
              top: -8px;
              left: -8px;
              height: calc(100% + 16px);
              width: calc(100% + 16px);
              z-index: -2;
            }
          }
        }
      }
    }
  }

  #tabs {
    width: 100%;
  }

  #utility_nav {
    color: #aaa;
    display: table-cell;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    padding-right: 26px;
    text-align: right;

    a { text-decoration: none; }
    a:hover { color: #fff; }

    li {
      display:inline;
    }
  }

}