/* Stylesheet Element Id: 7.761425.1550228708
 * Stylesheet Name: Common Look-and-Feel Stylesheet 1521
 * Generated by CMS on: 18-Sep-2019 16:21:17
 */
        
/*
§1 - Imports
~~~~~~~
Include files kept on 3rd party servers and CDNs. This is intended purely for Glyphicons and fonts.
*/

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css"); /* Glyphicons! */
@import url("https://fonts.googleapis.com/css?family=PT+Sans|PT+Serif");
@import url("https://fonts.googleapis.com/css?family=Slabo+13px");
@import url("https://fonts.googleapis.com/css?family=Slabo+27px");

/*
§2 - Brand-specific Styles
~~~~~~~~~~~~~~~~~~~~~
Colours for the individual site
*/

a{
  color: #000000; /* TODO: BRAND */
}

a:hover{
  text-decoration: none;
  color: #013c80; /* TODO: BRAND */
  cursor: pointer;
}

.navbar-default,
.panel-default .panel-heading,
.panel-default .panel-footer{
  background-image: none;
  color: #013c80; /* TODO: BRAND */
  background-color: #ffffff;
  box-shadow: none;
}

.navbar-login-register{
  color: #ffffff;
}

.login-register a{
  color: #ffffff;
}

/*
§3 - Bootstrap tweaks
~~~~~~~~~~~~~~~~~~~~~
These reset some of the default styling, such as rounded buttons, fields etc. to give us tighter control.
Ideally this would be put in the Bootstrap Theme file.
*/


.btn-default:hover, .btn-default:focus {
    background-color: #000000;
    background-position: 0 -15px;
}


.container{
  max-width: 986px; /* TODO: MAGIC NUMBER */
}

.h1, .h2, .h3, h1, h2, h3{
  margin-top: 0px;
  margin-bottom: 16px;
}

fieldset{
  border: 0px #ffffff solid;
}

.form-control,
.btn{
  border-radius: 0px;
}

.btn{
  color: #ffffff;
  background: #013c80; /* TODO: BRAND */
}

.btn:hover {
  color: #ffffff;
  opacity: 0.5;
  cursor: pointer;
}

.panel-default .panel-heading,
.panel-default .panel-footer{
  border-top-right-radius: 0px;
  border-top-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
  overflow: auto; /* #678 - ensures panel headings and footers 'stretch' around floated elements */
}

hr{
  clear:both;
  margin-top: 16px;
  margin-bottom: 16px;
}

.list-group {
  box-shadow: none;
}

.navbar{
  margin-bottom: 16px;
}

textarea {
  resize: vertical;
}


/* §3.1 - Janrain
~~~~~~~~~~~~~~~~~
*/

.janrainContent[style]{
  width: 100%!important;
  height: auto!important;
  box-sizing: border-box!important;
  padding: 16px!important;
  margin-bottom: 16px!important;
}

.janrainHeader[style]{
  box-sizing: border-box!important;
  width: 100%!important;
  font-family: inherit!important;
  position: static!important;
  height: auto!important;
  padding: 0px!important;
  text-align: left;
  white-space: inherit!important;
}

.janrainHeader div[style]{
  box-sizing: border-box!important;
  width: 100%!important;
  font-family: inherit!important;
  margin-bottom: 8px!important;
  position: static!important;
  height: auto!important;
  left: 0px!important;
  padding: 0px!important;
  text-align: left;
}

#janrainProviderPages[style]{
  position: static!important;
  padding: 0px!important;
  left: 0px!important;
}

.janrainPage{
  display: block!important;
  width: 100%!important;
}

div.janrainPage ul[style]{
  width: 50%;
}

@media(max-width: 728px){
  div.janrainPage ul[style]{
    width: 100%;
  }
}

div.janrainPage li[style]{
  border: 0px #ffffff solid!important;
  width: 100%!important;
}

div.janrainPage li a[style]{
  padding: 0px!important;
  font-family: inherit!important;
  font-size: 16px!important;
}


/* Ensures small images fit the container */
.img-responsive {
   width: 100%; 
}

.search-filters-inner-container .list-group-item:hover {
    background-color: #f5f5f5;
}

/* Stop that bl00dy tracking pixel from putting a gap in at the top of articles */
body > img{
  position: absolute;
}

/*! Lazy Load XT v1.1.0 2016-01-12
 * Creates a 'Fade In' transition effect
 * http://ressio.github.io/lazy-load-xt
 * (C) 2016 RESS.io
 * Licensed under MIT */
.lazy-hidden {
    opacity: 0;
}
.lazy-loaded {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
    opacity: 1;
}

/*
§4 - Attento Stylesheet
~~~~~~~~~~~~~~~~~~
CSS to style the site in keeping with Attento's Designs.
See the Simulator for reference: https://still-harbor-23477.herokuapp.com/
*/

body {
    font-family: "Slabo 13px", sans-serif;
    margin: 0px;
    line-height: 1.3;
}

h1, h2, h3, h4{
    background: transparent;
}

p{
  font-size: 16px;
}

.list-item__title,
.section__title{
  font-family: "Slabo 13px", sans-serif;
}

nav{
  z-index: 10;
}

.header__navigation{
    display: none;
}

.header__navigation.is-visible{
    display: block;
}

.header{

}

.header__navigation-holder {
    text-align: center;
}

.header__navigation-toggle{
    display: inline-block;
}

.header__navigation-snippet{
    display: inline-block;
    padding: 0px;
}

.top-navigation__list{
    list-style: none;
    padding: 0px;
    margin: 0px;
    text-align: left;
}

.top-navigation__list li a{
    padding: 0px;
}

.top-navigation__link {
    text-transform: uppercase;
    text-decoration: none;
    font-family: "Slabo 13px", sans-serif;
    font-size: 16px;
    color: #000000;
    position: relative;
    padding: 0 1rem;
}

.top-navigation__item{
    display: inline-block;
}

.top-navigation__item:hover .sub-navigation__list,
.sub-navigation__list:hover{
    display: block;
    position: absolute;
    background:  #ffffff;
    z-index: 20;
    padding: 10px;
    box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.05);
}

