/* Before using this stylesheet, ensure tabs are appropriate by discussing with the Corp Web Team.  
Tabs will be created horizontally across the screen.
Note that id="current" in the below example represents a selected tab.
HOW TO USE:
Options: tabopt1 (light blue tabs with dark blue selected)
	     tabopt2 (alternative tab colors to use when the pallet already has predominantly blue navigation or tabbing already in the tier rows.
<div id="tabopt1">
	<ul>
		<li id="current" title="View Topics/Comments detail"><div><a href="worksiteDiscussionTopicsPrepare.do">Topics/Comments</a></div></li>
		<li title="Provide information about the meeting"><div><a href="meetingInfoPrepare.do">Meeting Info</a></div></li>
		<li title="View current activity for this contact"><div><a href="worksiteDiscussionSalesPrepare.do">Activity Summary</a></div></li>
		<li title="View all contact history"><div><a href="contactHistorySummaryPrepare.do">Contact History</a></div></li>
	</ul>
</div>
See SUB-TAB LINKS BELOW FOR ADDING "SUB-TAB" STRUCTURE
 */

/* BASIC TAB STYLE RULES */
#tabopt1, #tabopt2 {
	float: left;
	width: 100%;
	line-height: normal;
	/*clear: both; - removing for IE 8*/
	}
#tabopt1 {/* DIV BORDER */
	border-bottom:2px solid #003366;
	}	
#tabopt2 {/* DIV BORDER */
	border-bottom:2px solid #cc6600;
	}
	
#tabopt1 ul, #tabopt2 ul {
	padding: 10px 10px 0 10px;
	margin: 0px;
	list-style-type: none;
	}
	
#tabopt1 li, #tabopt2 li {
	padding: 0 0 0 9px;
	float: left;
	margin-right: 2px;
	}
#tabopt1 li {
	background: url(/allweb/images/corporate/tabs/tabopt1_leftoff.gif) no-repeat left top;
	background-color:#ccddee;
	}
#tabopt2 li {
	background: url(/allweb/images/corporate/tabs/tabopt2_leftoff.gif) no-repeat left top;
	background-color:#F1D4B8;
	}
	
#tabopt1 a, #tabopt2 a {
	padding: 5px 15px 4px 5px;
	display: block;
	float: left;
	color: #000000;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size:8pt;
	}
#tabopt1 div {
	background: url(/allweb/images/corporate/tabs/tabopt1_rightoff.gif) no-repeat right top;
	}
#tabopt2 div {
	background: url(/allweb/images/corporate/tabs/tabopt2_rightoff.gif) no-repeat right top;
	}

/* Commented Backslash Hack
 hides rule from IE5-Mac \*/
#tabopt1 a, #tabopt2 a {float:none;}
/* End IE5-Mac hack */
#tabopt1 a:hover, #tabopt2 a:hover{
	color: #003366;
	}
#tabopt1 #current A:hover, #tabopt2 #current a:hover{
	color: #ccddee;
	}
#tabopt1 li#current{
	background: url(/allweb/images/corporate/tabs/tabopt1_left.gif) no-repeat left top;
	background-color:#003366;
	}
#tabopt2 li#current{
	background: url(/allweb/images/corporate/tabs/tabopt2_left.gif) no-repeat left top;
	background-color:#cc6600;
	}

#tabopt1 #current a, #tabopt2 #current a{
	padding: 5px 15px 4px 5px;
	display: block;
	font-weight: bold;
	float: left;
	color: #ffffff;
	text-decoration: none;
	}
#tabopt1 li#current a{
	background: url(/allweb/images/corporate/tabs/tabopt1_right.gif) no-repeat right top;
	}
#tabopt2 li#current a{
	background: url(/allweb/images/corporate/tabs/tabopt2_right.gif) no-repeat right top;
	}

/*SUB-TAB STYLE - LINKS BELOW THE TAB STRUCTURE*/
/*HOW TO USE:
<div id="subtabcontainer">
	<ul id="subtablist">
		<li id="subtabcurrent">Item one</li>
		<li><a href="#">Item two</a></li>
		<li><a href="#">Item three</a></li>
		<li><a href="#">Item four</a></li>
		<li><a href="#">Item five</a></li>
	</ul>
</div>*/

#subtabcontainer{
	font-size: 85%;
	margin: 5px 0 5px 10px;
	padding: 0 0 5px 0;
	overflow: hidden;
	width: 100%;
	clear:both;
}
#subtablist{
	list-style-type: none;
	margin: 0;
	padding: 0;
}
#subtablist a{
	text-decoration: underline;
}
#subtablist li{
	border-left: 1px solid #000;
	float: left;
	line-height: 100%;
	margin: 10px 5px 0 -5px;
	padding: 0 7px 0 7px;
}
#subtabcurrent{
	font-weight: bold;
}