@charset "UTF-8";
/* reset css because different browsers can have different default values */
		body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, 			input, p, blockquote, address, th, td {
			margin: 0;
			padding: 0;
			}			
		h2, h3, h4, h5, h6 {
			font-size: 100%;
			font-weight: normal;
			}			
		ol, ul {
			list-style-type:none;
			}		
		table {
			border-collapse: collapse;
			border-spacing: 0;
			}			
		caption, th {
			text-align: left; 
			}			
		fieldset, img {
			border: 0;
			}			
		dt, address, caption, cite, code, dfn, em, i, strong, b, th, var {
			font-style: normal;
			font-weight: normal;
			}			
		q:before, q:after {
			content:'';
			}			
/* Margin and padding of commonly used text elements given default values */		
		h1, h2, h3, h4, h5, p, ul {
		margin: 0 20px;
		padding: .5em 0;
		}
		
/* Unique styling for this stylesheet */
	
html {
	background-color:#d6dfc7;
	}
		
body {
	width: 920px;
	margin: auto;
	background-color: #f4f6e9;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	}

#content {
	clear:both;
	margin-bottom: 0;
	}
	
#header {
  float: left;
  width: 100%;
  margin-bottom: 0;
  margin-left: 0px;
  background-color: #ffffd8;
}

#header ul {
  padding: 0.3em 0 0 0;
  list-style: none;
  background-color: #FFFFD8;
}

#header li {
  float: left;
  background-image: url(stylesheet_images/tab_left.png);
  background-repeat: no-repeat;
  margin-right: 4px;
  margin-left: 0px;
  margin-top: 0px;
  margin-bottom: 0px;
  padding: 0 0 0 8px;
}

#header a {
  float: left;
  display: block;
  background-image: url(stylesheet_images/tab_right.png);
  background-repeat: no-repeat;
  background-position: right top;
  padding: 0.5em 10px 0.2em 0;
  text-decoration: none;
  font-weight: bold;
  color: black;
	}

/* Code below ensures that the tab of a selected page appears a different colour, ie off white - the colour of the png image */

#news #header li.news,
#gardening #header li.gardening,
#walks #header li.walks,
#allotments #header li.allotments,
#heritage #header li.heritage,
#sport #header li.sport				
	{
    background-image: url(stylesheet_images/tab_left_active.png);
	}


#news #header li.news a,

#gardening #header li.gardening a,
#walks #header li.walks a,
#allotments #header li.allotments a,
#heritage #header li.heritage a,
#sport #header li.sport a			
	{
  background-image: url(stylesheet_images/tab_right_active.png);
  background-color: transparent;
  color:black;
	}
/*Code below is to hide redundent tabs now that 2016 site is operating*/
#header li.diary a,
#header li.plan a,
#header li.choir a,
#header li.travel a,
#header li.cbpc a,
#header li.youth a, 
#header li.selling a
	{
	display:none;
	}
	
#masthead {
	background-color: #ffffd8;
	}
	
#masthead h1 {
	background-image: url(stylesheet_images/logo.png);
	background-repeat:no-repeat;
	margin-left:0;
	width: 910px;
	height: 112px;
	text-indent: -5000px;	
	}
	
#main {
	float:left;
	position: relative;
	top: 0px;
	width: 655px;
	background-color: #f4f6e9;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0px;
	}	


/* The border at the bottom of the sidebar could be made 'none' so that there is not a double border where it meets the footer (which has its owne border) but this would mean that the shorter sidebar used for earlier news would not have a bottom border. */	
#sidebar {
	position: relative;
	top: 0px;
	margin-left: 659px;
	margin-right: 0;
	margin-top: 0px;
	width: 238px;
	background-color: #CBDDAE;
	padding-left: 0;
	padding-top: 0px;
	border: solid 1px #006600;
	}
	
	
