/* A standard pattern for marking up tabs

Markup if used within one page (href attributes should link to IDs of containers so the tabs can be enhanced with JavaScript) ...

<ul class="tabs">
	<li class="active"><a href="#">One</a></li>
	<li><a href="#two">Two</a></li>
	<li><a href="#three">Three</a></li>
</ul>

Markup if linking to an external page (active tab doesn't need an href but needs <a> for styling purposes) ...

<ul class="tabs">
	<li class="active"><a>One</a></li>
	<li><a href="http://two.com">Two</a></li>
	<li><a href="http://www.three.com">Three</a></li>
</ul>
*/


.tabs,
.singular .content .tabs {
padding:0 0 0 1em;
zoom: 1;
border-bottom:1px solid #ccc;
margin-bottom:3em;
}
/* Applying clearfix styles */
.tabs:before,
.tabs:after {
content: ".";    
display: block;    
height: 0;    
overflow: hidden;	
zoom: 1;
}
.tabs:after {
clear: both;
}

.tabs li,
.singular .content .tabs li {
font-size:1.4em;
padding:0;
font-family:"franklin-gothic-urw",Verdana,Geneva,sans-serif;
margin:0 0.5em;
float:left;
list-style-type:none;
}
.tabs a {
background-color:#F4F5F6;
padding:0.2em 2.0em 0.3em;
display:block;
border:0.1em solid #fff;
border-bottom:0;
}
.tabs .active a {
color:#000;
background-color:#fff;
border-color:#ccc;
position:relative;
border-bottom:0.1em solid #fff;
top:0.075em;
}