﻿body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	background-color:#a7b098;
	color:#5f5f01;
}

.main-block {
	max-width: 860px;
	background: white /*#FFeecc white*/;
/*    border:3px #d9d8b4 solid; */
	padding: 0 4px 0 4px;
	margin: auto;
	text-align: left;
	overflow: auto;
	height:auto;
}

a:link, a:visited, a:active, a:hover {
	background: transparent;
	text-decoration: none;
}
a:link {
	color: #cc3300;
}
a:visited {
	color: #64656a;
}
a:active {
	color: #bb8800;
}
a:hover {
	color: #FF9933;
}

.m1fwrp, .m2wrp {
	float: left;
	margin-top: 4px;
	width: 100%;
	height: 58px;
	background: white;
	overflow: hidden;
	position: relative;
}

.toparw {
	position: absolute;
	left: 0px;
	background: white;
}


.menubox, .menuboxS {
	width: 100%;
	height: 74px /* container for top menu */;
	background: #d9d8b4; /*#888844*/
	overflow-x: auto;
	overflow-y: hidden;
	white-space: nowrap;
	float: left;
}

.menubox {
	background: #888844 /*#888844*/  ;
}

.menubox a, .menuboxS a {
	display: inline-block;
	vertical-align: middle; /* worked for ipad */;
	overflow: hidden;
	width: 94px; /* 94px otherwise doesn't fold to 2nd line */;
	height: 57px;
	white-space: normal;
	color: white;
	font-family: Tahoma,"Trebuchet MS",sans-serif;
	font-size: .9em;
	text-align: center;
	text-decoration:none
}
.menubox div {
	display: inline-block;
}
.menubox {
	background: #888844 /*#888844*/  ;
}
/* colour of second menu #a3a375 */
.menuboxS a {
	height: 60px;
	width: auto;
}
.menuboxS a:hover {
	background: #aaccaa;
}
.menuboxS a img {
	height: 60px;
}


a.hlt {
	background: #e7f2d8;
	color: black;
}

.botarw {
	position: absolute;
	right: 0px;

}

.mid-menu {
	font-size: .8em;
	text-align: center;
	margin-bottom: 0;
}

.men2arw {
	position: absolute;
	right: 0;
}

