body {margin:0;}
body,td {font-family:arial,sans-serif; color:#222222;}
body,table,td,input,select {font-size:12px;}

.tm {margin-top:1em; margin-bottom:0;}
.blurb {margin-top:2em; margin-bottom:1.5em;}
.blurb ul {text-align:left; padding-left:1em; margin-top:0.5em; margin-bottom:0;}
.blurb li {margin:0.4em 0;}
.small {font-size:85%;}
.halfbig {font-size:115%;}
.big {font-size:135%;}
.bigbig {font-size:150%;}

#left-column {width:248px; padding:16px;}
.left-bordered {border-right:1px #999 solid;} 
#right-column {padding:16px;}
#logo {margin:1.5em 0;}
.if-left-hidden-span, .if-left-hidden-row {display:none;}

table,td {padding:0;}
.stat {color:#990000; font-weight:bold; padding:0.25em 0.5em;}
.fastest {background-color:#FFFF66;}
.reset {font-size:90%; color:#990000;}
input.reset {border:solid 1px; background-color:transparent; padding:0;}

a:link,a:active,a:visited {color:#3333BB; text-decoration:none;}
a:hover {text-decoration:underline;}

.c0,.c1,.c2,.c3,.e0,.e1,.e2,.e3,.f0,.f1,.f2,.f3,.g0,.g1,.g2,.g3,.h0,.h1,.h2,.h3,.i0,.i1,.i2,.i3 {width:32px; height:32px; vertical-align:middle; text-align:center; font-size:18pt; font-family:times,serif;} /* cells on web */
.j0,.j1,.j2,.j3,.k0,.k1,.k2,.k3,.l0,.l1,.l2,.l3,.m0,.m1,.m2,.m3 {width:32pt; height:32pt; vertical-align:middle; text-align:center; font-size:18pt; font-family:times,serif;} /* cells for print normal */
.n0,.n1,.n2,.n3,.p0,.p1,.p2,.p3,.q0,.q1,.q2,.q3,.r0,.r1,.r2,.r3 {width:44pt; height:44pt; vertical-align:middle; text-align:center; font-size:28pt; font-family:times,serif;} /* cells for print larger */

.d0,.d1,.d2,.d3,.s0,.s1,.s2,.s3,.u0,.u1,.u2,.u3,.w0,.w1,.w2,.w3,.v0,.v1,.v2,.v3 {-webkit-appearance: none; outline:none; border: solid 0 #fff; text-align:center; margin:0; width:24pt;}
.s0,.s1,.s2,.s3 {font-size:18pt; font-family:times,"times new roman",serif; color:#000000;} /* givens */
.u0,.u1,.u2,.u3 {font-size:28pt; font-family:times,"times new roman",serif; color:#000000;} /* givens if print larger */
.d0,.d1,.d2,.d3 {font-size:16pt; font-family:"lucida handwriting","comic sans ms",sans-serif; color:#7777DD;} /* variables */
.w0,.w1,.w2,.w3 {font-size:10pt; font-family:"lucida handwriting","comic sans ms",sans-serif; color:#338833;} /* 2 or 3 pencil marks */
.v0,.v1,.v2,.v3 {font-size:7pt; font-family:"lucida handwriting","comic sans ms",sans-serif; color:#338833;} /* 4 or 5 pencil marks */
.v0::-ms-clear, v1::-ms-clear, v2::-ms-clear, v3::-ms-clear {display: none;}

.d0,.s0,.u0,.w0,.v0 {background-color: transparent;}
.d1,.s1,.u1,.w1,.v1,.c1,.e1,.f1,.g1,.h1,.i1,.j1,.k1,.l1,.m1,.n1,.p1,.q1,.r1 {background-color: #FFBFBF;}
.d2,.s2,.u2,.w2,.v2,.c2,.e2,.f2,.g2,.h2,.i2,.j2,.k2,.l2,.m2,.n2,.p2,.q2,.r2 {background-color: #FF7F7F;}
.d3,.s3,.u3,.w3,.v3,.c3,.e3,.f3,.g3,.h3,.i3,.j3,.k3,.l3,.m3,.n3,.p3,.q3,.r3 {background-color: #FF3F3F;}

.t {border-collapse:collapse; background-color:#FFFFFF; border-right: #666699 solid 2px;}
.c0,.e0,.f0,.g0,.h0,.i0 {border-left: #DDDDEE solid 1px; border-top: #DDDDEE solid 1px;}
.c1,.e1,.f1,.g1,.h1,.i1 {border-left: #FFBFBF solid 1px; border-top: #FFBFBF solid 1px;}
.c2,.e2,.f2,.g2,.h2,.i2 {border-left: #FF7F7F solid 1px; border-top: #FF7F7F solid 1px;}
.c3,.e3,.f3,.g3,.h3,.i3 {border-left: #FF3F3F solid 1px; border-top: #FF3F3F solid 1px;}
.e0,.e1,.e2,.e3,.g0,.g1,.g2,.g3,.i0,.i1,.i2,.i3 {border-left: #666699 solid 2px;}
.f0,.f1,.f2,.f3,.g0,.g1,.g2,.g3 {border-top: #666699 solid 2px;}
.h0,.h1,.h2,.h3,.i0,.i1,.i2,.i3 {border-bottom: #666699 solid 2px;}

.i {border-collapse:collapse; border: #000000 solid 2px;}
.j0,.j1,.j2,.j3,.k0,.k1,.k2,.k3,.l0,.l1,.l2,.l3,.m0,.m1,.m2,.m3 {border: #000000 solid 1px;}
.k0,.k1,.k2,.k3,.m0,.m1,.m2,.m3 {border-left: #000000 solid 2px;}
.l0,.l1,.l2,.l3,.m0,.m1,.m2,.m3 {border-top: #000000 solid 2px;}

.o {border-collapse:collapse; border: #000000 solid 4px;}
.n0,.n1,.n2,.n3,.p0,.p1,.p2,.p3,.q0,.q1,.q2,.q3,.r0,.r1,.r2,.r3 {border: #000000 solid 2px;}
.p0,.p1,.p2,.p3,.r0,.r1,.r2,.r3 {border-left: #000000 solid 4px;}
.q0,.q1,.q2,.q3,.r0,.r1,.r2,.r3 {border-top: #000000 solid 4px;}

#overlay {z-index:2; background-color:rgba(0, 0, 0, 0.8); position:fixed; width:100%; height:auto; top:0; left:0; text-align:center;}

#side_keys {position:fixed; top:0px; right:16px;}
#side_keys table {height:100%;}
#bottom_keys {margin-top:1.5em; margin-bottom:4em;}

.tk {text-align:center; vertical-align:middle; border:1px solid #DDDDEE; background-color:#fff;}
#side_keys .tk {border-left: #666699 solid 2px; border-right: #666699 solid 2px; padding-left:6px; padding-right:6px;}
#bottom_keys .tk {border-top: #666699 solid 2px; border-bottom: #666699 solid 2px; padding-top:6px; padding-bottom:6px;}

.bs {margin-left:0.1em; margin-right:0.1em;}

@media (min-width: 481px) {
	.bs {margin-left:0.5em; margin-right:0.5em;}
}

@media (max-width: 740px) {
    #left-column {display:none;}
    .extra-words {display:none;}
	.if-left-hidden-span {display:inline;}
	.if-left-hidden-row {display:table-row;}
    #side_keys .tk {width:16pt; height:17pt;}
}

@media (max-width: 480px) { /* Below default size, for small mobile screen */
    #side_keys, #puzzle_grid { display:inline-block; vertical-align:middle; }
    #side_keys { position:relative; right:-5px;}

    .c0,.c1,.c2,.c3,.e0,.e1,.e2,.e3,.f0,.f1,.f2,.f3,.g0,.g1,.g2,.g3,.h0,.h1,.h2,.h3,.i0,.i1,.i2,.i3 {width:19pt; height:20pt;} /* cells */
    .s0,.s1,.s2,.s3 {width:19pt; font-size:13pt;} /* givens */
    .d0,.d1,.d2,.d3 {width:19pt; font-size:13pt;} /* variables */
    .w0,.w1,.w2,.w3 {width:19pt; font-size:9pt;} /* 2 or 3 pencil marks */
    .v0,.v1,.v2,.v3 {width:19pt; font-size:7pt;} /* 4 or 5 pencil marks */

    #side_keys_help {display:none;}
}

@media (min-width:950px) and (min-height:720px) { /* One step up from default */
	body,table,td,input,select {font-size:13px;}
	input[type="submit"] {font-size:14px;}

    .c0,.c1,.c2,.c3,.e0,.e1,.e2,.e3,.f0,.f1,.f2,.f3,.g0,.g1,.g2,.g3,.h0,.h1,.h2,.h3,.i0,.i1,.i2,.i3 {width:30pt; height:31pt} /* cells */
    .s0,.s1,.s2,.s3 {width:30pt; font-size:22pt;} /* givens */
    .d0,.d1,.d2,.d3 {width:30pt; font-size:20pt;} /* variables */
    .w0,.w1,.w2,.w3 {width:30pt; font-size:13pt;} /* 2 or 3 pencil marks */
    .v0,.v1,.v2,.v3 {width:30pt; font-size:9pt;} /* 4 or 5 pencil marks */
}

@media (min-width:1100px) and (min-height:820px) { /* Two steps up from default */
	body,table,td,input,select {font-size:14px;}
	input[type="submit"] {font-size:16px;}

    .c0,.c1,.c2,.c3,.e0,.e1,.e2,.e3,.f0,.f1,.f2,.f3,.g0,.g1,.g2,.g3,.h0,.h1,.h2,.h3,.i0,.i1,.i2,.i3 {width:36pt; height:37pt} /* cells */
    .s0,.s1,.s2,.s3 {width:36pt; font-size:26pt;} /* givens */
    .d0,.d1,.d2,.d3 {width:36pt; font-size:24pt;} /* variables */
    .w0,.w1,.w2,.w3 {width:36pt; font-size:15pt;} /* 2 or 3 pencil marks */
    .v0,.v1,.v2,.v3 {width:36pt; font-size:11pt;} /* 4 or 5 pencil marks */
}

@media (min-width:1250px) and (min-height:920px) { /* Three steps up from default */
	body,table,td,input,select {font-size:15px;}
	input[type="submit"] {font-size:18px;}

    .c0,.c1,.c2,.c3,.e0,.e1,.e2,.e3,.f0,.f1,.f2,.f3,.g0,.g1,.g2,.g3,.h0,.h1,.h2,.h3,.i0,.i1,.i2,.i3 {width:42pt; height:43pt} /* cells */
    .s0,.s1,.s2,.s3 {width:42pt; font-size:30pt;} /* givens */
    .d0,.d1,.d2,.d3 {width:42pt; font-size:28pt;} /* variables */
    .w0,.w1,.w2,.w3 {width:42pt; font-size:17pt;} /* 2 or 3 pencil marks */
    .v0,.v1,.v2,.v3 {width:42pt; font-size:13pt;} /* 4 or 5 pencil marks */
}

#ot-sdk-btn-floating.ot-floating-button { /* for CookiePro shield */
	animation:none !important;
	right:0.4% !important;
	opacity:1 !important;
}

@media (max-width: 520px) {
	#ot-sdk-btn-floating.ot-floating-button { bottom:150% !important; }
}

/* The CSS code in this document are copyright. Infringers of copyright will be prosecuted. */