.sub-navigation__list{
    display: none;
    list-style: none;
    padding: 0px;
    background: #ffffff;
}

.sub-navigation__item{
  margin-bottom: 8px;
}

button{
    background: transparent;
    border: 0px #ffffff solid;
    padding: 0px;
}

.top-navigation__item,
button{
    padding: 10px 15px;
  
    font-weight: bold;
}

.navbar-login-register {
  font-size: 14px;
}


/* §4.1 - Navigation: 'all-sections' toggle */

.button.button--nav-toggle{
  
}

.button.button--nav-toggle::after {
    content: '';
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #013c80; /* TODO: BRAND */
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    right: -5px;
}
.button.button--v0:focus {
        outline: 0
}
.button {
    cursor: pointer;
    white-space: nowrap
}
.button:focus {
        outline: 0
}
.button.button--v0 {
    font-size: 11.2px;
    font-size: 0.7rem;
    text-transform: uppercase;
    background: #f9f9f9;
    color: #878787;
    border: 1px #dedede solid;
    line-height: 16px;
    line-height: 1rem;
    letter-spacing: 0.8px;
    letter-spacing: 0.05rem;
    font-weight: 400
}
.button.button--v0__selected {
        background: #ebf5ff
}
.button.button--v0 + .button.button--v0 {
    border-left: 0px;
}
.button.button--v1, .button.button--v2, .button.button--v3 {
    color: white;
    border-radius: 100px;
    border: 0px;
    padding: 0.5rem 3rem;
}

.button.button--nav-toggle {
    color: #013c80; /* TODO: BRAND */
    background: transparent;
    border: 0px;
    text-transform: uppercase;
    font-size: 16px;
    position: relative;
    line-height: 36px;
    padding: 0 10px;
}
.button.button--nav-toggle:hover,
.button.button--nav-toggle.nav-toggle--active {
    color: #122536
}
      
.button.button--nav-toggle:hover::after,
.button.button--nav-toggle.nav-toggle--active::after {
    border-top: 4px solid #122536
}

/*
The Header has three states, signified by three classnames:
state0 - when the window is right at the top of the page
state1 - when the window has scrolled past the Navigation
state2 - when the window has scrolled past the sharing buttons on an article.
*/

header {
  z-index: 20;
  width: 100%;
  box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.05);
  overflow: hidden;
  margin-bottom: 16px; /* #619: tightening up the area around hot topics, restored t0 16px to make calculations for floating nav/leaderboard easuier, and to get Hot Topics back on-grid - GH */
}

/* Desktop only:
   Fix element container heights in the header to minimise jank when scrolling/floating nav and Leaderboard
   (#570, #654)
*/

@media(min-width: 992px){
  /* Fix Leaderboard Ad Container height */
  .header .advert.desktop{
    min-height: 90px;
  }
   /* Fix Header Container height */
  .header .header.state0,
  .header .header.state1 {
    height: 132px; 
  }
}

/* Override bootstrap defaults */

.header__navigation-hamburger {
    margin-right: 0px;
    margin-left: 4px;
    padding: 4px 4px;
    margin-top: 0px;
    margin-bottom: 8px;
}

.masthead {
    margin-bottom: 12px;
}

.masthead__logo{
    height: auto;
    float: left;
}

.small-logo {
  display: block;
  max-width:230px;
  max-height:34px;
  width: auto;
  height: auto;
}

/* Bars in Hamburger button */

.header__navigation-hamburger.navbar-toggle .icon-bar {
    background-color: #404040;
    display: block;
    width: 24px;
    height: 5px;
    border-radius: 1px;
}

/* All states, XS, SM and MD displays */
@media (max-width: 991px) {
    /* Hide 'All Sections' */ .button.button--nav-toggle,
	/* Hide Text-nav       */ .header__navigation-snippet{
		display: none;
	}
}

/*
Header State 0: fixed navigation, when the window is right at the top of the page
*/

.header.state0 .header__navigation-hamburger{
     
}

.header.state0 .header__floating-nav-elements{
  display: none;
}

/* Hide Small masthead  */  header.state0 .masthead__logo{
  display: none; 
}

/*
Header State 1: floating navigation, when the window has scrolled past the Navigation
*/

@keyframes nav-slide-down {
    from {top: -72px;} /* TODO: MAGIC NUMBER */
    to {top: 0px;}
} 

/* #570:
   To improve the performance of floating nav, floating the content of the container
   while fixing the container height in its original position to stop page jerks
*/
header.state1 .header__masthead {
    animation-name: nav-slide-down;
    animation-duration: 0.4s;
    background-color: #ffffff;
    width: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    padding: 5px;
    z-index: 20;
}

header.state1 .masthead {
    margin-bottom: 0px;
}

header.state1 .masthead__logo{
  display: block; 
}

/* Hide Large masthead  */  header.state1 .masthead__full,
/* Hide Sub-nav Drop    */  header.state1 .top-navigation__item:hover .sub-navigation__list,
/* Hide 'All Sections'  */  header.state1 .button.button--nav-toggle{
  display:none;
}

header.state1 .header__navigation-holder{
  height: 40px;
}

header.state1 .header__navigation-holder div{
  margin-top: 0px;
}


/* Floating Nav: Elements that only appear on floating nav */

header.state1 .header__floating-nav-elements{
  float: right;
}

/* Floating Nav: Hamburger menu positioning */

