/* Basic styles for body, paragraphs and headings */
* {box-sizing:border-box;}
* {margin:0px;padding:0px;border:0px;}

:root {
  --sel-bg-color:#37ae73;
}

#plump2 {display:block;}
#plump3 {display:none;}

html {overflow-y:scroll}
body {		max-width:1000px;
		margin: 0px auto;padding-bottom:50px;
		font-size: 100%;
}
h1 {		font-family:"Comic Sans MS";font-size:3em;
		line-height:120%;padding-left:10px;
}
h1sub {		font-family:"Comic Sans MS";font-size:1.5em;
		line-height:100%;padding-left:10px;
}
h2 {		font-family:"Comic Sans MS";font-size:1.25em;
		color:blue;background-color:lightgray;
		padding-left:2px;margin-bottom:5px;
}
h3 {		font-family:"Comic Sans MS";font-size:1.25em;
}
p {		font-family:"Comic Sans MS";font-size:1em;
		margin:top:10px;margin-bottom:10px;
}
.highlight	{font-weight:bold
}
.emphasise	{font-style:italic
}
.shout		{font-weight:bold;font-style:italic;
}
h4 {		font-family:"Comic Sans MS";font-size:1em;
		font-weight:bold;line-height:50%;
		padding-bottom:10px;padding-top:10px;
}

h5 {		font-family:"Comic Sans MS";font-size:1.25em;
		font-weight:bold;font-style:italic;
		text-align:center;
}

/* Styles for main heading and logo at top of page */
.logocontainer {display:block;float:right;width:70px;height:70px;
padding:10px;
}

.logo {	  	text-align:right;max-width:100%;height:auto;max-height:100%;
}


.header { 	width:100%;height:auto;
}

.village {	width:100%;height:auto;
	  	clear:both;
}
.update {	width:100%;
		padding-bottom:30px;
		background-color:white;font-size:0.8em;}

/* Styles for main text block, menu, and banner image */
.main {		margin-left:210px;margin-right:140px;margin-top:10px;
		border-top:1px solid black;
		padding-top:10px;
}

.mainp {	margin-left:210px;margin-right:0px;margin-top:10px;
		border-top:1px solid black;
		padding-top:10px;
}

.main2 {	margin-left:210px;margin-right:20px;
		border-top:1px solid black;;margin-top:10px;
		padding-top:10px;}

.submain {	float:left;width:50%;
		height:auto;padding-right:10px;padding-top:10px;
}

.menuwrapper {	display:block;float:left;z-index:10;
		height:inherit;
		width:200px;padding-top:10px;
}

.menuwrapper ul {z-index:20;}

.piccy {	float:right;
		padding-top:10px;
		width:130px;}

#plump2 {display:block;}
#plump3 {display:none;}


/* Deal with menu items */
/* We remove the margin, padding, and list style of UL and LI components */

.menuwrapper ul {
		list-style:none;
}

.menuwrapper ul li div {
		display:table-cell;
		vertical-align:middle;
}

/* We apply background color, border bottom white, width and height, and positioning to line items */

.menuwrapper ul li{
		background-color:#2b8859;
    		border-bottom:solid 1px white;padding:5px;
    		width:195px;height:45px;
     	   	position:relative;
		display:table;
}


/* We apply the background hover color when user hover the mouse over of the li component for current page */

.menuwrapper ul .selected {
		background-color:#d1e0e0;
}

/* We apply the background hover color when user hover the mouse over of the li component for other pages */

.menuwrapper ul li:hover {
		background-color:#319b66;
}

/* We apply the link style */

.menuwrapper ul li a {
    		padding:10px;
    		color:white;
    		display:inline-block;
    		text-decoration:none;
    		font-family:Arial;font-size:1em;
		display:table-cell;vertical-align:middle;
}

/* Clear float */
.clear{
    		clear:both;
}
.left {float:left;width:30%;}
.right {float:right;}
.centre {display:inline-block;width:70%;text-align:center;}

/* Block that contains the image on normal page, slide show page & page with image and banner text */

.imagecontainer {float:left;width:50%;max-width:400px;
		margin:0 auto;
}


.imagecontainer2 {float:left;width:50%;max-width:400px;margin:0 auto;
}

/*Block that contains the subheading on each page */   
.subhead {	margin-left:210px;padding-top:10px;
		border-top:medium solid;
}

/*Block containing the banner text and the banner text */
#info {		width:62.5%;height:600px;
		margin-top:10px;overflow:visible;
		float:left;border:2px solid green;
}

#bannertext {	width:100%;height:550px;
		text-align:center;padding-left:5px;padding-right:5px;
		font-family:"Comic Sans MS";font-size:0.9em;
		overflow:auto;display:table-cell;vertical-align:middle;border:2px solid red;
}

#bannerhead {	width:100%;text-align:center;
		font-family:"Comic Sans MS";font-size:1em;
		font-weight:bold;font-style:italic;
		margin-top:0px;margin-bottom:10px;
}

/*Navigation block with Previous, Photo count and Next links */
.slshNavigate {	margin:0 auto;
		text-align:center;
		width:100%;height:25px;
		margin-top:10px;
		z-index:5;position:relative;
}
#Next,#Previous {font-family:"Comic Sans MS"; font-size:1em;
		font-weight:bold;text-decoration:none;}

