body {
/*	default to SunLife master CSS
	font-size: 0.76em;
	background-color: #FFF;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color: #000;
*/	
	width: 700px;
}

* {margin:0; padding:0;} 

* html .contentTitle3 { height: 0.01%; }  /* to fix for the IE peekaboo CSS bug */
* html .singleColumnFormTitle { height: 0.01%; }  /* to fix for the IE peekaboo CSS bug */

ul li {
	font-size: 1em;
	margin: 0 0 3px 25px;
	list-style-image : url(../images/helpBullet.gif);
}

.topRightButtons {
	text-align: right;
	font-size: .8em;
	vertical-align: top;
	height: 19px;
}

.printButton {
	float: right;
	padding: 0 5px 0 0;
}

.topRightButtons_first, .topRightButtons_middle, .topRightButtons_close {
	color: #004080;
	text-decoration: none;
	padding: 4px 10px 5px 10px;
	height: 19px;
}

.topRightButtons_close {
	font-weight: bold;
	background: url(../images/closeButtonBgnd.gif) no-repeat;
	margin-right: 0px;
	height: 19px;
}

./*		Styles for the top menu system																											*/
/*		LIST-BASED MENUS WITHOUT IDs OR CLASSES ON THE LIST ELEMENTS					 */
/*		tested in NN7, Opera, Firefox, IE6, IE5.5, IE5, on Windows and Safari and IE5 on Mac		*/
/*		this continues the horizontal menu demo																						   */

/* the horizontal menu starts here */
div#listmenu {
	width:100%; 	/* makes the div full width */
	float:left; /*makes the div enclose the list */
	line-height: 100%;
	background-color:#6080C0; /* colors the div */
	}
div#listmenu ul {margin:0 0 0 0px;/* indents ul from edge of container */
	}
div#listmenu li {
	float:left;
	/* causes the list to align horizontally instead of stack */
	position:relative;
	/* positioning context for the absolutely positioned drop-down */
	list-style-type:none;
	/* removes the bullet off each list item */
	background-color:#6080C0;
	/*sets the background of the menu items */
	background-repeat : no-repeat;
	font-size: 0.8em;
	border-top:1px solid #C0C0C0;
	border-left:1px solid #C0C0C0;
	border-bottom:1px solid #606080;
	border-right:1px solid #004080;
}

div#listmenu li#activePage {
	background-color: #9BA9C5;
}

div#listmenu li#activePage:hover { 
	background-color:#AFBFDF; /*sets the background of the menu items */
}

div#listmenu ul li:first-child {
	border-left: 1px solid #C0C0C0; /*the first vertical line on the menu */
	}
div#listmenu li:hover { 
	background-color:#AFBFDF; /*sets the background of the menu items */
/* yellow mouseover		background-color:#FFFFCC; /*sets the background of the menu items */
	}
div#listmenu a {
	display:block; /*makes list items in drop down highlight and wrapped lines indent correctly */
	padding:1px 12px 2px 12px; /*creates space each side of menu item's text */
	text-decoration:none;	 /* removes the underlining of the link */
	color: #FFF;	/* sets the type color */
	font-weight: bold;
	}
div#listmenu a:hover {
	color:#FFF;
	}
/* the horizontal menu ends here */

/* the drop-down starts here */
div#listmenu ul li ul {
	margin:0; /* prevents the TEMP value inheriting from the horiz menu - OK to remove if you remove TEMP above */
	position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */
	width:10em; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/
	left:-1px; /*aligns the drop exactly under the menu */
	line-height: 150%;
	}
div#listmenu ul li ul li {
	font-size:10px;
	width:100%;
	/* makes the list items fill the list container (ul) */
	border-left:1px solid #8E8D8D;
	/* three sides of each drop-down item */
	border-bottom:1px solid #8E8D8D;
	border-right:1px solid #8E8D8D;
	padding:0 0px 1px;
	margin-right: 5px;
	background-image: none;
}
div#listmenu ul li ul li:first-child {
	border-top:1px solid #8E8D8D; /*the top edge of the dropdown */
	}
