@charset "UTF-8";
/* CSS Document */

/* simpler reset */
* {
	margin:0;
	padding:0;
}

html {
	font: small Verdana, "Trebuchet MS", "Myriad Pro", Geneva, Helvetica, Arial, sans-serif;
}

#mainBodyContent p {
	font-size: 105%;
	line-height: 1.6em;
	padding-top:0.4em;
}

#advisorsTable p {
	font-size: 106%;
	line-height: 1.4em;
	padding-top:0.6em
}


#mainBodyContent a {
	color: #003366;
	font-weight: bold;
}

#mainBodyContent a:visited {
	color:#336699;
	font-weight: bold;
}

#mainBodyContent a:hover {
	color:#336699;
	font-weight: bold;
}

#mainBodyContent a:active {
	color:#336699;
	font-weight: bold;
}


h1 { 
	font-size: 155%;
	font-family: Optima, "Times New Roman", Times, Georgia, serif;
	/*text-transform:uppercase;*/
}

#mainBodyContent h1 {
	border-bottom-style:solid;
	border-bottom-width: 4px;
	border-bottom-color:#c8c8c8;
	padding-bottom: 4px;
	padding-left: 9px;
	margin-bottom: 10px;
}
   
#contentWrapper {
/*position: relative;  use this if any images or icons need to to be positioned using absolute setting */
width: 950px;
margin: 0 auto;
vertical-align: top;
/*font: small/1.4 Arial,Helvetica,sans-serif bold;*/
}

/* =================== GLOBAL NAV =================== */
#nav {
float: left; /* Contains floated list items */
width: 950px;
height:23px; /*33 px */
padding: 0;
background: #003366;
list-style-type: none;
border-bottom: 1px solid #003366;
}

/* removes the default margin and padding from the list items */
#nav li {
margin: 0px;
padding: 0px;
float: left; /* this corrects the ie6 li spacing issue. I can remove this is I don't target ie6 */
position:relative; /* this postions the li away from the left side to make room for the CA logo */
left: 55px; /* this is the left position */
}

#nav a {
/*display:block; not necessary in this case, but normally this would create a block element
around each link so that each area around it acts as a button when the cursor is moved over it*/
float: left;
width: 210px;
font-size: 88%;
text-align: center;
color: #c2c2c2;
text-decoration: none;
line-height: 23px; /* this adjust the height between each a element
and is similar to what you might think you can do with padding
you can use pixels or just a generic number, but the latter creates
height differently. I can also use padding above and set line-height to
0, but I wonder if that causes problems in IE*/
border-right:1px solid #959595;
border-left:1px solid #959595;
}

#nav_eri a, #nav_ced a, #nav_cea a{
border-right:none;
}

/* this creates the 'you are here' effect for each page the nav links
too. Of course, this example only effects the home page since I'm
not creating the other pages for this excercise. I put the id "body_hom"
in the body tag. This technique allows you to use a server side include
for the navigation html or a library in dreamweaver */
#body_eri #nav_eri a,
#body_ced #nav_ced a,
#body_cea #nav_cea a,
#body_coca #nav_coca a {
/*background: #336699;*/
background:#003366;
color: #d7d7d7; /* ffb400 */
font-weight: bold;
}

#nav li:hover a {
line-height: 23px;
width: 210px;
height:23px;
/*background:#336699;  #336699 */
color:#ebebeb; /* ffb400 */
}

/* =================== NAMEPLATE middle section of header =================== */
#nameplate {
	overflow:hidden; /*this fixes the extra space that appeares between the siteID and CEA nav
	in Opera, all ie versions and chrome. I didn't need to use this when I previewed the header 
	by itself, but when I placed in within all of the home page code this break occured*/
	/*display: inline;*/
	float: left;
	width: 950px;
}

#siteIDContainer {
	float: left;
	width:266px;
	height:127px;
}

img.siteID {
	margin:18px 18px 18px 18px;
	border-width:0;
}

#ERIBanner {
	margin-left: 300px;
	padding-top: 10px;
	padding-bottom: 10px;
}

