/* CSS layout WDVTA RESPONSIVE main pages */

/*
  	Amended by Malcolm Inglis 10 June 2015 for Responsive
*/

html, body{
	height:100%;
}

@font-face
{
	font-family: sectionhead;
	src: url('oswald-medium.ttf');
}


@font-face
{	/* used for main title */
	font-family: wdvta;
	src: url('Mirza-Regular.ttf');
}

@font-face	/* NOT USED */
{
	font-family: arimo;
	src: url('Arimo-Regular.ttf');
}

@font-face	/* NOT USED */
{
	font-family: catamaran;
	src: url('Catamaran-Regular.ttf');
}

@font-face	/* NOT USED */
{
	font-family: montserrat;
	src: url('Montserrat-Regular.ttf');
}

@font-face	/* NOT USED */
{
	font-family: josefin;
	src: url('JosefinSans-Regular.ttf');
}

@font-face	
{
	font-family: raleway;
	src: url('Raleway-Regular.ttf');
}

@font-face	
{
	font-family: roboto;
	src: url('Roboto-Regular.ttf');
}

a	{
	font-weight: 700;
}

a.nounderl	{
	text-decoration: none;
}

#r10hid a, #index a	{
	text-decoration: none;
	background-color: #177A16;
	color: #ffffff;
	padding: 10px;
	border-radius: 10px;
	border: 1px solid #177A16;
}
#r10hid a:hover, #index a:hover	{
	background-color: #ffffff;
	color: #177A16;
}
#index a	{
	padding: 3px;
	border-radius: 3px;
	font-size: 100%;
	-webkit-box-decoration-break: clone;	/* padding applies to broken lines */
}

.titlelist a {
	font-size: 120%;
}

#index li	{
	color: #177A16;
	font-weight: 700;
	margin-top: 0.5em;
}

audio	{
	max-width: 100%;
	background-color: #177A16;
	color: #ffffff;
}

body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	font-size: 1.2em;
/*	background-color: #ffffee;	26 change	*/
	background-color: #ffffff;	
	background-repeat: repeat;
	-webkit-text-size-adjust: none;		/* stop smallish text resizing on iPhone */
}


body.r10	{
	background-image: none;
	margin-left: 1%;
	margin-right: 1%;
}

dd	{
	margin-left: 1em;
	line-height: 120%;
}

dt	{
	margin-bottom: 0.8em;
	margin-top: 0.5em;
	font-weight: 700;
}

em	{
	font-style: italic;
}

figure.absopic img	{
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
figure.invisipic img {
	visibility: hidden;
	width: 100%;
}

figcaption, .pcap	{
	margin-top: 0.5em;
	margin-bottom: 0.7em;
	text-align: center;
	line-height: 120%;
	color: #7C3D02;
	max-width: 95%;
	background-color: transparent;
	padding-top: 2px;
	padding-bottom: 2px;
}
.smallcap	{
	font-size: 80%;
	margin-bottom: 2em;
	text-align: center;
	width: 95%;
}
form	{
	margin-top: 1.5em;
}
footer {
	clear: both;
	border-top: 1px solid #7C3D02;
	border-bottom: 1px solid #7C3D02;
	font-size: 1em;
	line-height: 1.5em;
	padding: 2%;
	margin-left: 5%; 	/* introduced for oak leaf margin */
	text-align: center;
}
.r10 footer	{
	margin-left: 0;
}

h1	{
	font-family: raleway, sans-serif;
	font-size: 1.6em;
	font-weight: bold;
	margin-top: 1.3em;
	margin-bottom: 1em;	
}
.r10 h1	{
	font-family: 'sectionhead', sans-serif;
	font-size: 4em;
	color: #3c9458;	/* mid green as used in Report */
	color: #177A16;
}

/* These two classes are for 'new technology' centralising text over an image.
e.g.
	<div class="textimagecontain">
		<img  src="images/image.php" alt="background image" />	
		<h1 class="positiontext">Hello World</h1>	
	</div>
*/
.textimagecontain	{
	position: relative;
	text-align: center;
}
.positiontext	{
	position: absolute;
	top: 20%;
	left: 50%;
	width: 95%;
	transform: translate(-50%, -70%);
}


.absohead	{
	position: absolute;
	margin-top: 0;
}
h1#frontcover	{
	color: #ffffff;
	left: 5%;
	top: 4em;
	text-align: center;
	font-family: sans-serif;
}
h1#start	{
	text-align: center;
	font-size: 2em;
}

h1#activities, h1#timeline, h1#intro, h1#beyond2017	{
	color: #ffffff;
	text-shadow: 0 0 4px #000000;
/*	left: 10%;
	top: 2em;
*/	
}

