@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;
    }
}
@media print { /* maintain accessibility by overriding inline style used by animations... */
    .fragment {
        display: block !important;
        height: auto !important;
        opacity: 1 !important;
    }
    .anchors {
        display: none;
    }
}

.anchors {
    list-style: none;
    margin: 0;
    padding: 8px 0 1px 12px;
    background: #c9aa88;
    background: url(/misc/img_pictures/tabs-bkgr.gif ) repeat-x top;
}
.anchors:after { /* clearing without presentational markup, IE gets extra treatment */
    display: block;
    clear: both;
    content: " ";
}
.anchors li {
    float: left;
    margin: 0px 4px 0px 0;
 }

#tablink a, #tablink a:visited, #tablink a:hover, #tablink a:focus {text-decoration: none; font-weight: normal;}
#tablink a:visited {color: #ffffff;}
#tablink .tabs-selected a:visited, #tablink a:hover {color:#8c6239;}
 
.anchors a {
    display: block;
    position: relative;
    top: 1px;
    border: 1px solid #eaeaea;
    border-bottom: 0;
    z-index: 2;
    padding: 5px 9px 6px;
    color: #ffffff;
    text-decoration: none;
    background: #62523f;
}
#tablink .tabs-selected a, .anchors .tabs-selected a {
    padding-bottom: 2px;
    font-weight: bold;
    color: #8c6239;
    border-bottom: 4px #ffffff solid;
}
.anchors a:focus, .anchors a:active {
    outline: none; /* @ Firefox 1.5, remove ugly dotted border */
}
.anchors .tabs-selected a, .anchors a:hover, .anchors a:focus, .anchors a:active {
    background: #ffffff;
    color: #8c6239;
}

.anchors a:hover, .anchors .tabs-selected a:hover, #tablink .anchors a:hover, #tablink .tabs-selected a:hover{  
   color: #8c6239;
   background: #ffedc6;
}

.anchors .tabs-selected a:hover, #tablink .tabs-selected a:hover  {
    padding-bottom: 6px;
    border-bottom: none;
}

.anchors .tabs-selected a:link, .anchors .tabs-selected a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
}
.anchors a:hover, .anchors a:focus, .anchors a:active {
    cursor: pointer;
}
.fragment {
    padding: 10px 10px;
 }