/*******************************************************************************
 *
 *  Copyright © 2010-2011 Hewlett-Packard Development Company, L.P. 
 *
 *  This work is distributed under the W3C® Software License [1] 
 *  in the hope that it will be useful, but WITHOUT ANY 
 *  WARRANTY; without even the implied warranty of 
 *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. 
 *
 *  [1] http://www.w3.org/Consortium/Legal/2002/copyright-software-20021231 
 *
 ******************************************************************************/
/*
 * Base style sheet for System Pages
 */


html, body {
  margin: 0;
  padding: 0;
  border: none;
  font-family: 'Helvetica  Neue',Helvetica,'Lucida Grande',tahoma,verdana,arial,sans-serif;
  font-weight:300;
  font-size: 11pt;
}
.header {
  padding: 0em 1em 0em 36px;
  min-height: 60px;
  position: relative;
  z-index: 5;
  font-size: 10pt;
  
  box-shadow: 0px 0px 2px 2px #888;
}
.body {
  margin: 0;
  padding: .5em 1em 1em 36px;
}
.footer {
  padding: .5em 1em .5em 36px;
  border-top: 1px solid #ccc;
  height: 1.5em;
  font-size: 10pt;
}

@media screen {
  html, body {
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    overflow: hidden;
  }
  .header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  .body {
    position: absolute;
    top: 60px;
    height: auto;
    left: 0;
    right: 0;
    width: auto;
    bottom: 2.5em;
    overflow: auto;
  }
  .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
  }
}

