/*
 *  ------------
 *  BASE COLOURS
 *  ------------
 *  Corporate, Press and Network Homepage sites.
 *
 *  If a site does not have it's own 'colours.less' file, then it uses this one. So because Corporate, Press and
 *  Network are all very similar, none of them have their own and therefore this file contains the colour variables that
 *  govern all of them. All other sites will have their own 'colours.less' file.
 *
 *  This also applies for variables.less and site-fonts.less.
 */
/*
 *  Basics | Corp | Press | Network
 *  -------------------------------
 */
/*
 *  Navigation | Corp | Press | Network
 *  -----------------------------------
 */
/*
 *  Footer | Corp | Press | Network
 *  -------------------------------
 */
/*
 *  Buttons | Corp | Press | Network
 *  --------------------------------
 *  All types of buttons, including arrows on carousels & tags
 */
/*
 *  Widgetz & Page Elements | Corp | Press | Network
 *  ------------------------------------------------
 */
/*
 *  TV GUIDE | Corp | Press | Network
 *  ---------------------------------
 */
/*
 *  Carousels & Galleries | Corp | Press | Network
 *  ----------------------------------------------
 */
/*
 *  Programmes / Brand Pages | Corp | Press | Network
 *  -------------------------------------------------
 */
/*
 *  VOD - Watch Episode Page | Corp | Press | Network
 *  -------------------------------------------------
 */
/*
 *  Articles | Corp | Press | Network
 *  ---------------------------------
 *  NOTE : Title & Intro text defined as @single_page_title_colour & @single_page_title_colour
 *  as these are global styles for similar pages such as video or gallery
 */
/*
 *  Other Stuff & Misc | Corp | Press | Network
 *  -------------------------------------------
 */
/*
 *  Forms | Corp | Press | Network
 *  ------------------------------
 *  Used throughout the site, such as Newsletter Signup, Login and Registration and Contact form
 */
/*
 *  Login / Register / My UKTV  | Corp | Press | Network
 *  ---------------------------------------------------
 */
/*
 *  User Profile | Network
 *  ----------------------
 */
/*
 *  Competitions | Network
 *  ----------------------
 */
/*
 *  Newsletter Archive | Network
 *  ----------------------------
 */
/*
 *  Quiz | Corp | Press | Network
 *  -----------------------------
 */

/*!
 * Bootstrap v3.0.0
 *
 * Copyright 2013 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world by @mdo and @fat.
 */
/*! normalize.css v2.1.0 | MIT License | git.io/normalize */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}
audio,
canvas,
video {
  display: inline-block;
}
audio:not([controls]) {
  display: none;
  height: 0;
}
[hidden] {
  display: none;
}
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
body {
  margin: 0;
}
a:focus {
  outline: thin dotted;
}
a:active,
a:hover {
  outline: 0;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
dfn {
  font-style: italic;
}
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}
mark {
  background: #ff0;
  color: #000;
}
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}
pre {
  white-space: pre-wrap;
}
q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  border: 0;
}
svg:not(:root) {
  overflow: hidden;
}
figure {
  margin: 0;
}
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}
legend {
  border: 0;
  padding: 0;
}
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}
button,
input {
  line-height: normal;
}
button,
select {
  text-transform: none;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}
button[disabled],
html input[disabled] {
  cursor: default;
}
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
textarea {
  overflow: auto;
  vertical-align: top;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
.btn:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
.btn:hover,
.btn:focus {
  color: #333333;
  text-decoration: none;
}
.btn:active,
.btn.active {
  outline: 0;
  background-image: none;
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
}
.btn-default {
  color: #333333;
  background-color: #ffffff;
  border-color: #cccccc;
}
.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
  color: #333333;
  background-color: #ebebeb;
  border-color: #adadad;
}
.btn-default:active,
.btn-default.active,
.open .dropdown-toggle.btn-default {
  background-image: none;
}
.btn-default.disabled,
.btn-default[disabled],
fieldset[disabled] .btn-default,
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
fieldset[disabled] .btn-default:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus,
fieldset[disabled] .btn-default:focus,
.btn-default.disabled:active,
.btn-default[disabled]:active,
fieldset[disabled] .btn-default:active,
.btn-default.disabled.active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default.active {
  background-color: #ffffff;
  border-color: #cccccc;
}
.btn-primary {
  color: #ffffff;
  background-color: #428bca;
  border-color: #357ebd;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  color: #ffffff;
  background-color: #3276b1;
  border-color: #285e8e;
}
.btn-primary:active,
.btn-primary.active,
.open .dropdown-toggle.btn-primary {
  background-image: none;
}
.btn-primary.disabled,
.btn-primary[disabled],
fieldset[disabled] .btn-primary,
.btn-primary.disabled:hover,
.btn-primary[disabled]:hover,
fieldset[disabled] .btn-primary:hover,
.btn-primary.disabled:focus,
.btn-primary[disabled]:focus,
fieldset[disabled] .btn-primary:focus,
.btn-primary.disabled:active,
.btn-primary[disabled]:active,
fieldset[disabled] .btn-primary:active,
.btn-primary.disabled.active,
.btn-primary[disabled].active,
fieldset[disabled] .btn-primary.active {
  background-color: #428bca;
  border-color: #357ebd;
}
.btn-warning {
  color: #ffffff;
  background-color: #f0ad4e;
  border-color: #eea236;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning {
  color: #ffffff;
  background-color: #ed9c28;
  border-color: #d58512;
}
.btn-warning:active,
.btn-warning.active,
.open .dropdown-toggle.btn-warning {
  background-image: none;
}
.btn-warning.disabled,
.btn-warning[disabled],
fieldset[disabled] .btn-warning,
.btn-warning.disabled:hover,
.btn-warning[disabled]:hover,
fieldset[disabled] .btn-warning:hover,
.btn-warning.disabled:focus,
.btn-warning[disabled]:focus,
fieldset[disabled] .btn-warning:focus,
.btn-warning.disabled:active,
.btn-warning[disabled]:active,
fieldset[disabled] .btn-warning:active,
.btn-warning.disabled.active,
.btn-warning[disabled].active,
fieldset[disabled] .btn-warning.active {
  background-color: #f0ad4e;
  border-color: #eea236;
}
.btn-danger {
  color: #ffffff;
  background-color: #d9534f;
  border-color: #d43f3a;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger {
  color: #ffffff;
  background-color: #d2322d;
  border-color: #ac2925;
}
.btn-danger:active,
.btn-danger.active,
.open .dropdown-toggle.btn-danger {
  background-image: none;
}
.btn-danger.disabled,
.btn-danger[disabled],
fieldset[disabled] .btn-danger,
.btn-danger.disabled:hover,
.btn-danger[disabled]:hover,
fieldset[disabled] .btn-danger:hover,
.btn-danger.disabled:focus,
.btn-danger[disabled]:focus,
fieldset[disabled] .btn-danger:focus,
.btn-danger.disabled:active,
.btn-danger[disabled]:active,
fieldset[disabled] .btn-danger:active,
.btn-danger.disabled.active,
.btn-danger[disabled].active,
fieldset[disabled] .btn-danger.active {
  background-color: #d9534f;
  border-color: #d43f3a;
}
.btn-success {
  color: #ffffff;
  background-color: #5cb85c;
  border-color: #4cae4c;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
  color: #ffffff;
  background-color: #47a447;
  border-color: #398439;
}
.btn-success:active,
.btn-success.active,
.open .dropdown-toggle.btn-success {
  background-image: none;
}
.btn-success.disabled,
.btn-success[disabled],
fieldset[disabled] .btn-success,
.btn-success.disabled:hover,
.btn-success[disabled]:hover,
fieldset[disabled] .btn-success:hover,
.btn-success.disabled:focus,
.btn-success[disabled]:focus,
fieldset[disabled] .btn-success:focus,
.btn-success.disabled:active,
.btn-success[disabled]:active,
fieldset[disabled] .btn-success:active,
.btn-success.disabled.active,
.btn-success[disabled].active,
fieldset[disabled] .btn-success.active {
  background-color: #5cb85c;
  border-color: #4cae4c;
}
.btn-info {
  color: #ffffff;
  background-color: #5bc0de;
  border-color: #46b8da;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
  color: #ffffff;
  background-color: #39b3d7;
  border-color: #269abc;
}
.btn-info:active,
.btn-info.active,
.open .dropdown-toggle.btn-info {
  background-image: none;
}
.btn-info.disabled,
.btn-info[disabled],
fieldset[disabled] .btn-info,
.btn-info.disabled:hover,
.btn-info[disabled]:hover,
fieldset[disabled] .btn-info:hover,
.btn-info.disabled:focus,
.btn-info[disabled]:focus,
fieldset[disabled] .btn-info:focus,
.btn-info.disabled:active,
.btn-info[disabled]:active,
fieldset[disabled] .btn-info:active,
.btn-info.disabled.active,
.btn-info[disabled].active,
fieldset[disabled] .btn-info.active {
  background-color: #5bc0de;
  border-color: #46b8da;
}
.btn-link {
  color: #428bca;
  font-weight: normal;
  cursor: pointer;
  border-radius: 0;
}
.btn-link,
.btn-link:active,
.btn-link[disabled],
fieldset[disabled] .btn-link {
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link:active {
  border-color: transparent;
}
.btn-link:hover,
.btn-link:focus {
  color: #2a6496;
  text-decoration: underline;
  background-color: transparent;
}
.btn-link[disabled]:hover,
fieldset[disabled] .btn-link:hover,
.btn-link[disabled]:focus,
fieldset[disabled] .btn-link:focus {
  color: #999999;
  text-decoration: none;
}
.btn-lg {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}
.btn-sm,
.btn-xs {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
.btn-xs {
  padding: 1px 5px;
}
.btn-block {
  display: block;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.btn-block + .btn-block {
  margin-top: 5px;
}
input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  width: 100%;
}
.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.fade.in {
  opacity: 1;
}
.collapse {
  display: none;
}
.collapse.in {
  display: block;
}
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition: height 0.35s ease;
  transition: height 0.35s ease;
}
.btn-default .caret {
  border-top-color: #333333;
}
.btn-primary .caret,
.btn-success .caret,
.btn-warning .caret,
.btn-danger .caret,
.btn-info .caret {
  border-top-color: #fff;
}
.dropup .btn-default .caret {
  border-bottom-color: #333333;
}
.dropup .btn-primary .caret,
.dropup .btn-success .caret,
.dropup .btn-warning .caret,
.dropup .btn-danger .caret,
.dropup .btn-info .caret {
  border-bottom-color: #fff;
}
.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}
.btn-group > .btn,
.btn-group-vertical > .btn {
  position: relative;
  float: left;
}
.btn-group > .btn:hover,
.btn-group-vertical > .btn:hover,
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus,
.btn-group > .btn:active,
.btn-group-vertical > .btn:active,
.btn-group > .btn.active,
.btn-group-vertical > .btn.active {
  z-index: 2;
}
.btn-group > .btn:focus,
.btn-group-vertical > .btn:focus {
  outline: none;
}
.btn-group .btn + .btn,
.btn-group .btn + .btn-group,
.btn-group .btn-group + .btn,
.btn-group .btn-group + .btn-group {
  margin-left: -1px;
}
.btn-toolbar:before,
.btn-toolbar:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.btn-toolbar:after {
  clear: both;
}
.btn-toolbar .btn-group {
  float: left;
}
.btn-toolbar > .btn + .btn,
.btn-toolbar > .btn-group + .btn,
.btn-toolbar > .btn + .btn-group,
.btn-toolbar > .btn-group + .btn-group {
  margin-left: 5px;
}
.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
  border-radius: 0;
}
.btn-group > .btn:first-child {
  margin-left: 0;
}
.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.btn-group > .btn:last-child:not(:first-child),
.btn-group > .dropdown-toggle:not(:first-child) {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.btn-group > .btn-group {
  float: left;
}
.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}
.btn-group > .btn-group:first-child > .btn:last-child,
.btn-group > .btn-group:first-child > .dropdown-toggle {
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
}
.btn-group > .btn-group:last-child > .btn:first-child {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
  outline: 0;
}
.btn-group-xs > .btn {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
  padding: 1px 5px;
}
.btn-group-sm > .btn {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}
.btn-group-lg > .btn {
  padding: 10px 16px;
  font-size: 18px;
  line-height: 1.33;
  border-radius: 6px;
}
.btn-group > .btn + .dropdown-toggle {
  padding-left: 8px;
  padding-right: 8px;
}
.btn-group > .btn-lg + .dropdown-toggle {
  padding-left: 12px;
  padding-right: 12px;
}
.btn-group.open .dropdown-toggle {
  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}
.btn .caret {
  margin-left: 0;
}
.btn-lg .caret {
  border-width: 5px 5px 0;
  border-bottom-width: 0;
}
.dropup .btn-lg .caret {
  border-width: 0 5px 5px;
}
.btn-group-vertical > .btn,
.btn-group-vertical > .btn-group {
  display: block;
  float: none;
  width: 100%;
  max-width: 100%;
}
.btn-group-vertical > .btn-group:before,
.btn-group-vertical > .btn-group:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.btn-group-vertical > .btn-group:after {
  clear: both;
}
.btn-group-vertical > .btn-group > .btn {
  float: none;
}
.btn-group-vertical > .btn + .btn,
.btn-group-vertical > .btn + .btn-group,
.btn-group-vertical > .btn-group + .btn,
.btn-group-vertical > .btn-group + .btn-group {
  margin-top: -1px;
  margin-left: 0;
}
.btn-group-vertical > .btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.btn-group-vertical > .btn:first-child:not(:last-child) {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn:last-child:not(:first-child) {
  border-bottom-left-radius: 4px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
  border-radius: 0;
}
.btn-group-vertical > .btn-group:first-child > .btn:last-child,
.btn-group-vertical > .btn-group:first-child > .dropdown-toggle {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.btn-group-vertical > .btn-group:last-child > .btn:first-child {
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
.btn-group-justified {
  display: table;
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
}
.btn-group-justified .btn {
  float: none;
  display: table-cell;
  width: 1%;
}
[data-toggle="buttons"] > .btn > input[type="radio"],
[data-toggle="buttons"] > .btn > input[type="checkbox"] {
  display: none;
}
.nav {
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
}
.nav:before,
.nav:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.nav:after {
  clear: both;
}
.nav > li {
  position: relative;
  display: block;
}
.nav > li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}
.nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #eeeeee;
}
.nav > li.disabled > a {
  color: #999999;
}
.nav > li.disabled > a:hover,
.nav > li.disabled > a:focus {
  color: #999999;
  text-decoration: none;
  background-color: transparent;
  cursor: not-allowed;
}
.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
  background-color: #eeeeee;
  border-color: #428bca;
}
.nav .nav-divider {
  height: 1px;
  margin: 9px 0;
  overflow: hidden;
  background-color: #e5e5e5;
}
.nav > li > a > img {
  max-width: none;
}
.nav-tabs {
  border-bottom: 1px solid #dddddd;
}
.nav-tabs > li {
  float: left;
  margin-bottom: -1px;
}
.nav-tabs > li > a {
  margin-right: 2px;
  line-height: 1.42857143;
  border: 1px solid transparent;
  border-radius: 4px 4px 0 0;
}
.nav-tabs > li > a:hover {
  border-color: #eeeeee #eeeeee #dddddd;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: #555555;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  border-bottom-color: transparent;
  cursor: default;
}
.nav-tabs.nav-justified {
  width: 100%;
  border-bottom: 0;
}
.nav-tabs.nav-justified > li {
  float: none;
}
.nav-tabs.nav-justified > li > a {
  text-align: center;
}
@media (min-width: 768px) {
  .nav-tabs.nav-justified > li {
    display: table-cell;
    width: 1%;
  }
}
.nav-tabs.nav-justified > li > a {
  border-bottom: 1px solid #dddddd;
  margin-right: 0;
}
.nav-tabs.nav-justified > .active > a {
  border-bottom-color: #ffffff;
}
.nav-pills > li {
  float: left;
}
.nav-pills > li > a {
  border-radius: 5px;
}
.nav-pills > li + li {
  margin-left: 2px;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: #ffffff;
  background-color: #428bca;
}
.nav-stacked > li {
  float: none;
}
.nav-stacked > li + li {
  margin-top: 2px;
  margin-left: 0;
}
.nav-justified {
  width: 100%;
}
.nav-justified > li {
  float: none;
}
.nav-justified > li > a {
  text-align: center;
}
@media (min-width: 768px) {
  .nav-justified > li {
    display: table-cell;
    width: 1%;
  }
}
.nav-tabs-justified {
  border-bottom: 0;
}
.nav-tabs-justified > li > a {
  border-bottom: 1px solid #dddddd;
  margin-right: 0;
}
.nav-tabs-justified > .active > a {
  border-bottom-color: #ffffff;
}
.tabbable:before,
.tabbable:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.tabbable:after {
  clear: both;
}
.tab-content > .tab-pane,
.pill-content > .pill-pane {
  display: none;
}
.tab-content > .active,
.pill-content > .active {
  display: block;
}
.nav .caret {
  border-top-color: #428bca;
  border-bottom-color: #428bca;
}
.nav a:hover .caret {
  border-top-color: #2a6496;
  border-bottom-color: #2a6496;
}
.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
}
.tooltip {
  position: absolute;
  z-index: 1030;
  display: block;
  visibility: visible;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0;
  filter: alpha(opacity=0);
}
.tooltip.in {
  opacity: 0.9;
  filter: alpha(opacity=90);
}
.tooltip.top {
  margin-top: -3px;
  padding: 5px 0;
}
.tooltip.right {
  margin-left: 3px;
  padding: 0 5px;
}
.tooltip.bottom {
  margin-top: 3px;
  padding: 5px 0;
}
.tooltip.left {
  margin-left: -3px;
  padding: 0 5px;
}
.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  background-color: #000000;
  border-radius: 4px;
}
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000000;
}
.tooltip.top-left .tooltip-arrow {
  bottom: 0;
  left: 5px;
  border-width: 5px 5px 0;
  border-top-color: #000000;
}
.tooltip.top-right .tooltip-arrow {
  bottom: 0;
  right: 5px;
  border-width: 5px 5px 0;
  border-top-color: #000000;
}
.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #000000;
}
.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #000000;
}
.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000000;
}
.tooltip.bottom-left .tooltip-arrow {
  top: 0;
  left: 5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000000;
}
.tooltip.bottom-right .tooltip-arrow {
  top: 0;
  right: 5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000000;
}

/*
 * HTML5 Boilerplate
 *
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 *
 * Detailed information about this CSS: h5bp.com/css
 *
 * ==|== normalize ==========================================================
 */
/* =============================================================================
   HTML5 display definitions
   ========================================================================== */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
audio:not([controls]) {
  display: none;
}
[hidden] {
  display: none;
}
/* =============================================================================
   Base
   ========================================================================== */
/*
 * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
 * 2. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
 */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
html,
button,
input,
select,
textarea {
  font-family: sans-serif;
  color: #222;
}
body {
  margin: 0;
  font-size: 1em;
  line-height: 1.4;
}
/* =============================================================================
   Links
   ========================================================================== */
a {
  color: #00e;
}
a:visited {
  color: #551a8b;
}
a:hover {
  color: #06e;
}
a:focus {
  outline: none;
}
/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
a:hover,
a:active {
  outline: 0;
}
/* =============================================================================
   Typography
   ========================================================================== */
abbr[title] {
  border-bottom: 1px dotted;
}
b,
strong {
  font-weight: bold;
}
blockquote {
  margin: 1em 40px;
}
dfn {
  font-style: italic;
}
em {
  font-style: italic;
}
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}
ins {
  background: #ff9;
  color: #000;
  text-decoration: none;
}
mark {
  background: #ff0;
  color: #000;
  font-style: italic;
  font-weight: bold;
}
/* Redeclare monospace font family: h5bp.com/j */
pre,
code,
kbd,
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;
}
q {
  quotes: none;
}
q:before,
q:after {
  content: "";
  content: none;
}
small {
  font-size: 85%;
}
/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
/* =============================================================================
   Lists
   ========================================================================== */
ul,
ol {
  margin: 1em 0;
  padding: 0 0 0 40px;
}
dd {
  margin: 0 0 0 40px;
}
nav ul,
nav ol {
  list-style: none;
  list-style-image: none;
  margin: 0;
  padding: 0;
}
/* =============================================================================
   Embedded content
   ========================================================================== */
/*
 * 1. Improve image quality when scaled in IE7: h5bp.com/d
 * 2. Remove the gap between images and borders on image containers: h5bp.com/i/440
 */
img {
  border: 0;
  -ms-interpolation-mode: bicubic;
  vertical-align: middle;
}
/*
 * Correct overflow not hidden in IE9
 */
svg:not(:root) {
  overflow: hidden;
}
/* =============================================================================
   Figures
   ========================================================================== */
figure {
  margin: 0;
}
/* =============================================================================
   Forms
   ========================================================================== */
form {
  margin: 0;
}
fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}
/* Indicate that 'label' will shift focus to the associated form element */
label {
  cursor: pointer;
}
/*
 * 1. Correct color not inheriting in IE6/7/8/9
 * 2. Correct alignment displayed oddly in IE6/7
 */
legend {
  border: 0;
  *margin-left: -7px;
  padding: 0;
  white-space: normal;
}
/*
 * 1. Correct font-size not inheriting in all browsers
 * 2. Remove margins in FF3/4 S5 Chrome
 * 3. Define consistent vertical alignment display in all browsers
 */
button,
input,
select,
textarea {
  font-size: 100%;
  margin: 0;
  *vertical-align: middle;
}
/*
 * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
 */
button,
input {
  line-height: normal;
}
/*
 * 1. Display hand cursor for clickable form elements
 * 2. Allow styling of clickable form elements in iOS
 * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
 */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
  *overflow: visible;
}
/*
 * Re-set default cursor for disabled elements
 */
button[disabled],
input[disabled] {
  cursor: default;
}
/*
 * Consistent box sizing and appearance
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
  *width: 13px;
  *height: 13px;
}
input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
/*
 * Remove inner padding and border in FF3/4: h5bp.com/l
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
/*
 * 1. Remove default vertical scrollbar in IE6/7/8/9
 * 2. Allow only vertical resizing
 */
textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}
/* Colors for form validity */
input:invalid,
textarea:invalid {
  background-color: #f0dddd;
}
/* =============================================================================
   Tables
   ========================================================================== */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td {
  vertical-align: top;
}
/* =============================================================================
   Chrome Frame Prompt
   ========================================================================== */
.chromeframe {
  margin: 0.2em 0;
  background: #ccc;
  color: black;
  padding: 0.2em 0;
}
/* ==|== primary styles =====================================================
   Author:
   ========================================================================== */
/* ==|== media queries ======================================================
   EXAMPLE Media Query for Responsive Design.
   This example overrides the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */
@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}
/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */
/* For image replacement */
.ir {
  display: block;
  border: 0;
  text-indent: -999em;
  overflow: hidden;
  background-color: transparent;
  background-repeat: no-repeat;
  text-align: left;
  direction: ltr;
  *line-height: 0;
}
.ir br {
  display: none;
}
/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden {
  display: none !important;
  visibility: hidden;
}
/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}
/* Hide visually and from screenreaders, but maintain layout */
.invisible {
  visibility: hidden;
}
/* Contain floats: h5bp.com/q */
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}
/* ==|== print styles =======================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */
@media print {
  * {
    background: transparent !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
    filter: none !important;
    -ms-filter: none !important;
  }
  /* Black prints faster: h5bp.com/s */
  a,
  a:visited {
    text-decoration: underline;
  }
  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;
  }
  /* h5bp.com/t */
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  @page {
    margin: 0.5cm;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}

/*
 *  --------------
 *  BASE VARIABLES
 *  --------------
 *  Corporate, Press and Network Homepage sites.
 *
 *  If a site does not have it's own 'variables.less' file, then it uses this one. So because Corporate, Press and
 *  Network are all very similar, none of them have their own and therefore this file contains the variables that govern
 *  each one of them. All other sites will have their own 'variables.less' file.
 *
 *  This also applies for colours.less and site-fonts.less.
 */
/*
 *  Breakpoints & Grid  | Corp | Press | Network
 *  --------------------------------------------
 */
/*
 *  Typography  | Corp | Press | Network
 *  ------------------------------------
 *  Mostly font-sizes
 */
/*
 *  Dimensions | Corp
 *  ------------------------------------
 */
/*
 *  ------------
 *  BASE COLOURS
 *  ------------
 *  Corporate, Press and Network Homepage sites.
 *
 *  If a site does not have it's own 'colours.less' file, then it uses this one. So because Corporate, Press and
 *  Network are all very similar, none of them have their own and therefore this file contains the colour variables that
 *  govern all of them. All other sites will have their own 'colours.less' file.
 *
 *  This also applies for variables.less and site-fonts.less.
 */
/*
 *  Basics | Corp | Press | Network
 *  -------------------------------
 */
/*
 *  Navigation | Corp | Press | Network
 *  -----------------------------------
 */
/*
 *  Footer | Corp | Press | Network
 *  -------------------------------
 */
/*
 *  Buttons | Corp | Press | Network
 *  --------------------------------
 *  All types of buttons, including arrows on carousels & tags
 */
/*
 *  Widgetz & Page Elements | Corp | Press | Network
 *  ------------------------------------------------
 */
/*
 *  TV GUIDE | Corp | Press | Network
 *  ---------------------------------
 */
/*
 *  Carousels & Galleries | Corp | Press | Network
 *  ----------------------------------------------
 */
/*
 *  Programmes / Brand Pages | Corp | Press | Network
 *  -------------------------------------------------
 */
/*
 *  VOD - Watch Episode Page | Corp | Press | Network
 *  -------------------------------------------------
 */
/*
 *  Articles | Corp | Press | Network
 *  ---------------------------------
 *  NOTE : Title & Intro text defined as @single_page_title_colour & @single_page_title_colour
 *  as these are global styles for similar pages such as video or gallery
 */
/*
 *  Other Stuff & Misc | Corp | Press | Network
 *  -------------------------------------------
 */
/*
 *  Forms | Corp | Press | Network
 *  ------------------------------
 *  Used throughout the site, such as Newsletter Signup, Login and Registration and Contact form
 */
/*
 *  Login / Register / My UKTV  | Corp | Press | Network
 *  ---------------------------------------------------
 */
/*
 *  User Profile | Network
 *  ----------------------
 */
/*
 *  Competitions | Network
 *  ----------------------
 */
/*
 *  Newsletter Archive | Network
 *  ----------------------------
 */
/*
 *  Quiz | Corp | Press | Network
 *  -----------------------------
 */
/*
 *  GENERAL TOOLS
 *  -------------
 *  - reuseable chunks of CSS goodness
 */
.position-relative {
  position: relative;
}
.align-right {
  text-align: right;
}
.align-left {
  text-align: left;
}
.hide {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}
.invisible {
  visibility: hidden;
}
.display-none,
.widget.display-none {
  display: none;
}
.clear-float {
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}
.remove-after-psuedo-elem:after {
  content: "" !important;
  display: none !important;
}
.truncate-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*
 *  Fixed-Fluid Layout Helper
 *  -------------------------
 *  These classes help with creating a fixed-fluid layout, where one column is
 *  a fixed width as the browser re-sizes and the other fills the remaining
 *  space. The classes should be applied to containing block elements, the
 *  structure is represented in the nesting of the LESS code:
 */
.fluid-column-left {
  width: 100%;
  float: left;
}
.fluid-column-left .fluid-content {
  margin-right: 300px;
}
.fixed-column-right {
  float: left;
  width: 300px;
  margin-left: -300px;
}
@media (min-width: 800px) {
  .fluid-column-left-large {
    width: 100%;
    float: left;
  }
  .fluid-column-left-large .fluid-content-large {
    margin-right: 300px;
  }
  .fixed-column-right-large {
    float: left;
    width: 300px;
    margin-left: -300px;
  }
}
/*
 *  Visiblity Utitilies
 *  -------------------
 */
.visible-phone {
  display: none !important;
}
.visible-tablet {
  display: none !important;
}
.hidden-desktop {
  display: none !important;
}
@media (max-width: 660px) {
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
}
@media (min-width: 660px) and (max-width: 800px) {
  .visible-tablet {
    display: inherit !important;
  }
  .hidden-tablet {
    display: none !important;
  }
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important ;
  }
}
@media (min-width: 800px) and (max-width: 1100px) {
  .hidden-tablet-landscape {
    display: none !important;
  }
}

/*
 *  -----------------------------
 *  | | | - - THE GIRD - - | | |
 *  ----------------------------
 *
 *  This grid has been designed to hold together the highly bespoke design of the website
 *  it's carefully aligned and modified across viewpoints so if editing this be sure to
 *  create a back up first, as a small change could have a knock-on effect.
 *
 */
/*
 *  --------------
 *  BASE VARIABLES
 *  --------------
 *  Corporate, Press and Network Homepage sites.
 *
 *  If a site does not have it's own 'variables.less' file, then it uses this one. So because Corporate, Press and
 *  Network are all very similar, none of them have their own and therefore this file contains the variables that govern
 *  each one of them. All other sites will have their own 'variables.less' file.
 *
 *  This also applies for colours.less and site-fonts.less.
 */
/*
 *  Breakpoints & Grid  | Corp | Press | Network
 *  --------------------------------------------
 */
/*
 *  Typography  | Corp | Press | Network
 *  ------------------------------------
 *  Mostly font-sizes
 */
/*
 *  Dimensions | Corp
 *  ------------------------------------
 */
.widget img,
.page-element img,
figure img,
.widget embed,
.page-element embed,
figure embed,
.widget object,
.page-element object,
figure object,
.widget video,
.page-element video,
figure video {
  width: 100%;
}
.row:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.row {
  display: inline-block;
}
.row {
  display: block;
}
/*
    Mixin: Initialise Grid Rows and Cols
    ------------------------------------
    Inject our basic row and column styles into each grid instance. Each '.row' is set up to
    house the columns; [class^="span"]. The columns float left and the gutter is applied with
    padding-left of 20px. The first gutter in each row is cancelled out by applying a -20px
    left margin to the row.

    After these styles are injected, we can then set up the number of columns we want in the grid.
    The columns are given percentages which combine to make 100% width of the container.

    The columns have box-sizing applied to them which makes the percentages of each column much
    more simple when resizing.
*/
/*
 *  Containers: Mobile First
 *  ------------------------
 */
