/*
   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 site logo image */
/* (For reference the entire desktop header is 127px high, unless there is a massive logo present) */
header .logo-icon img { 
	width:  auto !important; /* <<< mobile logo width */
	height: 60px !important; 
}
@media(min-width:467px){header .logo-icon img
{ 
	height: 80px !important; 
}}
@media(min-width:992px){header .logo-icon img
{ 
	height: 100px !important; 
}}
/* Gap between logo and top/bottom of screen  */
header div.logo-container 
{
	margin-top: 10px !important; /* <<< gap from top for mobile/tablet */
	margin-bottom: 10px !important; /* <<< gap from bottom for mobile/tablet */
}
@media(min-width:992px){header div.logo-container 
{
	margin-top: 10px !important; /* <<< gap from top for desktop */
	margin-bottom: 0 !important; /* <<< gap from bottom for desktop */
}}



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

footer .footer-column-3 a
{
    color: #fff !important; /* <<< header/footer icon/text-link color */
}


header li:hover > a,
header li:hover > a > a {
    color: #000;
    opacity: .7;
}


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



/* ############ 3 Big Button colours */
section[class^="slice_WhatsOn3Buttons"] a.button1,
section.slice_content_page aside a.button1
{
    background-color: #4acfc7 !important; /* <<< Green/left/top big button */
}
section[class^="slice_WhatsOn3Buttons"] a.button2,
section.slice_content_page aside a.button2
{
    background-color: #e84c3d !important; /* <<< Red/middle big button */
}
section[class^="slice_WhatsOn3Buttons"] a.button3,
section.slice_content_page aside a.button3
{
    background-color: #803686 !important; /* <<< Blue/right/bottom big button */
}


/* 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 */
}

/* Slide show active round pager buttons */
section[class*="Slides"] a.bx-pager-link.active
{
    background-color: #2da9e2 !important; /* <<< slide show inactive round button color */
    border-color: 	  #2da9e2 !important; /* <<< slide show inactive round button border color */
}



/* ############ Quick branding of slice header-text.
   (All styles are outside of article content.) */
section.slice_Header_L .logo-name a,
section[class$="_L"] > h1,
section[class$="_L"] > div.container > h1
{
    color: #2c4049 !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 */
}

/* ############ Social Media sidelinks */
.slice_FixedSideLinks div.fixed-link-wrapper a.icon-facebook:hover {
    background-color: #3b5998;
}

.slice_FixedSideLinks div.fixed-link-wrapper a.icon-twitter:hover {
    background-color: #1da1f2;
}

.slice_FixedSideLinks div.fixed-link-wrapper a.icon-instagram:hover {
    background-color: #f05356;
}

section.slice_Header_L div.nav-menu ul.root_menu > li ul li.has_sub_menu::after,
section.slice_Header_L div.nav-menu ul.root_menu > li:last-child > ul li.has_sub_menu::before, 
section.slice_Header_L div.nav-menu ul.root_menu > li:nth-last-child(2) > ul li.has_sub_menu::before
{top:11px;}

/* Code to make slide-shows look better on mobile screens */
section.slice_SlidesFullWidth {overflow:hidden;} /* hide anything that pokes outside */
@media (max-width:767px) {
	section.slice_SlidesFullWidth div.bannerSlides {
		width: 200%; /* double the width, which doubles the height, and then translate so we see the middle 50% */
		transform: translateX(-25%);
		overflow:hidden; /* hide anything that pokes outside */
	}
	/* Adjust the captions back again, so they look normal */
	section.slice_SlidesFullWidth div.bannerSlides div.bx-wrapper ul.gallery_ul li.gallery_li div.caption {
		/* div.bx-wrapper has position:relative set, so this is ok */
		left: 25%;
		right: 25%;
		width: 50%;
		overflow:hidden; /* hide anything that pokes outside */
	}
}

/* Fix various issues */
div.endis-jquery-ui div#divOverlay {font-size:17px;}
body.OnSmallAppleDevice input {-webkit-appearance: none;}
body.ArticleEditor img.module_icon {width:auto !important;}
section.slice_Footer_D div.footerbar span:last-child:not([id]) { display: block; padding-top: 25px; }