/**
 * 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 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;
    }
    #page-home div.feature h2 img {
        display: inline;
        float: right;
        margin-right: 13px;
        margin-top: -2px;		
        vertical-align: middle;
	}
#page-home div.promo-box {
    background-image:url(/static/hongkong/images/promo_box_dropshadow.gif);
    background-repeat:no-repeat;
    height:120px !important;
    width:310px !important;
    padding:3px 0px 0px 3px;
}
#page-home .col-left .promo-box {
    margin-left:0px;
}
#page-home .col-middle .promo-box {
    margin-left:0px;
}
#page-home .col-right .promo-box {
    margin-left:0px;
}
#page-home div.promo-box h2 {
    width:auto;
}


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

div.feature div.inner-left img.photo {
	margin-top: 0;
}



/* ----------------------------------------------------------------------------
	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;
	}
	div.feature ul.others li {
		list-style-type: square;
		margin-bottom: 18px;
		padding-left: 0;
	}
	div.feature ul.others {
		margin-left: 15px;
		margin-bottom: 30px;
		margin-top: 6px;
	}
	ul.left-indent {
		margin-left: 40px;
	}
	ul.left-indent li {
		margin-bottom: 1px;
	}

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

		div.feature ul.signin li {
			display: inline;
			font-size: 12px;
			line-height: 15px;
			background: url(/static/hongkong/images/box_yellow.gif) no-repeat left center;
			padding-left: 13px;
			padding-right: 7px;
					

		}
		div.feature ul.signin li.first {
			background-image: none;
			padding-left: 0;
			
		}
		div.feature ul.signin li a {
			color: #5482ab;
			text-decoration: underline;
			font-weight: bold;
		}
		div.feature span.signin {
			font-size: 12px;
			line-height: 18px;
			padding-bottom: 8px;
			padding-left: 2px;

		}

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


div.one-column-layout div.feature table.stock-ticker tr.keyline th {
	font-size: 14px;
	line-height: 16px;
	font-weight: bold;
	color: #000000;
}

div.one-column-layout div.feature table.stock-ticker caption {
	font-size: 14px;
	line-height: 16px;
	font-weight: bold;
	text-align: left;
	margin-bottom: 12px;
}
	/*
	Cell properties for all text-based data.
	*/
	div.feature table.stock-ticker tr th,
	div.feature table.stock-ticker tr td {
		background-color: #f8f8f8;
		border-top: 1px solid #e9ab00;
		color: #003946;
		font-size: 11px;
		font-weight: bold;
		padding: 4px 10px 4px 18px;
		text-align: left;
		white-space: nowrap;
	}

	/*
	Vendor cell for 3rd-party script.
	*/
	div.feature table.stock-ticker tr td.vendor {
		border: 0 !important;
		padding: 0;
		vertical-align: top;
	}
		div.feature table.stock-ticker tr td.vendor table {
			width: 100%;
		}
			div.feature table.stock-ticker tr td.vendor table tr td {
				background-color: #f8f8f8;
			}
			div.feature table.stock-ticker tr td.vendor table tr.shade td {
				background-color: #fdf6e5;
			}

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

	/*
	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-top: 12px;
		padding-left: 3px;
		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;
	}


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

/*
Display secure sign in dropdown menu 
*/
div.feature form.signin select.text {
    margin:0 0 14px auto;
    text-align:left;
    width:199px;
}
div.feature form.signin input {
    margin:0 0 10px 8px;
}

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

.btn 
{
	background-color:#EAAB00;
	border:1px solid #000000;
	color:#FFFFFF;
	font-family:helvetica,sans-serif;
	font-size:95%;
	font-size-adjust:none;
	font-stretch:normal;
	font-style:normal;
	font-variant:normal;
	font-weight:bold;
	line-height:normal;
}

div.feature-blue div.box 
{
	background-image:url(/static/global/images/features/box_blue_bg_grad.gif);
	padding-left: 5px;
}