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;
}
div, span, p, h1, h2, h3, h4, h5, h6, a, img, section, header, footer, article, nav, iframe, audio, video, ul, ol, li, iframe {
	display: inline-block;
}
.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;
}
#wrapper { /* more for responsive design */
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
	text-align: center;
}
	#main {
		width: auto;
		height: auto;
		text-align: center;
		min-height: 200px;/* 16/05/18 (only useful to show border of infoField 'No art piece could be found...') */
	}
		#gallery {
			text-align: justify;/* 25/10/18 instead of center; maybe better in some browsers */
			/* 27/04/18 'flex' excellent! Updated with the right prefixes 10/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;/* 25/10/18 instead of space-evenly; because better in IE [17/11/18 around definitely better in IE instead of to evenly (not space-between; not good when window width is small!)] */
			align-content: start;/* 25/10/18 instead of center - might better vertical alignment */
			align-items: center;/* 25/10/18 to centre vertically in each row (not necessary but not bad) */
			/* ~~~~~~~~~~~~~~~~~~~ */
		}
			.picBox { /* no float otherwise text-align center of container not work */
				display: none;
				width: auto;
				height: auto;
			}
			.slide {
				clear: both;
				width: 100%;
				margin: 0px;
				padding: 10px;
				text-align: center;
				border-top: 1px solid rgba(0, 0, 0, 0.1);
				border-bottom: 1px solid rgba(0, 0, 0, 0.1);
				background-color: rgba(0, 0, 0, 0.06);
				overflow: hidden;
			}
				.slidePic {
					min-width: 120px;/* 16/06/18 new */
					min-height: 80px;/* 16/06/18 new */
					max-width: 100%;
					max-height: 800px;
				}
				/* 16/06/18 new */
				.loadingBox {
					position: absolute;
					top: 0px;
					left: 0px;
					width: 100%;
					height: auto;
					margin-top: 60px;
					text-align: center;
				}
				/* ~~~~~~~~~~~~ */
				.closeBtn {
					right: 0px;
					top: 0px;
					width: 30px;/* 28/04/18 instead of 24 */
					height: 30px;/* 28/04/18 instead of 24 */
					/* 28/04/18 image in script now  background-image */
					background-color: rgba(255, 255, 255, 0.5);
					border: 3px solid rgba(255, 255, 255, 0.1);
					opacity: 0.8;/* 28/04/18 instead of 0.5 */
					background-repeat: no-repeat;
					background-position: center;
					text-align: center;
					z-index: 1;
				}
				.zoomBtn { /* 28/04/18 */
					right: 0px;
					top: 30px;/* adjusted to bottom of image when loaded */
					width: 30px;
					height: 30px;
					background-color: rgba(255, 255, 255, 0.5);
					border: 3px solid rgba(255, 255, 255, 0.1);
					opacity: 0.8;
					background-repeat: no-repeat;
					background-position: center;
					text-align: center;
					z-index: 1;
				}
			.frame {
				margin: 0px 5px 0px 5px;/* 15/11/18 instead of 0px */
				padding: 10px 5px 10px 5px;/* 15/11/18 instead of just 10px */
				float: left;/* 26/04/18 new (because not only images now) */
				max-width: 320px;/* 26/04/18 new - 5/11/18 instead of 600 */
			}
				.pic {
					float: left;
					clear: both;/* not required but for safety */
				}
				.framePic {
					max-height: 216px;
					max-width: 320px;/* 5/11/18 new */
				}
				.picField {
					color: #CFD3EA;
					text-align: left;
					font-size: 0.75em;
					line-height: 1.1em;
					float: left;
					clear: left;/* 30/04/18 instead of 'both' because of 'feelBtn' */
					padding-top: 3px;
				}
				.artItem { /* 26/04/18 new */
					max-width: 100%;
					height: auto;
					float: left;
					clear: both;
				}
				a.artItem { /* 26/04/18 new */
					color: #CFD3EA;
				}
				.textLink { /* 29/05/18 email link on name [22/07/18 instead of 'emailLink' to be used for other things] */
					cursor: pointer;
					text-decoration: underline;
				}
				.emailBox { /* 29/05/18 email iframe - in main */
					position: absolute;
					top: 50px;
					left: 0px;/* adjusted by code */
					min-width: 320px;/* 25/10/18 new */
					max-width: 650px;/* 25/10/18 instead of width */
					height: auto;
					min-height: 500px;
					background-color: #FFFFFF;
					border: 1px solid #666666;
				}
				/* 30/04/18 feelBtn */
				.feelBtn {
					float: right;
					width: auto;
					min-width: 60px;/* ok up to 999999 for feelField; then it's on 2 lines. I can't find how to keep it single line! */
					text-align: right;
				}
					.feelField {
						margin-top: 3px;/* 30/06/18 instead of 5 */
						white-space: nowrap;
						width: auto;
						min-width: 30px;
						overflow: visible;
						background-color: transparent;
						border: none;
						text-align: right;
					}
					.feelPic { /* input */
						margin-top: 5px;
						width: 25px;
						height: 20px;/* 30/06/18 instead of 25...but doesn't really change anything */
						background-image: url(../../siteFiles/images/feelPic.svg);
						background-repeat: no-repeat;
						background-color: transparent;
						background-size: 23px;
						border: none;
						float: right;
					}
				/* ~~~~~~~~~~~~~~~ */
				/* 30/06/18 feltBtn and slider */
				.feltBtn {
					max-width: 22px;
					float: right;
					margin: 5px 0px 0px 1px;
				}
				/* ~~~ slider ~~~ */
				.sliderBox {
					width: 100%;/* to clear space around (float left and clear both don't do it!) */
					margin: 5px 7px 0px 7px;
					float: left;
					clear: both;
				}
					.slider {
						position: relative;
						left: 0px;
						top: 0px;
						min-width: 100px;/* sliderGuide width + 8 */
						font-size: 0.8em;
						line-height: 0.9em;
						font-weight: normal;
						float: left;
						min-height: 53px;/* because here -OK+ are placed under the slider-guide */
						color: #FFFFFF;/* because gallery background is almost black */
					}
						.sliderTitle {
							position: absolute;
							left: -7px;/* because of margin-left of slider */
							top: 0px;
							width: auto;
							height: auto;
							white-space: nowrap;
						}
						.sliderValue {
							position: absolute;
							right: 0px;
							top: 0px;
							width: auto;
							height: auto;
							text-align: right;
							white-space: nowrap;
						}
						.sliderGuide {
							position: absolute;
							left: 0px;
							top: 24px;
							width: 92px;/* slider width - 8 */
							height: 4px;
							background-color: rgba(255, 255, 255, 0.4);/* because gallery background is almost black */
							border: 1px solid #FFFFFF;/* because gallery background is almost black */
						}
						.sliderBtn {
							position: absolute;
							left: 3px;
							top: 15px;
							width: 10px;
							height: 23px;
							background-color: rgba(225, 225, 225, 0.4);
							border: 1px solid #FFFFFF;/* because gallery background is almost black */
							-moz-border-radius: 3px;
							-webkit-border-radius: 3px;
							-khtml-border-radius: 3px;
							border-radius: 3px;
							z-index: 1;
						}
						.sliderNotch {
							position: absolute;
							top: 18px;
							width: 1px;
							background-color: #FFFFFF;/* because gallery background is almost black */
							height: 18px;
						}
					/* ~~~~~~~~~~~ */