h1#parishes	{
	top: 2.5em;
}
h1#lessons	{
	color: #ffffff;
	text-shadow: 0 0 4px #000000;
	left: 10%;
	top: 4em;
}
h1#forward	{
	color: #ffffff;
	text-shadow: 0 0 4px #000000;
	left: 10%;
	top: 3em;
}
span#front2	{
	font-size: 60%;
	font-weight: 400;
}
a img#arrow	{
	padding-top: 5px;
	width: 50px;
}
a:hover img#arrow	{
	width: 60px;
	padding-top: 0px;
}

figure#imglink {
	border-width: 5px;
	border-color: #ffffff;
}
figure#imglink:hover	{
	border: 5px solid #177A16;
}


@media only screen
	and (max-width: 950px)	{
	
	h1#activities, h1#lessons, h1#forward, h1#beyond2017	{
	top: 1.0em;

	}
	h1#timeline	{
	top: 0.5em;
	}

}
@media only screen
	and (max-width: 800px)	{
	
	h1#frontcover	{
	top: 5em;
	font-size: 2em;	
	}
	
}
@media only screen
	and (max-width: 640px)	{
	
	h1#frontcover	{
	top: 4em;
	font-size: 2em;	
	}
	h1#start, h1#intro, h1#activities, h1#parishes, h1#lessons, 
	h1#forward, h1#beyond2017, h1#timeline, h1#beyond2017	{
	font-size: 2em;
	top: 1.0em;
	}

}
@media only screen
	and (max-width: 400px)	{
	
	h1#frontcover	{
	top: 2em;
	font-size: 1.5em;	
	}
}




h2	{
	font-family: raleway, sans-serif;
	font-size: 1.4em;
	font-weight: bold;
	padding-top: 50px;
	margin-bottom: 0.8em;
	color: #177A16;
}

h2#min	{
	font-size: 1.2em;
	margin-top: 1.8em;
}

.r10 h2	{
	clear: both;
}

h2.timelineh2	{
	font-size: 2em;
	padding-top: 2em;
}
h2.project	{
	background-color: #ffffff;
	padding: 5px;
	border-top: 1px solid #7C3D02;
	border-bottom: 1px solid #7C3D02;
	float: left;
	margin-top: 2em;
}

h3	{
	font-family: raleway, sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	padding-top: 50px;
	margin-bottom: 0.7em;
	color: #10550f;
	line-height: 1.4em;
}
.highlight h3, .titlelist h3	{
	padding-top: 10px;
}

.r10 h3	{
	font-style: italic;
}

#artworks h3, #artworks h2, #artworks h1	{
	text-align: center;
}


h4	{
	font-family: raleway, sans-serif;
	font-size: 1.0em;
	font-weight: bold;
	margin-top: 1.3em;
	margin-bottom: 0.6em;
}

h5	{
	font-family: raleway, sans-serif;
	font-size: 1.0em;
	font-style: italic;
	margin-top: 1.0em;
	margin-bottom: 0.6em;
}

iframe#foxhillmap	{
	height: 300px;
}

iframe#hedgetree	{
	width: 95%;
	height: 50em;
}
/*
input [type="submit"] {
	-webkit-appearance: none;
}
*/

ul.r10toc	{
	margin-top: 0;
	margin-left: 0;
	margin-bottom: 1em;
}
.r10toc	li {
	float: left;
	padding-right: 20px;
}


ul.toc	{
	margin-left: 0;
}
.toc li	{
	line-height: 120%;
	margin-left: 2em;
}
.toc li.category	{
	font-size: 120%;
	margin-left: 0;
}

li	{
	margin-top: 0.3em;
	padding-top: 2px;
	padding-bottom: 2px;
}
#eventpres li	{
	padding-top: 50px;
	padding-bottom: 50px;
}

.titlelist li	{
	border: solid 1px #177A16;
	background-color: #eeFFee;
	padding: 10px;
}

p	{
	margin-top: 0.8em;
	margin-bottom: 0.7em;
	line-height: 150%;
}

.r10 p	{
	line-height: 140%;
}
#r10hid p	{
	text-align: center;
	margin-top: 2em;
}
p.larger	{
	font-size: 1.2em;
}
table {
	border-width: 1px;
	border-color: #999999;
	border-collapse: collapse;
	caption-side: top;
	font-family: sans-serif;
	margin-top: 1em;
}
table.max	{
	width: 100%;
}

.timeline	{
	border-left-width: 4px;
	border-left-color: #177A16;
	border-left-style: solid;
	padding: 6px;	
}

td {
	border-width: 1px;
	padding: 1em;
	border-style: solid;
	border-color: #999999;
	background-color: #eeFFee;	
	color: #000000;
	vertical-align: middle;
	line-height: 120%;
}

