// (C) Copyright 2011-2013 Hewlett-Packard Development Company, L.P.

#hp-main-banner, #hp-simple-banner {
  
  .hp-banner-control {
    position: relative;
    cursor: pointer;
    top: 0px;
    width: 50px;
    height: $banner-height;
    @include box-sizing(border-box);
    border: 1px solid transparent;
    
    &.hp-full {
      width: auto;
    }
     
    &:hover {
      background-color: $global-hover-background;
      &:after {
        content: '';
        display: none;
      }
    }
    
    &.hp-selected {
      //background-color: $global-selected-background;
      z-index: $banner-flyout-z-index + 10;
    }
    
    &:after {
      content: '';
      position: absolute;
      top: 15px;
      left: 0px;
      height: 30px;
      width: 1px;
      background-color: $global-divider;
    }
    
    .hp-icon {
      position: relative;
      top: 22px;
      left: 17px;
      width: 20px;
      height: 20px;
      background-image: url($img-file);
      background-repeat: no-repeat;
    }
    
    @media print {
      display: none;
    }
  }
  
  ol.hp-header-secondary {
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    background-color: $global-background;
    z-index: $header-z-index + 5; // above notifications
    white-space: nowrap;
    font-size: 0px;
    
    > li {
      display: inline-block;
      font-size: $body-font-size;
      vertical-align: top;
    }
    
    #hp-help-control {
      .hp-icon {
        top: 22px;
        background-position: $help-x -20px;
      }
      &:hover .hp-icon, &.hp-selected .hp-icon {
        background-position: $help-x 0px;
      }
    }
    
    @media print {
      height: auto;
      width: auto;
    }
  }
}

#hp-main-banner {
  border-bottom: 1px solid $global-border;
  z-index: $header-z-index;

  .hp-header-primary {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 150px;
    height: 100%;
    @include box-sizing(border-box);
    white-space: nowrap;
    background-color: $global-background;

    > * {
      vertical-align: top;
    }
    
    #hp-banner-title {
      display: none;
      margin: 0px;
      font-size: 21px;
      line-height: $banner-height;
      font-weight: normal;
      padding-left: 20px;
      padding-right: 20px;
    }

    @media print {
      display: none;
    }
  }
    
  #hp-main-menu-control, #hp-search-control {
    position: relative;
    display: inline-block;
    margin: 0px;
    font-weight: normal;
    color: $global-primary-color;
    height: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    
    &:hover {
      background-color: $global-hover-background;
      color: $global-hover-color;
    }
    
    &.hp-selected {
      ///background-color: $global-selected-background;
      z-index: $banner-flyout-z-index + 80; ///10;
    }
    
    &.hp-disabled {
      &:hover {
        background-color: inherit;
        color: $global-primary-color;
      }
    }
  }
  
  ol.hp-header-secondary {
    
    .hp-count { 
      position: absolute;
      top: 10px;
      right: 6px;
      height: 18px;
      width: 20px;
      padding-top: 2px;
      text-align: center;
      background-image: url($img-file);
      background-repeat: no-repeat;
      background-position: $activity-x -60px;
      font-size: 11px;
      font-weight: bold;
      color: #000;
      z-index: 1; ///26;
      display: none;
    
      &.hp-active {
        display: block;
      }
    }
    
    #hp-activity-control {
      
      .hp-icon {
        top: 23px;
        background-position: $activity-x -20px;
      }
      
      &:hover, &.hp-selected {
        .hp-icon {
          background-position: $activity-x 0px;
        }
        #hp-activity-control-new-count {
          background-position: $activity-x -40px;
        }
      }
    }

    #hp-session-control {
      white-space: nowrap;
      
      .hp-icon {
        top: 23px;
        background-position: $user-x -20px;
      }
      &:hover .hp-icon, &.hp-selected .hp-icon {
        background-position: $user-x 0px;
      }
      .hp-name {
        position: relative;
        top: 15px;
        padding: 0px 15px 0px 20px;
      }
      &.hp-full .hp-icon, &.hp-full .hp-name {
        display: inline-block;
      }
    }
  }
}

.hp-banner-flyout {
  position: absolute;
  top: $banner-height;
  width: 200px;
  right: 0px;
  @include box-sizing(border-box);
  background-color: $global-selected-background;
  color: $global-primary-color;
  z-index: $banner-flyout-z-index;
  @include drop-menu-border();
  text-align: left;
  line-height: normal;
  display: none;
  
  &.hp-active {
    display: block;
  }
  
  &.hp-sidebarred {
    top: 0px;
    width: auto; //200px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: #f3f3f3;
    z-index: 400;
    border: none;
  }
  
  > header {
    @include box-sizing(border-box);
    height: $subnav-height + 20px;
    line-height: $subnav-height - 2px;
    padding: 10px 15px;
    color: #333;
    font-family: 'HPRegular', Arial, Helvetica, sans-serif;
    
    h1 {
      font-size: 18px;
      line-height: inherit;
    }
    
    .hp-pin-right {
      position: absolute;
      top: 9px;
      right: -2px;
      
      .hp-sidebarred & {
        right: 20px;
      }
    }
  }
}