/* use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
@media projection, screen { 
    .tabs-hide {
        display: none;
    }
}

/* retain accessibility by overriding inline style used by animations... */
@media print  { 
  .fragment {
    display: block !important;
    height: auto !important;
    opacity: 1 !important;
  }
}

.anchors {
  list-style: none;
  margin: 0;
  padding: 0 0 1px;
}

/* clearing without presentational markup, IE gets extra treatment */
.anchors:after { 
  display: block;
  clear: both;
  content: " ";
}

.anchors li {
  float: left;
  margin: 0 3px 0 0;
}

.anchors a {
  display: block;
  position: relative;
  top: 1px;
  border: 1px solid #E6E6E6;
  border-bottom: 0px;
  z-index: 2;
  padding: 2px 9px 1px;
  color: #000000;
  text-decoration: none;
  font-size: 14px;
}
.anchors .on a {
  padding-bottom: 2px;
  font-weight: bold;
}

/* @ Firefox 1.5, remove ugly dotted border */
.anchors a:focus, 
.anchors a:active {
  outline: none;
}
.anchors .on a, 
.anchors a:hover, 
.anchors a:focus, 
.anchors a:active,
.fragment {
  background: #E6E6E6;
}

/* @ Opera, use pseudo classes otherwise it confuses cursor... */
.anchors .on a:link, 
.anchors .on a:visited { 
  cursor: default;
}

.anchors a:hover, 
.anchors a:focus, 
.anchors a:active {
  cursor: pointer;
  padding-bottom: 2px;
}
.fragment {
  padding: 0 10px;
}

.anchor {
  background: #E6E6E6;
  padding: 0;
}