.container {
  margin: 0 auto;
  position: relative;
  padding: 0 10px;
}
.container .widget.four-col-teaser hr {
  display: none;
}
/*
 *  Mobile Grid
 *  -----------
 *  A grid that can be used on mobile devices too, we apply
 *  this class to the parent container to activate
 */
.mobile-grid {
  max-width: 100%;
  margin: 0;
  padding: 0;
}
.mobile-grid .row {
  width: auto;
  clear: both;
  margin-left: -20px;
  padding-bottom: 20px;
  list-style: none;
  overflow: hidden;
}
.mobile-grid .row.no-margin-left {
  margin-left: 0;
}
.mobile-grid .row.no-pad-bottom {
  padding-bottom: 0;
}
.mobile-grid [class^="span"],
.mobile-grid [class*=" span"] {
  float: left;
  padding: 0 0 0 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.mobile-grid .row [class^="span"] {
  padding: 0 0 0 20px;
}
.mobile-grid .span1 {
  width: 12.5%;
}
.mobile-grid .span2 {
  width: 25%;
}
.mobile-grid .span3 {
  width: 37.5%;
}
.mobile-grid .span4 {
  width: 50%;
}
.mobile-grid .span5 {
  width: 62.5%;
}
.mobile-grid .span6 {
  width: 75%;
}
.mobile-grid .span7 {
  width: 87.5%;
}
.mobile-grid .span8 {
  width: 100%;
  margin: 0;
}
.mobile-grid .spanOneThird {
  width: 33.333%;
}
.mobile-grid .spanTwoThirds {
  width: 66.666%;
}
#sidebar .mobile-grid .span1 {
  width: 25%;
}
#sidebar .mobile-grid .span2 {
  width: 50%;
}
#sidebar .mobile-grid .span3 {
  width: 75%;
}
#sidebar .mobile-grid .span4 {
  width: 100%;
  margin: 0;
}
@media (min-width: 480px) and (max-width: 660px) {
  /*
        Create a two column layout at these sizes.
     */
  .two-cols-on-phablets .row {
    height: 0;
    margin-left: -20px;
    padding-bottom: 20px;
  }
  .two-cols-on-phablets .row:nth-of-type(odd) .spanOneThird:nth-child(odd) {
    clear: left;
  }
  .two-cols-on-phablets .row:nth-of-type(even) .spanOneThird:nth-child(even) {
    clear: left;
  }
  .two-cols-on-phablets [class^="span"],
  .two-cols-on-phablets [class*=" span"],
  .two-cols-on-phablets .spanOneThird,
  .two-cols-on-phablets .spanTwoThirds {
    float: left;
    width: 50%;
    padding-left: 20px;
    box-sizing: border-box;
  }
}
@media (max-width: 660px) {
  /* Turn a four-col row into two cols:
       for times when we want a mini grid for mobile devices.
       To use we add this class to the parent container      */
  .two-col-mini-grid [class^="span"],
  .two-col-mini-grid [class*=" span"] {
    padding-bottom: 20px;
    width: 50%;
  }
  .mobile-grid span2.thumbnail-col {
    width: 50%;
  }
  /*
        Mobile Row: this view is for mobiles where the thumbnail and image are aligned up
        in grid-like fashion, but the teaser breaks out onto its own space underneath. It
        requires the use of the 'mobile-row' class applied to the grid item divs, '.mobile-row.img'
        to handle the image container and an extra '.titles' container wrapped around the title,
        VOD info and any other info that's not the teaser text
    */
  .mobile-row {
    padding-bottom: 20px;
  }
  .mobile-row.img {
    float: left;
    padding-bottom: 0;
    width: 25%;
  }
  .mobile-row .titles {
    float: left;
    padding: 0 0 0 15px;
    width: 75%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .mobile-row .titles * {
    padding-left: 0 !important;
  }
  .mobile-row .titles h5 {
    padding-top: 0;
  }
  .mobile-row .teaser {
    clear: both;
    display: block;
  }
}
@media (max-width: 660px) {
  /* Turn a four-col row into two cols:
   for times when we want a mini grid for mobile devices.
   To use we add this class to the parent '.row' div      */
  .two-col-mini-grid .row {
    padding-bottom: 0;
  }
  .two-col-mini-grid [class^="span"],
  .two-col-mini-grid [class*=" span"] {
    padding-bottom: 20px;
    width: 50%;
    clear: left;
  }
  .two-col-mini-grid [class^="span"]:nth-child(even),
  .two-col-mini-grid [class*=" span"]:nth-child(even) {
    clear: right;
  }
  .mobile-grid.two-col-mini-grid [class^="span"],
  .mobile-grid.two-col-mini-grid [class*=" span"] {
    padding-bottom: 20px;
  }
  .mobile-grid span2.thumbnail-col {
    width: 50%;
  }
}
@media (min-width: 480px) and (max-width: 800px) {
  html .tablet-two-col-grid {
    position: relative;
  }
  html .tablet-two-col-grid .row {
    width: auto;
    clear: both;
    margin-left: -20px;
    padding-bottom: 20px;
    list-style: none;
    overflow: hidden;
  }
  html .tablet-two-col-grid .row.no-margin-left {
    margin-left: 0;
  }
  html .tablet-two-col-grid .row.no-pad-bottom {
    padding-bottom: 0;
  }
  html .tablet-two-col-grid [class^="span"],
  html .tablet-two-col-grid [class*=" span"] {
    float: left;
    padding: 0 0 0 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  html .tablet-two-col-grid .row [class^="span"] {
    padding: 0 0 0 20px;
  }
  html .tablet-two-col-grid [class^="span"],
  html .tablet-two-col-grid [class*=" span"],
  html .tablet-two-col-grid .spanOneThird {
    width: 50%;
    padding: 0 0 0 20px;
    box-sizing: border-box;
    clear: right;
  }
  html .tablet-two-col-grid [class^="span"]:nth-child(even),
  html .tablet-two-col-grid [class*=" span"]:nth-child(even) {
    clear: left;
  }
}
@media (min-width: 440px) {
  .container {
    padding: 0 20px;
  }
}
@media (min-width: 540px) {
  .container {
    padding: 0 25px;
  }
}
/*
 *  TABLET PORTRAIT & UP
 *  --------------------
 *  - the grids kick in!
 *  - three separate grids: outside content area grid, main-content grid and sidebar grid
 *  - the sidebar grid is further modified by floating widgets left and right
 */
@media (min-width: 660px) {
  ul.container,
  ol.container {
    padding: 0;
  }
  /*
        GRID OUTSIDE MAIN-CONTENT OR SIDEBAR
        ------------------------------------
        - 8 columns within the container
        - the row styles and general column/gutter styles are applied by a mixin: '.initialise_grid_rows_and_cols()'
    */
  .container {
    max-width: 1000px;
    position: relative;
    padding: 0 15px;
    margin: 0 auto;
  }
  .container .row {
    width: auto;
    clear: both;
    margin-left: -20px;
    padding-bottom: 20px;
    list-style: none;
    overflow: hidden;
  }
  .container .row.no-margin-left {
    margin-left: 0;
  }
  .container .row.no-pad-bottom {
    padding-bottom: 0;
  }
  .container [class^="span"],
  .container [class*=" span"] {
    float: left;
    padding: 0 0 0 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .container .row [class^="span"] {
    padding: 0 0 0 20px;
  }
  .container .span1 {
    width: 12.5%;
  }
  .container .span2 {
    width: 25%;
  }
  .container .span3 {
    width: 37.5%;
  }
  .container .span4 {
    width: 50%;
  }
  .container .span5 {
    width: 62.5%;
  }
  .container .span6 {
    width: 75%;
  }
  .container .span7 {
    width: 87.5%;
  }
  .container .span8 {
    width: 100%;
    margin: 0;
  }
  .container .spanOneThird {
    width: 33.333%;
  }
  .container .spanTwoThirds {
    width: 66.666%;
  }
  .container .offset1 {
    margin-left: 12.5%;
  }
  .container .offset2 {
    margin-left: 25%;
  }
  .container .offset3 {
    margin-left: 37.5%;
  }
  .container .offset4 {
    margin-left: 50%;
  }
  .container .offset5 {
    margin-left: 62.5%;
  }
  .container .offset6 {
    margin-left: 75%;
  }
  .container .offset7 {
    margin-left: 87.5%;
  }
  .container .offset8 {
    margin-left: 100%;
  }
  .container .offsetOneThird {
    margin-left: 33.333%;
  }
  .container .offsetTwoThirds {
    width: 66.666%;
  }
  /*
        THE GRID - FOR MAIN-CONTENT
        ---------------------------
        - 8 columns within the '#main-content' container
        - after tablet-Landscape, the container is restricted by the width of the sidebar see 'Tablet Landscape and Up'
     */
  #main-content .row {
    width: auto;
    clear: both;
    margin-left: -20px;
    padding-bottom: 20px;
    list-style: none;
    overflow: hidden;
  }
  #main-content .row.no-margin-left {
    margin-left: 0;
  }
  #main-content .row.no-pad-bottom {
    padding-bottom: 0;
  }
  #main-content [class^="span"],
  #main-content [class*=" span"] {
    float: left;
    padding: 0 0 0 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #main-content .row [class^="span"] {
    padding: 0 0 0 20px;
  }
  #main-content .span1 {
    width: 12.5%;
  }
  #main-content .span2 {
    width: 25%;
  }
  #main-content .span3 {
    width: 37.5%;
  }
  #main-content .span4 {
    width: 50%;
  }
  #main-content .span5 {
    width: 62.5%;
  }
  #main-content .span6 {
    width: 75%;
  }
  #main-content .span7 {
    width: 87.5%;
  }
  #main-content .span8 {
    width: 100%;
    margin: 0;
  }
  /*
        THE GRID - SIDEBAR
        ---------------------------
        - 4 columns withing the container
        - after tablet landscape view, these columns sit in a fixed width container, see 'Tablet Landscape and Up'
     */
  #sidebar .row {
    width: auto;
    clear: both;
    margin-left: -20px;
    padding-bottom: 20px;
    list-style: none;
    overflow: hidden;
  }
  #sidebar .row.no-margin-left {
    margin-left: 0;
  }
  #sidebar .row.no-pad-bottom {
    padding-bottom: 0;
  }
  #sidebar [class^="span"],
  #sidebar [class*=" span"] {
    float: left;
    padding: 0 0 0 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #sidebar .row [class^="span"] {
    padding: 0 0 0 20px;
  }
  #sidebar .span1 {
    width: 25%;
  }
  #sidebar .span2 {
    width: 50%;
  }
  #sidebar .span3 {
    width: 75%;
  }
  #sidebar .span4 {
    width: 100%;
    margin: 0;
  }
}
/*
 *   SIDEBAR WIDGETS TAKE UP TWO COLUMNS
 *   -----------------------------------
 *   - in full screen view the sidebar is on the right-hand side as normal, but before that it sits below the main
 *     content grid, which is 8 columns. But the side bar is only 4 columns. So each 'widget' (div.widget), which takes
 *     up 4 columns, is floated left and right, so that they take up the whole 8 columns.
 *   - then when it's in full screen, the floats are taken away and the sidebar returns to a single 4 column entity
 */
@media (min-width: 660px) and (max-width: 800px) {
  #sidebar .widget {
    clear: left;
    width: 49%;
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  #sidebar .widget:nth-child(even) {
    clear: right;
    float: right;
  }
  #sidebar .widget.even {
    clear: right;
    float: right;
  }
}
/*
 *  Tablet Landscape and Up
 *  ----------------------
 *  LIQUID LAYOUT: SIDEBAR FIXED WIDTH AND MAIN CONTENT FLUID
 *  ---------------------------------------------------------
 *  - Based on: http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/
 *  - The .content-wrapper floats left and has a width of 100% to make it fluid
 *  - #main-content is given a margin right - which makes room for the sidebar and forces it's columns into that space
 *  - the #sidebar then floats left with a negative margin to push it back up inline with #main-content
 */
@media (min-width: 800px) {
  .main-container {
    max-width: 1000px;
  }
  .content-wrapper {
    padding-bottom: 10px;
    width: 100%;
    float: left;
  }
  .content-wrapper #main-content {
    margin-right: 340px;
  }
  #sidebar {
    float: left;
    margin-left: -320px;
    padding: 0;
    width: 320px;
  }
  #sidebar .widget {
    clear: none;
    float: none;
    width: auto;
  }
}
/*
 *  Reusable Fixed-Fluid Layout Classes
 *  -----------------------------------
 *  These classes can be used to create a fixed-fluid layout for all viewport widths.
 *  Apply to containers in a structure as shown in the nesting below.
 */
.fixed-fluid-left {
  width: 100%;
  float: left;
}
.fixed-fluid-left .fixed-fluid-left-content {
  margin-right: 320px;
}
.fixed-fluid-right {
  float: left;
  margin-left: -320px;
  width: 320px;
}

/*
 *  --------------
 *  BASE VARIABLES
 *  --------------
 *  Corporate, Press and Network Homepage sites.
 *
 *  If a site does not have it's own 'variables.less' file, then it uses this one. So because Corporate, Press and
 *  Network are all very similar, none of them have their own and therefore this file contains the variables that govern
 *  each one of them. All other sites will have their own 'variables.less' file.
 *
 *  This also applies for colours.less and site-fonts.less.
 */
/*
 *  Breakpoints & Grid  | Corp | Press | Network
 *  --------------------------------------------
 */
/*
 *  Typography  | Corp | Press | Network
 *  ------------------------------------
 *  Mostly font-sizes
 */
/*
 *  Dimensions | Corp
 *  ------------------------------------
 */
/*
 *  Custom Mixins
 *  -------------
 *
 */
/*
 *  ------------
 *  BASE COLOURS
 *  ------------
 *  Corporate, Press and Network Homepage sites.
 *
 *  If a site does not have it's own 'colours.less' file, then it uses this one. So because Corporate, Press and
 *  Network are all very similar, none of them have their own and therefore this file contains the colour variables that
 *  govern all of them. All other sites will have their own 'colours.less' file.
 *
 *  This also applies for variables.less and site-fonts.less.
 */
/*
 *  Basics | Corp | Press | Network
 *  -------------------------------
 */
/*
 *  Navigation | Corp | Press | Network
 *  -----------------------------------
 */
/*
 *  Footer | Corp | Press | Network
 *  -------------------------------
 */
/*
 *  Buttons | Corp | Press | Network
 *  --------------------------------
 *  All types of buttons, including arrows on carousels & tags
 */
/*
 *  Widgetz & Page Elements | Corp | Press | Network
 *  ------------------------------------------------
 */
/*
 *  TV GUIDE | Corp | Press | Network
 *  ---------------------------------
 */
/*
 *  Carousels & Galleries | Corp | Press | Network
 *  ----------------------------------------------
 */
/*
 *  Programmes / Brand Pages | Corp | Press | Network
 *  -------------------------------------------------
 */
/*
 *  VOD - Watch Episode Page | Corp | Press | Network
 *  -------------------------------------------------
 */
/*
 *  Articles | Corp | Press | Network
 *  ---------------------------------
 *  NOTE : Title & Intro text defined as @single_page_title_colour & @single_page_title_colour
 *  as these are global styles for similar pages such as video or gallery
 */
/*
 *  Other Stuff & Misc | Corp | Press | Network
 *  -------------------------------------------
 */
/*
 *  Forms | Corp | Press | Network
 *  ------------------------------
 *  Used throughout the site, such as Newsletter Signup, Login and Registration and Contact form
 */
/*
 *  Login / Register / My UKTV  | Corp | Press | Network
 *  ---------------------------------------------------
 */
/*
 *  User Profile | Network
 *  ----------------------
 */
/*
 *  Competitions | Network
 *  ----------------------
 */
/*
 *  Newsletter Archive | Network
 *  ----------------------------
 */
/*
 *  Quiz | Corp | Press | Network
 *  -----------------------------
 */
/*
 *  General Layout
 *  --------------
 */
html,
button,
input,
select,
textarea {
  font-family: Verdana, Arial, sans-serif;
}
html {
  overflow-y: scroll;
}
body {
  background: #ffffff;
  background-position: 50% 0;
  color: #666666;
  font-family: Verdana, Arial, sans-serif;
  font-size: 100%;
  position: relative;
}
#total-wrapper {
  padding-top: 18px;
  height: 100%;
}
#total-wrapper:before {
  content: ' ';
}
.channel-homepage #total-wrapper,
.homepage #total-wrapper {
  padding-top: 0;
}
@media (min-width: 800px) {
  #total-wrapper {
    height: 100%;
  }
}
/*
 *  Background Setup
 *  ----------------
 *  Here we apply a pseudo content element to the body in which to house
 *  a background image which fades out into a gradient. This image sits
 *  on top of the body background which is the gradient that it fades to
 *  creating the illusion of a seamless background.
 *
 *  The background images and colours are set in either two places:
 *      1. <SITE>/css/themes.less
 *      2. As part of the 'random themes' JS, which applies a random
 *         background. For more info see 'base/js/random-themes.js
 */
body:before {
  content: "";
  display: block;
  height: 1000px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  background-position: 50% 0;
  background-repeat: no-repeat;
}
body.cookie-notice:before {
  margin-top: 34px;
}
body.login-register-page.cookie-notice:before {
  margin-top: 0;
  padding-top: 0;
}
/*
 *  Two Columns - Quick Set Up
 *  ---------------------------
 *  For two containers that should be placed in a fluid, two column layout, which breaks below tablet-portrait. Used
 *  on login/reg screens, VOD video login/reg overlay, parental pin set up page
 */
.two-col-half.second {
  padding-top: 22px;
  margin-top: 22px;
}
@media (min-width: 660px) {
  .two-col-half {
    float: left;
    padding-right: 23px;
    *padding: 0;
    width: 50%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .two-col-half.second {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
    padding-right: 0;
    padding-left: 22px;
    *padding: 0;
    position: relative;
  }
  .two-col-half.second .or {
    display: block;
    font-size: 11px;
    height: 20px;
    position: absolute;
    top: 0;
    left: -5px;
  }
}
/*
 *  Media Info Description
 *  ----------------------
 *  For content such as galleries and videos that have similar styled info boxes
 *  with common content such as meta data and description.
 *  !! Editing this will effect both gallery and video pages
 */
.media-info {
  padding-top: 18px;
  padding-bottom: 5px;
  border-top: 1px solid #000000;
  -webkit-box-shadow: 0 1px 0 #404040 inset;
  box-shadow: 0 1px 0 #404040 inset;
}
.media-info .image-title,
.media-info .media-meta,
.media-info p {
  font-size: 11px;
  padding-top: 0;
  padding-bottom: 10px;
}
.media-info .image-title {
  color: #ffffff;
  font-size: 14px;
}
.media-info .media-meta {
  color: #666666;
}
.media-info .media-desc {
  color: #999999;
}
.media-info h1,
.media-info h2,
.media-info h3,
.media-info h4,
.media-info h5,
.media-info h6 {
  font-size: 14px;
  padding-top: 0;
}
.media-info h4,
.media-info h5,
.media-info h6 {
  font-size: 12px;
}
.lt-ie9 .media-info .image-title,
.lt-ie9 .media-info .media-meta,
.lt-ie9 .media-info p {
  padding-left: 0;
}
@media (min-width: 800px) {
  .media-info {
    padding-top: 17px;
  }
  .media-info .image-title {
    font-size: 14px;
  }
  .media-info .image-title,
  .media-info .media-meta,
  .media-info p {
    padding-top: 0;
    padding-bottom: 17px;
  }
  .media-info h1,
  .media-info h2,
  .media-info h3 {
    font-size: 14px;
  }
  .media-info h4,
  .media-info h5,
  .media-info h6 {
    font-size: 12px;
  }
}
/*
 *  Image Zoom on Hover
 *  -------------------
 */
.no-touch a.img-zoom {
  display: block;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  position: relative;
}
.no-touch a.img-zoom img {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.no-touch a.img-zoom img:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
/*
 *  Channel Numbers
 *  ---------------
 *  - the basic style to apply nice looking channel numbers with platform logo (eg: Sky)
 *  - output as a list and styled according as large or small versions
 *  - added class large or small is added in the template to style these differently
 */
ul.channel-numbers.small {
  margin: 0;
  overflow: auto;
  padding: 10px 18px;
}
ul.channel-numbers.small li {
  padding: 5px 13px 5px 6px;
  list-style: none;
}
ul.channel-numbers.small li.platform {
  background: url('https://uktv-static.s3.amazonaws.com/fgprod/network/img/sprites/general-sprite.png') 0 -450px no-repeat;
  display: inline-block;
  height: 35px;
  line-height: 30px;
  margin: 0;
  text-align: right;
}
ul.channel-numbers.small li.platform span.text {
  position: relative;
  left: -999em;
}
ul.channel-numbers.small li.platform.sky {
  background-position: 0 -443px;
  width: 72px;
}
ul.channel-numbers.small li.platform.virgin {
  background-position: 0 -495px;
  width: 63px;
}
ul.channel-numbers.small li.platform.freeview {
  background-position: -114px -674px;
  width: 83px;
}
ul.channel-numbers.small li.platform.bt {
  background-position: 0 -722px;
  width: 76px;
}
ul.channel-numbers.small li.platform.youview {
  background-position: 0 -755px;
  width: 83px;
}
ul.channel-numbers.small li.platform.freesat {
  background-position: -240px -676px;
  width: 72px;
}
ul.channel-numbers.small li.hd {
  background: none;
  height: 35px;
  line-height: 30px;
  padding: 0;
}
.dark-ui-theme ul.channel-numbers li.platform.bt {
  background-position: -114px -722px;
}
.dark-ui-theme ul.channel-numbers li.platform.freeview {
  background-position: 0 -674px;
}
ul.channel-numbers.large {
  margin: 0;
  padding: 15px 20px 20px;
}
ul.channel-numbers.large li {
  display: block;
  padding: 0;
  margin: 0;
}
ul.channel-numbers.large li.platform {
  display: block;
  float: left;
  margin: 0 0 17px 0;
  text-align: center;
  width: 33%;
  height: 63px;
  position: relative;
}
ul.channel-numbers.large li.platform span.text {
  background: url('https://uktv-static.s3.amazonaws.com/fgprod/network/img/sprites/platform-logos-sprite.png') 0 0 no-repeat;
  display: inline-block;
  height: 50px;
  width: 57px;
  text-indent: -9999px;
}
ul.channel-numbers.large li.platform span.number {
  display: block;
  height: 20px;
  line-height: 20px;
  font-size: 16px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
ul.channel-numbers.large li.platform.sky span.text {
  width: 55px;
}
ul.channel-numbers.large li.platform.virgin span.text {
  background-position: 0 -50px;
}
ul.channel-numbers.large li.platform.bt span.text {
  background-position: 0 -100px;
}
ul.channel-numbers.large li.platform.freeview span.text {
  background-position: 0 -150px;
  width: 65px;
  margin-top: 8px;
}
ul.channel-numbers.large li.platform.youview {
  display: inline-block;
  height: 63px;
  width: 72px;
  margin: 0 10px 0 10px;
}
ul.channel-numbers.large li.platform.youview span.text {
  background-position: 0 -200px;
  margin-top: 7px;
  width: 72px;
}
ul.channel-numbers.large li.hd {
  display: inline-block;
  clear: both;
  float: none;
  margin-top: 10px;
  margin-left: 10px;
}
ul.channel-numbers.large li.platform.freesat span.text {
  background-position: 0 -357px;
  height: 60px;
}
.dark-ui-theme ul.channel-numbers li.platform.freeview span.text {
  background-position: 0 -250px;
}
.dark-ui-theme ul.channel-numbers li.platform.bt span.text {
  background-position: 0 -300px;
}
/*
 *  Social Media Links
 *  ------------------
 *  - used in footer and possibly other places
 */
.social-links {
  margin: 0;
}
.social-links li,
.social-links div {
  display: block;
  float: left;
  height: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 30px;
  *display: block;
  *float: left;
}
.social-links li a,
.social-links div a {
  background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/sprites/social-sprite.png");
  background-repeat: no-repeat;
  border-radius: 3px;
  display: block;
  font-size: 14px;
  height: 30px;
  line-height: 30px;
  width: 30px;
  text-align: center;
  text-indent: -9999px;
}
.social-links li a [class^="icon-"],
.social-links div a [class^="icon-"],
.social-links li a [class*=" icon-"],
.social-links div a [class*=" icon-"] {
  margin: 0;
}
.social-links li a:hover,
.social-links div a:hover {
  text-decoration: none;
}
.social-links li .fb,
.social-links div .fb {
  background-position: 0 0;
}
.social-links li .tw,
.social-links div .tw {
  background-position: 1px -50px;
}
.social-links li .tu,
.social-links div .tu {
  background-position: 0 -100px;
}
.social-links li .yt,
.social-links div .yt {
  background-position: 0 -150px;
}
.social-links li .gp,
.social-links div .gp {
  background-position: 0 -200px;
}
.social-links li .em,
.social-links div .em {
  background-position: 0 -250px;
}
.social-links .no-bg {
  background-image: none;
}
.social-links.one-item {
  width: 84px;
}
.social-links.two-items {
  width: 96px;
}
.social-links.three-items {
  width: 144px;
}
.social-links.four-items {
  width: 192px;
}
.social-links.five-items {
  width: 240px;
}
.social-links.six-items {
  width: 288px;
}
.social-links.left {
  float: left;
}
.social-links.left li {
  margin-right: 18px;
}
.social-links.right {
  float: right;
}
.social-links.right li {
  margin-right: 18px;
}
.social-links.center li {
  display: inline-block;
  *display: inline;
  /* IE7 inline-block hack */
  *zoom: 1;
}
/*
 *  Pagination
 *  ----------
 *  - e.g: page pagination in search
 *  - buttons styles come from 'buttons.less'
 */
.pagination {
  height: 30px;
  padding: 10px 18px;
}
.pagination .current {
  font-size: 11px;
  line-height: 30px;
  text-align: center;
}
.pagination .btn.btn-arrow {
  margin-top: -30px;
}
.pagination .btn.btn-arrow.left {
  float: left;
}
.pagination .btn.btn-arrow.right {
  float: right;
}
/*
 *  Accordion Overrides
 *  -------------------
 *  These styles override Twitter Bootstrap's collapse plugin with our own styles.
 *  It's used on the User Profile page, for the Collapsible Sidebar Widgets on
 *  mobile and the Episode Guide page. A custom addition is the up/down arrows
 *  which getting hidden or displayed by toggling the '.open' class via our JS
 *  overrides, found in 'js/libraries-plugins/libraries-plugins.js'.
 *
 *  Some special JS for the Sidebar collapsible widgets are in 'js/widgets.js'
 */
.accordion-toggle,
.modal-section-title {
  background: #222222;
  display: block;
  font-size: 20px;
  padding: 10px 0 10px 18px;
  position: relative;
}
.accordion-toggle [class^="icon-"],
.modal-section-title [class^="icon-"],
.accordion-toggle [class*=" icon-"],
.modal-section-title [class*=" icon-"] {
  font-size: 18px;
  margin-right: 20px;
}
.accordion-toggle i.arrow,
.modal-section-title i.arrow {
  color: #3e99b9;
  font-size: 14px;
  position: absolute;
  top: 15px;
  right: 5px;
}
.accordion-toggle:hover {
  background: #000000;
  text-decoration: none;
}
/* Up / Down Arrows */
.accordion .arrow {
  display: none;
}
.accordion *[data-toggle="collapse"].collapsed .open {
  display: none;
}
.accordion *[data-toggle="collapse"].collapsed .close {
  display: inline-block;
}
.accordion *[data-toggle="collapse"] {
  cursor: pointer;
}
.accordion *[data-toggle="collapse"] .icon-up.arrow {
  top: 0;
}
.accordion *[data-toggle="collapse"] .arrow {
  color: #3e99b9;
  margin: 0 0 0 10px;
}
.accordion *[data-toggle="collapse"] .open {
  display: inline-block;
}
.accordion *[data-toggle="collapse"] .close {
  display: none;
}
/*
 *  Modal Skin
 *  ----------
 *  Skinning of the modal window.
 */
.modal-styling {
  background: #000000;
}
#close-happy-modal {
  position: absolute;
  top: 0;
  right: 0;
}
#close-happy-modal i {
  margin-right: 0;
}
.modal-styling .modal-title {
  background: #ffffff;
  color: #000000;
  display: block;
  height: 50px;
  line-height: 50px;
  font-size: 22px;
  padding: 0;
  margin: 0;
  text-align: center;
  text-shadow: none;
}
.modal-styling .modal-section-title {
  color: #3e99b9;
  font-size: 18px;
}
.modal-styling .btn {
  width: 100%;
}
/*
 *  Notifications / Reminders Modal
 *  -------------------------------
 */
#happy-overlay {
  background: rgba(0, 0, 0, 0.7);
}
.no-rgba #happy-overlay {
  background: url('https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg-trans.png');
}
#happy-modal .modal-section-content {
  padding: 18px;
}
#happy-modal .modal-section-content .success-msg {
  padding: 0 0 20px 0;
  font-size: 12px;
}
/*
 *  Breadcrumbs
 *  -----------
 *  template: 'apps/cmsutils/templates/cmsutils/breadcrumbs.html'
 *  breadcrumbs are hidden on small mobile devices
 */
@media (max-width: 480px) {
  .breadcrumbs {
    display: none;
  }
}
.breadcrumbs ol {
  padding-left: 18px;
  /* padding for pages that do not have page titles, but when there is a page title,
           the page title container '.hub-title' has negative margin-top applied to close
           the gap between the crumbs and the title. See 'Page Titles' in typography.less   */
  padding-bottom: 18px;
}
.breadcrumbs ol li.home {
  position: relative;
  top: 1px;
}
.breadcrumbs ol li {
  display: inline;
  font-size: 11px;
  padding: 0 2px 0 0;
  text-shadow: none;
}
.breadcrumbs ol li a {
  color: #666666;
}
.breadcrumbs ol li a:hover {
  color: #3e99b9;
  text-decoration: none;
}
.breadcrumbs ol li .chevron {
  color: #666666;
  padding: 0 2px 0 0;
}
.breadcrumbs ol li.active {
  color: #3e99b9;
}
/*
 *  UKTV Play Sprite
 *  ----------------
 *  Special sprite for UKTV Play VoD elements, such as VoD channel logos in teaser widgets
 */
