/* 
   Style Over-Ride file. Put/edit CSS styles in here that are specific to a customer. 
   Version 2.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. We do have styles in here to 
   change the colour of buttons in slices, as these are not so easy for customers 
   to change. */

   
   
/* ############ Size of header logo icon/image */
header .logo-icon img
{ 
	width:  auto !important; /* <<< mobile logo width */
	height: 60px !important; 
}
@media(min-width:467px){header .logo-icon img
{ 
	height: 70px !important; 
}}
@media(min-width:992px){header .logo-icon img
{ 
	height: 90px !important; 
}}
/* Gap between logo and top/bottom of screen  */
header div.logo-container 
{
	margin-top: 5px !important; /* <<< gap from top for mobile/tablet */
	margin-bottom: 5px !important; /* <<< gap from bottom for mobile/tablet */
}
@media(min-width:992px){header div.logo-container 
{
	margin-top: 5px !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,
header li:hover > a,
header li:hover > a > a,
footer .footer-column-3 a
{
	color: #129dc0 !important; /* <<< header/footer icon/text-link color */
}



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



/* ############ 3 Big Button colours */
section[class^="slice_WhatsOn3Buttons"] a.button1,
section.slice_content_page aside a.button1
{ 
	background-color: #000000 !important; /* <<< Green/left/top big button - GS change to black 3.2.18 */
}
section[class^="slice_WhatsOn3Buttons"] a.button2,
section.slice_content_page aside a.button2
{ 
	background-color: #808080 !important; /* <<< Red/middle big button - GS change to grey 3.2.18*/
}
section[class^="slice_WhatsOn3Buttons"] a.button3,
section.slice_content_page aside a.button3
{ 
	background-color: #727b2b !important; /* <<< Blue/right/bottom big button - GS change to olive 3.2.18 */
}
section[class^="slice_WhatsOn3Buttons"] a.button4,
section.slice_content_page aside a.button4
{ 
	background-color: #db8c22 !important; /* <<< Orange 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: #129dc0 !important; /* <<< slide show button background color */
	border-color: 	  #129dc0 !important; /* <<< slide show button border color */
} 
/* Slide show inactive round pager buttons */
section[class*="Slides"] a.bx-pager-link
{	
	background-color: #d5dfcf !important; /* <<< slide show inactive round button color */
	border-color: 	  #d5dfcf !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: #4acfc7 !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, 
section[class$="_L"] > h1,
section[class$="_L"] > div.container > h1
{
	color: #2c4049 !important; /* <<< a *dark* text colour, suitable for a *white* background */
}
section.slice_Header_D .logo-name a, 
section[class$="_D"] > h1,
section[class$="_D"] > div.container > h1
{
	color: white !important; /* <<< a *light* text colour, suitable for a *dark* background */
}



/* ############ Background picture of the "piano" slice. 
   The image is stored in the assets section of a template */
section.slice_JoinUsPiano { 
	background-image: url(../images/piano.jpg) !important; /* image path */
}



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



/* ############ Button colors of:
   "Welcome Slice" in the free Option 1 & 2 templates, 
   "Church for the community" button on the trial site,
   "piano" button on the trial site */
section.slice_WelcomeText_L a.button, 
section.slice_JoinUsPiano a:hover
{ 
	background-color: #129dc0 !important; /* <<< background colour here */
	border-color: #129dc0 !important; /* <<< border colour here */
}
section.slice_WelcomeText_L a.button2, 
section.slice_CommunityText_L a.button
{ 
	color: #129dc0 !important; /* <<< text color */
	border-color: #129dc0 !important; /* <<< border colour here */
}
section.slice_WelcomeText_L a.button2:hover, 
section.slice_CommunityText_L a.button:hover
{ 
	color: white !important; /* <<< text color */
	background-color: #129dc0 !important; /* <<< background colour here */
}
section.slice_JoinUsPiano a 
{
	border-color: #9db9c5 !important; /* <<< border colour here */
}