/* CSS for the responsive liveblog */ /*## Colours for the different sections ##*/ /* Red: #C9252C - News Blue: #0099C2 - Business Green: #39B54A - Sport Olive: #787657 - Debate Orange: #F26722 - Life & Style Pink: #C6548B - Culture */ html{margin:0; padding:0; padding-left:5px; padding-right:5px;} .lb {} #content.lb { font:0.75em Arial,Helvetica,sans-serif; } /* ### Landing page ### */ .listing-title{clear:both; font-family:Georgia, "Times New Roman", Times, serif; font-size:26px !important; color:#333; margin:0 0 10px; font-weight:normal;} .listing-title.running{margin-top:10px;} .listing-title.archived{margin-top:20px;} /* Basic Styling to live blog lists */ .listing-events ul{ margin-left:0px; margin-top:10px; padding: 0} .listing-events ul li{ list-style: none; padding: 15px 0 15px 0px; border-bottom: 1px solid #eee; font-family: helvetica, Arial, sans-serif;} .listing-events ul a { color: inherit;} /*.listing-events ul a span:first-child { opacity: 0.5; font-size: 14px;}*/ .listing-events h3 { margin-top: 30px; margin-bottom: 15px; font-family: helvetica, Arial, sans-serif;} .pagination-title { text-align: center;} .listing-events__pagination { display: flex; justify-content: space-between; max-width: 800px; align-content: center; padding: 20px; margin: 0 auto; margin-top: -50px; } .listing-events ul.section-names {background-color:#F6F6F6; color:#515151; font-size:12px; font-weight:bold; line-height:22px; padding:0 0 0 5px; margin:10px 0; border-bottom:1px solid #EAEAEA; border-top:1px solid #EAEAEA;margin-bottom: 5px;} .listing-events ul.section-names li {float:left; list-style:none; line-height:22px; cursor:pointer; margin-left:5px; padding:0 5px;} .listing-events ul.section-names #tab_news.active{color:#C9252C;} .listing-events ul.section-names #tab_sport.active{color:#39B54A;} .listing-events ul.section-names #tab_business.active{color:#0099C2;} .listing-events ul.section-names #tab_debate.active{color:#787657;} .listing-events ul.section-names #tab_lifeandstyle.active{color:#F26722;} .listing-events ul.section-names #tab_culture.active{color:#C6548B;} #listing_news, #listing_sport, #listing_business, #listing_debate, #listing_lifeandstyle, #listing_culture{clear:both;} .listing-events ul.section-names:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .listing-events ul.section-names { *display:inline-block;} /* Hides from IE-mac \*/ * html .listing-events ul.section-names{height: 1px;} .listing-events ul.section-names {display: block;} /* End hide from IE-mac */ /* ### Headline & summary ### */ #headline{font-family:Georgia, "Times New Roman", Times, serif; font-size:26px; color:#333; margin:0 0 10px; font-weight:normal;} .lb_news #headline span{color:#C9252C;} .lb_business #headline span{color:#0099C2;} .lb_sport #headline span{color:#39B54A;} .lb_debate #headline span{color:#787657;} .lb_lifeandstyle #headline span{color:#F26722;} .lb_culture #headline span{color:#C6548B;} #summary{color:#555555; padding:0 0 10px; margin:0; border-bottom:1px solid #EAEAEA; font-size:16px; line-height:20px;} /* info bar */ .info-bar{background-color:#F6F6F6; color:#515151; font-size:12px; font-weight:bold; height:17px; line-height:16px; padding:2px 5px; margin:0 0 10px; border-bottom:1px solid #EAEAEA; } .info-bar #blogger{float: left;} .info-bar #blog-date{float: right;} /* ### Tools ### */ .tools-wrapper{margin-bottom:8px; clear:both; float:left; width:100%;} #main-image{margin:5px 0;} /* ### comment sorting controls ### */ .live-controls .sort-controls{background-color:#F6F6F6; color:#515151; font-size:12px; font-weight:bold; /*height:20px;*/ line-height:22px; padding:0 0 0 5px; margin:10px 0; border-bottom:1px solid #EAEAEA; border-top:1px solid #EAEAEA;} .live-controls .sort-controls ul {list-style: none; margin: 0} .live-controls p, .live-controls li{float:left; line-height:22px;padding: 0} .live-controls p{margin-bottom:0;} .live-controls ul{float:right;} .live-controls ul li {cursor:pointer; margin-left:5px; padding:0 5px;} .live-controls ul li.active{color:#FFF;} .lb_news .live-controls ul li.active{background-color:#C9252C;} .lb_business .live-controls ul li.active{background-color:#0099C2;} .lb_sport .live-controls ul li.active{background-color:#39B54A;} .lb_debate .live-controls ul li.active{background-color:#787657;} .lb_lifeandstyle .live-controls ul li.active{background-color:#F26722;} .lb_culture .live-controls ul li.active{background-color:#C6548B;} /*clearfix for the sort*/ .live-controls .sort-controls:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .live-controls .sort-controls { *display:inline-block;} /* Hides from IE-mac \*/ * html .live-controls .sort-controls {height: 1px;} .live-controls .sort-controls {display: block;} /* End hide from IE-mac */ /* email comments*/ #comment-control {float:left; display:inline-block; cursor:pointer; background-color:#f8f8f8; background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#dedede)); background-image:-moz-linear-gradient(top, #fff, #dedede); background-image:-o-linear-gradient(top, #fff, #dedede); background-image:-ms-linear-gradient(top, #fff, #dedede); background-image:linear-gradient(top, #fff, #dedede); border:#ccc solid 1px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; color:#333; text-shadow:0 1px 0 rgba(255,255,255,.5); height:18px; line-height:18px; font-size:12px; text-decoration:none; padding: 0 30px; margin-left:10px; } #comment-control .btn{background-image:url(../images/comment-btn-desktop.png); background-repeat:no-repeat; background-position:4px 1px; /*default to red*/ padding:0 5px 0 22px;} #comment-control .btn, #comment-control .btn.active, #comment-control .btn:active { border: none; background-color: transparent; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;} .lb_news #comment-control .btn {background-position:4px 1px;} .lb_business #comment-control .btn{background-position:4px -39px;} .lb_sport #comment-control .btn{background-position:4px -19px;} .lb_debate #comment-control .btn{background-position:4px -59px;} .lb_lifeandstyle #comment-control .btn{background-position:4px -79px;} /*red for now - need to make images*/ .lb_culture #comment-control .btn{background-position:4px -99px;} /*red for now - need to make images*/ /*comment form*/ #postcomment {clear:both; padding:10px; margin:10px; background-color:#f6f6f6; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;} #postcomment-form{margin:0 2em;} #postcomment-form input, #postcomment-form textarea{margin-bottom:.3em; font-family:Arial, Helvetica, sans-serif; font-size:100%; width:100%; display:block; position:relative; -moz-border-radius:1px; -webkit-border-radius:1px; border-radius:1px; border:#ccc solid 1px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 3px; } #postcomment-form div.button-container { width: 100%; float:left; margin-bottom:5px;} #postcomment-form:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } #postcomment-form { *display:inline-block;} /* Hides from IE-mac \*/ * html #postcomment-form {height: 1px;} #postcomment-form {display: block;} /* End hide from IE-mac */ #postcomment-form .button { cursor: pointer; background-color: #f8f8f8; background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dedede)); background-image: -moz-linear-gradient(top, #fff, #dedede); background-image: -o-linear-gradient(top, #fff, #dedede); background-image: -ms-linear-gradient(top, #fff, #dedede); background-image: linear-gradient(top, #fff, #dedede); -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; color: #333; text-shadow: 0 1px 0 rgba(255, 255, 255, .5); text-decoration: none; padding-top:2px; padding-bottom:2px; width: 45%; } #comment-post { float: right; } #comment-cancel { float: left; } #postcomment-form .error {color: #C9252C; font-size: 90%; margin-bottom:4px;} #postcomment-form .info {color: #666; font-size: 90%; margin-bottom: 4px;} #postcomment-form .confirmation {text-align: center; background-color: #DFF0D8; border: 1px solid #D6E9C6; color: #468847; font-size: 90%; padding: 2px; text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5); font-weight:bold; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; clear:both;} /*addthis*/ .addthis_toolbox{float:right; padding:0; margin-right:10px; } /*.addthis_toolbox .fb_hider{overflow-x:hiidden; overflow-y:visible !important; position:relative; width:50px !important; display:block; float:left; height:22px; set height higher to avoid mobile webkit cutting off bottom of Like btn }*/ .addthis_button_facebook_like{margin-right:10px;} .addthis_toolbox .addthis_button_compact span{background: url("../images/icon_share_colours.gif") 0 -112px no-repeat; height: 14px !important; line-height: 14px !important; margin-top: 2px;} /*default to black */ .addthis_toolbox .addthis_button_compact span span.at_a11y{display:none;} #torso .bt-container .social_article_share .addthis_button_compact span {background-color:transparent !important; background-size: auto auto !important;} .news .addthis_toolbox .addthis_button_compact span { background-position: 0 -14px; } .sport .addthis_toolbox .addthis_button_compact span { background-position: 0 -28px; } .debate .addthis_toolbox .addthis_button_compact span { background-position: 0 -56px; } .business .addthis_toolbox .addthis_button_compact span { background-position: 0 -42px; } .life-and-style .addthis_toolbox .addthis_button_compact span { background-position: 0 -70px; } .culture .addthis_toolbox .addthis_button_compact span { background-position: 0 -84px;} /* overwrite twitter widget styles */ .content .twt-border {max-width: 500px !important; min-width: 200px !important;} .content .twitter-tweet-rendered {clear:none !important; margin-top:4px !important;} /* ### Scoreboards ### */ #scoreboards{clear:both; margin: 0 0 10px; overflow: hidden;} .scoreboard{ border-top:3px solid #39B54A; border-bottom:1px solid #dedede; background-color:#f6f6f6; font-size:110%; padding:5px;} .scoreboard .score-header{margin:0 0 4px 0; font-style:italic;} /*divider should show when no Scoreboards */ #scoreboards-divider {clear:both; height:0; } .lb_news #scoreboards-divider{border-top:3px solid #C9252C;} .lb_business #scoreboards-divider{border-top:3px solid #0099C2;} .lb_sport #scoreboards-divider{border-top:3px solid #39B54A;} .lb_debate #scoreboards-divider{border-top:3px solid #787657;} .lb_lifeandstyle #scoreboards-divider{border-top:3px solid #F26722;} .lb_culture #scoreboards-divider{border-top:3px solid #C6548B;} /* Team A vs Team B */ .versus{} .versus .score-left, .versus .score-mid , .versus .score-right{float:left; width:33%; text-align:center;} .versus .score-left{} .versus .score-mid{line-height:2em; display:block; color:#666;} .versus .score-mid .v{background:#39B54A; color:#FFF; padding:0 4px; font-weight:bold; display:inline-block; line-height:1.5em;} .versus .score-right{ } .versus .team{font-weight:bold;} .versus .score-footer-even, .versus .score-footer-odd{clear:both; } .versus .score-footer-even span{width:49%; display:inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .versus .score-footer-even .score-time{ text-align:right; padding-right:5px;} .versus .score-footer-even .score-period{text-align:left; padding-left:5px; border-left:1px solid #ccc;} .versus .score-footer-odd span{width:99%; display:inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} .versus .score-footer-odd .score-text{ text-align:center } /* Leaderboard */ .leaderboard{} .leaderboard ol{margin:0; padding:0 0 0 2em} .leaderboard ol li.first{display:list-item !important; background-image:url(../images/arrows.png); background-position: 98% -32px; background-repeat:no-repeat; cursor:pointer;} .leaderboard ol li.first.open{background-position: 98% 0;} .leaderboard ol li{font-weight:bold; list-style-type:decimal !important; white-space:nowrap; } .leaderboard ol li.hidden {display:none; } .leaderboard ol li span{font-weight:normal; display:inline-block; padding-bottom:.3em; } .leaderboard .freetext{width:80%;} .leaderboard .rank{width:10%; } /* ### Blog area ### */ #liveblog-panel { font-family: Georgia, "Times New Roman", Times, serif; font-size:15px; line-height:1.5em; } ul#liveblog-panel{list-style:none; clear:both; padding:0; margin:0; max-width:100%; overflow:hidden;} ul#liveblog-panel li{height:auto !important; padding:10px 0; list-style:none; clear:both; border-top:1px dotted #999;} #updated{font-family:Arial, Helvetica, sans-serif; position:fixed; top:0; left:0; background-color: #EBEBEB; width:100% !important; text-align:center; color:#666; font-size:85%; font-weight:bold; height:28px; line-height:28px; cursor:pointer; text-shadow:1px 1px 0 rgba(255,255,255,1); -moz-box-shadow: 0px 3px 5px #888; -webkit-box-shadow: 0px 3px 5px #888; box-shadow: 0px 3px 5px #666; z-index:100; border:none !important; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; overflow:hidden;} #updated span{ font-family:Verdana, Geneva, sans-serif;} ul#liveblog-panel li .time{font-weight: bold; color:#333; width:15%; min-width:120px; max-width:140px; float:left; display:inline-block;} ul#liveblog-panel li .content, ul#liveblog-panel li .comment-image, ul#liveblog-panel li .video { width: 80%; display: inline-block; } /*clearfix for the comments*/ ul#liveblog-panel li:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } ul#liveblog-panel li { *display:inline-block;} /* Hides from IE-mac \*/ * html ul#liveblog-panel li {height: 1px;} ul#liveblog-panel li {display: block;} /* End hide from IE-mac */ ul#liveblog-panel li a {float:none; } ul#liveblog-panel li a:hover span { } /*images*/ ul#liveblog-panel li .comment-image .img-caption{color:#515151; margin-top:5px; font-family:Arial,Helvetica,sans-serif; font-size:13px; line-height:15px;} /* links for different sections*/ ul#liveblog-panel li a{color:#C9252C;} /*default to red if no section specified*/ .lb_news #liveblog-panel li a{color:#C9252C;} .lb_business #liveblog-panel li a{color:#0099C2;} .lb_sport #liveblog-panel li a{color:#39B54A;} .lb_debate #liveblog-panel li a{color:#787657;} .lb_lifeandstyle #liveblog-panel li a{color:#F26722;} .lb_culture #liveblog-panel li a{color:#C6548B;} /* liveblog-listing */ .listing-events span.section-name {font-weight: bold;} .listing-events span.lb_news{color:#C9252C;} .listing-events span.lb_business {color:#0099C2;} .listing-events span.lb_sport {color:#39B54A;} .listing-events span.lb_debate {color:#787657;} .listing-events span.lb_lifeandstyle{color:#F26722;} .listing-events span.lb_culture{color:#C6548B;} /* block quotes */ #liveblog-panel li.bq .quote-headline{margin-left:-2.7em;} #liveblog-panel li.bq .quote{color:#666; padding-left:2.5em; background-position:.2em .2em; background-repeat:no-repeat; min-height:20px; padding-top:2px; margin-left:-2.7em;} .lb_news #liveblog-panel li.bq .quote{background-image:url(../images/red-quotes.png);} .lb_business #liveblog-panel li.bq .quote{background-image:url(../images/blue-quotes-dskt.png);} .lb_sport #liveblog-panel li.bq .quote{background-image:url(../images/green-quotes-dskt.png);} .lb_debate #liveblog-panel li.bq .quote{background-image:url(../images/olive-quotes-dskt.png);} .lb_lifeandstyle #liveblog-panel li.bq .quote{background-image:url(../images/orange-quotes-dskt.png);} .lb_culture #liveblog-panel li.bq .quote{background-image:url(../images/pink-quotes-dskt.png);} /* system comment */ #liveblog-panel li.system-comment{font-weight:bold; color: #515151;} /* inline comments from users (sent via form) */ #liveblog-panel li.guest-comment .content{background:url(../images/comment-desktop.png) .1em .2em no-repeat; color:#666; clear:both; position:relative; padding-left:2.5em; margin-left:-2.5em;} #liveblog-panel li.guest-comment .commenter{font-weight:bold; display:block;} /* inline ad */ #liveblog-panel li.ad{background-color:#f6f6f6; padding-top: 0.2em;} #liveblog-panel li.ad .content{ width:100%;} #liveblog-panel p.adheader{font-family: "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif; font-size:75%; margin:0 auto; width:300px;padding:0;} #adimg {display:block; margin:auto; line-height:normal;} #liveblog-panel .author{font-weight:bold; display:block;} @media only screen and (max-width: 767px) { /* styles for mobile view only */ #liveblog-panel li.ad{background-color:#e5e5e5;} } @media only screen and (min-width:768px) and (max-width: 979px) { /* styles for tablet view only */ } @media only screen and (max-width: 979px) { /* styles for both mobile & tablet view */ #comment-control{display:block; float:none; text-align:center; margin:0 0 10px 0; padding:5px 0;} .addthis_toolbox{float:none; clear:both;} ul#liveblog-panel li .content, ul#liveblog-panel li .comment-image, ul#liveblog-panel li .video{width:auto; display:block; clear:both; } #liveblog-panel li.guest-comment .content{margin-left:0 !important;} #liveblog-panel li.bq .quote-headline, #liveblog-panel li.bq .quote{margin-left:0 !important;} } .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { *display:inline-block;} /* Hides from IE-mac \*/ * html .clearfix {height: 1px;} .clearfix {display: block;} /* End hide from IE-mac */