.uktvplay-sprite {
  background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/sprites/uktvplay-sprite.png") 0 0 no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
  .uktvplay-sprite {
    /* Reference the @2x Sprite */
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/sprites/uktvplay-sprite@2x.png");
    /* Translate the @2x sprite's dimensions back to 1x */
    background-size: 300px auto;
  }
}
/*
 *  Channel Logos 70x70
 *  -------------------
 *  Uses the classes in the structure as nested below to output
 *  the channel logos 70x70 pixels.
 */
.channel-logos {
  padding: 0 18px 18px 18px;
}
.channel-logos .channel-logos-title {
  font-size: 18px;
  color: #3e99b9;
}
.channel-logos-70x70 {
  padding: 10px 0;
  text-align: center;
}
.channel-logos-70x70 .logo {
  display: inline-block;
  height: 60px;
  min-width: 60px;
  width: 5%;
}
.channel-logos-70x70 .logo a {
  background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/sprites/channel-logos-60x60.png") 0 0 no-repeat;
  display: block;
  height: 60px;
  width: 100%;
  text-indent: -999em;
}
.channel-logos-70x70 .logo.w {
  width: 60px;
}
.channel-logos-70x70 .logo.w a {
  background-position: 0 -1864px;
  width: 60px;
}
.channel-logos-70x70 .logo.dave {
  width: 66px;
}
.channel-logos-70x70 .logo.dave a {
  background-position: 0 -1200px;
  position: relative;
  left: 0px;
}
.channel-logos-70x70 .logo.alibi a {
  background-position: 0 -168px;
  position: relative;
}
.channel-logos-70x70 .logo.gold {
  width: 76px;
}
.channel-logos-70x70 .logo.gold a {
  background-position: 0 -84px;
}
.channel-logos-70x70 .logo.eden a {
  background-position: 0 -426px;
}
.channel-logos-70x70 .logo.drama a {
  background-position: 0 -1542px;
  height: 73px;
}
.channel-logos-70x70 .logo.really {
  width: 72px;
}
.channel-logos-70x70 .logo.really a {
  background-position: 0 -1114px;
  height: 73px;
}
.channel-logos-70x70 .logo.food a {
  background-position: 0 -685px;
  position: relative;
}
.channel-logos-70x70 .logo.yesterday {
  width: 73px;
}
.channel-logos-70x70 .logo.yesterday a {
  background-position: 0 -1287px;
  position: relative;
}
.channel-logos-70x70 .logo.home a {
  background-position: 0 -600px;
}
.channel-logos-70x70 .logo.uktvplay {
  width: 106px;
}
.channel-logos-70x70 .logo.uktvplay a {
  background-position: 0 -1716px;
  height: 80px;
}
.network.homepage .channel-logos-70x70 .logo.watch {
  width: 90px!important;
}
.network.homepage .channel-logos-70x70 .logo.watch a {
  background-position: 0 0;
}
.network.homepage .channel-logos-70x70 .logo.dave {
  width: 65px;
}
.network.homepage .channel-logos-70x70 .logo.dave a {
  background-position: 0 -1200px;
  position: relative;
  left: 15px;
}
.network.homepage .channel-logos-70x70 .logo.alibi a {
  background-position: 0 -168px;
  position: relative;
  left: 13px;
}
.network.homepage .channel-logos-70x70 .logo.gold {
  width: 63px;
}
.network.homepage .channel-logos-70x70 .logo.gold a {
  background-position: 0 -84px;
}
.network.homepage .channel-logos-70x70 .logo.eden a {
  background-position: 0 -426px;
  position: relative;
  left: 19px;
}
.network.homepage .channel-logos-70x70 .logo.drama a {
  background-position: 0 -1542px;
  position: relative;
  left: 21px;
}
.network.homepage .channel-logos-70x70 .logo.really {
  width: 66px;
}
.network.homepage .channel-logos-70x70 .logo.really a {
  background-position: 0 -1114px;
}
.network.homepage .channel-logos-70x70 .logo.food a {
  background-position: 0 -685px;
  left: 14px;
}
.network.homepage .channel-logos-70x70 .logo.yesterday {
  width: 73px;
}
.network.homepage .channel-logos-70x70 .logo.yesterday a {
  background-position: 0 -1287px;
}
.network.homepage .channel-logos-70x70 .logo.home a {
  background-position: 0 -600px;
  position: relative;
  left: 19px;
}
.network.homepage .channel-logos-70x70 .logo.uktvplay a {
  width: 106px;
  background-position: 0 -1716px;
  position: relative;
  left: 15px;
}
.channel-logos-70x70.inline .logo {
  display: inline-block;
  *zoom: 1;
  *display: inline;
}
.channel-logos-70x70.simple-layout {
  width: 100%;
  margin: 0 auto;
}
.channel-logos-70x70.simple-layout .logo {
  display: inline-block;
  margin: 12px 20px;
}
.channel-logos-70x70.slides .logo a {
  margin: 0 0 0 auto;
}
.channel-logos-70x70.slides .logo.gold a {
  position: relative;
  left: 12px;
}
.channel-logos-70x70.slides .logo.dave a {
  position: relative;
  left: 15px;
}
.channel-logos-70x70.slides .logo.yesterday a {
  position: relative;
  left: 10px;
}
.channel-logos-70x70.slides .logo.eden a {
  position: relative;
  left: 26px;
}
.channel-logos-70x70.slides .logo.really a {
  position: relative;
  left: 10px;
}
@media (max-width: 1024px) {
  .all-site-links-big.flexslider {
    margin-bottom: 5px;
  }
  .all-site-links-big.flexslider:after {
    content: "";
    display: block;
    height: 70px;
    width: 20px;
    position: absolute;
    top: 0;
    right: 0;
    background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0), #ffffff);
    background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0), #ffffff);
    background-image: -webkit-gradient(linear, 0 0, 0 0, from(rgba(255, 255, 255, 0)), to(#ffffff));
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), #ffffff);
    background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0), #ffffff);
    background-image: linear-gradient(left, rgba(255, 255, 255, 0), #ffffff);
    background-repeat: repeat-x;
  }
}
@media (min-width: 600px) {
  .channel-logos-70x70.simple-layout {
    margin: 0 auto;
  }
  .channel-logos-70x70.simple-layout .logo {
    clear: none;
    margin: 10px 25px;
  }
}
@media (min-width: 1024px) {
  .channel-logos-70x70.simple-layout {
    padding-left: 0;
    padding-right: 0;
  }
  .channel-logos-70x70.simple-layout .logo {
    margin: 10px 8px;
  }
  .channel-logos-70x70.simple-layout .logo:last-child {
    margin-right: 0;
  }
  .lt-ie9 .channel-logos-70x70.simple-layout .logo {
    margin: 10px 0px 10px 24px;
  }
  .lt-ie9 .all-site-links-big.flexslider {
    margin-top: 10px;
  }
}
/*
 *  404 & 500 PAGES
 *  ---------------
 */
.error-page {
  padding: 40px 0 200px;
}
.error-page .page-element {
  padding: 20px 20px 40px 20px;
}
.error-page .page-element .icon-warning {
  font-size: 50px;
  position: relative;
  top: 10px;
}
/*
 *  Mailchimp Newsletter Archive
 *  ----------------------------
 */
.newsletter-archive .article-content {
  padding-bottom: 0;
  background: none;
}
/*
These classes are generated by MailChimp.
Oddly, the output of the generated content places each individual
newsletter item in it's own <DIV> tag rather than using an <UL> / <LI> structure,
therefore it doesn't inherit the sites standard list styling.
*/
.display_archive {
  padding: 20px;
}
.display_archive .campaign {
  padding-bottom: 8px;
  font-size: 11px;
  color: #666666;
}
.display_archive .campaign a {
  font-size: 13px;
  color: #3e99b9;
}
.display_archive .campaign a:hover {
  color: #6dd6ec;
}
/*
 *  Facebook Comments
 *  -----------------
 */
.widget-bg.fb-comments-container {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 0;
}
.fb-comments,
.fb-comments iframe[style],
.fb-comments span {
  width: 100% !important;
}
/*
 *  CSS3 Ajax Loader
 *  ----------------
 */
.ajaxloader {
  width: 12px;
  height: 12px;
  border: 2px solid #ffffff;
  border-right-color: transparent;
  border-radius: 50%;
  -webkit-animation: spin 0.8s linear infinite;
  -moz-animation: spin 0.8s linear infinite;
  -ms-animation: spin 0.8s linear infinite;
  -o-animation: spin 0.8s linear infinite;
  animation: spin 0.8s linear infinite;
}
.ajaxloader.medium {
  height: 40px;
  width: 40px;
}
.ajaxloader.large {
  height: 80px;
  width: 80px;
}
.ajaxloader.extralarge {
  height: 120px;
  width: 120px;
}
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
  }
  50% {
    -webkit-transform: rotate(180deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);
  }
  50% {
    -moz-transform: rotate(180deg);
  }
  to {
    -moz-transform: rotate(360deg);
  }
}
@-ms-keyframes spin {
  from {
    -ms-transform: rotate(0deg);
  }
  50% {
    -ms-transform: rotate(180deg);
  }
  to {
    -ms-transform: rotate(360deg);
  }
}
@-o-keyframes spin {
  from {
    -o-transform: rotate(0deg);
  }
  50% {
    -o-transform: rotate(180deg);
  }
  to {
    -o-transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.lt-ie9 .ajaxloader {
  visibility: hidden;
  /* displays as a non animated square in IE8, so hide */
}
.no-rgba .ajaxloader-overlay {
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#55000000, endColorstr=#55000000)";
}
.ajaxloader-overlay {
  background: rgba(0, 0, 0, 0.5);
  display: none;
  margin: auto;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 9999;
}
.ajaxloader-overlay .inner .ajaxloader {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
/*
 *  Utility classes
 *  ---------------
 */
.text-offscreen {
  text-indent: -99999px;
}
/*
 *  UKTV Play Watermark
 *  -------------------
 */
.uktvplay-logo-watermark {
  background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/sprites/general-sprite.png") -160px -500px no-repeat;
  display: block;
  height: 20px;
  width: 88px;
  position: absolute;
  top: 20px;
  left: 20px;
  text-indent: -9999px;
  opacity: 0.75;
}
@media (min-width: 800px) {
  .uktvplay-logo-watermark {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/sprites/general-sprite.png") -160px -550px no-repeat;
    height: 52px;
  }
}
/*
 *  Tooltip Overrides
 *  -----------------
 *  Overrides tooltips from Twitter Bootstrap. The bootstrap original files are:
 *   - 'assets/common/base/css/twitter-bootstrap/tooltip.less'
 *   - 'assets/common/base/js/twitter-bootstrap/bootstrap-tooltip.js'
 *  For more info on tooltips see: http://twitter.github.io/bootstrap/javascript.html#tooltips
 */
.tooltip {
  padding-top: 0;
  padding-bottom: 0;
  -webkit-transition: opacity 0.25s linear;
  transition: opacity 0.25s linear;
}
.tooptop.fade {
  -webkit-transition: opacity 0.25s linear;
  transition: opacity 0.25s linear;
}
.tooltip-inner {
  background: #333333;
  color: #ffffff;
  padding-top: 8px;
  padding-bottom: 8px;
  padding: 5px 10px 5px;
  font-size: 11px;
  line-height: 1.65em;
}
.tooltip.left .tooltip-arrow {
  border-left: 5px solid #333333;
}
/*
 *  Twitter Feed Sidebar Widget
 *  ---------------------------
 */
@media (min-width: 800px) {
  .widget.twitter-feed iframe {
    height: 420px;
  }
}
/*
 *  Instagram Feed Sidebar Widget
 *  ---------------------------
 */
.widget.instagram-feed {
  background: white;
}
.widget.instagram-feed .logo {
  width: 35px;
  float: left;
}
.widget.instagram-feed .instagram-name a {
  color: #4193AB;
  font-weight: bold;
  float: left;
  margin-left: 9px;
  margin-top: 9px;
}
.widget.instagram-feed .user-info {
  padding: 3%;
  overflow: auto;
}
.widget.instagram-feed img {
  margin: 0 auto;
  display: block;
  width: 94%;
}
.widget.instagram-feed p.likes {
  background: #f6f6f7;
  color: #a5a9ac;
  font-weight: bold;
  padding: 3%;
}
.widget.instagram-feed p.caption {
  color: black;
  position: initial;
  font-size: 11px;
}
.widget.instagram-feed .heart-icon {
  float: left;
  width: 13px;
  margin-right: 4px;
  margin-top: 3px;
}
.widget.instagram-feed .verified-icon {
  width: 15px;
  float: left;
  margin-top: 10px;
  margin-left: 5px;
}
.widget.instagram-feed .instagram-icon {
  float: right;
  width: 71px;
  display: inline;
}
/*
 *  Full width bottom inline info row
 *  ---------------------------------
 */
.bottom-inline-row {
  position: absolute;
  height: 40px;
  z-index: 0;
  bottom: -1px;
  width: 100%;
}
.bottom-inline-row .icon,
.bottom-inline-row .text-display {
  background-color: rgba(0, 0, 0, 0.7);
}
.bottom-inline-row .icon {
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  color: #ffffff;
}
.bottom-inline-row .icon.icon-vod {
  color: #ffffff;
  left: 0;
}
.bottom-inline-row .text-display {
  position: absolute;
  left: 41px;
  right: 0px;
  height: 40px;
  top: 0;
  line-height: 40px;
  padding-left: 5px;
  color: #ffffff;
}

/*
 *  --------------
 *  BASE VARIABLES
 *  --------------
 *  Corporate, Press and Network Homepage sites.
 *
 *  If a site does not have it's own 'variables.less' file, then it uses this one. So because Corporate, Press and
 *  Network are all very similar, none of them have their own and therefore this file contains the variables that govern
 *  each one of them. All other sites will have their own 'variables.less' file.
 *
 *  This also applies for colours.less and site-fonts.less.
 */
/*
 *  Breakpoints & Grid  | Corp | Press | Network
 *  --------------------------------------------
 */
/*
 *  Typography  | Corp | Press | Network
 *  ------------------------------------
 *  Mostly font-sizes
 */
/*
 *  Dimensions | Corp
 *  ------------------------------------
 */
/*
 *  Custom Mixins
 *  -------------
 *
 */
/*
 *  ------------
 *  BASE COLOURS
 *  ------------
 *  Corporate, Press and Network Homepage sites.
 *
 *  If a site does not have it's own 'colours.less' file, then it uses this one. So because Corporate, Press and
 *  Network are all very similar, none of them have their own and therefore this file contains the colour variables that
 *  govern all of them. All other sites will have their own 'colours.less' file.
 *
 *  This also applies for variables.less and site-fonts.less.
 */
/*
 *  Basics | Corp | Press | Network
 *  -------------------------------
 */
/*
 *  Navigation | Corp | Press | Network
 *  -----------------------------------
 */
/*
 *  Footer | Corp | Press | Network
 *  -------------------------------
 */
/*
 *  Buttons | Corp | Press | Network
 *  --------------------------------
 *  All types of buttons, including arrows on carousels & tags
 */
/*
 *  Widgetz & Page Elements | Corp | Press | Network
 *  ------------------------------------------------
 */
/*
 *  TV GUIDE | Corp | Press | Network
 *  ---------------------------------
 */
/*
 *  Carousels & Galleries | Corp | Press | Network
 *  ----------------------------------------------
 */
/*
 *  Programmes / Brand Pages | Corp | Press | Network
 *  -------------------------------------------------
 */
/*
 *  VOD - Watch Episode Page | Corp | Press | Network
 *  -------------------------------------------------
 */
/*
 *  Articles | Corp | Press | Network
 *  ---------------------------------
 *  NOTE : Title & Intro text defined as @single_page_title_colour & @single_page_title_colour
 *  as these are global styles for similar pages such as video or gallery
 */
/*
 *  Other Stuff & Misc | Corp | Press | Network
 *  -------------------------------------------
 */
/*
 *  Forms | Corp | Press | Network
 *  ------------------------------
 *  Used throughout the site, such as Newsletter Signup, Login and Registration and Contact form
 */
/*
 *  Login / Register / My UKTV  | Corp | Press | Network
 *  ---------------------------------------------------
 */
/*
 *  User Profile | Network
 *  ----------------------
 */
/*
 *  Competitions | Network
 *  ----------------------
 */
/*
 *  Newsletter Archive | Network
 *  ----------------------------
 */
/*
 *  Quiz | Corp | Press | Network
 *  -----------------------------
 */
/*
 *  Widgets & Page Elements
 *  -----------------------
 *  Generic styles
 */
.widget:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.widget {
  display: inline-block;
}
/*Those two .clearfix have to be separate!)*/
.widget {
  display: block;
}
.widget .hub-description-text--seo {
  font-size: 14px;
  padding-bottom: 0;
}
.widget-bg.mpu,
.widget.facebook-sidebar,
.widget.sponsored-by .widget-bg {
  padding: 10px;
  text-align: center;
}
.widget-bg.mpu .widget-title,
.widget.facebook-sidebar .widget-title,
.widget.sponsored-by .widget-bg .widget-title {
  text-align: left;
}
.widget-bg.mpu {
  padding-top: 10px;
}
@media (max-width: 660px) {
  .widget.facebook-sidebar {
    display: none;
  }
}
/*
 *  Widget Backgrounds
 *  ------------------
 */
.cssgradients .widget-bg,
.cssgradients .page-element {
  background-image: -moz-linear-gradient(top, rgba(34, 34, 34, 0.8), rgba(0, 0, 0, 0.8));
  background-image: -ms-linear-gradient(top, rgba(34, 34, 34, 0.8), rgba(0, 0, 0, 0.8));
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(34, 34, 34, 0.8)), to(rgba(0, 0, 0, 0.8)));
  background-image: -webkit-linear-gradient(top, rgba(34, 34, 34, 0.8), rgba(0, 0, 0, 0.8));
  background-image: -o-linear-gradient(top, rgba(34, 34, 34, 0.8), rgba(0, 0, 0, 0.8));
  background-image: linear-gradient(top, rgba(34, 34, 34, 0.8), rgba(0, 0, 0, 0.8));
  background-repeat: repeat-x;
}
.cssgradients #sidebar .widget-bg,
.cssgradients #sidebar .page-element {
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.8), rgba(34, 34, 34, 0.8));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.8), rgba(34, 34, 34, 0.8));
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.8)), to(rgba(34, 34, 34, 0.8)));
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.8), rgba(34, 34, 34, 0.8));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.8), rgba(34, 34, 34, 0.8));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0.8), rgba(34, 34, 34, 0.8));
  background-repeat: repeat-x;
}
.no-cssgradients .widget-bg,
.no-cssgradients .page-element {
  background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/widget-bg.png");
}
/*
 *  General Widget Styles
 *  ---------------------
 *  The widget container '.widget' contains the title
 *  '.widget-title' and contents inside '.widget-bg'.
 *
 */
.widget-title {
  background: #232323;
  color: #3e99b9;
  display: inline-block;
  font-size: 16px;
  line-height: 16px;
  padding: 10px 15px 10px 15px;
  position: relative;
  *display: inline;
  /* IE7 inline-block hack */
  *zoom: 1;
  vertical-align: top;
}
.widget-title-and-link {
  background: #232323;
  position: relative;
  display: inline-block;
}
.widget-title-and-link:hover {
  background: #373737;
}
.widget-title-and-link .widget-title {
  background: transparent;
  border-right: 1px solid #FFFFFF;
  margin-right: 41px;
}
.widget-title-and-link .title-link {
  color: #3e99b9;
  display: inline-block;
  font-size: 20px;
  height: 20px;
  line-height: 20px;
  margin-top: -10px;
  position: absolute;
  top: 50%;
  right: 0;
  text-align: center;
  white-space: nowrap;
  width: 40px;
}
html .widget-title [class^="icon-"] {
  color: #3e99b9;
  font-size: 20px;
}
.widget-title a,
a.widget-title {
  color: #3e99b9;
}
.widget-title a:hover,
a.widget-title:hover,
.widget-title a:active,
a.widget-title:active,
.widget-title a:visited,
a.widget-title:visited {
  color: #3e99b9;
}
@media (min-width: 480px) {
  .widget-title {
    padding: 10px 18px 10px 18px;
  }
}
.widget.show-more .widget-bg {
  padding-bottom: 0;
}
.widget-bg {
  padding-top: 20px;
}
html .widget-bg p:first-child {
  padding-top: 0;
  margin-top: -2px;
}
html .widget-bg p:first-child.widget-summary {
  margin-top: -6px;
}
.widget-bg,
.page-element {
  padding-bottom: 20px;
}
.widget,
.page-element {
  color: #666666;
  margin-bottom: 20px;
}
.widget .widget-summary,
.page-element .widget-summary {
  color: inherit;
  font-size: 16px;
  margin: 0;
  padding: 0 18px 7px 18px;
}
.widget .collection-series-ep,
.page-element .collection-series-ep {
  color: #d4d2c3;
  margin: 0;
  padding: 0 18px 15px 18px;
  font-size: 11px;
}
.widget .teaser-title,
.page-element .teaser-title {
  color: #3e99b9;
  font-size: 12px;
  padding-top: 14px;
  padding-bottom: 9px;
}
.widget .teaser-title a,
.page-element .teaser-title a {
  color: #3e99b9;
}
.widget .teaser-title a:hover,
.page-element .teaser-title a:hover {
  color: #6dd6ec;
}
.widget .teaser,
.page-element .teaser {
  font-size: 11px;
  padding-top: 0;
  padding-bottom: 22px;
}
.widget .vod-series-episode,
.page-element .vod-series-episode {
  font-size: 13px;
  padding-top: 0;
  padding-bottom: 10px;
}
.widget .series-ep,
.page-element .series-ep {
  font-size: 11px;
  color: #d4d2c3;
  padding-top: 0;
}
.widget .small-series-ep,
.page-element .small-series-ep {
  font-size: 10px;
  color: #d4d2c3;
  padding-top: 3px;
}
.widget hr.keyline,
.page-element hr.keyline {
  background: none;
  border: none;
  border-bottom: 1px solid #222222;
  clear: both;
  display: block;
  height: 1px;
  margin: 0 0 15px 0;
  padding-top: 15px;
  position: relative;
}
.widget .keyline.hidden,
.page-element .keyline.hidden {
  display: none;
}
.widget .hidden-rows,
.page-element .hidden-rows {
  display: none;
}
.widget .btn-holder.show-more,
.page-element .btn-holder.show-more {
  background: #232323;
  padding: 0;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.widget .btn-holder.show-more a,
.page-element .btn-holder.show-more a {
  color: #3e99b9;
  display: block;
  font-size: 11px;
  text-decoration: none;
  padding: 18px 0 18px 0;
}
.widget .btn-holder.show-more a:hover,
.page-element .btn-holder.show-more a:hover {
  color: #6dd6ec;
}
.widget .btn-holder.show-more i,
.page-element .btn-holder.show-more i {
  color: inherit;
  font-size: 8px;
  padding-left: 5px;
}
.widget .btn-holder.show-more:hover,
.page-element .btn-holder.show-more:hover {
  background: #000000;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}
#sidebar .widget-title {
  font-size: 18px;
  line-height: 18px;
}
@media (min-width: 660px) {
  .widget .teaser,
  .page-element .teaser {
    padding-bottom: 0;
  }
}
@media (min-width: 800px) {
  .widget-title {
    font-size: 21px;
    line-height: 21px;
  }
  .widget .teaser-title,
  .page-element .teaser-title {
    font-size: 15px;
  }
  .widget .teaser-title.smaller,
  .page-element .teaser-title.smaller {
    font-size: 11px;
  }
  .widget [class^="span"],
  .page-element [class^="span"],
  .widget [class*=" span"],
  .page-element [class*=" span"] {
    padding-bottom: 0;
  }
  .widget hr.keyline,
  .page-element hr.keyline {
    display: none;
  }
  .widget .horizontal .teaser-title,
  .page-element .horizontal .teaser-title {
    padding-top: 1px;
    padding-left: 0;
  }
  .widget .horizontal .teaser,
  .page-element .horizontal .teaser {
    padding-left: 0;
  }
}
/*
    Thumbnail List Widget
    --------------------
 */
.widget.thumbnail-list hr.keyline {
  display: block;
}
.widget.thumbnail-list .widget-bg .icon {
  font-size: 14px;
}
.widget.thumbnail-list .teaser {
  padding-top: 5px;
}
@media (max-width: 660px) {
  .widget.thumbnail-list .widget-bg {
    padding-bottom: 22px;
  }
  .widget.thumbnail-list .row,
  .widget.thumbnail-list .mobile-row {
    padding-bottom: 0;
  }
  .widget.thumbnail-list .teaser-title {
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.6em;
  }
  .widget.thumbnail-list .teaser {
    padding-top: 8px;
    padding-bottom: 0;
    margin-bottom: -6px;
  }
  .widget.thumbnail-list .teaser-channel-logo {
    margin: 15px 0 0 0;
  }
}
@media (min-width: 660px) {
  .widget.thumbnail-list hr.keyline {
    display: none;
  }
}
/*
    Thumbnail Columns Widget
    ------------------------
 */
.widget.thumbnail-cols .teaser-title {
  padding-left: 9px;
  padding-right: 9px;
  padding-top: 10px;
  padding-bottom: 4px;
}
.widget.thumbnail-cols .small-series-ep {
  padding-left: 9px;
  padding-right: 9px;
  padding-top: 3px;
}
.widget.thumbnail-cols .teaser-channel-logo {
  margin: 6px 12px 8px 9px;
}
.widget.thumbnail-cols .widget-bg .icon {
  font-size: 14px;
}
@media (max-width: 660px) {
  .widget.thumbnail-cols.show-more .widget-bg {
    padding-bottom: 10px;
  }
  .widget.thumbnail-cols.show-more .widget-bg .teaser-title {
    line-height: 1.6em;
  }
}
/*
    Large Image Columns Widget
    --------------------------
 */
.large-columns .row .row,
#main-content .large-columns .row {
  padding-bottom: 0;
}
.large-columns .row .row .span4,
#main-content .large-columns .row .span4 {
  padding-bottom: 10px;
}
.large-columns .row .widget-bg,
#main-content .large-columns .widget-bg {
  padding-bottom: 0;
}
@media (min-width: 660px) {
  .large-columns .row .row,
  #main-content .large-columns .row {
    padding-bottom: 40px;
  }
  .large-columns .row .row .span4,
  #main-content .large-columns .row .span4 {
    padding-bottom: 0;
  }
  .large-columns .row .teaser-channel-logo,
  #main-content .large-columns .teaser-channel-logo {
    margin-left: 18px;
  }
}
/*
    Large Image List Widget
    --------------------------
 */
@media (min-width: 660px) {
  .widget.large-list .teaser-channel-logo {
    margin-left: 0;
  }
}
@media (max-width: 660px) {
  .large-list.show-more .widget-bg {
    padding-bottom: 10px;
  }
}
/*
 *   VoD Teaser Type Widgets with Channel Logos
 *   ------------------------------------------
 *   Teaser types for VoD items on the UKTV Play site and cross promotional
 *   teasers on the other VoD Channels have channel logos in their description...
 */
.widget .teaser-channel-logo,
.teaser-channel-logo {
  background-position: -250px 0;
  display: inline-block;
  height: 27px;
  width: 44px;
  padding: 0;
  margin: 15px 16px 28px 15px;
  vertical-align: middle;
}
@media (min-width: 800px) {
  .widget .teaser-channel-logo,
  .teaser-channel-logo {
    margin: 20px 16px 0 0;
    padding: 0;
  }
}
.teaser-channel-logo.dave {
  background-position: 0 0;
  height: 12px;
  width: 38px;
}
.teaser-channel-logo.really {
  background-position: 0 -50px;
  height: 12px;
  width: 39px;
}
.teaser-channel-logo.yesterday {
  background-position: 0 -100px;
  height: 18px;
  width: 42px;
}
.teaser-channel-logo.drama {
  background-position: 0 -404px;
  height: 18px;
  width: 53px;
}
.vod-promo-pill {
  background: #00bac6;
  color: #FFFFFF;
  display: inline-block;
  font-size: 10px;
  height: 17px;
  line-height: 17px;
  padding: 0 7px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.vod-promo-pill.large {
  font-size: 11px;
  height: 38px;
  line-height: 38px;
  padding: 0 16px;
}
.vod-promo-pill.premier {
  background: #e5f8f9;
  color: #00bac6;
}
.vod-promo-pill.staff-pick {
  background: #00bac6;
  color: #ffffff;
}
.vod-promo-pill.celeb-pick {
  background: #7fdce2;
  color: #ffffff;
}
.vod-promo-pill.short {
  background: #f0f0f0;
  color: #00bac6;
}
.img-zoom .vod-promo-pill {
  display: block;
  font-size: 11px;
  height: 21px;
  line-height: 21px;
  padding: 0 10px;
  position: absolute;
  top: 10px;
  right: 10px;
}
.listing-item .vod-promo-pill {
  font-size: 9px;
  padding: 0 5px;
  position: absolute;
  bottom: 6px;
  right: 5px;
}
#main-slider .vod-promo-pill {
  display: block;
  font-size: 11px;
  height: 21px;
  line-height: 21px;
  padding: 0 10px;
  position: absolute;
  top: 10px;
  right: 10px;
}
@media (min-width: 800px) {
  #main-slider .vod-promo-pill {
    font-size: 11px;
    height: 38px;
    line-height: 38px;
    padding: 0 16px;
    top: 30px;
    right: 30px;
  }
}
/*
 *   Caption Overlay for Hero Widgets
 *   --------------------------------
 *   This styles the overlaying title and caption for the
 *   homepage carousel slider and homepage hero area.
 */