.timeline td	{
	background-color: #ffffff;
	border: none;
}
.timeline td.century	{
	font-size: 140%;
	font-weight: bold;
	text-align: center;
	width: 20%;
}

td.dbtable	{
	text-align: center;
	padding: 4px;
	font-size: 1em;
}

td.pcount	{
	text-align: center;
	width: 8em;
	padding: 4px;
	font-size: 1em;
}	

td img 	{
	max-width: 100%;	
}

td.bold	{
	font-weight: 700;
}

td.centre img	{	/*	Fix Firefox bug where td img ignores max-width. Used in mki_db */
	width: 100%;
}


th {		/* allow h2 to contribute to index even when in <th> */
	border-width: 1px;
	padding: 8px;
	vertical-align: middle;
	border-style: solid;
	border-color: #999999;
	background-color: #177A16;
	font-family: sans-serif;
	font-weight: 600;
	font-size: 1.0em;
	color: #FFFFFF;
	margin-bottom: 0;
}


th.e	{	/* email column, make all same width */
	width: 50%;
}
th.contents	{
	width: 50%;
}
table.dbtable, table.dbtablefloat, th.lighten:hover	{
	background-color: #33aa33;
}
table.dbtablefloat	{
	float: left;
	margin-right: 1em;
}

table.checktable	{	/* checkboxes on forms */
	border: 1px solid #000000;
	border-collapse: collapse;
}
table.checktable td {	/* checkboxes on forms */
	text-align: center;
}
table.checktable th {	/* checkboxes on forms */
	font-weight: normal;
	width: 2em;
}

ul.bullet	{
	margin-left: 1.5em;
	margin-top: 0.8em;
	line-height: 150%;	
	list-style-position: outside;
	list-style-type: disc;
}

ul#index	{
	margin-top: 0.8em;
	list-style-type: none; 
	line-height: 120%;
	list-style-position: outside;
	margin-left: 0;
	margin-bottom: 1em;
}


textarea, input	{
	font-size: inherit;
	font-family: inherit;
}

.ack	{
	text-align: center;
	font-style: italic;
	font-size: 80%;
}

.artist	{
	padding: 0.5em;
	text-align: center;
	margin-bottom: 4em;
}
.artbio	{
	line-height: 2em;
	font-family: raleway;
}

#artworks, #report	{
	background-color: #ffffff;
	padding: 2em;
}

.border	{
	border: thin solid #aa0000;
	border-radius: 10px;
	padding-left: 15px;
	padding-right: 15px;
	margin-top: 2em;
}


.button, .gbutton	{
	background-color: #550000; 
	color: #FFFFFF;
	font-size: 1em;
	border-width: 5px;
	cursor: pointer;
	height: 2.8em;
	margin-bottom: 0.4em;
	margin-left: 17px;
	padding-left: 14px;
	padding-right: 14px; 
	-webkit-appearance: none; 
}

.button:hover	{
	background-color: #880000;
}

.fakea	{
	text-decoration: underline;
	font-weight: 700;
	color: #0000ee;
	cursor: pointer;
}

.gbutton	{
	background-color: #177A16;
	text-align: center;
}
.centre	{
	text-align: center;
}

.cookiewarning	{
	position: fixed;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
	z-index: 2000;	/* WDVTS map page has OS components with z-index 1005, 1006, 1500 */
	width: 100%;
	background-color: #eeffee;
	padding: 10px;
	border: solid #177A16 2px;
	margin-bottom: 6px;
}
.cookieclose	{
	cursor: pointer;
	float: right;
	border: solid #177A16 2px;
	font-weight: 700;
	padding: 5px;
	min-width: 4em;
	text-align: center;
	color: #177A16;
	margin-left: 2px;
}
.cookieclose:hover	{
	background-color: #177A16;
	color: #ffffff;	
}
.cookietext 	{
	float: left;
	width: 70%;
	margin-bottom: 5px;
}

td.deadcentre	{
	text-align: center;
	background-color: #DDDDDD;
}

td.deadright	{
	text-align: right;
	background-color: #DDDDDD;
}

.checkboxes	{
	float: left;
	margin-left: 15px;
}
.clear	{
	clear: both;
}

.detail	{
	margin-left: 1em;
}

.dropdown	{
	background-color: #550000;
	color: #FFFFFF;
	font-size: 0.8em;
	height: 2.2em;
}

.emphasise, .strong	{
	font-weight: bold;
}

.left	{
	text-align: left;
}	
.right	{
	text-align: right;
}

