/*******************************************************************************
1_slfglobal.css
*******************************************************************************/
/*******************************************************************************
1_slfglobal.css
*******************************************************************************/
/*******************************************************************************
1_slfglobal.css
*******************************************************************************/

/*******************************************************************************
global.css
*******************************************************************************/
/**
 * Master Style Sheet
 *
 * Version 1.19
 *
 * Last Updated: May 9, 2008
 *
 */

html {
	font-size: 100.01%;
}

body {
	background-color: #fff;
	color: #000;
	font: normal 12px/15px Arial, Helvetica, sans-serif;
	min-width: 979px;
}

#wrapper {
	left: 50%;
	margin-left: -485px;
	position: relative;
	width: 969px;
}

#header {
	background: #eaab00 url('/static/slfglobal/images/banner_yellow_sunburst.jpg') no-repeat 19px 0;
	height: 116px;
	margin-bottom: 1px;
	overflow: visible;
	position: relative;
	width: 100%;
	z-index: 600;
}



/* ----------------------------------------------------------------------------
	GLOBAL CONTENT RULES
---------------------------------------------------------------------------- */

#content {
	background-color: #fff;
	margin-bottom: 45px;
	position: relative;
	width: 100%;
}
	body a:link,
	body a:visited,
	body a:hover,
	body a:active {
		color: #5482ab;
		text-decoration: underline;
	}
	body a:hover,
	body a:active {
		text-decoration: none;
	}

	body acronym { }

	body address {
		font-style: normal;
		margin-bottom: 14px;
	}

	body big {
		font-size: 13px;
	}

	body blockquote { }

	body dl {
		margin-bottom: 14px;
	}
		body dl dt {

		}
		body dl dd {

		}

	body em {
		font-style: italic;
	}

	body form {	}
		body button { }
		body button.hdr-graphic {
			border: 0;
			cursor: pointer;
		}

		body form fieldset { }
			body form fieldset legend { }

		body input { }
		body input.text {
			background-color: #fff;
			border: 1px solid #727272;
			color: #727272;
			font: normal 11px/16px Arial, Helvetica, sans-serif;
			height: 16px;
			padding: 2px 0 0 4px;
		}
			/*
			SLF-type form control styling.
			*/
			body div.inputRow {
				margin-bottom: 8px;
			}
				body div.inputRow div.inputCol {
					display: inline;
					float: left;
				}
					body div.inputRow div.inputCol div.inputLabel {
						color: #5482ab;
						display: inline;
						margin-right: 10px;
						padding-top: 0.25em;
						white-space: no-wrap;
						width: 100px;
						float:left;
					}

		body form label { }

		body select.text {
			font: normal 11px/18px Arial, Helvetica, sans-serif;
			min-width: 1.5em;
			vertical-align: top;
		}
			body form select option { }

		body form textarea {
			background-color: #fff;
			border: 1px solid #727272;
			color: #727272;
			font: normal 11px/16px Arial, Helvetica, sans-serif;
			padding: 2px 4px;
			width: auto;
		}

	body h1 {
		color: #5482ab;
		font-size: 30px;
		font-weight: bold;
		height: auto !important;
		height: 42px;
		line-height: 32px;
		margin-bottom: 6px;
		min-height: 42px;
	}

	body h2 {
		color: #003946;
		font-size: 16px;
		font-weight: bold;
		line-height: 16px;
		margin-bottom: 14px;
	}

	body h3 {
		color: #5482ab;
		font-size: 14px;
		font-weight: bold;
		line-height: 16px;
		margin-bottom: 7px;
	}

	body h4 { }

	body h5 { }

	body h6 { }

	body hr {
		background: transparent url('/static/slfglobal/images/bread_dot_grad_bg.gif') repeat-x left top;
		border: 0;
		height: 4px;
		margin-bottom: 10px;
	}

	/*body img { } commented out by JB 10.02.09*/

	body ol {
		list-style-type: decimal;
		margin: 0 0 14px 28px;
	}
		body ol ol,
		body ol ul { }

		body ol li {
			margin-bottom: 6px;
		}

	body p {
		margin-bottom: 14px;
	}

	body small {
		font-size: 11px;
	}

	body strong {
		font-weight: bold;
	}

	body sub {
		height: 0;
		position: relative;
		top: .5ex;
	}

	body sup {
		bottom: 1ex;
		height: 0;
		position: relative;
	}

	/*
	Showing tables "properly" requires the
	parent element (child of layout column)
	to have padding and an auto width.
	*/
	body table.original {
		empty-cells: show;
		table-layout: auto;
		
	}
		body table thead {
			display: table-header-group;
		}

		body table.original tbody { 
			
		}

		body table tfoot {
			display: table-footer-group;
		}

		body table.data {
			margin-bottom: 14px;
		}
			body table.data tr {
				vertical-align: top;
			}
				body table.data tr th {
					background-color: #f8f8f8;
					font-weight: bold;
					padding: 8px;
				}
				body table.data tr td {
					background-color: #f8f8f8;
					border-top: 1px solid #e9ab00;
					padding: 8px;
				}

				body table.data tr.shade td {
					background-color: #FDF6E5;
				}

	body ul {
		list-style-type: none;
		margin: 0 0 14px 28px;
	}
		body ul ul,
		body ul ol { }

		body ul li {
			background: transparent url('/static/slfglobal/images/box_yellow.gif') no-repeat 0 0.50em;
			margin-bottom: 6px;
			padding-left: 16px;
			zoom: 1;
		}



/* ----------------------------------------------------------------------------
	FOOTER CONTENT RULES
---------------------------------------------------------------------------- */

#footer {
	clear: both;
	font-size: 10px;
	margin-bottom: 14px;
	position: relative;
	text-align: center;
	width: 100%;
}
	#footer a.legal:link,
	#footer a.legal:visited,
	#footer a.legal:hover,
	#footer a.legal:active {
		margin: 0 8px;
	}

/* ----------------------------------------------------------------------------
	PAFORM TABLE RULES
---------------------------------------------------------------------------- */

table.paform   {      
			empty-cells: show;
			table-layout: auto;
			width: 540px;
			border-right: 1px solid #FF9900;
			border-top: 1px solid #000000;
			border-bottom: 1px solid #FF9900;
			border-left: 1px solid #000000;
			background-color: #FFFFFF;
			cellpadding: 2;
			cellspacing: 2;
						
		}
		

		table.paform tr { 
				}

		table.paform th.small {
				width: 30%;
				background-color: orange;
				vertical-align: top;
				border-right: 1px solid #000000;
				border-top: 1px solid #FF9900;
				border-bottom: 1px solid #000000;
				border-left: 1px solid #FF9900;
				}

		table.paform th.large {
				width: 40%;
				background-color: orange;
				vertical-align: top;
				border-right: 1px solid #000000;
				border-top: 1px solid #FF9900;
				border-bottom: 1px solid #000000;
				border-left: 1px solid #FF9900;
				}

		table.paform td {
				vertical-align: top;
				border-right: 1px solid #000000;
				border-top: 1px solid #FF9900;
				border-bottom: 1px solid #000000;
				border-left: 1px solid #FF9900;
				}
/* ----------------------------------------------------------------------------
	ACCORDION STYLES
---------------------------------------------------------------------------- */

div.accordion {
	background: #ffffff url(/static/slfglobal/_images/layout/dotted_line_bg_horizontal.gif) repeat-x bottom left;	
	display: block;
	padding-bottom: 3px;
}

div.accordion div {
	display: none;	
	padding: 0px 20px;
}

div.accordion h3.head {
	cursor: pointer;
	background: url(/static/slfglobal/_images/layout/dotted_line_bg_horizontal.gif) repeat-x top left;
	margin: 0px;
	padding: 11px 0px 3px 4px;
	height: 20px;
}

div.accordion h3.first {
	background: none;
	padding-top: 0px;
}

#content-body div.accordion h3 a {
		padding-left: 9px;
		text-decoration: none;	
}

div.flash_tools {
	background: url(/static/canada/DB Solutions/Images/ftr_tools_border.gif) repeat-x top left;
	width: 571px; 
	height: 388px;
	margin-bottom: 10px;
}

div.flash_excess {
	background: url(/static/canada/DB Solutions/Images/ftr_excess_border.gif) repeat-x top left;
	width: 638px; 
	height: 388px;
	margin-bottom: 10px;
}

}

div.feature #banner h2 {
	font-size: 16px; border:1px solid red;
}

div.feature #banner h3 {
	font-size: 14px;
}


/*******************************************************************************
2_reset.css
*******************************************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table.reset, caption,tbody.reset, tfoot.reset, thead.reset, tr.reset, th.reset, td.reset {
	background: transparent;
	border: 0;
	font-size: 100%;
	margin: 0;
	outline: 0;
	padding: 0;		
	vertical-align: baseline;
}

body {
	line-height: 1;
}

:focus {
	outline: none;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table.reset{
	border-collapse: collapse;
	border-spacing: 0;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	content: '';
}
/*******************************************************************************
3_navigation.css
*******************************************************************************/
/**
 * Navigation
 *
 * The follow styles are applied to all navigational menus.
 *
 */

/* ----------------------------------------------------------------------------
	TOOLBAR NAVIGATION
---------------------------------------------------------------------------- */

/* ================================================================
The original version of the dropdown menu stylesheet and the associated (x)html
is Copyright (c) 2009 Stu Nicholls - www.cssplay.co.uk. All rights reserved.
=================================================================== */

#toolbar {
	font-size: 11px;
	line-height: 14px;
	list-style-type: none;
	margin: 0;
	position: absolute;
	right: 16px;
	text-align: right;
	top: 57px;
}
	#toolbar li {
		background-image: none;
		display: inline;
		margin: 0;
		padding: 0;
	}
		/* Normal State */
		#toolbar li a:link,
		#toolbar li a:visited,
		#toolbar li a:hover,
		#toolbar li a:active {
			color: #003946;
			font-weight: bold;
			margin: 0 8px 0 6px;
			text-decoration: none;
		}
		/* Rollover State */
		#toolbar li a:hover,
		#toolbar li a:active {
			text-decoration: underline;
		}
		/* Active / Lit State */
		#toolbar li a.lit:link,
		#toolbar li a.lit:visited,
		#toolbar li a.lit:hover,
		#toolbar li a.lit:active {
			color: #fff;
		}



/* ----------------------------------------------------------------------------
	PRIMARY NAVIGATION

	This is the navigation that runs along the top of each page.
---------------------------------------------------------------------------- */

#primary {
	background: #003946 url(/static/global/images/navigation/primary/grad_blue_bg_normal.gif) repeat-x left bottom;
	font-size: 12px;
	height: auto !important;
	height: 35px;
	line-height: 14px;
	list-style-type: none;
	margin: 0 0 4px 0;
	min-height: 35px;
	position: relative;
	width: 969px;
	z-index: 500;
}
	#primary li {
		background-image: none;
		display: inline;
		float: left;
		margin: 0;
		min-width: 40px;
		padding: 0;
		position: relative;
		width: auto !important;
		width: 40px;
	}
		/* Normal State */
		#primary li a:link,
		#primary li a:visited,
		#primary li a:hover,
		#primary li a:active {
			background: transparent url(/static/global/images/navigation/primary/item_divder_vertical_bg.gif) no-repeat right bottom;
			color: #fff;
			display: block;
			font-weight: bold;
			height: auto !important;
			height: 17px;
			margin-bottom: 2px;
			min-height: 17px;
			padding: 9px 13px 7px 13px;
			text-decoration: none;
			white-space: nowrap;
		}
		/* Rollover and Active State */
		#primary li a:hover,
		#primary li a:active {
			background: transparent url(/static/global/images/navigation/primary/grad_blue_bg_active.gif) no-repeat right top;
		}
		#primary li a.lit {
			background-image: url(/static/global/images/navigation/primary/grad_blue_bg_active.gif);
			background-position: right top;
			display: inline;
			float: left;
		}
             /* keep the Rollover and Active State when moving to the dropdown list */
             #primary li:hover > a,
             #primary li a:active > a {
             background: transparent url(/static/global/images/navigation/primary/grad_blue_bg_active.gif) no-repeat right top;
               }

		/* Last navigation item */
		#primary li.last a:link,
		#primary li.last a:visited,
		#primary li.last a:hover,
		#primary li.last a:active {
			background-image: none;
		}
		/* Rollover and Active State for last navigation item */
		#primary li.last a.lit:link,
		#primary li.last a.lit:visited,
		#primary li.last a:hover,
		#primary li.last a:active {
			background-image: url(/static/global/images/navigation/primary/grad_blue_bg_last_active.gif);
		}



