/**
 * Layout
 *
 * Customized page layout styling. hong kong
 *
 */

/* ----------------------------------------------------------------------------
	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.
*/
.footerStyle {
	font-size:0.8em; 
	font-style:italic;
	}
.footerStyle2 {
	font-size:0.8em; 
	}
sup {
	font-size:0.8em;
	}
div.one-column-layout #content-body {
	float: none;
	margin: 0;
	width: 100%;
}
div.one-column-layout #content-body #middle-three {
	height: 87px;
	margin-bottom: 23px;
	position: relative;	
	
}

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

	div.one-column-layout #content-body div.col-inner-left {
		display: inline;
		float: left;
		width: 100px;	
		height: 73px;	
		background: #00395a;
		font-size: 16px;
		line-height: 22px;
		font-weight: bold;
		padding-top: 14px;
		padding-left: 10px;		
	}
	div.col-middle-2 div.inner-left {
		width: 145px;
		display: inline;
		float: left;
		background: transparent;
	}
	div.col-middle-2 div.list {
		width: 180px;
	}
	div.col-middle-2 div.inner-right {
		width: 336px;
		display: inline;
		float: left;
		background: transparent;
		margin-left: 15px;
	}
	div.col-middle-2 div.others div.inner-right {
		
		margin-left: 8px;
	}
	div.col-middle-2 div.inner-right h2 {
		background: transparent;
		color: #00395a;
		font-size: 18px;
		line-height: 22px;
		border-bottom: None;
		padding-left: 0;
		padding-top: 0;
		

	}

	div.one-column-layout #content-body div.col-inner-left p {
		color: #ffffff;
		margin-bottom: 0;
	}

	div.one-column-layout #content-body div.col-inner-right {
		display: inline;
		float: left;
		width: 165px;
		height: 73px;		
		background: #80add5;
		padding-top: 14px;
		padding-left: 19px;
		padding-right: 19px;
		
	}
	div.one-column-layout #content-body div.col-inner-right p {
		font-size: 11px;
		line-height: 15px;
	}

	div.one-column-layout #content-body div.col-inner-right a {
		color: #ffffff;
		text-decoration: underline;
		display: block;
	}

	div.one-column-layout #content-body div.col-right div.col-inner-left {
		background: #eaab00;
	}

	div.one-column-layout #content-body div.col-right div.col-inner-right {
		background: #fbefcd;
	}

	div.one-column-layout #content-body div.col-right div.col-inner-right a {
		color: #eaab00;
	}

	/* This CSS property has been added to supress the same CSS property from local.css*/

	#content #content-body div.col-left-2 {
		display: inline;
		float: left;
		width: 641px;
		margin:0px;
	}

	div.one-column-layout #content-body div.col-left-2 {
		display: inline;
		float: left;
		width: 641px;		
	}

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

	div.one-column-layout #content-body div.col-right {
		display: inline;
		float: left;
		margin-left: 15px;
		margin-top: 0px;
		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;
}

/*
This CSS property is being commented bacause it is causing problem in Look n Feel
of the Honk Kong Homepage. Whenever if it is felt that commenting of this CSS property is
causing problem somewhere in Honk Knong site then revert it back.

#content #content-body {
		display:inline;
		float:left;
		margin:-1px 10px 0 2px;
		width:675px;
}

*/


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;
	/*width: 306px;*/
}

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

div.three-column-layout #content-body div.col-middle-2 div.box div.dot {
	background:transparent url(/static/hongkong/images/bread_dot_grad_bg.gif) repeat-x scroll left bottom;
}						
div.three-column-layout #content-body div.col-middle-2 div.box div.clearfix {
	padding-bottom:14px;
	padding-left:19px;
	padding-top:10px;
}

/* Group Insurance */
div.three-column-layout #content-body div.col-left {
		display: inline;
		float: left;
		width: 240px;
		margin-left: 10px;
		
}


/* Products and services */

div.three-column-layout #content-body div.col-middle-2 div.control-image-product {
	background:transparent url(/static/hongkong/images/products_icon.gif) no-repeat scroll 340px 5px;
	height:230px;
	margin-bottom:21px;
	width:540px;
}
div.three-column-layout #content-body div.col-middle-2 div.box {
	padding:0 0 1px;
}


div.three-column-layout #content-body div.col-middle-2 div.control-image-product {
	
	background:transparent url(/static/hongkong/images/products_icon.gif) no-repeat scroll 340px 5px;
	height:230px;
	width:540px;
}

div.three-column-layout #content-body div.col-middle-2 div.box {
	
	padding:0 0 1px;
} 


div.col-middle-2 div.inner-left {
	background:transparent none repeat scroll 0 0;
	display:inline;
	float:left;
	width:145px;
}

/*hope series*/

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

/* Sun Life Hong Kong form.*/