/* fixes flash banner position issue in ie6 */
#ie6only #ERIBanner {
	position: absolute;
	left: 23px;
}

/* fixes flash banner position issue in ie7
use ie7only and not ie7andup as in most other cases*/
#ie7only #ERIBanner {
	position: absolute;
	left: 35px;
}
	
/* =================== CEA NAV SECTION =================== */
#ceaNav {
float: left; /* Contains floated list items */
width: 950px;
height: 33px;
background:#ffb400;
list-style-type: none;
letter-spacing:.4px;
}

/* removes the default margin and padding from the list items */
#ceaNav li {
float: left; /* this corrects the ie6 li spacing issue. I can remove this is I don't target ie6 */
/*position:relative; this postions the li away from the left side to make room for the CA logo */
/*left: 203px; this is the left position */
padding: 0;
margin: 0;
position:relative;
left:73px;
}

#ceaNav a {
float: left;
width: 200px;
font-size: 116%;
font-weight: normal;
text-align: center;
color: #003366;
text-decoration: none;
line-height: 33px; /* this adjust the height between each a element
and is similar to what you might think you can do with padding
you can use pixels or just a generic number, but the latter creates
height differently. I can also use padding above and set line-height to
0, but I wonder if that causes problems in IE*/
border-right:1px solid #fdde9f;
border-left:1px solid #fdde9f;
}

#ceaNav_home a, #ceaNav_aboutUs a, #ceaNav_humanResources a {
	border-right: none;
}
/* this creates the 'you are here' effect for each page the nav links
too. Of course, this example only effects the home page since I'm
not creating the other pages for this excercise. I put the id "body_home"
in a div tag that encloses the navigation. This technique allows you to use a server side include
for the navigation html or a library in dreamweaver */
#body_home #ceaNav_home a,
#body_aboutUs #ceaNav_aboutUs a,
#body_humanResources #ceaNav_humanResources a,
#body_workplaceSafety #ceaNav_workplaceSafety a {
/*background: #ffcc66;*/
background: #ffcc66;
color: #003366;
font-weight: bold;
}

#ceaNav li:hover a {
line-height: 33px;
width: 200px;
height:33px;
background: #ffcc66;
color:#003366;
font-weight:bold;
}

/* =================== CEA SUB NAV SECTION FOR ABOUT US PAGE =================== */
#ceaSubNav {
float: left; /* Contains floated list items */
width: 950px;
height: 24px;
background:#ffcc66;
list-style-type: none;
letter-spacing:.2px;
}

/* removes the default margin and padding from the list items */
#ceaSubNav li {
float: left; /* this corrects the ie6 li spacing issue. I can remove this is I don't target ie6 */
padding: 0;
margin: 0;
position:relative;
left:220px;
}

#ceaSubNav a {
float: left;
/*width: 140px;*/
margin-left:15px;
margin-right:15px;
font-size: 105%;
font-weight: normal;
text-align: center;
color: #003366;
text-decoration: none;
line-height: 24px; /* this adjust the height between each a element
and is similar to what you might think you can do with padding
you can use pixels or just a generic number, but the latter creates
height differently. I can also use padding above and set line-height to
0, but I wonder if that causes problems in IE*/
/*border-right:1px solid #fdde9f;
border-left:1px solid #fdde9f;*/
}
/*
#ceaSubNav_aboutERI a, #ceaSubNav_editorialAdvisors a, #ceaSubNav_editorialAwards a,
#ceaSubNav_companyNews a{
	border-right: none;
}
*/

/* this creates the 'you are here' effect for each page the nav links
too. This technique allows you to use a server side include
for the navigation html or library in dreamweaver */
#body_aboutERI #ceaSubNav_aboutERI a,
#body_editorialAdvisors #ceaSubNav_editorialAdvisors a,
#body_editorialAwards #ceaSubNav_editorialAwards a,
#body_companyNews #ceaSubNav_companyNews a,
#body_contactUs #ceaSubNav_contactUs a {
/*background: #ffcc66;*/
background:#ffcc66;
color: #003366;
font-weight: bold;
border-bottom:none;
}

