@charset "UTF-8";
//! (C) Copyright 2011-2013 Hewlett-Packard Development Company, L.P.

@import "hp-piano-mixins";

/* Fonts */

// TODO: add a CSS class to disable HP-Simplified for languages that don't have a mapping
@font-face {
  font-family: 'HPBold';
  src: url($font-dir + "/HPSimplifiedW04-Bold.eot");
  src: url($font-dir + "/HPSimplifiedW04-Bold.eot?#iefix") format("embedded-opentype"), url($font-dir + "/HPSimplifiedW04-Bold.ttf") format("truetype");
  //src: url("fonts/HPSimplifiedW04-Bold.eot?#iefix") format("embedded-opentype"), url("fonts/HPSimplifiedW04-Bold.woff") format("woff"), url("fonts/HPSimplifiedW04-Bold.ttf") format("truetype"), url("fonts/HPSimplifiedW04-Bold.svg#HPBold") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'HPRegular';
  src: url($font-dir + "/HPSimplifiedW04-Regular.eot");
  src: url($font-dir + "/HPSimplifiedW04-Regular.eot?#iefix") format("embedded-opentype"), url($font-dir + "/HPSimplifiedW04-Regular.ttf") format("truetype");
  //src: url("fonts/HPSimplifiedW04-Regular.eot?#iefix") format("embedded-opentype"), url("fonts/HPSimplifiedW04-Regular.woff") format("woff"), url("fonts/HPSimplifiedW04-Regular.ttf") format("truetype"), url("fonts/HPSimplifiedW04-Regular.svg#HPRegular") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'HPLight';
  src: url($font-dir + "/HPSimplifiedW04-Light.eot");
  src: url($font-dir + "/HPSimplifiedW04-Light.eot?#iefix") format("embedded-opentype"), url($font-dir + "/HPSimplifiedW04-Light.ttf") format("truetype");
  //src: url("fonts/HPSimplifiedW04-Light.eot?#iefix") format("embedded-opentype"), url("fonts/HPSimplifiedW04-Light.woff") format("woff"), url("fonts/HPSimplifiedW04-Light.ttf") format("truetype"), url("fonts/HPSimplifiedW04-Light.svg#HPLight") format("svg");
  font-weight: normal;
  font-style: normal;
}

html, body, #hp-body {
  height: 100%;
  width: 100%;
  
  @media print {
    @include print-position();
  }
}

/* base typography, colors, & utility classes */
body, #hp-body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: $body-font-size;
  line-height: 15px;
  overflow: hidden;
  background-color: $body-background;
  color: $global-primary-color;
  
  @media print {
    font-size: 12px;
    line-height: 14px;
    overflow: visible;
    background-color: #fff;
    color: #000;
  }
  
  html.no-js & {
    background-color: #fff;
  }
  
  > .hp-logo {
    position: absolute;
    top: 55px;
    left: 50%;
    height: 50px;
    width: 50px;
    background-position: -260px -180px;
    margin-left: -25px;
  }
  
  > .hp-spinner {
    position: absolute;
    top: 120px;
    .hp-spinner-image {
      background-position: $spinner-x 0px;
    }
  }
  
  &.hp-basic-layout {
    #hp-body-div {
      max-width: 960px;
      margin: 0px auto;
    }
  }
}

#hp-body-div {
  position: relative;
  height: 100%; // IE6
  width: 100%;
  background-color: $body-background;
  color: $global-primary-color;
  overflow:hidden;
  
  &.hp-sessioned {
    background-color: $body-background;
    color: $primary-color;
    
    html.hp-high-contrast & {
      color: $projection-color;
    }
  }
  
  -webkit-animation-name: reset, fade-in;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 0, 0.1s;
  -moz-animation-name: reset, fade-in;
  -moz-animation-duration: 1s;
  -moz-animation-timing-function: ease-in;
  -moz-animation-iteration-count: 1;
  -moz-animation-delay: 0, 0.1s;
  -ms-animation-name: reset, fade-in;
  -ms-animation-duration: 1s;
  -ms-animation-timing-function: ease-in;
  -ms-animation-iteration-count: 1;
  -ms-animation-delay: 0, 0.1s;
  -o-animation-name: reset, fade-in;
  -o-animation-duration: 1s;
  -o-animation-timing-function: ease-in;
  -o-animation-iteration-count: 1;
  -o-animation-delay: 0, 0.1s;
  
  > .hp-confidential {
    position: absolute;
    bottom: 0px;
    right: 0px;
    font-size: 10px;
    line-height: normal;
    padding: 1px 5px;
    background-color: #d9d9d9;
    color: #666;
    z-index: $dialog-z-index;
  }
  
  @media print {
    @include print-position();
    background-color: #fff;
    color: #000;
  }
}

/* http://css3.wikidot.com/blog:animated-page-entry-with-css3 */
@-webkit-keyframes reset {
  0%   {opacity: 0;}
  100% {opacity: 0;}
}
 
@-webkit-keyframes fade-in {
  0%   {opacity: 0;}
  60%  {opacity: 0;}
  100% {opacity: 1;}
}

@-moz-keyframes reset {
  0%   {opacity: 0;}
  100% {opacity: 0;}
}
 
@-moz-keyframes fade-in {
  0%   {opacity: 0;}
  60%  {opacity: 0;}
  100% {opacity: 1;}
}

@-ms-keyframes reset {
  0%   {opacity: 0;}
  100% {opacity: 0;}
}
 
@-ms-keyframes fade-in {
  0%   {opacity: 0;}
  60%  {opacity: 0;}
  100% {opacity: 1;}
}

@-o-keyframes reset {
  0%   {opacity: 0;}
  100% {opacity: 0;}
}
 
@-o-keyframes fade-in {
  0%   {opacity: 0;}
  60%  {opacity: 0;}
  100% {opacity: 1;}
}

html:not(.experimental) .hp-experimental {
  display: none !important;
}

.experimental .hp-master-details .hp-details-pane .hp-details-header
.hp-details-title-controls .hp-map-control {
  display: inline-block;
}

.hp-logo {
  background-image: url($img-file);
  background-position: $logo-x $logo-y;
  background-repeat: no-repeat;
  width: 32px;
  height: 30px;
}

input,
textarea,
select,
button {
  font-family: Arial, Helvetica, sans-serif;
  /* because Webkit hijacks this */
}
a {
  color: $text-link-color; ///inherit;
  text-decoration: none;
  cursor: pointer;
  
  &:hover {
    text-decoration: underline;
  }
  
  &.hp-disabled {
    color: inherit;
    pointer-events: none;
    cursor: default;
    
    &:hover {
      text-decoration: none;
    }
  }
}

h1 {
  font-size: 20px;
  font-weight: bold;
  line-height: 30px;
}

h2 {
  font-size: 18px;
  font-weight: normal;
  margin: 20px 0px 10px 0px;
}