.fxr60, .fxr100, .fxr120, .fxr125, .fxr150, .fxr160, .fxr175, .fxr200, .fxr225, .fxr250, .fxr275, .fxr300, .fxr325, .fxr350, .fxr400, .fxr450 { float: right; margin-left: 5px; margin-right: 3px; background-color:#FFFFFF}
.fxl60, .fxl100, .fxl120, .fxl125, .fxl150, .fxl160, .fxl175, .fxl200, .fxl225, .fxl250, .fxl275, .fxl300, .fxl325, .fxl350, .fxl400, .fxl450 { float: left; margin-left: 3px; margin-right: 5px; background-color:#FFFFFF}

.fxr60 { width:60px }
.fxl60 { width:60px }
.fxr100 { width:100px }
.fxl100 { width:100px }
.fxr120 { width:120px }
.fxl120 { width:120px }
.fxr125 { width:125px }
.fxl125 { width:125px }
.fxr150 { width:150px }
.fxl150 { width:150px }
.fxr160 { width:160px }
.fxl160 { width:160px }
.fxr175 { width:175px }
.fxl175 { width:175px }
.fxr200 { width:200px }
.fxl200 { width:200px }
.fxr225 { width:225px }
.fxl225 { width:225px }
.fxr250 { width:250px }
.fxl250 { width:250px }
.fxr275 { width:275px }
.fxl275 { width:275px }
.fxr300 { width:300px }
.fxl300 { width:300px }
.fxr325 { width:325px }
.fxl325 { width:325px }
.fxr350 { width:350px }
.fxl350 { width:350px }
.fxr400 { width:400px }
.fxl400 { width:400px }
.fxr450 { width:500px }
.fxl450 { width:500px }

/* pixel widths */
.w150 { width: 150px; margin-left:auto; margin-right:auto }
.w175 { width: 175px; margin-left:auto; margin-right:auto }
.w200 { width: 200px; margin-left:auto; margin-right:auto }
.w225 { width: 225px; margin-left:auto; margin-right:auto }
.w250 { width: 250px; margin-left:auto; margin-right:auto }
.w300 { width: 300px; margin-left:auto; margin-right:auto }
.w325 { width: 325px; margin-left:auto; margin-right:auto }
.w350 { width: 350px; margin-left:auto; margin-right:auto }
.w400 { width: 400px; margin-left:auto; margin-right:auto }
.w500 { width: 500px; margin-left:auto; margin-right:auto }
.w600 { width: 600px; margin-left:auto; margin-right:auto }
.w700 { width: 700px; margin-left:auto; margin-right:auto }

/* percentage widths */
.w100 { width: 100%; }
.w90 { width: 90%; margin-left:auto; margin-right:auto }
.w80 { width: 80%; margin-left:auto; margin-right:auto }
.w70 { width: 70%; margin-left:auto; margin-right:auto }
.w60 { width: 60%; margin-left:auto; margin-right:auto }
.w40 { width: 40%; margin-left:auto; margin-right:auto }

.nbr200 { width:200px; background-color:#EFF7CC; float:right }

.container { display: flex; flex-wrap: wrap; justify-content: center; background-color:white }

h1, h2, h3, h4, h5, h6, p, li, .caption, .credit, .note-text {
	font-family: Verdana, Arial, sans-serif;
	font-style: normal;
	font-weight: normal;
	text-align: center;
}

h1 { color:#825704; font-size: 1.4em; margin-top: 30px; margin-left:auto; margin-right:auto; width: 90% }

h2 { color: #aa3818; font-size: 1.2em; margin-top: 20px }

h3 { font-size: 1em; color:#2f7342;}

h4 { font-size: 1em; font-style:italic; color:#2f7342; float:left; }

p { color:#5f5f01; text-align:left; font-size:1em }

.note-text {
	color: #6a6402;
	font-size: .9em;
	text-align: left;
}

li {
	text-align: left;
}
	
.caption {
	text-align:center;
	color: #6a6402;
	font-style: italic;
	font-size: .9em;
}

.caption-left, .credit {
	text-align: left;
	color: #6a6402;
	font-size: .9em;
	font-style: italic;
	display: block;
}

.credit {
	text-align: right;
}

.caption-narrow {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	color: green;
	font-size: .8em;
	font-style: normal;
}

.caption-flex {
	color: #6a6402;
	font-style: italic;
	font-size: .9em;
	margin-top:0;
	text-align:center
}

.caption-wide {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	color: #6a6402;
	font-style: italic;
	font-size: .9em;
	width: 80%
}

.item {
  background-color: #f1f1f1;
  width: 170px;
  text-align: center;
  border: 10px white solid;
}

.fec {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	color: green;
	font-size: .8em;
	font-style: normal;
}


.adl-200x200 {
	float:left; 
	width: 200px; height: 200px; 
	margin-right: 8px; 
	background-color:#e6e6c9;
}

.adr-200x200 {
	float:right; 
	width: 200px; height: 200px; 
	margin-left: 8px; 
	background-color:#e6e6c9;
}

.adc-200x200 { 
	width: 200px; height: 200px; 
	margin-left: auto; margin-right:auto;
	background-color:#e6e6c9;}

.adl-250x250 {
	float:left; 
	width: 250px; height: 250px; 
	margin-right: 8px; 
	background-color:#e6e6c9;
}

.adr-250x250 {
	float:right; 
	width: 250px; height: 250px; 
	margin-left: 8px; 
	background-color:#e6e6c9;
}

.adr-120x600 {
	float: right;
	width: 120px; height: 600px; 
	margin-left: 8px; 
	background-color:#e6e6c9;
}

.adl-120x600 {
	float: left;
	width: 120px; height: 600px; 
	margin-right: 8px; 
	background-color:#e6e6c9;
}

.hide {
	display: block;
}

.matched-content {
	background: #F9F9EC;
	width: 94%;
	height:auto;
	margin-left: auto;
	margin-right: auto;
}

/* cookie law from https://www.creare.co.uk/js-eu-cookie-law-banner */
#cookie-law {
	position: fixed;
	bottom: 0px;
	width: 100%;
	height: auto;
	color: #000000;
	background: #EAEED5;
	margin-left: 0;
	margin-right: 0;
	text-align: center;
	border-top: #a86145 1px dotted;
	z-index: 999;
}
#cookie-law p {
	font-size: .8em;
	font-weight: normal;
	text-align: center;
	color: #682008;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
}
/* end cookie law from https://www.creare.co.uk/js-eu-cookie-law-banner */


.ft-icons {
	position: fixed;
	width: 25px;
	height: 50px;
	right: 3%;
	bottom: 130px;
	z-index: 100;
}

.back-color1n, .back-colorn, .back-color2n, .back-color3n, .back-color4n, .back-color5n, .back-color6n, .back-color7n, .back-color8n, .back-color9n {
	padding: 12px;
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	width: 90%;
}

.back-colorn {
	background-color: #fbf8f7;
}
.back-color1n {
	background-color: #edf6e3;
}
.back-color2n {
	background-color: #e2e2d2;
}
.back-color3n {
	background-color: #ececea;
}
.back-color4n {
	background-color: #eef8fa;
}
.back-color5n {
	background-color: #f9f6f2;
}
.back-color6n {
	background-color: #f5f5fe;
}
.back-color7n {
	background-color: #ededed;
}
.back-color8n {
	background-color: #f6edf8;
}
.back-color9n {
	background-color: #d8eaef;
}
.note-webmaster {
   	background-color: white; border: 1px green solid; margin-left:auto; margin-right:auto; padding: 5px; width: 80%;
}
.contact {
	width: 90%; margin-left: auto; margin-right: auto; padding: 1%; background-color: #ffffff; border: 2px green solid;
}

.contact-l {
	width: 40%; float: left; padding: 1%; background-color: #ffffff; border: 2px green solid; margin-right: 5px;
}

.contact-r {
	width: 40%; float: right; padding: 1%; background-color: #ffffff; border: 2px green solid; margin-left: 5px;
}

/*  dot nb will go once all pages have this stylesheet*/
.nbr, .nbr20, .nbr30, .nbr40, .nbr, .nbr50, .nbr60, .nbr70 {
	width: 40%;
	background-color: #ecebdb;
	float: right;
	padding: 1%;
	margin-left: 10px;
}
.nbl, .nbl30, .nbl40, .nbl50, .nbl60 {
	float: left;
	width: 40%;
	background-color: #ecebdb;
	padding: 1%;
	margin-right: 10px;
}
.nbl60 {
	width: 60%;
	background-color: #DCFFD5;
}
.nbl50 {
	width: 50%;
	background-color: #ececea;
}
.nbl40 {
	width: 40%;
	background-color: #EAEED5;
}
.nbl30 {
	width: 30%;
	background-color: #edf6e3;
}
.nbr30 {
	width: 30%;
	background-color: #EAEED5;
}
.nbr20 {
	width: 20%;
	background-color: #EAEED5;
}
.nbr40 {
	width: 40%;
	background-color: #ececea;
}
.nbr50 {
	width: 50%;
	background-color: #edf6e3;
}
.nbr60 {
	width: 60%;
	background-color: #F5EDDE;
}
.nbr70 {
	width: 70%;
	background-color: #e2e2d2;
}

@media screen and (max-width: 550px) {

.fxr250, .fxl250,.fxr275, .fxl275, .fxr300, .fxl300, .fxr350, .fxl350, .fxr400, .fxl400, .fxr450, .fxl450 { float: none; margin-left:auto; margin-right:auto; }

.w60, .w70, .w500, .w600, .w700  { width: 400px }

.hide { display: none }

}

@media screen and (max-width: 480px) {

.fxr250, .fxl250,.fxr275, .fxl275, .fxr300, .fxl300, .fxr350, .fxl350, .fxr400, .fxl400, .fxr450, .fxl450 { float: none; margin-left:auto; margin-right:auto; }

.w60, .w70, .w500, .w600, .w700  { width: 325px }

.hide { display: none }

}
