/*******************************************************************************
1_common_ca.css
*******************************************************************************/
/*******************************************************************************
1_myLinks.css
*******************************************************************************/
/*
Styles relating to the interim home page.
*/

/* Update the country label and "choose your location" dropdown button. */
.en #header #choose-country {
	background-image: url(/static/slfglobal/images/interim/pca_e_btn_exploreSLF_290w_30h.gif);
	width: 290px;
}
.fr #header #choose-country {
	background-image: url(/static/slfglobal/images/interim/pca_f_btn_exploreSLF_290w_30h.gif);
	width: 290px;
}

.en #header #current-country,
.fr #header #current-country {
	background-image: url(/static/slfglobal/images/interim/pca_e_hdr_canada_59w_15h.gif);
	right: 325px;
	width: 59px;
}

/* Page layout is split into two parts - top and bottom. */
div.interim-home { }

/* Top portion of the design calls for a rotating banner and a mini-
dashboard. */
div.interim-home div.top {
	background: transparent url(/static/slfglobal/images/interim/pca_u_bg_homepagetopgrad_975w_30h.gif) no-repeat left bottom;
	height: 247px;
	margin-top: 13px;
	padding: 0 0 30px 14px;
	position: relative;
	width: 961px;
}
	/* Rotating graphical banners. */
	div.interim-home div.banner-rotate {
		background: #fff;
		height: 247px;
		left: 14px;
		overflow: hidden;
		position: absolute;
		top: 0;
		width: 662px;
		z-index: 10;
	}
		div.banner-rotate div.items {
			position: absolute;
			width: 20000em;
		}
			div.banner-rotate div.items div { float: left; }

			/* Navigation for the banner. */
			div.interim-home div.navi {
				height: 16px;
				position: absolute;
				right: 70px;
				top: 223px;
				z-index: 50;
			}
				div.interim-home div.navi a {
					background: transparent url(/static/slfglobal/images/interim/pca_u_rotatingbannernav_48w_16h.gif) no-repeat -24px 0;
					display: block;
					float: left;
					height: 16px;
					overflow: hidden;
					position: relative;
					width: 24px;
				}
				div.interim-home div.navi a.active { background-position: left top; }
				div.interim-home div.navi a.last { width: 23px; }

			/* Mask overlay for the banner images. */
			
			div.interim-home div.mask {
				background: transparent url(/static/canada/images/new1_sa_u_bg_rotatingbanneralphatrans_662w_247h.png) no-repeat left top;
				cursor: pointer;
				height: 247px;
				left: 600px; 
				position: absolute;
				top: 0;
				width: 76px;
				z-index: 30;
			}

	/* Mini-dashboard column. */
	div.interim-home div.mini-dashboard {
		background: transparent url(/static/slfglobal/images/interim/mini_dashboard_bg.gif) repeat-x left top;
		display: inline;
		float: left;
		margin-left: 613px;
		margin-top: -8px;
		padding-left: 30px;
		position: relative;
		width: 298px;
		z-index: 20;
	}
		div.mini-dashboard h3 { margin-bottom: 15px; }

		div.mini-dashboard div.signin { height: 93px; }
			div.signin select {
				margin: 0 7px 0 19px;
				vertical-align: top;
				width: 204px;
			}

		div.mini-dashboard div.tasks {
			height: 154px;
		}
			div.tasks ul {
				margin-left: 0;
			}
				div.tasks ul li {
					width: 121px;
					min-height: 13px;
					display: -moz-inline-stack;
					display: inline-block;
					vertical-align: top;
					margin-left: 5px;
					zoom: 1;
					*display: inline;
					_height: 13px;
				}