h3 {
  font-size: 16px;
  font-weight: normal;
  margin: 10px 0px;
}

label, div, p, span, td, h1, h2, h3 {
  
  &.hp-error {
    color: $error;
  }

  &.hp-unset, &.hp-pending, &.hp-missing {
    color: $secondary-color;
    font-style: italic;
    
    html.hp-high-contrast & {
      color: $projection-secondary-color;
    }
  }
  
  &.hp-help, &.hp-optional, &.hp-important {
    color: $secondary-color;
    
    html.hp-high-contrast & {
      color: $projection-secondary-color;
    }
  }
  
  &.hp-primary {
    color: #000;
    font-weight: bold;
  }
  
  &.hp-secondary {
    color: $secondary-color;
    
    html.hp-high-contrast & {
      color: $projection-secondary-color;
    }
  }
  
  &.hp-numeric {
    text-align: right;
  }
  
  &.hp-dynamic {
    opacity: 1.0;
    @include transition-full(opacity, 0.2s, ease, 0s);
    -webkit-backface-visibility: hidden;
    
    .hp-show-changing & {
      opacity: 0.2;
    }
  }
  
  &.hp-unavailable {
    position: relative;
    min-width: 1em;
    
    &:before {
      position: absolute;
      content: '—';
    }
  }
}

label, span {
  &.hp-secondary {
    margin-left: 5px;
  }
}

input, textarea {
  @include box-sizing(border-box);
  margin-bottom: 10px;
  padding: 7px 18px 7px 10px; // leave room for validation icons
  background-color: $primary-background;
  border: 1px solid $primary-divider;
  font-size: 13px;
  line-height: 14px;
  color: $primary-color;
  outline: none;
  
  html.hp-high-contrast & {
    color: $projection-color;
  }
    
  &.hp-error, &.error {
    border-color: $error;
    background-image: $invalid-url;
    background-position: right 4px;
    background-repeat: no-repeat;
    padding-right: 18px;
  }
  
  /*&.hp-normal, &.valid {
    border-color: $normal;
    background-image: $valid-url;
    background-position: right 0px;
    background-repeat: no-repeat;
  }*/
  
  &:focus {
    border-color: $selected-background;
  }
}

textarea {
  background: #fff;
  
  &.hp-code {
    font-family: monospace;
  }
}

input, textarea {
  &::-webkit-input-placeholder {
    color: $tertiary-color;
  }
  &:-moz-placeholder {
    color: $tertiary-color;
  }
}

input[type="text"], input[type="date"] {
  height: 30px;
}

input[type="radio"], input[type="checkbox"] {
  border: none;
  padding: 0px;
}

input[type="number"] {
  text-align: right;
}

input[type="search"] {
  font-size: 16px;
}

input[type="button"], input[type="submit"], input[type="reset"],
button, select, a.hp-button, label.hp-button, a.ui-button {
  display: inline-block;
  @include box-sizing(border-box);
  margin: 0px;
  padding: 0px  13px;
  font-size: 18px;
  //line-height: 14px; // ignored by firefox! so use following line :(
  line-height: 26px;
  //line-height:normal !important;
  font-weight: normal;
  height: 30px;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #fff;
  border: 2px solid #e6e6e6;
  border-top-right-radius: 5px;
  border-bottom-left-radius: 5px;
  color: #000;
  font-family: 'HPRegular', Arial, Helvetica, sans-serif;
  cursor: pointer;
  @include transition(background-color, 0.1s);
  
  &:hover {
    border-color: #999;
    text-decoration: none;
  }
  
  &:active {
    background-color: #e6e6e6;
    border-color: #999;
  }
  
  &.hp-disabled {
    background-color: $secondary-background;
    border-color: $secondary-background;
    color: $secondary-color;
    cursor:default;
  }
  // this is separate so IE8 doesn't skip the above
  &:disabled {
    background-color: $secondary-background;
    border-color: $secondary-background;
    color: $secondary-color;
  }
  
  &.hp-primary, &.ui-datepicker-close {
    background-color: #0096d6;
    border-color: #0096d6;
    color: #fff;
    font-family: 'HPBold', Arial, Helvetica, sans-serif;
    
    &:hover {
      border-color: #666;
    }
    
    &:active {
      background-color: #0096d6;
      border-color: #333;
    }
    
    &.hp-disabled {
      background-color: $secondary-background;
      border-color: $secondary-background;
      color: $secondary-color;
    }
    // this is separate so IE8 doesn't skip the above
    &:disabled {
      background-color: $secondary-background;
      border-color: $secondary-background;
      color: $secondary-color;
    }
  }
  
  &.hp-secondary {
    color: $text-link-color;
    border: 2px solid #BFE5F5; //#e6e6e6;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 5px;
    background-color: #BFE5F5;
    
    &:hover {
      border-color: #666;
    }
    
    &:active {
      background-color: #e6e6e6;
      border-color: #333;
    }
    
    &.hp-disabled {
      background-color: $secondary-background;
      border-color: $secondary-background;
      color: $secondary-color;
    }
    // this is separate so IE8 doesn't skip the above
    &:disabled {
      background-color: $secondary-background;
      border-color: $secondary-background;
      color: $secondary-color;
    }
  }
  
  &:focus {
    border-color: $selected-background;
  }
}

input::-moz-focus-inner,
button::-moz-focus-inner {
  padding:0; border:0;
}

input[disabled] {
  color: #999;
  background: #fcfcfc;
  border-color: #e2e2e2;
}

.ui-buttonset {
  margin-left: 0px;
  
  label.ui-button {
    margin: 2px 20px 0px 5px;
    border-radius: 0px;
    
    &.ui-state-active {
      color: #222;
    }
    
    &.ui-corner-right {
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
    }
    
    &.ui-corner-left {
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
    }
  }
}

select {
  padding-right: 23px;
  background: url('../../img/hp-piano/down-arrow-select.png') no-repeat right center, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
}

option {
  padding: 7px 10px;
  border-top: 1px solid $primary-divider;
  -webkit-appearance: none;

  &:hover {
    cursor: pointer;
  }
}

.hp-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hp-text-tip {
  position: absolute;
  background-color: $primary-background;
  color: $primary-color;
  padding: 5px;
  margin-left: -6px;
  margin-top: -6px;
  border: 1px solid $dropdown-outline;
  @include box-shadow(3px, 3px, 5px, 0px, $dropdown-shadow);
  z-index: $tooltip-z-index;
  
  &.hp-global {
    background-color: $global-hover-background;
    color: $global-primary-color;
    border: 1px solid #888;
    @include box-shadow(1px, 1px, 4px, 2px, $global-dropdown-shadow);
  }
}

.hp-template {
  display: none;
}

