/*
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 {
		position:absolute;
		left:-20000px;
		z-index:99;
    }
}
@media print { /* retain accessibility by overriding inline style used by animations... */
    .fragment {
        display: block !important;
        height: auto !important;
        opacity: 1 !important;
    }
}

/*
TAB STYLES:
Some more styles, not important for making tabs work, just for the look of it...
*/
/*---| About Product Nav |-----------------------*/

.anchors {
    list-style: none;
    margin: 0px 0px 0px 3px;
    padding: 0;
	float:left;
}
	.anchors:after { /* clearing without presentational markup, IE gets extra treatment */
		display: block;
		clear: both;
		content: " ";
	}
	.anchors li {
		float: left;
		margin:0;
		padding:0;
		position: relative;
		z-index: 3;
	}
	
	.anchors a{
		display: block;
		text-decoration: none;
		color:#6A5652;
		background:url('../images/btn/tab.png') no-repeat;
		width:100px;
		height:17px;
		font-size:0.9em;
		text-align:center;
		z-index: 3;
	}
	
	.anchors .on a{
		display: block;
		text-decoration: none;
		color:#6A5652;
		background:url('../images/btn/tab.png') no-repeat 0px -21px;
		width:100px;
		height:17px;
		cursor: pointer;
		z-index: 3;
	}

	.anchors a:focus, .anchors a:active {
		outline: none; /* @ Firefox 1.5, remove ugly dotted border */
	}

.fragment {
    border:1px solid #6A5652;
	float:left;
	padding:5px;
	width:408px;
}

	.fragment ul {
		list-style:none; 
		margin:0px 10px; 
		position:relative;
	}
	
		.fragment ul li{
			margin:0px 10px;
			list-style-image:url(../images/layout/bullet.png);
		}


	.anchors .on a:link, .anchors .on a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
		cursor: text;
	}
	
	.anchors a:hover, .anchors a:focus, .anchors a:active {
	    cursor: pointer;
	}