html {font-size:16px;}
body {margin:0;padding:0 0 100px 0;background:#B2E0FF url(/img/bg-vinoristikko.png);font:1em/1.4 'Open Sans',sans-serif;width:100%;overflow-x:hidden;overflow-y:scroll;}

@keyframes waitspin {0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
#wait {position:fixed;width:72px;height:72px;top:50%;left:50%;transform:translate3D(-50%,-50%,0);margin:-36px 0 0 -36px;box-shadow:0 0 1em rgba(0,0,0,0.5);z-index:9;animation: waitspin 2s linear infinite;}
.wait_bgnd {position:fixed;top:0;left:0;width:100%;height:100%;background:transparent;display:none;}


.div-body {width:800px;max-width:92%;margin: 0 auto;}
.center {text-align:center;}
.lite {font-weight:400;text-shadow: 0 0 0.2em rgba(0,0,0,0.35);}

button {font:inherit;cursor:pointer;outline:none;}

p {max-height:99999px;} /* this prevents chrome's stupid font-size encreasing */


.sudoku {width:92%;max-width:400px;font-size:24px;line-height:34px;margin:0 auto;cursor:default;border:4px solid #000;border-width:4px 4px 3px 4px;background:#fff;box-shadow:0 0 1em rgba(0,0,0,0.5);user-select:none;}
.sudoku table {display:block;table-layout:fixed;border-spacing:0;color:#333;}
.sudoku table .tr3 {border-top:2px solid #000;}
.sudoku table .td3 {border-left:2px solid #000;}
.sudoku table td {border-right:1px solid #000;border-bottom:1px solid #000;width:34px;padding:0;box-shadow:0 0 0.25em rgba(0,0,0,0.2);position:relative;}
.sudoku table td div {padding:0;text-align:center;width:34px;height:34px;}
.sudoku table td span {position:absolute;float:left;color:#999;font-size:0.5em;line-height:1;}
.sudoku table td div.active {color:red;background:#FFCC00;}
.sudoku table td div.alarm {background:red;color:#fff;}
.sudoku table td div.init {color:#334455;background:#ddd;pointer-events:none;}
.sudoku table td div.done {background:#bffc82;color:#009900;pointer-events:none;}
.sudoku table td div.init-done {background:#99ff33;color:#000;pointer-events:none;}


.sudoku_status {padding:8px;color:green;}
.div-ctrl {margin:0.5em auto;width:400px;user-select:none;font-size:16px;}
.tbl-btns {border-spacing:0;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.tbl-btns td {padding:2px;}
.tbl-btns td div {width:34px;height:34px;border-radius:50%;background:#9933ff;color:#fff;text-align:center;}
.tbl-btns .btn {border-radius:0!important;background:none!important;}
.tbl-btns td div.empty {background:none!important;}
.tbl-ctrl {border-spacing:0;width:100%;}


.how-all {margin:1em 0;padding:0.5em;border-radius:0.25em;background:rgba(255,255,255,0.5);border:2px solid #3d7670;}
.how-btns button {float:right;font-size:0.8125em;}
.how-con {margin-top:1em;overflow:auto;color:#338844;font-size:0.8125em;font-weight:700;}
.how {display:none;}
.how small {font-weight:400;}
.how code {color:#cc212d;font-weight:bold;font-size:0.875em;}
.how em {font:bold 1em monospace;color:#0033FF;}
.how .clear {clear:both;}
.how-img {float:right;max-width:55%;height:auto;margin:0 0 1em 1em;}


/* 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;opacity:0.2;transition:opacity 0.35s;}
.dialog {background:#f1faee;#fff;box-shadow:0 0 2em rgba(0,0,0,0.5);overflow:hidden;cursor:default;transition:0.35s;opacity:0;max-width:90%; }
.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/sudoku-32.png) 8px center no-repeat, linear-gradient(#2F74FF,#004DB3);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;}
.dialog .statusbar {position:absolute;left:0;right:0;background:#6699ff;color:#fff;text-align:center;border-top:1px solid #3377ff;}
.dialog .buttons {position:absolute;left:0;right:0;background:#e2e6e9;text-align:center;border-top:1px solid #BFC8CE;}
.dialog .buttons button {margin:0.5em;width:100px;border:0.125em solid rgba(0,0,0,0.3);border-radius:0.25em;}

.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;}

/* tää on vähän erilainen, muista! tehty uudenpaan dialog.js (ei dialog-2.js) */
.dlgs {padding:1.5em 64px 1em 64px;color:#222;}
.dlgs a {color:#0000ff;}
.dlgi {position:absolute;left:8px;top:8px;width:60px;height:56px;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;}
.dlgs_btn {background:#e2e6e9;padding:0.5em 0 0.5em 0;text-align:center;border-top:1px solid #BFC8CE;}
.dlgs_btn button {margin:0 1em 0 1em;width:100px;}

.boton {font-size:1.125em;line-height:1.25;padding:0.3em 1em 0.25em 1em;color:#fff;border-radius:0.25em;border:2px solid #fff;background:none;}
.boton.orange {background-color:#FF9900;}
.boton.yellow {background-color:#F5DB00;color:#990000;}
.boton.violet {background-color:#993366;}
.boton.green {background-color:#36B056;}
.boton.blue {background-color:#407EF2;}
.boton.pink{background-color:#FF00CC;}
.boton.margin {margin:0 0 0 0.5em;}
.boton:disabled {color:#999;background-color:#D1D1D5;text-shadow:1px 1px 1px #fff;border-color:#bbb;pointer-events:none;}

/* 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 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;box-shadow:0 0 0.125em #fff;}
label b.lite {background:rgba(255,255,255,0.25);}
label input[type="checkbox"]+b {border-radius:0.125em;}
label input[type="checkbox"]:checked+b {background:#0033ff;}
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;}

a {text-decoration:none;color:#0033cc;}
.lnk {margin-left:0.5em;}
.lnk::before {content:"\25B6\A0";color:#000;vertical-align:10%;}
#rules-con a:hover {text-decoration:underline;}


.other-game {display:inline-block;padding:0.25em 1em;border-radius:1em; background:rgba(255,255,255,0.75); color:#0033FF;margin:0.5em;}
.other-game.disabled {color:#777!important;text-shadow:1px 1px 0 #fff;pointer-events:none;}
.stat {font:13px/18px monospace;white-space:nowrap;margin:2em 0;}
.stat table {width:fit-content;margin:1em auto;border-spacing:0;background:rgba(255,255,255,0.5);box-shadow:0 0 1em rgba(0,0,0,0.5);}
.stat table .hed {font-weight:700;background:rgba(0,0,0,0.2);}
.stat table td {padding:0 1em;border-top:1px solid rgba(0,0,0,0.1);}
.stat table td.rite {text-align:right;}
.stat .link {cursor:pointer;color:#0033ff;}
.stat .link:hover {background:#ffff00;}
.stat .link::after {content:"\25C2";float:right;margin-right:-0.75em;}
.stat .reload {display:inline-block;font:700 20px/28px sans-serif;width:28px;text-align:center;padding:0;border-radius:50%;background:#fff;color:red;cursor:pointer;filter:invert(1);}
.stat2 {}
.stat2 table {font:1em/1.5 sans-serif;width:fit-content;border-spacing:0;margin:0 auto;}
.stat2 table tr {vertical-align:top;}
.stat2 table tr.hed {font-weight:700;}
.stat2 table td {padding:0.15em 1em 0 1em;border-bottom:1px solid #aaa;}
.stat2 table td.rite {text-align:right;}
.credit {position:fixed;left:0;bottom:0;right:0;margin-top:0;padding:0.25em 1.5rem 0.25em 2rem;line-height:2em;text-align:center;background:#052C49;color:#fff;}

.bravo {position:fixed;z-index:9999;top:50%;left:50%;transform:scale(0.9) translate3d(-55%,-55%,0);opacity:0;transition:0.35s;xborder-radius:50%;xbox-shadow:0 0 20px rgba(0,0,0,0.75);}
.bravo.show {transform:scale(1) translate3d(-50%,-50%,0);opacity:1;}