/* login page style */

div, span, section, input, textarea, img {
	display: inline-block;
	position: relative;
}
html, body {
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;
	font-size: 0.98rem;
	color: #222222;
}
input {
	margin: 5px 0px 5px 0px;
	padding: 0px 4px 2px 4px;/* 9/05/18 instead of bottom 3 */
}
/* Global classes */
.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+ */
}
/* ~~~~~~~~~~~~~ */
.notehead {
	font-size: 0.85em !important;/* 26/08/18 !important added because formField class for languages */
	margin-bottom: 6px;
	color: #333333;
}
.note {
	font-size: 0.8em !important;/* 26/08/18 !important added because formField class for languages */
}
/* 23/05/18 */
.formSmallBox {
	text-align: left;
	/* 25/05/18 disabled  white-space: nowrap; */
	margin: 2px 0px 5px 0px;/* 25/05/18 instead of 4 top and 10 right */
	max-width: 560px;/* 26-27/05/18 [27/08/18 instead of 500 because of languages] */
	font-size: 0.8em !important;/* 25/05/18 [26/08/18 !important added because formField class for languages] */
	line-height: 1.15em !important;/* 25-26/05/18 [26/08/18 !important added because formField class for languages] */
}
/* 21/07/18 (profile box for instance) */
.smallBox {
	margin: 5px 0px 0px 0px;
	max-width: 370px;/* 28/07/18 instead of 395 */
	font-size: 0.8em;
	line-height: 1.15em;
	padding: 1px 0px 4px 7px;
	border: 1px dotted #999999;
}
.infoInline {
	display: inline;
	color: #666666;
	vertical-align: text-top;
	font-style: italic;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.radioButton { /* 25/05/18 */
	margin: 0px 3px 0px 0px;
	vertical-align: top;/* 25/05/18 */
}
label {
	/* 27/07/18 not relevant; clicking on the label doesn't select the check box: cursor: pointer; */
	margin: 0px 10px 0px 0px;
	color: #666666;/* dark grey */
	font-weight: bold;
}
.inputLabel {
	margin: 3px 6px 0px 6px;/* 25/05/18 top instead of 0 and left instead of 4 */
	/* 25/05/18 now in div container  font-size: 0.8em; */
	/* 25/05/18 now in div container  line-height: 1.1em; */
	/* 25/05/18 disabled   float: right; */
	/* 25/05/18 now in div container  max-width: 630px; */
	vertical-align: text-top;
}
/* ~~~~~~~ */
.recaptcha {
	margin: 10px 0px 0px 0px;
}
.logout {
	font-size: 0.85em;
	line-height: 1.65em;
	padding: 0px 2px 0px 2px !important;/* 28/08/18 because of languages */
	vertical-align: text-top;
}
.history {
	font-size: 0.85em;
	line-height: 1.65em;
	padding: 0px 2px 0px 8px !important;/* 28/08/18 because of languages */
	vertical-align: text-top;
}
#historyPanel { /* section */
	display: none;
	position: absolute;
	left: 0px;
	top: 0px;
	width: auto;
	max-width: 115%;/* 18/04/18 necessary to get scrollbar when needed horizontally [18/05/18 instead of 100% because of cssTransform] */
	height: auto;
	background-color: rgba(255,255,255,0.95);
	margin: 40px 0px 5px 5px;/* 17/05/18 instead of top 60 ... 18/05/18 margin instead of padding and right instead of 5 */
	overflow: auto;/* 18/04/18 */
	z-index: 1;/* 17/05/18 */
}
	.history_btn {
		position: absolute;
		top: 0px;/* 17/05/18 instead of 60 - 18/05/18 instead of 40 */
		z-index: 1;
		font-family: sans-serif;
	}
	#historySave_btn {
		left: 4px;/* 5/05/18 instead of 10 - 18/05/18 instead of 6 */
		font-size: 0.8em;
		line-height: 0.7em;
		padding: 4px 2px 8px 2px;/* 18/05/18 top instead of 5 */
		cursor: pointer;
		/* avoid default browser styling */
		border: none;
		background-color: transparent;
		text-decoration: underline;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
	}
	#historyClose_btn {
		left: 96px;/* 20/04/18 instead of right 10px [5/05/18 instead of 120] */
		font-size: 1.3em;
		line-height: 0.8em;
		padding: 2px 0px 3px 3px;/* 18/04/18 right instead of 3 - 18/05/18 top instead of 3 */
	}
