/* Caution! Ensure accessibility in print and other media types... */

@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */	
	#services .tabs-hide {
        display: none;
    }
}

/* Hide useless elements in print layouts... */
@media print {
    #services .tabs-nav {
        display: none;
    }
}

/* Skin */
@media projection, screen {
#main-area div#services ul.tabs-nav li { background: none; padding: 0; }

#main-area div#services {
	position: relative;
	float: left; display: inline;
	padding: 0;
	width: 516px;
	background: url(/images/bg_services.gif) repeat-y 0 0;
}

	div#services ul.tabs-nav {
		position: relative;
		float: left; display: inline;
		margin: 0; padding: 0;
		height: 35px; width: 516px;
		background: url(/images/sp_ind-tabs.gif) no-repeat 0 0;
	}
		div#services ul.tabs-nav li,
		div#services ul.tabs-nav li a {
			float: left; display: inline;
			margin: 0; padding: 0;		
			width: 106px; height: 35px;
		}
			div#services ul.tabs-nav li { margin-right: 52px; }
			div#services ul.tabs-nav li#s-mechanical { margin-right: 53px; }
		
		div#services ul.tabs-nav li#s-electrical.tabs-selected a,
		div#services ul.tabs-nav li#s-electrical a:hover,
		div#services ul.tabs-nav li#s-electrical a:focus { background: url(/images/sp_ind-tabs.gif) no-repeat 0 -35px; }
		
		div#services ul.tabs-nav li#s-mechanical.tabs-selected a,
		div#services ul.tabs-nav li#s-mechanical a:hover,
		div#services ul.tabs-nav li#s-mechanical a:focus { background: url(/images/sp_ind-tabs.gif) no-repeat -158px -35px; }
		
		div#services ul.tabs-nav li#s-plumbing.tabs-selected a,
		div#services ul.tabs-nav li#s-plumbing a:hover,
		div#services ul.tabs-nav li#s-plumbing a:focus { background: url(/images/sp_ind-tabs.gif) no-repeat -317px -35px; }
		
		
		div#services div { float: left; display: inline; margin: 0; padding: 10px 21px 21px 15px;
							width: 480px; background: url(/images/bg_services-foot.gif) no-repeat left bottom; }
		
		

ul.tabs-nav a {
    position: relative;
	left: 0; top: 0;
    z-index: 2;
	text-indent: -9999em;
    white-space: nowrap; /* required in IE 6 */    
}

*>.tabs-nav a span { /* hide from IE 6 */
    width: auto;
    height: auto;
}


.tabs-nav .tabs-selected a:link, .tabs-nav .tabs-selected a:visited, .tabs-nav .tabs-disabled a:link, .tabs-nav .tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: default;
}

.tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active { /* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
}
}