.hp-collapsible {
  > label {
    display: block;
    font-size: 16px;
    color: $secondary-color; // !important;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 20px;
    background-image: $collapse-open-url;
    background-position: -1px;
    background-repeat: no-repeat;
    cursor: pointer;
    
    html.hp-high-contrast & {
      color: $projection-secondary-color; // !important;
    }
    
    &:hover {
      background-image: $collapse-open-over-url;
      color: $primary-color;
    }
  }
  
  &.hp-collapsed {
    > label {
      background-image: $collapse-url;
      &:hover {
        background-image: $collapse-over-url;
      }
    }
    > div, > ol, > table {
       //display: none;
       height: 0px; // preserve width for container
       overflow: hidden;
    }
  }
}

.hp-collapser {
  width: 18px;
  height: 18px;
  background-image: $collapse-url;
  background-position: -1px;
  background-repeat: no-repeat;
  cursor: pointer;
  &:hover {
    background-image: $collapse-over-url;
  }
  &.hp-active {
    background-image: $collapse-open-url;
    &:hover {
      background-image: $collapse-open-over-url;
    }
  }
}

.hp-dropper {
  width: 12px;
  height: 6px;
  background-image: url('#{$img-dir}/down-arrow.png');
  background-repeat: no-repeat;
  background-position: center;
  
  &:hover {
    background-image: url('#{$img-dir}/down-arrow-hover.png');
  }
}
.hp-selected {
  .hp-dropper {
    background-image: url('#{$img-dir}/collapse-open-select.png');
  }
  .hp-simple-select:hover {
    .hp-dropper {
      background-image: url('#{$img-dir}/collapse-open-select-over.png');
    }
  }
}

.hp-comments-summary {
  position: relative;
  width: 19px;
  height: 15px;
  margin-top: 3px;
  background-image: url('#{$img-dir}/comment.png');
  background-position: center;
  background-repeat: no-repeat;
  cursor: pointer;
  
  &.hp-empty {
    opacity: 0.4;
  }
  
  span {
    display: block;
    position: absolute;
    right: 0px;
    top: 4px;
    border-radius: 10px;
    background-color: rgba(128, 128, 128, 0.9);
    border: 1px solid #999;
    color: #fff;
    font-size: 8px;
    line-height: 8px;
    padding: 1px 3px;
  }
}
.hp-selected .hp-comments-summary {
  background-image: url('#{$img-dir}/comment-select.png');
  span {
    color: #333;
    background-color: rgba(255, 255, 255, 0.9);
    border: 1px solid #eee;
  }
  &:hover {
    background-image: url('#{$img-dir}/comment-select-over.png');
    border-bottom: 1px solid #fff;
    span {
      background-color: #fff;
    }
  }
}

.hp-timestamp {
  color: $secondary-color;
  white-space: nowrap;
  
  html.hp-high-contrast & {
    color: $projection-secondary-color;
  }
}

// combined properties, individual ones below
.hp-select, .hp-drop-menu {
  position: relative;
  white-space: nowrap;
  
  &:focus {
    outline: none;
  }
  
  .hp-options {
    display: none;
    min-width: 100%;
    overflow: hidden;
    margin-bottom: 0px;
    @include box-sizing(content-box);
    
    ol {
      min-width: 100%;
      overflow: hidden;
      margin-bottom: 0px;
    }
    
    li {
      display: block;
      color: $primary-color;
      height: 30px;
      line-height: 30px;
      padding-left: 10px;
      padding-right: 10px;
      white-space: nowrap;
      cursor: pointer;
      
      html.hp-high-contrast & {
        color: $projection-color;
      }

      &:hover, &.hp-active {
        background-color: $menu-selection;
        text-decoration: none;
      }

      &.hp-selected {
        background-color: $selected-background;
        font-weight: bold;
      }
      
      &.hp-sub-options {
        height: auto;
        padding: 0px;
        
        &:hover {
          background: none;
        }
        
        .hp-prefix {
          visibility: hidden;
          padding-right: 5px;
          font-weight: normal;
        }
        
        ol li {
          &:first-child .hp-prefix {
            visibility: visible;
          }
          &:hover .hp-prefix {
            visibility: visible;
            color: $secondary-color;
          }
        }
      }
      
      a {
        display: block;
        width: 100%;
        height: 100%;
        text-decoration: none;
      }
      
      .hp-status {
        float: left;
        margin-top: 10px;
      }
    }
    
    > a {
      display: block;
      color: $primary-color;
      height: 30px;
      padding-left: 10px;
      padding-right: 10px;
      border-top: 1px solid $primary-divider;
      white-space: nowrap;
      cursor: pointer;
      
      html.hp-high-contrast & {
        color: $projection-color;
      }
    }
  }
  
  &.hp-active {
    .hp-options {
      display: block;
      ///@include box-sizing(border-box);
      position: absolute;
      top: -1px;
      padding-top: 30px;
      background-color: $primary-background;
      @include drop-menu-border();
      z-index: $drop-menu-z-index;
    }
  }
  
  &.hp-select-multi {
    li.hp-selected:hover {
      background-color: $menu-selection;
    }
  }
  
  &.hp-pinned {
    background: transparent;
    border: none;
    @include remove-box-shadow();
    margin: 10px 0px 20px 10px;
    
    > label {
      position: relative;
      display: block;
      color: $secondary-color;
      margin: 5px 0px;
      padding: 0px;
      
      html.hp-high-contrast & {
        color: $projection-secondary-color;
      }
      
      &:after {
        content: ':';
      }
    }
    
    .hp-options {
      position: relative;
      @include remove-box-shadow();
      border: none;
      background-color: transparent;
      padding-top: 0px;
    }
  }
  
  ol {
    border-bottom: 1px solid $primary-divider;
    
    &:last-of-type {
      border: none;
      margin-bottom: 0px;
      padding-bottom: 0px;
    }
  }
}

.hp-select {
  
  > label {
    position: relative;
    display: none;
    padding: 0px 10px;
  }
  
  .hp-value {
    position: relative;
    display: block;
    padding-left: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    
    &:after {
      display: inline-block;
      content: '';
      width: 20px;
      height: 12px;
      background-image: $select-down-url;
      background-position: right -2px;
      background-repeat: no-repeat;
      
      @media print {
        display: none;
      }
    }
    
    &:hover {
      &:after {
        content: '';
        background-image: $select-down-over-url;
      
        .hp-global & {
          background-image: $select-down-global-url;
        }
      }
      .hp-global & {
        color: $global-primary-color;
      }
    }
    
    .hp-master-filter & {
      display: none;
    }
  }
  
  &:focus .hp-value {
    border: 1px solid $selected-background;
  }
  
  //&.hp-panel-selector .hp-value:after {
  //  content: '';
  //  background-position: right -3px;
  //}
  
  &.hp-sort {
    .hp-value:after {
      content: '';
      background-image: $sort-asc-url;
      background-position: right -2px;
    }
    
    .hp-value:hover:after {
      content: '';
      background-image: $sort-asc-over-url;
    }
    
    &.hp-sort-desc {
      .hp-value:after {
        content: '';
        background-image: $sort-desc-url;
        background-position: right -2px;
      }
      
      .hp-value:hover:after {
        content: '';
        background-image: $sort-desc-over-url;
      }
    }
  }
  
  &.hp-active {
    
    > label {
      position: absolute;
      left: 1px;
      display: block;
      color: $secondary-color;
      background-color: $primary-background;
      z-index: ($drop-menu-z-index + 1);
      @include box-sizing(border-box);
      
      html.hp-high-contrast & {
        color: $projection-secondary-color;
      }
    }
    
    .hp-value {
      overflow: hidden;
    }
  }
  
  &.hp-pinned {
    label {
      position: relative;
    }
  }
}