/* ----------------------------------------------------------------------------
	BREADCRUMB
---------------------------------------------------------------------------- */

#breadcrumb {
	background: transparent url(/static/global/images/layout/bread_dot_grad_bg.gif) repeat-x left bottom;
	font-size: 11px;
	line-height: 14px;
	padding: 9px 0 11px 9px;
	position: relative;
	width: 960px;
}
	#breadcrumb ul {
		list-style-type: none;
		margin: 0 130px 0 0;
	}
		#breadcrumb ul li {
			background-image: none;
			display: inline;
			float: left;
			margin: 0 0 0 10px;
			padding: 0;
		}
			/* Normal State */
			#breadcrumb ul li a:link,
			#breadcrumb ul li a:visited,
			#breadcrumb ul li a:hover,
			#breadcrumb ul li a:active {
				margin-right: 9px;
				line-height: 16px;
				white-space: nowrap;
			}
			/* Active State */
			#breadcrumb ul li a.lit:link,
			#breadcrumb ul li a.lit:visited,
			#breadcrumb ul li a.lit:hover,
			#breadcrumb ul li a.lit:active {
				color: #5482ab;
				cursor: default;
				font-weight: bold;
				text-decoration: none;
			}



/* ----------------------------------------------------------------------------
	TEXT RESIZE / PRINT PAGE ICON
---------------------------------------------------------------------------- */

#breadcrumb #resize {
	list-style-type: none;
	margin: 0;
	position: absolute;
	right: 16px;
	top: 6px;
	width: 50%;
}
	/*
	By default, we will not show these buttons unless JavaScript is enabled.
	The script will manually set the display parameter to "block".
	*/
	#breadcrumb #resize li {
		display: none;
		float: right;
		margin: 0 5px 0 0;
	}
		#breadcrumb #resize li a:link,
		#breadcrumb #resize li a:visited,
		#breadcrumb #resize li a:hover,
		#breadcrumb #resize li a:active {
			margin-right: 0;
			text-decoration: none;
		}

		#breadcrumb #resize li#text-large a {
			background-image: url(/static/global/images/icons/text_large.gif);
			height: 18px;
			width: 17px;
		}
		#breadcrumb #resize li#text-medium a {
			background-image: url(/static/global/images/icons/text_medium.gif);
			height: 18px;
			width: 17px;
		}
		#breadcrumb #resize li#text-small a {
			background-image: url(/static/global/images/icons/text_small.gif);
			height: 18px;
			width: 17px;
		}
		#breadcrumb #resize li#print-page a {
			background-image: url(/static/global/images/icons/printer.gif);
			height: 21px;
			width: 22px;
		}



/* ----------------------------------------------------------------------------
	SECONDARY NAVIGATION

	Left-hand side navigation, visible on all second-level pages.
---------------------------------------------------------------------------- */

/*
First level styles.
*/
#secondary {
	font-size: 12px;
	line-height: 13px;
	list-style-type: none;
	margin: 0 0 20px 0;
	width: 100%;
}
	#secondary li {
		background: transparent url(/static/global/images/navigation/secondary/item_div_hoiz_lvl2_bg.gif) repeat-x left bottom;
		display: inline;
		float: left;
		margin: 0;
		padding: 0;
		width: 100%;
	}
		/* Normal State */
		#secondary li a:link,
		#secondary li a:visited,
		#secondary li a:hover,
		#secondary li a:active {
			color: #003946;
			display: block;
			font-weight: bold;
			padding: 4px 0 11px 20px;
			text-decoration: none;
			zoom: 1;
		}
		/* Rollover / Active State */
		#secondary li a.lit:link,
		#secondary li a.lit:visited,
		#secondary li a:hover,
		#secondary li a:active {
			color: #5482ab;
		}
		/* Active State */
		#secondary li a.lit:link,
		#secondary li a.lit:visited {
			/*
			background: transparent url(/static/global/images/navigation/secondary/item_selected_lvl2_grad_bg.gif) no-repeat left center;
			padding-right: 8px;
			*/
		}
		/* Open State */
		#secondary li a.open:link,
		#secondary li a.open:visited {
			background: transparent url(/static/global/images/navigation/secondary/item_selected_lvl1_grad_bg.gif) no-repeat left center;
			padding-right: 13px;
		}


/*
Second level styles.
*/
#secondary ul {
	font-size: 11px;
	margin: -6px 0 10px 16px;
	position: relative;
}
	#secondary ul li {
		background: #fff url(/static/global/images/navigation/secondary/item_div_hoiz_lvl3_bg.gif) no-repeat left top;
		padding-top: 1px;
	}
		/* Normal State */
		#secondary ul li a:link,
		#secondary ul li a:visited,
		#secondary ul li a:hover,
		#secondary ul li a:active {
			color: #5482ab;
			font-weight: normal;
			padding: 4px 10px 4px 4px;
		}
		/* Rollover / Active State */
		#secondary ul li a.lit:link,
		#secondary ul li a.lit:visited,
		#secondary ul li a:hover,
		#secondary ul li a:active {
			background: transparent url(/static/global/images/navigation/secondary/item_selected_grad_bg.gif) no-repeat left center;
		}
		/* Active State */
		#secondary ul li a.lit:link,
		#secondary ul li a.lit:visited {
			font-weight: bold;
		}



/* ----------------------------------------------------------------------------
	TERTIARY NAVIGATION

	"Profile" navigation that exists within the content area at the top. These
	links are shown via JavaScript.
---------------------------------------------------------------------------- */

#tertiary {
	display: none;
	font-size: 11px;
	line-height: 14px;
	list-style-type: none;
	margin: 0 0 14px -7px;
	position: relative;
}
	#tertiary li {
		background: transparent url(/static/global/images/navigation/tertiary/item_bg_normal_right.gif) no-repeat right top;
		display: inline;
		float: left;
		min-width: 30px;
		padding: 0 8px 0 0;
		width: auto !important;
		width: 30px;
		font-weight: bold;
	}
		#tertiary li a:link,
		#tertiary li a:visited,
		#tertiary li a:hover,
		#tertiary li a:active {
			background: transparent url(/static/global/images/navigation/tertiary/item_bg_normal_left.gif) no-repeat left top;
			color: #003556;
			display: block;
			height: auto !important;
			height: 24px;
			min-height: 24px;
			padding: 6px 16px 0px 26px;
			text-decoration: none;
			white-space: nowrap;
		}
		/* Rollover / Active State */
		#tertiary li a.lit:link,
		#tertiary li a.lit:visited,
		#tertiary li a:hover,
		#tertiary li a:active {
			background-image: url(/static/global/images/navigation/tertiary/item_bg_active_left.gif);
		}
		/* Active State */
		#tertiary li a.lit:link,
		#tertiary li a.lit:visited {
			font-weight: bold;
		}



/* ----------------------------------------------------------------------------
	DROP-DOWN NAVIGATION

	This is the navigation that pops open when hovering over any primary
	navigation item that has children.
---------------------------------------------------------------------------- */

#primary li ul {
	background-color: #fff;
	margin-left: 0;
	border: 1px solid #5482ab;
	left: -9000px;
	padding: 5px 11px 0 12px;
	position: absolute;
	top: 32px;
	width: 180px;
}

#primary li:hover ul,
#primary li a:hover ul {
	left: 0;
	zoom: 1;
}
	#primary li ul li {
		background: transparent url(/static/global/images/navigation/dropdown/item_normal_bg.gif) no-repeat left bottom;
		clear: left;
		margin: 0;
		padding: 0;
		width: 180px;
	}
	#primary li ul li.last {
		background-image: none;
	}
		#primary li ul li a:link,
		#primary li ul li a:visited,
		#primary li ul li a:hover,
		#primary li ul li a:active {
			background-image: none;
			color: #003946;
			font-weight: normal;
			height: auto !important;
			margin: -2px 0 5px 0;
			min-height: 0;
			padding: 4px 20px 8px 0;
			white-space: normal;
			width: 160px;
		}
		#primary li ul li a:hover,
		#primary li ul li a:active {
			background: transparent url(/static/global/images/navigation/dropdown/item_active_bg.gif) no-repeat left center !important;
		}
/*******************************************************************************
4_layout.css
*******************************************************************************/
/**
 * Layout
 *
 * Customized page layout styling.
 *
 */

/* ----------------------------------------------------------------------------
	WIDE / 1 COLUMN LAYOUT

	Please refer to the documentation "SunlifeTemplateLayout.pdf" in the
	root folder of this package for more information.
---------------------------------------------------------------------------- */

/*
This layout gives you the full width of the body with the ability to add in
any number of rows consisting of three columns each.
*/
div.one-column-layout #content-body {
	float: none;
	margin: 0;
	width: 100%;
}
	div.one-column-layout #content-body div.col-left {
		display: inline;
		float: left;
		width: 313px;
	}

	div.one-column-layout #content-body div.col-middle {
		display: inline;
		float: left;
		margin-left: 15px;
		width: 313px;
	}

	div.one-column-layout #content-body div.col-right {
		display: inline;
		float: left;
		margin-left: 15px;
		width: 313px;
	}

	/*
	Ensure that the unsupported columms for this template layout are removed.
	*/
	div.one-column-layout #content-navigation,
	div.one-column-layout #content-sidebar {
		display: none;
	}

	/*
	For normal content that exists within this layout type, ensure that it is
	all placed within the <div> below.
	*/
	div.one-column-layout #content-body div.boxlayout {
		margin: 15px 19px 0 19px;
		width: auto;
	}



/* ----------------------------------------------------------------------------
	3 COLUMN LAYOUT

	Please refer to the documentation "SunlifeTemplateLayout.pdf" in the
	root folder of this package for more information.
---------------------------------------------------------------------------- */

/*
Defines three columns - navigation, content column one and content column two.
Content column one is approximately twice the width (540 pixels of content
column two (263 pixels). Within the first content column there is the option of
defining two more columns - each 263 pixels in width.
*/
div.three-column-layout #content-body {
	display: inline;
	float: left;
	margin: 16px 0 0 151px;
	width: 540px;
	_overflow: hidden;
}
	div.three-column-layout #content-body div.col-left {
		display: inline;
		float: left;
		width: 263px;
	}

	div.three-column-layout #content-body div.col-right {
		display: inline;
		float: left;
		margin-left: 14px;
		width: 263px;
	}

div.three-column-layout #content-sidebar {
	display: inline;
	float: left;
	margin: 7px 0 0 15px;
	overflow: hidden;
	width: 263px;
	_overflow: hidden;
}

div.three-column-layout #content-navigation {
	display: inline;
	float: left;
	margin: 4px 0 0 -969px;
	width: 137px;
	_overflow: hidden;
}



/* ----------------------------------------------------------------------------
	2 COLUMN LAYOUT

	Please refer to the documentation "SunlifeTemplateLayout.pdf" in the
	root folder of this package for more information.
---------------------------------------------------------------------------- */