/* These two classes are for centralising text over an image.
e.g.
	<div class="textimagecontain">
		<img  src="images/image.php" alt="background image" />	
		<h1 class="centredtext">Hello World</h1>	
	</div>
*/
.textimagecontain	{
	position: relative;
	text-align: center;
}
.centredtext	{
	position: absolute;
	top:  50%;
	left: 50%;
	transform: translate(-50%, -50%); 
}

.error, .label {
	font-family: sans-serif;
	font-size: 1em;
	text-align: right;
	width: 30%;
	float: left;
	padding-right: 2%;
	padding-top: 0.4em;
	clear: both;
}
.error, .javawarn {
	color: #ff0000;
}
.msgtxt {
	 font-size: 1em;
	 margin-left: 2%;
	 max-width: 60%;
	 margin-bottom: 0.5em;
}
.msgtxt:focus	{
	border: 2px solid #037C04;
}

.errormess {
	color: #FF0000;
	margin-left: 0;
	margin-bottom: 3px;
}

.expander	{	/* arrow for expanding text */
	text-align: left;
	font-size: 110%;
	color: #0000aa;
	cursor: pointer;
}

/* TESTING FONTS */
.arimo	{	/* home page major points  NOT USED*/
	font-family: arimo;
	font-size: 150%;
	line-height: 1.2em;
}
.catamaran	{	/* home page major points NOT USED */
	font-family: catamaran;
	font-size: 150%;
	line-height: 1.2em;
}
.montserrat	{	/* home page major points NOT USED */
	font-family: montserrat;
	font-size: 140%;
	line-height: 1.2em;
}
.josefin	{	/* home page major points NOT USED */
	font-family: josefin;
	font-size: 150%;
	line-height: 1.2em;
}
.raleway	{	/* home page major points */
	font-family: raleway;
	font-size: 150%;
	line-height: 1.2em;
}
.roboto	{	/* home page major points */
	font-family: roboto;
	font-size: 130%;
	line-height: 1.2em;
}
/* END TEST FONTS */

.flcent	{
	float: left;
	width: 30%;
	text-align: center;
}

.flright {
	float: right;
	margin-left: 2em;
	margin-bottom: 1.5em;
}
.formnotes	{	/* note in the middle of a form */
	padding-top: 0.8em;
	padding-bottom: 0;
	font-weight: 700;
	font-style: oblique;
	clear: both;
}

.iconalign	{
	vertical-align: bottom;
}

.graphiclink {
	border-style: none;
	border-bottom-style: solid;
}


.highlight	{
	background-color: #ffffff;
	padding: 10px;
	border: #cc0000 solid 4px;
}
.img_l, .img_r, .img_full, img_full_var, .img_full_nobo, .img_r_half	{
	text-align: center;
	color: #330000;

	border: 2px solid #330000;
	border: none;
	margin-bottom: 1.4em;
	padding: 1%;
	max-width: 40%;
}
.img_full, img_full_var, .img_full_nobo	{
	max-width: 100%;
	clear: both;
}
.img_full_nobo	{
	border: none;
}
.img_l	{
	margin-right: 2%;
	float: left;
}
.img_r	{
	float: right;
	margin-left: 2%;
}
.img_r_half	{
	max-width: 50%;
	float: right;
}

.nbitem		{	/* prevents break between checkbox - label or radiobutton - label */
	white-space: nowrap;
	display: inline;
	margin-right: 1em;
}

.nobo_r, .nobo_l, .nobo_r_landscape	{
	border: none;
	max-width: 45%;
	margin-left: 1em;
	float: right;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}
.nobo_l	{
	float: left;
	margin-right: 1em;
	margin-left: 0;
}
.nobo_r_landscape	{
	max-width: 60%;
}

.normal	{
	font-style: normal;
}
.officer	{
	margin-left: 5%;
}

.img_l img, .img_r img, .img_full img, .nobo_r img, figure img	{
	max-width: 100%;
}

.img_full_var img	{
	max-width: 80%;
}
.threepics, .twopics	{
	clear: both;
}

.threepics figure,  .twopics figure, .twopics figure.portrait, .twopics figure.landscape 	{
	float: left;
	text-align: center;
	width: 32%;
	padding: 14px 0.5% 14px 0.5%; /* top right bottom left */
}

.twopics figure	{
	width: 49%;
}

.twopics figure.portrait {
	width: 38%;
}
.twopics figure.landscape	{
	width: 58%;
}

ul.linkindex	{
	width: 35%;
	line-height: 1.2em;
}

.lefto		{	/* leftmost narrow column  */
	clear: left;
	float: left;
	margin-left: 0;
	width: 22%;
	margin-right: 3%;
}
.rightmain	{	/* large right area of 2-column layout */
	float: left;
	margin-right: 0;
	width: 73%;
}

