html 
	{
	overflow-y: scroll
	}
	*{	
	box-sizing: border-box
	}
ul,li,div,nav
	{
	padding: 0;
	margin: 0;
	}
p
	{	
	font-size: 20px;
	padding-bottom: 10px;
	margin: 0px
	}
a
	{
	color: inherit;
	text-underline-offset: 0.3em;
	text-decoration-thickness: 1px;
	}
a:hover
	{
	text-decoration-thickness: 3px;
	}
Body
	{
	font-family: Calibri, Arial, Helvetica, Trebuchet MS, sans-serif;
	font-size:20px
	}
h1 
	{	
	/*Main header*/
	padding-bottom: 15px;
	color: Maroon;
	text-align: left;
	font-size: 26px
	}
h2, h4, h6
	{
	font-weight: bold;
	color: Maroon
	}
strong {
	font-weight: bold;
	color: black
	}
h3 
	{
	/*weddings page*/
	font-weight: bold;
	font-size: 150%;
	color: Maroon;
	}
h2
	{
	/*page article headings*/
	font-size: 140%;
	margin-left: 15px;
	}
h4 
	{
	/*Churchyard page*/
	color: Maroon;
	font-size: 120%;
	margin: 1px;	
	}
hr	
	{
	border: 0;
	width: 100%;
	color: #5f5f5f;
	background-color: #1C1C1C;
	height: 1px
	}
h5
	{
	/*page 1 box headlines*/	
	text-align: center;
	font-weight: bold;
	font-size: 140%;
	background-color: cadetblue;
	color: antiquewhite;
	padding: 3px;
	margin: 5px 0px 15px 0px
	}		

/*Boxes for front page*/
.article-area-1
	{
	width: 80%;
	margin: 3px auto;
	display: flex;
	flex-wrap: wrap;
	}
.article-area-1  >*
	{
    margin: 0px;
	padding: 5px;
	flex-wrap: wrap;
	text-align: center;
	flex-direction: column;
	border: 1px solid #1C1C1C;
	font-size: 20px
	}

/* Coloured box*/	
.box1
	{
	display: inline-block;
	overflow: hidden;
	width: 312px;
	height: 348px;
	box-shadow: 5px 7px 3px gray;
	border: solid black 1px;
	margin: 20px 15px
	}
.box1 * /*inherit downwards, but nothing else*/
	{
	box-sizing: border-box;
	text-align: left
	}
.box1_top
	{
	height: 102px;
	margin: 0;
	padding: 12px 16px;
	border-bottom: solid gray 1px;
	font: bold 24px Calibri, Arial, sans-serif;
	line-height: 1.1;
	color: white
	}
.box1_top hr
	{
	border: 0.5px solid white
	}
.box1_middle
	{
	position: relative;
	height: 134px;
	overflow: hidden;
	border-bottom: solid gray 1px
	}
.box1_middle img
	{
	position: absolute;
	display: block
	}
.box1_bottom
	{
	height: ;
	padding: 10px 16px;
	font: bold 22px Calibri,Arial,sans-serif;
	line-height: 29px;
	background: white;
	color: darkslategray
	}
.no_line
	{
	text-decoration: none
	}
/*Coloured box ends*/

.box-1 
	{
	display: flex;
	margin: 3px;
	padding: 10px 20px;
	justify-content: center;
	align-items: center;
	flex: 1 1 248px;
	background-color: grey;
	min-height: 250px;
	overflow: auto
	}
.box-2 
	{
	display: flex;
	margin: 3px;
	padding: 10px 20px;
	justify-content: center;
	align-items: center;
	flex: 1 1 auto;
	max-width: 490px;
	min-width: 240px;
	min-height: 100px;
	background-color: gray;
	}
.box-3
	{
	display: flex;
	margin: 3px;
	padding: 10px 20px;
	flex: 0 1 Auto;
	width: 100%;
	min-width: 240px;
	min-height: 0;
	background-color: lightskyblue;
	}
.box-4
	{
	display: block;
	margin: 3px;
	text-align: center;
	padding: 10px 20px;
	width: 100%;
	min-width: 240px;
	min-height: 150px;
	background-color: lightskyblue
	}
