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

#hp-main-banner {
  #hp-main-menu-control {
    @include box-sizing(border-box);
    min-width: 210px;
    padding: 10px;
    white-space: nowrap;
    @include no-select();
    
    &:hover {
      border-right: 1px solid $global-divider;
      &:after {
        content: '';
        display: none;
      }
      .hp-main-menu-carret {
        background-image: $main-menu-over-url;
      }
    }
    
    &.hp-active:hover {
      border-bottom: 5px solid $dropdown-border;
      height: $banner-height + 5px;
    }
    
    &.hp-selected:hover {
      border-bottom: none;
      height: $banner-height;
    }
    
    &:after {
      content: '';
      position: absolute;
      top: 15px;
      right: 0px;
      height: 30px;
      width: 1px;
      background-color: $global-divider;
    }
    
    &.hp-disabled {
      cursor: default;
      
      &:after {
        content: '';
        display: none;
      }
      
      .hp-main-menu-carret {
        display: none;
      }
      
      &:hover {
        border: none;
      }
    }
    
    body.hp-basic-layout & {
      padding: 10px 30px 10px 30px;
    }
    
    #hp-logo {
      position: relative;
      top: 8px;
      display: inline-block;
      vertical-align: top;
      background-image: url($img-file);
      background-position: $logo-x $logo-y;
      background-repeat: no-repeat;
      width: 25px;
      height: 25px;
      
      body.hp-basic-layout & {
        top: 3px;
        width: 36px;
        height: 36px;
        background-position: $logo-x ($logo-y - 100);
      }
    }
    
    #hp-main-menu-labels {
      position: relative;
      top: 12px;
      display: inline-block;
      vertical-align: top;
      height: $banner-height - 20;
      padding-right: 5px;
      padding-left: 5px;
      min-width: 135px;
      //max-width: 240px;
      @include box-sizing(border-box);
    }
    
    #hp-main-menu-label {
      font-size: 16px;
      font-weight: normal;
      line-height: normal;
      vertical-align: bottom;
      margin-bottom: 3px;
      
      body.hp-basic-layout & {
        position: relative;
        top: -12px;
        font-size: 36px;
        font-family: 'HPLight', Arial, Helvetica, sans-serif;
        padding-right: 15px;
        padding-left: 15px;
      }
    }
    
    #hp-main-menu-sub-label {
      font-size: 12px;
      margin: 0px;
      color: $secondary-color;
      text-align: right;
    }
    
    .hp-main-menu-carret {
      position: relative;
      top: 11px;
      display: inline-block;
      vertical-align: top;
      width: 20px;
      height: 20px;
      background-image: $main-menu-active-url;
      background-position: right 0px;
      background-repeat: no-repeat;
    }
  }
}

#hp-main-menu {
  position: absolute;
  top: 0px;
  height: auto;
  background-color: #fff;
  padding: $banner-height 42px 15px 42px;
  @include box-sizing(border-box);
  font-size: 16px;
  z-index: $banner-flyout-z-index;
  display: none;
  @include drop-menu-border();
  border-left-color: transparent;
  
  &.hp-active {
    display: block;
  }
  
  body.hp-basic-layout & {
    padding-left: 85px;
    padding-right: 30px;
    font-size: 18px;
  }
  
  > :first-child {
    border-top: 1px solid #000;
    padding-top: 22px;
  }
  
  > header a {
    display: block;
    padding: 12px 0px;
  }
    
  .hp-sections > li {
    display: inline-block;
    vertical-align: top;
    margin-right: 20px;
    
    label {
      display: block;
      font-weight: bold;
      font-size: 12px;
      margin-bottom: 10px;
      color: #999;
      text-transform: uppercase;
    }
  }

  .hp-section > li {
    margin-bottom: 6px;
    min-width: 135px;
    
    &.hp-unauthorized {
      display: none;
    }
    
    a {
      display: block;
      color: $unselected-color;
      padding: 2px 0px;
      
      &.hp-selected {
        color: $menu-selected-color;
        font-weight: bold;
      }
      
      &:hover {
        color: $text-link-color;
        text-decoration: underline;
      }
    }
    
    .hp-menu-item-prompt {
      position: relative;
      display: inline-block;
      font-size: 13px;
      background-color: $attention-background;
      color: $attention-color;
      margin: 5px 10px;
      padding: 3px 10px 3px 10px;
      
      &:after {
        content: "";
        position: absolute;
        top: -5px;
        left: 5px;
        right: auto;
        border-width: 0 7px 7px;
        border-color: $attention-background transparent;
        border-style: solid;
        display: block;
        width: 0;
      }
      
      &.hp-done {
        background-image: url($img-file);
        background-position: -380px -215px;
        background-repeat: no-repeat;
      }
      
      a {
        display: inline;
        padding: 2px;
        color: $primary-color;
        
        &:hover {
          background-color: transparent;
          text-decoration: underline;
          color: $primary-color;
        }
      }
    }
  }
}