/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .tabs-hide {
        display: none;
    }
}

/* Hide useless elements in print layouts... */
@media print {
    .tabs-nav {
        display: none;
    }
}

/* Skin */
.tabs-nav   { list-style: none; margin: 0; padding: 0 0 0 2px }
.tabs-nav:after  { display: block; clear: both; content: " " }
.tabs-nav li   { text-decoration: none; margin: 0 0 0 1px; right: 94px; float: left }
.tabs-nav a, .tabs-nav a span      { text-decoration: none; background-image: url(../image/tab.png); background-repeat: no-repeat; background-attachment: scroll; background-position: 0 50%; display: block; padding: 0 10px }
.tabs-nav a  { color: red; font-size: 10px; font-weight: bold; line-height: 1.2; text-decoration: none; text-align: center; white-space: nowrap; padding-left: 0; position: relative; z-index: 2; top: 1px }
.tabs-nav .tabs-selected a     { text-decoration: none }
.tabs-nav .tabs-selected a, .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active   { background-position: 100% -150px;
    outline: 0  }
.tabs-nav a, .tabs-nav .tabs-disabled a:hover, .tabs-nav .tabs-disabled a:focus, .tabs-nav .tabs-disabled a:active  { background-position: 100% -100px }
.tabs-nav a span   { color: red;  padding-top: 4px; padding-right: 0; right: 64px; bottom: 18px; width: 64px; height: 18px }
.tabs-nav a span  { width: auto; height: auto }
.tabs-nav .tabs-selected a span    { color: purple; padding-top: 7px }
.tabs-nav .tabs-selected a span, .tabs-nav a:hover span, .tabs-nav a:focus span, .tabs-nav a:active span {
    background-position: 0 -50px;
}
.tabs-nav a span, .tabs-nav .tabs-disabled a:hover span, .tabs-nav .tabs-disabled a:focus span, .tabs-nav .tabs-disabled a:active span {
    background-position: 0 0;
}
.tabs-nav .tabs-selected a:link, .tabs-nav .tabs-selected a:visited, .tabs-nav .tabs-disabled a:link, .tabs-nav .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
}
.tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active  { cursor: pointer }
.tabs-nav .tabs-disabled  { opacity: .4 }
.tabs-container    { font-size: 10px; background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 50%; padding: 1em 8px; position: relative; left: -2px; border-top: 1px none #97a5b0 }
.tabs-loading em  { background: url(../image/loading.gif) no-repeat 0 50%; padding: 0 0 0 20px }