/*
This layout is identical to the one beloe (second level) with the exception
of an increased gutter space between the navigation and body columns. One other
difference is the introduction of a right-hand floating sidebar. The content
will flow around this item.
*/
div.two-column-layout #content-body {
	display: inline;
	float: left;
	margin: 18px 0 0 151px;
	width: 818px;
}
	div.two-column-layout #content-body #content-sidebar {
		display: inline;
		float: right;
		margin: 0 0 14px 14px;
		width: 263px;
	}

	div.two-column-layout #content-body div.col-left {
		display: inline;
		float: left;
		width: 263px;
	}

	div.two-column-layout #content-body div.col-middle {
		display: inline;
		float: left;
		margin-left: 15px;
		width: 263px;
	}

	div.two-column-layout #content-body div.col-right {
		display: inline;
		float: left;
		margin-left: 14px;
		width: 263px;
	}
	/* Added for US Product and Service Layout */
	div.two-column-layout #content-body div.flashdisplay {
		display: inline;
		float: left;
		width: 541px;
	}

	div.two-column-layout #content-body div.accessaccount {
		display: inline;
		float: right;
		margin-left: 14px;
		width: 263px;
	}
	/* end of product and service */
div.two-column-layout #content-navigation {
	display: inline;
	float: left;
	margin: 4px 0 0 -969px;
	width: 137px;
}



/* ----------------------------------------------------------------------------
	SUN LIFE FINANCIAL LOGOS - PRINT AND SCREEN VERSIONS
---------------------------------------------------------------------------- */

/*
Default logo is displayed on all "screen" media types.
*/
#header h1 {
	height: 57px;
	left: 31px;
	margin: 0;
	min-height: 57px;
	position: absolute;
	top: 29px;
}
	.en #header h1 {
		background-image: url('/static/slfglobal/images/SLF_screen_en.gif');
		width: 137px;
	}
	.fr #header h1 {
		background-image: url('/static/slfglobal/images/SLF_screen_fr.gif');
		width: 145px;
	}

	#header h1 a {
		background-image: none;
		display: block;
		height: 57px;
		text-decoration: none !important;
		width: 157px;
	}

/*
Print version is enabled only on print.
*/
#header .logo {
	display: none;
}



/* ----------------------------------------------------------------------------
	COUNTRY NAME OF THE WEB SITE
---------------------------------------------------------------------------- */

/*
Displays "Worldwide" in the header region.
*/
#current-country {
	display: block;
	height: 23px;
	position: absolute;
	right: 315px;
	top: 17px;
}
	.en #header #current-country {
		background-image: url('/static/slfglobal/images/headers/canada_en.gif');
		width: 75px;
	}
	.fr #header #current-country {
		background-image: url('/static/slfglobal/images/headers/canada_en.gif');
		width: 75px;
	}



/* ----------------------------------------------------------------------------
	CHOOSE YOUR COUNTRY - JAVASCRIPT DROPDOWN CONTENT BOX
---------------------------------------------------------------------------- */

/*
Button the user clicks on to open up the country selector box.
*/
#choose-country {
	height: 30px;
	position: absolute;
	right: 21px;
	top: 14px;
}
	.en #choose-country {
		background-image: url('/static/slfglobal/images/buttons/btn_exploreSLFww_290w_29h_en.gif');
		width: 290px;
	}
	.fr #choose-country {
		background-image: url('/static/slfglobal/images/buttons/btn_exploreSLFww_290w_29h_fr.gif');
		width: 290px;
	}

/*
Content box for the Choose your country "popup" window.
*/
#choose-country-content {
	background: #fff url('/static/slfglobal/images/choose_country_grad_bg.gif') repeat-x left top;
	border: 1px solid #5482ab;
	color: #003946;
	display: none;
	left: 469px;
	line-height: 15px;
	padding: 27px 28px 1px 28px;
	position: absolute;
	top: 42px;
	width: 421px;
	z-index: 550;
}
	/*
	First column of country links.
	*/
	#choose-country-content dl.col1 {
		display: inline;
		float: left;
		width: 200px;
	}

	/*
	Second column of country links.
	*/
	#choose-country-content dl.col2 {
		display: inline;
		float: left;
		margin-left: 21px;
		width: 200px;
	}

		/*
		Country name.
		*/
		#choose-country-content dl dt {
			background: transparent url('/static/slfglobal/images/arrow_yellow.gif') no-repeat 0 .25em;
			color: #5482ab;
			font-size: 14px;
			font-weight: bold;
			margin-bottom: 2px;
			padding-left: 10px;
		}

		/*
		Links to country's Web site.
		*/
		#choose-country-content dl dd {
			margin: 0 0 13px 10px;
		}
			#choose-country-content dl dd a {
				display: block;
			}



/* ----------------------------------------------------------------------------
	SEARCH SITE (HEADER REGION)
---------------------------------------------------------------------------- */

#site-search {
	position: absolute;
	right: 21px;
	top: 82px;
}
	/*
	Search input button.
	*/
	#site-search input.submit {
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		width: 71px;
	}

	/*
	Search field.
	*/
	#site-search input.text {
		display: block;
		font-size: 11px;
		height: 16px;
		line-height: 16px;
		position: absolute;
		right: 79px;
		top: 0;
		width: 150px;
	}



/* ----------------------------------------------------------------------------
	GRAPHICAL BUTTONS
---------------------------------------------------------------------------- */

a.button:link,
a.button:visited,
a.button:hover,
a.button:active {
	display: block;
	margin-bottom: 16px;
	text-decoration: none;
}
	a.button img {
		border: 0;
		border-bottom: 2px solid #c9c9c9;
		display: block;
	}



/* ----------------------------------------------------------------------------
	PHOTO AND CAPTION BOX

	Displays a photo with a caption benath it in a shaded area. This area can
	be defined by three color types - yellow, green and blue. By default, this
	box will stretch to fit the width of the container it sits in; however, if
	this is not the desired effect, use of the set width classes defined below.
---------------------------------------------------------------------------- */

div.photo-and-caption-yellow,
div.photo-and-caption-green,
div.photo-and-caption-blue {
	border-bottom: 2px solid #c9c9c9;
	color: #fff;
	margin-bottom: 14px;
	padding: 14px 16px;
	position: relative;
	width: auto;
	zoom: 1;
}
	div.photo-and-caption-yellow img.photo,
	div.photo-and-caption-green img.photo,
	div.photo-and-caption-blue img.photo {
		display: block;
		margin: -14px -16px 14px -16px;
		position: relative;
	}

	div.photo-and-caption-yellow {
		background-color: #eaab00;
	}
	div.photo-and-caption-green {
		background-color: #003946;
	}
	div.photo-and-caption-blue {
		background-color: #5482ab;
	}

	/*
	Set width - 198 pixels.
	*/
	div.width198,
	div.width275 {
		display: inline;
		float: left;
		margin-right: 25px;
		width: 198px;
		width: 166px;
	}
	/*
	Set width 275 pixels.
	*/
	div.width275 {
		width: 275px;
		width: 243px;
	}



/* ----------------------------------------------------------------------------
	STAR RATING SYSTEM
---------------------------------------------------------------------------- */

#star-rating-system {
	margin-bottom: 12px;
	padding-top: 4px;
	position: relative;
	width: 100%;
}
	/*
	Row of selectable stars.
	*/
	#star-rating-system span.stars {
		background-color: transparent;
		background-image: url('/static/slfglobal/images/star_rating_system.gif');
		height: 20px;
		left: 130px;
		overflow: hidden;
		position: absolute;
		top: 0;
		width: 116px;
	}
	/*
	Startup stars to be displayed.
	*/
	#star-rating-system span.rating1of5 {
		background-position: 0 -20px;
	}
	#star-rating-system span.rating2of5 {
		background-position: 0 -40px;
	}
	#star-rating-system span.rating3of5 {
		background-position: 0 -60px;
	}
	#star-rating-system span.rating4of5 {
		background-position: 0 -80px;
	}
	#star-rating-system span.rating5of5 {
		background-position: 0 -100px;
	}
		/*
		Each individual star.
		*/
		#star-rating-system span.stars a {
			display: block;
			height: 20px;
			text-decoration: none;
			text-indent: -5000px;
			position: absolute;
			top: 0;
			width: 23px;
			z-index: 10;
		}
		#star-rating-system span.stars a:hover {
			z-index: 2;
			width: 100%;
			height: 20px;
			overflow: hidden;
			left: 0 !important;
		}

		/*
		Setup rollover events for each star.
		1 out of 5 stars.
		*/
		#star-rating-system span.stars a.star1 {
			left: 0;
		}
		#star-rating-system span.stars a.star1:hover {
			background: url('/static/slfglobal/images/star_rating_system.gif') no-repeat 0 -20px;
		}

		/*
		2 out of 5 stars.
		*/
		#star-rating-system span.stars a.star2 {
			left: 23px;
		}
		#star-rating-system span.stars a.star2:hover {
			background: url('/static/slfglobal/images/star_rating_system.gif') no-repeat 0 -40px;
		}

		/*
		3 out of 5 stars.
		*/
		#star-rating-system span.stars a.star3 {
			left: 46px;
		}
		#star-rating-system span.stars a.star3:hover,
		#star-rating-system span.stars a.star3:active {
			background: url('/static/slfglobal/images/star_rating_system.gif') no-repeat 0 -60px;
		}

		/*
		4 out of 5 stars.
		*/
		#star-rating-system span.stars a.star4 {
			left: 69px;
		}
		#star-rating-system span.stars a.star4:hover,
		#star-rating-system span.stars a.star4:active {
			background: url('/static/slfglobal/images/star_rating_system.gif') no-repeat 0 -80px;
		}

		/*
		5 out of 5 stars.
		*/
		#star-rating-system span.stars a.star5 {
			left: 92px;
		}
		#star-rating-system span.stars a.star5:hover,
		#star-rating-system span.stars a.star5:active {
			background: url('/static/slfglobal/images/star_rating_system.gif') no-repeat 0 -100px;
		}



/* ----------------------------------------------------------------------------
	CORE FUNCTIONS: NAVIGATION SKIPPER, PRINT-FRIENDLY LINKS, IMAGE LAYOUT,
	GRAPHICAL HEADERS, FLOATED ELEMENTS LAYOUT FIXER (CLEARFIX)
---------------------------------------------------------------------------- */

/*
Skip over navigation
*/
#skipper { display: none; }

/*
Print-friendly links
*/
.pf { display: none; }

/*
Center-align text element.
*/
.tcenter {
	text-align: center;
}

/*
Right-align text element.
*/
.tright {
	text-align: right;
}

/*
Float images on the left or right-hand
side of the content area.
*/
img.left {
	display: inline;
	float: left;
	margin: 2px 26px 14px 0;
}
img.right {
	display: inline;
	float: right;
	margin: 2px 0 5px 11px;
}

/*
Graphical headers
*/
#header h1,
#header #current-country,
#resize li a,
.hdr-graphic {
	background-color: transparent;
	background-position: left top;
	background-repeat: no-repeat;
	display: block;
	overflow: hidden;
	text-decoration: none;
	text-indent: -5000px;
}

/*
Clear floats so content beneath will flow
normally. This class must be attached to any
parent that has a floated child.
*/
.clearfix:after,
div.feature ul.columns:after,
div.inputRow:after {
	content: ".";
    display: block;
    height: 0;
    clear: both;
    line-height: 0;
    visibility: hidden;
}
.clearfix,
div.feature ul.columns,
div.inputRow {
	display: inline-block;
}
/* Hide from IE Mac \*/
.clearfix,
div.feature ul.columns,
div.inputRow {
	display: block;
}
/* End hide from IE Mac */



/*******************************************************************************
5_billboards.css
*******************************************************************************/
/**
 * Billboards
 *
 * Define the layout and properties of the billboard element. These are large
 * images that either expand the entire width of the web page or are restricted
 * to whatever container element they appear in.
 *
 */

/* ----------------------------------------------------------------------------
	GLOBAL BILLBOARD PROPERTIES
---------------------------------------------------------------------------- */