/* Bottom portion of the design calls for tabbed content and a list of
graphical (mini banners) buttons. */
div.interim-home div.bottom {

}
	div.interim-home div.bottom div.tabbedpanes {
		
		display: inline;
		float: left;
		width: 662px;
	}
		div.tabbedpanes ul.tabs {
			height: 51px;
			margin: 0;
			width: 662px;
		}
		.en div.tabbedpanes ul.tabs { background: transparent url(/static/slfglobal/images/interim/pca_e_tabs_savingsinfor_196w_612h.gif) no-repeat; }
		.fr div.tabbedpanes ul.tabs { background: transparent url(/static/slfglobal/images/interim/pca_f_tabs_savingsinfor_196w_612h.gif) no-repeat; }

			div.tabbedpanes ul.tabs li {
				background-image: none;
				display: inline;
				float: left;
				height: 51px;
				margin: 0;
				padding: 0;
			}
				div.tabbedpanes ul.tabs li a.tab {
					display: block;
					height: 51px;
					text-decoration: none;
					text-indent: -5000px;
					overflow: hidden;
					position: relative;
				}

				/* Tab 1 */
				.en div.tabbedpanes li.tab1 a { width: 194px; }
				.fr div.tabbedpanes li.tab1 a { width: 185px; }


				/* Tab 2 */
				.en div.tabbedpanes li.tab2 a { width: 173px; }
				.fr div.tabbedpanes li.tab2 a { width: 163px; }

				/* Tab 3 */
				.en div.tabbedpanes li.tab3 a { width: 159px; }
				.fr div.tabbedpanes li.tab3 a { width: 162px; }

				/* Tab 4 */
				.en div.tabbedpanes li.tab4 a { width: 136px; }
				.fr div.tabbedpanes li.tab4 a { width: 152px; }

				/* Various tab states. */
				div.tabbedpanes ul.tabs.tabs-active-1 { background-position: 0 0 !important; }
				div.tabbedpanes ul.tabs.tabs-active-2 { background-position: 0 -51px !important; }
				div.tabbedpanes ul.tabs.tabs-active-3 { background-position: 0 -102px !important; }
				div.tabbedpanes ul.tabs.tabs-active-4 { background-position: 0 -153px !important; }

				.en div.tabbedpanes li.tab1 a:hover { background: transparent url(/static/slfglobal/images/interim/pca_e_tabs_savingsinfor_196w_612h.gif) no-repeat 0 -204px; }
				.en div.tabbedpanes li.tab2 a:hover { background: transparent url(/static/slfglobal/images/interim/pca_e_tabs_savingsinfor_196w_612h.gif) no-repeat 0 -255px; }
				.en div.tabbedpanes li.tab3 a:hover { background: transparent url(/static/slfglobal/images/interim/pca_e_tabs_savingsinfor_196w_612h.gif) no-repeat 0 -306px; }
				.en div.tabbedpanes li.tab4 a:hover { background: transparent url(/static/slfglobal/images/interim/pca_e_tabs_savingsinfor_196w_612h.gif) no-repeat 0 -357px; }
				.fr div.tabbedpanes li.tab1 a:hover { background: transparent url(/static/slfglobal/images/interim/pca_f_tabs_savingsinfor_196w_612h.gif) no-repeat 0 -204px; }
				.fr div.tabbedpanes li.tab2 a:hover { background: transparent url(/static/slfglobal/images/interim/pca_f_tabs_savingsinfor_196w_612h.gif) no-repeat 0 -255px; }
				.fr div.tabbedpanes li.tab3 a:hover { background: transparent url(/static/slfglobal/images/interim/pca_f_tabs_savingsinfor_196w_612h.gif) no-repeat 0 -306px; }
				.fr div.tabbedpanes li.tab4 a:hover { background: transparent url(/static/slfglobal/images/interim/pca_f_tabs_savingsinfor_196w_612h.gif) no-repeat 0 -357px; }

				div.tabbedpanes ul.tabs.tabs-active-1 li.tab1 a:hover { background-image: none; }
				div.tabbedpanes ul.tabs.tabs-active-2 li.tab2 a:hover { background-image: none; }
				div.tabbedpanes ul.tabs.tabs-active-3 li.tab3 a:hover { background-image: none; }
				div.tabbedpanes ul.tabs.tabs-active-4 li.tab4 a:hover { background-image: none; }


		div.tabbedpanes div.pane {
			/*background: transparent url(/static/slfglobal/images/interim/pca_u_tabsidebarbottom.gif) no-repeat 100% 100%;*/
			clear: left;
			color: #5d5d5d;
			overflow: hidden;
			padding-top: 14px;
			position: relative;
			width: 662px;
		}
			div.tabbedpanes div.pane h3 {
				color: #272727;
				margin-bottom: 12px;
			}

			div.tabbedpanes div.pane ul { margin-left: 8px; }
			div.tabbedpanes div.pane ul li.hdr {
				background-image: none;
				padding-left: 0;
			}

			/* 3 column  */
			div.tabbedpanes div.col1 {
				display: inline;
				float: left;
				margin-left: 44px;
				width: 159px;
			}
			div.tabbedpanes div.col2 {
				display: inline;
				float: left;
				margin-left: 20px;
				width: 169px;
			}
			div.tabbedpanes div.col3 {
				display: inline;
				float: left;
				margin-left: 43px;
				width: 213px;
			}

			/* 2 column */
			div.tabbedpanes div.col1-2 {
				display: inline;
				float: left;
				margin-left: 44px;
				width: 355px;
			}
			div.tabbedpanes div.col2-2 {
				display: inline;
				float: left;
				margin-left: 33px;
				width: 213px;
			}

			/* Link lists within a two column layout need to be columnized. */
			div.tabbedpanes div.col1-2 ul {
				display: inline;
				float: left;
				*margin-left: 0;
				width: 161px;
			}
				div.tabbedpanes div.col1-2 ul li { margin-right: 10px; }

			/* Subnote text that runs along the bottom. */
			div.tabbedpanes div.subnote {
				background: #fff;
				border-top: 1px solid #eaab00;
				clear: left;
				left: 0;
				margin-left: 30px;
				padding: 10px 0 1px 9px;
				position: relative;
				width: 620px;

			}


	div.interim-home div.bottom ul.links {
		display: inline;
		float: left;
		margin-left: 24px;
		width: 262px;
	}
		div.interim-home div.bottom ul.links li {
			background: transparent url(/static/slfglobal/images/interim/pca_u_bg_buttonlistgrad_262w_5h.gif) no-repeat left bottom;
			margin: 0 0 4px 0;
			padding: 0 0 18px 4px;
		}
		div.interim-home div.bottom ul.links li.last { background-image: none; }