.linky {
	text-decoration: underline; 
	color: #0000ff;
	cursor: pointer;			
}
.linky:hover {
	color: #dd0000;	 	
}

.pagelink a	{
	color: #177A16;
	text-align: right;
	font-weight: bold;
	font-size: 2em;
	text-decoration: none;
}

.parishDetails	{
	border: #177A16 solid 1px;
	padding: 1em;
}
/*
.parishDetails .img_r	{
	width: 20%;
}
*/

.sub-left	{	/* left subdivision of box, e.g. leftmain */
	clear: left;
	float: left;
	width: 48%;
	margin-right: 1%;
}

.sub-right	{	/* right subdivision of box, e.g. leftmain */
	float: left;
	width: 48%;
	margin-left: 1%;
}
.quotediv	{
	border: 4px solid #177A16;
	border-radius: 10px;
	width: 85%;
	padding: 10px;
	background-color: #ffffff;
	line-height: 120%;
	margin-bottom: 1em;
	box-shadow: 3px 3px 3px #555555;	/* horiz vert blur colour */
}
.quotediv h2	{
	font-size: 1.3em;
	font-weight: normal;
	margin-bottom: 0.5em;
	text-align: center;
	margin-top: 0.5em;
}
.quotebox	{
	display: inline;
	padding-left: 1.2em;
	padding-right: 1.2em;
	line-height: 140%;	
}
.quoteattr	{
	font-style: italic;
	text-align: right;
	margin-top: 0.8em;
}

.quoted	{
	quotes: "\201c" " \201d";
}
.quoted:before	{
	content: open-quote " ";
	font-weight: bold;

}
.quoted:after	{
	content: " " close-quote;
	font-weight: bold;

}
.radioinput	{		/* radio button  */
	margin-top: 10px;
	margin-left: 2%;
}
.radiolabel	{	/* radio button label  */
	margin-top: 10px;
}
.selector {	/* selector in form */
	margin-left: 200px;
	margin-top: 20px;
	font-size: 2em;
}

.relative	{
	position: relative;
	clear: both;
}

.openq	{
	vertical-align: text-bottom;
}
.closeq	{
	vertical-align: text-top;
}

.redtext {
	color: #FF0000;
}

.r10_report_head, .rsurvey_report_head, .head26	{
	font-family: wdvta, sans-serif;
	text-align: center;
	font-size: 2.5em;
	margin-top: 1.3em;
	font-weight: bold;
	margin-bottom: 0.5em;
	color: #177A16;
}

.rsurvey_report_head	{
	margin-top: 0.5em;
}

.r10_report_subhead	{
	font-size: 1.8em;
	text-align: center;
	margin-top: 0.5em;
	color: #7C3D02;
}

.r10boxinsert	{
	float: right;
	margin-left: 1.5em;
	margin-bottom: 0.8em;
	border: 1px solid #660000; 
	border-radius: 10px;
	padding: 1em;
	padding-top: 0.3em;
	width: 50%;
	font-size: 90%;
	background-color: #f8fff0;
}

.r10boxinsert p	{
	line-height: 1.2em;
}

.rsurveyborder {
	margin-left: 0;
	font-size: 100%;
	margin-top: 3em;
	border: 1px solid #660000;
	border-radius: 10px; 
	padding: 2%; 
	padding-top: 0.3em;
	background-color: #f8fff0;		
}

.r10tab	{
	margin: auto;
}
.r10tab td	{
	text-align: center;
}
.r10quote	{
	color: #177A16;
	font-size: 150%;
	float: right;
	width: 30%;
	padding-left: 15px;
	margin-top: 1.5em; 
}
.r10quote em	{
	font-size: 60%;
}

.r10partab	{
	float: right;
	border: 2px solid #550000;
	border-radius: 10px;
	width: 50%;
	margin-bottom: 1em;
	margin-top: 1em;
	margin-left: 1em;
	padding: 0.5em;
}
.r10partab figure	{
	float: right;
	max-width: 35%;
}
.r10partab table	{
	float: left;
	max-width: 65%;
}
.r10partab	td	{
	background-color: #ffffff;
	border: none;
	padding: 5px;
}


.selectspacer	{
	margin-left:2%;
}

.subnav	{
	text-decoration: none;
	background-color: #037C04;
	line-height: 140%;
	padding: 5px;
	color: #FFFFFF;
	border: 1px solid #037C04;
	display: table-cell;
	font-size: 90%;
}

.subnav:hover {
	background-color: #FFFFFF;
	color: #037C04;
}

.tooltip	{
	position: relative;
	left: 0px;
	top: 0px;
}