header.state1 .header__navigation-hamburger{
  float: right;
  margin-top: 4px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

header.state1 .header__navigation-holder div{
  margin-top: 0px;
}

/* XS, SM and MD displays */
@media(max-width: 992px){
  .header.state1 .mini-icons{
    float: left
  }
}

/* Navigation: Overlay Menu */

.header__navigation{
  padding: 0px;
  margin-left: -8px;
}

@keyframes overlay-menu-fade-in {
    from {opacity: 0;}
    to {opacity: 1;}
}

.overlay-menu{
    width: 100%; /*  for #665 */
    position: absolute;
    top: 0px;
    z-index: 100;
    background: #ffffff;
    box-shadow: 0px 10px 20px 0px rgba(0,0,0,0.05);
    padding: 20px;
    animation-name: overlay-menu-fade-in;
    animation-duration: 0.4s;
}

@media(min-width: 992px){
  .overlay-menu{
    max-width: 980px;
  }
}

@media(min-width: 728px  ) and (max-width: 991px){
  .overlay-menu{
    max-width: 980px;
  }
}

@media(max-width: 728px){
  .overlay-menu{
    max-width: 728px;
  }
}

.overlay-menu__list,
.overlay-menu-sub-navigation__list
{
  list-style: none;
  padding: 0px;
}

.overlay-menu__section{

}

.overlay-menu__list li{
  
}

.overlay-menu-sub-navigation__list li{
  clear:both;
  padding: 0px 8px;
}

.overlay-menu__header{
    overflow: auto;
    border-bottom: 2px #000000 solid;
}

.overlay-menu__close{
    float: left;
}
.overlay-menu__login{
    float: right;
}

.overlay-menu__close:hover{
    cursor: pointer;
}

.overlay-menu__section{
    border-bottom: 1px #404040 solid;
}

.overlay-menu__footer-link-item {
    background: black;
    padding: 22px;
    display: inline-block;
    border-radius: 5px;
    width: 100%;
    margin: 0 0 15px;
}

.overlay-menu__footer-link-item img {
    max-width: 100%;
}

.overlay-menu__sub-link-item + .overlay-menu__sub-link-item {
    padding-top: 15px;
}

.overlay-menu__sub-link-item {
    color: #7A7A7A;
    font-size: 18px;
    font-family: 'PT Serif', serif;
    line-height: 23px;
}

.overlay-menu__sub-links,
.overlay-menu__footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.overlay-menu__color-4 {
    color: #F5A623;
}

.overlay-menu__color-3 {
    color: #912685;
}

.overlay-menu__color-2 {
    color: #E20019;
}

.overlay-menu__color-1 {
    color: #27B263;
}

.overlay-menu__job-item {

}

.overlay-menu__verticals-item {
    background: #F5F5F5;
    border-radius: 5px;
    text-align: center;
    font-size: 18px;
    padding: 8px 0;
    border: 4px #ffffff solid;
}

.overlay-menu__verticals {

}

.overlay-menu__button {
    display: block;
    float: right;
    background: black;
    border: 0px;
    border-radius: 15px;
    padding: 6px 9px;
    position: relative;
    right: 4px;
    top: 4px;
    cursor: pointer;
}


.overlay-menu__button:hover {
    background: #013c80; /* TODO: BRAND */
}

.overlay-menu__button img {
    display: block;
    width: 10px;
    height: 16px;
}


.overlay-menu__back-link {
    cursor: pointer;
    display: block;
    float: left;
    margin-top: -2px;
    padding: 0px 8px 6px 0px;
    border: 0px;
    background: transparent;
}

.overlay-menu__link {
    text-decoration: none;
    font-size: 18px;
    font-family: 'PT Serif', serif;
    color: black;
    line-height: 36px;
    display: block;
}

.overlay-menu__link:hover {
    color: #013c80;  /* TODO: BRAND */
}

.overlay-menu__list-item {
    position: relative;
}

.overlay-menu__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.overlay-menu__footer {
    padding: 1rem 0;
}

.overlay-menu__section {
    padding: 1rem 0;
    border-bottom: 1px #DADADA solid;
    clear: both;
    overflow: hidden;
}

.overlay-menu__top-link {
    font-size: 18px;
    padding: 1rem 0;
    border-bottom: 1px #DADADA solid;
    font-family: 'PT Serif', serif;
    line-height: 32px;
}

.overlay-menu__top-link:hover {
    color: #013c80; /* TODO: BRAND */
}

.overlay-menu__top-link .masthead__logo-link{
  margin: 8px;
  display: inline-block;
}

.overlay-menu__login {
    margin-left: auto;
}

.overlay-menu__login,
.overlay-menu__close {
    font-size: 14px;
    color: black;
    font-family: "Slabo 13px", sans-serif;
}

.overlay-menu__header {
    border-bottom: 2px black solid;
    padding: 1rem 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
       -ms-flex-direction: row;
           flex-direction: row;
}

.overlay-menu__login {
    line-height: 17px;
}

.overlay-menu__login img {
    float: right;
    margin-left: 10px;
}

.overlay-menu__close {
    line-height: 17px;
}

.overlay-menu__close img {
    float: left;
    margin-right: 10px;
}

.overlay-menu__close:hover {
    color: #013c80; /*TODO: brand */
    cursor: pointer;
}

.overlay-menu .container {
    background: white;
}

.overlay-menu {
    padding: 0 30px 1rem;
}

.overlay-menu a {
    color: black;
    text-decoration: none;
}

.overlay-menu a:hover {
    color: #013c80; /* TODO: BRAND */
}

@media screen and (min-width: 20rem) {
    .overlay-menu__job-item {
        width: 49%;
        margin: 0 0.5% 10px;
    }
}

@media screen and (min-width: 46.8rem) {
    .overlay-menu__footer-link-item {
        width: 49%;
        margin: 0 0.5%;
    }
    .overlay-menu__footer-links {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        margin: 0 -0.5%;
    }
    .overlay-menu__job-item {
        width: 24%;
        margin: 0 0.5%;
    }

    .overlay-menu__main-links {
        -webkit-column-count: 3;
                column-count: 3;
        -webkit-column-rule: 1px outset #DADADA;
                column-rule: 1px outset #DADADA;
        -webkit-column-gap: 1rem;
                column-gap: 1rem;
    }
    .overlay-menu {
    }
    .overlay-menu__section {
            padding: 1rem 0;
    }
}

/* Navigation: showing/hiding sub navigation */

.overlay-menu-sub-navigation__list,
.overlay-menu__top-link--all-sections,
.overlay-menu--display-subnav .overlay-menu__top-link--home,
.overlay-menu--display-subnav .overlay-menu__item,
.overlay-menu--display-subnav .overlay-menu__button{
  display:none;
}

.overlay-menu--display-subnav .overlay-menu__item.focus,
.overlay-menu--display-subnav .overlay-menu__item.focus .overlay-menu-sub-navigation__list,
.overlay-menu--display-subnav .overlay-menu__top-link--all-sections{
  display:block;
}

.overlay-menu--display-subnav .overlay-menu__item.focus .top-navigation__link{
  font-weight: bold;
  font-size: 18px;
}

.overlay-menu__item{          
    text-decoration: none;
    font-size: 18px;
    font-family: "Slabo 13px", sans-serif;
    color: #000;
    line-height: 36px;
    display: block;
}

/* Navigation: overlay menu Verticals links (Jobs24 etc.) */

.overlay-menu .verticals__item{
  height: 100%;
  border: 1px #ffffff solid;
  text-align: center;
  background: #f0f0f0;
  padding: 8px;
}
   
/*
§5 - Teaser styles:
 --v0   Onesey, full-width image
 --v1   Onesey, Half-width image
 --v2   Twosey
 --v3   Threesey
 --v4   Foursey
 --v4H  Foursey, headline only
 --vL   List-style teasers
*/

.list--v0 .list-item,
.list--v1 .list-item,
.list--v2 .list-item,
.list--v3 .list-item,
.list--v4 .list-item,
.list--v4H .list-item {
  margin-bottom: 20px;
}

.list--vL .list-item{
  margin-bottom: 10px;
}

/* §5.1 - Teasers: titles and headings */

.list-item__title{
  font-weight: bold;
  letter-spacing: -0.01em;
}

.list--v1 .list-item__title {
   font-size: 32px;
   line-height: 1.2;
}
  
.list--v2 .list-item__title,
.list--v3 .list-item__title,
.list--v4 .list-item__title{
    font-size: 20px;
    line-height: 1.3;
}

.list--v4H .list-item__title {
    border-top: 1px #dadada solid; /* I hate this - GH */
    padding-top: 15px;
    font-size: 16px;
    line-height: 1.3;
}
                                
.list--vL .list-item__title{
    font-size: 20px;
    line-height: 1.3;
}

.list--vL hr{
  margin-top: 0px;
}

@media (max-width: 1024px) {  
    .list--v1 .list-item__title,
	.list--v2 .list-item__title,
	.list--v3 .list-item__title,
	.list--v4 .list-item__title {
		font-size:19px;      
	}
}

/* §5.2 - Teasers: Images */
           
/* Crops all images to required aspect ratio: 4:3 ratio = 75%, 16:9 ratio 56.25%*/
.list-item__image-inner{
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-bottom: 66.66%;
  height: 0px;
  margin-bottom: 15px;
  background: #f0f0f0; 
}

/* Usual Option: Fills width of image container and centres image vertically.
   Crops Portrait images
*/
.list-item__image-inner img{
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}

/* Alternative option: Fills height of image container and centres image horizontally.
   Does not crop Portrait images, but leaves gaps either side.
*/
/*
.list-item__image-inner img{
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  height: 100%;
  width: auto;
}
*/ 

/* §5.3 - Teasers: Status Labels */ 

.list-item__status-label {
  font-size: 0.7em;
  color: #ffffff;
  padding: 0.2em 0.4em 0.1em 0.4em; /* Switched to 'em' here to keep proportional with font size */
  background-color: red; /* TODO: BRAND, Red */
}
/*
Status Labels: mobile and smaller teasers include the Status Label inside the <h2>,
and so they should appear flush and aligned with the text. As they're slightly taller, a small nudge 'up' is required.
*/
h2 .list-item__status-label{
  position: relative;
  margin-right: 0.1em;
  top: -0.1em;
}
.list-item__status-label.list-item__status-label--new{

}
.list-item__status-label.list-item__status-label--live{

}
.list-item__status-label.list-item__status-label--updated  {

} 
.list-item__status-label.list-item__status-label--breaking  {

}
.list-item__status-label.list-item__status-label--exclusive {

}
.list-item__status-label.list-item__status-label--blog{

}
.list-item__status-label.list-item__status-label--poll{

}
.list-item__status-label.list-item__status-label--win{

}
.list-item__status-label.list-item__status-label--gallery   {

}
.list-item__status-label.list-item__status-label--video  {

}   
.list-item__status-label.list-item__status-label--opinion   {

}
.list-item__status-label.list-item__status-label--tell-us    {

}
.list-item__status-label.list-item__status-label--joinin    {

}
.list-item__status-label.list-item__status-label--sponsored{

}

/* §5.4 - Teasers: Lead Text (AKA 'Stand First', 'Lead Paragraph') */
.list-item__lead {
    line-height: 1.3;
}


/* §6 - Page Section Titles */

.section-title {
    clear: both;
}

.section-title.section-title--v1,
.section-title.section-title--v2 {
  	font-weight: bold;
    font-family: "Slabo 13px", sans-serif;
    text-transform: uppercase;
    margin: 0;
    padding: 16px 0 0;
    border-top: 2px black solid;
}

.section-title.section-title--v1 {
    font-size: 30px;
    margin-bottom: 16px;
}

.section-title.section-title--v2 {
    font-size: 20px;
    margin-bottom: 16px;
}

.section-title.section-title--v3 {
    font-family: "Slabo 13px", sans-serif;
    text-transform: uppercase;
    margin: 0;
    padding: 8px 0 0;
    font-size: 16px;
}

.section-title.section-title--v4 {
    font-family: "Slabo 13px", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
    padding: 16px 0 0;
    padding: 1rem 0 0;
    font-size: 30px;
}

/* §7 - Article View */

.article__headline{
  font-size: 40px;
  font-family: "Slabo 13px", sans-serif;
  font-weight: bold;
  line-height: 1.3em;
  color:#000000;
}

@media only screen and (max-width : 768px) {
.article__headline{
  font-size: 24px;
  font-family: "Slabo 13px", sans-serif;
  font-weight: bold;
  line-height: 1.3em;
  color:#000000;
}
}


.article__meta{

}

.article__journalist-meta,
.article__published-meta{
  list-style: none;
  padding: 0px;
  clear: both;
}

.article__published-meta {
    color: #9b9b9b;
}

.article__meta-item{
  float: left;
  margin-right: 10px;
  margin-bottom: 16px;
}

.article__social{
  text-align: right;
}

.social__overflow::before{
  content: "";
  border: 16px solid;
  border-color: transparent transparent black;
  position: absolute;
  top: -32px;
  right: 20px;
}

.social__overflow{
  border: 1px black solid;
  width: calc(160px + 2px); 
  padding: 16px;
  right: -22px;
  top: 40px;
  position: absolute;
  background: rgba(0,0,0,0.8);
  box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.5);
}