.box-5
	{
	display: inline;
	margin: 3px;
	text-align: left;
	padding: 10px 20px;
	width: 100%;
	min-width: 240px;
	min-height: 150px;
	background-color: lightskyblue
	}
.box-6
	{
	display: flex;
	margin: 3px;
	padding: 0;
	flex: 0 1 Auto;
	width: 100%;
	min-width: 240px;
	min-height: 0;
	text-align: left;
	text-justify: inter-word;
	border: none;
	background-color: #FAF9F6;
	color: 
	}
.box-6 p
	{
	margin: 0px 10px 0px 10px;
	font-size: 25px;
	line-height: 2em;
	font-family: century gothic, arial;
	padding: 0px 10px 40px 5px
	}
.bt-1
	{
	font-weight: bold;
	font-size: 21px;
	text-align: center;
	color: darkblue;
	margin: 5px auto;
	padding: 10px 0px;
	}
/*Front Page Boxes Ends*/

.floating-box
	{
	font-size: 15px;
	display: inline-block;
	vertical-align: top;
    width: 248px;
    min-height: 150px;
    margin: 2px;
	padding: 3px;
	padding-bottom: 8px;
	background-color: chocolate;
	text-align: center
	}
.floating-box-2 
	{
    display: inline-block;
	float: left;
    margin: 2px;
	padding: 10px;
	min-width: 240px
	}
.floating-box-3
	{
    display: inline-block;
	float: left;
    margin: 5px;
	padding: 5px;
	}
.heading1
	{
	/*main header text*/
	font-family: Trebuchet MS;
	color: white;
	font-size: 350%;
	padding-top: 9px;
	padding-bottom: 12px;
	text-align: left;
	margin-left: 20px
	}
.heading2
	{
	/*search bar text*/
	float: left;
	visibility: visible;
	color: white;
	padding-top:4px;
	margin-left: 20px;
	font-size: 15px;
	}
.heading3
	{
	/*header sub text*/
	font-family: Trebuchet MS;
	color: white;
	font-size: 18px;
	text-align: left;
	margin-left: 20px;
	font-weight: bold
	}
.heading4
	{
	/*header sub text*/
	font-family: Trebuchet MS;
	color: white;
	font-size: 18px;
	text-align: right;
	margin-right: 20px;
	font-weight: bold
	}
div#headerblock1 
	{
	width: 100%;
	float: left
	}
#headerimg1
	{
	display: flex; align-items: center; flex-direction: column; width: 100%; height: 450px;
	background: gray url("../web2_images/Lillington_Midland_Oak_1909_lr.jpg") no-repeat center 77%;
	background-size: cover
	}
.tabletext1
	{
	font-size: 18px;
	}
.figure1
	{
	min-width: 240px;
	max-width: 80%;
	overflow: hidden;
	margin: auto
	}
div#page1_img 
	{
	display: block;
	width: 230px;
	height: 164px;
	overflow: hidden;
	border: 1px solid #E6E6E6;
	margin: 10px auto
	}
div#page1_img img
	{
	width: 100%;
	vertical-align: top
	}
div#page2_img
	{
	display: block;
	width: 40%;
	min-width: 240px;
	overflow: hidden;
	border: 1px solid #E6E6E6;
	margin: 10px;
	}
div#page2_img img
	{
	width: 100%;
	vertical-align: top
	}
	
div#memories_imgL
	{
	display: block;
	float: left;
	width: 40%;
	min-width: 240px;
	overflow: hidden;
	border: 1px solid #E6E6E6;
	margin: 4px 10px 10px 0px;
	}
div#memories_imgL img
	{
	display: block;	
	vertical-align: top	
	}
div#memories_imgR
	{
	display: block;
	float: right;
	width: 40%;
	min-width: 240px;
	overflow: hidden;
	border: 1px solid #E6E6E6;
	margin: 10px 0px 10px 10px;
	}
div#memories_imgR img
	{
	display: block;		
	vertical-align: top	
	}
div#newsletter_imgL
	{
	display: block;
	float: left;
	width: 32%;
	min-width: 240px;
	overflow: hidden;
	border: 1px solid #E6E6E6;
	margin: 4px 10px 10px 0px;
	}
