/* Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
MOBILE=0, Win32=0, localhost= */
/* file: /css-main.css */
/* Responsive design. For DESKTOP, TABLET & MOBILE */
html {font-size:16px;height:100%;}
/* iso fontti isolla scriinillä, jos pixel-ratio < 1.2 eli ~ 116px (1.2 x 96px)
@media (min-width:120px) and (max-width:1500px) and (max-resolution:116dpi) {
html {font-size:13px;}
}
@media screen and (min-width:1240px) and (max-width:1500px) and (max-resolution:116dpi) {
html {font-size:13px;}
}
*/
@font-face {
font-family:"icomoon";
font-style: normal;
font-weight: normal;
src:url(/ico/icomoon/fonts/icomoon.ttf);
}
body {position:static;margin:0;padding:0;width:100%;height:100%;background:#b2e0ff url(img/bg-vinoristikko.png);font:400 1em/1.5 'Segoe UI','Noto Sans',sans-serif;overflow-y:scroll;user-select:none;counter-reset:num;text-size-adjust:none;}
@keyframes waitspin {0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
#wait {position:fixed;width:96px;height:96px;top:50%;left:50%;transition:opacity 300ms;transform:translate(-50%,-50%);margin:-64px 0 0 -64px;border-radius:50%;border:16px solid;border-color:#407EF2 #E73E32 #FEB201 rgba(0,62,180,0.2);z-index:9;animation: waitspin 2s linear infinite;}
.wait_bgnd {position:fixed;top:0;left:0;width:100%;height:100%;background:url(img/empty64.gif);display:none;}
img {border:none;vertical-align:middle;height:auto;}
a {cursor:pointer;text-decoration:none;color:inherit;}
p {max-height:99999px;} /* poista joskus kun kaikki selaimet osaavat: Kts. yllä body {text-size-adjust:none;} */
/* this prevents chrome's stupid font-size encreasing. älä poista, google ei koskaan korjaa asiaa! */
h1,h2,h3 {color:#000;}
.div-logo {position:absolute;left:0;top:0;width:100%;height:50px;z-index:4;background:#001350;padding:8px 0;transition:transform ease-out 0.35s;border-bottom:2px solid #000;}
.top-logo {margin-top:2px;display:inline-block;line-height:48px;}
.top-logo img {max-width: calc(100vw - 50px);}
.div-body {margin:0 auto;}
.div-both {position:relative;margin-top:1em;}
.div-outer {}
.div-main a:hover {text-decoration:underline;}
.div-user-top {text-align:right;margin:1em 0 0 0;}
.div-user-top .name {color:#0033CC;display:inline-block;transition:all 0.7s;}
.div-user-top .name.anim {transform:scale(2) translate(-200px,100px);color:red;background:#000;border-radius:0.5em;box-shadow:0 0 1em rgba(0,0,0,0.5);padding:0 1em;}
.div-user-top a:hover {text-decoration:underline;}
#mainos-sky {box-sizing:border-box;transition:height 0.7s;overflow-x:auto;}
#mainos-oikea {background:#fff;}
.mainos-con {background:rgba(255,255,255,0.4);margin-bottom:2em;max-width:100%;overflow-x:auto;}
.mainos-html {box-sizing:border-box;border:1px solid #000;margin:2px 0;}
.top-margin {padding-top:64px;}
.top-menu {color:#00284D;}
.top-menu a {display:inline-block;line-height:2em;padding:0 1em 0 0.75em;xbackground:rgba(255,255,255,0.25);background:#79AFF8;x:#b7cffa;margin:0 4px 4px 0;border-radius:4px;border:2px solid transparent;}
.top-menu a:hover {border-color:#202854;}
.top-menu a::before {content:"\f078";font-family:icomoon;color:#fff;margin:0 0.5em 0 0;}
.top-menu .act {background:#FFCB08;border-color:#CD5C5C;color:#000;}
.cell-main {}
.cell-right {text-align:center;}
.cell-head {letter-spacing:1px;color:#fff;line-height:1.75;text-shadow:1px 1px 1px rgba(0,0,0,0.5);border:0.25em solid #fff;}
.head-main {background:#407ef2;padding:0 0 0 1em;position:relative;}
.head-right {background:#E73E32;padding:0;text-align:center;}
.div-inner {word-wrap:break-word;color:#282828;background:#fff;user-select:text;-moz-user-select:text;overflow-x:auto;}
.div-inner a {color:#0084b4;}
.div-inner > p a {font-weight:700;}
.div-inner a:hover {text-decoration:underline;}
.div-inner hr {border:none;border-top:2px solid #CECEF5;}
.div-inner img {max-width:100%;}
.footer {background:#001350;border-top:0.5em solid #000;}
.tbl_footer {}
.tbl_footer nav {display:inline-block;margin:0 0.5em 0 0;padding:0.5em;vertical-align:top;}
/*background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);}*/
.tbl_footer a {display:block;line-height:1em;color:#407EF2;padding:0.5em 0 0.5em 0.5em;}
.tbl_footer a::before {content:"\f078";font-family:icomoon;color:#FEB201;margin:0 0.5em 0 0;display:inline-block;}
.tbl_footer a:hover {text-decoration:underline;color:#FEB201;}
.div_footer {height:120px;background:url(img/tow-profile-3.png) 0 0 repeat-x;}
.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;}
.grid .inp {max-width:100%;}
/* LOAD FILE: /xads.txt Not Found 404! */
/* tää on vähän erilainen, muista! tehty uudenpaan dialog.js (ei dialog-2.js) */
.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;}
.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%;}
.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 hr {border:none;border-top:2px solid rgba(0,0,0,0.2);margin:0 0 2px 0;}
.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:rgba(0,0,100,0.1);text-align:center;border-top:1px solid rgba(0,0,100,0.2);}
.dialog .btn-con button {margin:0.5em;width:7em;background:rgba(255,255,255,0.35);border:0.125em solid rgba(0,0,100,0.3);border-radius:0.25em;transition:0.25s;}
.dialog .btn-con button:hover {background:rgba(255,255,255,0.55);border-color:rgba(0,0,0,0.55);}
.titlecut {display:block;white-space:nowrap;max-width:calc(100% - 50px);overflow-x:hidden;text-overflow:ellipsis;}
/* dialog / viewer: */
.view-btn {display:inline-block;height:28px;width:28px;margin:0 0.5em;background:url(img/viewer-ctrls.png) 0 0 no-repeat;}
.view-btn.back {background-position:-4px 0px;}
.view-btn.play {background-position:-34px 0px;}
.view-btn.pause {background-position:-34px -31px;}
.view-btn.fwrd {background-position:-65px 0px;}
.bgnd {background:url(img/bg-raster.png) #EEEEFC;}
.dialog-top {background:#fff;border-bottom:1px solid #BFC8CE;padding:8px;margin:0 0 0.5em 0;}
.dialog-top 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;}
.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;}
.maxw50 {max-width:50%!important;}
@media (min-width:1240px) {
/* DESKTOP = 0 */
/* keskittää waitin ja dialogin cell-mainiin nähden
* waitin -96 ja -160 (0.5 * right.cell.width + gap 20 )
*/
#wait {margin-left:-224px;}
.dialog,.dlg-toast {margin-left:-160px;}
.div-body {max-width:1240px;}
.top-menu {}
.div-outer {width:80%;max-width:920px;}
/*.cell-main {box-shadow:0 0 1em rgba(0,0,0,0.5);}*/
.cell-right {position:absolute;top:0;right:0;width:300px;overflow:hidden;}
.div-inner {padding:1em 1em 0.25em 2.5em;min-height:400px;}
}
@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;}
}
@media (min-width:1025px) {
.top-menu {}
.footer {margin-top:2em;}
}
@media (max-width:1024px) {
.top-menu {display:none;}
.footer {margin-top:2em;}
}
@media (max-width:1239px) {
/* MOBILE = 2 */
.div-body {max-width:980px;}
.div-user-top {padding-right:0.5em;}
.top-menu {padding-left:0.5em;}
.top-menu a {min-width:8.75em;}
.div-both {}
.div-inner {padding:1em 2.5% 0.25em 2.5%;margin-bottom:1em;}
.mobino {display:none;}
.mobi25,.maxw25 {max-width:35%!important;}
.maxw35,.mobi35 {max-width:35%!important;}
.mobi20 {max-width:25%!important;}
.mobi50 {max-width:50%!important;}
.mobisize {}
}
@media (max-width:400px) {
/* kapea Mobile */
.mobiclear {clear:both;}
/*.cell-main,.cell-right {margin:0 0.5em;}*/
}
/* smartphones, touchscreens: coarse (karkea) pointing device
*https://css-tricks.com/touch-devices-not-judged-size */
@media (pointer:coarse) {
.loose-mobi li {padding:0.5em 0;}
.loose-mobi > div {margin:0.5em 0;}
.loose-mobi > span {margin-bottom:0.5em;display:inline-block;}
}
.menu-btn {position:fixed;top:14px;right:10px;color:#fff;font:32px/40px icomoon;z-index:5;width:40px;text-align:center;background:#000;cursor:pointer;transition:color 0.5s;}
#menuside {position:fixed;top:68px;bottom:0;width:20em;max-width:100%;border-left:2px solid #000;opacity:1;background:#0066cc;color:#fff;z-index:3;overflow-y:hidden;transition:0.35s;right:0;transform:translateX(100%);}
#menuside hr {border:none;border-bottom:1px solid rgba(255,255,255,0.2);border-top:1px solid rgba(0,0,0,0.35);}
.main-menu {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::before {content:"\f078";font-family:icomoon;float:left;margin:0 0.5em 1em 0;}
.mitem.act {color:#FFD700;background:rgba(0,0,0,0.2);}
#menuside .mitem::before {color:#FFD700;}
#menuside .mitem:hover {background:rgba(0,0,0,0.1);}
/* user's menu */
.usr-menu {}
.usr-menu .mitem:hover {background:rgba(255,255,255,0.75);}
/*
.yhteisomenu {margin:0;padding:0.35em 0 0.35em 0;border:0.25em solid #f8f8ff;border-top:none;background:#D8BFD8;}
.yhteisomenu .mitem {float:left;padding-right:1.5em;margin:0 0 0 0.5em;}
.yhteisomenu .mitem.act {color:#843670;background:#EFE5EF;}
*/
#menu_msg {padding-left:224px;}
#menu_msg .msg {padding:1px 4px 1px 4px;background:red;color:yellow;}
.hand {cursor:pointer;}
.icomoon {font-family:icomoon!important;}
.icomoon.ok::before {content:"\ea10";color:#009900;}
.icomoon.not::before {content:"\e901";color:#FF3300;}
.icona::after {font-family:icomoon;vertical-align:middle;margin:0 0 0 0.5em;}
.icona.mitena::after {content:"\f078";color:#FFD700;}
.icon::before {font-family:icomoon;vertical-align:middle;margin:0 0.5em 0 0;}
.icon.home::before {content:"\e903";}
.icon.ar-up::before {content:"\e316";}
.icon.ar-left::before {content:"\e314";}
.icon.ar-rigth::before {content:"\e315";}
.icon.ar-down::before {content:"\e313";}
.icon.book::before {content:"\f007";}
.icon.books::before {content:"\f001";}
.icon.search::before {content:"\f02e";}
.icon.pics::before {content:"\e ehkä apps or status voisi käyttää myös90e";}
.icon.notify::before {content:"\e951";}
.icon.settings::before {content:"\f02f";}
.icon.memo::before {content:"\e907";}
.icon.bookmarks::before {content:"\e9d3";}
.icon.info::before {content:"\ea0c";}
.icon.infoblue::before {content:"\ea0c";color:#0079D3!important;}
.icon.help::before {content:"\ea09";}
.icon.close::before {content:"\e906";}
.icon.close-red::before {content:"\e906";background:#EE3B3B;color:#fff;border-radius:0.2em;}
.icon.ok::before {content:"\ea10";color:#009900;}
.icon.not::before {content:"\e901";color:#FF3300;}
.left {float:left;}
.right {float:right;}
.center {text-align:center;}
.abso {float:left;position:fixed;}
.red {color:red;}
.alarm {background-color:red;color:#fff;}
.clear {clear:both;}
.pre-wrap {white-space:pre-wrap;} /* */
.inline {display:inline-block;}
.coverup {margin:0;height:0;overflow:hidden;transition:height 0.5s;}
.tbl00 {width:100%;border-spacing:0;}
.tbl00 td {padding:0;}
.hidden {visibility:hidden; position:absolute;top:-99999px;left:-9999px;}
h1,h2 {line-height:normal;font-weight:400;}
h1 {text-shadow:1px 1px 4px rgba(0,40,115,0.5);x:0.1em 0.1em 0.225em rgba(7,37,99,0.3);}
.capper {clear:both;margin-top:3em;}
.devider {height:17px;background:url(img/star-3.png) center center no-repeat;}
.subhead {color:#AC3636;}
.resepti {color:#006400;min-height:102px;padding:0.5em 0 0.5em 0;background:#EEE8AA;}
.resepti img {float:right;margin:0.5em;}
.resepti ul {padding:0 0 0 2em;margin:0;}
/*.fonthead {font:1em/175% FONTHEAD;}
.fontmono {font-family:FONTMONO;}
.fontserif {font-family:FONTSERIF;}
.fontsans {font-family:FONTSANS;}
.fontbase {font-family:FONTBASE;}
.fontnarrow {font-family:FONTNARROW;}
.fonts75 {font-size:0.75rem;}
.fonts80 {font-size:0.8125rem!important;}
.fonts85 {font-size:0.875rem;}
.fonts90 {font-size:0.9375rem;}
.fonts100 {font-size:1rem;}
.fonts110 {font-size:1.125rem;}
.fonts125 {font-size:1.25rem;}
.fonts150 {font-size:1.5rem;}
.fonts200 {font-size:2rem;}*/
#path,#path2 {font-size:0.9125em;color:#777;white-space:normal;}
.date {font-size:0.875em;color:#555;margin:3em 0 3em 0;}
#alert {float:left;width:14rem;padding:0 19px 0 8px;}
#message {background:rgba(255,255,0,0.6);border:1px solid #FFD700;margin-top:8px;padding:8px;border-radius:8px;}
.user-name {color:#FFD700;}
#login,#logout {display:none;}
.listing {}
.listing li {margin:0.4em 0 0.4em 0;}
.tool_bar {padding:3px 8px 3px 8px;background:#E6E6FA;color:#8080C0;}
.index {counter-reset:index;}
.index.intrex h2 {font-size:1.125em;display:inline-block;font-weight:bold;width:1.7em;text-align:center;padding:0.25em 0 0.25em 0;background:#F3E113;color:#7d551c;text-shadow:none;border:1px solid #DAA559;}
.index.intrex h3 {margin:0;}
.index.intrex p span {color:#DAA520;}
.index.intrex p {margin:0 0 1em 0px;font-size:0.875em;}
.index dd {margin:0 0 0 50px;}
.index dd:before {color:#CC3333;width:40px;float:left;padding:0;margin:0 0 0 -44px;text-align:center;
counter-increment:index; /* Increment the index counter */
content:counter(index) "."; /* Display the counter (index) */
}
.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;}
.pagedate{color:#6699FF;font-size:11px;clear:both;text-align:right;padding-top:16px;}
.extra-info {padding:1px 1em 1px 1em;background:#E6E6FA;} /* äh, 1px = tärkeä, jotta margins work */
.extra-info ul {padding:0 0 0 1.25em;margin:0;}
button {font:inherit;cursor:pointer;outline:none;user-select:none;}
button *, .valign {vertical-align:text-bottom;}
.boton {font:inherit;line-height:1.25;padding:0.25em 1em 0.25em 1em;color:#fff;margin:0 0.5em 0 0;border-radius:0.25em;border:2px solid #fff;background:none;}
.boton.w100 {display:block;}
.boton img {float:right;margin:0 -11px 4px 20px;}
.boton.ok {padding-right:1.85em;background:url(img/btn-ok.svg) 0.25em 0.25em no-repeat;}
.boton:hover {text-shadow:1px 1px 1px rgba(0,0,0,0.3);}
.boton a {color:inherit;cursor:pointer;}
.boton a:hover {color:inherit;}
.boton em {color:#000;font:italic 0.778em/140% serif;display:block;margin:0.25em 55px 0 0;}
.boton.right {margin:0 0 0.5em 1em;}
.boton.setti {margin:0.25em 0.5em 0.25em 0;width:12em;max-width:47%;font-size:0.8125em;}
.boton.default {background-color:#7D81B7;}
.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.black {background-color:#222;}
.boton.black {color:#0066FF;}
.boton.blue {background-color:#407EF2;}
.boton.blue em {color:#66FFFF;}
.boton.pink{background-color:#FF00CC;}
.boton.red {background-color:#E31C19;}
.boton.dusky {background-color:rgba(0,0,0,0.2);}
.boton.dusky em {color:#000;}
.boton.clear {border:none;background:transparent;color:#407ef2;}
.boton.shade {box-shadow:2px 2px 6px rgba(255,255,255,0.2) inset, 2px 2px 8px rgba(0,0,0,0.2);}
.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;}
.upper {text-transform:uppercase;}
.nowrap {white-space:nowrap;}
.w100 {width:100%;box-sizing:border-box !important;}
pre,code {tab-size:4;}
form,video,iframe {padding:0;margin:0;display:block;max-width:100%;}
iframe {border:none;}
.form {font-size:1rem;color:#453935;box-sizing:border-box;position:relative;}
.form.pad_doc {padding:0.5em 2em 2em 2em;}
.form.pad_dlg {padding:0.5em 1em 1em 1em;}
.form.pad_ico {padding:0.5em 2em 1em 2em;}
.form.pad_16 {padding:1em;}
.form h5 {font-size:0.875em;margin:0.5em 0 0.25em 0;}
.form .h5 {font-size:0.875em;}
.form a {color:#0084b4;}
.form a:hover {text-decoration:underline;}
.form .bright {color:#009900;}
.form .tbl {border-spacing:0;}
.form .padbot {padding-bottom:0.5em;}
.form .tbl td {}
.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;}
.form .inp.sans {font:inherit;}
.form .inp:disabled {color:#777;border:1px solid #aaa;background-color:#f0f0f0;}
.form input:read-only {color:#777;}
.form sup {color:#C71585;}
.form .html {color:#0033CC;}
.form .right {margin:0 6px;}
.form .minus {margin:0 -1em 0 0;}
.form textarea {resize:none;margin:0;outline:none;display:block;}
.form .item:hover {background-color:#cce6ff;cursor:pointer;}
.form .item.act {background:lightblue;}
.font13 {font-size:0.8125em!important;}
.font14 {font-size:0.875rem!important;}
.font16 {font-size:1rem!important;}
.font18 {font-size:1.125rem!important;}
/* yhteisö, jäsen yms. luettelot */
.tabla {border-spacing:0;background:#E6E6FA;border:1px solid #778899;border-collapse:collapse;}
.tabla td {padding:0.5em;}
.tabla .th {font-weight:bold;background:#778899;color:#fff;}
.tabla .th .sbox.checked::before {color:inherit;}
.tabla .bgnd {background:#D3D3F7;}
.tabla .tdc {text-align:center;}
.tabla .smaller {font-size:0.875em;line-height:1.4em;}
/* for custom checkbox & radio
*/
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%);}
fieldset:disabled > * {opacity:0.75;pointer-events:none;filter:blur(0.5px) sepia(75%);}
.radioblock {position:relative;cursor:pointer;}
.radioblock::after {content:"";font-weight:400;position:absolute;right:0.15em;top:0em;}
.radio:checked + .radioblock {outline:0.25em dotted rgba(255,100,0,0.85);outline-offset:0.25em;}
.radio:checked + .radioblock::after {content:"\2605";color:#000;}
.sbox {font-weight:400;cursor:pointer;display:table;border-spacing:0;padding:0 2px 0 2px;}
.sbox:hover {text-decoration:underline;}
.sbox::before {font-family:icomoon;content:"\ea53";margin-right:0.75em;opacity:0.55;display:inline-block;}
.sbox.checked::before {content:"\ea52";opacity:1;color:#0066CC;}
.sbox.disable {pointer-events:none;}
.lnk {padding-left:24px;background:url(img/i_link.png) 2px center no-repeat;}
.lnk.bg {background-color:#E0FFFF;}
.lnk_back {padding:0px 8px 0px 24px;background:url(img/i_link_back.png) 0px center no-repeat;}
.lnk-dlg::before {content:'';display:inline-block;box-sizing:border-box;width:1em;height:1em;border-top:0.25em solid #1553C7;background:#ddd;margin-right:0.5em;-0em 0.5em 0 0;}
.chk-ok {}
.chk-not {padding:0 0 0 24px;background:url(img/i-checked-not.png) 0 center no-repeat;}
.google {padding-left:24px;background:url(img/i-google.png) 2px center no-repeat;}
.linko {padding-left:1.5em;background:url(img/linko.png) 2px center no-repeat;background-size:1em 1em;}
.wiki::before {content:"W";font:0.8125em/1 serif;box-sizing:border-box;padding:1px 2px 0 2px;background:#FEB201;color:#fff;margin:-0.2em 0.4em 0 2px;border-radius:0.2em;}
.youtube {padding:0 0 0 28px;background:url(img/youtube-icon.png) 2px center no-repeat;}
.youtube-thumb {padding:0 0 40px 0;border:4px solid #E22A26;background:#E22A26 url(img/youtube.png) center bottom no-repeat;cursor:pointer;}
.youtube-thumb .txt {box-sizing:border-box;position:absolute;width:100%;bottom:40px;color:#fff!important;background:rgba(0,0,0,0.4)!important;}
.map {padding-left:30px;background:url(img/i-map.png) 2px center no-repeat;}
.mask-16 {position:relative;}
.mask-16::after {content:"";position:absolute;left:0;top:0;width:100%;height:100%;background:url(img/bw-mask-dot-16.png);z-index:1;}
.mask-16 img {display:block;}
.hide {display:none;}
a.disabled {color:rgba(0,0,0,0.35);text-shadow:1px 1px 2px #fff;pointer-events:none;}
.linkset a,.lnk3 {padding:0 2px 0 16px;background:url(/img/lnk.png) 0 center no-repeat;}
.linkset a {margin:0 16px 0 0;}
.email {background:url(img/i-email-s.png) 0 center no-repeat;padding:0.25em 0 0.25em 24px;}
.lnk-hihitys {background:url(img/i-hihitys.gif) 0 center no-repeat; padding:0 0 0 26px;line-height:26px;}
.hide_visi {position:relative;height:24px;overflow:hidden;margin-bottom:4px;}
.hide_visi p {padding:4px 8px 4px 8px;margin:4px 0 4px 0;background:#F8F8FF;border:1px solid #C7DAE2;border-radius:5px;color:#D2691E;}
.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;}
.person-select img {padding:2px;cursor:pointer;width:6rem;height:6rem;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;}
.pic {position:relative;}
.pic.left {margin:0 1em 0.5em 0;float:left;}
.pic.right {margin:0 0 0.5em 1em;float:right;}
.pic.center {display:table;text-align:center;margin:2em auto;clear:both;}
.pic.frame {padding:0.375em;background:#fff;box-shadow:0 0 0.35em rgba(0,0,0,0.2);}
.pic .txt,.text {display:flex;color:#586878;font-size:13px;line-height:125%;margin:0;padding:0.25em;text-align:center;}
.pic .txt i {width:0;flex-grow:1;}
.thumbnails img,.thumb {margin:0 8px 8px 0;width:80px;height:80px;border:4px solid #fff;box-shadow:0 0 6px #A9A9A9;}
.thumbnails img:hover {cursor:pointer;box-shadow:0 0 12px #9394BF;}
/*div.center {display:table;margin:2em auto;clear:both;}*/
.video-con {position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.video-con::after {content:"";color:#fff;position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:url(img/video-64.png) center center no-repeat;opacity:0.75;}
.video-con:hover::after {opacity:1;}
.video-con .obj {position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;}
.cue-yellow::cue {background:rgba(0,0,0,0.5);color:#FFFF00;}
.watermark {position:absolute;top:4px;right:4px;opacity:0.5;z-index:3;pointer-events:none;}
/* kunnat */
.tbl_aurinko {margin:16px;width:95%;color:#333; border-spacing:0;}
.tbl_aurinko .now {color:#fff;background:#FF6600;}
.tbl_aurinko td {text-align:right;padding:2px 16px 2px 16px;border-bottom:1px solid #ddd;}
.tbl_aurinko .kuu {background:#ddd;color:#0066FF;}
.happen {margin:2em 0 1em;padding:1em 8px 1em 2px;border-radius:9px;width:100%;}
.happen.pad {padding:1em;box-shadow:0 0 64px #E6E6FA inset;border:1px solid #D7D7F7;}
.happen h2 {margin:0 0 1em 0;color:#4169E1;}
.happen img {}
.happen .rside {font-size:1.15em;color:#4682B4;padding-left:2em;}
/* EDITING PAGE */
.page-tbl {}
.page-tbl .th {text-align:center;font-weight:bold;}
.page-tbl.fixed {table-layout:fixed;}
.page-tbl.border {border-spacing:0;border:2px solid;border-color:transparent;border-collapse:collapse;}
.page-tbl.border.sys {background-color:#F0F0F8;border-color:#b0b0b8;color:#303038;}
.page-tbl.border tbody {border-color:inherit;} /* firefox needs this */
.page-tbl.border tr {border-color:inherit;}
.page-tbl.border td {border:1px solid;border-color:inherit;}
.page-tbl.border.sys .th {background-color:#c0c0c8;}
.page-tbl td {padding:0.25em 0.5em;}
/* mobiili-versiossa seuraavat jätetään tyhjäksi, ehkä leveys voisi olla aina 100% */
.columns2 {column-count:2;}
.columns3 {column-count:3;}
.columns4 {column-count:4;}
.width20 {width:20%;}
.width30 {width:30%;}
.width40 {width:40%;}
.width50 {width:50%;}
.width70 {width:70%;}
.width80 {width:80%;}
.width100 {width:100%;}
.quoter {padding:0 0 0 4em;position:relative;}
.quoter::before {font:bold 4em serif;position:absolute;top:0;left:0;bottom:0;width:1em;color:#fff;text-align:center;}
.quoter.norma {background:#bbb;}
.quoter.norma::before {content:"\201D";background:#333;}
.quoter.infoa {background:#D3E3F7;}
.quoter.infoa::before {content:"i";background:#0033FF;}
.quoter.warna {background:#FFAC97;color:#000;}
.quoter.warna::before {content:"!";background:#FF3300;}
.quoter p {margin:0;padding:0.5em 1em;}
.sanottu {padding:8px;background:#E6E6FA;color:#003366;border-radius:6px;}
.sanottu p {margin:1em 0 0 0;font-size:0.75em;text-align:right;}
/* e-books */
/* in body num counter & set to zero */
.num {border-top:2px solid #CECEF5;padding:1.5em 0 2em 0;margin:0;}
.num.img50 img {max-width:50%;}
.num::before {border-radius:0.25em;background:#CECEF5;color:#333;float:left;padding:0.1em 0.5em 0.1em 0.5em;margin:-2.5em 1em 0.0em 0;
counter-increment:num; /* Increment the num counter */
content:counter(num) "."; /* Display the counter (num) */
cursor:pointer;
}
/* MOBILE:
.view-dlg {position:fixed;top:0;left:0;overflow:auto;box-sizing:border-box;width:100%;height:100%;background:#fff;color:#333;}
.view-dlg .title {position:relative;overflow:hidden;line-height:24px;padding:0.25em 2em 0.25em 0.5em;background:#0033CC;color:#fff;font-weight:bold;}
.view-dlg .inner {position:relative;}
.view-dlg .inner > * {display:block;margin:0;xwidth:100%;}
.view-dlg .html {box-sizing:border-box;overflow:auto;}
.view-dlg .side {font-size:0.875em;padding:1em;box-sizing:border-box;}
.view-dlg .side.black {background:#000;color:#ddd;}
.view-dlg .side a {color:#4169E1;}
.view-dlg .active {color:#999!important;pointer-events:none;}
.view-dlg .caption {font-size:0.875em;line-height:normal;padding:0.25rem 0 0.25em 0;text-align:center;}
*/
.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;}
.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;}
.poper {background-color:#FF6347;color:#fff;}
.popup.ptr::before {content:"";position:absolute;width:1em;height:1em;left:1em;top:-0.5em;background:inherit;transform:rotate(45deg);}
.pop_title {padding:4px 6px 4px 8px;color:#fff;background:#000;}
.pop_itex,.pop_mute,.pop_alert {padding:3px 16px 3px 16px;color:rgba(0,0,0,0.4);border:1px solid transparent;cursor:default;}
.pop_alert {background-color:#FFFF66;color:red;border:1px dotted #FF6600;}
.pop_itex:hover {background-color:rgba(0,0,0,0.1);border:1px solid rgba(0,0,0,0.3);}
.pop_item {padding:3px 16px 3px 16px;margin:2px 0 2px 0;border:1px solid transparent;cursor:pointer;border-radius:3px;}
.pop_item:hover {background-color:#5498FE;color:#fff;border:1px solid #0066CC;}
.surf {position:fixed;right:1rem;bottom:1rem;padding:0.5rem 1rem 0.5rem 1rem;border-radius:0.5rem;color:#fff;background:rgba(64,126,242,0.5);border:2px solid #fff;transition:opacity 0.5s;}
.surf b {cursor:pointer;}
.surf b:hover {color:#FFFF00;}
.up-down {position:absolute;right:1em;bottom:1em;color:#B0E0E6;}
.up-down b {cursor:pointer;}
.up-down b:hover {color:#ffff00;}
#canvas-con {position:relative;left:50%;width:70%;margin-left:-35%;}
#canvas-con canvas {background:url(/img/kello-ii.png);background-size:100% 100%;}
#canvas-con .date {position:absolute;z-index:2;background:rgba(255,255,255,0.5);color:#333;font-family:sans-serif;width:6em;padding:2px 0 1px;text-align:center;}
#usrcon {min-height:56px;}
/* file: /chat/chat.css */
/* ATTENTION: all sizes in pixels, not em! */
.chat-main-con {position:relative;background:#C6E1EE;border-radius:4px;border:2px solid #A0CAE1;overflow:hidden;}
.chat-container {border-radius:4px;font:16px/1.25 'Noto Sans',sans-serif;transition:0.5s opacity;user-select:text;}
.chat-container.disabled {opacity:0.5;pointer-events:none;}
.chat-top {background:#C6E1EE;display:flex;align-items:center;padding:4px 0 4px 8px;border-bottom:2px solid #A0CAE1;color:#000;}
.chat-top-ico {}
.chat-msg-con {font-size:15px;color:#333;background:#E4F1F7 url(/img/bg-abs.png);height:300px;padding:8px;overflow:hidden scroll;scrollbar-color:#C6E1EE #E4F1F7;scrollbar-width:thin;}
.chat-ico {font-family:icomoon;font-size:18px;cursor:pointer;}
.chat-row {margin:8px 0;}
.chat-row.chat-left {text-align:left;}
.chat-row.chat-right {text-align:right;}
.chat-row.chat-center {text-align:center;}
.chat-row .avatar {width:32px;height:32px;float:left;border-radius:50%;margin:4px 8px 8px 0;}
.chat-row .name-time {font-size:0.8125em;margin:0;}
.chat-row .chat-cell {display:inline-block;margin:0;padding:0.05em 0.5em 0.15em 0.5em;min-width:25%;max-width:80%;word-wrap:break-word;}
.chat-row .chat-cell.chat-she {color:#000;background:rgba(255,255,255,0.9);border-radius:0.25em;white-space:pre-line;}
.chat-row .chat-cell.chat-she .name-time {color:#4682B4;}
.chat-row .chat-cell.chat-ran {color:#000;}
.chat-row .chat-cell.chat-me {color:#124B6F;background:rgba(111,176,212,0.5);border-radius:0.25em;}
.chat-row .chat-cell.chat-me .name-time {color:#fff;}
.chat-row .chat-cell.chat-info {color:#555;background:rgba(0,90,0,0.05);}
.chat-row .chat-cell.chat-error {color:red!important;font-weight:700;}
.chat-row .chat-cell.chat-hr {display:block!important;max-width:100%;margin-top:1em;color:#000;border-bottom:1px solid #c5dfed;}
.chat-row .reaction {clear:both;margin-top:0.25em;color:#333;border-top:1px solid #c5dfed;}
.chat-row .reaction span {margin:0 0.5em;cursor:pointer;color:#0033FF;}
.chat-row .reaction span:hover {color:#000;}
.chat-row .msg-less {max-height:5em;overflow:hidden;}
.chat-row .msg-more {}
.chat-quote {color:#990099;font-size:0.9125em;display:block;background:rgba(0,0,0,0.05);text-align:left;padding:4px;margin:2px 0;border:1px solid rgba(90,0,90,0.1);}
/*max-height:20em;overflow:auto;scrollbar-color:rgba(0,0,0,0.25) transparent;scrollbar-width:thin;}*/
.chat-form {background:#E4F1F7 url(/img/bg-lines.png);overflow:hidden;border-top:2px solid #A0CAE1;}
.chat-form.disabled {opacity:0.5;pointer-events:none;filter:brightness(70%);}
.chat-edit {padding:0.25em 0.5em;border-radius:2px;border:2px solid #A0CAE1;min-height:100px;max-height:200px;box-sizing:border-box;word-wrap:anywhere;overflow-wrap:anywhere;white-space:break-spaces;max-width:100%;background:#fff;color:#333;overflow-y:scroll;overflow-x:hidden;outline:none;scrollbar-color:#C6E1EE #fff;scrollbar-width:thin;}
.chat-edit:empty:before{content:attr(placeholder);color:#bbb;pointer-events:none;display:block;/* For Firefox */}
.chat-btn-con {display:flex;align-items:center;font:20px/1.25 monospace;margin:0.0em 0;white-space:nowrap;overflow:hidden;}
.chat-btn-con button {border:1px solid #A0CAE1;background:#fff;width:32px;padding:2px 0;margin:0 8px 0 0;cursor:pointer;}
.chat-set-con {position:absolute;}
.chat-set-item {margin:0;padding:0.25em 0.5em;cursor:pointer;}
.chat-set-item:hover {background:#3399ff;color:#fff;}
.chat-btn-con .active {background:#A0CAE1;}
.chat-img-btn {width:32px;height:32px;cursor:pointer;}
.chat-emoji-con {height:300px;overflow-y:scroll;scrollbar-color:#C6E1EE #E4F1F7;scrollbar-width:thin;}
.chat-emoji-con span {font-size:28px;display:block;width:40px;height:40px;padding-top:6px;text-align:center;float:left;cursor:pointer;}
.chat-ping {width:8px;height:8px;border-radius:50%;transition:0.5s;box-shadow:0 0 2px #fff;}
.chat-ping.red{background-color:red;}
.chat-ping.yellow{background-color:#ffff00;scale:3;}
.chat-ping.green {background-color:#00ff00;}