/*
DelSys website
DelSys_Tabs.css
Common styling for a page containing tabs.
Tab width and spacing depends on the number of tabs and is specified
in page specific css files.
*/

/*
divNavAndCont's purpose is to position the tab page background image.
The images are specified in the page specific css files.
*/

#divNavAndCont {
	height: 650px;
	background-repeat: no-repeat;
	background-position: 30px 0;
}

/* divTabTop contains the reflected graphic and one paragraph. */
#divTabTop {
	height: 130px;
	padding: 70px 30px 0 120px;
	color: white;
	text-align: right;
	line-height: 25px;
}

#divTabTop p {
  padding: 30px 20px 0 30px;
  font-family: arial, sans-serif;
	font-size: 18px;
}

/* divTabContainer contains the tabs and their content */
#divTabContainer {
	position: relative;
	height: 395px;
	margin: 0 30px 0 30px;
}

#divTabContainer #ulTabs {
	height: 42px;
	padding-top: 10px;
	list-style: none;
}

/*
http://docs.jquery.com/UI/Tabs prescribes the following:
.ui-tabs .ui-tabs-hide { display: none; }

The widget adds:
.ui-tabs-nav to the ul containing the tabs
.ui-tabs-selected to the currently selected tab
.ui-tabs-panel to all tab panels 
.ui-tabs-hide to unselected tab panels.
Haven't found .ui_tabs yet, so it's not styled.
*/

.ui-tabs-hide {
		display: none;
}

#ulTabs li {
	float: left;
/*	margin-right: 8px; */
	text-align: center;
}
	
#ulTabs li.classTabRightmost {
	margin-right: 0px;
}

#ulTabs li a {
	display: block;
	height: 37px;					/* Background is 42px tall. */
	padding-top: 5px;			/* Total height must also be 42px. */
	text-decoration: none;
	outline: none;
  font-family: arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
	color: #787878; 			/* DelSys dark gray */
}

#ulTabs li a:hover, #ulTabs li a:active {
	color: black;
	text-decoration: none;
}

#ulTabs li.ui-tabs-selected a {
	color: black;
	color: #008B8B;			/* DelSys cyan */
	font-size: 14px;
}

#divTabPanels {
/*	position: relative; 	At one time, I thought this fixed the IE FOUC mentioned below. */
	height: 343px;
}

/*
IE opacity filter fails on relatively positioned descendents unless the parent is
relatively positioned as well!
*/

.divTabPanel {
	position: relative;
	height: 325px;
	padding: 0px 40px 0px 40px;
}

h1 {
	color: #008B8B;			/* DelSys cyan */
	padding-bottom: 20px;
  font-family: Arial, sans-serif;
	font-size: 110%;
	font-weight: bold;						/* IE6 & IE7 opacity filter screws up bold faced text */
	background-color: #FBFBFB;		/* unless a background color ia specified! */
}

.divTabPanel p {
	font-size: 90%;
  padding-bottom: 10px;
}

.divTabPanel ul {
	list-style-position: inside;
	font-size: 90%;
  padding-bottom: 10px;
}

.divTabPanel em {
	color: black;			/* Or DelSys cyan #008B8B */
	font-style: normal;	/* em defaults to italic */
	font-weight: bold;
}

.pHanging {
	float: left;
	clear: both;
	width: 150px;
  font-weight: bold;
	text-align: right;
}

.pHanger {
	float: left;
	width: 500px;
}

.pHangover {
	clear: right;
}

.imgFloatRight {
	padding-left: 20px;
	float: right;
}

/*
divTabPanels can be split further into divTabBlurb and divTabClient
divTabBlurb contains smaller hanging indent paragraphs
divTabClient is 240x260 with a rounded corner background
divTabClient contains pClient, pApplication, pServices and an image

First used absolute positioning to locate .divTabBlurb and .divTabClient
within .divTabPanel. But that caused a FOUC in IE6 & IE7. Switching to
relative positioning with an odd coordinate for .divTabClient made it better.

The FOUC got better during the websites page development.
Need to go back and determine the exact cause of the fix - adding relative positioning
to one element or another.
*/

.divTabBlurb {
	position: absolute;
	left: 40px;
	top: 10px;
	width: 420px;
	height: 260px;
}

.divTabBlurb h1 {
	padding-top: 10px;
	padding-bottom: 10px;
}

.divTabBlurb h2 {
	position: relative;
	top: -6px;
	padding-bottom: 10px;
  font-family: Arial, sans-serif;
	font-size: 90%;
	font-weight: bold;						/* IE6 & IE7 opacity filter screws up bold faced text */
	background-color: white;			/* unless a background color ia specified! */
}

.divTabBlurb p {
	width: 400px;
}

.divTabBlurb .pHanging {
	width: 115px;
	padding-right: 15px;
  font-family: Arial, sans-serif;
}

.divTabBlurb .pHanger {
	width: 270px
}

.divTabClient {
	position: absolute;
	width: 240px;						/* 240 centers content */
	padding-right: 10px;		/* 10 accomodates drop shadow */
	height: 270px;
	left: 460px;
	top: 32px;
	text-align: center;
	background: url(Images/Client-BG-250x270.gif) no-repeat left top;
}