/* §7.1 - Article View: Top image */

.article__image{
  margin-bottom: 16px;
}

.article__image-caption {
    color: #9b9b9b;
    padding-bottom: 20px;
    border-bottom: 1px solid #dadada;
    margin-bottom: 20px;
}

/* §7.2 - Article View: Lead */

.article__lead{
  display: block;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.4;
}


/* §7.3 - Article View: Legacy markup for in-body images and image captions */

.object-465{
	/* ".object-465" is a hardcoded classname for Images and objects in Articles. */
}

.object-465 img {
    margin-bottom: 16px;
    width: 100%;
}

.object-465 em {
    display: block;
    margin-bottom: 16px;
    color: #808080;
}

/* §7.4 - Article View: Paragraph */

.article__body p{
    line-height: 1.3;
}

.article__body a{
  color: #0565D0;
}

.article__body a:hover{
  text-decoration: underline;
}

/* §7.5 - Article View: Topic Tags */

.article__topics {
    margin-bottom: 16px;
    display: block;
    overflow: auto;
}

.article__topic-category{
    list-style: none;
    padding: 0px;
    display: block;
    width: auto;
    float: left;
} 

.article__topic-tag{
    display: inline;
    float: left;
    margin-bottom: 4px;
}
.article__topic-tag a{
  background: #000000;
  color: #ffffff;
  padding: 5px 16px 5px 5px;
  display: inline-block;
  width: auto;
  margin-right: 16px;
  position: relative;
  border-radius: 0px 10px 10px 0px;
}