.caption {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}
.caption .marketing-message {
  color: #ffffff;
  display: none;
}
.caption .title {
  font-size: 16px;
  padding: 11px 18px 5px;
}
.caption .title a,
.caption .title a:visited {
  color: #ffffff;
}
.caption .title a:hover {
  text-decoration: none;
}
.caption .title .icon {
  color: #666666;
  margin-right: 8px;
  position: relative;
  top: 1px;
}
.caption .sub-title.series-ep {
  font-size: 12px;
  line-height: 12px;
  padding: 14px 18px 14px;
}
.caption .sub-title {
  font-size: 13px;
  padding: 0 18px 10px;
}
.caption .sub-title a {
  color: #3e99b9;
}
.caption.vod .icon.large {
  background: url('https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg-trans.png');
  background: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  display: none;
}
.caption.vod .icon.small {
  display: inline;
}
.caption.vod .sub-title.series-ep {
  padding-bottom: 0;
}
@media (min-width: 660px) {
  .caption-overlay {
    padding: 0;
    position: relative;
  }
  .caption {
    background: none;
    display: block;
    position: absolute;
    bottom: 35px;
    left: 0;
  }
  .caption .title,
  .caption p {
    background: url('https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg-trans.png');
    background: rgba(0, 0, 0, 0.7);
    display: block;
    float: left;
    clear: left;
    margin: 0;
  }
  .caption .home-carousel-link {
    font-weight: normal;
    text-shadow: 0 1px 1px #000000;
  }
  .caption .marketing-message {
    display: block;
    font-size: 12px;
    padding: 6px 10px 1px 14px;
  }
  .caption .title {
    line-height: 27px;
    font-size: 27px;
    padding: 9px 15px 4px 18px;
  }
  .caption .title .icon {
    font-size: 20px;
    top: 0;
  }
  .caption .sub-title.series-ep {
    font-size: 14px;
    line-height: 14px;
    padding: 10px 20px 8px 14px;
  }
  .caption .sub-title {
    color: #3e99b9;
    font-size: 14px;
    line-height: 14px;
    padding: 8px 20px 9px 14px;
  }
  .caption .tx {
    font-size: 12px;
    color: #3e99b9;
    padding: 10px 10px 0 18px;
  }
  .caption.vod {
    height: 109px;
  }
  .caption.vod .icon.small {
    display: none;
  }
  .caption.vod .icon.large {
    display: inline-block;
    font-size: 62px;
    height: 109px;
    line-height: 109px;
    left: 0;
    width: 109px;
    text-align: center;
    vertical-align: bottom;
  }
  .caption.vod .text {
    display: inline-block;
    position: relative;
    left: -2px;
    vertical-align: bottom;
  }
  .caption.vod .text .title,
  .caption.vod .text p.sub-title,
  .caption.vod .text p.sub-title.series-ep {
    padding: 0 20px;
  }
  .caption.vod .text .title.no-episode-info {
    padding-top: 10px;
  }
  .caption.vod .text p.sub-title {
    font-size: 14px;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
  }
  .caption.vod .text p.sub-title.no-episode-info {
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .caption.vod .text p.sub-title.series-ep {
    font-size: 14px;
  }
  .caption.vod .text .title {
    height: 49px;
    line-height: 49px;
    padding-right: 18px;
  }
}
@media (min-width: 800px) {
  .caption-overlay {
    height: 400px;
  }
}
/*
 *  Widget Tabs
 *  -----------
 *  For widgets with tabbed navigation.
 *  For example: Catch Up Tabbed widget on the VOD landing page. The tabs themselves
 *  are implemented with the Twitter Bootstrap Tabs plugin.
 *  See: http://getbootstrap.com/javascript/#tabs
 *  JS: 'assets/common/base/js/widgets.js'
 */
.widget-tabs {
  margin: 0;
  padding: 0;
}
.widget-tabs li {
  display: block;
  float: left;
  margin: 0;
  height: 60px;
}
.widget-tabs li a {
  background: #000000;
  border-right: 1px solid #4d4d4d;
  color: #4d4d4d;
  display: block;
  font-size: 16px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  padding-top: 0;
  padding-bottom: 0;
}
.widget-tabs li:last-child a {
  border-right: none;
}
.widget-tabs li.active a,
.widget-tabs li.active:hover a {
  background: transparent;
  color: #666666;
}
.widget-tabs li:hover a {
  background: #333333;
  color: #ffffff;
}
.tab-content .tab-pane.pad-top {
  padding-top: 30px;
}
@media (min-width: 660px) {
  .widget-tabs li a {
    font-size: 24px;
  }
}
.catchup-tabs .widget-tabs {
  margin-top: -20px;
}
.catchup-tabs .widget-tabs li.latest {
  width: 30%;
}
.catchup-tabs .widget-tabs li.popular {
  width: 42%;
}
.catchup-tabs .widget-tabs li.az {
  width: 28%;
}
.catchup-tabs .small-series-ep,
.catchup-tabs .teaser-title {
  padding-left: 13px;
}
.vod-watch .catchup-tabs .widget-tabs li.latest {
  width: 50%;
}
.vod-watch .catchup-tabs .widget-tabs li.popular {
  width: 50%;
}
/*
 *  A-Z List & Navigation
 *  ---------------------
 *  List of letters in the alphabet as links to relevant points on the page. Used in the A-Z view on the Shows page, as
 *  part of the 'all-programmes' widget. Also used on the On Demand Tabbed Widget for the A-Z tab.
 *
 */
.no-cssgradients .alphabet-nav {
  background: #222222;
}
.cssgradients .alphabet-nav {
  background-image: -moz-linear-gradient(top, rgba(35, 35, 35, 0.75), rgba(35, 35, 35, 0.75));
  background-image: -ms-linear-gradient(top, rgba(35, 35, 35, 0.75), rgba(35, 35, 35, 0.75));
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(35, 35, 35, 0.75)), to(rgba(35, 35, 35, 0.75)));
  background-image: -webkit-linear-gradient(top, rgba(35, 35, 35, 0.75), rgba(35, 35, 35, 0.75));
  background-image: -o-linear-gradient(top, rgba(35, 35, 35, 0.75), rgba(35, 35, 35, 0.75));
  background-image: linear-gradient(top, rgba(35, 35, 35, 0.75), rgba(35, 35, 35, 0.75));
  background-repeat: repeat-x;
}
.alphabet-nav {
  font-size: 14px;
  padding: 0;
}
.alphabet-nav .alphabet-nav-list {
  margin: 0;
  padding: 4px 10px 8px;
}
.alphabet-nav .alphabet-nav-list li {
  display: inline-block;
  color: #999999;
  font-size: 14px;
  margin: 8px 0;
  text-align: center;
  width: 26px;
}
.alphabet-nav .alphabet-nav-list li a {
  display: block;
}
.alphabet-nav .alphabet-nav-list li.digits {
  width: 28px;
}
.alphabet-nav .alphabet-nav-list a {
  display: block;
}
@media (min-width: 660px) {
  .alphabet-nav .alphabet-nav-list {
    padding: 20px 0;
    text-align: center;
  }
  .alphabet-nav .alphabet-nav-list li {
    font-size: 14px;
    margin: 0;
    width: 18px;
  }
}
.alphabetical-list .prog-item {
  padding-top: 36px !important;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.alphabetical-list .prog-item .prog-item-header {
  margin: -36px 0 0 0;
  position: relative;
  background-image: -moz-linear-gradient(left, #2c2c2d, #1e1f1f);
  background-image: -ms-linear-gradient(left, #2c2c2d, #1e1f1f);
  background-image: -webkit-gradient(linear, 0 0, 0 0, from(#2c2c2d), to(#1e1f1f));
  background-image: -webkit-linear-gradient(left, #2c2c2d, #1e1f1f);
  background-image: -o-linear-gradient(left, #2c2c2d, #1e1f1f);
  background-image: linear-gradient(left, #2c2c2d, #1e1f1f);
  background-repeat: repeat-x;
}
.alphabetical-list .prog-item .prog-item-header .letter {
  display: block;
  font-size: 22px;
  height: 36px;
  line-height: 36px;
  margin: 0;
  padding: 0 0 0 17px;
}
.alphabetical-list .prog-item .prog-item-header .back-to-top {
  position: absolute;
  top: 12px;
  right: 14px;
}
.alphabetical-list .prog-item .prog-item-header .back-to-top .icon {
  color: #3e99b9;
  font-size: 10px;
  margin: 0;
}
.alphabetical-list .prog-item .prog-title {
  font-size: 13px;
  margin: 0;
  padding: 13px 5px 0 6px;
  position: relative;
  top: -2px;
}
.alphabetical-list .prog-item .prog-title i {
  position: relative;
  top: 2px;
}
.alphabetical-list .prog-item .letter-overlay {
  background: #ffffff;
  display: block;
  height: 100%;
  margin-left: 20px;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-transition: opacity 1.6s ease;
  transition: opacity 1.6s ease;
}
.alphabetical-list .prog-item .letter-overlay.in {
  opacity: 0.15;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}
@media (min-width: 480px) {
  .alphabetical-list .prog-item .prog-title {
    padding-left: 10px;
  }
}
/*
    Homepage Hero Image
    -------------------
    This widget has two incarnations: Non Full Page and Full Page.

    Non Full Page is just a simple image, with overlaying text. The image is cut off
    a little for large viewports to ensure the MPU is above the fold.

    For Full Page: We have three images from our CDN and uploaded via the CMS, we apply
    body backgrounds via inline CSS in: 'apps/hubpages/templates/channel-hero-image_super_hero_widget.html'
    The image URL is pulled in via a template tag. The general styles and rules to position
    the background at different breakpoints is here:
 */
.channel-hero-image.not-full-page {
  margin-bottom: 20px;
  padding-bottom: 10px;
  background-image: -moz-linear-gradient(top, rgba(34, 34, 34, 0.8), rgba(0, 0, 0, 0.8));
  background-image: -ms-linear-gradient(top, rgba(34, 34, 34, 0.8), rgba(0, 0, 0, 0.8));
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(34, 34, 34, 0.8)), to(rgba(0, 0, 0, 0.8)));
  background-image: -webkit-linear-gradient(top, rgba(34, 34, 34, 0.8), rgba(0, 0, 0, 0.8));
  background-image: -o-linear-gradient(top, rgba(34, 34, 34, 0.8), rgba(0, 0, 0, 0.8));
  background-image: linear-gradient(top, rgba(34, 34, 34, 0.8), rgba(0, 0, 0, 0.8));
  background-repeat: repeat-x;
}
@media (max-width: 660px) {
  .channel-hero-image.full-page {
    margin-bottom: 20px;
  }
  .channel-hero-image.full-page .caption {
    margin-top: 120px;
  }
  .channel-hero-image.full-page .caption .title,
  .channel-hero-image.full-page .caption p {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/img/bg-trans.png");
    background: rgba(0, 0, 0, 0.7);
    display: inline-block;
    margin: 0;
    padding: 8px 10px 10px 14px;
    *display: inline;
    /* IE7 inline-block hack */
    *zoom: 1;
  }
  .channel-hero-image.full-page .caption .title .icon:before,
  .channel-hero-image.full-page .caption p .icon:before {
    font-size: 0.8em;
    position: relative;
    top: 2px;
  }
  .channel-hero-image.full-page .caption .title {
    margin-right: 60px;
    padding-bottom: 0;
  }
  .channel-hero-image.full-page .caption .sub-title {
    margin-right: 20px;
  }
}
@media (min-width: 460px) {
  .channel-hero-image.full-page .caption {
    margin-top: 230px;
  }
}
@media (min-width: 660px) {
  .channel-hero-image {
    background: none;
    height: 420px;
    position: relative;
    width: 1000px;
    margin: 0 auto;
  }
  .channel-hero-image.full-page .caption {
    margin-top: 0;
  }
  .channel-hero-image.full-page .caption .title {
    padding-left: 14px;
  }
  .channel-hero-image.not-full-page {
    overflow: hidden;
  }
  .channel-hero-image.not-full-page img {
    position: relative;
    top: -100px;
  }
}
/*
 *  Hub Hero Widget - Just Image
 *  ----------------------------
 *  Simple hub hero with just a single image and a title & caption
 */
.hub-hero {
  font-size: 12px;
  padding-bottom: 18px;
}
.hub-hero .hub-hero-title {
  font-size: 24px;
  padding-top: 15px;
  padding-bottom: 12px;
}
.hub-hero.no-caption {
  padding-bottom: 0;
}
/*
 *  Brand Hero Widget
 *  -----------------
 */
.brand-hero .img-zoom {
  position: relative;
}
.brand-hero .img-zoom .icon {
  font-size: 35px;
  height: 60px;
  line-height: 60px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 60px;
}
@media (min-width: 660px) {
  .brand-hero .img-zoom .icon {
    font-size: 40px;
    height: 70px;
    line-height: 70px;
    width: 70px;
  }
}
/*
 *  Sidebar Widgets
 *  ---------------
 */
#sidebar .widget-title {
  font-size: 18px;
  line-height: 18px;
}
#sidebar .teaser-title {
  font-size: 13px;
}
#sidebar .widget.accordion.no-arrows .arrow {
  display: none;
}
@media (max-width: 660px) {
  #sidebar {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  #sidebar .widget-title {
    font-size: 16px;
    line-height: 16px;
  }
  #sidebar .teaser-title {
    font-size: 12px;
  }
  #sidebar .widget.accordion {
    margin-bottom: 20px;
  }
  #sidebar .widget.accordion.open {
    margin-bottom: 0;
    margin-top: 0;
    -webkit-transition: margin-top 0.2s linear;
    transition: margin-top 0.2s linear;
  }
  #sidebar .widget.accordion.open .widget-title {
    background-image: -moz-linear-gradient(top, #0f0f0f, #0f0f0f);
    background-image: -ms-linear-gradient(top, #0f0f0f, #0f0f0f);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0f0f0f), to(#0f0f0f));
    background-image: -webkit-linear-gradient(top, #0f0f0f, #0f0f0f);
    background-image: -o-linear-gradient(top, #0f0f0f, #0f0f0f);
    background-image: linear-gradient(top, #0f0f0f, #0f0f0f);
    background-repeat: repeat-x;
  }
  #sidebar .widget.accordion {
    margin-top: 20px;
    -webkit-transition: margin-top 0.2s linear;
    transition: margin-top 0.2s linear;
  }
  #sidebar .widget.accordion .widget-title {
    background-image: -moz-linear-gradient(top, #232323, #232323);
    background-image: -ms-linear-gradient(top, #232323, #232323);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#232323), to(#232323));
    background-image: -webkit-linear-gradient(top, #232323, #232323);
    background-image: -o-linear-gradient(top, #232323, #232323);
    background-image: linear-gradient(top, #232323, #232323);
    background-repeat: repeat-x;
  }
  #sidebar .widget.accordion.last {
    margin-bottom: 20px;
  }
}
/*
 *  Play Icon In Video Teasers
 *  --------------------------
 */
a.img-zoom {
  display: block;
  position: relative;
}
a.img-zoom i {
  background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/ie_play_button_bg.png");
  background: rgba(0, 0, 0, 0.6);
  color: #666666;
  display: block;
  font-size: 20px;
  height: 60px;
  line-height: 60px;
  position: absolute;
  bottom: 0;
  top: auto;
  left: 0;
  width: 60px;
  text-align: center;
  text-indent: 2px;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
a.img-zoom i.small {
  height: 40px;
  line-height: 40px;
  width: 40px;
}
a.img-zoom i.small.icon-vod,
a.img-zoom i.small.icon-longformvideo {
  width: 36px;
  padding-right: 4px;
}
a.img-zoom i.icon-vod,
a.img-zoom i.icon-longformvideo {
  font-size: 20px;
  width: 56px;
  padding-right: 4px;
}
a.img-zoom i.icon-vod.small {
  font-size: 20px;
}
.img-zoom:hover {
  text-decoration: none;
}
.img-zoom:hover i {
  background: #000000;
  color: #666666;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.playing a.img-zoom:after,
a.img-zoom .days-left,
a.img-zoom .message {
  background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg-trans.png");
  background: rgba(0, 0, 0, 0.65);
  background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/ie_play_button_bg.png");
  background: rgba(0, 0, 0, 0.6);
  color: #666666;
  font-size: 11px;
  display: inline-block;
  height: 60px;
  line-height: 60px;
  padding: 0 20px;
  position: absolute;
  bottom: 0;
  left: 61px;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.playing a.img-zoom:after {
  content: "Playing";
  opacity: 0;
}
.playing.in a.img-zoom:after {
  opacity: 1;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
a.img-zoom .days-left.small,
a.img-zoom .message.small {
  font-size: 11px;
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  left: 41px;
}
@media (max-width: 800px) {
  .thumbnail-list a.img-zoom i.icon-play.small,
  .thumbnail-list a.img-zoom i.icon-vod.small {
    height: 20px;
    font-size: 10px;
    line-height: 22px;
    width: 20px;
  }
  .thumbnail-list a.img-zoom .days-left.small {
    display: none;
  }
}
/*
 *  Links list (within sidebar or articles)
 *  ---------------------------------------
 */
ul.links-list {
  list-style: none;
  margin: 0 15px 15px 0;
  padding: 0 0 0 20px;
}
ul.links-list li {
  margin: 0 0 10px;
}
ul.links-list li [class^="icon-"],
ul.links-list li [class*=" icon-"] {
  float: left;
  font-size: 15px;
  height: 1.5em;
  margin-right: 8px;
  position: relative;
  top: -3px;
}
/*
 *  Random Quotes Widget
 *  --------------------
 */
.cssanimations .quote-area {
  opacity: 0;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.cssanimations .quote-area.in {
  opacity: 1;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.random-quotes .widget-bg {
  position: relative;
  padding: 0;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}
.random-quotes .quote-area {
  padding: 20px 80px 30px;
}
.random-quotes .quote-area p {
  padding: 0;
  font-size: 20px;
  line-height: 1.1em;
}
.random-quotes .quote-btn {
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.7);
  color: #666666;
  display: inline-block;
  font-family: uktv_icons;
  font-size: 15px;
  width: 60px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  position: absolute;
  top: 0;
}
.random-quotes .quote-prev {
  left: 0;
}
.random-quotes .quote-next {
  right: 0;
}
@media (min-width: 660px) {
  .random-quotes .quote-area p {
    font-size: 29px;
  }
}
/*
    iFrame Widget & iFrame Pages
    ----------------------------
    The iFrame widget and stand alone page both use inline CSS within their templates:

    * iFrame Widget : apps/externalcontent/templates/iframe-widget_content_widget.html
    * iFrame Page   : apps/externalcontent/templates/iframe_page.html

    This is so that we can take height & width values from the CMS and apply them
    to the iFrame and its container. The editor can define these values for three
    viewport sizes: small (mobile), medium (tablet) and large (desktop).
 */
.iframe-container .the-iframe {
  overflow: hidden;
}
/*
 *  Newsletter Signup Widgets
 *  -------------------------
 */
.no-cssgradients .widget.newsletter-signup .widget-bg,
.no-cssgradients #sidebar .widget.newsletter-signup .widget-bg {
  background: rgba(34, 34, 34, 0.8);
}
.cssgradients .widget.newsletter-signup .widget-bg,
.cssgradients #sidebar .widget.newsletter-signup .widget-bg {
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.8), rgba(34, 34, 34, 0.8));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.8), rgba(34, 34, 34, 0.8));
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.8)), to(rgba(34, 34, 34, 0.8)));
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.8), rgba(34, 34, 34, 0.8));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.8), rgba(34, 34, 34, 0.8));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0.8), rgba(34, 34, 34, 0.8));
  background-repeat: repeat-x;
}
.widget.newsletter-signup {
  color: #666666;
}
.widget.newsletter-signup a {
  color: #3e99b9;
}
.widget.newsletter-signup a:hover {
  color: #6dd6ec;
}
.widget.newsletter-signup .widget-bg {
  padding-top: 15px;
}
.widget.newsletter-signup .nl-thank-you {
  font-size: 16px;
  line-height: 16px;
  padding-top: 5px;
  padding-bottom: 0;
}
.widget.newsletter-signup .nl-copy {
  font-size: 12px;
  line-height: 1.8em;
  padding-top: 0;
  padding-bottom: 15px;
}
.widget.newsletter-signup .fixed-fluid-left .fixed-fluid-left-content {
  border: 1px #ffffff solid;
  margin-left: 18px;
  margin-right: 101px;
}
.widget.newsletter-signup .fixed-fluid-left .fixed-fluid-left-content.focus {
  border-color: #3e99b9;
}
.widget.newsletter-signup .fixed-fluid-right {
  margin-left: -101px;
  width: 65px;
}
.widget.newsletter-signup .btn {
  color: #ffffff;
  border: none;
  filter: none;
  height: 32px;
  font-size: 11px;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#3e99b9), to(#245e72));
  background-image: -webkit-linear-gradient(top, #3e99b9, 0%, #245e72, 100%);
  background-image: -moz-linear-gradient(top, #3e99b9 0%, #245e72 100%);
  background-image: linear-gradient(to bottom, #3e99b9 0%, #245e72 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3e99b9', endColorstr='#ff245e72', GradientType=0);
}
.widget.newsletter-signup .btn:hover {
  color: #ffffff;
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#245e72), to(#3e99b9));
  background-image: -webkit-linear-gradient(top, #245e72, 0%, #3e99b9, 100%);
  background-image: -moz-linear-gradient(top, #245e72 0%, #3e99b9 100%);
  background-image: linear-gradient(to bottom, #245e72 0%, #3e99b9 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff245e72', endColorstr='#ff3e99b9', GradientType=0);
}
.widget.newsletter-signup .error-msg {
  margin-left: 18px;
  margin-right: 18px;
}
.widget.newsletter-signup .nl-fine-print {
  color: #666666;
  font-size: 10px;
}
.no-csstransitions #newsletter-signup-widget .back-side,
.no-csstransitions #newsletter-signup-widget .front-side {
  position: relative;
}
#sidebar .widget.newsletter-signup .fixed-fluid-left .fixed-fluid-left-content {
  margin-right: 81px;
}
#sidebar .widget.newsletter-signup .fixed-fluid-right {
  margin-left: -81px;
}
.js.csstransitions #newsletter-signup-widget {
  min-height: 150px;
  position: relative;
  -webkit-transform-style: preserve-3d;
  -webkit-perspective: 1000;
  -webkit-transition: height 0.5s linear;
  transition: height 0.5s linear;
}
.js.csstransitions #newsletter-signup-widget .back,
.js.csstransitions #newsletter-signup-widget .front {
  position: absolute;
  width: 100%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: all 0.7s ease-in;
  transition: all 0.7s ease-in;
}
.js.csstransitions #newsletter-signup-widget .back {
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
.js.csstransitions #newsletter-signup-widget.flipped .front {
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
.js.csstransitions #newsletter-signup-widget.flipped .back {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
/*
 *  AJAX Widgets
 *  ------------
 *  The CSS for widgets that are populated by data from an AJAX Request.
 *
 */
.ajax-widget {
  display: none;
  -webkit-transition: height 100ms ease;
  transition: height 100ms ease;
}
.ajax-widget .ajax-widget-item {
  opacity: 0;
  -webkit-transition: opacity 200ms 250ms ease-in;
  transition: opacity 200ms 250ms ease-in;
}
.ajax-widget.has-results .ajax-widget-item {
  opacity: 1;
}
.ajax-widget .ajax-loading {
  height: 100px;
  text-align: center;
  padding-bottom: 40px;
}
.ajax-widget .ajax-loading .spinner-graphic {
  -webkit-animation: spin 0.8s linear infinite !important;
  -moz-animation: spin 0.8s linear infinite !important;
  -ms-animation: spin 0.8s linear infinite !important;
  -o-animation: spin 0.8s linear infinite !important;
  animation: spin 0.8s linear infinite !important;
  border: 2px solid #939598 !important;
  border-radius: 50% !important;
  border-right-color: transparent !important;
  display: inline-block !important;
  height: 100px !important;
  width: 100px !important;
}
.ajax-widget .close-widget {
  cursor: pointer;
}
.ajax-widget.has-results.staggered .ajax-widget-item:nth-child(1) {
  transition-delay: 200ms;
}
.ajax-widget.has-results.staggered .ajax-widget-item:nth-child(2) {
  transition-delay: 300ms;
}
.ajax-widget.has-results.staggered .ajax-widget-item:nth-child(3) {
  transition-delay: 400ms;
}
.ajax-widget.has-results.staggered .ajax-widget-item:nth-child(4) {
  transition-delay: 500ms;
}
.ajax-widget .show-more {
  display: none;
}
.lt-ie9 .ajax-widget {
  display: none !important;
}
/*
 *  Filter Widgets
 *  --------------
 *  Recommendation widgets
 */
.filter-widget .no-filter-results {
  text-align: center;
  line-height: 75px;
}
.lt-ie9 .filter-widget {
  display: none !important;
}
#filter-overlay-widget {
  bottom: 0;
  display: none;
  margin-bottom: 64px;
  margin-left: -25px;
  min-height: 245px;
  padding: 0;
  position: absolute;
  width: 100%;
}
#filter-overlay-widget .filter-container {
  height: auto;
  margin: 0 auto;
  max-width: 660px;
}
#filter-overlay-widget .filter-container p.series-ep {
  font-size: 12px;
}
#filter-overlay-widget .filter-container h6.teaser-title.smaller {
  font-size: 15px;
}
#filter-overlay-widget .filter-container .widget-title-and-link {
  background-color: transparent;
  display: block;
}
#filter-overlay-widget .filter-container .widget-title-and-link .widget-title {
  background-color: #232323;
  border-right: 0;
}
#filter-overlay-widget .filter-container .widget-title-and-link .title-link {
  background-color: #232323;
  padding-top: 12px;
  padding-bottom: 12px;
  margin-top: -22px;
  width: 44px;
}
#filter-overlay-item-list {
  background-color: rgba(255, 255, 255, 0.9);
  background-image: none;
  height: 100%;
  min-height: 161px;
}
#filter-overlay-item-list .row {
  padding-bottom: 0;
}
.no-rgba #filter-overlay-item-list {
  background-color: #ffffff;
}
.filter-widget.will-appear {
  opacity: 0;
  -webkit-transition: opacity 150ms ease-out;
  transition: opacity 150ms ease-out;
}
.filter-widget.will-appear.visible {
  opacity: 1!important;
}

/*
 *  --------------
 *  BASE VARIABLES
 *  --------------
 *  Corporate, Press and Network Homepage sites.
 *
 *  If a site does not have it's own 'variables.less' file, then it uses this one. So because Corporate, Press and
 *  Network are all very similar, none of them have their own and therefore this file contains the variables that govern
 *  each one of them. All other sites will have their own 'variables.less' file.
 *
 *  This also applies for colours.less and site-fonts.less.
 */
/*
 *  Breakpoints & Grid  | Corp | Press | Network
 *  --------------------------------------------
 */
/*
 *  Typography  | Corp | Press | Network
 *  ------------------------------------
 *  Mostly font-sizes
 */
/*
 *  Dimensions | Corp
 *  ------------------------------------
 */
/*
 *  ------------
 *  BASE COLOURS
 *  ------------
 *  Corporate, Press and Network Homepage sites.
 *
 *  If a site does not have it's own 'colours.less' file, then it uses this one. So because Corporate, Press and
 *  Network are all very similar, none of them have their own and therefore this file contains the colour variables that
 *  govern all of them. All other sites will have their own 'colours.less' file.
 *
 *  This also applies for variables.less and site-fonts.less.
 */
/*
 *  Basics | Corp | Press | Network
 *  -------------------------------
 */
/*
 *  Navigation | Corp | Press | Network
 *  -----------------------------------
 */
/*
 *  Footer | Corp | Press | Network
 *  -------------------------------
 */
/*
 *  Buttons | Corp | Press | Network
 *  --------------------------------
 *  All types of buttons, including arrows on carousels & tags
 */
/*
 *  Widgetz & Page Elements | Corp | Press | Network
 *  ------------------------------------------------
 */
/*
 *  TV GUIDE | Corp | Press | Network
 *  ---------------------------------
 */
/*
 *  Carousels & Galleries | Corp | Press | Network
 *  ----------------------------------------------
 */
/*
 *  Programmes / Brand Pages | Corp | Press | Network
 *  -------------------------------------------------
 */
/*
 *  VOD - Watch Episode Page | Corp | Press | Network
 *  -------------------------------------------------
 */
/*
 *  Articles | Corp | Press | Network
 *  ---------------------------------
 *  NOTE : Title & Intro text defined as @single_page_title_colour & @single_page_title_colour
 *  as these are global styles for similar pages such as video or gallery
 */
/*
 *  Other Stuff & Misc | Corp | Press | Network
 *  -------------------------------------------
 */
/*
 *  Forms | Corp | Press | Network
 *  ------------------------------
 *  Used throughout the site, such as Newsletter Signup, Login and Registration and Contact form
 */
/*
 *  Login / Register / My UKTV  | Corp | Press | Network
 *  ---------------------------------------------------
 */
/*
 *  User Profile | Network
 *  ----------------------
 */
/*
 *  Competitions | Network
 *  ----------------------
 */
/*
 *  Newsletter Archive | Network
 *  ----------------------------
 */
/*
 *  Quiz | Corp | Press | Network
 *  -----------------------------
 */
/*
 *  Typography
 *  ----------
 *  - typographic elements inside .widget or .page-element containers have left and right padding applied
 *    see Widgets & Page Elements below
 */
body {
  color: #666666;
  font-size: 12px;
}
h1,
h2,
h3,
h4,
h5,
h5,
h6 {
  font-weight: normal;
}
h1 {
  margin: 0;
  padding-top: 5px;
  padding-bottom: 5px;
}
h2 {
  margin: 0;
  padding-top: 5px;
  padding-bottom: 5px;
}
h3 {
  margin: 0;
  padding-top: 15px;
  padding-bottom: 5px;
}
h4 {
  margin: 0;
  padding-top: 20px;
  padding-bottom: 20px;
  line-height: 20px;
}
h5 {
  margin: 0;
  padding-top: 10px;
  padding-bottom: 10px;
}
h6 {
  margin: 0;
  padding-top: 5px;
  padding-bottom: 5px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}
