/**
* 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, div.home_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.yellow_box {
background-color: #fef9ee;
border: 1px solid #eaab00;
padding: 15px 18px 0px 18px;
margin: 12px 0px;
width: auto;
}
/*
Avatar container is used for all video placements.
*/
div.avatar {
/*background: url(/static/canada/MMFL/Imageshdr_avatar.jpg); */
height: 390px;
width: 230px;
margin-bottom: 15px;
}
div.avatar h2 {
display: none;
color: #fff;
font-size: 14px;
height: auto !important;
height: 18px;
margin: 0;
min-height: 18px;
padding: 7px 5px 4px 19px;
width: auto;
}
/*
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/canada/MMFL/Images/box_green_bg_grad.gif);
}
div.feature-blue div.box {
background-image: url(/static/canada/MMFL/Images/box_blue_bg_grad.gif);
}
div.feature-yellow div.box {
background-image: url(/static/canada/MMFL/Images/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 ().
*/
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 {
margin-left: 0;
}
div.feature ul li {
padding-left: 10px;
background: transparent url(/static/slfglobal/images/box_yellow.gif) no-repeat scroll 0 0.5em;
}
/*
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.
- November 12, 2008
- Lorem ipsum dolor sit amnet consequat nulla
---------------------------------------------------------------------------- */
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;
}
/* ----------------------------------------------------------------------------
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.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.
![]() |
| SLF (TSX): |
CA$47.68 |
-0.490 |
| SLF (NYSE): |
US$46.97 |
-0.440 |
---------------------------------------------------------------------------- */
/*
Share price data table.
*/
div.feature table.stock-ticker {
margin: 6px -19px 6px -19px;
width: 263px;
}
/*
Width for one-column layout is slightly wider.
*/
div.one-column-layout div.feature table.stock-ticker {
width: 313px;
}
/*
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;
height: 25px;
padding: 4px 10px 4px 18px;
text-align: left;
vertical-align: middle;
}
/*
Vendor cell for 3rd-party script.
*/
div.feature table.stock-ticker tr td.vendor {
border: 0;
padding: 0;
}
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;
padding: 4px 10px 4px;
white-space: nowrap;
}
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: 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;
}