.tooltip:hover:before	{
	background-color:	#ddffdd;
	color:	#004400;
	content: attr(data-parish);
	position: absolute;
	right: 0px;
	bottom: 1.8em;
	padding: 5px;
	white-space: nowrap;
	z-index: 2;
}

.totwhead {
	font-size: 1.5em;
	color: #177A16;
	margin-bottom: 5px;
	text-align: center;
	padding-top: 20px;
}

.inline	{	/* for construction of hamburger links */
	display: inline-block;
	white-space: nowrap;
}

.warn	{
	color: red;
	font-weight: 600;
}

.videoWrapper {	/* from CSS-tricks Fluid width video */
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;	/* in CSS-tricks code, but it bars result */
	padding-top: 0;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.videopubs	{
	width: 50%;
	margin-top: 1em; 
	margin-left: auto;
	margin-right: auto;
}

.lt800show, .lt640show, .lt480show {
	display: none;
}
.lt800vanish, .lt640vanish, .lt480vanish	{
	display: block;
}


#logo {
	float: right;
	margin-bottom: 0;
	margin-top: 3.5em;
}

#masthead {
	background-image: url('images2/banner.png');
	width: 100%;
}
#masthead #logo	{
	max-width: 25%;
}
/* 26 */
#treescape	{
	background-image: url('images2/treescape.png');
	width: 100%;
	height: 125px;
}
#oakmargin	{	
	background-image: url('images2/oak-leaves-margin.png');
	background-repeat: repeat-y;
	background-position: left;
	background-size: 5%;
}

#small_title	{
	font-size: 0.8em;
	line-height: 1.1em;
}

#title {
	font-family: wdvta, sans-serif;
	font-size: 2.2em;
	line-height: 0.9em;
	font-weight: bold;
	color: #823D01;
	white-space: nowrap; 
	padding-left: 2%;
	padding-top: 0.6em;
	max-width: 70%;
	float: left;
}

#subtitle	{	/* 26 */
	font-family: catamaran;
	font-size: 0.8em;
	font-weight: 7;
}

#page_content, #page_content_limit {
	/* single column page */
	clear: both;
	float: left;
	margin-right: 0;
	margin-left: 5%; /* added for oak margin */
	padding-left: 1%;
	width: 90%;
}
#page_content_limit	{
	max-width: 1200px;
}

#main_content, #main_content_narrow {
	/* this is for lefthand content area 2-column pages     */
	float: left; 
	margin-left: 5%;
	color: #000000;
	padding-left: 1%;
	width: 68%; 
}
#main_content_narrow	{
	width: 48%;
}
#sidebar, #sidebar_wide {
	/* this is for righthand content area of 2-column pages     */
	float: right;
	width: 20%;			
	padding-left: 1%; 
	border-left-style: solid;
	border-left-width: 1px;
	border-left-color: #663300;
	margin-right: 1%;
}
#sidebar_wide	{
	width: 40%;
}

#main_content_r	{
	/* this is for righthand content area of 2-column pages     */
	float: left;
	padding-left: 1%;
	width: 68%;
}
#sidebar_l	{
/* this is for lefthand content area of 2-column pages     */
	float: left;
	margin-left: 5%;
	margin-right: 1%;
	width: 20%;			
	padding-left: 1%;
	padding-right: 1%; 
	border-right-style: solid;
	border-right-width: 1px;
	border-right-color: #663300;
}

#navi {		/* style of nav bar: <ul id="navi"> */
	clear: left;
	height: 50px;
	height: 60px;	/* 24 Feb 2024 */
	font-family: sans-serif;
	margin-top: 0;
	margin-bottom: 1.5em;
	padding-left: 0.4em;	/* spacing between top level menu items */
	padding-top: 0px;
	padding-bottom: 2px; 
	font-size: 0.9em;
	background-color: #037C04;
	float: left;
	list-style-type: none;
	width: 99%; /* makes nav bar stretch across almost all page 
					though 100% causes permanent horizontal scroll bar*/
}

#navi li	{	/* all <li>s including lower levels */
	float: left;
	position: relative;
	z-index: 10;
}

#navi a {	
	display: table-cell;	 /* allows vertical-align as opposed to block */
	height: 26px; 	/* if not set then height taken from text */
	vertical-align: middle; 
	border-style: none;
	margin: 0px;
	border-width: 0px;
	padding: 7px 9px 10px 12px;  /* top right bottom left */
	text-decoration: none;
	background-color: #037C04;
	color: #ffffff;
	white-space: nowrap; 
	text-align: center;
}
	
#navi a:hover {   
	background-color: #FFFFFF;
	color: #177A16;
}