p {
  line-height: 1.65em;
  margin: 0;
  padding: 0.8em 0;
}
a,
a:visited,
a:focus,
a:active {
  color: #3e99b9;
  text-decoration: none;
}
a:hover {
  color: #6dd6ec;
  text-decoration: none;
}
/*
 *  Hub Page Headers
 *  ----------------
 */
header.hub-title-box .hub-title {
  color: #3e99b9;
  font-size: 22px;
  line-height: 22px;
  padding: 0 15px 16px 15px;
}
header.hub-title-box a,
header.hub-title-box a:hover,
header.hub-title-box a:active {
  color: #3e99b9;
}
.hub-intro-text {
  color: #3e99b9;
  padding: 0 15px 25px 15px;
  margin-top: -5px;
  font-size: 17px;
  line-height: 23px;
}
.homepage .hub-intro-text {
  margin-top: 0;
}
@media (min-width: 480px) {
  .hub-title {
    padding: 0 18px 16px 18px;
  }
  header.hub-title-box {
    margin-top: -4px;
  }
}
@media (min-width: 660px) {
  header.hub-title-box .hub-title {
    font-size: 28px;
    line-height: 28px;
  }
  .hub-intro-text {
    font-size: 18px;
  }
}
/*
 *  Hub Sub Titles
 *  -------------
 *  Usually appears underneath the main image, for example; Brand Page marketing message
 */
.hub-sub-title {
  color: inherit;
  font-size: 18px;
  line-height: 18px;
  padding-top: 18px;
  padding-bottom: 18px;
}
@media (min-width: 660px) {
  .hub-sub-title {
    font-size: 24px;
    line-height: 24px;
    padding-top: 19px;
  }
}
/*
 *  Single Page Headers
 *  -------------------
 *  For pages such as articles, galleries and short form videos. These are
 *  'single pages' that usually do not have the larger titles that hub pages do.
 */
.single-title {
  color: #ffffff;
  font-size: 16px;
  line-height: 16px;
  margin: 0;
  padding-top: 20px;
  padding-bottom: 20px;
}
.single-intro {
  color: #999999;
  display: block;
  font-size: 13px;
  line-height: 1.4em;
  margin-top: -9px;
  padding-top: 0;
  padding-bottom: 17px;
}
.single-intro p {
  margin-top: 0;
  padding-top: 0;
  margin-bottom: 0;
  padding-bottom: 9px;
}
@media (min-width: 800px) {
  .single-title {
    font-size: 22px;
    line-height: 22px;
  }
  .single-intro {
    font-size: 14px;
  }
}
/*
    Inside Widgets & Page Elements
    ------------------------------
    Because these containers rely on padding to apply grid gutters, we apply our
    padding for typogrpahic elements directly on the elements themselves:

    TODO: Replace h1,h2,h3,etc... with a class name to make it more 'DRY'
 */
.widget h1,
.page-element h1,
.type-padding h1,
.widget h2,
.page-element h2,
.type-padding h2,
.widget h3,
.page-element h3,
.type-padding h3,
.widget h4,
.page-element h4,
.type-padding h4,
.widget h5,
.page-element h5,
.type-padding h5,
.widget h6,
.page-element h6,
.type-padding h6,
.widget p,
.page-element p,
.type-padding p,
.widget figcaption,
.page-element figcaption,
.type-padding figcaption,
.widget time,
.page-element time,
.type-padding time,
.widget .widget-padding,
.page-element .widget-padding,
.type-padding .widget-padding {
  padding-left: 15px;
  padding-right: 15px;
}
.widget li p,
.page-element li p,
.type-padding li p {
  padding-left: 0;
}
@media (min-width: 480px) {
  .widget h1,
  .page-element h1,
  .type-padding h1,
  .widget h2,
  .page-element h2,
  .type-padding h2,
  .widget h3,
  .page-element h3,
  .type-padding h3,
  .widget h4,
  .page-element h4,
  .type-padding h4,
  .widget h5,
  .page-element h5,
  .type-padding h5,
  .widget h6,
  .page-element h6,
  .type-padding h6,
  .widget p,
  .page-element p,
  .type-padding p,
  .widget figcaption,
  .page-element figcaption,
  .type-padding figcaption,
  .widget time,
  .page-element time,
  .type-padding time,
  .widget .widget-padding,
  .page-element .widget-padding,
  .type-padding .widget-padding {
    padding-left: 18px;
    padding-right: 18px;
  }
}
@media (min-width: 660px) {
  .widget .horizontal h1,
  .page-element .horizontal h1,
  .widget .horizontal h2,
  .page-element .horizontal h2,
  .widget .horizontal h3,
  .page-element .horizontal h3,
  .widget .horizontal h4,
  .page-element .horizontal h4,
  .widget .horizontal h5,
  .page-element .horizontal h5,
  .widget .horizontal h6,
  .page-element .horizontal h6,
  .widget .horizontal p,
  .page-element .horizontal p {
    padding-left: 0;
  }
  .widget .horizontal h1,
  .page-element .horizontal h1,
  .widget .horizontal h2,
  .page-element .horizontal h2,
  .widget .horizontal h3,
  .page-element .horizontal h3,
  .widget .horizontal h4,
  .page-element .horizontal h4,
  .widget .horizontal h5,
  .page-element .horizontal h5,
  .widget .horizontal h6,
  .page-element .horizontal h6 {
    margin-top: 0;
    padding-top: 0;
  }
}
/*
    Media Icons in Titles
    ---------------------
    for the placement of media icons, the icons themselves are defined in 'icons/icons.less'
 */
.widget h1 [class^="icon-"],
.page-element h1 [class^="icon-"],
.widget h2 [class^="icon-"],
.page-element h2 [class^="icon-"],
.widget h3 [class^="icon-"],
.page-element h3 [class^="icon-"],
.widget h4 [class^="icon-"],
.page-element h4 [class^="icon-"],
.widget h5 [class^="icon-"],
.page-element h5 [class^="icon-"],
.widget h6 [class^="icon-"],
.page-element h6 [class^="icon-"],
.widget h1 [class*=" icon-"],
.page-element h1 [class*=" icon-"],
.widget h2 [class*=" icon-"],
.page-element h2 [class*=" icon-"],
.widget h3 [class*=" icon-"],
.page-element h3 [class*=" icon-"],
.widget h4 [class*=" icon-"],
.page-element h4 [class*=" icon-"],
.widget h5 [class*=" icon-"],
.page-element h5 [class*=" icon-"],
.widget h6 [class*=" icon-"],
.page-element h6 [class*=" icon-"] {
  color: #666666;
  font-size: 15px;
  margin-right: 7px;
  position: relative;
  top: 1px;
}
.widget h1 .icon-vod,
.page-element h1 .icon-vod,
.widget h2 .icon-vod,
.page-element h2 .icon-vod,
.widget h3 .icon-vod,
.page-element h3 .icon-vod,
.widget h4 .icon-vod,
.page-element h4 .icon-vod,
.widget h5 .icon-vod,
.page-element h5 .icon-vod,
.widget h6 .icon-vod,
.page-element h6 .icon-vod,
.widget h1 .i.icon-longformvideo,
.page-element h1 .i.icon-longformvideo,
.widget h2 .i.icon-longformvideo,
.page-element h2 .i.icon-longformvideo,
.widget h3 .i.icon-longformvideo,
.page-element h3 .i.icon-longformvideo,
.widget h4 .i.icon-longformvideo,
.page-element h4 .i.icon-longformvideo,
.widget h5 .i.icon-longformvideo,
.page-element h5 .i.icon-longformvideo,
.widget h6 .i.icon-longformvideo,
.page-element h6 .i.icon-longformvideo {
  margin-right: 3px;
  top: 2px;
}
/*
    Button Holders
    --------------
    Elements with class 'btn-holder' center the buttons accordingly
    Show more button is defined in 'widgets.less'
    TODO: Consider moving this into 'buttons.less' when merged from Gregs branch
 */
.btn-holder {
  position: relative;
}
.btn-holder.center {
  padding: 18px 0 18px 0;
  text-align: center;
}
.btn-holder.mutli button,
.btn-holder.mutli a.btn {
  margin: 0 9px;
}
.btn .text {
  display: none;
}
/*
    Lists
    -----
 */
.article-content ul,
.article-content ol {
  margin-top: 0;
  margin-bottom: 0;
  padding: 10px 20px 10px 45px;
}
.article-content ul li,
.article-content ol li {
  padding: 0 0 10px 5px;
}
.article-content ul li p,
.article-content ol li p {
  padding-left: 0;
}
.article-content ul li {
  list-style: square;
}
.article-content .widget ul,
.article-content .widget ol {
  padding-top: 0;
}
/*
    Block quote
    -----------
 */
html .article-content blockquote {
  color: #666666;
}
.widget blockquote,
.page-element blockquote {
  color: #666666;
}
.article-content blockquote,
.hub-hero blockquote {
  font-size: 18px;
  line-height: 20px;
  margin: 20px 50px 20px 50px;
  position: relative;
}
.article-content blockquote p,
.hub-hero blockquote p {
  padding: 0;
}
.article-content blockquote > p:before,
.hub-hero blockquote > p:before,
.article-content blockquote > p:after,
.hub-hero blockquote > p:after {
  color: #3e99b9;
  font-family: helveticaneue;
  font-weight: normal;
  font-style: normal;
  font-size: 75px;
  position: relative;
}
.article-content blockquote > p:before,
.hub-hero blockquote > p:before {
  content: '“';
  top: 26px;
  left: -7px;
}
.article-content blockquote > p:after,
.hub-hero blockquote > p:after {
  content: '”';
  bottom: 0;
  right: -9px;
  line-height: 0px;
  top: 42px;
}
@media (min-width: 660px) {
  body blockquote.small-width {
    margin: 0 100px 20px 100px;
  }
}
/*
    Auto Ellipsis / Truncate
    ------------------------
    Elements with 'ellipsis' class are targeted by the 'Auto Ellipsis' plugin. We want
    the paragraph to be a set height (two lines) and automatically cut off if overflowing.
    Plugin: 'js/libraries-plugins/jquery/auto-ellipsis/jquery.autoellipsis-1.0.10.js'
 */
.rgba .teaser-container {
  height: 32px;
  overflow: hidden;
}
.rgba .auto-ellipsis.two-lines {
  max-height: 3.465em;
}
.truncate {
  display: block;
  width: 95%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*
    IE8 / Custom Fonts Issue
    ------------------------
    Use of a filter to overcome the issue of IE8 on Windows 7 disabling anti-aliasing on custom fonts.
 */
.lt-ie9 h1,
.lt-ie9 h2,
.lt-ie9 h3,
.lt-ie9 h4,
.lt-ie9 h5,
.lt-ie9 h6,
.lt-ie9 .site-nav li a,
.lt-ie9 #footer-menu li a,
.lt-ie9 #site-search-label,
.lt-ie9 #home-slider p,
.lt-ie9 #full-page-carousel p,
.answer-button .answer,
#question-title,
.lt-ie9 .flex-prev,
.lt-ie9 .flex-next {
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#00ffffff',EndColorStr='#00ffffff')";
}

/*
 *  --------------
 *  BASE VARIABLES
 *  --------------
 *  Corporate, Press and Network Homepage sites.
 *
 *  If a site does not have it's own 'variables.less' file, then it uses this one. So because Corporate, Press and
 *  Network are all very similar, none of them have their own and therefore this file contains the variables that govern
 *  each one of them. All other sites will have their own 'variables.less' file.
 *
 *  This also applies for colours.less and site-fonts.less.
 */
/*
 *  Breakpoints & Grid  | Corp | Press | Network
 *  --------------------------------------------
 */
/*
 *  Typography  | Corp | Press | Network
 *  ------------------------------------
 *  Mostly font-sizes
 */
/*
 *  Dimensions | Corp
 *  ------------------------------------
 */
/*
 *  Custom Mixins
 *  -------------
 *
 */
/*
 *  ------------
 *  BASE COLOURS
 *  ------------
 *  Corporate, Press and Network Homepage sites.
 *
 *  If a site does not have it's own 'colours.less' file, then it uses this one. So because Corporate, Press and
 *  Network are all very similar, none of them have their own and therefore this file contains the colour variables that
 *  govern all of them. All other sites will have their own 'colours.less' file.
 *
 *  This also applies for variables.less and site-fonts.less.
 */
/*
 *  Basics | Corp | Press | Network
 *  -------------------------------
 */
/*
 *  Navigation | Corp | Press | Network
 *  -----------------------------------
 */
/*
 *  Footer | Corp | Press | Network
 *  -------------------------------
 */
/*
 *  Buttons | Corp | Press | Network
 *  --------------------------------
 *  All types of buttons, including arrows on carousels & tags
 */
/*
 *  Widgetz & Page Elements | Corp | Press | Network
 *  ------------------------------------------------
 */
/*
 *  TV GUIDE | Corp | Press | Network
 *  ---------------------------------
 */
/*
 *  Carousels & Galleries | Corp | Press | Network
 *  ----------------------------------------------
 */
/*
 *  Programmes / Brand Pages | Corp | Press | Network
 *  -------------------------------------------------
 */
/*
 *  VOD - Watch Episode Page | Corp | Press | Network
 *  -------------------------------------------------
 */
/*
 *  Articles | Corp | Press | Network
 *  ---------------------------------
 *  NOTE : Title & Intro text defined as @single_page_title_colour & @single_page_title_colour
 *  as these are global styles for similar pages such as video or gallery
 */
/*
 *  Other Stuff & Misc | Corp | Press | Network
 *  -------------------------------------------
 */
/*
 *  Forms | Corp | Press | Network
 *  ------------------------------
 *  Used throughout the site, such as Newsletter Signup, Login and Registration and Contact form
 */
/*
 *  Login / Register / My UKTV  | Corp | Press | Network
 *  ---------------------------------------------------
 */
/*
 *  User Profile | Network
 *  ----------------------
 */
/*
 *  Competitions | Network
 *  ----------------------
 */
/*
 *  Newsletter Archive | Network
 *  ----------------------------
 */
/*
 *  Quiz | Corp | Press | Network
 *  -----------------------------
 */
/*
 *  GENERAL FORM STYLES
 *  -------------------
 *  - specific form layout/behaviors are defined elsewhere, for example the
 *    forms in the footer bar are further styled in footer.less
 *  - labels with a class of error are added to the DOM via jQuery Validate:
 *    'js/libraries-plugins/jquery.validate.js'
 */
.input-sec {
  display: block;
  margin: 0 0 28px 0;
  padding: 0;
  position: relative;
}
.no-margin-bottom {
  margin-bottom: 0;
}
.half-padding {
  margin: 0 0 14px 0;
}
.input-sec.text {
  background: #ffffff;
  border: 1px solid #666666;
  padding: 0 5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
label {
  color: #222222;
  font-size: 11px;
}
input {
  font-size: 11px;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
}
html,
button,
input,
select,
textarea {
  color: #666666;
}
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
label.error {
  background: #ffffff;
  border: none;
  margin: 0;
  padding: 0;
  width: 100%;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
label.error:focus,
input[type="text"].error,
input[type="password"].error,
input[type="datetime"].error,
input[type="datetime-local"].error,
input[type="date"].error,
input[type="month"].error,
input[type="time"].error,
input[type="week"].error,
input[type="number"].error,
input[type="email"].error,
input[type="url"].error,
input[type="search"].error,
input[type="tel"].error,
input[type="color"].error,
label.error.error {
  outline: none;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
input[type="password"] {
  font-size: 18px;
}
.input-sec.checkbox,
.input-sec.radio {
  margin: 5px 0 15px 0;
}
@media (max-width: 660px) {
  .input-sec.checkbox,
  .input-sec.radio {
    padding-top: 10px;
  }
}
input[type="checkbox"],
input[type="radio"] {
  line-height: normal;
  cursor: pointer;
  margin-right: 10px;
  *margin-top: 0;
  height: auto !important;
}
.radio-label,
.checkbox-label {
  font-size: 11px;
}
select {
  font-size: 11px;
  border: none;
  outline: none;
  border-top: 1px solid #666666;
  border-bottom: 1px solid #666666;
}
select,
input[type="file"] {
  height: 30px;
  /* In IE7, the height of the select element cannot be changed by height, only font-size */
  *margin-top: 4px;
  /* For IE7, add top margin to align select with labels */
  line-height: 30px;
  padding: 5px;
}
.input-sec.full-width-select select {
  width: 100%;
}
select,
option {
  border: 0 none !important;
  outline: 1px none !important;
}
select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #000;
}
.styled-select {
  background: #ffffff;
  font-size: 11px;
  height: 30px;
  line-height: 30px;
  border: 1px solid #666666;
  outline: 1px none !important;
  box-sizing: border-box;
}
.styled-select .icon {
  color: #333333;
  font-size: 10px;
  position: absolute;
  top: 2px;
  right: 10px;
  z-index: 0;
}
.styled-select select {
  background: transparent;
  border: 0;
  border-radius: 0;
  height: 30px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
  width: 100%;
  position: relative;
  z-index: 1;
  -webkit-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
  -moz-appearance: none;
}
.styled-select select::-ms-expand {
  display: none;
}
.lt-ie9 .styled-select .icon {
  display: none;
}
.lt-ie9 .styled-select select {
  border-top: none;
  border-bottom: none;
  border: 1px solid #ffffff;
  width: 100%;
}
.input-sec.label-align-select:before,
.input-sec.label-align-select:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.input-sec.label-align-select:after {
  clear: both;
}
.input-sec.label-align-select label {
  float: left;
  position: relative;
  top: 8px;
}
.input-sec.label-align-select .styled-select {
  float: right;
  display: inline-block;
}
.input-sec.dropdown:before,
.input-sec.dropdown:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
.input-sec.dropdown:after {
  clear: both;
}
.input-sec.dropdown .styled-select {
  float: left;
  display: inline-block;
  position: relative;
  margin-right: 10px;
}
textarea {
  padding: 10px 0;
  width: 100%;
}
p.fine-print {
  font-size: 10px;
  color: #999999;
}
.input-sec.pin input {
  text-align: center;
}
/*
 *  Errors / Validation & Input Highlighting
 *  ----------------------------------------
 *
 *  - .errorlist is the server generated error
 *  - label.error is generated with jQuery validate
 *
 */
.text.focus,
.error,
.input-sec div.error,
.extra-info,
.server-error,
.text.error {
  border: 1px solid #3e99b9 !important;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.text.focus.checkbox,
.error.checkbox,
.input-sec div.error.checkbox,
.extra-info.checkbox,
.server-error.checkbox,
.text.error.checkbox {
  margin-bottom: 30px;
  padding-top: 5px;
  padding-left: 4px;
  padding-bottom: 5px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
.text.focus label.padding-bottom,
.error label.padding-bottom,
.input-sec div.error label.padding-bottom,
.extra-info label.padding-bottom,
.server-error label.padding-bottom,
.text.error label.padding-bottom {
  display: block;
  padding-bottom: 10px;
}
.input-sec.error,
.input-sec.server-error {
  position: relative;
  margin-bottom: 38px;
}
.input-sec.error:after,
.input-sec.server-error:after {
  content: "X";
  color: #3e99b9;
  display: block;
  font-family: uktv_icons;
  font-weight: normal;
  font-style: normal;
  font-size: 15px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  width: 30px;
  position: absolute;
  bottom: 0;
  right: 0;
}
.input-sec.error.checkbox:after,
.input-sec.server-error.checkbox:after,
.input-sec.error.select:after,
.input-sec.server-error.select:after,
.input-sec.error.dropdown:after,
.input-sec.server-error.dropdown:after {
  display: none;
}
ul.errorlist,
.error-msg {
  border: none;
  background: #3e99b9;
  color: #ffffff;
  font-size: 11px;
  margin-bottom: 10px;
  padding: 10px;
}
ul.errorlist li,
.error-msg li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
}
label.error,
label.info-msg,
.input-sec .errorlist {
  background: #3e99b9;
  border-top: none !important;
  border-left: 1px solid #3e99b9 !important;
  border-right: 1px solid #3e99b9 !important;
  border-bottom: 1px solid #3e99b9 !important;
  color: #ffffff;
  display: block;
  font-size: 11px;
  height: 20px;
  line-height: 20px;
  position: absolute;
  top: inherit !important;
  left: -1px !important;
  bottom: -22px;
  padding: 0;
  margin: 0;
  text-indent: 5px;
  width: 100%;
}
label.error input,
label.info-msg input,
.input-sec .errorlist input {
  margin-right: 1px;
}
label.error li,
label.info-msg li,
.input-sec .errorlist li {
  margin: 0;
  padding: 0;
  list-style: none;
  display: block;
}
label.info-msg {
  background: #222222;
  border: 1px solid #222222;
  display: none;
}
/*
    Labels in Inputs
    ----------------
    These styles work together with 'js/libraries-plugins/libraries-plugins.js' under 'Form Labels Inside Inputs'
    the JS places the label inside the input and fades it out when the user focuses it
 */
.label-in-input {
  position: relative;
}
.label-in-input label.label {
  display: block;
  font-size: 11px;
  height: 30px;
  line-height: 30px;
  color: #222222;
  position: absolute;
  left: 7px;
  top: 0;
}
/*
 *  Contact Us Form for Corporate Site & Others
 *  -------------------------------------------
 */
.contact-form-container {
  background: #FFF;
  padding: 20px;
}
.contact-form-container form {
  background: #f8f8f8;
  padding: 20px 0;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  border-radius: 15px;
}
.contact-form-container form .form-container {
  margin: 0 auto;
  max-width: 270px;
}
.contact-form-container form .title {
  font-size: 20px;
}
@media (min-width: 500px) {
  .contact-form-container {
    padding: 40px;
  }
  .contact-form-container form {
    padding: 80px 0;
  }
}

/*
 *  --------------
 *  BASE VARIABLES
 *  --------------
 *  Corporate, Press and Network Homepage sites.
 *
 *  If a site does not have it's own 'variables.less' file, then it uses this one. So because Corporate, Press and
 *  Network are all very similar, none of them have their own and therefore this file contains the variables that govern
 *  each one of them. All other sites will have their own 'variables.less' file.
 *
 *  This also applies for colours.less and site-fonts.less.
 */
/*
 *  Breakpoints & Grid  | Corp | Press | Network
 *  --------------------------------------------
 */
/*
 *  Typography  | Corp | Press | Network
 *  ------------------------------------
 *  Mostly font-sizes
 */
/*
 *  Dimensions | Corp
 *  ------------------------------------
 */
/*
 *  Custom Mixins
 *  -------------
 *
 */
/*
 *  ------------
 *  BASE COLOURS
 *  ------------
 *  Corporate, Press and Network Homepage sites.
 *
 *  If a site does not have it's own 'colours.less' file, then it uses this one. So because Corporate, Press and
 *  Network are all very similar, none of them have their own and therefore this file contains the colour variables that
 *  govern all of them. All other sites will have their own 'colours.less' file.
 *
 *  This also applies for variables.less and site-fonts.less.
 */
/*
 *  Basics | Corp | Press | Network
 *  -------------------------------
 */
/*
 *  Navigation | Corp | Press | Network
 *  -----------------------------------
 */
/*
 *  Footer | Corp | Press | Network
 *  -------------------------------
 */
/*
 *  Buttons | Corp | Press | Network
 *  --------------------------------
 *  All types of buttons, including arrows on carousels & tags
 */
/*
 *  Widgetz & Page Elements | Corp | Press | Network
 *  ------------------------------------------------
 */
/*
 *  TV GUIDE | Corp | Press | Network
 *  ---------------------------------
 */
/*
 *  Carousels & Galleries | Corp | Press | Network
 *  ----------------------------------------------
 */
/*
 *  Programmes / Brand Pages | Corp | Press | Network
 *  -------------------------------------------------
 */
/*
 *  VOD - Watch Episode Page | Corp | Press | Network
 *  -------------------------------------------------
 */
/*
 *  Articles | Corp | Press | Network
 *  ---------------------------------
 *  NOTE : Title & Intro text defined as @single_page_title_colour & @single_page_title_colour
 *  as these are global styles for similar pages such as video or gallery
 */
/*
 *  Other Stuff & Misc | Corp | Press | Network
 *  -------------------------------------------
 */
/*
 *  Forms | Corp | Press | Network
 *  ------------------------------
 *  Used throughout the site, such as Newsletter Signup, Login and Registration and Contact form
 */
/*
 *  Login / Register / My UKTV  | Corp | Press | Network
 *  ---------------------------------------------------
 */
/*
 *  User Profile | Network
 *  ----------------------
 */
/*
 *  Competitions | Network
 *  ----------------------
 */
/*
 *  Newsletter Archive | Network
 *  ----------------------------
 */
/*
 *  Quiz | Corp | Press | Network
 *  -----------------------------
 */
/*
 *  Normal Buttons
 *  --------------
 *  Such as the ones you'll find on the TV Guide.
 *  Buttons grouped together are styled via 'twitter-bootstrap/button-groups.less'
 *  where some extra elements and classes can be added to combine buttons
 */
.btn,
a.btn {
  background-color: transparent;
  display: inline-block;
  padding: 5px 10px 5px;
  margin-bottom: 0;
  font-size: 12px;
  line-height: 20px;
  *line-height: 20px;
  color: #ffffff;
  text-align: center;
  outline: none;
  vertical-align: middle;
  cursor: pointer;
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#333333), to(#333333));
  background-image: -webkit-linear-gradient(top, #333333, 0%, #333333, 100%);
  background-image: -moz-linear-gradient(top, #333333 0%, #333333 100%);
  background-image: linear-gradient(to bottom, #333333 0%, #333333 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff333333', endColorstr='#ff333333', GradientType=0);
  border: none;
  *border: 0;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  *margin-left: .3em;
  *display: inline;
  /* IE7 inline-block hack */
  *zoom: 1;
}
.btn:first-child,
a.btn:first-child {
  *margin-left: 0;
}
.btn [class^="icon-"],
a.btn [class^="icon-"],
.btn [class*=" icon-"],
a.btn [class*=" icon-"] {
  color: #ffffff;
}
.btn:hover,
.btn:focus,
.btn:active,
.btn.active {
  color: #3e99b9;
  border: none;
  text-decoration: none;
  background-image: -moz-linear-gradient(top, #000000, #000000);
  background-image: -ms-linear-gradient(top, #000000, #000000);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000000), to(#000000));
  background-image: -webkit-linear-gradient(top, #000000, #000000);
  background-image: -o-linear-gradient(top, #000000, #000000);
  background-image: linear-gradient(top, #000000, #000000);
  background-repeat: repeat-x;
  outline: none;
}
.btn:hover [class^="icon-"],
.btn:focus [class^="icon-"],
.btn:active [class^="icon-"],
.btn.active [class^="icon-"],
.btn:hover [class*=" icon-"],
.btn:focus [class*=" icon-"],
.btn:active [class*=" icon-"],
.btn.active [class*=" icon-"] {
  color: #3e99b9;
}
button.btn,
input[type="submit"].btn {
  *padding-top: 2px;
  *padding-bottom: 2px;
}
button.btn::-moz-focus-inner,
input[type="submit"].btn::-moz-focus-inner {
  padding: 0;
  border: 0;
}
.btn.full-width {
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}
.btn:active,
a.btn:active {
  outline: none;
}
/*
 *  Directional Buttons
 *  -------------------
 *  Looking for pagination styling? See 'sitewide.less'
 */
.btn.btn-arrow {
  padding-left: 18px;
  padding-right: 18px;
}
.csstransforms .btn.btn-arrow {
  margin-left: 13px;
  position: relative;
  z-index: 1;
}
.csstransforms .btn.btn-arrow:after {
  background: #333333;
  border: none;
  content: '';
  display: block;
  height: 22px;
  width: 22px;
  position: absolute;
  left: -9px;
  top: 4px;
  z-index: -1;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.csstransforms .btn.btn-arrow.right {
  margin-left: 0;
  margin-right: 13px;
}
.csstransforms .btn.btn-arrow.right:after {
  left: auto;
  right: -9px;
}
.csstransforms .btn.btn-arrow:hover:after {
  background: #000000;
}
/*
 *  Block Buttons
 *  -------------
 *  special big block style buttons, used mostly on Next On TV Widget, but placed
 *  here for future re-use when needed.
 */
.block-buttons {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.block-buttons li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.block-btn,
a.block-btn {
  border: none;
  color: #ffffff;
  display: block;
  font-size: 11px;
  height: 50px;
  line-height: 45px;
  text-align: center;
  vertical-align: middle;
  width: 100%;
}
.block-btn .icon,
a.block-btn .icon {
  margin-right: 5px;
  position: relative;
  top: 1px;
}
.block-btn:hover,
a.block-btn:hover {
  color: #ffffff;
  text-decoration: none;
}
.block-btn {
  background: #3e99b9;
  background-image: -moz-linear-gradient(top, #3e99b9, #245e72);
  background-image: -ms-linear-gradient(top, #3e99b9, #245e72);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3e99b9), to(#245e72));
  background-image: -webkit-linear-gradient(top, #3e99b9, #245e72);
  background-image: -o-linear-gradient(top, #3e99b9, #245e72);
  background-image: linear-gradient(top, #3e99b9, #245e72);
  background-repeat: repeat-x;
}
.block-btn:hover {
  background-image: -moz-linear-gradient(top, #245e72, #3e99b9);
  background-image: -ms-linear-gradient(top, #245e72, #3e99b9);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#245e72), to(#3e99b9));
  background-image: -webkit-linear-gradient(top, #245e72, #3e99b9);
  background-image: -o-linear-gradient(top, #245e72, #3e99b9);
  background-image: linear-gradient(top, #245e72, #3e99b9);
  background-repeat: repeat-x;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.block-buttons.two-btns .block-btn {
  float: left;
  width: 50%;
}
.block-buttons.two-btns .block-btn:first-child {
  border-right: 1px solid #27677a;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
/*
 *  Highlighted Buttons
 *  -------------------
 *  Use the same colours as Block Buttons (above)
 *  These buttons are used on the login and registration pages
 */
.btn.highlight,
a.btn.highlight {
  border-color: #3e99b9;
  color: #ffffff;
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#3e99b9), to(#245e72));
  background-image: -webkit-linear-gradient(top, #3e99b9, 0%, #245e72, 100%);
  background-image: -moz-linear-gradient(top, #3e99b9 0%, #245e72 100%);
  background-image: linear-gradient(to bottom, #3e99b9 0%, #245e72 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3e99b9', endColorstr='#ff245e72', GradientType=0);
}
.btn.highlight:hover {
  border-color: #245e72;
  color: #ffffff;
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#245e72), to(#3e99b9));
  background-image: -webkit-linear-gradient(top, #245e72, 0%, #3e99b9, 100%);
  background-image: -moz-linear-gradient(top, #245e72 0%, #3e99b9 100%);
  background-image: linear-gradient(to bottom, #245e72 0%, #3e99b9 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff245e72', endColorstr='#ff3e99b9', GradientType=0);
}
/*
 *  Tag Buttons
 *  -----------
 *  For tags style buttons such as the series navigation on the VOD watch page
 */
.tag-btn,
a.tag-btn {
  background: #000000;
  color: #ffffff;
  display: inline-block;
  font-size: 11px;
  height: 30px;
  line-height: 30px;
  margin: 0 5px 5px 5px;
  min-width: 14px;
  padding: 0 20px;
  text-align: center;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.tag-btn:hover {
  background: #333333;
  color: #ffffff;
}
li.active .tag-btn,
li.active .tag-btn:hover,
.tag-btn.active,
.tag-btn.active:hover {
  background: #333333;
  color: #ffffff;
}
.tag-nav {
  padding: 0 0 20px 10px;
  display: inline-block;
}
.tag-nav li {
  display: inline-block;
}
/*
 *  Native Media Buttons
 *  --------------------
 *  Used throughout the site via an {% include %} template tag - with extra classes passed using 'with' as variables
 *  in the template.
 *  Template: 'templates/base/snippets/native-social-buttons.html'
 */
.native-social-btns {
  padding: 7px 0 2px 20px;
}
.native-social-btns .twitter-follow-button,
.native-social-btns ul li {
  margin: 4px 0;
}
.native-social-btns .twitter-follow-button {
  position: relative;
  top: 3px;
  float: left;
}
.native-social-btns ul {
  clear: both;
}
.native-social-btns li {
  display: inline-block;
  padding: 0 0 8px 0;
  position: relative;
}
.native-social-btns li.facebook {
  top: -3px;
  width: 95px;
}
.native-social-btns li.twitter {
  top: 1px;
  width: 90px;
}
.native-social-btns li.gplus {
  top: 1px;
  width: 70px;
}
.native-social-btns li.pinterest {
  top: 1px;
}
.native-social-btns.bg {
  background: #232323;
}
@media (min-width: 660px) {
  .native-social-btns ul {
    clear: both;
  }
  .native-social-btns ul li {
    padding: 0 0 5px 0;
    display: inline-block;
    *display: inline;
    /* IE7 inline-block hack */
    *zoom: 1;
  }
  .native-social-btns ul li.facebook {
    width: 105px;
  }
  .native-social-btns ul li.twitter {
    width: 84px;
  }
  .native-social-btns.right ul {
    text-align: right;
  }
  .native-social-btns.right ul li.facebook {
    margin-right: 20px;
  }
  .native-social-btns.right ul li.twitter {
    width: 93px;
  }
}
/*
 *  Native Media Buttons
 *  --------------------
 *  Used throughout the site via an {% include %} template tag - with extra classes passed using 'with' as variables
 *  in the template.
 *  Template: 'templates/base/snippets/native-social-buttons.html'
 */
.vod-link {
  display: block;
  background: #000;
  color: #FFF;
  text-align: center;
  padding: 5px 0;
  margin: 5px 0 10px;
}
.vod-link i {
  font-size: 1.1em;
}
.lt-ie9 .vod-link i {
  background: #000;
  font-size: 1.2em;
  padding-right: 7px;
}

/*
 *  --------------
 *  BASE VARIABLES
 *  --------------
 *  Corporate, Press and Network Homepage sites.
 *
 *  If a site does not have it's own 'variables.less' file, then it uses this one. So because Corporate, Press and
 *  Network are all very similar, none of them have their own and therefore this file contains the variables that govern
 *  each one of them. All other sites will have their own 'variables.less' file.
 *
 *  This also applies for colours.less and site-fonts.less.
 */
/*
 *  Breakpoints & Grid  | Corp | Press | Network
 *  --------------------------------------------
 */
/*
 *  Typography  | Corp | Press | Network
 *  ------------------------------------
 *  Mostly font-sizes
 */
/*
 *  Dimensions | Corp
 *  ------------------------------------
 */
/*
 *  Random Themes
 *  -------------
 *  JS is used to apply the following body classes which apply a different background image
 *  according the the class.
 *
 *  For full info see: 'js/random-themes.js'
 *
 *  We use a LESS loop: http://blog.thehippo.de/2012/04/programming/do-a-loop-with-less-css/
 *
 */
/*
    Mobile
 */
@media (min-width: 0) {
  body.theme-16 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-16-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-16:before,
  body.theme-16 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-16.jpg") 50% 0 no-repeat;
  }
  body.theme-15 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-15-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-15:before,
  body.theme-15 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-15.jpg") 50% 0 no-repeat;
  }
  body.theme-14 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-14-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-14:before,
  body.theme-14 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-14.jpg") 50% 0 no-repeat;
  }
  body.theme-13 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-13-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-13:before,
  body.theme-13 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-13.jpg") 50% 0 no-repeat;
  }
  body.theme-12 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-12-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-12:before,
  body.theme-12 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-12.jpg") 50% 0 no-repeat;
  }
  body.theme-11 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-11-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-11:before,
  body.theme-11 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-11.jpg") 50% 0 no-repeat;
  }
  body.theme-10 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-10-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-10:before,
  body.theme-10 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-10.jpg") 50% 0 no-repeat;
  }
  body.theme-9 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-9-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-9:before,
  body.theme-9 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-9.jpg") 50% 0 no-repeat;
  }
  body.theme-8 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-8-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-8:before,
  body.theme-8 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-8.jpg") 50% 0 no-repeat;
  }
  body.theme-7 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-7-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-7:before,
  body.theme-7 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-7.jpg") 50% 0 no-repeat;
  }
  body.theme-6 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-6-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-6:before,
  body.theme-6 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-6.jpg") 50% 0 no-repeat;
  }
  body.theme-5 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-5-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-5:before,
  body.theme-5 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-5.jpg") 50% 0 no-repeat;
  }
  body.theme-4 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-4-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-4:before,
  body.theme-4 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-4.jpg") 50% 0 no-repeat;
  }
  body.theme-3 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-3-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-3:before,
  body.theme-3 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-3.jpg") 50% 0 no-repeat;
  }
  body.theme-2 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-2-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-2:before,
  body.theme-2 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-2.jpg") 50% 0 no-repeat;
  }
  body.theme-1 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-1-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-1:before,
  body.theme-1 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/theme-1.jpg") 50% 0 no-repeat;
  }
  body.theme-single-gradient {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/small/gradient.jpg");
  }
}
/*
    Tablet Portrait & Up
 */
@media (min-width: 660px) {
  body.theme-16 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-16-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-16:before,
  body.theme-16 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-16.jpg") 50% 0 no-repeat;
  }
  body.theme-15 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-15-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-15:before,
  body.theme-15 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-15.jpg") 50% 0 no-repeat;
  }
  body.theme-14 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-14-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-14:before,
  body.theme-14 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-14.jpg") 50% 0 no-repeat;
  }
  body.theme-13 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-13-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-13:before,
  body.theme-13 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-13.jpg") 50% 0 no-repeat;
  }
  body.theme-12 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-12-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-12:before,
  body.theme-12 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-12.jpg") 50% 0 no-repeat;
  }
  body.theme-11 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-11-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-11:before,
  body.theme-11 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-11.jpg") 50% 0 no-repeat;
  }
  body.theme-10 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-10-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-10:before,
  body.theme-10 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-10.jpg") 50% 0 no-repeat;
  }
  body.theme-9 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-9-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-9:before,
  body.theme-9 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-9.jpg") 50% 0 no-repeat;
  }
  body.theme-8 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-8-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-8:before,
  body.theme-8 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-8.jpg") 50% 0 no-repeat;
  }
  body.theme-7 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-7-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-7:before,
  body.theme-7 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-7.jpg") 50% 0 no-repeat;
  }
  body.theme-6 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-6-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-6:before,
  body.theme-6 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-6.jpg") 50% 0 no-repeat;
  }
  body.theme-5 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-5-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-5:before,
  body.theme-5 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-5.jpg") 50% 0 no-repeat;
  }
  body.theme-4 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-4-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-4:before,
  body.theme-4 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-4.jpg") 50% 0 no-repeat;
  }
  body.theme-3 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-3-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-3:before,
  body.theme-3 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-3.jpg") 50% 0 no-repeat;
  }
  body.theme-2 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-2-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-2:before,
  body.theme-2 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-2.jpg") 50% 0 no-repeat;
  }
  body.theme-1 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-1-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-1:before,
  body.theme-1 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/theme-1.jpg") 50% 0 no-repeat;
  }
  body.theme-single-gradient {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/medium/gradient.jpg");
  }
}
@media (min-width: 800px) {
  body.theme-16 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-16-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-16:before,
  body.theme-16 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-16.jpg") 50% 0 no-repeat;
  }
  body.theme-15 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-15-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-15:before,
  body.theme-15 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-15.jpg") 50% 0 no-repeat;
  }
  body.theme-14 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-14-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-14:before,
  body.theme-14 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-14.jpg") 50% 0 no-repeat;
  }
  body.theme-13 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-13-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-13:before,
  body.theme-13 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-13.jpg") 50% 0 no-repeat;
  }
  body.theme-12 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-12-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-12:before,
  body.theme-12 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-12.jpg") 50% 0 no-repeat;
  }
  body.theme-11 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-11-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-11:before,
  body.theme-11 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-11.jpg") 50% 0 no-repeat;
  }
  body.theme-10 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-10-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-10:before,
  body.theme-10 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-10.jpg") 50% 0 no-repeat;
  }
  body.theme-9 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-9-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-9:before,
  body.theme-9 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-9.jpg") 50% 0 no-repeat;
  }
  body.theme-8 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-8-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-8:before,
  body.theme-8 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-8.jpg") 50% 0 no-repeat;
  }
  body.theme-7 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-7-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-7:before,
  body.theme-7 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-7.jpg") 50% 0 no-repeat;
  }
  body.theme-6 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-6-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-6:before,
  body.theme-6 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-6.jpg") 50% 0 no-repeat;
  }
  body.theme-5 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-5-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-5:before,
  body.theme-5 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-5.jpg") 50% 0 no-repeat;
  }
  body.theme-4 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-4-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-4:before,
  body.theme-4 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-4.jpg") 50% 0 no-repeat;
  }
  body.theme-3 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-3-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-3:before,
  body.theme-3 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-3.jpg") 50% 0 no-repeat;
  }
  body.theme-2 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-2-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-2:before,
  body.theme-2 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-2.jpg") 50% 0 no-repeat;
  }
  body.theme-1 {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-1-gradient.jpg");
    background-position: 50% 0;
    background-repeat: repeat-y;
  }
  body.theme-1:before,
  body.theme-1 .body-background-container {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/theme-1.jpg") 50% 0 no-repeat;
  }
  body.theme-single-gradient {
    background-image: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/random-themes/large/gradient.jpg");
  }
}

