/* GLOBAL ======================================*/ body {margin:0; padding:0; color:#2e2e2e;} body.noscroll {overflow:hidden;} .wrapper {display:block; overflow:hidden; max-width:1040px; margin:0 auto; padding:0 10px; background:#fff;} .wrapper.max {padding:0;} body.gallery {background:#000;} body.gallery .wrapper {background:#000!important;} .columnsContainer {width:100%; margin:0; padding:10px 0 0 0;} .rightContent {display:none;} .leftColumn {font-family:source-sans-pro, sans-serif; font-size:16px; line-height:22px;} .leftColumn .body a {font-weight:600;} .leftColumn img {width:100%;} a {color:#2e2e2e; -o-transition: color .1s linear; -moz-transition: color .1s linear; -webkit-transition: color .1s linear; transition: color .1s linear;} a:hover {color:#dd1313;} *.sell {display:block; padding-top:5px; font-size:13px; line-height:16px; color:#818181;} /* COOKIES ======================================*/ #cookieBanner {font-family: source-sans-pro, sans-serif; font-size:13px; line-height:16px; background:#fff; height:auto !important; width:100% !important; padding:10px !important; margin:0 !important; bottom:0; position:fixed; margin:0; z-index:1100;} #cookieBannerInner {width:100% !important;} /* FOUNDATION REVEAL MODAL ======================================*/ .reveal-modal {z-index:1100;} .has-tip {border-bottom:none;} .has-tip:hover {border-bottom:none;} .tooltip {font-family: source-sans-pro, sans-serif; font-size:13px; line-height:16px;} /* FOUNDATION TABS ======================================*/ ul.tabs {width:100%; background:none; padding-bottom:10px; display:table;} ul.tabs li.tab-title, .stats.MotoGP ul.tabs li.tab-title {display:table-cell; width:auto; float:none;} ul.tabs li.tab-title a {padding:7px 10px; margin-bottom:-2px; font-size:14px; line-height:16px; font-family: source-sans-pro, sans-serif; font-weight:600; color:#9ba1a4; text-align:center; background:#151617; background-color:none; -moz-transition: all .3s linear; -webkit-transition: all .3s linear; transition: all .3s linear; outline: none;} ul.tabs li.tab-title:first-of-type a {-moz-border-radius:5px 0 0 5px; -webkit-border-radius:5px 0 0 5px; border-radius:5px 0 0 5px;} ul.tabs li.tab-title:last-of-type a {-moz-border-radius:0 5px 5px 0; -webkit-border-radius:0 5px 5px 0; border-radius:0 5px 5px 0;} ul.tabs li.tab-title a:hover {background:#151617; color:#f0f4f7;} ul.tabs li.tab-title.active a, ul.tabs li.tab-title.active a:hover {color:#fff; background:#dd1313; background-color:none;} ul.tabs li.tab-title.plus.active a, ul.tabs li.tab-title.plus.active a:hover {color:#fff; background:#0aa6d8; background-color:none;} .tabs-content, .content active {margin:0px; padding:0px;} .accordion .accordion-navigation > .content.active, .accordion dd > .content.active {background:none; padding:7px 0 0 0;} .tabs-content .content, .content-box { -webkit-animation: tabscontent 400ms ease-out; /* Chrome, Safari, Opera */ -moz-animation: tabscontent 400ms ease-out; /* Firefox */ animation: tabscontent 400ms ease-out; } @-webkit-keyframes tabscontent{0%{-webkit-transform:translate3d(0, 0.2em, 0);-moz-transform:translate3d(0, 0.2em, 0);transform:translate3d(0, 0.2em, 0);opacity:0}100%{-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);opacity:1}} @-moz-keyframes tabscontent{0%{-webkit-transform:translate3d(0, 0.2em, 0);-moz-transform:translate3d(0, 0.2em, 0);transform:translate3d(0, 0.2em, 0);opacity:0}100%{-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);opacity:1}} @keyframes tabscontent{0%{-webkit-transform:translate3d(0, 0.2em, 0);-moz-transform:translate3d(0, 0.2em, 0);transform:translate3d(0, 0.2em, 0);opacity:0}100%{-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);opacity:1}} /* Dark background styling */ body.gallery ul.tabs li.tab-title a {color:#c3cdd3;} body.gallery ul.tabs li.tab-title a:hover {color:#d9e4eb; border-color:#d9e4eb;} body.gallery ul.tabs li.tab-title.active a {color:#fff;} /* Live tabs */ .story.live ul.tabs {margin-bottom:20px!important; background:#e8eff3;} .story.live ul.tabs li {width:50%;} /* FOUNDATION BLOCKS ======================================*/ .blocks {width:100%; float:left; font-family: source-sans-pro, sans-serif;} .blocks ul {font-size:13px; line-height:16px;} .blocks ul li {margin-bottom:30px;} .blocks ul li img {margin-bottom:7px;} .blocks ul li a {padding-bottom:5px; color:#181818; font-size:15px; line-height:17px; font-weight:600; letter-spacing:-0.5px;} .blocks ul li a.large {font-size:18px; line-height:20px; font-weight:700;} .blocks ul li a:hover {color:#dd1313;} .blocks ul li a span {color:#0083af; font-weight:400;} .blocks ul li a span.trending {color:#dd1313; font-weight:700;} .blocks ul li a.headline span.live {color:#dd1313;} .blocks ul li a.headline:hover {color:#D91E18;} .blocks ul li span.byline {display:block; padding-top:3px; font-family: source-serif-pro, sans-serif; font-size:12px; line-height:14px; color:#0083af; font-weight:600;} .blocks .button {font-family: source-sans-pro, sans-serif; font-size:14px; line-height:16px; font-weight:600; letter-spacing:0px;} /* Block styling for gallery page */ body.gallery .blocks ul li a {color:#fff;} body.gallery .blocks ul li a:hover {color:#d9e4eb;} body.gallery .blocks ul li {color:#82898d; margin-bottom:15px; padding-bottom:15px; border-bottom:1px solid #82898d;} body.gallery .blocks .row {padding-top:20px; margin-top:20px; border-top:1px solid #82898d;} body.gallery .blocks .row:first-of-type {padding-top:0; margin-top:0; border-top:none;} body.gallery .blocks .row:last-of-type {margin-bottom:30px;} body.gallery .blocks .row .columns {padding:0; font-family: source-sans-pro, sans-serif; font-size:14px; line-height:16px;} body.gallery .blocks .row .columns img {max-height:800px; width:auto; padding-bottom:7px;} body.gallery .blocks .row .columns:first-of-type {padding-right:10px;} /* LOAD MORE BUTTON ======================================*/ .loadmore {text-align:center;} /* SITE GRIDS ======================================*/ .grid {margin:0 auto; padding:30px;} .grid.footer.related, .grid.footer.video {background:#ECF0F1;} .grid.footer.trending {background:#DADFE1;} .grid.footer.twitter {background:#00b4ee} .grid.footer.features {background:#0c1823;} .grid.footer.specials {background:#f0f4f7;} .grid.footer.features.author {background:#1c364e;} .grid.footer ul {font-family: source-sans-pro, sans-serif; font-size:13px; line-height:17px; color:#ABB7B7;} .grid.footer ul li img {margin-bottom:7px;} .grid.footer.trending ul, .grid.footer.related ul, .grid.footer.video ul {color:#181818;} .grid.footer ul li a.headline {font-weight:600; font-size:15px; line-height:17px; color:#fff;} .grid.footer.trending ul li a.headline, .grid.footer.related ul li a.headline, .grid.footer.video ul li a.headline, .grid.footer.specials ul a.headline {color:#181818;} .grid.footer ul li a.headline:hover {color:#dd1313;} .grid.footer.video ul li div a i {color:#fff; -o-transition: color .1s linear, background .1s linear; -moz-transition: color .1s linear, background .1s linear; -webkit-transition: color .1s linear, background .1s linear; transition: color .1s linear, background .1s linear;} .grid.footer.video ul li:hover div a i {color:#DADFE1;} /* AD PLACEMENTS ======================================*/ .MPU_container {width:300px; float: right; margin-bottom:20px;} .MPU_container.mobile {width:100%; margin:20px auto; text-align:center; float:none;} #gallery {display:block; margin:20px 0 40px 0; background:#151617;} #gallery .item span {overflow:hidden; display:block; padding:10px 10px 0 0; font-size:14px; line-height:16px; color:#82898d;} #gallery .item strong {float:left; padding:10px 10px 0 10px; color:#fff; font-size:14px; line-height:16px; font-weight:400;} #gallery .owl-controls {margin:0; padding-top:10px; padding-bottom:10px;} #gallery .owl-controls .owl-buttons {display:none;} #gallery.large {margin:0; padding-top:15px;} #gallery.large .owl-controls .owl-buttons {display:block;} /* CATEGORY PAGE ======================================*/ .relatedbox {display:block; margin-top:30px; font-size:14px; line-height:19px; font-weight:700;} .relatedbox ul.fa-ul {margin:0 25px; padding:0;} .relatedbox ul.fa-ul li {margin:7px 0;} .relatedbox ul.fa-ul li a {font-size:13px; line-heght:16px; font-weight:400;} .series .row .column img {margin-bottom:7px;} /* NEWS ARTICLES ======================================*/ /* News article headlines */ #header {width:100%; position:relative; padding:40px 0 0 0; margin-bottom:20px;} #header.story {padding-top:20px;} #header h1 {margin:0; font-family: source-sans-pro, sans-serif; font-size:30px; line-height:32px; letter-spacing:-1px; color:#1e1e1e; font-weight:900;} #header h2 {font-family: source-sans-pro, sans-serif; font-size:18px; line-height:22px; padding-top:20px;} body.gallery #header h1 {color:#fff;} #header h1 span {color:#82898d; font-weight:300;} #header h1 a {display:block; color:#d9e4eb; font-weight:900; letter-spacing:0px; text-transform:uppercase;} #header h1 a.series {color:#f0990f;} #header a, #header p {font-family: source-sans-pro, sans-serif; font-size:13px;} #header p {margin-top:10px;} #header a.time-button {display:inline-block; color:#595555; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#eef1f1; padding:2px 5px; margin-right:3px;} #header a.time-button:hover {background:#d5dbdb;} #header a.time-button.active {background:#d91e18; color:#f7f6f6; font-weight:600; text-decoration:none;} /* Byline details */ #header ul.byline {display:table; list-style:none; padding:0; margin:10px 0 10px -10px;} #header ul.byline li {padding:3px 10px; font-family: source-sans-pro, sans-serif; font-size:13px; line-height:15px; color:#9ba1a4;} #header ul.byline li i.fa {padding-right:3px;} #header ul.byline li i.fa-circle {font-size:12px; color:#d9e4eb;} #header ul.byline li a.author {color:#575b5e; font-weight:600;} #header ul.byline li a:hover.author {color:#dd1313;} #header ul.byline li i.fa-twitter {font-size:12px; color:#0aa6d8;} #header ul.byline li a.twitter {display:inline-block; color:#0aa6d8;} #header ul.byline li a.twitter:hover {color:#0cbcf5;} #header ul.byline li i.fa-rss-square {font-size:12px; color:#ff6600;} #header ul.byline li a.rss {color:#9ba1a4;} #header ul.byline li a:hover.rss {color:#fd7f2c;} #header ul.byline li a.category {color:#F0990F;} #header ul.byline li a.category:hover {color:#d38b18;} #header ul.byline li:last-of-type {border:none;} /* RSS feed */ #header #rss {display:block; position:absolute; right:0; bottom:0;} #header #rss i.fa-rss-square {font-size:12px; color:#ff6600; padding-right:3px;} #header #rss a.rss {color:#9ba1a4;} #header #rss a:hover.rss {color:#fd7f2c;} /* Feature bylines */ .grid.feature #header ul.byline li a.author {color:#fff;} .grid.feature #header ul.byline li a:hover.author {color:#dd1313;} .grid.feature #header ul.byline li a.rss {color:#9ba1a4;} .grid.feature #header ul.byline li a:hover.rss {color:#ff6600;} /* Article structure */ #article {font-family: source-sans-pro, sans-serif; padding-top:20px; border-top:1px solid #151617;} #article .story {position:relative; display:inline-block; padding:0; width:100%;} #article .story p, #article .story li {font-size:16px; line-height:22px;} #article .story .body:nth-child(2) p:first-of-type {font-weight:600; font-size:18px; line-height:24px;} #article.live .story p {font-size:14px; line-height:21px;} #article .story p a {box-shadow:inset 0 -1px 0 #bdbbbb; font-weight:600;} #article .story p a:hover {box-shadow:inset 0 -1px 0 #dd1313; color:#1e1e1e;} #article .story p strong, #article .story p b {font-weight:600;} .image {width:100%;} #mediacontainer p {padding:20px;} /* TEMP CSS */ #article .story .body p img {clear:right; margin-bottom:10px; width:auto;} /* Previous and next articles promotion */ .previousnext.header {display:none;} .previousnext {display:table; width:100%; font-family: source-sans-pro, sans-serif; font-size:14px; line-height:16px; border-top:#d9e4eb 1px solid; padding-top:10px; margin:20px 0; border-bottom:none;} .previousnext a {font-size:14px; line-height:16px; font-weight:600;} .previousnext a span {color:#575b5e; font-weight:400;} .previousnext .previous {position:relative; width:50%; height:100%; padding:10px 10px 10px 15px; float:left; text-align:left;} .previousnext a i {position:absolute; top:12px; font-size:20px; color:#c3cdd3;} .previousnext .previous a i {left:0;} .previousnext .next a i {right:0;} .previousnext .next {position:relative; width:50%; height:100%; padding:10px 15px 10px 10px; float:right; text-align:right;} /* HTML5 Picture - Figure captions */ figcaption {margin:5px 0px 20px 0px; font-family: source-sans-pro, sans-serif; font-size:13px; color:#82898d;} figcaption span {margin-left:10px; color:#bdbbbb; font-size:12px;} figcaption i {margin-right:5px;} /* Blockquote */ blockquote {padding:0; padding-top:10px; margin:40px 0; font-family: source-serif-pro, sans-serif; font-size:26px; line-height:30px; color:#181818; font-weight:700; letter-spacing:-1px; border:none;} blockquote a.fa {padding-left:3px; padding-bottom:0; font-size:14px; color:#0aa6d8; border:none!important; box-shadow:none!important;} blockquote a.fa:hover {color:#0083af!important;} /* Autosport Plus Inline Plugs */ .pluspromo {display:block; float:left; padding:15px 20px 15px 10px; margin:20px 0 40px 0; background: #0c1823; border-radius: 0px 5px 5px 0px; border-left:3px solid #0aa6d8; } .pluspromo img {display:none;} .pluspromo a.title {display:block; font-family: source-sans-pro, sans-serif; color:#fff; font-weight:600; font-size:15px; line-height:19px; box-shadow:none!important;} .pluspromo a > span {color:#0aa6d8;} .pluspromo p {overflow:hidden; margin:0; padding:0; color:#fff; font-weight:400; font-size:14px; line-height:18px;} .pluspromo p a {display:inline; font-size:14px; line-height:18px; font-weight:600; box-shadow:inset 0 -1px 0 #d9e4eb; transition:all 0.3s; color:#fff;} .pluspromo p a:hover {box-shadow:inset 0 -1px 0 #0aa6d8;} .pluspromo ul {list-style:none; margin:5px 0; padding:0;} .pluspromo ul li {float:left; padding-right:10px; margin-right:10px; border-right:1px solid #ABB7B7;} .pluspromo ul li a {font-size:14px; line-height:18px;} .pluspromo ul li:first-of-type a {font-weight:600;} .pluspromo ul li:last-of-type {border:none;} .pluspromo.large ul li {border:none;} .pluspromo.large img {display:block; margin:5px 0;} /* Author bio */ .bio {float:left; width:100%; padding-top:10px; margin-bottom:20px; border-top:1px solid #d9e4eb;} .bio.border {border:none;} .bio img {float:right; width:100px; margin:0 10px 10px 10px;} .bio br {display:block; margin-bottom:5px;} .bio p {margin:0; font-size:16px; line-height:22px; font-weight:300; font-style:italic;} .bio span {display:block; padding:3px 0; font-size:14px; line-height:18px;} .bio i {font-size:12px; line-height:12px; color:#d9e4eb; padding-right:3px;} .bio i.fa-twitter, .bio a.twitter {color:#0083af; font-weight:400;} .bio a:hover.twitter {color:#0aa6d8;} /* Author tweets */ #tweets .headerbar span {font-size:13px; line-height:16px;} #tweets .headerbar span i {padding-right:3px;color:#0083af;} #tweets.row {margin-top:10px; padding-top:10px; border-top:1px solid #d9e4eb;} #tweets img {border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;} #tweets .small-2 img {margin-right:5px;} #tweets .small-10 {font-size:13px; line-height:16px; color:#151617; padding-left:10px; font-family: source-sans-pro, sans-serif;} #tweets .small-10 a {color:#0083af;} #tweets .small-10 img {margin:7px 0;} #tweets a.button {margin-top:10px; font-family: source-sans-pro, sans-serif; font-weight:600;} /* FEATURES ======================================*/ /* Autosport Plus logo */ .grid.feature img.autosportplus {width:200px; padding:10px 0;} /* Version 1 - standard */ .grid.feature {width:100%; max-width:1020px; display:table; z-index:5; position:relative; height:auto; background:#000; overflow:hidden; padding:60px 30px;} .grid.feature .background {content:""; position:absolute; z-index:-1; top:0; bottom:0; left:0; right:0; opacity:.35; background-size:cover; background-position:center center;} .grid.feature #header {display:table-cell; height:auto; vertical-align:top;} .grid.feature #header h1 {font-family: source-serif-pro, sans-serif; color:#fff; font-size:32px; line-height:34px; font-weight:700; letter-spacing:-0.5px; margin:10px auto; padding:10px 0; border-top:1px solid #fff; border-bottom:1px solid #fff; text-shadow:0 0 20px rgba(0,0,0, 0.1);} .grid.feature #header h2 {font-family: source-serif-pro, sans-serif; color:#fff; font-size:18px; line-height:22px; padding-top:20px;} .grid.feature #interviewtext #header ul li {float:none; padding:3px 0;} /* Version 2 - interview */ .grid.feature #interviewimage {float:none; width:100%; height:250px; background-size:cover; background-position:center center;} .grid.feature #interviewtext {float:none; width:100%; text-align:center;} .grid.feature #interviewtext .autosportplus {margin:20px auto;} .grid.feature #header h1.interviewtext {padding:20px; border:none;} .grid.feature #header h2.interviewtext {padding:0 20px 20px 20px;} /* Version 3 - opinion column */ .grid.feature.clean {padding:10px!important; height:auto; background:#fff; text-align:center;} .grid.feature.clean #header img {width:150px;} .grid.feature.clean #header h1, .grid.feature.clean #header h2 {border:none; color:#1e1e1e; text-align:center;} .grid.feature.clean #header h1 {border-top:1px solid #c3cdd3;} .grid.feature.clean ul.byline {width:100%; text-align:center; margin:0!important;} .grid.feature.clean ul.byline li {float:none!important; color:#1e1e1e!important; font-weight:700!important;} /* Feature body */ .leftColumn.feature.subscribe #article .story p {font-family: source-serif-pro, sans-serif;} /* Feature opening paragraph #article .story p:first-child {font-family: source-serif-pro, sans-serif; font-weight:900; font-size:90px; line-height 100px; padding:28px 6px 8px 2px;} */ /* LIVE COVERAGE ======================================*/ /* Homepage */ .livehomeimage {position:relative; width:100%; height:200px; margin-bottom:7px;} .livehomebackground {display:block; content:""; position:absolute; z-index:1; top:0; bottom:0; left:0; right:0; background: -webkit-linear-gradient(to bottom, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0)); /*Safari 5.1-6*/ background: -o-linear-gradient(to bottom, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0)); /*Opera 11.1-12*/ background: -moz-linear-gradient(to bottom, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0)); /*Fx 3.6-15*/ background: linear-gradient(to bottom, rgba(0,0,0,0.8) 20%, rgba(0,0,0,0)); /*Standard*/} .livehomepageactive {display:block; position:absolute; top:10px; left:10px; z-index:2;} /* Header */ .grid.live {width:100%; max-width:1020px; display:table; z-index:5; position:relative; height:auto; background:#000; overflow:hidden; padding:20px;} .grid.live .background {content:""; position:absolute; z-index:-1; top:0; bottom:0; left:0; right:0; background-size:cover; background-position:bottom center; opacity:0.2;} .grid.live .backgroundgradient {display:none;} .grid.live #header {display:table-cell; z-index:1000; height:auto; vertical-align:bottom; padding-top:100px;} .grid.live #header h1 {color:#fff; letter-spacing:-0.5px;} .grid.live #header h1 span {color:#fff; font-weight:300;} .grid.live #header h2 {display:block; font-family: source-sans-pro, sans-serif; font-size:13px; color:#f22613; text-transform:uppercase; margin-bottom:3px;} .grid.live #header h2 span {display:inline-block; padding-left:5px; color:#fff;} .grid.live #header ul.byline {display:table;} .grid.live #header ul.byline li {color:#dedddd;} .grid.live #header ul.byline li a {font-weight:600;} .grid.live #header ul.fa-ul {color:#fff; font-family: source-sans-pro, sans-serif; font-size:13px; line-height:16px;} .grid.live #header ul.fa-ul li {padding:5px 0;} .grid.live #header ul.fa-ul li i {font-size:12px; top:7px;} a.button.liveindex {position:absolute; top:15px; padding:10px; opacity:0.9; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; background:#d91e18; font-family: source-sans-pro, sans-serif;} a.button.liveindex:hover {opacity:1;} /* Promo logos */ .grid.live .specials {width:90px; text-align:center; position:absolute; right:0; top:15px; color:#fff; font-family: source-sans-pro, sans-serif; font-size:12px; line-height:14px; text-shadow:5px 0 10px rgba(0,0,0, 0.9);} .grid.live .specials img {display:block; margin:0 auto; padding:5px 0; width:40px;} .live_circle {display:inline-block; margin-bottom:-3px; margin-right:5px; background:#f22613; -webkit-border-radius:30px; -moz-border-radius:30px; border-radius:30px; height:15px; width:15px; position:relative; -webkit-animation:pulsate 1.2s ease-out; -moz-animation:pulsate 1.2s ease-out; animation:pulsate 1.2s ease-out; -moz-animation-iteration-count:infinite; animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite; opacity:0; box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.1);} @-webkit-keyframes pulsate {0% {-webkit-transform: opacity: 0.0;} 50% {opacity: 1.0;} 100% {-webkit-transform: opacity: 0.0;}} @-moz-keyframes pulsate {0% {-moz-transform: opacity: 0.0;} 50% {opacity: 1.0;} 100% {-moz-transform: opacity: 0.0;}} @keyframes pulsate {0% {transform: opacity: 0.0;} 50% {opacity: 1.0;} 100% {transform: opacity: 0.0;}} /* Live details */ #livedetails {margin:0 auto; max-width:1020px; padding:0; margin-bottom:20px;} #livedetails ul {width:100%; list-style:none; margin:0; padding:0; display:flex;} #livedetails ul li {display:block; width:20%; background:#f7f6f6; border-right:1px solid #fff; float:left; text-align:center; color:#595555; font-family: source-sans-pro, sans-serif; font-size:10px; line-height:11px; font-weight:600; text-transform:uppercase; padding:15px 10px 10px 10px;} #livedetails ul li:first-child {color:#fff;} #livedetails ul li:last-child {border-right:none;} #livedetails ul li em {font-style:normal;} #livedetails ul li span {display:none;} #livedetails ul li span.data {display:block; font-size:13px; line-height:16px; font-weight:100; letter-spacing:1px;} #livedetails ul li .icon {margin:0; padding:0; font-size:18px;} .liveupdate {display:table; float:left; width:100%; position:relative; padding:10px 0; margin-bottom:5px; border-top:1px solid #c3cdd3;} .liveupdate.green-flag, .liveupdate.yellow-flag, .liveupdate.red-flag, .liveupdate.information, .liveupdate.timing, .liveupdate.incident, .liveupdate.chequered-flag, .liveupdate.radio-comms, .liveupdate.race-start, .liveupdate.racecentre {margin-bottom:10px;} .liveupdate.chequered-flag, .liveupdate.race-start {background:#000;} .liveupdate.green-flag, .liveupdate.yellow-flag, .liveupdate.red-flag, .liveupdate.information, .liveupdate.timing {background:#d9e4eb;} .liveupdate.tweet {border-color:#0eaad6;} .liveupdate.timing {border-color:#F39C12;} .liveupdate.green-flag {border-color:#2ECC71;} .liveupdate.yellow-flag {border-color:#f5e100;} .liveupdate.red-flag {border-color:#f22613;} .liveupdate.chequered-flag .content, .liveupdate.race-start .content {color:#f7f6f6;} .liveupdate.incident {border-color:#dd1313; background:#890707;} .liveupdate.incident .content {color:#f7f6f6;} .liveupdate.incident .content strong {color:#fff} .liveupdate .content {display:block; margin:0; padding:0 0 10px 0; padding-left:46px; overflow:hidden; font-family: source-sans-pro, sans-serif;} .liveupdate .content p {margin:0;} .liveupdate .livetimestamp {display:inline-block; font-size:13px; line-height:15px; font-weight:600; color:#575b5e; padding-right:5px;} .liveupdate.incident .livetimestamp {color:#efd3ce;} .liveupdate.tweet .twitteravatar {display:block; float:left; margin-right:7px; padding:0;} .liveupdate.tweet .twitteravatar img {width:28px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;} .liveupdate.tweet p.twitter {display:block; line-height:14px!important; margin-bottom:10px;} .liveupdate.tweet p.twitter strong a {font-size:13px!important; line-height:18px!important;color:#151617; font-weight:600;} .liveupdate.tweet p.twitter strong a:hover {color:#151617!important;} .liveupdate.tweet p.twitter a {font-size:12px!important; line-height:14px!important; color:#0eaad6; font-weight:400; border-bottom:none!important; box-shadow:none!important;} .liveupdate.tweet p.twitter a:hover {color:#0083af!important;} .liveupdate.tweet img {-webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; margin:10px 0;} .liveupdate.tweet .twitteravatar img {margin:0;} .liveupdate span.fa-stack {font-size:15px;} .liveupdate .icon {position:absolute; top:10px; left:5px;} .liveupdate.opinion {border-color:#0aa6d8; background:#C5EFF7;} .liveupdate.opinion .icon i, .liveupdate.racecentre .icon i {display:none;} .liveupdate.opinion .icon, .liveupdate.racecentre .icon, .liveupdate.autosport .icon {width:30px; height:30px; background-size:30px!important;} .liveupdate.opinion .expert {display:block; font-family: source-serif-pro, sans-serif; font-size:13px; font-weight:600; color:#0083af;} .scrbbl-post-img-wrap img, .scrbbl-post-html-full-img img, ui-draggable img {margin:5px 0;} .scrbbl-sb-wrap, .scrbbl-sb-bar {height:auto!important;} /* Text for live to match global p style in the following */ .liveupdate .content p, .liveupdate .content, .scrbbl-post-html-wrap, .scrbbl-post-type-html h3.LinkTitle, .scrbbl-post-type-html h3.LinkTitle a {font-size:14px!important; line-height:20px!important;} .scrbbl-post-html-wrap {display:inline;} .scrbbl-post-type-html .content .scrbbl-post-content-area {display:inline;} .scrbbl-post-type-html .content .scrbbl-post-html-wrap .scrbbl-sitePreview {margin-top:20px;} .scrbbl-post-type-html p {margin:0;} .scrbbl-post-type-html .LinkImage {margin-bottom:7px;} .scrbbl-post-type-html h3.LinkTitle {display:block; padding-bottom:5px; margin:0;} .scrbbl-post-type-html h3.LinkTitle a {font-family: source-sans-pro, sans-serif; color:#1e1e1e; font-weight:600; box-shadow:inset 0 -1px 0 #bdbbbb;} .scrbbl-post-type-html h3.LinkTitle a:hover {box-shadow:inset 0 -1px 0 #dd1313;} .scrbbl-sitePreview-inner {font-size:12px!important; line-height:16px!important;} .scrbbl-post-type-html .LinkDescription {font-size:12px!important; line-height:16px!important; color:#818181;} .scrbbl-post-type-html .LinkSiteName {text-transform:uppercase; padding-right:3px; font-size:11px; line-height:16px; color:#0083af;} .scrbbl-post-type-html .storysocial {display:none;} .scrbbl-post-html-wrap .Meta {display:none;} /* Remove photo caption everywhere */ .scrbbl-sb-ch, .scrbbl-post-html-full-img .caption {font-size:13px; line-height:16px; color:#777;} /* Live update social icons */ .liveupdate .storysocial {display:none;} .liveupdate .storysocial span {display:inline-block; background:#f7f6f6; padding:5px 6px; -webkit-border-radius:2px; -moz-border-radius:2px; border-radius:2px; margin-right:3px;} .liveupdate .storysocial span.facebook {padding:6px 9px;} .liveupdate .storysocial span i {color:#595555;} .liveupdate .storysocial span:hover {background:#0eaad6;} .liveupdate .storysocial span.facebook:hover {background:#244872;} .liveupdate .storysocial span:hover i {color:#fff;} .liveupdate:hover .storysocial {opacity:1;} /* Live highlights */ .livehighlights {float:left; width:100%; margin-bottom:20px;} .livehighlights ul.accordion {margin:0; padding:0;} .livehighlights ul.accordion li.accordion-navigation {margin:0; padding:0;} .livehighlights ul.accordion li.accordion-navigation a.livehighlightstoggle {display:block; margin:0; padding:0; padding-top:10px; background:#fff; border-top:3px solid #F22613; font-family: source-sans-pro, sans-serif; font-size:30px; line-height:30px; font-weight:300; letter-spacing:-1px; color:#1e1e1e;} .livehighlights ul.accordion li.accordion-navigation a.livehighlightstoggle i {float:right;} #livehighlightstoggle {padding:0;} .livehighlights ul {margin:0; padding:0; list-style:none;} .livehighlights ul li {padding:7px 0; font-size:13px; line-height:15px;} .livehighlights ul li strong {font-size:13px; color:#595555;} .scrbbl-post-video video {width:100%;} /* Live leaderboard */ .liveleaderboard {float:left; width:100%; font-family: source-sans-pro, sans-serif;} .liveleaderboard p {font-size:12px!important; line-height:15px!important;} .liveleaderboard p .fa-stackfa-lg {font-size:15px;} .liveleaderboard .headerbar {display:none;} .liveleaderboard table {width:100%; border:none; border-collapse: collapse; margin:10px 0;} .liveleaderboard thead {padding:3px 0;} .liveleaderboard th {font-family: source-sans-pro, sans-serif; font-size:12px; line-height:15px; font-weight:600; color:#575b5e; padding:0;} .liveleaderboard tr {border-bottom:1px solid #DADFE1; padding:0; background:#fff;} .liveleaderboard tr td {font-family: source-sans-pro, sans-serif; font-size:13px; line-height:15px; padding:7px 0; padding-right:5px; background:#fff;} .liveleaderboard tr td:first-of-type, .liveleaderboard tr th:first-of-type {width:20px;} .liveleaderboard tr td:last-of-type, .liveleaderboard tr th:last-of-type {text-align:right; padding-right:0;} .liveleaderboard tr td img {width:50px;} .liveleaderboard i.fa {color:#000;} .liveleaderboard i.fa.wet {color:#328ce2;} .liveleaderboard i.fa.inter {color:#77d24e;} .liveleaderboard i.fa.ultrasoft {color:#ef52df;} .liveleaderboard i.fa.supersoft {color:#d32620;} .liveleaderboard i.fa.soft {color:#fbdf24;} .liveleaderboard i.fa.medium {color:#d0d0d0;} .liveleaderboard i.fa.hard {color:#f78e07;} .liveleaderboard .row {margin:20px 0;} .liveleaderboard .row .columns {font-family: source-sans-pro, sans-serif; font-size:12px; line-height:12px; color:#575b5e;} .liveleaderboard .row .columns strong {display:block; padding-bottom:5px; font-weight:600:} .liveleaderboard .row .columns span {display:block; padding:2px 0;} .liveleaderboard .row .columns i.fa {font-size:12px; padding-right:3px;} /* Live footer mini-panel */ .livefooter {visibility:hidden; height:0;} /* TAXONAMY TAGS ======================================*/ ul.taxonamy {display:table; width:100%; margin:20px 0 0 0; list-style:none; font-family: source-sans-pro, sans-serif; line-height:11px; border-top:1px solid #d9e4eb; padding-top:20px;} ul.taxonamy li {float:left; margin-bottom:2px;} ul.taxonamy li a {font-size:12px; line-height:12px; font-weight:600; background:#e8eff3; padding:3px 7px; -webkit-transition:all 0.2s ease; -moz-transition:all 0.2s ease; -o-transition:all 0.2s ease; transition:all 0.2s ease; -webkit-border-radius: 2px; -moz-border-radius:2px; border-radius:2px; color:#777; margin:5px;} ul.taxonamy li:first-of-type a {background:#fff; color:#f0990f; cursor:pointer; font-size:14px; text-transform:none; margin:5px 0; padding-left:0;} ul.taxonamy li:first-of-type a:hover {background:#fff;} ul.taxonamy li a:hover {background:#d9e4eb;} /* DETAILS BOX STYLING - DATE, CATEGORY, BYLINE ON STORIES ======================================*/ .details {display:block; margin:0; padding-top:5px; font-size:12px; line-height:12px; font-weight:400; color:#9ba1a4;} .details .timestamp {padding-right:6px; } .details .timestamp i.fa-clock-o {padding-right:2px; font-size:11px;} .details .series {padding-left:7px; border-left:1px solid #d9e4eb;} .details .series a {font-size:12px; line-height:12px; font-weight:600; color:#f0990f; text-transform:uppercase;} .details .series a:hover {color:#e67e22;} /* Footer sell styling */ .grid.footer ul li .sell {display:none;} /* NEWS ITEMS BLOCKS ======================================*/ .newsitem {display:inline-block; width:100%; padding:10px 0; border-top:1px solid #DADFE1; font-family: source-sans-pro, sans-serif; line-height:16px;} .newsitem:first-of-type {border:none;} .newsitem img {width:90px; height:auto; float:left; margin-right:7px;} .newsitem a {font-size:14px; line-height:16px;} .newsitem .byline {display:block; padding-top:5px; font-family: source-serif-pro, sans-serif; font-size:12px; line-height:14px; color:#0083af; font-weight:600;} .newsitem ul.fa-ul {margin-left:20px;} .newsitem ul.fa-ul li {padding:3px 0;} .newsitem ul.fa-ul li i {font-size:12px; top:5px; color:#c3cdd3;} .newsitem ul.fa-ul li a {font-weight:600;} .mostread .content {padding:0; margin:0; padding-top:7px;} .rightContent .mostread, .rightContent .features {margin-bottom:20px;} /* Dark background styling */ body.gallery .newsitem {border-top:1px solid #82898d;} body.gallery .newsitem:first-of-type {border:none;} body.gallery .newsitem a {color:#c3cdd3;} body.gallery .newsitem a:hover {color:#f0f4f7;} /* SOCIAL BUTTONS ======================================*/ .socialbuttons {display:block; font-size:12px; width:100%;} .socialbuttons.sidebar {padding:10px 0 20px 0;} .socialbuttons.buttons {margin:20px 0;} body.gallery .socialbuttons.buttons a:nth-last-child(-n+2) {display:none;} .socialbuttons .social {display:inline-block; font-weight:400; -webkit-transition:all 0.2s ease;-moz-transition:all 0.2s ease;-o-transition:all 0.2s ease;transition:all 0.2s ease; -webkit-border-radius: 20px; -moz-border-radius:20px; border-radius:20px; color:#fff; padding:6px 8px; margin-right:5px;} .socialbuttons strong {font-size:13px; line-height:15px; padding-right:5px; font-weight:600; color:#595555;} .socialbuttons .social i {width:17px; text-align:center;} .socialbuttons .social i.fa {font-size:14px; line-height:18px;} .socialbuttons .social .socialtitle {display:none;} .socialbuttons a span.email {background-color:#575b5e;} .socialbuttons a span.facebook {background-color:#244872;} .socialbuttons a span.twitter {background-color:#0eaad6;} .socialbuttons a span.linkedin {background-color:#005983;} .socialbuttons a span.google {background-color:#b93416;} .socialbuttons a:hover span.email {background-color:#82898d;} .socialbuttons a:hover span.facebook {background-color:#306199;} .socialbuttons a:hover span.twitter {background-color:#26c4f1;} .socialbuttons a:hover span.linkedin {background-color:#007bb6;} .socialbuttons a:hover span.google {background-color:#d84023;} /* HEADER BARS ======================================*/ .headerbar {display:block; float:left; width:100%; border-top:3px solid #1e1e1e; padding-top:10px; margin-bottom:10px; font-family: bebas-neue, sans-serif; font-size:34px; line-height:36px; letter-spacing:1px; color:#151617; z-index:10; position:relative;} .headerbar span {color:#575b5e; font-weight:400;} .headerbar a.series {color:#f0990f; font-weight:600;} .headerbar a.series:hover {color:#e67e22;} body.gallery .headerbar {color:#fff;} .headerbar.small {font-family: source-sans-pro, sans-serif; font-size:20px; line-height:22px; font-weight:700; letter-spacing:-0.5px; border-top:1px solid #82898d;} .headerbar.white {color:#fff;} .headerbar.clean {border:none;} .headerbar.padding {padding-bottom:10px;} .headerbar.plus {border-color:#0083af;} .headerbar.top {margin-top:20px;} .headerbar.effone {border-color:#fdf900;} /* STATS - RIGHT HAND SIDE ======================================*/ .stats {font-size:14px; line-height:17px; color:#575b5e; padding-bottom:50px;} .stats a {font-family: source-sans-pro, sans-serif; font-size:13px; font-weight:600;} .stats a:hover {color:#dd1313;} .stats {margin:0;} .stats .tabletitle {display:table; width:100%; padding-top:5px; border-top:3px solid #000; font-family: source-sans-pro, sans-serif; font-weight:200; font-size:22px; line-height:24px;} .stats .tablesubtitle {display:block; font-family: source-sans-pro, sans-serif; font-size:14px; line-height:17px; font-weight:600; padding-bottom:5px;} .stats table {width:100%; float:left; border:0; border-collapse: collapse; margin:10px 0 5px 0;} .stats th {font-family: source-sans-pro, sans-serif; font-size:12px; font-weight:700; text-transform:uppercase; padding:5px 0; padding-right:5px; color:#dd1313;} .stats tr {border-bottom:1px solid #DADFE1; padding:0; background:#fff;} .stats tr td {font-family: source-sans-pro, sans-serif; font-size:13px; padding:5px 0; padding-right:5px; background:#fff;} .stats tr td.widerfirsttablecell {width:auto; font-weight:600;} .stats tr:last-child {border-bottom:1px solid #ABB7B7;} .stats td .team {display:block; font-style:italic; margin-top:-4px; color:#666;} .stats td {font-size:12px;} .stats .time-convert {font-family: source-sans-pro, sans-serif; font-size:13px;} .stats .time-convert a.time-button {color:#ABB7B7;} .stats .time-convert a.time-button.active {color:#CF000F;} .stats ul.fa-ul {float:left; font-size:12px; line-height:16px; margin-left:20px; margin-bottom:10px;} /* SITE FOOTER ======================================*/ #footer {background:#000; margin:0 auto; padding:20px 0;} #footer .footer ul {list-style:none; margin:0; padding:0 0 0 10px;} #footer .footer ul li {line-height:14px; padding:5px;} #footer .footer ul li a {font-family: source-sans-pro, sans-serif; font-size:13px; font-weight:500; color:#DADFE1;} #footer .footer ul li a i {padding-left:3px;} #footer .footer ul li a:hover {color:#fff;} #footer .footer ul li:first-child, #footer .footer ul li:first-child a {font-family: source-sans-pro, sans-serif; font-size:14px; line-height:16px; font-weight:600; color:#DADFE1;} #footer .footer ul li:first-child {padding-top: 20px; padding-bottom:5px; border-bottom:1px solid #ABB7B7;} #footer .row.legal ul {list-style:none; margin:20px 0; padding:0 10px;} #footer .row.legal ul li {width:50%; float:left; font-family: source-sans-pro, sans-serif; font-size:12px; line-height:14px; color:#ABB7B7;} #footer .row.legal ul li a {color:#ABB7B7;} #footer .row.legal ul li a:hover {color:#278ABD;} /* METERING ======================================*/ #meteringfooter {z-index:-50; position:fixed; bottom:0; height:auto; width:100%; background:#0c1823; color:#fff; font-family: source-sans-pro, sans-serif; opacity:0; border-top:5px solid #F22613; padding-top:10px;} #meteringfooter.active { z-index:9998; -webkit-animation: meteringfooter 0.3s linear 1 normal; opacity: 0.0; -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */ -moz-animation: meteringfooter 0.3s linear 1 normal; opacity: 0.0; -moz-animation-fill-mode: forwards; /* Firefox */ animation: meteringfooter 0.3s linear 1 normal; animation-fill-mode: forwards; } @-webkit-keyframes meteringfooter {0% {opacity: 0.0;} 50% {opacity: 0.5;} 100% {opacity: 1.0;}} @-moz-keyframes meteringfooter {0% {opacity: 0.0;} 50% {opacity: 0.5;} 100% {opacity: 1.0;}} @keyframes meteringfooter {0% {opacity: 0.0;} 50% {opacity: 0.5;} 100% {opacity: 1.0;}} #meteringfooter a {font-family: source-sans-pro, sans-serif; color:#fff; font-size:14px;} #meteringfooter a i.fa {position:absolute; top:0; right:0; color:#fff; margin:10px; font-size:20px;} #meteringfooter a i.fa:hover {color:#DADFE1;} #meteringfooter a.button {margin-right:10px;} #meteringfooter .messagecontainer {padding:10px 10px 30px 10px;} #meteringfooter .meteringheadline {display:block; font-family: source-sans-pro, sans-serif; font-size:22px; line-height:26px; font-weight:600; padding-bottom:10px;} #meteringfooter .meteringheadline span {text-decoration:underline;} #meteringfooter .meteringsell {display:block; font-size:14px; line-height:16px; font-weight:300; padding-bottom:10px; color:#dedddd;} #meteringfooter a.more {font-size:14px; line-height:16px; font-weight:300;} #meteringfooter a.more:hover {color:#ceedf7;} #meteringfooter strong {font-weight:400; color:#fff;} #meteringfooter > p {margin:0; padding:0;} #meteringfooter ul.fa-ul > li {font-size:14px; line-height:18px; color:#fff; margin:10px 0; padding:0;} #meteringfooter ul.fa-ul > li > a {color:#0aa6d8;} #meteringfooter ul.fa-ul > li > a:hover {color:#ceedf7;} #meteringfooter ul.fa-ul > li > i {color:#dedddd;} #meteringfooter ul.fa-ul > li > i.fa-check {color:#2ECC71;} /* Metering Block */ #meteringoverlay {position:fixed; top:0; right:0; bottom:0; left:0; background:#151617; z-index:9998; opacity:0.98; margin:0 auto;} #meteringoverlay a i.fa-times {top:0;} #meteringoverlay a.close {position:absolute; right:20px; top:20px; color:#c3cdd3; z-index:5;} #loginoverlay a.close, #sunsetoverlay a.close {position:absolute; top:10px; right:0; color:#82898d; z-index:5;} #meteringoverlay a:hover i.fa-times, #loginoverlay a:hover i.fa-times {color:#fff;} #meteringoverlaycontainer {position:fixed; width:100%; top:40px; left:50%; -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%); transform:translateX(-50%); z-index: 9999; margin:0 auto; padding:0; text-align:center;} #meteringoverlaycontainer img.logo, #loginoverlaycontainer img.logo {display:block; padding-bottom:10px; width:120px;margin:0 auto;} #meteringoverlaycontainer .title, #loginoverlaycontainer .title {font-family: source-sans-pro, sans-serif; font-size:24px; line-height:26px; font-weight:700; letter-spacing:-0.5px; color:#fff;} #meteringoverlaycontainer h2 {font-family: source-sans-pro, sans-serif; font-size:18px; line-height:20px; font-weight:600; color:#d9e4eb;} #meteringoverlaycontainer h2 a {color:#fff; text-decoration:underline;} #meteringoverlaycontainer .columns p, #loginoverlaycontainer .columns p {font-family: source-sans-pro, sans-serif; font-size:14px; line-height:17px; color:#c3cdd3; margin-top:7px;} #meteringoverlaycontainer .columns p strong, #loginoverlaycontainer .columns p strong {font-weight:600;} #meteringoverlaycontainer hr {margin-top: 10px; margin-bottom: 20px; border: 0; border-top: 1px solid #82898d;} #meteringoverlaycontainer a.link, #loginoverlaycontainer a.link {font-family: source-sans-pro, sans-serif; font-size:14px; line-height:18px; font-weight:600; color:#008CBA;} #meteringoverlaycontainer a.link:hover, #loginoverlaycontainer a.link:hover {color:#0aa6d8;} #meteringoverlaycontainer a.button, #loginoverlaycontainer a.button {margin-top:10px; font-family: source-sans-pro, sans-serif; font-size:14px; line-height:16px;} #meteringoverlaycontainer i.fa {position:relative; left:0; top:0; color:#2ECC71;} .deactive {display:none;} /* Login container */ #sunsetoverlay, #loginoverlay {position:fixed; top:0; right:0; bottom:0; left:0; background:#151617; z-index:9998; margin:0 auto; overflow:scroll;} #loginoverlaycontainer {position:relative; width:90%; padding-top:20px; z-index: 9999; margin:0 auto; text-align:center;} #loginoverlaycontainer input {font-family: source-sans-pro, sans-serif; margin-top:20px;} #loginoverlaycontainer input#signin-rememberme {margin:0;} #loginoverlaycontainer label {font-family: source-sans-pro, sans-serif; font-size:14px; line-height:18px; color:#d9e4eb;} #loginoverlaycontainer ul.orbit-slides-container {height: 800px!important;} #loginoverlaycontainer .loginbutton {position:relative; width:100px; margin:0 auto;} #loginoverlaycontainer .loginbutton input {width:100px; height:50px;} #loginoverlaycontainer .loginbutton input.shake { -webkit-animation-name: shaker; -webkit-animation-duration: 0.1s; -webkit-transform-origin:50% 50%; -webkit-animation-timing-function: linear; -moz-animation-name: shaker; -moz-animation-duration: 0.1s; -moz-transform-origin:50% 50%; -moz-animation-timing-function: linear; animation-name: shaker; animation-duration: 0.1s; transform-origin:50% 50%; animation-timing-function: linear;} #loginoverlaycontainer .loginbutton input.active {font-size:0px;} #loginoverlaycontainer .loginbutton i.fa {display:none; position:absolute; left:34px; top:28px; opacity:0; transition:visibility 0.5s 2s, opacity 0.5s linear 2s; color:#fff;} #loginoverlaycontainer .loginbutton i.fa.active {display:block; opacity:1;} #loginerror {display:table; height:30px; width:100%; font-family: source-sans-pro, sans-serif; color:#ff0;} /* Overlay animation */ .overlayanimation { -webkit-animation: overlayanimation 0.1s linear 1 normal; opacity: 0.0; -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */ -moz-animation: overlayanimation 0.1s linear 1 normal; opacity: 0.0; -moz-animation-fill-mode: forwards; /* Firefox */ animation: overlayanimation 0.1s linear 1 normal; animation-fill-mode: forwards;} @-webkit-keyframes overlayanimation {0% {opacity: 0.0;} 50% {opacity: 0.5;} 100% {opacity: 0.98;}} @-moz-keyframes overlayanimation {0% {opacity: 0.0;} 50% {opacity: 0.5;} 100% {opacity: 0.98;}} @keyframes overlayanimation {0% {opacity: 0.0;} 50% {opacity: 0.5;} 100% {opacity: 0.98;}} @-webkit-keyframes shaker {0% { -webkit-transform: translate(1px, 0);} 50% { -webkit-transform: translate(-3px, 0); } 100% { -webkit-transform: translate(3px, 0); }} @-moz-keyframes shaker {0% { -webkit-transform: translate(1px, 0);} 50% { -webkit-transform: translate(-3px, 0); } 100% { -webkit-transform: translate(3px, 0); }} @keyframes shaker {0% { -webkit-transform: translate(1px, 0);} 50% { -webkit-transform: translate(-3px, 0); } 100% { -webkit-transform: translate(3px, 0); }} /* Article and feature blocks */ #newsplug {background:#000; margin:30px 0; background-image:url('/img/subscribe/newsinline.jpg'); background-size:cover; background-position:center center;} #newsplug.subs {background-image:url('/img/subscribe/newsinlinesub.jpg');} #newsplug.block {background-image:url('/img/subscribe/newsinlineblock.jpg');} #newsplug.error {position:relative; height:500px; background-image:url('/img/error/safetycar.jpg');} #newsplug.fail {position:relative; height:500px; background-image:url('/img/error/redflag.jpg');} #newsplug.feature {background-image:none;} #newsplug .row {padding:20px; background: -webkit-linear-gradient(to top, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0)); /*Safari 5.1-6*/ background: -o-linear-gradient(to top, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0)); /*Opera 11.1-12*/ background: -moz-linear-gradient(to top, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0)); /*Fx 3.6-15*/ background: linear-gradient(to top, rgba(0,0,0,0.7) 70%, rgba(0,0,0,0)); /*Standard*/} #newsplug.error .row, #newsplug.fail .row {position:absolute; bottom:0;} #newsplug .row:first-of-type {padding-top:10px;} #newsplug .row .columns {padding:0; font-size:14px; line-height:17px; color:#e8eff3;} #newsplug .row .columns:first-of-type {padding-bottom:0;} #newsplug p {font-family:source-sans-pro, sans-serif; font-size:14px; line-height:17px; color:#e8eff3;} #newsplug p strong {font-weight:600;} #newsplug span {display:block;} #newsplug a.secondary {background-color:#28292b; color:#fff; transition:0.3s linear;} #newsplug a:hover.secondary {opacity:0.8;} #newsplug h1 {display:block; padding:5px 0; font-family:source-serif-pro, sans-serif; font-size:40px; line-height:38px; font-weight:700; color:#fff;} #newsplug.feature h1 {font-size:30px; line-height:32px; color:#f0f4f7;} #newsplug h2 {display:block; padding:0 0 10px 0; font-family:source-sans-pro, sans-serif; font-size:20px; line-height:22px; color:#fff;} #newsplug a.button {margin-top:20px; font-family:source-sans-pro, sans-serif; font-weight:600;} #newsplug a.signin {color:#fff; font-weight:600;} #newsplug a.signin:hover {color:#0aa6d8;} #newsplug hr {margin:10px 0; border:0; border-top:1px solid #82898d;} #newsplug ul.fa-ul {margin-left:20px; margin-bottom:0;} #newsplug ul.fa-ul > li {font-size:14px; line-height:16px; color:#fff; margin:7px 0; padding:0;} #newsplug ul.fa-ul > li > a {color:#0aa6d8;} #newsplug ul.fa-ul > li > a:hover {color:#ceedf7;} #newsplug ul.fa-ul > li > i {color:#d9e4eb; font-size:12px;} #newsplug ul.fa-ul > li > i.fa-check {color:#2ECC71;} #newsplug ul.fa-ul li:last-of-type {margin-bottom:0;} /* TABLES ======================================*/ .table-container { width: 100%; overflow-y: auto; _overflow: auto; margin: 0 0 1em; } .table-container::-webkit-scrollbar { -webkit-appearance: none; width: 14px; height: 14px; } .table-container::-webkit-scrollbar-thumb { border-radius: 8px; border: 3px solid #fff; background-color: rgba(0, 0, 0, .3); } /* MEDIA QUERIES ======================================*/ @media screen and (min-width: 425px ) { #newsplug {background-image:url('/img/subscribe/newsinline_m.jpg');} #newsplug.subs {background-image:url('/img/subscribe/newsinlinesub_m.jpg');} #newsplug.block {background-image:url('/img/subscribe/newsinlineblock_m.jpg');} } @media screen and (min-width: 500px ) { /* Article structure */ #article .story .body {padding:0 50px;} /* Social buttons */ .socialbuttons, .socialbuttons.sidebar {padding-left:50px;} /* Blockquote */ blockquote {float:right; width:50%; margin:30px; margin-right:-20px;} /* Plus promos */ .pluspromo img {display:block; float:left; width:auto; margin-right:7px;} .pluspromo.large {float:right; width:250px; margin:20px; border-radius: 0px 5px 5px 0px; border:none; border-left:3px solid #278ABD;} .grid.feature {height:500px;} .grid.feature #header h1 {font-size:42px; line-height:44px; font-weight:700;} .grid.feature #interviewimage {height:400px;} /* Live */ .grid.live {height:300px;} .grid.live .background {opacity:1;} .grid.live .backgroundgradient {display:block; content:""; position:absolute; z-index:-1; top:0; bottom:0; left:0; right:0; background: -webkit-linear-gradient(to top, rgba(0,0,0,0.82) 30%, rgba(0,0,0,0)); /*Safari 5.1-6*/ background: -o-linear-gradient(to top, rgba(0,0,0,0.82) 30%, rgba(0,0,0,0)); /*Opera 11.1-12*/ background: -moz-linear-gradient(to top, rgba(0,0,0,0.82) 30%, rgba(0,0,0,0)); /*Fx 3.6-15*/ background: linear-gradient(to top, rgba(0,0,0,0.82) 30%, rgba(0,0,0,0)); /*Standard*/} .liveupdate .content p, .scrbbl-post-html-wrap {display:inline; font-size:16px!important; line-height:24px!important;} .scrbbl-post-type-html .LinkImage {width:30%; float:right; margin:0 0 0 10px;} .scrbbl-post-type-html .LinkImage img {margin:0;} .scrbbl-post-type-html h3.LinkTitle a {font-size:16px!important; line-height:24px!important;} #newsplug.error {position:relative; height:400px; background-image:url('/img/error/safetycar_m.jpg');} #newsplug.error .row {height:400px; width:50%; float:left; position:relative; bottom:0;} #newsplug.fail {position:relative; height:400px; background-image:url('/img/error/redflag_m.jpg');} #newsplug.fail .row {height:400px; width:50%; float:left; position:relative; bottom:0;} #newsplug .row {background: -webkit-linear-gradient(to right, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0))!important; /*Safari 5.1-6*/ background: -o-linear-gradient(to right, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0))!important; /*Opera 11.1-12*/ background: -moz-linear-gradient(to right, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0))!important; /*Fx 3.6-15*/ background: linear-gradient(to right, rgba(0,0,0,0.8) 10%, rgba(0,0,0,0))!important; /*Standard*/} #newsplug .row .columns {margin-top:0;} #newsplug span {display:inline; margin:0 10px;} /* Metering / Login Overlay */ #meteringoverlaycontainer img {margin:0 auto; width:300px; padding-bottom:20px;} } @media screen and (min-width: 760px ) { .headerbar {font-size:34px; line-height:36px;} .homepage .leftColumn {margin-right: 325px;} .homepage .rightContent {display:block; float:right; width:300px;} /* Live Homepage */ .livehomeimage {height:90px;} /* Live */ .row .columns.livedetails {padding-top:30px;} .grid.live {height:350px;} .grid.live #header h1, .grid.live #header h2 {width:80%;} a.button.liveindex {position:absolute; top:10px; left:0;} #article.live .story p {font-size:16px; line-height:24px; font-weight:400;} .liveupdate .content {padding-left:75px; padding-right:75px;} .liveupdate .content p {margin-bottom:0;} .liveupdate .livetimestamp {left:120px;} .liveupdate span.fa-stack {font-size:20px;} .liveupdate .icon {position:absolute; top:7px; left:10px;} .liveupdate.opinion .icon {left:10px; width:50px; height:50px; background-size:50px!important;} .liveupdate.racecentre .icon, .liveupdate.autosport .icon {left:11px; width:36px; height:36px; background-size:36px!important;} .liveupdate .storysocial {display:block; position:absolute; top:15px; right:5px; font-size:12px;} .liveupdate.tweet .twitteravatar img {width:46px;} .liveupdate.tweet p.twitter {display:block; padding-top:5px; margin-bottom:20px;} .grid.live .specials {top:auto; bottom:30px;} /* Live details */ #livedetails ul li {font-size:12px; line-height:14px; padding:15px 10px 15px 10px;} #livedetails ul li span {display:inline;} #livedetails ul li span.data {font-size:23px; line-height:26px;} #livedetails ul li .icon {font-size:28px; margin-top:-3px!important;} /* Metering / Login overlay */ #meteringoverlaycontainer {width:90%;} #meteringoverlay a i.fa-times {right:20px; top:20px;} #meteringoverlaycontainer .title {font-size:34px; line-height:36px; padding-bottom:30px;} #meteringoverlaycontainer h2 {font-size:22px; line-height:24px;} #meteringoverlaycontainer .row .columns.medium-2 p {font-size:16px; padding-top:40px;} #meteringoverlaycontainer img {margin:0 auto; width:400px;} #loginoverlaycontainer {width:40%;} /* Blocks gallery styling */ .blocks .row .columns {padding-left:auto;} /* Blockquote */ blockquote {float:right; width:50%; margin:30px; margin-right:-100px;} /* Registration inline promo */ #newsplug {background-size:cover;} #newsplug .row:first-of-type .columns {margin-top:0;} #newsplug.feature h1 {font-size:40px; line-height:42px;} /* Previous and next plugs at top of article */ .previousnext.header {display:table; border-top:none; border-bottom:#d9e4eb 1px solid; margin:0;} .previousnext.header a i {top:8px;} } @media screen and (min-width: 770px ) { #newsplug.error {height:500px; background-image:url('/img/error/safetycar_l.jpg');} #newsplug.error .row {padding-top:5%; height:500px;} #newsplug.error h1 {font-size:60px; line-height:58px;} #newsplug.fail {height:500px; background-image:url('/img/error/redflag_l.jpg');} #newsplug.fail .row {padding-top:5%; height:500px;} #newsplug.fail h1 {font-size:60px; line-height:58px;} .leftColumn {margin-right: 325px;} .rightContent {display:block; float:right; width:300px;} .MPU_container.mobile {display:none;} #header ul.byline li:nth-of-type(2),#header ul li:nth-of-type(4) {display:block;} #header h1 {font-size:36px; line-height:36px;} #header h2 {font-size:26px; line-height:26px;} #header.feature h1 {font-weight:600;} #header ul.byline li {float:left; padding:0px 10px; border-right:1px solid #bdbbbb;} #header ul.byline li i.fa-circle {display:none;} /* Article structure */ #article .story .body {padding:0 50px 0 0;} #article .story .image.normal {padding:0;} blockquote {float:right; width:50%; margin:30px; margin-right:0;} .pluspromo.large {width:200px;} /* Social */ .socialbuttons.sidebar, .socialbuttons.buttons {padding-left:0;} /* News gallery */ #gallery.large .row .columns {text-align:center;} #gallery.large img {width:80%;} #mediacontainer {position:relative;} #mediacontainer a.show-for-large-up {position:absolute; top:50%; z-index:9999;} #mediacontainer a.previmage {left:20px;} #mediacontainer a.nextimage {right:20px;} #mediacontainer i.fa-caret-left, #mediacontainer i.fa-caret-right {color:#fff; font-size:6em; opacity:.6} #mediacontainer a:hover i.fa {opacity:1;} /* News storystream */ #mediacontainer.stories {margin-top:40px;} #mediacontainer.stories .owl-pagination {display:none;} #mediacontainer.stories .owl-buttons {display:block;} /* Feature version 1 */ .grid.feature {height:600px; padding:50px 200px 0 50px;} .grid.feature #header h1 {font-size:62px; line-height:64px;} .grid.feature #header h2 {font-size:20px; line-height:26px;} /* Feature version 2 */ .grid.feature #interviewimage {float:left; width:65%; height:600px;} .grid.feature #interviewtext {float:left; width:35%; padding-top:50px;} .grid.feature #header h1.interviewtext {font-size:32px; line-height:34px; padding:20px; border:none;} .grid.feature #header h2.interviewtext {font-size:18px; line-height:22px; padding:0 20px 20px 20px;} /* Live tabs */ #article .story.live ul.tabs {display:none;} #article .story.live .tabs-content #livecoverage1 {display:block!important;} #article .story.live .tabs-content #livecoverage2 {display:none;} .liveleaderboard tr td span {display:none;} .liveleaderboard {position:relative;} .liveleaderboard .headerbar {display:block; margin-bottom:20px;} .liveleaderboard p.session {position:absolute; top:6px; right:0;} .livefooter {visibility:visible;} .livefooter {display:none; position:fixed; padding:10px; right:20px; bottom:20px; width:300px; height:250px; background:#fff; z-index:1; border:1px solid #dedddd;} .livefooter table {width:100%; border:0px; border-collapse: collapse;} .livefooter thead {padding:3px 0;} .livefooter th {font-family: source-sans-pro, sans-serif; font-size:12px; line-height:15px; font-weight:600; color:#595555; padding:0;} .livefooter tr {border-bottom:1px solid #DADFE1; padding:0; background:#fff;} .livefooter tr td {font-family: source-sans-pro, sans-serif; font-size:13px; line-height:15px; padding:3px 0; padding-right:5px; background:#fff;} .livehomeimage {height:150px;} .grid.footer ul li .sell {display:block;} #footer .row.footer {margin:10px 0; padding:0 10px; margin-left:0; margin-right:0; max-width:100%;} #footer .row.legal {margin-left:0; margin-right:0;} #footer .row.legal ul {width:auto;} #footer .row.legal ul li {width:auto; float:left; padding-right:15px;} #meteringfooter {left:1%; width:50%;} } @media screen and (min-width: 970px ) { /* Article header */ #gallery.large img {width:90%;} /* Feature v1 */ .grid.feature #interviewimage {float:left; width:60%; height:600px;} .grid.feature #interviewtext {float:left; width:40%;} .grid.feature #header h1.interviewtext {font-size:42px; line-height:44px; } .grid.feature #header h2.interviewtext {font-size:18px; line-height:24px;} /* Feature - column opinion */ .grid.feature.clean #header img {width:300px;} /* Article structure */ #article .story .body {padding-left:140px;} #article .story .image.normal {padding-left:140px; margin-bottom:10px;} /* Social */ .socialbuttons.buttons {padding-left:140px;} .socialbuttons.sidebar {position:absolute; top:0; left:0; width:auto; padding:0;} .socialbuttons.sidebar .social {display:block; margin-right:0; margin-bottom:5px;} .socialbuttons.sidebar .social .socialtitle {display:inline-block; text-align:center; width:80px;} /* Social */ body.gallery .socialbuttons {padding:0;} .socialbuttons.buttons {padding-left:140px;} .socialbuttons.sidebar {position:absolute; top:0; left:0; width:auto; padding:0;} .socialbuttons.sidebar .social {display:block; margin-right:0; margin-bottom:7px;} .socialbuttons.sidebar .social .socialtitle {display:inline-block; height:19px;} /* Live details */ #livedetails ul li {font-size:12px; line-height:14px; padding:25px 10px 25px 10px;} #livedetails ul li span {display:inline;} #livedetails ul li span.data {font-size:33px; line-height:36px;} #livedetails ul li .icon {font-size:38px; margin-top:-3px!important;} .grid.live .specials {width:auto; bottom:25px;} .grid.live .specials img {display:inline; width:60px; padding-left:5px;} /* Metering and Login */ #meteringoverlay a.close {right:100px;} #loginoverlaycontainer {width:30%;} #meteringfooter {width:40%;} } @media screen and (min-width: 1170px ) { /* Article structure */ #article .story .body {padding-right:50px;} /* Live */ .livehighlights {margin-left:-150px; width:120px; float:left; padding:0;} .livehighlights ul.accordion li.accordion-navigation a.livehighlightstoggle {cursor:default;} .livehighlights ul.accordion li.accordion-navigation a.livehighlightstoggle i {display:none;} #livehighlightstoggle.content {display:block!important;} /* Live social */ .liveupdate .storysocial {opacity:0; transition:opacity 0.1s linear; font-size:12px;} /* Feature version 2 */ .grid.feature #header h1.interviewtext {font-size:52px; line-height:54px; } .pluspromo.large {float:left; width:180px; margin:20px 20px 20px -200px; border-radius: 5px 0px 0px 5px; border:none; border-right:3px solid #0aa6d8;} }