/* 
   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:  80px !important; /* <<< mobile logo width */
	height: auto !important; 
}
@media(min-width:467px){header .logo-icon img
{ 
	width:  90px !important; /* <<< tablet logo width */
	height: auto !important; 
}}
@media(min-width:992px){header .logo-icon img
{ 
	width:  118px !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_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: #c20e1a !important; /* <<< header/footer icon/text-link color */
}



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



/* ############ 3 Big Button colours */
section[class^="slice_WhatsOn3Buttons"] a.button1,
section.slice_content_page aside a.button1
{ 
	background-color: #c20e1a !important; /* <<< Green/left/top big button */
}
section[class^="slice_WhatsOn3Buttons"] a.button2,
section.slice_content_page aside a.button2
{ 
	background-color: #db8c22 !important; /* <<< Red/middle big button */
}
section[class^="slice_WhatsOn3Buttons"] a.button3,
section.slice_content_page aside a.button3
{ 
	background-color: #1c4e7f !important; /* <<< Blue/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: #1c4e7f !important; /* <<< slide show button background color */
	border-color: 	  #1c4e7f !important; /* <<< slide show button border color */
} 
/* Slide show inactive round pager buttons */
section[class*="Slides"] a.bx-pager-link
{	
	background-color: #db8c22 !important; /* <<< slide show inactive round button color */
	border-color: 	  #db8c22 !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: #c20e1a !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: #1c4e7f !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: #db8c22 !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, 
   and the "Church for the community" button on the trial site */
section.slice_WelcomeText_L a.button 
{ 
	background-color: #1c4e7f !important; /* <<< background colour here */
	border-color: #1c4e7f !important; /* <<< border colour here */
}
section.slice_WelcomeText_L a.button2, 
section.slice_CommunityText_L a.button
{ 
	color: #1c4e7f !important; /* <<< text color */
	border-color: #1c4e7f !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: #1c4e7f !important; /* <<< background colour here */
}

section.slice_WelcomeText_L > div.container {
   background-color:#d1bcf9;
}
section.slice_WelcomeText_L > div.container div.ArticleBody {color:black;}
section.slice_WelcomeText_L > div.container div.ArticleBody div a {
 	color:white;
  	font-weight:400;
}