/*
Ensure that only one billboard can be displayed at one time. This way users who
do not have JavaScript enabled will only see the first one and not the entire
list.
*/
#billboard {
	height: 99px;
	margin-bottom: 10px;
	overflow: hidden;
	position: relative;
	width: 100%;
}
/*
Home page billboards have a slightly different height.
*/
#page-home #billboard {
	height: 121px;
}
	#billboard img {
		border: 0;
		display: block;
		left: 0;
		position: absolute;
		top: 0;
		z-index: 5;
	}
	/*
	Ensures that first billboard in the list is stacked on top.
	*/
	#billboard a.first img {
		z-index: 10;
	}



/* ----------------------------------------------------------------------------
	CHOOSE YOUR COUNTRY FLASH / IMAGE MAP
---------------------------------------------------------------------------- */

/*
Provide basic dimensions and alternative format (image map) for non-Flash or
JavasScript users.
*/
#choose-country-map,
#choose-country-map-818w {
	height: 152px;
	margin-bottom: 10px;
	position: relative;
	/* width: 100%; */
	width: 969px;
}
	#choose-country-map img {
		display: block;
	}

/*
818 pixel wide version.
*/
#choose-country-map-818w {
	width: 818px;
}
/*******************************************************************************
6_banners.css
*******************************************************************************/
/**
 * Banners
 *
 * Each primary level section has a large banner in the content area that
 * contains the section's name and information in a customized box.
 *
 */

/* ----------------------------------------------------------------------------
	GLOBAL BANNER PROPERTIES
---------------------------------------------------------------------------- */

#banner {
	background: #fff url(/static/global/images/banners/grad_lightblue_dotted_bg.gif) repeat-x left bottom;
	height: auto !important;
	height: 181px;
	margin-bottom: 7px;
	min-height: 181px;
	padding: 0 161px 1px 19px;
	position: relative;
	width: auto;
	zoom: 1;
}
	/*
	Banners do not have as much white space above them when using the three
	column layout type.
	*/
	div.three-column-layout #banner {
		margin-top: -9px;
	}

	/*
	All third-level pages have a yellow gradient background, instead of blue.
	*/
	#content-body div.yellow {
		background-image: url(/static/global/images/banners/grad_yellow_dotted_bg.gif);
	}

	/*
	Force all child elements to sit "on top" of the section image.
	*/
	#banner * {
		position: relative;
		z-index: 20;
	}
      #banner a { position: static; }
	/*
	Reset relative positioning for each banner content box to ensure that their
	associated graphic will sit in the right position in the container.
	*/
	#banner div.banner-content {
		display: none;
		position: static;
	}
	/*
	Ensure that the first banner gets displayed for accessiblity reasons.
	*/
	#banner div.banner-content-first {
		display: block;
	}

	/*
	If an IFRAME is contained within a banner, there should be no padding
	applied.
	*/
	#banner iframe {
		display: block;
		height: 181px;
		margin: 0 -161px 4px -19px;
		width: 818px;
	}

	/*
	Main section graphical heading. Ensure that right padding applied to parent
	is removed.
	*/
	h1.banner {
		margin: 0 -161px 10px 19px;
		position: relative;
	}
	#banner h1.banner {
		margin: 0 -161px -2px 0;
	}
		#banner h1 img {
			display: block;
			margin-bottom: 9px;
		}

	/*
	Sub-section graphical heading. Ensure that right padding applied to parent
	is removed.
	*/
	#banner h2 {
		margin-right: -161px;
	}

	/*
	Main section image is positioned on the right-hand side at the bottom.
	*/
	#banner img.photo {
		bottom: 5px;
		position: absolute;
		right: 0;
		z-index: 10;
	}

	#banner img.photo_career {
		bottom: 5px;
		position: absolute;
		right: 0;
		z-index: 10;
		LEFT: 180PX;
    OVERFLOW: Visible;

	}

/* ----------------------------------------------------------------------------
	INVESTORS - LATEST QUARTERLY RESULTS

	Display graphical header, text blurb and set of links at the bottom.
	The image, instead of being positioned at the bottom is now placed near
	the top and the text flows around it.
---------------------------------------------------------------------------- */

/*
Modify right padding to allow text to flow to edge, much like the way its
aligned on the left.
*/
#content-body div.banner-investors {
	padding-right: 19px;
}
	/*
	Sub-header graphic needs customized margins.
	*/
	div.banner-investors h2 {
		margin-top: -4px;
		margin-bottom: 8px;
	}

	/*
	Photo is floated instead of absolutely positioned; text flows around.
	*/
	#content-body div.banner-investors img.photo {
		bottom: auto;
		display: inline;
		float: right;
		margin: -46px -19px 0 15px;
		position: relative;
		right: auto;
	}

	/*
	Navigational buttons appear in a row at the bottom of the content box.
	*/
	div.banner-investors ul.clearfix {
		clear: both;
		list-style-type: none;
		margin: 0;
		padding-bottom: 10px;
	}
		/*
		Each button is floated with a right margin to create gutter space.
		*/
		div.banner-investors ul.clearfix li {
			background-image: none;
			display: inline;
			float: left;
			margin: 0 38px 0 0;
			padding: 0;
		}
			div.banner-investors ul.clearfix li a {
				color: #5482ab;
			}



/* ----------------------------------------------------------------------------
	CONTACT US

	No graphic is applied to this banner; spans entire width of content area.
---------------------------------------------------------------------------- */

/*
Modify right padding to allow text to flow to edge, much like the way its
aligned on the left.
*/
#content-body div.banner-contact {
	height: auto;
	min-height: 0;
	padding-right: 19px;
}



/* ----------------------------------------------------------------------------
	SEARCH

	Custom search fields and minimum height adjustments.
---------------------------------------------------------------------------- */

#content-body div.banner-search { }

#content-body div.banner-search form * { position: static; }

	/*
	Search text box needs some resizing.
	*/
	div.banner-search form input.text {
		margin-right: 4px;
		vertical-align: top;
		width: 152px;
	}



/* ----------------------------------------------------------------------------
	NEWS & INSIGHTS - PHOTOS & AV GALLERY

	Photo has larger width and right padding needs adjustment to fit.
---------------------------------------------------------------------------- */

#content-body div.banner-photoavgallery {
	padding-right: 285px;
}



/* ----------------------------------------------------------------------------
	PRODUCTS & SERVICES

	Data table that exists within an IFRAME for the non-Flash version of
	the products and services map.
---------------------------------------------------------------------------- */

table.banner-prodserv {
	width: 100%;
}
	table.banner-prodserv thead th {
		background-color: #003946;
		color: #fff;
		font-size: 13px;
		padding: 4px 8px;
		text-align: left;
	}

	table.banner-prodserv tbody th {
		background: #f3f7fa url(../../_images/layout/dotted_line_bg_horizontal.gif) repeat-x left bottom;
		color: #003946;
		font-size: 13px;
		padding: 12px 8px 1px 8px;
		text-align: left;
	}
	table.banner-prodserv tbody td {
		background: #fff url(../../_images/layout/dotted_line_bg_horizontal.gif) repeat-x left bottom;
		font-size: 11px;
		padding: 12px 8px 1px 8px;
		text-align: left;
	}
		/*
		No border on last row.
		*/
		table.banner-prodserv tbody tr.last th,
		table.banner-prodserv tbody tr.last td {
			background-image: none;
		}

		/*
		Text headers at the top of each "Products and Services" cell.
		*/
		table.banner-prodserv tbody td h3 {
			color: #003946;
			font-size: 13px;
			margin-bottom: 14px;
		}

		/*
		List of links for each "Products and Services" cell.
		*/
		table.banner-prodserv tbody td ul {
			margin-left: 0;
		}
			table.banner-prodserv tbody td ul li {
				background: transparent url(../../_images/bullets/arrow_yellow.gif) no-repeat 0 0.40em;
				padding-left: 16px;
				zoom: 1;
			}
/*******************************************************************************
7_features.css
*******************************************************************************/
/**
 * Features
 *
 * Features are small content boxes that appear in a columnized format.
 * Each feature takes on color characteristics depending on which column it
 * appears in. Column one is designated as green, column two is blue and
 * column three is yellow.
 *
 */

/* ----------------------------------------------------------------------------
	FEATURE LAYOUT PROPERTIES
---------------------------------------------------------------------------- */

div.feature {
	margin-bottom: 9px;
	overflow: hidden;
	position: relative;
}
	div.feature div.box {
		background-color: #fff;
		background-position: left top;
		background-repeat: repeat-x;
		height: auto !important;
		height: 43px;
		min-height: 43px;
		padding: 11px 19px 1px 19px;
		position: relative;
		width: auto;
		zoom: 1;
	}

	/*
	Gradient color type. Depending on the class name provided, a gradient
	background will be applied to the feature box. Valid class names are:
		- feature-green
		- feature-blue
		- feature-yellow
	*/
	div.feature-green div.box {
		background-image: url(/static/global/images/features/box_green_bg_grad.gif);
	}
	div.feature-blue div.box {
		background-image: url(/static/global/images/features/box_blue_bg_grad.gif);
	}
	div.feature-yellow div.box {
		background-image: url(/static/global/images/features/box_yellow_bg_grad.gif);
	}



/* ----------------------------------------------------------------------------
	FEATURE ELEMENT PROPERTIES
---------------------------------------------------------------------------- */

/*
Header types that will typically be found within a feature box. We want to
ensure that all margins have been disabled.
*/
div.feature h2 {
	color: #fff;
	font-size: 14px;
	height: auto !important;
	height: 18px;
	margin: 0;
	min-height: 18px;
	padding: 7px 5px 4px 19px;
	width: auto;
}
	/*
	All titles have a background color and bottom border applied to them;
	color is based on the current group (green, blue or yellow) that it's
	container is defined as.
	*/
	div.feature-green h2 {
		background-color: #003946;
		border-bottom: 2px solid #c8c8c8;
	}
	div.feature-blue h2 {
		background-color: #5482ab;
		border-bottom: 2px solid #b6bbc0;
	}
	div.feature-yellow h2 {
		background-color: #eaab00;
		border-bottom: 2px solid #c6bda6;
	}
		/*
		Graphical headers need to be repositioned to compensate for the padding
		that is assigned to the text version.
		*/
		div.feature h2 img {
			border: 0;
			display: block;
			margin: -7px -5px -4px -19px;
		}

/*
Photos may appear immediately after the graphical header. For non-text
(graphical) headers, the image needs to cover the bottom border that's
been applied to the header (<h2>).
*/
div.feature img.photo {
	border-bottom: 1px solid #fff;
	display: block;
	margin-top: -2px;
}



/* ----------------------------------------------------------------------------
	COMMON ELEMENTS THAT CAN BE USED IN FEATURE BOXES
---------------------------------------------------------------------------- */

/*
Address styling uses default values provided by the global style sheet
*/
div.feature address { }

/*
Quotes contain paragraphed text and user's citation at the bottom.
*/
div.feature blockquote {
	margin: 0;
}
	/*
	Default pargraph margins work fine.
	*/
	div.feature blockquote p { }

	/*
	Citation of user of the quote.
	*/
	div.feature cite {
		font-style: normal;
	}

/*
Slightly larger bolded text that denotes a sub-heading within the feature box.
*/
div.feature h3 {
	color: #003946;
	font-size: 13px;
	font-weight: bold;
	line-height: 16px;
	margin-bottom: 8px;
}

/*
List of links (normally) that contain no left margin and are unbulleted.
*/
div.feature ul {
	list-style-type: none;
	margin-left: 0;
}
	div.feature ul li {
		background-image: none;
		padding: 0;
	}

	/*
	List of links (normally) that are split into two columns.
	*/
	div.feature ul.columns {
		margin-left: -3%;
	}
		div.feature ul.columns li {
			display: inline;
			float: left;
			margin-left: 3%;
			width: 45%;
		}



