/* Base skin EB - $Date: 2011-04-18 15:54:37 +1000 (Mon, 18 Apr 2011) $ $Revision: 10584 $ $Author: jkorff $ */ /* ____ _ _ ____ ____ ____ / ___|| | _(_)_ __ / ___/ ___/ ___| \___ \| |/ / | '_ \| | \___ \___ \ ___) | <| | | | | |___ ___) |__) | |____/|_|\_\_|_| |_|\____|____/____/ for base skin for Essential Baby Fairfax Digital CSS framework ----------------------------------------------------------------------------------------- Skin only. !! Here go fonts, colours, backgrounds, background images, borders NOTES: - use shorthand whenever possible - only use 'em' for font-size (accessibility) - don't specify container widths. Specify percentages (usually 100%) so they fit into the width you define in component.css. Colour scheme: -------------- links: #354B74 () links, hovered: #f93 () links, active: #f93 () main nav bg: #F8D97F () headings #00548c (dark blue) secondary colour: #b1c8dc (light blue) tertiary colour: #D5EAFF (very light blue) */ /* -------------------------------------------------------------------------------------- =Global -------------------------------------------------------------------------------------- */ /* Specify the font once in % here and in 'em' elsewhere to resize it easily. Browser default: 16px => 76%=12px => 1em=12px */ html {background-color:#fff} body {font:76%/1.4 Arial, Helvetica, sans-serif;background:#fff url("img/sprite-base-skin-eb.png") repeat-y -81px 0/*borders*/;margin:0 auto;width:1000px} /* ----- IE fixes ----- */ * html body {position:relative} *+ html body {position:relative} a/*,a:link*/ {color:#354B74;text-decoration:none} a:visited {color:#354B74} a:hover {text-decoration:underline;color:#f93} a:active {color:#f93} img {vertical-align:bottom} .hide {position:absolute;left:-9000px;font-size:0} p strong {font-weight:bold} p em {font-style:italic} hr.cN-separator {border-top:2px solid #b1c8dc} hr.separator-secondary /* extends cN-separator */ {border-top-width:1px} table {border-collapse:collapse; margin:5px 0 10px; border:2px solid #ddd; border-width:2px 0} table th {padding:3px;font-weight:bold} table td {padding:3px;border-top:1px solid #ddd} /* -------------------------------------------------------------------------------------- =Layout -------------------------------------------------------------------------------------- */ .wrap {background-color:#fff} .hidden {position:absolute;left:-9000px} .aside {margin-bottom:1em} /* -------------------------------------------------------------------------------------- =Headings and header components -------------------------------------------------------------------------------------- */ h1.cN-headingPage {color:#354B74;font-size:2.4em; line-height:1.2em } * html h1.cN-headingPage { font-weight:normal } /* IE6 doesn't support inherit in the reset.css */ * + html h1.cN-headingPage { font-weight:normal } /* IE7 doesn't support inherit in the reset.css */ h2 {font:normal 2.4em Arial, Helvetica, sans-serif;color:#354B74 } h3 {font:normal 1.8em Arial, Helvetica, sans-serif;color:#354B74} h4 {font-weight:bold;text-transform:uppercase;color:#666} .cN-headingPage {margin-bottom:.2em} .cN-headingPage span {font:normal .4em Arial, Helvetica, sans-serif} .cT-mediaTypeHeading {font-size:1.5em;font-weight:normal;margin-bottom:.4em;color:#222;border-top:1px solid #ccc} .cT-mediaTypeHeading a{color:#222} h1.cN-headerRich {font-size:2em;color:#333} .aside .cN-strapSubheading {border-top:2px solid #b1c8dc;padding-top:.25em} #content .cN-strapSubheading {margin-top:10px;clear:both;color:#666;font-size:1.3333em;font-weight:bold} .cN-strapSubheading.icon-fave {background:url("img/sprite-base-skin-eb.png") no-repeat -1090px -170px;padding-left:26px} * + html .cN-strapSubheading.icon-fave {background-position:-1090px -168px} * html .cN-strapSubheading.icon-fave {background-position:-1090px -168px} .cN-strapHeading {clear:both;border-top:2px solid #b1c8dc;padding-top:.25em;font-size:2em} .cT-strapSubHeading {border-top:2px solid #b1c8dc;color:#354B74;font:1.8em Arial,Helvetica,sans-serif;margin:0 0 0.3em;text-transform:none;} .span-11 h4.cT-strapSubHeading a:hover{color:#354B74;} /* -------------------------------------------------------------------------------------- =Header -------------------------------------------------------------------------------------- */ .header {background-color:#fff;border-bottom:1px solid #ccc;margin-bottom:10px} .header .mh-logo {height:94px;width:181px;background:transparent url('img/sprite-base-skin-eb.png') no-repeat -420px 0/*EB logo*/} /*.header .mh-logo {background-image:url(img/sprite-base-skin-eb-easter.png)} /* Easter logo contains a lot of colours, that's the reason we separate it from main sprite */ .header .mh-logo a {overflow:hidden;display:block;height:94px;width:181px;text-indent:-9000px} .header h2 {display:none;/*not used*/} /* ----- IE fixes ----- */ * html .header {overflow:visible!important} /* Multimedia header */ .mT-headerMultimedia h1 {display:block;position:absolute;top:0;left:50%;text-align:center;height:50px;font-size:1.85em;background:none;text-indent:0} .mT-headerMultimedia h1 a {margin:0 0 0 -50%} .mT-headerMultimedia .mh-logo {margin:0 0 1em;float:none} .mT-headerMultimedia p {float:right} /* ----- IE fixes ----- */ * html .mT-headerMultimedia h1 a {position:relative} /* Main navigation */ #nav {background-color:#F8D97F/* Default */;font:bold 1em Arial, Helvetica, sans-serif;clear:both;margin-top:2em} #nav a {line-height:.94;color:#333} #nav .selected a {color:#333} /* Nav dropdown options */ #nav li ul {border-top:none} #nav ul li {background:#F8D97F } #nav ul li a {color:#333;font-size:.92em;font-weight:normal;width:85px} #nav li.selected a {background-color:#fff;float:left}/* Single main nav item selected = white bg */ #nav .hasDropdown {padding-right:15px;margin-right:27px;background:transparent url('img/sprite-base-skin-eb.png') no-repeat 100% -155px/*down arrow*/;float:right} /* Nav sub nav (
    , no dropdown) */ #nav ol {height:2em;background-color:#D5EAFF} /* Sub nav item and sub nav background = blue */ #nav .selected ol a {padding:3px 8px 4px 7px;background:transparent url('img/sprite-base-skin-eb.png') no-repeat 100% -77px/*vertical bar*/;color:#555} #nav .selected ol .last a {background-image:none} #nav.hasSubNav {padding-bottom:1.9em} #nav.hasSubNav li.selected a {background-color:#D5EAFF} /* ----- IE fixes ----- */ * html #nav .hasDropdown {display:inline} /* Breadcrumb */ .breadcrumb {color:#8a8c8f;font-size:.94em;line-height:2.6;height:28px} p.breadcrumb a {color:#444} /* Alternative formats */ .altFormats {height:28px;margin-left:20px} .altFormats li {line-height:2.6;font-size:.94em;list-style-type:none;margin:0;padding-right:7px;margin-right:8px;background:transparent url('img/sprite-base-skin-eb.png') no-repeat 100% -69px/*vertical bar*/} .altFormats .last {background:none;padding:0;margin:0} .altFormats .text a {color:#000} .altFormats .rss a {color:#cb6927} /* -------------------------------------------------------------------------------------- =Search -------------------------------------------------------------------------------------- */ /* cN-searchBox */ .cN-searchBox form {bottom:3px;height:21px;width:301px;background:transparent url('img/sprite-base-skin-eb.png') no-repeat -115px -80px/*bg search box + bg search button*/} .cN-searchBox label {width:auto;display:inline} .cN-searchBox label input {padding:2px 3px 0;width:143px;height:18px;font-size:1em;border:0;background-color:transparent} .ddown {height:21px;top:0;left:1px;padding:0 3px;width:79px;font-size:.9em;line-height:19px;list-style-type:none} .ddown a {display:block;height:20px;width:100%} .ddown .selected {color:#999;width:77px;overflow:hidden} .ddown .srch-wrap {left:-1px;background-color:#fff;border:1px solid #ddd;border-width:0 1px 1px 0/*Create fake dropshadow*/} .ddown .srch-wrap div {position:absolute;left:1px;top:0;width:79px;border:1px solid #fff} .ddown ul {padding:0 5px;border:1px solid #b7b7b7;background-color:#fff} .ddown li {margin:0;list-style-type:none;white-space:nowrap} .ddown li li {padding-top:1px;border-top:1px dotted #ccc} .ddown .first {border:0} .cN-searchBox .open {border:1px solid #b7b7b7;width:75px;height:22px;border-bottom-width:0;background-color:#fff} .btnSubmit {position:absolute;right:0;top:0;width:auto;cursor:pointer;border:0;width:65px;height:22px;padding-bottom:3px;color:#666;background:transparent url('img/sprite-base-skin-news.png') no-repeat -351px -80px/*search button background*/} /* Search form in web search result page: */ .searchResultWeb .cN-searchBox {clear:both;height:35px;background-color:#dedede} .searchResultWeb .cN-searchBox form {margin:0 0 0 200px;float:left;border:3px solid #fff;background-color:#fff} .searchResultWeb .cN-searchBox h2 {left:-86px;top:2px;color:#666;font:bold 1em Arial, Arial, sans-serif} /* ----- IE fixes ----- */ * html .cN-searchBox .srch-wrap {top:20px} * html .cN-searchBox .open {height:20px} * html .cN-searchBox .ddown li {position:absolute;right:0;top:0} * html .cN-searchBox .ddown li li {position:static} * html .btnSubmit {padding-bottom:0} * html .cN-searchBox .selected {width:auto} *+ html .btnSubmit {padding-bottom:0} /* -------------------------------------------------------------------------------------- =Images -------------------------------------------------------------------------------------- */ .cT-imageLandscape,.cT-imagePortrait {text-align:center/*Centers image if its width is below container width*/} .cT-imageLandscape p,.cT-imagePortrait p/*,.cT-imageMultimedia p*/,.cT-imageMultimedia h4,.cT-imageGallerySnapshot .wof {clear:left;text-align:left;font-size:.94em;color:#333;background-color:#ECECEC ;padding:.3em .5em .5em} .cT-imageLandscape em,.cT-imagePortrait em,.cT-imageGallerySnapshot em {font-style:italic} .cT-imageMultimedia h4 {text-transform:none;padding-bottom:0} .cT-imageMultimedia h4 em {text-transform:uppercase} /* .cT-imageMultimedia div {background-color:#ccc;text-align:center} */ .cT-imageGallerySnapshot {text-align:center} .cT-imageGallerySnapshot h4 {font-size:1em;text-transform:none;color:#333} .cT-imageGallerySnapshot .wof {margin:0} .cT-imageGallerySnapshot .play-video,.cT-imageGallerySnapshot .more-photos {display:block;float:none/*Allow smaller images to be centred*/;margin-right:0} .cT-imageGallerySnapshot ul {background-color:#ECECEC ;padding:0 .5em .5em} .cT-imageGallerySnapshot ul a {display:block;height:40px;overflow:hidden}/*Ensure smaller image height does not affect link height; cut any overflow*/ /* Overlays ("More photos" or "Play video" icons) Icon scheme: x-coords: photos:320, photos hover:400, play:480, play hover:560 y-coords: smallest:120, small:135, medium:152, large: 173 */ .play-video,.more-photos {margin:0 8px 0 0/*replicate margin from .cN-storyHeadlineLead img*/} a.play-video img,a.more-photos img {margin:0} /* Remove margin for images followed by caption: */ .cT-imageLandscape .play-video,.cT-imageLandscape .more-photos, .cT-imagePortrait .play-video,.cT-imagePortrait .more-photos, .cN-storyImageLead .play-video,.cN-storyImageLead .more-photos {margin:0} /* Default overlay button image: medium size */ .play-video span,.more-photos span {text-indent:-9000px;background:transparent url('img/sprite-base-skin-eb.png') no-repeat -320px -152px/*overlay icon*/;right:4px; bottom:4px} /* tiny icon */ span.size-tny {height:11px;width:13px} .more-photos .size-tny {background-position:-320px -120px} .more-photos:hover .size-tny {background-position:-400px -120px} .play-video .size-tny {background-position:-480px -120px} .play-video:hover .size-tny {background-position:-560px -120px} /* small icon */ span.size-sml {height:14px;width:38px} .more-photos .size-sml {background-position:-320px -135px} .more-photos:hover .size-sml {background-position:-400px -135px} .play-video .size-sml {background-position:-480px -135px} .play-video:hover .size-sml {background-position:-560px -135px} /* medium icon */ span.size-med {/* Same as defaults. */} .more-photos .size-med {background-position:-320px -152px} .more-photos:hover .size-med {background-position:-400px -152px} .play-video .size-med {background-position:-480px -152px} .play-video:hover .size-med {background-position:-560px -152px} /* large icon */ span.size-lrg {height:22px;width:61px} .more-photos .size-lrg {background-position:-320px -173px} .more-photos:hover .size-lrg {background-position:-400px -173px} .play-video .size-lrg {background-position:-480px -173px} .play-video:hover .size-lrg {background-position:-560px -173px} /* ----- IE fixes ----- */ * html .play-video span,* html .more-photos span {overflow:hidden} .imageRight {float:right;margin:0 0 1em 1em} .imageLeft {float:left;margin:0 1em 1em 0} /* -------------------------------------------------------------------------------------- =Story components -------------------------------------------------------------------------------------- */ /* Media = image: */ .media-image .wof {clear:both;padding:6px/*Switch to pixels to allow h4 to overlay image*/;background:#ebebeb;color:#000} .media-image h4 {margin:-21px 0 0 -6px;color:#fff;padding:0 .4em;position:relative;float:left;background:#f93 } .media-image .comments span {background-position:3px -44px} .strapFeaturePortrait .wof {background:#fff6b5} /* ----- IE fixes ----- */ * html .media-image h4 {margin-left:-3px} /* Story common styles */ .cN-storyImageLead h3,.cN-storyHeadlineLead h3 {margin-bottom:.1em} .cN-storyImageLead cite,.cN-storyHeadlineLead cite {font-size:.92em;padding-right:.6em;margin-right:.4em;background:transparent url('img/sprite-base-skin-eb.png') no-repeat 100% -109px/*vertical bar*/} .cN-storyImageLead .comments,.cN-storyHeadlineLead .comments {display:inline;margin-right:.5em;font-size:.92em} .comments span {display:inline-block;width:22px;height:15px;padding:0 0 1px 3px;text-align:center;color:#333;font-size:.9em;background:#fff url('img/sprite-base-skin-eb.png') no-repeat -115px -118px/*comment icon*/} .comments a:hover span {text-decoration:none}/* Remove hover effect from comment number bubble */ .cN-storyImageLead dl,.cN-storyHeadlineLead dl {font-size:.92em} .cN-storyImageLead dl,.cN-storyImageLead dt,.cN-storyImageLead dd, .cN-storyHeadlineLead dl,.cN-storyHeadlineLead dt,.cN-storyHeadlineLead dd {display:inline} .cN-storyImageLead.definitions-multiple dl {font-size:1em} .cN-storyImageLead.definitions-multiple dt {position:absolute;left:-9999px;font-size:0} /* for accessibility only */ .cN-storyImageLead.definitions-multiple dd {border-right:1px solid #b4c5d5;padding-right:6px;margin-right:4px} .cN-storyImageLead.definitions-multiple dd.last {border-right:none;padding-right:0;margin-right:0} /* By adding media classes we can re-style so that each medium get an individual look: */ /* Media = image: */ .media-image .comments span {background-position:-140px -118px;background-color:#ececec} /* cN-storyHeadlineLead */ .cN-storyImageLead, .cN-storyHeadlineLead, .cN-story {padding-top:.5em} .cN-storyImageLead h4, .cN-storyHeadlineLead h4, .cN-story h4{font-size:.92em} .cN-storyHeadlineLead h3 {line-height:normal;font-weight:bold;font-size:1.2em} .cN-storyHeadlineLead img {float:left;margin:0 9px 9px 0} .cN-storyHeadlineLead cite {background-position:100% -79px/*vertical bar*/;color:#666} .cN-storyHeadlineLead small {color:#860303} .cN-storyHeadlineLead.date small {color:#666} .cN-storyHeadlineLead ul {clear:both/*Let links always be below any image*/} /* cN-storyImageLead */ .cN-storyImageLead h3 {font-size:1.6em} .cN-storyImageLead cite {background-position:100% -79px;color:#666} .cN-storyImageLead small {color:#860303} .cN-storyImageLead.date small {color:#666} /* ----- IE fixes ----- */ /* Problem: IE does misposition the bg image when the content of the tag is very long. There's no fix for this in CSS2 (if we want to avoid additional markup or a Javascript fix) => put the bg image on the element: */ *+ html .cN-storyImageLead cite {background-image:none;padding-right:0} * html .cN-storyImageLead cite {background-image:none;padding-right:0} *+ html .cN-storyImageLead small {display:inline-block;height:1%;padding-right:.6em/*replaces padding for */;background:transparent url('img/sprite-base-skin-eb.png') no-repeat 100% -79px/*vertical bar*/} * html .cN-storyImageLead small {display:inline-block;height:1%;padding-right:.6em/*replaces padding for */;background:transparent url('img/sprite-base-skin-eb.png') no-repeat 100% -79px/*vertical bar*/} *+ .cN-storyHeadlineLead.cfix {clear:both} /*clear only in IE7 */ .cN-storyHeadlineOnly {font-size:1.35em;border-bottom:1px dotted #ccc;margin-bottom:0.4em;padding-bottom:0.4em} .storyColumn .storyFirst{overflow:hidden;margin-bottom:0.4em;border-bottom:1px dotted #ccc} .cN-storyHeadlineQuote blockquote {margin-top:.3em} .cN-storyHeadlineQuote p {font:italic 1.6em Georgia, "Times New Roman", Times, serif;text-indent:1.1em;background:transparent url('img/sprite-base-skin-eb.png') no-repeat -1483px -182px/*opening quote*/} .cN-storyHeadlineQuote p a {color:#444} .cN-storyHeadlineQuote span {display:inline-block;width:17px;height:14px;margin-left:.2em;background:transparent url('img/sprite-base-skin-eb.png') no-repeat -190px -118px/*closing quote*/} /* ----- IE fixes ----- */ * html .cN-storyHeadlineQuote span {font-size:0/*otherwise IE6 makes span too wide*/} *+ html .cN-storyHeadlineQuote span {height:20px} /* storyFeatured */ .storyFeatured {color:#000;border-top:none} .storyFeatured h3 {clear:left;line-height:1.2em} .storyFeatured .wof a {color:#354B74} .storyFeatured .wof a:hover{color:#f93} .storyFeatured small {color:#860303} .storyFeatured cite {color:#000;background-position:100% 1px/*vertical bar*/} .storyFeatured .wof {background-color:#F8D97F} .storyFeatured .comments span {background-position:-115px -118px;background-color:#F8D97F} /* ----- IE fixes ----- */ * html .storyFeatured h4 {margin-left:-4px} /* storyFirst */ .storyFirst h3 {font-size:1.83em} .cT-storyDetails {color:#666;line-height:1.2} .cT-storyDetails h5 {font-weight:bold} .cT-storyDetails p {float:left} .cT-storyDetails .comments {float:right} .cT-storyDetails .single {border-left:1px solid #7d6947;padding-left:.3em} /* Publication logos (size:16 x 70 px) */ .publication {height:16px;float:none!important} /* NOTE: This is implemented such that new publishers by default show text only. */ /* NOTE: Keep class list below sorted alphabetically for better maintenance: */ .pubA2 {text-indent:-9000px;background:transparent url('img/sprite_publication-logos.png') no-repeat 0 0}/* A2 */ .pubBusinessD{text-indent:-9000px;background:transparent url('img/sprite_publication-logos.png') no-repeat 0 -32px}/* BusinessDay */ .pubDomain {text-indent:-9000px;background:transparent url('img/sprite_publication-logos.png') no-repeat 0 -48px}/* Domain */ .pubDrive {text-indent:-9000px;background:transparent url('img/sprite_publication-logos.png') no-repeat 0 -64px}/* Drive */ .pubEdu {text-indent:-9000px;background:transparent url('img/sprite_publication-logos.png') no-repeat 0 -80px}/* Education */ .pubEG {text-indent:-9000px;background:transparent url('img/sprite_publication-logos.png') no-repeat 0 -96px}/* EG */ .pubEpicure {text-indent:-9000px;background:transparent url('img/sprite_publication-logos.png') no-repeat 0 -112px}/* Epicure */ .pubGreenG {text-indent:-9000px;background:transparent url('img/sprite_publication-logos.png') no-repeat 0 -128px}/* Green Guide */ .pubInsight {text-indent:-9000px;background:transparent url('img/sprite_publication-logos.png') no-repeat 0 -144px}/* Insight */ .pubLivewire {text-indent:-9000px;background:transparent url('img/sprite_publication-logos.png') no-repeat 0 -160px}/* Livewire */ .pubM {text-indent:-9000px;background:transparent url('img/sprite_publication-logos.png') no-repeat 0 -176px}/* M */ .pubMetro {text-indent:-9000px;background:transparent url('img/sprite_publication-logos.png') no-repeat 0 -190px}/* Metro */ .pubMyCareer {text-indent:-9000px;background:transparent url('img/sprite_publication-logos.png') no-repeat 0 -208px}/* MyCareer */ .pubNext {text-indent:-9000px;background:transparent url('img/sprite_publication-logos.png') no-repeat 0 -224px}/* Next */ .pubSport {text-indent:-9000px;background:transparent url('img/sprite_publication-logos.png') no-repeat 0 -240px}/* Sport */ .pubTraveller{text-indent:-9000px;background:transparent url('img/sprite_publication-logos.png') no-repeat 0 -256px}/* Traveller */ /* NOTE: Keep class list above sorted alphabetically for better maintenance */ /* cT-storyTools */ .cT-storyTools .cT-strapHeading {background:none;color:#000;border-top:2px solid #ccc;padding:0;font-size:1.4em;color:#354B74;font-weight:bold;padding-top:.25em} .cT-storyTools ul {list-style-type:none} .cT-storyTools li {border-bottom:1px solid #ececec;margin-left:4px;padding:3px 0;position:relative} .cT-storyTools a {display:block;padding-left:25px;background:transparent url('img/sprite-base-skin-eb.png') no-repeat -1500px 0/*default:no icon*/} .cT-storyTools .email a {background-position:-1444px -211px/*email*/} .cT-storyTools .facebook a {background-position:-1089px -274px/*facebook*/} .cT-storyTools .print a {background-position:-1428px -227px/*printer*/} .cT-storyTools .reprints a {background-position:-1181px 1px/*reprint-permissions*/} .cT-storyTools .ad {margin:10px 0 0} /* cT-columnStrap (middle stories column) */ .span-5 .wof h3{font-size:1.2em} .span-5 p{font-size:.92em} .cN-linkList h3 {margin-bottom:.3em;border-top:2px solid #ccc;margin-bottom:.3em;padding:.25em 0 0;font-size:1.4em; font-weight:bold; color:#354B74} .cN-linkList ol {margin-left:.7em;font-size:.94em} .cN-linkList .last {list-style-type:none;font-weight:bold;padding-left:15px;margin:.5em 0 0;background:transparent url('img/sprite-base-skin-eb.png') no-repeat -1332px -327px/*icons: plus*/} /* -------------------------------------------------------------------------------------- =Straps -------------------------------------------------------------------------------------- */ .cT-strapHeading {font-size:2em;font-weight:normal;color:#354B74;margin:0 0 .3em;border-top:2px solid #B1C8DC;padding-top:.25em} /* Secondary links in heading */ .cT-strapHeading span {margin-top:4px} .cT-strapHeading span a {float:left;margin:2px .5em 0 0;padding-right:.5em;color:#000;font:normal .47em Arial, Helvetica, sans-serif;background:transparent url('img/sprite-base-skin-eb.png') no-repeat 100% -79px/*vertical bar*/} .cT-strapHeading span .last {background-image:none;padding-right:0;margin-right:0} .strapHeadingOvulation /*extends cT-strapHeading*/ {position:relative;padding:9px 0;margin:0 0 10px;font-size:1.5em;font-weight:bold;color:#354b74;text-align:center;border:1px solid #ccc;border-width:1px 0;background:#eee} .strapHeadingOvulation span {position:static} .strapHeadingOvulation span a {position:absolute;left:5px;top:11px;display:block;font-size:.65em;font-weight:bold;background:none} .strapHeadingOvulation span a:before {content:"\00AB\00A0"/*=« and  */} .strapHeadingOvulation span .last {left:auto;right:5px} .strapHeadingOvulation span .last:before {content:""} .strapHeadingOvulation span .last:after {content:" \00BB"/*=»*/} /* ----- IE fixes ----- */ * html .strapHeadingOvulation span a {left:-263px} .cT-strapFeature h2 {font-size:1.5em;margin-bottom:.5em} .cT-strapFeature h2 a {color:#000} .cT-strapFeature .more {font-size:.92em} .strapFeaturePortrait /*extends cT-strapFeature*/ .media-image, .strapFeaturePortrait .media-video, .strapFeaturePortrait .storyColumn {width:300px}/*Re-format feature strap to use portrait images (300px wide). Default: landscape.*/ .cT-strapMoreLink { font-weight:bold;padding-left:10px;background:transparent url('img/sprite-base-skin-eb.png') no-repeat -1332px -327px/*icons: plus*/} /* -------------------------------------------------------------------------------------- =Article -------------------------------------------------------------------------------------- */ .articleBody > p, .articleBody > ul {font-size:1.2em;margin-bottom:.8em}/* IE6 ignores these rules */ .articleBody strong {font-weight:bold} .articleBody em {font-style:italic} /* ----- IE fixes ----- */ * html .articleBody p, * html .articleBody ul {font-size:1.2em;margin-bottom:.8em} * html .articleBody div p {font-size:.94em} .cT-reviewDetails {border-top:2px solid #ccc} .cT-reviewDetails dt {font-weight:bold;margin-top:.3em} .cT-reviewDetails dd {line-height:1.2} .cN-quote {margin:1.5em 0} .cN-quote p {color:#555;font:normal 1.5em Arial, Helvetica, sans-serif;text-indent:1.1em;background:transparent url('img/sprite-base-skin-eb.png') no-repeat -1483px -182px/*opening quote*/} .cN-quote span {display:inline-block;width:17px;height:14px;margin-left:.2em;background:transparent url('img/sprite-base-skin-eb.png') no-repeat -190px -118px/*closing quote*/} .cT-relatedCoverageContentPage,.cN-todayInSection {border-top:2px solid #ccc;padding-top:.4em} .cN-relatedCoverage h3,.cN-todayInSection h3 {margin-bottom:.2em;font-size:1.5em} .cN-relatedCoverage .cN-story h3 {font-size:1.2em;font-weight:bold} .sidebar .cN-story {border-bottom:1px dotted #ccc;margin-bottom:0;padding-bottom:.4em} .sidebar .cN-relatedCoverage h3,.sidebar .cN-todayInSection h3 {font-size:1.4em;margin-bottom:.4em;font-weight:bold} .sidebar .cN-story h3{display:inline} .cN-relatedCoverage img,.cN-todayInSection img {float:left;;margin:0 9px 9px 0} .cN-relatedCoverage h3,.cN-relatedCoverage h4 {display:inline} .sidebar .cN-relatedCoverage .cN-story h4,.cN-todayInSection .cN-story h4 {font-size:.94em;font-weight:normal;color:#666;display:inline} .sidebar .cN-relatedCoverage .cN-story h3,.cN-todayInSection .cN-story h3 {font:bold .92em Arial, Helvetica, sans-serif;margin-bottom:0} .sidebar .cN-relatedCoverage .cN-story p,.cN-todayInSection .cN-story p {font-size:.92em;color:#666} .cN-relatedCoverage .cN-story cite,.cN-todayInSection .cN-story cite {text-transform:uppercase;padding-right:.4em;margin-right:.2em;color:#666;background:transparent url('img/sprite-base-skin-eb.png') no-repeat 100% -79px/*vertical bar*/} .cN-relatedCoverage .cN-story small,.cN-todayInSection .cN-story small {color:#860303} .cN-todayInSection .more {font-weight:bold;padding-left:15px;background:transparent url('img/sprite-base-skin-eb.png') no-repeat -1332px -327px/*icons: plus*/;margin-top:10px;display:block} .cN-todayInSection .cN-story .wof {margin-bottom:0} /* ----- IE fixes ----- */ *+ html .cN-relatedCoverage h3,*+ html .cN-todayInSection h3 {position:relative} * html .cN-relatedCoverage h4,* html .cN-todayInSection h4 {float:left;padding-right:.4em/* IE does not separate an inlined h4 & h3 with whitespace -> simulate it with padding. */} *+ html .cN-relatedCoverage h4,*+ html .cN-todayInSection h4 {float:left;padding-right:.3em/* dto. */} * html .sidebar .cN-relatedCoverage .cN-story h4,* html .cN-todayInSection .cN-story h4 {font-size:.85em} *+ html .sidebar .cN-relatedCoverage .cN-story h4,*+ html .cN-todayInSection .cN-story h4 {font-size:.85em} .cN-storyCommentLatest {border-top:2px solid #ccc;padding-top:.7em} .cN-storyCommentLatest p {margin-bottom:.3em;font:bold 1.25em Arial, Helvetica, sans-serif;color:#555;text-indent:1.3em;background:transparent url('img/sprite-base-skin-eb.png') no-repeat -1460px -199px/*opening quotes*/} .cN-storyCommentLatest span {display:inline-block;width:13px;height:11px;margin-left:.2em;background:transparent url('img/sprite-base-skin-eb.png') no-repeat -215px -118px/*closing quotes*/} .cN-storyCommentLatest cite,.cN-storyCommentLatest a {font-size:.92em} .cT-articleMore {font-weight:bold} .cT-disclaimer {color:#666;line-height:1.2;font-size:.92em} .statement {border-bottom:1px solid #ccc;padding-bottom:.3em;margin-bottom:.3em} .statement img {margin-right:1em} /* ----- IE fixes ----- */ * html .statement {height:1%} *+ html .statement {vertical-align:bottom} .cN-otherWebLinks {border-top:2px solid #ccc;padding-top:.4em} .cN-otherWebLinks h3 {font-size:1.5em} .cN-otherWebLinks li {font-weight:bold;list-style-type:none;color:#666;margin:5px 0 0;padding:0 0 5px;border-bottom:1px dotted #ccc} .cT-relatedCoverageContentPage {margin-bottom:20px} .cT-relatedCoverageContentPage .more {font-weight:bold;padding-left:10px;background:transparent url('img/sprite-base-skin-eb.png') no-repeat -1332px -327px/*icons: plus*/} .cN-textGeneric {margin-bottom:20px} .cN-textGeneric p, .cN-textGeneric blockquote, .cN-textGeneric ul {margin-bottom:1em} .cN-textGeneric li {margin-bottom:.55em} .cN-textGeneric blockquote p {margin-bottom:0;font-style:italic;font-weight:bold;color:#333} .cN-textGeneric blockquote cite {display:block;font-size:.916em;text-align:right;color:#666} /* -------------------------------------------------------------------------------------- =Multimedia -------------------------------------------------------------------------------------- */ .cN-multimediaGroup div li {position:relative;width:110px;height:140px;margin-right:6px;font-size:.94em;border:1px solid #ccc} .cN-multimediaGroup div a {display:block;text-align:center;margin:5px} .cN-multimediaGroup p {margin:0 5px} .cN-multimediaGroup div .more {position:absolute;right:2px;bottom:2px;margin:0} /* ----- IE fixes ----- */ * html .cN-multimediaGroup h3 { font-size:1.4em } /* reset font size to ensure heading height is acutally 17px in IE 6 (and other parts of the sprite don't peek through) */ .cT-multimediaMetadata cite {font-size:.92em;padding-right:.6em;margin-right:.4em;background:transparent url('img/sprite-base-skin-eb.png') no-repeat 100% -79px/*vertical bar*/} .cT-multimediaMetadata small {color:#860303} .cT-multimediaMetadata.date small {color:#666} /* cT-imageMultimedia, used mainly for video */ .cT-imageMultimedia h4 {text-transform:none;padding-bottom:0} .cT-imageMultimedia h4 em {text-transform:uppercase} .cT-imageMultimedia .videoWrap {background:#dedede;border-bottom:1px solid #aaa;height:236px/*=Player height*/} .cT-imageMultimedia .videoWrap p {padding-top:100px;text-align:center} .cT-imageMultimedia .videoWrap p strong {display:block;font-weight:bold;font-size:1.5em} .cT-imageMultimedia .videoWrap div {position:absolute;top:0;left:0/*Overlay message in .videoWrap*/} .cT-imageMultimedia .fdVideo {z-index:1} .cT-imageMultimedia .fdVideoWof {padding:.3em .5em;overflow:hidden} .cT-imageMultimedia .fdVideoWof h4 {padding:0} .cT-imageMultimedia .fdVideoWof p em {color:#666} .cT-imageMultimedia .fdVideoWof ul {float:right} .cT-imageMultimedia .fdVideoWof li {list-style-type:none;float:left;padding-right:.3em;margin:0 .3em 0 0;background:transparent url('img/sprite-base-skin-eb.png') no-repeat 100% 2px/*vertical bar*/} .cT-imageMultimedia .fdVideoWof .last {background-image:none;margin:0;padding:0} /* State when player is not yet loaded: Show static image and "Play video" overlay: */ .cT-imageMultimedia .play-video {overflow:hidden;margin:0} /* Overlay screens: */ .overlay {display:none/*displayed by Javascript*/;position:absolute;top:0;left:0;z-index:5;width:390px;height:88%/*percentage in order to capture case where wof goes over more than just one line*/;padding:4% 15px;color:#ccc;background:#000;overflow:hidden/*mainly for Safari/Chrome where you can expand textarea*/} .overlay.visible {display:block} .overlay h3 {margin-bottom:.2em;font:normal 1.4em Georgia, "Times New Roman", Times, serif;color:#1ca7ef} .cT-imageMultimedia .overlay h4 {padding:0;color:#eee;background:none} .cT-imageMultimedia .overlay p {padding:0!important;border:none;background:none} .overlay .previous {position:absolute;right:15px;top:11px;color:#1ca7ef;font-size:.94em} .overlay .submit input {height:24px;padding:0;border:0;font-weight:bold;cursor:pointer;background:transparent url('img/sprite-base-skin-eb.png') no-repeat -115px -53px/*bg button video overlay*/} /* Pre play */ .overlayPrePlay {top:162px;padding:5px;width:410px;height:20px} .overlayPrePlay p {float:left;padding:0;color:#1ca7ef;line-height:20px;font-weight:bold;font-size:1.15em} .overlayPrePlay span {color:#fff;font-weight:bold} .overlayPrePlay li {margin:0;display:inline/*Only show 'Stop' button*/} .overlayPrePlay .last {display:none}/*Hide 'Play' button - not used*/ .overlayPrePlay a {display:block;height:20px;padding:0 5px 0 27px;float:right;font-size:.94em;line-height:20px;border:1px solid #999;color:#fff;background:transparent url('img/sprite-base-skin-eb.png') no-repeat -1116px -41px/*video: stop button*/} .overlayAd {width:300px;height:86%/*percentage in order to capture case where wof goes over more than just one line*/;padding:4% 60px 6%} .overlayAd .ad {margin:0} .overlayFeedback p {font-size:.94em;font-weight:bold} .overlayFeedback li {margin:0 0 0 1em;font-size:.94em} .overlayFeedback form {margin-top:15px} .overlayFeedback form li {margin:0} .overlayFeedback label {float:left;width:63px} .overlayFeedback input {float:left;width:262px;margin-bottom:5px} .overlayFeedback select {float:left;width:266px;margin-bottom:5px} .overlayFeedback textarea {float:left;width:262px;height:38px;margin-bottom:5px} .overlayFeedback .submit input {width:114px} .overlayThanks {padding:17px 15px;height:203px} .overlayThanks h4 {margin-top:1em;padding:0;color:#ccc;font-size:1.2em} .overlayThanks p {font-weight:normal;margin-top:1em} .overlaySettings p {font-weight:bold;font-size:.94em} .overlaySettings form {margin-top:10px} .overlaySettings li {margin:0;font-size:.94em} .overlaySettings label {line-height:28px} .overlaySettings input {margin:3px 5px 0 0} .overlaySettings .button {float:left;margin-bottom:.8em} .overlaySettings .submit input {width:146px} .overlaySettings .submit p {clear:left;float:left;font-weight:normal} .overlayPostPlay {padding:17px 15px;height:203px} .overlayPostPlay ul {margin:10px 0 0 -7px} .overlayPostPlay li {float:left;width:92px;list-style-type:none;margin:0 0 0 7px;font-size:.94em} .overlayPostPlay li a {display:block;color:#fefefe} .overlayPostPlay .play-video {margin-right:0} .overlayPostPlay .replay {display:block;width:70px;height:20px;margin:40px auto 0;padding-left:27px;line-height:20px;color:#1ca7ef;;background:transparent url('img/sprite-base-skin-eb.png') no-repeat -1116px -63px/*video: play button*/} .overlayPostPlay .social {overflow:hidden;width:350px;margin:0 auto} .overlayPostPlay .social li {padding-left:17px;background:transparent url('img/sprite-base-skin-news.png') no-repeat -1090px -258px/*icons: email small*/} .overlayPostPlay .social .facebook {background-position:-1090px -276px} .overlayPostPlay .social .copy {background-position:-1090px -343px} .overlayPostPlay .social {overflow:hidden;width:350px;margin:0 auto} .overlayPostPlay .social li {padding-left:17px;background:transparent url('img/sprite-base-skin-news.gif') no-repeat -1090px -258px/*icons: email small*/} .overlayPostPlay .social .facebook {background-position:-1090px -276px} .overlayPostPlay .social .copy {background-position:-1090px -343px} .overlayHelp {height:94%;padding:2% 15px}/*Need to accommodate lots of text.*/ .overlayHelp p {font-size:.87em} /* ----- IE fixes ----- */ * html .overlay .previous {color:#1ca7ef!important} * html .overlaySettings .submit input {margin-top:1.5em} * html .overlaySettings .submit p {width:290px} * html .cT-imageMultimedia .fdVideoWof {height:1%} * html .overlayPostPlay ul {height:1%;width:397px/*IE6 needs width here - adjust for different column widths*/} * html .overlayPostPlay li {display:inline} * html .overlayPostPlay .social {height:16px} *+ html .overlayPostPlay ul {height:auto;overflow:hidden;width:448px/*IE7 needs width here*/} *+ html .overlaySettings .submit input {margin-top:1.5em} *+ html .overlaySettings .submit p {width:290px} .strapMultimedia /*extends cT-imageMultimedia*/ {float:left;width:408px;margin:0 0 30px} .strapMultimedia .videoWrap {height:256px} .strapMultimedia .fdVideoWof h4 {background:transparent none} .strapMultimedia .overlay {padding:8px 9px;height:240px} .strapMultimedia .overlayPrePlay {width:398px} .strapMultimedia .overlayAd {width:300px;height:250px;padding:3px 54px} .featuredVideos {float:right;width:192px} .featuredVideos li {list-style-type:none;margin:0;overflow:hidden;font-size:.92em} /* ----- IE fixes ----- */ * html .featuredVideos li {height:1%;margin-bottom:9px/*.play-video margin*/} *+ html .featuredVideos li {margin-bottom:9px/*.play-video margin*/} .strapMultimedia /*extends cT-imageMultimedia*/ {float:left;width:408px;margin:0 0 30px} .strapMultimedia .videoWrap {height:256px} .strapMultimedia .fdVideoWof h4 {background:transparent none} .strapMultimedia .overlay {padding:8px 9px;height:240px} .strapMultimedia .overlayPrePlay {width:398px} .strapMultimedia .overlayAd {width:300px;height:250px;padding:3px 54px} .featuredVideos {float:right;width:192px} .featuredVideos li {list-style-type:none;margin:0;overflow:hidden;font-size:.92em} /* ----- IE fixes ----- */ * html .featuredVideos li {height:1%;margin-bottom:9px/*.play-video margin*/} *+ html .featuredVideos li {margin-bottom:9px/*.play-video margin*/} /* -------------------------------------------------------------------------------------- =Search -------------------------------------------------------------------------------------- */ .cN-indicatorResults {float:left;clear:left;margin:.8em 0 0;padding-bottom:.8em;font-size:.92em;color:#333;border-bottom:2px solid #ccc;width:100%} .cN-indicatorResults em,.cN-indicatorResults strong {font-size:1.333em;color:#354b74;font-weight:bold} .cT-matchingSections {float:left;width:100%;border-bottom:1px solid #ccc} .cT-matchingSections h3 {font-size:1.2em;color:#333;font-style:italic;font-weight:normal;background-color:#ededed;padding:.4em} .cT-matchingSections h3 strong {font-style:normal;font-weight:bold} .cT-matchingSections .more {font-weight:bold} /* Style width and padding of dl,dt,dd in percent: */ .cT-matchingSections dl {float:left;width:98%;font-size:.92em;color:#666;background-color:#ededed;margin:1px 0 0;padding:1.1%/*To overcome browser rounding errors we need 1.1%, not 1%.*/} .cT-matchingSections dt {display:block;float:left;width:22%;font-weight:bold;margin:0} .cT-matchingSections dd {display:block;float:left;width:77.9%} /* ----- IE fixes ----- */ * html .cT-matchingSections {float:none} *+ html .cT-matchingSections {float:none;overflow:hidden} .cT-sortOptions {clear:both;float:right;color:#333;font-size:.92em} .cT-sortOptions em {font-weight:bold;color:#000} .cT-searchResult {clear:both;margin-top:1em} .cT-searchResult h3 {font-size:1.5em;margin-bottom:.3em} .cT-searchResult img {float:left;margin:0 9px 9px 0} .cT-searchResult cite {font-size:.94em;color:#999;text-transform:uppercase} .cT-searchResult span {font-size:.94em;color:#999;text-transform:none} .cT-searchResult p {margin-bottom:.5em} .cT-searchResult em {background-color:#fffdd5;padding:0 .2em}/* Highlight search terms */ .cT-searchResultsEmpty {clear:both} .cT-boxArchiveSearch {border-top:2px solid #ccc;padding-top:.4em} .cT-boxArchiveSearch p {font-size:.92em;margin-bottom:.4em} .cT-boxArchiveSearch p + p {font-weight:bold;color:#666}/* Degrades in IE6 and IE7: ignored */ /* [cN-resultsDescription] Text description for a set of search results */ .cN-resultsDescription {border-bottom:2px solid #ccc;padding-bottom:1.5em} /* -------------------------------------------------------------------------------------- =Tabulator components -------------------------------------------------------------------------------------- */ /* cN-tabBox */ .cN-tabBox{margin:20px 0} .cN-tabBox h4 {text-align:center;text-transform:none} .cN-tabBox h4 a {color:#354b74;background:transparent url('img/sprite-base-skin-eb.png') no-repeat -214px 0/*tab bg*/} .cN-tabBox h4 a:hover {background-position:-313px 0;color:#354b74} .cN-tabBox .selected h4 a {color:#fff;background-position:-115px 0;cursor:default/*reset the cursor to arrow when selected*/} .cN-tabBox .selected h4 a:hover{background-position:-115px 0;text-decoration:none/*remove underline for the selected tab hover*/} .cN-tabBox .tab2 h4 {left:102px} /* Use % for padding and width so it works in columns of various widths: */ .cN-tabBox div {padding:1%;width:98%/*subtract 2x padding!*/;border-top:2px solid #00548c} .aside .cN-tabBox div {width:292px;padding:0} /*.aside .cN-tabBox h3,.aside .cN-tabBox h4,.aside .cN-tabBox p {padding-left:3px}*/ .aside .cN-tabBox .media-video {width:auto;border:0;overflow:hidden} /* cS-latestArticlesVideos */ .aside .cS-latestArticlesVideos div {width:auto} .cS-latestArticlesVideos .articles li {list-style-type:disc;margin-left:1.3em;color:#666} .aside .cS-latestArticlesVideos h3,.aside .cS-latestArticlesVideos p {border:0} /*.aside .cS-latestArticlesVideos h3 {line-height:1.7em}*/ .aside .cS-latestArticlesVideos h3 a {bottom:30%} /* Video tab: To use standard code snippet which also uses a h4, reset previous h4 settings: */ .cN-tabBox .media-video h4 {background:none;text-align:left;left:auto;width:auto;line-height:inherit;height:auto;padding:0} .aside .cN-tabBox div div {width:auto;border:0} .cN-tabBox div.fdVideoWof {padding:.4em} .cN-tabBox .fdVideoWof h4 a, .cN-tabBox .fdVideoWof h4 a:link {color:inherit;background:transparent none;cursor:pointer} .cN-tabBox .fdVideoWof h4 a:hover, .cN-tabBox .fdVideoWof h4 a:active{color:#f93;text-decoration:underline} /* Multimedia tab */ .cN-multimediaGroup .cN-tabBox {margin:0} .cN-multimediaGroup .cN-tabBox h4 {background:transparent;text-transform:none;text-align:left;font-weight:normal} .cN-multimediaGroup .cN-tabBox h4 a {color:#000;background:transparent url('img/sprite-base-skin-eb.png') no-repeat 101.5% -73px/*vertical bar*/} .cN-multimediaGroup .cN-tabBox .last h4 a {background-image:none} .cN-multimediaGroup .cN-tabBox h4 a:hover {background-color:transparent} .cN-multimediaGroup .cN-tabBox div {width:100%;border:0;padding:0} .cN-multimediaGroup .more {float:right} /* ----- IE fixes ----- */ * html .cN-multimediaGroup .cN-tabBox div {position:relative} * html .cN-tabBox .fdVideoWof h4 span {line-height:normal} *+ html .cN-tabBox .fdVideoWof h4 span {line-height:normal} *+ html .cN-tabBox .fdVideoWof h4 a {color:#484848} .tblOvulation {width:100%;margin-bottom:10px;font-size:.916em;border-collapse:collapse} .tblOvulation caption span {position:absolute;left:-9999px} .tblOvulation th, .tblOvulation td {padding:0 5px;border:1px solid #ccc} .tblOvulation th {width:14.29%;height:10px;font-weight:bold} .tblOvulation td {height:60px} .tblOvulation strong {display:block;font-weight:bold} .tblOvulation .date {display:block;font-size:1.3em;font-weight:bold;color:#666} .tblOvulation .fertile {background:#f8d97f} .tblOvulation .menstrual {background:#c5daec} /* -------------------------------------------------------------------------------------- =Pagination -------------------------------------------------------------------------------------- */ .cN-pagination .page,.cN-pagination .prev,.cN-pagination .next {border:1px solid #82b2cf} .cN-pagination a {padding:2px 6px 3px} .cN-pagination .page a:hover,.cN-pagination .prev a:hover,.cN-pagination .next a:hover {background-color:#354B74;color:#fff} .cN-pagination .selected {color:#fff;padding:2px 6px 3px;background-color:#354B74;border-color:#82b2cf} .cN-pagination .single a:hover {color:#f93} .cN-pagination .gap {border:0;padding:5px 0} .cN-pagination .prev a {background:transparent url('img/sprite-base-skin-eb.png') no-repeat -132px -144px;padding-left:12px/*arrow left*/} .cN-pagination .next a {background:transparent url('img/sprite-base-skin-eb.png') no-repeat -986px 6px;padding-right:12px/*arrow right*/} /* -------------------------------------------------------------------------------------- =Forms -------------------------------------------------------------------------------------- */ form legend {display:none/*for accessibility only*/} form li {margin:0 0 1em} form label {display:block;width:100%;float:none} form label span {color:#666} form .checkbox {margin-left:0} form .checkbox label {width:100%} form .checkbox input {width:auto} .submit input {width:auto;float:left} .submit a {float:right;line-height:1.9} form .error {color:#c00;font-weight:bold} /* ----- Buttons ----- */ .button {display:inline-block;margin:0!important;padding:4px 12px 6px!important;outline:none;cursor:pointer;text-align:center;text-decoration:none; font: 1.0833em/100% Arial, sans-serif;vertical-align:baseline;text-shadow: 0 1px 1px rgba(0,0,0,.3); border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px; box-shadow:0 1px 2px rgba(0,0,0,.2);-moz-box-shadow:0 1px 2px rgba(0,0,0,.2);-webkit-box-shadow:0 1px 2px rgba(0,0,0,.2)} /* ----- IE fixes ----- */ * html .button {overflow:visible/*fix padding*/;padding:3px 12px!important} *+ html .button {overflow:visible/*fix padding*/;padding:5px 12px 7px!important;zoom:1;display:inline/*hasLayout & display:inline = IE7 hack for display:inline-block*/} /*IE8*/ .button {padding:4px 12px 6px\9!important} .button:hover, .button:focus {text-decoration:none} .button:active {position:relative;top:1px} .buttonBig {padding:6px 18px 8px!important;font-size:1.5em;font-weight:bold} /* ----- IE fixes ----- */ * html .buttonBig {padding:8px 18px 8px!important} /*IE8*/ .buttonBig {padding:8px 18px 6px\9!important} /* ----- Button colours ----- */ /* Default: Blue */ .button, .button:visited {color:#fff;border:solid 1px #243D6D;background: #38578F; background:-webkit-gradient(linear, left top, left bottom, from(#4B6EB0), to(#243D6D)); background:-moz-linear-gradient(top, #4B6EB0, #243D6D); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B6EB0', endColorstr='#243D6D')} .button:hover, .button:focus, .button:active {color:#fff;border-color:#243D6D;background: #324f85; background:-webkit-gradient(linear, left top, left bottom, from(#4b6eaf), to(#172e58)); background:-moz-linear-gradient(top, #4b6eaf, #172e58); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4b6eaf', endColorstr='#172e58')} .socialSignin {float:right; width:125px; padding-left:11px} .socialSignin ul {overflow:hidden; padding:0; list-style:none} .socialSignin li {float:left; margin:4px 13px 6px 0; background:url('img/sprite-base-skin-news.png') no-repeat -1089px -420px} .socialSignin li a {overflow:hidden; float:left; width:33px; height:33px; text-indent:-9999em} /* Social network social network backgrounds */ .socialSignin .twitter {background-position:-1123px -420px} .socialSignin .linked_in {margin-right:0; background-position:-1156px -420px} /* Comments profile */ .comments-profile {padding:15px 0 16px 0} .comments-profile img {float:left; position:relative; top:3px; margin:0 15px 20px 0; vertical-align:baseline} .comments-profile .social {padding:0 0 1px 19px; background:url("img/sprite-base-skin-news.png") no-repeat scroll -1090px -380px transparent /* facebook medium */} .comments-profile .twitter {background-position:-1090px -360px /* Twitter medium */} .comments-profile .linked_in {background-position:-1090px -400px /* linkedin mini */} /* Comments with no social sign in */ .signUpAlt {width:94%} .signUpAlt .btn, .signUpAlt p {display:inline-block; vertical-align:middle} .signUpAlt .btn {margin-right:10px} * html .signUpAlt p {display:inline} *+ html .signUpAlt p {display:inline; zoom:1} /* Form styling */ .frmSnippet {width:374px; margin-bottom:16px} /* default form styling */ .frmSnippetLast {margin-bottom:0} .frmSnippet .input-txt {width:364px; height:21px; padding-left:8px; border:1px solid #e7e7e7; border-top:1px solid #999; border-radius:3px; -moz-border-radius:3px; color:#666; font-family:Arial,Helvetica,sans-serif; font-size:1.0em; background:#fdfaf2} .frmSnippet .input-txt:focus, .frmSnippet textarea:focus, .frmSnippet textarea.focus, .frmSnippet .input-txt.focus {border:1px solid #cc9900} .frmSnippet .placeholder {color:#999} .frmSnippet label {font-weight:bold} .frmSnippet label span {font-weight:normal; color:#333} .frmSnippet textarea {width:364px; height:122px; padding-left:8px; border:1px solid #e7e7e7; border-top:1px solid #999; border-radius:3px; -moz-border-radius:3px; color:#666; font-family:Arial,Helvetica,sans-serif; font-size:1.0em; background:#fdfaf2} /* input error success states*/ .frmSnippet .input-error {background:#fdfaf2 url('img/sprite-base-skin-news.png') no-repeat -1132px -557px} .frmSnippet .input-success {background:#fdfaf2 url('img/sprite-base-skin-news.png') no-repeat -1132px -581px} .frmSnippet .disabled, .frmSnippet .disabled:focus {border:1px solid #e7e7e7; color:#999; background:#f6f6f6} /* Disabled input styling */ /* targeted styling */ .optIn {margin:15px 0 20px 0; padding-top:7px; border-top:1px dotted #ccc} .frmSnippet .terms, .optIn input {float:left; margin-top:1px; font-weight:normal} .frmSnippet .lblTerms, .optIn label {display:inline; font-weight:normal} * html .frmSnippet .lblTerms, * html .optIn label {padding-top:5px} .frmSnippet .chars {float:right; font-weight:bold} .frmSnippet li {position:relative; margin-bottom:0} .frmSnippet li label, .socialSelect label {display:inline; width:auto; font-weight:normal} /* Button styling */ input.btn {overflow:visible; display:block; padding:3px 9px; clear:both; border:1px solid #c3c3c3; color:#0d5f96; font-size:0.9em; font-weight:bold; cursor:pointer; background:#f6f6f6 url('img/sprite-base-skin-news.png') no-repeat -115px -412px} input.btn:hover {background-color:#e2ebf1} /* Social section */ .socialSelect {position:relative; margin-top:-14px; border-bottom:1px dotted #ccc} .socialSelect dl {height:21px; padding:4px 0 6px 0; border-bottom:1px solid #fff; background:#f6f6f6} .socialSelect dt, .socialSelect dd {float:left; } .socialSelect dt span {float:left; height:16px; margin:0px 10px 0 10px; line-height:16px; border:1px soild red} .socialSelect dd {margin-right:20px} .socialSelect input {float:left; height:15px; width:15px; margin:1px 3px 0 0} .socialSelect label {float:left; position:relative; top:0px; height:16px; padding-left:21px; font-size:0.9em; color:#0d5f96; line-height:16px; background:url('img/sprite-base-skin-news.png') no-repeat -1089px -380px} .socialSelect .linked_in {background-position:-1089px -400px} .socialSelect .twitter {background-position:-1089px -360px} /* Social commenting module. Needs JS routine _initSocialCommenting to work. */ .cT-socialCommenting {border-top:2px solid #ccc;clear:both} .cT-socialCommenting p {color:#666;border-bottom:1px dotted #ccc;margin:.2em 0 .1em;padding-bottom:.1em} .cT-socialCommenting .people em {font-size:1.6em;font-weight:bold} .cT-socialCommenting .twitter em {padding-left:15px;color:#666;font-weight:bold;background:transparent url('img/sprite-base-skin-news.png') no-repeat -1090px -310px/*Twitter*/} .cT-socialCommenting .comments em {padding-left:15px;color:#666;font-weight:bold;background:transparent url('img/sprite-base-skin-news.png') no-repeat -1090px -292px/*comments*/} .cT-socialCommenting h4 {font-size:.94em;font-weight:normal;text-transform:none} .cT-socialCommenting ol li {position:relative;color:#333;margin-bottom:.2em;padding-right:45px/*create room for number (em)*/;font-size:.94em;border-bottom:1px dotted #ccc} .cT-socialCommenting ol li em {position:absolute;right:18px;top:0;color:#666} .cT-socialCommenting ol li span {position:absolute;right:0;top:0;width:13px;background:transparent url('img/sprite-base-skin-news.png') no-repeat -1090px -324px/*people reading this*/;text-indent:-9000px} .cT-socialCommenting ul li {list-style-type:none;margin:0 0 .3em;padding-left:15px;font-size:.94em;background:transparent url('img/sprite-base-skin-news.png') no-repeat -1090px -258px/*email small*/} .cT-socialCommenting .facebook {background-position:-1090px -274px/*facebook*/} /* Javascript adds this list entry to both ul and ol:
  1. Close
    2. */ .cT-socialCommenting .close a {color:#666} .cT-socialCommenting .close {padding-right:0} .cT-socialCommenting ul .close {background:transparent none} .tellFriends a:visited,.cT-socialCommenting h4 a:visited {/*Masthead colour set here in masthead-specific code at the end of this file.*/} /* JS-enabled view: */ .scriptable .cT-socialCommenting ol {width:289px;height:94px;padding:26px 5px 6px 13px;overflow:hidden;background:transparent url('img/sprite-base-skin-news.png') no-repeat -320px -234px/*bg social comments*/} .scriptable .cT-socialCommenting ul {width:158px;height:40px;padding:20px 5px 6px 13px;background:transparent url('img/sprite-base-skin-news.png') no-repeat -115px -274px/*bg tell your friends*/} .scriptable .cT-socialCommenting ol li {border:0} /* ----- IE fixes ----- */ * html .cT-socialCommenting p {background:#fff/*Otherwise some of the dotted lines disappear*/} /* All IE seem to have trouble rendering the injected link in the h4. Workarounds: */ * html .scriptable .cT-socialCommenting h4 {text-decoration:underline;cursor:pointer;color:#00548C} *+ html .scriptable .cT-socialCommenting h4 {color:#00548C} *+ html .scriptable .cT-socialCommenting h4:hover {text-decoration:underline;cursor:pointer;color:#c30} .scriptable .cT-socialCommenting h4 {color:#00548C\0}/*IE8*/ .scriptable .cT-socialCommenting h4:hover {text-decoration:underline\0;cursor:pointer\0;color:#c30}/*IE8*/ /* Email A Friend form */ .cN-emailAFriend {width:400px;margin-left:-200px/*width/2*/;padding:7px;background:#aaa/*fall-back for browsers who don't understand rgba*/;background:rgba(85,85,85,.55); /* Rounded corners: */border-radius:7px/*future CSS3 browsers*/;-webkit-border-radius:7px/*current Safari*/;-moz-border-radius:7px/*current Firefox*/} .cN-emailAFriend form,.cN-emailAFriend .thankYou {position:relative;padding:7px 10px;background:#eee; /* Rounded corners: */border-radius:6px/*future CSS3 browsers*/;-webkit-border-radius:6px/*current Safari*/;-moz-border-radius:6px/*current Firefox*/} .cN-emailAFriend h2 {margin-bottom:.5em;font:normal 1.5em Georgia, "Times New Roman", Times, serif} .cN-emailAFriend .thankYou {padding:7px 20px} .cN-emailAFriend legend {display:block;padding:.5em 0 1em;font:normal 1.5em Arial, sans-serif;color:#333} .cN-emailAFriend .form li {overflow:hidden} .cN-emailAFriend label {float:left;width:93px;margin-right:12px;text-align:right;color:#555} .cN-emailAFriend label span {font-size:.92em} .cN-emailAFriend input[type=text],.cN-emailAFriend textarea {width:220px} .cN-emailAFriend input[type=checkbox] {margin:0;vertical-align:middle} .cN-emailAFriend .indent,.cN-emailAFriend .error {margin-left:105px/*label width + label margins*/} .cN-emailAFriend .error {font-weight:normal;font-size:.92em;color:#900} .cN-emailAFriend .close {z-index:1;position:absolute;right:17px;top:14px;padding-left:20px;font-size:.92em;font-weight:bold;line-height:14px/*icon height*/;background:url('img/sprite-base-skin-eb.png') no-repeat -1090px -151px/*remove icon*/}/*Javascript injects this element*/ .cN-emailAFriend .thanks {margin:30px 0 20px;padding-left:25px;font-size:1.5em;color:#333;background:url('img/sprite-base-skin-eb.png') no-repeat -1296px -359px/*icons|tick (big)*/} /* ----- IE fixes ----- */ * html .cN-emailAFriend {background:transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#55555555,endColorstr=#55555555)/*aarrggbb*/} *+ html .cN-emailAFriend {background:transparent;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#55555555,endColorstr=#55555555)/*aarrggbb*/} *+ html .cN-emailAFriend .form li {overflow:visible/*otherwise IE7 creates margin left of submit button*/} /* Ovulation calculator form */ .frmCalculator {margin:12px 0;padding:12px 0;border:1px solid #ccc;background:#eee} .frmCalculator legend {position:absolute;left:-9999px;display:block} .frmCalculator .cN-formElement {overflow:hidden;clear:left;margin:0 12px;padding:6px} .frmCalculator label {display:inline;float:left;width:310px;margin-right:10px;font-weight:bold} .frmCalculator .note {margin-left:320px;font-size:.916em;color:#666} .frmCalculator .formElButton p {margin-left:320px} .frmCalculator .formElButton input {font-size:1.5em;font-weight:bold} .frmCalculator .formElButton .note {margin:8px 0 0 0} /* -------------------------------------------------------------------------------------- =Navigators -------------------------------------------------------------------------------------- */ .cT-refineGroups h3 {font:bold .92em Arial, Helvetica, sans-serif;color:#fff;padding-left:.4em;margin-bottom:.6em;height:23px;background:url('img/sprite-base-skin-eb.png') no-repeat -640px -120px/*big arrow down*/} .cN-groupNavigator {border-top:1px solid #ccc;padding-top:.4em} .cN-groupNavigator ul {list-style-type:none;color:#666} .cN-groupNavigator li {list-style-type:none;font-size:.92em;color:#666;line-height:1.5} .cN-groupNavigator li.more {margin-top:.3em} .cN-groupNavigator li.more:after {content:" \00BB"/*=»*/}/* Degrades in IE6 and IE7: Characters not visible. */ .cN-groupNavigator li.less:after {content:""}/* Class 'less' is toggled by Javascript. */ .cN-groupNavigator li.less:before {content:"\00AB\00A0"/*=« and  */} .cN-groupNavigator h4 {font-weight:bold;font-size:1em;color:#000;text-transform:none;border-bottom:1px solid #ececec;padding-bottom:.2em} .cN-groupNavigator h4 a {color:#000} .cN-groupNavigator.static h4 a {color:#005F96} .cN-groupNavigator h4 span {font-weight:normal;font-size:.92em;color:#89bcdb;padding-right:10px;background:transparent url('img/sprite-base-skin-eb.png') no-repeat 100% -57px/*arrow left*/} /* By character */ .cN-groupNavigator.navigator-bychar li {display:inline-block} * + html .cN-groupNavigator.navigator-bychar li {display:inline;height:1%} /* in IE 7, display:inline-block doesn't work on li, but display:inline with hasLayout gives the same result */ * html .cN-groupNavigator.navigator-bychar li {display:inline;height:1%} /* in IE 6, display:inline-block doesn't work on li, but display:inline with hasLayout gives the same result */ .cN-groupNavigator.navigator-bychar a {display:block;padding:0 2px;margin:0 2px 0 -2px} .cN-groupNavigator.navigator-bychar li.selected {margin-right:1px} .cN-groupNavigator.navigator-bychar li.all {margin-right:100%} /* ensure the 'Any' link always sits on its own line */ * html .cN-groupNavigator.navigator-bychar li.all {margin-right:100%!important} /* re-apply this style for IE 6 only to make it more specific than other IE 6 overrides */ /* selected state */ .cN-groupNavigator li.selected {display:inline-block;font-weight:bold;color:#fff;background:#f93;padding:1px 3px;margin:1px -3px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px} * + html .cN-groupNavigator li.selected {display:inline;height:1%} /* in IE 7, display:inline-block doesn't work on li, but display:inline with hasLayout gives the same result */ * html .cN-groupNavigator li.selected {display:inline;height:1%; /* in IE 6, display:inline-block doesn't work on li, but display:inline with hasLayout gives the same result */ margin:1px 0 /* in IE 6, negative margin-left results in clipping, so just have it sit flush with the left edge */} /* Open state */ .cN-groupNavigator.open h4 span,.cT-refineGroups .cN-groupNavigator.open h4 span/* Required to override same rule in section CSS and maintain media search page CSS. */ {text-indent:-9000px;background-position:100% -24px} /* Simple group navigators (when no dropdown icon and no additional list items are required): */ .cN-groupNavigator.simple {border-top:2px solid #ccc} .cN-groupNavigator.simple h4 {font:bold 1.4em Arial, Helvetica, sans-serif;border:0;background:none} .cN-groupNavigator.simple h4 a{color:#354B74} .cN-groupNavigator.simple h4 span {display:block;background:url('img/sprite-base-skin-eb.png') 100% -55px/*navigator-arrow*/;text-indent:-9999em} .cN-groupNavigator.open h4 span {background-position:100% -23px/*navigator-open*/} /* ----- IE fixes ----- */ * html .cN-groupNavigator.open h4 span {font-size:0px;/*requires for weird duplicate text*/height:15px/*to show navigator-arrow*/} /* ----- IE fixes ----- */ * html .cN-groupNavigator li.more {font-weight:bold/*Compensate for unsupported ':after' pseudo-style*/} *+ html .cN-groupNavigator li.more {font-weight:bold/*dto.*/} * html .cN-groupNavigator h4 a {width:100%;cursor:pointer} * html .cN-groupNavigator h4 a:link {color:#000} * html .cN-groupNavigator h4 a:visited {color:#000} * html .cN-groupNavigator h4 span {width:1%} *+ html .cN-groupNavigator h4 a {width:100%;cursor:pointer} /* IE6 did not display the bg image on the open state when 'text-indent' was -9000px => we use just so much as to shrink the so that only the bg image is visible: */ * html .cN-groupNavigator.open h4 span {padding-right:15px;text-indent:-44px} .cN-navigatorDateOption select,.cN-navigatorDateOption input {font-size:.94em} .cN-navigatorDateOption li {background-color:#ededed} .cN-navigatorDateOption .submit {background-color:transparent} .cN-topicSelector h3 {border-top:2px solid #ccc;margin-bottom:.3em;padding:.25em 0 0;font-size:1.4em; font-weight:bold; color:#354B74} .cN-topicSelector .cN-groupNavigator {border:0;padding:0;margin:0} .cN-topicSelector h4 {/*Make h4 look like li entry:*/border:0;font-weight:normal;font-size:.9em;padding:0;/*Indent for span:*/padding-left:1.5em} .cN-topicSelector h4 span {background-position:100% -138px/*arrow right*/} .cN-topicSelector ul {margin-left:2.2em} /* ----- IE fixes ----- */ * html .cN-topicSelector h4 {height:1%} * html .cN-topicNavigator.open h4 span {padding-right:12px} .cN-topicSelector.related h4 {padding:0;margin-top:1em;font-weight:bold} .cN-topicSelector.related span {display:none} .cN-topicSelector.related ul {margin-left:0} .cN-topicSelector.related li {display:inline} .cN-topicSelector.related li + li:before {content:"\0020\00B7\0020"}/*\00B7 = unicode for ·, \0020 = space | IE6, IE7 don't understand this rule.*/ .cT-linkArchive {background-color:#ededed;padding:.4em;font-size:.93em} .sidebar .cT-linkArchive {margin-top:4em} .cT-linkWebSearch {background-color:#ededed;padding:.4em;font-size:.93em} /* ----- IE fixes ----- */ * html .cT-linkArchive,* html .cT-linkWebSearch {height:1%} /* -------------------------------------------------------------------------------------- =Site-specific components -------------------------------------------------------------------------------------- */ .cS-latestVideo {margin-bottom:10px;overflow:hidden} .cS-latestVideo h3 {position:relative;font-size:1.8em;font-weight:normal;padding-bottom:.3em;border-top:2px solid #ccc} .cS-latestVideo h3 a {position:absolute;right:0;bottom:.8em;font:normal .5em Arial, Helvetica, sans-serif} .fdVideoWof {background-color:#ECECEC ;padding:.4em;font-size:.92em} .fdVideoWof h4 {color:#000;text-transform:none;position:relative} .fdVideoWof span {position:absolute;right:0;font-weight:normal} /*.fdVideoWof p {position:absolute;left:-9000px}*/ .fdVideoAd {position:absolute;left:-9000px}/*Leave-behind ad should be made visible by Javascript at end of video*/ .cS-latestVideo ul {list-style-type:none;margin:7px -12px 0 0;width:auto/*Overrule class 'span-5' which only ensures correct 'Play video' icon size.*/} .cS-latestVideo li {float:left;margin:0 12px 3px 0;font-size:.9em;width:92px} .cS-latestVideo li a {display:block;height:52px;width:92px;text-align:center} .cS-latestVideo p a {height:auto;text-align:left;width:auto} /* Accessibility: WCAG 6.3 (Javascript removes this class) */ .accessibleWof p {position:static} .accessibleWof h4 span {display:none/*Make

    visible and remove link which would toggle

    .*/} /* ----- IE fixes ----- */ * html .cS-latestVideo li {display:inline} * html .cS-latestVideo li a{margin-right:0} * html .cS-latestVideo h3 {height:1%} * html .cS-latestVideo ul {height:1%;width:312px/*width + neg offset*/} *+ html .cS-latestVideo ul {height:1%;width:312px/*width + neg offset*/} .cS-photoGalleryLinks {position:relative;margin-bottom:20px} .cS-photoGalleryLinks h3 {border-top:2px solid #b1c8dc;margin-bottom:.5em;padding-top:.25em} .cS-photoGalleryLinks h3 span {position:absolute;top:10px;right:0;font:normal .48em/1 Arial, Helvetica, sans-serif} .cS-photoGalleryLinks li {background:transparent url('img/sprite-base-skin-eb.png') no-repeat -640px -150px/*frame*/} .cS-photoGalleryLinks li p a {text-align:left} .cS-photoGalleryLinks {margin-bottom:10px} .cS-photoGalleryLinks h3 a {color:#000} .cS-photoGalleryLinks ul {list-style-type:none;margin-left:-3px} .cS-photoGalleryLinks li {position:relative;float:left;margin:0 0 3px 3px;padding:4px;width:90px;height:121px;font-size:.92em;background:transparent url('img/sprite-base-skin-eb.png') no-repeat -640px -150px} /* Style the image anchor so that the wrapped image can be of smaller size yet the following

    remains in position: */ .cS-photoGalleryLinks ul a {display:block;height:60px;width:90px;overflow:hidden;text-align:center} .cS-photoGalleryLinks p {margin-top:3px;color:#333;line-height:1.2} /* Style the paragraph link so that it covers the entire

  2. area (image and paragraph): */ .cS-photoGalleryLinks p a {position:absolute;top:0;left:0;padding:67px/*padding li + image height + margin p*/ 4px 0;width:90px;height:62px} .cS-photoGalleryLinks .more-photos,.cS-photoGalleryLinks .play-video {margin:0} .cS-photoGalleryLinks a span {z-index:1}/*Overlay button: lift over paragraph link to allow hover effect*/ /* ----- IE fixes ----- */ * html .cS-photoGalleryLinks ul {height:1%;width:303px/*IE6/7 needs width here - adjust for different column widths*/} *+ html .cS-photoGalleryLinks ul {height:1%;width:303px/*IE6/7 needs width here - adjust for different column widths*/} * html .cS-photoGalleryLinks li {display:inline}/*Solves IE6 doubled float-margin bug*/ .cS-wofWithAdSpots {margin:20px 0} .cS-wofWithAdSpots h3 {border-top:2px solid #b1c8dc;margin-bottom:.5em;padding-top:.25em} .cS-wofWithAdSpots h4 {color:#00548c;font-size:1.14em;text-transform:none;margin-bottom:.5em} .cS-wofWithAdSpots p{font-size:.94em} .cS-wofWithAdSpots .wof {overflow:hidden;margin-bottom:1em} .cS-wofWithAdSpots img {float:left;margin:0 10px 0 0} .cS-wofWithAdSpots small {display:block;width:100%;color:#999;border-bottom:1px solid #ccc;font-size:.94em;margin-bottom:.5em} /* ----- IE fixes ----- */ * html .cS-wofWithAdSpots .wof {float:left;margin-bottom:5px} .cS-latestArticles {margin-bottom:20px} .cS-latestArticles h3 {border-top:2px solid #b1c8dc;margin-bottom:.5em;padding-top:.25em} .cS-latestArticles ol {list-style-position:inside;color:#666} .cS-latestArticles li {margin-left:0} /* ----- IE fixes ----- */ * html .cS-latestArticles ol {margin-left:0} * html .cS-latestArticles ol li a{padding-left:.3em} *+ html .cS-latestArticles ol {margin-left:0} *+ html .cS-latestArticles ol li a{padding-left:.3em} .cS-latestArticles.latestForums {background-color:#EEEEEE;border:1px solid #CCCCCC;padding-bottom:1em} .cS-latestArticles.latestForums h3 {background:transparent url(img/sprite-base-skin-eb.png) no-repeat scroll -115px -262px;border-top:medium none;font-size:1.2em;font-weight:bold;height:20px;margin-bottom:10px;padding:1em 0 0 1em} .cS-latestArticles.latestForums ol {list-style-position:outside;color:#00548C} .cS-latestArticles.latestForums li {list-style-position:outside;list-style-type:disc;margin:0 1em 0 2.5em} .cS-latestArticles.latestForums li em {color:#fd952d;font-weight:bold;font-size:.9047em;display:inline-block;text-align:center;width:26px;height:19px;background:url("img/sprite-base-skin-eb.png") no-repeat -1090px -40px} .cS-latestArticles.latestForums li em span {position:absolute; left:-9999px; font-size:0} /* ----- IE fixes ----- */ * html .latestForums ol {margin-left:.1em} * html .latestForums li em {position:relative;top:4px} *+ html .latestForums ol {margin-left:.1em} *+ html .latestForums li em {position:relative;top:4px} .cS-about {margin-bottom:20px} .cS-about h3 {border-top:2px solid #b1c8dc;margin-bottom:.5em;padding-top:.25em} .cS-about p {font-size:.94em;clear:left} .showHide {display:block;font-weight:bold;font-size:.94em;margin:.5em 0;float:left}/*This tag is added when JS is enabled.*/ /* Accessibility: WCAG 6.3 (Javascript removes this class) */ .accessibleP {position:static} /* Rotators */ /* Common for all rotators: */ .rotator {margin-bottom:10px} .rotator .selected {display:block!important/*to keep class count low*/} .rotator ul {font-size:.94em;width:57px;position:absolute;bottom:5px;right:0} .rotator li {float:left;list-style-type:none;margin:0} .rotator .next {float:right} .rotator .previous {background:transparent url(img/sprite-base-skin-eb.png) no-repeat scroll 100% -77px;margin-right:-1px;padding-right:.5em} .rotator .last {padding-left:.5em} .rotator .hidden a {display:none} /* Accessibility: WCAG 6.3 (Javascript removes this class) */ .accessibleRotator ul {display:none}/* If no JS, don't display navigation powered by JS */ .cS-storyImageLeadRotator {border-bottom:2px solid #B1C8DC;margin-bottom:10px;padding-bottom:.25em;position:relative} .cS-storyImageLeadRotator h3 {padding-top:.25em} .cS-storyImageLeadRotator .media {float:right;margin-bottom:20px} .cS-storyImageLeadRotator .cN-storyImageLead {display:none;margin-bottom:0;padding-top:0} .cS-storyImageLeadRotator .selected {display:block} .cS-storyImageLeadRotator .wof {background-color:#fff;clear:none;float:left;margin-bottom:0;padding:0 5px 0 0;width:205px} .cS-storyImageLeadRotator .wof h3 {font-size:1.15em;font-weight:bold;padding-top:0} .cS-storyImageLeadRotator .wof p {font-size:.94em} /* Accessibility: WCAG 6.3 (Javascript removes this class) */ .accessibleRotator .cN-storyImageLead {margin-bottom:10px;clear:both;display:block;float:left} /* Scriptable(Javascript add this class) */ .scriptable .cS-storyImageLeadRotator .cN-storyImageLead {display:none} .scriptable .cS-storyImageLeadRotator .cS-storyImageLead .selected {display:block} /* Essentials */ .essentials .cT-strapHeading {border-top:2px solid #B1C8DC;color:#354B74;font-weight:normal;margin:0 0 .3em;padding-top:0.25em} .essentials .cT-strapHeading span {left:0;margin-top:35px} .essentials .cT-strapHeading span iframe {float:left} .essentials .cT-strapHeading span a {background:transparent url(img/sprite-base-skin-eb.png) no-repeat scroll 100% -79px;color:#000000;float:left;font-size:.46em;margin:2px .5em 0 0;padding-right:.5em} .essentials .cT-strapHeading span .last {background-image:none;margin-right:0;padding-right:0} .essentials .cN-storyImageLead {margin-top:1.5em;position:relative} .essentials .cN-storyImageLead .wof {background-color:#47669F;bottom:0;margin-bottom:0;position:absolute;width:288px} .essentials .cN-storyImageLead .wof a {color:#fff;font-size:.67em;font-weight:bold} .essentials .cN-storyImageLead .wof p {color:#fff;font-size:.94em;line-height:1.2em} /* ----- IE fixes ----- */ * html .essentials .cT-strapHeading span a {margin-right:.25em} * html .essentials .cN-storyImageLead .wof {position:static;margin-top:-55px} *+ html .essentials .cT-strapHeading span a {margin-right:.25em} /* [cS-promoSearch] Promotional box with search function ...................................................................................... */ .cS-promoSearch { position:relative; margin-bottom:2em; background:url("img/bg-fab.jpg") no-repeat 0 100% } * html .cS-promoSearch { height:1% } .cS-promoSearch h3 { border-top:2px solid #b1c8dc; padding-top:.25em; margin-bottom:.13em } .cS-promoSearch .nav { overflow:hidden; line-height:normal; margin-bottom:1.13em; font-size:.92em } .cS-promoSearch .nav li { float:left; list-style:none; margin:0 0 0 .5em; padding-left:.5em; border-left:1px solid #ccc } .cS-promoSearch .nav li:first-child { border-left:none; margin-left:0; padding-left:0 } * html .cS-promoSearch .nav li { border-left:0; border-right:1px solid #ccc; padding:0 .5em 0 0; margin:0 .5em 0 0 } .cS-promoSearch .nav li a { color:#333 } .cS-promoSearch form { position:relative; margin-left:75px; margin-bottom:.5em } .cS-promoSearch label { text-transform:uppercase; font-weight:bold; color:#333; display:inline; width:auto } .cS-promoSearch .text { position:relative; vertical-align:middle; width:2.75em; padding:1px; margin-left:.33em } .cS-promoSearch .button { position:relative; vertical-align:middle; margin-left:.33em; padding:0 0 2px!important; background:#47669f; border:none; line-height:20px; height:22px; font-family:Arial,Helvetica,sans-serif; font-size:1em; border:1px solid #b1cbdc; color:#fff; font-weight:bold; width:103px; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px } .cS-promoSearch .button, x:-moz-any-link: { padding-bottom:2px; height:20px } /* target Firefox */ * + html .cS-promoSearch .button { line-height:18px; padding:0; height:22px } /* reset for IE 7 */ .cS-promoSearch .button:hover, .cS-promoSearch .button:focus, .cS-promoSearch .button:active { background:#354b74; cursor:pointer } .cS-promoSearch h4 a { position:absolute; bottom:0; right:0; width:90px; height:40px; text-indent:-999em; overflow:hidden; background:url("img/sprite-base-skin-eb.png") -1090px 0 } .cS-promoSearch .features { margin-left:75px } .cS-promoSearch .features li { font-size:.92em; list-style:none; margin-left:0; padding-left:1.25em; background:url("img/sprite-base-skin-eb.png") no-repeat -1320px -341px } * html .cS-promoSearch .features li { height:1% } /* [cN-orderedData] Table of ordered/positioned data with optional actions ...................................................................................... */ .cN-orderedData { margin-bottom:20px } .cN-orderedData table { border-collapse:collapse; width:100%; margin:5px 0 10px; border:0 } .cN-orderedData th { text-align:center; font-weight:bold; color:#555 } .cN-orderedData thead th { padding:0 3px 3px; line-height:2 } /* dataCols-? indicates how many columns of data are in this table (add new classes with different widths as required) */ .cN-orderedData.dataCols-2 thead th { width:45% } /* specific styling for table header row (including no left padding on first column, no right padding on last column) */ .cN-orderedData thead th.first { padding-left:0; width:auto } .cN-orderedData thead th.last { padding-right:0 } .cN-orderedData thead th em { border-bottom:3px solid; display:block; font-weight:bold /* required for IE 7, IE 6 due to reset in use */ } /* these styles are skin-specific (add new classes to support different data types) */ .cN-orderedData th.num em { border-color:#ccc } .cN-orderedData th.girl em { border-color:#faa } .cN-orderedData th.boy em { border-color:#9ab7d1 } .cN-orderedData tbody th, .cN-orderedData td { border:0; border-bottom:1px dotted #ccc; line-height:2; padding:0 10px } .cN-orderedData tbody th { padding:0 5px } .cN-orderedData tr.last th, .cN-orderedData tr.last td { border-bottom:1px solid #b1c8dc; padding-bottom:3px } .cN-orderedData td a { display:inline-block; padding:0 3px; margin:0 -3px } /* enlarge clickable area */ /* different width versions */ .dataSize-narrow td { text-align:center } .dataSize-wide td { padding:0 30px } /* action links within data */ .hasDataAction td a { float:left } .cN-orderedData td a.action { float:right; text-indent:-999em; overflow:hidden; width:17px; height:24px; background:url("img/sprite-base-skin-eb.png") no-repeat } .cN-orderedData td a.fave { background-position:-1090px -60px /* sprite:fave-off */ } .cN-orderedData td a.unfave { background-position:-1090px -90px /* sprite:fave-on */ } /* optional citation following the table */ .cN-orderedData cite { font-size:.9167em; color:#666 } /* optional filter links following the table */ .cN-orderedData h4 { font-size:.9167em; text-transform:none; font-weight:normal; color:#666; display:inline } .cN-orderedData ul { display:inline; list-style:none; font-size:.9167em } .cN-orderedData li { display:inline; border-left:1px solid #999; padding-left:.5em; margin-left:.25em } .cN-orderedData li:first-child { border-left:none; padding-left:0 } /* [cN-browseByChar] Generic static text with optional inline links ...................................................................................... */ .cN-browseByChar { margin:5px 0 20px; text-align:center; background:#ebf1f6; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px } .cN-browseByChar li { display:inline; list-style:none; margin:0; font-size:1.5em; line-height:1.75 } .cN-browseByChar a { padding:0 4px } * + html .cN-browseByChar a { padding:0 3px } * html .cN-browseByChar a { padding:0 3px } /* [cT-formCollection] Complete form containing a collection of fieldsets/form fields ...................................................................................... */ .cT-formCollection { clear:both; float:left; margin:5px 0 20px; background:#ebf1f6; padding:8px 12px;-moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px } * + html .cT-formCollection { margin-bottom:10px } * html .cT-formCollection { margin-bottom:10px } /* [cT-formFields] A section/fieldset within a form, containing multiple form fields ...................................................................................... */ .cT-formFields, .cT-formFields ul { float:left; display:inline /* to fix IE 6/IE 7 double margin bug */ } .cT-formFields li { list-style:none; margin:0 10px 0 0; float:left; clear:none; display:inline /* to fix IE 6/IE 7 double margin bug */ } .cT-formFields label { font-weight:bold; color:#333; line-height:normal; margin-bottom:.25em } * html .cT-formFields label { width:auto } .cT-formFields input, .cT-formFields select { padding:1px; font-family:Arial,sans-serif } .cT-formFields input { padding:1px 2px } .cT-formFields .placeholder { color:#666 } /* [cT-formActions] Form submission/traversal actions ...................................................................................... */ .cT-formActions { float:left } .cT-formActions li { margin:0; list-style:none } .cT-formActions input { cursor:pointer; margin-top:15px; width:130px; height:26px; padding-bottom:2px; border:none; color:#fff; font-weight:bold; font-family:Arial,sans-serif; background:url("img/sprite-base-skin-eb.png") no-repeat -1090px -115px /* sprite:button */ } .cT-formActions input:hover, .cT-formActions input:focus, .cT-formActions input:active { background-position:-1220px -115px /* sprite:button-hover */ } /* [cN-linkListAdmin] List of links with list management options ...................................................................................... */ .cN-linkListAdmin { position:relative; padding:10px 10px 36px; margin:5px 0 20px; overflow:hidden; background:#ebf1f6 url("img/sprite-base-skin-eb.png") no-repeat -720px -417px } * html .cN-linkListAdmin { height:1% } .cN-linkListAdmin .items { max-height:225px; overflow:auto; background:#fff; padding:5px 10px } .cN-linkListAdmin .items li { list-style:none; margin-left:0; border-bottom:1px solid #ebebeb; line-height:2 } .cN-linkListAdmin .items li.last { border-bottom:none } * + html .cN-linkListAdmin .items a { float:left } * html .cN-linkListAdmin .items a { float:left } .cN-linkListAdmin .items a.action { float:right; line-height:24px; font-size:.9167em; padding-left:20px; background:url("img/sprite-base-skin-eb.png") no-repeat -1090px -145px } .cN-linkListAdmin .options { position:absolute; bottom:0; left:0; width:300px; height:26px; font-size:.9167em; padding-top:10px; text-align:right; background:url("img/sprite-base-skin-eb.png") no-repeat -720px -381px; overflow:hidden } * html .cN-linkListAdmin .options { height:24px } .cN-linkListAdmin .options li { list-style:none; margin:0 15px 0 0; display:inline; clear:both /* to prevent element disappearing in IE 6/IE 7 */ } .cN-linkListAdmin .options a { text-indent:-999em; padding-left:18px; background:url("img/sprite-base-skin-eb.png") no-repeat } .cN-linkListAdmin a.email { background-position:-1444px -214px /* sprite:bg-round-bottom */ } .cN-linkListAdmin a.print { background-position:-1428px -230px /* sprite:bg-round-top */ } .cN-linkListAdmin p { position:absolute; bottom:0; left:0; width:270px; height:70px; padding:5px 15px; background:url("img/sprite-base-skin-eb.png") no-repeat -720px -337px; overflow:hidden } .cN-linkListAdmin .info { display:none } .cN-linkListAdmin p span.fave { vertical-align:middle; display:inline-block; margin:0 2px; text-indent:-999em; width:17px; height:24px; background:url("img/sprite-base-skin-eb.png") no-repeat -1093px -60px /* sprite:fave-off */ } /* state: no JavaScript (message inside noscript tag does not require CSS to show/hide) */ .cN-linkListAdmin { padding-bottom:80px } .cN-linkListAdmin p.empty, .cN-linkListAdmin h4, .cN-linkListAdmin ul { display:none } /* state: JavaScript, with list items */ .scriptable .cN-linkListAdmin { padding-bottom:36px } .scriptable .cN-linkListAdmin h4, .scriptable .cN-linkListAdmin ul { display:block } /* state: JavaScript, empty list */ .scriptable .cN-linkListAdmin.linkListEmpty { padding-bottom:80px } .scriptable .cN-linkListAdmin.linkListEmpty p.empty { display:block } .scriptable .cN-linkListAdmin.linkListEmpty h4, .scriptable .cN-linkListAdmin.linkListEmpty ul { display:none } /* [cN-listLinks] List of related links ...................................................................................... */ .cN-listLinks { margin-bottom:20px } .cN-listLinks h3 { color:#555; font-size:1.3333em; margin-bottom:.5em; font-weight:bold } .cN-listLinks ul { line-height:1.6667 } /* [cN-definitionLinks] Definition list with links for terms and optional actions ...................................................................................... */ .cN-definitionLinks { margin-bottom:10px } .cN-definitionLinks h2 { font-size:1.1667em; font-weight:bold; color:#333; border-bottom:1px solid #ccc; margin:9px 0; padding-bottom:5px } * html .cN-definitionLinks h2 { height:1% } .cN-definitionLinks h2 strong { display:inline-block; width:125px; padding-left:5px } .cN-definitionLinks dt { width:125px; float:left; margin-top:4px /* same as padding-top of dd */; margin-left:5px; clear:both; position:relative; z-index:1 /* place on top of dd */ } .cN-definitionLinks dd { padding:4px 30px 4px 135px; border-bottom:1px dotted #ccc; position:relative } .cN-definitionLinks .last { border-bottom:none } /* for IE 6, apply border to bottom of dt because the dd doesn't stretch all the way to the left if the dd is more than one line, the dt will still only be one line tall (this is considered an acceptable degradation for IE 6 only) */ * html .cN-definitionLinks dt { border-bottom:1px dotted #ccc; padding-bottom:4px; margin-left:0; padding-left:5px } * html .cN-definitionLinks dd { height:1% /* make sure it has layout */; padding-left:0 } /* action links within definitions */ .cN-definitionLinks dd a.action { position:absolute; right:2px; top:0; padding:0 3px /* enlarge clickable area */; text-indent:-999em; overflow:hidden; width:17px; height:24px; background:url("img/sprite-base-skin-eb.png") no-repeat } .cN-definitionLinks dd a.fave { background-position:-1090px -60px /* sprite:fave-off */ } .cN-definitionLinks dd a.unfave { background-position:-1090px -90px /* sprite:fave-on */ } /* [cS-nameMetaData] Title area with description and summary for a name ...................................................................................... */ .cS-nameMetaData { border-top:2px solid #b1c8dc; margin-bottom:20px; padding:10px 0 } .cS-nameMetaData .action { float:right; margin-top:-3em; position:relative /* make it appear above previous elements, also to avoid clipping in IE 6 */; line-height:19px; padding-left:24px; background:url("img/sprite-base-skin-eb.png") no-repeat } .cS-nameMetaData .fave { background-position:-1090px -62px /* sprite:fave-off */ } .cS-nameMetaData .unfave { background-position:-1090px -92px /* sprite:fave-on */ } .cS-nameMetaData dl { font-size:1.1667em; border-bottom:1px dotted #ccc; padding-bottom:5px; margin-bottom:10px; overflow:hidden } * + html .cS-nameMetaData dl { padding-bottom:10px } * html .cS-nameMetaData dl { padding-bottom:10px; height:1% /* make sure container has layout so that IE 6 honours overflow:hidden */ } .cS-nameMetaData dt { margin-bottom:5px; float:left; width:20%; clear:both; font-weight:bold; color:#555 } .cS-nameMetaData dd { margin-bottom:5px; float:left; width:75% } /* [cN-linkListScroller] Scroller for vertical list with multiple items visible ...................................................................................... */ .cN-linkListScroller { margin-bottom:20px } * html .cN-linkListScroller { overflow:visible } /* IE6:this is a fix, so H3 inside this container will visible */ .scriptable .cN-linkListScroller { padding:20px 0 } .cN-linkListScroller h3 { position:absolute; top:-24px; font-size:1.167em; font-weight:bold; color:#555 } .scriptable .cN-linkListScroller .links { height:185px } .cN-linkListScroller .links li { line-height:20px } .cN-linkListScroller .links a { margin:0 3px } .cN-linkListScroller .links .selected { line-height:18px; display:inline-block; font-weight:bold; color:#fff; background:#f93; padding:1px 3px; margin:0; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px } * + html .cN-linkListScroller .links .selected {display:inline } /* in IE 7, display:inline-block doesn't work on li, but display:inline with hasLayout gives the same result */ * html .cN-linkListScroller .links .selected { display:inline } /* in IE 6, display:inline-block doesn't work on li, but display:inline with hasLayout gives the same result */ .cN-linkListScroller .controller li { width:100%; line-height:20px } .cN-linkListScroller .controller a { outline:0; display:block; text-indent:-999em; overflow:hidden; background:url("img/sprite-base-skin-eb.png") no-repeat } .cN-linkListScroller .prev a { background-position:-900px -40px /* sprite:scroller-up */ } .cN-linkListScroller .next a { background-position:-900px -60px /* sprite:scroller-down */ } .cN-linkListScroller .prev a:hover, .cN-linkListScroller .prev a:focus { background-position:-900px -80px /* sprite:scroller-up-hover */ } .cN-linkListScroller .next a:hover, .cN-linkListScroller .next a:focus { background-position:-900px -100px /* sprite:scroller-down-hover */ } .cN-linkListScroller .limit a { opacity:.4; filter:alpha(opacity=40); cursor:default } .cN-linkListScroller .limit.prev a:hover, .cN-linkListScroller .limit.prev a:focus { background-position:-900px -40px /* sprite:scroller-up */ } .cN-linkListScroller .limit.next a:hover, .cN-linkListScroller .limit.next a:focus { background-position:-900px -60px /* sprite:scroller-down */ } /* -------------------------------------------------------------------------------------- =Polls -------------------------------------------------------------------------------------- */ /* Common poll parts (used in several poll components, hence defined separately) */ /* Poll result bars */ .pollBars {overflow:hidden} .pollBars dt {clear:left;padding-top:.7em} .pollBars dd {padding-right:39px} .pollBars dd p {background-color:#F8D97F/*default bar colour*/;line-height:1.1;float:left} .pollBars dd span {position:relative;float:right;margin-right:-31px;color:#666;background:none} /* ----- IE fixes ----- */ * html .pollBars dd span {padding-left:5px} *+ html .pollBars dd span {padding-left:5px} /* Poll closing */ .cT-pollVoteNow .close span, .cT-pollResultList .close span, .cT-pollPageModule .close span, .cT-pollArticle .close span, .cN-pollHeadlineLead .close span, .cS-poll .close span {color:#860303} /* Poll submit button */ .cT-pollPageModule .submit input, .cT-pollArticle .submit input, .cS-poll .submit input {padding:4px 12px;border:1px solid #F68718;background:#FE9730 none/*default vote button bg colour*/;color:#fff;font:bold 1em Arial, Helvetica, sans-serif;cursor:pointer/*set here and not on 'hover' to have IE6 display hand*/; /*Radius:*/-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px} .cT-pollPageModule .submit input:hover, .cT-pollArticle .submit input:hover, .cS-poll .submit input:hover {background:#e0862c none} /* ----- IE fixes ----- */ * html .cT-pollPageModule .submit input, * html .cT-pollArticle .submit input, * html .cS-poll .submit input {overflow:visible} *+ html .cT-pollPageModule .submit input, *+ html .cT-pollArticle .submit input, *+ html .cS-poll .submit input {overflow:visible} /* Message if cookies are disabled: */ .pollCookiesNotEnabled {clear:both;font-size:.92em} .pollCookiesNotEnabled strong {font-weight:bold} /* Big poll comment bubble: */ .pollCommentsVoted {position:absolute;right:17px;top:50px;width:75px;height:56px;text-align:center;background:transparent url('img/sprite-base-skin-news.png') no-repeat -150px -148px/*comment bubble, big*/} .pollCommentsVoted span {width:100%;padding:3px 0 0;height:auto!important;font-size:2em!important;color:#666!important;background:transparent none!important}/*"important" overrides skin-specific rules*/ .pollCommentsVoted em {position:absolute;bottom:13px;left:5px} .pollNoComments em {top:7px;left:4px;display:block;width:68px;height:36px;text-align:center}/* requires also class 'commentsVoted' */ .pollCommentsVoted a {display:block;height:45px} .pollCommentsVoted a:hover {text-decoration:none} .pollCommentsVoted a:hover em {text-decoration:underline} /* cS-poll */ .cS-poll {position:relative;margin-bottom:10px} .cS-poll .heading {position:relative;border-top:2px solid #B1C8DC;padding-top:.25em;margin-bottom:.5em} .cS-poll .heading a,.cS-poll .heading a:visited {color:#354B74} .cS-poll h3 span {position:absolute;right:0;top:0} .cS-poll h4 {border-top:1px dotted #ccc} .cS-poll strong {font-weight:bold;line-height:1.2} .cS-poll ul {overflow:hidden;margin:.4em 0} .cS-poll li {list-style-type:none;margin:0} .cS-poll .submit {margin-top:.5em} .cS-poll .submit input {margin-right:1em} .cS-poll .submit a {float:none} .cS-poll .submit p {padding-top:3px} .cS-poll .cT-disclaimer {clear:left;border-top:1px dotted #d6d6dc;padding-top:4px;margin:8px 0 .5em;color:#999} .cS-poll .statement {border:0;font-weight:bold;padding:0} .cS-poll h4 {clear:both;padding-top:3px;margin-bottom:.2em;text-transform:none;color:#000} .cS-poll .cN-storyHeadlineOnly {border:0;padding:0;margin-bottom:.2em;color:#666;text-transform:uppercase;font:bold 1em/normal Arial, Helvetica, sans-serif} .cS-poll .cN-storyHeadlineOnly a {text-transform:none} .cS-poll .total {float:left;padding:0 .3em 0 0;font-size:.92em;color:#666;border-right:1px solid #ccc} .cS-poll .total span {color:#333} .cS-poll .close {float:left;margin:0 .5em;padding-right:.3em;font-size:.92em;color:#666;border-right:1px solid #ccc} .cS-poll .closeVoted {padding-bottom:.5em;border:0} .cS-poll .comments {margin-bottom:.3em;font-size:.92em} .cS-poll .comments span {background-color:transparent} .cS-poll .pollCommentsVoted {top:76px;right:4px}/*Set bubble to allow question to be 2.5 lines long and maximise width of poll bars*/ .cS-poll .add {position:absolute;top:131px;right:14px;font-size:.92em} /* Poll result bars */ .cS-poll dl {width:77%;padding-bottom:1em;color:#444} .cS-poll dt {clear:left;padding-top:.5em} .cS-poll dd {padding-right:39px} .cS-poll dd p {line-height:1.1;float:left} .cS-poll dd span {position:relative;margin-right:-31px;color:#3b444b;background:none;float:right;color:#000} /* ----- IE fixes ----- */ * html .cS-poll dd span {padding-left:5px} * html .cS-poll .heading {height:1%} * html .cS-poll .submit p {float:left} * html .cS-poll .close {clear:left;margin-top:2px} * html .cS-poll .closeVoted {clear:none;margin-top:0} *+ html .cS-poll dd span {padding-left:5px} *+ html .cS-poll .heading {height:1%} *+ html .cS-poll .submit p {float:left} *+ html .cS-poll .close {clear:left;margin-top:2px} *+ html .cS-poll .closeVoted {clear:none;margin-top:0} /* cT-pollPageModule */ .cT-pollPageModule {margin-bottom:20px} .cT-pollPageModule h1 {font-size:2.4em;font-weight:normal;color:#354B74} .cT-pollPageModule h1 span {font-size:.82em;color:#666} .cT-pollPageModule h2 {margin:20px 0 .2em;font-size:1.5em;border-top:2px solid #ccc} .cT-pollPageModule .wof {margin:0;padding:.5em;font-size:1.2em;line-height:1.2;background-color:#f2f2f2} .cT-pollPageModule form {padding:0 .5em .5em;background-color:#f2f2f2} .cT-pollPageModule form li {margin:0} .cT-pollPageModule .submit {margin-top:.7em} .cT-pollPageModule .submit a {float:left;margin-left:10px} .cT-pollPageModule .social {padding:.5em .8em;font-size:.92em;border-top:1px solid #fff;background-color:#ececec} .cT-pollPageModule .close {display:inline;margin-right:20px} .cT-pollPageModule .share {display:inline} .cT-pollPageModule .share li {margin:0 3px 0 4px;padding-left:14px;display:inline;list-style-type:none;background:transparent url('img/sprite-base-skin-news.png') no-repeat -1090px -258px/*icons: email small*/} .cT-pollPageModule .share a span {position:absolute;left:-9000px;width:90px} .cT-pollPageModule .share .facebook {background-position:-1090px -276px/*Facebook*/} .cT-pollPageModule .share .twitter {background-position:-1090px -308px/*Twitter*/} .cT-pollPageModule .cT-disclaimer {margin:5px 0 0} .cT-pollPageModule .cT-disclaimer p {display:inline;color:#666} .cT-pollPageModule .cT-disclaimer .statement {margin:0;padding:0;font-weight:bold;border:0} .cT-pollPageModule .cN-storyHeadlineOnly {padding:0 0 0 11px;font:normal 1em Arial, Helvetica, sans-serif;color:#8a8c8f;border:0;background:transparent url('img/sprite-base-skin-eb.png') no-repeat -1362px -294px;padding-right:12px/*content | arrow right, red*/} .cT-pollPageModule dl {width:96%;padding:0 2%/*need % here to scale bars too*/;background-color:#f2f2f2} .cT-pollPageModule dt {padding-top:.5em} .cT-pollPageModule dd p {line-height:20px} .cT-pollPageModule dd span {font-weight:bold} .cT-pollPageModule .total {padding:1em 0 .5em .5em;font-style:italic;font-size:.92em;background-color:#f2f2f2} /* cT-pollVoteNow */ .cT-pollVoteNow {margin-bottom:20px} .cT-pollVoteNow h3 {margin-top:1.8em;padding-top:.3em;font-size:1.4em;font-weight:bold;border-top:2px solid #ccc} .cT-pollVoteNow h4 {margin-top:.4em;font-size:.92em;line-height:1.2;text-transform:none} .cT-pollVoteNow .close {color:#666} /* cT-pollResultList */ .cT-pollResultList {margin-bottom:20px} .cT-pollResultList h3 {margin-bottom:.3em;padding-top:.3em;font-size:1.4em;font-weight:bold;border-top:2px solid #ccc} .cT-pollResultList p {display:inline;line-height:1.2;font-size:1em} .cT-pollResultList .total {display:block;float:left;font-weight:normal;color:#666} .cT-pollResultList .total span {color:#333} .cT-pollResultList .comments {float:left;display:block;padding-left:10px;font-weight:normal;background:transparent url('img/sprite-base-skin-news.png') no-repeat -1495px -79px/*vertical bar*/} .cT-pollResultList li {overflow:hidden;padding-bottom:.2em;margin:0 0 .5em;list-style-position:inside;font-size:.92em;font-weight:bold;border-bottom:1px solid #ccc} .cT-pollResultList dl {margin-bottom:.5em} .cT-pollResultList dt {line-height:1.2} .cT-pollResultList dd span {margin-right:-25px} .cT-pollResultList .more {display:block;margin-top:.5em;font-weight:bold;font-size:.92em} /* ----- IE fixes ----- */ * html .cT-pollResultList dl {height:1%} * html .cT-pollResultList li {float:left;clear:left;width:100%;padding-bottom:.4em} * html .cT-pollResultList .votes, * html .cT-pollResultList .total {margin-top:4px} *+ html .cT-pollResultList li {float:left;clear:left;width:100%;padding-bottom:.4em} *+ html .cT-pollResultList .votes, *+ html .cT-pollResultList .total {margin-top:4px} .cT-pollArticle {overflow:hidden;position:relative;margin-bottom:20px;border-top:2px solid #ccc;background-color:#f2f2f2} .cT-pollArticle h3 {padding:.5em;font:bold 1.2em/1.2 Arial, Helvetica, sans-serif} .cT-pollArticle h3 span {font-size:.82em;font-weight:normal;color:#666} .cT-pollArticle form {padding:0 .5em .5em;background-color:#f2f2f2} .cT-pollArticle form li {margin:0} .cT-pollArticle .submit {margin-top:.7em} .cT-pollArticle .submit a {display:block;float:left;margin-left:10px;line-height:27px} .cT-pollArticle .cT-disclaimer {clear:both;margin:0;padding-top:5px;background-color:#fff} .cT-pollArticle .cT-disclaimer p {display:inline;color:#666} .cT-pollArticle .cT-disclaimer .statement {margin:0;padding:0;font-weight:bold;border:0} .cT-pollArticle .close {float:left;margin:0 .5em;padding-right:.3em;font-size:.92em;color:#666;border-right:1px solid #ccc} .cT-pollArticle .closeVoted {padding-bottom:.5em;border:0} .cT-pollArticle .comments {margin-bottom:.3em;font-size:.92em} .cT-pollArticle .comments span {background-color:transparent} .cT-pollArticle dl {width:77%;padding:0 2%/*need % here to scale bars too*/ 1em;background-color:#f2f2f2} .cT-pollArticle dt {padding-top:0} .cT-pollArticle dd p {line-height:20px} .cT-pollArticle dd span {font-weight:bold} .cT-pollArticle .total {float:left;padding:0 .3em 0 .5em;font-size:.92em;color:#666;border-right:1px solid #ccc} .cT-pollArticle .total span {color:#333} .cT-pollArticle .add {position:absolute;top:104px;right:27px;font-size:.92em} .cT-pollArticle .related {clear:both;padding:.5em .8em;font-size:.92em;font-weight:bold;border-top:1px solid #fff;background-color:#ececec} /* ----- IE fixes ----- */ * html .cT-pollArticle .close {position:relative} * html .cT-pollArticle .comments {margin-top:-2px} * html .cT-pollArticle dd span {top:33px;padding-left:15px} * html .cT-pollArticle .total {position:relative} * html .cT-pollArticle .related {display:inline-block} *+ html .cT-pollArticle .close {margin-top:2px} *+ html .cT-pollArticle .closeVoted {margin-top:0} *+ html .cT-pollArticle .related {display:inline-block} /* cN-pollHeadlineLead */ .cN-pollHeadlineLead {overflow:hidden} .cN-pollHeadlineLead h3 {margin-bottom:.2em;font-size:1.5em} .cN-pollHeadlineLead img {float:left;margin:0 9px 9px 0} .cN-pollHeadlineLead .wof {margin-bottom:.3em} .cN-pollHeadlineLead .close {float:left;font-size:.92em} .cN-pollHeadlineLead .vote {float:left;margin-left:.3em;font-size:.92em} .cN-pollHeadlineLead .total, .cN-pollHeadlineLead .comments {float:left;margin-left:.2em;padding-left:.4em;font-size:.92em;background:transparent url('img/sprite-base-skin-news.png') no-repeat -1499px -78px/*vertical bar*/} .cN-pollHeadlineLead .total span {color:#333} .sidebar .cN-pollHeadlineLead h3 {font:bold .92em Arial, Helvetica, sans-serif} .sidebar .cN-pollHeadlineLead h4 {font-size:.94em} .sidebar .cN-pollHeadlineLead p {color:#666} /* ----- IE fixes ----- */ * html .cN-pollHeadlineLead {height:1%} * html .sidebar .cN-pollHeadlineLead h4 {font-size:.85em} * html .cN-pollHeadlineLead .total {white-space:pre} *+ html .sidebar .cN-pollHeadlineLead h4 {font-size:.85em} *+ html .cN-pollHeadlineLead .total {white-space:pre} /* Rules required by backend to handle different states (JS on/off, cookies on/off): */ .pollQuestions {display:none} .pollResults {display:none} .pollCookiesNotEnabled {display:none} .noCookie .pollCookiesNotEnabled {display:block} .notVoted .pollQuestions {display:block} .voted .pollResults {display:block} /* -------------------------------------------------------------------------------------- =Advertising -------------------------------------------------------------------------------------- */ .ad small {color:#999;font-size:.94em} .adWithSeparator {margin-bottom:10px;padding-bottom:10px;border-bottom:2px solid #b1d8dc} #adspot-940X20-pos-1 {margin-bottom:10px} /* ----- IE fixes ----- */ * html #adSpot-bigadvertorial {float:none} /* Google AdSense */ .adSpot-textBox {clear:both;margin:20px 0} .adSpot-textBox a:hover, .adSpot-textBox a:focus {text-decoration:none} .adSpot-textBox h4 {font-size:12px;margin:6px 0;text-transform:none}/* "Ads by Google" heading */ .adSpot-textBox h4 a,.adSpot-textBox h4 a:visited {color:#666} .adSpot-textBox h4 a:hover,.adSpot-textBox h4 a:focus {color:#c30;text-decoration:underline} .adSpot-textBox div {margin-bottom:13px} .adSpot-textBox div h4 {display:inline;margin:0} .adSpot-textBox div h4 a,.adSpot-textBox div h4 a:visited {color:#07a;font-size:14px;text-decoration:underline;margin:0 0 1px} .adSpot-textBox div p {color:#000} .adSpot-textBox .url {display:inline;margin-left:.7em} .adSpot-textBox p a {color:#c30;font-size:1em} .adSpot-textBox p a:hover,.adSpot-textBox p a:focus {color:#8A8C8F} /* ----- IE fixes ----- */ * html .adSpot-textBox div h4 a:hover {color:#c30} /* Video ad (sits in cT-imageMultimedia) */ .videoAd {text-align:center} /* Tools sponsor for article pages: */ #adSpot-toolsSponsor {float:right} /* Polls */ .cS-poll .ad small {float:left;font-size:.5em;font-family:Arial, Helvetica, sans-serif;line-height:normal/*inherited from h3 otherwise*/} .cS-poll .ad iframe {clear:left;float:left;margin:0} /* =Gutter ads [cA-gutter] */ .hasGutter-full {width:auto;margin:0;background:none} .hasGutter-full .wrap {padding:0 26px} /* 25px (distance from edge of .wrap to page border) + 1px (page border) = 26px */ /* [cA-textLinks] Text Links ads ...................................................................................... */ .cA-textLinks{ font-size:.92em;padding:.75em .5em;border:1px solid #ccc;float:left;margin:.5em 0 1em 0 } .cA-textLinks li { list-style:none; margin:.5em;width:47%;float:left } .cA-textLinks ul {clear:both} .cA-textLinks a, .cA-textLinks strong, .cA-textLinks span, .cA-textLinks em { display:block } .cA-textLinks small{ margin-top:-16px;background-color:#fff;padding:0 .5em;float:left} .cA-textLinks strong{ font-weight:normal;text-decoration:underline} .cA-textLinks span{ color:#333 } .cA-textLinks em{ color:#666;font-style:normal } .cA-textLinks a{ text-decoration:none } .cA-textLinks a:hover strong{ color:#f93 } /* ----- IE fixes ----- */ * html .cA-textLinks a:hover span, * html .cA-textLinks a:visited span, * html .cA-textLinks a:active span, * html .cA-textLinks a:hover em, * html .cA-textLinks a:visited em, * html .cA-textLinks a:active em,{ text-decoration:none } /* fix the underline problem */ * html .cA-textLinks small {position:absolute;font-size:1em} * html .cA-textLinks li {display:inline} * html .cA-textLinks {margin-bottom:0} *+ html .cA-textLinks small {font-size:1em} /* -------------------------------------------------------------------------------------- =Footer -------------------------------------------------------------------------------------- */ .eb .classifieds .s1, .eb .classifieds .s2, .eb .classifieds .s3, .eb .classifieds .s4, .eb .classifieds .s5 {border-top:2px solid #B1C8DC} .eb .classifieds h2 {font-family:Arial, Helvetica, sans-serif} .eb .classifieds a{color:#354B74} .eb .classifieds ul li {color:#00548C} .eb .top5 h2 {border-bottom:1px solid #b1c8dc;border-top-color:#b1c8dc;font-family:Arial, Helvetica, sans-serif} .top5 .s2 {margin-top:25px} .footer .ad{border-top-color:#b1c8dc} .fSectionLinks {border-top-color:#b1c8dc;border-bottom-color:#b1c8dc} /* ----- IE fixes ----- */ * html .top5 .s1, * html .top5 .s2, * html .top5 .s3, * html .top5 .s4, * html .top5 .s5 {border-top:none} /* redefine the value */ /* HACKS TO SUPPORT LEGACY HTML OUTPUT (added 2010-05-14) temporary only - remove as soon as Common Templates version is built -------------------------------------------------------------------- */ /* image menu/slider index */ h1.imageMenu {width:620px;height:69px;text-indent:-9000px} #imageMenu {position:relative;width:620px;height:257px;overflow:hidden;margin-bottom:20px} #imageMenu ul {height:257px;width:1000px;margin:0} #imageMenu ul li {list-style-type:none;float:left;background:none;padding-left:0;margin:0} #imageMenu ul li a {border-right:2px solid #fff;cursor:pointer;display:block;overflow:hidden;width:155px;height:257px;text-indent:-9000px} body#subindex .writeoffs.advertorial {margin:0} .writeoffs.advertorial .s1 {margin:0 20px 20px 0;width:300px;float:left;position:relative;overflow:hidden} .writeoffs.advertorial .s2 {margin:0 0 20px;width:300px;float:left;position:relative;overflow:hidden} .writeoffs.advertorial .caption {position:relative;padding:0 0 5px;background:#FFF6B5 none} .writeoffs.advertorial h3 {margin:0 10px;padding-top:3px;font-size:1.5em;font-weight:normal} .writeoffs.advertorial h3 a {color:#0076c1} .writeoffs.advertorial p {margin:0 10px;color:#000}