/*
"My links" feature that sits at the top right-hand corner of the breadcrumb.
*/
#breadcrumb { z-index: 200; }
#primary { z-index: 600; }
#header { z-index: 650; }
#overlay {
	background-color: #fff;
	filter: alpha(opacity=50);
	-moz-opacity: .50;
	opacity: .50;
}

/*
This part handles the height of breadcrumb if breadcrumb path 
becomes too long and restricts its minimum height when there 
is no breadcrumb path eg. Home page.
*/

#breadcrumb {
min-height:16px;
height:auto!important;/*for FF*/
height:auto;/*for IE6*/
}


#breadcrumb ul {
		margin: 0 370px 0 0; /* Margin right changed to 370px from 230px*/
		
	}

#breadcrumb #resize {
	padding-top: 3px;
	right: 0;
	top: 3px;
}
#breadcrumb #resize #my-links {
	display: block;
	margin: -3px 0 0 3px;
	position: relative;
}
	#my-links a.hdr-graphic {
		height: 29px;
		position: relative;
	}
	#my-links a.hdr.lit,
	#my-links a.hdr:hover { background-position: 0 -30px; height: 30px; }

	.en #my-links a.hdr { background-image: url(/static/slfglobal/images/interim/pca_e_mylinks_108w_30h.gif); width: 108px; }
	.fr #my-links a.hdr { background-image: url(/static/slfglobal/images/interim/pca_f_mylinks_108w_30h.gif); width: 108px; }

	#sign-in div.dashboard{
		width: 260px;
	}

	div.dashboard {
		background-color: #fff;
		border: 1px solid #919191;
		border-top: 0;
		display: none;
		padding: 0 13px 13px 13px;
		position: absolute;
		right: 0;
		top: 29px;
		width: 347px;
		z-index: 5000;
		zoom: 1;
	}
	div.dashboard-popup {
		display: block;
		margin: 10px;
		position: static;
		right: auto;
		top: 0;
	}
		/* Navigational controls for the dashboard - including "Add", "Edit"
		and "Help". */
		div.dashboard div.navigation {
			background-color: #eaab00;
			height: 39px;
			margin: 0 -13px 10px -13px;

			padding-top: 20px;
			_padding-top: 6px;
			position: relative;
			width: auto;
			zoom: 1;
		}
			div.dashboard div.navigation a.hdr-graphic {
				background-color: #fff;
				height: 39px !important;
				margin: 0;
				position: absolute !important;
				top: 20px;
			}
			div.dashboard div.navigation a.hdr-graphic:hover { background-position: 0 0; }

			div.dashboard div.navigation a.lit,
			div.dashboard div.navigation a.lit:hover {
				background-position: 0 -39px;
				height: 48px !important;
			}

			.en div.dashboard div.navigation .add a.hdr-graphic {
				background-image: url(/static/slfglobal/images/interim/pca_e_btn_add_44w_39h.gif);
				left: 252px;
				width: 44px;
			}
			.fr div.dashboard div.navigation .add a.hdr-graphic {
				background-image: url(/static/slfglobal/images/interim/pca_f_btn_add_53w_39h.gif);
				left: 216px;
				width: 53px;
			}

			.en div.dashboard div.navigation .edit a.hdr-graphic {
				background-image: url(/static/slfglobal/images/interim/pca_e_btn_edit_37w_39h.gif);
				left: 296px;
				width: 37px;
			}
			.fr div.dashboard div.navigation .edit a.hdr-graphic {
				background-image: url(/static/slfglobal/images/interim/pca_f_btn_edit_65w_39h.gif);
				left: 269px;
				width: 65px;
			}

			.en div.dashboard div.navigation .help a.hdr-graphic {
				background-image: url(/static/slfglobal/images/interim/pca_e_btn_help_40w_39h.gif);
				left: 333px;
				width: 40px;
			}
			.fr div.dashboard div.navigation .help a.hdr-graphic {
				background-image: url(/static/slfglobal/images/interim/pca_f_btn_help_40w_39h.gif);
				left: 333px;
				width: 40px;
			}

			div.dashboard div.navigation a.close {
				display: block;
				position: absolute;
				right: 10px;
				top: 5px;
				z-index: 1000;
			}
	
			/**
* Sign in button that is located in the breadcrumb region and activates a
* dropdown menu with functionality similar to that of "My links".
*/
#sign-in {
	display: inline !important;
	margin: -3px 0 0 0 !important;
	position: relative;
}
	.en #sign-in a.hdr {
		background-image: url(/static/canada/sunlifeCA/Images/SignIn/sa_e_nav_signin_104w_60h.gif);
		height: 29px;
		position: relative;
		width: 104px;
	}
	.fr #sign-in a.hdr {
		background-image: url(/static/canada/sunlifeCA/Images/SignIn/sa_f_nav_signin_165w_60h.gif);
		height: 29px;
		position: relative;
		width: 165px;
	}

	#sign-in:hover a.hdr,
	#sign-in a.lit { background-position: 0 -30px; }


	
	#sign-in div.pane-list { height: 230px; }

	/* Sub-categories. */
	#sign-in div.pane-list h4 {
		font-size: 1.18em;
		margin: 1.0em 0 4px 12px;
	}

	#sign-in div.pane-list ul { margin: 0 0 0 12px; }

		#sign-in div.pane-list ul li {
			background-image: url(/static/slfglobal/images/box_yellow.gif);
			display: block !important;
			float: none !important;
			margin: 0 0 4px !important;
			padding-left: 16px;
		}
		#sign-in div.pane-list ul li a {
			display: inline !important;
			position: static;
			text-decoration: underline !important;
			text-indent: 0 !important;
		}

		/*
			There are a series of three "panes" within the dashboard:

			1. Listing of all ideas (default)
			2. Add a new idea -> "Add" navigation button.
			3. Edit an existing idea -> "Edit" navigation button.
		*/
		div.dashboard div.panes div.pane {
			display: none;
			position: relative;
		}
		div.dashboard-popup div.panes div.pane { display: block; }

		div.dashboard h3 {
			color: #000;
		}

		/* Listing of all ideas (default). */
		div.dashboard div.panes div.pane-list {
			display: block;
			height: 235px;
			overflow: auto;
			position: relative;
		}
		
		#sign-in div.dashboard div.panes div.pane-list {
			overflow: hidden;
		}

			#my-links div.pane-list ul {
				margin: 0 0 17px 19px;
			}
				#my-links div.pane-list ul li {
					background-image: url(/static/slfglobal/images/box_yellow.gif);
					display: block !important;
					float: none !important;
					margin: 0 0 4px 0 !important;
					padding-left: 16px;
				}
					#my-links div.pane-list ul li a {
						position: static;
						text-decoration: underline !important;
						text-indent: 0 !important;
					}

		/* Add a new link. */
		div.pane-add h3.hdr {
			left: 0;
			position: absolute;
			text-align: right;
			width: 75px;
		}
		div.pane-add div.formrow {
			margin: 17px 0 7px 0;
			padding-left: 85px;
			position: relative;
			width: 262px;
			word-wrap: break-word;
		}
			#my-links div.pane-add .formrow input.text { width: 248px; }

		/* Edit an existing link. */
		div.pane-edit ul.mylist-links {
			border: 1px solid #7f9db9;
			height: 341px;
			margin: 0;
			overflow: hidden;
			overflow-y: auto;
			padding: 0;
			position: relative;
			width: 232px;
		}
			div.pane-edit ul.mylist-links li {
				background: transparent;
				border-bottom: 1px solid #e3e3e3;
				display: block;
				float: none;
				margin: 0 0 0 1px;
				padding: 4px 7px;
			}
			#breadcrumb div.pane-edit ul.mylist-links input { vertical-align: middle; }

		div.pane-edit div.mylist-tools {
			left: 247px;
			position: absolute;
			top: 50px;
			width: 103px;
		}


