/**
* Global
*
* Included at all viewport sizes. This file imports all our common libraries
* and any module and page specific styling.
*/
/**
* Component listing.
*
* This listing is common across the standard and ie-specific stylesheets
* so abstract it
*/
/**
* Global Variables.
*
* Define any common variables here.
*/
/**
* Reusable colours
*/
/**
* Variables
*
* Generic variables that are required throughout the GEL codebase.
*/
/**
* Should we use placeholder classes or regular classes?
* Defaults to being noisy.
*/
/**
* Generic media query breakpoints, common useful breakpoints.
*
* These breakpoints specify the points at which the grid is likely to require
* reflowing. This allows us to declaratively define grid size transitions by
* adding multiple classes to an element.
*
* These grid sizings are based off the GEL responsive grid and font
* breakpoints. GEL's grid is 972px wide with 16px padding, giving a total page
* width of 1008px wide.
*
* bp1 | - | 399 | GEL Grid Group 1
* bp2 | 400 | 599 | GEL Grid Group 2
* bp3 | 600 | 1007 | GEL Grid Group 3
* bp4 | 1008 | - | GEL Grid Group 4
* In addition to these styles the bpw prefix is also defined within
* global_wide.scss which is applied for the media query min-width:600px;
* (using a media query on the tag) and for old desktop IE versions,
* which do not support media queries (by including the file in a conditional
* ---------------------------------------------------------------------------
* For customising content layouts based on grid sizing the following
* breakpoints are suggested:
*
* bpb1 | 320 | 599 | GEL Smartphone font group
* bpb2 | 480 | 599 | Landscape smartphones
* bpw | 600 | - | All wide displays
* bpw1 | 600 | 1007 | Synonym for bp3 for Tablets
* bpw2 | 770 | 1007 | Landscape 10" tablets
* bpe | 1008 | - | Synonym for bp4 for desktop devices
*
* 0 320 480 600 770 1008
* [unprefixed] |----------------------------------------------->
* bpb1 |------------|
* bpb2 |-----|
* bpw |---------------------->
* bpw1 |-------------------|
* bpw2 |--------|
* bpe |-->
*/
/* TODO Document in styleguide */
/*! normalize.css v1.1.0 | MIT License | git.io/normalize */
/* ==========================================================================
HTML5 display definitions
========================================================================== */
/**
* Correct `block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block; }
/**
* Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
*/
audio, canvas, video {
display: inline-block;
*display: inline;
*zoom: 1; }
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0; }
/**
* Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
* Known issue: no IE 6 support.
*/
[hidden] {
display: none; }
/* ==========================================================================
Base
========================================================================== */
/**
* 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
* `em` units.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
font-size: 100%;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-ms-text-size-adjust: 100%;
/* 2 */ }
/**
* Address `font-family` inconsistency between `textarea` and other form
* elements.
*/
html, button, input, select, textarea {
font-family: sans-serif; }
/**
* Address margins handled incorrectly in IE 6/7.
*/
body {
margin: 0; }
/* ==========================================================================
Links
========================================================================== */
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted; }
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active, a:hover {
outline: 0; }
/* ==========================================================================
Typography
========================================================================== */
/**
* Address font sizes and margins set differently in IE 6/7.
* Address font sizes within `section` and `article` in Firefox 4+, Safari 5,
* and Chrome.
*/
h1 {
font-size: 2em;
margin: 0.67em 0; }
h2 {
font-size: 1.5em;
margin: 0.83em 0; }
h3 {
font-size: 1.17em;
margin: 1em 0; }
h4 {
font-size: 1em;
margin: 1.33em 0; }
h5 {
font-size: 0.83em;
margin: 1.67em 0; }
h6 {
font-size: 0.67em;
margin: 2.33em 0; }
/**
* Address styling not present in IE 7/8/9, Safari 5, and Chrome.
*/
abbr[title] {
border-bottom: 1px dotted; }
/**
* Address style set to `bolder` in Firefox 3+, Safari 4/5, and Chrome.
*/
b, strong {
font-weight: bold; }
blockquote {
margin: 1em 40px; }
/**
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic; }
/**
* Address differences between Firefox and other browsers.
* Known issue: no IE 6/7 normalization.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0; }
/**
* Address styling not present in IE 6/7/8/9.
*/
mark {
background: #ff0;
color: #000; }
/**
* Address margins set differently in IE 6/7.
*/
p, pre {
margin: 1em 0; }
/**
* Correct font family set oddly in IE 6, Safari 4/5, and Chrome.
*/
code, kbd, pre, samp {
font-family: monospace, serif;
_font-family: 'courier new', monospace;
font-size: 1em; }
/**
* Improve readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre;
white-space: pre-wrap;
word-wrap: break-word; }
/**
* Address CSS quotes not supported in IE 6/7.
*/
q {
quotes: none; }
/**
* Address `quotes` property not supported in Safari 4.
*/
q:before, q:after {
content: '';
content: none; }
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%; }
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub, sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline; }
sup {
top: -0.5em; }
sub {
bottom: -0.25em; }
/* ==========================================================================
Lists
========================================================================== */
/**
* Address margins set differently in IE 6/7.
*/
dl, menu, ol, ul {
margin: 1em 0; }
dd {
margin: 0 0 0 40px; }
/**
* Address paddings set differently in IE 6/7.
*/
menu, ol, ul {
padding: 0 0 0 40px; }
/**
* Correct list images handled incorrectly in IE 7.
*/
nav ul, nav ol {
list-style: none;
list-style-image: none; }
/* ==========================================================================
Embedded content
========================================================================== */
/**
* 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
* 2. Improve image quality when scaled in IE 7.
*/
img {
border: 0;
/* 1 */
-ms-interpolation-mode: bicubic;
/* 2 */ }
/**
* Correct overflow displayed oddly in IE 9.
*/
svg:not(:root) {
overflow: hidden; }
/* ==========================================================================
Figures
========================================================================== */
/**
* Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
*/
figure {
margin: 0; }
/* ==========================================================================
Forms
========================================================================== */
/**
* Correct margin displayed oddly in IE 6/7.
*/
form {
margin: 0; }
/**
* Define consistent border, margin, and padding.
*/
fieldset {
border: 1px solid #c0c0c0;
margin: 0 2px;
padding: 0.35em 0.625em 0.75em; }
/**
* 1. Correct color not being inherited in IE 6/7/8/9.
* 2. Correct text not wrapping in Firefox 3.
* 3. Correct alignment displayed oddly in IE 6/7.
*/
legend {
border: 0;
/* 1 */
padding: 0;
white-space: normal;
/* 2 */
*margin-left: -7px;
/* 3 */ }
/**
* 1. Correct font size not being inherited in all browsers.
* 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
* and Chrome.
* 3. Improve appearance and consistency in all browsers.
*/
button, input, select, textarea {
font-size: 100%;
/* 1 */
margin: 0;
/* 2 */
vertical-align: baseline;
/* 3 */
*vertical-align: middle;
/* 3 */ }
/**
* Address Firefox 3+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button, input {
line-height: normal; }
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button, select {
text-transform: none; }
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
* 4. Remove inner spacing in IE 7 without affecting normal text inputs.
* Known issue: inner spacing remains in IE 6.
*/
button, html input[type="button"], input[type="reset"], input[type="submit"] {
-webkit-appearance: button;
/* 2 */
cursor: pointer;
/* 3 */
*overflow: visible;
/* 4 */ }
/**
* Re-set default cursor for disabled elements.
*/
button[disabled], html input[disabled] {
cursor: default; }
/**
* 1. Address box sizing set to content-box in IE 8/9.
* 2. Remove excess padding in IE 8/9.
* 3. Remove excess padding in IE 7.
* Known issue: excess padding remains in IE 6.
*/
input[type="checkbox"], input[type="radio"] {
box-sizing: border-box;
/* 1 */
padding: 0;
/* 2 */
*height: 13px;
/* 3 */
*width: 13px;
/* 3 */ }
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-appearance: textfield;
/* 1 */
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
/* 2 */
box-sizing: content-box; }
/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/**
* Remove inner padding and border in Firefox 3+.
*/
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;
padding: 0; }
/**
* 1. Remove default vertical scrollbar in IE 6/7/8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto;
/* 1 */
vertical-align: top;
/* 2 */ }
/* ==========================================================================
Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-collapse: collapse;
border-spacing: 0; }
/**
* Basic.
*
* GEL styling to be included as standard in the common stylesheet that always
* gets loaded.
*/
/**
* Variables
*
* Generic variables that are required throughout the GEL codebase.
*/
/**
* Should we use placeholder classes or regular classes?
* Defaults to being noisy.
*/
/**
* Generic media query breakpoints, common useful breakpoints.
*
* These breakpoints specify the points at which the grid is likely to require
* reflowing. This allows us to declaratively define grid size transitions by
* adding multiple classes to an element.
*
* These grid sizings are based off the GEL responsive grid and font
* breakpoints. GEL's grid is 972px wide with 16px padding, giving a total page
* width of 1008px wide.
*
* bp1 | - | 399 | GEL Grid Group 1
* bp2 | 400 | 599 | GEL Grid Group 2
* bp3 | 600 | 1007 | GEL Grid Group 3
* bp4 | 1008 | - | GEL Grid Group 4
* In addition to these styles the bpw prefix is also defined within
* global_wide.scss which is applied for the media query min-width:600px;
* (using a media query on the tag) and for old desktop IE versions,
* which do not support media queries (by including the file in a conditional
* ---------------------------------------------------------------------------
* For customising content layouts based on grid sizing the following
* breakpoints are suggested:
*
* bpb1 | 320 | 599 | GEL Smartphone font group
* bpb2 | 480 | 599 | Landscape smartphones
* bpw | 600 | - | All wide displays
* bpw1 | 600 | 1007 | Synonym for bp3 for Tablets
* bpw2 | 770 | 1007 | Landscape 10" tablets
* bpe | 1008 | - | Synonym for bp4 for desktop devices
*
* 0 320 480 600 770 1008
* [unprefixed] |----------------------------------------------->
* bpb1 |------------|
* bpb2 |-----|
* bpw |---------------------->
* bpw1 |-------------------|
* bpw2 |--------|
* bpe |-->
*/
/* TODO Document in styleguide */
/**
* Mixins
*
* Generic mixins that are required throughout the GEL codebase.
*
* $set: breakup block (basic, bpb1 or bpw)
*/
/**
* Typography
*
* Standard typography for headings and basic responsive font sizing.
*/
p, ul, ol, h1, h2, h3, h4, h5, h6 {
margin: 0; }
blockquote {
margin-top: 0;
margin-bottom: 0; }
/**
* Express font sizing in rems with a pixel fallback, when given the desired
* pixel value, and a base font size.
*
* As everything now has full-page zoom we aren't worried about losing the
* ability to increase text-size only in browsers that don't support REMs.
*/
/**
* Look up the vertical rhythm for a given typography block.
*
* Returns the current base line-height.
*/
/**
* Defines a selection of text sizing classes.
* These sizings are based on the current GEL Proposal, with the exception of
* omitting tablet sizing as having to use device detection is missing the point
*
* Also we have taken the opinion that the article text size is the one true
* base font size, and all other sizing should be nested underneath it. This is
* due to the additional complexity incurred when we use font sizing in EMs, as
* we would have to add additional declarations to solve the nesting issues.
*
* Greek lettering is used for heading styles. Currently the GEL only defines
* three heading styles.
*
* The SI prefix scale is used for non-heading font sizing.
*
* Arguments correspond to the text description in the GEL pdf as follows:
* $base: Article body text
* $alpha: Article title or section header
* $beta: Sub header
* $gamma: Strong headline title
* $delta: Slightly enhanced text (not in GEL guidelines)
* $centi: Index body text and image captions
* $milli: Time stamp
* $micro: Small header capitals
*/
hr {
margin: 0.53333333em 0; }
p, ul, ol, blockquote, table, h5, h6, .component, .bbccom_slot .bbccom_advert {
margin-bottom: 1.2em; }
.text-base {
font-size: 15px;
font-size: 0.9375rem;
line-height: 1.2;
letter-spacing: 0; }
.alpha, h1 {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.2;
letter-spacing: -0.03em;
margin-bottom: 0.6em; }
.alpha--keyline {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.2;
letter-spacing: -0.03em;
margin-bottom: 0.55em;
border-bottom: 0.05em solid; }
.beta, h2, .promotion--featured .promotion__titles {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.2;
letter-spacing: -0.03em;
margin-bottom: 0.6em; }
.beta--keyline {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.2;
letter-spacing: -0.03em;
margin-bottom: 0.55em;
border-bottom: 0.05em solid; }
.gamma, h3, .promotion--overlay .promotion__titles, .map__promo .promotion--grid .promotion__titles, .map__promo .promotion--grid-full .promotion__titles {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.11111111;
letter-spacing: 0;
margin-bottom: 0.88888889em; }
.gamma--keyline {
font-size: 18px;
font-size: 1.125rem;
line-height: 1.11111111;
letter-spacing: 0;
margin-bottom: 0.83333333em;
border-bottom: 0.05555556em solid; }
.delta, h4, .smp__message {
font-size: 15px;
font-size: 0.9375rem;
line-height: 1.33333333;
letter-spacing: 0;
margin-bottom: 1.2em; }
.delta--keyline {
font-size: 15px;
font-size: 0.9375rem;
line-height: 1.33333333;
letter-spacing: 0;
margin-bottom: 1em;
border-bottom: 0.06666667em solid; }
.centi {
font-size: 15px;
font-size: 0.9375rem;
line-height: 1.2;
letter-spacing: 0; }
.milli {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.14285714;
letter-spacing: 0; }
.micro {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.33333333;
letter-spacing: 0; }
/**
* Generate media-query scoped font sizings for each breakpoint name defined
*/
@media (min-width: 20em) and (max-width: 37.4375em) {
hr {
margin: 0.57142857em 0; }
p, ul, ol, blockquote, table, h5, h6, .component, .bbccom_slot .bbccom_advert {
margin-bottom: 1.28571429em; }
.text-base {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.28571429;
letter-spacing: 0; }
.alpha, h1 {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.16666667;
letter-spacing: -0.03em;
margin-bottom: 0.33333333em; }
.alpha--keyline {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.16666667;
letter-spacing: -0.03em;
margin-bottom: 0.29166667em;
border-bottom: 0.04166667em solid; }
.beta, h2, .promotion--featured .promotion__titles {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.2;
letter-spacing: -0.03em;
margin-bottom: 0.6em; }
.beta--keyline {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.2;
letter-spacing: -0.03em;
margin-bottom: 0.55em;
border-bottom: 0.05em solid; }
.gamma, h3, .promotion--overlay .promotion__titles, .map__promo .promotion--grid .promotion__titles, .map__promo .promotion--grid-full .promotion__titles {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.2;
letter-spacing: -0.03em;
margin-bottom: 0.6em; }
.gamma--keyline {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.2;
letter-spacing: -0.03em;
margin-bottom: 0.55em;
border-bottom: 0.05em solid; }
.delta, h4, .smp__message {
font-size: 16px;
font-size: 1rem;
line-height: 1.375;
letter-spacing: 0;
margin-bottom: 1.125em; }
.delta--keyline {
font-size: 16px;
font-size: 1rem;
line-height: 1.375;
letter-spacing: 0;
margin-bottom: 0.8125em;
border-bottom: 0.0625em solid; }
.centi {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.28571429;
letter-spacing: 0; }
.milli {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.14285714;
letter-spacing: 0; }
.micro {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.33333333;
letter-spacing: 0; } }
@media (min-width: 37.5em) {
hr {
margin: 0.57142857em 0; }
p, ul, ol, blockquote, table, h5, h6, .component, .bbccom_slot .bbccom_advert {
margin-bottom: 1.28571429em; }
.text-base {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.28571429;
letter-spacing: 0; }
.alpha, h1 {
font-size: 32px;
font-size: 2rem;
line-height: 1.125;
letter-spacing: -0.03em;
margin-bottom: 0.28125em; }
.alpha--keyline {
font-size: 32px;
font-size: 2rem;
line-height: 1.125;
letter-spacing: -0.03em;
margin-bottom: -0.03125em;
border-bottom: 0.03125em solid; }
.beta, h2, .promotion--featured .promotion__titles {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.16666667;
letter-spacing: -0.03em;
margin-bottom: 0.33333333em; }
.beta--keyline {
font-size: 24px;
font-size: 1.5rem;
line-height: 1.16666667;
letter-spacing: -0.03em;
margin-bottom: 0.29166667em;
border-bottom: 0.04166667em solid; }
.gamma, h3, .promotion--overlay .promotion__titles, .map__promo .promotion--grid .promotion__titles, .map__promo .promotion--grid-full .promotion__titles {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.2;
letter-spacing: -0.03em;
margin-bottom: 0.6em; }
.gamma--keyline {
font-size: 20px;
font-size: 1.25rem;
line-height: 1.2;
letter-spacing: -0.03em;
margin-bottom: 0.55em;
border-bottom: 0.05em solid; }
.delta, h4, .smp__message {
font-size: 16px;
font-size: 1rem;
line-height: 1.375;
letter-spacing: 0;
margin-bottom: 1.125em; }
.delta--keyline {
font-size: 16px;
font-size: 1rem;
line-height: 1.375;
letter-spacing: 0;
margin-bottom: 0.8125em;
border-bottom: 0.0625em solid; }
.centi {
font-size: 14px;
font-size: 0.875rem;
line-height: 1.28571429;
letter-spacing: 0; }
.milli {
font-size: 13px;
font-size: 0.8125rem;
line-height: 1.23076923;
letter-spacing: 0; }
.micro {
font-size: 12px;
font-size: 0.75rem;
line-height: 1.33333333;
letter-spacing: 0; } }
menu, ol, ul {
padding-left: 0;
list-style-position: inside; }
ul {
list-style-type: square; }
.micro {
text-transform: uppercase; }
.deemphasize {
font-weight: normal;
text-decoration: none; }
a.deemphasize, .programmes-page a.deemphasize {
font-weight: normal;
text-decoration: none; }
a.deemphasize:hover, a.deemphasize:active, a.deemphasize:focus, .programmes-page a.deemphasize:hover, .programmes-page a.deemphasize:active, .programmes-page a.deemphasize:focus {
text-decoration: none; }
.full-quote {
margin-left: 0;
margin-right: 0; }
/**
* Grid object.
*
* An IE 7 compatible implementation of a fluid grid with fixed gutter sizes.
* Use in conjunction with the width objects to set the sizing of your grid
* items.
*
* The .grid__inner div is required for IE7 compatibility. If we drop support
* for IE 7 then we can use box-sizing:border-box; and apply the padding
* directly to the .grid element, thus removing the need for the nested div.
*
* Sample usage:
*
*
*/
.grid-wrapper {
display: block;
margin-left: -8px;
list-style: none;
margin-bottom: 0;
letter-spacing: -0.31em;
*letter-spacing: normal;
/* reset IE < 8 */
*word-spacing: -0.43em;
/* IE < 8: collapse white-space between units */
text-rendering: optimizeSpeed;
text-align: left;
zoom: 1; }
.grid-wrapper:before, .grid-wrapper:after {
content: " ";
display: table; }
.grid-wrapper:after {
clear: both; }
.opera:-o-prefocus, .grid-wrapper {
word-spacing: -0.43em; }
.grid {
display: inline-block;
*display: inline;
zoom: 1;
vertical-align: top;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
width: 100%; }
.grid-float {
float: left;
width: 100%; }
.grid__inner {
padding-left: 8px;
letter-spacing: normal;
word-spacing: normal;
text-rendering: auto; }
.grid-wrapper--center {
text-align: center; }
.grid-wrapper--center > .grid {
text-align: left; }
.grid-wrapper--bothsides {
margin-left: -4px;
margin-right: -4px; }
.grid-wrapper--bothsides .grid__inner {
padding-left: 4px;
padding-right: 4px; }
.grid-wrapper--fauxcolumn {
overflow: hidden; }
.grid-wrapper--fauxcolumn .grid__inner {
margin-bottom: -50em;
padding-bottom: 50em; }
.fauxcolumn {
margin-bottom: -50em;
padding-bottom: 50em; }
.grid-gutter-r {
margin-right: 8px; }
.grid-gutter-l {
margin-left: 8px; }
@media (min-width: 37.5em) {
.grid-wrapper {
margin-left: -16px; }
.grid__inner {
padding-left: 16px; }
.grid-wrapper--bothsides {
margin-left: -8px;
margin-right: -8px; }
.grid-wrapper--bothsides .grid__inner {
padding-left: 8px;
padding-right: 8px; }
.grid-gutter-r {
margin-right: 16px; }
.grid-gutter-l {
margin-left: 16px; } }
.grid-wrapper--flush {
margin-right: 0;
margin-left: 0; }
.grid__inner--flush {
padding-right: 0;
padding-left: 0; }
.grid-wrapper--half {
margin-right: 0;
margin-left: -4px; }
.grid__inner--half {
padding-right: 0;
padding-left: 4px; }
@media (min-width: 20em) and (max-width: 37.4375em) {
.bpb1-grid-wrapper--flush {
margin-right: 0;
margin-left: 0; }
.bpb1-grid__inner--flush {
padding-right: 0;
padding-left: 0; }
.bpb1-grid-wrapper--half {
margin-right: 0;
margin-left: -4px; }
.bpb1-grid__inner--half {
padding-right: 0;
padding-left: 4px; } }
@media (min-width: 30em) and (max-width: 37.4375em) {
.bpb2-grid-wrapper--flush {
margin-right: 0;
margin-left: 0; }
.bpb2-grid__inner--flush {
padding-right: 0;
padding-left: 0; }
.bpb2-grid-wrapper--half {
margin-right: 0;
margin-left: -4px; }
.bpb2-grid__inner--half {
padding-right: 0;
padding-left: 4px; } }
@media (min-width: 37.5em) {
.bpw-grid-wrapper--flush {
margin-right: 0;
margin-left: 0; }
.bpw-grid__inner--flush {
padding-right: 0;
padding-left: 0; }
.bpw-grid-wrapper--half {
margin-right: 0;
margin-left: -8px; }
.bpw-grid__inner--half {
padding-right: 0;
padding-left: 8px; } }
@media (min-width: 37.5em) and (max-width: 62.9375em) {
.bpw1-grid-wrapper--flush {
margin-right: 0;
margin-left: 0; }
.bpw1-grid__inner--flush {
padding-right: 0;
padding-left: 0; }
.bpw1-grid-wrapper--half {
margin-right: 0;
margin-left: -8px; }
.bpw1-grid__inner--half {
padding-right: 0;
padding-left: 8px; } }
@media (min-width: 48.125em) and (max-width: 62.9375em) {
.bpw2-grid-wrapper--flush {
margin-right: 0;
margin-left: 0; }
.bpw2-grid__inner--flush {
padding-right: 0;
padding-left: 0; }
.bpw2-grid-wrapper--half {
margin-right: 0;
margin-left: -8px; }
.bpw2-grid__inner--half {
padding-right: 0;
padding-left: 8px; } }
@media (min-width: 63em) {
.bpe-grid-wrapper--flush {
margin-right: 0;
margin-left: 0; }
.bpe-grid__inner--flush {
padding-right: 0;
padding-left: 0; }
.bpe-grid-wrapper--half {
margin-right: 0;
margin-left: -8px; }
.bpe-grid__inner--half {
padding-right: 0;
padding-left: 8px; } }
/**
* Widths.
*
* Human readable width abstractions.
*
* Heavily inspired by:
* http://csswizardry.com/2013/02/responsive-grid-systems-a-solution/
*
* For sample usage see grid.
*/
/**
* Grid width sizing ratios, these have grid-agnostic names as they can also
* be used for items within a grid, such as on .media__img
*/
.one-whole {
width: 100%; }
.one-half {
width: 50%; }
.one-third {
width: 33.333%; }
.two-thirds {
width: 66.666%; }
.one-quarter {
width: 25%; }
.three-quarters {
width: 75%; }
.one-fifth {
width: 20%; }
.four-fifths {
width: 80%; }
.one-sixth {
width: 16.666%; }
.five-sixths {
width: 83.333%; }
.one-eighth {
width: 12.5%; }
.one-twelfth {
width: 8.333%; }
.five-twelfths {
width: 41.666%; }
.seven-twelfths {
width: 58.333%; }
.eleven-twelfths {
width: 91.666%; }
.three-sixteenths {
width: 18.75%; }
.five-twentyfourths {
width: 20.833%; }
.seven-twentyfourths {
width: 29.166%; }
.eleven-twentyfourths {
width: 45.83333333%; }
.thirteen-twentyfourths {
width: 54.16666667%; }
.nine-twentyfourths {
width: 37.5%; }
.fifteen-twentyfourths {
width: 62.5%; }
/**
* Generate media-query scoped grids for each breakpoint name defined
*/
@media (min-width: 20em) and (max-width: 37.4375em) {
.bpb1-one-whole {
width: 100%; }
.bpb1-one-half {
width: 50%; }
.bpb1-one-third {
width: 33.333%; }
.bpb1-two-thirds {
width: 66.666%; }
.bpb1-one-quarter {
width: 25%; }
.bpb1-three-quarters {
width: 75%; }
.bpb1-one-fifth {
width: 20%; }
.bpb1-four-fifths {
width: 80%; }
.bpb1-one-sixth {
width: 16.666%; }
.bpb1-five-sixths {
width: 83.333%; }
.bpb1-one-eighth {
width: 12.5%; }
.bpb1-one-twelfth {
width: 8.333%; }
.bpb1-five-twelfths {
width: 41.666%; }
.bpb1-seven-twelfths {
width: 58.333%; }
.bpb1-eleven-twelfths {
width: 91.666%; }
.bpb1-three-sixteenths {
width: 18.75%; }
.bpb1-five-twentyfourths {
width: 20.833%; }
.bpb1-seven-twentyfourths {
width: 29.166%; }
.bpb1-eleven-twentyfourths {
width: 45.83333333%; }
.bpb1-thirteen-twentyfourths {
width: 54.16666667%; }
.bpb1-nine-twentyfourths {
width: 37.5%; }
.bpb1-fifteen-twentyfourths {
width: 62.5%; } }
@media (min-width: 30em) and (max-width: 37.4375em) {
.bpb2-one-whole {
width: 100%; }
.bpb2-one-half {
width: 50%; }
.bpb2-one-third {
width: 33.333%; }
.bpb2-two-thirds {
width: 66.666%; }
.bpb2-one-quarter {
width: 25%; }
.bpb2-three-quarters {
width: 75%; }
.bpb2-one-fifth {
width: 20%; }
.bpb2-four-fifths {
width: 80%; }
.bpb2-one-sixth {
width: 16.666%; }
.bpb2-five-sixths {
width: 83.333%; }
.bpb2-one-eighth {
width: 12.5%; }
.bpb2-one-twelfth {
width: 8.333%; }
.bpb2-five-twelfths {
width: 41.666%; }
.bpb2-seven-twelfths {
width: 58.333%; }
.bpb2-eleven-twelfths {
width: 91.666%; }
.bpb2-three-sixteenths {
width: 18.75%; }
.bpb2-five-twentyfourths {
width: 20.833%; }
.bpb2-seven-twentyfourths {
width: 29.166%; }
.bpb2-eleven-twentyfourths {
width: 45.83333333%; }
.bpb2-thirteen-twentyfourths {
width: 54.16666667%; }
.bpb2-nine-twentyfourths {
width: 37.5%; }
.bpb2-fifteen-twentyfourths {
width: 62.5%; } }
@media (min-width: 37.5em) {
.bpw-one-whole {
width: 100%; }
.bpw-one-half {
width: 50%; }
.bpw-one-third {
width: 33.333%; }
.bpw-two-thirds {
width: 66.666%; }
.bpw-one-quarter {
width: 25%; }
.bpw-three-quarters {
width: 75%; }
.bpw-one-fifth {
width: 20%; }
.bpw-four-fifths {
width: 80%; }
.bpw-one-sixth {
width: 16.666%; }
.bpw-five-sixths {
width: 83.333%; }
.bpw-one-eighth {
width: 12.5%; }
.bpw-one-twelfth {
width: 8.333%; }
.bpw-five-twelfths {
width: 41.666%; }
.bpw-seven-twelfths {
width: 58.333%; }
.bpw-eleven-twelfths {
width: 91.666%; }
.bpw-three-sixteenths {
width: 18.75%; }
.bpw-five-twentyfourths {
width: 20.833%; }
.bpw-seven-twentyfourths {
width: 29.166%; }
.bpw-eleven-twentyfourths {
width: 45.83333333%; }
.bpw-thirteen-twentyfourths {
width: 54.16666667%; }
.bpw-nine-twentyfourths {
width: 37.5%; }
.bpw-fifteen-twentyfourths {
width: 62.5%; } }
@media (min-width: 37.5em) and (max-width: 62.9375em) {
.bpw1-one-whole {
width: 100%; }
.bpw1-one-half {
width: 50%; }
.bpw1-one-third {
width: 33.333%; }
.bpw1-two-thirds {
width: 66.666%; }
.bpw1-one-quarter {
width: 25%; }
.bpw1-three-quarters {
width: 75%; }
.bpw1-one-fifth {
width: 20%; }
.bpw1-four-fifths {
width: 80%; }
.bpw1-one-sixth {
width: 16.666%; }
.bpw1-five-sixths {
width: 83.333%; }
.bpw1-one-eighth {
width: 12.5%; }
.bpw1-one-twelfth {
width: 8.333%; }
.bpw1-five-twelfths {
width: 41.666%; }
.bpw1-seven-twelfths {
width: 58.333%; }
.bpw1-eleven-twelfths {
width: 91.666%; }
.bpw1-three-sixteenths {
width: 18.75%; }
.bpw1-five-twentyfourths {
width: 20.833%; }
.bpw1-seven-twentyfourths {
width: 29.166%; }
.bpw1-eleven-twentyfourths {
width: 45.83333333%; }
.bpw1-thirteen-twentyfourths {
width: 54.16666667%; }
.bpw1-nine-twentyfourths {
width: 37.5%; }
.bpw1-fifteen-twentyfourths {
width: 62.5%; } }
@media (min-width: 48.125em) and (max-width: 62.9375em) {
.bpw2-one-whole {
width: 100%; }
.bpw2-one-half {
width: 50%; }
.bpw2-one-third {
width: 33.333%; }
.bpw2-two-thirds {
width: 66.666%; }
.bpw2-one-quarter {
width: 25%; }
.bpw2-three-quarters {
width: 75%; }
.bpw2-one-fifth {
width: 20%; }
.bpw2-four-fifths {
width: 80%; }
.bpw2-one-sixth {
width: 16.666%; }
.bpw2-five-sixths {
width: 83.333%; }
.bpw2-one-eighth {
width: 12.5%; }
.bpw2-one-twelfth {
width: 8.333%; }
.bpw2-five-twelfths {
width: 41.666%; }
.bpw2-seven-twelfths {
width: 58.333%; }
.bpw2-eleven-twelfths {
width: 91.666%; }
.bpw2-three-sixteenths {
width: 18.75%; }
.bpw2-five-twentyfourths {
width: 20.833%; }
.bpw2-seven-twentyfourths {
width: 29.166%; }
.bpw2-eleven-twentyfourths {
width: 45.83333333%; }
.bpw2-thirteen-twentyfourths {
width: 54.16666667%; }
.bpw2-nine-twentyfourths {
width: 37.5%; }
.bpw2-fifteen-twentyfourths {
width: 62.5%; } }
@media (min-width: 63em) {
.bpe-one-whole {
width: 100%; }
.bpe-one-half {
width: 50%; }
.bpe-one-third {
width: 33.333%; }
.bpe-two-thirds {
width: 66.666%; }
.bpe-one-quarter {
width: 25%; }
.bpe-three-quarters {
width: 75%; }
.bpe-one-fifth {
width: 20%; }
.bpe-four-fifths {
width: 80%; }
.bpe-one-sixth {
width: 16.666%; }
.bpe-five-sixths {
width: 83.333%; }
.bpe-one-eighth {
width: 12.5%; }
.bpe-one-twelfth {
width: 8.333%; }
.bpe-five-twelfths {
width: 41.666%; }
.bpe-seven-twelfths {
width: 58.333%; }
.bpe-eleven-twelfths {
width: 91.666%; }
.bpe-three-sixteenths {
width: 18.75%; }
.bpe-five-twentyfourths {
width: 20.833%; }
.bpe-seven-twentyfourths {
width: 29.166%; }
.bpe-eleven-twentyfourths {
width: 45.83333333%; }
.bpe-thirteen-twentyfourths {
width: 54.16666667%; }
.bpe-nine-twentyfourths {
width: 37.5%; }
.bpe-fifteen-twentyfourths {
width: 62.5%; } }
/**
* Hidden.
*
* Helper classes to show or hide blocks based on the current breakpoint
*/
.hidden {
display: none !important; }
.visible {
display: inherit !important;
*display: block !important; }
.grid-visible {
display: inline-block !important;
*display: inline !important; }
/**
* Generate media-query scoped grids for each breakpoint name defined
*/
@media (min-width: 20em) and (max-width: 37.4375em) {
.bpb1-hidden {
display: none !important; }
.bpb1-visible {
display: inherit !important;
*display: block !important; }
.bpb1-grid-visible {
display: inline-block !important;
*display: inline !important; } }
@media (min-width: 30em) and (max-width: 37.4375em) {
.bpb2-hidden {
display: none !important; }
.bpb2-visible {
display: inherit !important;
*display: block !important; }
.bpb2-grid-visible {
display: inline-block !important;
*display: inline !important; } }
@media (min-width: 37.5em) {
.bpw-hidden {
display: none !important; }
.bpw-visible {
display: inherit !important;
*display: block !important; }
.bpw-grid-visible {
display: inline-block !important;
*display: inline !important; } }
@media (min-width: 37.5em) and (max-width: 62.9375em) {
.bpw1-hidden {
display: none !important; }
.bpw1-visible {
display: inherit !important;
*display: block !important; }
.bpw1-grid-visible {
display: inline-block !important;
*display: inline !important; } }
@media (min-width: 48.125em) and (max-width: 62.9375em) {
.bpw2-hidden {
display: none !important; }
.bpw2-visible {
display: inherit !important;
*display: block !important; }
.bpw2-grid-visible {
display: inline-block !important;
*display: inline !important; } }
@media (min-width: 63em) {
.bpe-hidden {
display: none !important; }
.bpe-visible {
display: inherit !important;
*display: block !important; }
.bpe-grid-visible {
display: inline-block !important;
*display: inline !important; } }
/**
* Generic Functions.
*
* Define any generic functions here.
*/
/**
* Generic Mixins.
*
* Define any generic mixins here. Don't forget to check if Inuit or Compass
* already provide a suitable mixin before writing, to save duplicating effort.
*/
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*
* This is a mixin rather than an extend because we need to toggle visibility
* within breakpoints which we would be unable to do as you can not call @extend
* on an element outside a @media block from within a @media block.
*/
/**
* Generic Extends.
*
* Define any generic extensions classes here. This file should only contain
* placeholder extensions, any extends that need a class associated with them
* should be defined with a placeholder in here then referenced within
* _extends_classes.scss.
*/
/**
* List-Unstyled.
*
* A list without any indentation, perfect for lists of block level items.
*/
.list-unstyled, .nav, .categories-navigation__options, .atoz-navigation {
padding-left: 0;
margin-bottom: 0;
margin-top: 0;
list-style: none; }
.list-unlabeled {
list-style: none; }
.list-unindented {
padding-left: 0;
list-style: none; }
/**
* Image Replacement.
*
* Replacing images with background images. We shall @extend this to
* avoid a proliferation of ir classes in our html.
*
* Taken directly from HTML5 Boilerplate:
* https://github.com/h5bp/html5-boilerplate/commit/adecc5da035d6d76b77e3fa95c6abde841073da2
*/
/**
* Extends Classes
*
* Add any extension utilities that need should have a class hook should be
* referenced in here.
*/
/**
* Micro clearfix, as per: nicolasgallagher.com/micro-clearfix-hack
* Extend the clearfix class with Sass to avoid the `.cf` class appearing over
* and over in your markup.
*/
.cf, .prog-layout__primary, .component--box--primary .component__header, .component--box--primary .component__body, .component--box--striped .superpromo__content, .prog-layout__secondary, .component--box--primary .component__footer, .component--box--secondary .component__header, .component--box--secondary .component__body, .component--box--secondary .component__footer, .media, .programme, .promotion, .island, .island--squashed, .island--vertical, .islet, .islet--vertical, .islet--horizontal, .nav, .component__body, .feature {
zoom: 1; }
.cf:before, .prog-layout__primary:before, .component--box--primary .component__header:before, .component--box--primary .component__body:before, .component--box--striped .superpromo__content:before, .prog-layout__secondary:before, .component--box--primary .component__footer:before, .component--box--secondary .component__header:before, .component--box--secondary .component__body:before, .component--box--secondary .component__footer:before, .media:before, .programme:before, .promotion:before, .island:before, .island--squashed:before, .island--vertical:before, .islet:before, .islet--vertical:before, .islet--horizontal:before, .nav:before, .component__body:before, .feature:before, .cf:after, .prog-layout__primary:after, .component--box--primary .component__header:after, .component--box--primary .component__body:after, .component--box--striped .superpromo__content:after, .prog-layout__secondary:after, .component--box--primary .component__footer:after, .component--box--secondary .component__header:after, .component--box--secondary .component__body:after, .component--box--secondary .component__footer:after, .media:after, .programme:after, .promotion:after, .island:after, .island--squashed:after, .island--vertical:after, .islet:after, .islet--vertical:after, .islet--horizontal:after, .nav:after, .component__body:after, .feature:after {
content: " ";
display: table; }
.cf:after, .prog-layout__primary:after, .component--box--primary .component__header:after, .component--box--primary .component__body:after, .component--box--striped .superpromo__content:after, .prog-layout__secondary:after, .component--box--primary .component__footer:after, .component--box--secondary .component__header:after, .component--box--secondary .component__body:after, .component--box--secondary .component__footer:after, .media:after, .programme:after, .promotion:after, .island:after, .island--squashed:after, .island--vertical:after, .islet:after, .islet--vertical:after, .islet--horizontal:after, .nav:after, .component__body:after, .feature:after {
clear: both; }
.inline {
display: inline; }
.list-spaced li {
margin-bottom: 4px; }
.list-lined li, .list-lined__item {
border-bottom-style: solid;
border-bottom-width: 1px; }
.visually-hidden, .context__item:first-child {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
.undo-visually-hidden {
position: static;
clip: auto;
height: auto;
width: auto;
overflow: auto; }
.disguised-button {
background: transparent;
border: none;
padding: 0;
margin: 0; }
.text--left {
text-align: left; }
.text--right {
text-align: right; }
.text--center {
text-align: center; }
.text--prose p, .text--prose ul, .text--prose ol, .text--prose h2, .text--prose h3, .text--prose h4, .text--prose h5, .text--prose h6 {
max-width: 752px; }
.text--prose p:last-child, .text--prose ul:last-child, .text--prose ol:last-child, .text--prose h2:last-child, .text--prose h3:last-child, .text--prose h4:last-child, .text--prose h5:last-child, .text--prose h6:last-child {
margin-bottom: 0; }
.text--prose h1 {
color: red !important; }
.text--prose ul, .text--prose ol {
overflow: hidden;
list-style-position: outside;
padding-left: 32px; }
.text--prose ul li, .text--prose ol li {
margin-bottom: 0.5em; }
.push--leading {
margin-left: 8px; }
.pull--right {
float: right; }
.pull--left {
float: left; }
.pull--right-spaced {
float: right;
margin-left: 8px; }
.pull--left-spaced {
float: left;
margin-right: 8px; }
.no-margin {
margin: 0; }
.no-margin-vertical {
margin-top: 0;
margin-bottom: 0; }
.nowrap {
white-space: nowrap; }
@media (min-width: 37.5em) {
.bpw-text--left {
text-align: left; }
.bpw-text--right {
text-align: right; }
.bpw-text--center {
text-align: center; }
.pull--right-spaced {
margin-left: 16px; }
.pull--left-spaced {
margin-right: 16px; }
.bpw-pull--right-spaced {
float: right;
margin-left: 16px; }
.bpw-pull--left-spaced {
float: left;
margin-right: 16px; }
.list-spaced li {
margin-bottom: 8px; }
.list-lined li, .list-lined__item {
border-bottom-style: solid;
border-bottom-width: 1px; } }
.text--subtle {
opacity: 0.8; }
.text--faded {
opacity: 0.6; }
.text--shout {
text-transform: uppercase; }
.text--no-ul:hover, .letters__page a:hover, .text--no-ul:active, .letters__page a:active, .text--no-ul:focus, .letters__page a:focus {
text-decoration: none !important; }
@-webkit-keyframes SPINNER {
0% {
-webkit-transform: rotate(0deg); }
100% {
-webkit-transform: rotate(360deg); } }
@keyframes SPINNER {
0% {
transform: rotate(0deg); }
100% {
transform: rotate(360deg); } }
.loading-spinner:before, .schedule-reload-container.lazy-module--loading--loader.lazy-module--loading:before, .schedule-reload-container.lazy-module--loading.lazy-module--loading--loader-transparent:before, .gallery-slideshow__imgholder:before {
content: ' ';
display: block;
float: left;
margin-right: 8px;
border-style: solid;
border-width: 2px;
border-left-color: transparent !important;
border-radius: 100%;
height: 16px;
width: 16px;
-webkit-animation: SPINNER 0.75s infinite linear;
animation: SPINNER 0.75s infinite linear; }
.loading-spinner--large::before, .schedule-reload-container.lazy-module--loading--loader.lazy-module--loading::before, .schedule-reload-container.lazy-module--loading.lazy-module--loading--loader-transparent::before, .gallery-slideshow__imgholder::before {
border-width: 6px;
border-radius: 50%;
height: 40px;
width: 40px;
border-left-color: rgba(255, 255, 255, 0.15) !important;
-webkit-animation: SPINNER 1.1s infinite linear;
animation: SPINNER 1.1s infinite linear; }
/**
* Main
*/
@-ms-viewport {
width: device-width; }
html {
overflow-y: scroll;
min-height: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }
abbr[title] {
border-bottom: none; }
.programmes-page a {
text-decoration: none;
font-weight: bold; }
.programmes-page a:hover, .programmes-page a:active, .programmes-page a:focus {
text-decoration: underline; }
.programmes-page {
padding-top: 8px;
padding-bottom: 8px; }
@media (min-width: 25em) and (max-width: 37.4375em) {
.programmes-page {
padding-top: 16px;
padding-bottom: 16px; } }
@media (min-width: 37.5em) {
.programmes-page {
padding-top: 16px;
padding-bottom: 16px; } }
.programmes-page--stripe {
padding-bottom: 0.1px; }
@media (min-width: 37.5em) {
.programmes-page--topboxed {
padding-top: 16px; } }
.programmes-page--inset, .inset {
padding-left: 8px;
padding-right: 8px; }
.programmes-page--flush {
padding-top: 0px;
padding-bottom: 0px; }
.programmes-page--clear {
background: transparent; }
.programmes-page--smallpush {
padding-top: 2px;
padding-bottom: 0px; }
.g-f-l {
max-width: 1008px;
margin-left: auto;
margin-right: auto; }
.g-o-l {
max-width: 976px;
margin-left: auto;
margin-right: auto; }
.g-c-l {
max-width: 752px;
margin-left: auto;
margin-right: auto; }
.context {
display: block;
font-size: 0.8em; }
.pull-out {
margin-left: -8px;
margin-right: -8px; }
@media (min-width: 37.5em) {
.programmes-page--inset, .inset {
padding-left: 16px;
padding-right: 16px; }
.pull-out {
margin-left: -16px;
margin-right: -16px; } }
.radio-windowsphone8 .favourites-module-wrapper, .radio-windowsphone8 .s-b-container, .radio-windowsphone8 .map__buttons {
display: none; }
/**
* Prog Layout
*
* These classes are used to control the layout of programmes pages, where b-g-p
* and b-g-m don't quite cover our use case.
*
* These classes allow us to create a page with multiple columns, in conjunction
* with the grid classes, whose columns are indented differently at given sizes.
* Unfortunately this has ended up meaning more wrapper classes to be properly
* bullet-proof :(
*/
.prog-layout {
max-width: 976px;
margin-left: auto;
margin-right: auto; }
.prog-layout__primary, .component--box--primary .component__header, .component--box--primary .component__body, .component--box--striped .superpromo__content, .prog-layout__secondary, .component--box--primary .component__footer, .component--box--secondary .component__header, .component--box--secondary .component__body, .component--box--secondary .component__footer {
display: block; }
.prog-layout__primary > :last-child, .component--box--primary .component__header > :last-child, .component--box--primary .component__body > :last-child, .component--box--striped .superpromo__content > :last-child, .prog-layout__secondary > :last-child, .component--box--primary .component__footer > :last-child, .component--box--secondary .component__header > :last-child, .component--box--secondary .component__body > :last-child, .component--box--secondary .component__footer > :last-child {
margin-bottom: 0; }
.prog-layout__primary, .component--box--primary .component__header, .component--box--primary .component__body, .component--box--striped .superpromo__content {
padding-left: 8px;
padding-right: 8px; }
.prog-layout__secondary, .component--box--primary .component__footer, .component--box--secondary .component__header, .component--box--secondary .component__body, .component--box--secondary .component__footer {
margin-left: 8px;
margin-right: 8px;
padding-left: 8px;
padding-right: 8px; }
.prog-box:after {
content: '';
display: table; }
@media (min-width: 25em) and (max-width: 37.4375em) {
.prog-layout__primary, .component--box--primary .component__header, .component--box--primary .component__body, .component--box--striped .superpromo__content {
padding-left: 16px;
padding-right: 16px; }
.prog-layout__secondary, .component--box--primary .component__footer, .component--box--secondary .component__header, .component--box--secondary .component__body, .component--box--secondary .component__footer {
margin-left: 16px;
margin-right: 16px;
padding-left: 16px;
padding-right: 16px; } }
@media (min-width: 37.5em) {
.prog-layout {
padding-left: 16px;
padding-right: 16px; }
.prog-layout__primary, .component--box--primary .component__header, .component--box--primary .component__body, .component--box--striped .superpromo__content {
padding-left: 16px;
padding-right: 16px; }
.prog-layout__secondary, .component--box--primary .component__footer, .component--box--secondary .component__header, .component--box--secondary .component__body, .component--box--secondary .component__footer {
margin-left: 0;
margin-right: 0;
padding-left: 16px;
padding-right: 16px; } }
/*------------------------------------*\
$MEDIA
\*------------------------------------*/
/**
* Place any image- and text-like content side-by-side, as per:
* stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
* E.g.:
*
*
* Demo: jsfiddle.net/inuitcss/cf4Qs
*
*/
.media, .programme, .promotion {
display: block; }
.media__img {
float: left;
margin-right: 8px; }
/**
* Reversed image location (right instead of left).
*/
.media__img--rev {
float: right;
margin-left: 8px;
margin-right: 0; }
.media__img img, .media__img--rev img {
display: block; }
.media__body, .programme__body, .promotion__body {
overflow: hidden; }
.media__body, .programme__body, .promotion__body, .media__body > :last-child, .programme__body > :last-child, .promotion__body > :last-child {
margin-bottom: 0; }
/**
* `.img`s in `.islet`s need an appropriately sized margin.
*/
.islet .media__img {
margin-right: 4px; }
.islet .media__img--rev {
margin-left: 4px; }
@media (min-width: 37.5em) {
.media__img {
margin-right: 16px; }
.media__img--rev {
margin-left: 16px;
margin-right: 0; } }
/**
* Island
*
* Simple, boxed off content.
*
* Copied from inuit.css and csswizardry.com/2011/10/the-island-object
*/
.island, .island--squashed, .island--vertical, .islet, .islet--vertical, .islet--horizontal {
display: block; }
.island > :last-child, .island--squashed > :last-child, .island--vertical > :last-child, .islet > :last-child, .islet--vertical > :last-child, .islet--horizontal > :last-child {
margin-bottom: 0; }
.island {
padding: 8px; }
.island--squashed {
padding: 8px; }
.island--vertical {
padding-top: 8px;
padding-bottom: 8px; }
.island--horizontal {
padding-left: 8px;
padding-right: 8px; }
.islet {
padding: 4px; }
.islet--vertical {
padding-top: 4px;
padding-bottom: 4px; }
.islet--horizontal {
padding-left: 4px;
padding-right: 4px; }
@media (min-width: 37.5em) {
.island, .bpw-island {
padding: 16px; }
.island--squashed, .bpw-island--squashed {
padding: 8px 16px; }
.island--vertical, .bpw-island--vertical {
padding-top: 16px;
padding-bottom: 16px; }
.island--horizontal, .bpw-island--horizontal {
padding-left: 16px;
padding-right: 16px; }
.islet, .bpw-islet {
padding: 8px; }
.islet--vertical, .bpw-islet--vertical {
padding-top: 8px;
padding-bottom: 8px; }
.islet--horizontal {
padding-left: 8px;
padding-right: 8px; } }
/**
* Link-Complex
*
* A link where only some of it's children should have underline styles
*/
.link-complex, .programme, .promotion, .link-complex:hover, .programme:hover, .promotion:hover, .link-complex:active, .programme:active, .promotion:active, .link-complex:focus, .programme:focus, .promotion:focus, .programmes-page a.link-complex, .programmes-page a.programme, .programmes-page a.promotion, .programmes-page a.link-complex:hover, .programmes-page a.programme:hover, .programmes-page a.promotion:hover, .programmes-page a.link-complex:active, .programmes-page a.programme:active, .programmes-page a.promotion:active, .programmes-page a.link-complex:focus, .programmes-page a.programme:focus, .programmes-page a.promotion:focus {
text-decoration: none; }
.link-complex:hover .link-complex__target, .programme:hover .link-complex__target, .promotion:hover .link-complex__target, .link-complex:hover .programme__titles a, .programme__titles .link-complex:hover a, .programme:hover .programme__titles a, .programme__titles .programme:hover a, .promotion:hover .programme__titles a, .programme__titles .promotion:hover a, .link-complex:hover .promotion__title a, .promotion__title .link-complex:hover a, .programme:hover .promotion__title a, .promotion__title .programme:hover a, .promotion:hover .promotion__title a, .promotion__title .promotion:hover a, .link-complex:active .link-complex__target, .programme:active .link-complex__target, .promotion:active .link-complex__target, .link-complex:active .programme__titles a, .programme__titles .link-complex:active a, .programme:active .programme__titles a, .programme__titles .programme:active a, .promotion:active .programme__titles a, .programme__titles .promotion:active a, .link-complex:active .promotion__title a, .promotion__title .link-complex:active a, .programme:active .promotion__title a, .promotion__title .programme:active a, .promotion:active .promotion__title a, .promotion__title .promotion:active a, .link-complex:focus .link-complex__target, .programme:focus .link-complex__target, .promotion:focus .link-complex__target, .link-complex:focus .programme__titles a, .programme__titles .link-complex:focus a, .programme:focus .programme__titles a, .programme__titles .programme:focus a, .promotion:focus .programme__titles a, .programme__titles .promotion:focus a, .link-complex:focus .promotion__title a, .promotion__title .link-complex:focus a, .programme:focus .promotion__title a, .promotion__title .programme:focus a, .promotion:focus .promotion__title a, .promotion__title .promotion:focus a, .programmes-page a.link-complex:hover .link-complex__target, .programmes-page a.programme:hover .link-complex__target, .programmes-page a.promotion:hover .link-complex__target, .programmes-page a.link-complex:hover .programme__titles a, .programme__titles .programmes-page a.link-complex:hover a, .programmes-page a.programme:hover .programme__titles a, .programme__titles .programmes-page a.programme:hover a, .programmes-page a.promotion:hover .programme__titles a, .programme__titles .programmes-page a.promotion:hover a, .programmes-page a.link-complex:hover .promotion__title a, .promotion__title .programmes-page a.link-complex:hover a, .programmes-page a.programme:hover .promotion__title a, .promotion__title .programmes-page a.programme:hover a, .programmes-page a.promotion:hover .promotion__title a, .promotion__title .programmes-page a.promotion:hover a, .programmes-page a.link-complex:active .link-complex__target, .programmes-page a.programme:active .link-complex__target, .programmes-page a.promotion:active .link-complex__target, .programmes-page a.link-complex:active .programme__titles a, .programme__titles .programmes-page a.link-complex:active a, .programmes-page a.programme:active .programme__titles a, .programme__titles .programmes-page a.programme:active a, .programmes-page a.promotion:active .programme__titles a, .programme__titles .programmes-page a.promotion:active a, .programmes-page a.link-complex:active .promotion__title a, .promotion__title .programmes-page a.link-complex:active a, .programmes-page a.programme:active .promotion__title a, .promotion__title .programmes-page a.programme:active a, .programmes-page a.promotion:active .promotion__title a, .promotion__title .programmes-page a.promotion:active a, .programmes-page a.link-complex:focus .link-complex__target, .programmes-page a.programme:focus .link-complex__target, .programmes-page a.promotion:focus .link-complex__target, .programmes-page a.link-complex:focus .programme__titles a, .programme__titles .programmes-page a.link-complex:focus a, .programmes-page a.programme:focus .programme__titles a, .programme__titles .programmes-page a.programme:focus a, .programmes-page a.promotion:focus .programme__titles a, .programme__titles .programmes-page a.promotion:focus a, .programmes-page a.link-complex:focus .promotion__title a, .promotion__title .programmes-page a.link-complex:focus a, .programmes-page a.programme:focus .promotion__title a, .promotion__title .programmes-page a.programme:focus a, .programmes-page a.promotion:focus .promotion__title a, .promotion__title .programmes-page a.promotion:focus a {
text-decoration: underline; }
.link-complex--sub, .link-complex--sub:hover, .link-complex--sub:active, .link-complex--sub:focus, .programmes-page a.link-complex--sub, .programmes-page a.link-complex--sub:hover, .programmes-page a.link-complex--sub:active, .programmes-page a.link-complex--sub:focus {
text-decoration: none; }
.link-complex--sub:hover .link-complex--sub__target, .link-complex--sub:active .link-complex--sub__target, .link-complex--sub:focus .link-complex--sub__target, .programmes-page a.link-complex--sub:hover .link-complex--sub__target, .programmes-page a.link-complex--sub:active .link-complex--sub__target, .programmes-page a.link-complex--sub:focus .link-complex--sub__target {
text-decoration: underline; }
/**
* Nav
*
* A list of inline links.
*
* Copied from inuit.css and csswizardry.com/2011/09/the-nav-abstraction
*/
.nav > li {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1; }
.nav > li > a {
display: block; }
/**
* `.nav--banner` extends `.nav` and centres the list
*/
.nav--banner {
text-align: center; }
/**
* `.nav--stacked` extends `.nav` and throws the list into vertical mode
*/
.nav--stacked > li {
display: list-item; }
.nav--stacked > li > a {
display: block; }
/**
* Give nav links a big, blocky hit area. Extends `.nav`
*/
.nav--block {
line-height: 1;
letter-spacing: -0.31em;
word-spacing: -0.43em; }
.nav--block > li {
letter-spacing: normal;
word-spacing: normal; }
.nav--block > li > a {
padding: 4px; }
.nav--piped {
letter-spacing: -0.31em;
word-spacing: -0.43em; }
.nav--piped > li {
letter-spacing: normal;
word-spacing: normal;
margin-right: 8px;
padding-right: 8px;
border-right-width: 1px;
border-right-style: solid; }
.nav--piped > li > a {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1;
vertical-align: top; }
.nav--piped > li:last-child {
margin-right: 0;
padding-right: 0;
border-right: none; }
@media (min-width: 37.5em) {
.nav--piped > li {
margin-right: 16px;
padding-right: 16px; } }
/**
* Component
*
* A fundamental block on the page that changes its spacing dependent upon the
* current breakpoint.
*
* .component provides margin-bottom for spacing an item.
*
* .component--box creates an box with a heading and footer.
* .component--box--primary applies horizontal spacing to the box using the prog-layout__primary rules
* .component--box--secondary applies horizontal spacing to the box using the prog-layout__secondary rules
*/
.component--borderedbookends {
border-top-width: 1px;
border-top-style: solid;
border-bottom-width: 1px;
border-bottom-style: solid; }
.component--sibling {
border-left-style: solid;
border-left-width: 16px;
padding-left: 16px;
margin-top: 8px;
margin-bottom: 16px; }
.component--sibling .programme .programme__body {
margin-bottom: 0; }
@media (min-width: 37.5em) {
.component--box--primary .component__footer {
margin-left: 16px;
margin-right: 16px; } }
.component__header {
padding-bottom: 8px;
position: relative; }
.component__header h2, .component__header h3, .component__header p {
margin: 0; }
.component__header .stream__indicator-wrap {
position: absolute;
bottom: 1.175em;
right: 8px; }
.component__footer {
padding-top: 8px;
padding-bottom: 8px;
margin-top: 1px; }
.component--box .component__header {
padding-top: 8px; }
.component--box .component__body {
padding-top: 8px;
padding-bottom: 8px; }
.component--box .component__body:first-child {
padding-top: 8px; }
.component--box--striped .component__body {
padding-top: 8px; }
.component--box-flushbody .component__body, .component--box-flushbody .component__body:first-child {
padding: 0; }
.component--box-flushbody-vertical .component__body, .component--box-flushbody-vertical .component__body:first-child {
padding-top: 0;
padding-bottom: 0; }
.component__header > p:last-child, .component__header > ul:last-child, .component__header > ol:last-child, .component__body > p:last-child, .component__body > ul:last-child, .component__body > ol:last-child, .component__footer > p:last-child, .component__footer > ul:last-child, .component__footer > ol:last-child {
margin-bottom: 0; }
@media (min-width: 25em) and (max-width: 37.4375em) {
.component__header .stream__indicator-wrap {
right: 16px; }
.component--box--primary .highlight-box--list {
margin-left: 16px;
margin-right: 16px; }
.component--box--primary .highlight-box--list:hover, .component--box--primary .highlight-box--list:active, .component--box--primary .highlight-box--list:focus, .component--box--primary .highlight-box--list.highlight-box--active {
padding-left: 15px;
padding-right: 15px; }
.component--box--primary .highlight-box--list-borderless {
padding-left: 16px;
padding-right: 16px; }
.component--box--secondary .highlight-box--list {
margin-left: 8px;
margin-right: 8px; }
.component--box--secondary .highlight-box--list:hover, .component--box--secondary .highlight-box--list:active, .component--box--secondary .highlight-box--list:focus, .component--box--secondary .highlight-box--list.highlight-box--active {
padding-left: 7px;
padding-right: 7px; }
.component--box--secondary .highlight-box--list-borderless {
padding-left: 8px;
padding-right: 8px; } }
@media (min-width: 25em) and (max-width: 37.5em) {
.component--box--primary .bpb1-highlight-box--grid, .component--box--secondary .bpb1-highlight-box--grid {
margin: 0 0 16px 0;
padding: 0 0; }
.component--box--primary .bpb1-highlight-box--grid:hover, .component--box--primary .bpb1-highlight-box--grid:active, .component--box--primary .bpb1-highlight-box--grid:focus, .component--box--primary .bpb1-highlight-box--grid.highlight-box--active, .component--box--secondary .bpb1-highlight-box--grid:hover, .component--box--secondary .bpb1-highlight-box--grid:active, .component--box--secondary .bpb1-highlight-box--grid:focus, .component--box--secondary .bpb1-highlight-box--grid.highlight-box--active {
margin: 0 0 16px 0;
padding: 0; } }
@media (min-width: 30em) and (max-width: 37.5em) {
.component--box--primary .bpb2-highlight-box--grid, .component--box--secondary .bpb2-highlight-box--grid {
margin: 0 0 16px 0;
padding: 0 0; }
.component--box--primary .bpb2-highlight-box--grid:hover, .component--box--primary .bpb2-highlight-box--grid:active, .component--box--primary .bpb2-highlight-box--grid:focus, .component--box--primary .bpb2-highlight-box--grid.highlight-box--active, .component--box--secondary .bpb2-highlight-box--grid:hover, .component--box--secondary .bpb2-highlight-box--grid:active, .component--box--secondary .bpb2-highlight-box--grid:focus, .component--box--secondary .bpb2-highlight-box--grid.highlight-box--active {
margin: 0 0 16px 0;
padding: 0; } }
@media (min-width: 37.5em) {
.component--box--striped .component__body {
padding-top: 16px; }
.component--box--striped .component__footer {
margin-left: 0;
margin-right: 0; }
.component__header .stream__indicator-wrap {
right: 16px; }
.component--box-flushbody .component__body, .component--box-flushbody .component__body:first-child {
padding: 0; }
.component--box-flushbody .stream__indicator-wrap {
right: 16px; }
.component--box-flushbody-vertical .component__body, .component--box-flushbody-vertical .component__body:first-child {
padding-top: 0;
padding-bottom: 0; }
.component--sibling {
margin-top: 16px;
margin-bottom: 32px; } }
/**
* .programme
* A generic programme aggregation object with an image,
* availability, titles and synopsis
* Extends the media object
*/
.programme__img {
position: relative; }
.programme__img {
float: left;
margin-right: 8px;
margin-bottom: 0;
max-width: 148px;
overflow: hidden; }
.programme__img.push-one-twentyfourth {
max-width: 118px; }
.programme__img--nomax {
max-width: none; }
.programme__titles a {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1; }
.programme__title {
display: block;
margin-bottom: 0; }
.programme__img-box {
background: #CCC;
background: rgba(204, 204, 204, 0.5);
display: none;
visibility: hidden; }
.programme__overlay {
min-width: 100%;
display: block;
overflow: hidden;
position: relative; }
.programme__new {
text-transform: uppercase;
font-weight: bold;
text-align: left; }
.programme__overlay--live, .programme__overlay--available {
min-width: 92.85714286%; }
.programme__availability {
display: block; }
.programme__availability:hover .programme__icon, .programme__availability:active .programme__icon, .programme__availability:focus .programme__icon {
background: #262525;
filter: none;
color: #FFFFFF; }
.programme__overlay a.programme__availability:hover {
text-decoration: none; }
.programme__icon {
float: left;
margin-right: 1px;
display: block;
height: 20px;
width: 20px;
line-height: 20px;
font-size: 12px;
text-align: center; }
.programme__icon--translucent {
background-color: #262525;
background-color: rgba(38, 37, 37, 0.7);
color: #FFFFFF; }
.programme__icon--orphaned {
margin-left: 8px;
float: right; }
.programme__overlay-data {
display: none;
height: 24px;
max-width: 274px;
overflow: hidden; }
.programme__time-remaining {
font-weight: normal;
margin: 4px 8px 0 8px;
text-align: left;
line-height: 1; }
.programme__body {
max-width: 464px; }
.programme__subtitle {
display: block;
margin-top: 0;
font-weight: normal; }
.programme__titles {
margin: 0; }
.programme__synopsis, .programme__service, .programme__favourites, .programme__live, .programme__child-availability {
margin-top: 4px;
margin-bottom: 0px; }
.programme__broadcast-date {
margin-top: 16px;
margin-bottom: 0px; }
.programme__broadcast-date .timezone.timezone--date {
padding-right: 8px; }
.programme__synopsis {
display: none; }
.programme__service {
font-weight: bold; }
.programme__broadcast-date ~ .programme__service {
margin-top: 0; }
.programme__service .only, .programme__service .except {
font-weight: normal; }
.programme__child-availability a:hover, .programme__child-availability a:focus, .programme__child-availability a:active {
text-decoration: none; }
.programme__child-availability a:hover span, .programme__child-availability a:focus span, .programme__child-availability a:active span {
text-decoration: underline; }
.stream .programme, .stream .programme__body, .stream .programme__overlay {
-webkit-transition: opacity 0.3s ease-in, background-color 0.3s ease-in;
-moz-transition: opacity 0.3s ease-in, background-color 0.3s ease-in;
-o-transition: opacity 0.3s ease-in, background-color 0.3s ease-in;
transition: opacity 0.3s ease-in, background-color 0.3s ease-in;
opacity: 1; }
.stream:not(.touched):not(.stream--alwaysvisible) .stream__i_hidden .programme__body, .stream:not(.touched):not(.stream--alwaysvisible) .stream__i_hidden .programme__overlay {
opacity: 0; }
.stream:not(.touched):not(.stream--alwaysvisible) .stream__i_hidden .programme {
background-color: transparent; }
@media (min-width: 20em) and (max-width: 37.4375em) {
.programme__img-box {
display: block;
visibility: visible; }
.has-js .programme__img--hasimage .programme__overlay {
position: absolute;
bottom: 0;
left: 0; }
.has-js .programme__img--hasimage ~ .programme__new {
top: 0;
left: 0;
position: absolute;
padding: 0px 4px;
text-align: center; } }
@media (min-width: 30em) and (max-width: 37.4375em) {
.programme__icon {
height: 32px;
width: 32px;
line-height: 32px;
font-size: 16px; }
.programme__icon--orphaned {
top: -0.375em; } }
@media (min-width: 37.5em) {
.programme__img {
margin-right: 16px; }
.programme__img-box {
display: block;
visibility: visible; }
.programme__icon {
height: 40px;
width: 40px;
line-height: 40px;
font-size: 20px; }
.programme__icon--orphaned {
margin-left: 8px; }
/* Only to be set if a user has javascript enabled
And the object has an image */
.has-js .programme__img--hasimage .programme__overlay {
position: absolute;
bottom: 0;
left: 0; }
.has-js .programme__img--hasimage ~ .programme__new {
top: 0;
left: 0;
position: absolute;
padding: 0px 4px;
text-align: center; }
.programme__overlay-data {
height: 40px;
display: block; }
.programme__time-remaining {
margin: 9px 8px 0 8px;
font-size: 0.78571429em;
line-height: 1.1; }
.programme__synopsis {
display: block; } }
@media (min-width: 48.125em) and (max-width: 62.9375em) {
.programme__overlay--available {
min-width: 82.857143%; } }
@media (min-width: 63em) {
.programme__overlay--available {
min-width: 82.857143%; }
.programme__overlay--live {
min-width: 70.857%; } }
@media (min-width: 37.5em) and (max-width: 48.0625em) {
.programme__icon {
height: 32px;
width: 32px;
line-height: 32px;
font-size: 16px; }
.programme__icon--orphaned {
top: -0.375em;
margin-left: 8px; }
.programme__overlay-data {
height: 32px; }
.programme__time-remaining {
margin: 4px 8px 0 8px; } }
.programme--list .programme__img, .programme--list-featured .programme__img {
float: left;
margin-right: 8px;
margin-bottom: 0;
max-width: 224px;
overflow: hidden; }
.programme--list .programme__img--nomax, .programme--list-featured .programme__img--nomax {
max-width: none; }
.programme--list .programme__body, .programme--list-featured .programme__body {
margin-bottom: 0;
margin-left: 0;
margin-right: 0; }
.programme--list-featured .programme__body {
margin-top: 8px;
margin-bottom: 8px;
margin-right: 8px; }
.programme--list-featured .programme__service, .programme--list-featured .programme__child-availability {
margin-top: 16px;
margin-bottom: 0px; }
.programme--list-featured .programme__broadcast-date ~ .programme__service {
margin-top: 0; }
.programme--grid .programme__img {
float: none;
margin-right: 0;
max-width: none;
margin-bottom: 4px; }
.programme--grid .programme__body {
margin-bottom: 4px;
margin-left: 4px;
margin-right: 4px; }
.programme--grid .programme__body--flush {
margin-left: 0;
margin-right: 0; }
@media (min-width: 37.5em) {
.programme--list .programme__img, .programme--list-featured .programme__img {
margin-right: 16px; }
.programme--grid .programme__img {
margin-bottom: 8px; }
.programme--grid .programme__body {
margin-bottom: 8px;
margin-left: 8px;
margin-right: 8px; }
.programme--grid .programme__body--flush {
margin-left: 0;
margin-right: 0; } }
@media (min-width: 20em) and (max-width: 37.4375em) {
.bpb1-programme--list .programme__img, .bpb1-programme--list-featured .programme__img {
float: left;
margin-right: 8px;
margin-bottom: 0;
max-width: 224px;
overflow: hidden; }
.bpb1-programme--list .programme__img--nomax, .bpb1-programme--list-featured .programme__img--nomax {
max-width: none; }
.bpb1-programme--list .programme__body, .bpb1-programme--list-featured .programme__body {
margin-bottom: 0;
margin-left: 0;
margin-right: 0; }
.bpb1-programme--list-featured .programme__body {
margin-top: 8px;
margin-bottom: 8px;
margin-right: 8px; }
.bpb1-programme--list-featured .programme__service, .bpb1-programme--list-featured .programme__child-availability {
margin-top: 16px;
margin-bottom: 0px; }
.bpb1-programme--list-featured .programme__broadcast-date ~ .programme__service {
margin-top: 0; }
.bpb1-programme--grid .programme__img {
float: none;
margin-right: 0;
max-width: none;
margin-bottom: 4px; }
.bpb1-programme--grid .programme__body {
margin-bottom: 4px;
margin-left: 4px;
margin-right: 4px; }
.bpb1-programme--grid .programme__body--flush {
margin-left: 0;
margin-right: 0; } }
@media (min-width: 30em) and (max-width: 37.4375em) {
.bpb2-programme--list .programme__img, .bpb2-programme--list-featured .programme__img {
float: left;
margin-right: 8px;
margin-bottom: 0;
max-width: 224px;
overflow: hidden; }
.bpb2-programme--list .programme__img--nomax, .bpb2-programme--list-featured .programme__img--nomax {
max-width: none; }
.bpb2-programme--list .programme__body, .bpb2-programme--list-featured .programme__body {
margin-bottom: 0;
margin-left: 0;
margin-right: 0; }
.bpb2-programme--list-featured .programme__body {
margin-top: 8px;
margin-bottom: 8px;
margin-right: 8px; }
.bpb2-programme--list-featured .programme__service, .bpb2-programme--list-featured .programme__child-availability {
margin-top: 16px;
margin-bottom: 0px; }
.bpb2-programme--list-featured .programme__broadcast-date ~ .programme__service {
margin-top: 0; }
.bpb2-programme--grid .programme__img {
float: none;
margin-right: 0;
max-width: none;
margin-bottom: 4px; }
.bpb2-programme--grid .programme__body {
margin-bottom: 4px;
margin-left: 4px;
margin-right: 4px; }
.bpb2-programme--grid .programme__body--flush {
margin-left: 0;
margin-right: 0; } }
@media (min-width: 37.5em) {
.bpw-programme--list .programme__img, .bpw-programme--list-featured .programme__img {
float: left;
margin-right: 16px;
margin-bottom: 0;
max-width: 224px;
overflow: hidden; }
.bpw-programme--list .programme__img--nomax, .bpw-programme--list-featured .programme__img--nomax {
max-width: none; }
.bpw-programme--list .programme__body, .bpw-programme--list-featured .programme__body {
margin-bottom: 0;
margin-left: 0;
margin-right: 0; }
.bpw-programme--list-featured .programme__body {
margin-top: 16px;
margin-bottom: 16px;
margin-right: 16px; }
.bpw-programme--list-featured .programme__service, .bpw-programme--list-featured .programme__child-availability {
margin-top: 16px;
margin-bottom: 0px; }
.bpw-programme--list-featured .programme__broadcast-date ~ .programme__service {
margin-top: 0; }
.bpw-programme--grid .programme__img {
float: none;
margin-right: 0;
max-width: none;
margin-bottom: 8px; }
.bpw-programme--grid .programme__body {
margin-bottom: 8px;
margin-left: 8px;
margin-right: 8px; }
.bpw-programme--grid .programme__body--flush {
margin-left: 0;
margin-right: 0; } }
@media (min-width: 37.5em) and (max-width: 62.9375em) {
.bpw1-programme--list .programme__img, .bpw1-programme--list-featured .programme__img {
float: left;
margin-right: 16px;
margin-bottom: 0;
max-width: 224px;
overflow: hidden; }
.bpw1-programme--list .programme__img--nomax, .bpw1-programme--list-featured .programme__img--nomax {
max-width: none; }
.bpw1-programme--list .programme__body, .bpw1-programme--list-featured .programme__body {
margin-bottom: 0;
margin-left: 0;
margin-right: 0; }
.bpw1-programme--list-featured .programme__body {
margin-top: 16px;
margin-bottom: 16px;
margin-right: 16px; }
.bpw1-programme--list-featured .programme__service, .bpw1-programme--list-featured .programme__child-availability {
margin-top: 16px;
margin-bottom: 0px; }
.bpw1-programme--list-featured .programme__broadcast-date ~ .programme__service {
margin-top: 0; }
.bpw1-programme--grid .programme__img {
float: none;
margin-right: 0;
max-width: none;
margin-bottom: 8px; }
.bpw1-programme--grid .programme__body {
margin-bottom: 8px;
margin-left: 8px;
margin-right: 8px; }
.bpw1-programme--grid .programme__body--flush {
margin-left: 0;
margin-right: 0; } }
@media (min-width: 48.125em) and (max-width: 62.9375em) {
.bpw2-programme--list .programme__img, .bpw2-programme--list-featured .programme__img {
float: left;
margin-right: 16px;
margin-bottom: 0;
max-width: 224px;
overflow: hidden; }
.bpw2-programme--list .programme__img--nomax, .bpw2-programme--list-featured .programme__img--nomax {
max-width: none; }
.bpw2-programme--list .programme__body, .bpw2-programme--list-featured .programme__body {
margin-bottom: 0;
margin-left: 0;
margin-right: 0; }
.bpw2-programme--list-featured .programme__body {
margin-top: 16px;
margin-bottom: 16px;
margin-right: 16px; }
.bpw2-programme--list-featured .programme__service, .bpw2-programme--list-featured .programme__child-availability {
margin-top: 16px;
margin-bottom: 0px; }
.bpw2-programme--list-featured .programme__broadcast-date ~ .programme__service {
margin-top: 0; }
.bpw2-programme--grid .programme__img {
float: none;
margin-right: 0;
max-width: none;
margin-bottom: 8px; }
.bpw2-programme--grid .programme__body {
margin-bottom: 8px;
margin-left: 8px;
margin-right: 8px; }
.bpw2-programme--grid .programme__body--flush {
margin-left: 0;
margin-right: 0; } }
@media (min-width: 63em) {
.bpe-programme--list .programme__img, .bpe-programme--list-featured .programme__img {
float: left;
margin-right: 16px;
margin-bottom: 0;
max-width: 224px;
overflow: hidden; }
.bpe-programme--list .programme__img--nomax, .bpe-programme--list-featured .programme__img--nomax {
max-width: none; }
.bpe-programme--list .programme__body, .bpe-programme--list-featured .programme__body {
margin-bottom: 0;
margin-left: 0;
margin-right: 0; }
.bpe-programme--list-featured .programme__body {
margin-top: 16px;
margin-bottom: 16px;
margin-right: 16px; }
.bpe-programme--list-featured .programme__service, .bpe-programme--list-featured .programme__child-availability {
margin-top: 16px;
margin-bottom: 0px; }
.bpe-programme--list-featured .programme__broadcast-date ~ .programme__service {
margin-top: 0; }
.bpe-programme--grid .programme__img {
float: none;
margin-right: 0;
max-width: none;
margin-bottom: 8px; }
.bpe-programme--grid .programme__body {
margin-bottom: 8px;
margin-left: 8px;
margin-right: 8px; }
.bpe-programme--grid .programme__body--flush {
margin-left: 0;
margin-right: 0; } }
/**
* Broadcast list
*/
.broadcast--hide-exceptions .only, .broadcast--hide-exceptions .except {
display: none; }
.broadcast--grid .programme__img {
float: none;
margin-bottom: 8px; }
.broadcast--grid .programme__icon--orphaned {
margin: 0;
position: static;
float: right; }
.broadcast--grid .broadcast__info {
margin-left: -0.25em; }
.broadcast--grid .broadcast__time, .broadcast--grid .broadcast__live {
margin-left: 0.25em;
display: inline-block;
vertical-align: middle; }
.broadcast--grid .broadcast__live {
margin-bottom: 0.25em; }
.broadcast__time {
margin-bottom: 0.25em;
font-weight: normal;
opacity: 0.6; }
.broadcast__time .timezone--note {
display: block;
font-size: 0.64em; }
.broadcast__live {
text-transform: uppercase;
text-align: center;
display: inline-block;
*display: inline;
zoom: 1;
width: auto;
font-weight: bold;
padding: 4px; }
@media (min-width: 37.5em) {
.broadcast--grid .broadcast--live {
margin-top: -4px; }
.broadcast__live {
padding-left: 8px;
padding-right: 8px; } }
/**
* .promotion
* A promotion aggregation object with an image,
* title, synopsis and related links
* Extends the media object
*/
.promotion--featured .promotion__titles {
margin-bottom: 0; }
.promotion--overlay .promotion__titles {
margin-bottom: 0; }
.promotion__img {
display: none;
position: relative;
float: left;
margin-right: 8px;
margin-bottom: 0;
max-width: 192px;
overflow: hidden; }
.promotion__img--nomax {
max-width: none; }
.promotion__body {
max-width: 464px; }
.promotion__title {
display: block;
margin-bottom: 0; }
.promotion__titles {
margin: 0; }
.promotion__synopsis, .promotion__related-links {
margin-top: 4px;
margin-bottom: 0px; }
.promotion--overlay .promotion__img {
max-width: none;
float: none;
margin: 0; }
.promotion--overlay .promotion__body {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 8px;
max-width: none; }
@media (min-width: 20em) and (max-width: 37.4375em) {
.promotion__img {
display: block; } }
@media (min-width: 37.5em) {
.promotion__img {
display: block;
margin-right: 16px; }
.bpw-promotion--inset {
overflow: hidden; }
.bpw-promotion--inset .promotion__img {
width: 55%;
max-width: none;
margin-right: -10%; }
.bpw-promotion--inset .promotion__body, .bpw-promotion--inset .promotion__body__inner {
padding-bottom: 200px;
margin-bottom: -200px; }
.bpw-promotion--inset .promotion__body {
position: relative;
width: 55%;
margin-top: 6%; }
.bpw-promotion--inset .promotion__body__inner {
padding-top: 8px;
padding-left: 8px; }
.bpw-promotion--inset .promotion__titles {
font-size: 24px;
line-height: 28px; }
.promotion--overlay .promotion__titles {
font-size: 20px;
line-height: 24px; } }
.promotion--list .promotion__img, .promotion--list-featured .promotion__img {
float: left;
margin-right: 8px;
margin-bottom: 0;
max-width: 224px;
overflow: hidden; }
.promotion--list .promotion__img--nomax, .promotion--list-featured .promotion__img--nomax {
max-width: none; }
.promotion--list .promotion__body, .promotion--list-featured .promotion__body {
margin-bottom: 0;
margin-left: 0;
margin-right: 0; }
.promotion--list-featured .promotion__body {
margin-top: 8px;
margin-bottom: 8px;
margin-right: 8px; }
.promotion--grid .promotion__img, .promotion--grid-full .promotion__img {
float: none;
margin-right: 0;
max-width: none;
margin-bottom: 4px; }
.promotion--grid .promotion__body, .promotion--grid-full .promotion__body {
margin-bottom: 4px;
margin-left: 4px;
margin-right: 4px; }
.promotion--grid .promotion__body--flush, .promotion--grid-full .promotion__body--flush {
margin-left: 0;
margin-right: 0; }
.promotion--grid-full .promotion__img {
margin-bottom: 8px; }
.promotion--grid-full .promotion__body {
margin-bottom: 8px;
margin-left: 8px;
margin-right: 8px; }
@media (min-width: 37.5em) {
.promotion--list .promotion__img, .promotion--list-featured .promotion__img {
margin-right: 16px; }
.promotion--grid .promotion__img, .promotion--grid-full .promotion__img {
margin-bottom: 8px; }
.promotion--grid .promotion__body, .promotion--grid-full .promotion__body {
margin-bottom: 8px;
margin-left: 8px;
margin-right: 8px; }
.promotion--grid .promotion__body--flush, .promotion--grid-full .promotion__body--flush {
margin-left: 0;
margin-right: 0; } }
@media (min-width: 20em) and (max-width: 37.4375em) {
.bpb1-promotion--list .promotion__img, .bpb1-promotion--list-featured .promotion__img {
float: left;
margin-right: 8px;
margin-bottom: 0;
max-width: 224px;
overflow: hidden; }
.bpb1-promotion--list .promotion__img--nomax, .bpb1-promotion--list-featured .promotion__img--nomax {
max-width: none; }
.bpb1-promotion--list .promotion__body, .bpb1-promotion--list-featured .promotion__body {
margin-bottom: 0;
margin-left: 0;
margin-right: 0; }
.bpb1-promotion--list-featured .promotion__body {
margin-top: 8px;
margin-bottom: 8px;
margin-right: 8px; }
.bpb1-promotion--grid .promotion__img, .bpb1-promotion--grid-full .promotion__img {
float: none;
margin-right: 0;
max-width: none;
margin-bottom: 4px; }
.bpb1-promotion--grid .promotion__body, .bpb1-promotion--grid-full .promotion__body {
margin-bottom: 4px;
margin-left: 4px;
margin-right: 4px; }
.bpb1-promotion--grid .promotion__body--flush, .bpb1-promotion--grid-full .promotion__body--flush {
margin-left: 0;
margin-right: 0; }
.bpb1-promotion--grid-full .promotion__img {
margin-bottom: 8px; }
.bpb1-promotion--grid-full .promotion__body {
margin-bottom: 8px;
margin-left: 8px;
margin-right: 8px; } }
@media (min-width: 30em) and (max-width: 37.4375em) {
.bpb2-promotion--list .promotion__img, .bpb2-promotion--list-featured .promotion__img {
float: left;
margin-right: 8px;
margin-bottom: 0;
max-width: 224px;
overflow: hidden; }
.bpb2-promotion--list .promotion__img--nomax, .bpb2-promotion--list-featured .promotion__img--nomax {
max-width: none; }
.bpb2-promotion--list .promotion__body, .bpb2-promotion--list-featured .promotion__body {
margin-bottom: 0;
margin-left: 0;
margin-right: 0; }
.bpb2-promotion--list-featured .promotion__body {
margin-top: 8px;
margin-bottom: 8px;
margin-right: 8px; }
.bpb2-promotion--grid .promotion__img, .bpb2-promotion--grid-full .promotion__img {
float: none;
margin-right: 0;
max-width: none;
margin-bottom: 4px; }
.bpb2-promotion--grid .promotion__body, .bpb2-promotion--grid-full .promotion__body {
margin-bottom: 4px;
margin-left: 4px;
margin-right: 4px; }
.bpb2-promotion--grid .promotion__body--flush, .bpb2-promotion--grid-full .promotion__body--flush {
margin-left: 0;
margin-right: 0; }
.bpb2-promotion--grid-full .promotion__img {
margin-bottom: 8px; }
.bpb2-promotion--grid-full .promotion__body {
margin-bottom: 8px;
margin-left: 8px;
margin-right: 8px; } }
@media (min-width: 37.5em) {
.bpw-promotion--list .promotion__img, .bpw-promotion--list-featured .promotion__img {
float: left;
margin-right: 16px;
margin-bottom: 0;
max-width: 224px;
overflow: hidden; }
.bpw-promotion--list .promotion__img--nomax, .bpw-promotion--list-featured .promotion__img--nomax {
max-width: none; }
.bpw-promotion--list .promotion__body, .bpw-promotion--list-featured .promotion__body {
margin-bottom: 0;
margin-left: 0;
margin-right: 0; }
.bpw-promotion--list-featured .promotion__body {
margin-top: 16px;
margin-bottom: 16px;
margin-right: 16px; }
.bpw-promotion--grid .promotion__img, .bpw-promotion--grid-full .promotion__img {
float: none;
margin-right: 0;
max-width: none;
margin-bottom: 8px; }
.bpw-promotion--grid .promotion__body, .bpw-promotion--grid-full .promotion__body {
margin-bottom: 8px;
margin-left: 8px;
margin-right: 8px; }
.bpw-promotion--grid .promotion__body--flush, .bpw-promotion--grid-full .promotion__body--flush {
margin-left: 0;
margin-right: 0; }
.bpw-promotion--grid-full .promotion__img {
margin-bottom: 16px; }
.bpw-promotion--grid-full .promotion__body {
margin-bottom: 16px;
margin-left: 16px;
margin-right: 16px; } }
@media (min-width: 37.5em) and (max-width: 62.9375em) {
.bpw1-promotion--list .promotion__img, .bpw1-promotion--list-featured .promotion__img {
float: left;
margin-right: 16px;
margin-bottom: 0;
max-width: 224px;
overflow: hidden; }
.bpw1-promotion--list .promotion__img--nomax, .bpw1-promotion--list-featured .promotion__img--nomax {
max-width: none; }
.bpw1-promotion--list .promotion__body, .bpw1-promotion--list-featured .promotion__body {
margin-bottom: 0;
margin-left: 0;
margin-right: 0; }
.bpw1-promotion--list-featured .promotion__body {
margin-top: 16px;
margin-bottom: 16px;
margin-right: 16px; }
.bpw1-promotion--grid .promotion__img, .bpw1-promotion--grid-full .promotion__img {
float: none;
margin-right: 0;
max-width: none;
margin-bottom: 8px; }
.bpw1-promotion--grid .promotion__body, .bpw1-promotion--grid-full .promotion__body {
margin-bottom: 8px;
margin-left: 8px;
margin-right: 8px; }
.bpw1-promotion--grid .promotion__body--flush, .bpw1-promotion--grid-full .promotion__body--flush {
margin-left: 0;
margin-right: 0; }
.bpw1-promotion--grid-full .promotion__img {
margin-bottom: 16px; }
.bpw1-promotion--grid-full .promotion__body {
margin-bottom: 16px;
margin-left: 16px;
margin-right: 16px; } }
@media (min-width: 48.125em) and (max-width: 62.9375em) {
.bpw2-promotion--list .promotion__img, .bpw2-promotion--list-featured .promotion__img {
float: left;
margin-right: 16px;
margin-bottom: 0;
max-width: 224px;
overflow: hidden; }
.bpw2-promotion--list .promotion__img--nomax, .bpw2-promotion--list-featured .promotion__img--nomax {
max-width: none; }
.bpw2-promotion--list .promotion__body, .bpw2-promotion--list-featured .promotion__body {
margin-bottom: 0;
margin-left: 0;
margin-right: 0; }
.bpw2-promotion--list-featured .promotion__body {
margin-top: 16px;
margin-bottom: 16px;
margin-right: 16px; }
.bpw2-promotion--grid .promotion__img, .bpw2-promotion--grid-full .promotion__img {
float: none;
margin-right: 0;
max-width: none;
margin-bottom: 8px; }
.bpw2-promotion--grid .promotion__body, .bpw2-promotion--grid-full .promotion__body {
margin-bottom: 8px;
margin-left: 8px;
margin-right: 8px; }
.bpw2-promotion--grid .promotion__body--flush, .bpw2-promotion--grid-full .promotion__body--flush {
margin-left: 0;
margin-right: 0; }
.bpw2-promotion--grid-full .promotion__img {
margin-bottom: 16px; }
.bpw2-promotion--grid-full .promotion__body {
margin-bottom: 16px;
margin-left: 16px;
margin-right: 16px; } }
@media (min-width: 63em) {
.bpe-promotion--list .promotion__img, .bpe-promotion--list-featured .promotion__img {
float: left;
margin-right: 16px;
margin-bottom: 0;
max-width: 224px;
overflow: hidden; }
.bpe-promotion--list .promotion__img--nomax, .bpe-promotion--list-featured .promotion__img--nomax {
max-width: none; }
.bpe-promotion--list .promotion__body, .bpe-promotion--list-featured .promotion__body {
margin-bottom: 0;
margin-left: 0;
margin-right: 0; }
.bpe-promotion--list-featured .promotion__body {
margin-top: 16px;
margin-bottom: 16px;
margin-right: 16px; }
.bpe-promotion--grid .promotion__img, .bpe-promotion--grid-full .promotion__img {
float: none;
margin-right: 0;
max-width: none;
margin-bottom: 8px; }
.bpe-promotion--grid .promotion__body, .bpe-promotion--grid-full .promotion__body {
margin-bottom: 8px;
margin-left: 8px;
margin-right: 8px; }
.bpe-promotion--grid .promotion__body--flush, .bpe-promotion--grid-full .promotion__body--flush {
margin-left: 0;
margin-right: 0; }
.bpe-promotion--grid-full .promotion__img {
margin-bottom: 16px; }
.bpe-promotion--grid-full .promotion__body {
margin-bottom: 16px;
margin-left: 16px;
margin-right: 16px; } }
/**
* Box Link
*
* Used to create CSS columns
. See /programmes/styleguide/columns
*/
.columns {
/* no column count for the default as it is one column */
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid;
-webkit-column-gap: 16px;
-moz-column-gap: 16px;
column-gap: 16px; }
.columns li, .columns a {
-webkit-column-break-inside: avoid;
-moz-column-break-inside: avoid;
column-break-inside: avoid; }
.columns--bordered {
-webkit-column-rule-width: 1px;
-moz-column-rule-width: 1px;
column-rule-width: 1px;
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
-webkit-column-gap: 32px;
-moz-column-gap: 32px;
column-gap: 32px; }
.columns--1 {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1; }
.columns--2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2; }
.columns--3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3; }
.columns--4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4; }
@media (min-width: 20em) and (max-width: 37.4375em) {
.bpb1-columns--1 {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1; }
.bpb1-columns--2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2; }
.bpb1-columns--3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3; }
.bpb1-columns--4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4; } }
@media (min-width: 30em) and (max-width: 37.4375em) {
.bpb2-columns--1 {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1; }
.bpb2-columns--2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2; }
.bpb2-columns--3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3; }
.bpb2-columns--4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4; } }
@media (min-width: 37.5em) {
.bpw-columns--1 {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1; }
.bpw-columns--2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2; }
.bpw-columns--3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3; }
.bpw-columns--4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4; } }
@media (min-width: 37.5em) and (max-width: 62.9375em) {
.bpw1-columns--1 {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1; }
.bpw1-columns--2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2; }
.bpw1-columns--3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3; }
.bpw1-columns--4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4; } }
@media (min-width: 48.125em) and (max-width: 62.9375em) {
.bpw2-columns--1 {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1; }
.bpw2-columns--2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2; }
.bpw2-columns--3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3; }
.bpw2-columns--4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4; } }
@media (min-width: 63em) {
.bpe-columns--1 {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1; }
.bpe-columns--2 {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2; }
.bpe-columns--3 {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3; }
.bpe-columns--4 {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4; } }
/**
* Fixedsticky
*
* For faking position:sticky when combined with the JS from
* https://github.com/filamentgroup/fixed-sticky
*
* Be sure to give whatever element has .fixedsticky a top property so that
* knows how far it should be offset from the viewport, otherwise the JS won't
* trigger.
*/
.fixedsticky {
position: -webkit-sticky;
position: -moz-sticky;
position: -ms-sticky;
position: -o-sticky;
position: sticky; }
.fixed-supported .fixedsticky-off {
position: static; }
.fixed-supported .fixedsticky-on {
position: fixed; }
.fixedsticky-dummy {
display: none; }
.fixedsticky-on + .fixedsticky-dummy {
display: block; }
/**
* Folding list
*
* A list of page links that fill the width of the current container.
*
* By default it hides all but the next and previous arrows and text, showing
* more pages as the viewport size increases.
*
* TODO Refactor to remove the constant width adjustment by using
* text-align:justify - http://www.barrelny.com/blog/text-align-justify-and-rwd/
*/
.folding-list a:hover, .folding-list a:active, .folding-list a:focus {
text-decoration: none; }
.folding-list__page {
text-align: center;
text-transform: uppercase;
line-height: 1.2em; }
.folding-list__page > a, .folding-list__page > span {
display: block;
min-width: 2.28571429em;
padding: 4px 0;
font-weight: normal; }
.folding-list__page--current .date-stack__line2 {
font-weight: bold; }
.folding-list .folding-list__page {
display: none;
width: 33.33333333%; }
.folding-list .folding-list__page--offset0, .folding-list .folding-list__page--offset1 {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1; }
@media (min-width: 22.5em) and (max-width:37.4375em) {
.folding-list .folding-list__page {
width: 20%; }
.folding-list .folding-list__page--offset2 {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1; } }
@media (min-width: 31.25em) and (max-width:37.4375em) {
.folding-list .folding-list__page {
width: 14.28571429%; }
.folding-list .folding-list__page--offset3 {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1; } }
@media (min-width: 37.5em) {
.folding-list .folding-list__page {
width: 14.28571429%; }
.folding-list .folding-list__page--offset2, .folding-list .folding-list__page--offset3 {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1; }
.daynav--tvschedule {
margin-top: -40px; }
.daynav--tvschedule .folding-list__page {
vertical-align: middle; }
.daynav--tvschedule .folding-list__page > a, .daynav--tvschedule .folding-list__page > span {
min-height: 34px;
padding: 4px 0 2px; }
.fixed-supported .schedule-nav-wrapper.fixedsticky-on .daynav--tvschedule {
margin-top: 0; } }
@media (min-width: 43.625em) and (max-width:62.9375em) {
.folding-list .folding-list__page {
width: 11.11111111%; }
.folding-list .folding-list__page--offset4 {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1; } }
@media (min-width: 49.25em) and (max-width:62.9375em) {
.folding-list .folding-list__page {
width: 9.09090909%; }
.folding-list .folding-list__page--offset5 {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1; } }
@media (min-width: 56.125em) and (max-width:62.9375em) {
.folding-list .folding-list__page {
width: 7.69230769%; }
.folding-list .folding-list__page--offset6 {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1; } }
@media (min-width: 37.5em) {
.folding-list--limit7 .folding-list__page {
width: 20%;
display: none; }
.folding-list--limit7 .folding-list__page--offset0, .folding-list--limit7 .folding-list__page--offset1, .folding-list--limit7 .folding-list__page--offset2 {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1; } }
@media (min-width: 39.25em) and (max-width:62.9375em) {
.folding-list--limit7 .folding-list__page {
width: 14.28571429%; }
.folding-list--limit7 .folding-list__page--offset3 {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1; } }
@media (min-width: 46.125em) and (max-width:62.9375em) {
.folding-list--limit7 .folding-list__page {
width: 11.11111111%; }
.folding-list--limit7 .folding-list__page--offset4 {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1; } }
@media (min-width: 53em) and (max-width:62.9375em) {
.folding-list--limit7 .folding-list__page {
width: 9.09090909%; }
.folding-list--limit7 .folding-list__page--offset5 {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1; } }
@media (min-width: 59.875em) and (max-width:62.9375em) {
.folding-list--limit7 .folding-list__page {
width: 7.69230769%; }
.folding-list--limit7 .folding-list__page--offset6 {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1; } }
@media (min-width: 63em) {
.folding-list .folding-list__page {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1;
width: 6.66666667%; }
.folding-list--limit7 .folding-list__page {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1;
width: 7.69230769%; }
.folding-list--limit7 .folding-list__page--offset7 {
display: none; } }
.date-stack, .date-stack {
text-decoration: none; }
.date-stack > a, .date-stack > span {
display: block;
font-weight: normal; }
.date-stack__line1 {
display: block;
font-size: 0.84em; }
a .date-stack__line1 {
font-weight: bold; }
.date-stack__line2 {
display: block; }
.date-stack--current .date-stack__line2 {
font-weight: bold; }
.icon-box {
display: block;
margin-bottom: 8px; }
.icon-box--flush {
margin-bottom: 0; }
.icon-box .icon-box__link {
min-height: 144px;
padding: 16px;
display: block;
position: relative; }
.icon-box .icon-box__link:hover, .icon-box .icon-box__link:active, .icon-box .icon-box__link:focus {
text-decoration: none; }
.icon-box__icon {
position: absolute;
bottom: 16px;
left: 16px;
font-size: 32px; }
.icon-box__hgroup, .icon-box__title, .icon-box__subtitle {
display: block; }
.icon-box__hgroup {
padding-bottom: 40px; }
.icon-box__title {
margin: 0;
padding: 0; }
.icon-box__subtitle {
opacity: 0.8;
margin: 4px 0 0 0;
padding: 0;
font-weight: normal; }
.icon-box__note {
position: absolute;
bottom: 0;
right: 0;
margin: 0 16px 16px 0;
padding-left: 56px;
text-align: right; }
.icon-box__notedetail {
opacity: 0.8; }
@media (min-width: 37.5em) {
.icon-box {
margin-bottom: 16px; }
.icon-box--flush {
margin-bottom: 0; } }
.iplayer-text, .iplayer-icon {
color: #f54997 !important; }
.iplayer-icon--boxed {
background: #f54997 !important;
color: #fff !important; }
.iplayer-icon--boxed:hover, .iplayer-icon--boxed:active, .iplayer-icon--boxed:focus {
background: #262525 !important;
color: #f54997 !important; }
.iplayer-icon--invert {
background: #262525 !important;
color: #f54997 !important; }
.iplayer-icon--invert:hover, .iplayer-icon--invert:active, .iplayer-icon--invert:focus {
background: #f54997 !important;
color: #fff !important; }
.iplayer-icon--container:hover .iplayer-icon, .iplayer-icon--container:active .iplayer-icon, .iplayer-icon--container:focus .iplayer-icon {
color: #f54997 !important;
background: #262525 !important; }
/**
* Letters
*
* Multiple letter blocks, all of which have a fixed width
*/
.letters {
margin-bottom: 8px;
position: relative;
z-index: 0; }
.letters__page {
border-width: 0 2px 2px 0;
border-style: solid;
text-align: center;
text-transform: uppercase; }
.letters__page a, .letters__page span {
display: block;
width: 38px;
padding: 10px 0; }
.letters__page--doublewidth a, .letters__page--doublewidth span {
width: 78px; }
.letters__spacer {
position: absolute;
top: 0;
bottom: 2px;
left: 0;
right: 2px;
z-index: -1; }
@media (min-width: 37.5em) {
.letters {
margin-bottom: 16px; } }
.letters-clamp {
margin-left: auto;
margin-right: auto; }
.letters-clamp .letters {
margin-right: -2px; }
.letters-clamp .letters__spacer {
right: 4px\9; }
@media (min-width: 63em) {
.letters-clamp {
max-width: 960px; } }
@media (min-width: 111px) {
.letters-clamp {
max-width: 78px; } }
@media (min-width: 151px) {
.letters-clamp {
max-width: 118px; } }
@media (min-width: 191px) {
.letters-clamp {
max-width: 158px; } }
@media (min-width: 231px) {
.letters-clamp {
max-width: 198px; } }
@media (min-width: 271px) {
.letters-clamp {
max-width: 238px; } }
@media (min-width: 311px) {
.letters-clamp {
max-width: 278px; } }
@media (min-width: 351px) {
.letters-clamp {
max-width: 318px; } }
@media (min-width: 391px) {
.letters-clamp {
max-width: 358px; } }
@media (min-width: 447px) {
.letters-clamp {
max-width: 398px; } }
@media (min-width: 487px) {
.letters-clamp {
max-width: 438px; } }
@media (min-width: 527px) {
.letters-clamp {
max-width: 478px; } }
@media (min-width: 567px) {
.letters-clamp {
max-width: 518px; } }
@media (min-width: 607px) {
.letters-clamp {
max-width: 558px; } }
@media (min-width: 647px) {
.letters-clamp {
max-width: 598px; } }
@media (min-width: 687px) {
.letters-clamp {
max-width: 638px; } }
@media (min-width: 727px) {
.letters-clamp {
max-width: 678px; } }
@media (min-width: 767px) {
.letters-clamp {
max-width: 718px; } }
@media (min-width: 807px) {
.letters-clamp {
max-width: 758px; } }
@media (min-width: 847px) {
.letters-clamp {
max-width: 798px; } }
@media (min-width: 887px) {
.letters-clamp {
max-width: 838px; } }
@media (min-width: 927px) {
.letters-clamp {
max-width: 878px; } }
@media (min-width: 967px) {
.letters-clamp {
max-width: 918px; } }
@media (min-width: 1007px) {
.letters-clamp {
max-width: 958px; } }
@media (max-width:37.4375em) {
.letters-clamp--only-wide {
max-width: none; } }
/**
* Pagination
*
* A list of page links with next and previous arrows.
*
* By default it hides all but the next and previous arrows and text, showing
* more pages as the viewport size increases.
*/
.pagination {
margin-bottom: 8px; }
.pagination a:hover, .pagination a:active, .pagination a:focus {
text-decoration: none; }
.pagination__next {
margin: 0 8px 0 7px; }
.pagination__previous {
margin: 0 7px 0 8px; }
.pagination .pagination__page {
display: none;
margin: 0 1px;
text-align: center; }
.pagination .pagination__page a, .pagination .pagination__page span {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1; }
.pagination__page a, .pagination__page span {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1;
width: 2.42857143em;
padding: 0.64285714em 0; }
.pagination__page--spacer-before:before, .pagination__page--spacer-after:after, .pagination__page:after {
display: none;
content: '\2026';
width: 1.85714286em;
padding: 0.64285714em 0;
text-align: center; }
.pagination .pagination__page.pagination__page--spacer-before:after, .pagination .pagination__page.pagination__page--spacer-after:before {
display: none; }
.pagination .pagination__page.pagination__page--first a, .pagination .pagination__page.pagination__page--first span, .pagination .pagination__page.pagination__page--last a, .pagination .pagination__page.pagination__page--last span, .pagination .pagination__page.pagination__page--nohide a, .pagination .pagination__page.pagination__page--nohide span {
display: inline-block; }
.pagination .pagination__page.pagination__page--first:after, .pagination .pagination__page.pagination__page--last:after, .pagination .pagination__page.pagination__page--nohide:after {
display: none; }
.pagination .pagination__page.pagination__page--spacer-before:before, .pagination .pagination__page.pagination__page--spacer-after:after {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1; }
.pagination__page--disabled {
opacity: 0.8; }
@media (min-width: 20em) and (max-width: 37.4375em) {
.pagination .pagination__page--first, .pagination .pagination__page--last, .pagination .pagination__page--current {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1; }
.pagination .pagination__page--offset1, .pagination.pagination--on-endpage .pagination__page--offset2 {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1; }
.pagination .pagination__page--offset1 a, .pagination .pagination__page--offset1 span, .pagination.pagination--on-endpage .pagination__page--offset2 a, .pagination.pagination--on-endpage .pagination__page--offset2 span {
display: none; }
.pagination .pagination__page--offset1:after, .pagination.pagination--on-endpage .pagination__page--offset2:after {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1; }
.pagination__next span, .pagination__previous span {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; } }
@media (min-width: 30em) and (max-width: 37.4375em) {
.pagination .pagination__page--offset1 {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1; }
.pagination .pagination__page--offset1 a, .pagination .pagination__page--offset1 span {
display: inline-block; }
.pagination .pagination__page--offset1:after {
display: none; }
.pagination .pagination__page--offset2 {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1; }
.pagination .pagination__page--offset2 a, .pagination .pagination__page--offset2 span {
display: none; }
.pagination .pagination__page--offset2:after {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1; } }
@media (min-width: 37.5em) and (max-width: 62.9375em) {
.pagination {
margin-bottom: 16px; }
.pagination .pagination__page--first, .pagination .pagination__page--last, .pagination .pagination__page--current, .pagination .pagination__page--offset1, .pagination .pagination__page--offset2 {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1; }
.pagination .pagination__page--offset3 {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1; }
.pagination .pagination__page--offset3 a, .pagination .pagination__page--offset3 span {
display: none; }
.pagination .pagination__page--offset3:after {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1; } }
@media (min-width: 37.5em) and (max-width: 49.125em) {
.pagination__next span, .pagination__previous span {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; } }
@media (min-width: 63em) {
.pagination .pagination__page {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1; } }
.ml__status {
display: none; }
.ml__button {
display: none;
cursor: pointer;
margin-top: 8px;
margin-bottom: 8px;
font-weight: bold; }
.ml__button--faq, .ml__button--dropdown {
display: block;
margin: 0; }
.ml__button--faq:before, .ml__button--dropdown:before {
content: "\e005";
margin-right: 8px;
font-family: 'gelicons-core';
vertical-align: baseline;
font-size: 16px;
display: inline-block;
-webkit-transition: -webkit-transform 0.25s linear;
transition: transform 0.25s linear; }
.ml__button--faq-q .ml__button--faq:before {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); }
.ml__status:checked + .ml__button--faq-q .ml__button--faq:before {
-webkit-transform: rotate(0);
-ms-transform: rotate(0);
transform: rotate(0); }
/********************** AB TEST *******************/
.ab_dropdown .ml__button--faq-q .ml__button--faq:before {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg); }
.ab_dropdown .ml__status:checked + .ml__button--faq-q .ml__button--faq:before {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); }
/********************** END AB TEST *******************/
.ml__button--dropdown-h .ml__button--dropdown:before, .ml__button--dropdown-up:before {
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg); }
.ml__status:checked ~ .ml__button--dropdown-h .ml__button--dropdown:before, .ml__button--dropdown-down:before {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); }
.ml__status:focus + .ml__button, .ml__status:focus + .ml__button--faq-q {
text-decoration: underline; }
.ml__button--faq__answer {
padding: 0 23px; }
.ml .ml__status, .ml .ml__button:nth-child(n) {
display: inherit; }
.ml .ml__ellipsis:after {
content: ""; }
.ml .ml__status:checked ~ .ml__content .ml__ellipsis:after {
content: "\2026";
/* === … ISO in CSS content */ }
.ml .ml__label--sep, .ml .ml__button .ml__label--more {
display: none; }
.ml .ml__status, .ml .ml__status:checked ~ .ml__content .ml__hidden, .ml .ml__status:checked ~ .ml__hidden, .ml .ml__status-1:checked ~ .ml__hidden-1, .ml .ml__status-2:checked ~ .ml__hidden-2, .ml .ml__status-3:checked ~ .ml__hidden-3, .ml .ml__status:checked ~ .ml__button .ml__label--less {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
.ml .ml__status:checked ~ .ml__button .ml__label--more {
display: inline; }
@media (min-width: 20em) and (max-width: 37.4375em) {
.bpb1-ml .ml__status, .bpb1-ml .ml__button:nth-child(n) {
display: inherit; }
.bpb1-ml .ml__ellipsis:after {
content: ""; }
.bpb1-ml .ml__status:checked ~ .ml__content .ml__ellipsis:after {
content: "\2026";
/* === … ISO in CSS content */ }
.bpb1-ml .ml__label--sep, .bpb1-ml .ml__button .ml__label--more {
display: none; }
.bpb1-ml .ml__status, .bpb1-ml .ml__status:checked ~ .ml__content .ml__hidden, .bpb1-ml .ml__status:checked ~ .ml__hidden, .bpb1-ml .ml__status-1:checked ~ .ml__hidden-1, .bpb1-ml .ml__status-2:checked ~ .ml__hidden-2, .bpb1-ml .ml__status-3:checked ~ .ml__hidden-3, .bpb1-ml .ml__status:checked ~ .ml__button .ml__label--less {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
.bpb1-ml .ml__status:checked ~ .ml__button .ml__label--more {
display: inline; } }
@media (min-width: 30em) and (max-width: 37.4375em) {
.bpb2-ml .ml__status, .bpb2-ml .ml__button:nth-child(n) {
display: inherit; }
.bpb2-ml .ml__ellipsis:after {
content: ""; }
.bpb2-ml .ml__status:checked ~ .ml__content .ml__ellipsis:after {
content: "\2026";
/* === … ISO in CSS content */ }
.bpb2-ml .ml__label--sep, .bpb2-ml .ml__button .ml__label--more {
display: none; }
.bpb2-ml .ml__status, .bpb2-ml .ml__status:checked ~ .ml__content .ml__hidden, .bpb2-ml .ml__status:checked ~ .ml__hidden, .bpb2-ml .ml__status-1:checked ~ .ml__hidden-1, .bpb2-ml .ml__status-2:checked ~ .ml__hidden-2, .bpb2-ml .ml__status-3:checked ~ .ml__hidden-3, .bpb2-ml .ml__status:checked ~ .ml__button .ml__label--less {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
.bpb2-ml .ml__status:checked ~ .ml__button .ml__label--more {
display: inline; } }
@media (min-width: 37.5em) {
.bpw-ml .ml__status, .bpw-ml .ml__button:nth-child(n) {
display: inherit; }
.bpw-ml .ml__ellipsis:after {
content: ""; }
.bpw-ml .ml__status:checked ~ .ml__content .ml__ellipsis:after {
content: "\2026";
/* === … ISO in CSS content */ }
.bpw-ml .ml__label--sep, .bpw-ml .ml__button .ml__label--more {
display: none; }
.bpw-ml .ml__status, .bpw-ml .ml__status:checked ~ .ml__content .ml__hidden, .bpw-ml .ml__status:checked ~ .ml__hidden, .bpw-ml .ml__status-1:checked ~ .ml__hidden-1, .bpw-ml .ml__status-2:checked ~ .ml__hidden-2, .bpw-ml .ml__status-3:checked ~ .ml__hidden-3, .bpw-ml .ml__status:checked ~ .ml__button .ml__label--less {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
.bpw-ml .ml__status:checked ~ .ml__button .ml__label--more {
display: inline; } }
@media (min-width: 37.5em) and (max-width: 62.9375em) {
.bpw1-ml .ml__status, .bpw1-ml .ml__button:nth-child(n) {
display: inherit; }
.bpw1-ml .ml__ellipsis:after {
content: ""; }
.bpw1-ml .ml__status:checked ~ .ml__content .ml__ellipsis:after {
content: "\2026";
/* === … ISO in CSS content */ }
.bpw1-ml .ml__label--sep, .bpw1-ml .ml__button .ml__label--more {
display: none; }
.bpw1-ml .ml__status, .bpw1-ml .ml__status:checked ~ .ml__content .ml__hidden, .bpw1-ml .ml__status:checked ~ .ml__hidden, .bpw1-ml .ml__status-1:checked ~ .ml__hidden-1, .bpw1-ml .ml__status-2:checked ~ .ml__hidden-2, .bpw1-ml .ml__status-3:checked ~ .ml__hidden-3, .bpw1-ml .ml__status:checked ~ .ml__button .ml__label--less {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
.bpw1-ml .ml__status:checked ~ .ml__button .ml__label--more {
display: inline; } }
@media (min-width: 48.125em) and (max-width: 62.9375em) {
.bpw2-ml .ml__status, .bpw2-ml .ml__button:nth-child(n) {
display: inherit; }
.bpw2-ml .ml__ellipsis:after {
content: ""; }
.bpw2-ml .ml__status:checked ~ .ml__content .ml__ellipsis:after {
content: "\2026";
/* === … ISO in CSS content */ }
.bpw2-ml .ml__label--sep, .bpw2-ml .ml__button .ml__label--more {
display: none; }
.bpw2-ml .ml__status, .bpw2-ml .ml__status:checked ~ .ml__content .ml__hidden, .bpw2-ml .ml__status:checked ~ .ml__hidden, .bpw2-ml .ml__status-1:checked ~ .ml__hidden-1, .bpw2-ml .ml__status-2:checked ~ .ml__hidden-2, .bpw2-ml .ml__status-3:checked ~ .ml__hidden-3, .bpw2-ml .ml__status:checked ~ .ml__button .ml__label--less {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
.bpw2-ml .ml__status:checked ~ .ml__button .ml__label--more {
display: inline; } }
@media (min-width: 63em) {
.bpe-ml .ml__status, .bpe-ml .ml__button:nth-child(n) {
display: inherit; }
.bpe-ml .ml__ellipsis:after {
content: ""; }
.bpe-ml .ml__status:checked ~ .ml__content .ml__ellipsis:after {
content: "\2026";
/* === … ISO in CSS content */ }
.bpe-ml .ml__label--sep, .bpe-ml .ml__button .ml__label--more {
display: none; }
.bpe-ml .ml__status, .bpe-ml .ml__status:checked ~ .ml__content .ml__hidden, .bpe-ml .ml__status:checked ~ .ml__hidden, .bpe-ml .ml__status-1:checked ~ .ml__hidden-1, .bpe-ml .ml__status-2:checked ~ .ml__hidden-2, .bpe-ml .ml__status-3:checked ~ .ml__hidden-3, .bpe-ml .ml__status:checked ~ .ml__button .ml__label--less {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
.bpe-ml .ml__status:checked ~ .ml__button .ml__label--more {
display: inline; } }
/**
* Box Link
*
* Used create links in a block with padding (always basic-spacing)
*/
.box-link {
display: block;
padding-top: 8px;
padding-bottom: 8px; }
/**
* Block Link
*
* A Faux block-level link. Used for when you need a block-level link with
* clickable areas within it as directly nesting a tags breaks things.
*/
.block-link {
display: block;
position: relative; }
.block-link--steal .block-link {
position: static; }
.block-link a, .block-link abbr[title], .block-link__link {
position: relative;
z-index: 1; }
.block-link__overlay-link {
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
text-indent: 200%;
white-space: nowrap;
background: transparent; }
a.block-link__overlay-link {
position: absolute;
z-index: 0;
opacity: 0; }
/**
* Broadcast Event list
*
* Cheating massivley as the broadcast-event list uses all the layout options
* from .programme, so all we need to style is the note stuff
*/
.broadcast-event__time {
margin-bottom: 0; }
.broadcast-event__time .timezone--note {
display: block;
font-size: 0.64em; }
.broadcast-event__date {
display: block; }
.stream {
position: relative;
overflow: hidden; }
.stream .highlight-box--grid, .stream .highlight-box-wrapper, .stream .highlight-box--grid:hover, .stream .highlight-box--grid:active, .stream .highlight-box--grid:focus, .stream .highlight-box--grid.highlight-box--active {
margin-bottom: 0; }
.stream__list.grid-wrapper {
margin: 0; }
.stream__window {
display: block;
overflow-x: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: none;
-ms-scroll-chaining: none;
-ms-touch-action: pan-x;
touch-action: pan-x; }
.stream__panel {
display: block; }
.stream__button {
border: none;
display: block;
z-index: 100;
opacity: 1; }
.stream__button--edges {
position: absolute;
background: #000;
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 0;
bottom: 0;
top: 0; }
.stream__button--edges:hover, .stream__button--edges:active, .stream__button--edges:focus {
background: #000; }
.stream__button--edges.stream__button--prev {
left: 0;
border-right: solid 1px #fff; }
.stream__button--edges.stream__button--next {
right: 0;
border-left: solid 1px #fff; }
.stream__button .gelicon {
font-size: 24px; }
.stream__button--removed {
display: none; }
.stream__button[disabled] .gelicon {
display: none !important; }
.stream__button[disabled]:hover, .stream__button[disabled]:active, .stream__button[disabled]:focus {
background: #000;
background: rgba(0, 0, 0, 0.5); }
.stream__list {
margin-left: -1px;
margin-right: -1px; }
.stream__item {
max-width: 992px;
position: relative; }
.stream__window .stream__item {
display: inline-block; }
.stream__item-inner {
border-right-width: 1px;
border-right-style: solid;
padding: 0; }
.stream__item:first-child .stream__item-inner {
border-left-width: 1px;
border-left-style: solid; }
.stream__item-space {
padding-left: 4px;
padding-right: 4px; }
.stream__title--adjust-overlaps {
padding-right: 124px;
min-height: 24px; }
@media (min-width: 20em) and (max-width: 37.4375em) {
.stream__title--adjust-overlaps {
min-height: 24px; } }
@media (min-width: 37.5em) {
.stream__title--adjust-overlaps {
min-height: 28px; } }
.stream__indicators {
text-align: right;
height: 0.75em; }
.stream__indicator {
display: inline-block;
*display: inline;
margin-left: 3px; }
.stream__indicator button {
display: inline-block;
line-height: 0px;
padding: 0px;
overflow: hidden;
text-indent: -9999px;
border: 0px;
cursor: pointer;
height: 0.75em;
width: 0.75em; }
.stream__bookend {
text-align: center;
width: 160px; }
.stream__bookend {
position: absolute; }
.stream__bookend--left {
right: 8px; }
.stream__bookend--right {
left: 8px; }
.stream__bookend-icon {
display: block;
font-size: 48px;
line-height: 64px; }
.stream__window .stream__bookend-link, .stream__window .stream__bookend-text {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0; }
.stream__window .stream__bookend-text {
top: auto;
bottom: 8px; }
.stream__window .stream__bookend-icon {
position: absolute;
top: 50%;
left: 0;
right: 0;
bottom: auto;
margin-top: -48px; }
.has-js .stream--blend {
position: relative; }
.has-js .stream--blend::before, .has-js .stream--blend::after {
content: " ";
display: block;
position: absolute;
top: 0;
bottom: 0;
z-index: 10; }
.has-js .stream--blend::before {
left: 0;
background: -webkit-linear-gradient(left, #000 0%, #000 1%, transparent 100%);
/* Chrome10+,Safari5.1+ */
background: linear-gradient(to right, #000 0%, #000 1%, transparent 100%);
/* W3C */ }
.has-js .stream--blend::after {
right: 0;
background: -webkit-linear-gradient(left, transparent 0%, #000 99%, #000 100%);
/* Chrome10+,Safari5.1+ */
background: linear-gradient(to right, transparent 0%, #000 99%, #000 100%);
/* W3C */ }
@media (min-width: 1008px) {
.stream--blend::before, .stream--blend::after {
display: block;
width: 5%; } }
@media (min-width: 1288px) {
.stream--blend::before, .stream--blend::after {
width: 10%; } }
@media (min-width: 1532px) {
.stream--blend::before, .stream--blend::after {
width: 15%; } }
.stream--touchable .stream__buttons--peak .stream__button {
opacity: 0;
-webkit-transition: opacity 0.2s ease-in;
-moz-transition: opacity 0.2s ease-in;
-o-transition: opacity 0.2s ease-in;
transition: opacity 0.2s ease-in; }
body:hover .stream:not(.touched) .stream__buttons--peak .stream__button {
opacity: 1; }
.stream__button:hover, .stream__button:active, .stream__button:focus {
opacity: 1 !important; }
.stream__buttons-floating .stream__buttons-wrap {
margin: 0 auto;
max-width: 1152px;
letter-spacing: normal;
word-spacing: normal;
text-rendering: auto; }
.stream__buttons-floating .stream__button {
position: absolute;
top: 50%;
margin-top: -24px;
padding: 8px;
z-index: 100;
overflow: hidden;
white-space: nowrap; }
.stream__buttons-floating .stream__button[disabled] {
display: none; }
.stream__buttons-floating .stream__button-text {
overflow: hidden;
display: none;
white-space: nowrap;
max-width: 0;
opacity: 0;
position: relative;
top: 4px;
-webkit-transition: max-width 0.3s linear, opacity 0.3s linear;
-moz-transition: max-width 0.3s linear, opacity 0.3s linear;
-o-transition: max-width 0.3s linear, opacity 0.3s linear;
transition: max-width 0.3s linear, opacity 0.3s linear; }
.stream__buttons-floating .stream__button .gelicon {
vertical-align: middle; }
.stream__buttons-floating .stream__button--prev {
left: 0; }
.stream__buttons-floating .stream__button--prev .stream__button-text {
margin-left: 8px; }
.stream__buttons-floating .stream__button--next {
right: 0; }
.stream__buttons-floating .stream__button--next .stream__button-text {
margin-right: 8px; }
@media (min-width: 37.5em) {
.stream__item-space {
padding-left: 8px;
padding-right: 8px; }
.stream__buttons-floating .stream__button {
padding: 16px;
margin-top: -42px; }
.stream__buttons-floating .stream__button .gelicon {
font-size: 48px; }
.stream__buttons-floating .stream__button:hover .stream__button-text {
opacity: 1;
max-width: 300px; }
.stream__buttons-floating .stream__button-text {
display: inline-block; } }
@media (min-width: 63em) {
.stream__buttons-floating {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0; }
.stream__buttons-floating .stream__buttons-wrap {
margin: 0 auto;
max-width: 1152px;
position: relative;
display: table;
width: 100%;
height: 100%; } }
/**
* .feature
* A feature aggregation object with an image,
* title, content
*/
.feature-list > :not(:last-child) .feature {
border-bottom-style: solid;
border-bottom-width: 1px;
padding-bottom: 17px; }
.feature-list .component__header {
padding-top: 0; }
.feature__img {
float: left;
margin-right: 8px;
margin-bottom: 8px;
min-width: 96px;
overflow: hidden; }
.feature__img--rev {
float: right;
margin-right: 0;
margin-left: 8px; }
.feature__description :last-child {
margin-bottom: 0; }
@media (min-width: 20em) and (max-width: 37.4375em) {
.feature-list > :not(:last-child) .feature {
padding-bottom: 17px; } }
@media (min-width: 37.5em) {
.feature-list > :not(:last-child) .feature {
padding-bottom: 17px; }
.feature__img {
margin-right: 16px; }
.feature__img--rev {
margin-right: 0;
margin-left: 16px; } }
.calendar-table {
width: 100%;
text-align: center;
margin-bottom: 8px; }
.calendar-table caption {
font-weight: bold;
padding: 8px 0; }
.calendar-table thead {
font-weight: bold;
text-transform: uppercase; }
.calendar-table td {
width: 14.28571429%;
border-width: 1px;
border-style: solid; }
@media (min-width: 37.5em) {
.calendar-table {
margin-bottom: 16px; } }
.contact-detail {
padding: 8px 0;
border-top-style: solid;
border-top-width: 1px; }
li:first-child > .contact-detail {
border-top-style: none; }
.contact-detail__title, .contact-detail__note {
margin-bottom: 0; }
.contact-detail__title {
text-transform: capitalize; }
.contact-detail__card {
word-wrap: break-word; }
.contact-detail--show-icon {
position: relative;
padding-left: 50px; }
.contact-detail--show-icon .contact-detail__icon {
position: absolute;
left: 0;
display: block;
width: 45px;
text-align: center;
font-size: 1.5em;
line-height: 1.5em; }
.contact-detail--show-icon.contact-detail--digg .contact-detail__icon {
font-size: 1.25em; }
/**
* Highlight Box
*
* A large box that changes background when hovered over.
* Useful visual cue when paired with block-link, which provides large click
* areas.
*/
.highlight-box-wrapper {
list-style: none;
margin-top: 0;
margin-bottom: 8px;
padding: 0; }
.highlight-box-wrapper--grid {
margin-bottom: -8px !important; }
.highlight-box--grid {
margin: 0 0 8px 0;
padding: 0 0;
border-style: none; }
.highlight-box--grid:hover, .highlight-box--grid:active, .highlight-box--grid:focus, .highlight-box--grid.highlight-box--active {
position: relative;
top: 0;
z-index: 1;
margin: 0 0 8px 0;
padding: 0;
border-style: none; }
.highlight-box--list {
margin: 0 8px;
padding: 8px 0;
border-style: none;
border-width: 1px;
border-bottom-style: solid; }
li:last-child > .highlight-box--list:not(:hover):not(:active):not(:focus):not(.highlight-box--active), li:last-child > .grid__inner > .highlight-box--list:not(:hover):not(:active):not(:focus):not(.highlight-box--active) {
border-bottom-color: transparent; }
.highlight-box--list:hover, .highlight-box--list:active, .highlight-box--list:focus, .highlight-box--list.highlight-box--active {
position: relative;
top: -1px;
z-index: 100;
margin-left: 0;
margin-right: 0;
margin-bottom: -1px;
padding-left: 7px;
padding-right: 7px;
border-style: solid; }
.highlight-box--list-borderless {
margin: 0;
padding: 8px;
border-style: none; }
@media (min-width: 37.5em) {
.highlight-box-wrapper {
margin-bottom: 16px; }
.highlight-box--grid {
margin: 0 0 16px 0; }
.highlight-box--grid:hover, .highlight-box--grid:active, .highlight-box--grid:focus, .highlight-box--grid.highlight-box--active {
margin: 0 0 16px 0; }
.highlight-box--list {
margin: 0 16px;
padding: 16px 0; }
.highlight-box--list:hover, .highlight-box--list:active, .highlight-box--list:focus, .highlight-box--list.highlight-box--active {
padding-left: 15px;
padding-right: 15px; }
.highlight-box--list-borderless {
padding: 16px; } }
@media (min-width: 20em) and (max-width: 37.4375em) {
.bpb1-highlight-box-wrapper {
list-style: none;
margin-top: 0;
margin-bottom: 8px;
padding: 0; }
.bpb1-highlight-box-wrapper--grid {
margin-bottom: -8px !important; }
.bpb1-highlight-box--grid {
margin: 0 0 8px 0;
padding: 0 0;
border-style: none; }
.bpb1-highlight-box--grid:hover, .bpb1-highlight-box--grid:active, .bpb1-highlight-box--grid:focus, .bpb1-highlight-box--grid.highlight-box--active {
position: relative;
top: 0;
z-index: 1;
margin: 0 0 8px 0;
padding: 0;
border-style: none; }
.bpb1-highlight-box--list {
margin: 0 8px;
padding: 8px 0;
border-style: none;
border-width: 1px;
border-bottom-style: solid; }
li:last-child > .bpb1-highlight-box--list:not(:hover):not(:active):not(:focus):not(.highlight-box--active), li:last-child > .grid__inner > .bpb1-highlight-box--list:not(:hover):not(:active):not(:focus):not(.highlight-box--active) {
border-bottom-color: transparent; }
.bpb1-highlight-box--list:hover, .bpb1-highlight-box--list:active, .bpb1-highlight-box--list:focus, .bpb1-highlight-box--list.highlight-box--active {
position: relative;
top: -1px;
z-index: 100;
margin-left: 0;
margin-right: 0;
margin-bottom: -1px;
padding-left: 7px;
padding-right: 7px;
border-style: solid; }
.bpb1-highlight-box--list-borderless {
margin: 0;
padding: 8px;
border-style: none; } }
@media (min-width: 30em) and (max-width: 37.4375em) {
.bpb2-highlight-box-wrapper {
list-style: none;
margin-top: 0;
margin-bottom: 8px;
padding: 0; }
.bpb2-highlight-box-wrapper--grid {
margin-bottom: -8px !important; }
.bpb2-highlight-box--grid {
margin: 0 0 8px 0;
padding: 0 0;
border-style: none; }
.bpb2-highlight-box--grid:hover, .bpb2-highlight-box--grid:active, .bpb2-highlight-box--grid:focus, .bpb2-highlight-box--grid.highlight-box--active {
position: relative;
top: 0;
z-index: 1;
margin: 0 0 8px 0;
padding: 0;
border-style: none; }
.bpb2-highlight-box--list {
margin: 0 8px;
padding: 8px 0;
border-style: none;
border-width: 1px;
border-bottom-style: solid; }
li:last-child > .bpb2-highlight-box--list:not(:hover):not(:active):not(:focus):not(.highlight-box--active), li:last-child > .grid__inner > .bpb2-highlight-box--list:not(:hover):not(:active):not(:focus):not(.highlight-box--active) {
border-bottom-color: transparent; }
.bpb2-highlight-box--list:hover, .bpb2-highlight-box--list:active, .bpb2-highlight-box--list:focus, .bpb2-highlight-box--list.highlight-box--active {
position: relative;
top: -1px;
z-index: 100;
margin-left: 0;
margin-right: 0;
margin-bottom: -1px;
padding-left: 7px;
padding-right: 7px;
border-style: solid; }
.bpb2-highlight-box--list-borderless {
margin: 0;
padding: 8px;
border-style: none; } }
@media (min-width: 37.5em) {
.bpw-highlight-box-wrapper {
list-style: none;
margin-top: 0;
margin-bottom: 16px;
padding: 0; }
.bpw-highlight-box-wrapper--grid {
margin-bottom: -16px !important; }
.bpw-highlight-box--grid {
margin: 0 0 16px 0;
padding: 0 0;
border-style: none; }
.bpw-highlight-box--grid:hover, .bpw-highlight-box--grid:active, .bpw-highlight-box--grid:focus, .bpw-highlight-box--grid.highlight-box--active {
position: relative;
top: 0;
z-index: 1;
margin: 0 0 16px 0;
padding: 0;
border-style: none; }
.bpw-highlight-box--list {
margin: 0 16px;
padding: 16px 0;
border-style: none;
border-width: 1px;
border-bottom-style: solid; }
li:last-child > .bpw-highlight-box--list:not(:hover):not(:active):not(:focus):not(.highlight-box--active), li:last-child > .grid__inner > .bpw-highlight-box--list:not(:hover):not(:active):not(:focus):not(.highlight-box--active) {
border-bottom-color: transparent; }
.bpw-highlight-box--list:hover, .bpw-highlight-box--list:active, .bpw-highlight-box--list:focus, .bpw-highlight-box--list.highlight-box--active {
position: relative;
top: -1px;
z-index: 100;
margin-left: 0;
margin-right: 0;
margin-bottom: -1px;
padding-left: 15px;
padding-right: 15px;
border-style: solid; }
.bpw-highlight-box--list-borderless {
margin: 0;
padding: 16px;
border-style: none; } }
@media (min-width: 37.5em) and (max-width: 62.9375em) {
.bpw1-highlight-box-wrapper {
list-style: none;
margin-top: 0;
margin-bottom: 16px;
padding: 0; }
.bpw1-highlight-box-wrapper--grid {
margin-bottom: -16px !important; }
.bpw1-highlight-box--grid {
margin: 0 0 16px 0;
padding: 0 0;
border-style: none; }
.bpw1-highlight-box--grid:hover, .bpw1-highlight-box--grid:active, .bpw1-highlight-box--grid:focus, .bpw1-highlight-box--grid.highlight-box--active {
position: relative;
top: 0;
z-index: 1;
margin: 0 0 16px 0;
padding: 0;
border-style: none; }
.bpw1-highlight-box--list {
margin: 0 16px;
padding: 16px 0;
border-style: none;
border-width: 1px;
border-bottom-style: solid; }
li:last-child > .bpw1-highlight-box--list:not(:hover):not(:active):not(:focus):not(.highlight-box--active), li:last-child > .grid__inner > .bpw1-highlight-box--list:not(:hover):not(:active):not(:focus):not(.highlight-box--active) {
border-bottom-color: transparent; }
.bpw1-highlight-box--list:hover, .bpw1-highlight-box--list:active, .bpw1-highlight-box--list:focus, .bpw1-highlight-box--list.highlight-box--active {
position: relative;
top: -1px;
z-index: 100;
margin-left: 0;
margin-right: 0;
margin-bottom: -1px;
padding-left: 15px;
padding-right: 15px;
border-style: solid; }
.bpw1-highlight-box--list-borderless {
margin: 0;
padding: 16px;
border-style: none; } }
@media (min-width: 48.125em) and (max-width: 62.9375em) {
.bpw2-highlight-box-wrapper {
list-style: none;
margin-top: 0;
margin-bottom: 16px;
padding: 0; }
.bpw2-highlight-box-wrapper--grid {
margin-bottom: -16px !important; }
.bpw2-highlight-box--grid {
margin: 0 0 16px 0;
padding: 0 0;
border-style: none; }
.bpw2-highlight-box--grid:hover, .bpw2-highlight-box--grid:active, .bpw2-highlight-box--grid:focus, .bpw2-highlight-box--grid.highlight-box--active {
position: relative;
top: 0;
z-index: 1;
margin: 0 0 16px 0;
padding: 0;
border-style: none; }
.bpw2-highlight-box--list {
margin: 0 16px;
padding: 16px 0;
border-style: none;
border-width: 1px;
border-bottom-style: solid; }
li:last-child > .bpw2-highlight-box--list:not(:hover):not(:active):not(:focus):not(.highlight-box--active), li:last-child > .grid__inner > .bpw2-highlight-box--list:not(:hover):not(:active):not(:focus):not(.highlight-box--active) {
border-bottom-color: transparent; }
.bpw2-highlight-box--list:hover, .bpw2-highlight-box--list:active, .bpw2-highlight-box--list:focus, .bpw2-highlight-box--list.highlight-box--active {
position: relative;
top: -1px;
z-index: 100;
margin-left: 0;
margin-right: 0;
margin-bottom: -1px;
padding-left: 15px;
padding-right: 15px;
border-style: solid; }
.bpw2-highlight-box--list-borderless {
margin: 0;
padding: 16px;
border-style: none; } }
@media (min-width: 63em) {
.bpe-highlight-box-wrapper {
list-style: none;
margin-top: 0;
margin-bottom: 16px;
padding: 0; }
.bpe-highlight-box-wrapper--grid {
margin-bottom: -16px !important; }
.bpe-highlight-box--grid {
margin: 0 0 16px 0;
padding: 0 0;
border-style: none; }
.bpe-highlight-box--grid:hover, .bpe-highlight-box--grid:active, .bpe-highlight-box--grid:focus, .bpe-highlight-box--grid.highlight-box--active {
position: relative;
top: 0;
z-index: 1;
margin: 0 0 16px 0;
padding: 0;
border-style: none; }
.bpe-highlight-box--list {
margin: 0 16px;
padding: 16px 0;
border-style: none;
border-width: 1px;
border-bottom-style: solid; }
li:last-child > .bpe-highlight-box--list:not(:hover):not(:active):not(:focus):not(.highlight-box--active), li:last-child > .grid__inner > .bpe-highlight-box--list:not(:hover):not(:active):not(:focus):not(.highlight-box--active) {
border-bottom-color: transparent; }
.bpe-highlight-box--list:hover, .bpe-highlight-box--list:active, .bpe-highlight-box--list:focus, .bpe-highlight-box--list.highlight-box--active {
position: relative;
top: -1px;
z-index: 100;
margin-left: 0;
margin-right: 0;
margin-bottom: -1px;
padding-left: 15px;
padding-right: 15px;
border-style: solid; }
.bpe-highlight-box--list-borderless {
margin: 0;
padding: 16px;
border-style: none; } }
.rsp-img {
width: 100%;
-webkit-transition: opacity 0.1s ease-in-out;
-moz-transition: opacity 0.1s ease-in-out;
-o-transition: opacity 0.1s ease-in-out;
transition: opacity 0.1s ease-in-out;
display: block; }
.lazy-img {
opacity: 0; }
.lazy-module--loading--loader.lazy-module--loading, .lazy-module--loading.lazy-module--loading--loader-transparent {
position: relative; }
.lazy-module--loading--loader.lazy-module--loading:after, .lazy-module--loading.lazy-module--loading--loader-transparent:after {
content: "";
background: url('../img/icons/loading.gif') center center no-repeat;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
pointer-events: none; }
.lazy-module--loading--component.lazy-module--loading {
position: relative; }
.lazy-module--loading--component.lazy-module--loading:after {
position: absolute;
height: 24px;
width: 18px;
top: 0;
right: 0;
content: "";
background: url('../img/icons/loading_dark.gif') center right no-repeat;
pointer-events: none; }
.lazy-module--loading--loader-transparent.lazy-module--loading:after {
background: transparent url("../img/icons/loading_dark.gif") center center no-repeat; }
.branding-contrast-dark .lazy-module--loading--loader-transparent.lazy-module--loading:after {
background-image: url("../img/icons/loading.gif"); }
.lazy-module--complete--fadein {
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out; }
.lazy-module--complete--fadein.lazy-module--loading {
opacity: 0; }
@media (min-width: 20em) and (max-width: 37.4375em) {
.lazy-module--loading--component.lazy-module--loading:after {
height: 24px; } }
@media (min-width: 37.5em) {
.lazy-module--loading--component.lazy-module--loading:after {
height: 28px; } }
/**
* Lazy Link
*
* Lazy loading of AJAX content that is triggered by a user interaction
*/
.lazylink__spinner {
display: inline-block;
width: 16px;
height: 16px;
padding: 0 8px;
vertical-align: middle;
background: transparent url("../img/icons/loading_dark.gif") center center no-repeat; }
.branding-contrast-dark .lazylink__spinner {
background-image: url("../img/icons/loading.gif"); }
.lazylink__include {
display: none; }
.lazylink__include--visible {
display: block; }
.lazylink__include--slidedown {
overflow: hidden;
max-height: 0;
opacity: 0;
-webkit-transition: max-height 0.8s linear, opacity 0.4s linear;
-moz-transition: max-height 0.8s linear, opacity 0.4s linear;
-o-transition: max-height 0.8s linear, opacity 0.4s linear;
transition: max-height 0.8s linear, opacity 0.4s linear; }
.lazylink__include--slidedown--visible {
max-height: 3000px;
opacity: 1; }
.smp {
position: relative;
background: #999; }
.smp__overlay {
position: absolute;
left: 0;
bottom: 0;
margin: 0;
z-index: 50; }
.smp__message {
text-align: center;
background: #000;
color: #fff;
background: rgba(0, 0, 0, 0.7);
letter-spacing: 0;
font-weight: normal;
margin: 0;
padding: 8px;
display: table;
vertical-align: middle; }
.smp__messagetext {
display: table-cell;
vertical-align: middle; }
.smp__message--icon {
height: 48px; }
.smp__icon {
display: block;
line-height: 48px;
font-size: 32px;
width: 48px;
height: 48px;
float: left;
margin-right: 8px; }
.smp__message--icon .smp__messagetext {
max-width: 96px; }
.smp__blocklink:hover .smp__message, .smp__blocklink:active .smp__message, .smp__blocklink:focus .smp__message {
text-decoration: none;
background: #f54997 !important;
color: #fff !important; }
@media (min-width: 37.5em) {
.smp__message {
padding: 16px; }
.smp__icon {
line-height: 48px;
font-size: 40px;
width: 48px;
height: 48px;
margin-right: 16px; }
.smp__message--icon {
height: 48px; }
.smp__messagetext {
font-size: 1.4em;
line-height: 1; }
.smp__message--icon .smp__messagetext {
max-width: 128px; } }
/**
* .segments
* A segments list, with playlister headings
*/
.segments-list__header {
text-align: center;
display: block;
padding: 8px;
line-height: 1.2;
vertical-align: middle;
border-bottom-style: solid;
border-bottom-width: 2px; }
.segments-list__playlister--slim {
border-top-style: solid;
border-top-width: 2px; }
.segments-list__playlister-logo {
vertical-align: middle;
margin-left: 4px;
margin-top: 4px; }
.segments-list__items {
margin-top: 8px; }
.segments-list__item {
margin-bottom: 16px; }
html body .segments-list__playlister--full {
border: none;
color: #fff;
background: #ff5500; }
html body .segments-list__playlister--full:hover, html body .segments-list__playlister--full:active, html body .segments-list__playlister--full:focus {
color: #fff;
background: #ff8500;
text-decoration: none; }
.segments-list__item--group {
margin-top: 8px;
border-bottom-width: 2px;
border-bottom-style: solid; }
.segments-list__item--group + .segments-list__item {
margin-top: 40px; }
.segment {
position: relative;
min-height: 40px; }
.segment--music {
min-height: 88px; }
.segment__artist-image {
display: none;
width: 0; }
.segment__track {
display: block;
overflow: hidden; }
.segment--withbuttons {
padding-left: 48px; }
.segment__buttons {
display: block;
position: absolute;
top: 0;
left: 0;
width: 40px; }
.segment__play {
height: 40px;
width: 40px;
position: relative;
line-height: 40px;
text-align: center;
font-size: 16px; }
.segment__play :hover, .segment__play :active, .segment__play :focus {
text-decoration: none !important; }
.segment__play.iplayer-icon--boxed {
font-size: 20px; }
.segment__play-button {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
text-decoration: none; }
.segment__button--playlister {
font-size: 28px;
display: inline-block; }
.snippet {
background-color: #ff8500;
margin-bottom: 8px;
opacity: 1;
-webkit-transition: height 0.25s linear, margin-bottom 0.25s linear, opacity 0.25s linear;
transition: height 0.25s linear, margin-bottom 0.25s linear, opacity 0.25s linear; }
.snippet, .snippet__button {
width: 40px;
height: 40px;
display: block;
vertical-align: top;
cursor: pointer;
text-align: center;
overflow: hidden; }
.snippet--pending {
height: 0;
margin-bottom: 0;
opacity: 0; }
.snippet__icon {
color: #fff;
line-height: 40px;
font-size: 16px; }
.snippet__button {
position: relative;
background-repeat: no-repeat;
background-position: 14px 12px;
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
text-align: center;
background-color: transparent; }
.snippet__canvas {
background: transparent;
position: absolute;
margin: 0;
padding: 0;
display: none;
cursor: pointer; }
.snippet--loading .snippet__icon, .snippet--playing .snippet__icon {
display: none; }
.snippet--loading .snippet__canvas, .snippet--playing .snippet__canvas {
display: block; }
.snippet__player {
width: 1px;
height: 1px;
overflow: hidden;
position: absolute;
visibility: hidden; }
.snippet__button-text {
text-indent: -10000px;
display: block; }
.snippet--playing .snippet__button-text {
height: 12px;
width: 12px;
background: #fff;
margin: 0 auto; }
.snippet--unavailable {
background-color: #808080;
cursor: default; }
.snippet--unavailable .snippet__button {
cursor: auto; }
@media (min-width: 20em) and (max-width: 37.4375em) {
.segment__artist-image {
display: block;
float: left;
margin-right: 8px;
width: 88px; } }
@media (min-width: 37.5em) {
.segment__artist-image {
display: block;
float: left;
margin-right: 8px;
width: 88px; } }
.has-js .segment__button--snippet {
font-size: 10.1818192px;
display: block;
vertical-align: top;
text-align: center;
width: 4em; }
.segment__button--snippet .spt-snippet {
margin-bottom: 7px;
max-height: 4em;
overflow: hidden; }
/**
* .superpromo
* A superpromo aggregation object with an image,
* title, synopsis and related links
*/
.superpromo__img {
display: block; }
.component--box--striped .superpromo__content {
padding-top: 8px;
padding-bottom: 8px; }
.superpromo__synopsis {
margin-bottom: 0px; }
.superpromo__related-links {
margin-top: 4px;
margin-bottom: 0px; }
/**
* .table
*
* For displaying tabular data
*/
.table {
border: 0;
width: 100%; }
.table th, .table td {
padding: 1px;
border-style: none;
vertical-align: top; }
.table--slatted, .table--slatted-vertical {
border-style: hidden; }
.table--slatted th, .table--slatted td, .table--slatted-vertical th, .table--slatted-vertical td {
padding: 4px 8px;
border-width: 2px;
border-style: solid; }
.table--slatted-vertical th, .table--slatted-vertical td {
border-style: solid hidden; }
.timebar {
max-width: 185px;
padding: 4px 8px 8px; }
.timebar__blocks {
margin-top: 4px;
height: 4px; }
.timebar__blocks--8 {
background: #f54997; }
.timebar__box-active {
background: #f54997; }
.timebar-barbox {
display: inline-block;
height: 4px;
background: #444;
width: 13%;
margin-right: 1%;
vertical-align: top; }
.timebar-barbox--live {
width: 32%; }
.timebar-barbox-active {
background: #f54997; }
.timebar-barbox-lastchance, .timebar-barbox--live {
background: #444; }
@-webkit-keyframes lastchance {
0% {
background-color: #444; }
50% {
background-color: #f54997; }
80% {
background-color: #444; } }
@keyframes lastchance {
0% {
background-color: #444; }
50% {
background-color: #f54997; }
80% {
background-color: #444; } }
.timebar-barbox-lastchance, .timebar-barbox--live {
-webkit-animation: lastchance 3s infinite;
animation: lastchance 3s infinite; }
.timebar-barbox--live:nth-child(2) {
-webkit-animation-delay: 1s;
animation-delay: 1s; }
.timebar-barbox--live:nth-child(3) {
-webkit-animation-delay: 2s;
animation-delay: 2s; }
/*
http://imperavi.com/kube/forms/
re-wrote as its too common with classes such as .form
/* =Forms
-----------------------------------------------------------------------------*/
.progs-form fieldset {
padding: 8px;
border-radius: 4px; }
.progs-form fieldset.unstyled {
margin: 0;
padding: 0;
border: 0;
border-radius: 0; }
.progs-form fieldset.unstyled legend {
font-weight: bold;
padding: 0; }
.progs-form .req {
color: #D8000C;
font-weight: bold; }
.progs-form .progs-form__info--required .req, .progs-form .progs-form__label-title .req {
padding-right: 4px; }
.progs-form label {
font-weight: bold;
display: block; }
.progs-form .progs-form__label-title {
display: inline-block;
padding-bottom: 4px; }
.progs-form p {
margin: 0;
padding-bottom: 4px; }
.progs-form .progs-field {
display: block;
width: 90%; }
.progs-form input[type="radio"], .progs-form input[type="checkbox"] {
position: relative;
top: -1px; }
.progs-form li.progs-form__checkbox-revert {
position: relative; }
.progs-form li.progs-form__checkbox-revert label {
padding-left: 20px; }
.progs-form li.progs-form__checkbox-revert input {
position: absolute;
left: 0px;
top: 2px; }
.progs-form__info {
padding-bottom: 8px; }
.progs-form__row {
padding: 4px 0;
margin-bottom: 4px; }
.progs-form__row.progs-form__row--error {
padding: 4px;
border: 1px solid #D8000C;
background: #ffe5e5;
background: transparent\9;
background: rgba(255, 229, 229, 0.4);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66FFE5E5,endColorstr=#66FFE5E5);
zoom: 1; }
.progs-form__list, .progs-form__inline-list {
margin: 0;
padding: 0;
list-style: none; }
.progs-form--inline .progs-field, .progs-form__inline-list .progs-field {
display: inline-block; }
.progs-form__list label, .progs-form__inline-list li, .progs-form__inline-list li label, .progs-form__list .progs-form__label-title {
display: inline-block;
padding-bottom: 0;
margin-bottom: 0;
font-weight: normal; }
.progs-form__inline-list li {
margin-bottom: 4px; }
.progs-form__inline-list li label {
margin-right: 8px; }
.progs-form__list li {
margin-bottom: 4px; }
.progs-form__desc {
margin-top: 4px;
color: rgba(0, 0, 0, 0.4);
font-size: 12px;
line-height: 1.4em; }
.progs-field {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1;
font-size: 14px;
border-radius: 0;
background: #fff;
box-shadow: none;
border: 1px solid #bbbcc0;
outline: none;
padding: 6px 4px;
position: relative;
z-index: 2;
-moz-transition: border ease 0.5s;
transition: border ease 0.5s;
/* States */ }
.progs-field.progs-field--range {
position: relative;
top: 4px; }
.progs-field .error, .progs-field .success {
font-weight: normal;
font-size: 12px; }
.progs-field.progs-field--error {
border-color: #d70a16;
box-shadow: 0 0 0 2px rgba(215, 10, 22, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2) inset; }
.progs-field.progs-field--success {
border-color: #159776;
box-shadow: 0 0 0 2px rgba(21, 151, 118, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2) inset; }
.progs-field.progs-field--gray {
border-color: #ccc;
box-shadow: 0 0 0 2px rgba(204, 204, 204, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2) inset; }
.progs-field:focus {
outline: none;
border-color: #5ca9e4;
box-shadow: 0 0 0 2px rgba(70, 161, 231, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2) inset; }
.progs-field--search, input[type="search"].progs-field {
padding-right: 8px;
padding-left: 8px;
margin-bottom: 0;
border-radius: 15px; }
textarea.progs-field {
line-height: 1.4em;
height: 80px; }
select.progs-field {
margin-bottom: 0 !important; }
/* Append & Prepend */
.progs-form__groups {
display: table !important; }
.progs-form__groups input {
width: 100%; }
.progs-form__groups input, .progs-form__groups .input-append, .progs-form__groups .input-prepend, .progs-form__groups .btn-append {
display: table-cell !important; }
.progs-form__groups .btn-append, .progs-form__groups .input-append, .progs-form__groups .input-prepend {
width: 1%;
vertical-align: middle; }
.progs-form__groups .input-append, .progs-form__groups .input-prepend {
background-color: #eee;
border: 1px solid #ccc;
margin: 0;
padding: 0 8px;
color: rgba(0, 0, 0, 0.5);
line-height: 1;
font-size: 12px;
white-space: nowrap; }
.progs-form__groups .input-prepend {
border-right: none; }
.progs-form__groups .input-append {
position: relative;
z-index: 1;
border-left: none; }
.progs-form__groups .btn-append .btn {
display: block;
height: auto;
border-radius: 0 4px 4px 0; }
.third-party {
margin-left: auto;
margin-right: auto; }
.third-party iframe {
width: 100%; }
.third-party--youtube .third-party__embed, .third-party--instagram .third-party__embed, .third-party--touchcast .third-party__embed, .third-party--vimeo .third-party__embed, .third-party--vine .third-party__embed {
position: relative;
height: 0;
overflow: hidden; }
.third-party--youtube iframe, .third-party--instagram iframe, .third-party--touchcast iframe, .third-party--vimeo iframe, .third-party--vine iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.third-party--instagram {
max-width: 618px; }
.third-party--instagram .third-party__embed {
padding-bottom: 122%; }
@media (max-height: 760px) {
.third-party--instagram {
max-width: 416px; } }
@media (max-height: 528px) {
.third-party--instagram {
max-width: 308px; } }
.third-party--youtube .third-party__embed, .third-party--touchcast .third-party__embed, .third-party--vimeo .third-party__embed {
padding-bottom: 56.25%; }
.third-party--vine .third-party__embed {
padding-bottom: 100%; }
/**
* .popup
* A Mixed CSS/JavaScript popup object
* Without JS it uses the input element and sibling
* selector to open the popup inside the page flow
* With JS it moves the popup ouside the document flow and fades it in
*/
.popup__button {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1;
cursor: pointer; }
.popup__button label {
cursor: pointer; }
.popup__status {
display: none; }
.popup__holder {
position: relative; }
.popup__status:checked ~ .popup__holder {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
.popup__content {
position: relative; }
.popup__content--js {
position: absolute;
z-index: 9999; }
.popup__close {
cursor: pointer; }
.popup__button--subscribe {
padding: 8px 16px;
min-width: 117px; }
.popup__content--subscribe {
max-width: 400px; }
.popup__content--subscribe:before {
content: ' ';
position: absolute;
top: -8px;
left: 8px;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom-style: solid;
border-bottom-width: 8px;
border-top: none; }
.popup__content--subscribe .popup__close {
position: relative;
border-bottom-width: 1px;
border-bottom-style: solid; }
/**
* Barlesque Helpers.
*
* Legacy helpers, in place to ensure to ensure some legacy 3rd party elements
* that don't support ORB just yet don't look too funky while we wait for them
* to update.
*
* Once all 3rd party dependencies have been updated to support ORB this should
* be removed.
*
* * Radio navigation
* * TV navigation
*/
.blq-hide {
position: absolute;
left: -2500px;
width: 1px;
overflow: hidden; }
.blq-clearfix {
_height: 1%; }
.blq-clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden; }
.grid--bounded {
max-width: 624px; }
@media (min-width: 37.5em) {
.bpw-grow-to-fit {
float: none;
width: auto;
overflow: auto; }
.bpw-one-whole-fixed {
width: 976px; }
.bpw-one-half-fixed {
width: 488px; }
.bpw-one-third-fixed {
width: 325.33008px; }
.bpw-two-thirds-fixed {
width: 650.66016px; }
.bpw-one-quarter-fixed {
width: 244px; }
.bpw-three-quarters-fixed {
width: 732px; }
.bpw-one-sixth-fixed {
width: 162.66016px; }
.bpw-five-sixths-fixed {
width: 813.33008px; }
.bpw-one-twelfth-fixed {
width: 81.33008px; }
.bpw-five-twelfths-fixed {
width: 406.66016px; }
.bpw-seven-twelfths-fixed {
width: 569.33008px; }
.bpw-eleven-twelfths-fixed {
width: 894.66016px; }
.bpw-nine-twentyfourths-fixed {
width: 366px; }
.bpw-fifteen-twentyfourths-fixed {
width: 610px; } }
.push-one-twentyfourth {
margin-left: 4.16666667%; }
.has-js .js-hideme {
display: none !important; }
.has-js .js-showme {
display: block !important; }
.js-active > .js-active-hideme {
display: none !important; }
.js-active > .js-active-showme {
display: block !important; }
.js-active .js-active-hideanyme {
display: none !important; }
.js-active .js-active-showanyme {
display: block !important; }
.js-inprogress > .js-inprogress-hideme {
display: none !important; }
.js-inprogress > .js-inprogress-showme {
display: block !important; }
.js-inprogress .js-inprogress-hideanyme {
display: none !important; }
.js-inprogress .js-inprogress-showanyme {
display: block !important; }
/**
* Buy Online Module
*
* Buy Online is a 3rd party module that includes its own basic styling.
* To ensue we have correct spacing we have to undo the spacing it sets.
*/
.buy-online-module .buy-online-module-header {
display: none;
line-height: inherit;
border-bottom: none; }
.buy-online-module .buy-online-module-header, .buy-online-module .buy-online-module-section, .buy-online-module .buy-online-module-section-inner {
margin: inherit;
padding: inherit; }
.buy-online-module .buy-online-module-section p {
padding: inherit; }
.buy-online-module .buy-online-module-section p:first-child, .buy-online-module .buy-online-module-section p:last-child {
margin-bottom: 0; }
/**
* Advert Module
*
* Adverts are 3rd party modules that include their own basic styling.
* To ensue we have correct spacing we have to undo the spacing it sets.
*/
.programme-advert--leaderboard-wrap .bbccom_slot .bbccom_advert, .programme-advert--sponsor-wrap .bbccom_slot .bbccom_advert {
margin-top: 0;
margin-bottom: 0; }
.programme-advert--leaderboard-wrap {
margin: 0 auto;
max-width: 976px;
padding: 0; }
@media (min-width: 37.5em) {
.programme-advert--leaderboard-wrap {
padding-left: 16px;
padding-right: 16px; } }
@media (min-width: 46.5em) and (max-width: 49em) {
.programme-advert--leaderboard-wrap {
padding-left: 0;
padding-right: 0; } }
/**
* For styling third party buttons (share/love/favourites)
*/
.buttons__share-small, .buttons__share-medium, .buttons__love-small, .buttons__love-medium {
display: inline-block;
max-width: 32px;
overflow: hidden;
font-size: 14px; }
.buttons--favourites-small {
display: inline-block;
height: 35px;
margin-top: -1px;
font-size: 21px; }
.buttons__share-large {
font-size: 1.1em; }
.buttons__share-medium {
max-width: 78px; }
.buttons__love-medium {
max-width: 84px; }
.buttons__download {
vertical-align: middle;
display: inline-block;
margin-right: 11px;
height: 33px; }
.buttons__download__link {
display: inline-block;
vertical-align: middle;
padding: 0 8px;
height: 30px;
line-height: 30px;
margin-top: -1px; }
.buttons__download__link i {
padding-right: 0.8em; }
/**
* Categories Navigation.
*
*/
/**
* Generic styling
*/
.categories-breadcrumb__item {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1;
padding: 4px 8px;
margin-top: -4px;
margin-bottom: -4px;
margin-left: -8px; }
.categories-navigation__options {
margin-bottom: 1em;
word-wrap: break-word; }
.categories-navigation__heading {
font-weight: normal; }
.categories-navigation a {
zoom: 1; }
.categories-navigation a:hover {
text-decoration: none; }
/**
* Top Navigation.
*
* Is an inline-block nav at small screen sizes. Changing position and reflowing
* is handled by the grid system, so here we just need to change presentation
* and don't need to worry about layout.
*/
.categories-navigation-top__options {
text-align: center;
overflow: hidden; }
.categories-navigation-top__link {
display: block;
padding: 0.25em 4px;
margin-bottom: -100px;
border-bottom: 100px solid transparent; }
.categories-navigation-top__link:hover {
border-color: transparent; }
.categories-navigation__item--fix .categories-navigation-top__link {
margin-bottom: 0;
border-bottom: 0;
padding: 0.75em 4px; }
/**
* Sort By.
*
* Is an inline, nav at small screen sizes. This is wrapped in a media query as
* we don't want to have to undo this css at larger sizes.
*/
.categories-navigation-sort-by__heading, .categories-navigation-sort-by__options {
display: inline-block; }
.categories-navigation-sort-by__options > li {
display: inline; }
.categories-navigation-sort-by__heading span:after {
content: ':'; }
.categories-navigation-sort-by__options > li a {
padding: 4px 8px; }
/**
* Filter By
*
* Is a button that when clicked displays a a list of items at small screen
* sizes.
*/
.categories-navigation-filter-by__button {
cursor: pointer; }
.categories-navigation-filter-by__options li {
display: block; }
.categories-navigation-filter-by__options {
position: relative;
padding-top: 4px;
margin-top: -10px; }
.categories-navigation-filter-by__options:before {
position: absolute;
content: "";
left: 8px;
top: -16px;
border-style: solid;
border-width: 8px;
border-right-color: transparent !important;
border-top-color: transparent !important;
border-left-color: transparent !important;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=15);
opacity: 0.15; }
.categories-navigation-filter-by__link {
display: block;
padding: 0.25em 8px; }
@media (min-width: 20em) and (max-width: 21.875em) {
.categories-navigation-top__link {
font-size: 1em;
line-height: 1.28571429;
padding-left: 0;
padding-right: 0; } }
@media (min-width: 20em) and (max-width: 37.4375em) {
.categories-navigation-filter-by__options {
margin-top: -10px; } }
@media (min-width: 37.5em) {
/**
* Generic styling.
*
* At large sizes navigation is a vertical list.
*/
.categories-navigation__heading {
margin-bottom: 8px;
padding: 0.25em 8px;
margin-top: -0.25em;
margin-left: -8px; }
.categories-navigation__options, .categories-navigation__options li {
display: block; }
.categories-navigation__link {
display: block;
padding: 0.25em 8px;
margin-left: -8px; }
/**
* Top Navigation.
*
* Undo styling set at the basic size.
*/
.categories-navigation-top__options {
text-align: left;
overflow: inherit; }
.categories-navigation-top__options li {
display: inline-block;
*display: inline;
*vertical-align: auto;
zoom: 1; }
.categories-navigation-top__link {
margin-bottom: 0;
border-bottom-style: none; }
.categories-navigation__item--fix .categories-navigation-top__link {
padding-top: 0.25em;
padding-bottom: 0.25em; }
/**
* Sort By.
*
* Undo styling set at the basic size.
*/
.categories-navigation-sort-by__heading, .categories-navigation-sort-by__options, .categories-navigation-sort-by__options > li {
display: block; }
.categories-navigation-sort-by__heading span:after {
content: ''; }
.categories-navigation-sort-by__options > li {
padding: 0; }
/**
* Filter By
*
* Undo styling set at the basic size.
*/
.categories-navigation-filter-by__options {
margin-top: 0;
padding-top: 0;
background: inherit;
filter: none; }
.categories-navigation-filter-by__options:before {
display: none; } }
@media (max-width: 37.4375em) {
.categories-navigation-top__heading, .categories-navigation-sort-by__heading {
background-color: inherit; } }
/**
* A to Z grid
*
* Defines minimum heights for programme--grid items at certain breakpoint sizes
*/
@media (min-width: 20em) and (max-width: 37.4375em) {
.atoz-grid-wrapper .bpb1-one-half .bpb1-programme--grid {
min-height: 152px; } }
@media (min-width: 30em) and (max-width: 37.4375em) {
.atoz-grid-wrapper .bpb2-one-third .bpb1-programme--grid {
min-height: 152px; } }
@media (min-width: 37.5em) {
.atoz-grid-wrapper .bpw-one-third .bpw-programme--grid {
min-height: 278px; } }
@media (min-width: 63em) {
.atoz-grid-wrapper .bpe-one-quarter .bpw-programme--grid {
min-height: 266px; } }
/**
* A to Z loader
*
* Make the A to Z lazy loaded programme objects slide in as they are lazy loaded
*/
.atoz-loader .highlight-box-wrapper > li {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: opacity 1s ease, -webkit-transform 1s ease;
-moz-transition: opacity 1s ease, -moz-transform 1s ease;
-o-transition: opacity 1s ease, -o-transform 1s ease;
transition: opacity 1s ease, transform 1s ease; }
.atoz-loader .highlight-box-wrapper > li:nth-child(4n+1) {
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s; }
.atoz-loader .highlight-box-wrapper > li:nth-child(4n+2) {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s; }
.atoz-loader .highlight-box-wrapper > li:nth-child(4n+3) {
-webkit-transition-delay: 0.4s;
-moz-transition-delay: 0.4s;
-o-transition-delay: 0.4s;
transition-delay: 0.4s; }
.atoz-loader .highlight-box-wrapper > li:nth-child(4n+4) {
-webkit-transition-delay: 0.6s;
-moz-transition-delay: 0.6s;
-o-transition-delay: 0.6s;
transition-delay: 0.6s; }
.atoz-loader .lazy-module--loading .highlight-box-wrapper > li {
opacity: 0;
-webkit-transform: translate3d(0, 64px, 0);
-moz-transform: translate3d(0, 64px, 0);
-ms-transform: translate3d(0, 64px, 0);
-o-transform: translate3d(0, 64px, 0);
transform: translate3d(0, 64px, 0); }
.atoz-navigation {
margin-bottom: 8px;
word-wrap: break-word; }
.atoz-navigation {
overflow: hidden; }
.atoz-navigation a {
zoom: 1; }
.atoz-navigation a:hover {
text-decoration: none; }
.atoz-navigation__link {
display: block;
padding: 0.25em 4px;
margin-bottom: -100px;
border-bottom: 100px solid transparent;
text-align: center;
-webkit-tap-highlight-color: transparent; }
.atoz-navigation__link:hover {
border-color: transparent; }
@media (max-width: 48.125em) {
.atoz-navigation--long .atoz-navigation__link {
margin-bottom: 0;
border-bottom: 0; } }
@media (min-width: 20em) and (max-width: 21.875em) {
.atoz-navigation__link {
font-size: 1em;
line-height: 1.28571429;
padding-left: 0;
padding-right: 0; } }
@media (min-width: 37.5em) {
.atoz-navigation {
margin-bottom: 16px; }
.atoz-navigation__link {
display: block;
padding: 0.25em 8px; } }
.search {
background: #4A4848;
border: none;
border-bottom: solid 1px #707070;
margin-top: 8px;
padding-right: 8px; }
.search__label {
width: 90%;
display: inline-block; }
.search__input {
padding: 8px;
font-size: 1.2em;
background: transparent;
border: none;
color: #efefef;
width: 100%; }
.search__button {
width: 10%;
background: transparent;
border: none;
color: #efefef;
display: inline-block;
text-align: right; }
.love-box {
display: none;
margin-top: -8px;
margin-bottom: 8px;
overflow: hidden;
border-top-style: solid;
border-top-width: 1px; }
.love-box__button-wrapper {
width: 85px;
height: 30px;
float: right;
border-left-style: solid;
border-left-width: 1px; }
.love-box__dummy-spacer {
height: 30px; }
@media (min-width: 20em) and (max-width: 37.4375em) {
.love-box {
display: block; } }
@media (min-width: 37.5em) {
.love-box {
display: block;
margin-top: -16px;
margin-bottom: 16px; } }
/**
* Clips listing page grid
*
* Defines minimum heights for programme--grid items at certain breakpoint sizes
*/
/*
.clips-grid-wrapper {
@include breakup-breakpoint('bpb1') {
.bpb1-one-half .bpb1-programme--grid { min-height: 230px; }
}
@include breakup-breakpoint('bpb2') {
.bpb2-one-half .bpb1-programme--grid { min-height: 250px; }
}
@include breakup-breakpoint('bpw') {
.bpw-one-third .bpw-programme--grid { min-height: 290px; }
}
@include breakup-breakpoint('bpe') {
.bpe-one-third .bpw-programme--grid { min-height: 290px; }
.bpe-one-quarter .bpw-programme--grid { min-height: 260px; }
}
}
*/
/**
* Schedules weekly guide
*/
.week-guide__alternative li {
margin: 0 1px 1px 0; }
.week-guide__table {
width: 100%;
min-width: 1024px;
border-collapse: collapse;
border-spacing: 0;
table-layout: fixed; }
.week-guide__table, .week-guide__table tr, .week-guide__table th, .week-guide__table td {
border-style: solid; }
.week-guide__table .highlight-box--list {
padding: 8px;
margin: 0;
border: 0;
top: 0;
margin-bottom: 8px;
*padding-left: 0;
*padding-right: 0; }
.week-guide__table li:last-child .highlight-box--list {
margin-bottom: 0; }
.week-guide__table .programme__icon--orphaned {
display: none; }
.week-guide__table__nav {
line-height: 32px; }
.week-guide__table__nav .gelicon {
line-height: 1; }
.week-guide__table .week-guide__table__day {
width: 11.5%; }
.week-guide__table .week-guide__table__day a {
height: 32px; }
.week-guide__table, .week-guide__table tr, .week-guide__table td, .week-guide__table th {
padding: 0;
vertical-align: top; }
.week-guide__table, .week-guide__table thead .week-guide__table__days-row, .week-guide__table thead .week-guide__table__nav, .week-guide__table thead .week-guide__table__day, .week-guide__table tbody, .week-guide__table .trail, .week-guide__table .hour {
border-width: 0; }
.week-guide__table .day-0 {
border-width: 0 1px 0 0; }
.week-guide__table .day-1, .week-guide__table .day-2, .week-guide__table .day-3, .week-guide__table .day-4, .week-guide__table .day-5 {
border-width: 0 1px; }
.week-guide__table .day-6 {
border-width: 0 0 0 1px; }
.week-guide__table__hour-row {
border-width: 0 0 1px 0; }
.week-guide__table__hour {
padding: 8px 0;
display: block;
font-size: 1.3em;
font-weight: normal; }
.week-guide__table .broadcast__live {
margin-bottom: 4px; }
.week-guide__table .week-guide__table__gap {
padding: 8px;
font-style: italic;
font-size: 0.8em; }
.week-guide__table .week-guide__table__gap .delta, .week-guide__table .week-guide__table__gap h4, .week-guide__table .week-guide__table__gap .smp__message {
margin: 0; }
@media (min-width: 37.5em) {
.weeknav--tvschedule {
margin-top: -40px; }
.week-guide__table {
min-width: 767px; } }
@media (min-width: 47.9375em) {
.week-guide__alternative {
display: none; }
.week-guide__table-box {
display: block !important; } }
/**
* TV channels nav
*
*/
/**
* Generic styling
*/
.tv-channels {
width: 194px;
margin-left: auto;
margin-right: auto;
text-align: center;
margin-bottom: 8px; }
.tv-channels__listitem {
vertical-align: top; }
.tv-channels__item {
width: 96px;
height: 41px;
background-image: url("../img/logos/services_channel_sprite.png");
background-repeat: no-repeat;
background-position: 0 0;
margin: 0 1px 1px 0; }
.tv-channels__item--bbc_world_news {
display: none !important; }
.tv-channels__item--bbc_one {
background-position: 0 0; }
.tv-channels__item--bbc_two {
background-position: 0 -41px; }
.tv-channels__item--bbc_three {
background-position: 0 -82px; }
.tv-channels__item--bbc_four {
background-position: 0 -123px; }
.tv-channels__item--cbbc {
background-position: 0 -164px; }
.tv-channels__item--cbeebies {
background-position: 0 -205px; }
.tv-channels__item--bbc_hd {
background-position: 0 -246px; }
.tv-channels__item--bbc_news24 {
background-position: 0 -287px; }
.tv-channels__item--bbc_parliament {
background-position: 0 -328px; }
.tv-channels__item--bbc_alba {
background-position: 0 -369px; }
.tv-channels__item--s4cpbs {
background-position: 0 -410px; }
.tv-channels__item--bbc_one.tv-channels__item--active, .tv-channels__item--bbc_one:hover, .tv-channels__item--bbc_one:active, .tv-channels__item--bbc_one:focus {
background-position: -96px 0; }
.tv-channels__item--bbc_two.tv-channels__item--active, .tv-channels__item--bbc_two:hover, .tv-channels__item--bbc_two:active, .tv-channels__item--bbc_two:focus {
background-position: -96px -41px; }
.tv-channels__item--bbc_three.tv-channels__item--active, .tv-channels__item--bbc_three:hover, .tv-channels__item--bbc_three:active, .tv-channels__item--bbc_three:focus {
background-position: -96px -82px; }
.tv-channels__item--bbc_four.tv-channels__item--active, .tv-channels__item--bbc_four:hover, .tv-channels__item--bbc_four:active, .tv-channels__item--bbc_four:focus {
background-position: -96px -123px; }
.tv-channels__item--cbbc.tv-channels__item--active, .tv-channels__item--cbbc:hover, .tv-channels__item--cbbc:active, .tv-channels__item--cbbc:focus {
background-position: -96px -164px; }
.tv-channels__item--cbeebies.tv-channels__item--active, .tv-channels__item--cbeebies:hover, .tv-channels__item--cbeebies:active, .tv-channels__item--cbeebies:focus {
background-position: -96px -205px; }
.tv-channels__item--bbc_hd.tv-channels__item--active, .tv-channels__item--bbc_hd:hover, .tv-channels__item--bbc_hd:active, .tv-channels__item--bbc_hd:focus {
background-position: -96px -246px; }
.tv-channels__item--bbc_news24.tv-channels__item--active, .tv-channels__item--bbc_news24:hover, .tv-channels__item--bbc_news24:active, .tv-channels__item--bbc_news24:focus {
background-position: -96px -287px; }
.tv-channels__item--bbc_parliament.tv-channels__item--active, .tv-channels__item--bbc_parliament:hover, .tv-channels__item--bbc_parliament:active, .tv-channels__item--bbc_parliament:focus {
background-position: -96px -328px; }
.tv-channels__item--bbc_alba.tv-channels__item--active, .tv-channels__item--bbc_alba:hover, .tv-channels__item--bbc_alba:active, .tv-channels__item--bbc_alba:focus {
background-position: -96px -369px; }
.tv-channels__item--s4cpbs.tv-channels__item--active, .tv-channels__item--s4cpbs:hover, .tv-channels__item--s4cpbs:active .tv-channels__item--s4cpbs:focus {
background-position: -96px -410px; }
@media (min-width: 30em) and (max-width: 37.4375em) {
.tv-channels {
width: 388px; } }
@media (min-width: 37.5em) {
.tv-channels {
width: 485px; } }
@media (min-width: 63em) {
.tv-channels {
width: auto; } }
/**
* Fixed Navigation
*
* Styling for Fixed navbar and positioning fragment links so that they aren't
* hidden beneath the navbar.
*/
.fixed-supported .schedule-nav-wrapper {
top: 0;
width: 100%;
z-index: 1000; }
.fixed-supported .schedule-skip-link, .fixed-supported .schedule-skip-link-on-now {
padding-top: 56px;
margin-top: -56px;
overflow: hidden; }
.fixed-supported li:hover + .schedule-skip-link-on-now {
margin-top: -57px; }
/**
* Heading Links
*
* Links that sit on the same line as a .alpha - tweak margins so that the links
* appear vertically centered with the heading text.
*/
.heading-links {
margin-top: 0;
margin-bottom: 0; }
.heading-links > li, .schedules-jump__links > li {
border-right-style: none; }
.schedules-jump__links > li {
margin-right: 0;
padding-right: 0;
margin-left: 8px;
padding-left: 8px; }
.schedules-jump__title {
margin-right: 8px; }
.schedules-jump__links {
overflow: hidden; }
@media (min-width: 20em) and (max-width: 37.4375em) {
.heading-links {
margin-top: 4px;
margin-bottom: 4px; } }
@media (min-width: 37.5em) {
.heading-links {
margin-top: 7px;
margin-bottom: 7px; }
.schedules-jump__title {
margin-right: 16px; }
.heading-links > li, .schedules-jump__links > li {
border-right-style: solid;
margin-left: 0;
padding-left: 0;
margin-right: 16px;
padding-right: 16px; } }
.schedule-reload-container.lazy-module--loading--loader.lazy-module--loading:before, .schedule-reload-container.lazy-module--loading.lazy-module--loading--loader-transparent:before {
position: absolute;
top: 50px;
bottom: auto;
left: 50%;
margin-left: -20px;
z-index: 1002; }
.schedule-reload-container.lazy-module--loading--loader.lazy-module--loading:after, .schedule-reload-container.lazy-module--loading.lazy-module--loading--loader-transparent:after {
background-image: none;
z-index: 1001; }
.footer-wrapper {
border-top: solid 1px;
padding-top: 8px; }
.footer {
overflow: hidden; }
.footer__service, .footer__service-nav {
color: #ffffff; }
.footer__service a:link, .footer__service a:visited, .footer__service a:hover, .footer__service a:active, .footer__service a:focus, .footer__service-nav a:link, .footer__service-nav a:visited, .footer__service-nav a:hover, .footer__service-nav a:active, .footer__service-nav a:focus {
color: #ffffff; }
.footer__service__logo img {
max-width: 100%; }
.footer__service__nav__list {
padding-top: 8px; }
.footer__service__navitem {
margin-bottom: 8px; }
.footer__watch-live {
display: none; }
.footer__service-island {
padding-left: 8px;
padding-right: 8px; }
@media (min-width: 400px) {
.footer__service-island {
padding-left: 16px;
padding-right: 16px; } }
@media (min-width: 37.5em) {
.footer__service-island {
padding-left: 16px;
padding-right: 16px; } }
@media (min-width: 48.125em) and (max-width: 62.9375em) {
.footer-wrapper {
padding-bottom: 8px; }
.footer__recommendations {
padding-right: 15px;
border-right: solid 1px; }
.footer__similar {
padding-left: 0; }
.footer__service__nav {
padding-left: 0;
padding-right: 0;
margin-right: 16px; }
.footer__watch-live {
display: block; } }
@media (min-width: 63em) {
.footer-wrapper {
padding-bottom: 8px; }
.footer__recommendations {
padding-right: 15px;
border-right: solid 1px; }
.footer__similar {
padding-left: 0; }
.footer__service__nav {
padding-left: 0;
padding-right: 0;
margin-right: 16px; }
.footer__watch-live {
display: block; }
.footer .b-g-p {
width: auto; } }
.map {
overflow: hidden; }
.map__column {
margin-top: 8px; }
.map__central {
overflow: hidden; }
.map__central .grid__inner {
margin-bottom: -50em;
padding-bottom: 50em; }
.map--programmes-count-3 .map__column--2 .map__inner, .map--programmes-count-4 .map__column--2 .map__inner {
margin-right: 4px; }
.map--programmes-count-3 .map__column--3 .map__inner, .map--programmes-count-4 .map__column--3 .map__inner {
margin-left: 4px; }
.map--franchise-count-3 .map__column--2 {
overflow: hidden; }
.map__promo.br-keyline {
border-bottom-width: 1px;
border-bottom-style: solid; }
.map__promo .promotion--overlay .promotion__body {
position: static; }
.map__promo .promotion--grid .promotion__titles, .map__promo .promotion--grid-full .promotion__titles {
margin-bottom: 0; }
.map__buttons {
vertical-align: middle;
margin-right: 11px; }
.map__buy__title, .map__buy__where {
display: inline; }
.map__buy__where {
margin-left: 8px; }
.map__buy__intro {
margin-bottom: 16px; }
.map__buy_subhead {
float: left;
margin: 0 8px 0 0; }
@media (min-width: 20em) and (max-width: 37.4375em) {
.map__promo .promotion--overlay .promotion__body {
position: absolute; } }
@media (min-width: 37.5em) {
.map__initial, .map--count-2, .map--count-3 {
overflow: hidden; }
.map__initial .grid__inner, .map--count-2 .grid__inner, .map--count-3 .grid__inner {
margin-bottom: -50em;
padding-bottom: 50em; }
.map__initial--franchise {
overflow: visible; }
.map--franchise-count-3 .map__column--2 {
overflow: visible; }
.map__central {
overflow: visible; }
.map__column {
margin-top: 2px; }
.map--count-3 .map__column--2 .map__inner, .map--count-4 .map__column--2 .map__inner {
margin-right: 1px; }
.map--count-3 .map__column--3 .map__inner, .map--count-4 .map__column--3 .map__inner {
margin-left: 1px; }
.map__column--first .map__inner {
margin-right: 1px; }
.map__column--2 .map__inner {
margin-left: 1px; }
.map--count-4 .map__column--last .map__inner {
margin-left: 0; }
.map--count-4 .map__column--3 .map__inner {
margin-right: 0; }
.map--episode .map__column {
margin-top: 8px; }
.map--episode .grid__inner {
margin-bottom: 0;
padding-bottom: 0; } }
@media (min-width: 48.125em) and (max-width: 62.9375em) {
.map__promo .promotion--overlay .promotion__body {
position: absolute; }
.map--episode .map__column {
margin-top: 2px; }
.map--episode .grid__inner {
margin-bottom: -50em;
padding-bottom: 50em; } }
@media (min-width: 63em) {
.map--count-4 .map__column--last .map__inner {
margin-left: 1px; }
.map--count-4 .map__column--3 .map__inner {
margin-right: 1px; }
.map .grid__inner {
margin-bottom: -50em;
padding-bottom: 50em; }
.map__initial {
overflow: visible; }
.map__promo .promotion--overlay .promotion__body {
position: absolute; }
.map__buy__title {
display: block; }
.map__buy__where {
border: 0;
margin-left: 0;
margin-right: 0;
padding: 0;
display: block; }
.map__buy__intro {
margin-bottom: 0; }
.map__buy__available {
margin-bottom: 16px; }
.map--episode .map__column {
margin-top: 2px; }
.map--episode .grid__inner {
margin-bottom: -50em;
padding-bottom: 50em; } }
@media (min-width: 48em) and (max-width: 62.9375em) {
.map__buy__intro, .map__buy__detail {
display: inline-block;
*display: inline;
vertical-align: top;
margin-bottom: 0; }
.map__buy__where {
padding-left: 16px;
padding-right: 16px;
border-left-style: solid;
border-right-style: solid;
border-right-width: 1px;
border-left-width: 1px;
margin-left: 16px;
padding-top: 8px;
padding-bottom: 8px; }
.map__buy__intro {
padding-right: 16px; }
.map__buy__detail {
width: 58%; } }
.episode-panel__meta {
margin-top: 0;
margin-bottom: 4px; }
.episode-panel__intro {
overflow: hidden;
padding-bottom: 8px;
padding-right: 8px; }
.episode-panel__popout {
display: none; }
@media (min-width: 63em) {
.episode-panel__popout .gelicon {
display: block;
width: 48px;
height: 48px;
text-align: center;
line-height: 48px;
font-size: 18px; }
.episode-panel__popout:link, .episode-panel__popout:visited {
display: block;
color: #fff;
background: #000;
margin-right: 16px;
text-decoration: none;
float: left; }
.episode-panel__popout:hover, .episode-panel__popout:active, .episode-panel__popout:focus {
text-decoration: none !important;
color: #fff !important;
background: #f54997 !important; } }
.clip-panel__clip-is-from__heading {
padding-left: 8px;
padding-right: 8px;
margin-bottom: 8px; }
.clip-panel__buttons {
max-width: 47%; }
@media (min-width: 20em) and (max-width: 37.4375em) {
.clip-panel__buttons {
max-width: 51%; } }
@media (min-width: 25em) {
.clip-panel__buttons {
max-width: 42%; } }
@media (min-width: 37.5em) {
.clip-panel__clip-is-from__heading {
padding-left: 16px;
padding-right: 16px; } }
@media (min-width: 48.125em) and (max-width: 62.9375em) {
.clip-panel__credits {
margin-bottom: 0; }
.clip-panel__clip-is-from {
padding-top: 16px;
padding-right: 16px; }
.clip-panel__clip-is-from__heading {
padding-left: 0;
padding-right: 0; } }
@media (min-width: 63em) {
.clip-panel__credits {
margin-bottom: 0; }
.clip-panel__clip-is-from {
padding-top: 16px;
padding-right: 16px; }
.clip-panel__clip-is-from__heading {
padding-left: 0;
padding-right: 0; } }
.gallery__listlink__icon, .gallery__listlink__text {
display: inline-block;
height: 2.2em;
line-height: 2.15em;
vertical-align: middle; }
.gallery__listlink__icon {
width: 2.2em;
text-align: center; }
.gallery__listlink__icon i {
font-size: 1.05em; }
.gallery__positiontext {
vertical-align: middle; }
.gallery__sharebtn__inner {
width: 32px;
vertical-align: middle;
display: inline-block;
margin-left: 8px;
line-height: 0;
overflow: hidden; }
/**
* View container for gallery image display, but not thumbnails.
* This exists to anchor the previous/next arrows and to hide the
* horizontal scrollbar
*/
.gallery-slideshow {
overflow: hidden;
clear: both;
position: relative;
margin-bottom: 16px; }
.gallery-slideshow:hover .gallery__previousnext {
visibility: visible;
opacity: 0.5; }
.gallery-slideshow .gallery__previousnext:hover {
opacity: 1; }
.gallery-slideshow--touched .gallery__previousnext {
display: none; }
/**
* The window div is (once the scrollable class is added in Gallery.js)
* the window into the scrolling "tableau" element behind it
* which users can scroll back and forth over to move through the gallery
*/
.gallery-slideshow__window {
position: relative;
width: 100%;
overflow: hidden; }
.gallery-slideshow__window--scrollable {
overflow-x: auto;
overflow-y: hidden;
z-index: 1;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: scrollbar;
-ms-scroll-chaining: none; }
.gallery-slideshow__window--scrollable::-webkit-scrollbar, .gallery-slideshow__window--scrollable::-webkit-scrollbar-thumb, .gallery__hidescrollbars {
display: none; }
/**
* The following classes only apply once activated by Gallery.js
* the image display is a pretty simple 100% width affair until these classes
* kick in.
* These allow 2 extra images to the left and right of the displayed image
* for scrolling, and an image behind to fade to.
*/
.gallery-slideshow--initialised .gallery-slideshow__tableau {
width: 300%;
position: relative; }
.gallery-slideshow--initialised .gallery-slideshow__slide {
width: 33.333333%;
display: inline-block;
position: relative;
visibility: hidden;
vertical-align: top;
z-index: 1; }
.gallery-slideshow--initialised .gallery-slideshow__slide--current, .gallery-slideshow--initialised .gallery-slideshow__slide--next, .gallery-slideshow--initialised .gallery-slideshow__slide--previous {
visibility: visible;
z-index: 5; }
.gallery-slideshow--initialised .gallery-slideshow__slide--current {
opacity: 1; }
.gallery-slideshow--initialised .gallery-slideshow__slide--fadeout {
opacity: 0; }
.gallery-slideshow--initialised .gallery-slideshow__slide--behind {
visibility: visible;
left: 33.333333%;
position: absolute;
top: 0;
z-index: 4; }
.gallery-slideshow__imgholder {
width: 100%;
padding: 0 0 56.25% 0;
position: relative; }
.gallery-slideshow__imgholder img {
position: absolute;
top: 0;
left: 0;
max-height: 100%; }
.gallery-slideshow__imgholder::before {
width: 24px;
height: 24px;
left: 50%;
top: 50%;
position: absolute;
margin: -12px 0 0 -12px; }
.gallery__previousnext {
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
display: block;
position: absolute;
top: 50%;
margin-top: -24px;
width: 48px;
height: 48px;
line-height: 48px;
background-color: #000000;
background-color: rgba(0, 0, 0, 0.65);
text-align: center;
opacity: 0;
z-index: 9999;
visibility: hidden; }
.gallery__previousnext .gelicon {
font-size: 16px;
color: #ffffff; }
a.gallery__previousnext:hover, a.gallery__previousnext:active, a.gallery__previousnext:focus {
text-decoration: none; }
.gallery__previousnext--prev {
left: 0; }
.gallery__previousnext--next {
right: 0; }
.gallery--imgview .gallery__thumblist {
display: none; }
.gallery--imgview.gallery--initialised .gallery__thumblist {
display: block; }
.gallery__thumblist {
clear: both;
margin-bottom: 16px; }
.gallery__thumbnail {
position: relative;
display: block;
margin-bottom: 4px;
box-sizing: border-box; }
.gallery__thumbnail.gallery__thumbnail--active {
border-width: 2px;
border-style: solid;
margin: -2px;
margin-bottom: 2px; }
.gallery-extras {
overflow: hidden;
position: relative; }
@media (min-width: 37.5em) {
.gallery__thumbnail {
margin-bottom: 8px; }
.gallery__thumbnail.gallery__thumbnail--active {
margin-bottom: 6px; }
.gallery__previousnext {
margin-top: -36px;
width: 72px;
height: 72px;
line-height: 72px; }
.gallery__previousnext .gelicon {
font-size: 24px; }
.gallery__caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: #000000;
background-color: rgba(0, 0, 0, 0.6);
color: #ffffff; }
.gallery-slideshow__imgholder::before {
width: 40px;
height: 40px;
position: absolute;
margin: -20px 0 0 -20px; } }
@media print {
* {
background: transparent !important;
color: black !important;
text-shadow: none !important;
filter: none !important;
-ms-filter: none !important;
opacity: 1 !important; }
/* black prints faster: sanbeiji.com/archives/953 */
a, a:visited {
color: #444 !important;
text-decoration: none; }
/*
DISABLED unless decided otherwise - prints the url after every link
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* don't show links for images, or javascript/internal links */
pre, blockquote {
border: 1px solid #999;
page-break-inside: avoid; }
thead {
display: table-header-group; }
/* css-discuss.incutio.com/wiki/Printing_Tables */
tr, img {
page-break-inside: avoid; }
@page {
margin: 0.5cm; }
p, h2, h3 {
orphans: 3;
widows: 3; }
h2, h3 {
page-break-after: avoid; }
#orb-header, #orb-footer, .branding-productnav-container, .rsn-nonjs-wrapper, #branding-masthead, .br-masthead, #programmes-footer, .programme__favourites, .programme__versions, .block-link__overlay-link {
display: none !important; }
.programme__synopsis {
display: block !important; }
h1, h1.visually-hidden, h1.context__item:first-child, h1 .visually-hidden, h1 .context__item:first-child, #schedule-header {
clip: auto !important;
height: auto !important;
width: auto !important;
margin: inherit !important;
position: static !important;
overflow: visible !important; }
h1 {
margin-bottom: 16px; }
.map__buttons {
display: none; }
.segment__buttons .favourites-module-wrapper {
display: none !important; }
.ml__hidden {
clip: auto !important;
height: auto !important;
width: auto !important;
margin: inherit !important;
position: static !important;
overflow: visible !important; }
.ml__button, .ml__ellipsis {
display: none !important; }
.weeknav--tvschedule, .daynav--tvschedule {
margin-top: 0 !important; }
#schedule-header .nav--piped, #schedule-daynav, .tv-channels, .tomorrow-bar, #last-week, #next-week, .week-guide .trail, .week-guide__alternative {
display: none !important; }
.week-guide__table .week-guide__table__day {
width: auto; }
.week-guide__table-box {
display: block !important; }
.week-guide__table {
min-width: 0; }
.week-guide__table td {
font-size: 0.9em; } }