.divTabPanel .pClient {
	position: relative;
	padding-top: 8px;
	padding-bottom: 0;
  font-family: Arial, sans-serif;
  font-weight: bold;
}

.divTabPanel .pApplication {
	position: relative;
	top: 14px;
	padding-bottom: 0;
  font-family: Arial, sans-serif;
	font-size: 90%;
  font-weight: bold;
}

/*
pServices paragraphs are followed by an image.
The z-index forces the paragraphs to lay on top of the images.
*/
.divTabPanel .pServices {
	position: relative;
	top: 20px;
	padding-bottom: 0;
	z-index: 10;
	font-size: 80%;
  font-weight: bold;
}

.divTabPanel .pDescriptionTop {
	position: relative;
	padding-bottom: 0;
	z-index: 10;
	padding-left: 10px;
	padding-right: 10px;
	font-size: 80%;
}

.divTabPanel .imgBottom {
	position: relative;
}

.divTabPanel .pDescriptionLeft {
	position: relative;
	padding-bottom: 0;
	padding-left: 12px;
	font-size: 80%;
	text-align: left;
}

.divTabPanel .imgRight {
	position: relative;
	float: right;
	padding-right: 10px;
}

.divTabPanel .imgLeft {
	position: relative;
	float: left;
	padding-left: 10px;
}

.divTabPanel .pDescriptionRight {
	position: relative;
	width: 85px;
	padding-right: 20px;
	float: right;
	text-align: right;
	font-size: 80%;
}

.divTabPanel a:link {
	color: black;
}

/*
Another tab panel layout has a full width div across the top
and two half width divs on the bottom. Total height is 324px.
*/

.divTabTop {
	position: absolute;
	width: 698px;
	height: 60px;
	left: 22px;
	top: 0px;
	text-align: center;
}

.divTabTop h1 {
	color: #008B8B;			/* DelSys cyan */
	padding-top: 20px;
	padding-bottom: 0px;
  font-family: Arial, sans-serif;
	font-size: 110%;
	font-weight: bold;						/* IE6 & IE7 opacity filter screws up bold faced text */
	background-color: white;			/* unless a background color ia specified! */
}

.divTabTop h2 {
	color: black;
	padding-top: 10px;
  font-family: Arial, sans-serif;
	font-size: 100%;
	font-weight: bold;						/* IE6 & IE7 opacity filter screws up bold faced text */
	background-color: white;			/* unless a background color ia specified! */
}

.divTabLeft {
	position: absolute;
	width: 349px;
	height: 264px;
	left: 22px;
	top: 60px;
	text-align: center;
}

.divTabLeft p {
	width: 290px;
	padding-left: 20px;
	padding-right: 20px;
	text-align: left;
}

.divTabLeft .pQuote {
	width: 320px;
	padding: 0 0 0 10px;
	font-size: 90%;
}

.divTabLeft .pAttribution {
	width: 320px;
	padding: 0 10px 10px 0;
	text-align: right;
  font-family: Arial, sans-serif;
}

.divTabLeft .pBrag {
	width: 290px;
	padding: 20px 20px 0 20px;
	font-size: 110%;
	font-weight: bold;						/* IE6 & IE7 opacity filter screws up bold faced text */
	background-color: white;			/* unless a background color ia specified! */
}

.divTabLeft .pHanging {
	float: left;
	width: 80px;
	padding-left: 10px;
	padding-right: 10px;
	text-align: right;
  font-family: Arial, sans-serif;
  font-weight: bold;
}

.divTabLeft .pHanger {
	float: left;
	width: 235px;
	text-align: left;
	padding-left: 10px;
	padding-right: 0px;					/* Overrides inherited 20px */
}

.divTabLeft .pHangerOn {				/* Follow on paragraphs after a pHanger */
	width: 235px;
	text-align: left;
	padding-left: 110px;
	padding-right: 0px;					/* Overrides inherited 20px */
}

.divTabLeft .ulHangerOn {			/* Ditto for for an unordered list */
	width: 235px;
	text-align: left;
	list-style-position: outside;
	padding-left: 125px;
	padding-right: 0px;					/* Overrides inherited 20px */
}

.divTabLeft .pHanger .spanQuoteAttr {
	float: right;
  font-family: Arial, sans-serif;
	font-size: 80%;
}

.divTabRight {
	position: absolute;
	width: 349px;
	height: 264px;
	left: 371px;
	top: 60px;
	text-align: center;
}

.divTabRight .pHanging {
	float: left;
	width: 70px;
	padding-right: 10px;
	text-align: right;
  font-family: Arial, sans-serif;
  font-weight: bold;
}

.divTabRight .pHanger {
	float: left;
	width: 235px;
	text-align: left;
	padding-left: 10px;
	padding-right: 0px;					/* Overrides inherited 20px */
}

h2 {
	padding-bottom: 5px;
  font-family: Arial, sans-serif;
	font-size: 90%;
	font-weight: bold;						/* IE6 & IE7 opacity filter screws up bold faced text */
	background-color: white;			/* unless a background color ia specified! */
}