/* (C) Copyright 2011-2012 Hewlett-Packard Development Company, L.P. */
/* (C) Copyright 2011-2012 Hewlett-Packard Development Company, L.P. */
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

@-moz-keyframes fadeIn {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

@-ms-keyframes fadeIn {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

@-o-keyframes fadeIn {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }

  100% {
    opacity: 1; } }

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1; }

  100% {
    opacity: 0; } }

@-moz-keyframes fadeOut {
  0% {
    opacity: 1; }

  100% {
    opacity: 0; } }

@-ms-keyframes fadeOut {
  0% {
    opacity: 1; }

  100% {
    opacity: 0; } }

@-o-keyframes fadeOut {
  0% {
    opacity: 1; }

  100% {
    opacity: 0; } }

@keyframes fadeOut {
  0% {
    opacity: 1; }

  100% {
    opacity: 0; } }

@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0.7;
    -webkit-transform: translateX(-10px); }

  100% {
    opacity: 1;
    -webkit-transform: translateX(0); } }

@-moz-keyframes fadeInLeft {
  0% {
    opacity: 0.7;
    -moz-transform: translateX(-10px); }

  100% {
    opacity: 1;
    -moz-transform: translateX(0); } }

@-ms-keyframes fadeInLeft {
  0% {
    opacity: 0.7;
    -ms-transform: translateX(-10px); }

  100% {
    opacity: 1;
    -ms-transform: translateX(0); } }

@-o-keyframes fadeInLeft {
  0% {
    opacity: 0.7;
    -o-transform: translateX(-10px); }

  100% {
    opacity: 1;
    -o-transform: translateX(0); } }

@keyframes fadeInLeft {
  0% {
    opacity: 0.7;
    transform: translateX(-10px); }

  100% {
    opacity: 1;
    transform: translateX(0); } }

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0.7;
    -webkit-transform: translateY(-10px); }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0); } }

@-moz-keyframes fadeInDown {
  0% {
    opacity: 0.7;
    -moz-transform: translateY(-10px); }

  100% {
    opacity: 1;
    -moz-transform: translateY(0); } }

@-ms-keyframes fadeInDown {
  0% {
    opacity: 0.7;
    -ms-transform: translateY(-10px); }

  100% {
    opacity: 1;
    -ms-transform: translateY(0); } }

@-o-keyframes fadeInDown {
  0% {
    opacity: 0.7;
    -o-transform: translateY(-10px); }

  100% {
    opacity: 1;
    -o-transform: translateY(0); } }

@keyframes fadeInUp {
  0% {
    opacity: 0.7;
    transform: translateY(10px); }

  100% {
    opacity: 1;
    transform: translateY(0); } }

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0.7;
    -webkit-transform: translateY(5px); }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0); } }

@-moz-keyframes fadeInUp {
  0% {
    opacity: 0.7;
    -moz-transform: translateY(5px); }

  100% {
    opacity: 1;
    -moz-transform: translateY(0); } }

@-ms-keyframes fadeInUp {
  0% {
    opacity: 0.7;
    -ms-transform: translateY(5px); }

  100% {
    opacity: 1;
    -ms-transform: translateY(0); } }

@-o-keyframes fadeInUp {
  0% {
    opacity: 0.7;
    -o-transform: translateY(5px); }

  100% {
    opacity: 1;
    -o-transform: translateY(0); } }

@keyframes fadeInUp {
  0% {
    opacity: 0.7;
    transform: translateY(5px); }

  100% {
    opacity: 1;
    transform: translateY(0); } }