#navi ul	{	/*	dropdown box properties */
	background-color: rgba(255,255,255,0.7); 	/* background colour of dropdowns */
	padding: 5px 5px 5px 0px; 
	list-style-type: none;
	position: absolute;
	display: none;
	top: 0px;
	margin-top: 1.5em;
}

#navi ul li {	/* space the items */
	padding-top: 0px;	
	float: none;
	margin-top: 5px;
}

#navi li:hover ul	{ /* display dropdown on hover */
	display: block;	/* alternative to above line, works better for iPad */
	top: 25px;		/* just contiguous with element above so dropdown not lost as cursor moves */
}

#navi li:hover ul a{ /*  The persistent hover state does however create a global
 					style for links even before they're hovered. Here we undo these effects. */
	text-decoration: none;
	background-color:  #037C04;
	color: #ffffff;
	border: 1px solid #037C04;	/* ensure spacing is the same as the hovered style */
	height: 0px;	/* dropdown text height */
	padding-top: 7px;
	padding-bottom: 6px;
}

#navi li:hover ul a:hover{ /* Here we define the most explicit hover states -
								what happens when you hover each individual link. */
	background-color:#ffffff;
	color: #177A16;
	border: 1px solid #037C04;
}

.phMenu1	{	/* <ul> of level 1 Menu */
	clear: left;
	list-style-type: none;
	font-family: sans-serif;
}
.phMenu1 li	{
	float:left;
	background-color: #037C04;
	padding: 3px 5px 2px 5px;
	margin-right: 2px;
	text-align: center;
	width: 8em;	
	margin-bottom: 0px;
	border: 0;
	height: 2.2em;
}
.phMenu1 a	{
	color: #ffffff;
	text-decoration: none;
	white-space: normal;
	display: table-cell;
	vertical-align: middle;
	background-color: #037C04;
	height: 30px;
}

#hamburgerbar	{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 50px;
	background-color: rgba(3,124,4,0.8);		
	text-align: left;
	padding-left: 4%;
	z-index: 10;
	color: #ffffff;
}
#hamburgerbar a	{
	color: #ffffff;
	float: left;
}
#hamburgerbar a:active	{
	background-color: #ffffff;
	color: #037C04;		
}
#hamburgerbar a#submenu	{	/* ellipsis symbol initially not displayed, turned on for individual pages */
	display: none;
	margin-left: 15px;
}
#hamnav, #ellipsnav	{	/* compact menus for mobile devices, display property switched by js */
	display: none;
}
#ellipsnav ul	{	/* ellipsis submenu */
	position: fixed;
	top: 50px;
	left: 35px;
	list-style-type: none;
	background-color: #ffffff;
	padding-bottom: 4px;
}
#ellipsnav ul li	{	/* ellipsis submenu */
	float: none;
	padding-left: 10px;
	padding-top: 7px;
	width: 14em;
	height: 1.4em; 
	background-color: #037C04;
}
#ellipsnav ul li a	{	/* ellipsis submenu */
	font-weight: bold;
	color: #ffffff;
	text-decoration: none;
	float: none;
	padding: 5px;
}
#ellipsnav ul li a:hover	{	/* ellipsis submenu */
	background-color: #ffffff;
	color: #037C04;
}

#fb	{	/* facebook icon on nav bar, and as sep para */
	float: left;
	border: 3px solid #ffffff;
	border-radius: 4px;
	margin-top: 7px;
	margin-top: 15px;
	margin-left: 10px;
	margin-left: 20px;
	padding: 0px;
	background-color: transparent;
	display: none; 	 /* suppress facebook icon and link */
}
#fbp	{
	background-color: transparent;
	margin-left:20px;
}
#fb a	{
	display: inline;
	padding: 0px;
}

#fbdiv	{
	width: 40px;
	height: 40px;
	background-image: url("images2/fb_icon_40x40.png");
	background-size: cover;
}
#fbdiv:hover	{
	background-image: url("images2/fb_icon_40x40_hov.png");
}
#hamfb	{
	margin-top: 7px;
	margin-left: 20px;
	border: 2px solid #ffffff;
	border-radius: 4px;
	display: none;	/* suppress facebook icon and link */
}

/* Jubilee Tree Map popups */
#popup	{
	max-width: 1200px;
	padding: 1%;
	box-sizing: border-box;
}
#popup table	{
	border: 2px solid #006600;
	border-collapse: collapse;
	margin-top: 2em;
	margin-bottom: 2em;
	width: 100%;
	margin-right: 0;
}
#popup td	{
	border: 1px solid #006600;
	background-color: #ffffff;
	padding: 8px;
}
#popup td:nth-child(1)	{
	font-weight: bold;
}
#popup img	{
	max-width: 100%;
	margin-top: 2em;
}

#popup h1, #popup h2 {
	text-align: center;
}