div#newsletter_imgL img
	{
	vertical-align: top	
	}
div#link 
	{
	display: inline-block;
	width: 120px;
	height: 120px;
	overflow: hidden;
	border: none;
	margin: 12px;
	padding: 2px;
	text-align: center;
	}
div#link a 
	{
	text-decoration: none;
	position: relative;
	top: 35% /*tune this in the <a> tag on the page to centre vertically*/
	}

/*Slideshow*/
.slideshow
	{
	width: 100%;
	height:900px;
	position: relative
	}
.slides
	{
	width: auto;
	height: 100%;
	max-height: 790px;
	margin: auto
	}
.slide_button 
	{
	position: absolute;
	bottom: 400px;
	display: block;
	text-align: center;
	color: #ebfeeb;
	background-color: maroon;
	overflow: hidden;
	z-index: 1;
	padding: 0;
	border-radius: 50%;
	cursor: pointer;
	font-size: 22px;
	}
#slidetext
	{
	width: 100%;
	text-align: center;
	font-style: italic;
	color: maroon
	}

/*Slideshow ends*/

/*Red Table*/
table#t01 
	{
	border: 2px solid indianred;
	border-spacing: 3px;
	border-radius: 5px;
	width: 100%;
	}
table#t01 th
	{
	background-color: indianred;
	text-align: center;
	padding: 8px;
	font-size: 140%;
	color: #ffffff
	}
table#t01 td 
	{
	padding: 5px;
	border: none;
	text-align: left;
	font-size: 18px
	}
table#t01 tr:nth-child(odd) td 
	{
	background-color: #f9ebea
	}
table#t01 tr:nth-child(even) td 
	{
	background-color: #ffffff
	}

/*Green Table*/
table#t02
	{
	border: 2px solid darkgreen;
	border-spacing: 3px;
	border-radius: 5px;
	width: 100%;
	min-width: 180px
	}
table#t02 th 
	{
	background-color: darkgreen;
	text-align: center;
	padding: 8px;
	font-size: 140%;
	color: #ffffff
	}
table#t02 td
	{
	padding: 5px;
	border: none;
	text-align: left;
	font-size: 18px
	}
table#t02 tr:nth-child(odd) td
	{
	background-color: #ebfeeb
	}
table#t02 tr:nth-child(even) td 
	{
	background-color: #ffffff
	}

nav
	{
	display: none;
	order: 2;
	width: 100%;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	background-color: #5f5f5f
	}
#top-menu
	{
	display: inline-block
	}
#top-menu-image
	{
	display: none
	}
#top-menu-image img
	{
	width: 80%
	}
#menu
	{
	display: block;
	background-color: ;
	margin: 35px;
	padding: 2px;
	box-sizing: border-box
	}
#menu ul
	{
	list-style-type: none;
	padding: 0px;
	margin: 0;
	}
#menu ul li
	{
	float: left;
	position: relative;
	background-color: transparent;
	margin: 5px 40px;
	height: 75px;
	width: 180px
	}
#menu ul li a /*Actually using Buttons to operate and centre single or multi lines of text, but anchors still work*/
	{
	display: block; /*as a block the anchor automatically takes up the width of the parent (li)*/
	text-decoration: none;
	text-align: center;
	background-color: transparent;
	color: white;
	height: 100% /*so the anchor takes up the full height of the parent (li)*/
	}
#menu ul li a button /*HTML buttons automatically centre text vertically and horizontally*/
	{
	border: none;
	border-bottom: 3px solid white;
	cursor: pointer;
	background-color: transparent;
	font-size: 20px;
	font-weight: bold;
	font-family: Century Gothic, Arial;
	padding: 0;
	color: white;
	width: 100%;
	height: 100%
	}
#menu ul li a button:hover
	{
	border: none;
	background-color: brown
	}
#menu li:hover 
	{
	background-color: 
	}
#menu li:hover #submenu
	{
	display: inline-block
	}
#submenu
	{
	display: none;
	position: absolute;
	z-index: 1;
	top: 25px;
	left: 60px;
	float: left
	}
#submenu ul
	{
	padding: 0;
	margin: 0
	}
#submenu ul li
	{
	background-color: black;
	margin: 0;
	height: 60px;
	width: 180px
	}
