/* NEW TOPPER ======================================*/ #newtoppers {max-width:1020px; margin:0 auto 30px auto; background:#000; padding-bottom:10px;} #newtoppers #megacontainer {display:block; float:left; width:100%;} #newtoppers #megacontainer .mega .headerbar {opacity:0.9;} #newtoppers #megacontainer .mega .columns.mega {margin-bottom:10px;} #newtoppers #megacontainer .columns.mega .gridoverlay {height:300px; width:100%; box-shadow: inset 0 0 30px rgba(0,0,0,0.8); background: -webkit-linear-gradient(to top, rgba(0,0,0,0.9) 10%, rgba(0,0,0,0)); /*Safari 5.1-6*/ background: -o-linear-gradient(to top, rgba(0,0,0,0.9) 10%, rgba(0,0,0,0)); /*Opera 11.1-12*/ background: -moz-linear-gradient(to top, rgba(0,0,0,0.9) 10%, rgba(0,0,0,0)); /*Fx 3.6-15*/ background: linear-gradient(to top, rgba(0,0,0,0.9) 10%, rgba(0,0,0,0)); /*Standard*/} #newtoppers #megacontainer .columns.mega {background-size:cover!important; background-position:center center!important; height:300px; margin:0; padding:0;} #newtoppers #megacontainer .columns.mega .gridcontent p {position:absolute; bottom:0; z-index:2; padding:10px; font-size:26px; line-height:28px; font-weight:700;} #newtoppers #megacontainer .columns.mega .gridcontent p span {display:block!important;} #newtoppers #megacontainer .mega {margin-right:0; position:relative;} #newtoppers .MPU_container {float:none; margin:0 auto;} #newtoppers #megacontainer .MPUcolumn {display:none;} #newtoppers [class*='small-'] img {float:left; width:80px; margin-right:7px;} #newtoppers [class*='small-'] p {z-index:2; margin:0; padding:0; overflow:hidden; font-size:15px; line-height:17px; color:#f0f4f7; font-weight:600;} #newtoppers [class*='small-'] p a {font-family: source-sans-pro, sans-serif;} #newtoppers [class*='small-'] p span {display:none; font-size:13px; line-height:15px; font-weight:400; padding-top:3px; color:#dedddd;} #newtoppers .columns.mini, #newtoppers .columns.medium {background-size:0%!important; padding:0 10px;} #newtoppers .small-12.columns {margin:10px 0;} #newtoppers .columns .gridcontent {font-family: source-sans-pro, sans-serif; z-index:5;} #newtoppers .columns .gridcontent b {display:block; text-transform:uppercase; font-size:12px; line-height:16px; font-weight:600; color:#0aa6d8;} #newtoppers .columns .gridcontent b.series {color:#f0990f;} #newtoppers .columns .gridcontent b.series.live {color:#dd1313;} #newtoppers .columns .gridcontent b.series.live .live_circle {top:2px; display:inline;float:left;width:10px;height:10px;margin-top:1px;} /* HOMEPAGE ======================================*/ .homepage {float:left; position:relative; width:100%; font-family: source-sans-pro, sans-serif; margin-bottom:30px;} .homepage.nomargin {margin:0;} .homepage.subscribe {display:none;} /* Homepage Stats */ #stats table.racecentre {width:100%; border:0; border-collapse: collapse; margin-bottom:0;} #stats #racecontrol1 table.racecentre {margin-bottom:10px;} #stats table.racecentre thead tr {background:#fff;} #stats table.racecentre thead tr th {padding-bottom:0;} #stats table.racecentre tr {padding:5px 0; border-bottom-color:#2B2C2C;} #stats table.racecentre tr:nth-of-type(even) {background:#f0f4f7;} #stats table.racecentre thead tr th {font-size:12px; color: #dd1313; text-transform: uppercase; font-weight:900; padding-left:5px; padding-right:5px;} #stats table.racecentre tr td {font-size:13px; line-height:14px; font-weight:400; padding-left:5px; padding-right:5px;} #stats table.racecentre tr td:first-of-type, #stats table.racecentre tr td:last-of-type {padding-left:7px;} #stats .time-convert {font-size:13px; line-height:13px;} #stats tr td a {font-weight:600;} #stats tr td a:hover {color:#dd1313;} #stats img {width:58px;} #stats a.time-button {font-weight:600;} #stats a.time-button.active {color:#dd1313;} #stats .tabs-content .content {padding:0;} #stats ul.fa-ul {float:left; font-size:14px; line-height:14px; margin-left:20px; margin-bottom:10px;} #stats ul.fa-ul li {padding:3px 0;} #stats ul.fa-ul li i {color:#9ba1a4; font-size:12px; top:4px;} #opinion {display:none;} #features a.headline {font-size:15px; line-height:17px; font-weight:600; letter-spacing:-0.5px;} #features img {margin-bottom:10px;} /* Latest news */ #latest {margin-bottom:30px;} #latest li.tab-title {width:50%;} #latest .newsitems {width:50%; float:left;} #latest .newsitems:first-of-type {padding-right:10px;} #latest .newsitems:last-of-type {padding-left:10px;} #latest .newsitems .newsitem {height:85px;} #latest .newsitems .newsitem:first-of-type {padding-top:0;} #latest .newsitems .newsitem:last-of-type {padding-bottom:0;} #latest .newsitems .newsitem p {margin:0; padding:0; font-size:14px; line-height:15px; overflow:hidden;} #latest img, #latest .headerbar.small {display:none;} /* Special blocks */ .homepage.specials {background:#d9e4eb;} .homepage.specials .row .columns {padding:10px; border-bottom:1px solid #fff;} .homepage.specials .row .columns.plus {background:#0aa6d8} .homepage.specials .row .columns.plus p {color:#d9e4eb;} .homepage.specials .row .columns.plus a {color:#fff;} .homepage.specials .row .columns.plus a:hover {color:#e8eff3;} .homepage.specials img {float:left; width:100px; margin-right:7px;} .homepage.specials p {margin:0; padding:0; overflow:hidden; font-size:13px; line-height:15px; color:#575b5e;} .homepage.specials a {display:block; padding-bottom:2px; font-size:15px; line-height:16px; font-weight:600; color:#151617;} .homepage.specials a:hover {color:#dd1313;} /* News */ #news .row .columns {padding:0;} #news .row .columns.motorsport {position:relative;} #news .row .columns .loadmore {margin-bottom:30px; text-align:center; width:100%;} #news .row .columns a.button {font-family:source-sans-pro, sans-serif; font-size:12px; line-height:12px; font-weight:700; text-transform:uppercase; margin:0;} #news i.fa-circle {display:none;} #news .newsitems.formula1:nth-of-type(2), #news .newsitems.formula1:nth-of-type(3) {display:none;} #news .newsitems.motorsport:nth-of-type(2), #news .newsitems.motorsport:nth-of-type(3) {display:none;} #news .newsitems .newsitem p {margin:0; padding:0; font-size:14px; line-height:15px; overflow:hidden;} #news .newsitems .newsitem p a span {color:#0083af; font-weight:600;} #news .row .columns dl.accordion {float:left; display:table; width:100%; margin-top:5px;} #news .row .columns dl.accordion dd.accordion-navigation a.motorsport {padding:10px; background:#d9e4eb; margin-bottom:1px; font-family: source-sans-pro, sans-serif; font-weight:600;} #news .row .columns dl.accordion dd.accordion-navigation a.motorsport i {float:right; font-size:14px; padding-top:5px;} #news ul.tabs {display:none;} /* Features */ #feature .firstfeatureimage {width:100%; float:none; margin-bottom:7px;} #feature .firstfeatureimage img {width:100%; margin-bottom:0px;} #feature .firstfeaturecontent {width:100%; padding-left:0; font-family: source-sans-pro, sans-serif; margin-bottom:40px;} #feature .firstfeaturecontent img {display:none; margin-bottom:0; margin-right:0;} #feature .firstfeaturecontent a.headline {display:block; font-family: source-sans-pro, sans-serif; font-size:22px; line-height:22px; font-weight:700; letter-spacing:-0.5px;} #feature .byline {display:block; padding:5px 0; font-family: source-serif-pro, sans-serif; font-size:14px; line-height:16px; color:#0083af;} #feature .firstfeaturecontent a {font-size:14px; line-height:16px;} #feature .firstfeaturecontent i {font-size:12px; color:#ABB7B7;} /* Photo Galleries */ #photos {background:#151617; font-size:14px; line-height:14px; color:#d9e4eb;} #photos img {margin-top:10px;} #photos a.headline {display:block; font-size:24px; line-height:22px; font-weight:300; letter-spacing:-0.5px; color:#fff; padding:10px 0;} #photos a:hover {color:#ABB7B7;} #photos ul li {padding:0 10px; margin-bottom:20px;} #photos ul li a {color:#fff;} #photos ul li a i.fa {padding-left:3px;} #photos ul li div {text-align:center;} #photos ul li:last-of-type div {background:#151617; position:relative;} /* Live */ ul.live {list-style:none; margin:0; padding:0;} ul.live li.livepanel {float:left; padding:20px; color:#fff; font-family: source-sans-pro, sans-serif;} ul.live li.livepanel:nth-child(1) {width:100%;} ul.live li.livepanel:nth-child(2) {display:none;} ul.live li.livepanel:nth-child(3) {display:none} ul.live li.livepanel a.headline {font-family: source-serif-pro, sans-serif; font-size:30px; line-height:32px; font-weight:700; color:#fff; padding-top:10px;} ul.live li.livepanel a.headline span {display:block; font-family: source-sans-pro, sans-serif; font-weight:300; color:#F22613;} ul.live li.livepanel a.headline:hover {color:#ABB7B7;} ul.live li.livepanel h2 {font-family: source-sans-pro, sans-serif; font-size:20px; line-height:20px; font-weight:300; color:#fff;} ul.live li.livepanel h2 span {color:#F22613;} ul.live li.livepanel ul.fa-ul li {font-size:14px; line-height:19px; font-weight:300; padding-bottom:15px;} ul.live li.livepanel ul.fa-ul li span {font-size:14px; line-height:17px; font-weight:300; color:#ABB7B7;} /* Top 10 most read stories */ #trending li {line-height:16px;} #trending li span.position {display:block; font-size:32px; line-height:36px; font-weight:300; color:#ABB7B7; padding-bottom:5px;} #trending a.headline {font-size:14px; line-height:16px;} /* Twitter */ blockquote.twitter-tweet {display:block; width:100%; font-family:source-sans-pro, sans-serif; font-size:12px; line-height:16px; font-weight:600; letter-spacing:0; margin:0; padding:0 10px 10px 10px; color:#071922; border:none;} blockquote.twitter-tweet p {font-family: source-sans-pro, sans-serif; font-size: 14px; line-height: 20px; font-weight: normal; color:#fff; overflow:hidden;} blockquote.twitter-tweet a {color: inherit; font-weight: normal; text-decoration: underline; outline: 0 none;} blockquote.twitter-tweet a:hover, blockquote.twitter-tweet a:focus {text-decoration: underline;} @media screen and (min-width: 501px ) { #newtoppers {padding-bottom:0;} #newtoppers .small-12.columns {margin:0;} #newtoppers [class*='small-'] img {display:none;} #newtoppers .columns.mini, #newtoppers .columns.medium, #newtoppers .columns.mega {background-size:cover!important; background-position:center center!important; padding:0!important;} #newtoppers .columns .gridoverlay {position:absolute; z-index:0; width:100%; height:100%; transition:all 0.3s;} #newtoppers .columns .gridcontent p {font-size:15px; line-height:17px; font-weight:600; text-shadow: 0 0 20px rgba(0,0,0, 0.05);} #newtoppers .columns.mini, #newtoppers .columns.medium, #newtoppers .columns.mega {border:1px solid #151617; border-bottom:none;} #newtoppers .columns.mpu {border-left:none;} #newtoppers .row .columns.medium {border-right:none;} #newtoppers .row .columns.mini {border-right:none;} #newtoppers .row:nth-of-type(2) {border-bottom:1px solid #151617;} #newtoppers .columns .gridcontent p {position:absolute; bottom:0; padding:10px;} /***** Opacity hover state ******/ #newtoppers .mega .medium-8:hover .gridoverlay, #newtoppers .mega .medium-12:hover .gridoverlay, #newtoppers .medium:hover .gridoverlay, #newtoppers .mini:hover .gridoverlay {opacity:0.7;} /* Mega */ #newtoppers #megacontainer .mega .columns.mega {margin-bottom:0;} #newtoppers #megacontainer .columns.mega .gridcontent p span {display:block; padding-top:5px;} #newtoppers #megacontainer .columns.mega .gridoverlay {width:60%; height:300px; border:none; box-shadow: none; background: -webkit-linear-gradient(to right, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0)); /*Safari 5.1-6*/ background: -o-linear-gradient(to right, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0)); /*Opera 11.1-12*/ background: -moz-linear-gradient(to right, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0)); /*Fx 3.6-15*/ background: linear-gradient(to right, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0)); /*Standard*/} #newtoppers #megacontainer .columns.mega .gridcontent p {position:relative; padding:20px; width:50%; font-size:32px; line-height:30px; font-weight:700;} #newtoppers #megacontainer .columns.mega .gridcontent p {width:50%;} /* Minis and Mediums */ #newtoppers .columns.mini, #newtoppers .columns.medium {height:150px;} #newtoppers .columns.mpu {height:300px;} #newtoppers .columns .gridcontent p {width:95%;} #newtoppers .columns.medium .gridoverlay, #newtoppers .columns.mini .gridoverlay {height:150px; bottom:0; border:none; box-shadow: none; background: -webkit-linear-gradient(to top, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0)); /*Safari 5.1-6*/ background: -o-linear-gradient(to top, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0)); /*Opera 11.1-12*/ background: -moz-linear-gradient(to top, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0)); /*Fx 3.6-15*/ background: linear-gradient(to top, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0)); /*Standard*/} #latest img {display:block;} #latest .newsitems .newsitem {height:auto;} #news .newsitems.formula1:nth-of-type(1) {padding-right:10px;} #news .newsitems.formula1:nth-of-type(2) {display:block; padding-left:10px;} #news .newsitems.formula1 {width:50%; float:left;} #news .newsitems {width:100%;} #news .row .columns.motorsport {padding-right:10px; border-right:1px solid #d9e4eb;} #news .row .columns.motogp {padding-left:10px;} #news .row .columns dl.accordion {margin-top:0;} #news .content.active {padding:0;} #news .loadmore {float:left;} #news .row .columns .tabs a.menu {z-index:11; position:absolute; right:10px; top:12px; padding:5px 10px; font-family: source-sans-pro, sans-serif; font-size:14px; line-height:14px; font-weight:700; color:#151617;} #news .row .columns ul.tabs.active {padding-top:0; width:200px; position:absolute; display:table; top:35px; right:10px; transition:all 0.2s ease-in; border:none; z-index:5; background:#d9e4eb;} #news .row .columns ul.tabs li {float:none;} #news .row .columns ul.tabs li a {font-size:14px; line-height:14px; font-weight:600; text-transform:none; color:#151617; background:#d9e4eb; border:none; transition:0.2s all;} #news .row .columns ul.tabs li a:hover {background:#f0f4f7;} #news ul.tabs.active {display:block;} #news ul.tabs li.tab-title {display:block;} #news ul.tabs li.tab-title a {text-align:left;} .homepage.specials img {float:none; width:100%; margin-bottom:7px;} ul.live li.livepanel:nth-child(1) {width:50%;} ul.live li.livepanel:nth-child(2) {display:none;} ul.live li.livepanel:nth-child(3) {display:block; width:50%;} ul.live li.livepanel div {background:#2B2C2C; border:none;} ul.live li.livepanel table {width:100%; border:none; border-collapse:collapse; margin-top:10px;} ul.live li.livepanel table tr td {background:#2B2C2C; border-bottom:2px solid #1e1e1e; font-weight:400; padding:5px; font-size:13px; line-height:16px; color:#DADFE1;} ul.live li.livepanel table tr td:last-child {color:#ABB7B7;} ul.live li.livepanel table tr:nth-last-of-type(-n+3) td {background:#1b1d1d; color:#ABB7B7;} } @media screen and (min-width: 760px ) { /* Add MPU to toppers */ #newtoppers #megacontainer .MPUcolumn {display:table; float:right; width:341px; height:300px; background:#000; border:1px solid #000; border-right:none; border-bottom:none;} #newtoppers #megacontainer .MPU {width:100%; height:100%; display:table-cell; text-align:center; vertical-align:middle;} #newtoppers #megacontainer .mega {margin-right:341px;} #newtoppers #megacontainer .mega .columns {height:300px;} /* Mega */ #newtoppers #megacontainer .columns.mega .gridoverlay {width:100%; height:200px; bottom:0; background: -webkit-linear-gradient(to top, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0)); /*Safari 5.1-6*/ background: -o-linear-gradient(to top, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0)); /*Opera 11.1-12*/ background: -moz-linear-gradient(to top, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0)); /*Fx 3.6-15*/ background: linear-gradient(to top, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0)); /*Standard*/} #newtoppers #megacontainer .columns.mega .gridcontent p {position:absolute; bottom:0; width:100%;} #latest img {display:none;} #latest .newsitems .newsitem {height:auto;} #news .row .columns.formula1 ul.news li img {display:block;} #news row .columns ul.news li img {display:none;} .homepage.specials img {float:left; width:100px; margin-right:7px; margin-bottom:0;} /* Photo Galleries */ #photos a.headline {font-size:34px; line-height:32px;} #photos img {margin:0; margin-bottom:7px;} #photos ul li {padding:10px;} .homepage .rightContent .stats {display:none;} #feature {float:left; width:100%; margin-bottom:20px;} #opinion {display:block; font-family: source-sans-pro, sans-serif; margin-bottom:20px;} #opinion ul li {line-height:16px; text-align:center;} #opinion img {width:100px;} #opinion a {font-size:15px; line-height:16px; letter-spacing:-0.5px; font-weight:600;} #opinion .byline {display:block; padding:5px 0; font-family: source-serif-pro, sans-serif; font-size:12px; line-height:15px; color:#0083af;} ul.live li.livepanel:nth-child(1) {width:30%;} ul.live li.livepanel:nth-child(2) {display:none;} ul.live li.livepanel:nth-child(3) {width:70%;} } @media screen and (min-width: 770px ) { #newtoppers .columns.medium {height:300px;} #newtoppers .columns.medium .gridcontent p {font-size:22px; line-height:22px;} #latest {padding-right: 30px; margin-bottom:0;} #news .row .columns.formula1 {padding-right:10px; border-right:1px solid #d9e4eb;} #news .row .columns.motorsport {padding-left:10px;} #news .row .columns .loadmore {display:none;} #news .newsitems.formula1 {width:100%; float:none;} #news .newsitems.formula1:nth-of-type(1) {padding-right:0;} #news .newsitems.formula1:nth-of-type(2) {display:block; padding-left:0;} #news .newsitems.formula1:nth-of-type(3) {display:block;} #news .newsitems.motorsport:nth-of-type(2) {display:block;} #news img {display:none;} #news .newsitems .newsitem {border-top:1px solid #DADFE1;} #news .newsitems .newsitem p {position:relative; padding:0; padding-left:20px; padding-right:40px;} #news .newsitems.motogp .newsitem p {padding-left:0;} #news .newsitems.motogp .newsitem:first-of-type img {display:block; width:100%; float:none; padding-bottom:5px;} #news .newsitems.motorsport .newsitem p {padding-left:35px;} #news .newsitems .newsitem p .details {display:inline;} #news .newsitems .newsitem p .details .timestamp {display:block; position:absolute; top:2px; right:0; padding:0; border:none;} #news .newsitems .newsitem p .details .series {display:none;} #news .newsitems.motorsport .newsitem p .details .series {display:block; position:absolute; top:2px; left:0; padding: 0; border: none;} #news .newsitems .newsitem p i.fa-circle {display:block; position:absolute; left:0; top:2px; font-size:12px; color:#c3cdd3;} #news .newsitems .newsitem p i.fa-circle.plus {color:#0083af;} } @media screen and (min-width: 970px ) { /* Mega toppers */ #newtoppers #megacontainer .columns.mega .gridoverlay {width:60%; height:300px; background: -webkit-linear-gradient(to right, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0)); /*Safari 5.1-6*/ background: -o-linear-gradient(to right, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0)); /*Opera 11.1-12*/ background: -moz-linear-gradient(to right, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0)); /*Fx 3.6-15*/ background: linear-gradient(to right, rgba(0,0,0,0.7) 50%, rgba(0,0,0,0)); /*Standard*/} #newtoppers #megacontainer .columns.mega .gridcontent p {position:relative; width:40%; font-size:36px; line-height:34px;} /* Medium toppers */ #newtoppers .columns.medium {height:300px;} #newtoppers .columns.medium .gridoverlay {width:100%; height:200px; background: -webkit-linear-gradient(to top, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0)); /*Safari 5.1-6*/ background: -o-linear-gradient(to top, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0)); /*Opera 11.1-12*/ background: -moz-linear-gradient(to top, rgba(0,0,0,0.758) 40%, rgba(0,0,0,0)); /*Fx 3.6-15*/ background: linear-gradient(to top, rgba(0,0,0,0.75) 40%, rgba(0,0,0,0)); /*Standard*/} #newtoppers .columns.medium .gridcontent p {width:80%; font-size:26px; line-height:26px;} #latest ul.tabs {display:none;} #latest .content {width:50%; display:block!important;} #latest #breaking1 {float:left; padding:0; padding-right:15px; } #latest #breaking2 {float:left; padding:0; padding-left:15px;} #latest .newsitems {width:100%; float:none;} #latest .newsitems:first-of-type {padding-right:0;} #latest .newsitems:last-of-type {display:none;} #latest img, #latest .headerbar.small {display:block;} /* Stats */ .homepage .rightContent .stats {display:block;} /* Features */ #feature .firstfeaturecontent a.headline {padding-top:5px; font-size:32px; line-height:31px;} #opinion .byline {font-size:14px; line-height:18px;} /* Live */ ul.live li.livepanel a.headline {font-size:40px; line-height:42px;} ul.live li.livepanel:nth-child(1) {width:25%;} ul.live li.livepanel:nth-child(2) {display:block; width:50%;} ul.live li.livepanel:nth-child(3) {width:25%;} ul.live li.livepanel div:first-of-type {margin-top:10px;} ul.live li.livepanel div.update {background:#2B2C2C; padding:10px; border-top:1px solid #5a5a5a; margin-bottom:20px;} ul.live li.livepanel span.time {float:left; margin:0; padding:0; margin-right:15px; font-size:12px; line-height:16px; color:#ABB7B7;} ul.live li.livepanel div p {margin:0; padding:0 3px; overflow:hidden; font-size:14px; line-height:19px;} ul.live li.livepanel div p img {margin-bottom:5px;} } @media screen and (min-width: 1070px ) { #photos a.headline {font-size:40px; line-height:38px;} }