/*******************************************************************************
 *
 *  Copyright © 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 
 *
 *  Adapted from the Mobile Test Harness
 *  Copyright © 2007 World Wide Web Consortium
 *  http://dev.w3.org/cvsweb/2007/mobile-test-harness/
 * 
 ******************************************************************************/

div.annotation {
  font-size: 12pt;
  font-weight: normal;
  font-style: normal;
  font-variant: normal;
  color: black;
  float: right; 
  display: block; 
  max-width: 12em; 
  border: 2px solid black;
  border-radius: 0.5em;
  padding: 3px 0.5em; 
  text-align: center;
  background: #EEE;
  margin: 0 0 0.5em 1em;
  position: relative;
  min-height: 14px;
}

div.annotation.need {
  background-color: #CCC;
}

div.annotation div {
  display: block;
}

div.annotation div.disclosureBox {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 12px;
  height: 12px;
  border: thin none #444;
  border-radius: 4px;
  background: url(img/open_dark.png) no-repeat center;
}
div.annotation.closed div.disclosureBox {
  background-image: url(img/closed_dark.png);
}

div.annotation div.disclosureBox:hover {
  border-style: solid;
  background: #888 url(img/open_light.png) no-repeat center;
}
div.annotation.closed div.disclosureBox:hover {
  background-image: url(img/closed_light.png);
}

div.annotation div.closeBox {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 12px;
  height: 12px;
  border: thin none #444;
  border-radius: 4px;
  background: url(img/close_dark.png) no-repeat center;
}

div.annotation div.closeBox:hover {
  border-style: solid;
  background: #888 url(img/close_light.png) no-repeat center;
}

div.annotation div.heading {
  margin-left: 14px;
  margin-right: 14px;
}

div.annotation div.heading span {
  display: block;
  font-size: smaller;
}

div.annotation a {
  text-decoration: none;
}
div.annotation a:hover,
div.annotation a:hover span {
  text-decoration: underline;
  background: none;
}

div.annotation img.need {
  /*float: right;*/
  margin-top: -0.15em;
}

div.annotation div.engines {
  clear: both;
}
div.annotation div.engines span {
  font-size: x-small; 
  border: 1px solid black; 
  padding: 1px 0.2em;
  background: white;
}
div.annotation div.engines span.active {
  padding-bottom: 0px;
  border-bottom-width: 2px;
}
div.annotation div.engines span a:hover {
  background: none;
}

div.annotation div.engines span.pass {
  background-color: #4F4;
}

div.annotation div.engines span.p100 {
  background-color: #8F8;
}
div.annotation div.engines span.p90 {
  background-color: #9F6;
}
div.annotation div.engines span.p80 {
  background-color: #FF6;
}
div.annotation div.engines span.p70 {
  background-color: #F93;
}
div.annotation div.engines span.p60,
div.annotation div.engines span.p50,
div.annotation div.engines span.p40,
div.annotation div.engines span.p30,
div.annotation div.engines span.p20,
div.annotation div.engines span.p10 {
  background-color: #F60;
}

div.annotation div.engines span.fail {
  background-color: #F66;
}

div.annotation div.engines span.untested {
  background-color: #DDD;
}

@media print {
  div.annotation {
    display: none;
  }
}
