/*
____ _
/ ___|___ _ __ ___ _ __ ___ _ __ ___ _ __ | |_ ___
| | / _ \| '_ ` _ \| '_ \ / _ \| '_ \ / _ \ '_ \| __/ __|
| |__| (_) | | | | | | |_) | (_) | | | | __/ | | | |_\__ \
\____\___/|_| |_| |_| .__/ \___/|_| |_|\___|_| |_|\__|___/
|_|
Fairfax Digital CSS framework - Find a Babysitter
Author: Richard Grof
Born: February 2010
Last modified: $Revision: 7776 $
$Date: 2010-04-01 12:02:33 +1100 (Thu, 01 Apr 2010) $
$Author: smok $
-----------------------------------------------------------------------------------------
Components only.
NOTE: Accessibility: Margins, paddings in 'em', only network-wide static components can have 'px'.
!! No fonts
No colours
No backgrounds
No background images
No borders
No text-align
... except for network-wide static components which are used with the same skin across mastheads.
Background images of network-wide static components should reside in /img-component (to make it different from existing
/img and to remind it's for network-wide static components only).
Notes:
- Put IE-specific styles at the end of each component (and not into a separate file => less http
requests, more compact component CSS).
To-do:
- Have JS function for font increase.
Contents (quick-navigate using '=' and the label name)
--------
=Generic Generic styles that apply to all components.
=Layout Layout styles other than grid-related styles.
=Tools 'Tool' CSS, e.g. for clearing.
=Components Base styles for components (excluding skin) and all styles (including skin) for network-wide static components.
=Network strip
=Header
=Content
=Headers
=Stories
=Tabulator components
=Sidebar components
=Footer
=Advertising components
=Advertising Generic rules for ads.
*/
/* --------------------------------------------------------------------------------------
=Generic
-------------------------------------------------------------------------------------- */
li {margin-left:1.5em} /* This margin is the best compromise that works for FF and IE. */
hr {/*Into skin: background:#ddd;color:#ddd;*/clear:both;float:none;width:100%;height:.1em;margin:0 0 1.45em;border:0}
.wof {margin-bottom:1em}
.wof img {margin-bottom:.5em}
/* --------------------------------------------------------------------------------------
=Layout
-------------------------------------------------------------------------------------- */
/* if necessary */
/* --------------------------------------------------------------------------------------
=Tools
-------------------------------------------------------------------------------------- */
/* Clearing (credit: http://www.positioniseverything.net/easyclearing.html) */
.cfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;font-size:0}/* Added font-size */
/* ----- IE fixes ----- */
* html .cfix {height:1%}
*+ html .cfix {height:1%}
/* =Skiplink (network-wide static component)
--------------------------------------------------------------------------------------
Accessible way for keyboard and vision-impaired users to skip to nav, content. */
.skipLink {position:absolute;top:0;left:-9000px;z-index:100;display:block;width:99.99%;font-weight:bold;padding:0.5em 0;background:#046eb7 none;color:#fff;text-indent:3em}
.skipLink:focus,.skipLink:active {left:0}/* IE needs :active */
/* =Font enlargement
--------------------------------------------------------------------------------------
The following class is set by Javascript to increase the content's font size.
The JS is called by a button (or similar) e.g. on an article page. Strictly
speaking this style belongs into the skin layer, but to offer it consistently
to all skins we keep it here. (Doing it with JS saves us an http request.) */
.contentLargeFont {font-size:110%}
/* =Components */
/* --------------------------------------------------------------------------------------
=Network strip top (network-wide static component)
-------------------------------------------------------------------------------------- */
/* This is a network-wide static component with skin, so it can be reused across the network.
- Keeping the component in here removes one http request (as opposed to linking to network
strip CSS).
- Uses 'px' for font-size to be indenpendent of what the skin sets font-size to. */
.nN-whiteStrip {position:relative;overflow:hidden;margin:0 -25px;background-color:#fff;color:#666;border-bottom:1px solid #999;font:normal 11px Arial, Helvetica, sans-serif}
.nN-whiteStrip a.logo {display:block;width:53px;height:30px;margin-right:3px;float:right;background:transparent url('img-components/sprite-components.png') no-repeat 0 1px/*FD logo*/;text-indent:-9000px}
.nN-whiteStrip a.logo img {float:right;margin:0 3px 0 0}
.nN-whiteStrip li {display:inline;list-style-type:none;margin:0 3px 0 0;padding-right:5px;line-height:1.8/*non-JS value*/;border-right:1px solid #dadada}
.nN-whiteStrip a:link,.nN-whiteStrip a:visited {color:#005f96}
.nN-whiteStrip a:hover,.nN-whiteStrip a:active {color:#06c}
.nN-whiteStrip li.last {border:0}
/* Dropdown styles if JS is not enabled: */
.nN-whiteStrip .hasDropdown {display:block;font-weight:bold}
.nN-whiteStrip .hasDropdown > a {margin-right:.7em}
.nN-whiteStrip .hasDropdown > a:after {content:":"}
.nN-whiteStrip .hasDropdown ul {display:inline;font-weight:normal}
/* Left links */
.nN-whiteStrip .linksLeft {float:left;margin-left:10px}
.nN-whiteStrip .linksLeft em {font-weight:bold;font-size:12px;color:#c30;text-transform:uppercase}
.nN-whiteStrip .online {color:#346400}
/* Right links */
.nN-whiteStrip .linksRight {float:right;margin-right:10px}
/* Strip & dropdown styles if JS is enabled: */
.scriptable .nN-whiteStrip {height:30px;overflow:visible}
.scriptable .nN-whiteStrip li {line-height:30px/*same as height of whitestrip*/}
.scriptable .nN-whiteStrip .hasDropdown {position:relative;z-index:10;/*FF2:*/display:-moz-inline-block/*end FF2*/;display:inline-block;font-weight:normal;padding-right:14px;margin-right:4px;background:transparent url('img-components/sprite-components.png') no-repeat 100% 13px/*down arrow*/}
.scriptable .nN-whiteStrip .hasDropdown > a {margin-right:0}
.scriptable .nN-whiteStrip .hasDropdown > a:after {content:""}
.scriptable .nN-whiteStrip .hasDropdown ul {display:none;position:absolute;left:-6px;top:22px;width:80px;padding:3px 8px;border:1px solid #ccc;background-color:#fff}
.scriptable .nN-whiteStrip ul.selected {display:block}
.scriptable .nN-whiteStrip .hasDropdown li {display:block;line-height:1.8;border:0;padding:0;margin:0}
/* ----- IE fixes ----- */
* html .nN-whiteStrip {z-index:1000}
* html .nN-whiteStrip a.logo,* html .nN-whiteStrip .linksLeft {display:inline}
* html .nN-whiteStrip li {margin-right:5px;padding-right:2px}
* html .scriptable .nN-whiteStrip .hasDropdown {display:inline}
*+ html .nN-whiteStrip {z-index:1000}
*+ html .nN-whiteStrip li {margin-right:5px;padding-right:2px}
*+ html .scriptable .nN-whiteStrip .hasDropdown {display:inline}
/* --------------------------------------------------------------------------------------
=Header
-------------------------------------------------------------------------------------- */
.header {margin-bottom:2em;padding-top:7px;position:relative;z-index:2}
.header .mh-logo {height:53px;width:176px}
.header .ad {float:right;margin:5px 0}
.header h2 {float:left;height:59px;width:201px}
.header h2 a {display:block;height:40px;width:201px;margin-top:24px}
/* Multimedia header */
.mT-headerMultimedia {padding-top:0;margin-top:7px}
.mT-headerMultimedia .mh-logo {margin-bottom:5px/*same as bottom of form*/}
/* Main navigation */
#nav {clear:both;/*height:23px;*/height:28px;position:relative;z-index:1}/* z-index brings dropdown over breadcrumb. */
#nav li {float:left;list-style-type:none;margin:0}
#nav a {display:block;padding:6px 8px}
#nav .selected a {margin-left:1px;padding:3px 8px 6px 7px;position:relative;top:3px}
/* Nav sub nav (ul inside li.selected, no dropdown) */
#nav {padding-bottom:29px/*Same as height of #nav ol*/}
#nav li ul {position:absolute;left:0;/*top:23px*/top:1.9em;/*height:29px*/height:2.4em;width:100%}
#nav li li a {float:left}
#nav .selected ul a {padding:5px 8px 5px 7px;top:4px;margin-left:0}
/* ----- IE fixes ----- */
/* Enable dropdowns for IE6: */
/* Path must be absolute for live (because they might use date-dependent paths) and can be relative for local development: */
* html #nav li {behavior: url(/media-common-1.0/navHandlersIE6.htc)} /* If relative, path must be relative to html file */
* html #nav li .showDropdownIE6 {display:block}
* html #nav li ul {width:940px} /* width:100% doesn't carry over for IE6 */
/* Breadcrumb */
.breadcrumb {clear:left;float:left;height:36px}
/* Date & time (homepage). Requires id for JS to update time. */
#datetime {clear:left;float:left;margin-top:7px}
/* Alternative formats */
.altFormats {float:right;height:36px;margin-right:8px}
.altFormats li {float:left}
/* --------------------------------------------------------------------------------------
=Content
-------------------------------------------------------------------------------------- */
#content {margin-bottom:2em}
/* --------------------------------------------------------------------------------------
=Headers
-------------------------------------------------------------------------------------- */
.cN-headerRich {position:relative;margin-bottom:10px}
.cN-headerRich .ad {position:absolute;top:0;right:0}
.cN-headerRichWide {clear:both;position:relative;margin-bottom:10px}
.cT-strapHeading {position:relative}
.cT-strapHeading span {position:absolute;top:0;right:0}
.cN-headingPage {position:relative;z-index:1}
.cN-headingPage .ad {position:absolute;right:0;top:0}
/* --------------------------------------------------------------------------------------
=Images
-------------------------------------------------------------------------------------- */
.cT-imageLandscape,.cT-imagePortrait,.cT-imageMultimedia {margin-bottom:10px}
.cT-imagePortrait {float:right;width:200px;margin:10px 0 10px 10px}
.cT-imageMultimedia {position:relative;margin:10px 0}
.cT-imageGallerySnapshot {margin:10px 0}
.cT-imageGallerySnapshot li {float:left;list-style-type:none;margin:2px 2px 0 0}
/* NOTE: For the thumbnails to align left and right we need to create a separate list for each row
with the last instance with class 'last' to turn off the right margin. */
/* ----- IE fixes ----- */
* html .cT-imageGallerySnapshot li a {display:inline-block} /* without this the links appear the width of .cT-imageGallerySnapspot instead of just the width of the image */
* html .cT-imageGallerySnapshot .more-photos,* html .cT-imageGallerySnapshot .play-video {height:1%}
/* Overlays ("More photos" or "Play video" icons) */
.play-video, .more-photos {position:relative;float:left}
.play-video span, .more-photos span {display:block;height:18px;width:52px;position:absolute;bottom:4px;right:4px}
/* --------------------------------------------------------------------------------------
=Stories
-------------------------------------------------------------------------------------- */
.cN-storyImageLead,.cN-storyHeadlineLead,.cN-story {margin-bottom:10px}
.cT-storyTools {clear:both;margin:20px 0}
.cT-storyDetails {margin-bottom:10px}
.cN-storyHeadlineOnly {margin-bottom:.8em}
.cN-linkList {margin-bottom:10px}
/* --------------------------------------------------------------------------------------
=Multimedia
-------------------------------------------------------------------------------------- */
.cT-multimediaElement {margin:0 0 10px}
.cN-multimediaGroup {margin:10px 0}
.cN-multimediaGroup div li {float:left;list-style-type:none;height:130px;width:100px;margin:0 20px 10px 0;position:relative}
.cN-multimediaGroup .last {margin-right:0}
/* --------------------------------------------------------------------------------------
=Article
-------------------------------------------------------------------------------------- */
.cT-callToAction {margin:10px 0}
.cT-disclaimer {margin:10px 0}
.cT-messagePrintMarketing {margin:10px 0}
.cN-relatedCoverage {margin-bottom:10px}
.cN-relatedCoverage .last,.cN-relatedCoverage .wof {margin-bottom:0}
.cN-otherWebLinks {margin:10px 0}
.cT-reviewDetails {margin-bottom:10px}
.cN-quote {margin:10px 0}
.cN-storyCommentLatest {margin:10px 0}
.cN-storyCommentLatest a {display:block}
/* --------------------------------------------------------------------------------------
=Comments
-------------------------------------------------------------------------------------- */
.cT-comments {clear:both;margin:10px 0}
.cT-comments blockquote {margin:10px 0}
/* Social commenting module. Needs JS routine _initSocialCommenting to work. */
.cT-socialCommenting {position:relative;margin-bottom:20px;padding-top:5px}
/* Javascript adds this list entry to both ul and ol: Close */
.cT-socialCommenting .close {position:absolute;top:10px;right:9px;list-style-type:none;margin:0}
.cT-socialCommenting ol,.cT-socialCommenting ul {width:auto;height:auto;position:static;left:auto;padding-top:5px}
.cT-socialCommenting ol .close,.cT-socialCommenting ul .close {display:none}/* Not required if JS is unavailable */
/* JS-enabled state: */
.scriptable .cT-socialCommenting ol,.scriptable .cT-socialCommenting ul {position:absolute;left:-9000px/*hide*/;z-index:1}
.scriptable .cT-socialCommenting ol .close,.scriptable .cT-socialCommenting ul .close {display:block}
.scriptable .cT-socialCommenting ol.show,.scriptable .cT-socialCommenting ul.show {left:0/*show*/}/*Class 'show' added by Javascript*/
/* ----- IE fixes ----- */
* html .cT-socialCommenting {z-index:1}/*if no z-index specified IE6/IE7 won't overlay over component following cT-socialCommenting*/
*+ html .cT-socialCommenting {z-index:1}
/* --------------------------------------------------------------------------------------
=Straps
-------------------------------------------------------------------------------------- */
/* cT-strapFeature */
.cT-strapFeature .media-image,
.cT-strapFeature .media-video
/* Add other multimedia classes here */
{float:left;width:400px/*max image width*/;margin-right:20px}
/* In order to float the storyHeadlineOnly components we need to neutralise the 'cfix' class which
is part of the storyHeadlineLead component. We could remove that class, but that would break the
component. */
.cT-strapFeature .cfix:after {content:"";display:inline;clear:none}
.cT-strapFeature .storyColumn {float:left;width:200px}
/* cT-strapMagazine */
.cT-strapMagazine {margin-bottom:20px}
/* cT-strapMediaTypes */
.cT-strapMediaTypes {margin-bottom:20px}
/* cT-strapMoreLink */
.cT-strapMoreLink {display:block;margin-bottom:20px}
/* --------------------------------------------------------------------------------------
=Tabulator components
-------------------------------------------------------------------------------------- */
/* cN-tabBox */
.cN-tabBox {position:relative;padding-top:25px;overflow:hidden;margin:10px 0}
.cN-tabBox li {list-style-type:none;margin:0}
.cN-tabBox h4 {position:absolute;top:0;left:0;height:25px;width:99px;line-height:25px;margin-right:1px}/* Style so it fits into the grid */
.cN-tabBox h4 a {display:block}
.cN-tabBox .tab2 h4 {left:100px}
.cN-tabBox .tab3 h4 {left:200px}
.cN-tabBox .tab4 h4 {left:300px}
/* Use % for width so it works in columns of various widths: */
.cN-tabBox div {width:100%;display:none}
.cN-tabBox .selected div {display:block}
/* Accessibility: WCAG 6.3 (Javascript removes this class) */
.accessibleTab h4 {position:static}
.accessibleTab div {display:block}
/* ----- IE fixes ----- */
*+ html .cN-tabBox li {display:inline}
*+ html .cN-tabBox li li {display:block}
* html .cN-tabBox {height:1%}/*In some cases absolutely positioned elements within cN-tabBox disappear otherwise.*/
* html .cN-tabBox li {display:inline}
* html .cN-tabBox li li {display:block}
/* cN-tabPages */
.cN-tabPages {position:relative;margin:34px 0 10px}
.cN-tabPages .nav {position:absolute;height:24px;left:0;top:-24px;overflow:hidden}
.cN-tabPages .nav li {list-style-type:none;float:left;height:22px;margin:0}
.cN-tabPages .nav a {display:block;padding:0 1em}
.cN-tabPages .tab {position:relative;clear:both;padding-bottom:10px}
/* With JS enabled: */
.scriptable .cN-tabPages h2 {position:absolute;left:-9000px;font-size:0}
.scriptable .cN-tabPages .tab {display:none/*shown by JS*/;border-bottom:0;padding-bottom:0}
.scriptable .cN-tabPages .tab.selected {display:block}
/* ----- IE fixes ----- */
* html .cN-tabPages {overflow:visible}
/* cN-imageMenu */
.cN-imageMenu {position:relative;width:100%;height:257px/*Depends on images used; override in section skin if necessary.*/;overflow:hidden}
.cN-imageMenu ul {height:257px;width:1000px;margin:0;list-style-type:none}
.cN-imageMenu ul li {float:left;margin:0}
.cN-imageMenu ul li a {cursor:pointer;display:block;overflow:hidden;width:122px/*Depends on images used; override in section skin if necessary.*/;height:257px}
/* [cN-pagination] Pagination links
...................................................................................... */
.cN-pagination li { list-style:none; margin:0; display:inline }
.cN-pagination a, .cN-pagination li.selected { padding:.2em .5em }
/* workaround IE issue where line-breaks following list items results in a spaces being included within the list item */
* + html .cN-pagination li.selected { padding-right:.2em; margin-right:.4em }
* html .cN-pagination li.selected { padding-right:.2em; margin-right:.4em }
/* --------------------------------------------------------------------------------------
=Forms
-------------------------------------------------------------------------------------- */
form ol {list-style-type:none}
form li {margin:0;clear:left;margin:.3em 0}
form label {width:100px;float:left}
form .checkbox {margin-left:100px/*same as label width*/}
form .checkbox label {width:auto}
/* These classes show/hide an error message depending on Javascript evaluation process: */
form .error {display:none}
form .errorSelected {display:block}
/* --------------------------------------------------------------------------------------
=Navigators
-------------------------------------------------------------------------------------- */
.cN-groupNavigator {margin-bottom:1em}
.cN-groupNavigator h4 {position:relative}
.cN-groupNavigator h4 a {display:block}
.cN-groupNavigator h4 span {position:absolute;right:0;top:0}
.cN-groupNavigator li {margin:0}
.cN-groupNavigator .hide {display:none}/* Hide bulk of navigators */
.cN-groupNavigator ul {display:none}
/* Open state */
.cN-groupNavigator.open ul,.cN-groupNavigator.static ul {display:block}
/* Accessibility: WCAG 6.3 (Javascript removes class "accessible") */
.cN-groupNavigator.accessible h4 span {text-indent:-9000px/* Remove "Expand" because it's all expanded*/}
.cN-groupNavigator.accessible .hide,.cN-groupNavigator.accessible ul {display:block}/* Anything that's hidden becomes visible */
.cN-groupNavigator.accessible .more {display:none}/* Hide "More..." links since it's already visible */
.cT-refineGroups {margin-bottom:10px}
.cN-topicSelector {margin-bottom:10px}
.cN-topicSelector .cN-groupNavigator span {left:0;right:auto;text-indent:-9000px}
/* --------------------------------------------------------------------------------------
=Search
-------------------------------------------------------------------------------------- */
.cN-searchBox form {float:right;position:relative;top:4px}
.cN-searchBox form h2,.cN-searchBox form h3 {position:absolute;left:-9000px}
.cN-searchBox form label {float:none}
.cN-searchBox form .ad {margin:0}
.ddown {float:left;position:relative}
.ddown ul {float:none}
.ddown .srch-wrap {position:absolute;top:22px;display:none}
.cN-searchBox .open .srch-wrap {display:block}
.cN-searchBox label input {float:left;width:237px;height:19px}
.cN-searchBox li span {position:absolute;left:-9000px}/* Accessibility: Notify blind users of options with text in . */
.cN-indicatorResults {margin-bottom:10px}
.cT-matchingSections {margin-bottom:10px}
.cT-matchingSections dl {margin-bottom:.5em}
.cT-matchingSections dt {display:inline;margin-right:.4em;/*display:block;float:left;clear:left*/}
.cT-matchingSections dd {display:inline}
.cT-matchingSections ul {display:inline}
.cT-matchingSections li {list-style-type:none;display:inline;margin:0}
.cT-matchingSections .hide {display:none}
/* Accessibility: WCAG 6.3 (Javascript removes class "accessible") */
.cT-matchingSections.accessible .hide {display:inline}
.cT-sortOptions {margin-bottom:10px}
.cT-boxArchiveSearch {margin-bottom:10px}
/* --------------------------------------------------------------------------------------
=Footer
-------------------------------------------------------------------------------------- */
.footer {margin-bottom:1em}
/* =Marketing strip footer ('film strip'; network-wide static component)
--------------------------------------------------------------------------------------
NOTE: This component uses HTML we cannot change (yet). It relies on an old grid system,
hence falls out of the grid we use with this framework.
Uses 'px' for font-size to be independent of what the skin sets font-size to. */
/* The following lines might have to be encapsulated with '.footer': */
.c5 .s1, .c5 .s2, .c5 .s3, .c5 .s4, .c5 .s5 {width:172px;float:left;border-top:2px solid #000/*default:black*/}
.c5 .s2, .c5 .s4 {margin:0 20px}
.c5 {margin:0 0 15px;font:normal .94em Arial, Helvetica, sans-serif;line-height:1.4}
.c5 a {color:#005F96;text-decoration:none}
.c5 a:hover {text-decoration:underline}
.c5 h2 {font:normal 18px Georgia,"Times New Roman",Times,serif;text-align:left;background:#fff;padding:3px 0}
.c5 h2 a {color:#000}
/* Keep list below sorted alphabetically */
.classifieds .cAdvantate {border-top:2px solid #990}
.classifieds .cAdvantate li a {color:#639}
.classifieds .cAge {border-top:2px solid #004990}
.classifieds .cAge li a {color:#004990}
.classifieds .cAPM {border-top:2px solid #ee3f45}
.classifieds .cAPM li a {color:#ee3f45}
.classifieds .cBigChair {border-top:2px solid #394f5d}
.classifieds .cBigChair li a {color:#394f5d}
.classifieds .cBRW {border-top:2px solid #eb2026}
.classifieds .cBRW li a{color:#eb2026}
.classifieds .cBT {border-top:2px solid #012D61}
.classifieds .cBT li a {color:#012D61}
.classifieds .cBusinessDay {border-top:2px solid #046eb7}
.classifieds .cBusinessDay li a {color:#046eb7}
.classifieds .cCommercialRealEstate {border-top:2px solid #f37921}
.classifieds .cCommercialRealEstate li a {color:#f37921}
.classifieds .cCuisine {border-top:2px solid #ce3132}
.classifieds .cCuisine li a {color:#ce3132}
.classifieds .cDigitalLife {border-top:2px solid #1c8100}
.classifieds .cDigitalLife li a {color:#1c8100}
.classifieds .cDomain {border-top:2px solid #5d9731}
.classifieds .cDomain li a {color:#5d9731}
.classifieds .cDomainBusiness {border-top:2px solid #036}
.classifieds .cDomainBusiness li a {color:#036}
.classifieds .cDomainPrestige {border-top:2px solid #7b7977}
.classifieds .cDomainPrestige li a {color:#7b7977}
.classifieds .cDrive {border-top:2px solid #ef181f}
.classifieds .cDrive li a {color:#ef181f}
.classifieds .cEntertainment {border-top:2px solid #97246e}
.classifieds .cEntertainment li a {color:#97246e}
.classifieds .cEnvironment {border-top:2px solid #27640C}
.classifieds .cEnvironment li a {color:#27640C}
.classifieds .cEssentialBaby {border-top:2px solid #fabb18}
.classifieds .cEssentialBaby li a {color:#039}
.classifieds .cExecutive {border-top:2px solid #384F5D}
.classifieds .cExecutive li a {color:#384F5D}
.classifieds .cfindababysitter {border-top:2px solid #a63893}
.classifieds .cfindababysitter li a {color:#a63893}
.classifieds .cInvestSmart {border-top:2px solid #000066}
.classifieds .cInvestSmart li a {color:#000066}
.classifieds .cLeagueHq {border-top:2px solid #316fb6}
.classifieds .cLeagueHq li a {color:#316fb6}
.classifieds .cLifeAndStyle {border-top:2px solid #ff5c01}
.classifieds .cLifeAndStyle li a {color:#ff5c01}
.classifieds .cMoneyManager {border-top:2px solid #4c9e12}
.classifieds .cMoneyManager li a {color:#4c9e12}
.classifieds .cMycareer {border-top:2px solid #fdf300}
.classifieds .cMycareer li a {color:#000}
.classifieds .cmytype {border-top:2px solid #473091}
.classifieds .cmytype li a {color:#473091}
.classifieds .cNationaltimes {border-top:2px solid #15317D}
.classifieds .cNationaltimes li a {color:#15317D}
.classifieds .cRealFooty {border-top:2px solid #eb2026}
.classifieds .cRealFooty li a {color:#eb2026}
.classifieds .cRsvp {border-top:2px solid #56398b}
.classifieds .cRsvp li a {color:#56398b}
.classifieds .cRugbyHeaven {border-top:2px solid #551947}
.classifieds .cRugbyHeaven li a {color:#551947}
.classifieds .cSmallBusiness {border-top:2px solid #0370c6}
.classifieds .cSmallBusiness li a {color:#0370c6}
.classifieds .cSmartInvestor {border-top:2px solid #0089cf}
.classifieds .cSmartInvestor li a {color:#0089cf}
.classifieds .cSmh {border-top:2px solid #007CC3}
.classifieds .cSmh li a {color:#007CC3}
.classifieds .cStayz {border-top:2px solid #189ce4}
.classifieds .cStayz li a {color:#189ce4}
.classifieds .cTheVine {border-top:2px solid #f78f1f}
.classifieds .cTheVine li a {color:#f78f1f}
.classifieds .cTradingRoom {border-top:2px solid #000}
.classifieds .cTradingRoom li a {color:#c87729}
.classifieds .cTravel {border-top:2px solid #c87729}
.classifieds .cTravel li a {color:#000}
.classifieds .cWAToday {border-top:2px solid #e76327}
.classifieds .cWAToday li a {color:#e76327}
.classifieds .cWeatherZone {border-top:2px solid #999}
.classifieds .cWeatherZone li a {color:#000}
/* Keep list above sorted alphabetically */
.classifieds ul {margin-top:5px;padding-top:5px;border-top:1px solid #ccc;font-size:11px}
.classifieds li {list-style-type:disc;/*margin-left:1.3em;*/color:#8a8c8f}
.classifieds .puff {height:148px;overflow:hidden;background:#dedede;margin:0;padding:0;border:none}
.classifieds .puff h5 {padding:0 5px;font-weight:bold;font-size:11px}
/* Logo icons */
.lSmh a,.lAge a,.lBT a,.lDrive a,.lDomain a,.lMycareer a,.lRsvp a,.lStayz a,.lMoneyManager a,.lInvestSmart a,.lExecutive a,
.lDomainPrestige a,.lBigChair a,.lSmartInvestor a,.lBRW a,.lEssentialBaby a,.lAPM a,.lLeagueHq a,.lRugbyHeaven a,
.lRealFooty a,.lSmallBusiness a,.lTheVine a,.lWAToday a,.lCuisine a,.lEntertainment a,.lLifeAndStyle a,.lTravel a,
.lDigitalLife a,.lBusinessDay a,.lTradingRoom a,.lAdvantate a,.lCommercialRealEstate a, .lDomainBusiness a, .lWeatherZone a, .lEnvironment a , .lNationaltimes a, .lmytype a, .lfindababysitter a{display:block;text-indent:-900px;width:172px;height:25px/*max:25px as per sprite*/;overflow:hidden;background:transparent url('img-components/sprite-components.png') no-repeat 0 0}
li.lSmh,li.lAge,li.lBT,li.lDrive,li.lDomain,li.lMycareer,li.lRsvp,li.lStayz,li.lMoneyManager,li.lInvestSmart,li.lExecutive,
li.lDomainPrestige,li.lBigChair,li.lSmartInvestor,li.lBRW,li.lEssentialBaby,li.lAPM,li.lLeagueHq,li.lRugbyHeaven,
li.lRealFooty,li.lSmallBusiness,li.lTheVine,li.lWAToday,li.lCuisine,li.lEntertainment,li.lLifeAndStyle,li.lTravel,
li.lDigitalLife,li.lBusinessDay,li.lTradingRoom,li.lAdvantate,li.lCommercialRealEstate, li.lDomainBusiness, li.lWeatherZone,li.lEnvironment,li.lNationaltimes, li.lmytype, li.lfindababysitter
{list-style-type:none;margin:0 0 5px;padding:0}
/* Keep list below sorted alphabetically */
/* NOTE: These coordinates are specific to Common Templates! */
.lAdvantate a {background-position:0 -850px}
.lAge a {background-position:0 -325px}
.lAPM a {background-position:0 -550px}
.lBigChair a {background-position:0 -375px}
.lBRW a {background-position:0 -475px}
.lBT a {background-position:0 -350px}
.lBusinessDay a {background-position:0 -750px}
.lCommercialRealEstate a {background-position:0 -800px}
.lCuisine a {background-position:0 -625px}
.lDigitalLife a {background-position:0 -725px}
.lDomain a {background-position:0 -75px}
.lDomainBusiness a {background-position:0 -825px}
.lDomainPrestige a {background-position:0 -425px}
.lDrive a {background-position:0 -50px}
.lEntertainment a {background-position:0 -650px}
.lEnvironment a {background-position:0 -900px}
.lEssentialBaby a {background-position:0 -525px}
.lExecutive a {background-position:0 -275px}
.lfindababysitter a {background-position:0 -1275px}
.lInvestSmart a {background-position:0 -400px}
.lLeagueHq a {background-position:0 -175px}
.lLifeAndStyle a {background-position:0 -675px}
.lMoneyManager a {background-position:0 -450px}
.lMycareer a {background-position:0 -100px}
.lmytype a {background-position:0 -1250px}
.lNationaltimes a{background-position:0 -1225px}
.lRealFooty a {background-position:0 -225px}
.lRsvp a {background-position:0 -125px}
.lRugbyHeaven a {background-position:0 -200px}
.lSmallBusiness a {background-position:0 -250px}
.lSmartInvestor a {background-position:0 -500px}
.lSmh a {background-position:0 -300px}
.lStayz a {background-position:0 -150px}
.lTheVine a {background-position:0 -600px}
.lTradingRoom a {background-position:0 -775px}
.lTravel a {background-position:0 -700px}
.lWAToday a {background-position:0 -575px}
.lWeatherZone a {background-position:0 -875px}
/* Keep list above sorted alphabetically */
/* IMPORTANT NOTE: MEDIA */
/* When adding new rainbow strip logo please update
CT - svn://cvs.int.f2.com.au/uidev/vanilla.fairfaxdigital.com.au/branches/[version number]/css/uncompressed/component.css
CT - svn://cvs.int.f2.com.au/uidev/vanilla.fairfaxdigital.com.au/branches/[version number]/css/img-component/sprite-components.png
CT - svn://cvs.int.f2.com.au/uidev/vanilla.fairfaxdigital.com.au/branches/[version number]/rainbowStrip-showAll.html
CT - svn://cvs.int.f2.com.au/uidev/vanilla.fairfaxdigital.com.au/branches/[version number]css/skin-europa/uncompressed/skin-europa.css
CT - svn://cvs.int.f2.com.au/uidev/vanilla.fairfaxdigital.com.au/branches/[version number]/css/skin-europa/imgsprite-skin-europa.png
CT - svn://cvs.int.f2.com.au/uidev/vanilla.fairfaxdigital.com.au/branches/[version number]/rainbowStrip-showAll-Europe.html
NonCT - svn://cvs.int.f2.com.au/uidev/smh.com.au/branches/[version number]/css/img/bg_icons.gif
NonCT - svn://cvs.int.f2.com.au/uidev/smh.com.au/branches/[version number]/css/coreSmh.css
NonCT - svn://cvs.int.f2.com.au/uidev/smh.com.au/branches/[version number]/smh-index.html
NonCT - svn://cvs.int.f2.com.au/uidev/theage.com.au/branches/[version number]/css/img/bg_icons.gif
NonCT - svn://cvs.int.f2.com.au/uidev/theage.com.au/branches/[version number]/css/coreAge.css
NonCT - svn://cvs.int.f2.com.au/uidev/theage.com.au/branches/[version number]/theage-index.html
NonCT - svn://cvs.int.f2.com.au/uidev/brisbanetimes.com.au/branches/[version number]/css/img/bg_icons.gif
NonCT - svn://cvs.int.f2.com.au/uidev/brisbanetimes.com.au/branches/[version number]/css/coreBt.css
NonCT - svn://cvs.int.f2.com.au/uidev/brisbanetimes.com.au/branches/[version number]/bt-index.html
NonCT - svn://cvs.int.f2.com.au/uidev/watoday.com.au/branches/[version number]/css/img/bg_icons.gif
NonCT - svn://cvs.int.f2.com.au/uidev/watoday.com.au/branches/[version number]/css/coreWatoday.css
NonCT - svn://cvs.int.f2.com.au/uidev/watoday.com.au/branches/[version number]/watoday-homepage.html
NonCT - svn://cvs.int.f2.com.au/uidev/business.smh.com.au/branches/[version number]/css/img/bg_icons.gif
NonCT - svn://cvs.int.f2.com.au/uidev/business.smh.com.au/branches/[version number]/css/coreSmh.css
NonCT - svn://cvs.int.f2.com.au/uidev/business.smh.com.au/branches/[version number]/businessday-index.html
NonCT - svn://cvs.int.f2.com.au/uidev/business.theage.com.au/branches/[version number]/css/img/bg_icons.gif
NonCT - svn://cvs.int.f2.com.au/uidev/business.theage.com.au/branches/[version number]/css/coreAge.css
NonCT - svn://cvs.int.f2.com.au/uidev/business.theage.com.au/branches/[version number]/businessday-index.html
NonCT - svn://cvs.int.f2.com.au/uidev/business.watoday.com.au/branches/[version number]/css/img/bg_icons.gif
NonCT - svn://cvs.int.f2.com.au/uidev/business.watoday.com.au/branches/[version number]/css/coreWatoday.css
NonCT - svn://cvs.int.f2.com.au/uidev/business.watoday.com.au/branches/[version number]/businessday-index-CT.html
NonCT - svn://cvs.int.f2.com.au/uidev/businessday.com.au/DCDS/branches/[version number]/css/img/bg_icons.gif
NonCT - svn://cvs.int.f2.com.au/uidev/businessday.com.au/DCDS/branches/[version number]/css/coreSmh.css
NonCT - svn://cvs.int.f2.com.au/uidev/businessday.com.au/DCDS/branches/[version number]/businessday-index.html
*/
/* NOTE: In a later version the class names above need to be simplified to all lower case to make the backend's life easier. */
/* End component: Marketing strip */
/* =Reader's most viewed (network-wide static component)
--------------------------------------------------------------------------------------
Dependencies: Some styles from Filmstrip component (.c5 and icons)
Uses 'px' for font-size to be indenpendent of what the skin sets font-size to. */
.top5 {background:#fff url('img-components/sprite-components.png') no-repeat -536px -50px/*bg top 5*/}
.top5 h2 {border-bottom:1px solid #ccc;border-top:2px solid #333;line-height:1.2;margin:0 0 10px;padding:4px 0}
.top5 .s1, .top5 .s2, .top5 .s3, .top5 .s4, .top5 .s5 {border-top:0}
.top5 h5 {font-weight:bold;margin-left:1.5em;padding-bottom:.3em;font-size:11px}
.top5 h5 a {color:#000;background-image:none;text-indent:0;height:auto;width:auto;display:inline}/* Remove Filmstrip styles we re-use for the masthead link (we can find a smarter way to style these links once the Rainbowstrip goes fully into Common Templates) */
.top5 h5 a:visited {color:#000}
.top5 li {line-height:1.1;margin-bottom:.4em;color:#8a8c8f;font-size:11px}
.top5 ol li a {background-image:none;text-indent:0;height:auto;width:auto;display:inline}/* Remove Filmstrip styles we re-use for the masthead link */
/* ----- IE fixes ----- */
* html .top5 ol {margin-left:8px}
*+ html .top5 ol {margin-left:8px}
* html .top5 h5 a:link,* html .top5 h5 a:visited {color:#000}
/* News ticker (flash) */
.tickerContainer {display:block;height:25px;float:right}
/* ----- IE fixes ----- */
* html .tickerContainer {margin-top:-23px}
*+ html .tickerContainer {margin-top:-23px}
/* ----- Opera 9.5 fixes ----- */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
/* 7.2 up */
head~body .tickerContainer {margin:0} /* 9 up */
:root .tickerContainer {margin:0} /* 9.5 up */
}
/* Optional banner ad */
.footer .ad {border-top:1px solid #ccc;clear:both;margin:10px auto;padding:20px 0 10px;text-align:center}
/* =Affiliate strip (network-wide static component)
-------------------------------------------------------------------------------------- */
.affStrip {position:relative;overflow:hidden}
.affStrip h2 {border-bottom:1px solid #ccc;border-top:2px solid #333;line-height:1.2;margin:0 0 10px;padding:4px 0}
.affStrip h3 {margin-bottom:.5em;font:bold 1em Arial, Helvetica, sans-serif}
.affStrip h3 a {color:#000}
.affStrip ul {position:absolute;right:0;top:10px}
.affStrip li {float:left;list-style-type:none;margin:0 .2em 0 0;color:#666}
.affStrip li {border-right:1px solid #666;margin:0 .5em 0 0;padding-right:.3em;line-height:1}
.affStrip li.last {margin:0;border:0;padding:0}
.affStrip div {position:relative;float:left;overflow:hidden;height:145px;width:172px;padding-right:10px;border-right:1px solid #ccc;margin-right:9px}
.affStrip div.last {width:172px;padding-right:0;border:0;margin-right:0}
.affStrip img {float:left;margin:0 9px 9px 0}
.affStrip p {margin-bottom:.7em}
.affStrip .links {position:absolute;bottom:0;right:10px/*=padding-right of div*/;width:103px;margin:0;line-height:1.15}
.affStrip .last .links {right:0}
/* ----- IE fixes ----- */
* html .affStrip span {display:block}
* html .affStrip h3 a {color:#000!important}
*+ html .affStrip li {margin-right:.25em}
/* =Section links (network-wide static component)
--------------------------------------------------------------------------------------
Uses 'px' for font-size to be indenpendent of what the skin sets font-size to. */
.fSectionLinks {text-align:center;border-bottom:1px solid #ccc;border-top:2px solid #333;padding:5px 0;margin:0 0 10px 0;font:normal 11px Arial, Helvetica, sans-serif}
.fSectionLinks li {display:inline;list-style-type:none;margin:0;padding:0 4px 0 2px;border-right:1px solid #ccc}
.fSectionLinks li a {color:#000;text-decoration:none}
.fSectionLinks li a:hover {text-decoration:underline}
.fSectionLinks li.last {border:0}
/* ----- IE fixes ----- */
* html .fSectionLinks li {margin-left:.5em}/*Since individual li are on new lines, IE6/7 collapses all whitespace whereas FF/IE8 honour some whitespace. This fixes the collapsed whitespace for IE6/7.*/
*+ html .fSectionLinks li {margin-left:.5em}
/* =Masthead links (network-wide static component)
--------------------------------------------------------------------------------------
Uses 'px' for font-size to be indenpendent of what the skin sets font-size to. */
.fMastheadLinks {clear:both;margin-bottom:20px;overflow:hidden;font:normal 11px Arial, Helvetica, sans-serif}
.fMastheadLinks ul {float:left;width:120px;margin-right:10px;list-style-type:none;overflow:hidden}
.fMastheadLinks .last {margin-top:1.5em}
.fMastheadLinks li {margin:0;line-height:1.5}
.fMastheadLinks h5 {font-weight:bold;color:#555}
.fMastheadLinks li a {color:#005f96;text-decoration:none}
.fMastheadLinks li a:hover {text-decoration:underline}
.footer-logo {display:block;float:right;width:114px;height:60px;background:transparent url('img-components/logo-fairfax-digital.png') no-repeat 0 0/*Glossy FD logo*/;text-indent:-9000px}
.fMastheadLinks cite {display:block;margin:10px 0 5px;color:#8a8c8f;float:right;clear:right}
/* ----- IE fixes ----- */
* html .fMastheadLinks cite {width:155px}
*+ html .fMastheadLinks cite {width:155px}
/* --------------------------------------------------------------------------------------
=Advertising components
-------------------------------------------------------------------------------------- */
/* =Gutter ads [cA-gutter] */
.gutter-full {position:absolute;top:0;left:0;width:100%;height:100%}
.gutter-full a {display:block;width:100%;height:100%;text-indent:-9999em;outline:0} /* outline:0 is so that a horizontal scrollbar isn't added to the page when the link is in focus */
.hasGutter-full {position:relative} /* the body has to be position:relative for the gutter ad to be full-height */
.hasGutter-full .wrap {position:relative} /* the wrap has to be position:relative to have its own layer stacking context (otherwise all the content inside disappears) */
.gutter-right {position:absolute}
.hasGutter-right .wrap {position:relative}
.gutter-corner {position:fixed;bottom:0;right:0}
/* ----- IE fixes ----- */
* html .gutter-corner {position:absolute} /* IE 6 doesn't support position:fixed, so we use position:absolute with the coordinates specifed as a CSS expression (defined in the JavaScript) */
* html .hasGutter-corner {position:static} /* without this, the page will grow in width forever */
.hasGutter-hide .cA-gutter {display:none} /* hide gutter ads (e.g. when the viewport width is too narrow) */
/* --------------------------------------------------------------------------------------
=Advertising (generic styles)
-------------------------------------------------------------------------------------- */
/* Put only generic ad styles here. All other ad CSS should go into the relevant
component's CSS block. This strengthens the modularity of our CSS. */
.ad {margin:0 0 20px}
h3 .ad {margin:0}
h3 .ad iframe {margin:0 0 0 .3em/*pushes away any links which might be there*/}
.adSpot-textBoxGraphicRight {overflow:hidden;margin:0 0 15px 0;padding:5px 25px 5px 1px;border:1px solid #ccc;border-right:0;background:transparent url('img-components/sprite-components.png') 100% 50% no-repeat/*bg sponsored links*/}
.adSpot-textBoxGraphicRight div {overflow:hidden;margin:0 10px 0 5px}
.adSpot-twin {border:1px solid #ccc;position:relative;margin-top:5px;padding-top:10px}
.adSpot-twin small {font-size:11px;color:#999;position:absolute;left:5px;top:-9px;background-color:#fff;padding:0 4px}
.adSpot-twin {margin-top:20px}
.adSpot-twin div {width:49.9%;float:left}
#adspot-940X20-pos-1 {margin:0;/*allow menu to overlay ad:*/position:relative;z-index:0/*menu has '1'*/}
/* HACKS TO SUPPORT INCORRECT HTML OUTPUT FROM DCDS (2009-10-22)
temporary only - remove as soon as HTML is fixed by Media tech
-------------------------------------------------------------- */
/* support secondary links in subheadingings */
.cT-strapSubHeading {position:relative}
.cT-strapSubHeading span {position:absolute;top:0;right:0}