#submenu ul li a
	{
	display: block;
	color: yellow;
	height: 100%
	}
#submenu ul li a button
	{
	border: none;
	cursor: pointer;
	background-color: black;
	font-size: 16px;
	font-family: Century Gothic, Arial;
	padding: 0px 5px;
	color: yellow;
	width: 100%;
	height: 100%
	}
#submenu ul li a button:hover
	{
	background-color: grey
	}
/* Top Menu item for Mobile width*/
#menutop 
	{
	
	}
#menutop ul
	{
	list-style-type: none;
	}
#menutop ul li 
	{
	padding: 0px;
	}
#menutop ul li a
	{
	padding:5px 0px 3px 15px;
	display: block;
	color: brown;/*main menu text color*/
	text-decoration: none;
	}
#menutop ul li a:hover
	{
	background-color: brown;
	}
.nav_mobilemenu 
	{
	display: none;
	flex:0 1 100%;
	margin-bottom: 1px;
	height: 40px;
	order: 2;
	border-style: none
	}
.nav_mobile 
	{
	margin-top: 2px;
	background-color: maroon;
	text-align: left;
	max-width: 100%
	}
/*mobile nav ends*/

.flex-container
	{
	width: 100%;
	height: 100%;
	padding: 0px;
    display: flex;
	margin:0 auto;
	flex-wrap: wrap;
	}
article 
	{
	display: block;
	order: 3;
	background-color: white;
	width: 100%;
	flex: 1 100%;
	padding-top: 1px;
	min-width: 295px;
	min-height: 500px;
	border-style: solid;
    border-color: #5f5f5f;
	border-width: 0px 1px 0px 1px
	}
aside
	{
	float: right;
	margin: 0 1.5%;
	width: 50%;
	}
header
	{
	background-color: transparent;
    flex: 1 100%;
	order: 1;
	color: white;
	min-height: 200px;
	min-width: 295px;
	border-style: solid;
    border-color: #5f5f5f;
	border-width: 1px;
	}
footer
	{
    flex: 1 100%;
	order: 4;
	padding: 8px;
	background: #5f5f5f;
	color: white;
	border-style: solid;
    border-color: #5f5f5f;
	border-width: 1px;
	border-top-style: none
	}
.footerbutton
	{
	background-color: #1C1C1C;
	border-radius: 4px;
	text-align: center;
	padding: 4px;
	font-size: 10px
	}
.footerbutton:hover
	{
	background-color: maroon		
	}
.footer-menu
	{
	text-align: center
	}
div#footer-menu a
	{
	color: white;	
	font-weight: bold;
	font-size: 16px;
	line-height: 2.7;
	text-decoration: none
	}
div#footer-menu a:hover
	{
	text-decoration: underline;
	text-decoration-thickness: 2px
	}
div#footer-menu ul
	{
	list-style-type: none;
	}
div#footer-menu li
	{
	line-height: 30px
	}
div#footer-menu
	{
	display: inline-block;
	text-align: left;
	vertical-align: top; 
	margin: 20px;
	font-size: 16px;
	font-family: Century Gothic, futura;
	line-height: 1.7
	}
/*Footer Table*/
table#Footer-table
	{
	width: 100%;
	color: white;
	text-align: center;
	font-family: Century Gothic, Futura, Calibri, Arial, Helvetica, Trebuchet MS, sans-serif
	}
table#Footer-table td
	{
	
	}
	
/*Search*/
#searchbar-inheaderimage
	{
	display: none;
	width: 100%;
	background-color: #5f5f5f;
	}
#searchbar-belowheaderimage
	{
	display: block;
	width: 100%;
	background-color: #5f5f5f;	
	}
#tfheader
	{
	width: 100%;
	Height: 72px;
	margin: 2px 0px 0px 0px;
	padding: 22px 20px;
	}
#tfnewsearch
	{
	display: flex;
	align-items: center;
	justify-content: center;
	float: right;
	text-align: right;
	padding-right:19px;
	}
.tftextinput
	{
	margin: 0px 1px 0px 0px;
	padding: 5px 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:16px;
	background-color: linen;
	border:1px solid brown;/* border-right:0px;*/
	border-radius: 5px 0px 0px 5px;
	-webkit-border-top-left-radius: 5px;
	-webkit-border-bottom-left-radius: 5px;
	}