/* make the drop-down display as the menu is rolled over */
div#listmenu ul li ul {display:none;} /* conceals the drop-down when menu not hovered */
div#listmenu ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */

/* pop-out starts here */
body div#listmenu ul li ul li ul  {
	visibility:hidden; /* same effect as display:none in this situation */
	top:-1px;
	left:10em;
	}
div#listmenu ul li ul li:hover ul {visibility:visible;} /* same effect as display:block in this situation */

/* another level of pop-outs */
div#listmenu ul li ul li:hover ul li ul {display:none;} /* conceals the drop-down when menu not hovered */
div#listmenu ul li ul li ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */

/* THE HACK ZONE - */

/* hack for IE (all flavors) so the menu has a vertical line on the left */
* html div#listmenu ul {
	float:left; /* makes the ul wrap the li's */
	margin-left: 0px; /* IE doubles the given value above - why? */
	}
/* add a top line to drops and pops in IE browsers - can't read :first-child */
* html  div#listmenu ul li ul {
	border-top:1px solid #069;
	border-left:0px; /* stops the drop inheriting the ul border */
	}
/* the Tantek hack to feed IE Win 5.5-5.0 a lower value to get the pop-out to touch the drop-down */
* html  div#listmenu ul li ul li ul { 
  left:9.85em; 
  voice-family: "\"}\""; 
  voice-family:inherit;
  left:10em;
  }
/* and the "be nice to Opera" rule */
html>body div#listmenu ul li ul li ul {
  top:-1px;
  left:10em;
  }

/* an Opera-only hack to fix a redraw problem by invisibly extending the ul */
/* the first-level drop stays open for 100px below the bottom but at least it works */
/* this can be reduced to as little as 22px if you don't have pop-outs */
/* the pop-out menu stays open for 22px below the bottom but at least it works */
	@media all and (min-width: 0px){
   body div#listmenu ul li ul {padding-bottom:70px;}
   body div#listmenu ul li ul li ul {padding-bottom:22px;}
   body div#listmenu ul li ul li ul li ul li:hover {visibility:visible;} /* same effect as display:block in this situation */

   }
/*end Opera hack */
/* end of hack zone */
/* END OF LIST-BASED MENU */

/* This is a piece of code to be placed inline manually where there's a sub-item under an item.  I am using a special character &raquo to generate an arrow symbol*/

.arrow {font-weight: bold; color: black; float: right; display: inline;}

/*******************************************************************************************************/
/*		this is the style for the top and bottom of the menu bar																 */
/*******************************************************************************************************/

.menu {
	width: 100%;
	height: 17px;
	display: block;
	background-color: #6080C0;
	border-top:2px solid #6080C0;
	border-bottom:2px solid #6080C0;
}

/*******************************************************************************************************/
/*		the following styles build the two-column page layout					  												*/
/*******************************************************************************************************/

.sidebar {
	background-color: #EBEFF3;
	width: 200px;
}

#footer {
  margin-top: 20px;
/*  default to SunLife master CSS
  background: #FFF;
  font-size: 0.8em;
*/
  text-align: center;
  clear: both;
}

/*  default to SunLife master CSS
#footer a,  #footer a:visited {
  color: 004080;
}
*/

/*******************************************************************************************************/
/*		the following styles apply to the help sidebar styling					   												    */
/*******************************************************************************************************/

.helpFrame {
	width: 183px;
	VISIBILITY: hidden;
	position: absolute;
}

.helpFrame ul li {
	color: #163668;
}

/*******************************************************************************************************/
/*		the following styles apply to the progress bar styling   				   												    */
/*******************************************************************************************************/
.progressBarLabel {
	height: 30px;
	float: left;
	margin: 0 10px 0 4px;
	background-color: #D7DFEF;
	padding: 1px 5px 1px 5px;
}