/* ----------------------------------------------------------------------------
	QUESTION / RESPONSE TEASER

	User selects a question from a dropdown menu and the answer is displayed
	above, in an area where default / starting text is placed on page load.
---------------------------------------------------------------------------- */

/*
Information boxes that are displayed when a selection is made from the drop
down menu.
*/
div.feature div.question-response-teaser div.response {
	display: none;
}

/*
By default, display the first response box.
*/
div.feature div.question-response-teaser div.first {
	display: block;
}

/*
Display options for the dropdown menu and submit button. This first one defines
the menu and button on the same line.
*/
div.feature form.inline { }
	div.feature form.inline select.text,
	div.feature form.inline input {
		margin: 0 4px 14px 0;
	}

/*
This option defines the menu and button on seperate lines and right-aligned.
*/
div.feature form.block {
	text-align: right;
}
	div.feature form.block select.text {
		display: block;
		margin: 0 0 14px auto;
		text-align: left;
		width: 100%;
	}
	div.feature form.block input {
		display: block;
		margin: 0 0 10px auto;
		text-align: left;
	}



/* ----------------------------------------------------------------------------
	NEWS/EVENT/CAREER LIST

	List of items composed of a date and text link that each appear on their
	own line. Each item (except last one) is seperated by a dotted line with
	soft graident background image that spans the width of the container. The
	List may also contain a thumbnail image that is floated left and allows
	for the text to flow around it.

	<div class="feature feature-colorvalue">
		<div class="box">
			<dl class="news-listing">
				<dt>November 12, 2008</dt>
				<dd>Lorem ipsum dolor sit amnet consequat nulla</dd>
			</dl>
		</div>
	</div>
---------------------------------------------------------------------------- */

dl.news-listing { }
	/*
	Date the listing was published.
	*/
	dl.news-listing dt {
		margin-bottom: 1px;
	}

	/*
	Content of the listing; usually a hyperlink. We need to ensure that the
	dotted line spans the entire width of the feature box, so some positioning
	is done below.
	*/
	dl.news-listing dd {
		background: transparent url(/static/global/images/features/news_listing_bg_div_dotted.gif) repeat-x left bottom;
		margin-bottom: 14px;
		padding-bottom: 22px;
	}
	div.feature dl.news-listing dd {
		margin: 0 -19px 7px -19px;
		padding-left: 19px;
		padding-right: 19px;
	}

	/*
	Strip out backgroud image and padding from last news item. Since this is
	not an "important" class, it will be applied via JavaScript to make things
	a bit simpler for the technical team.
	*/
	dl.news-listing dd.last {
		background-image: none;
		margin-bottom: 0;
		padding-bottom: 0;
	}

	/*
	Titles of a release will sometimes appear within the body content.
	*/
	dl.news-listing dd .title {
		display: block;
		margin-bottom: 3px;
	}
	/*
	Keywords that the release has been tagged with.
	*/
	dl.news-listing dd .tags {
		display: block;
	}

	/*
	Thumbnails displayed causes the content to shift to the left and the image
	fills in the available space.
	*/
	dl.news-listing-thumb dt {
		margin-left: 73px;
		position: relative;
	}
		/*
		Thumbnail image.
		*/
		dl.news-listing-thumb dt img {
			border-bottom: 2px solid #c9c9c9;
			height: 56px;
			left: -73px;
			position: absolute;
			top: 2px;
			width: 57px;
		}
	/*
	Content of the listing needs to be shifted to match date above.
	*/
	dl.news-listing-thumb dd {
		padding-left: 73px;
	}
	div.feature dl.news-listing-thumb dd {
		padding-left: 92px;
	}

	div.pagination {
		text-align: right;
	}

/* ----------------------------------------------------------------------------
	RSS / EMAIL / HOW-TO LINKS

 	Displays icons for RSS and Email as well as two "how-to" text links:
  	"Subscribe" and "What is RSS?". This element MUST be the first child
  	within the feature box.

	<div class="feature feature-colorvalue">
		<div class="box">
			<ul class="clearfix rss-email-howto">
			<li class="rss"><a class="hdr-graphic" href="#" title="RSS">RSS</a></li>
			<li class="email"><a class="hdr-graphic" href="#" title="Email">Email</a></li>
			<li><a href="#">Subscribe</a>&nbsp;&nbsp;::&nbsp;&nbsp;<a href="#">What is RSS?</a></li>
			</ul>
		</div>
	</div>
---------------------------------------------------------------------------- */

div.feature ul.rss-email-howto {
	list-style-type: none;
	margin-left: 0;
}
	/*
	Each item in the toolbar - horizontal layout (default).
	*/
	div.feature ul.rss-email-howto li {
		display: inline;
		float: left;
	}

	/*
	Each item in the toolbar - vertical layout.
	*/
	div.feature ul.vertical li {
		display: block;
		float: none;
		margin-bottom: 20px;
	}

	/*
	Email (STF and Alert) icon and RSS icon
	*/
	div.feature ul.rss-email-howto li.alert,
	div.feature ul.rss-email-howto li.email {
		margin-right: 8px;
	}
		div.feature ul.rss-email-howto li.rss a,
		div.feature ul.rss-email-howto li.alert a,
		div.feature ul.rss-email-howto li.email a {
			height: 16px;
			width: 27px;
		}
		div.feature ul.vertical li.rss a,
		div.feature ul.vertical li.alert a,
		div.feature ul.vertical li.email a {
			display: block;
			height: auto !important;
			height: 16px;
			min-height: 16px;
			padding-left: 38px;
			width: auto;
		}


	/*
	Display icons based on current color scheme of the feature box. The first
	color scheme is blue.
	*/
	div.feature-blue ul.rss-email-howto li.rss a {
		background: transparent url(/static/global/images/icons/rss_blue_bg.gif) no-repeat left top;
	}
	div.feature-blue ul.rss-email-howto li.alert a {
		background: transparent url(/static/global/images/icons/alert_blue_bg.gif) no-repeat left top;
	}
	div.feature-blue ul.rss-email-howto li.email a {
		background: transparent url(/static/global/images/icons/email_blue_bg.gif) no-repeat left top;
	}

	/*
	Yellow color scheme.
	*/
	div.feature-yellow ul.rss-email-howto li.rss a {
		background: transparent url(/static/global/images/icons/rss_yellow_bg.gif) no-repeat left top;
	}
	div.feature-yellow ul.rss-email-howto li.alert a {
		background: transparent url(/static/global/images/icons/alert_yellow_bg.gif) no-repeat left top;
	}
	div.feature-yellow ul.rss-email-howto li.email a {
		background: transparent url(/static/global/images/icons/email_yellow_bg.gif) no-repeat left top;
	}

	/*
	Green color scheme.
	*/
	div.feature-green ul.rss-email-howto li.rss a {
		background: transparent url(/static/global/images/icons/rss_green_bg.gif) no-repeat left top;
	}
	div.feature-green ul.rss-email-howto li.alert a {
		background: transparent url(/static/global/images/icons/alert_green_bg.gif) no-repeat left top;
	}
	div.feature-green ul.rss-email-howto li.email a {
		background: transparent url(/static/global/images/icons/email_green_bg.gif) no-repeat left top;
	}

	/*
	If a vertial layout is being used then the color scheme is forced to be white.
	*/
	div.feature ul.vertical li.rss a {
		background: transparent url(/static/global/images/icons/rss_white_bg.gif) no-repeat left top;
	}
	div.feature ul.vertical li.email a {
		background: transparent url(/static/global/images/icons/alert_white_bg.gif) no-repeat left top;
	}
	div.feature ul.vertical li.email a {
		background: transparent url(/static/global/images/icons/email_white_bg.gif) no-repeat left top;
	}



/* ----------------------------------------------------------------------------
	STOCK TICKER TABLE

	A table of stock data that contain text information on a yellow background
	(this may need to be changed to allow for feature color scheme
	customization) and graphical information on a white background, with the
	padding settings removed.

	<table cellspacing="0" class="stock-ticker">
		<tr>
			<th class="image" colspan="3"><img alt="" height="" width="" src="" /></th>
		</tr>
		<tr>
			<th>SLF (TSX):</th>
			<td>CA$47.68</td>
			<td>-0.490</td>
		</tr>
		<tr>
			<th>SLF (NYSE):</th>
			<td>US$46.97</td>
			<td>-0.440</td>
		</tr>
	</table>
---------------------------------------------------------------------------- */

/*
Share price data table.
*/
div.feature table.stock-ticker {
	
	width: 263px;
}
/*
Width for one-column layout is slightly wider.
*/
div.one-column-layout div.feature table.stock-ticker {
	width: 313px;
}

/* Added for Philipines Investor Relations Right Nav. */	
div.feature table.stock-ticker tbody{
	
	width: 263px;

}


	/*
	Cell properties for all text-based data.
	*/
	div.feature table.stock-ticker tr th,
	div.feature table.stock-ticker tr td {
		background-color: #f8f8f8;
 /* modified for Philipines Investor Relations  Right Nav, to have bottom border */
		border-bottom: 1px solid #e9ab00; 
		color: #003946;
		font-size: 11px;
		font-weight: bold;
		padding: 4px 10px 4px 18px;
		text-align: left;
	}

	/*
	Each row of cells has a top border only.
	*/
	div.feature table.stock-ticker tr td {
		color: #000;
		font-weight: normal;
		text-align: center;
	}

	/*
	Shaded/odd rows have different background color.
	*/
	div.feature table.stock-ticker tr.shade th,
	div.feature table.stock-ticker tr.shade td {
		background-color: #fdf6e5;
	}

	/*
	Cell properties for image based data.
	*/
	div.feature table.stock-ticker tr th.image,
	div.feature table.stock-ticker tr td.image {
		background-color: #f8f8f8;
		border-top: 0;
		padding-right: 0;
		text-align: left;
	}
	div.feature table.stock-ticker tr.keyline th.image,
	div.feature table.stock-ticker tr.keyline td.image {
		border-top: 1px solid #e9ab00;
	}

	/*
	Footnotes that may or may not exist beneath the table.
	*/
	div.feature table.stock-ticker tr.footnote td {
		background-color: #fff;
		border-top: 0;
		color: #000;
		font-size: 10px;
		font-weight: normal;
		padding: 18px;
		text-align: left;
	}	/*
	Cell properties for column based data.
	*/
	div.feature table.stock-ticker tr th.column,
	div.feature table.stock-ticker tr td.column {
		background-color: #f8f8f8;
		border-top: 0;
		padding: 0;
		text-align: left;

	}
	
	/* StockInformation Table */
	#StockInformation table {
		background-color: #f8f8f8;
		border-collapse: collapse;
		font-size: 10px;
	}
	#StockInformation table tr {
		vertical-align: middle;
		height: 13px;
	}
	#StockInformation table tr th {
		height: 15px;
		border-top: 0;
		
	}
	#StockInformation table tr td {
		text-align: left;
		height: 15px;	
	}
	#StockInformation table tr th img,
	#StockInformation table tr td img {
		display: block;
		border-top: 0;
		text-align: left;
		
	}
	#StockInformation table tr.shade th,
	#StockInformation table tr.shade td {
		background-color: #f8f8f8;
		
	}
	#StockInformation table td.arrow {
		width: 10%;
	}
	#StockInformation table td.arrowValue {
		padding-left:0px;
		width: 16%;

	}
	#StockInformation table tr.last th,
	#StockInformation table tr.last td {
		border-bottom: 0;
	}
	

/*******************************************************************************
8_about_us.css
*******************************************************************************/
/**
 * About us
 *
 * Customized styles that apply to this section only.
 *
 */

/* ----------------------------------------------------------------------------
	OUR HISTORY

	Displays a series of links (4) that each point to different sections that
	outline the events that occurred during the selected time period. The
	functionality of this element is controlled via JavaScript.
---------------------------------------------------------------------------- */