.tfbutton
	{
	margin: 0px 0px 0px 1px;
	padding: 5px 15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size:16px;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	color: #ffffff;
	border: solid 1px brown; 
	background: maroon;
	background: -webkit-gradient(linear, left top, left bottom, from(maroon), to(brown));
	background: -moz-linear-gradient(top, maroon, brown);
	border-radius: 0px 5px 5px 0px;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	}
.tfbutton:hover
	{
	text-decoration: none;
	background: darkred;
	background: -webkit-gradient(linear, left top, left bottom, from(darkred), to(crimson));
	background: -moz-linear-gradient(top,  darkred, crimson);
	}
/* Fixes submit button height problem in Firefox */
.tfbutton::-moz-focus-inner 
	{
	border: 0;
	}
.tfclear
	{
	clear:both;
	}
	
@media only screen and (max-width: 840px)
	{
	nav 
		{
		order: 3;
		display: flex;
		border-width: 0px 1px 0px 1px
		}
	.article
		{
		flex:1 100%;
		order:2;
		}
	.article-area-1
		{
		width: 100%
		}
	#top-menu
		{
		display: none
		}
	#top-menu-image
		{
		display: flex;
		width: 100%;
		height: 100%;
		justify-content: center;
		align-items: center
		}
	.nav_mobilemenu
		{
		display: block
		}
	#menu ul li
		{
		float: none
		}
	#submenu
		{
		top: -20px
		}
	.heading2 
		{
		visibility: hidden;
		font-size: 1px
		}
	#searchbar-inheaderimage
		{
		display: block;
		background-color: transparent
		}
	#searchbar-belowheaderimage
		{
		display: none;
		}
	#tfheader
		{
		Height: 62px;
		margin: 2px 0px 0px 0px;
		padding: 0px;
		}
	#tfnewsearch
		{
		float: none;
		text-align: center
		}
	.tftextinput 
		{
		font-size: 19px;
		background-color: #FAF0E680;
		border-radius: 0px;
		-webkit-border-top-left-radius: 0px;
		-webkit-border-bottom-left-radius: 0px;
		margin-right: 1px
		}
	.tfbutton 
		{
		margin: 0px 0px 0px 5px;
		padding:3px;
		border-radius: 0px;
		-webkit-border-top-right-radius: 0px;
		-webkit-border-bottom-right-radius: 0px;
		}
		
	#headerimg1 
		{
	
		}
	.box1_bottom
		{
		font: 20px Calibri, Arial, sans-serif;
		line-height: 30px
		}
	table#t01 td 
		{
		font-size: 15px
		}
	.footer-menu
		{
		display: none
		}
	}

@media only screen and (max-width: 481px)
	{
	article
		{
		border-width: 0px 1px 1px 1px;
		min-height: 700px
		}
	footer
		{
		border-width: 1px
		}
	.floating-box-3
		{
		min-width: 240px
		}
	.box-6 p
		{
		font-size: 18px;
		line-height: 1.75em
		}
	div#memories_imgL
		{
		float: none;
		margin: 10px auto
		}
	div#memories_imgR
		{
		float: none;
		margin: 10px auto
		}
	div#newsletter_imgL
		{
		float: none;
		margin: 10px auto;
		width: 100%
		}
	table#t01 td 
		{
		font-size: 13px
		}
	table#t02 td 
		{
		font-size: 14px
		}
	div#headerblock1 
		{
		width: 100%
		}
	#headerimg1 
		{
		max-height: 240px;
		}
	.heading1 
		{
		font-size: 10vw;
		margin-left: 0px;
		text-align: center
		}
	.heading3
		{
		font-size: 6vw;
		margin-left: 0px;
		text-align: center
		}
	.heading4 
		{
		font-size: 6vw;
		text-align: center;
		margin-left: 0px;
		margin-right: 0px
		}
	.tabletext1 
		{
		font-size: 4vw
		}
	.slideshow 
		{
		height: 450px
		}
	.slides
		{
		width: 100%;
		height: auto;
		}
	.slide_button 
		{
		bottom: 260px
		}
		}