/*
    Dave - Dara O'Briain Puzzles (Brand Page Skin)
    -----------------------------------------------------------------
    - Background Image is set in the pseudo element 'body:before'
    - Background Gradient - default image slice already applied to body
 */


/* Re-brand Updates */


#logo a {
    background: url("//s3-eu-west-1.amazonaws.com/uktv-refresh/adman_assets/img/logo-black.png") repeat scroll 0 0 / 132px 69px rgba(0, 0, 0, 0);
    height: 69px;
}

@media (min-width: 800px) {

    #logo a {
        background: url("//s3-eu-west-1.amazonaws.com/uktv-refresh/adman_assets/img/logo-black.png");
        background-size: 215px 110px;
        height: 110px;
    }

}


/* Hide brand page image, but preserve its aspect ratio */

body figure.brand-hero img {
    visibility: hidden;
}

/* Update breadcrumb colours (if needed - usually if the background image features white) */

header.hub-title-box .hub-title {
    background: #000000;
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
    color: #FFFFFF;
    display: inline-block;
    padding: 4px 8px;
}

header.hub-title-box .hub-title a {
    color: #ffffff;
}

.breadcrumbs ol {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
    color: #FFFFFF;
    display: inline-block;
    margin-bottom: 20px;
    padding: 4px 8px;
}

.breadcrumbs ol li a {
    color: #ffffff;
}

.breadcrumbs ol li.active {
    color: #ffffff;
}

.breadcrumbs ol li .chevron {
    color: #ffffff;
}

/* Ensure TX and preview info can be seen */
/*
#sidebar .next-on-tv.no-tabbed-title .widget-title, .next-on-tv .series-ep, .next-on-tv .ep-title {
    color: #ffffff !important;
}
*/
/* Override existing backgrounds and set up new ones*/

body {
    background: none;
    background-color: #1c1c1c !important;
    background-image: url('//s3-eu-west-1.amazonaws.com/uktv-refresh/adman_assets/img/dave-dara-obriain-brand-mobile-gradient.jpg') !important;
}
body:before {
    background: none;
    background-color: #1c1c1c !important;
    background-image: none;
    background-repeat: no-repeat;
    background-image: url('//s3-eu-west-1.amazonaws.com/uktv-refresh/adman_assets/img/dave-dara-obriain-brand-mobile.jpg') !important;
    height: 700px;
}
@media (min-width: 600px) {
    body {
        background-image: url('//s3-eu-west-1.amazonaws.com/uktv-refresh/adman_assets/img/dave-dara-obriain-brand-tablet-gradient.jpg') !important;
    }
    body:before {
        background-image: none;
        background-image: url('//s3-eu-west-1.amazonaws.com/uktv-refresh/adman_assets/img/dave-dara-obriain-brand-tablet.jpg') !important;
        height: 1225px;
    }
}
@media (min-width: 800px) {
    body {
        background-image: url('//s3-eu-west-1.amazonaws.com/uktv-refresh/adman_assets/img/dave-dara-obriain-brand-desktop-gradient.jpg') !important;
    }
    body:before {
        background-image: none;
        background-image: url('//s3-eu-west-1.amazonaws.com/uktv-refresh/adman_assets/img/dave-dara-obriain-brand-desktop.jpg') !important;
        height: 1225px;
    }
}


/*
 *  Episode Guide Moved down to keep image in focus
 */
@media (min-width: 1000px) {
    #episode-guide {
        margin-top: 390px;
    }
}


/*
    Positioning Breakpoints
    -----------------------
    Positioning the background is set across multiple media
    queries to keep it looking good and in the right place:
 */

body.cookie-notice:before   { margin-top: 30px; }
body:before                 { margin-top: 0px; }

/*
@media (min-width: 480px) {
    body.cookie-notice:before   { margin-top: 55px; }
    body:before                 { margin-top: 25px; }
}

@media (min-width: 600px) {
    body.cookie-notice:before   { margin-top: 50px; }
    body:before                 { margin-top: 20px; }
}

@media (min-width: 700px) {
    body.cookie-notice:before   { margin-top: 50px; }
    body:before                 { margin-top: 20px; }
}

@media (min-width: 740px) {
    body.cookie-notice:before   { margin-top: 150px; }
    body:before                 { margin-top: 120px; }
}

@media (min-width: 800px) {
    body.cookie-notice:before   { margin-top: 130px; }
    body:before                 { margin-top: 110px; }
}

@media (min-width: 960px) {
    body.cookie-notice:before   { margin-top: 130px; }
    body:before                 { margin-top: 110px; }
}

@media (min-width: 1024px) {
    body.cookie-notice:before   { margin-top: 60px; }
    body:before                 { margin-top: 30px; }
}
*/