/* Allow for flexible-sized links to the right of the rotating banner. */

div.interim-home div.top {
	height: auto !important;
	height: 247px;
	min-height: 247px;
}
div.mini-dashboard div.tasks {
	height: auto;
}

/* Allow for background image on tabbed-content pane to tile properly. */

div.tabbedpanes div.panes {
   background: transparent url(/static/canada/images/579148571c.jpg) no-repeat scroll right center;
   float: left;
   padding-top: 14px;
   width: 99.5%;
}

div.tabbedpanes{
   background-image: none !important;
}       


/*******************************************************************************
2_signIn.css
*******************************************************************************/

/**
* Sign in button that is located in the breadcrumb region and activates a
* dropdown menu with functionality similar to that of "My links".
*/
#sign-in {
	display: inline !important;
	margin: -3px 0 0 0 !important;
	position: relative;
}
	.en #sign-in a.hdr {
		background-image: url(/static/canada/sunlifeCA/Images/SignIn/sa_e_nav_signin_104w_60h.gif);
		height: 29px;
		position: relative;
		width: 104px;
	}
	.fr #sign-in a.hdr {
		background-image: url(/static/canada/sunlifeCA/Images/SignIn/sa_f_nav_signin_165w_60h.gif);
		height: 29px;
		position: relative;
		width: 165px;
	}

	#sign-in:hover a.hdr { background-position: 0 -30px; }

	#sign-in div.pane-list ul { margin: 0 0 17px 19px; }

		#sign-in div.pane-list ul li {
			background-image: url(/static/slfglobal/images/box_yellow.gif);
			display: block !important;
			float: none !important;
			margin: 0 0 4px !important;
			padding-left: 16px;
		}
		#sign-in div.pane-list ul li a {
			position: static;
			text-decoration: underline !important;
			text-indent: 0 !important;
			display: inline;
		}