#ftr-our-history { }
	/*
	Reset the padding that the box element assigns by default.
	*/
	#ftr-our-history ul.clearfix {
		list-style-type: none;
		margin: -11px -19px 9px -19px;
	}
		/*
		Displays each link item horizontally.
		*/
		#ftr-our-history ul.clearfix li {
			display: inline;
			float: left;
			margin: 0;
		}
			#ftr-our-history ul.clearfix li a {
				display: block;
				height: 34px;
				text-decoration: none;
			}
			#ftr-our-history ul.clearfix li a.lit,
			#ftr-our-history ul.clearfix li a:hover {
				background-position: 0 -34px;
			}

			/*
			Define the images for each link item, in both English and French.
			*/
			#ftr-our-history ul.clearfix li a#nav-history-1865 {
				background-image: url(/static/global/images/navigation/nav_1865-1899_128w_34h.gif);
				width: 128px;
			}
			#ftr-our-history ul.clearfix li a#nav-history-1914 {
				background-image: url(/static/global/images/navigation/nav_1914-1956_123w_34h.gif);
				width: 123px;
			}
			#ftr-our-history ul.clearfix li a#nav-history-1958 {
				background-image: url(/static/global/images/navigation/nav_1958-1999_125w_34h.gif);
				width: 125px;
			}

			.en #ftr-our-history ul.clearfix li a#nav-history-2000 {
				background-image: url(/static/global/images/navigation/nav_2000-present_163w_34h_en.gif);
				width: 163px;
			}
			.fr #ftr-our-history ul.clearfix li a#nav-history-2000 {
				background-image: url(/static/global/images/navigation/nav_2000-present_163w_34h_en.gif);
				width: 163px;
			}

	/*
	Historical items for each time period (navigational items above). Reset
	global rules.
	*/
	#ftr-our-history ul.our-history {
		clear: left;
		list-style-type: none;
		margin: -11px -19px 14px -19px;
	}
		/*
		Container for the historical fact and the year it occured in.
		*/
		#ftr-our-history ul.our-history li {
			background: #fff url(/static/global/images/layout/dotted_line_with_gradient_bg_horizontal.gif) repeat-x left top;
			margin-bottom: 8px;
			padding: 18px 14px 1px 107px;
			position: relative;
			width: auto;
			zoom: 1;
		}
			/*
			First item in list needs to have the dotted line hidden.
			*/
			#ftr-our-history ul.our-history li.first {
				background-position: 0 -1px;
			}

			/*
			Year the historical fact occured in.
			*/
			#ftr-our-history ul.our-history li h3 {
				color: #eaab00;
				font-size: 16px;
				left: 14px;
				margin: 0;
				position: absolute;
				top: 18px;
				width: 79px;
			}



/* ----------------------------------------------------------------------------
	HIGHLIGHTS OF OUR HISTORY

	List links to Windows Media Player and Real Player format videos; show
	graphic of each language type the video is available in.
---------------------------------------------------------------------------- */

#ftr-our-highlights { }
	/*
	Remove default padding that container places on the feature box.
	*/
	#ftr-our-highlights ul {
		margin-left: -19px;
		margin-right: -19px;
	}
		/*
		Each line is seperated with a dotted background image.
		*/
		#ftr-our-highlights ul li {
			background: transparent url(/static/global/images/layout/dotted_line_bg_horizontal.gif) repeat-x left bottom;
			padding: 0 19px 6px 19px;
			zoom: 1;
		}
		/*
		Remove padding and background image from that last list item.
		*/
		#ftr-our-highlights ul li.last {
			background-image: none;
			padding-bottom: 0;
		}
			/*
			Give each image link some margin space.
			*/
			#ftr-our-highlights ul li a {
				margin-right: 20px;
			}



/* ----------------------------------------------------------------------------
	GLOBAL PRESENCE COUNTRY CONTENT PANELS

	Within each country page of the Global Presence section, a series of
	fourth-level navigation tabs exist. These allow the user to switch from
	page-to-page on the fly, with no browser reload.
---------------------------------------------------------------------------- */

div.contentpanel {
	margin-bottom: 14px;
}
/*******************************************************************************
9_investors.css
*******************************************************************************/
/**
 * Investors
 *
 * Customized styles that apply to this section only.
 *
 */

/* ----------------------------------------------------------------------------
	SHARE PERFORMANCE STOCK CHART (STOCKGROUP)
---------------------------------------------------------------------------- */

#share-performance-by-stockgroup {
	text-align: center;
}
	/*
	Image that is pulled in from Stockgroup.
	*/
	#share-performance-by-stockgroup img {
		display: block;
		margin: 0 auto 14px auto;
	}

	/*
	Navigational links that appear beneath the Stockgroup image.
	*/
	#share-performance-by-stockgroup p a {
		margin: 0 8px;
	}



/* ----------------------------------------------------------------------------
	CHART OPTIONS

	Configuration form options for the Stockgroup image defined above.
---------------------------------------------------------------------------- */

/*
Each row of form controls are contained within this element.
*/
#ftr-chart-options span.formrow {
	display: block;
	margin-bottom: 10px;
}
	/*
	Set vertical alignment for each form element.
	*/
	#ftr-chart-options span.formrow input,
	#ftr-chart-options span.formrow select {
		vertical-align: middle;
	}

	/*
	Text input fields.
	*/
	#ftr-chart-options input.text {
		margin: 0 10px;
	}

	/*
	Create chart button.
	*/
	#ftr-chart-options #chart-options-create {
		margin-left: 11px;
	}



/* ----------------------------------------------------------------------------
	STOCK HISTORY CHART (STOCKGROUP)
---------------------------------------------------------------------------- */

#stock-history-by-stockgroup {
	text-align: center;
}
	/*
	Tabled data of the current stock history page.
	*/
	#stock-history-by-stockgroup table {
		margin-bottom: 24px;
		width: 100%;
	}
		/*
		Each row should be aligned to the top.
		*/
		#stock-history-by-stockgroup table tr {
			vertical-align: top;
		}
			#stock-history-by-stockgroup table tr th {
				background-color: #003946;
				color: #fff;
				padding: 4px;
				text-align: center;
			}
			#stock-history-by-stockgroup table tr td {
				background-color: #fff;
				border-bottom: 1px dotted #6b6b6b;
				padding: 4px;
			}
			/*
			Shaded cells.
			*/
			#stock-history-by-stockgroup table tr td.shade {
				background-color: #f3f6f9;
			}
			/*
			Last row should now have a border.
			*/
			#stock-history-by-stockgroup table tr.last td {
				border-bottom: 0;
			}

	/*
	Navigational links that appear beneath the Stockgroup table.
	*/
	#stock-history-by-stockgroup p a {
		margin: 0 8px;
	}

/*******************************************************************************
10_news_and_insights.css
*******************************************************************************/
/**
 * News & Insights
 *
 * Customized styles that apply to this section only.
 *
 */

/* ----------------------------------------------------------------------------
	BROWSE BY SUBJECT
---------------------------------------------------------------------------- */

#browse-by-subject {

}
	/*
	Graphical header.
	*/
	#browse-by-subject h3 {
		margin-bottom: 12px;
	}

	/*
	List of links container.
	*/
	#browse-by-subject ul {
		list-style-type: none;
		margin: 0 10px 27px 20px;
	}
		#browse-by-subject ul li {
			background-image: none;
			margin-bottom: 8px;
			padding: 0;
		}

	/*
	Hyperlinks have a different normal state color.
	*/
	#browse-by-subject a:link {
		color: #003946;
	}



/* ----------------------------------------------------------------------------
	LATEST PHOTOS
---------------------------------------------------------------------------- */

#ftr-latest-photos {
	margin-bottom: 29px;
}
	/*
	Remove default background image and padding.
	*/
	#ftr-latest-photos div.box {
		background-image: none;
		padding-left: 0;
		padding-right: 0;
	}

	/*
	Container element for photo list needs adjusting.
	*/
	#ftr-latest-photos ul {
		list-style-type: none;
		margin-left: 0;
	}
		/*
		Each photo is floated with a small gutter space on the right.
		*/
		#ftr-latest-photos ul li {
			background-image: none;
			display: inline;
			float: left;
			margin-right: 18px;
			padding: 0;
			width: 96px;
		}
		/*
		First item in each row needs this class so that it will start on the
		far left.
		*/
		#ftr-latest-photos ul li.first {
			clear: left;
		}
			#ftr-latest-photos ul li img {
				border-bottom: 2px solid #c9c9c9;
				display: block;
				height: 96px;
				margin-bottom: 22px;
				width: 96px;
			}



/* ----------------------------------------------------------------------------
	LATEST AUDIO-VISUALS
---------------------------------------------------------------------------- */

#ftr-latest-audiovisuals {
	margin-bottom: 29px;
}
	/*
	Remove default background image and padding.
	*/
	#ftr-latest-audiovisuals div.box {
		background-image: none;
		padding-left: 0;
		padding-right: 0;
	}

	/*
	Container element for video list needs adjusting.
	*/
	#ftr-latest-audiovisuals ul {
		list-style-type: none;
		margin-left: 0;
	}
		/*
		Each video clip is floated with a large gutter space on the right.
		*/
		#ftr-latest-audiovisuals ul li {
			background-image: none;
			display: inline;
			float: left;
			height: auto !important;
			height: 96px;
			margin-right: 54px;
			min-height: 96px;
			padding: 0;
			position: relative;
			width: 215px;
		}
		/*
		First item in each row needs this class so that it will start on the
		far left.
		*/
		#ftr-latest-audiovisuals ul li.first {
			clear: left;
		}
			#ftr-latest-audiovisuals ul li a.photo img {
				border-bottom: 2px solid #c9c9c9;
				left: 0;
				height: 96px;
				position: absolute;
				top: 0;
				width: 96px;
			}

			/*
			Title, description and playtime for each video clip.
			*/
			#ftr-latest-audiovisuals ul li span.title,
			#ftr-latest-audiovisuals ul li span.description,
			#ftr-latest-audiovisuals ul li span.playtime {
				margin-left: 116px;
				display: block;
			}
			#ftr-latest-audiovisuals ul li span.playtime {
				font-style: italic;
			}



/* ----------------------------------------------------------------------------
	PHOTO & AV GALLERY
---------------------------------------------------------------------------- */

div.ftr-photo-av-gallery {
	margin-bottom: 20px;
}
	/*
	Remove default background image and padding.
	*/
	div.ftr-photo-av-gallery div.box {
		background-image: none;
		padding-left: 0;
		padding-right: 0;
	}

	/*
	Container element for the AV list needs adjusting.
	*/
	div.ftr-photo-av-gallery ul {
		list-style-type: none;
		margin-left: -13px;
	}
		/*
		Each AV thumbnail is floated with small left gutter space.
		*/
		div.ftr-photo-av-gallery ul li {
			background-image: none;
			display: inline;
			float: left;
			margin-left: 14px;
			padding: 0;
			position: relative;
			width: 96px;
		}
		/*
		Two column layouts need a slightly larger gutter space between each AV
		thumbnail.
		*/
		.two-column-layout div.ftr-photo-av-gallery ul {
			margin-left: -23px;
		}
			.two-column-layout div.ftr-photo-av-gallery ul li {
				margin-left: 24px;
			}

			div.ftr-photo-av-gallery ul li a img {
				border-bottom: 2px solid #c9c9c9;
				display: block;
				height: 96px;
				width: 96px;
			}

			div.ftr-photo-av-gallery ul li span.description {
				display: block;
				margin-top: 20px;
				text-decoration: underline;
			}

			/*
			Each AV thumbnail has a media icon that is assoicated with it -
			photo, video or RSS.
			*/
			div.ftr-photo-av-gallery ul li span.icon {
				background: transparent no-repeat left top;
				cursor: pointer;
				height: 26px;
				position: absolute;
				right: 0;
				top: 82px;
				width: 26px;
			}
				div.ftr-photo-av-gallery ul li span.photo {
					background-image: url(/static/global/images/icons/photo.gif);
				}
				div.ftr-photo-av-gallery ul li span.video {
					background-image: url(/static/global/images/icons/videoclip.gif);
				}
				div.ftr-photo-av-gallery ul li span.rss {
					background-image: url(/static/global/images/icons/rssfeed.gif);
				}

