/* */

@font-face {
  font-family: 'FontAwesome';
  src: url('/template/fonts/fa/fontawesome-webfont.eot?v=4.6.3');
  src: url('/template/fonts/fa/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('/template/fonts/fa/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('/template/fonts/fa/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('/template/fonts/fa/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('/template/fonts/fa/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
}
@font-face {
  font-family: 'FjallaOne';
  src: url('/template/fonts/FjallaOne.eot');
  src: url('/template/fonts/FjallaOne.eot?#iefix') format('embedded-opentype'), url('/template/fonts/FjallaOne.woff') format('woff'), url('/template/fonts/FjallaOne.ttf') format('truetype');
}
@font-face {
  font-family: 'Titillium Web';
	src: url('/template/fonts/tw/titillium-regular-webfont.eot');
	src: url('/template/fonts/tw/titillium-regular-webfont.eot?#iefix') format('embedded-opentype'), url('/template/fonts/tw/titillium-regular-webfont.woff') format('woff'), url('/template/fonts/tw/titillium-regular-webfont.ttf') format('truetype'), url('/template/fonts/tw/titillium-regular-webfont.svg#webfont') format('svg');
}

/* ---------- FONTS */
.fa { font-family:FontAwesome; 	text-rendering: auto;	-webkit-font-smoothing: antialiased;	-moz-osx-font-smoothing: grayscale; text-align:center;font-weight:normal!important; }
.fj { font-family:FjallaOne,Verdana,sans-serif; }
.fv { font-family:Verdana,Helvetica,sans-serif; }
.fan { font-family:Arial Narrow,Arial,sans-serif; }
.ftw { font-family: "Roboto", sans-serif; font-weight: 400; }
.fr { font-family: "Roboto", sans-serif; font-weight: 400; }
@-ms-viewport { width: device-width; }
* {	box-sizing: border-box; }

/* ---------- BASE PROPERTIES */
html, body { min-width: min-content; }
html, body { font:15px "Roboto",FjallaOne,sans-serif;line-height:110%; font-size:12pt;--clamp(12pt,2.4vw,13.5pt); }
button, .button, td, input { font:inherit;line-height:inherit; }
* {	box-sizing: border-box; }
html { margin:0; padding:0; cursor:default; display:block; height:100%; zoom:1; }
body { overflow:auto;overflow-y:scroll;overflow-x:auto; margin:0; padding:0; cursor:default;height:100%; }
html { background-color:#020455; background-image: linear-gradient(to bottom, #020455, #664411); background-attachment:fixed; }
h1,h2,h3,h4,h5,h6 { line-height:160%;margin:0;padding:0 0.5em; }
h1 { font-size:2em; }
h2 { font-size:1.8em; }
h3 { font-size:1.6em; }
h4 { font-size:1.4em; }
h5 { font-size:1.2em; }
h6 { font-size:1em; }
h1.slim,h2.slim,h3.slim,h4.slim,h5.slim,h6.slim { margin:0;padding:0;line-height:1.1em; }
:focus { outline-style:none; }
button,.button { display:inline-block;text-align:center; }
a.button, a.noul, div.noul { text-decoration:none; }
a:hover { color:red; }

table td { empty-cells:show; }
table, table.slim, table.nopad { margin:0;padding:0; cell-spacing:0; border-collapse:collapse;border-spacing:0 }
table.valigntop td, td.valigntop { vertical-align:top; }
table.alignleft td, td.alignleft { text-align:left; }
table.alignright td, td.alignright { text-align:right; }
table.aligncenter td, td.aligncenter { text-align:center; }
table.nobr td, .nobr { white-space:nowrap; }
table.nopad td { padding:0; }
table.slim td { margin:0; padding:0.2em 0.5em; text-align:left; vertical-align:baseline; }
table.slim td { margin:0; padding:0; text-align:left; vertical-align:baseline; }
.nosel { user-select:none; }

ul.slim { margin:0; padding:0; }
ul.slim li { margin-left:2rem; }

/* ---------- STYLING */
.fa.linkpopup { font-size:0.7em;line-height:1.7em;padding-left:0.5em;padding-top:0.2em;vertical-align:top; text-decoration:none; }
.pctr, .ctr { text-align:center; }
.prt { text-align:right!important; }
.pclr { clear:both; }
.cursormg { cursor:zoom-in; }
.textred { color:#800; }
.req { color:red; }
.caps {	text-transform:uppercase; }
.bigpad { padding:2rem 0.5rem; }
.monogreen { background: #DDDDDD; color: green; font-family: monospace; padding: 0px 0.5ch; }

:root {
	--main-blue: #036;
	--light-blue: #CDF;
	--bright-blue: #DDE8FF;
	--dark-blue: #00245E;
	--mid-blue: #BCE;
	
	--bright-cyan: #EFF;
	--light-cyan: #BEE;
	--mid-cyan: #AFF;
	--middark-cyan: #8BF;
	--dark-cyan: #088;
	--shadow-cyan: #036;

	--main-black: #000000;
	--half-black: rgba(0,0,0,0.5);
	--light-grey: #BBBBBB;
	--bright-grey: #D0D0D0;
	--main-white: #FFFFFF;
	--half-white: rgba(255,255,255,0.5);
	--half-grey: rgba(208,208,208,0.5);
	
	--main-yellow: #FFFF00;
	--half-yellow: rgba(128,128,0,0.5);
	--dark-yellow: #666600;
	--light-yellow: #FFFF88;
	--bright-yellow: #FFFFBB;
	
	--main-orange: #ffaa55;
	--half-orange: rgba(256,128,64,0.5);
	--dark-orange: #663300;
	--light-orange: #FFDDBB;
	--bright-orange: #FFEECC;
	
	--main-green: #006633;
	--light-green: #CCFFCC;

	--bright-red: #FFEEEE;
	--light-red: #FFCCAA;
	--main-red: #FF0000;
	--dark-red: #880000;

	--main-transparent: rgba(0,0,0,0);
	--main-shadow: var(--half-black);
	--main-shadow-light: var(--half-white);
	--main-shadow-highlight: var(--half-yellow);

	--button-big-height: calc(1rem + 0.3rem + 0.3rem + 4px + 2px);
	--button-big-font-height: 1rem;
	--button-big-border-w: 6px;
	--button-big-padding-h: 0.3rem;

	--button-slim-height: calc(0.8rem + 0.15rem + 0.15rem + 4px + 2px);
	--button-slim-font-height: 0.8rem;
	--button-slim-border-w: 5px;
	--button-slim-padding-h: 0.15rem;

	--multi-select-up-border: var(--main-blue);
	--multi-select-up-background: var(--main-white);
	--multi-select-up-color: var(--main-blue);
	--multi-select-up-shadow: var(--main-shadow);
	--multi-select-up-shadow-hover: var(--main-shadow-highlight);

	--multi-select-click-border: var(--half-yellow);
	--multi-select-click-background: var(--main-white);
	--multi-select-click-color: var(--main-blue);
	--multi-select-click-shadow: var(--main-transparent);
	--multi-select-click-shadow-hover: var(--main-transparent);

	--multi-select-on-border: var(--main-blue);
	--multi-select-on-background: var(--light-blue);
	--multi-select-on-color: var(--main-blue);
	--multi-select-on-shadow: var(--main-transparent);
	--multi-select-on-shadow-hover: var(--main-transparent);

	--multi-select-on-click-border: var(--half-yellow);
	--multi-select-on-click-background: var(--light-blue);
	--multi-select-on-click-color: var(--main-blue);
	--multi-select-on-click-shadow: var(--main-transparent);
	--multi-select-on-click-shadow-hover: var(--main-transparent);

	--button-dark-up-border: var(--main-blue);
	--button-dark-up-background: var(--main-blue);
	--button-dark-up-color: var(--main-white);
	--button-dark-up-shadow: var(--main-shadow);
	--button-dark-up-shadow-hover: var(--main-shadow-highlight);

	--button-dark-click-border: var(--main-blue);
	--button-dark-click-background: var(--main-blue);
	--button-dark-click-color: var(--main-white);
	--button-dark-click-shadow: var(--main-transparent);
	--button-dark-click-shadow-hover: var(--main-transparent);

	--button-light-up-border: var(--main-blue);
	--button-light-up-background: var(--main-white);
	--button-light-up-color: var(--main-blue);
	--button-light-up-shadow: var(--main-shadow);
	--button-light-up-shadow-hover: var(--main-shadow-highlight);

	--button-light-click-border: var(--half-yellow);
	--button-light-click-background: var(--main-white);
	--button-light-click-color: var(--main-blue);
	--button-light-click-shadow: var(--main-transparent);
	--button-light-click-shadow-hover: var(--main-transparent);

	--button-green-up-border: var(--main-green);
	--button-green-up-background: var(--light-green);
	--button-green-up-color: var(--main-green);
	--button-green-up-shadow: var(--main-shadow);
	--button-green-up-shadow-hover: var(--main-shadow-highlight);

	--button-green-click-border: var(--main-green);
	--button-green-click-background: var(--light-green);
	--button-green-click-color: var(--main-green);
	--button-green-click-shadow: var(--main-transparent);
	--button-green-click-shadow-hover: var(--main-transparent);

	--button-yellow-up-border: var(--dark-yellow);
	--button-yellow-up-background: var(--light-yellow);
	--button-yellow-up-color: var(--dark-yellow);
	--button-yellow-up-shadow: var(--main-shadow);
	--button-yellow-up-shadow-hover: var(--main-shadow-highlight);

	--button-yellow-click-border: var(--dark-yellow);
	--button-yellow-click-background: var(--light-yellow);
	--button-yellow-click-color: var(--dark-yellow);
	--button-yellow-click-shadow: var(--main-transparent);
	--button-yellow-click-shadow-hover: var(--main-transparent);

	--button-orange-up-border: var(--dark-orange);
	--button-orange-up-background: var(--main-orange);
	--button-orange-up-color: var(--dark-orange);
	--button-orange-up-shadow: var(--main-shadow);
	--button-orange-up-shadow-hover: var(--main-shadow-highlight);

	--button-orange-click-border: var(--dark-yellow);
	--button-orange-click-background: var(--main-orange);
	--button-orange-click-color: var(--dark-orange);
	--button-orange-click-shadow: var(--main-transparent);
	--button-orange-click-shadow-hover: var(--main-transparent);

	--button-blue-up-border: var(--dark-blue);
	--button-blue-up-background: var(--mid-blue);
	--button-blue-up-color: var(--dark-blue);
	--button-blue-up-shadow: var(--main-shadow);
	--button-blue-up-shadow-hover: var(--main-shadow-highlight);

	--button-blue-click-border: var(--dark-blue);
	--button-blue-click-background: var(--mid-blue);
	--button-blue-click-color: var(--dark-blue);
	--button-blue-click-shadow: var(--main-transparent);
	--button-blue-click-shadow-hover: var(--main-shadow-transparent);

	--button-grey-up-border: var(--bright-grey);
	--button-grey-up-background: var(--light-grey);
	--button-grey-up-color: var(--bright-grey);
	--button-grey-up-shadow: var(--main-shadow);
	--button-grey-up-shadow-hover: var(--main-shadow-highlight);

	--button-grey-click-border: var(--bright-grey);
	--button-grey-click-background: var(--light-grey);
	--button-grey-click-color: var(--bright-grey);
	--button-grey-click-shadow: var(--main-transparent);
	--button-grey-click-shadow-hover: var(--main-shadow-transparent);

	--button-cyan-up-border: var(--dark-cyan);
	--button-cyan-up-background: var(--mid-cyan);
	--button-cyan-up-color: var(--dark-cyan);
	--button-cyan-up-shadow: var(--main-shadow);
	--button-cyan-up-shadow-hover: var(--main-shadow-highlight);

	--button-cyan-click-border: var(--dark-cyan);
	--button-cyan-click-background: var(--mid-cyan);
	--button-cyan-click-color: var(--dark-cyan);
	--button-cyan-click-shadow: var(--main-transparent);
	--button-cyan-click-shadow-hover: var(--main-shadow-transparent);

	--button-red-up-border: var(--main-red);
	--button-red-up-background: var(--bright-red);
	--button-red-up-color: var(--main-red);
	--button-red-up-shadow: var(--main-shadow);
	--button-red-up-shadow-hover: var(--main-shadow-highlight);

	--button-red-click-border: var(--main-red);
	--button-red-click-background: var(--main-white);
	--button-red-click-color: var(--main-red);
	--button-red-click-shadow: var(--main-transparent);
	--button-red-click-shadow-hover: var(--main-transparent);

	--button-bull-unchecked-color: var(--light-grey);
	--button-bull-unchecked-size: 0.6em;
	--button-checkmark-checked-color: var(--main-blue);
	--button-checkmark-checked-size: 0.7em;
	--button-checkmark-x-color: var(--main-red);
	
	--button-shadow-light: var(--half-white);
}


/* ---------- ANIMATIONS */
@keyframes pwrotate { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
.pwrotate { animation-name:pwrotate; animation-duration:1s; animation-iteration-count:infinite; animation-timing-function:linear;
			display:inline-block; line-height:1em;vertical-align:middle;
			font-size:1em!important; }

/* ---------- FRAMING */

#pgBody { overflow:visible; justify-content:left; margin:0 auto;padding:0.1em 0 1em; }
.floatcentercontent { display:flex; justify-content:center; height:100vh; align-items:center; }
.sizedown10 { font-size:90%; }

div.divBodyPW { color:white; }
div.divBodyPWBlack { color:black!important; }

.pagebodytitle { display:block; font-weight:bold; font-size:1.2em; border:solid 2px black; border-width:0 0 2px 0; width:80%; margin:0 auto;padding:0.5em 0; }


/* ---------- UI WIDGETS */
input.inputblock { display:block;width:100%;height:2em;box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box; }
input.inputtext { border:solid 2px #020167;border-radius:0; color:black; font-size:1em; line-height:2em; padding:0em 0.3ch; vertical-align:baseline; font-weight:normal; }
input.inputtext:focus { background-color:#FFA; }
input.inputtext.inputdisabled { background-color:#CCC;color:#888; }
.inputrowscale { line-height:2lh; } .inputrowscale .inputtext { font-size:inherit; line-height:1.8em; border-width:0.1em; } .inputrowscale .inputblock { height:2lh; }

textarea:hover, input:hover { outline:none;background:#FFD; }
textarea:focus, input:focus { outline:none;box-shadow:0 0 0.5em yellow; background:#FFD;border-color:#AA0!important; }
input.inputmono { font-family:monospace; }
input.inputstrictnumber::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input.inputstrictnumber[type=number] { -moz-appearance: textfield; }
textarea { border:solid 2px #020167;border-radius:0; color:black;font-size:1em; line-height:1.2em;margin:0 0;padding:0.1em; resize:vertical; }
input.inputpill, textarea.inputpill { border:solid 2px #008; 	font-size:1em;	padding-left:1em;padding-right:1em; }
input.inputpill { line-height:1.8em;	height:1.8em;	border-radius:1em; }
textarea.inputpill { padding-top:0.5em;padding-bottom:0.5em;	border-radius:1em 0 0 1em; }
input.inputcompact, textarea.inputcompact { font-size:0.7rem; }
input.inputright { text-align:right; }

::-ms-input-placeholder {  color:rgba(255,0,0,0.3)!important; }
::placeholder {  color:rgba(0,0,0,0.3)!important; }

/* ---------- BUTTONS AND LINKS */

/* default links */
a { color:blue; }
a:hover { color:red; }
a.whiteonblack { color:white; }
a.whiteonblack:hover { color:#F88!important; }

/* basic button */

.button {
	border-radius:4px;
	border-width:2px;
	border-style:solid;
	border-color:black;
	background-color:white;
	transform:translateY(-3px);
	box-shadow:0 3px 0 var(--half-black);
	display:inline-block;
	cursor:pointer;
	margin:4px 0.2rem 2px 0.2rem;
	padding:0.3rem 0.7rem;
	vertical-align: middle;
	white-space:nowrap;
}
.buttonblock {
	display:block;
	width:100%;
}
.button:active,
.button.buttonmultion {
	transform:translateY(0px);
	box-shadow:0 0 0 var(--half-black);
}
.button:focus,
.button:hover {
	box-shadow:0 3px 0 var(--half-yellow);
}
.button:active:focus,
.button:active:hover {
	box-shadow:0 0 0 var(--half-yellow);
}

.button.plain { border:0; background:transparent; cursor:pointer; font-size:1em; }
.button.plain:hover { background:transparent; text-decoration:underline; }

/* button sizing/shape */

.button, 
.button.buttonbig { 
	font-size:var(--button-big-font-height); 
	line-height:110%;
	border-radius:var(--button-big-border-w);
	padding:var(--button-big-padding-h) 0.7rem;
}
.button.buttonslim {
	font-size:var(--button-slim-font-height); 
	line-height:110%;
	border-radius:var(--button-slim-border-w);
	padding:var(--button-slim-padding-h) 0.7rem;
}
.button.buttontight {
	font-size:var(--button-slim-font-height); 
	line-height:110%;
	border-radius:var(--button-slim-border-w);
	padding:var(--button-slim-padding-h) 0.7ch;
	margin-left:0.1ch; margin-right:0.1ch;
}
.button.buttonmax {
	display:block;
	width:100%;
}
.buttonbare {
	border:0;
	background:transparent;
	transform:none;
	box-shadow:none;
	margin:0;
	padding:0;
	color:var(--main-blue);
}
.buttonbare:active {
	transform:none;
	box-shadow:none;
}
.buttonbare:focus,
.buttonbare:hover {
	box-shadow:none;
}

.button.buttonflat {
	border: 0;
    box-shadow:none!important;
    border-radius: 0;
    padding: 0 0.5rem;
    margin: 0;
    line-height: 1.6rem;
    text-align: left;
    transform: none;
}
.button.buttonflat:active {
	transform:none;
	box-shadow:none;
}
.button.buttonflat:focus,
.button.buttonflat:hover {
	box-shadow:none;
}
.button.buttoncompact {
	margin: 3px 0 0;
}

.abutton {
	color:blue;
}
.abutton:hover {
	color:red; 
}

.buttonpill {
	border-width:2px;
	border-style:solid;border-radius:1em; 
	white-space:nowrap; 
	display:inline-block; 
	cursor:pointer; 
	padding-left:0.7em;padding-right:0.7em;
}

.buttonsmoosh { margin-right:1px; }
.buttonrowscale { line-height:1.9em; } .buttonrowscale .button, .buttonrowscale { font-size:inherit; line-height:1.5em; }
.buttonsquare { border-radius:0; }
.buttonwrap { white-space:normal; }
.buttonthin { border-width:1px; line-height:1.5em; padding:0 0.6em; cursor:pointer; font-size:0.8em; }
.buttonrowscale .buttonicon { height:1.7em;width:1.7em;line-height:1.7em; }

.listbutton { 		clear:both; background:white!important;line-height:1.6em;padding:0 0.2em;overflow:hidden; text-overflow:ellipsis;border:0;border-radius:0;display:block;text-align:left;font-weight:normal; }
.listbutton:focus { background-color:#FFA!important; }
.listbutton:hover { background-color:#FF6!important; }
.listbutton:focus, .listbutton:hover { z-index:100;box-shadow:none; }
.listbutton:focus:hover { box-shadow:0 0 1px 1px #880; }

.buttongroup.groupborder { border:solid 2px var(--light-grey);border-radius:6px;padding:3px; }

--.buttonpadwide { margin-left:0.2em; margin-right:0.2em; }
--.buttonthick { border-radius:2em; line-height:2em; padding:0 1.2em; cursor:pointer; }


--.buttoninline { 		color:blue; }
--.buttoninline { 		border:0;background:transparent!important;display:inline; line-height:unset; font-weight:inherit;font-size:inherit; padding:0; }
--.buttoninline:hover, .buttoninline:focus {box-shadow:none!important;color:red!important; background:transparent!important; text-decoration:underline!important;}
--.buttoninline.buttonoff:hover, .buttoninline.buttonoff:focus {				box-shadow:none!important;color:#888!important;text-decoration:none!important;background:transparent!important; }


/* OLD
.buttonhex {
 	background-color:#99F;position:relative; text-decoration:none; display:inline-block;padding:0.3em 1em;
 	--notchSize: 5px;
	--bordThick: 3px;
	--bordHalf: 2px;
	clip-path: polygon(0 var(--notchSize),var(--notchSize) 0,calc(100% - var(--notchSize)) 0,100% var(--notchSize),100% calc(100% - var(--notchSize)),calc(100% - var(--notchSize)) 100%,var(--notchSize) 100%,0 calc(100% - var(--notchSize)),0 var(--notchSize));
	font-weight:bold;
	color:#00C;
	}
.buttonhex:before { 
 	--notchSize: 4px;
	--bordThick: 2px;
	--bordHalf: 1px;
	content: "";
	position: absolute;
	overflow:hidden;
	inset: 0;
	background: #00C; / bordercolor /
	clip-path: polygon(0 var(--notchSize),var(--notchSize) 0,calc(100% - var(--notchSize)) 0,100% var(--notchSize),100% calc(100% - var(--notchSize)),calc(100% - var(--notchSize)) 100%,var(--notchSize) 100%,0 calc(100% - var(--notchSize)),0 var(--notchSize),
				var(--bordThick) calc(var(--notchSize) + var(--bordHalf)),var(--bordThick) calc(100% - var(--notchSize) - var(--bordHalf)),calc(var(--notchSize) + var(--bordHalf)) calc(100% - var(--bordThick)),calc(100% - var(--notchSize) - var(--bordHalf)) calc(100% - var(--bordThick)),calc(100% - var(--bordThick)) calc(100% - var(--notchSize) - var(--bordHalf)),calc(100% - var(--bordThick)) calc(var(--notchSize) + var(--bordHalf)),calc(100% - var(--notchSize) - var(--bordHalf)) var(--bordThick),calc(var(--notchSize) + var(--bordHalf)) var(--bordThick),var(--bordThick) calc(var(--notchSize) + var(--bordHalf)));
}
.buttonhexlow {
 	background-color:#00C; / bgcolor /
	color:#99F; / text /
	position:relative; text-decoration:none; display:inline-block;padding:0.1em 1em 0.2em;
 	--notchSize: 5px;
	--bordThick: 3px;
	--bordHalf: 2px;
	clip-path: polygon(100% 0, 100% calc(100% - var(--notchSize)),calc(100% - var(--notchSize)) 100%,var(--notchSize) 100%,0 calc(100% - var(--notchSize)),0 0);
	font-weight:bold;
	color:#00C;
	}
.buttonhexlow:before { 
 	--notchSize: 5px;
	--bordThick: 3px;
	--bordHalf: 2px;
	content: "";
	position: absolute;
	inset: 0;
	background: #00C; / bordercolor /
	clip-path: polygon(100% 0, 100% calc(100% - var(--notchSize)),calc(100% - var(--notchSize)) 100%,var(--notchSize) 100%,0 calc(100% - var(--notchSize)),0 0, 
				var(--bordThick) 0,var(--bordThick) calc(100% - var(--notchSize) - var(--bordHalf)),calc(var(--notchSize) + var(--bordHalf)) calc(100% - var(--bordThick)),calc(100% - var(--notchSize) - var(--bordHalf)) calc(100% - var(--bordThick)),calc(100% - var(--bordThick)) calc(100% - var(--notchSize) - var(--bordHalf)),calc(100% - var(--bordThick)) 0);
}
.buttonhexlow:hover, .buttonhex:hover, .buttonhexlow:focus, .buttonhex:focus { padding-left:1.5em; padding-right:1.5em;color:#03F; }
.buttonhexnoexpand { padding-left:0em !important;padding-right:0em !important; }
.buttonhex.buttonstatic:hover, .buttonhex.buttonstatic:focus { padding:0.3em 1em; }
.buttonhexlow:hover:before, .buttonhex:hover:before, .buttonhexlow:focus:before, .buttonhex:focus:before { background-color:#03F; }
*/

/* button colouring */

/* OLD
-.buttongreen { 					border-color:#063;color:#063;						background-color:#BEC; }
-.buttongreen .buttonicon { 		border-color:#063;background-color:#063;			color:#BEC; }
-.buttongreen .buttonicon.buttoniconnobg { 	color:#063; }
-.buttongreen:hover,.buttongreen:focus { 			border-color:#4C0!important;color:#0A0!important;	background-color:#CFD!important; }
-.buttongreen:hover .buttonicon,.buttongreen:focus .buttonicon { background-color:#4C0!important;border-color:#063!important;color:#063!important; }
-.buttongreen:hover .buttonicon.buttoniconnobg,.buttongreen:focus .buttonicon.buttoniconnobg { background:transparent!important;color:#063!important; }
/ hex variant
 .buttongreen.buttonhex:before, .buttongreen.buttonhexlow:before {			background:#063; }
 .buttongreen.buttonhex:hover:before, .buttongreen.buttonhexlow:hover:before, .buttongreen.buttonhex:focus:before, .buttongreen.buttonhexlow:focus:before { 	background-color:#0C3; }
 .buttongreen.buttonhex:hover, .buttongreen.buttonhexlow:hover, .buttongreen.buttonhex:focus, .buttongreen.buttonhexlow:focus {			color:#0C3!important; }
 .buttonhexlow.buttongreen { background-color:#262!important; color:#9F9!important; }
 .buttonhexlow.buttongreen:before { background-color:#262!important; }
 .buttonhexlow.buttongreen:hover, .buttonhexlow.buttongreen:focus { color:#9F9!important;background-color:#494!important; }
 .buttonhexlow.buttongreen:hover:before, .buttonhexlow.buttongreen:focus:before { background-color:#0F9!important; }
 .buttonhexlow.buttongreen:before { --bordThick:0px; --bordHalf:0px; }

.buttonred { 					border-color:#C00;color:#C00;						background-color:#FCC; }
.buttonred .buttonicon { 		border-color:#C00;background-color:#C00;			color:#FCC; }
.buttonred .buttonicon.buttoniconnobg { 	color:#C00; }
.buttonred:hover, .buttonred:focus { 				border-color:#F80!important;color:#F00!important;	background-color:#FDD!important; }
.buttonred:hover .buttonicon , .buttonred:focus .buttonicon { 	background-color:#F80!important;border-color:#F00!important;color:#F00!important; }
.buttonred:hover .buttonicon.buttoniconnobg , .buttonred:focus .buttonicon.buttoniconnobg { background:transparent!important;color:#F00!important; }
/ hex variant /
 .buttonred.buttonhex:before {			background:#C00; }
 .buttonred.buttonhex:hover:before { 	background-color:#F00; }
 .buttonred.buttonhex:hover {	 		color:#F00!important; }

.buttonorange { 					border-color:#F60;color:#F60;						background-color:#FF9; }
.buttonorange .buttonicon { 		border-color:#F60;background-color:#F60;			color:#FF9; }
.buttonorange .buttonicon.buttoniconnobg { 	color:#F60; }
.buttonorange:hover, .buttonorange:focus { 			border-color:#F00!important;color:#F60!important;	background-color:#FF9!important; }
.buttonorange:hover .buttonicon , .buttonorange:focus .buttonicon {background-color:#F00!important;border-color:#F60!important;color:#F60!important; }
.buttonorange:hover .buttonicon.buttoniconnobg , .buttonorange:focus .buttonicon.buttoniconnobg { background:transparent!important;color:#F60!important; }
/ hex variant /
 .buttonorange.buttonhex:before {		background:#F60; }
 .buttonorange.buttonhex:hover:before { 	background-color:#F00; }
 .buttonorange.buttonhex:hover {			color:#F00!important; }
*/


.button.buttonred {
	color:var(--button-red-up-color);
	border-color:var(--button-red-up-border);
	background-color:var(--button-red-up-background);
	box-shadow:0 3px 0 var(--button-red-up-shadow);
	}
	.button.buttonred:focus,
	.button.buttonred:hover {
		box-shadow:0 3px 0 var(--button-red-up-shadow-hover);
	}
	.button.buttonred:active {
		color:var(--button-red-click-color);
		border-color:var(--button-red-click-border);
		background-color:var(--button-red-click-background);
		box-shadow:0 0 0 var(--button-red-click-shadow);
	}
	.button.buttonred:active:focus,
	.button.buttonred:active:hover {
		box-shadow:0 0 0 var(--button-red-click-shadow-hover);
	}

.button.buttongreen {
	color:var(--button-green-up-color);
	border-color:var(--button-green-up-border);
	background-color:var(--button-green-up-background);
	box-shadow:0 3px 0 var(--button-green-up-shadow);
	}
	.button.buttongreen:focus,
	.button.buttongreen:hover {
		box-shadow:0 3px 0 var(--button-green-up-shadow-hover);
	}
	.button.buttongreen:active {
		color:var(--button-green-click-color);
		border-color:var(--button-green-click-border);
		background-color:var(--button-green-click-background);
		box-shadow:0 0 0 var(--button-green-click-shadow);
	}
	.button.buttongreen:active:focus,
	.button.buttongreen:active:hover {
		box-shadow:0 0 0 var(--button-green-click-shadow-hover);
	}

.button.buttonyellow {
	color:var(--button-yellow-up-color);
	border-color:var(--button-yellow-up-border);
	background-color:var(--button-yellow-up-background);
	box-shadow:0 3px 0 var(--button-yellow-up-shadow);
	}
	.button.buttonyellow:focus,
	.button.buttonyellow:hover {
		box-shadow:0 3px 0 var(--button-yellow-up-shadow-hover);
	}
	.button.buttonyellow:active {
		color:var(--button-yellow-click-color);
		border-color:var(--button-yellow-click-border);
		background-color:var(--button-yellow-click-background);
		box-shadow:0 0 0 var(--button-yellow-click-shadow);
	}
	.button.buttonyellow:active:focus,
	.button.buttonyellow:active:hover {
		box-shadow:0 0 0 var(--button-yellow-click-shadow-hover);
	}

.button.buttonorange {
	color:var(--button-orange-up-color);
	border-color:var(--button-orange-up-border);
	background-color:var(--button-orange-up-background);
	box-shadow:0 3px 0 var(--button-orange-up-shadow);
	}
	.button.buttonorange:focus,
	.button.buttonorange:hover {
		box-shadow:0 3px 0 var(--button-orange-up-shadow-hover);
	}
	.button.buttonorange:active {
		color:var(--button-orange-click-color);
		border-color:var(--button-orange-click-border);
		background-color:var(--button-orange-click-background);
		box-shadow:0 0 0 var(--button-orange-click-shadow);
	}
	.button.buttonorange:active:focus,
	.button.buttonorange:active:hover {
		box-shadow:0 0 0 var(--button-orange-click-shadow-hover);
	}

.button.buttonblue {
	color:var(--button-blue-up-color);
	border-color:var(--button-blue-up-border);
	background-color:var(--button-blue-up-background);
	box-shadow:0 3px 0 var(--button-blue-up-shadow);
	}
	.button.buttonblue:focus,
	.button.buttonblue:hover {
		box-shadow:0 3px 0 var(--button-blue-up-shadow-hover);
	}
	.button.buttonblue:active {
		color:var(--button-blue-click-color);
		border-color:var(--button-blue-click-border);
		background-color:var(--button-blue-click-background);
		box-shadow:0 0 0 var(--button-blue-click-shadow);
	}
	.button.buttonblue:active:focus,
	.button.buttonblue:active:hover {
		box-shadow:0 0 0 var(--button-blue-click-shadow-hover);
	}

.button.buttonbluegreen {	/* #8BF #036 #EFF #BCE #CDF */
	color:var(--shadow-cyan);
	border-color:var(--shadow-cyan);
	background-color:var(--light-cyan);
	box-shadow:0 3px 0 var(--button-blue-up-shadow);
	}
	.button.buttonbluegreen:focus,
	.button.buttonbluegreen:hover {
		box-shadow:0 3px 0 var(--button-blue-up-shadow-hover);
	}
	.button.buttonbluegreen:active {
		color:var(--dark-cyan);
		border-color:var(--dark-cyan);
		background-color:var(--light-cyan);
		box-shadow:0 0 0 var(--button-blue-click-shadow);
	}
	.button.buttonbluegreen:active:focus,
	.button.buttonbluegreen:active:hover {
		box-shadow:0 0 0 var(--button-blue-click-shadow-hover);
	}

.button.buttongrey { /* #CCC #AAA */
	color:var(--button-grey-up-color);
	border-color:var(--button-grey-up-border);
	background-color:var(--button-grey-up-background);
	box-shadow:0 3px 0 var(--button-grey-up-shadow);
	}
	.button.buttongrey:focus,
	.button.buttongrey:hover {
		box-shadow:0 3px 0 var(--button-grey-up-shadow-hover);
	}
	.button.buttongrey:active {
		color:var(--button-grey-click-color);
		border-color:var(--button-grey-click-border);
		background-color:var(--button-grey-click-background);
		box-shadow:0 0 0 var(--button-grey-click-shadow);
	}
	.button.buttongrey:active:focus,
	.button.buttongrey:active:hover {
		box-shadow:0 0 0 var(--button-grey-click-shadow-hover);
	}

.button.buttonlight {
	color:var(--button-light-up-color);
	border-color:var(--button-light-up-border);
	background-color:var(--button-light-up-background);
	box-shadow:0 3px 0 var(--button-light-up-shadow);
	}
	.button.buttonlight:focus,
	.button.buttonlight:hover {
		box-shadow:0 3px 0 var(--button-light-up-shadow-hover);
	}
	.button.buttonlight:active {
		color:var(--button-light-click-color);
		border-color:var(--button-light-click-border);
		background-color:var(--button-light-click-background);
		box-shadow:0 0 0 var(--button-light-click-shadow);
	}
	.button.buttonlight:active:focus,
	.button.buttonlight:active:hover {
		box-shadow:0 0 0 var(--button-light-click-shadow-hover);
	}
.button.buttonlightblue {
	background-color:var(--bright-blue);
	}
	.button.buttonlightblue:active {
		background-color:var(--bright-blue);
	}
.button.buttonlightgrey {
	background-color:var(--half-grey);
	color:var(--half-black);
	}
	.button.buttonlightgrey:active {
		background-color:var(--half-grey);
	}

.button.buttoncyan {
	color:var(--button-cyan-up-color);
	border-color:var(--button-cyan-up-border);
	background-color:var(--button-cyan-up-background);
	box-shadow:0 3px 0 var(--button-cyan-up-shadow);
	}
	.button.buttoncyan:focus,
	.button.buttoncyan:hover {
		box-shadow:0 3px 0 var(--button-cyan-up-shadow-hover);
	}
	.button.buttoncyan:active {
		color:var(--button-cyan-click-color);
		border-color:var(--button-cyan-click-border);
		background-color:var(--button-cyan-click-background);
		box-shadow:0 0 0 var(--button-cyan-click-shadow);
	}
	.button.buttoncyan:active:focus,
	.button.buttoncyan:active:hover {
		box-shadow:0 0 0 var(--button-cyan-click-shadow-hover);
	}


/* OLD
.buttonblue { 					border-color:#036;color:#036;						background-color:#BCE; }
.buttonblue .buttonicon { 		border-color:#036;background-color:#036;			color:#BCE; }
.buttonblue .buttonicon.buttoniconnobg { 	color:#036; }
.buttonblue:hover,.buttonblue:focus { 			border-color:#CC0!important;color:#440!important;	background-color:#FFC!important; }
.buttonblue:hover .buttonicon,.buttonblue:focus .buttonicon { background-color:#CDF!important;border-color:#036!important;color:#036!important; }
.buttonblue:hover .buttonicon.buttoniconnobg,.buttonblue:focus .buttonicon.buttoniconnobg { background:transparent!important;color:#036!important; }
/  hex variant  /
 .buttonblue.buttonhex:before {			background:#036; }
 .buttonblue.buttonhex:hover:before { 	background-color:#03F; }
 .buttonblue.buttonhex:hover {			color:#03F!important; }

.buttonbluegreen { 					border-color:#8BF;color:#036;						background-color:#EFF; }
.buttonbluegreen .buttonicon { 		border-color:#8BF;background-color:#8BF;			color:#BCE; }
.buttonbluegreen .buttonicon.buttoniconnobg { 	color:#BCE; }
.buttonbluegreen:hover,.buttonbluegreen:focus { 			border-color:#CC0!important;color:#440!important;	background-color:#FFC!important; }
.buttonbluegreen:hover .buttonicon,.buttonbluegreen:focus .buttonicon { background-color:#CDF!important;border-color:#8BF!important;color:#8BF!important; }
.buttonbluegreen:hover .buttonicon.buttoniconnobg,.buttonbluegreen:focus .buttonicon.buttoniconnobg { background:transparent!important;color:#8BF!important; }
/  hex variant  /
 .buttonbluegreen.buttonhex:before {			background:#8BF; }
 .buttonbluegreen.buttonhex:hover:before { 	background-color:#03F; }
 .buttonbluegreen.buttonhex:hover {			color:#03F!important; }

.buttoncyan { 					border-color:#088;color:#088;						background-color:#AFF; }
.buttoncyan .buttonicon { 		border-color:#088;background-color:#088;			color:#AFF; }
.buttoncyan .buttonicon.buttoniconnobg { 	color:#088; }
.buttoncyan:hover,.buttoncyan:focus { 			border-color:#CC0!important;color:#440!important;	background-color:#FFC!important; }
.buttoncyan:hover .buttonicon,.buttoncyan:focus .buttonicon { background-color:#0DF!important;border-color:#088!important;color:#088!important; }
.buttoncyan:hover .buttonicon.buttoniconnobg,.buttoncyan:focus .buttonicon.buttoniconnobg { background:transparent!important;color:#088!important; }
/  hex variant  /
 .buttoncyan.buttonhex:before {			background:#088; }
 .buttoncyan.buttonhex:hover:before { 	background-color:#0AA; }
 .buttoncyan.buttonhex:hover {			color:#0AA!important; }

.buttongrey { 					border-color:#CCC;color:#CCC;						background-color:#AAA; }
.buttongrey .buttonicon { 		border-color:#CCC;background-color:#CCC;			color:#AAA; }
.buttongrey .buttonicon.buttoniconnobg { 	color:#CCC; }
.buttongrey:hover, .buttongrey:focus { 				border-color:#FF0!important;color:#CCC!important;	background-color:#AAA!important; }
.buttongrey:hover .buttonicon , .buttongrey:focus .buttonicon {	background-color:#FF0!important;border-color:#CCC!important;color:#CCC!important; }
.buttongrey:hover .buttonicon.buttoniconnobg , .buttongrey:focus .buttonicon.buttoniconnobg { background:transparent!important;color:#CCC!important; }
/  hex variant  /
 .buttongrey.buttonhex:before {			background:#CCC; }
 .buttongrey.buttonhex:hover:before { 	background-color:#AAA; }
 .buttongrey.buttonhex:hover {			color:#AAA!important; }
*/

/* button states */

.button.buttondisabled {
	background-color:var(--bright-grey);
	color:var(--half-black);
	border-color: var(--half-black);
	}
	.button.buttondisabled:active {
		background-color:var(--bright-grey);
		color:var(--half-black);
		border-color: var(--half-black);
	}

.button.buttondark {
	color:var(--button-dark-up-color);
	border-color:var(--button-dark-up-border);
	background-color:var(--button-dark-up-background);
	box-shadow:0 3px 0 var(--button-dark-up-shadow);
	}
	.button.buttondark:focus,
	.button.buttondark:hover {
		box-shadow:0 3px 0 var(--button-dark-up-shadow-hover);
	}
	.button.buttondark:active {
		color:var(--button-dark-click-color);
		border-color:var(--button-dark-click-border);
		background-color:var(--button-dark-click-background);
		box-shadow:0 0 0 var(--button-dark-click-shadow);
	}
	.button.buttondark:active:focus,
	.button.buttondark:active:hover {
		box-shadow:0 0 0 var(--button-dark-click-shadow-hover);
	}

.button.buttonmulti {
	-color:var(--multi-select-up-color);
	-border-color:var(--multi-select-up-border);
	-background-color:var(--multi-select-up-background);
	box-shadow:0 3px 0 var(--multi-select-up-shadow);
	}
	.button.buttonmulti:focus,
	.button.buttonmulti:hover {
		box-shadow:0 3px 0 var(--multi-select-up-shadow-hover);
	}
	.button.buttonmulti:active {
		-color:var(--multi-select-click-color);
		-border-color:var(--multi-select-click-border);
		-background-color:var(--multi-select-click-background);
		box-shadow:0 0 0 var(--multi-select-click-shadow);
	}
	.button.buttonmulti:active:focus,
	.button.buttonmulti:active:hover {
		box-shadow:0 0 0 var(--multi-select-click-shadow-hover);
	}

.button.buttonmultion {
	-color:var(--multi-select-on-color);
	-border-color:var(--multi-select-on-border);
	-background-color:var(--multi-select-on-background);
	box-shadow:0 3px 0 var(--multi-select-on-shadow);
	}
	.button.buttonmultion:focus,
	.button.buttonmultion:hover {
		box-shadow:0 3px 0 var(--multi-select-on-shadow-hover);
	}
	.button.buttonmultion:active {
		-color:var(--multi-select-on-click-color);
		-border-color:var(--multi-select-on-click-border);
		-background-color:var(--multi-select-on-click-background);
		box-shadow:0 0 0 var(--multi-select-on-click-shadow);
	}
	.button.buttonmultion:active:focus,
	.button.buttonmultion:active:hover {
		box-shadow:0 0 0 var(--multi-select-on-click-shadow-hover);
	}
.buttonlight.buttonmultion {
	background-color:var(--multi-select-on-background);
	}
	.buttonlight.buttonmultion:active:focus,
	.buttonlight.buttonmultion:active:hover	{
		background-color:var(--multi-select-on-background);
		}

.button.buttonshadowlight {
	box-shadow:0 3px 0 var(--button-shadow-light);
}

.button.buttonbusy { background-color:#888!important;border-color: #666!important;color:white!important; }
.button.buttonbusy { background-color:#888!important;border-color: #666!important;color:white!important; }
.button.buttonbusy:active:focus,
.button.buttonbusy:active:hover { box-shadow:0 0 0 #666;color:white!important; }
.button.buttonbusy:hover { box-shadow:0 3px 0 #666;color:white!important; }

.buttoniconright { float:right; margin-left:1ch; margin-right:-0.5ch; }

/* OLD
.buttontoggled {	border-style:inset; }
.buttontoggled .buttonicon {	border-style:inset; }
	-.buttontoggled .buttonicon {	border-width:0;margin-top:0;margin-bottom:0;margin-right:0.7em;margin-left:-0.6em; }
	-.buttontoggled .buttonicon.buttoniconright {	margin-right:-0.6em;margin-left:0.7em; }
-.buttontoggled:hover, .buttontoggled:focus { border-style:solid!important; }

.buttontoggled.buttonhilite { background:#FF8!important; }
.buttontoggled.buttontoggledgreen { background-color:#BEC!important;border-color:#063!important;color:#063!important; }
.buttontoggled.buttontoggledred { background-color:#FCC!important;border-color:#C00!important;color:#C00!important; }

.buttontoggled.buttonnountoggle:hover, .buttontoggled.buttonnountoggle:focus { box-shadow:none!important;border-color:initial!important;cursor:default!important; }

.buttonplain { border:0;border-radius:0;background:none; }
.buttonplain:hover, .buttonplain:focus { background:none!important; }

.buttonoff { 					border-color:#888;color:#888!important;						background-color:#CCC;				cursor:default; }
.buttonoff .buttonicon { 		border-color:#888;background-color:#888;			color:#CCC; }
.buttonoff .buttonicon.buttoniconnobg { 	color:#888; }
.buttonoff:hover, .buttonoff:focus { 				color:#888!important;border-color:#888!important;						background-color:#CCC!important; }
.buttonoff:hover .buttonicon , .buttonoff:focus .buttonicon {	background-color:#888!important;border-color:#888!important;	color:#CCC!important;}
.buttonoff:hover .buttonicon.buttoniconnobg , .buttonoff:focus .buttonicon.buttoniconnobg { background:transparent!important;color:#888!important; }
/  hex variant  /
 .buttonoff.buttonhex:before {			background:#CCC; }
 .buttonoff.buttonhex:hover:before { 	background-color:#AAA; }
 .buttonoff.buttonhex:hover {			color:#AAA!important; padding:0.1em 1em 0.1em!important; }
*/

/* button components */

.button.buttoncheck {
	z-index:0;
	overflow:hidden;
	padding-left: 2rem;
	}
	.button.buttonbig.buttoncheck {
		padding-left:2.5rem;
		}
	.button.buttonslim.buttoncheck {
		padding-left:2rem;
		}
	.button.buttoncheck:before {
		content:"";position:absolute;
		z-index:-1;
		top:0;left:0;
		width:1.5rem;
		height:100%;
		background-color:var(--main-white);
	}
	.button.buttoncheck:after {
		content:"";
		display:block;position:absolute;top:50%;transform:translate(-50%,-50%);background:var(--button-bull-unchecked-color);border-radius:100%;width:var(--button-bull-unchecked-size);height:var(--button-bull-unchecked-size);
		left: 1.4ch;
	}
	.button.buttonslim.buttoncheck:after {
		left:calc(var(--button-slim-height) / 2);
	}
	.button.buttonbig.buttoncheck:after {
		left:calc(var(--button-big-height) / 2);
	}
.button.buttoncheckon {
	}
	.button.buttoncheckon:before {
		background-color:var(--light-blue);
	}
	.button.buttonslim.buttoncheckon:before {
		width:var(--button-slim-height);
	}
	.button.buttonbig.buttoncheckon:before {
		width:var(--button-big-height);
	}
	.button.buttoncheckon:after,

	.button.buttoncheck.buttoncheckredx.buttoncheckon:after	{
		content:"✓";
		display:block;position:absolute;top:50%;transform:translate(-50%,-50%);border-radius:0;width:var(--button-checkmark-checked-size);height:var(--button-checkmark-checked-size);line-height:var(--button-checkmark-checked-size);color:var(--button-checkmark-checked-color);background:transparent;
	}
	.button.buttoncheck.buttoncheckredx:after {
		content:"X";
		display:block;position:absolute;top:50%;transform:translate(-50%,-50%);border-radius:0;width:var(--button-checkmark-checked-size);height:var(--button-checkmark-checked-size);line-height:var(--button-checkmark-checked-size);color:var(--button-checkmark-x-color);background:transparent;
		}
	.button.buttoncheck.buttoncheckplus.buttoncheckon:after	{
		content:"-";
		display:block;position:absolute;top:50%;transform:translate(-50%,-50%);border-radius:0;width:var(--button-checkmark-checked-size);height:var(--button-checkmark-checked-size);line-height:var(--button-checkmark-checked-size);background:transparent;
	}
	.button.buttoncheck.buttoncheckplus:after {
		content:"+";
		display:block;position:absolute;top:50%;transform:translate(-50%,-50%);border-radius:0;width:var(--button-checkmark-checked-size);height:var(--button-checkmark-checked-size);line-height:var(--button-checkmark-checked-size);background:transparent;
		}
.button.buttoncheckonly {
	padding-left:0; padding-right:0; 
	}
.button.buttonbig.buttoncheckonly {
	padding-left:var(--button-big-height);
	height:var(--button-big-height); width:calc(var(--button-big-height) + 4px);
	}
.button.buttonslim.buttoncheckonly {
	padding-left:var(--button-slim-height);
	height:var(--button-slim-height); width:calc(var(--button-slim-height) + 4px);
	}
	
.buttonlistitem.buttonlightblue:focus,
.buttonlistitem.buttonlightblue:hover,
.buttonlistitem.buttonlightgrey:focus,
.buttonlistitem.buttonlightgrey:hover {
	background:rgba(255,255,0,0.3);
	text-decoration:underline;
}

.button.buttonhoveryellow:hover, .button.buttonhoveryellow:hover::before { background:var(--bright-yellow); }

.buttonaleft { text-align:left; }

/* OLD
.buttonleftend, .buttonrightend, .buttonmidend { border-radius:0; }
/ hex variant /
 .buttonmidend.buttontoggled { border-right:0;border-left:0; }
 .buttonleftend.buttontoggled { border-right:0; }
 .buttonrightend.buttontoggled { border-left:0; }
*/

/* ---------- UI WIDGETS */



a.galleryitem { text-decoration:none; padding:2px;border:solid 1px blue; }
a.galleryitem:hover { border-color:red; }
.galleryblock { display:flex;width:100%;flex-flow:wrap;align-items:stretch; justify-content:space-between;align-content:flex-start;padding:1em;row-gap:1em; }
.galleryitem { width:45%; padding:0.2em; }
.galleryimg { width:100%; background-size:cover;background-position:center;aspect-ratio:1/1; }