.article__topic-tag a:after{
  content: " ";
  width: 8px;
  height: 8px;
  display: block;
  background: #ffffff;
  border-radius: 50%;
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
}

/*
§7.6 - Article View: Article Media
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Articles often include Videos and Galleries etc.
This section contains styling for the general 'Lightbox' and modal mpopup that contains the media, as well as
styling for the Gelleries (including thumbnails) and videos (including the 'floating' version).
*/


/* Article Media: Lightbox */

.article-media__lightbox-name {
    font-size: 32px;
    font-weight: normal;
    margin: 0px 0px 8px 0px;
    font-family: PT Serif,serif;
    color: #ffffff;
}

.article-media__lightbox-controls{
	margin-bottom: 16px;
	overflow: auto;
}

.article-media__lightbox-controls a,
.article-media__lightbox-controls--prev,
.article-media__lightbox-controls--next,
.article-media__lightbox-controls--close {
    font-weight: normal;
    font-size: 16px;
    font-family: "PT serif";
    text-shadow: none;
}

.article-media__lightbox .modal-dialogue,
.article-media__lightbox .modal-content,
.article-media__lightbox .modal-header,
.article-media__lightbox .modal-footer,
.article-media__lightbox a,
.article-media__lightbox button.close{
	border: 0px #ffffff solid;
	border-radius: 0px;
	background: black;
	color: #ffffff;
	opacity: 1;
}

.lightbox.modal-content{
	background-color: black;
	color: white;
}

.lightbox .modal-header{
	border-bottom: 0px #000000 solid;
}

.lightbox .modal-footer{
	border-top: 0px #000000 solid;
}

.lightbox .article-media__object{
	width: 100%;
	height: auto;
}

/* Article Media: Galleries */

.gallery__thumbnails{
  background: black;
  padding: 16px;
  overflow: hidden;
  margin-bottom: 16px;
}

.gallery__thumbnails-name,
.gallery__lightbox-name {
    font-size: 32px;
    font-weight: normal;
    margin: 0px 0px 8px 0px;
    font-family: PT Serif,serif;
    color: #ffffff;
}

.gallery__thumbnails .item{
	height: 200px;
	overflow: hidden;
}

.gallery__thumbnails .col-md-4{
	height: 200px;
	position: relative;
}

.gallery__thumbnails .item img{
	padding: 8px;
    position: absolute;					/* Vertical Centering of Images */
	left: 50%;							/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    top: 50%;							/* Left and Top position relative to the container */
    transform: translate(-50%, -50%);	/* Transform: translate positions relative to the element itself. */
}

.gallery__thumbnails-controls{
	margin-bottom: 8px;
}

.gallery__thumbnails-controls a{
	color: white;
}

/* Article Media: Gallery Lightbox */

.gallery__lightbox-controls {
    margin-bottom: 16px;	
}

.gallery__lightbox-controls a,
.gallery__lightbox-controls--prev,
.gallery__lightbox-controls--next,
.gallery__lightbox-controls--close {
    font-weight: normal;
    font-size: 16px;
    font-family: "PT serif";
    text-shadow: none;
}

.gallery__lightbox .modal-dialogue,
.gallery__lightbox .modal-content,
.gallery__lightbox .modal-header,
.gallery__lightbox .modal-footer,
.gallery__lightbox a,
.gallery__lightbox button.close{
	border: 0px #ffffff solid;
	border-radius: 0px;
	background: black;
	color: #ffffff;
	opacity: 1;
}

.gallery__lightbox-image{
	margin-bottom: 16px;
}

.caption{
	color: #a0a0a0;
	font-family: 'PT Sans', sans-serif;
	font-size: 16px;
}

/* Article Media: Youtube Videos */