#ceaSubNav li:hover a {
line-height: 24px;
/*width: 140px;*/
text-align:center;
height:24px;
/*background:#ffb400;*/
color:#003366;
font-weight:normal;
border-bottom:4px solid #003366;
}

/* =================== MAIN BODY CONTENT =================== */

#mainBody {
	float: left;
	width: 950px;
}

#homePageSidebar {
	float:right;
	width: 288px;
	margin-top: 20px;
}

.eriAwardBanner {
	border-width:0;
	padding-bottom: 20px;
}

.callout1 {
	border-width:0;
	padding-bottom: 20px;
}

.callout2 {
	border-width:0;
	padding-bottom: 20px;
}

#mainBodyContent {
	width:602px;
	margin: 20px 40px 20px 20px;
	/*padding-right: 20px;*/
}

#mainBodyContent h2 { 
	font-size: 122%;
	font-family: Optima, "Times New Roman", Times, Georgia, serif;
	/*text-transform:uppercase;*/
	/*border-bottom-style:solid;
	border-bottom-width: 1px;
	border-bottom-color:#c8c8c8;*/
	padding-bottom: 0px;
	padding-left: 10px;
	margin-bottom: 0px;
	padding-top: 4px;
}

#mainBodyContent li {
	font-size: 106%;
	line-height: 1.4em;
	margin-left:40px;
}

.btnSolutions {
	border-width:0;
	padding-left:15px;
	padding-top:10px;
}

#advisorsTable td {
	padding-left: 30px;
}

#mainBodyContent .awardYears {
	font-weight: bold;
	color:#003366;
	font-size: 120%;
	padding-bottom:0px;
}

#mainBodyContent .underline {
	border-bottom:1px solid #c8c8c8;
	width:100%;
}

/* =================== HR & SAFETY PRODUCT BODY CONTENT =================== */

#productBodyContent {
	float:left;
	width: 950px;
	margin: 20px 20px 20px 20px;
	/*padding-right: 20px;*/
}

/* ======= HR Flaship Product ========= */
#flagshipBoxBody h1 {
	font-size: 170%;
	padding-top:20px;
}

/* fixes font size / resize issue in ie6 */
#ie6only #flagshipBoxBody h1 {
	font-size: 24px;
}

/* fixes font size / resize issue in ie7 */
#ie7andup #flagshipBoxBody h1 {
	font-size: 24px;
}

#flagshipBoxBody h2 { 
	font-size: 114%;
	line-height: 1.4em;
	font-family: Optima, "Times New Roman", Times, Georgia, serif;
	/*text-transform:uppercase;*/
	padding-bottom: 0px;
	margin-bottom: 0px;
	padding-top: 4px;
}

/* fixes font size / resize issue in ie6 */
#ie6only #flagshipBoxBody h2 {
	font-size: 16px;
}

/* fixes font size / resize issue in ie7 */
#ie7andup #flagshipBoxBody h2 {
	font-size: 16px;
}

.flagshipBoxHeader h3 {
	color:#FFF;
	font-size:90%;
	font-weight: normal;
	padding-top: 10px;
	padding-left:180px;
}

/* fixes font size / resize issue in ie6 */
#ie6only .flagshipBoxHeader h3 {
	font-size: 11px;
}

/* fixes font size / resize issue in ie7 */
#ie7andup .flagshipBoxHeader h3 {
	font-size: 11px;
}

#flagshipBoxBody p {
	font-size: 104%;
	line-height: 1.4em;
	padding-top:0.4em;
	padding-left:0;
}

/* fixes font size / resize issue in ie6 */
#ie6only #flagshipBoxBody p {
	font-size: 11px;
}

/* fixes font size / resize issue in ie7 */
#ie7andup #flagshipBoxBody p {
	font-size: 11px;
}

.flagshipBoxHeader {
background: #003366;
width: 910px;
height:32px;
}

