/*

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: 1 !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 0 1px;

}

.anchors:after { /* clearing without presentational markup, IE gets extra treatment */

    display: block;

    clear: both;

    content: " ";

}

.anchors li {

    float: left;

    margin: 0 6px 0 0;

}

.anchors a {

    display: block;

    position: relative;

    top: 1px;

    border: 3px solid #C1DD65;

    border-bottom: 0;

    z-index: 2;

    padding: 2px 9px 3px;

    color: #ffffff;

	font-size:11px;

	background: #9F9F9F;

    text-decoration: none;

	font-weight: bold;

}

.anchors .tabs-selected a {

    padding-bottom: 3px;

    font-weight: bold;

	background: #C1DD65;

}

.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: #C1DD65;

	color:#000;

}

.fragment {

	background: #ffffff;

	border-left:1px solid #DCDCDC;

	border-right:1px solid #DCDCDC;

	border-bottom:1px solid #DCDCDC;

	border-top:11px solid #C1DD65;

}

.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: 0 10px;

}