div.header, div.footer {
  background: #ededed;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, #eee),
    color-stop(0.15, #fff),
    color-stop(0.80, #ededed),
    color-stop(1, #e0e0e0)
  );
  background-image: -moz-linear-gradient(
    center top,
    #eee 0%,
    #fff 15%,
    #ededed 80%,
    #e0e0e0 100%
  );
  background-image: -o-linear-gradient(
    top,
    #eee 0%,
    #fff 15%,
    #ededed 80%,
    #e0e0e0 100%
  );
  background-image: -ms-linear-gradient(
    top,
    #eee 0%,
    #fff 15%,
    #ededed 80%,
    #e0e0e0 100%
  );
  background-image: linear-gradient(
    to bottom, 
    #eee,
    #fff 15%, 
    #ededed 80%, 
    #e0e0e0);
}

.logo {
  display: block;
  background-color: #005A9C;
  float: left;
  margin: 0em 8pt 0em -36px;
  padding: 0;
}
.logo a {
  margin: 0;
  padding: 0;
}
.logo img {
  border: none;
  margin: 0;
  vertical-align: top;
  z-index: 2;
  position: relative;
  box-shadow: 0px 0px 3px 2px #888;
}
p.nav {
  font-size: 10pt;
  margin: 0;
  margin-bottom: 10px;
  position: relative;
  display: inline-block;
  vertical-align: top;
}
p.nav a {
  background: #FFF;
  padding: .1em .5em;
  line-height: 1.2em;
  white-space: nowrap;
  border-bottom: 1px solid #888;
}
p.nav a:first-of-type {
  border-left: 1px solid #888;
  border-bottom-left-radius: 3px;
}
p.nav a:last-of-type {
  border-right: 1px solid #888;
  border-bottom-right-radius: 3px;
}
p.nav a:first-of-type {
  border-left: 1px solid #888;
}
p.nav a:last-of-type {
  border-right: 1px solid #888;
}
p.nav a:link::after {
  display: inline-block;
  height: 0;
  width: 0;
  content: " ";
  border-left: solid .5em white;
  border-top: solid .6em transparent;
  border-bottom: solid .6em transparent;
  position: absolute;
  top: 50%;
  margin-top: -.6em;
  margin-left: .5em;
  margin-left: .485em; /* work around chrome rounding bug */
}
p.nav a + a {
  padding-left: 1em;
}
p.nav a:nth-last-of-type(2) {
  background: #E0E0E0;
}
p.nav a:nth-last-of-type(2)::after {
  border-left-color: #E0E0E0;
  border-top-color: white;  /* work around IE9 bugs */
  border-bottom-color: white;
}
p.nav a:nth-last-of-type(3) {
  background: #D0D0D0;
}
p.nav a:nth-last-of-type(3)::after {
  border-left-color: #D0D0D0;
  border-top-color: #E0E0E0;  /* work around IE9 bugs */
  border-bottom-color: #E0E0E0;
}
p.nav a:nth-last-of-type(4) {
  background: #C0C0C0;
}
p.nav a:nth-last-of-type(4)::after {
  border-left-color: #C0C0C0;
  border-top-color: #D0D0D0;  /* work around IE9 bugs */
  border-bottom-color: #D0D0D0;
}

h1, h2, h3, h4 {
  margin: 0; padding: 0;
  background: none;
}

h1 {
  font-size: 18pt;
}
@media screen {
  h1 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  h1:hover {
    overflow: visible;
    white-space: normal;
  }
}

h3 {
  margin: 1em 0;
  border-bottom: solid 1px black;
}


div.login {
  position: absolute;
  top: -4px;
  right: 16px;
  background: #ddd;
  padding: 0;
  font-size: 10pt;
  max-height: 1.5em;
  overflow: hidden;
  z-index: 100;
  border: solid 1px #888;
  border-top: solid 4px black;
  border-radius: 0 0 4px 4px;
  -moz-transition: max-height 0.25s;
  -o-transition: max-height 0.25s;
  -webkit-transition: max-height 0.25s;
  transition: max-height 0.25s;
  background-image: -webkit-gradient(
    linear,
    left top,
    right top,
    color-stop(0, #ccc),
    color-stop(0.07, #ddd),
    color-stop(0.93, #ddd),
    color-stop(1, #c4c4c4)
  );
  background-image: -moz-linear-gradient(
    left,
    #ccc,
    #ddd 7%,
    #ddd 93%,
    #c4c4c4);
  background-image: -o-linear-gradient(
    left,
    #ccc,
    #ddd 7%,
    #ddd 93%,
    #c4c4c4);
  background-image: -ms-linear-gradient(
    left,
    #ccc,
    #ddd 7%,
    #ddd 93%,
    #c4c4c4);
  background-image: linear-gradient(
    to right, 
    #ccc,
    #ddd 7%,
    #ddd 93%,
    #c4c4c4);
}
div.login div {
  border-top: solid 1px #888;
  margin: 0;
}
div.login div:first-child {
  border-top: none;
  padding: 0;
}
div.login div span {
  font-size: 9pt;
  color: #666;
  margin: 0;
  padding: 0 1em 0 .5em;
}
div.login.loggedin div:first-child {
  padding: .25em 32px .25em 12px;
  text-align: center;
}
div.login.loggedin:hover,
div.login.open {
  box-shadow: 2px 2px 3px #888;
  max-height: 30em;
}
div.login div a {
  display: block;
  text-align: left;
  text-decoration: none;
  padding: .25em 1em .15em;
  -moz-transition: padding 0.25s;
  -o-transition: padding 0.25s;
  -webkit-transition: padding 0.25s;
  transition: padding 0.25s;
}
div.login div a:hover {
  background-color: #fff ! important;
}
div.login div:last-child a:hover {
  border-radius: 0 0 5px 5px; /* webkit workaround */
}

div.login.maintenance {
  background: #f99;
}
div.login.loggedin div:first-child span {
  background-position: -84px 0px;
  margin-right: 8px;
  vertical-align: top;
  padding: 0;
  float: left;
}
div.login.loggedin.open div:first-child span,
div.login.loggedin:hover div:first-child span {
  background-position: -98px 0px;
}

div.login div a.alert {
  padding-right: 26px;
}
div.login div a .icon {
  position: absolute;
  right: 8px;
  -moz-transition: top .5s;
  -o-transition: top .5s;
  -webkit-transition: top .5s;
  transition: top .5s;
}
div.login:not(.open):not(:hover) div a .icon {
  top: 3px ! important;
}

.button,
.stateButton {
  display: inline-block;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 3px;
  text-decoration: none;
  padding: .25em .5em .15em;
  cursor: pointer;
}

.icon,
.progress {
  display: inline-block;
  width: 14px;
  height: 14px;
  padding: 0 ! important;
  vertical-align: middle;
  background: no-repeat center;
  background-image: url(../img/icons.png) ! important;
  background-clip: content-box;
  background-origin: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-decoration: none;
}
.icon.button {
  width: 16px;
  height: 16px;
  background-origin: padding-box;
}
.button a,
.stateButton a {
  text-decoration: none;
}
.progress {
  background-image: url(../img/progress.png) ! important;
  margin-left: 4px;
}

.button {
  border-color: #ccc;
  background-color: #eee;
  box-shadow: 0px 1px 1px #fff inset;
}
.button:hover {
  background-color: #fff ! important;
}
.button:hover a {
  background: none;
}

.button.hover {
  border-color: transparent;
  background-color: transparent;
  box-shadow: none;
}
.button.hover:hover {
  border-color: rgba(0, 0, 0, 0.25);
  background-color: #eee;
  box-shadow: 0px 1px 1px #fff inset;
}
.stateButton {
  color: #555;
  background-color: #ddd;
  border-color: rgba(0, 0, 0, 0.25);
  box-shadow: 1px 1px 2px #888, 0px 1px 1px #fff inset;
}
.stateButton.active {
  color: black;
  background-color: #fff;
  box-shadow: 2px 2px 3px #888;
}
.stateButton.disabled {
  color: #888;
  box-shadow: 0px 1px 1px #fff inset;
  cursor: auto;
  background-color: #ccc;
}
.stateButton:hover:not(.disabled) {
  background-color: #fff ! important;
  color: #000 ! important;
}

.progress.p0 {
  background-position: 0px 0px;
}
.progress.p1 {
  background-position: -14px 0px;
}
.progress.p2 {
  background-position: -28px 0px;
}
.progress.p3 {
  background-position: -42px 0px;
}
.progress.p4 {
  background-position: -56px 0px;
}
.progress.p5 {
  background-position: -70px 0px;
}
.progress.p6 {
  background-position: -84px 0px;
}
.progress.p7 {
  background-position: -98px 0px;
}


.icon.plus,
.icon.button.hover.plus {
  background-position: 0px 0px;
}
.icon.button.plus {
  background-position: 0px -14px;
}
.icon.button.plus:hover {
  background-position: 0px -28px;
}
.icon.button.disabled.plus {
  background-position: 0px -42px;
}
.icon.minus,
.icon.button.hover.minus {
  background-position: -14px 0px;
}
.icon.button.minus {
  background-position: -14px -14px;
}
.icon.button.minus:hover {
  background-position: -14px -28px;
}
.icon.button.minus.disabled {
  background-position: -14px -42px;
}
.icon.ok,
.icon.save,
.icon.button.hover.save {
  background-position: -28px 0px;
}
.icon.button.save {
  background-position: -28px -14px;
}
.icon.button.save:hover {
  background-position: -28px -28px;
}
.icon.button.save.disabled {
  background-position: -28px -42px;
}
.icon.cancel,
.icon.button.hover.cancel {
  background-position: -42px 0px;
}
.icon.button.cancel {
  background-position: -42px -14px;
}
.icon.button.cancel:hover {
  background-position: -42px -28px;
}
.icon.button.cancel.diabled {
  background-position: -42px -42px;
}
.icon.text,
.icon.button.hover.text {
  background-position: -56px 0px;
}
.icon.button.text {
  background-position: -56px -14px;
}
.icon.button.text:hover {
  background-position: -56px -28px;
}
.icon.button.text.diabled {
  background-position: -56px -42px;
}
.icon.select,
.icon.button.hover.select {
  background-position: -70px 0px;
}
.icon.button.select {
  background-position: -70px -14px;
}
.icon.button.select:hover {
  background-position: -70px -28px;
}
.icon.button.select.diabled {
  background-position: -70px -42px;
}
.icon.right,
.icon.button.hover.right {
  background-position: -84px 0px;
}
.icon.button.right {
  background-position: -84px -14px;
}
.icon.button.right:hover {
  background-position: -84px -28px;
}
.icon.button.disabled.right {
  background-position: -84px -42px;
}
.icon.down,
.icon.button.hover.down {
  background-position: -98px 0px;
}
.icon.button.down {
  background-position: -98px -14px;
}
.icon.button.down:hover {
  background-position: -98px -28px;
}
.icon.button.disabled.down  {
  background-position: -98px -42px;
}
.icon.up,
.icon.button.hover.up {
  background-position: -112px 0px;
}
.icon.button.up {
  background-position: -112px -14px;
}
.icon.button.up:hover {
  background-position: -112px -28px;
}
.icon.button.disabled.up {
  background-position: -112px -42px;
}
.icon.alert,
.icon.error,
.icon.button.hover.error {
  background-position: -126px 0px;
}
.icon.button.error {
  background-position: -126px -14px;
}
.icon.button.error:hover {
  background-position: -126px -28px;
}
.icon.button.disabled.error {
  background-position: -126px -42px;
}
.icon.first,
.icon.button.hover.first {
  background-position: -140px 0px;
}
.icon.button.first {
  background-position: -140px -14px;
}
.icon.button.first:hover {
  background-position: -140px -28px;
}
.icon.button.disabled.first {
  background-position: -140px -42px;
}
.icon.prev,
.icon.button.hover.prev {
  background-position: -154px 0px;
}
.icon.button.prev {
  background-position: -154px -14px;
}
.icon.button.prev:hover {
  background-position: -154px -28px;
}
.icon.button.disabled.prev {
  background-position: -154px -42px;
}
.icon.next,
.icon.button.hover.next {
  background-position: -168px 0px;
}
.icon.button.next {
  background-position: -168px -14px;
}
.icon.button.next:hover {
  background-position: -168px -28px;
}
.icon.button.disabled.next {
  background-position: -168px -42px;
}
.icon.last,
.icon.button.hover.last {
  background-position: -182px 0px;
}
.icon.button.last {
  background-position: -182px -14px;
}
.icon.button.last:hover {
  background-position: -182px -28px;
}
.icon.button.disabled.last {
  background-position: -182px -42px;
}
.icon.email,
.icon.button.hover.email {
  background-position: -196px 0px;
}
.icon.button.email {
  background-position: -196px -14px;
}
.icon.button.email:hover {
  background-position: -196px -28px;
}
.icon.button.disabled.email {
  background-position: -196px -42px;
}
.icon.edit,
.icon.button.hover.edit {
  background-position: -210px 0px;
}
.icon.button.edit {
  background-position: -210px -14px;
}
.icon.button.edit:hover {
  background-position: -210px -28px;
}
.icon.button.disabled.edit {
  background-position: -210px -42px;
}

.icon.open,
.icon.button.hover.open {
  background-position: -224px 0px;
}
.icon.button.open {
  background-position: -224px -14px;
}
.icon.button.open:hover {
  background-position: -224px -28px;
}
.icon.button.disabled.open {
  background-position: -224px -42px;
}

.icon.close,
.icon.button.hover.close {
  background-position: -238px 0px;
}
.icon.button.close {
  background-position: -238px -14px;
}
.icon.button.close:hover {
  background-position: -238px -28px;
}
.icon.button.disabled.close {
  background-position: -238px -42px;
}

.icon.unknown,
.icon.button.hover.unknown {
  background-position: -252px 0px;
}
.icon.button.unknown {
  background-position: -252px -14px;
}
.icon.button.unknown:hover {
  background-position: -252px -28px;
}
.icon.button.disabled.unknown {
  background-position: -252px -42px;
}

.icon.view,
.icon.button.hover.view {
  background-position: -266px 0px;
}
.icon.button.view {
  background-position: -266px -14px;
}
.icon.button.view:hover {
  background-position: -266px -28px;
}
.icon.button.disabled.view {
  background-position: -266px -42px;
}



input[type='checkbox']:disabled + label {
  color: gray;
}
input, select {
  margin-right: .5em;
}

.legal_notice {
  font-size: smaller;
}

.timing {
  color: #888;
  font-size: 6pt;
}

fieldset {
  border: none;
  background: #eee;
  background-image: linear-gradient(
    to bottom, 
    #e0e0e0,
    #f4f4f4 15%, 
    #ededed 80%, 
    #e0e0e0);
  box-shadow: 2px 2px 3px #888;
  border-radius: 6px;
  position: relative;
  padding: 1.5em 1em 1em 1em;
  margin-top: 1.5em;
  margin-bottom: 1em;
}
fieldset legend {
  padding: .2em .75em .2em .75em;
  color: white;
  background: #005A9C;
  background-image: linear-gradient(
    to bottom, 
    #0075cb,
    #005A9C 20%, 
    #005A9C 85%, 
    #00487d);
  box-shadow: 1px 1px 2px #888;  
  border-radius: 3px;
  position: absolute;
  top: -.7em;
  left: 1em;
}
fieldset legend a:link {
  color: #eee;
}

fieldset table.list {
  box-shadow: 0px 0px 2px #888 inset;
}
fieldset p {
  margin-bottom: 0;
}
fieldset p {
  margin: 0;
}
fieldset input[type='submit'] {
  margin-top: 1em;
}
fieldset table input[type='submit'] {
  margin-top: 0;
}

/**/
table caption {
  text-align: left;
}

table.list {
  width: 100%;
  border-collapse: collapse;
  margin: 1em 0;
}


table.list th, 
table.list td {
  padding: .1em .5em;
  text-align: left;
  vertical-align: top;
}

table.list thead tr,
table.list thead tr {
  border-top: solid 1px #888;
  border-bottom: solid 1px #888;
}
table.list tbody:last-child {
  border-bottom: solid 1px #888;
}

table.list thead {
  background: #eee;
}
table.list tbody tr:nth-child(even),
table.list.tbody tbody:nth-child(even) tr {
  background: #f2f2f2;
}
table.list tbody tr:nth-child(odd),
table.list.tbody tbody:nth-child(odd) tr {
  background: #fafafa;
}

table.list span.group {
  margin: 0 .25em 0 0;
  white-space: nowrap;
}

table.list tbody th {
  text-align: right;
  padding-left: 1em;
  white-space: nowrap;
}

table.labels th {
  text-align: right;
}
table.labels td {
  text-align: left;
}
table.labels span {
  margin-left: .5em;
}

table.sublist {
  border-collapse: collapse;
}
table.sublist th,
table.sublist td {
  white-space: nowrap;
  width: 1em;
}

/* Top mav controls */
.header .mini_nav {
  font-size: 10px;
  float: right;
  margin-top: 3em;
}
.header .mini_nav span.button,
.header .mini_nav a.button {
  margin: 0 .25em;
}
.header .mini_nav span {
  margin: 0 .5em;
}
@media print {
  .header .mini_nav .button {
    display: none ! important;
  }
}

.footer .nav {
  margin-left: -36px;
  margin-right: -1em;
  text-align: center;
}
.footer .nav input {
  margin: 0 .5em;
}
.footer .nav input + input {
  margin-right: 2em;
}
.footer .nav span + input {
  margin-left: 2em;
}