/* CSS tabs Document */
/* this layout won't work in ie5 mac unless you give widths to all floats or convert it to inline-block */

* {margin:0;padding:0}/* quick and dirty for demo only - clear all default paddings and margins*/
#wrap {margin:25px;}/* for example purposes only */
ul,li {list-style:none;}
ul#navx,#navx li {list-style:none;}
ul#navx {
	width:100%;
	margin:0 0 20px;/* remove default margins  - and add bottom margin only*/
	border-bottom:2em solid #036;
	overflow:hidden;/*clear:floats - if float is used for tabs instead of inline-block*/
	padding:0;/* remove default padding - if any */
	list-style:none;/* remove bullet */
	text-align:center;/* center nested tabs */
}
/* use strong element for current tab */
ul#navx li, ul#navx li a, ul#navx li span, ul#navx li strong {
	display:-moz-inline-box;/* Firefox 2 support */
	display:inline-block;/* use instead of float so tabs can be centred */
	line-height:1.4em;
	text-decoration:none;
	color:#fff;
	text-align:center;
	font-weight:normal;
	vertical-align:top;
}
* html ul#navx li, * html ul#navx li a, * html ul#navx li span, * html ul#navx li strong {
	display:inline;/* ie6 inline-block hack */
}
*+html ul#navx li, *+html ul#navx li a, *+html ul#navx li span, *+html ul#navx li strong {
	display:inline;/* ie7 inline-block hack */
}
ul#navx li {
	margin-right:5px
}/* make tabs overlap*/
ul#navx li a, ul#navx li span, ul#navx li strong {/* pre-load hover image using sprite*/
	background:url(images/tabsprite.png) no-repeat 0 0;
	cursor:pointer;
}
/* ie6 gets a transparent gif*/
* html ul#navx li a, * html ul#navx li span, * html ul#navx li strong {
	background:url(images/tabsprite.gif) no-repeat 0 0;
}
ul#navx li a, ul#navx li strong {
	background-position:0 0;/* use left side of sprite*/
	padding:0 0 0 25px;/* make space for tab so span doesn;t rub it out*/
}
ul#navx li a span, ul#navx li strong span {
	background-position:100% 0;/* use right side of sprite*/
	padding:5px 25px 5px 0;/* apply padding to inner span and not to anchor*/
	margin-right:-20px;/* allow for transparent tabs */
	position:relative;/* ie6 needs this or the anchor won't show */
}
/* hover rules  */
ul#navx li a:hover {
	visibility:visible
}/* ie6 needs this otherwise span won't show hover*/
ul#navx li a:hover, ul#navx li strong {
	background-position:0 -102px;/* swap tab by changing background-position*/
	z-index:99;/* raise z-index on hover so tab comes in front of other tabs */
	position:relative;
}
ul#navx li strong {
	z-index:98
}/* so hovered tabs can still go on top of current tab */
ul#navx li a:hover span, ul#navx li strong span {
	background-position:100% -102px;
	color:yellow;
}


/* If you want to use floats instead of display:inline-block then add float here and remove the inline-block rules 
ul#navx li, 
ul#navx li a, 
ul#navx li span,
ul#navx li strong{
	float:left;
}
And then remove the IE6 and 7 inline-block hack special rules
*/