.progressBarSteps  {
	color: #888888;
	float: left;
}

.progressBarSteps a {
	color: #003366;
	text-decoration: none;
}

.progressBar {
	background: url(../images/progressBar_bgnd.gif) repeat-x;
	height: 15px;
	float: left;
	margin-top: 5px;
}

.progressBarLeft {
	background: url(../images/progressBar_left.gif) no-repeat left;
	height: 15px;
	width: 4px;
	float: left;
	margin-top: 5px;
}

.progressBarRight {
	background: url(../images/progressBar_right.gif) no-repeat right;
	height: 15px;
	width: 4px;
	float: left;
	margin-top: 5px;
}

.progressBarBlock {
	background: url(../images/progressBar_block.gif) repeat-x;
	height: 9px;
	margin: 3px 0 3px 0;
}



/*******************************************************************************************************/
/*		the following styles build the content area containers 					   												 */
/*******************************************************************************************************/

.fieldText {
	position: relative;
	color: #163668;
	display: inline;
}

.ContentTitle { /*		appended to master CSS class		 */
	display: block; 
/*
	color: #003366;
	font-size: 1.2em;
	font-weight: bold;
*/
	border-bottom: 1px solid #E0C000;
	margin: 4px 0px 13px 7px;
	padding: 3px 0px 6px 0px;
}

.ContentTitle3 {
	display: block;
	line-height: 150%;
	padding: 1px;
}

.ContentText { /*		appended to master CSS class		 */
	margin: 0 0 20px 7px;
}

.contentTextSubHeading {
	FONT-WEIGHT: bold;
	FONT-SIZE: 1.1em;
	BACKGROUND: #6080C0;
	PADDING: 3px;
	COLOR: #FFF;
	position: relative;
	left: -10px;
	margin-right: -20px;
}
.contentFrame, .helpFrame {
	margin: 0px 10px 10px 7px;
}

.contentFrameTop {
	background : #6080C0;
	border-top: 1px solid #8080C0;
	border-left: 1px solid #8080C0;  /* for square edges - if rounded edges desired, remove this line  */
	border-right: 1px solid #8080C0;  /* for square edges - if rounded edges desired, remove this line  */
	color: #FFF;
	font-size: 1.0em;
	font-weight: bold;
	padding: 2px 10px 2px 10px;   /* for rounded edges - left and right padding should revert back to 0px  */
}

/* for square edges - if rounded edges desired, re-activate this code 
  
.contentFrameTopLeft {
	background : url(../images/containerTitle_left.gif) no-repeat;
	width: 10px;
	height: 19px;
	float: left;
	position: relative;
}

.contentFrameTopRight {
	background : url(../images/containerTitle_right.gif) no-repeat;
	width: 10px;
	height: 19px;
	float: right;
	position: relative;
}
 */
 
.contentFrameBody, .helpFrameBody {
	border: 1px solid #8080C0;
	background: #FFFFFF;
	padding: 10px 10px 10px 10px;
	color: #163668;
	font-size: 0.9em;
}

.contentFrameBody p {
	margin: 10px 0 10px 0;
	color: #163668;
	height: 100%;
	line-height: 130%
}

.contentFrameBody ul li {
	color: #163668;
}

.contentFrameSubHeading {
	background: #E5E8DE;
	display: block;
	font-size: 1.2em;
	font-weight: bold;
	margin: 5px 0 5px 0;
}

.contentFrameEmphasis {
	background: #F7F7C1;
	font-weight: bold;
	border: 1px solid #E5E8DE;
}


/*******************************************************************************************************/
/*		the following styles apply to body area												   												 */
/*******************************************************************************************************/

.singleColumnForm  {
	padding: 0 0 5px 0;
	color: #163668;
	vertical-align: middle;
}