#flagshipBoxBody {
	position:relative;/*positioned relative so that button rule can be positioned absolute */
	display:block;
	background: url(graphics/bg_lrg_product_bucket_910x4.gif) repeat-y 0 0;	
	width:910px;
	height:auto;
	}

.caIcon {
	float:left;
	/*width:160px;*/
	border:none;
	padding-left:40px;
	padding-top:30px;
}

.flagshipSafetyImage {
	float:left;
	/*width:160px;*/
	border:none;
	padding-left:20px;
	padding-top:26px;
}

.flagshipBodyCopy {
	margin-left:180px;
	margin-right:220px;
	padding-bottom:10px;
}	

#flagshipButtons {
	float:right;
	width:220;
	border:none;
	position:absolute;
	bottom:20px;
	right:40px;
	/*
	position:relative;
	right:30px;
	bottom:45px;*/
}

#flagshipButtons p {
	line-height:0;
	padding-top:0;
}

.flagship_tl {
background: url(graphics/DarkBlueCornerTopLeft_11x11.gif) no-repeat 0 0;
}

.flagship_tr {
background: url(graphics/DarkBlueCornerTopRight_11x11.gif) no-repeat 899px 0;
}

.flagship_bl {
background: url(graphics/LightBlueCornerBtmLeft_11x11.gif) no-repeat 0 100%;
}

/* ======= HR Small Bucket Product ========= */

.smallBucket1Wrapper {
	float:left;
	width:445px;
	padding-right:20px;
}

.smallBucket2Wrapper {
	margin-left: 465px;
}

.smallBucketHeader h1 {
	font-size: 112%;
	padding-top:10px;
	padding-left:20px;
	font-family: Optima, "Times New Roman", Times, Georgia, serif;
	line-height: 1.22em;
}

/* fixes font size / resize issue in ie6 */
#ie6only .smallBucketHeader h1 {
	font-size: 16px;
}

/* fixes font size / resize issue in ie7 */
#ie7andup .smallBucketHeader h1 {
	font-size: 16px;
}

.smallBucketHeader {
background: #bacbdd;
width: 445px;
height:56px;
margin-top:20px;
}

.smallBucketBody h2 { 
	font-size: 104%;
	line-height: 1.3em;
	font-family: Optima, "Times New Roman", Times, Georgia, serif;
	/*text-transform:uppercase;*/
	padding-bottom: 0px;
	margin-bottom: 0px;
	padding-top: 10px;
}

/* fixes font size / resize issue in ie6 */
#ie6only .smallBucketBody h2 {
	font-size: 14px;
}

/* fixes font size / resize issue in ie7 */
#ie7andup .smallBucketBody h2 {
	font-size: 14px;
}

.smallBucketBody p {
	font-size: 90%;
	line-height: 1.3em;
	padding-top:0.4em;
	padding-left:0;
	border-bottom: solid #CCC 1px;
	margin-bottom:10px; /*styles border */
	margin-right:10px; /*styles border */
}

/* fixes font size / resize issue in ie6 */
#ie6only .smallBucketBody p {
	font-size: 11px;
}

/* fixes font size / resize issue in ie7 */
#ie7andup .smallBucketBody p {
	font-size: 11px;
}

/* tried to fix issue with price position in IE7
#ie7andup .smallBucketBody p {
	margin-bottom:0px; 
}

#ie7andup .smallBucketButtons {
	margin-top:10px;
}
*/

.smallBucketBody p.smallBucketprice {
	float:left;
	display: inline;
	font-size:100%;
	font-weight:bold;
	border-bottom:none;
	padding-top:10px;
	padding-right:10px;
	padding-left:20px;
}

/* fixes font size / resize issue in ie6 */
#ie6only .smallBucketBody p.smallBucketprice {
	font-size: 10px;
}

/* fixes font size / resize issue in ie7 */
#ie7andup .smallBucketBody p.smallBucketprice {
	font-size: 10px;
}

/* for "starting at $9.99 price version*/
.smallBucketBody p.smallBucketprice2 {
	float:left;
	display: inline;
	position:relative;
	top:-12px;
	text-align:center;
	font-size:100%;
	font-weight:bold;
	border-bottom:none;
	padding-top:0px;
	padding-right:10px;
	padding-left:10px;
}