/*
Legal usage text that may appear at the bottom of a group of photo galleries.
*/
.usagerights {
	background: transparent url(/static/global/images/layout/dotted_line_bg_horizontal.gif) repeat-x left top;
	padding-top: 20px;
}

/* ----------------------------------------------------------------------------
	AUDIO VISUAL GALLERY
---------------------------------------------------------------------------- */
div.ftr-video-av-gallery {
	margin-bottom: 29px;
}
	/*	
	Remove default background image and padding.
	*/
	div.ftr-video-av-gallery div.box {
		background-image: none;
		padding-left: 0;
		padding-right: 0;
	}
	/*	
	Container element for the video list needs adjusting.
	*/
	div.ftr-video-av-gallery ul {
		list-style-type: none;
		margin-left: 0;
	}
		/*		
		Each video clip is floated with a large gutter space on the right.
		*/
		div.ftr-video-av-gallery ul li {
			display: inline;
			float: left;
			height: auto !important;
			height: 96px;
			margin-right: 54px;
			min-height: 96px;
			position: relative;
			width: 215px;
		}
			div.ftr-video-av-gallery ul li a.photo img {
				border-bottom: 2px solid #c9c9c9;
				left: 0;
				height: 96px;
				position: absolute;
				top: 0;
				width: 96px;
			}
			/*			
			Title, description and playtime for each video clip.
			*/
			div.ftr-video-av-gallery ul li span.title,
			div.ftr-video-av-gallery ul li span.description,
			div.ftr-video-av-gallery ul li span.playtime {
				margin-left: 116px;
				
				display: block;
			}
			div.ftr-video-av-gallery ul li span.playtime {
				font-style: italic;
			}
			/*			
			Each AV thumbnail has a media icon that is assoicated with it -
			photo, video or RSS.
			*/
			div.ftr-video-av-gallery ul li span.icon {
				background: transparent no-repeat left top;
				cursor: pointer;
				height: 26px;
				position: absolute;
				/*right: 0;*/
				left: 70px;
				top: 82px;
				width: 26px;
			}
				div.ftr-video-av-gallery ul li span.photo {
					background-image: url(/static/global/images/icons/photo.gif);
				}
				div.ftr-video-av-gallery ul li span.video {
					background-image: url(/static/global/images/icons/videoclip.gif);

					
				}
				div.ftr-video-av-gallery ul li span.rss {
					background-image: url(/static/global/images/icons/rssfeed.gif);
				}
/*
Legal usage text that may appear at the bottom of a group of photo galleries.
*/
.usagerights {
	background: transparent url(/static/global/images/layout/dotted_line_bg_horizontal.gif) repeat-x left top;
	padding-top: 20px;
}

/* ----------------------------------------------------------------------------
	NEWS RELEASES - PUBLISHED DATE AND TAGS

	Date the release was published and a list of the keywords it was tagged
	with.
---------------------------------------------------------------------------- */

div.news-date-and-tags {
	color: #003946;
	margin-bottom: 14px;
}
	/*
	Published date - i.e. July 30, 2008.
	*/
	div.news-date-and-tags span.date {
		margin-right: 8px;
	}

	/*
	Keywords release tagged with.
	*/
	div.news-date-and-tags span.tags {
		margin-left: 8px;
	}



/* ----------------------------------------------------------------------------
	NEWS RELEASES - NUMBER OF COMMENTS POSTED

	Displays a jumplink to the comment posting form as well as a link to
	the number of comments currently associated with the news release.
---------------------------------------------------------------------------- */

div.news-comments-posted {
	margin: 20px 0 25px 0;
	position: relative;
	width: 100%;
}
	/*
	"Post a comment" button.
	*/
	div.news-comments-posted img {
		display: block;
		left: 0;
		position: absolute;
		top: 0;
	}

	/*
	Display number of comments with a small icon to the left of the "Post a
	comment" button.
	*/
	div.news-comments-posted a.comments-posted {
		background: transparent url(/static/global/images/icons/comments.gif) no-repeat left top;
		display: block;
		height: auto !important;
		height: 21px;
		margin-left: 139px;
		min-height: 21px;
		padding-left: 32px;
	}



/* ----------------------------------------------------------------------------
	NEWS RELEASES - ARTICLE COMMENTS

	List of all the comments that have been made for the news release.
---------------------------------------------------------------------------- */

ul.news-article-comments {
	background: transparent url(/static/global/images/layout/dotted_line_bg_horizontal.gif) repeat-x left top;
	list-style-type: none;
	margin: 0 0 24px 0;
	padding-top: 1px;
}
	/*
	Second column displays the poster's comment.
	*/
	ul.news-article-comments li {
		margin: 0;
		background-image: none; /*added 9.29.09*/
		padding: 11px 19px 11px 161px;
		width: auto;
		zoom: 1;
	}
		/*
		First column displays the poster's name and information.
		*/
		ul.news-article-comments li span.username-and-date {
			display: inline;
			float: left;
			margin-left: -142px;
			width: 132px;
		}

	/*
	Last comment in list needs a graphical border.
	*/
	ul.news-article-comments li.last {
		background: transparent url(/static/global/images/layout/dotted_line_bg_horizontal.gif) repeat-x left bottom;
	}

	/*
	Alternating rows receive custom treatment - background color.
	*/
	ul.news-article-comments li.shade {
		background-color: #eef2f6;
	}



/* ----------------------------------------------------------------------------
	SUBSCRIBE TO INVESTOR ALERTS BY E-MAIL
	SUBSCRIBE TO INVESTOR ALERTS AND WEBSITE UPDATES BY RSS
---------------------------------------------------------------------------- */

#subscribe-investor-alerts span.formrow,
#subscribe-website-updates span.formrow {
	display: block;
	margin-bottom: 14px;
}
#subscribe-investor-alerts input,
#subscribe-website-updates input {
	vertical-align: middle;
}
	#subscribe-investor-alerts label input,
	#subscribe-website-updates label input {
		margin-right: 8px;
	}

	/*
	Geneate RSS Feeds buttons needs some white space above it.
	*/
	#subscribe-website-updates #generate-rss-feeds {
		display: block;
		margin-top: 7px;
	}



/* ----------------------------------------------------------------------------
	POST A COMMENT
---------------------------------------------------------------------------- */

#news-post-comment { }

	/*
	Status message that appears to users who are not logged in.
	*/
	#news-post-comment .not-logged-in {
		background: transparent url(/static/global/images/icons/login_alert.gif) no-repeat 0 0;
		height: auto !important;
		height: 17px;
		margin: 28px 0;
		min-height: 17px;
		padding-left: 28px;
	}
		/*
		Log in and sign up links.
		*/
		#news-post-comment .not-logged-in a {
			margin: 0 5px;
		}

	/*
	Text box for users to post their comments in.
	*/
	#news-post-comment textarea {
		width: 530px;
	}



/* ----------------------------------------------------------------------------
	ADDTHIS.COM SOCIAL BOOKMARKING JAVASCRIPT TOOL
---------------------------------------------------------------------------- */

#addthisdotcom {
	display: block;
	margin-top: -14px;
}
/*******************************************************************************
11_search.css
*******************************************************************************/
/**
 * Search
 *
 * Customized styles that apply to this section only.
 *
 */

/* ----------------------------------------------------------------------------
	SEARCH TIPS
---------------------------------------------------------------------------- */

/*
Color and size of feature header changes slightly from default.
*/
#ftr-searchtips h2 {
	color: #003946;
	font-size: 16px;
	margin-bottom: 14px;
	padding: 0;
}

/*
Search tips table layout.
*/
#ftr-searchtips table {
	width: 100%;
}
	/*
	All rows should be aligned to the top.
	*/
	#ftr-searchtips table tr {
		vertical-align: top;
	}
		/*
		Table headers - defaults to yellow gradient background and white text.
		*/
		#ftr-searchtips table tr th {
			background: #eaab00 url(/static/global/images/layout/tbl_search_hdr_yellow_bg.gif) repeat-x left top;
			color: #fff;
			font-weight: normal;
			padding: 8px 17px;
			text-align: left;
		}
		/*
		Blue background.
		*/
		#ftr-searchtips table tr.blue th {
			background: #5482ab url(/static/global/images/layout/tbl_search_hdr_blue_bg.gif) no-repeat right top;
		}
			#ftr-searchtips tr.blue th.last {
				background-position: left top;
			}

		/*
		Table data - gradient background with dotted line borders.
		*/
		#ftr-searchtips table tr td {
			background: #fff url(/static/global/images/layout/tbl_search_data_grad_bg.gif) repeat-x left top;
			border-right: 1px dotted #739299;
			border-bottom: 1px dotted #6b6b6b;
			padding: 8px 17px 1px 17px;
		}

		/*
		Last cell in each row should not have a right border.
		*/
		#ftr-searchtips table tr td.last {
			border-right: none;
		}

		/*
		Last row in each rowset should not have a bottom border.
		*/
		#ftr-searchtips table tr.last td {
			border-bottom: none;
		}


/* ----------------------------------------------------------------------------
	GOOGLE SEARCH: Input Box 
---------------------------------------------------------------------------- */


.cse input.gsc-input,
input.gsc-input {
background-image:none !important;
position: absolute !important;
right: 79px !important;
top: 0px !important;
}

.gsc-input-box {
border: none !important;
background: none !important;
height: 0px !important;
}

input.gsc-search-button {
  border:none !important;
  border-radius: 0px !important;
  padding: 0 0 !important;
  height: 22px !important;
  width: 71px !important;
  position: absolute !important;
  right: 0px !important;
  top: 0px !important;
  margin-top: 0px !important;
}

.gsst_a .gscb_a {
  position: absolute;
  top: 3px;
  right: 79px;
}
/* ----------------------------------------------------------------------------
	SEARCH RESULTS
---------------------------------------------------------------------------- */
#emptySearchResult { clear: left; }

#ftr-searchresults {
	margin: 15px 1px 14px 1px;
	width: auto;
}
	/*
	Summary of search results.
	*/
	#ftr-searchresults div.summary {
		margin: 0;
	}
		#ftr-searchresults div.summary span.label {
			clear: left;
			float: left;
			margin: 0 0 10px 0;
			width: 120px;
		}
		#ftr-searchresults div.summary span.result {
			 float: left;
			 left: auto;
			 margin: 0 0 10px 10px;
			 position: static;
			 width: 800px;
		}

	#ftr-searchresults dl.news-listing {
		margin: 14px 0;
	}
		/*
		Each result title (and link) should be bolded.
		*/
		#ftr-searchresults dl.news-listing dt {
			font-weight: bold;
		}
/*******************************************************************************
12_overlay.css
*******************************************************************************/
/**
 * Overlay
 *
 * Defines styles used to create popup boxes ontop of a coloured background
 * overlay.
 *
 */

/* ----------------------------------------------------------------------------
	OVERLAY / POPUP PROPERTIES
---------------------------------------------------------------------------- */

/*
Creates an overlay effect that covers the entire browser window.
*/
#overlay {
	background-color: #003946;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 1000;
	zoom: 1;
	filter: alpha(opacity=20);
	-moz-opacity: .20;
	opacity: .20;
}

/*
Disable scrollbars of page content.
*/
html.overlay {
	overflow: hidden;
}
body.overlay {
	overflow: hidden;
	overflow-y: hidden;
}