/*
 *  Custom Mixins
 *  -------------
 *
 */
/*
 *  --------------
 *  BASE VARIABLES
 *  --------------
 *  Corporate, Press and Network Homepage sites.
 *
 *  If a site does not have it's own 'variables.less' file, then it uses this one. So because Corporate, Press and
 *  Network are all very similar, none of them have their own and therefore this file contains the variables that govern
 *  each one of them. All other sites will have their own 'variables.less' file.
 *
 *  This also applies for colours.less and site-fonts.less.
 */
/*
 *  Breakpoints & Grid  | Corp | Press | Network
 *  --------------------------------------------
 */
/*
 *  Typography  | Corp | Press | Network
 *  ------------------------------------
 *  Mostly font-sizes
 */
/*
 *  Dimensions | Corp
 *  ------------------------------------
 */
/*
 *  ------------
 *  BASE COLOURS
 *  ------------
 *  Corporate, Press and Network Homepage sites.
 *
 *  If a site does not have it's own 'colours.less' file, then it uses this one. So because Corporate, Press and
 *  Network are all very similar, none of them have their own and therefore this file contains the colour variables that
 *  govern all of them. All other sites will have their own 'colours.less' file.
 *
 *  This also applies for variables.less and site-fonts.less.
 */
/*
 *  Basics | Corp | Press | Network
 *  -------------------------------
 */
/*
 *  Navigation | Corp | Press | Network
 *  -----------------------------------
 */
/*
 *  Footer | Corp | Press | Network
 *  -------------------------------
 */
/*
 *  Buttons | Corp | Press | Network
 *  --------------------------------
 *  All types of buttons, including arrows on carousels & tags
 */
/*
 *  Widgetz & Page Elements | Corp | Press | Network
 *  ------------------------------------------------
 */
/*
 *  TV GUIDE | Corp | Press | Network
 *  ---------------------------------
 */
/*
 *  Carousels & Galleries | Corp | Press | Network
 *  ----------------------------------------------
 */
/*
 *  Programmes / Brand Pages | Corp | Press | Network
 *  -------------------------------------------------
 */
/*
 *  VOD - Watch Episode Page | Corp | Press | Network
 *  -------------------------------------------------
 */
/*
 *  Articles | Corp | Press | Network
 *  ---------------------------------
 *  NOTE : Title & Intro text defined as @single_page_title_colour & @single_page_title_colour
 *  as these are global styles for similar pages such as video or gallery
 */
/*
 *  Other Stuff & Misc | Corp | Press | Network
 *  -------------------------------------------
 */
/*
 *  Forms | Corp | Press | Network
 *  ------------------------------
 *  Used throughout the site, such as Newsletter Signup, Login and Registration and Contact form
 */
/*
 *  Login / Register / My UKTV  | Corp | Press | Network
 *  ---------------------------------------------------
 */
/*
 *  User Profile | Network
 *  ----------------------
 */
/*
 *  Competitions | Network
 *  ----------------------
 */
/*
 *  Newsletter Archive | Network
 *  ----------------------------
 */
/*
 *  Quiz | Corp | Press | Network
 *  -----------------------------
 */
body {
  position: relative;
}
/*
    Static Footer
    -------------
 */
#footer-menu {
  background: #ffffff;
}
.lt-ie9 #footer-menu {
  background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/ie_nav_bg.png");
}
#footer-menu ul {
  padding: 0;
}
#footer-menu li {
  border-bottom: 1px solid #cccccc;
  display: block;
  height: 40px;
  line-height: 40px;
}
#footer-menu li a {
  color: #666666;
  display: block;
  font-size: 12px;
  padding: 0 16px;
}
#footer-menu li.active a {
  background: #eeeeee;
  color: #333333;
}
#footer-menu li:last-child {
  border: none;
}
#footer-menu .icon {
  font-size: 15px;
}
.no-touch #footer-menu ul li a:hover {
  background: #eeeeee;
  color: #333333;
}
@media (min-width: 800px) {
  #footer-menu ul li a {
    padding: 0 20px;
  }
}
.footer-legal {
  background: #222222;
}
.footer-legal .footer-static-links {
  padding: 15px;
}
.footer-legal .footer-static-links li {
  float: left;
  width: 50%;
  padding: 8px 0;
}
.footer-legal .footer-static-links li a {
  color: #3e99b9;
  font-size: 11px;
  padding: 10px 20px 10px 0;
  text-decoration: none;
}
.footer-legal .footer-static-links li a:hover {
  color: #6dd6ec;
}
.footer-legal .footer-copyright-notice {
  color: #3e99b9;
  font-size: 11px;
  display: block;
  margin-top: 0;
  padding: 0 0 20px 20px;
}
@media (min-width: 660px) {
  #static-footer {
    margin-top: 20px;
  }
  #static-footer.margin-bottom {
    margin-bottom: 35px;
  }
  #footer-site-links {
    padding-bottom: 20px;
  }
  #footer-menu li {
    border-bottom: none;
    border-right: 1px solid #cccccc;
    float: left;
  }
  #footer-menu li:last-child {
    border-right: 1px solid #cccccc;
  }
  #footer-menu .home-btn {
    height: 40px;
    overflow: hidden;
  }
  .footer-legal .footer-static-links {
    padding: 10px 20px;
  }
  .footer-legal .footer-static-links li {
    float: left;
    width: auto;
  }
}
@media (min-width: 800px) {
  .footer-legal .footer-static-links li a {
    padding-right: 25px;
  }
}
/*
 *  Most Popular
 *  ------------
 *  Laid out on a grid using styles from 'grid.less'. Note that it uses the '.mobile-grid.two-col-mini-grid'
 *  classes which give it the mobile style layout and only the first two items are displayed. On tablet
 *  landscape we display the first four and on desktop we display all of them.
 *
 */
.no-rgba .widget.footer-most-popular {
  background: #343434;
}
.widget.footer-most-popular {
  background: rgba(34, 34, 34, 0.9);
  margin: 0;
  padding-bottom: 10px;
}
.widget.footer-most-popular .span2 {
  display: none;
}
.widget.footer-most-popular .display-on-mobile {
  display: block;
}
.widget.footer-most-popular .pop-title {
  color: #666666;
  font-size: 16px;
  display: block;
  height: 16px;
  padding-top: 20px;
  padding-bottom: 20px;
}
.widget.footer-most-popular a {
  color: #3e99b9;
}
.widget.footer-most-popular a:hover {
  color: #6dd6ec;
}
.widget.footer-most-popular .icon {
  color: #666666;
}
@media (min-width: 660px) {
  .widget.footer-most-popular {
    padding-bottom: 10px;
  }
  .widget.footer-most-popular .display-on-mobile,
  .widget.footer-most-popular .display-on-tablet {
    display: block;
    width: 25%;
  }
  .widget.footer-most-popular .pop-title {
    font-size: 16px;
    height: 16px;
  }
}
@media (min-width: 800px) {
  .widget.footer-most-popular {
    padding-bottom: 30px;
  }
  .widget.footer-most-popular .display-on-mobile,
  .widget.footer-most-popular .display-on-tablet {
    width: 16.667%;
  }
  .widget.footer-most-popular .span2 {
    width: 16.667%;
    display: block;
  }
}
/*
 *  All Channels Logo Links (Small)
 *  -------------------------------
 */
.all-site-links-wrap {
  background: rgba(34, 34, 34, 0.9);
}
.lt-ie9 .all-site-links-wrap {
  background: #343434;
}
.all-site-links {
  padding: 20px;
}
.all-site-links .logo {
  display: block;
  height: 40px;
  width: 39px;
}
.all-site-links .logo a {
  background: url('https://uktv-static.s3.amazonaws.com/fgprod/network/img/sprites/general-sprite.png') -50px -550px no-repeat;
  display: block;
  height: 30px;
  width: 39px;
  text-indent: -999em;
  position: relative;
}
.all-site-links .logo.watch {
  width: 42px;
}
.all-site-links .logo.w {
  width: 31px;
}
.all-site-links .logo.alibi {
  width: 30px;
}
.all-site-links .logo.eden {
  width: 30px;
}
.all-site-links .logo.drama {
  width: 30px;
}
.all-site-links .logo.food {
  width: 30px;
}
.all-site-links .logo.really {
  width: 41px;
}
.all-site-links .logo.home {
  width: 30px;
}
.all-site-links .logo.uktv-play {
  width: 52px;
}
.all-site-links .watch a {
  background-position: -220px -300px;
  width: 42px;
}
.all-site-links .w a {
  background-position: -65px -865px;
  width: 31px;
}
.all-site-links .dave a {
  background-position: -220px -241px;
}
.all-site-links .alibi a {
  background-position: -300px 0;
  width: 30px;
}
.all-site-links .gold a {
  background-position: -220px -443px;
}
.all-site-links .eden a {
  background-position: -50px -300px;
  width: 30px;
}
.all-site-links .drama a {
  background-position: -220px 2px;
  width: 30px;
}
.all-site-links .really a {
  background-position: -220px -141px;
  width: 41px;
}
.all-site-links .food a {
  background-position: -300px -50px;
  width: 30px;
}
.all-site-links .yesterday a {
  background-position: -220px -50px;
}
.all-site-links .home a {
  background-position: -300px -100px;
  width: 30px;
}
.all-site-links .uktv-play a {
  background-position: -250px -500px;
  width: 52px;
}
.all-site-links .uktv {
  border-bottom: 1px solid #27313a;
  width: 100%;
  margin: 0 0 10px 0;
  padding: 0 0 10px    0;
}
.all-site-links .uktv a {
  background: url('https://uktv-static.s3.amazonaws.com/fgprod/network/img/sprites/general-sprite.png') 0 -550px no-repeat;
  height: 40px;
  width: 40px;
  margin: 0 auto;
}
.all-site-links .uktv.large {
  height: 93px;
  margin: 0 0 20px 0;
  padding: 0 0 20px 0;
}
.all-site-links .uktv.large a {
  background: url('https://uktv-static.s3.amazonaws.com/fgprod/network/img/sprites/general-sprite.png') -50px -550px no-repeat;
  height: 93px;
  width: 103px;
  margin: 0 auto;
}
.all-site-links .list {
  height: 40px;
  margin-bottom: 20px;
  text-align: justify;
  width: 100%;
  text-justify: distribute-all-lines;
  -ms-text-justify: distribute-all-lines;
}
.all-site-links .list .logo {
  background: none;
  display: inline-block;
  float: none;
  vertical-align: top;
  /* text-transform added to work around IE8 bug */
}
.all-site-links .list .logo a,
.all-site-links .list .logo img {
  text-indent: -9999px;
  text-transform: capitalize;
  text-align: left;
  overflow: hidden;
}
.all-site-links .list .stretch {
  width: 100%;
  display: inline-block;
  height: 0;
  font-size: 0;
  line-height: 0;
}
.dark-ui-theme .all-site-links .watch a {
  background-position: -220px -350px;
  width: 60px;
}
.dark-ui-theme .all-site-links .dave a {
  background-position: -220px -193px;
  width: 60px;
}
.dark-ui-theme .all-site-links .yesterday a {
  background-position: -220px -100px;
  width: 60px;
}
@media (min-width: 680px) {
  .all-site-links.spread-out-on-desktop {
    width: 742px;
    padding-left: 0;
    padding-right: 0;
    position: relative;
    -webkit-backface-visibility: hidden;
    padding: 8px 0 10px;
  }
  .all-site-links.spread-out-on-desktop li {
    margin-top: 32px;
  }
  .all-site-links.spread-out-on-desktop .uktv {
    border-bottom: none;
    display: block;
    float: left;
    width: 103px;
    margin: 0;
    padding: 0 15px 0 0;
  }
  .all-site-links.spread-out-on-desktop .uktv a {
    display: block;
    margin: 0;
    padding: 0;
  }
  .all-site-links.spread-out-on-desktop .list {
    height: 40px;
    display: block;
    float: left;
    text-align: left;
    width: auto;
    margin-bottom: 0;
    text-justify: none;
    -ms-text-justify: none;
  }
  .all-site-links.spread-out-on-desktop .list .logo {
    margin-right: 12px;
  }
  .all-site-links.spread-out-on-desktop .list .watch {
    border-left: 1px solid #27313a;
    padding-left: 24px;
  }
  .all-site-links.spread-out-on-desktop .list .stretch {
    display: none;
    width: 0;
  }
}
@media (min-width: 800px) {
  .dark-ui-theme .all-site-links .watch a {
    background-position: -160px -350px;
    width: 60px;
  }
  .dark-ui-theme .all-site-links .dave a {
    background-position: -160px -201px;
    width: 60px;
  }
  .dark-ui-theme .all-site-links .yesterday a {
    background-position: -160px -100px;
    width: 60px;
  }
  .all-site-links .logo {
    height: 40px;
    width: 40px;
  }
  .all-site-links .logo a,
  .all-site-links .logo .img {
    height: 40px;
    width: 40px;
  }
  .all-site-links .logo.watch {
    width: 57px;
  }
  .all-site-links .logo.w {
    width: 40px;
  }
  .all-site-links .logo.dave {
    width: 42px;
  }
  .all-site-links .logo.alibi {
    width: 40px;
  }
  .all-site-links .logo.gold {
    width: 48px;
  }
  .all-site-links .logo.eden {
    width: 40px;
  }
  .all-site-links .logo.drama {
    width: 40px;
  }
  .all-site-links .logo.food {
    width: 40px;
  }
  .all-site-links .logo.really {
    width: 50px;
  }
  .all-site-links .logo.yesterday {
    width: 48px;
  }
  .all-site-links .logo.home {
    width: 40px;
  }
  .all-site-links .logo.uktv-play {
    width: 66px;
  }
  .all-site-links .watch a {
    background-position: -160px -300px;
    width: 57px;
  }
  .all-site-links .w a {
    background-position: 0 -859px;
    width: 40px;
  }
  .all-site-links .dave a {
    background-position: -160px -251px;
    width: 42px;
  }
  .all-site-links .alibi a {
    background-position: -50px -150px;
  }
  .all-site-links .gold a {
    background-position: -160px -451px;
    width: 48px;
  }
  .all-site-links .eden a {
    background-position: 0px -300px;
  }
  .all-site-links .drama a {
    background-position: -160px 0px;
  }
  .all-site-links .really a {
    background-position: -160px -150px;
    width: 50px;
  }
  .all-site-links .food a {
    background-position: -50px -350px;
  }
  .all-site-links .yesterday a {
    background-position: -160px -50px;
    width: 48px;
  }
  .all-site-links .home a {
    background-position: 0px -350px;
  }
  .all-site-links .uktv-play a {
    background-position: -160px -500px;
    width: 66px;
  }
  .all-site-links.spread-out-on-desktop {
    width: 854px;
  }
  .all-site-links.spread-out-on-desktop .list .logo {
    margin-right: 13px;
  }
}
/*
 *  Sticky Footer Bar
 *  -----------------
 *
 */
footer#site-footer {
  z-index: 9997;
  /*  distribute links evenly across page for mobile
        http://stackoverflow.com/questions/6865194/fluid-width-with-equally-spaced-divs */
}
footer#site-footer section.footer-bar {
  padding: 6px 10px 4px;
  background: #ffffff;
}
footer#site-footer .social-title {
  display: block;
  color: #333333;
  clear: both;
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  text-shadow: none;
  margin: 0;
  padding: 0;
  position: relative;
  top: 5px;
}
footer#site-footer .footer-social-links {
  border-bottom: 1px solid #d1d1d1;
  height: 30px;
  padding: 20px 0;
  margin-bottom: 20px;
  width: 100%;
}
footer#site-footer .footer-social-links li {
  background: none;
  display: block;
  float: left;
  height: 30px;
  margin-left: 20px;
  width: 30px;
}
footer#site-footer .footer-social-links li a {
  text-indent: -9999px;
  font-size: 0;
  line-height: 0;
}
footer#site-footer .footer-social-links li:first-child {
  margin-left: 0;
}
footer#site-footer .imagined-by {
  display: block;
  font-size: 11px;
  height: 35px;
  line-height: 35px;
  margin: 0 auto;
  width: 124px;
  text-align: center;
  padding: 20px 0 18px;
}
footer#site-footer .imagined-by a {
  color: #333;
}
footer#site-footer .imagined-by span {
  background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/sprites/general-sprite.png") 0 -550px no-repeat;
  display: block;
  float: right;
  height: 35px;
  margin-left: 5px;
  width: 35px;
  text-indent: -999em;
}
.footer-bar {
  position: relative;
}
.footer-bar .btn {
  border: none;
  background-image: none;
  background: #EEEEEE;
  border: 1px solid #CCCCCC;
  color: #333333;
  filter: none;
}
.footer-bar .btn [class^="icon-"],
.footer-bar .btn [class*=" icon-"] {
  color: #333333;
}
.footer-bar .btn:hover {
  color: #3e99b9;
}
.footer-bar .btn:hover [class^="icon-"],
.footer-bar .btn:hover [class*=" icon-"] {
  color: #3e99b9;
}
@media (min-width: 500px) {
  footer#site-footer {
    -webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.15);
    box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.15);
  }
  footer#site-footer section.footer-bar {
    padding-top: 7px;
    padding-bottom: 1px;
  }
  footer#site-footer .social-title {
    display: inline-block;
    float: left;
    padding: 0 10px 0 0;
    *display: inline;
    /* IE7 inline-block hack */
    *zoom: 1;
  }
  footer#site-footer .footer-social-links {
    border-bottom: none;
    display: inline;
    line-height: 0;
    margin: 0;
    padding: 0;
    width: auto;
    *display: inline;
    /* IE7 inline-block hack */
    *zoom: 1;
  }
  footer#site-footer .footer-social-links li {
    float: left;
    display: block;
  }
  footer#site-footer .imagined-by {
    float: right;
    margin: 0;
    padding: 0;
    position: relative;
    top: -3px;
  }
}
@media (min-width: 660px) {
  footer#site-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
  }
  footer#site-footer section.footer-bar .social-links li {
    padding-top: 0;
  }
  footer#site-footer section.footer-bar .btn {
    font-size: 11px;
    padding-bottom: 0;
    padding-top: 0;
  }
  footer#site-footer section.footer-bar a.btn {
    height: 28px;
    line-height: 28px;
  }
  footer#site-footer section.footer-bar button.btn {
    height: 30px;
  }
}
/*
 *  Logged In Pop Up Menu
 *  ---------------------
 *  If the user is logged in, this pop up menu is output in the template but hidden. Then using JS we change the display
 *  to block and add a class '.in' which changes opacity from 0 to 1 and animates via a CSS animation.
 */
