html {font-size:16px;}
body {margin:0;padding:0 0 4em 0;width:100%;text-align:center;font:1em/1.5 'Open Sans',sans-serif;background:#234 url(/img/bg-raster-1-w.png);color:#00ff00;overflow-x:hidden;overflow-y:scroll;}

@keyframes waitspin {0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
#wait {position:fixed;width:128px;height:128px;top:50%;left:50%;transform:translate(-50%,-50%);margin:-64px 0 0 -64px;
border-radius:50%;border:4px solid #FFFF00;z-index:9;
animation: waitspin 2s linear infinite;box-shadow:0 0 1em rgba(0,0,0,0.4), inset 0 0 1em rgba(0,0,0,0.4);}
.wait_bgnd {position:fixed;top:0;left:0;width:100%;height:100%;background:url(/img/empty64.gif);display:none;}
.kill-bgnd {position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,90,0.3) url(/img/bg-vinoristikko.png);opacity:0;transition:0.35s;}

img {margin:0;vertical-align:middle;}
a {text-decoration:none;color:#ffff00;cursor:pointer;}
.anc:hover {color:#FEB201 !important;}


.app-con {opacity:0;transition:opacity 0.5s;}
.app-bar {display:none;position:fixed;z-index:1;left:0;top:0;right:0;height:56px;line-height:56px;
	background-image:url(img/click-re.svg),linear-gradient(#00aa00, #007700);
	background-position:0 center, 0 center;
	background-repeat:no-repeat,repeat;
	background-size:56px 56px,100% 100%;x:, 56px 56px;
	text-align:left;border-bottom:2px solid #000;}
.app-name {margin:0 48px 0 64px;color:#fff;font-size:24px;font-weight:300;letter-spacing:0.15em;}
.app-name b {color:#ffff00;}
.app-big {}

.mediacon {position:relative;user-select:none;height:300px;opacity:0;transition:opacity 0.5s;font-size:24px;margin-top:64px;}
.mediacon .item {display:block;position:absolute;left:0;top:0;transition:all 350ms;width:304px;margin:0;}
.mediacon .group {position:absolute;line-height:56px;margin:0;color:red;width:100%;}
.mediacon .text-only {line-height:48px;font-weight:400;font-size:1.5em;margin:0;}
/* pc, laptop, none mobiles: (hover:hover) and (pointer:fine) */
@media (pointer:fine) {
	.mediacon .item:hover {box-shadow:0 0 16px #000;}
}
.sel-group {display:block;padding:2px 8px;color:#003399;cursor:pointer;}
.sel-group:hover {background:lightblue;}
.sel-grp-tbl {margin:0 auto;border-spacing:2;}
.sel-grp-tbl tr {vertical-align:top;}
.sel-grp-tbl td {border-bottom:1px dashed #999;}
.sel-grp-tbl .nmr {text-align:right;}
.sel-grp-tbl label {margin:0!important;}
.sel-grp-tbl span {font-size:0.875em;color:green;}
.sel-grp-tbl .mname {padding-right:1em;cursor:pointer;}
.sel-li {border-bottom:1px dashed #999;}
.pad-li {padding:6px 0;}


@font-face {
	font-family:"icomoon";
	font-style: normal;
	font-weight: normal;
	src:url(/ico/icomoon/fonts/icomoon.ttf);
}
.icomoon {font-family:icomoon;}
.ico {display:inline-block;width:1em;text-align:center;}
.ico.delete {border-radius:50%;color:#fff;background:red;cursor:pointer;}


.menu-btn-big {position:fixed;top:14px;right:10px;color:#fff;font:32px/40px icomoon;z-index:9;width:40px;text-align:center;background:#000;cursor:pointer;}
.menu-btn-bar {position:fixed;top:8px;right:8px;color:#fff;font:32px/40px icomoon;z-index:9;width:40px;text-align:center;cursor:pointer;}


#menuside {position:fixed;top:0;bottom:0;width:20em;max-width:100%;padding:0;opacity:1;background:#111a22;color:#def2f7;z-index:7;overflow-y:hidden;transition:0.35s;right:0;transform:translateX(100%);}
#menuside hr {border:none;border-bottom:2px solid rgba(255,255,255,0.2);}
.main-menu {text-align:left;padding:1em;height:100%;overflow-y:auto;}
.main-menu a {text-decoration:none;color:#fff;}
.mitem {display:block;line-height:1em;padding:0.55em 1em 0.55em 0.5em;cursor:pointer;}
.mitem:hover {background-color:rgba(255,255,255,0.15);}
.mitem::before {content:"\f078";font-family:icomoon;float:left;margin:0 0.5em 0 0;color:#FFD700;}
.mitem.arrow::after {content:attr(data-arrow);font-family:icomoon;float:right;color:red;}

.kill-bgnd {position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,90,0.3);opacity:0;transition:0.35s;}
.dialog {background:#F0F4F9;box-shadow:0 0 2em rgba(0,0,0,0.5);overflow:hidden;cursor:default;transition:0.35s ease-out;opacity:0;max-width:96%;text-align:left;}
.dialog.trans {transform:scale(0.9) translate(-55%,-55%);}
.dialog.show {opacity:1;}
.dialog.trans.show {transform:scale(1) translate(-50%,-50%);}
.dialog .head {position:relative;font-size:1.125em;padding:0.25em 8px 0.2em 40px;background:url(/img/mesta24-icon-32x32.png) 8px center no-repeat, linear-gradient(#004DB3,#112055);background-size: 24px 24px,auto;color:#fff;letter-spacing:1px;}
.dialog .outer {position:absolute;left:0;top:0;right:0;bottom:0;color:#333;visibility:hidden;opacity:0;}
.dialog .outer.show {visibility:visible;transition:opacity 0.35s;opacity:1;}
.dialog .inner {position:absolute;top:0;left:0;right:0;bottom:0;overflow:auto;user-select:text;}
.dialog .inner a {color:#0033CC;}
.dialog .inner iframe {border:none;background:transparent;width:100%;height:100%;}
.close {float:right;margin:-0.25em 0 0 0.5em;width:42px;height:16px;background:url(/img/close_nad.png);cursor:pointer;}
.close:hover {background-position: -42px 0;box-shadow:0 0 16px #fff;}
.close:active {background-position: -84px 0;}
.closegray {background-color:rgba(0,0,0,0.3);}
.dialog .statusbar {position:absolute;left:0;right:0;background:#6699ff;color:#fff;text-align:center;border-top:1px solid #3377ff;}
.dialog .btn-con {position:absolute;left:0;right:0;background:#e2e6e9;text-align:center;border-top:1px solid #BFC8CE;}
.dialog .btn-con button {margin:0.5em;width:7em;border:0.125em solid rgba(0,0,0,0.3);border-radius:0.25em;}

.dialog-top {background:#fff;border-bottom:1px solid #BFC8CE;padding:8px;margin:0 0 0.5em 0;}
.dialog-top h2,.dlg-h2 {line-height:50px;margin:0;text-align:center;padding-right:52px;font-weight:400;color:#FEB201!important;}
.dlg-h2 {text-align:center;padding-right:52px;}

.dlgs {padding:1.5em 70px 2em 70px;color:#222;box-sizing:border-box;min-height:4em;}
.dlgs a {color:#0000ff;}
.dlgi {position:absolute;top:8px;left:8px;width:60px;height:64px;background:url(/img/dlg-icons.png) no-repeat;}
.dlgi.err {background-position: 0 0;}
.dlgi.info {background-position: -60px 0;}
.dlgi.ok {background-position: -120px 0;}
.dlgi.yesno {background-position: -180px 0;}
.dlgi.alert {background-position: -240px 0;}
.dlgi.not {background-position: -310px 0;}
.dlgi.stop {background-position: -370px 0;}
.dlgi.remark {background-position: -430px 0;}
.dlgi.add {background-position: -495px 0;}
.dlgi.edit {background-position: -556px 0;}
.dlgi.swap {background-position: -684px 0;}
.dlgi.new {background-position: -747px 0;}
.dlgi.prompt {background-position: -808px 0;}
.dlgi.mar {margin:0 -24px 0 0;}

.dlg-toast {position:fixed;left:50%;bottom:20%;max-width:50%;text-align:center;transform:translateX(-50%);padding:0.25em 1em 0.25em 1em;background:#000;color:#fff;box-shadow:0 0 1em #000;transition:opacity 0.5s;overflow:hidden;}

button {font:inherit;cursor:pointer;outline:none;user-select:none;}
.boton {padding:0.15em 0.5em;color:#fff;margin:0 0.5em 0 0;border-radius:0.25em;border:2px solid #fff;background:none;}
.boton img {float:right;margin:0 -0.5em 4px 1em;}
.boton a {color:inherit;cursor:pointer;}
.boton a:hover {color:inherit;}
.boton em {color:#000;font:italic 0.875em/140% serif;display:block;margin:0.25em 55px 0 0;}
.boton:hover {border-color:rgba(0,0,0,0.1);}
.boton.orange {background-color:#FF9900;}
.boton.yellow {background-color:#F5DB00;color:#990000;}
.boton.yellow a {color:#FF4500;}
.boton.yellow:hover {text-shadow:1px 1px 1px #FFFF66;}
.boton.violet {background-color:#993366;}
.boton.violet em {color:#FFCC33;}
.boton.green {background-color:#36B056;}
.boton.blue {background-color:#407EF2;}
.boton.blue em {color:#66FFFF;}
.boton.red {background-color:#E31C19;}
.boton.setti {margin:0.25em 0.5em 0.25em 0;width:12em;max-width:47%;font-size:0.8125em;}
.boton.settim {margin:0.5em 0;width:96px;font-size:0.77778em;}

.boton:disabled {color:#999;background-color:#D1D1D5;text-shadow:1px 1px 1px #fff;pointer-events:none;}
.boton:disabled a {cursor:default;color:inherit;}
.boton:disabled em {color:inherit;}
.boton:disabled img {filter:grayscale(100%);opacity:0.4;}
.boton:active {border-color:rgba(0,0,0,0.25)}
.boton:focus {border-color:yellow;}

.w100 {width:100%;box-sizing:border-box !important;}
.form {color:#453935;box-sizing:border-box;position:relative;}
.form h5 {margin-bottom:2px;}
.form .inp {font:1.0em/140% monospace;padding:0.25em 0.5em 0.2em 0.5em;border:1px solid #BFC8CE;border-radius:2px;color:#483D8B;background-color:#fff;outline:none;box-sizing:border-box;max-width:100%;}

.font13 {font-size:0.8125em!important;}
.font14 {font-size:0.875rem!important;}
.font16 {font-size:1rem!important;}
.font18 {font-size:1.125rem!important;}

/* for custom checkbox & radio
 < label><input type="checkbox" name="cbox1"><b></b>Text here</label>
 */
label {margin-right:1em;line-height:1.25;cursor:pointer;display:inline-block;}
label.nowrap {white-space:nowrap;}
label input {display:none;}
label b {position:relative;display:inline-block;top:0.125em;width:1em;height:1em;background:rgba(0,0,0,0.25);margin:0 0.5em 0 0;}
label b.lite {background:rgba(255,255,255,0.25);}
label input:checked+b {background:#0033ff;color:#fff;}
label input[type="checkbox"]+b {border-radius:0.125em;}
label input[type="checkbox"]:checked+b::after {content:" ";position:absolute;width:0.25em;height:0.5em;left:0;bottom:0.1875em;border-bottom:0.1875em solid #fff;border-right:0.1875em solid #fff;transform-origin:bottom right;transform:rotate(45deg);border-radius:0.125em;}
label input[type="radio"]+b {border-radius:50%;box-sizing:border-box;}
label input[type="radio"]:checked+b {background:#fff;border:0.25em solid #0033ff;}
label.disabled {opacity:0.75;pointer-events:none;filter:blur(0.5px) sepia(75%);}

article {margin:1em;color:lightblue;text-align:left;overflow:hidden;transition:height 1s;}


/* nämä ehkä voisi olla moduleita kaikille */

.left {float:left;}
.hidden {visibility:hidden; position:absolute;top:-99999px;left:-9999px;}

.help-box {position:relative;font-size:0.875em;background:#D7E1EE;color:#000;border:1px solid #B7B7F1;padding:0 0.5em 0.5em 0.5em;border-radius:2px;text-align:left;}
.help-box p {margin:0.5em 0 1em 0;}
.help-box .right_miinus {margin-right:13em;}

/* instead of table */
.grid {box-sizing:border-box;max-width:100%;} /* not needed: display:table ??? */
.grid dl {margin:0.25em 0 0 0;}
.grid dt {font-size:0.875em;font-weight:bold;margin:0;}
.grid dd {margin:0;padding:0.25em 0;max-width:100%;}
.grid .celli {margin:0;padding:0 0 1em 0;color:#A04088;font-size:0.875em;line-height:normal;} /* cell info, comment */

.popup {border-radius:0.35em;position:absolute;z-index:9;box-shadow:0.2em 0.2em 0.75em rgba(0,0,0,0.5);margin:0.25em 1em 0 0;letter-spacing:0.4px;}
.popin {padding:0.5em 1em;}
.popic {background-color:#EBF0F5;color:#333333;}
.popif {background-color:#DEEAF6;color:#003366;}
.poper {background-color:#FF6347;color:#fff;}
.popbot {border-top:1px solid rgba(0,0,0,0.3);color:rgba(0,0,0,0.5);padding:3px 12px 3px 12px;text-align:right;}
.popup.ptr::before {content:"";position:absolute;width:1em;height:1em;left:1em;top:-0.5em;background:inherit;transform:rotate(45deg);}


@media (min-width:800px) {
	.help-box {float:right;width:12em;margin:0 0 1em 1em;}
	/* instead of table */
	.grid {display:table;}
	.grid dl {display:table-row;}
	.grid dt {display:table-cell;padding:0 1em 0 0.5em;vertical-align:middle;}
	.grid dd {display:table-cell;vertical-align:middle;}
}

.icon_usr {display:inline-block;width:50px;height:50px;background:url(/img/user-icons.png) 0 6px no-repeat;}
.icon_usr.login {background-position: -56px 0;}
.icon_usr.signup {background-position: -110px 0;}
.icon_usr.edit {background-position: -160px 0;}
.icon_usr.del {background-position: -210px 0;}
.icon_usr.key {background-position: -270px 0;}
.icon_usr.member {background-position: -384px 0;width:80px;}

.person {display:inline-block;margin:0 16px 16px 0;background:#E6E6FA;font-size:13px;color:#444;font-family:Verdana,Georgia;}
.person img {background:#f0f0f0;border-radius:50%;}
.person .data {display:inline-block;vertical-align:top;padding:4px 16px 0 16px;width:200px;height:148px;overflow:auto;}
.person .title {letter-spacing:1px;color:#000;}
.person .name {margin:2px 0 14px 0;font-weight:bold;}
.person a {color:#0033FF;}
.person-select {text-align:center;margin:0.5em;float:left;width:6rem;}
.person-select img {padding:0px;cursor:pointer;width:100%;height:100%;border-radius:50%;}
.person-select img:hover {background:rgba(255,165,0,0.5);}
.person-select p {margin:0;font:0.8125em/100% sans-serif;color:#808080;}

/* oFile / Opfs dialog */
.oFile {padding:1em;font:14px monospace;}
.oFile p {padding:4px 0;border-bottom:1px dashed silver;}
.oFile p::before {display:inline-block;width:1.5em;font-family:icomoon;}
.oFile .file-text::before {content:"\e924";color:blue;}
.oFile .dir-closed {}
.oFile .dir-open::before {content:"\e930";color:orange;}

.touch {touch-action:pinch-zoom;}