.singleColumnForm label {
	text-align: left;
	color: #163668;
	font-weight: bold;
	width: 210px;
	float: left;
	line-height: 150%;
	padding-top: 2px;
	vertical-align: top;
}

.singleColumnForm .fieldTitle  {
	color: #003366;
	text-align: left;
	font-weight: normal;
	float: left;
	line-height: 100%;
	vertical-align: middle;
	padding-left: 10px;
}

.singleColumnForm .fieldAttribute  {
	float: left;
	line-height: 150%;
	vertical-align: top;
	padding-top: 2px;
}

.singleColumnFormTitle {
	position: relative;
	color: #163668;
	line-height: 180%;
	margin: 15px 0 10px 0;
	font-weight: bold;
	background: #E9F2FB;
	left: -5px;
	padding-left: 5px;
}

.singleColumnForm .text  {
	color: #163668;
	text-align: left;
	float: left;
	line-height: 100%;
	padding: 5px 0 5px 5px;
}

.singleColumnResults  {
	padding: 0 0 5px 0;
	font-weight: normal;
}

.singleColumnResults .indent,  .singleColumnResults .indentWide, .singleColumnResults .indentNarrow  {
	color: #163668;
	text-align: left;
	font-weight: normal;
	width: 250px;
	float: left;
	margin: 1px 0 1px 10px;
	padding: 5px 0 5px 0;
	line-height: 100%;
}

.singleColumnResults .indentWide {
	width: 300px;
}

.singleColumnResults .indentNarrow {
	width: 150px;
}

.singleColumnResults .dollarSign  {
	color: #163668;
	text-align: left;
	width: 10px;
	float: left;
	line-height: 100%;
	padding: 5px 0 5px 0;
}

.singleColumnResults .result  {
	color: #163668;
	background-color: #EFF2F9;
	width: 120px; /*100px;*/
	text-align: left /*right;*/
	padding: 5px 5px 5px 0;
	padding-left: 15px;
	margin: 1px;
	float: left;
}

.singleColumnResults .text  {
	color: #163668;
	text-align: left;
	float: left;
	line-height: 100%;
	padding: 5px 0 5px 0;
}

.singleColumnResults #highlight  {
	border: 1px solid #6080C0;
}

.tableFormatting td {
	padding: 3px;
}

.required{
	COLOR: red;
}

.errorMessage{
	COLOR: red;
	text-align: center;
	font-size: 1.2em;
	font-weight: bold;
}

/*******************************************************************************************************/
/*		the following styles apply to form element styling							   												 */
/*******************************************************************************************************/
input, textarea, .select {
	font-size: 1.0em;
	border: 1px solid #ABB4CE;
	margin: 2px 0 1px 3px;
	padding: 1px 0 1px 2px;
}

.radio {
	border: 0px;
	vertical-align: middle;
	top: -2px;
}

.disabledField {
	background: #EEF0F5;
	border: 1px solid #ABB4CE;
}

.buttonBgnd, .buttonBgndWide {
	font-size: 0.8em;
	background: url(../images/buttonBgnd.gif) no-repeat;
	font-weight: bold;
	color: #FFF;
	padding: 1px 0 3px 0;
	height: 22px;
	width: 82px;
	border: 0px;
	text-align: center;
}

.buttonBgndWide {
	background: url(../images/buttonBgnd_wide.gif) no-repeat;
	width: 120px;
}

.submitButtons {
	text-align: center;
	padding: 15px 25px 5px 0;
}


/* PRINT CSS - The Print Stylesheet - BELOW HERE */
@media print { 
.nav, .sidebar, .helpFrame, .topRightButtons, .menu, .buttonBgndWide, .submitButtons, .printButton {display:none;}
body { width: 680px; }
.singleColumnResults { width: 420px; }
.contentFrameBody { border: 0px; }
.contentFrameTop {  border: 0px; border-bottom: 1px solid #8080C0; }
}