/* In the sidebar below, the value of the height should be adjusted to suit the amount of text on the page. The aim is to make the green background reach the footer. */
	
	#news #sidebar {
		height: 5500px;
		}
	#plan #sidebar {
		height: 6800px;
		}
	#gardening #sidebar {
		height: 2200px;
		}
	#walks #sidebar {
		height: 2000px;
		}
	#allotments #sidebar {
		height: 1150px;
		}
		
	#cbpc #sidebar {
		height: 900px;
		}		
		
	#heritage #sidebar {
		height: 1000px;
		}
	#choir #sidebar {
		height: 300px;
		}	
	#youth #sidebar {
		height: 300px;
		}
	#selling #sidebar {
		height: 1000px;
		}
	#travel #sidebar {
		height: 800px;
		}
	#sport #sidebar {
		height: 750px;
		}		
	#diary #sidebar {
		height: 3000px;
		}

			#sidebar {
			height: 1000px;
			}	
	
#footer {
	background-color: #b5d19e;
	clear:both;
	color:#FFFFFF;
	position: relative;
	height: 3em;
	border: solid 1px #006600;
	}
	
h2 {
	font-size:17px;
	font-weight:bold;
	}


		/* The code for the two 'items' is not needed for this website but may be needed for the inherited old pages with items in the sidebar - so left for that reason. */
		.item {
			padding: 2px;	
			}	
		.item h2 {
			display:block;
			background-image: url(stylesheet_images/tab_back.png);
			background-repeat:no-repeat;
			padding: 0px 0px 0px 0px;
			width:220px;
			height:50px;
			color: black;
			border: solid thin #FF0033;
			}

/* The articles are the news articles that appear on the left hand side of the webpage */
	.article h2 {
	display:block;
	clear:both;
	background-color: #f4f6e9;
	width:450px;
	height:28px;
	background-repeat:no-repeat;
	padding: 2px 12px 2px 2px;
	color: black;
		}
		
	.article p {
		padding-top: 0px;
		padding-bottom: 8px;
		padding-left: 2px;
		margin-left: 10px;	
		}
			
	.article img {
		padding: 0px;
		margin: 5px;
		border: 1px black solid;
		}

	#selling .article {
		margin: 10px;
		border: solid thin #336633;
		} 
		
	.blue { 
		color:#000099;
		}



/* A table is used for the diary calendar */
	table {
		font: normal 12px "Lucida Sans Unicode", Verdana, sans-serif;
		border: 2px solid #000;
		background-color: #CC6633;
		margin-top: 10px;
		margin-left: 12px;
		}
		
	td {
	border: 2px solid #00F;
	background-color: #FFFFFF;
	padding: 3px;
		}
		
		
		
	th {
		border: 2px solid #000;
		background-color: #FFFFFF;
		padding: 3px;
		text-align:left;
		color: black;
		font-size:14px;
		}
	
	dt {
		font-size:20px;
		font-weight:800;
		margin-top:6px;
		}
		
	.diarytable caption {
		text-align: left;
		font: bold 150% Georgia, "Times New Roman", Times, serif; 
		padding-bottom: 0.1em;
		padding-top: 1em;
	}
	
	span.diaryitemhdg {
		color: #660000;
		font-weight:bold;
	}
	
		span.diaryitemregularhdg { 
		color:#000099;
		font-weight:bold;
	}

	
	
		
		
/* Table used for the diary */				
	.diarytable {
	border: medium solid #0000FF;
	margin-bottom: 10px;
		}
	
	.diarytable th {
	background-color: #F00;
		}
			
		
	

/* Large number sometimes used in articles, eg, to emphasise how many people where at a meeting */	
	span.number {
		font-size:x-large;
	}
/*Used at the end of an article and at the end of the tabs in the sidebar. But also see further styling for date lower down this page */	
	span.date {
		display: inline;
		padding-top: 0px;
		font-size:14px;
		font-weight:bold;
		color: #000099;
		}

/* Footer styling */	
	#footer .w3logo {
		float:left;
		}
		
	#footer .contact {
		float: right;
		padding-top: 4px;
		}
		
	.contact a:link {
		color:#FFFFFF;
		}
	
/* Code below keeps space between text and heading in 'Whats New' column on News page smaller	
h3 + p {
	padding-top: 0;
	}
 */	
 
 
/* Used to make text red */
	.colortext {
		color:#FF0000;
		}
	
/* Used in the adverts on the Selling Page */		
p.gone {
	background-image:url(photos/selling_photos/GONE.png);
	background-position: left;
	background-repeat:no-repeat;
	}
	