.hp-drop-menu {
  
  > label {
    position: relative;
    display: block;
    padding-left: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    
    &:after {
      display: inline-block;
      content: '';
      width: 20px;
      height: 12px;
      background-image: $select-down-url;
      background-position: right -1px;
      background-repeat: no-repeat;
    }
    
    &:hover:after {
      content: '';
      background-image: $select-down-over-url;
    }
    
    .hp-master-filter & {
      display: none;
    }
  }
  
  &:focus > label {
    border-color: $selected-background;
  }
  
  &.hp-active {
    > label {
      color: $secondary-color;
      border: 1px solid transparent;
      z-index: ($drop-menu-z-index + 1);
      
      html.hp-high-contrast & {
        color: $projection-secondary-color;
      }
      
      &:hover:after {
        content: '';
        background-image: $select-down-url;
      }
    }
  }
  
  &.hp-disabled {
    > label {
      color: $secondary-color;
      
      &:after {
        content: '';
        background-image: none;
      }
    }
    &:focus label {
      border-color: transparent;
    }
  }
}

.hp-search-combo {
  position: relative;
  @include box-sizing(border-box);
  
  .hp-search-combo-input {
    padding-right: 45px;
    margin: 0px;
    &.hp-error {
      background-image: none;
    }
  }
  
  .hp-close {
    position: absolute;
    top: 9px;
    right: 25px;
    cursor: pointer;
    z-index: 1;
  }
  
  .hp-search-combo-control {
    position: absolute;
    top: 6px;
    right: 7px;
    width: 15px;
    height: 16px;
    background-image: url($img-file);
    background-position: -120px -80px;
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 10;
    
    &:hover {
      background-position: -120px -60px;
    }
  }
  
  &.hp-disabled .hp-search-combo-control {
    cursor: auto;
    
    &:hover {
      background-position: -120px -80px;
    }
  }
  
  .hp-search-combo-menu {
    position: absolute;
    left: 2px;
    background-color: $primary-background;
    border: 1px solid $dropdown-outline;
    @include box-shadow(3px, 3px, 5px, 0px, $dropdown-shadow);
    @include box-sizing(border-box);
    z-index: $drop-menu-z-index;
    display: none;
    
    ol {
      overflow-y: auto;
      max-height: 200px;
      margin-bottom: 0px;
      
      li {
        margin-bottom: 0px;
        padding: 7px 10px;
        cursor: pointer;
      
        &:hover, &.hp-selected {
          background-color: $menu-selection;
        }
      
        .hp-error, .hp-help {
          display: inline-block;
          float: right;
        }
      }
    }
    
    .hp-message {
      @include box-sizing(border-box);
      background-color: $secondary-background;
      color: $secondary-color;
      padding: 7px 10px;
      
      html.hp-high-contrast & {
        color: $projection-secondary-color;
      }
    }
    
    &.hp-active {
      display: block;
    }
  }
}

.hp-contents {
  
  .hp-value {
    display: none;
  }
  
  .hp-options {
    margin-bottom: 0px;
    
    li {
      display: inline-block;
      margin-right: -4px;
      
      a {
        color: $secondary-primary-color;
        display: block;
        padding: 2px 10px;
        
        &:hover {
          background-color: $menu-selection;
          color: $primary-color;
          text-decoration: none;
        }
      }
      
      &.hp-selected a {
        background-color: $selected-background;
        color: #000;
        //font-weight: bold; too jumpy
      }
      
    }
  }
}

.hp-rich-value {
  position: relative;
  > * {
    display: inline-block;
    vertical-align: baseline;
    margin-right: 10px;
  }
  .hp-utilization-meter {
    position: relative;
    top: 1px;
    height: 10px;
  }
}

div.hp-graphed-value {
  position: relative;
  div.hp-value-graph {
    margin-bottom: 5px;
  }
  // assumes pie chart is 200x200
  div.hp-value {
    position: absolute;
    top: 64px;
    left: 40px;
    width: 120px;
    font-size: 32px;
    line-height: normal;
    text-align: center;
    vertical-align: middle;
    
    .hp-units {
      display: block;
      font-size: 18px;
    }
  }
  .hp-units-details {
    color: #666;
    font-family: 'HPLight', Arial, Helvetica, sans-serif;
    display: block;
    font-size: 18px;
  }
}

.hp-reveal-control {
  .hp-control {
    display: none;
  }
  &:hover {
    .hp-value {
      display: none;
    }
    .hp-control {
      display: block;
    }
  }
}

.hp-tooltip {
  position: absolute;
  padding: 10px 15px;
  background-color: $tooltip-background;
  color: #fff;
  font-size: 14px;
  z-index: 10000;
  
  html.hp-high-contrast & {
    color: $projection-color;
  }
  
  &.hp-above {
    &:after {
      content: "";
      position: absolute;
      top: auto;
      bottom: -7px;
      left: 10px;
      right: auto;
      border-width: 9px 9px 0;
      border-color: $tooltip-background transparent;
      border-style: solid;
      display: block;
      width: 0;
    }
  }
  
  &.hp-below {
    &:after {
      content: "";
      position: absolute;
      top: -7px;
      bottom: auto;
      left: 10px;
      right: auto;
      border-width: 0 9px 9px 9px;
      border-color: $tooltip-background transparent;
      border-style: solid;
      display: block;
      width: 0;
    }
  }
  
  &.hp-below-right {
    &:after {
      content: "";
      position: absolute;
      top: -7px;
      bottom: auto;
      left: auto;
      right: 10px;
      border-width: 0 9px 9px 9px;
      border-color: $tooltip-background transparent;
      border-style: solid;
      display: block;
      width: 0;
    }
  }
}

.hp-tbd {
  width: 100%;
  height: 100%;
  font-family: 'HPLight', Arial, Helvetica, sans-serif;
  font-size: 64px;
  line-height: normal;
  color: #ccc;
  margin: 0px;
}

