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

.hp-form-section {
  position: relative;

  > * {
    vertical-align: top;
    margin-right: 40px;
  }
  .hp-graphic-aside {
    margin-right: 0px;
  }
}

.hp-graphic-aside {
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: #fff;
  @include box-shadow(3px, 3px, 8px, 0px, #666);
  @include transition(all, 1s);
  background-image: url('../../img/hp-piano/close.png');
  background-position: 98% 4%;
  background-repeat: no-repeat;
  
  &.hp-thumbnail {
    @include transform(scale(0.4));
    @include transform-origin(top, right);
  }
}

.hp-appliance-faces {
  position: relative;
  display: inline-block;
  border: 1px solid $primary-divider;
  padding: 20px 40px 40px 40px;
  border-radius: 3px;
  
  > canvas {
    position: absolute;
    top: 69px;
    z-index: 100;
  }
  
  > label {
    display: block;
    text-align: center;
    margin-top: -10px;
    font-size: 16px;
    color: $secondary-color;
  }
  
  .hp-appliance-node {
    position: relative;
    margin: 30px 0px 20px 0px;
    
    > label {
      position: relative;
      top: -5px;
      color: $secondary-color;
    }
  }
  
  .hp-appliance-ports {
    background-color: $secondary-background;
    padding: 20px;
    border: 1px solid $graphics-border;
    border-radius: 3px;
    background-image: url('../../img/hp-piano/card-pin.png'), url('../../img/hp-piano/card-pin.png');
    background-position: top left, top right;
    background-repeat: repeat-y, repeat-y;
    
    .hp-appliance-port-spacer {
      display: inline-block;
      width: 20px;
    }
    
    .hp-appliance-port {
      position: relative;
      display: inline-block;
      border: 3px solid #999;
      background-color: #fff;
      margin: 15px 2px;
      width: 40px;
      height: 26px;
      border-bottom: 6px dashed #999;
      
      &.hp-appliance-port-status-warning {
        border-color: $warning;
      }
      &.hp-appliance-port-status-error {
        border-color: $error;
      }
      &.hp-appliance-port-status-ok {
        border-color: $normal;
      }
      
      > label {
        display: block;
        position: absolute;
        top: -20px;
        width: 40px;
        text-align: center;
        font-weight: bold;
      }
      
      > .hp-appliance-port-use {
        display: block;
        position: absolute;
        bottom: -24px;
        color: $secondary-color;
        font-size: 12px;
        width: 40px;
        text-align: center;
      }
    }
  }
}

// virtual appliance

.hp-virtual-appliance {
  display: inline-block;
  @include device-border();
  
  label {
    text-align: center;
    display: block;
    color: $secondary-color;
    padding: 5px 0px 0px 0px;
    font-family: 'HPRegular', Arial, Helvetica, sans-serif;
    
    html.hp-high-contrast & {
      color: $projection-secondary-color;
    }
  }
  
  .hp-aspects {
    margin: 30px 0px 0px 30px;
    //margin: 0px;
    text-align: left;

    .hp-aspect {
      display: inline-block;
      vertical-align: top;
      text-align: left;
      margin-right: 30px;
      margin-bottom: 30px;
      width: 130px;
      font-size: 16px;

      h2 {
        font-size: 18px;
        color: $secondary-color;
        margin: 0px 0px 20px 0px;
        font-family: 'HPRegular', Arial, Helvetica, sans-serif;

        html.hp-high-contrast & {
          color: $projection-secondary-color;
        }
      }

      .hp-status, .hp-value {
        display: inline-block;
        //vertical-align: top;
        line-height: 20px;
      }
      
      .hp-status {
        top: 3px;
      }

      .hp-value {
        margin-left: 8px;
      }

      .hp-error {
        display: inline-block;
        margin-top: 10px;
        padding: 10px;
        background-color: $attention-background;
      }
    }

    &.hp-summary .hp-aspect {
      .hp-value {
        font-size: 20px;
      }
    }
  }
  
  &.hp-small {
    > label {
      display: none;
    }
    .hp-aspects {
      margin: 10px 0px 0px 10px;
      .hp-aspect {
        margin-right: 10px;
        margin-bottom: 10px;
        width: 100px;
        font-size: inherit;
        h2 {
          font-size: 13px;
          margin: 0px 0px 5px 0px;
        }
        .hp-status {
          top: 4px;
        }
        .hp-value {
          margin-left: -2px;
        }
      }
    }
  }
}