/* the entire enclosure in which all tab styles are applied */
.tabs
{
	padding: 0;
	margin: 0;
	width: 520px;
	height: 300px;
	position: relative;
	font:Georgia;
}

.tabs a
{
	height: 13px;
}

/* selects the actual row of tabs */
.tabs div:first-child
{
	height: 59px;
	border-top-color: green;
	color:#FFFFFF;
	font:Georgia;
	font-size:18px;
	font-weight:bold;
}

/* selects links in the actual row of tabs */
.tabs div:first-child a
{
	position: absolute; 
	top: 8px; 
	color:#FFFFFF;
	font-size:12px;
	font-weight:bold;
	font:Georgia;
}

/* selects the remainder of the content area, not including the tabs */
.tabs div 
{
	height: 280px;
}

/* select the tab's content area,
	first selector line is required to increase css specifivity */
.tabs div div:first-child,
.tabs div div
{
	position: relative;
	background-image: none;
	height: 335px;
	padding-top: 10px;
}

/* the number in the tab's content area */
.tabs div div:first-child h1,
.tabContent h1
{
	position: absolute;
	top: 10px;
	left: 5px;
	padding: 0;
	margin: 0;
	color: #ffffff;
	font-family: Arial;
	font-weight: normal;
	font-size: 16px;
	text-align: center;
	width: 65px;
	
}

/* the actual content in the tab's content area */
.tabs div div:first-child,
.tabContent
{
	padding: 10px 15px 0px 15px;
	margin: 0;
	color:#FFFFFF;
	font:Georgia, "Times New Roman", Times, serif;
	font-size:14px;
	line-height:16px;
	font-weight:bold;
}

/* selects the links inside the actual content paragraphs */
.tabs div div:first-child a,
.tabContent a
{
	position: static !important;
	font-family: Arial !important;
	font-size: 12px !important;
	font-weight: normal !important;
}

.tabContent p
{
	padding: -10px 0px 0px 0px;
	margin: 0;
}

/* selects the navigation links at the bottom of tab's content area */
.tabs div a
{
	position: absolute;
	bottom: 10px;
	font-family: Georgia;
	font-weight: bold;
	font-size: 10px;
	color: #ffffff;
	left: 7000px; 
}

/* styles applied by javascript to set the background depending on the tab selected */
.tabEmployersSelected div:first-child { 
	background-image: url('images/employers_tab.gif');
	background-repeat:no-repeat;
	height:59px;
}

.tabEmployersSelected div  { 
	background-image: url('images/employers_text_bg.gif');
	background-repeat:no-repeat;
}

.tabPolicySelected div:first-child { 
	background-image: url('images/policy_tab.gif');
	background-repeat:no-repeat;
	height:59px;
}

.tabPolicySelected div  { 
	background-image: url('images/policy_text_bg.gif');
	background-repeat:no-repeat;
}

.tabCommunitySelected div:first-child { 
	background-image: url('images/community_tab.gif');
	background-repeat:no-repeat;
	height:59px;
}

.tabCommunitySelected div  { 
	background-image: url('images/community_text_bg.gif');
	background-repeat:no-repeat;
}


#tabMiddleNavigationLink
{
	left: 7000px; 
	width: 1px; 
	text-align: center;
}