.article-media--video {
   display: block;
   position: relative;
   padding: 0 0 56.25% 0;
   margin-bottom: 16px;
   background: #000000;
}
.article-media--video .article-media__object {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
@media screen and (min-width: 1024px){
	.article-media__object{
	  transition: 	width .4s ease-in-out,
					height .4s ease-in-out,
					transform .4s ease-in-out;
	}
	#js-article-media {
	  transition: 	width .4s ease-in-out,
					height .4s ease-in-out,
                    position .4s ease-in-out,
					transform .4s ease-in-out;
	}
	#js-article-media.is-sticky {
		position: fixed;
		bottom: 0px;
		right: 0px;
		z-index: 20;
		
        height: auto;
        padding: 16px;
        width: 344px; /* width =  left padding + video width + video margin-right + right-padding */
		
		background: rgba(0,0,0,0.9);
		box-shadow: 0px 10px 20px -10px rgba(0,0,0,0.05)
	}
	#js-article-media.is-sticky .article-media__object{
		width: 280px;
		float: right;
		margin-right: 32px;
        margin-bottom: 16px;
		position: relative;
	}

	#js-article-media.is-sticky .article-media__name{
		color: #ffffff;
        clear: both;
		margin-right: 32px;
        font-size: 16px;
        font-weight: normal; /* TODO: BE change to use span instead of H2 */ 
	}
}
@media screen and (min-width: 1120px) {
   #js-article-video.is-sticky {
      transform: translateX(-80%);
   }
}
@media screen and (min-width: 1300px) {
   #js-article-video.is-sticky {
      transform: translateX(-115%);
   }
}

.article-media__floating-controls a{
color: #ffffff;
    }

.article-media__floating-controls--close{
    position: absolute;
    top: 16px;
    right: 16px;
    color: transparent;
}

.article-media__floating-controls--close:hover{
    position: absolute;
    top: 16px;
    right: 16px;
    color: white;
    cursor: pointer;
}

/*
§7.7 - Article View: Related Articles Images
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Attento's design has them circular, however the aspect ratio is likely to be Landscape, so we can't use
Bootstrap's .img-circle helper class because that just delivers an ellipse.
Instead we have to apply border-radius: 50% to the containing div, and enlarge and centre the child image behind it, assuming a 14:10 aspect ratio.
*/

.list-item__image--related {
  position: relative;
  width: 120px;
  height: 120px;
  overflow: hidden;
  border-radius: 50%;
}

.list-item__image--related img{
    width: 140%;                        /* Assumes a 14:10 aspect ratio..*/
    position: absolute;					/* Vertical Centering of Images */
	left: 50%;							/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
    top: 50%;							/* Left and Top position relative to the container */
    transform: translate(-50%, -50%);	/* Transform: translate positions relative to the element itself. */
}

/* §8 - Social Icons */

.social__image {
        width: 60%;
        height: 60%;
        position: absolute;
        left: 15px;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
}
.social__icon-cta {
        display: block;
        line-height: 30px;
        padding-right: 10px;
        color: white;
        font-size: 12px;
        font-weight: bold;
        letter-spacing: 0.02em;
}
.social__icon-count {
        position: absolute;
        line-height: 30px;
        right: 33px;
        font-size: 12px;
        font-weight: 800;
}
.social {
    margin: 0 -4px;
    padding-left: 25px;
}
.social a {
        color: inherit;
}
.social__icon {
    padding-left: 30px;
    height: 30px;
    width: 30px;
    border-radius: 15px;
    margin: 0 5px;
    position: relative;
    background: #013c80;
}
.social__icon:not(.collapse) {
    display: inline-block;
} 
.social__icon:hover{
    background: #443c92;
    cursor: pointer;
}
.social__icon--overflow {
    background-color: #69a22f;
}
.social__icon--email {
    background-color: #000000;
}
.social__icon--twitter {
     background-color: #3cb6eb;
}
.social__icon--facebook {
     background-color: #3c5ca7;
}
.social__icon--google {
      background-color: #dd4b39;
}
.social__icon--pinterest {
      background-color: #bd081c;
}
.social__icon--reddit {
      background-color: #ff4500;
}
.social__icon--whatsapp {
      background-color: #075e54;
}
.social__icon--sms {
      background-color: #bd081c;
}

/* §9 - Disqus comments */

#comments,
.disqus-comments{
	margin-bottom: 20px;
}
 
/* §10 - Full-width breakout */

.breakout{
    clear: both;
}
.breakout--commercial{
    background: #f2f2f2;
}
.breakout--comments{
    background: #f2f2f2;
    padding: 16px;
}
.breakout--footer{
    background: #333333;
}

.breakout--comments #comments,
.breakout__container{
    /* Restricts width of Breakout contents to that of the Page width */
  	/* width: 970px; TODO: ABSTRACT THIS MAGIC NUMBER */
  	margin: auto;
}

@media only screen and (max-width : 768px) {
    .breakout {
      width: 100%;
      margin-bottom: 16px;
    }
}

@media only screen and (min-width : 768px) {
    .breakout {
      /* margin: 0 calc(384px - 50vw);  TODO: ABSTRACT THIS MAGIC NUMBER */
      margin-bottom: 16px;
    }
}

@media screen and (min-width: 986px) {
    .breakout {
      /* margin: 0 calc(493px - 50vw); TODO: ABSTRACT THIS MAGIC NUMBER */
      /* padding: 16px; */
      margin-bottom: 16px;
    }
}
  
/*  §11 - Newsletter */

.newsletter__form,
.subscription-widget__form,
.subscription-widget {
        display: none;
}
.newsletter__row + .newsletter__row {
        margin-top: 20px;
}
.newsletter__submit {
        color: white;
        background-color: #1a98d6;  /* Brand */
        border-radius: 100px;
        border: 0px;
        padding: 5px 15px;
}
.newsletter__label {
        color: #959595;
        font-size: 15px;
        font-style: italic;
        padding-left: 20px;
        display: block;
}
.newsletter__intro {
        margin-bottom: 20px;
}
.newsletter__input {
        background: transparent;
        display: block;
        width: 100%;
        border-width: 0 0 1px;
        border-bottom: 1px #959595 solid;
        font-size: 15px;
        padding-bottom: 5px;
}
.newsletter__title {
        border-bottom: 2px #1a98d6 solid; /* Brand */
        padding-bottom: 5px;
        font-size: 20px;
        margin: 0 0 10px;
        font-weight: 400;
}
.newsletter__title strong {
        color: #1a98d6;
}