.historyTable {
	left: 0px;
	top: 0px;
	width: 100%;
	height: auto;
	border: 1px solid #555555;
	border-collapse: collapse;
	font-size: 0.85em;
	line-height: 1em;
	background-color: #FFFFFF;
}
.historyTableRow {
	white-space: nowrap;
}
	.historyTableCell {
		white-space: nowrap;
		padding: 2px 5px 2px 5px;/* 18/05/18 instead of bottom 5 - squeezy but more compact */
		border: 1px solid #555555;
	}
	.historyTableCellHead {
		background-color: #EEEFF0;
	}
	.historyTableCell:last-child {
		min-width: 100px;/* 25/02/18 for 'update' column when there's no update in the user history, so the close btn doesn't overlap (80 is enough but 100 nicer). */
	}
	.historyTableXLcell { /* 18/05/18 for long one e.g. description ... but not used for the moment */
		white-space: normal;/* meaning if necessary and on line-break */
	}
#chartPanel {
	display: none;
	position: relative;/* 17/04/18 instead of absolute, otherwise page height don't extend to content */
	left: 0px;
	top: 0px;
	width: 90%;/* 17/04/18 instead of 100% */
	height: auto;/* 17/04/18 instead of 100% */
	background-color: rgba(255, 255, 255, 0.85);
	margin: 10px 10px 10px 10px;
	z-index: 4;
}
	#chartField {
		width: 100%;
		max-width: 500px;
		height: auto;
		max-height: 500px;
		overflow: auto;
		border: dashed 1px #888888;
		padding: 8px 15px 8px 15px;
		font-size: 0.85em;
		color: #555555;
		float: left;
		white-space: pre-line;
	}
	.chartTitle {
		font-size: 1.3em;
		font-weight: bold;
	}
	.chartHeading {
		font-size: 1em;
		font-weight: bold;
	}
	.chartText {
		font-size: 0.85em;
	}
	.chartSubTitle {
		font-size: 1em;
		font-weight: bold;
	}
#chartForm {
	width: 100%;
	float: left;
	margin-top: 8px;
}
.btnLink {
	border:0 none;
	background-color: transparent;
	text-decoration: underline;
	cursor: pointer;
	font-size: 0.75em;
	color: #666666;
}
.box {
	padding: 6px 7px 4px 7px; 
	border: 1px dotted #999999;
	color: #888888;
	margin: 3px 0px 4px 0px;
}
/* 9/05/18 */
.menuBox {
	float: left;
	width: 100%;
	text-align: left;
	vertical-align: bottom;
}
#fileTypeMenuBox {
	margin-bottom: 4px;
}
	.menu { /* 11/05/18 (<select> elements */
		padding-bottom: 1px;
	}
	.choiceBox {
		display: none;
		border: 1px solid #999999;
		width: auto;
		min-width: 50px;
		height: 19px;
		margin: 0px 0px 2px 3px;
		white-space: nowrap;
		padding: 0px;
		vertical-align: middle;
		background-color: #EAF6F6;/* blue, but just a touch of it */
	}
		.choice { /* text */
			font-size: 0.8rem;
			line-height: 0.85em;
			padding: 2px 7px 0px 1px;
			vertical-align: text-top;
			height: 16px;
			white-space: nowrap;
		}
		.deleteChoiceBtn { /* image X */
			height: 13px;
			padding: 2px 2px 2px 2px;
			border-right: 1px solid #999999;
			background-color: #FFFFFF;
		}
