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

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

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;
}

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