.hp-dialog {
  .hp-notify {
    display: block;
    margin: 0px auto 20px auto;
    height: auto;
    width: auto;
    color: $primary-color;
  }
  
  .hp-collapsible {
    margin: 10px auto;
    
    label {
      font-size: 14px;
    }
  }
  
  .hp-dependencies {
    line-height: 16px;
    margin-bottom: 0px;
    margin-left: 15px;
    max-height: 200px;
    overflow-y: auto;
  }
  
  .hp-dialog-variable-contents {
    margin: 10px auto;
    margin-bottom: 0px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  
  .hp-prompt {
    margin: 10px 0px 10px 0px;
    font-weight: bold;
  }
  
  p {
    max-width: 460px;
  }
  
  .hp-add-form, .hp-edit-form {
    position: static;
  }
}

.ui-dialog {
  background-color: $primary-background;
  color: $primary-color;
  @include box-shadow(3px, 3px, 12px, 0px, #999);
  padding: 0px;
  max-width: 600px;
  border: none;
  border-radius: 0px;
  
  html.hp-high-contrast & {
    color: $projection-color;
  }
  
  .ui-dialog-titlebar {
    position: relative;
    background-color: $secondary-background;
    border-bottom: 1px solid $primary-divider;
    padding: 10px 20px;
    font-size: 16px;
    
    .ui-dialog-titlebar-close {
      position: absolute;
      top: 7px;
      right: 7px;
      width: 11px;
      height: 11px;
      margin: 0px;
      background-image: url($img-file);
      background-position: $close-x -20px;
      background-repeat: no-repeat;

      &:hover {
        background-position: $close-x 0px;
      }
      
      .ui-icon {
        display: none;
      }
    }
  }
  
  &.hp-response-dialog {
    // dialog contains controls to dismiss it
    .ui-dialog-titlebar-close {
      display: none;
    }
  }
  
  .ui-dialog-content {
    margin: 0px;
    padding: 30px;
    background-color: inherit;
    
    .hp-progress {
      width: 100%;
    }
    
    > * {
      margin: 15px 0px;
      
      &:first-of-type {
        margin-top: 0px;
      }
      &:last-of-type {
        margin-bottom: 0px;
      }
    }
  }
  
  &.hp-simple-dialog {
    .ui-dialog-titlebar {
      display: none;
    }
    .ui-dialog-content {
      margin: 20px 0px;
    }
    .hp-controls {
      margin-top: 20px;
      text-align: right;
    }
  }
  
  &.hp-splash-dialog {
    .ui-dialog-titlebar {
      display: none;
    }
    .ui-dialog-content {
      margin: 40px;
    }
  }
  
  .ui-dialog-buttonpane {
    padding: 10px;
    padding-bottom: 15px;
    
    .ui-dialog-buttonset {
      text-align: right;
    }
    
    button {
      margin-left: 10px;
    }
  }
}

.hp-dialog-button-stack {
  margin-bottom: 0px;
  li {
    display: table;
    margin-bottom: 15px;
    &:last-of-type {
      margin-bottom: 0px;
    }
    > * {
      display: table-cell;
    }
    button {
      width: 190px;
      cursor: pointer;
    }
    label {
      padding-left: 20px;
    }
  }
}

.hp-dialog-remote-console-verification {
  .float-left-div {
    line-height: 28px;
    float: left;
  }
  .float-right-div {
    float: right;
  }
  .centered-text-div {
    text-align: center;
  }
}

.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }

.ui-download-iframe {
  visibility:hidden;
  left:0;
  top:0;
  height:0;
  width:0;
}

.hp-flyout {
  position: absolute;
  @include box-sizing(border-box);
  padding: 20px;
  background-color: $primary-background;
  color: $primary-color;
  border: 1px solid $flyout-outline;
  z-index: $tooltip-z-index;
  @include box-shadow(0px, 5px, 6px, 0px, $dropdown-shadow);
  
  &:after {
    content: "";
    position: absolute;
    top: auto;
    bottom: -9px;
    left: 9px;
    right: auto;
    border-width: 9px 9px 0;
    border-color: $primary-background transparent;
    border-style: solid;
    display: block;
    width: 0;
  }
  
  &.hp-flyout-below:after {
    content: "";
    position: absolute;
    top: -9px;
    bottom: auto;
    left: 9px;
    right: auto;
    border-width: 0 9px 9px;
    border-color: $flyout-outline transparent;
    border-style: solid;
    display: block;
    width: 0;
  }
  
  &.hp-flyout-shifted, &.hp-flyout-overlap {
    &:after {
      content: "";
      display: none;
    }
  } 
  
  h1 {
    font-size: 16px;
    line-height: 18px;
    color: $primary-color;
  }
}

.hp-delete, .hp-close {
  width: 14px;
  height: 14px;
  background-image: url($img-file);
  background-position: $close-x $inactive-y;
  background-repeat: no-repeat;
  
  &:hover {
    background-position: $close-x $active-y;
  }
}

.hp-edit {
  position: relative;
  width: 16px;
  height: 16px;
  background-image: url($img-file);
  background-position: $edit-x -78px;
  background-repeat: no-repeat;
}

.hp-reorder {
  width: 16px;
  height: 16px;
  background-image: url($img-file);
  background-position: $close-x -80px;
  background-repeat: no-repeat;
  
  &:hover {
    background-position: $close-x -60px;
  }
}

.hp-connect {
  width: 17px;
  height: 10px;
  background: transparent url('#{$img-dir}/connect.png') no-repeat;
}

.hp-jump {
  width: 16px;
  height: 16px;
  background-image: url($img-file);
  background-position: -156px -96px;
  background-repeat: no-repeat;
  
  &:hover {
    background-position: -156px -76px;
  }
}

.hp-connect-long {
  width: 75px;
  height: 11px;
  background: transparent url('#{$img-dir}/connect_long.png') no-repeat;
}

table td > .hp-connect, table td > .hp-connect-long {
  margin: 4px 0px;
}

div.hp-icon {
  background-image: url($img-file);
  background-repeat: no-repeat;
  
  &.hp-upload, #hp-main-banner div.hp-banner-control {
    width: 16px;
    height: 17px;
    background-position: $upload-x -180px;
    margin: 0px;
    display: block;
    
    .hp-selected &, &:hover, #hp-main-banner div.hp-banner-control:hover & {
      background-position: $upload-x -160px;
    }
  }
  
  &.hp-power {
    width: 16px;
    height: 17px;
    background-position: $power-x -180px;
    &:hover, #hp-main-banner div.hp-banner-control:hover & {
      background-position: $power-x -160px;
    }
    #hp-main-banner div.hp-banner-control.hp-on & {
      background-position: $power-x -200px;
    }
    #hp-main-banner div.hp-banner-control.hp-standby & {
      background-position: $power-x -220px;
    }
  }

  &.hp-uid {
    width: 14px;
    height: 16px;
    background-position: ($uid-x + 1) -180px;
    &:hover, #hp-main-banner div.hp-banner-control:hover & {
      background-position: ($uid-x + 1) -160px;
    }
    #hp-main-banner div.hp-banner-control.hp-selected & {
      background-position: ($uid-x + 1) -200px;
    }
  }

  &.hp-console {
    width: 16px;
    height: 16px;
    background-position: $console-x -180px;
  
    &:hover, #hp-main-banner div.hp-banner-control:hover & {
      background-position: $console-x -160px;
    }
  }

  &.hp-disc {
    width: 16px;
    height: 16px;
    background-position: $disc-x -180px;
    &:hover, #hp-main-banner div.hp-banner-control:hover & {
      background-position: $disc-x -160px;
    }
  }
}

