html {
	padding: 0;
	margin: 0;
}
body {
	padding: 0;
	margin: 0;
	width: 100%;
	font-family: 'PT Sans Narrow', Arial, Helvetica, sans-serif;/* Google Font PT sans narrow (+ 'Swanky and Moo Moo', cursive, for menu headings) */
	color: #000000;/* default text colour */
	font-size: 1.05em;
	font-weight: normal;
	line-height: 1.4em;
	background-color: #212123;/* dark grey-blue - changed dynamically from xml */
	/* background: url(files/siteFiles/images/bg.jpg) no-repeat center center fixed; */
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
div, span, p, h1, h2, h3, h4, h5, h6, a, img, section, header, footer, article, nav, iframe, audio, video, ul, ol, li, iframe, object {
	display: inline-block;
}
object {
	width: auto;
	height: auto;
}
.posr {
	position: relative;
}
.posa {
	position: absolute;
}
.boxSizing {
	-webkit-box-sizing: border-box;/* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;/* Firefox, other Gecko */
	box-sizing: border-box;/* Opera/IE 8+ */
}
.borderRadius {
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-khtml-border-radius: 8px;
	border-radius: 8px;
}
.borderRadiusTop {
	-moz-border-radius-topleft: 8px;
	-moz-border-radius-topright: 8px;
	-webkit-border-top-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	-khtml-border-top-left-radius: 8px;
	-khtml-border-top-right-radius: 8px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}
.borderRadiusBot { /* 29/04/18 new */
	-moz-border-radius-bottomright: 8px;
	-moz-border-radius-bottomleft: 8px;
	-webkit-border-bottom-right-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	-khtml-border-bottom-left-radius: 8px;
	-khtml-border-bottom-right-radius: 8px;
	border-bottom-right-radius: 8px;
	border-bottom-left-radius: 8px;
}
.borderRadiusBotRight {
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom-right-radius: 10px;
	-khtml-border-bottom-right-radius: 10px;
	border-bottom-right-radius: 10px;
}
.mouseSpot {
	display: inline-block;
	position: absolute;
	width: 10px;
	height: 10px;
	background-color: #FF0000;/* for testing but hidden anyway; */
	border: none;
	visibility: hidden;
}
/* to make radio buttons bigger */
.radio {
	-webkit-appearance: button;
	-moz-appearance: button;
	appearance: button;
	border: 3px solid #777777;
	border-top-color: #777777;
	border-left-color: #777777;
	background: #EDEDED;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	margin-left: 7px;
	margin-right: 7px;
	vertical-align: text-top;
	cursor: pointer;
}
.radio:focus {
	outline: none;
}
.radio:checked {
	border: 3px solid #EDEDED;
	background-color: #333333;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#wrapper { /* more for responsive design */
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
	text-align: center;
}
	#main {
		width: 100%;/* 25/10/18 new */
		min-width: 320px;/* 25/10/18 new */
		max-width: 1020px;/* 25/10/18 instead of width */
		height: auto;
		text-align: center;
		margin-top: 48px;/* 29/04/18 instead of 18 - 2/11/18 instead of 30 - 6/11/18 instead of 40 */
	}
	#topBarBg {
		left: 0px;
		top: 0px;
		width: 100%;
		background-color: #383839;/* dark grey - changed dynamically from xml */
		height: 150px;
	}
		#topBar {
			width: 100%;
		}
			#hit {
				left: 0px;
				top: 0px;/* adjusted by js */
				width: 100%;
				min-height: 30px;
				background-color: transparent;
			}
			#navBar {
				top: 0px;
				left: 0px;/* important */
				width: 100%;
				height: auto;/* 5/11/18 instead of 100% or 150px */
			}
			.flexBox { /* 11/11/18 */
				display: -webkit-box;
				display: -ms-flexbox;
				display: flex;
				-ms-flex-wrap: wrap;
				flex-wrap: wrap;
				-ms-flex-pack: distribute;
				justify-content: space-around;/* instead of space-evenly; because better in IE [17/11/18 note: not space-between here!] */
				align-content: start;/* instead of center - might better vertical alignment */
				align-items: center;/* to centre vertically in each row (not necessary but not bad) */
				text-align: justify;/* instead of center; maybe better in some browsers */
			}
			#logo {
				top: -30px;/* 29/04/18 instead of 0 */
			}
			.menuRow {
				display: none;
				position: relative;
				width: 134px;
				height: auto;
				text-align: center;
				top: -17px;/* 11/11/18 instead of -95 */
			}
			.heading {
				width: auto;
				height: 23px;
				top: 17px;/* 2/11/18 (margin-top doesn't work here - 5/11/18 instead of 97 - 11/11/18 instead of -95 */
				white-space: nowrap;
				font-size: 1.4rem;/* 14/07/18 instead of 1.6 */
				color: #C4C4C4;
				text-align: center;/* 2/11/18 */
				margin-bottom: 12px;/* 5/11/18 */
			}
			.smBox {
				top: 150px;
				left: 200px;
				min-width: 150px;
				min-height: 30px;
				text-align: left;
			}
				.menuBtn { /* 6/06/18 instead of goBtn to also work with resetBtn [Attention, this is not the button to display or hide menu elements when window width is small!] */
					top: 7px;
					height: 22px;
					background-color: #C4C4C4;/* grey */
					border: 1px solid rgba(255, 255, 255, 0.7);/* 29/04/18 instead of FFFFFF */
				}
					.menuBtnField { /* 6/06/18 instead of goBtnField to also work with resetBtnField */
						text-align: center;
						color: #FFFFFF;
						font-size: 1em;
						width: 100%;
						height: auto;
						top: -3px;
					}
				.goBtn { /* 6/06/18 new rule but code was in goBtn class now changed to more generic menuBtn */
					left: 126px;/* 6/06/18 instead of 117 ... 21/06/18 instead of 107 [15/08/18 instead of 106] */
					width: 24px;/* 21/06/18 instead of 22 */
				}
				.resetBtn { /* 6/06/18 new */
					left: 154px;/* 15/08/18 instead of 135px - 30/10/18 instead of 155 */
					width: 40px;
				}
				.smBoxin {
					width: auto;
					height: auto;
					border-left: 1px solid rgba(255, 255, 255, 0.4);/* 29/04/18 instead of F3A948 orange */
					border-right: 1px solid rgba(255, 255, 255, 0.4);/* 29/04/18 instead of F3A948 orange */
					border-bottom: 1px solid rgba(255, 255, 255, 0.4);/* 29/04/18 instead of F3A948 orange */
					background-color: #C4C4C4;/* grey */
					padding-bottom: 3px;
					float: float;
				}
				.rightPanel { /* 24/06/18 instead of smBoxin2; just better naming */
					width: auto;
					height: auto;
					bottom: 1px;/* because of right border of smBoxin */
					border-top: 1px solid rgba(255, 255, 255, 0.4);/* 29/04/18 instead of F3A948 orange */
					border-right: 1px solid rgba(255, 255, 255, 0.4);/* 29/04/18 instead of F3A948 orange */
					border-bottom: 1px solid rgba(255, 255, 255, 0.4);/* 29/04/18 instead of F3A948 orange */
					background-color: #C4C4C4;/* grey */
					padding-right: 0px;/* 17/04/18 [15/08/18 instead of 15] */
					padding-bottom: 3px;
					max-height: 520px;
					overflow-x: hidden;/* 17/04/18 */
					overflow-y: auto;
				}
					.artistsBtn {
						left: 130px;/* 15/08/18 instead of 110 */
						top: 7px;/* adjusted in script */
						width: auto;
						height: auto;
						padding: 3px 7px 0px 6px;/* 30/10/18 instead of 3px 7px 0px 6px; (>> not >>>) */
						background-color: rgba(255, 255, 255, 0.2);
					}
						.artistsBtnField {
							text-align: center;
							color: #CCCCCC;
							font-size: 1em;
							line-height: 0.8em;
							font-weight: bold;
							width: 100%;
							height: auto;
							top: -3px;
						}
					.subMenuItem {
						float: left;
						clear: left;
						display: none;
						min-width: 196px;/* 17/04/18 instead of 170; 8/08/18 instead of 180 (because of French version) - 30/10/18 instead of 205 */
					}
					.subMenuField {
						width: auto;
						height: auto;
						white-space: nowrap;
						color: #FFFFFF;
						padding: 1px 3px 1px 7px;/* instead of right 5 */
					}
					.subMenuHeading {
						height: 26px;
						background-color: rgba(255, 255, 255, 0.7);/* 29/04/18 instead of F3A948 gold */
						margin-bottom: 5px;
						min-width: 120px;/* 15/08/18 instead of 100 */
					}
					.subMenuHeading:not(:first-child) { /* or :nth-child(n+2) */
						margin-top: 6px;
					}
						.subMenuHeadingField {
							color: #000000;
							font-weight: bold;
						}
					.subMenuChoice {
						height: 26px;
						margin-bottom: 2px;
					}
						.subMenuChoiceField {
							
						}
						.subMenuChoiceInputField {
							width: 110px;
							height: 22px;
							background-color: rgba(255, 255, 255, 0.7);
							padding: 0px 3px 3px 3px;
							line-height: 0.9em;
							color: #000000;
							border: none;
						}
						.selectBox {
							width: 12px;
							height: 12px;
							border: 1px solid rgba(255, 255, 255, 0.7);/* 29/04/18 instead of FFFFFF */
							float: left;/* 30/10/18 instead of right */
							margin-top: 5px;/* 30/10/18 instead of 8 */
							margin-left: 7px;/* 30/10/18 instead of 8 */
							margin-right: 0px;/* 17/04/18 instead of 8 - nicer; 30/10/18 instead of 10 */
						}
						.selectedBox { /* [26/03/18] little white tick */
							background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI1NTBweCIgaGVpZ2h0PSI0MDBweCIgdmlld0JveD0iMCAwIDU1MCA0MDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDU1MCA0MDAiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSJub25lIiBzdHJva2U9IiNGRkZGRUMiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2UtbWl0ZXJsaW1pdD0iMyIgZD0iTTEuMiw2YzIsMS4xNjcsMy41NSwyLjY2Nyw0LjY1LDQuNWMxLjIzMy0zLjQ2NywzLjEtNi41LDUuNi05LjEiLz48L2c+PC9zdmc+);
							background-repeat: no-repeat;
						}
			#options { /* 28/03/18 */
				position: relative;/* 2/11/18 instead of absolute */
				top: 160px;
				left: 196px;/* 31/10/18 instead of 695 - 2/11/18 instead of 688 - 5/11/18 instead of 220 */
				width: auto;/* 31/10/18 - 2/11/18 instead of 320 (it doesn't matter if everything doesn't exactly fit in French) - 5/11/18 instead of 230 - 11/11/18 instead of 160px */
				height: 28px;/* 5/11/18 */
				text-align: left;
				white-space: nowrap;/* 8/05/18 because needed when font doesn't load properly */
				margin-left: 3px/* 9/11/18 - for responsive design, nicer when small window */
			}
				#displayNumber {
					height: 13px;
					opacity: 0.7;
				}
				#updateBtn { /* 17/04/18 new */
					margin-right: 5px;/* 30/10/18 instead of 15 - 2/11/18 instead of left 10 */
					text-decoration: underline;
					text-transform: capitalize;
					margin-top: -1px;/* 2/11/18 instead of -1 - 6/11/18 back to -1 */
					vertical-align: text-top;
				}
			#infoBox {
				position: relative;/* 2/12/18 instead of absolute */
				top: 160px;
				left: -21%;/* 31/10/18 instead of 0 - 2/11/18 instead of 12 - 5/11/18 instead of -17 [9/12/18 instead of -23 because of bigger radio buttons] */
				width: 18%;/* 2/11/18 instead of 320px */
				height: 28px;/* 31/10/18 instead of auto */
				text-align: right;
				white-space: nowrap;
			}
				#inforField {
					height: 13px;
					opacity: 0.7;
				}
			#langBox {
				top: 7px;/* 5/11/18 instead of 16 */
				left: 19px;/* 31/10/18 instead of 8 - 2/11/18 instead of 12 */
				width: auto;/* 1/11/18 instead of 320px */
				height: 28px;/* 31/10/18 instead of 19px */
				text-align: left;
				color: #FFFFFF;/* 29/04/18 new */
				opacity: 0.6;
				margin-left: 3px;/* 9/11/18 for responsive design - nicer when small window */
			}
				.lang {
					width: auto;
					height: 24px;
					white-space: nowrap;
					font-family: 'open sans', Arial, Helvetica, sans-serif;
					font-size: 0.85em;
					line-height: 1em;
					padding: 3px 0px 3px 0px;/* 31/10/18 instead of just 3px */
					text-align: center;
					text-decoration: underline;
				}
				.lang:not(:last-child) {
					margin-right: 10px;/* 25/10/18 instead of 5 - 31/10/18 now here, not in .lang */
				}
			#menuBtn { /* 1/11/18 new (absolute position) */
				top: 202px;/* 6/11/18 instead of 16 */
				left: 437px;/* 5/11/18 set by js anyway */
				display: none;
			}
			#searchBox {
				top: 7px;/* 5/11/18 instead of 18 */
				right: 10px;
				width: 230px;/* 1/11/18 instead of 290 - 2/11/18 instead of 320 */
				height: 30px;
				font-family: 'open sans', Arial, Helvetica, sans-serif;
				font-size: 0.85em;
				line-height: 1em;
				opacity: 0.6;
				color: #FFFFFF;/* 29/04/18 new */
				text-align: right;/* 1/11/18 new */
			}
				#searchField {
					width: 150px;/* can be up to 250 be smaller is nicer - 2/11/18 instead of 220 */
					height: 16px;/* 1/11/18 instead of 18 */
					padding: 4px;
					margin-right: 8px;/* 1/11/18 instead of 4 */
					border: 1px solid rgba(255, 255, 255, 0.3);/* 29/04/18 instead of blue #002497 - 1/11/18 instead of 0.5 */
					/* 1/11/18 no, right, but not declared.  float: left; */
					text-align: left;/* but needs to be set in js as well */
					outline: 0px solid transparent;/* nicer - no border for contentEditable */
					overflow: auto;
					white-space: nowrap;/* single line */
					background-color: rgba(255,255,255, 0.1);/* 1/11/18 instead of 0.3 */
				}
				#searchBtn {
					width: auto;
					height: 16px;/* 1/11/18 instead of 18 */
					padding: 4px;
					border: 1px solid rgba(255, 255, 255, 0.5);/* 29/04/18 instead of blue #002497 - 1/11/18 instead of 0.7 */
					text-align: center;
					float: right;/* 1/11/18 instead of left */
					background-color: rgba(255,255,255, 0.1);/* 1/11/18 new */
				}
		#contentPanel { /* container of 'gallery' and 'page' panels (iframe) */
			top: 230px;/* 6/11/18 instead of 250 */
			left: 0px;
			width: 100%;
			height: auto;
			text-align: left;
			margin-top: 25px;
			overflow: visible;/* doesn't seem to work */
		}
			.searchInfo { /* 24/11/18 for search engine */
				position: absolute;
				left: 0px;
				top: 0px;
				width: 100%;
				height: auto;
				font-size: 0.1px;
				color: rgb(33, 33, 35);/* grey of background */
				background-color: transparent;/* safety */
				line-height: 0.1px;
				text-align: center;
				margin: 0px;
				padding: 0px;
			}
			.contentPage { /* class for 'gallery' and 'page' panels (iframe) */
				width: 100%;
				height: auto;
				border: 0;
				padding: 0px;
				margin: 0px;
				min-width: 320px;/* 25/10/18 instead of 500 */
				height: auto;
			}
			#page { /* iframe or section or div: content of the page, except gallery */
				margin-bottom: 20px;
				min-height: 80px;/* 24/06/18 nicer...before it's set */
			}
				.closeBtn {
					right: 0px;
					top: 0px;
					width: 24px;
					height: 24px;
					background-image: url(data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJjbG9zZUJ0biIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIxOHB4IiBoZWlnaHQ9IjE4cHgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTggMTgiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxwb2x5Z29uIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjMzMzMzMzIiBwb2ludHM9IjE4LDEuMzg0IDE2LjYxNSwwIDksNy42MTYgMS4zODQsMCAwLDEuMzg0IDcuNjE2LDkgMCwxNi42MTUgMS4zODQsMTggOSwxMC4zODUgMTYuNjE1LDE4IDE4LDE2LjYxNSAxMC4zODUsOSAiLz48L3N2Zz4=);
					background-color: rgba(255, 255, 255, 0.5);
					border: 3px solid rgba(255, 255, 255, 0.1);
					opacity: 0.5;
					background-repeat: no-repeat;
					background-position: center;
					text-align: center;
				}
			#gallery { /* iframe or section or div: gallery of selected art themes and forms */
				min-height: 80px;/* 24/06/18 nicer...before it's set */
			}
	#footer { /* 6/11/18 wasn't there before */
		width: 100%;
		height: auto;
	}