/********************/
/* CUSTOM STYLE CSS */
/********************/
/* 
Put your custom css and css overrides in this file. By restricting your css changes to 
custom-style.css, your changes will not be overwritten when upgrading to a new version of this theme.

Steps to customize your theme:
1. Add your custom css to this file;
2. Uncomment different examples below and modify data as you wish;
3. Clear cached data at admin/settings/performance or, if you use Administration Menu module, "Flush all caches".
	 You can also check "Rebuild theme registry on every page" at /admin/appearance/settings/zeropoint during development;
4. Don't forget to save a copy of this file with a different name to avoid loosing it after a theme update.
*/
/* Erase or comment the lines below to get rid of the image in the right sidebar and the brand image at the bottom */
#middlecontainer {
	background: transparent url(../images/all/_sidebarimg.png) 99% 99% no-repeat;
}
#brand {
	background: url(../images/all/_brand.png) 50% 0 no-repeat;
	margin: 0 auto;
	height: 50px;
}
/* Hide the Regster link in the title bar
*/
.pi li.ureg {
    background: rgba(0, 0, 0, 0) no-repeat scroll left center;
    padding: 0;
    display:none;
}
/**************************
** D.J.L. Sherwood URC mods     
** # = ID,  . = class   
**/
/* Change font of main Menu class=pure-menu-link
*/
.pure-menu-link {
	background-color: #0299FF;
	color: #fff !important;
	text-transform: uppercase;
	font-family: sans-serif, Arial, Verdana, Helvetica;
}
/* main menu Colour */
.pure-menu-horizontal {
    background-color: #0299FF;
}

/* reduce the main menu side padding from 18px*/
a.pure-menu-link  {	
   padding: 4px 6px 4px 6px !important; 
}
a.expanded.pure-menu-link  {	
   padding: 4px 12px 4px 6px !important; 
}
/* correct pager on main menu Theme views*/
div.view-content {
    width:100%; 
}
h2 {border-top:solid blue thin;
}
/* Remove Border from field-group-table row heading
*/
th.field-label {
	border-bottom: none;
}
/* Neaten up Webforms */
form.webform-client-form > div > div.form-item > label ,
div.node-webform div.fieldset-wrapper > .form-item > label {
    min-width: 16em;
    display: inline-block;
    }
.webform-component-display label.webform-label-processed {
    min-width: 16em;
    display: inline-block;
    }   
.form-item .description {
    color: firebrick;
    font-size:0.95em;
}
/* Neaten up List of bookings */
div.listbyeventbyDay caption, 
div.view-display-id-list_heating h3, 
div.view-display-id-list_heating caption {
	font-size: 18pt; 
	margin: 0.5em;
	line-height: normal;
	}
.heating-list-dayname, td.heating-list-day { 
	width:10%;
	border-bottom: thin solid;
	font-size:12pt;
	}
.heating-list-time { 
	width:20%;
	border-bottom: thin solid;
	font-size:12pt;
	}
.heating-list-title { 
	width:60%;
	border-bottom: thin solid;
	font-size:12pt;
	}
/* List view for heating */
td.listday { width:5%;
}
td.listevent { width:15%;
}
td.listroom { width:15%;
}
/*	
** DJL: Calendar tweaks 
*************************/
div.views-field-field-room {
    background: linear-gradient(180deg, white, rgba(0,0,0,0))!important; 
    padding: 4px 0 !important; 
}
div.views-field-field-room a{
    color: fuchsia !important; 
}
div.Main-Hall a { color:Blue!important; 
}
div.Sherwood-Hall a{ color:Green!important; 
}
div.The-Gallery a{ color:purple!important; 
}
div.Garden-Room---Church a{ color:darkred!important; 
}
.calendar .views-field-title a{ color:black;
}
/* Show time inline with date in repeats */
div.date-display-range { Display: inline;
}
/**
div.field-widget-text-textarea {
	width: 90%;
	} */
div.filter-guidelines-item {
	max-width:900px;
	border: red solid 1px;
	}
/* *****
   Make table rows (odd,even)stipe
   */