#slshNumber,#slshNumber2 {width:100%;height:25px;
		text-align:center;
		font-family:"Comic Sans MS"; font-size:1em;
		color:blue;background-color:lightgray;
}

#navtable {	width:100%;
		border-collapse:collapse;
		position:relative;
}
 
#Left {		width:38%;height:20px;vertical-align:middle}
#Middle {	width:24%;height:20px}
#Right {	width:38%;height:20px;vertical-align:middle}


.normal {	background-color:#b3cccc}
.normal:hover {	background-color:#d1e0e0}
.normaltxt {	color:blue;}

/*Figure block containing picture and caption*/
.slshFigure {	width:100%;max-width:400px;
		display:table;margin-top:5px;
		margin-left:auto;margin-right:auto;
}
.slshFigure3 {	width:37.5%;max-width:130px;
		float:left;
		display:table;padding-top:40px;margin:0 auto;
}  

/*Slide show picture */
.slshPic {	margin:0 auto;width:100%;}

/*cap is the id of the figcaption block which contains the capstion text area*/
#cap {		width:100%;}

figcaption {	width:100%;
}

#capfix {	width:100%;margin:0 auto;
}

#caption,#caption2 {font-family:"Comic Sans MS"; font-size:0.9em;
		text-align:center;width:100%;
		overflow-y:visible;
}    


.wholemenu {display:block;width:100%;}
.menuwrapper {display:block;}

#menulink {	display:none;
		height:30px;
		color:white;background-color:black;
    		font-size:1em;
}

.menumain,.menugroups,.menuactivities,.menuTerrington2021 {display:none;}
.submenu1 {display:block;padding-top:30px;clear:both;}
 .submenu2 {display:none;padding-top:30px;}

.menuTerrington2021,.menugroups,.menuactivities {width:100%;text-align:center;}

.siteitem {	text-align:center;
		display:inline-flex;justify-content:center;align-items:center;
		vertical-align:top;
		width:145px;height:50px;
		border-bottom:1px solid white;border-right:1px solid white;
		padding:10px;
		background-color:#37ae73;
		margin:1px;
		font-family:Arial;font-size:1em;
		
}
.siteitem:hover {background-color:#319b66;}

.siteitem a {color:white;text-decoration:none;
}
.siteitem a:visited {color:white;
}
.siteitem a:hover {color:white;
}

hr {	width:100%;border-top:1px solid black;margin;top:20px;}

@media screen and (max-width:900px) {
	.submain {float:none;width:100%}
	.imagecontainer,.imagecontainer2 {float:none;width:100%}
}

@media screen and (max-width:800px) {
	.piccy {display:none;}
	.main {margin-right:20px;}
}

@media screen and (max-width:600px) {
.wholemenu {width:100%;padding-left:10px;padding-right:10px;}

.menuwrapper {display:none;
	width:100%;
	float:none;
	position:relative;}
.menuwrapper ul {width:100%;}
.menuwrapper ul li{width:100%;}

#menulink {display:block;width:100%;}


.main,.main2,.mainp {
	margin-left:0px;margin-right:0px;padding-left:10px;padding-right:10px;
}
.submain {padding-right:0px;}

#sitemap {display:block;}

#plump3 {display:block;}
#plump2 {display:none;}
h1 {font-size:1.9em;}
h1sub {font-size:1.15em;}
}

@media screen and (max-width:319px) {
h1 {color:red;}
}

/* No longer needed
.link:hover {background-color:yellow}
.link {font-family:"Comic Sans MS";font-size:15px; padding-left:10px; border:0;text-align:left; height:60px;width:200px;background-color:lightgreen;}
#sub {position:relative;left:180px;top:-260px;visibility:hidden}
.wrapper {}
.container {width:100%;}
.main3 {margin-left:210px;margin-right:420px;
		padding-right:0px;padding-left:0px;padding-top:0px;
}
/**** SECOND LEVEL MENU ****/
/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */
.menuwrapper ul li ul{
    		position:absolute;
    		display:none;
}

/* When user has hovered the li item, we show the ul list by applying display:block, note: 200px is the individual menu width.  */
.menuwrapper ul li:hover ul{
    		left:195px;
    		display:block;
}

/* we apply different background color to 2nd level menu items*/
.menuwrapper ul li ul li{
    		background-color:#d1e0e0;
    		width:195px;height:30px;
    		margin-left:5px;border:0;
border-bottom:solid 1px white;
}

/* We change the background color for the level 2 submenu when hovering the menu */
.menuwrapper ul li ul li:hover{
    		background-color:#e0ebeb;
}

/* We style the color of level 2 links */
.menuwrapper ul li ul li a{
    		color:black;
    		padding:4px 10px;
    		display:inline-block;
    		width:200px;
}
.imagecontainer3 {flex:0 1 400px;max-width:400px;padding:0;margin:0px;border:0px;height:auto;
}
.cannot {background-color:#b3cccc}
.cannottxt {color:lightgray;}
.backbut {display:inline-block;color:white;background-color:gray;width:50px;}


#bck {padding-left:0px;}
.menuhd {    		padding:0px 10px;cursor:default;
    		color:white;font-weight:bold;background-color:gray;
    		display:inline-block;
    		text-decoration:none;
    		font-family:Arial;font-size:1em;
		display:table-cell;vertical-align:middle;}
*/