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

.hp-header-controls, .hp-details-header-controls {
  position:absolute;
  right: 0px;
  top: 0px;
  
  > * {
    display: inline-block;
    vertical-align: top;
  }

  /*.hp-map-control {
    position: relative;
    top: 5px;
    margin-right: 0px;
    @include box-sizing(border-box);
    height: 20px;
    width: 20px;
    background-image: url($img-file);
    background-position: -256px -19px;
    background-repeat: no-repeat;
    
    &:hover {
      background-position: -256px 1px;
    }
  }*/

  .hp-details-actions, .hp-header-actions {
    
    > label {
      height: 25px;
      font-size: 14px;
      line-height: 25px;
      font-family: 'HPRegular', Arial, Helvetica, sans-serif;
      color: $text-link-color;
      border: 2px solid #BFE5F5;
      border-top-right-radius: 5px;
      border-bottom-left-radius: 5px;
      background-color: #BFE5F5;
      
      &:after {
        display: inline-block;
        vertical-align: top;
        content: '';
        width: 25px;
        height: 25px;
        margin-left: 10px;
        background-image: $select-down-link-url;
        background-position: 3px 4px;
        background-repeat: no-repeat;
        border-left: 1px solid #ccc;
      }
      
      &:hover {
        border-color: #999;
      }
    }
    
    &.hp-active {
      > label {
        border-color: transparent;
        background-color: transparent;
      }
    }
        
    .hp-details-actions-button, .hp-header-actions-button {
      
      border: none;
    
      .hp-details-actions-button-label, .hp-header-actions-button-label {
        display: inline-block;
        white-space: nowrap;
      }
    }
  }
  
  .hp-drop-menu label {
    text-align: right;
  }
  
  .hp-header-selection {
    color: $secondary-color;
    font-style: italic;
    vertical-align: baseline;
    margin: 0px 10px;
    
    html.hp-high-contrast & {
      color: $projection-secondary-color;
    }
  }
  
  .hp-header-select-all {
    margin: 0px 10px;
    cursor: pointer;
  }
  
  @media print {
    display: none !important;
  }
}
    
.hp-details-header, .hp-full-header {
  position: relative;
  height: $subnav-height;
  line-height: $subnav-height - 2px;
  margin-bottom: 20px;
  white-space: nowrap;
  z-index: $header-z-index;
  font-family: 'HPRegular', Arial, Helvetica, sans-serif;
  
  > * {
    display: inline-block;
    vertical-align: top;
    margin-right: -4px;
    
    &:last-child {
      margin-right: 0px;
    }
  }
  
  > .hp-status {
    position: relative;
    top: 11px;
    margin-right: 10px;
  }
  
  div.hp-context {
    position: absolute;
    top: 2px;
    font-size: 14px;
    line-height: normal;
    color: #aaa;
  }
  
  h1 {
    margin: 0px;
    padding-left: 0px;
    padding-right: 10px;
    font-size: 24px;
    line-height: $subnav-height - 2px;
    font-weight: normal;
    font-family: 'HPBold', Arial, Helvetica, sans-serif;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    
    .hp-annotation {
      color: $panel-title-color;
      
      html.hp-high-contrast & {
        color: $projection-secondary-color;
      }
    }
  }
  
  .hp-panel-selector {
    font-size: 22px;
    border-left: 1px solid $primary-divider;
    border-right: 1px solid $primary-divider;
    color: $secondary-color;
    font-family: 'HPRegular', Arial, Helvetica, sans-serif;
    
    > label {
      line-height: 40px;
      height: 40px;
    }
    
    > .hp-value {
      font-family: 'HPLight', Arial, Helvetica, sans-serif;
      
      &:after {
        content: '';
        width: 30px;
        background-image: $select-down-link-url;
        background-position: 5px -4px;
      }
    }
    
    .hp-options li {
      height: 36px;
      line-height: 36px;
      
      &.hp-sub-options {
        height: auto;
      }
    }
    
    &:hover {
      > .hp-value {
        color: #000;
        
        &:after {
          content: '';
          background-image: $select-down-over-url;
        }
      }
    }
  }
  
  .hp-panel-selector-title {
    display: inline-block;
    font-size: 16px;
    height: 30px;
    line-height: 30px;
    white-space: nowrap;
    padding: 0px 15px;
    border-left: 1px solid $secondary-divider;
  }
  
  &.hp-nameless {
    .hp-panel-selector {
      border-left: none;
      margin-left: -10px;
    }
  }
  
  .hp-map-control, .hp-related-control {
    position: relative;
    @include box-sizing(border-box);
    height: $subnav-height;
    width: $subnav-height + 2;
    border-right: 1px solid $primary-divider;
    
    &:after {
      position: absolute;
      top: 13px;
      left: 16px;
      content: '';
      display: inline-block;
      width: 20px;
      height: 20px;
      background-image: url($img-file);
      background-position: -260px -20px;
      background-repeat: no-repeat;
    };
    
    &:hover, &.hp-active {
      &:after {
        content: '';
        background-position: -260px 0px;
      }
    }
    
  }
  
  .hp-details-header-controls, .hp-header-controls {
    top: 6px;
  }
  
  @media print {
    @include print-position();
    height: 80px;
  }
}

.hp-details-nav {
  height: $subnav-height;
  line-height: $subnav-height - 2px;
  margin-bottom: 10px;
  white-space: nowrap;
  z-index: $header-z-index;
  border-top: 1px solid $secondary-divider;
  
  > * {
    display: inline-block;
    vertical-align: top;
  }
 
  .hp-search {
    position: relative;
    height: 100%;
    width: 20px;
    
    &:after {
      position: absolute;
      top: 0px;
      right: 0px;
      width: 15px;
      height: 16px;
      background-image: url($img-file);
      background-position: -120px -120px;
      background-repeat: no-repeat;
      cursor: pointer;

      &:hover {
        background-position: -120px -100px;
      }
    }
  }
}

.hp-details-sub-header {
  min-height: 32px;
  margin-bottom: 20px;
  padding-bottom: 5px;
  
  .hp-breadcrumbs {
    display: inline-block;
    margin: 10px 20px 5px 0px;
    font-size: 16px;
    
    li {
      display: inline-block;
      
      &:after {
        content: ' > ';
      }
      
      &:last-child:after {
        content: '';
      }
    }
  }
  
  .hp-controls {
    float: right;
    display: block;
    margin: 2px 0px 5px 20px;
    
    li {
      display: inline-block;
      padding: 5px 5px 5px 7px;
      border-left: 1px solid $global-divider;
      
      &:first-child {
        border: none;
      }
    }
  }
}