.grid-container {
	display: grid;
	grid-template-columns: 49% 49%;
	column-gap: 2%;
}

.grid-item	{
	text-align: center;
}
.grid-item-left	{
	text-align: left;
}
.grid-item-right	{
	text-align: right;
}

.grid-item img	{
	max-width: 100%;
}

/* 26 */
.grid-container3, .grid-container3-26	{
	display: grid;
	grid-template-columns: auto 45% auto;
	column-gap: 1%;
}
/* 26 */
.grid-container3-26	{
	grid-template-columns: auto 75% auto;
}

.grid-container-3	{
	display: grid;
	grid-template-columns: 32% 32% 32%;
	column-gap: 1%;
	margin-top: 1em;
}


#r10hid .grid-container-3 {
	grid-template-columns: auto 65% auto;
}

.popcaption	{
	color: #000000;
	background-color: #ffffff;
	border: 2px solid #006600;
	padding: 10px;
	line-height: 120%;
	margin-top: 2em;
	margin-bottom: 2em;
	margin-left: auto;
	margin-right: auto;
}

.homebox	{
	width: 95%;
	border-color: #037C04;
	border-width: 1px;
	border-style: solid;
	border-radius: 20px;
	padding: 2%;
	box-shadow: 3px 3px 3px #555555;	/* horiz vert blur colour */
	margin-bottom: 1em;
}

.landscape	{	/* for adjusting size of images */
	width: 60%;
}
.portrait	{	/* for adjusting size of images */
	width: 40%;
}

.land	{
	width: 100%;
}
.port	{
	width: 67%;
}
.slidey	{	/* old slideshow container */
	float: left;
	width: 45%;
	margin-right: 3%;
	margin-top: 2em;
	margin-bottom: 2em;
}

.slidez	{	/* revamped slideshow container */
	width: 95%;
	margin-top: 2em;
	margin-bottom: 2em;
}

.captionclass {	/* slideshow captions */
	margin-top: 1em;
	text-align: center;
}

@media only screen
	and (max-width: 1000px)	{
/*  invokes hamburger navigation.  Was 850 before 26  */
	.lt800show 	{
		display: block;
	}
	.lt800vanish	{
		display: none;
	}
	
/* 26 */
	.head26	{
	margin-top: 80px;
	font-size: 1.5em;	/* 2jun */
	}
	
	#masthead	{
		margin-top: 50px;
		background-image: none;
		background-color: transparent;
	}
	#title	{
		white-space: normal;
/*		font-size: 1.5em;*/
		margin-left: 5%;
		margin-top: 1em;
		max-width: 65%;
	}

}	/* @media 800 */

@media only screen
	and (max-width: 640px)	{
	
	body	{
		font-size: 1em;
	}
	
	.lt640vanish {
	display: none;
	}
	.lt640show	{
	display: block;
	}
/* resolve broken narrow display for multicolumn pages, forms and google map */
	.sub-left, .sub-right	{
		clear: both;
		width: 95%;
	}
	#main_content, #main_content_narrow, #sidebar, #sidebar_wide, 
	#main_content_r, #sidebar_l, #page_content, #page_content_limit, .slidey, .slidez,
	.lefto, .rightmain	{
		clear: both;
		width: 95%;
		margin-left: 1%;
		border-style: none;
	}
	#oakmargin	{
		background-image: none;
	}	
	.label, .error, .msgtxt {	/* these are classes for forms */
		margin-left: 0;
		float: none;
		margin-bottom: 0.5em;
	}
	.label, .error	{
		text-align: left;
		width: 95%;
	}
	.msgtxt	{
		max-width: 95%;
	}
	.button	{
		margin-left: 0;
	}
	.r10partab	{
		width: 95%;
	}
	.img_full_var img	{
	max-width: 100%;
	}
	.videopubs	{
	width: 100%;
	}



}	/* @media 640 */


@media only screen
	and (max-width: 480px)	{

	.lt480vanish {
	display: none;
	}
	.lt480show	{
	display: block;
	}
	.twopics figure, .threepics figure	{
		width: 95%;
	}		
	.r10boxinsert	{
		width: 95%;
		float: none;
		margin: auto;
	}
	.r10quote	{
		font-size: 120%;
	}		

	.grid-container, .grid-container3, .grid-container-3 {
		display: grid;
		grid-template-columns: 100%;
		column-gap: 0;
	}

	.grid-container3-26	{
		grid-template-columns: auto 65% auto;
	}
	
	.img_l, .img_r	{
	max-width: 100%;
	float: none;	
	}
	.img_r_half	{
	max-width: 100%;
	float: none;
	}

	#treescape	{
	display: none;
	}
	
}	/* @media 480 */