.newsletter {
    z-index: 10;
    position: relative;
    background-color: #f2f2f2;
    padding: 10px 10px;
    font-family: Arial;
    max-width: 365px;
    margin: 0 auto 16px;
}
.newsletter__check {
    border: 1px #959595 solid;
    border-radius: 0px;
    position: absolute;
}
@media screen and (min-width: 630px) {
    .newsletter__submit--mobile {
        /* display: none; removed bootstrap markup used instead*/ 
    }

    .newsletter__form,
    .subscription-widget,
    .subscription-widget__form {
        display: block;
     }

     .subscription-widget{
       background: white;
       margin-bottom: 16px;
       padding: 0px 0px 8px 0px;
       box-shadow: 1px 6px 24px -16px rgba(0,0,0,0.5);
       overflow: auto;
     }

     .subscription-widget form{
       margin-bottom: 8px;
     }

     .subscription-widget button{

       float: right;
       margin-bottom: 8px;
     }
     .subscription-widget p{
       float: right;
       clear: both
     }

     .subscription-widget h4{
       font-size: 28px;
       font-weight: bold;
        text-transform: uppercase;
        margin: 0;
        padding: 16px 0 0;
        border-top: 2px black solid;
     }
}

/* Hides the Click Terms and Conditions checkbox - this is intentional */

.subscription-widget .sub-terms-cond {
    overflow: hidden;
    text-indent: -200%;
} 

/* §12 - Digital-Edition */


.button--eedition {
    background-color: #ff0000;
}

.digital-edition:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
}
.digital-edition__title {
        font-size: 16.25px;
        font-weight: 500;
        margin: 0 0 5px;
}
.digital-edition__intro {
        margin: 0 0 10px;
}
.digital-edition__copy {
        text-align: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        padding: 20px;
}
.digital-edition {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    font-family: Arial;
    max-width: 345px;
    margin: 0 auto;
    padding: 0 0 20px;
    z-index: 10;
    text-align: center
}
.digital-edition__figure {
        display: none
}
@media screen and (min-width: 468px) {
    .digital-edition {

    }
    .digital-edition__figure {
            display: block
    }
}
@media screen and (min-width: 630px) {
    .digital-edition {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
        max-width: 445px;
    }
}

/* §13 - Verticals Nav */

.verticals__item a span{
  font-weight: bold;
}
.verticals__item--jobs24 span{
    color: #31b166;
}
.verticals__item--homes24 span {
    color: #E20019;
}
.verticals__item--drive24 span  {
    color: #912685;
}
.verticals__item--mydate24 span  {
    color: #ffaaff;
}
.verticals__item--planningfinder span {
    color: #469e4f;
}
.verticals__item--localsearch span {
   color: #6e2085;
}


.verticals-carousel{
	height: 160px;
  margin-bottom: 16px;
}

.verticals-controls{
	position: absolute;
	right: 0px;
	z-index: 20;
}

.verticals-item{
  height: 160px;
  display: block;
}
    
.verticals-item__intro{
    display: block;
  
}
.verticals-btn{
    color: white;
    border-radius: 100px;
    border: 0px;
    padding: 0.5rem 3rem;
    position: absolute;
    bottom: 0px;
}
.verticals-btn--jobs24 {
    background-color: #31b166;
}
.verticals-btn--homes24 {
    background-color: #E20019;
}
.verticals-btn--drive24  {
    background-color: #912685;
}
.verticals-btn--mydate24  {
    background-color: #ffaaff;
}
.verticals-btn--planningfinder {
    background-color: #469e4f;
}
.verticals-btn--localsearch {
   background-color: #6e2085;
}

.verticals-btn--red {
   background-color: #ff0000;
}

/* §15 - Masthead social buttons */

.social-buttons-container {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    width: auto;
    float: right;
}
.social-button {
  display: inline-block;
  text-indent: -9999px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right:10px;
}

.social-button-twitter-icon {
  background: url(/polopoly_fs/7.761425.1550228708!/twitter-icon.svg);
  background-size: 30px 30px;
  background-position:center;	
  background-color:#1da1f2;
}

.social-button-facebook-icon { 
  background: url(/polopoly_fs/7.761425.1550228708!/facebook-icon.svg);
  background-size: 30px 30px;
  background-position:center;	
  background-color:#4965b1;
}
  
.social-button-youtube-icon {
  background: url(/polopoly_fs/7.761425.1550228708!/youtube-icon.svg);
  background-size: 30px 30px;
  background-position:center;	
  background-color:#ff0000;
}

.social-button-google-icon {
  background: url(/polopoly_fs/7.761425.1550228708!/google-plus-icon.svg);
  background-size: 30px 30px;
  background-position:center;	
  background-color:#dc4a38;
}

.social-button-search-icon {
  background: url(/polopoly_fs/7.761425.1550228708!/search-icon.svg);
  background-size: 30px 30px;
  background-position:center;	
  background-color:#000000;
}

.social-button-twitter-icon:hover,
.social-button-facebook-icon:hover,
.social-button-youtube-icon:hover,
.social-button-google-icon:hover,
.social-button-search-icon:hover {
	 background-color:#666666;
	 
}


/* §16 - Social mini icons */

.header__mini-icons {
    transform: scale(0.7);
    float: left;
}

.state0 .header__mini-icons {
    display: none;
}

/* Hides statistic image */

.p-logging {
    position:absolute; 
}          

/* §17 - Footer Styles */

.breakout--footer p {
	color:#ffffff;
}

.breakout--footer a {
	color:#ffffff;
}

.breakout--footer h3 {
	color:#ffffff;
}

.breakout--footer .list-group-item{
	background-color:#333333;
}

.breakout--footer .list-group-item a {
    color: #ffffff;
}

.breakout--footer .social-button {
 /* removed styles */
}
  
.breakout--footer {
	margin-bottom:0px;    
}

/*
§18 - Advert Elements
~~~~~~~~~~~~~~~~~~~~~
Governs the positioning of Advert elements relative to their containing <div>
*/

.advert.mpu{
    width: 300px;
    margin: 0px auto 16px;
}

/* Note: Browsers use 32bit integer +2147483647 to -2147483647 */

.sticky-leaderboard {
  z-index: 9;
}

