/*
   Style Over-Ride file. Put/edit CSS styles in here that are specific to a customer.
   Version 1-Feb-2017.

   WARNING - try not to add styles that will be applied to article contents,
   or else customers will get confused if they try to change colours/styles
   in an article but see no change on their screen.

   All the styles already in here are OK to change. */



/* ############ Size of header logo icon/image */
header .logo-icon img
{
    width:  30px !important; /* <<< mobile logo width */
    height: auto !important;
}
@media(min-width:467px){header .logo-icon img
{
    width:  45px !important; /* <<< tablet logo width */
    height: auto !important;
}}
@media(min-width:992px){header .logo-icon img
{
    width:  60px !important; /* <<< desktop logo width */
    height: auto !important;
}}



/* ############ Menu hover-over text-link color, header top-link icons colour,
   footer email link text color */
header section.slice_Header_L i::before
{
    color: #2c2a2b !important; /* <<< header icon color */
}

header section.slice_Header_L .top-link:hover i::before
{
    color: #fff !important; /* <<< header icon color */
}



/* ############ Search box background colour */
header div.search-overlay
{
    background-color: #df0202 !important; /* <<< Search box background colour */
}



/* ############ 3 Big Button colours */
section[class^="slice_WhatsOn3Buttons"] a.button1,
section.slice_content_page aside a.button1
{
    background-color: #202ead !important; /* <<< Blue/left/top big button */
}
section[class^="slice_WhatsOn3Buttons"] a.button2,
section.slice_content_page aside a.button2
{
    background-color: #e35812 !important; /* <<< Orange/middle big button */
}
section[class^="slice_WhatsOn3Buttons"] a.button3,
section.slice_content_page aside a.button3
{
    background-color: #0a900a !important; /* <<< Green/right/bottom big button */
}



/* ############ slide show caption button, and active/hover round pager button colour */
section[class*="Slides"] a.slideButton,
section[class*="Slides"] a.bx-pager-link:hover,
section[class*="Slides"] a.bx-pager-link.active
{
    background-color: #df0202 !important; /* <<< slide show button background color */
    border-color: 	  #df0202 !important; /* <<< slide show button border color */
}
/* Slide show inactive round pager buttons */
section[class*="Slides"] a.bx-pager-link
{
    background-color: #d7d7d7 !important; /* <<< slide show inactive round button color */
    border-color: 	  #d7d7d7 !important; /* <<< slide show inactive round button border color */
}



/* ############ Service Times and Location logos */
section[class^="slice_ServiceText"] div.block2-1::after,
section[class^="slice_ServiceText"] div.block2-2::after
{
    color: #fe0000 !important; /* <<< Clock and Location icon colour */
}



/* ############ Quick branding of slice header-text.
   (All styles are outside of article content.) */
section.slice_Header_L .logo-name a
{
    color: #202ead !important; /* <<< a *dark* text colour, suitable for a *white* background */
}

section[class$="_L"] > h1,
section[class$="_L"] > div.container > h1
{
    color: #323232 !important; /* <<< a *dark* text colour, suitable for a *white* background */
}



/* ############ Top bar of Group-Nav on the content page */
section.slice_content_page aside nav td.boxout_header_middle a
{
    background-color: #2c4049 !important; /* <<< Group-Nav top bar background colour */
}