.btn.log-in-out {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}
.btn.log-in-out .icon {
  font-size: 70%;
  position: relative;
  left: 2px;
  top: 1px;
}
.logged-in {
  position: relative;
}
.logged-in .logged-in-menu {
  display: none;
  height: auto;
  position: absolute;
  bottom: 46px;
  width: 100%;
  opacity: 0;
  filter: alpha(opacity=100);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  -webkit-box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.2);
}
.logged-in .logged-in-menu.in {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transition: all 0.6s swing;
  transition: all 0.6s swing;
}
.logged-in .logged-in-menu .logged-in-menu-inner {
  background: #DDDDDD;
  height: auto;
  position: relative;
  width: 100%;
  padding: 3px 0;
  border: 1px solid #CCCCCC;
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ffffff), to(#dddddd));
  background-image: -webkit-linear-gradient(top, #ffffff, 0%, #dddddd, 100%);
  background-image: -moz-linear-gradient(top, #ffffff 0%, #dddddd 100%);
  background-image: linear-gradient(to bottom, #ffffff 0%, #dddddd 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffdddddd', GradientType=0);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.logged-in .logged-in-menu .logged-in-menu-inner a {
  color: #666666;
  display: block;
  font-size: 11px;
  height: 30px;
  line-height: 30px;
  padding: 0 18px;
  border-bottom: 1px solid #CCCCCC;
}
.logged-in .logged-in-menu .logged-in-menu-inner a:last-child {
  border-bottom: none;
}
.logged-in .logged-in-menu .logged-in-menu-inner a:hover {
  color: #333333;
  background: #EEEEEE;
}
.logged-in .logged-in-menu .logged-in-menu-inner:after,
.logged-in .logged-in-menu .logged-in-menu-inner:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.logged-in .logged-in-menu .logged-in-menu-inner:after {
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #DDDDDD;
  border-width: 6px;
  left: 50%;
  margin-left: -6px;
}
.logged-in .logged-in-menu .logged-in-menu-inner:before {
  border-color: rgba(204, 204, 204, 0);
  border-top-color: #CCCCCC;
  border-width: 7px;
  left: 50%;
  margin-left: -7px;
}
@media (min-width: 660px) {
  .btn.log-in-out {
    padding-left: 15px;
    padding-right: 15px;
    width: auto;
  }
  .logged-in {
    border-left: 1px solid #d1d1d1;
    float: left;
    margin-left: 20px;
    padding-left: 20px;
  }
  .logged-in .logged-in-menu {
    width: 112px;
    bottom: 30px;
    left: 50%;
    margin-left: -47px;
  }
  .logged-in .logged-in-menu.in {
    bottom: 45px;
  }
  .logged-in .logged-in-menu .logged-in-menu-inner {
    width: 112px;
  }
}

/*
 *  --------------
 *  BASE VARIABLES
 *  --------------
 *  Corporate, Press and Network Homepage sites.
 *
 *  If a site does not have it's own 'variables.less' file, then it uses this one. So because Corporate, Press and
 *  Network are all very similar, none of them have their own and therefore this file contains the variables that govern
 *  each one of them. All other sites will have their own 'variables.less' file.
 *
 *  This also applies for colours.less and site-fonts.less.
 */
/*
 *  Breakpoints & Grid  | Corp | Press | Network
 *  --------------------------------------------
 */
/*
 *  Typography  | Corp | Press | Network
 *  ------------------------------------
 *  Mostly font-sizes
 */
/*
 *  Dimensions | Corp
 *  ------------------------------------
 */
/*
 *  Custom Mixins
 *  -------------
 *
 */
/*
 *  ------------
 *  BASE COLOURS
 *  ------------
 *  Corporate, Press and Network Homepage sites.
 *
 *  If a site does not have it's own 'colours.less' file, then it uses this one. So because Corporate, Press and
 *  Network are all very similar, none of them have their own and therefore this file contains the colour variables that
 *  govern all of them. All other sites will have their own 'colours.less' file.
 *
 *  This also applies for variables.less and site-fonts.less.
 */
/*
 *  Basics | Corp | Press | Network
 *  -------------------------------
 */
/*
 *  Navigation | Corp | Press | Network
 *  -----------------------------------
 */
/*
 *  Footer | Corp | Press | Network
 *  -------------------------------
 */
/*
 *  Buttons | Corp | Press | Network
 *  --------------------------------
 *  All types of buttons, including arrows on carousels & tags
 */
/*
 *  Widgetz & Page Elements | Corp | Press | Network
 *  ------------------------------------------------
 */
/*
 *  TV GUIDE | Corp | Press | Network
 *  ---------------------------------
 */
/*
 *  Carousels & Galleries | Corp | Press | Network
 *  ----------------------------------------------
 */
/*
 *  Programmes / Brand Pages | Corp | Press | Network
 *  -------------------------------------------------
 */
/*
 *  VOD - Watch Episode Page | Corp | Press | Network
 *  -------------------------------------------------
 */
/*
 *  Articles | Corp | Press | Network
 *  ---------------------------------
 *  NOTE : Title & Intro text defined as @single_page_title_colour & @single_page_title_colour
 *  as these are global styles for similar pages such as video or gallery
 */
/*
 *  Other Stuff & Misc | Corp | Press | Network
 *  -------------------------------------------
 */
/*
 *  Forms | Corp | Press | Network
 *  ------------------------------
 *  Used throughout the site, such as Newsletter Signup, Login and Registration and Contact form
 */
/*
 *  Login / Register / My UKTV  | Corp | Press | Network
 *  ---------------------------------------------------
 */
/*
 *  User Profile | Network
 *  ----------------------
 */
/*
 *  Competitions | Network
 *  ----------------------
 */
/*
 *  Newsletter Archive | Network
 *  ----------------------------
 */
/*
 *  Quiz | Corp | Press | Network
 *  -----------------------------
 */
/*
 *  CAS Login / Register
 *  --------------------
 *  The whole login, registration and user profile system is handled by a seperate repository: UKTVCAS.
 *
 *  ALL OF THE TEMPLATES FOR THIS APP ARE STORED IN THE UKTVCAS REPOSITORY
 *
 *  The styling is handled here, but are referenced in 'base.html' in UKTVCAS. This is acheived with a
 *  setting called 'STATIC_ROOT' in UKTVCAS, which should be the absolute path to these files.
 *
 */
.cas-title {
  color: #999999;
  font-size: 18px;
  padding-top: 0px;
  padding-bottom: 5px;
}
.cas-intro {
  padding: 0 0 15px 0;
}
@media (min-width: 660px) {
  .cas-title {
    font-size: 18px;
  }
}
/*
 *  General styling for Login/Registration pages
 *  --------------------------------------------
 *  NB: Templates located in UKTVCAS repository
 */
body.login-register-page {
  padding-bottom: 60px;
}
body.login-register-page .header-logo {
  display: block;
  text-align: center;
  padding-bottom: 40px;
}
body.login-register-page .row.buttons {
  padding: 0 18px;
}
body.login-register-page .row.buttons .btn {
  margin-bottom: 20px;
}
body.login-register-page .label {
  display: block;
  padding-bottom: 5px;
}
body.login-register-page .label,
body.login-register-page .input-sec {
  margin-right: 18px;
  margin-left: 18px;
}
body.login-register-page .error-msg {
  margin: 0 18px 20px;
}
body.login-register-page .input-set.error {
  margin-bottom: 35px;
}
body.login-register-page input[type="text"],
body.login-register-page input[type="password"],
body.login-register-page input[type="email"] {
  text-indent: 10px;
}
body.login-register-page .styled-select,
body.login-register-page .styled-select select {
  font-size: 12px;
  height: 38px;
  line-height: 38px;
}
body.login-register-page .extra-pad {
  padding-bottom: 30px;
}
body.login-register-page .facebook_button_box {
  border-bottom: 1px solid #f8f8f8;
  margin: 0 18px 20px 18px;
  padding: 0 0 20px 0;
}
body.login-register-page .facebook_button {
  background: #3b579d url('https://uktv-static.s3.amazonaws.com/fgprod/network/img/facebook-signin-button.png') 0 0 no-repeat;
  color: #FFF;
  display: block;
  height: 40px;
  line-height: 40px;
  font-size: 12px;
  padding: 0 10px 0 40px;
  box-sizing: border-box;
  width: 100%;
}
@media (min-width: 660px) {
  body.login-register-page .col-divider {
    background: #f8f8f8;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
  }
  body.login-register-page .mainCol {
    box-sizing: border-box;
    width: 66.666%;
    float: left;
    position: relative;
    padding: 0 20px 0 0;
  }
  body.login-register-page .mainCol .col-divider {
    right: 10px;
  }
  body.login-register-page .sideCol {
    box-sizing: border-box;
    width: 33.333%;
    float: right;
    padding: 0 20px 0 20px;
    position: relative;
  }
  body.login-register-page .sideCol .col-divider {
    left: -10px;
  }
  body.login-register-page .cas-form-inputs {
    width: 50%;
  }
  body.login-register-page .facebook_button_box {
    border-bottom: none;
    margin: 0;
    padding: 0;
  }
  body.login-register-page .facebook_button {
    position: absolute;
    left: 50%;
    width: 180px;
    margin-left: 20px;
  }
  body.login-register-page .facebook_button .with-fb {
    visibility: hidden;
  }
  body.login-register-page #register .facebook_button {
    top: 83px;
  }
  body.login-register-page #login .facebook_button {
    top: 76px;
  }
  body.login-register-page .row.buttons {
    padding: 0 18px;
  }
}
@media (min-width: 800px) {
  body.login-register-page .facebook_button {
    width: 250px;
  }
}
@media (min-width: 890px) {
  body.login-register-page .facebook_button {
    width: 280px;
  }
  body.login-register-page .facebook_button .with-fb {
    visibility: visible;
  }
}
/*
 *  Login Page Specifics
 *  --------------------
 *  NB: Template located in UKTVCAS repository
 */
#login {
  position: relative;
}
#login .cas-title {
  padding-bottom: 25px;
}
#login .error-msg {
  margin-bottom: 30px;
}
#login .cas-title.press {
  padding-bottom: 0;
}
#login .password {
  margin-bottom: 5px;
}
#login .password.error {
  margin-bottom: 28px;
}
#login .checkbox {
  font-size: 11px;
}
#login #password-link {
  display: block;
  font-size: 12px;
  margin: 5px 0 20px 18px;
}
#login hr {
  border: none;
  border-top: 1px solid #c8c8c8;
  height: 0;
  display: block;
  margin: 25px 0;
}
#login .row.buttons {
  margin-top: 40px;
}
/*
 *  Registration Page Specifics
 *  ---------------------------
 *  NB: Template located in UKTVCAS repository
 */
.login-register-page #register {
  position: relative;
}
.login-register-page #register .input-sec.checkbox.server-error {
  margin: 10px 0 30px 0;
}
.login-register-page #register .gender {
  width: 228px;
}
.login-register-page #register .gender .styled-select {
  width: 228px;
}
.login-register-page #register .error #id_date_of_birth_month,
.login-register-page #register .server-error #id_date_of_birth_month {
  width: 83px;
}
.login-register-page #register .error #id_gender,
.login-register-page #register .server-error #id_gender {
  width: 217px;
}
.login-register-page #register .tsandcs {
  margin-bottom: 25px;
}
.login-register-page #register .newsletter-signup {
  margin-top: 3px;
}
.login-register-page #register .tsandcs.error {
  margin-bottom: 36px;
}
.login-register-page #register #reg-dob {
  height: 38px;
}
.login-register-page #register #reg-dob .styled-select {
  display: inline-block;
}
.login-register-page #register #reg-dob .styled-select .icon {
  right: 5px;
}
.login-register-page #register #reg-dob.server-error .styled-select {
  border: 1px solid #3e99b9 !important;
}
.login-register-page #register #reg-dob.server-error .errorlist {
  left: 0 !important;
  bottom: -22px;
  max-width: 224px;
}
@media (min-width: 660px) {
  .login-register-page #register #reg-dob.server-error .errorlist {
    max-width: 222px;
  }
}
.login-register-page #register .text.focus,
.login-register-page #register .error,
.login-register-page #register .input-sec div.error,
.login-register-page #register .extra-info,
.login-register-page #register .server-error,
.login-register-page #register .text.error {
  border: none !important;
}
@media (min-width: 660px) {
  .login-register-page #register #id_date_of_birth_day {
    width: 51px;
  }
  .login-register-page #register #id_date_of_birth_month {
    width: 87px;
  }
  .login-register-page #register #id_date_of_birth_year {
    width: 64px;
  }
}
#id_date_of_birth_day {
  width: 51px;
}
#id_date_of_birth_month {
  width: 85px;
}
#id_date_of_birth_year {
  width: 66px;
}
/*
 *  Press Site Registration Page
 *  ----------------------------
 *  NB: Template located in UKTVCAS repository
 */
.press.login-register-page #register {
  margin-bottom: 100px;
}
.press.login-register-page #register .cas-title {
  padding-bottom: 15px;
}
.press.login-register-page #register .btn {
  display: block;
  margin: 0 18px 15px auto;
  width: 180px;
}
/*
 * Facebook Register
 * ------------------
 */
.facebook-signup .fb-label {
  margin-top: 30px;
}
.facebook-signup .gender {
  width: 228px;
}
.facebook-signup .gender .styled-select {
  width: 228px;
}
/*
 *  Misc Pages
 *  ----------
 */
.logout-form .buttons,
.reset-password-email-sent .buttons,
.activation-sent .buttons {
  margin-top: 30px;
}
.logout-form .widget .whats-in-it-for-me,
.reset-password-email-sent .widget .whats-in-it-for-me,
.activation-sent .widget .whats-in-it-for-me {
  border-bottom: 0;
  margin-bottom: 0;
}
.reset-password-email-sent p {
  padding-bottom: 0;
}
/*
 *  Registering with Facebook Page
 *  ------------------------------
 */
#facebook-reg-form .cas-title {
  padding-bottom: 15px;
}
#facebook-reg-form .fb-inline {
  border-bottom: 1px solid #c8c8c8;
  display: block;
  font-size: 12px;
  padding: 20px 5px;
  margin: 0 18px;
}
#facebook-reg-form .fb-inline .item {
  display: inline-block;
  width: 130px;
  font-weight: bold;
}
#facebook-reg-form .fb-inline:first-child {
  border-top: 1px solid #c8c8c8;
}
#facebook-reg-form .fb-inline.last {
  border: none;
}
#facebook-reg-form h3 {
  padding-top: 0;
  padding-bottom: 15px;
}
#facebook-reg-form #id_accept_terms {
  position: relative;
  top: 3px;
}
#facebook-reg-form label[for="id_accept_terms"] {
  position: relative;
  top: 3px;
}
#facebook-reg-form .fb-terms-error {
  background: #3e99b9;
  color: #ffffff;
  display: block;
  font-size: 10px;
  padding: 5px;
}
#facebook-reg-form .buttons {
  margin-top: 30px;
}
/*
 *  Helpful Links at Bottom
 *  -----------------------
 */
.cas-container .helpful-links {
  background: #cccccc;
  color: #666666;
  padding: 9px 18px;
  font-size: 11px;
}
/*
 *  Forgot Password / Resend Activation
 *  -----------------------------------
 */
.cas-container.login .resend-activation-form,
.cas-container.login .reset-password-form {
  background: #f8f8f8;
  display: none;
}
.cas-container.login .resend-activation-form .cas-title,
.cas-container.login .reset-password-form .cas-title {
  padding-bottom: 9px;
  text-transform: uppercase;
}
.cas-container.login .resend-activation-form form,
.cas-container.login .reset-password-form form {
  display: block;
  padding: 30px 18px 18px 18px;
}
.cas-container.login .resend-activation-form p,
.cas-container.login .reset-password-form p {
  color: #000000;
}
/*
 *  Register Complete
 *  -----------------
 */
body.reg-complete .cas-title {
  padding-bottom: 9px;
}
body.reg-complete .border {
  border-bottom: 1px solid #f8f8f8;
  padding: 10px 18px 25px;
  margin-bottom: 22px;
}
body.reg-complete .enjoy-statement {
  padding-top: 0;
}
body.reg-complete .buttons {
  margin-top: 30px;
}
/*
 *  Sidebar: Already Registered?
 *  ----------------------------
 */
.widget.already-registered img {
  max-width: 284px;
}
/*
 *  Sidebar: What's in it for me?
 *  -----------------------------
 *  Huh? I only dance for money
 */
.widget .whats-in-it-for-me {
  border-bottom: 1px #f8f8f8 solid;
  padding: 0 0 30px 0;
  margin-bottom: 30px;
  text-align: center;
}
.widget .whats-in-it-for-me .cas-title {
  color: #009fa9;
  padding-bottom: 2px;
}
.widget .whats-in-it-for-me .icon {
  font-size: 34px;
}
.widget .whats-in-it-for-me .subtitle {
  margin-top: -10px;
}
.widget .whats-in-it-for-me .text {
  padding-bottom: 13px;
}
.widget .whats-in-it-for-me p {
  line-height: 1.2em;
  padding: 0;
}
.widget .whats-in-it-for-me .btn {
  background: #fafafb;
  border: 1px solid #009fa9;
  color: #009fa9;
  margin-top: 15px;
}
.widget .whats-in-it-for-me .btn:hover {
  background: #009fa9;
  color: #FFF;
}
.widget .already-signed-up .cas-title {
  padding: 0 0 20px 0;
}
/*
 *  Sidebar: Why Register
 *  ---------------------
 *  Also used on VOD Watch page (Login prompt when user clicks to play an episode)
 */
.why-register .cas-title {
  padding-top: 18px;
}
.why-register p {
  padding-top: 0;
  padding-bottom: 15px;
}
.why-register ol,
.why-register ul {
  padding: 0;
  margin: 0;
}
.why-register ol li,
.why-register ul li {
  list-style: none;
  margin-left: 0;
  padding-left: 30px;
  padding-bottom: 15px;
}
.why-register ol li:before,
.why-register ul li:before {
  list-style: none;
  display: inline-block;
  content: "-";
  width: 12px;
  margin-left: -12px;
}
/*
 * Display UKTV Logo together with Channel Logo
 * --------------------------------------------
 * Currently used on Newsletter Signup Form, Press Awaiting Access page.
 * Template: base_form.html
 */
.uktv-with-channel-logos {
  margin: 0;
  padding: 60px 0 60px;
  position: relative;
  text-align: center;
}
.uktv-with-channel-logos .logo {
  display: inline-block;
  height: 50px;
}
.uktv-with-channel-logos .logo.site {
  border-left: 1px solid #222222;
  margin-left: 5px;
  padding-left: 20px;
}
.uktv-with-channel-logos .logo.site img {
  width: 105px;
  height: 105px;
  position: relative;
  top: -28px;
}
.uktv-with-channel-logos .logo.uktv {
  margin-left: -18px;
}
.uktv-with-channel-logos .logo.uktv img {
  width: 129px;
  height: 118px;
  position: relative;
  top: -35px;
}
.uktv-with-channel-logos.not-channel .logo.site {
  display: none;
}
.uktv-with-channel-logos.not-channel .logo.site img {
  width: 279px;
}
@media (min-width: 400px) {
  .uktv-with-channel-logos {
    padding: 120px 0 90px;
  }
  .uktv-with-channel-logos .logo.uktv {
    margin-left: 0;
  }
  .uktv-with-channel-logos .logo.uktv img {
    width: 159px;
    height: 146px;
    top: -47px;
  }
  .uktv-with-channel-logos .logo.site {
    margin-left: 10px;
    padding-left: 43px;
  }
  .uktv-with-channel-logos .logo.site img {
    height: 125px;
    width: 125px;
    top: -39px;
  }
}
/*
 *  Newsletter Signup
 *  -----------------
 */
.cas-container.newsletter {
  margin: 0 20px;
}
.cas-container.newsletter .form-bg {
  padding: 18px;
  padding-bottom: 10px;
}
.cas-container.newsletter .form-bg h3 {
  color: #00bac6;
  margin: 0 0 22px 0;
  padding: 0 0 0 0;
}
.cas-container.newsletter .form-bg #nl-signup-btn {
  width: 100%;
  margin-bottom: 30px;
}
.cas-container.newsletter .form-bg .fine-print {
  clear: both;
  display: block;
  padding-top: 0;
  padding-bottom: 20px;
}
.cas-container.newsletter .form-bg .register {
  margin-top: 20px;
}
#facebook_shade {
  color: #000;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  background-color: #222;
  opacity: 0.8;
  filter: alpha(opacity=80);
  -moz-opacity: 0.8;
  z-index: 1000;
}
#facebook_lightbox {
  display: none;
  position: relative;
  width: 300px;
  background-color: #fff;
  margin: 200px auto;
  text-align: center;
  padding: 30px 20px;
  -moz-box-shadow: 0px 0px 8px #000;
  -webkit-box-shadow: 0px 0px 8px #000;
  box-shadow: 0px 0px 8px #000;
  moz-border-radius: 2px;
  border-radius: 2px;
  z-index: 1001;
}
#facebook_wrapper {
  position: absolute;
  top: 0px;
  width: 100%;
  z-index: 1001;
}
#facebook_loading {
  margin-top: 15px;
}
#facebook_close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 16px;
  height: 16px;
  background: url('https://uktv-static.s3.amazonaws.com/fgprod/network/static/images/facebook_close.png');
  cursor: pointer;
}
#facebook_message {
  color: #000 !important;
}
/*
 *  Newsletter Signup Page
 *  ----------------------
 */
.no-tabs-title {
  background: #000;
  color: #FFF;
  font-size: 24px;
  line-height: 24px;
  padding: 0 0 20px 0;
}
.newsletter-signup-page {
  margin: 0 auto;
  padding: 20px;
  width: 280px;
}
.newsletter-signup-page .fine-print {
  font-size: 11px;
  padding: 20px 0 0 0;
}
.newsletter-signup-page .btn {
  margin-bottom: 7px;
}

/*
 *  --------------
 *  BASE VARIABLES
 *  --------------
 *  Corporate, Press and Network Homepage sites.
 *
 *  If a site does not have it's own 'variables.less' file, then it uses this one. So because Corporate, Press and
 *  Network are all very similar, none of them have their own and therefore this file contains the variables that govern
 *  each one of them. All other sites will have their own 'variables.less' file.
 *
 *  This also applies for colours.less and site-fonts.less.
 */
/*
 *  Breakpoints & Grid  | Corp | Press | Network
 *  --------------------------------------------
 */
/*
 *  Typography  | Corp | Press | Network
 *  ------------------------------------
 *  Mostly font-sizes
 */
/*
 *  Dimensions | Corp
 *  ------------------------------------
 */
/*
 *  ------------
 *  BASE COLOURS
 *  ------------
 *  Corporate, Press and Network Homepage sites.
 *
 *  If a site does not have it's own 'colours.less' file, then it uses this one. So because Corporate, Press and
 *  Network are all very similar, none of them have their own and therefore this file contains the colour variables that
 *  govern all of them. All other sites will have their own 'colours.less' file.
 *
 *  This also applies for variables.less and site-fonts.less.
 */
/*
 *  Basics | Corp | Press | Network
 *  -------------------------------
 */
/*
 *  Navigation | Corp | Press | Network
 *  -----------------------------------
 */
/*
 *  Footer | Corp | Press | Network
 *  -------------------------------
 */
/*
 *  Buttons | Corp | Press | Network
 *  --------------------------------
 *  All types of buttons, including arrows on carousels & tags
 */
/*
 *  Widgetz & Page Elements | Corp | Press | Network
 *  ------------------------------------------------
 */
/*
 *  TV GUIDE | Corp | Press | Network
 *  ---------------------------------
 */
/*
 *  Carousels & Galleries | Corp | Press | Network
 *  ----------------------------------------------
 */
/*
 *  Programmes / Brand Pages | Corp | Press | Network
 *  -------------------------------------------------
 */
/*
 *  VOD - Watch Episode Page | Corp | Press | Network
 *  -------------------------------------------------
 */
/*
 *  Articles | Corp | Press | Network
 *  ---------------------------------
 *  NOTE : Title & Intro text defined as @single_page_title_colour & @single_page_title_colour
 *  as these are global styles for similar pages such as video or gallery
 */
/*
 *  Other Stuff & Misc | Corp | Press | Network
 *  -------------------------------------------
 */
/*
 *  Forms | Corp | Press | Network
 *  ------------------------------
 *  Used throughout the site, such as Newsletter Signup, Login and Registration and Contact form
 */
/*
 *  Login / Register / My UKTV  | Corp | Press | Network
 *  ---------------------------------------------------
 */
/*
 *  User Profile | Network
 *  ----------------------
 */
/*
 *  Competitions | Network
 *  ----------------------
 */
/*
 *  Newsletter Archive | Network
 *  ----------------------------
 */
/*
 *  Quiz | Corp | Press | Network
 *  -----------------------------
 */
/*
 * User Profile Section
 * --------------------
 * Note that the designs/PSDs for channel websites may be out of date,
 * this is because the UKTV Play site design was updated and therefore
 * these styles and templates were updated to suit and the general
 * look and feel has carried through the other sites.
 */
.rgba .profile-header {
  background: #fafafb;
}
/*
 *  Parental PIN
 *  ------------
 *  Note that no colour/font variables are used here because UKTV Play is the only
 *  website with login and registration.
 */
.pinpage-header {
  border-bottom: 1px solid #949494;
  padding: 30px 18px 23px;
}
.pinpage-title {
  color: #6e6e6e;
  font-size: 18px;
  line-height: 18px;
  padding: 0 0 22px 0;
}
.pinpage-intro {
  font-size: 12px;
  color: #666666;
  padding-top: 0;
}
@media (min-width: 660px) {
  .pinpage-title {
    font-size: 18px;
    line-height: 18px;
  }
}
.pinpage-body {
  background: #fafafb;
  color: #6e6e6e;
  font-size: 12px;
  padding: 18px;
}
.pinpage-body .pinpage-sub-title {
  font-size: 16px;
  line-height: 16px;
  padding-top: 0;
  padding-bottom: 28px;
}
.password-dots {
  display: inline-block;
  height: 9px;
  width: 100px;
}
.svg .password-dots {
  background: url('https://uktv-static.s3.amazonaws.com/fgprod/network/img/password-dots.svg') 0 0 no-repeat;
}
.no-svg .password-dots {
  background: url('https://uktv-static.s3.amazonaws.com/fgprod/network/img/password-dots.png') 0 0 no-repeat;
}
/*
 *  User Profile
 *  ------------
 *  Template: 'apps/myuktv/templates/user_profile/personal_details.html'
 */
.user-profile .user-profile-header {
  border-bottom: 1px solid #e6e7e8;
  padding: 0 0 20px;
  margin: 0 20px;
}
.user-profile .user-profile-header .name {
  color: #6e6e6e;
  font-size: 20px;
  padding-left: 0;
}
.user-profile .user-profile-header .name .name-highlight {
  color: #009fa9;
}
.user-profile .user-profile-header .sign-out-btn {
  margin-top: 15px;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}
.user-profile dl {
  padding: 0 18px;
  display: block;
  color: #6e6e6e;
}
.user-profile dl dt,
.user-profile dl dd {
  display: block;
  font-size: 12px;
  margin: 0;
  padding: 10px 0;
}
.user-profile dl dt {
  padding-bottom: 0;
}
.user-profile dl dd {
  font-weight: bold;
}
.user-profile.delete .user-profile-header {
  border-bottom: none;
}
.user-profile.delete .user-profile-header h2 {
  color: #6e6e6e;
  font-size: 20px;
  padding-left: 0;
}
.user-profile.delete .user-profile-header p {
  font-size: 16px;
  font-family: "GillSans-Light", "GillSansLight", Arial;
  padding-left: 0;
}
.user-profile.delete .profile-widget:before {
  background-image: none;
}
@media (min-width: 480px) {
  .user-profile .user-profile-header .name {
    float: left;
  }
  .user-profile .user-profile-header .sign-out-btn {
    float: right;
    width: 200px;
    margin-top: 0;
  }
  .user-profile dl dt,
  .user-profile dl dd {
    float: left;
    margin: 0;
    padding: 20px 0;
  }
  .user-profile dl dt {
    width: 25%;
    padding-bottom: 20px;
  }
  .user-profile dl dd {
    min-height: 22px;
    width: 75%;
  }
}
@media (min-width: 660px) {
  .user-profile .col-divider {
    background: #e6e7e8;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
  }
  .user-profile .mainCol {
    box-sizing: border-box;
    width: 66.666%;
    float: left;
    position: relative;
    padding: 0 20px 0 0;
  }
  .user-profile .mainCol .col-divider {
    right: 10px;
  }
  .user-profile .sideCol {
    box-sizing: border-box;
    width: 33.333%;
    float: right;
    padding: 0 20px 0 20px;
    position: relative;
  }
  .user-profile .sideCol .col-divider {
    left: -10px;
  }
  .user-profile dl dt,
  .user-profile dl dd {
    margin: 0;
    padding: 30px 0;
  }
  .user-profile dl dt {
    width: 25%;
    padding-bottom: 20px;
  }
  .user-profile dl dd {
    min-height: 22px;
    width: 75%;
  }
}
@media (min-width: 800px) {
  .user-profile .profile-header {
    margin-bottom: 20px;
  }
  .user-profile .edit-btn {
    margin-top: 20px;
  }
}
/*
 *  Edit User Details
 *  ------------------
 *   1. When user edits their personal information.
 *   2. For when the user has to update some details before watching a VOD episode.
 *  Template: 'apps/myuktv/templates/user_profile/personal_details.html' - inside an IF statement
 */
.vod-detail-update {
  padding: 22px 0;
}
.user-profile {
  margin-bottom: 20px;
}
.user-profile .personal-details-form {
  padding: 20px 18px 0;
}
.user-profile .personal-details-form .label {
  font-size: 11px;
}
.user-profile .personal-details-form .t_and_c label {
  font-size: 12px;
}
@media (min-width: 460px) {
  .user-profile .personal-details-form {
    width: 420px;
  }
  .user-profile .personal-details-form .label,
  .user-profile .personal-details-form .input-sec {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 35px;
  }
  .user-profile .personal-details-form .label {
    width: 130px;
  }
  .user-profile .personal-details-form .input-sec {
    width: 280px;
  }
  .user-profile .personal-details-form .input-sec.checkbox {
    width: 100%;
  }
  .user-profile .personal-details-form .reg-dob {
    width: 228px;
  }
  .user-profile .personal-details-form .reg-dob .styled-select:nth-child(3) {
    margin-right: 0;
  }
  .user-profile .personal-details-form .gender {
    width: 228px;
  }
  .user-profile .personal-details-form .gender .styled-select {
    width: 228px;
    margin-right: 0;
  }
}
/*
 *  Parental PIN Set Up
 *  -------------------
 *  Template: 'apps/myuktv/templates/parental_pin.html'
 */
