/*
IMPORTANT:
Essential styles to ensure accessibility
*/
@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:1px !important;
}

.anchors {
display:none;
}
}

/*
TAB STYLES:
Some more styles, not important for making tabs work, just for the look of it...
*/
.anchors {
list-style:none;
margin:0;
padding:0;
}

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

.anchors li {
float:left;
margin:2px;
}

.anchors a {
display:block;
position:relative;
top:1px;
border:0 solid #eaeaea;
z-index:2;
color:#333;
text-decoration:none;
text-align:center;
padding-top:5px;
background-color:#fc0;
height:20px;
width:131px;
font-size:0.9em;
font-weight:700;
}

.anchors .tabs-selected a {
}

.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,.anchors .tabs-selected a:link,.anchors .tabs-selected a:visited,.anchors .tabs-disabled a:link,.anchors .tabs-disabled a:visited {
/* @ Opera, use pseudo classes otherwise it confuses cursor... */
cursor:text;
color:red;
background-color:#000;
}

.anchors a:hover,.anchors a:focus,.anchors a:active {
cursor:pointer;
background-color:#f90;
color:#333;
}

.anchors .tabs-disabled {
opacity:.4;
}

.anchors .tabs-disabled a:hover,.anchors .tabs-disabled a:focus,.anchors .tabs-disabled a:active {
background:transparent;
}

.fragment {
background:#222;
position:relative;
top:-1px;
left:0;
padding:15px 5px 5px;
width:660px;
font-size:1em;
height:auto;
clear:both;
color:#fff;
}