tr.odd{ background-color: #eaffff;}
tr.even{background-color: #ffffea;}
/* make embedded stuff responsive
*/
.media-embed {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.media-embed-4x3 {
    padding-bottom: 75%
}
.media-embed-1x1 {
    padding-bottom: 99%
}
.media-embed iframe,
.media-embed object,
.media-embed embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}	
/* ==================================================
** D.J.L - styles for paragraphs slices
**/
.field-name-pp-title {
	font-size: 130%; 
	font-weight: bold; 
	color: #2F71A2 ;
	padding: 0 0 1em 0;
	text-align:center;
	}
div.field-item.even .entity-paragraphs-item {
	background-color: #FFD;
	padding: 1em 0;
	}
div.field-item.odd .entity-paragraphs-item {
	background-color: #EEF;	
	padding: 1em 0;
	}
div.pp-padding {
	box-sizing:border-box; 
	padding-left: 2%;
	padding-right: 2%;
	padding-bottom: 1em;
	}
div.content div.field-name-field-grid-items div.field-name-field-help-text ,
div.content div.field-name-field-grid-items div.field-name-field-text      {
	text-align: center;
	}
/* make image or content in columns 
   mutually align in the middle.
***/
div.entity-paragraphs-item [class^=pure-u] {
	vertical-align: middle !important;
	display:inline-block;
	}
/* - - - - Image Placement - - - - */
/* make the image in a column 
-- display centre in the column 
***/
div.img-center .pure-img {
	box-sizing:border-box; 
	display: block !important;
	float: none;
	margin-left: auto;
	margin-right: auto;
	}
	
/* ----------------------------
-- set up Paragraphs grid-items 
-- to be fluid in same way 
-- as pure CSS
*/
/* Default (for Phone) = 1 column ***/
div.field-name-field-grid-items > div.field-items > div.field-item {
	width: 100%; 
	display:inline-block;
	vertical-align: top;
	}
.pp-float-right {
	float: right; 
	margin-right: 0; 
	margin-left: 1em; 
    }
.pp-float-left {
	float: left; 
	margin-right: 1em;
	margin-left: 0; 
    }	
	
/* for tablet = 2 colums ***/
@media screen and (min-width:35.5em){
	div.field-name-field-grid-items > div.field-items > div.field-item {
	width: 50%; 
	display:inline-block;
	vertical-align: top;
	}	
	/* to wrap and float an item left or right
	only on tablets and PC where screen < 35.em
	***/
	.pp-float-right {
		float: right; 
		margin-right: 0; 
		margin-left: 1em; 
		}
	.pp-float-left {
		float: left; 
		margin-right: 1em;
		margin-left: 0; 
		}
	}
/* for PC etc = 3 colums ***/
@media screen and (min-width:48em){
	div.field-name-field-grid-items > div.field-items > div.field-item {
	width: 33%; 
	display:inline-block;
	vertical-align: top;
	}	
}
/*
** END - styles for paragraphs slices
*  ================================================= */
/* 
** D.J.L. other tweaks
*/
/* set 'authored by' to clear both */
.submitted-by { clear:both ;
}

/***********************/
/* CHANGE DEFAULT FONT */
/***********************/
/*
html, .pure-g [class*="pure-u"] {
	font-family: Verdana, Helvetica;
}*/
/* Change Basic font size - was 0.85em */
.fs0 {
    font-size: 0.95em; 
} 
#mission {
    font-size: 0.95em; 
} 
.title {
    border-top: solid 1px black;
}

/**********************/
/* ROUND USER PICTURE */
/**********************/
/*
.user-picture img {
	border-radius: 100% !important;
}*/


/*************************/
/* DROP DOWN ADJUSTMENTS */
/*************************/

/* no dropdown shadows */
/*
.pure-menu-children {
	box-shadow: none;
}*/

/* big arrows */
/*
.pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after {
	content: "\25BC";
}
.pure-menu-has-children .pure-menu-has-children > .pure-menu-link:after {
	content: "\25B6";
}*/


/**************************/
/* INDIVIDUAL MENU COLORS */
/**************************/
/* Uncomment the following lines to have different colors for menu items. 
 * Change the values below accordingly: XXX=menu item number; YYY=color. */

/* Individual menu item */
/*
.menu-XXX {
	background: #YYY;
}*/

/* First/last menu item */
/*
.first.pure-menu-link {
	background: #YYY;
}*/

/* Middle menu items */
/*
.pure-menu-link {
	background: #YYY;
}*/

/* Children color */
/*
.pure-menu-children .pure-menu-link {
	color: #YYY !important;
	background: YYY;
}*/


/*********************************/
/* HIDE some TITLES and READMORE */
/*********************************/
/* Uncomment the first declaration below to hide all titles on the front page 
 * Addapt the second declaration to hide a certain title on the frontpage. 
 * Third one is for no "Read more" on the front page. */ 
/*
.front #main h2.title a {
	display: none;
}
.front #main #node-XXX h2.title a {
	display: none;
}
.front .node-readmore {
	display: none;
}
*/


/*******************************/
/* UPDATE ICONS FOR NEW BLOCKS */
/*******************************/
/* where ID is the block id */

/*
#ID .block-icon {
	background: transparent url(../images/all/icons/blocks/icon_24_48.png) no-repeat;
}
*/


/*************************/
/* USER BLOCKS ALIGNMENT */
/*************************/
/*
#section1 .block {
	min-height: 250px;
}*/


/*************************/
/* CENTERED BLOCK IMAGES */
/*************************/
/*
.block img {
	margin: auto;
}*/


/************************/
/* OTHER SOCIAL NETWORK */
/***********************/
/*
#soclinks .myother { 
	background: transparent url(myother-social-network_32.png) no-repeat scroll center center; 
}*/


/***********************/
/* CHANGE HEADER IMAGE */
/***********************/
/* Deactivate the image rotator in theme's settings, put your new image in the _custom folder and uncomment the lines below */
/*
.himg #headimg, #headimg {
	background: #fff url(YOUR_IMAGE.png) no-repeat 100% 100%;
}*/


/***********************/
/* CHANGEs for MOBILES */
/***********************/

@media screen and (max-width: 48em) {

/* HEADER IMAGE */
/* Comment or erase the lines below and images rotator will work on mobiles too.
	 You can also change the image with "mobi-sq" or use your own. */
	.himg #headimg, #headimg {
		background: #fff url(../images/all/mobi-dot.png) repeat;
	}
}
@media print {
    #top_bg { display:none; }
    .logoimg { display:none; }
    .clearfix::after { display:none; }
    #site-name {font-size: 12pt;}
    #sidebar-left { display:none; }
    div[role=navigation] { display:none; }
    #bottom_bg { display:none; }
}