ol.hp-address {
  margin: 0px;
  font-size: 0px;
  > li {
    display: inline;
    font-size: $body-font-size;
    &:after {
      content: ':';
      color: $secondary-color;
    }
    &:last-child {
      &:after {
        content: '';
      }
    }
  }
}

@-webkit-keyframes spin {
  from {
		-webkit-transform: rotate(0deg);
	}
	to {
		-webkit-transform: rotate(360deg);
	}
}

@-moz-keyframes spin {
  from {
  	-moz-transform: rotate(0deg);
	}
	to {
  	-moz-transform: rotate(360deg);
	}
}

@-ms-keyframes spin {
  from {
		-ms-transform: rotate(0deg);
	}
	to {
		-ms-transform: rotate(360deg);
	}
}

@-o-keyframes spin {
  from {
  	-o-transform: rotate(0deg);
	}
	to {
  	-o-transform: rotate(360deg);
	}
}

.hp-spinner {
  width: 100%;
  color: $secondary-color;
  
  html.hp-high-contrast & {
    color: $projection-secondary-color;
  }
  
  > * {
    margin: 0px auto;
    text-align: center;
  }
  
  .hp-spinner-image {
    height: 35px;
    width: 35px;
    background: transparent;
    background-image: url($img-file);
    background-position: $spinner-x 0px;
    background-repeat: no-repeat;
    -webkit-animation: spin 3s infinite linear forwards 0.7s;
    -moz-animation: spin 3s infinite linear forwards 0.7s;
    -ms-animation: spin 3s infinite linear forwards 0.7s;
    -o-animation: spin 3s infinite linear forwards 0.7s;
    margin: 20px auto;
    
    .hp-global & {
      background-position: $spinner-x 0px;
    }
  }
}

.hp-spinner-small {
  display: inline-block;
  width: 24px;
  color: $secondary-color;
  
  html.hp-high-contrast & {
    color: $projection-secondary-color;
  }
  
  .hp-spinner-image {
    display: inline-block;
    height: 24px;
    width: 24px;
    background-image: url($img-file);
    background-position: $spinner-x 0px;
    background-repeat: no-repeat;
    -webkit-animation: spin 3s infinite linear forwards 0.7s;
    -moz-animation: spin 3s infinite linear forwards 0.7s;
    -ms-animation: spin 3s infinite linear forwards 0.7s;
    -o-animation: spin 3s infinite linear forwards 0.7s;
  }
}