/* fixes font size / resize issue in ie6 */
#ie6only .smallBucketBody p.smallBucketprice2 {
	font-size: 10px;
}

/* fixes font size / resize issue in ie7 */
#ie7andup .smallBucketBody p.smallBucketprice2 {
	font-size: 10px;
}

.smallBucketBody {
	/*position:relative;positioned relative so that button rule can be positioned absolute */
	display:block;
	background: url(graphics/bg_small_product_bucket_445x4.gif) repeat-y 0 0;	
	width:445px;
	height:auto;
	}

.elccsCover {
	float:left;
	border:none;
	padding-left:10px;
	padding-top:10px;
}

.ccsCover {
	float:left;
	border:none;
	padding-left:10px;
	padding-top:10px;
}

.celuLogo {
	float:left;
	border:none;
	padding-left:10px;
	padding-top:10px;
}

.webinarGraphic {
	float:left;
	border:none;
	padding-left:0px;
	padding-top:10px;
}

.wageHourCover {
	float:left;
	border:none;
	padding-left:10px;
	padding-top:10px;
}

.leaveLawsCover {
	float:left;
	border:none;
	padding-left:10px;
	padding-top:10px;
}

.sBookCover {
	float:left;
	border:none;
	padding-left:10px;
	padding-top:10px;
}

.smallBucketBodyCopy {
	margin-left:160px;
	margin-right:10px;
	padding-bottom:10px;
}	

.smallBucketButtons {
	/*float:right;
	width:220;*/
	border:none;
	/*position:absolute;
	bottom:20px;
	right:40px;*/
}

.smallBucketButtons p {
	line-height:0;
	padding-top:0;
}

.smallBucketBtnMoreInfo {
	padding-right:6px;
}

.webinarMoreInfoBtn {
	position:relative;
	left:164px;
}

.smallBucket_tl {
background: url(graphics/lightBlueCornerTopLeft_11x11.gif) no-repeat 0 0;
}

.smallBucket_tr {
background: url(graphics/lightBlueCornerTopRight_11x11.gif) no-repeat 434px 0;
}

.smallBucket_bl {
background: url(graphics/LightBlueCornerBtmLeft_11x11.gif) no-repeat 0 100%;
height:250px; /* sets height of body bucket */
}

/* =================== SITE MAP =================== */
#siteMap {
	float:left;
	width: 950px;
	border-top-style:solid;
	border-top-width: 8px;
	border-top-color:#c8c8c8;
}

#siteMap table, p, li {
	font-size: 95%;
	line-height: .85em;
	padding: 0 0 13px 8px;
}

#siteMap a {
	color: #003366;
	font-weight: bold;
}

#siteMap a:visited {
	color:#336699;
	font-weight: bold;
}

#siteMap a:hover {
	color:#336699;
	font-weight: bold;
}

#siteMap a:active {
	color:#336699;
	font-weight: bold;
}

#siteMap li {
	display: inline;
	list-style: none;
}

.pipe {
	color:#999;
	margin-left: 5px;
	margin-right: 5px;
}

#siteMap h2 { 
	font-size: 120%;
	font-family: Optima, "Times New Roman", Times, Georgia, serif;
	/*text-transform:uppercase;*/
	border-bottom-style:solid;
	border-bottom-width: 4px;
	border-bottom-color:#c8c8c8;
	padding-bottom: 8px;
	padding-left: 10px;
	margin-bottom: 14px;
	padding-top: 30px;
}

.siteMapRightMargin {
	margin-right:10px;
}

/* =================== FOOTER =================== */

#footer {
float: left; /* Contains floated list items */
width: 950px;
height:100%;
padding: 0;
background: #003366;
}

#footer p {
	padding-top:10px;
	padding-bottom:10px;
	text-align:center;
	font-size: 96%;
	font-weight:lighter;
	line-height:1.5em;
	color:#fff;
}