#hp-login-page, #hp-initial-password-page {
  position: relative;
  width: 100%;
  height: 100%;
  padding-top: 30px;
  padding-left: 80px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #fff;
  font-family: 'HPRegular', Arial, Helvetica, sans-serif;
  overflow: auto; }
  #hp-login-page > header, #hp-initial-password-page > header {
    margin-bottom: 40px;
    width: 400px; }
    #hp-login-page > header .hp-logo, #hp-initial-password-page > header .hp-logo {
      width: 50px;
      height: 50px;
      background-position: -260px -180px; }
    #hp-login-page > header .hp-login-header, #hp-initial-password-page > header .hp-login-header {
      margin-top: 20px;
      font-family: 'HPLight', Arial, Helvetica, sans-serif;
      font-size: 64px;
      line-height: normal;
      color: #000;
      border-top: 5px solid #00B388; }
    #hp-login-page > header .hp-login-sub-header, #hp-initial-password-page > header .hp-login-sub-header {
      display: block;
      float: right;
      font-size: 20px;
      color: #737373; }
  #hp-login-page #hp-security-notice, #hp-initial-password-page #hp-security-notice {
    margin-top: -20px;
    width: 400px; }
  #hp-login-page #hp-login-status, #hp-initial-password-page #hp-login-status {
    height: auto;
    text-align: left;
    margin: 20px 0px;
    padding: 15px;
    width: 400px;
    color: black;
    background-color: #fffdd7;
    font-family: Arial, Helvetica, sans-serif; }
    #hp-login-page #hp-login-status .hp-status, #hp-initial-password-page #hp-login-status .hp-status {
      display: inline-block;
      margin-left: 0px;
      margin-top: 2px;
      margin-right: 5px;
      vertical-align: top; }
    #hp-login-page #hp-login-status label, #hp-login-page #hp-login-status .hp-message, #hp-initial-password-page #hp-login-status label, #hp-initial-password-page #hp-login-status .hp-message {
      display: inline-block;
      font-weight: bold;
      margin-bottom: 5px;
      white-space: normal; }
    #hp-login-page #hp-login-status .hp-message, #hp-initial-password-page #hp-login-status .hp-message {
      max-width: 360px; }
  #hp-login-page #hp-login-hero, #hp-initial-password-page #hp-login-hero {
    position: absolute;
    left: 500px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    min-height: 600px;
    background-image: url("../../img/hp-piano/../login_hero.png");
    background-repeat: no-repeat; }

#hp-login-form {
  width: 400px;
  margin-bottom: 30px; }
  #hp-login-form ol li {
    padding: 0px;
    margin: 10px 0px; }
    #hp-login-form ol li input, #hp-login-form ol li .selectBox {
      width: 100%;
      margin: 0px;
      height: auto;
      margin-bottom: 5px;
      padding: 7px 13px;
      border-color: #999;
      font-size: 20px;
      line-height: normal;
      font-family: 'HPRegular', Arial, Helvetica, sans-serif; }
      #hp-login-form ol li input.valid, #hp-login-form ol li .selectBox.valid {
        background-image: none; }
      #hp-login-form ol li input.hp-error, #hp-login-form ol li .selectBox.hp-error {
        background-position: right 8px; }
    #hp-login-form ol li .selectBox {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
      box-sizing: border-box;
      margin-bottom: 0; }
      #hp-login-form ol li .selectBox .selectBox-arrow {
        top: 5px; }
    #hp-login-form ol li .hp-form-content > span {
      padding: 0px 13px;
      font-size: 20px;
      line-height: normal;
      font-family: 'HPRegular', Arial, Helvetica, sans-serif; }
    #hp-login-form ol li .hp-form-content label.hp-error {
      padding: 0px 16px; }
    #hp-login-form ol li label {
      display: none; }
    #hp-login-form ol li.hp-unset-inactive {
      position: relative; }
      #hp-login-form ol li.hp-unset-inactive > label {
        position: absolute;
        top: 12px;
        left: 15px;
        display: block;
        font-family: 'HPRegular', Arial, Helvetica, sans-serif;
        font-size: 20px;
        color: #ccc; }
  #hp-login-form .hp-buttonset {
    display: inline-block;
    vertical-align: middle; }
    #hp-login-form .hp-buttonset #hp-login-button, #hp-login-form .hp-buttonset #hp-initial-password-button {
      height: 32px; }

#hp-initial-password-form {
  width: 200px;
  margin: 0px auto;
  text-align: left; }
  #hp-initial-password-form li {
    position: relative;
    margin-bottom: 5px; }
    #hp-initial-password-form li label {
      display: block;
      margin-bottom: 5px; }
    #hp-initial-password-form li input {
      margin-top: 0px;
      margin-left: 0px;
      width: 100%; }
      #hp-initial-password-form li input:disabled {
        border-color: #fff; }
    #hp-initial-password-form li label.hp-error {
      position: absolute;
      left: 210px;
      top: 30px;
      color: #f99;
      width: 200px; }
  #hp-initial-password-form .hp-buttonset {
    text-align: right; }

#hp-initial-password-form-heading {
  margin: 0px auto 20px auto;
  text-align: center; }

.hp-replace-logout-button {
  text-align: center; }