// ----------------------------------- Header
#header {
  @include primary-gradient;
  @include shadow;
  @include 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;
        @include 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 {
        @include 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;
        @include rounded-all(0,10px,10px,10px);
        @include 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 { @include 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 {
            @include 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;
    }
  }

}