/* ~~~~~~~ */
.fieldBox { /* 21/05/18 */
	clear: left;
	margin-top: -3px;
	width: 100%;/* 27/05/18 */
}
.formField {
	padding: 0px 7px 0px 0px;
	font-size: 0.8rem;
}
.highlight {
	color: red;
}
.asterisk  { /* 18/05/18 class was used but not defined */
	vertical-align: top;
}
.hashtag { /* 18/05/18 new class used in code for 'other...' */
	color: #9600FF;/* purple */
	margin: -1px 3px 0px 1px;
	font-size: 0.8em;
	font-weight: bold;
}
.shortInput {
	min-width: 80px;
}
.longInput {
	min-width: 250px;
}
#feedback { /* feedback is a temporary (hidden) element created on the fly by php at the bottom of the page and js makes feedbackUp at the top with it */
	display: none;
}
.feedback { /* textarea */
	color: #1C1784;
	width: 100%;
	height: auto;
	min-height: 20px;
	border: none;
	font-size: 1em;
	overflow: visible;
	resize: none;
	float: left;
	outline: none;
	padding-bottom: 5px;
	font-family: 'Open Sans', Arial, Helvetica, sans-serif;/* weird...it's required; otherwise it uses default times */
}
.error {
	color: red !important;
	padding: 1px 1px 4px 1px;
	font-size: 1em;
}
.warning {
	color: red !important;
	padding: 1px 1px 4px 1px;
}
.feedbackUp {
	color: green;/* not !important because it can be a 'warning' - red */
	width: 100%;
	float: left;
	margin: -5px 0px -2px 0px;
}
.formBox {
	width: 100%;
	padding-right: 10px;
}
#upload {
	display: none;
}
.artBox {
	width: 500px;/* 11/06/18 instead of 500 - 6/11/18 back to 500 */
	height: auto;
	border: 1px dotted #888888;
	margin: 0px 5px 5px 0px;
	padding: 5px;
	float: left;/* for vertical alignment top */
	display: none;
}
.userArt {
	width: 100%;
	float: left;
}
video {
	max-width: 100%;
}
audio {
	max-width: 100%;
}
.artButtons {
	margin-top: 10px;
	float: left;
}
.artItemBox {
	width: 100%;
	text-align: center;
	float: left;
}
.artPiece {
	width: 100%;/* 10/05/18 instead of max-width; important for doc links, e.g. 'info.pdf' */
	height: auto;
}
.artItem {
	max-width: 100%;
	/* 1/07/18 not required and seems to make it bug for audio in Chrome!  height: auto; */
}
.artDetails {
	margin: -3px 0px 4px 0px;
	width: auto;/* 5/05/18 instead of 100% because of 'feel' */
	white-space: nowrap;/* 5/05/18 new; because of 'feel' */
	color: #809B9B;/* light grey, slightly blue */
	font-size: 0.7em;
	text-align: left;
	float: left;
}
/* 5/05/18 'feel' */
.feel {
	margin: -3px 2px 0px 0px;
	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 {
		font-size: 0.75em;
		line-height: 1.1em;
		float: left;
		clear: left;
		padding-top: 3px;
		white-space: nowrap;
		width: auto;
		min-width: 30px;
		overflow: visible;
		text-align: right;
	}
	.feelPic {
		max-width: 25px;
		float: right;
	}
/* ~~~~~~~~~~~~~~ */
.artFieldBox {
	margin-right: 15px;
	display: none;
}
.artFieldMenuBox {
	margin-right: 15px;
}
.typeMenu {
	/* nothing needed; it's just used for querySelectorAll */
}
.themeMenu {
	/* nothing needed; it's just used for querySelectorAll */
}
.artFieldBoxLong {
	float: left;
	width: 100%;/* clear: both not good enough */
}
.artFieldHeading {
	font-weight: bold;
	color: #999999;
}
.artFieldText {
	color: #00003F;
}
.artField {
	max-width: 100%;
	height: auto;
	margin: 5px 2px 0px 0px;
	font-size: 0.85em;
}
.artTitle {
	font-size: 0.85em;/* 9/05/18 instead of 0.9 */
	background-color: #EAF6F6;/* light grey-blue (same as choiceBox bg) */
	min-width: 355px;/* 6/07/18 */
}
#mask {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	background-color: rgba(255, 255, 255, 0.9);/* 10/08/18 instead of 0.85 */
	z-index: 3;
}
	#maskField {
		width: auto;
		margin: 200px 0px 0px 70px;
		font-size: 1.2em;
		color: #555555;
		text-align: center;/* 9/07/18 */
	}
	.obvious {
		font-weight: bold;
		font-size: 1.2em;
	}
/* ~~~ 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 */
		min-height: 40px;
		font-size: 0.8em;
		line-height: 0.9em;
		font-weight: normal;
		float: left;
	}
		.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: #E1E1E1;
			border: 1px solid #666666;
		}
		.sliderBtn {
			position: absolute;
			left: 3px;
			top: 15px;
			width: 10px;
			height: 23px;
			background-color: rgba(225, 225, 225, 0.4);/* E1E1E1 */
			border: 1px solid #666666;
			-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: #666666;
			height: 18px;
		}
/* ~~~~~~~~~~~ */