.pin-page {
  padding-bottom: 40px;
}
.pin-page #setup-error {
  margin-top: 5px;
  margin-bottom: 10px;
}
.pin-page .two-col-half,
.pin-page .two-col-half.second {
  margin-top: 10px;
}
.pin-page .pin-title {
  font-family: Verdana, Arial, sans-serif;
  padding: 0 0 20px 0;
  text-transform: none;
}
.pin-page .pin-title span {
  font-weight: bold;
  font-size: 15px;
}
.pin-page label {
  font-weight: normal;
}
.pin-page .input-sec.radio {
  margin: 5px 0;
}
.pin-page .pin-pad input {
  border: 1px solid #000;
  margin-right: 20px;
  height: 40px;
  width: 40px;
  text-align: center;
}
.pin-page .submit {
  margin: 24px 0 20px;
}
/*
 *  Manage Parental PIN
 *  -------------------
 *  Template: 'apps/myuktv/templates/parental_pin.html'
 */
.pin-page.manage {
  padding-top: 28px;
  padding-bottom: 40px;
}
.pin-page.manage .two-col-half,
.pin-page.manage .two-col-half.second {
  margin-top: 25px;
}
.pin-page.manage #update-error {
  margin-top: 0;
}
.pin-page.manage .profile-title {
  padding-top: 0;
  padding-bottom: 0;
}
.pin-page.manage .two-col-half.first .pin-title {
  padding-top: 7px;
  padding-bottom: 14px;
}
.pin-page.manage .two-col-half.first .pin-title span {
  font-weight: normal;
}
.pin-page.manage .two-col-half.second .submit {
  margin-top: 185px;
}
.pin-page.manage .input-sec.radio {
  padding-top: 0;
  margin: 0;
}
.pin-page.manage .input-sec.radio.second {
  padding-top: 8px;
  padding-bottom: 13px;
}
.pin-page.manage .submit {
  margin-bottom: 0;
}
@media (min-width: 660px) {
  .pin-page.manage .two-col-half.first {
    border-right: 1px solid #e6e7e8;
  }
}
.pin-complete {
  padding-top: 28px;
}
.pin-complete .btn.highlight {
  margin: 15px 0;
}

/*
 *  ------------
 *  BASE COLOURS
 *  ------------
 *  Corporate, Press and Network Homepage sites.
 *
 *  If a site does not have it's own 'colours.less' file, then it uses this one. So because Corporate, Press and
 *  Network are all very similar, none of them have their own and therefore this file contains the colour variables that
 *  govern all of them. All other sites will have their own 'colours.less' file.
 *
 *  This also applies for variables.less and site-fonts.less.
 */
/*
 *  Basics | Corp | Press | Network
 *  -------------------------------
 */
/*
 *  Navigation | Corp | Press | Network
 *  -----------------------------------
 */
/*
 *  Footer | Corp | Press | Network
 *  -------------------------------
 */
/*
 *  Buttons | Corp | Press | Network
 *  --------------------------------
 *  All types of buttons, including arrows on carousels & tags
 */
/*
 *  Widgetz & Page Elements | Corp | Press | Network
 *  ------------------------------------------------
 */
/*
 *  TV GUIDE | Corp | Press | Network
 *  ---------------------------------
 */
/*
 *  Carousels & Galleries | Corp | Press | Network
 *  ----------------------------------------------
 */
/*
 *  Programmes / Brand Pages | Corp | Press | Network
 *  -------------------------------------------------
 */
/*
 *  VOD - Watch Episode Page | Corp | Press | Network
 *  -------------------------------------------------
 */
/*
 *  Articles | Corp | Press | Network
 *  ---------------------------------
 *  NOTE : Title & Intro text defined as @single_page_title_colour & @single_page_title_colour
 *  as these are global styles for similar pages such as video or gallery
 */
/*
 *  Other Stuff & Misc | Corp | Press | Network
 *  -------------------------------------------
 */
/*
 *  Forms | Corp | Press | Network
 *  ------------------------------
 *  Used throughout the site, such as Newsletter Signup, Login and Registration and Contact form
 */
/*
 *  Login / Register / My UKTV  | Corp | Press | Network
 *  ---------------------------------------------------
 */
/*
 *  User Profile | Network
 *  ----------------------
 */
/*
 *  Competitions | Network
 *  ----------------------
 */
/*
 *  Newsletter Archive | Network
 *  ----------------------------
 */
/*
 *  Quiz | Corp | Press | Network
 *  -----------------------------
 */
/*
 *  --------------
 *  BASE VARIABLES
 *  --------------
 *  Corporate, Press and Network Homepage sites.
 *
 *  If a site does not have it's own 'variables.less' file, then it uses this one. So because Corporate, Press and
 *  Network are all very similar, none of them have their own and therefore this file contains the variables that govern
 *  each one of them. All other sites will have their own 'variables.less' file.
 *
 *  This also applies for colours.less and site-fonts.less.
 */
/*
 *  Breakpoints & Grid  | Corp | Press | Network
 *  --------------------------------------------
 */
/*
 *  Typography  | Corp | Press | Network
 *  ------------------------------------
 *  Mostly font-sizes
 */
/*
 *  Dimensions | Corp
 *  ------------------------------------
 */
/*
 *  PRIMARY NAV
 *  -----------
 *  - in mobile view the nav is hidden and then opened after JS click event on the 'Main Menu' button
 *  - after tabletLandscape breakpoint it's styled as typical horizontal navigation
 */
.site-nav {
  background: #ffffff;
  display: none;
  margin: 0;
  padding: 0;
  z-index: 9998;
}
.site-nav li {
  border-right: 0;
  border-top: 1px solid #cccccc;
  display: block;
  height: 50px;
  line-height: 50px;
  z-index: 9999;
  margin: 0;
  padding: 0;
}
.site-nav li a {
  color: #666666;
  font-size: 14px;
  line-height: 50px;
  margin: 0;
  padding: 0 14px;
  display: block;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}
.site-nav li i {
  height: 50px;
}
.site-nav li:first-child {
  border-left: 0;
}
.site-nav li.active a {
  background-color: #eeeeee;
  color: #333333;
}
#secondary-nav #sub-nav li a {
  height: 40px;
  line-height: 40px;
}
.no-touch .site-nav li a:hover {
  background: #eeeeee;
  color: #333333;
  -webkit-transition: background 0.3s;
  transition: background 0.3s;
  -webkit-transition: color 0.3s;
  transition: color 0.3s;
}
.site-nav li a:hover {
  -webkit-tap-highlight-color: #eeeeee;
}
.site-nav ul li i {
  font-size: 19px;
  margin-right: 3px;
  vertical-align: top;
}
.site-nav ul li:first-child i {
  line-height: 45px;
}
/*
 *  SECONDARY NAV
 */
#sub-menu-btn {
  background: #000000;
}
#secondary-nav #sub-nav {
  background-color: #000000;
}
#secondary-nav #sub-nav li {
  height: 40px;
  line-height: 40px;
}
#secondary-nav #sub-nav li a {
  color: #ffffff;
  font-size: 12px;
  line-height: 40px;
  padding: 0 20px;
}
.no-touch #secondary-nav #sub-nav li a:hover {
  background: #eeeeee;
  color: #333333;
}
#secondary-nav #sub-nav li {
  border-top: 1px solid #333333;
}
/* the footer navigation is displayed in mobile view */
.footer-menu .site-nav {
  display: block;
}
@media (min-width: 660px) {
  .sticky #sub-nav {
    top: 0;
    position: relative;
  }
  .sticky.slide-up #sub-nav {
    top: -50px;
    position: relative;
  }
  #nav-bar.slide-up #menu-btn,
  #nav-bar.slide-up #sub-menu-btn {
    position: relative;
    top: -50px;
    margin-bottom: -50px;
  }
  #nav-bar.slide-up #home-btn {
    border-right: 1px solid #333333;
    z-index: 9997;
    background: #000000;
  }
  #nav-bar.slide-up #home-btn .icon-home:before {
    color: #ffffff;
    position: relative;
    left: -1px;
    font-size: 15px;
  }
  #nav-bar.sticky #home-btn {
    z-index: 9996;
  }
  #sub-menu-btn {
    margin: 0 auto !important;
  }
}
/*
 *  --------------------------------------------------------------------------------------------------------------------
 *  --------------------------------------------------------------------------------------------------------------------
 *  TABLET LANDSCAPE & UP
 *  --------------------------------------------------------------------------------------------------------------------
 *  --------------------------------------------------------------------------------------------------------------------
 *
 */
@media (min-width: 800px) {
  .site-nav {
    background: none;
    display: block;
    margin-left: 50px;
    position: relative;
    z-index: 1;
  }
  .site-nav li {
    float: left;
    padding: 0;
    border-right: 1px solid #cccccc;
    border-top: 0;
  }
  .site-nav li a {
    display: block;
    padding: 0 11px;
    font-size: 13px;
  }
  .footer-menu .site-nav li.home-btn,
  .footer-menu .site-nav li.home-btn a {
    padding: 0;
  }
  #main-nav {
    position: absolute;
    top: 1px;
    right: 25%;
    left: 0;
  }
  #secondary-nav {
    background-color: #000000;
  }
  #secondary-nav #sub-nav {
    display: block;
    margin-top: 0;
    background-color: #000000;
    left: -58px;
  }
  #secondary-nav #sub-nav li {
    border: none;
  }
  #secondary-nav #sub-nav li a {
    border-right: 1px solid #333333;
    height: 40px;
    line-height: 40px;
    color: #ffffff;
  }
  #secondary-nav #sub-nav li a:hover,
  #secondary-nav #sub-nav li.active a {
    background: #eeeeee;
    border-right: 1px solid #333333;
    color: #333333;
  }
  #nav-bar.slide-up #main-nav {
    top: -100px;
  }
  #nav-bar.slide-up #sub-nav {
    top: 0;
    margin-top: -40px;
    left: 0px;
  }
  #nav-bar.slide-up .nav-wrap {
    background-color: #000000;
  }
  #nav-bar.slide-up .input-holder {
    height: 40px;
  }
  #nav-bar.slide-up .nav-wrap {
    height: 40px;
  }
  #nav-bar.slide-up .button-holder #site-search-btn {
    position: relative;
    top: -5px;
  }
}
@media (min-width: 1100px) {
  .site-nav li a {
    padding: 0 20px;
    font-size: 14px;
  }
}
@media (min-width: 1100px) {
  .site-nav {
    margin-left: 58px;
  }
  #nav-bar.slide-up .icon-home:before {
    color: #ffffff;
    position: relative;
    left: 0;
  }
}
/*
 * Login Button in the Navbar
 * --------------------------
 */
.site-nav li.login-btn {
  border-right: none;
}
.site-nav li.login-btn a {
  padding-right: 23px;
}
@media (min-width: 800px) {
  .site-nav li.login-btn {
    border-left: 1px solid #333333;
    float: right;
  }
}
/*
    ICON FONTS
    ----------
    Adapted using techniques from Font Awesome: http://fortawesome.github.com/Font-Awesome/

    IE7 is handled via an ie7 version of this file: icons-ie7.css
    IE7 also doesn't allow us to change the chararcter dynamically using CSS, so this is
    done via JS. Eg: 'js/header/sticky-header,js' the home icon is changed for IE7 here.

    This file loads a font defined below via '@font-face'
    It adds the character of the font using the CSS3 property ':before' and 'content'

    Each icon is added to the templates via an '<i>' elemtent with a class of
    'icon-camrea' for example.

 */
@font-face {
  font-family: 'uktv_icons';
  src: url('https://uktv-static.s3.amazonaws.com/fgprod/network/fonts/icon-font/uktv-icons.eot');
  src: url('https://uktv-static.s3.amazonaws.com/fgprod/network/fonts/icon-font/uktv-icons.eot?#iefix') format('embedded-opentype'), url('https://uktv-static.s3.amazonaws.com/fgprod/network/fonts/icon-font/uktv-icons.woff') format('woff'), url('https://uktv-static.s3.amazonaws.com/fgprod/network/fonts/icon-font/uktv-icons.ttf') format('truetype'), url('https://uktv-static.s3.amazonaws.com/fgprod/network/fonts/icon-font/uktv-icons.svg#uktv_iconsregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
/*  Font Awesome styles
    ------------------------------------------------------- */
[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: uktv_icons;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-transform: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a [class^="icon-"],
a [class*=" icon-"] {
  display: inline-block;
}
/* makes the font 33% larger relative to the icon container */
.icon-large:before {
  vertical-align: top;
  font-size: 1.3333333333333333em;
}
li [class^="icon-"],
li [class*=" icon-"] {
  display: inline-block;
  width: 1.25em;
  text-align: center;
}
li .icon.icon-vod {
  width: 1.27em;
}
li .icon-large:before,
li .icon-large:before {
  /* 1.5 increased font size for icon-large * 1.25 width */
  width: 1.875em;
}
.social-links [class^="icon-"],
.btn [class^="icon-"],
.social-links [class*=" icon-"],
.btn [class*=" icon-"] {
  /* keeps button heights with and without icons the same */
  line-height: .9em;
}
a:hover [class^="icon-"],
a:hover [class*=" icon-"],
[class^="icon-"]:hover,
[class*=" icon-"]:hover {
  text-decoration: none;
}
[class^="icon-"],
[class*=" icon-"] {
  text-shadow: none;
  font-weight: normal;
}
i.icon-vod,
i.icon-longformvideo {
  position: relative;
  left: -2px;
}
/*
 *  SET ICONS FOR USE
 *  -----------------
 */
.icon-home:before {
  content: "J";
}
.sticky.slide-up .icon-home:before {
  content: "M";
}
.icon-menu:before {
  content: "M";
}
.icon-submenu:before {
  content: "P";
}
.icon-search:before {
  content: "Y";
}
.icon-delete:before {
  content: "R";
}
.icon-hubpage:before {
  content: "H";
}
.icon-film:before,
.icon-play:before,
.icon-shortformvideo:before {
  content: "D";
}
.icon-vod:before,
.icon-longformvideo:before {
  content: "+";
}
.icon-pause:before {
  content: "=";
}
.icon-file:before,
.icon-article:before {
  content: "B";
}
.icon-talentpage:before {
  content: "G";
}
.icon-camera:before,
.icon-gallery:before {
  content: "C";
}
.icon-mail:before {
  content: "s";
}
.icon-close:before {
  content: "Q";
}
.icon-up:before {
  content: "b";
}
.icon-down:before {
  content: "c";
}
.icon-left:before,
.flex-prev:before {
  content: "Z";
}
.icon-right:before {
  content: "a";
}
.icon-recipelist:before,
.icon-list:before {
  content: "N";
}
.icon-grid:before {
  content: "O";
}
.icon-back-top:before {
  content: "K";
}
.icon-to-bottom:before {
  content: "L";
}
.icon-programme:before,
.icon-brandpage:before {
  content: "v";
}
.icon-tick:before {
  content: "e";
}
.icon-settings:before {
  content: "i";
}
.icon-user:before {
  content: "G";
}
.icon-phone:before {
  content: "t";
}
.icon-print:before {
  content: "r";
}
.icon-plus:before {
  content: "6";
}
.icon-comment:before {
  content: "3";
}
.icon-quote:before {
  content: "l";
}
.icon-calendar:before {
  content: "q";
}
.icon-thumbnails:before {
  content: "O";
}
.icon-external:before,
.icon-externallinkitem:before {
  content: "n";
}
.icon-error:before {
  content: "X";
}
.icon-warning:before,
.vjs-errors-headline:before {
  content: "W";
}
.icon-question:before,
.icon-help:before {
  content: "U";
}
.icon-info:before {
  content: "V";
}
.icon-quiz:before {
  content: "E";
}
.icon-download:before,
.icon-downloadablefile:before {
  content: "S";
}
.icon-upload:before {
  content: "T";
}
.icon-competition:before {
  content: "F";
}
.icon-star:before,
.icon-iframepage:before {
  content: "5";
}
.icon-microphone:before,
.icon-podcast:before {
  content: "I";
}
.icon-lock-closed:before {
  content: "y";
}
.icon-lock-open:before {
  content: "z";
}
.icon-collectionpage:before,
.icon-collection:before,
.icon-collections:before,
.icon-boxsets:before {
  content: ":";
}
.icon-tv:before {
  content: "v";
}
.icon-mobile:before {
  content: "u";
}
.icon-mobile.landscape:before {
  content: "®";
}
.icon-mobile.portrait:before {
  content: "u";
}
.icon-tablet:before {
  content: "¢";
}
.icon-tablet.landscape:before {
  content: "¢";
}
.icon-tablet.portrait:before {
  content: "¥";
}
.icon-computer:before {
  content: "¨";
}
.icon-tv:before {
  content: "v";
}
.icon-recipe:before,
.icon-a-z:before {
  content: "N";
}
.icon-duration:before {
  content: "h";
}
.icon-healthy:before,
.icon-mylist:before,
.icon-myshows:before {
  content: "*";
}
.icon-myshows.active:before,
.icon.in-playlist:before {
  content: "＊";
}
.icon-difficulty:before {
  content: "X";
}
.icon-tvguide:before {
  content: "`";
}
.icon-more:before {
  content: "?";
}
.icon-restart:before {
  content: "¬";
}
.icon-recent:before {
  content: "j";
}
.icon-share:before {
  content: "7";
}
.icon-tv-play:before {
  content: "A";
}
.icon-account:before {
  content: "§";
}
.icon-restart:before {
  content: "$";
}
.icon-retry:before {
  content: "f";
}
.icon-loading:before {
  content: "m";
}
/*  Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
    readers do not read off random characters that represent icons, we
    should consider doing this too
*/

/*
 *  ---------------
 *  BASE SITE FONTS
 *  ---------------
 *  Corporate, Press and Network Homepage sites.
 *
 *  If a site does not have it's own 'site-fonts.less' file, then it uses this one. So because Corporate, Press and
 *  Network are all very similar, none of them have their own and therefore this file contains the variables that govern
 *  each one of them. All other sites will have their own 'site-fonts.less' file.
 *
 *  This also applies for colours.less and variables.less.
 *
 */
@font-face {
  font-family: 'ArvoRegular';
  src: url('https://uktv-static.s3.amazonaws.com/fgprod/network/fonts/Arvo/Arvo-Regular-webfont.eot');
  src: url('https://uktv-static.s3.amazonaws.com/fgprod/network/fonts/Arvo/Arvo-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('https://uktv-static.s3.amazonaws.com/fgprod/network/fonts/Arvo/Arvo-Regular-webfont.woff') format('woff'), url('https://uktv-static.s3.amazonaws.com/fgprod/network/fonts/Arvo/Arvo-Regular-webfont.ttf') format('truetype'), url('https://uktv-static.s3.amazonaws.com/fgprod/network/fonts/Arvo/Arvo-Regular-webfont.svg#ArvoRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}
body {
  font: Helvetica, Arial, sans-serif;
}
h1,
h1 a,
h2,
h2 a,
h3,
h3 a,
h4,
h4 a {
  font-family: 'ArvoRegular', Helvetiva, Arial, sans-serif;
}
h5,
h5 a,
h6,
h6 a {
  font-family: 'ArvoRegular', Helvetiva, Arial, sans-serif;
}
#full-page-carousel .caption .sub-title {
  font-family: 'ArvoRegular', Helvetiva, Arial, sans-serif;
}
/*
 *  Log in / Register / Newsletter Sign-up Pages
 *  --------------------------------------------
 */
.form-page .tab-title {
  font-family: 'ArvoRegular', Helvetiva, Arial, sans-serif;
}
.form-page .content-title {
  font-family: 'ArvoRegular', Helvetiva, Arial, sans-serif;
  font-weight: bold;
}

/*
 *  --------------
 *  BASE VARIABLES
 *  --------------
 *  Corporate, Press and Network Homepage sites.
 *
 *  If a site does not have it's own 'variables.less' file, then it uses this one. So because Corporate, Press and
 *  Network are all very similar, none of them have their own and therefore this file contains the variables that govern
 *  each one of them. All other sites will have their own 'variables.less' file.
 *
 *  This also applies for colours.less and site-fonts.less.
 */
/*
 *  Breakpoints & Grid  | Corp | Press | Network
 *  --------------------------------------------
 */
/*
 *  Typography  | Corp | Press | Network
 *  ------------------------------------
 *  Mostly font-sizes
 */
/*
 *  Dimensions | Corp
 *  ------------------------------------
 */
/*
 *  Custom Mixins
 *  -------------
 *
 */
/*
 *  SITE OVERRIDES
 *  --------------
 *  This file serves as the Site Overrides for the Press, Corporate and Network sites.
 *
 */
/*
    Logo Treatment - Press, Corporate & Network
    -------------------------------------------
    - Swap logo out for mobile version on small screens.
    - Make logo bigger from a lower breakpoint (after @tablet-portrait)
 */
#logo {
  margin: 0;
}
@media (max-width: 660px) {
  #head-wrap .container {
    padding: 0;
  }
  #logo {
    margin: 0;
  }
  #logo a {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/logo-mobile.png") no-repeat;
  }
}
@media (min-width: 660px) {
  #logo {
    height: 139px;
    width: 251px;
    position: relative;
    left: -25px;
  }
  #logo a {
    background-size: 251px 139px;
    height: 139px;
  }
}
.form-page .logo {
  padding: 0 0 80px 0;
}
body.network #site-sub-title {
  font-size: 28px;
}
@media (min-width: 500px) {
  body.network #site-sub-title {
    font-size: 35px;
  }
}
body.press.homepage #total-wrapper {
  padding-top: 20px;
}
/*
    Widget Treatment - Press, Corporate & Network
    ---------------------------------------------
    For Corporate & Press, the widgets do not have a "tabbed" title
    look. So we override that here.
 */
.widget-title,
#sidebar .widget.accordion .widget-title {
  background: none;
  padding-top: 20px;
  padding-bottom: 20px;
}
.widget,
.page-element {
  background: #FFF;
  border: 1px solid #e3e3e3;
}
.widget-bg {
  padding-top: 0;
}
.cssgradients .widget-bg,
.cssgradients .page-element {
  background-image: none;
  background: #fff;
}
.cssgradients #sidebar .widget-bg,
.cssgradients #sidebar .page-element {
  background-image: none;
  background: none;
}
.no-cssgradients .widget-bg,
.no-cssgradients .page-element {
  background-image: none;
  background: none;
}
.gallery-detail .single-header .single-title,
.video-page .single-header .single-title {
  color: #3e99b9;
}
#nav-bar {
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
}
#nav-bar.sticky {
  border-top: 0;
  border-bottom: 0;
}
.article-detail article.page-element .article-content h2 {
  padding-top: 20px;
}
/*
    NETWORK - Main Content Widget
    -----------------------------
 */
network.homepage .network-home-columns .channel-logos {
  min-height: 88px;
}
@media (min-width: 600px) {
  .network.homepage .channel-logos {
    display: none;
  }
  .network.homepage .network-home-columns .channel-logos {
    display: block;
    min-height: 90px;
    perspective: 1000;
    padding-bottom: 0;
  }
}
.csstransitions .network.homepage .network-home-columns .channel-logos li {
  opacity: 0;
  -webkit-transform: rotateY(100deg);
  transform: rotateY(100deg);
}
.csstransitions .network.homepage .network-home-columns .channel-logos li.fade-in {
  opacity: 1;
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
  -webkit-transition: all 0.8s ease;
  transition: all 0.8s ease;
}
/*
    NETWORK - Full Page Carousel
    ----------------------------
 */
.network #full-page-carousel {
  background-image: none;
  background: #222222;
}
.network #full-page-carousel .caption .title {
  font-size: 24px;
}
.network #full-page-carousel .caption p {
  font-size: 16px;
  padding: 10px 20px 0;
}
@media (min-width: 660px) {
  .network #full-page-carousel {
    background: none;
  }
  .network #full-page-carousel .caption .title {
    font-size: 32px;
    line-height: 40px;
    height: 40px;
  }
  .network #full-page-carousel .caption p {
    font-size: 21px;
    line-height: 30px;
    height: 30px;
    padding: 10px 20px;
  }
}
/*
    Footer Treatment - Press, Corporate & Network
    ---------------------------------------------
 */
#footer-menu {
  border-bottom: 1px solid #3a3a3a;
}
@media (min-width: 660px) {
  #static-footer:before {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/gradient-slice.png") repeat-x scroll center bottom transparent;
    bottom: 40px;
    content: " ";
    height: 545px;
    position: absolute;
    width: 100%;
    z-index: -1;
  }
  .head-wrap {
    background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/bg/gradient-slice-top.png") repeat-x scroll center bottom transparent !important;
  }
}
/*
 *  TV Guide Treatment - Press, Corporate & Network
 *  -----------------------------------------------
 *  With the addition of the channel logos at the top, the navigation hour bar has been reduced in height
 *  and therefore many elements have had to be shifted up and / or had margins reduced.
 */
#tv-listings-page {
  margin-bottom: 40px;
}
#tv-listings-page .back i {
  top: 0;
}
#tv-listings-page .forward i {
  top: 0;
}
.grid-view .day-labels .date {
  color: #ffffff;
}
.grid-view .day-labels .the-time {
  color: #ffffff;
}
.grid-view .day-labels time {
  color: #ffffff;
  padding: 0;
}
.grid-view .day-labels .day > li .the-time {
  color: #ffffff;
}
.day > li .the-time {
  color: #ffffff;
}
.list-view .listing-item .the-time {
  color: #ffffff;
}
.hours {
  height: 50px;
}
.hours li.hour {
  height: 50px;
}
.hours li.hour time {
  height: 50px;
  line-height: 50px;
}
#tv-listings-page .back,
#tv-listings-page .forward,
#day-labels-visible-area {
  height: 50px;
  line-height: 50px;
}
.listings-tools {
  padding: 0;
}
.listings-tools .tools,
.listings-tools .btn-group {
  padding-bottom: 20px;
}
#listings-down {
  box-shadow: none;
}
#press_week {
  border: 1px solid #dddddd !important;
  border-radius: 5px;
}
#press_week option {
  padding: 0;
}
@media (min-width: 480px) {
  #press_week {
    position: relative;
    right: 10px;
    top: 1px;
  }
  #press_week option {
    padding: 0 7px 0 7px;
  }
}
.channel-select.flexslider {
  display: block;
  width: 100%;
  overflow: auto;
  background-color: #222222;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
}
.channel-select.flexslider a.flex-next,
.channel-select.flexslider a.flex-prev {
  height: 98px;
  line-height: 98px;
  top: 20px;
  width: 58px;
}
.channel-select.flexslider ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.channel-select.flexslider ul li.logo {
  float: left;
  width: 98px;
  height: 99px;
  margin: 0;
  padding: 0;
  background: url("https://uktv-static.s3.amazonaws.com/fgprod/network/img/sprites/channel-logos-70x70.png") no-repeat scroll 0 0 transparent;
}
.channel-select.flexslider ul li.logo a {
  display: block;
  width: 94%;
  height: 93%;
  text-indent: -9999px;
}
.channel-select.flexslider #Alibi {
  background-position: 16px -185px;
}
.channel-select.flexslider #Blighty {
  background-position: 16px -385px;
}
.channel-select.flexslider #Dave {
  background-position: 10px -1685px;
}
.channel-select.flexslider #Drama {
  background-position: 10px -1785px;
}
.channel-select.flexslider #Eden {
  background-position: 16px -485px;
}
.channel-select.flexslider #Gold {
  background-position: 16px -85px;
}
.channel-select.flexslider #Food {
  background-position: 16px -785px;
}
.channel-select.flexslider #Home {
  background-position: 16px -685px;
}
.channel-select.flexslider #Really {
  background-position: 10px -1285px;
}
.channel-select.flexslider #Watch {
  background-position: 6px -985px;
  width: 112px !important;
}
.channel-select.flexslider #W {
  background-position: 6px -2095px;
}
.channel-select.flexslider #Yesterday {
  background-position: 10px -1885px;
}
.channel-select.flexslider .selected {
  border: 3px solid #1DABA5;
  border-radius: 5px 5px 5px 5px;
}
.mob-spacing {
  display: block;
  height: 98px;
  content: " ";
}
.channel-select a.flex-next,
.channel-select a.flex-prev {
  height: 50px;
  line-height: 50px;
  top: 44%;
  width: 58px;
}
@media (min-width: 480px) {
  .list-view .days-wrapper {
    margin-bottom: 0;
  }
  .list-view .day-labels {
    height: 50px;
  }
  .list-view .day-labels time {
    height: 50px;
    padding: 0;
  }
  .list-view .day-labels .day-single {
    height: 50px;
  }
  .list-view .day-labels .day-single time {
    height: 50px;
    padding: 0;
  }
  .grid-view ol.hours {
    margin-bottom: 0;
  }
  .grid-view #day-labels-visible-area {
    top: 50px;
  }
  .grid-view .day-single,
  .grid-view .day-labels {
    height: 50px;
  }
  .grid-view .day-labels .day-single time {
    color: #FFF;
    padding-top: 25px;
  }
}
@media (min-width: 660px) {
  .mob-spacing {
    display: none !important;
  }
  .channel-select a.flex-next,
  .channel-select a.flex-prev {
    width: 75px;
    height: 50px;
    line-height: 50px;
    top: 44%;
  }
  .grid-view ol.hours {
    margin-bottom: 50px;
  }
  .grid-view #day-labels-visible-area {
    top: 100px;
  }
  .grid-view .listings-up-down-btns.up {
    top: 50px;
  }
  .grid-view .day-labels .day-single time {
    padding-top: 5px;
  }
  .grid-view .days-wrapper .date {
    position: relative;
    top: -30px;
  }
}
@media (min-width: 1100px) {
  .channel-select a.flex-next,
  .channel-select a.flex-prev {
    display: none;
  }
  .channel-select ul.slides li:first-child {
    margin-left: 0;
  }
}
.widget.most-searched {
  border: none;
  background: #313333;
}
.widget.most-searched .widget-title {
  color: #FFF;
}
.widget.most-searched ol li span {
  font-weight: bold;
}
.widget.most-searched ol li:first-child {
  margin-top: 0;
}