/* Centre smaller Leaderboard advert */
#ad-slot-lb-desktop-tablet-mobile {
    text-align: center;
}

/* Centre Planningfinder MPU */

#counciladvertising-mpu{
 width: 300px;
 overflow: hidden;
 margin: auto; 
}


/*
§18 - e-edition header promo
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Something something comment something.
*/


.e-edition::after {
    content: '';
    display: block;
    width: 150px;
    height: 81px;
    background-image:  url('/polopoly_fs/7.761425.1550228708!/e-edition-bg.png');
    position: absolute;
    top: -15px;
    left: -32px;
}

.e-edition {
    display: block;
    position: absolute;
    width: 230px;
    right: 40px;
  
}

.e-edition span.e-edition-text {
    position: absolute;
    right: 0;
    width: 125px;
    z-index: 1;
    color: #333; 
    text-decoration: none;
}

.e-edition {
    position: absolute;
    top: 18px;
}

.transform-overflow img {
    -moz-transform: rotateY(-13deg);
    -webkit-transform: rotateY(-13deg);
    transform: rotateY(-13deg);
    width: 80px;
    display: block;
}

.transform-overflow {
    display: block;
    perspective: 100px;
    -webkit-perspective: 100px;
    perspective-origin: 50% 75%;
    width: 200px;
}
.transform {
    max-height: 75px;
    overflow: hidden;
    padding-top: 10px;
    margin-top: -10px;	
}

.e-edition-container {
	position: relative;
}

.other-pages .list-group-item {
  border:none;
}

/*
§20 - Verticals Carousel
~~~~~~~~~~~~~~~~~~~~~~~~

.verticals-carousel{
 
	
}

.verticals-controls{
	position: absolute;
	right: 0px;
	z-index: 100;
}
*/

/*

§21 - Forms
~~~~~~~~~~~
*/

/* Terms checkbox */

#frm-agree-terms {
    cursor: pointer;
}

/* Bug 995 - Tell us a story terms and conditions hyperlink */
#tellusaboutastory a{
  color: #0565D0;
}

#tellusaboutastory a:hover{
  text-decoration: underline;
}

/* Contact Us Recaptcha Alignment */
@media (min-width: 993px) {
  .get-in-touch .g-recaptcha{
    margin: 0px 0px 0px 332px;
  }

  .get-in-touch .btn.btn-default{
    margin: 8px;
    border: 0px #ffffff solid;
  } 
} 


/* Social Floating Icons */
 

.state1 .social-button.social-button-facebook-icon {
  background-size: 40px 40px;
  width: 40px;
  height: 40px;
}

.state1 .social-button.social-button-twitter-icon {
  background-size: 40px 40px;
  width: 40px;
  height: 40px;
}

.state1 .social-button.social-button-google-icon {
  background-size: 40px 40px;
  width: 40px;
  height: 40px;
}


/* Desktop */


@media (min-width: 768px) {

  .state0 .social-button.social-button-facebook-icon {
    background-size: 40px 40px;
    width: 40px;
    height: 40px;
  }
  .state0 .social-button.social-button-twitter-icon {
    background-size: 40px 40px;
    width: 40px;
    height: 40px;
  }
  
  .state0 .social-button.social-button-google-icon {
    background-size: 40px 40px;
    width: 40px;
    height: 40px;
  }
  
  
  .state0 .social-button.social-button-youtube-icon {
    background-size: 40px 40px;
    width: 40px;
    height: 40px;
  }
  
  .state0 .social-button.social-button-search-icon {
    background-size: 40px 40px;
    width: 40px;
    height: 40px;
  }

}


/*
§ℵ - Highly specific fixes
~~~~~~~~~~~~~~~~~~~~~~~~~~
Section for one-offs.
Please clearly label the page/element for these, and what the code is intended to do.
*/

/* Weather Widget on Desktop */

@media screen and (min-width:481px){
  .weather-five{
    width: 20%;
   }
  .weather-label{
    display: block;
    width: 50%;
    float: left;
    font-weight: bold;
  }
  .weather-data{
    display: block;
    width: 50%;
    float: right;
  }
}

/* Things to do, Line Up Element, fixing z-index #748 */
#line-up-wrapper {
    /* Hacky fix to fix z-index issue with LineUp widget.
       Exploits little-known property of Opacity to affect z-index context.
    */
    opacity: 0.99; 
}

/* Login and Register form: ensuring Janrain header doesn't sit on top of login button #798 */

form#login{
    overflow:auto;
    margin-bottom: 16px;
}

.password-reminder{
  display: none;
}

/* Bug 649 - Tell us about an event - start / end times - hover pop ups */
#startTimeHrs.small,
#startTimeMins.small{
    font-size: 100%;
}

/* Bug 731 - ajax autocomplete not firing on events submission page */

.ac_results{
  background-color: white;
  border: 1px #cccccc solid;
}

.ac_results ul{
  list-style: none;
  padding: 0px;
}

.ac_results ul li{
  padding: 8px;
}

.ac_results ul li:hover{
  cursor: pointer;
  background: #cccccc;
  color: #ffffff;
}

/* Bug 684 - Read the paper online - in-page links not aligned */
.inpage-anchor{
  display: block;
  position: relative;
  top: -300px;
}

/* Bug 682 - Missing 'Help is on its way' box */
.user-forgotpassword .password-reminder{
  display: block;
}

/* Bug 794 - Send us a story - tablet mode - can't click in fields */
#tellusaboutastory .row{
  clear:both;
}

/* Bug 761 - Search - article queues on mobiles */
body.search .teaser-image img{
  width: 100%;
}

/*
§Print - Print styling
~~~~~~~~~~~~~~~~~~~~~~~~~~
Section for Print.
Use this for hiding social sharing Icons etc.
*/
@media print {

  a:link:after, a:visited:after {
    content: "";
  }
  
  .navbar,
  .advert,
  .commercial-nav-container,
  .social-buttons-container,
  .article__social,
  .header__navigation-holder,
  .localsearchwidget,
  .subscription-widget,
  .verticals-carousel,
  .newsletter-sign-up,
  .breakout,
  .footer
  {
    display:none;
  }

  img{
    clear: both;
    position: relative;
  }
}