.hp-progress {
  width: 200px;
  height: 10px;
  margin-right: 10px;
  background-color: $progress-background;
  
  &.hp-condensed {
    width: 50px;
    margin-right: 10px;
  }
  
  .hp-progress-done {
    height: 100%;
    background: #0a4b68;
    //filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='$first', endColorstr='$second');
    background: -webkit-gradient(linear, left top, right top, from(#0a4b68), to(#18b4fd));
    background: -moz-linear-gradient(left,  #0a4b68,  #18b4fd);
  }
}
span.hp-progress {
  display: inline-block;
}

.hp-utilization-meter {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 10px;
  background-color: #ddd;
  overflow-x: visible;
  
  &.hp-utilization-meter-extend {
    .hp-threshold {
      border-bottom: 2px solid $error;
      border-right: 2px solid $error;
      left: 0px;
    }
  }
  &.hp-unset {
    text-align: center;
    background-color: #eee;
    &:after {
      position: relative;
      content: '/ / / / / / /';
      font-weight: bold;
      font-size: 11px;
      top: -3px;
      color: #999;
    }
    > * {
      display: none;
    }
  }
  
  .hp-value-bar {
    position: relative;
    height: 100%;
    background-color: #0096D6; //#666;
    
    &.hp-value-below {
      background-color: $normal;
      .hp-value {
        background-color: $normal;
      }
    }
    &.hp-value-above {
      background-color: $error;
      .hp-value {
        background-color: $error;
      }
    }
    
    &.hp-value-at-min {
      .hp-value {
        display: block;
        right: -4px;
      }
    }
    
    .hp-value {
      display: none;
      position: absolute;
      top: 2px;
      width: 4px;
      height: 6px;
      background-color: #0096D6; //#666;
    }
  }
  
  .hp-threshold {
    position: absolute;
    top: 0px;
    height: 10px;
    background-color:transparent;
    &.hp-threshold-below {
      border-right: solid #faa 2px;
    }
    &.hp-threshold-above {
      border-right: solid #999 2px;
    }
  }

}

.sparkline{
  width: 100px;
  height: 25px;
  background-color: transparent;
  border-left: solid #CCCCCC 1px;
  border-bottom: solid #CCCCCC 1px;
}

/* jquery.selectBox */

/* Dropdown control */
.selectBox-dropdown {
	margin-bottom: 10px;
	padding: 7px 37px 7px 13px;
	position: relative;
	font-size: 13px;
	line-height: normal;
	text-decoration: none;
	border: 1px solid $primary-divider;
	color: $primary-color;
	outline: none;
	vertical-align: middle;
	display: inline-block;
	cursor: default;
	
	html.hp-high-contrast & {
    color: $projection-color;
  }
  
  .hp-global & {
    background-color: $primary-background;
    border-color: $primary-background;
    color: #323232;
    font-weight: bold;

    &:hover {
      color: #000;
    }

    &:active {
      background-color: #ccc;
      border-color: #ccc;
      color: #000;
    }
    
    &:disabled, &.hp-disabled {
      background-color: #666;
      border-color: #666;
      color: #323232;
    }
  }
	
	&:hover {
    text-decoration: none;
    
    .selectBox-arrow {
    	background-image: $select-down-over-url;
    }
  }
  
  &:focus {
    border-color: $selected-background;
  }

  /*&.selectBox-menuShowing {
  	-moz-border-radius-bottomleft: 0;
  	-moz-border-radius-bottomright: 0;
  	-webkit-border-bottom-left-radius: 0;
  	-webkit-border-bottom-right-radius: 0;
  	border-bottom-left-radius: 0;
  	border-bottom-right-radius: 0;
  }*/

  .selectBox-label {
  	width: 100%;
  	font-weight: normal;
  	display: inline-block;
  	white-space: nowrap;
  	overflow: hidden;
  	vertical-align: top;
  }

  .selectBox-arrow {
  	position: absolute;
  	top: 0;
  	right: 0;
  	width: 24px;
  	height: 100%;
  	background-image: $select-down-url;
    background-position: right 4px;
    background-repeat: no-repeat;
  }
}

/* Dropdown menu */
.selectBox-dropdown-menu {
	position: absolute;
	// this has to be big, since it isn't inside the delated control's container
	z-index: ($dialog-z-index + $drop-menu-z-index);
	left: 0px;
	max-height: 200px;
	background: $primary-background;
	border: 1px solid $dropdown-outline;
  @include box-shadow(3px, 3px, 5px, 0px, $dropdown-shadow);
	overflow: auto;
	
	&.hp-global {
	  @include box-shadow(2px, 2px, 2px, 0px, $global-dropdown-shadow);
	}
}

/* Inline control */
.selectBox-inline {
	width: 250px;
	outline: none;
	background: $primary-background;
	display: inline-block;
	overflow: auto;
}

.selectBox-inline:focus {
}


/* Options */
.selectBox-options,
.selectBox-options LI,
.selectBox-options LI A {
	list-style: none;
	display: block;
	cursor: default;
	padding: 0;
	margin: 0;
}

.selectBox-options LI A {
	padding: 7px 10px;
	white-space: nowrap;
	overflow: hidden;
	background: 6px center no-repeat;
	color: $primary-color;
	
	html.hp-high-contrast & {
    color: $projection-color;
  }
	
	&:hover {
    text-decoration: none;
  }
}

.selectBox-options LI.selectBox-hover A {
	background-color: $menu-selection;
	text-decoration: none;
}

.selectBox-options LI.selectBox-disabled A {
	color: #888;
	background-color: transparent;
}

.selectBox-options LI.selectBox-selected A {
  font-weight: bold;
  background-color: $selected-background;
}

.selectBox-options .selectBox-optgroup {
	color: #666;
	background: #EEE;
	font-weight: bold;
	padding: 0 .3em;
	white-space: nowrap;
}


/* Disabled state */
.selectBox.selectBox-disabled {
	color: #888 !important;
}

.selectBox-dropdown.selectBox-disabled .selectBox-arrow {
	opacity: .5;
	filter: alpha(opacity=50);
	border-color: #666;
}

.selectBox-inline.selectBox-disabled {
	color: #888 !important;
}

.selectBox-inline.selectBox-disabled .selectBox-options A {
	background-color: transparent !important;
}

// jquery.flexbox
.hp-search-combo {
  position: relative;
  display: inline-block;
}

/* Input textbox - do not specify a width here, it will be overwritten */
.ffb-input 
{
	float:left;
	color:#000; /* must specify along with watermark color */
	line-height:16px; // height: 16px; /* required for webkit browsers (Safari, Chrome) */
}
/* Color of watermark, if present */
.ffb-input.watermark { /* added and removed dynamically */
	color:#888; /* must specify along with input color */
}
/* Drop-down arrow, with sprited image */
.ffb-search-icon
{
  display: inline-block;
  position: absolute;
  right: 5px;
  top: 6px;
  width: 19px;
  height: 19px;
  //z-index: 100;
	background-image:url('#{$img-dir}/search-drop.png');
}
.ffb-no-results 
{
	padding:2px;
	color:#888;
	font-style:italic;
	border-bottom:1px solid #828790;
}
/* Container for dropdown contents */
.ffb {
	position:absolute; /* this guy's parent div is hard-coded to position:relative */
	overflow:hidden;
	background: #fff;
	//border: 1px solid #eee;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  @include box-shadow(1px, 1px, 5px, 0px, #666);
}
/* Inner div for dropdown */
.ffb .content {
	overflow:auto;
}
.ffb .content .row {
	border-bottom:1px solid $primary-divider;
	color: $primary-color; //#000;
	padding: 7px 10px;
	//height:20px;
	clear:both;
}
.ffb-sel {
	cursor:pointer;
	cursor:hand;
	color: $primary-color !important;
	background-color: $menu-selection; //background-color:#39f;
}
.ffb-match {
	font-weight:bold;
	color:#000;
}
.ffb-sel .ffb-match {
  color: #000;
}

/* Paging */
.ffb .paging {
	vertical-align:middle;
	border-bottom:1px solid #828790;
}
.ffb .page, .ffb a.page {
	font-size:85%;
	padding:2px;
	border:solid 1px #339;
	background-color:#eef;
	margin:2px;
}
.ffb .box {
	width:22px;
	margin:2px;
}
.ffb .summary {
	font-size:85%;
}

// datepicker

div.ui-datepicker {
  padding: 10px;
  line-height: normal;
  background-color: $primary-background;
  color: $secondary-color;
  border: 1px solid $dropdown-outline;
  z-index: $drop-menu-z-index;
  @include drop-menu-border();
  
  .ui-datepicker-header {
    background-image: none;
    border: none;
    border-radius: 0px;
    margin-bottom: 10px;
    text-align: center;
    
    .ui-datepicker-prev, .ui-datepicker-next {
      display: block;
      width: 12px;
      height: 12px;
      background-image: url($img-file);
      background-repeat: no-repeat;
      .ui-icon {
        display: none;
      }
    }
    
    .ui-datepicker-prev {
      float: left;
      background-position: -200px -20px;
      &:hover {
        background-position: -200px 0px;
      }
    }
    
    .ui-datepicker-next {
      float: right;
      background-position: -200px -60px;
      &:hover {
        background-position: -200px -40px;
      }
    }
  }
  
  .ui-datepicker-buttonpane {
    text-align: right;
    button {
      margin-left: 5px;
    }
  }
}

table.ui-datepicker-calendar {
  thead th {
    padding: 3px 7px 3px 3px;
    border-left: none;
    text-align: right;
  }
  tbody tr {
    background-image: none;
    td {
      padding: 2px;
      text-align: right;
      a {
        display: block;
        padding: 5px;
        border: 1px solid transparent;
        &:hover {
          background-color: $secondary-background;
          text-decoration: none;
        }
        &.ui-state-active {
          background-color: $selected-background;
          font-weight: bold;
        }
      }
    }
  }
  .ui-state-default {
    background-image: none;
    color: $primary-color;
    
    &:hover {
      text-decoration: none;
    }
  }
}

div.hp-date-range {
  padding: 10px;
  
  div.hp-select & {
    > label, > div.hp-date {
      display: block;
      line-height: normal;
    }
    input[type="date"] {
      width: 120px;
    }
  }
}

.hp-modal-overlay {
  background:#ffffff none repeat scroll 0 0;
  display:none;
  height:100%;
  left:0;
  filter:alpha(opacity=50);
  opacity: 0.5;
  top:0;
  width:100%;
  z-index: ($dialog-z-index - 1);
  display:none;
  position:fixed;
}

.hp-modal {
  position:absolute;
  left:20%;
  right:20%;
  top:20%;
  margin-left: auto;
  margin-right: auto;
  z-index: $dialog-z-index;
  
  > * {
    margin: 0px auto;
  }
}

.hp-toolbar {
  margin-top: 20px;
  border-top: 1px solid $primary-divider;
  padding-top: 15px;
  
  @media print {
    display: none;
  }
  
  > * {
    vertical-align: baseline;
  }
  .hp-align-right {
    text-align: right;
  }
}

.hp-toggle {
  display: inline-block;
  position: relative;
	@include box-sizing(border-box);
	///height: 26px;
	background-color: #fff;
  border: 1px solid #bbb;
  font-size: 14px;
  color: #000;
  margin-bottom: 10px;
  white-space: nowrap;
  overflow-x: hidden;
  cursor: pointer;
  @include no-select;
  
  &:focus {
    border: 1px solid $selected-background;
    outline: none;
    
    .hp-toggle-thumb {
      background-color: #333;
    }
  }
  
  &:hover {
    .hp-toggle-thumb {
      background-color: #333;
    }
  }
  
  &.hp-error {
    border: 2px solid $error;
  }
  
  &[disabled] {
    color: #999;
  }
  
  ol {
    position: relative;
    margin-bottom: 0px;
    @include transition(left, 0.2s);
  }
  
  li {
    display: inline-block;
    margin-right: -4px;
    @include box-sizing(border-box);
    padding: 5px 10px;
    margin: 0px;
    background-color: $primary-background;
    color: #000;
    ///@include transition(all, 0.2s);
    
    &.hp-on {
      padding-right: 16px;
    }
    
    &.hp-off {
      padding-left: 16px;
    }
  }
  
  .hp-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 3px;
    @include box-sizing(border-box);
    padding: 0px;
    height: 20px;
    width: 6px;
    background-color: #999;
  	@include transition(left, 0.2s);
  }
  
  &.hp-checked {
    .hp-toggle-thumb {
      background-color: $menu-selected-color;
    }
  }
}

// hpPlot

.hp-plot {
  .tickLabel {
    color: $secondary-color;
    font-size: 12px;
  }
  .x1Axis .tickLabel {
    padding-top: 5px;
  }
  .y1Axis .tickLabel {
    padding-right: 5px;
  }
  .y2Axis .tickLabel {
    padding-left: 5px;
  }
  
  .hp-flyout & {
    width: 300px;
    height: 200px;
  }
}

.hp-plot-legend {
  margin: 10px 0px;
  table {
    thead th {
      background: none;
      border-left: none;
      padding: 2px 10px 2px 0px;
    }
  }
  tr {
    background: none;
    td {
      padding: 2px 10px 2px 0px;
      &.legendColorBox {
        padding-top: 4px;
        padding-right: 20px;
      }
      &.legendLabel {
        color: $secondary-color;
      }
    }
  }
}

.hp-active-drag {
  background-color: #D6D6D6;
}

.hp-hover-drop-target{
  background-color: #66D0FA;
}

  .hp-pending-changes-message{
    font-weight : bold;
  }

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  //-webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.2);
  //border-radius: 8px;
  &:hover {
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.2);
  }
}