p.sold {
	background-image:url(photos/selling_photos/SOLD.png);
	background-position: left;
	background-repeat:no-repeat;
	}	
		
p.got {
	background-image:url(photos/selling_photos/GOT.png);
	background-position: left;
	background-repeat:no-repeat;
	}

p.quiz {
	background-image:url(photos/news_photos/quiz_clip_art.jpg);
	background-position: right;
	background-repeat:no-repeat;
	}

p.soldout {
	background-image:url(photos/news_photos/SOLD-OUT.png);
	background-position: left;
	background-repeat:no-repeat;
	}	



/* Used to make text blue colour as in text used to describe walks: when making reference to the number of a photo */ 	
	span.pic_number {
		color:#0033FF;
		}
		
#clear {
clear:left;
}	
	
.clearleft {
	clear:left;
	}

/* Following used for particular items, eg for selling things or a single article */		
	.article#cheese {
		background-image:url(photos/news_photos/Stilton_background.jpg);
		background-repeat:repeat-y;
		background-position:center;
		}


	
		

/* The code below produces a blank line of colour as a spacer above the right sidebar */	
	#headline {
		width:910px;
		height:10px;
		margin-left: 0px;
		background-color: #f4f6e9;
		}
	
	
/* The following two declarations ensure that text will flow around images but avoid pictures lining up together (the reason for he clear declaration) */	
	img.float_left {
		margin-left: 5px;
		float:left;
		clear:left;
		margin-right: 10px;
		}
		
	img.float_right {
		float:right;
		clear:right;
		margin-right: 5px;
		margin-left: 5px;
		}
	
	img {
		margin: 0px;
		}
	
	
	
/* This is for the padragraphs inside the white box in the sidebar */
	#sidebar p {
		margin-left: 10px;
		margin-right: 10px;
		padding: 10px 10px 2px 10px;
		}

/* Used for the pull out quotes in articles */	
	blockquote.pull_out {
		font: "Times New Roman", Times, serif;
		font-style:italic;
		font-size:20px;
		color: #0033CC;
		margin-left: 10px;
		margin-right: 10px;
		float:left;
		padding-left: 10px;
		padding-right: 5px;
		padding-top: 5px;
		padding-bottom: 5px;
		border-top:4px solid #0033CC; 
		}	

/* For article headlines. The 'clear' ensures that the headline doesn't appear unless all text and images above have ended. */	
	.article h3 {
		font-size:20px;
		font-weight:bold;
		padding-top: 0px;
		padding-bottom: 5px;
		padding-left: 10px;
		color: black;
		margin-left: 0px;
		clear:both;
		}
	
/* Styling of tabs for earlier news */
	#earlier_news_nav .date {
		font-size:14px;
		font-weight:bold;
		color: #000099;
		display: block;
		}
	
	#earlier_news_nav li {
		 font-size:14px;
		 font-weight: bold;
		 padding: 7px 6px 5px 8px;
		 background-image: url(stylesheet_images/tab_back.png);
		 background-repeat:no-repeat;
		 height: 45px;
		 width: 230px;
		 text-align: left;
		  }
		  
	/* this overides the default margin of 20px and ensures that the earlier news tabs are central in the sidebar */	  
	ul#earlier_news_nav {
		margin-left: 9px;
		}
		 
/*by adding width and height below, the clickable area is as large as the button. The block declaration is needed for the same reason. Color ensures that the link does not change color when it is clicked. */
	#earlier_news_nav a {
		text-decoration:none;
		display:block;
		width: 205px;
		height: 30px;
		color:#000000;
		}

/* The white box in the sidebar */
	#blank_box {
		background-color: #f4f6e9;
		margin: 10px;
		border:solid thin #006600;
		height:300px;
		}
	
	#blank_box h2 {
		padding-bottom: 5px;
		}
		
	#blank_box p {
		padding-top: 0px;
		}
		
#download_box {
		background-color: #f4f6e9;
		margin: 10px;
		border:solid thin #006600;
		height:450px;
		}

#blank_box_travel {
		background-color: #f4f6e9;
		margin: 10px;
		border:solid thin #006600;
		height:550px;
		}
	
	
