/**
 * 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;
	margin-right: -7px;
	
}

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;
	}
div.clearfix div.feature {
margin-bottom:9px;
overflow:hidden;
position:relative;
}


	/*
	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/philippines/images/box_green_bg_grad.gif);
	}
	div.feature-blue div.box {
		background-image: url(/static/philippines/images/box_blue_bg_grad.gif);
	}
	div.feature-yellow div.box {
		background-image: url(/static/philippines/images/box_yellow_bg_grad.gif);
		/* Modified by srinivas as per Client request defect# 393
		width : 275px;
		*/
		width : 225px;
	}



/* ----------------------------------------------------------------------------
	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;
	/*width: auto;*/
	padding-right: 10px;
}
	/*
	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;
		margin-top: 5px;
		width:235px;
	}

	div.feature h2.feature-Header {
		width : 285px;
	}


    /*
    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/philippines/images/promo_box_dropshadow.gif');
    background-repeat:no-repeat;
    height:120px !important;
    width:320px !important;
    PADDING :3px 0px 0px 3px;
    
}
#page-home .col-left .promo-box {
    margin-left:-3px;
}
#page-home .col-middle .promo-box {
    margin-left:-4px;
}
#page-home .col-right .promo-box {
    margin-left:-3px;
}

#page-home div.promo-box .box {
    width:275px;
}

/*
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;
}
.colro_red
{
  color:red;
}
/*
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: 0%;
	}
		div.feature ul.columns li {
			display: inline;
			float: left;
			margin-left: 1%;
			width: 49%;
      }

		div.feature ul.columns li.dot {
			display: inline;
			float: left;
      margin-bottom:10px;
			margin-left: 3%;
			width: 44%;
			background: url(/static/images/bullets/box_yellow.gif) no-repeat left 5px;
			padding-left: 10px;
      }

		div.feature ul.signin li {
			display: bold;
			font-size: 12px;
			line-height: 15px;
			margin-left: 0%;
			width: auto;
			background: url(/static/images/bullets/box_yellow.gif) no-repeat left 5px;
			padding-left: 13px;
		}
		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 ul.signin li.list a {
			color: #5482ab;
			text-decoration: none;
			font-weight: normal;
		}
		div.feature span.signin {
			font-size: 12px;
			line-height: 18px;
			padding-bottom: 8px;
			padding-left: 2px;

		}



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

/*
This option defines the menu and button on seperate lines and right-aligned.
*/
div.feature form.blockPH {
	text-align: right;
		width: auto;
}
	div.feature form.blockPH select.text {
		display: block;
		margin: 0 0 14px auto;
		text-align: left;
		width: 100%;
	}
	div.feature form.blockPH 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;
	}

	div.feature dl.news-listing dd a {
		font-size: 12px;
		line-height: 15px;
		font-weight: bold;
	}

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



/* ----------------------------------------------------------------------------
	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/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/images/icons/rss_yellow_bg.gif) no-repeat left top;
	}
	div.feature-yellow ul.rss-email-howto li.alert a {
		background: transparent url(/static/images/icons/alert_yellow_bg.gif) no-repeat left top;
	}
	div.feature-yellow ul.rss-email-howto li.email a {
		background: transparent url(/static/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.one-column-layout div.feature table.stock-ticker {
	width: 270px;
}


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;
}
div.one-column-layout div.feature table.stock-ticker caption.clearbold {
	font-size: 12px;
	font-weight: normal;
}
	/*
	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;
	}
div.feature table.stock-ticker tr td.tdleft {
  width:300px;
}

	/*
	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: #5482ab;
		font-size: 10px;
		font-weight: normal;
		text-align: left;

		padding: 4px 10px 4px 18px;
		white-space: nowrap;

	}	
	div.feature table.stock-ticker tr.headnote td {
		border-top: 0;
		font-size: 12px;
		font-weight: bold;
	}	
  /*
	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;
	}

div.feature .strong
{
		font-weight: bold;
}

div.aroundpic
{
  width:auto;
}
div.aroundpic img.picleft
{
  float:left; 
  margin:0 20px 10px 0;
}
div.aroundpic img.picright
{
  float:right; 
  margin:0 0 20px 10px;
}