/*
Default rules for popup box.
*/
div.popup {
	background-color: #fff;
	display: none;
	left: 50%;
	margin-left: -133px;
	padding: 18px 18px 1px 18px;
	position: absolute;
	width: 266px;
	z-index: 1100;
}
	/*
	Graphical header at the top of popup box.
	*/
	div.popup h1 {
		height: 73px !important;
		margin: -18px -18px 24px -18px;
		min-height: 0;
		overflow: hidden;
		padding: 0;
		position: relative;
		text-indent: -5000px;
	}
		/*
		Close button that sits in the header of the popup box.
		*/
		div.popup h1 a {
			height: 19px;
			overflow: hidden;
			position: absolute;
			right: 18px;
			text-decoration: none;
			top: 18px;
		}
			.en h1 a,
			div.popup h1.en a {
				background-image: url(/static/global/images/buttons/btn_close_56w_19h_en.gif);
				width: 56px;
			}
			.fr h1 a,
			div.popup h1.fr a {
				background-image: url(/static/global/images/buttons/btn_close_63w_19h_fr.gif);
				width: 63px;
			}



/* ----------------------------------------------------------------------------
	POPUP: WELCOME MESSAGE
---------------------------------------------------------------------------- */

#welcome-message {
	margin-left: -246px;
	width: 456px;
}
	/*
	Graphical banner and "close" button.
	*/
	#welcome-message h1 {
		width: 492px;
	}
		#welcome-message h1 img {
			display: block;
		}


	/*
	Floating feature box (right-hand side).
	*/
	#welcome-message div.feature {
		display: inline;
		float: right;
		margin-left: 50px;
		width: 193px;
	}

/* ----------------------------------------------------------------------------
	POPUP: WELCOME MESSAGE Registration
---------------------------------------------------------------------------- */


#welcome-message-registration {
	margin-left: -456px;
	margin-top: 20px;
	width: 606px;
	height: 420px;
	overflow: scroll;
}
	/*
	Graphical banner and "close" button.
	*/
	#welcome-message-registration h1 {
		width: 492px;
	}
		#welcome-message-registration h1 img {
			display: block;
		}


	/*
	Floating feature box (right-hand side).
	*/
	#welcome-message-registration div.feature {
		display: inline;
		float: right;
		margin-left: 50px;
		width: 606px;
		height: 420px;
		overflow: scroll;
	}


/* ----------------------------------------------------------------------------
	POPUP: LOG IN FOR COMMENTING

	Note: These rules apply to the non-JavaScript version as well, with a few
	exceptions which are documented below.
---------------------------------------------------------------------------- */

/*
Create the popup container width and horizontal layout.
NOTE: This applies to the popup version only.
*/
#popup-login-for-commenting {
	margin-left: -133px;
	width: 230px;
}
	/*
	Strip text from main header and insert background image.
	NOTE: This applies to the popup version only.
	*/
	#popup-login-for-commenting h1 {
		width: 266px;
	}
		#popup-login-for-commenting .en h1 {
			background: transparent url(/static/global/images/layout/banner_loginforcommenting_266w_73h_en.gif) no-repeat left top;
		}

	/*
	Each "row" of the form is enclosed within a <label> element.
	*/
	#login-for-commenting label {
		display: block;
		height: auto !important;
		height: 24px;
		margin-bottom: 2px;
		min-height: 24px;
		overflow: hidden;
		padding-right: 165px;
		position: relative;
		vertical-align: top;
		white-space: nowrap;
		width: 56px;
	}
		/*
		All input fields, including the login button.
		*/
		#login-for-commenting label input {
			display: block;
			position: absolute;
			right: 0;
			top: 0;
			vertical-align: top;
		}

		/*
		Text fields for the username and password.
		*/
		#login-for-commenting label input.text {
			width: 150px;
		}



/* ----------------------------------------------------------------------------
	POPUP: PHOTO GALLERY
---------------------------------------------------------------------------- */

#PhotoGallery {
	margin-left: -222px;
	padding-left: 24px;
	padding-right: 24px;
	width: 444px;
	height: 475px;
}
	/*
	Graphical banner
	*/
	#PhotoGallery #PhotoGallery_Banner {
		margin-left: -24px;
		margin-right: -24px;
		width: 492px;
	}
		#PhotoGallery #PhotoGallery_Banner {
			background-image: url(/static/global/images/layout/banner_photogallery_492w_73h_en.gif);
		}

	/*
	Current/selected image.
	*/
	#PhotoGallery #PhotoGallery_Image {
		height: 307px;
		margin-bottom: 17px;
		position: relative;
		width: 444px;
	}
		#PhotoGallery #PhotoGallery_Image img {
			margin: 0;
			display: block;
			height: 307px;
			left: 0;
			position: absolute;
			top: 0;
			width: 444px;
		}

	/*
	Next and previous links.
	*/
	#PhotoGallery #PhotoGallery_Prev {
		background: transparent url(/static/global/images/bullets/arrows_green_left.gif) no-repeat 0 .33em;
		color: #003946;
		display: inline;
		float: left;
		padding-left: 19px;
		text-decoration: none;
		width: 202px;
	}
	#PhotoGallery #PhotoGallery_Next {
		background: transparent url(/static/global/images/bullets/arrows_green_right.gif) no-repeat 100% .33em;
		color: #003946;
		display: inline;
		float: right;
		padding-right: 20px;
		text-align: right;
		text-decoration: none;
		width: 202px;
	}

	/*
	Caption/description of the current photo.
	*/
	#PhotoGallery #PhotoGallery_Description {
		margin: 14px 0;
	}

	/*
	Usage rights for the current photo.
	*/
	#PhotoGallery #PhotoGallery_Usage {
		color: #5482ab;
		margin: 14px 0;
	}


/** Added by the mobile project - for Footer */
div#footer p[data-mobile="true"]{display: none;}
div#footer br[data-mobile="true"]{display: none;}

/** Added by the mobile project - for Tables */

/**
* @subsection Tables
*/
#table1 table,
#table2 table,
#table3 table,
#table4 table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 1.2em;
  line-height: 1.5;
}
td {
  vertical-align: top;
}

/**
* @subsection Table: Data Grid
* @note Present a series of content/data/figures in a columnized/grid
* format.
*/
#table1,
#table2,
#table3 {
	margin: 1.333em 0;
	width: 100% !important;
}
#table1 tr:first-child td,
#table2 tr:first-child td,
#table3 tr:first-child td,
#table1 tr:first-child th,
#table2 tr:first-child th,
#table3 tr:first-child th {
	background: #003946;
	border: 0;
	color: #fff;
	font-weight: bold;
	vertical-align: middle;
}
#table1 tr td,
#table2 tr td,
#table3 tr td,
#table1 tr th,
#table2 tr th,
#table3 tr th {
	border: solid 1px #BCCBD0;
	padding: .25em;
}
#table1 tr td ul,
#table2 tr td ul,
#table3 tr td ul,
#table1 tr th ul,
#table2 tr th ul,
#table3 tr th ul {
	margin-left: 0 !important;
}
#table1 tr:nth-child(2n+3) td,
#table2 tr:nth-child(2n+3) td,
#table3 tr:nth-child(2n+3) td,
#table1 tr:nth-child(2n+3) th,
#table2 tr:nth-child(2n+3) th,
#table3 tr:nth-child(2n+3) th {
	background: #e9e9e9;
}
#table4 {
	margin: 1.333em 0;
	width: 100% !important;
}
#table4 td,
#table4 th {
	border: solid 1px #BCCBD0;
	padding: .25em;
}
#table4 tr:nth-child(2n) td,
#table4 tr:nth-child(2n) th {
	background: #e9e9e9;
}
#table4 #tblEven{
background:none repeat scroll 0 0 #e9e9e9;
}
#table3 #tblEven, #table2 #tblEven,#table1 #tblEven{
background:none repeat scroll 0 0 #e9e9e9;
}
#table3 td,
#table3 th {
	border: solid 1px #BCCBD0;
	padding: .25em;
}
.no-leftnav-with-rightnav {
    display: inline;
    float: left;
    margin: 16px 0 0 !important;
    width: 690px !important;
}
.no-leftnav-no-rightnav {
    display: inline;
    float: left;
    margin: 16px 0 0 !important;
    width: 100% !important;
}
.with-leftnav-no-rightnav {
    display: inline;
    float: left;
    margin: 16px 0 0 151px !important;
    width: 820px !important;
}
div.three-column-layout #content-body div.generic-col-left {
		display: inline;
		float: left;
		width: 48%;
	}

div.three-column-layout #content-body div.generic-col-right {
		display: inline;
		float: left;
		margin-left: 14px;
		width: 48%;
	}

div.bordered {
  padding: 10px;
  border: 1px solid #777;
}

// added by mobile project completes


/** added for adobe search **/

.global-search .form-wrapper {
    max-width: 550px;
    margin: 0 auto;
}
form.slf-search .form-wrapper {
    display: table;
    border-collapse: collapse;
    width: 100%;
    margin: 0 auto;
    border: 0;
    margin-bottom: 20px;
}
form.slf-search .form-wrapper>* {
    display: table-cell;
    vertical-align: top;
    position: relative;
}

form.slf-search input[type=text] {
    width: 147px !important;
    height: 16px !important;
    font-family: inherit;
    border: 1px solid #D3BCA1;
    padding: 3px 6px;
    width: 99%;
    font-size: 13px;
}
.search-autocomplete {
     position: absolute;
    
        top: 100%;  
    
        background: white;
    
        font-size: 13px;
    
        z-index: 99999;    
    
        border: 0 1px 1px 1px solid #D3BCA1;
    
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    
        -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    
        -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    
       cursor: default;
    
        width: 280px;

}
.search-autocomplete ul {
    margin: -1px 0 0 !important;
    padding: 0 !important;
    list-style: none;
    display: none;
    text-align: left;
}
.search-autocomplete li {
    border-top: 1px solid #fff;
    padding: 5px 6px !important;
    background: none !important;
    display: block;
    
    text-overflow: ellipsis;
    position: relative;
}
.search-autocomplete li .bold {
    font-weight: bold;
}
.search-autocomplete li:not(:first-child):after {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    left: 10px;
    right: 10px;
}
.search-autocomplete:not(:hover) li.active,
.search-autocomplete li:hover {
    background: #e7dbcc !important;
    color: #000;
    cursor: pointer;
}
.search-autocomplete li:first-child {
    border-top: none;
}
.search-autocomplete ul.search-sayt-list {
    position: relative;
}
.search-autocomplete ul.search-sayt-list:before {
    content: "";
    display: block;
    position: absolute;
    top: -2px;
    left: 10px;
    right: 10px;
    border-top: 2px solid #b4b4b4;
}
.search-autocomplete ul.search-sayt-list li {
    padding: 15px 10px !important;
}
.search-autocomplete ul.search-sayt-list li:hover {
    background: #FFFFFF !important;
}
.search-autocomplete ul.search-sayt-list a:hover {
    text-decoration: none !important;
}
.search-autocomplete ul.search-sayt-list a > * {
    display: block;
    white-space: normal;
}
.search-autocomplete ul.search-sayt-list a > .title {
    color: #4a7295 !important;
}
.search-autocomplete ul.search-sayt-list a:hover > .title {
    text-decoration: underline;
}
.search-autocomplete ul.search-sayt-list a > .desc {
    color: #424242 !important;
    font-size: 0.8em;
    font-weight: normal;
    line-height: 1.2em;
    padding-bottom: 4px;
}
.search-autocomplete ul.search-sayt-list a:hover > .desc {
    text-decoration: none !important;
}

a.sayt-link {
  text-decoration: none !important;
}


.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
}
.button-wrapper input[type=submit] {
    min-height: 24px !important;
    font-size: 13px !important;
    line-height: 7px !important;
    background: linear-gradient(to bottom, rgba(0, 87, 109, 1) 0%, rgba(0, 58, 72, 1) 100%)!important;
    color: #fff;
    font-weight: bold;
    text-align: center;
    display: block;
    margin-left: 8px !important;
    width: 90px;
	border: 1px solid #004353;
}

/*end adobe code here **/