::-webkit-scrollbar-thumb {
  //-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  //background-image: url('#{$img-dir}/scroll-thumb.png');
  //background-position: center;
  //background-repeat: no-repeat;
  
  background-color: rgba(164, 164, 164, 0.5); //#ccc;
}

/* jQuery UI Slider */
.ui-slider {
  position: relative;
  text-align: left;
  
  &:after {
    position: absolute;
    top: 7px;
    left: 0px;
    content: '';
    height: 2px;
    width: 100%;
    background-color: $primary-divider;
  }
  
  &:hover {
    &:after {
      content: '';
      background-color: $slider-track;
    }
    
    .ui-slider-handle {
      background-position: -356px 3px;
    }
  }
  
  .ui-slider-handle {
    position: absolute;
    z-index: 2;
    width: 20px;
    height: 20px;
    cursor: default;
    background-image: url($img-file);
    background-position: -356px -17px;
    background-repeat: no-repeat;
    
    &:focus, &:hover {
      outline: none;
      background-position: -356px 3px;
    }
  }
  .ui-slider-range {
    position: absolute;
    z-index: 1;
    display: block;
    border: 0;
    background-position: 0 0;
  }
}

.ui-slider-horizontal {
  height: 16px;
  .ui-slider-handle {
    top: -2px; //-7px;
    margin-left: -10px;
  }
}

.ui-slider-vertical {
  width: 5px;
  height: 100px;
  .ui-slider-handle {
    left: -7px;
    margin-left: 0;
    margin-bottom: -10px;
  }
}

// jQueryUI styling

.ui-widget-content {
  border: none;
}

/* Interaction states
----------------------------------*/

/*.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  border: 1px solid #d3d3d3;
  background: #e6e6e6;
  font-weight: normal;
  color: #555555;
}

.ui-state-default a {
  color: #555555;
  text-decoration: none;
  &:link, &:visited {
    color: #555555;
    text-decoration: none;
  }
}

.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus {
  border: 1px solid #999999;
  background: #dadada;
  font-weight: normal;
  color: #212121;
}

.ui-state-hover a {
  color: #212121;
  text-decoration: none;
  &:hover {
    color: #212121;
    text-decoration: none;
  }
}

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
  border: 1px solid #aaaaaa;
  background: white;
  font-weight: normal;
  color: #212121;
}

.ui-state-active a {
  color: #212121;
  text-decoration: none;
  &:link, &:visited {
    color: #212121;
    text-decoration: none;
  }
}

.ui-widget :active {
  outline: none;
}*/

/* Icons
----------------------------------*/

/* states and images */

.ui-icon {
  width: 16px;
  height: 16px;
  background-image: url('../../img/hp-piano/ui-icons_222222_256x240.png');
}

.ui-widget-content .ui-icon, .ui-widget-header .ui-icon {
  background-image: url('../../img/hp-piano/ui-icons_222222_256x240.png');
}

.ui-state-default .ui-icon {
  background-image: url('../../img/hp-piano/ui-icons_888888_256x240.png');
}

.ui-state-hover .ui-icon, .ui-state-focus .ui-icon, .ui-state-active .ui-icon {
  background-image: url('../../img/hp-piano/ui-icons_454545_256x240.png');
}

.ui-state-highlight .ui-icon {
  background-image: url('../../img/hp-piano/ui-icons_2e83ff_256x240.png');
}

.ui-state-error .ui-icon, .ui-state-error-text .ui-icon {
  background-image: url('../../img/hp-piano/ui-icons_cd0a0a_256x240.png');
}