div.three-column-layout #content-body div.others {
	margin-right:10px;
}
div.three-column-layout div.clearfix div.inner-left {
	background:transparent none repeat scroll 0 50%;
	display:inline;
	float:left;
	width:145px;
}
div.three-column-layout div.clearfix div.list {
	width:180px;
}
div.three-column-layout div.others div.clearfix div.inner-right {
	margin-left:8px;
}
div.three-column-layout div.clearfix div.inner-right {
	background:transparent none repeat scroll 0;
	display:inline;
	float:left;
	margin-left:15px;
	width:336px;
}
div.three-column-layout div.others div.clearfix strong{
	margin-left:40px;
}
/* Sunlife Hong kong form*/

div.three-column-layout #content-body div.more-padding div.col-middle{
	width: 225px;
	margin-left: 20px;
}
/* ----------------------------------------------------------------------------
	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: 3px 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: 240px;
		margin-left: 10px;
	}


	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-middle-2 {
		display: inline;
		float: left;		
		width: 541px;
		margin-top: 8px;
		padding-right: 0px;

	}
	div.two-column-layout #content-body div.col-middle-2 div.others {
		margin-right: 10px;
	}
	div.two-column-layout #content-body div.col-middle-2 div.control-image-product {
		margin-bottom: 21px;	
		width: 540px;
		height: 230px;
		background: url(/static/hongkong/images/products_icon.gif) no-repeat 340px 50px;
	}
	div.control-image-csr {
		margin-bottom: 21px;
		width: 580px;
		height: 140px;
		background: url(/static/hongkong/images/CSR_hongkong.gif) no-repeat 460px 30px;
	}
	
	.control-image-csr {
		margin-bottom: 21px;
		width: 580px;
		height: 136px;
		background: url(/static/hongkong/images/CSR_hongkong.gif) no-repeat 460px 20px ;
	}


		div.two-column-layout #content-body div.col-middle-2 div.control-image {
		margin-bottom: 21px;
		width: 540px;
		height: 230px;
		background: url(/static/hongkong/images/products_services.jpg)
	}

	div.two-column-layout #content-body div.col-middle-2 div.control-image h1 {
		margin-bottom: 0;
	}
	div.two-column-layout #content-body div.col-middle-2 div.control-image div {
		width: 310px;
	}

	div.two-column-layout #content-body div.col-middle-2 div.box {
		padding: 0 0 1px;
	}
	div.two-column-layout #content-body div.col-middle-2 div.recover-box {
		padding:11px 19px 1px;
	}
	div.two-column-layout #content-body div.col-middle-2 div.box div.clearfix {
		
		padding-bottom: 14px;
		padding-top: 10px;
		padding-left: 19px;
	}
	div.two-column-layout #content-body div.col-middle-2 div.box div.dot {
		background: transparent url(/static/hongkong/images/bread_dot_grad_bg.gif) repeat-x scroll left bottom;
		
	}

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


div.two-column-layout #content-navigation {
	display: inline;
	float: left;
	margin: 4px 0 0 -974px;
	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/hongkong/images/SLF_screen_en.gif');
		width: 137px;
	}
	.zh #header h1 {
		background-image: url('/static/hongkong/images/SLF_screen_en.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 "HongKong" in the header region.
*/
#current-country {
	display: block;
	height: 23px;
	position: absolute;
	right: 315px;
	top: 17px;
}
#current-country-ch {
	display: block;
	height: 23px;
	position: absolute;
	right: 239px;
	top: 17px;
}
	.en #header #current-country {
		background-image: url('/static/hongkong/images/Hongkong_en.jpg');
		width: 90px;
	}
	.zh #header #current-country-ch {
		background-image: url('/static/hongkong/images/Hongkong_cn.gif');
		background-position: 0px 0px;
		background-repeat: no-repeat;
		width:65px;
                right:239px; 
	}
	.zh #header #current-country {
		background-image: url('/static/hongkong/images/Hongkong_cn.gif');
		background-position: 0px 0px;
		background-repeat: no-repeat;
		width: 65px;
                right: 239px;

	}



/* ----------------------------------------------------------------------------
	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;
    }

    .zh #choose-country {
    background-image: url('/static/hongkong/images/btn_explore_worldwide_275w_30h_cn.gif');
    width: 275px;
    background-position: right top;
    }

/*
Content box for the Choose your country "popup" window.
*/
#choose-country-content {
	background: #fff url('/static/global/images/layout/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/global/images/bullets/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/global/images/icons/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/global/images/icons/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/global/images/icons/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/global/images/icons/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/global/images/icons/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/global/images/icons/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;
}
div.more-padding {
	margin-top: 8px;
	margin-bottom: 4px;
	padding-right: 30px;
}

div.two-column-layout #content-body div.more-padding div.col-middle{
	width: 225px;
	margin-left: 20px;
}
div.more-padding ul li {
	padding-bottom: 10px;
	padding-right: 16px;
	
}
/* Hide from IE Mac \*/
.clearfix,
div.feature ul.columns,
div.inputRow {
	display: block;
}

/* End hide from IE Mac */