/* Skin Europa - $Revision: 12786 $ - $Date: 2012-01-27 09:57:02 +1100 (Fri, 27 Jan 2012) $ - $Author: jstreet $ */ /* ____ _ _ ____ ____ ____ / ___|| | _(_)_ __ / ___/ ___/ ___| \___ \| |/ / | '_ \| | \___ \___ \ ___) | <| | | | | |___ ___) |__) | |____/|_|\_\_|_| |_|\____|____/____/ for Europa skin Fairfax Digital CSS framework Author: Jens Korff Born: November 2008 Last modified: see first line (updated automatically by SVN) ----------------------------------------------------------------------------------------- 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: #1ca7ef (light blue) text,borders #898989 (grey) background #181818 (grey) */ /* -------------------------------------------------------------------------------------- =Global -------------------------------------------------------------------------------------- */ html {background-color:#000} body {background:#252525 none;width:990px;position:relative/*for sponsored version to position gutter link*/} /* Social links & buttons */ .social a, .social button {background:transparent url('img/sprite-skin-europa.png') no-repeat 0 0/*dummy default*/} .social .share a {background-position:-1043px -615px/*dividers, arrows, icons: social sharing icons*/} .social .copy a {background-position:-1059px -736px/*dividers, arrows, icons: copy video*/} .social .facebook a {background-position:-1013px -690px/*dividers, arrows, icons: Facebook*/} .social .delicious a {background-position:-1087px -707px/*dividers, arrows, icons: Delicious*/} .social .twitter a {background-position:-1015px -675px/*dividers, arrows, icons: Twitter*/} .social .digg a {background-position:-1073px -721px/*dividers, arrows, icons: Digg*/} .social .embed a {background-position:-1069px -584px/*dividers, arrows, icons:social sharing icons*/} .social .subscribe a {background-position:-1056px -599px/*dividers, arrows, icons:social sharing icons*/} .social .email a {background-position:-1082px -569px/*dividers, arrows, icons:social sharing icons*/} /* Clipping */ .social .clipping {display:none} .scriptable .social .clipping {display:block} .social .clipping button {position:relative; top:-3px; padding-left:20px; color:#fff; background-position:-479px -720px/*dividers, arrows, icons:clipping star*/} @-moz-document url-prefix() {.social .clipping button {padding-left:16px;}} /* Firefox */ .social .clipping button:hover, .social .clipping button:focus {text-decoration:underline} *+ html .social .clipping button {padding-top:1px} /* -------------------------------------------------------------------------------------- =Layout -------------------------------------------------------------------------------------- */ .wrap {background-color:#252525;/*Next two styles are for sponsored version:*/position:relative;z-index:1} #content {position:relative/*for sponsored version to position the coloured div*/} /* ----- IE fixes ----- */ * html #content {overflow:visible;margin-right:14px} .hidden {display:none} /* -------------------------------------------------------------------------------------- =Network strip top (network-wide static component) -------------------------------------------------------------------------------------- */ .scriptable .nN-whiteStrip, .scriptable .nN-footerLinks {background-color:#000;border:0;height:33px} .nN-whiteStrip a.logo, .nN-footerLinks a.logo {height:33px;width:65px;margin:0;background:transparent url('img/sprite-logo-fd-black-bg.png') no-repeat -114px 0/*fd-top-logo*/} .nN-whiteStrip a:link,.nN-whiteStrip a:visited {color:#898989} .nN-whiteStrip li, .scriptable .nN-whiteStrip .hasDropdown {border-color:#898989} .nN-whiteStrip .memberCentre {margin-top:.5em} .nN-whiteStrip .memberCentre li {background:transparent none;padding-top:0;border-color:#656565} .nN-whiteStrip .memberCentre a:link, .nN-whiteStrip .memberCentre a:visited {color:#656565} /* ----- IE fixes ----- */ * html .nN-whiteStrip a {color:#898989!important} .nN-footerLinks a, .nN-footerLinks a:visited {color:#898989;font-size:11px;text-decoration:none} /* -------------------------------------------------------------------------------------- =Header -------------------------------------------------------------------------------------- */ .header {height:48px;background-color:transparent;border:0;margin:0} .wrap .header .mh-logo {float:left;margin:3px 0 0;background:transparent url('img/sprite-skin-europa.png') no-repeat -170px -136px/*masthead logo; default: SMH*/} .header .mh-logo a {width:100%;height:100%} /* Do not display masthead logo element if page is part of stand-alone section (e.g. National Times):*/ .header .mh-logo {width:0/*width needs to go to masthead-specific code (at the end of this file)*/} /* Multimedia header */ .mT-headerMultimedia h1 {text-indent:-9000px}/* Don't show header */ .mT-headerMultimedia .mh-section {font-size:1.4em;font-family:Georgia,"Times New Roman",Times,serif;color:#ddd;float:left;margin-left:.75em;border-left:2px solid #555;padding-left:.75em;line-height:2em;margin-top:.4em} /* sub-section heading */ .mT-headerMultimedia .mh-section a {display:block;line-height:2em;margin-left:-.75em;padding:0 .75em} /* increase the clickable area*/ .mT-headerMultimedia ul {list-style-type:none;float:right;margin:18px 0 0 10px} .mT-headerMultimedia li {display:inline;margin:0 2px 0 0;padding:0 4px 0 0;font-size:.94em;background:transparent url('img/sprite-skin-europa.png') no-repeat 100% -523px/*vertical bar (blue)*/} .mT-headerMultimedia li.last {padding:0;background-image:none} .mT-headerMultimedia ul a {color:#1ca7ef} #vision a {display:none/*no longer supported, remove eventually.*/} /* ----- IE fixes ----- */ * html .mT-headerMultimedia li {margin-right:4px;padding-right:2px} * html .mT-headerMultimedia li.last {margin:0} *+ html .mT-headerMultimedia li {margin-right:4px;padding-right:2px} *+ html .mT-headerMultimedia li.last {margin:0} /* Section logos (require section name as class in body tag) */ .smh.nationaltimes .mT-headerMultimedia .mh-section, .theage.nationaltimes .mT-headerMultimedia .mh-section, .watoday.nationaltimes .mT-headerMultimedia .mh-section, .brisbanetimes.nationaltimes .mT-headerMultimedia .mh-section, .driveTV .mT-headerMultimedia .mh-section {border-left:1px solid #777;padding:0;margin-left:9px;text-indent:-9000px;height:35px;width:150px;background:transparent url('img/sprite-skin-europa.png') no-repeat -485px -355px/*headings - section headings - National Times*/} .driveTV .mT-headerMultimedia .mh-section {width:92px;height:33px;background-position:8px -921px/*icons (for dark bg) | Drive.tv logo*/} /* -------------------------------------------------------------------------------------- =Images -------------------------------------------------------------------------------------- */ .span-8 .more-photos, .span-8 .play-video {margin:0 9px 9px 0} /* -------------------------------------------------------------------------------------- =Search -------------------------------------------------------------------------------------- */ /* Standard search form */ .cN-searchBox form {width:343px;height:25px;bottom:auto;top:auto;margin-top:12px;background:transparent url('img/sprite-skin-europa.png') no-repeat -834px -1200px/*search box*/} .cN-searchBox label input {width:152px;height:21px;padding-top:0;margin:1px 0 0 1px;line-height:21px;color:#fff} .cN-searchBox .ddown {left:-77px;width:101px;margin-top:0;padding-top:2px;font-size:1em;border:1px solid #424242;border-width:1px 1px 0 0} .cN-searchBox .open {background-color:#1B1B1B;border-color:#424242;border-left-width:1px} .ddown .srch-wrap {z-index:1;border:0} .ddown .srch-wrap div {display:none} .ddown .selected {width:80px;padding-left:3px} .cN-searchBox .open .srch-wrap div {display:block;width:105px;border-color:#1B1B1B} .ddown li {display:block;padding:0;margin:0;cursor:pointer;background:none} .ddown ul {margin:0;border-color:#424242;background-color:#1B1B1B/*search dropdown*/} .ddown li li {display:block;border-color:#424242} .btnSubmit {width:74px;height:25px;color:#fff;font-size:1.0833em;padding-bottom:.3em;background:url('img/sprite-skin-europa.png') no-repeat 0 0/*backgrounds | btn search*/} .btnSubmit:hover {background-position:-75px 0/*backgrounds | btn search hover*/} /* ----- IE fixes ----- */ * html .cN-searchBox form {display:inline} * html .cN-searchBox .ddown {padding-top:0} * html .cN-searchBox .ddown li {position:static} * html .cN-searchBox .ddown .selected {width:83px} *+ html .ddown .srch-wrap {background:none} *+ html .cN-searchBox .ddown {padding-top:0} /* Search form with auto-suggest */ .frmSearch {position:relative;float:left;width:222px;height:30px;margin:9px 0 0 56px;padding-left:30px;border:1px solid #5c5c5c;background:#1b1b1b} .frmSearch:before {position:absolute;top:-563px/*negative clip 'top' value + 7px*/;left:-1042px/*negative clip 'left' value +6px*/;content:url('img/sprite-skin-europa.png');clip:rect(570px 1066px 588px 1048px)/*top right bottom left*/} .frmSearch label {position:absolute;left:-9999px} .frmSearch input {height:28px;width:222px;font-size:1.1667em;line-height:28px;color:#c7c7c7;border:0;background:transparent} .frmSearch .feSubmit {display:none/*see separate class to show*/;position:absolute;right:0;top:0;width:25px;height:30px;background:#1b1b1b} .frmSearch .feSubmit input {left:0;width:100%;padding:0;background:url('img/sprite-skin-europa.png') no-repeat -987px -565px/*backgrounds | delete button*/;text-indent:-9999px} .frmSearchLoading .feSubmit, .frmSearchDelete .feSubmit {display:block} .frmSearchLoading .feSubmit {background:#1b1b1b url('img/europa-animated-loader.gif') no-repeat 5px 7px} .frmSearchLoading .feSubmit input {background:none} .frmSearchDelete .feSubmit input {cursor:pointer} /* Auto-suggest */ .frmSearch .wrap-searchResults {display:none/*shown by JS*/;position:absolute;top:45px/*search box height + 15px*/;left:-1px;width:294px;padding:4px;border:1px solid #ababab;background:#000} .frmSearch .wrap-searchResults:after {position:absolute;top:-13px;left:17px;width:27px;height:14px;content:'';background:url('img/sprite-skin-europa.png') no-repeat -1012px -574px/*backgrounds | tooltip (auto-suggest)*/} .frmSearch .wrap-searchResults h4 {margin-bottom:3px;font-size:.916em;text-transform:uppercase;color:#6d6d6d} .frmSearch .ui-autocomplete {/*Start:Override jQuery-injected CSS:*/left:0!important;top:0px!important;width:294px!important/*End:Override jQuery-injected CSS*/;max-height:314px;overflow-y:scroll;margin:0;padding:10px 0;background:#f5f5f5} .frmSearch .ui-autocomplete li {overflow:hidden;display:block;height:59px/*entry height*/;margin:0;padding:0 0 6px;border-bottom:1px solid #dfdfdf;background:none} .frmSearch .ui-menu-item div {padding:5px 7px 0;border-top:1px solid #fff} .frmSearch .ui-autocomplete li:first-child {height:53px} .frmSearch .ui-autocomplete li:first-child div {padding-top:0;border:0} .frmSearch .ui-menu-item img {float:left;margin:0 10px 0 0} .frmSearch .ui-menu-item h3 {font:bold 1.24em Arial,sans-serif} .frmSearch .ui-menu-item p {float:none} .frmSearch .ui-menu-item a {display:block;color:#333} .frmSearch .ui-menu-item a:hover {text-decoration:none} .frmSearch .ui-state-hover a {color:#1ca7ef;text-decoration:none} .frmSearch .more {clear:both;display:none/*shown with JS*/;padding:8px 0;font-weight:bold;text-align:center;text-transform:uppercase;color:#1ca7ef;background:#f5f5f5} .frmSearch .searching {float:none;margin:0;font-weight:bold;text-align:center;line-height:66px;text-transform:uppercase;color:#444;background:#f5f5f5}/*paragraph injected with JS*/ .frmSearch .nothingFound {float:none;margin:0;padding:13px 0;text-align:center;color:#444;background:#f5f5f5}/*paragraph injected with JS*/ .frmSearch .wrapSearchResultsShow {display:block} .frmSearch .wrapSearchResultsMore ul {padding-bottom:0} .frmSearch .wrapSearchResultsMore li {height:auto;padding-bottom:0} .frmSearch .wrapSearchResultsMore div {height:59px;padding-bottom:6px} .frmSearch .wrapSearchResultsMore .more {display:block;height:auto;padding:8px 0;font-size:1.091em} .frmSearch .wrapSearchResultsMore .more a {color:#1ca7ef} .frmSearch .wrapSearchResultsMore .more a:hover {text-decoration:underline} /* ----- IE fixes ----- */ * html .frmSearch label {top:7px;left:6px;width:18px;height:18px;background:url('img/sprite-skin-europa.png') no-repeat -1049px -570px/*mag glass*/;text-indent:-9999px} * html .frmSearch .feSubmit input {text-indent:0} * html .frmSearch .feSubmit label {left:-9999px} * html .frmSearch .wrap-searchResults {top:30px/*no pointer*/} * html .frmSearch .ui-menu-item div {zoom:1;padding-bottom:5px} * html .frmSearch .wrapSearchResultsScroll .ui-autocomplete {height:315px;overflow-y:scroll} * html .frmSearch .more {margin:-3px 0 0} *+ html .frmSearch label {top:7px;left:6px;width:18px;height:18px;background:url('img/sprite-skin-europa.png') no-repeat -1049px -570px/*mag glass*/;text-indent:-9999px} *+ html .frmSearch .feSubmit input {text-indent:0} *+ html .frmSearch .feSubmit label {left:-9999px} *+ html .frmSearch input {position:relative;top:-1px;left:-2px} *+ html .frmSearch .wrap-searchResults {top:30px/*no pointer*/} *+ html .frmSearch .more {margin:-4px 0 0;padding-top:6px} /*IE8*/ .frmSearch input {position:relative;left:-2px} /* -------------------------------------------------------------------------------------- =Video player box -------------------------------------------------------------------------------------- */ .video-player-wrap {position:relative;top:-3px;left:-3px/*the padding of cT-multimediaElement*/;overflow:hidden/*with no height equals class 'cfix'*/;width:620px;padding:3px 3px 0;background:transparent url('img/sprite-skin-europa.png') no-repeat -165px -1200px/*video-player-box*/} .video-player-wrap a {color:#1ca7ef} .wofpuff {background-color:#000;overflow:hidden/*with no height equals class 'cfix'*/;border-bottom:1px solid #222;} /* ----- IE fixes ----- */ * html .wofpuff {height:1%} .video-player-wrap .puff {float:left;width:430px;padding:12px 0 7px 11px;background-color:#000} .video-player-wrap h1 {margin-bottom:.2em;color:#ccc;font:normal 1.7em Georgia, "Times New Roman", Times, serif} .video-player-wrap h1 span {color:#656565;font:normal .6em Arial,sans-serif} .video-player-wrap p {color:#ccc;font:normal 1em Arial,sans-serif;line-height:1.5} .video-player-wrap p cite {color:#656565;display:block} .video-player-wrap li {list-style-type:square;color:#898989} .video-player-wrap .social {position:relative;width:117px;float:right;margin-top:7px;padding-bottom:30px/*force parent puff to min height to avoid bg image appear*/} .video-player-wrap .social li {list-style-type:none;margin:0;line-height:1.7;font-size:.94em} .video-player-wrap .social a {padding-left:20px} /* .video-player-wrap .social a {padding-left:20px;background:transparent url('img/sprite-skin-europa.png') no-repeat -1082px -569px} .video-player-wrap .social .embed a {background-position:-1069px -584px} .video-player-wrap .social .subscribe a {background-position:-1056px -599px} .video-player-wrap .social .share a {background-position:-1043px -615px} */ .video-player-wrap .social a,.video-player-wrap .social a:visited {color:#606060} /* Share bookmark pop-up: */ .video-player-wrap .social ul {position:absolute;width:109px;top:0;left:101px;background-color:#ECF2F6;border:4px solid #ccc;visibility:hidden} .video-player-wrap .social ul li {margin-left:3px} /* Non-Javascript state (JS removes this class when active): */ .video-player-wrap .accessibleStoryTools li {line-height:1.45} .video-player-wrap .accessibleStoryTools ul {border:0;background:transparent;width:177px;margin-left:-20px/*= padding-left of parent
  • */} .video-player-wrap .wof {float:right;width:143px;padding:3px 18px 5px;margin:0;font-size:.9em;background-color:#181818} .video-player-wrap .wof strong {font-weight:bold} .video-player-wrap .wof p {color:#898989} .video-player-wrap .wof a {padding-right:10px;background:transparent url('img/sprite-skin-europa.png') no-repeat 100% -537px/*Arrow right*/} .sectionTV .video-player-wrap .wofpuff {position:relative;min-height:143px/*=wof height*/} .sectionTV .video-player-wrap .puff {width:458px;padding-bottom:34px/*accommodate space for social links and align parent box with RHS*/} .sectionTV .video-player-wrap p cite {display:inline} .sectionTV .video-player-wrap .social {position:absolute;left:14px;bottom:4px;float:none;width:auto;margin:0;padding:0} .sectionTV .video-player-wrap .social > li {display:inline;margin-right:16px} .sectionTV .video-player-wrap .social ul {left:315px;top:-80px} .sectionTV .clipping {margin-top:-3px} .sectionTV .video-player-wrap .wof {width:128px;padding:12px 10px 5px 13px} /* ----- IE fixes ----- */ * html .sectionTV .video-player-wrap .social li {display:inline} * html .sectionTV .video-player-wrap .social ul {left:267px} .video-player {width:620px;height:349px;background:#000} /* Overlay screens: */ .overlay {display:none/*displayed by Javascript*/;position:absolute;top:3px;left:3px;z-index:5;width:578px;height:307px;padding:21px;overflow:hidden/*mainly for Safari/Chrome where you can expand textarea*/;color:#adadad;background:transparent url('img/sprite-skin-europa.png') no-repeat -480px 0/*overlay screen*/} .overlay h3 {height:16px;width:200px;margin-bottom:19px;background:transparent url('img/sprite-skin-europa.png') no-repeat -170px -600px/*Heading: Video settings (default)*/;text-indent:-9000px} .overlay h4 {text-transform:none} .overlay p {color:#adadad} .overlay li {list-style-type:none;color:#adadad} .overlay ul li {list-style-type:square} .overlay form {margin-top:17px} .overlay form li {margin-bottom:4px} .overlay label {float:left;width:90px} .overlay .button {float:left;margin:9px 0;height:27px} .overlay .submit input {border:0;height:27px;padding:0 0 2px 2px;cursor:pointer;color:#181818;font-weight:bold;background:transparent url('img/sprite-skin-europa.png') no-repeat -474px -690px/*form button (left)*/} .overlay .submit span {float:left;display:block;height:27px;width:3px;background:transparent url('img/sprite-skin-europa.png') no-repeat -475px -717px/*form button (right)*/} .overlay .previous {float:right;display:block;font-size:.94em} /* ----- IE fixes ----- */ * html .overlay.visible {display:block} * html .overlay h3 {font-size:0/*IE6 expands height otherwise*/} * html .overlay .submit input {overflow:visible;padding:0 3px 2px 5px;margin-top:0} * html .video-player-wrap .visible {display:block} /*IE6 ranks specificity of '.overlay.visible' to 10 because it ignores first class => overlays never visible */ *+ html .overlay .submit input {padding:0 3px 2px 5px;margin-top:0} /* Connection speed */ .overlayWait {height:278px;padding-top:50px;font-size:1.4em;text-align:center;background:#000} .overlayWait p {font-weight:bold;color:#fff} /* Video settings */ .overlaySettings p {font-weight:bold} .overlaySettings .submit p {font-weight:normal;clear:left} .overlaySettings label {width:auto} .overlaySettings .submit input {margin:0} /* Feedback form and confirmation screen */ .overlayFeedback h3,.overlayFeedbackResponse h3 {background-position:-170px -619px/*Video feedback*/} .overlayFeedback p {font-weight:bold} .overlayFeedback label {width:63px} .overlayFeedback input {width:220px} .overlayFeedback select {width:224px} .overlayFeedback .submit input {width:auto} /* ----- IE fixes ----- */ * html .overlayFeedback select {width:228px} *+ html .overlayFeedback select {width:228px} /* Help */ .overlayHelp h3 {background-position:-170px -638px/*Help with videos*/} .overlayHelp h4 {color:#dadada} .overlayHelp p {color:#dadada;margin-bottom:.8em} /* Video error */ .overlayError {text-align:center} .overlayError h3 {background-position:-170px -657px;width:231px;height:19px;margin:37px auto 13px/*Video unable to load*/} .overlayError h4 {width:108px;height:13px;margin:30px auto 12px;background:transparent url('img/sprite-skin-europa.png') no-repeat -170px -680px/*Related videos*/;text-indent:-9000px} .overlayError .cS-videoGalleryLinks {background:transparent none;width:441px;margin:0 auto;padding:0} .overlayError .cS-videoGalleryLinks ul {margin-left:-7px;text-align:left} .overlayError .cS-videoGalleryLinks li {float:left;margin:0 0 0 7px;width:105px;list-style-type:none} .overlayError .cS-videoGalleryLinks li a {width:92px;height:52px;border:1px solid #ccc;padding:3px;background-color:#fff;color:#1ca7ef} .overlayError .cS-videoGalleryLinks p a {width:auto;height:auto;border:0;padding:0;background-color:transparent} /* ----- IE fixes ----- */ * html .overlayError h4 {font-size:0/*IE6 expands height otherwise*/} * html .overlayError .cS-videoGalleryLinks ul {height:1%;width:472px/*IE6/7 needs width here - adjust for different column widths*/} *+ html .overlayError .cS-videoGalleryLinks ul {height:1%;width:448px/*IE6/7 needs width here - adjust for different column widths*/} /* Embed video */ .overlayEmbed h3 {background-position:-170px -696px} .overlayEmbed label {display:none} .overlayEmbed .button {float:left;margin-right:7px} /* Email a friend and confirmation screen */ .overlayEmail h3,.overlayEmailResponse h3 {background-position:-170px -715px} .overlayEmail p {color:#808080;font-size:.94em} .overlayEmail strong {color:#fff;font-size:1.7em} /* Copy video link */ .overlayCopy h3 {background-position:-170px -734px} .overlayCopy label {display:none} .overlayCopy .button {float:left;margin-right:7px} /* Video not found NOTE: This is just a small stripe, not a full cover-all screen. */ .overlayNotFound {top:233px;height:20px;width:600px;padding:10px} .overlayNotFound p {font-weight:bold;font-size:1.15em;color:#1CA7EF} .overlayNotFound span {font-weight:normal;font-size:.85em;color:#777} .overlayNotFound a {font-weight:normal;font-size:.85em;color:#fff} /* New form snippet in overlay */ .overlay .s-formElement {overflow:hidden; margin-bottom:10px} .overlay .s-formElement label {width:120px} .overlay .s-formElement div {float:left; width:270px} .overlay .s-formElement input, .overlay .s-formElement textarea {width:200px} .overlay .s-formElement textarea {width:265px; height:80px} .overlay .feSubmit {margin-left:120px} .overlay .feSubmit input {width:auto} .overlay .s-formElement .error {font-size:.916em; color:#d20000} .overlay .feError .error {display:block}/*show error message */ /* ----- IE fixes ----- */ * html .overlay .s-formElement {zoom:1} /* -------------------------------------------------------------------------------------- =Site-specific components -------------------------------------------------------------------------------------- */ .cS-videoGalleryLinks {position:relative;width:286px;height:165px;float:none;margin-bottom:10px;padding:13px 8px 0;background:#181818 url('img/sprite-skin-europa.png') no-repeat -474px -511px/*RHS box*/} .cS-videoGalleryLinks h3 {width:170px;height:13px;margin-bottom:9px;background:transparent url('img/sprite-skin-europa.png') no-repeat -170px -832px/*heading: More Entertainment*/;text-indent:-9000px} .cS-videoGalleryLinks ul {list-style-type:none;margin-left:-5px} .cS-videoGalleryLinks li {width:92px;font-size:.92em;position:relative;float:left;margin:0 0 3px 5px} .cS-videoGalleryLinks li a {display:block;width:92px;height:51px;text-align:center}/* Allow images to be smaller, but retain clickable area to align thumbs nicely. */ .cS-videoGalleryLinks p {padding-top:1px;color:#999} .cS-videoGalleryLinks p a {color:#999;width:auto;height:auto;text-align:left} .cS-videoGalleryLinks p a:visited {color:#999} /* Smaller box: */ .cS-videoGalleryLinks.smallBox {position:relative;margin-top:38px/*heading height + 20px*/;padding:6px 5px 0;width:292px;height:auto;background-position:-798px 100%/*RHS box, bottom*/} .cS-videoGalleryLinks.smallBox h3 {position:absolute;top:-18px;left:0;height:20px;width:100%} .cS-videoGalleryLinks.smallBox li {width:70px;margin:0 0 3px 4px} .cS-videoGalleryLinks.smallBox li a {width:70px;height:40px} .cS-videoGalleryLinks.smallBox p a {width:auto;height:auto} /* Different headings: */ .cS-videoGalleryLinks.featuredVideos h3 {background-position:-170px -465px/*heading: Featured Videos*/} .cS-videoGalleryLinks.mostWatched h3 {background-position:-170px -487px/*heading: Most Watched Videos*/} .cS-videoGalleryLinks.mostRecent h3 {background-position:-170px -509px/*heading: Most Recent Videos*/} .cS-videoGalleryLinks.moreEntertain h3 {background-position:-170px -832px/*heading: More Entertainment*/} .cS-videoGalleryLinks.moreNews h3 {background-position:-170px -849px/*heading: More News*/} .cS-videoGalleryLinks.moreLifeStyle h3 {background-position:-170px -865px/*heading: More Life & Style*/} .cS-videoGalleryLinks.moreExecStyle h3 {background-position:-170px -881px/*heading: More Executive Style*/} .cS-videoGalleryLinks.moreBusiness h3 {background-position:-170px -897px/*heading: More Business*/} .cS-videoGalleryLinks.moreTechnology h3 {background-position:-170px -913px/*heading: More Technology*/} .cS-videoGalleryLinks.moreSport h3 {background-position:-170px -929px/*heading: More Sport*/} .cS-videoGalleryLinks.moreOuterNet h3 {background-position:-170px -945px/*heading: More Outer Net*/} .cS-videoGalleryLinks.moreProperty h3 {background-position:-170px -961px/*heading: More Property*/} .cS-videoGalleryLinks.moreTravel h3 {background-position:-170px -977px/*heading: More Travel*/} .cS-videoGalleryLinks.moreFood h3 {background-position:-170px -993px/*heading: More Food*/} .cS-videoGalleryLinks.moreSponsors h3 {background-position:-170px -1009px/*heading: More Sponsors*/} .cS-videoGalleryLinks.moreCars h3 {background-position:-170px -1025px/*heading: More Cars*/} /* Sponsor */ .cS-videoGalleryLinks h3 span {position:absolute;right:7px;top:8px;display:block;height:22px} .cS-videoGalleryLinks h3 span a {display:block;height:100%} .cS-videoGalleryLinks h3 span img {position:absolute;top:0;right:0} /* ----- IE fixes ----- */ * html .cS-videoGalleryLinks {background-position:-475px -511px/*RHS box - other browsers have a 302px-wide box in the aside, but the aside in IE 6 is overflow:hidden with width 300px - so tweak the background-position so the effect is less obvious */} * html .cS-videoGalleryLinks.smallBox {background-position:-798px 100%/*RHS box, bottom - don't override for this variation*/} * html .cS-videoGalleryLinks h3 {font-size:1px/*IE6 will expand height otherwise*/} * html .cS-videoGalleryLinks ul {height:1%} *+ html .cS-videoGalleryLinks ul {height:1%} * html .cS-videoGalleryLinks.smallBox ul {width:296px/*IE6/7 needs width here - adjust for different column widths*/} *+ html .cS-videoGalleryLinks.smallBox ul {width:296px/*dto.*/} * html .cS-videoGalleryLinks li {display:inline}/*Defeat double-margin bug*/ * html .cS-videoGalleryLinks p a:link {color:#999} /* Toggler: */ .cS-videoGalleryLinks div {overflow:hidden} .cS-videoGalleryLinks div ul {position:relative;height:118px;width:1000px;margin:0} .cS-videoGalleryLinks div li {float:left;margin:0 5px 3px 0} .cS-videoGalleryLinks .nav {margin:0} .cS-videoGalleryLinks .nav li {width:auto;height:auto;margin:0;padding-left:10px;float:left;background:transparent url('img/sprite-skin-europa.png') no-repeat -1095px -552px/*Arrow left*/} .cS-videoGalleryLinks .nav li.next {float:right;padding-right:10px;background-position:100% -537px/*dividers, arrows, icons | arrow blue, right*/} .cS-videoGalleryLinks .nav a {width:auto;height:auto} .cS-videoGalleryLinks .nav a:visited {color:#1ca7ef} .accessibleToggler {height:auto;background:#181818 none;border:1px solid #000/*Remove static bg image and 'imitate' it with flexible styles*/} .accessibleToggler .togglerMask {overflow:visible} .accessibleToggler ul {height:auto;width:291px} .accessibleToggler .nav {display:none/*No nav required without JS*/} /* ----- IE fixes ----- */ * html .cS-videoGalleryLinks div {position:relative;width:286px} *+ html .cS-videoGalleryLinks div {position:relative} * html .cS-videoGalleryLinks .nav {width:286px;padding-bottom:9px} *+ html .cS-videoGalleryLinks .nav {width:286px;padding-bottom:9px} /* End Toggler */ .videoGalLinksSponsored /*extends cS-videoGalleryLinks; for Drive TV template*/ {height:142px;width:302px;padding-right:0;padding-left:0} .videoGalLinksSponsored h3 {width:138px;margin-left:8px;background-position:-170px -1041px/*heading: Sponsored Videos*/} .videoGalLinksSponsored h3 span {max-width:140px} .videoGalLinksSponsored div {margin:0 8px} .videoGalLinksSponsored div ul {overflow:hidden;height:99px} .videoGalLinksSponsored div li {margin-bottom:0} .videoGalLinksSponsored .nav {overflow:hidden;padding:0 8px 5px;background:#181818 url("img/sprite-skin-europa.png") no-repeat -474px -668px} /* ----- IE fixes ----- */ * html .videoGalLinksSponsored .nav {height:12px} *+ html .videoGalLinksSponsored .nav {height:12px} .cS-featureBox {position:relative;width:298px;padding:2px;margin-bottom:10px;background:transparent url('img/sprite-skin-europa.png') no-repeat -798px 100%/*RHS box, bottom*/} .cS-featureBox h3 {position:absolute;top:0;left:0;width:298px;padding:2px 2px 0;background:transparent url('img/sprite-skin-europa.png') no-repeat -798px -1452px/*RHS box, top*/} .cS-featureBox.noHeading h3 {text-indent:-9000px} .cS-featureBox.noBg {background:transparent none;padding:0;width:auto} .cS-featureBox.noBg h3 {left:-9000px} .cS-channels {position:relative;width:621px;height:496px;margin-top:48px/*heading top + 20px*/;background:transparent url('img/sprite-skin-europa.png') no-repeat -167px -1203px/*channel box*/} .cS-channels h2 {position:absolute;z-index:2/*must override .channel-clips h3*/;top:-28px;left:0;height:17px;width:300px/*max*/;background:transparent url('img/sprite-skin-europa.png') no-repeat -170px -250px/*channel heading Canberra Times*/;text-indent:-9000px} /* ----- IE fixes ----- */ * html .cS-channels h2 {font-size:10px/*restrict height, bleeds out of box otherwise*/} /* Channel navigation */ .channel-nav {float:left;width:162px;height:486px/*height cS-channels minus 10px*/;overflow:auto} .channel-nav .cN-groupNavigator {width:136px;margin:0 0 2px 14px;border:0;padding:0} .channel-nav .cN-groupNavigator h4 {border:0} .channel-nav .cN-groupNavigator h4 a {padding-left:11px;background:transparent url('img/sprite-skin-europa.png') no-repeat -1038px -632px/*Arrow right*/} .channel-nav .cN-groupNavigator h4 span {display:none} .channel-nav .cN-groupNavigator a,.channel-nav .cN-groupNavigator a:link,.channel-nav .cN-groupNavigator a:visited {color:#fff} .channel-nav .cN-groupNavigator .selected a {color:#000} .channel-nav .cN-groupNavigator a:hover {color:#80d4ff} /* Open state: */ .channel-nav .cN-groupNavigator.open h4 a {background-position:-1030px -647px/*Arrow down*/} .channel-nav .cN-groupNavigator.open ul {margin:0 0 11px 11px/*left is same as padding for h4 a {}*/} /* CSS Styles that are needed by jScrollPane for it to operate correctly. */ .jspContainer {overflow:hidden;position:relative} .jspPane {position:absolute} .jspVerticalBar {position:absolute;top:0;right:0;width:12px;height:100%;background:red} .jspVerticalBar * {margin:0;padding:0} .jspCap {display:none} .jspTrack {background:#5897A7;position:relative} .jspDrag {position:relative;top:0;left:0;height:29px!important;cursor:pointer;background:#8BD5DB url('img/sprite-skin-europa.png') no-repeat -296px -25px/*channel slider*/} .jspArrow {background:#50506d;text-indent:-20000px;display:block;cursor:pointer} .jspArrow.jspDisabled {cursor:default;background:#80808d} .jspVerticalBar .jspArrow {height:18px} .jspVerticalBar .jspArrow:focus {outline:none} .jspVerticalBar .jspArrowUp {background:transparent url('img/sprite-skin-europa.png') no-repeat -307px -30px/*channel nav arrow up*/} .jspVerticalBar .jspArrowDown {background:transparent url('img/sprite-skin-europa.png') no-repeat -319px -30px/*channel nav arrow down*/} .jspCorner {background:#eeeef4;float:left;height:100%} /* ----- IE fixes ----- */ * html .jspCorner {margin:0 -3px 0 0}/* Fix for IE6 3 pixel bug */ /* Channel clips area */ .channel-clips {position:relative;float:right;width:451px;height:456px;padding-top:40px;border-right:1px solid #2a2a2a} .channel-clips h3 {position:absolute;z-index:1/*must be lower than .cS-channels h2*/;width:428px;height:40px;top:0;left:23px;color:#fff;font:normal 1.5em/40px Arial, Helvetica, sans-serif} .channel-clips/*.graphic-heading*/ h3 {width:438px;height:68px;left:13px;/*top:-28px;text-indent:-9000px*/}/* For graphic headings. If you change the commented values, change them in video.css as well! */ /* NOTE: We define as many styles which all graphical headings share active and disable only those which affect rendering of text-only headings. For the backend not need to add another class we have to repeat the styles for graphical headings for each of them: */ /* IMPORTANT: (1) indicates that this channel name equals a section name which is also a body class. In that case IE6 would * pick up these styles if we didn't preced them with '.cS-channels'. If we drop IE6 support, remove this additional class. * * (2) indicates that because the base channel class has the restriction of (1) we also need to increase specificity for the * secondary classes to successfully override the base class styles. * * (3) If you ADD or REMOVE channels, also update sponsored/video/video.css. */ /* News */ .channel-clips.news h3 {background:url('img/showtitle-sprite_News.jpg') no-repeat 0 68px/*default: no bg image*/} .channel-clips.selections h3 {top:-28px;text-indent:-9000px;background-position:0 0} .channel-clips.nationalnews h3 {top:-28px;text-indent:-9000px;background-position:0 -68px} .channel-clips.worldnews h3 {top:-28px;text-indent:-9000px;background-position:0 -136px} .channel-clips.indepth h3 {top:-28px;text-indent:-9000px;background-position:0 -204px} /* Entertainment */ /*(1)*/.cS-channels .channel-clips.entertainment h3 {background:url('img/showtitle-sprite_Entertainment.jpg') no-repeat 0 68px/*default: no bg image*/} /*(2)*/.cS-channels .channel-clips.redcarpet h3 {top:-28px;text-indent:-9000px;background-position:0 0} /*(2)*/.cS-channels .channel-clips.trashtalk h3 {top:-28px;text-indent:-9000px;background-position:0 -68px} /*(2)*/.cS-channels .channel-clips.theguide h3 {top:-28px;text-indent:-9000px;background-position:0 -136px} /*(2)*/.cS-channels .channel-clips.pickoftheflicks h3 {top:-28px;text-indent:-9000px;background-position:0 -204px} /*(2)*/.cS-channels .channel-clips.music h3 {top:-28px;text-indent:-9000px;background-position:0 -272px} /*(2)*/.cS-channels .channel-clips.trailerpark h3 {top:-28px;text-indent:-9000px;background-position:0 -340px} /*(2)*/.cS-channels .channel-clips.weirdweek h3 {top:-28px;text-indent:-9000px;background-position:0 -408px} /* Life & Style */ /*(1)*/.cS-channels .channel-clips.lifestyle h3 {background:url('img/showtitle-sprite_Life+Style.jpg') no-repeat 0 68px/*default: no bg image*/} /*(2)*/.cS-channels .channel-clips.essentials h3 {top:-28px;text-indent:-9000px;background-position:0 0} /*(2)*/.cS-channels .channel-clips.inthemoment h3 {top:-28px;text-indent:-9000px;background-position:0 -68px} /*(2)*/.cS-channels .channel-clips.getfitforsummer h3 {top:-28px;text-indent:-9000px;background-position:0 -136px} /*(2)*/.cS-channels .channel-clips.fashion h3 {top:-28px;text-indent:-9000px;background-position:0 -204px} /*(2)*/.cS-channels .channel-clips.asksam h3 {top:-28px;text-indent:-9000px;background-position:0 -272px} /*(2)*/.cS-channels .channel-clips.essentialbaby h3 {top:-28px;text-indent:-9000px;background-position:0 -340px} /*(2)*/.cS-channels .channel-clips.sexperts h3 {top:-28px;text-indent:-9000px;background-position:0 -408px} /* Executive Style */ .channel-clips.executive-style h3 {background:url('img/showtitle-sprite_ExecutiveStyle.jpg') no-repeat 0 68px/*default: no bg image*/} .channel-clips.toplineliving h3 {top:-28px;text-indent:-9000px;background-position:0 0} /* Business */ /*(1)*/.cS-channels .channel-clips.business h3 {background:url('img/showtitle-sprite_Business.jpg') no-repeat 0 68px/*default: no bg image*/} /*(2)*/.cS-channels .channel-clips.businessday h3 {top:-28px;text-indent:-9000px;background-position:0 0} /*(2)*/.cS-channels .channel-clips.businessunzipped h3 {top:-28px;text-indent:-9000px;background-position:0 -68px} /*(2)*/.cS-channels .channel-clips.businessweek h3 {top:-28px;text-indent:-9000px;background-position:0 -136px} /*(2)*/.cS-channels .channel-clips.ceointerviews h3 {top:-28px;text-indent:-9000px;background-position:0 -204px} /*(2)*/.cS-channels .channel-clips.financewatch h3 {top:-28px;text-indent:-9000px;background-position:0 -272px} /*(2)*/.cS-channels .channel-clips.mysmallbusiness h3 {top:-28px;text-indent:-9000px;background-position:0 -340px} /* Technology */ /*(1)*/.cS-channels .channel-clips.technology h3 {background:url('img/showtitle-sprite_Technology.png') no-repeat 0 68px/*default: no bg image*/} /*(2)*/.cS-channels .channel-clips.techtalk h3 {top:-28px;text-indent:-9000px;background-position:0 0} /*(2)*/.cS-channels .channel-clips.media08 h3 {top:-28px;text-indent:-9000px;background-position:0 -68px} /* Sport */ /*(1)*/.cS-channels .channel-clips.sport h3 {background:url('img/showtitle-sprite_Sport.png') no-repeat 0 68px/*default: no bg image*/} /*(2)*/.cS-channels .channel-clips.sportshq h3 {top:-28px;text-indent:-9000px;background-position:0 0} /*(2)*/.cS-channels .channel-clips.summerofcricket h3 {top:-28px;text-indent:-9000px;background-position:0 -68px} /*(2)*/.cS-channels .channel-clips.rugbyheaven h3 {top:-28px;text-indent:-9000px;background-position:0 -136px} /* Cars */ .channel-clips.cars h3 {background:url('img/showtitle-sprite_Cars.png') no-repeat 0 68px/*default: no bg image*/} .channel-clips.carreviews h3 {top:-28px;text-indent:-9000px;background-position:0 -68px} .channel-clips.carnews h3 {top:-28px;text-indent:-9000px;background-position:0 -136px} .channel-clips.drivetv h3 {top:-28px;text-indent:-9000px;background-position:0 -204px} .channel-clips.caroftheyear h3 {top:-28px;text-indent:-9000px;background-position:0 -272px} .channel-clips.spycorner h3 {top:-28px;text-indent:-9000px;background-position:0 -340px} .channel-clips.interviews h3 {top:-28px;text-indent:-9000px;background-position:0 -408px} .channel-clips.motorbikes h3 {top:-28px;text-indent:-9000px;background-position:0 -476px} /* Property */ .channel-clips.property h3 {background:url('img/showtitle-sprite_Property.png') no-repeat 0 68px/*default: no bg image*/} .channel-clips.hotproperty h3 {top:-28px;text-indent:-9000px;background-position:0 0} /*(1)*/.cS-channels .channel-clips.domain h3 {top:-28px;text-indent:-9000px;background-position:0 -68px} .channel-clips.investmentguide h3 {top:-28px;text-indent:-9000px;background-position:0 -136px} .channel-clips.roombyroom h3 {top:-28px;text-indent:-9000px;background-position:0 -204px} .channel-clips.showmethemoney h3 {top:-28px;text-indent:-9000px;background-position:0 -272px} .channel-clips.homebuyinghappiness h3 {top:-28px;text-indent:-9000px;background-position:0 -340px} .channel-clips.localexperts h3 {top:-28px;text-indent:-9000px;background-position:0 -408px} .channel-clips.economicupdate h3 {top:-28px;text-indent:-9000px;background-position:0 -476px} /* Travel */ /*(1)*/.cS-channels .channel-clips.travel h3 {background:url('img/showtitle-sprite_Travel.png') no-repeat 0 68px/*default: no bg image*/} /*(2)*/.cS-channels .channel-clips.nzinsider h3 {top:-28px;text-indent:-9000px;background-position:0 0} /*(2)*/.cS-channels .channel-clips.bestbreaks h3 {top:-28px;text-indent:-9000px;background-position:0 -68px} /*(2)*/.cS-channels .channel-clips.wowqueensland h3 {top:-28px;text-indent:-9000px;background-position:0 -136px} /*(2)*/.cS-channels .channel-clips.snowreport h3 {top:-28px;text-indent:-9000px;background-position:0 -204px} /* Food */ .channel-clips.food h3 {background:url('img/showtitle-sprite_Food.png') no-repeat 0 68px/*default: no bg image*/} .channel-clips.cuisine h3 {top:-28px;text-indent:-9000px;background-position:0 0} .channel-clips.theinteractivecook h3 {top:-28px;text-indent:-9000px;background-position:0 -68px} /* Miscellaneous */ .channel-clips.misc h3 {background:url('img/showtitle-sprite_Misc.png') no-repeat 0 68px/*default: no bg image*/} .channel-clips.century h3 {top:-28px;text-indent:-9000px;background-position:0 0/*Century of Pictures*/} /* Galleries: */ .channel-clips .cS-videoGalleryLinks {height:112px;margin:0;padding:23px 12px 0;background:transparent none;width:auto} .channel-clips .cS-videoGalleryLinks ul {margin-left:-10px} .channel-clips .cS-videoGalleryLinks li {width:92px;margin:0 5px 3px 10px} .channel-clips .cS-videoGalleryLinks li a {width:92px;height:52px;color:#ccc} .channel-clips .cS-videoGalleryLinks li p {color:#ccc} .channel-clips .cS-videoGalleryLinks li p a {width:auto;height:auto} .channel-clips .cS-videoGalleryLinks li p a:visited {color:#000} .channel-clips .cS-videoGalleryLinks li p a:hover {color:#80d4ff;text-decoration:underline} /* ----- IE fixes ----- */ * html .channel-clips .cS-videoGalleryLinks ul {height:1%;width:437px} *+ html .channel-clips .cS-videoGalleryLinks ul {height:1%;width:437px} * html .channel-clips .cS-videoGalleryLinks li a:link {color:#ccc} * html .channel-clips .cS-videoGalleryLinks li a:visited {color:#000} /* Pagination: */ .channel-clips .cN-pagination {margin:0 1%;width:98%;position:absolute;bottom:5px;left:0;height:2em} .channel-clips .cN-pagination a,.channel-clips .cN-pagination a:hover {color:#80d4ff} .channel-clips .cN-pagination a:visited {color:#fff} .channel-clips .cN-pagination li {font-size:.94em} .channel-clips .cN-pagination ul li {border:0} .channel-clips .cN-pagination ul li a:hover {background:transparent} .channel-clips .cN-pagination .selected {background:transparent;color:#000} .channel-clips .cN-pagination .prev a,.channel-clips .cN-pagination .prev a:hover {padding-left:10px;background:url('img/sprite-skin-europa.png') no-repeat -1095px -551px/*Arrow left*/} .channel-clips .cN-pagination .next a,.channel-clips .cN-pagination .next a:hover {background:url('img/sprite-skin-europa.png') no-repeat -1019px -753px/*Arrow right*/} /* ----- IE fixes ----- */ * html .channel-clips .cN-pagination a:link,* html .channel-clips .cN-pagination a:visited {color:#80d4ff} .cN-multimediaGroup {position:relative;margin:25px 0 10px} .cN-multimediaGroup div li {float:left;width:108px;height:160px;border:0;margin:0 8px 0 0;background:transparent url('img/sprite-skin-europa.png') no-repeat -778px -525px/*Gallery entry*/} .cN-multimediaGroup div a {margin-top:9px;height:60px/*max image height*/;overflow:hidden/*safeguard against portrait images*/} .cN-multimediaGroup div p a {font-weight:bold;text-align:left} .cN-multimediaGroup div p a:link,.cN-multimediaGroup div .more:link {color:#777} .cN-multimediaGroup div p a:hover,.cN-multimediaGroup div .more:hover {text-decoration:underline;color:#1ca7ef} .cN-multimediaGroup div p a:visited,.cN-multimediaGroup div .more:visited {color:#666} .cN-multimediaGroup .more {position:absolute;top:22px;right:50px;padding-right:10px;color:#1ca7ef;font-size:.94em;background:transparent url('img/sprite-skin-europa.png') no-repeat 100% -537px/*Arrow right*/} .cN-multimediaGroup div .more {top:auto;right:16px;height:auto;background:none;padding:0} .cN-multimediaGroup .cN-tabBox div {border:0/*override BT news skin styles*/} .cN-multimediaGroup .cN-tabBox h4 {width:78px;height:auto;margin:.5em 0} .cN-multimediaGroup .cN-tabBox h4 a {padding-right:5px;color:#1ca7ef;font-size:.94em;line-height:1.2;background:transparent url('img/sprite-skin-europa.png') no-repeat -961px -660px/*vertical bar (grey)*/} .cN-multimediaGroup .cN-tabBox .selected h4 {background-color:transparent/*override BT news skin styles*/} .cN-multimediaGroup .cN-tabBox .selected h4 a {color:#888} .cN-tabBox .tab2 h4 {left:73px} .cN-multimediaGroup.carOfTheYear h4 {width:29px} .cN-multimediaGroup.carOfTheYear .tab2 h4 {left:33px} .cN-multimediaGroup.carOfTheYear .tab3 h4 {left:67px} .cN-multimediaGroup.carOfTheYear .tab4 h4 {left:100px} .cN-multimediaGroup.carOfTheYear .tab5 h4 {left:133px} .cN-multimediaGroup.carOfTheYear .tab6 h4 {left:167px} .cN-multimediaGroup.carOfTheYear h4 a {background-position:-1000px -660px/*reposition divider*/} /* Headings */ .cN-multimediaGroup h3 {overflow:hidden;height:17px;width:200px;background:transparent url('img/sprite-skin-europa.png') no-repeat -170px -560px/*heading: Photo galleries*/;text-indent:-9000px} .cN-multimediaGroup.audioSlideshows h3 {background-position:-170px -580px} .cN-multimediaGroup.videos h3 {background-position:-170px -812px} .cN-multimediaGroup.carNews h3 {background-position:-170px -1055px/*headings | CAR NEWS*/} .cN-multimediaGroup.carReviews h3 {background-position:-170px -1073px/*headings | CAR REVIEWS*/} .cN-multimediaGroup.carOfTheYear h3 {background-position:-170px -1091px/*headings | CAR OF THE YEAR*/} .cN-multimediaGroup.mostLikedPhotos h3 {width:177px;background-position:-170px -1109px/*headings | Most liked photos*/} .cN-multimediaGroup.morePhotoGals h3 {width:210px;background-position:-170px -1126px/*headings | More photo galleries*/} .cN-multimediaGroup.audioSlideshows h3 {width:168px;background-position:-170px -1143px/*headings | Audio slideshows*/} .cN-multimediaGroup h3.alt {width:auto; margin-right:80px; text-transform:uppercase; text-indent:0; font-weight:bold; font-family:Arial, Helvetica, sans-serif; color:#898989; background:transparent} .multGroupCarousel /*extends cN-multimediaGroup*/ {overflow:hidden} .multGroupCarousel .cN-tabBox {padding-top:27px} .multGroupCarousel div ul {margin-right:-20px} .multGroupCarousel div li {margin-bottom:10px} .scriptable .multGroupCarousel div ul {position:relative/*for movement*/;width:6657px/*(940px + 11px margin) * 7 sets for Drive TV; about 50 entries for Photo Galleries*/} .scriptable .multGroupCarousel div li {margin:0 11px 0 0} .multGroupCarousel div > .more, .multGroupCarousel div > .previous {position:absolute;right:37px;top:0;overflow:hidden;display:block;height:19px;width:34px;margin:0;padding:0;font-size:.916em;color:#1ca7ef;background:#ccc url('img/sprite-skin-europa.png') no-repeat -888px -525px/*backgrounds | carousel: previous*/;text-indent:-9999px} .multGroupCarousel div > .more {right:0;background-position:-888px -545px/*backgrounds | carousel: next*/} .multGroupCarousel div > .more:hover, .multGroupCarousel div > .previous:hover {background-color:#252525} .multGroupCarousel div .more, .multGroupCarousel div .previous {display:none/*only if JS is on*/} .scriptable .multGroupCarousel div .more, .scriptable .multGroupCarousel div .previous {display:block} .multiGroupSingleOption /*extends cN-multimediaGroup*/ h4 {display:none/*hide heading if there is one tab only*/} .multiGroupSingleOption .cN-tabBox {margin-top:-18px} /* ----- IE fixes ----- */ /* Note: "drive-tv" is a class on the while "supergal" is on the tag! */ * html .drive-tv .multGroupCarousel .cN-tabBox {width:940px} * html.supergal .multGroupCarousel .cN-tabBox {width:620px} * html.galFull .multGroupCarousel .cN-tabBox {width:940px} * html .multGroupCarousel div .more, * html .multGroupCarousel div .previous {position:absolute;top:-28px;overflow:hidden;display:block;height:19px;width:34px;margin:0;padding:0;font-size:.916em;color:#1ca7ef;background:#ccc url('img/sprite-skin-europa.png') no-repeat -888px -525px/*backgrounds | carousel: previous*/;text-indent:-9999px} * html .drive-tv .multGroupCarousel div .more, * html .drive-tv .multGroupCarousel div .previous {left:869px!important} * html.supergal .multGroupCarousel div .more, * html.supergal .multGroupCarousel div .previous {left:544px!important} * html.galFull .multGroupCarousel div .more, * html.galFull .multGroupCarousel div .previous {left:864px!important} * html .multGroupCarousel div .more {background-position:-888px -545px/*backgrounds | carousel: next*/} * html .drive-tv .multGroupCarousel div .more {left:906px!important} * html.supergal .multGroupCarousel div .more {left:586px!important} * html.galFull .multGroupCarousel div .more {left:906px!important} * html .multGroupCarousel div .more:hover, * html .multGroupCarousel div .previous:hover {background-color:#252525} * html .multGroupCarousel div li .more {display:none!important/*avoid having to override all of the above; two links already do what "more" would do anyway*/} * html .drive-tv .multGroupCarousel div .hidden, * html.supergal .multGroupCarousel div .hidden {left:-9999px!important} .cT-multimediaElement {position:relative;width:620px;overflow:hidden/*with no height equals class 'cfix'*/;padding:3px 3px 0;background:#000} /* -------------------------------------------------------------------------------------- =Soundslides -------------------------------------------------------------------------------------- */ .soundslides #content {margin-bottom:0} .soundslides-wrap {padding:16px 0 20px 4px;text-align:center;background:#000 none;position:relative} .soundslides-embed {position:relative} .soundslides .cT-multimediaElement {width:auto;overflow:visible;padding:0;background:transparent none/* reset default styles */} .ss-background {width:940px;height:100%;background:#000 none;position:absolute;top:0;left:0}/*Background for ss and aside*/ .soundslides .aside {position:relative;margin:16px 0 0 -8px;height:552px} .soundslides .aside .ad {position:absolute;bottom:36px;left:0} /* ----- IE fixes ----- */ * html .soundslides-wrap {height:532px/*IE6 wont open ss-background otherwise*/} .cN-storyHeadlineLead {color:#ccc;margin:18px 0 2em} .cN-storyHeadlineLead h3 {margin-bottom:.6em} .cN-storyHeadlineLead h3 a {color:#fff} .cN-storyHeadlineLead h4 {display:block;height:15px;margin-bottom:10px;background:transparent url('img/sprite-skin-europa.png') no-repeat -170px -754px/*heading: Related coverage*/;text-indent:-9000px} .cN-storyHeadlineLead cite {color:#666} .cN-storyHeadlineLead small {color:#a7a7a7} .cN-storyHeadlineLead p {font-size:.94em} .cN-storyHeadlineLead img {border:1px solid #3b3b3b} .cN-storyHeadlineLead ul {clear:both} .cN-storyHeadlineLead li {overflow:hidden;list-style-type:none;margin:0;padding-left:10px;font-size:.94em;background:transparent url('img/sprite-skin-europa.png') no-repeat -1050px -755px/*Arrow blue, right*/} .cT-multimediaMetadata {color:#ccc} .soundslides .cT-multimediaMetadata {margin-top:-12px/*Force alignment of type with soundslides SWF area, JIRA CSU-784*/} .cT-multimediaMetadata h1 {color:f5f5f5;margin-top:.25em;margin-bottom:.25em;font-size:1.7em;font-family:Georgia,"Times New Roman",serif} .cT-multimediaMetadata cite {color:#fff;font-weight:bold;padding-right:.6em;margin-right:.4em} .cT-multimediaMetadata ul {margin:1em 0 2em} .cT-multimediaMetadata li {list-style-type:none;margin:0;padding-left:10px;font-size:.94em;background:transparent url('img/sprite-skin-europa.png') no-repeat -1050px -755px/*Arrow blue, right*/} /* ----- IE fixes ----- */ * html .cT-multimediaMetadata li {position:relative} * html .cT-multimediaMetadata h1 {font-weight:normal} .soundslides .cN-multimediaGroup .more {right:22px} .soundslides .cN-tabBox .more {right:10px} .cN-multimediaGroup.multimedia h3 {background-position:-170px -772px} .cN-multimediaGroup.photogalleries h3 {background-position:-170px -792px} .soundslides .footer {margin-top:25px} /* Social links (SoundSlides only) */ .soundslides .cT-multimediaElement .social {overflow:hidden;position:relative;top:-20px;margin-left:10px} .soundslides .cT-multimediaElement .social h3 {float:left;font:normal .94em/1.4 Arial, Helvetica, sans-serif;color:#656565} .soundslides .cT-multimediaElement .social h3:after {content:":"} .soundslides .cT-multimediaElement .social ul {list-style-type:none;font-size:.94em} .soundslides .cT-multimediaElement .social li {float:left} .soundslides .cT-multimediaElement .social ul a {color:#656565;padding-left:17px} .soundslides .cT-multimediaElement .social .twitter a {padding-left:15px} /* .soundslides .cT-multimediaElement .social ul a {color:#656565;padding-left:17px;background:transparent url('img/sprite-skin-europa.png') no-repeat 0 0} .soundslides .cT-multimediaElement .social .email a {background-position:-1082px -568px} .soundslides .cT-multimediaElement .social .twitter a {background-position:-1015px -675px;padding-left:15px} .soundslides .cT-multimediaElement .social .facebook a {background-position:-1015px -689px} */ /* ----- IE fixes ----- */ * html .soundslides .cT-multimediaElement .social {height:1%} /* -------------------------------------------------------------------------------------- =Super Galleries -------------------------------------------------------------------------------------- */ .supergal, .supergal .nN-whiteStrip {background:#252525} .supergal body, .supergal .wrap {background:#000} .supergal #content {margin-bottom:14px} .supergal .mT-headerMultimedia {padding:11px 0; border-bottom:2px solid #505050} .supergal .cT-multimediaMetadata a {color:#1ca7ef} /* Elements not shown if JS is turned off: */ .wrapGallery .navTop, .wrapGallery .navImg, .wrapGallery .toggleThumbs, .wrapGallery .thumbs p a, .wrapGallery .frmLike, .wrapGallery .linkListShareImg {display:none} /* Show these elements when hovering over image (needs JS to add this class to div with class "mainImage"): */ .wrapGallery .imageHover .navImg, .wrapGallery .imageHover .frmLike, .wrapGallery .imageHover .linkListShareImg {display:block} /* Gallery (default: landscape format) */ .wrapGallery h1 {margin:15px 0 7px; font:normal 2em Georgia,"Times New Roman", Times, serif; color:#fff} .mainImage {position:relative; background:#1a1a1a} .mainImage .image {display:block; height:400px; line-height:1; text-align:center} .mainImage .adImage {text-align:left} .mainImage .caption, .mainImage .adCaption {padding:9px 11px; font-size:.916em; color:#bababa} .mainImage .adCaption {text-align:left;} .mainImage .cT-multimediaMetadata {padding:7px 11px 11px} .mainImage h2 {margin-bottom:1px; font-size:1.5em; color:#ccc} .mainImage .wof {margin:0} .mainImage .cT-multimediaMetadata p {color:#a2a2a2} .mainImage ul {margin:12px 0 0} .mainImage li {margin:0 0 0 16px; padding:0; font-size:1em; list-style-type:square; color:#898989; background:none} .wrapGallery .social /*extends cN-linkList*/ {height:30px; margin:16px 0 0; border:0} .wrapGallery .social h3 {float:left; margin:0 14px 0 0; font:bold .916em/20px/*height of Facebook btn*/ Arial, Helvetica, sans-serif; color:#888} .wrapGallery .social ol, .wrapGallery .social li {float:left; margin:0 14px 0 0} .wrapGallery .email, .wrapGallery .clipping {padding:5px 0 0;} .wrapGallery .email a {padding-left:17px; color:#888} .wrapGallery .clipping button {top:-1px} /* Thumbnails */ .wrapGallery .thumbs ol {overflow:hidden; margin:0 0 0 -12px} .wrapGallery .thumbs li {float:left; width:80px; margin:5px 0 5px 10px; list-style-type:none} /* JS state */ .scriptable .toggleThumbs {position:relative; display:block; float:left; margin-top:-36px; padding:3px 6px 3px 20px; font-weight:bold; font-size:.916em; color:#9a9a9a; background:#3d3d3d url('img/sprite-skin-europa.png') no-repeat -948px -478px/*icons (for dark bg) | +*/} .scriptable .toggleThumbs:hover, .scriptable .toggleThumbs:focus {color:#fff; text-decoration:none; background-position:-948px -501px/*icons (for dark bg) | + hover*/} .scriptable .toggleThumbsHidden {background-position:-823px -477px/*icons (for dark bg) | -*/} .scriptable .toggleThumbsHidden:hover, .scriptable .toggleThumbsHidden:focus {background-position:-823px -500px/*icons (for dark bg) | - hover*/} .scriptable .wrapGallery .thumbs {overflow:hidden; position:relative; width:540px; height:55px; margin-bottom:17px; padding:0 40px/*for nav*/} .scriptable .wrapGallery .thumbs ol {position:relative/*for JS to move it*/; width:6000px/*something large to accommodate lots of thumbs*/} .scriptable .wrapGallery .thumbs li {margin:0 0 0 12px} .scriptable .wrapGallery .thumbs img {border-bottom:2px solid transparent} .scriptable .wrapGallery .thumbs li a:focus img {border-color:#13adf5} .scriptable .wrapGallery .thumbs li a:active img {border-color:transparent} .scriptable .wrapGallery .thumbs .left, .scriptable .wrapGallery .thumbs .right {position:absolute; left:0; top:0; height:55px; width:40px/*same as .thumbs padding*/; background:#000} .scriptable .wrapGallery .thumbs .right {left:auto; right:0} .scriptable .wrapGallery .thumbs .previous, .scriptable .wrapGallery .thumbs .more {display:block; height:53px; background:url('img/sprite-skin-europa.png') no-repeat -736px -744px/*backgrounds | gallery thumb nav right*/; text-indent:-9999px} .scriptable .wrapGallery .thumbs .previous {background-position:-736px -690px/*backgrounds | gallery thumb nav left*/} .scriptable .wrapGallery .thumbs .hidden {display:none} .scriptable .wrapGallery .thumbs p a:focus {overflow:hidden; height:51px; border-bottom:2px solid #13ADF5} /* ----- IE fixes ----- */ * html .wrapGallery .thumbs ol {width:630px} * html .scriptable .wrapGallery .thumbs ol {width:6000px} * html .wrapGallery .thumbs li {display:inline} * html .wrapGallery .thumbs li a img {border:0!important} /* Previous/Next nav */ .scriptable .wrapGallery .navTop {display:block; width:135px} .wrapGallery .navTop {height:21px; width:135px; margin:12px 0 11px; padding:4px 0 0 485px; border-top:1px solid #3d3d3d} .wrapGallery .navTop li {position:absolute; left:485px; margin:0; list-style-type:none} .wrapGallery .navTop .next {left:auto; right:0} .wrapGallery .navTop .previous a, .wrapGallery .navTop .next a {overflow:hidden; display:block; width:35px; height:21px; background:url('img/sprite-skin-europa.png') no-repeat -888px -565px/*backgrounds | carousel: prev (rounded)*/; text-indent:-9999px} .wrapGallery .navTop .next a {background-position:-888px -587px/*backgrounds | carousel: next (rounded)*/} .wrapGallery .navTop .pages {left:520px; width:65px; font-weight:bold; line-height:21px/*same as bg img height*/; text-align:center; color:#9a9a9a} .wrapGallery .navTop .previous a:hover, .wrapGallery .navTop .previous a:focus {background-position:-888px -609px/*backgrounds | carousel: prev (rounded, hover)*/} .wrapGallery .navTop .next a:hover, .wrapGallery .navTop .next a:focus {background-position:-888px -631px/*backgrounds | carousel: next (rounded, hover)*/} /* Next & previous hot spots */ .navImg {position:absolute; top:0; left:0; width:100%} .navImg li {list-style-type:none} .navImg a {overflow:hidden; position:absolute; left:0; top:0; display:block; width:50%; height:360px/*landscape format*/; text-indent:-9999px} .navImg a:focus {outline:none} /* Keyboard tabbing does not focus on this, so safe to remove */ .navImg .next a {left:auto; right:0} .navImg span {display:block; width:63px; height:77px; margin:149px 0 0 7px; border:1px solid rgba(255,255,255,.6); background:rgba(0,0,0,.6) url('img/sprite-skin-europa.png') no-repeat -714px -822px/*backgrounds | gallery img nav prev*/; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px} .navImg .next span {margin:149px 0 0 238px; background-position:-650px -822px/*backgrounds | gallery img nav next*/} .navImg a:hover span, .navImg a:focus span {background-position:-522px -822px/*backgrounds | gallery img nav prev hover*/} .navImg .next a:hover span, .navImg .next a:focus span {background-position:-586px -822px/*backgrounds | gallery img nav next hover*/} /* ----- IE fixes ----- */ * html .wrapGallery .navImg {margin-top:-40px/*shift "empty" container out of view*/} * html .navImg span {cursor:pointer} * html .navImg .next span {margin-left:230px} *+ html .navImg {margin-top:-40px/*shift "empty" container out of view*/} *+ html .navImg span {cursor:pointer} /*all IE*/ .navImg a {background:url('img/sprite-skin-europa.png') no-repeat -9999px -9999px\9/*dummy assignment to make anchor area clickable*/} /*all IE*/ .navImg span {border:1px solid #fff\9; background:#000 url('img/sprite-skin-europa.png') no-repeat -714px -822px\9; filter:alpha(opacity=60)} /* Like & dislike buttons */ .scriptable .wrapGallery .frmLike {position:absolute; top:349px; left:7px} .cN-like {margin-top:25px} .cN-like .vote {display:block} .cN-like .result {display:none} .cN-like ul {list-style:none} .cN-like li {float:left; position:relative; margin:0 1px 0 0} .cN-like button {overflow:visible; height:27px; padding:0 12px 0 27px; border:1px solid #fff; border-color:rgba(255,255,255,.6); -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; outline:0 /*we cannot hide the overflow as we need it for the */; font:bold 100% Arial,Helvetica,sans-serif; color:#fff; cursor:pointer; background:#222 url('img/sprite-skin-europa.png') no-repeat; background-color:rgba(0,0,0,.6)} .cN-like em {position:absolute; bottom:30px; left:-9999px /*show on hover*/; padding:3px 6px; font-size:.916em; font-weight:normal; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; white-space:nowrap; background:#181d20} .cN-like em:after {content:""; position:absolute; bottom:-2px; left:6px; width:5px; height:5px; background:#181d20; -moz-transform:rotate(45deg); -webkit-transform:rotate(45deg); transform:rotate(45deg)} .cN-like span {position:absolute; left:-9999px}/*accessability only*/ .cN-like button:hover em, .cN-like button:focus em, .cN-like button.selected em {left:0} .cN-like .like button {background-position:-949px -522px /*icons (for dark bg) | Like grey*/} .cN-like .like button:hover, .cN-like .like button:focus, .cN-like .like button.selected {background-color:rgba(85,150,0,.8); background-position:-1079px -820px /*icons (for dark bg) | Like white*/} .cN-like .dislike button {background-position:-949px -546px /*icons (for dark bg) | Dislike grey*/} .cN-like .dislike button:hover, .cN-like .dislike button:focus, .cN-like .dislike button.selected {background-color:rgba(175,30,0,.8); background-position:-1079px -842px /*icons (for dark bg) | Dislike white*/} .cN-like.likeVoted .vote {display:none} .cN-like.likeVoted .result {display:block} .cN-like.likeVoted button:hover, .cN-like.likeVoted button:focus, .cN-like.likeVoted button.selected {background-color:#000!important /*override all IE rules in one go*/} /* ----- IE fixes ----- */ * html .cN-like button {width:30px} /*IE8*/ .cN-like button {filter:alpha(opactiy=60)\0 /*Cannot use filter for IE6/7 because it'll hide the */} * html .cN-like button {filter:none /*IE6 still reads rule above*/} *+ html .cN-like button {filter:none /*IE7 still reads rule above*/} /*all IE*/ .cN-like button {border:1px solid #fff\9; background-color:#000\9} * html .cN-like button {border-color:#aaa; background-color:#222} /*As we use no filter, tone down colours*/ *+ html .cN-like button {border-color:#aaa; background-color:#222} /*As we use no filter, tone down colours*/ /*all IE*/ .cN-like .like button:hover, .cN-like .like button:focus, .cN-like .like button.selected {background-color:#559600\9} /*all IE*/ .cN-like .dislike button:hover, .cN-like .dislike button:focus, .cN-like .dislike button.selected {background-color:#af1e00\9} /*all IE*/ .cN-like em:after {display:none\9 /*IE <=8 does not support rotation*/} /* Share photo */ .scriptable .linkListShareImg /*extends cN-linkList*/ {position:absolute; left:160px; top:374px; border:0} .linkListShareImg h3 {z-index:1; position:relative; margin:0} .linkListShareImg h3 a {display:block; height:25px; padding:0 12px 0 34px; font:normal .71em/25px Arial,Helvetica,sans-serif; border:1px solid rgba(255,255,255,.6); -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; color:#fff; background:#222/*for IE*/ url('img/sprite-skin-europa.png') no-repeat -1073px -472px/*icons (for dark bg) | Gallery share*/; background-color:rgba(0,0,0,.6)} .linkListShareImg a, .linkListShareImgike a:hover, .linkListShareImg a:focus {text-decoration:none} .linkListShareImg h3 a:hover, .linkListShareImg h3 a:focus, .linkListActive h3 a {background-color:rgba(221,104,0,.8); background-position:-1073px -497px/*icons (for dark bg) | Gallery share hover*/} .linkListShareImg ol {z-index:0; position:absolute; bottom:23px; left:-9999px/*shown by JS*/; width:103px; margin:0; padding:4px 4px 8px; border:1px solid rgba(255,255,255,.06); -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; background:rgba(0,0,0,.6)} .linkListShareImg li {margin:4px 0; list-style-type:none} .linkListShareImg ol a {display:block; padding-left:26px; color:#ccc; background:url('img/sprite-skin-europa.png') no-repeat} .linkListShareImg ol a:hover, .linkListShareImg ol a:focus {font-weight:bold; color:#fff} .linkListShareImg .emailAFriend a {background-position:-1077px -568px} .linkListShareImg .twitter a {background-position:-1010px -675px} .linkListShareImg .facebook a {background-position:-1008px -689px} .linkListActive ol {left:9px} /* ----- IE fixes ----- */ /*all IE*/.linkListShareImg h3 a {border:1px solid #aaa\9} /*all IE*/.linkListShareImg h3 a:hover {background-color:#dd6800\9} /*all IE*/.linkListShareImg a, /*all IE*/.linkListShareImg ol {filter:alpha(opacity=80)\9} * html .linkListShareImg a {width:90px; background-color:#222} * html .linkListShareImg h3 a:hover {color:#fff; text-decoration:none} * html .linkListActive ol {top:-72px; left:7px} *+ html .linkListShareImg a {background-color:#222} *+ html .linkListActive ol {top:-68px; left:13px} /*all IE*/.linkListShareImg h3 a:hover, /*all IE*/.linkListShareImg h3 a:focus, /*all IE*/.linkListActive h3 a {background-position:-1073px -497px\9} /*all IE*/.linkListShareImg ol {background-color:#222\9} /* Overlays */ .supergal .overlay {position:absolute; top:0; left:0; width:600px; height:391px; padding:10px; background:#181818} .supergal .overlay h3 {width:auto; height:auto; margin:0 0 14px; padding:0 0 10px; font:normal 1.5em Georgia,"Times New Roman", Times, serif; color:#ccc; border-bottom:1px solid #6c6c6c; background:none; text-indent:0} .supergal .overlay .secondaryLink {position:absolute; right:10px; top:14px} .supergal .overlay a {color:#1ca7ef} .supergal .overlay hr {position:absolute; bottom:5px; left:10px; width:600px; margin:0; border:0; border-bottom:1px solid #6c6c6c; background:none} /* End of show */ .supergal .overlayEndOfShow ul {overflow:hidden; margin:0 0 0 -20px} .supergal .overlayEndOfShow li {overflow:hidden; float:left; width:290px; margin:0 0 13px 20px; list-style-type:none} .supergal .overlayEndOfShow h4 {margin:0 0 7px; font:normal 1.333em Georgia,"Times New Roman", Times, serif} .supergal .overlayEndOfShow img {float:left; margin:2px 11px 9px 0} .supergal .overlayEndOfShow p {font-size:.916em; color:#a2a2a2} .supergal .overlayEndOfShow .alt {clear:left} /* Email a friend */ .supergal .overlayEmailAFriend hr {} /* ----- IE fixes ----- */ * html.supergal .overlayEndOfShow ul {width:640px; margin-left:-40px} * html.supergal .overlayEndOfShow li {padding-bottom:10px} *+ html.supergal .overlayEndOfShow li {padding-bottom:10px} /* Gallery : portrait format. ========================== These rules depend on their defaults above. */ .wrapGalPortrait .mainImage {width:496px} .wrapGalPortrait .mainImage:after {content:""; position:absolute; right:-124px; top:0; width:124px; height:620px; background:#181818} .wrapGalPortrait .mainImage .image {height:620px} .wrapGalPortrait .mainImage .caption {z-index:1; position:absolute; right:-125px; top:0; width:103px} .wrapGalPortrait .mainImage .caption em {display:block; padding-top:0.8em} .wrapGalPortrait .mainImage .cT-multimediaMetadata {z-index:1; position:absolute; right:-125px; bottom:0; width:103px} .wrapGalPortrait .navImg a {height:620px} .wrapGalPortrait .navImg span {margin-top:236px} .wrapGalPortrait .navImg .next span {margin-left:176px} .wrapGalPortrait .overlay {/*width:390px;*/ height:600px; border-right:1px solid #585858} .wrapGalPortrait .overlay hr {display:none} .wrapGalPortrait .overlayEndOfShow li {width:a margin-bottom:2px} .wrapGalPortrait .overlayEndOfShow h4 {margin-bottom:3px} .scriptable .wrapGalPortrait .frmLike {bottom:0} /* ----- IE fixes ----- */ * html .wrapGalPortrait .navImg {margin-top:-100px/*shift "empty" container out of view*/} * html .wrapGalPortrait .navImg .next span {margin-left:170px} * html .wrapGalPortrait .overlay {width:391px; border:0} *+ html .wrapGalPortrait .navImg {height:0; margin:0/*remove "empty" container from view*/} *+ html .wrapGalPortrait .overlay {width:391px; border:0} /* Like and dislike portrait override */ .scriptable .wrapGalPortrait .frmLike {bottom:0; top:auto} .scriptable .wrapGalPortrait .linkListShareImg {bottom:-5px; top:auto} /* Multimedia group carousels */ .supergal .cN-multimediaGroup div li {margin-right:20px; background:#181818} .supergal .cN-multimediaGroup div .more {right:10px} .supergal .cN-multimediaGroup .like {margin-left:10px; padding-left:16px; font-weight:bold; color:#ececec; background:url('img/sprite-skin-europa.png') no-repeat -958px -528px/*icons (for dark bg) | Like grey*/} .supergal .cN-multimediaGroup .like span {position:absolute; right:-9999px} .supergal .multGroupCarousel /*extends cN-multimediaGroup*/ div > .more, .supergal .multGroupCarousel div > .more, .supergal .multGroupCarousel div > .previous {top:1px; right:42px; height:21px; width:35px; background:url('img/sprite-skin-europa.png') no-repeat -888px -565px/*backgrounds | carousel: prev (rounded)*/} .supergal .multGroupCarousel div > .more {right:0; background-position:-888px -587px/*backgrounds | carousel: next (rounded)*/} .supergal .multGroupCarousel div > .previous:hover, .supergal .multGroupCarousel div > .previous:focus {background-position:-888px -609px/*backgrounds | carousel: prev (rounded, hover)*/} .supergal .multGroupCarousel div > .more:hover, .supergal .multGroupCarousel div > .more:focus {background-position:-888px -631px/*backgrounds | carousel: next (rounded, hover)*/} /* ----- IE fixes ----- */ * html.supergal .multGroupCarousel div .more, * html.supergal .multGroupCarousel div .previous {background-position:-888px -565px/*backgrounds | carousel: prev (rounded)*/} * html.supergal .multGroupCarousel div .more {background-position:-888px -587px/*backgrounds | carousel: next (rounded)*/} * html.supergal .multGroupCarousel div .previous:hover {background-position:-888px -609px/*backgrounds | carousel: prev (rounded, hover)*/} * html.supergal .multGroupCarousel div .more:hover {background-position:-888px -631px/*backgrounds | carousel: next (rounded, hover)*/} /* Aside */ .supergal .aside .cT-multimediaMetadata {margin:56px 0 32px; border-top:1px solid #3d3d3d} .supergal .aside .cT-multimediaMetadata h3 {position:absolute; left:-9999px} .supergal .aside .cT-multimediaMetadata p {margin:5px 0 20px; color:#a2a2a2} .supergal .aside .cT-multimediaMetadata li {margin:0 0 0 16px; padding:0; font-size:1em; list-style-type:square; color:#898989; background:none} /* Gallery : fullscreen format. ========================== These rules depend on their defaults above. */ .galFull .mainImage .image {height:628px} .galFull .navImg span {margin-top:263px} .galFull .navImg .next span {margin-left:397px} .galFull .navTop {padding-left:804px;} .galFull .navTop li {left:804px} .galFull .navTop .pages {left:839px} .galFull .cN-multimediaGroup div li {margin-right:11px} .galFull .scriptable .thumbs {width:816px;padding:0 62px;} .galFull .scriptable .thumbs .left{padding-right:22px;} .galFull .scriptable .thumbs .right{padding-left:22px;} .galFull .scriptable .linkListShareImg {top:598px} .galFull .scriptable .wrapGallery .frmLike {top:572px} /* ads */ .galFull .mainImage .adImage {display:none;text-align:center} .galFull .showAd .adImage {display:block} .galFull .showAd .adImage .ad {height:628px;margin: 0 320px}/* centre 300px half page ad */ .galFull .showAd .image, .galFull .showAd .caption, .galFull .showAd .linkListShareImg, .galFull .showAd .frmLike {display:none} .galFull .cT-multimediaMetadata {overflow:auto} .galFull .cT-multimediaMetadata p {width:612px;margin:5px 0 20px; color:#a2a2a2;float:left} .galFull .cT-multimediaMetadata ul {float:right;width:300px;margin:0 0 .5em 0} .galFull .cT-multimediaMetadata li {margin:0 0 0 16px;padding:0;font-size:1em;list-style-type:square;color:#898989;background:none} .galFull .scriptable .multGroupCarousel .cN-tabBox li div {width: 940px} .galFull .overlay {padding: 119px 170px;} .galFull .overlay .secondaryLink {top: auto; bottom: 70px; left: 420px; font-size: 1.3em; font-weight: bold} /* -------------------------------------------------------------------------------------- =0 -------------------------------------------------------------------------------------- */ .footer {position:relative;margin:0 -25px;padding:25px 25px 1em;background-color:#000} .c5 h2, .fN-affiliateStrip h2, .fN-affiliateStrip .cN-tabPages div.tab div h3 a, .fN-affiliateStrip .cN-tabPages div.selected div {background-color:#000;color:#ccc;border-bottom:none} .c5 h2 a {color:#ccc} .c5 ol a {color:#1ca7ef} .classifieds .puff {background-color:#000} .classifieds .cTradingRoom {border-top-color:#dc8222} .classifieds ul {border-color:#333} .footer .classifieds li a, .fN-affiliateStrip p a {color:#1ca7ef} .lSmh a,.lAge a,.lBT a,.lDrive a,.lDomain a,.lMycareer a,.lRsvp a,.lStayz a,.lMoneyManager a,.lInvestSmart a,.lExecutive a, .lDomainPrestige a,.lBigChair a,.lSmartInvestor a,.lBRW a,.lEssentialBaby a,.lAPM a,.lLeagueHq a,.lRugbyHeaven a, .lRealFooty a,.lSmallBusiness a,.lTheVine a,.lWAToday a,.lCuisine a,.lEntertainment a,.lLifeAndStyle a,.lTravel a, .lDigitalLife a,.lBusinessDay a,.lTradingRoom a, .lAdvantate a, .lCommercialRealEstate a, .lDomainBusiness a, .lWeatherZone a, .lEnvironment a,.lNationaltimes a,.lfindababysitter a,.lmytype a,.lRentAHome a,.lTakeABreak a, .lEssentialKids a,.lCanberratimes a,.lDailyLife a {background-image:url('img/sprite-skin-europa.png');width:166px /*We need to remove 4 pixels from the original width because of the sprite problem*/} .lRentAHome a {background-position:0 -951px} .lTakeABreak a {background-position:0 -975px} .lEssentialKids a {background-position: 0 -1000px;} .lCanberratimes a {background-position: 0 -1025px;} .top5 {background:#000 url('img/sprite-skin-europa.png') no-repeat -537px -900px} .top5 h2 {border-color:#333} .top5 h5 {margin-top:6px} .top5 h5,.top5 h5 a,.top5 h5 a:visited,.top5 h5 a:hover {color:#8a8c8f} .fSectionLinks,.fSectionLinks li {border-color:#333} .fSectionLinks li a,.fMastheadLinks li a {color:#1ca7ef} .footer-logo {background-image:url('img/sprite-logo-fd-black-bg.png')/*fd-footer-logo*/} /* ----- IE fixes ----- */ * html .footer {position:relative} * html .top5 h5 a:link,* html .top5 h5 a:visited,* html .top5 h5 a:hover {color:#8a8c8f} /* Channels */ .fB-channels {text-align:center} .fB-channels li {display:inline; margin:0 10px} .fB-channels a {overflow:hidden; display:inline-block; height:50px; text-indent:-9999px; background:url("img/sprite-skin-europa.png") /*[channels]*/} .fB-channels .cEssentialBaby a {width:95px; background-position:0 -1570px /*[channel-eb]*/} .fB-channels .cEssentialKids a {width:130px; background-position:0 -1620px /*[channe-ekl]*/} .fB-channels .cFindABabysitter a {width:115px; background-position:0 -1670px /*[channel-fab]*/} /* -------------------------------------------------------------------------------------- =Advertisements -------------------------------------------------------------------------------------- */ .footer .ad {border-color:#333} /* Advertiser supported feature element on Super Galleries:*/ .cA-contentSponsor {clear:both;color:#989898;font-size:.94em;text-align:center;padding:10px 0} .cA-contentSponsor p {display:inline} .cA-contentSponsor img {margin-left:10px;vertical-align:middle} /* -------------------------------------------------------------------------------------- =Sponsorship (excludes gutter ads) -------------------------------------------------------------------------------------- */ .sponsorLink {display:none}/* Default for all templates: Don't display any sponsor link elements (there are multiple!) if no sponsorship. */ /* Skinning for Soundslides */ /* -------------------------------------------------------------------------------------- */ .sponsored .soundslides #content {width:940px;margin:0} .sponsored .soundslides .cT-multimediaElement {border:0!important/*override border from video*/} .sponsored .soundslides .cT-multimediaElement .social {top:0;margin:0;padding:2px 5px;background:#000} .sponsored .soundslides .soundslides-wrap {padding-left:0} .sponsored .soundslides .ss-background {display:none} .sponsored .soundslides .soundslidesSponsorLink {position:absolute;top:0;left:0;display:block;width:940px;height:564px} .sponsored .soundslides .cT-multimediaMetadata, .sponsored .soundslides .cN-storyHeadlineLead {display:none} .sponsored .soundslides .aside {height:auto;float:right;margin-top:52px/*align ad with thumbnails*/} .sponsored .soundslides .aside .ad {position:static} .sponsored .soundslides .firstgallery {width:580px} /* Helmet ad (base styles in skin-news.css) */ /* -------------------------------------------------------------------------------------- */ .hasHelmetAd body {background:#000} .hasHelmetAd .wrap {padding:0;border:25px solid #252525;border-width:0 25px} .hasHelmetAd.supergal .wrap {border-color:#000} /* Skinning for video (ad-served solution) */ /* -------------------------------------------------------------------------------------- */ /* Gutter sponsor link (Use as many defaults as possible, leave only bg img to video.css)*/ .sponsored .sponsorLinkGutter {overflow:hidden;position:absolute;top:0;left:-105px;display:block;width:1200px;height:762px;background:#000;background-position:center 0;background-repeat:no-repeat;text-indent:-9999px} /* Video player wof sponsor link */ .sponsored .video-player-wrap .wof {overflow:hidden;width:175px;height:139px;padding:0} .sponsored .video-player-wrap .videoContainer {display:none/*Hide wof content.*/} .sponsored .video-player-wrap .sponsorLinkWof {float:right;display:block;width:175px;height:137px;padding:0;margin:2px 0 0;background-color:#181818;background-position:100% 100%/*bottom RHS corner*/;background-repeat:no-repeat;text-indent:-9999px} /* Video player outer border */ .sponsored .cT-multimediaElement {border-width:1px;border-style:solid/*Border colour provided by sponsor and injected by ad call*/} /* Channel box */ .sponsored .sponsorLinkChannel {overflow:hidden;position:absolute;right:12px;top:63px;left:auto;display:block;width:100px;height:380px;text-indent:-9999px} /* Channel clip list: 4 -> 3 elements */ .sponsored .channel-clips {background:transparent none no-repeat 339px 63px}/* Prepare channel background graphic, image injected by ad call */ .sponsored .channel-clips .cS-videoGalleryLinks {width:318px;overflow:hidden}/* Reduce to two columns instead of three */ .sponsored .channel-clips .cS-videoGalleryLinks li {margin-bottom:15px} /* Popup */ .sponsored .pop-content .logo-FD {background:transparent none/* no logo for sponsored popups*/} /* ----- IE fixes ----- */ * html.sponsored #content {margin-right:12px/*-2px for coloured border*/} * html.sponsored .channel-clips .cS-videoGalleryLinks {width:306px;position:relative} *+ html.sponsored .channel-clips .cS-videoGalleryLinks {width:306px;position:relative} /* Sponsored Photo Galleries */ /* -------------------------------------------------------------------------------------- */ .sponsored.supergal .sponsorLinkGutter {background:#252525} .sponsored.supergal .wrap {border:25px solid #000; border-width:0 25px} /* -------------------------------------------------------------------------------------- =Masthead-specific code only below this line! It has to override the CSS above. NOTE that all rules you specify here (preceding them by .[masthead]) probably override rules in sectional CSS => Set a rule with equal specificity to the sectional CSS (and don't use "important" - bad practice). NOTE: Important: Maximum masthead logo width is 152px. -------------------------------------------------------------------------------------- */ /* Sections which can also be stand-alone sites need to go here (have to be overwritten by masthead CSS):*/ /* National Times */ .nationaltimes .header .mh-logo {background-position:-485px -355px/*headings - section headings - National Times*/;height:40px;width:150px} .nationaltimes .cS-channels h2 {background-position:-170px -533px/*channel heading*/} /* Drive */ .drive .header .mh-logo {background-position:-778px -815px/*Drive logo*/;height:40px;width:77px} .drive .cS-channels h2 {background-position:-170px -360px/*channel heading*/} /* Domain */ .domain .header .mh-logo {background-position:-778px -774px/*Domain logo*/;height:40px;width:236px} .domain .cS-channels h2 {background-position:-170px -380px/*channel heading*/} /* Stand-alone mastheads which cannot also be sections need to go here:*/ /* SMH */ .smh .header .mh-logo {background-position:-170px -136px/*SMH logo*/;height:40px;width:134px} .smh .cS-channels h2 {background-position:-170px -280px/*channel heading*/} /* The Age */ .theage .header .mh-logo {background-position:-170px -56px/*TheAge logo*/;height:40px;width:142px} .theage .cS-channels h2 {background-position:-170px -300px/*channel heading*/} /* WAToday */ .watoday .header .mh-logo {background-position:-170px -176px/*WAToday logo*/;height:40px;width:114px} .watoday .cS-channels h2 {background-position:-170px -320px/*channel heading*/} /* Brisbane Times */ .brisbanetimes .header .mh-logo {background-position:-170px -217px/*Brisbane Times logo*/;height:40px;width:152px} .brisbanetimes .cS-channels h2 {background-position:-170px -340px/*channel heading*/} /* Canberra Times */ .canberratimes .header .mh-logo {background-position:-170px -96px/*Canberra Times logo*/;height:40px;width:152px} .canberratimes .cS-channels h2 {background-position:-170px -260px/*channel heading*/} /* Business Day */ .businessday .header .mh-logo {background-position:-778px -692px/*Business Day logo*/;height:40px;width:139px} .businessday .cS-channels h2 {background-position:-170px -400px/*channel heading*/} /* Essential Baby */ .essentialbaby .header .mh-logo {background-position:-778px -855px/*Essential Baby logo*/;height:40px;width:144px} .essentialbaby .cS-channels h2 {background-position:-170px -440px/*channel heading*/} /* Essential Kids */ .essentialkids .header .mh-logo {background-position:-778px -350px/*Essential Kids logo*/;height:40px;width:152px} /* Cuisine */ .cuisine .header .mh-logo {background-position:-778px -732px/*Cuisine logo*/;height:40px;width:119px} .cuisine .cS-channels h2 {background-position:-170px -420px/*channel heading*/} /* Daily Life */ .dailylife .header .mh-logo {background-position:-475px -400px/*DailyLife logo*/;height:40px;width:150px} .dailylife .cS-channels h2 {background-position:-474px -453px/*channel heading*/}