/* styling for the 'earlier pages' starts below */ 	
		
		
/* this is for the earlier pages which do not need a sidebar. This makes the width of the 'main' spread right across the body */
#main_earlier {
	float:left;
	position: relative;
	top: 0px;
	width: 900px;
	background-color: #f4f6e9;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0px;
	}
	
#float_sidebar {
	float:right;
	background-color:#009966;
	}

/* this is for the note under the tabs which states how users can return to the previous page */	
span.return {
	font-weight:400;
	color: #666666;
	font-size:14px;
	margin-right:0px;
	float:right;
	}
	
#OtherNews {
		background-color: #FFFFD8;
		margin: 0px;
		margin-top: 5px;
		border:solid thin #006600;
		height:320px;
		width: 215px;
		margin-left: 10px;
		margin-right: 10px;
		/*
		float:left;
		*/
		}
		
#OtherNews h3 {
		font-weight:bold;
		padding: 0px;
		margin: 10px 5px 0px 8px;
		}
		
#OtherNews p {
		padding: 0px;
		margin: 0px 5px 5px 12px;
	}
	
#OtherNews .date  {
	text-align: right;
	}
	
#OtherNews h2 {
	margin-left: 8px;
	margin-right: 2px;
	}

/* Code below cotrols the height of the white box in the sidebar where bits of information are printed */
	
		#news #blank_box {
			height: 100px;
			}
			
		#plan #blank_box {
			height: 180px;
			}
			
		#gardening #blank_box {
			height: 280px;
			}
			
		#walks #blank_box {
			height: 180px;
			}	
			
		#allotments #blank_box {
			height: 190px;
			}	
			

		#cbpc #blank_box {
			height: 170px;
			}	

			
		#heritage #blank_box {
			height: 170px;
			}	
			
		#choir #blank_box {
			height: 150px;
			}	
			
		#youth #blank_box {
			height: 400px;
			}	
			
		#selling #blank_box {
			height: 300px;
			}	
			
		#travel #blank_box {
			height: 280px;
			}	

		#sport #blank_box {
			height: 280px;
			}	
			
		#diary #blank_box {
			height: 300px;
			}	

	
#OtherNews h3 {
	font-size:14px;
	margin-top: 2px;
	}		
	
#OtherNews p {
	font-size:12px;
	}	
	
#earliernewsstories {
	font-size: 16px;
	font-weight:bold;
	margin-top: 15px;
	margin-bottom:0px;
	padding: 0px;
	}
	


/* This code is only for the calendar on the diary page*/	
.clmonth {
	border-collapse: collapse;
	width: 885px;
}
.clmonth caption {
	text-align: left;
	font: bold 150% Georgia, "Times New Roman", Times, serif; 
	padding-bottom: 0;
	padding-top: 0.5em;
}
.clmonth th {
	border: 1px solid #AAAAAA;
	border-bottom: none;
	padding: 0.2em 0.6em 0.2em 0.8em;
	background-color: #8BB25C;
	color: #3F3F3F;
	font: 110% Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-weight:bold;
	width: 110px;
}
.clmonth td {
	border: 1px solid #EAEAEA;
	font: 90% Verdana, Geneva, Arial, Helvetica, sans-serif;
	padding: 0.2em 0.6em 0.2em 0.6em;
	vertical-align: top;
}
.clmonth td.previous, .clmonth td.next {
	background-color: #F6F6F6;
	color: #C6C6C6;
}
.clmonth td.active {
	background-color: #EFE776;
	color: #000000;
	border: 2px solid #000000;
}
.clmonth ul {
	list-style-type: none;
	margin: 0;
	padding-left: 1em;
	padding-right: 0.6em;
}
.clmonth li {
	margin-bottom: 1em;
}

/* This code enables bullet points to appear in a list in an article on the News page */
#news .article ul {
	list-style: disc;
	margin-left: 35px;
	}
	
/*Used for paragraph on selling page to ensure that it clears floated photographs that are 297 px high */	
#box270 {
	height:270px;
	}
	
li.numbered {
	list-style-type:decimal;
	}
.red {
	color: #F00;
}

/*Twin column text*/
.two-column {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}