body {
    font-size: 10px;
    margin-top: 8px;
    margin-left: 8px;
    background-color: #cccccc;
    color: #554;
    background-image: url(/images/BACKBinario.jpg);
    font-family: "Lucida Sans Unicode","Lucida Console",Arial,Helvetica,Garamond, sans-serif;
}
.flow {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    pointer-events: none;
}
.gridwrapper {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    grid-template-columns: 12px 410px 170px 30px 30px;
    grid-template-rows: 16px auto auto auto auto auto auto auto auto;
    grid-template-areas:
        '. topcoords . . .'
        'sidecoords boardarea titlearea titlearea opps'
        'sidecoords boardarea playertitle setbutarea opps'
        'sidecoords boardarea gradearea gradearea opps'
        'sidecoords boardarea numpadarea numpadarea opps'
        'sidecoords boardarea choosepuzarea choosepuzarea opps'
        'sidecoords boardarea timerarea timerarea opps'
        '. otherbuts versionarea versionarea opps'
        '. otherbuts chkboxarea chkboxarea opps'
        '. definitionarea definitionarea definitionarea opps';
    grid-gap: 5px;
    max-width: 470px;
}
@media screen and (max-width: 625px) {
    .gridwrapper {
        display: grid;
        grid-template-columns: 3fr 2fr 3fr;
        grid-template-rows: auto auto auto auto auto auto auto;
        grid-template-areas:
            ' titlearea titlearea titlearea'
            ' timerarea playertitle setbutarea'
            'boardarea boardarea boardarea'
            'numpadarea numpadarea numpadarea'
            'choosepuzarea choosepuzarea gradearea'
            'otherbuts otherbuts otherbuts'
            'chkboxarea . versionarea'
            'definitionarea definitionarea definitionarea';
        grid-gap: 5px;
    }
}
@media screen and (max-width: 400px) {
    .gridwrapper {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-rows: auto auto auto auto auto auto auto;
        grid-template-areas:
            ' titlearea titlearea titlearea'
            ' timerarea playertitle setbutarea'
            'boardarea boardarea boardarea'
            'numpadarea numpadarea numpadarea'
            'choosepuzarea gradearea gradearea'
            'otherbuts otherbuts otherbuts'
            'chkboxarea . versionarea'
            'definitionarea definitionarea definitionarea';
        grid-gap: 0px;
    }
}

#topcoords {
    grid-area: topcoords;
    text-align:center;
}
#sidecoords {
    grid-area: sidecoords;
}
#boardarea {
    grid-area: boardarea;
    max-width: 480px;
    vertical-align: top;
}
#boardareainner {
    vertical-align: top;
    border-top: 4px solid #000000;
    border-left: 4px solid #000000;
    border-bottom: 3px solid #000000;
    border-right: 3px solid #000000;
    width: fit-content;
}
#titlearea {
    grid-area: titlearea;
    font-size: 8pt;
    padding-left:10px;
}
#setbutarea {
    grid-area: setbutarea;
    text-align: right;
}
#opps {
    grid-area: opps;
}
#playertitle {
    grid-area: playertitle;
    text-align: center;
    font-size: 12pt;
    padding-left:30px;
}
#gradearea {
    grid-area: gradearea;
    text-align: center;
    font-size: 8pt;
}
#numpadarea {
    grid-area: numpadarea;
    text-align: center;
    font-size: 11pt;
}
#definitionarea {
    grid-area: definitionarea;
    text-align:right;
    padding-top:30px;
}
#choosepuzarea {
    grid-area: choosepuzarea;
    text-align: center;
}
#rulesarea {
    display:none;
    line-height:1.0em;
}
#rulesareaOLD {
    position: absolute;
    top: 170px;
    left: 450px;
    font-size: 8pt;
    color: #ffffdd;
}
#timerarea {
    grid-area: timerarea;
    text-align: center;
    font-size: 8pt;
    color: #ffffdd;
}
#otherbuts {
    grid-area: otherbuts;
    text-align: center;
    margin-bottom:10px;
}
#versionarea {
    grid-area: versionarea;
    text-align: center;
    color: #887755;
    font-size: 9pt;
}
#chkboxarea {
    grid-area: chkboxarea;
    text-align: center;
    color: #887755;
    font-size: 9pt;
}
.smallstyle {
    font-size: 8pt
}
.smallboxstyle {
    font-size: 8pt;
    background: #ddeeff;
    border: 2px solid #04349c;
}
.t100pc {
    width: 100%;
}
.cancelpopup {
    width: 26px;
    height: 26px;
    font-family: Helvetica, arial, verdana, sans-serif;
    font-size: 14pt;
    text-align: center;
    color: #222;
    border: 3px solid #888888;
    border-radius: 8px;
    background-color: #fff;
    cursor: pointer;
    font-weight: bold;
    line-height: 1.4em;
    -webkit-box-shadow: 0px 0px 4px 2px rgba(255,255,255,1);
    -moz-box-shadow: 0px 0px 4px 2px rgba(255,255,255,1);
    box-shadow: 0px 0px 4px 2px rgba(255,255,255,1);
}
.numberpad:hover, .cancelpopup:hover {
    background-color: #bcdcf3;
    -webkit-box-shadow: 0px 0px 4px 2px #ffff00;
    -moz-box-shadow: 0px 0px 4px 2px #ffff00;
    box-shadow: 0px 0px 4px 2px #ffff00;
}
#ruleslist {
    color: #222;
}
#pausedblock {
    position: absolute;
    background-color: #888;
    opacity: 0.75;
    z-index: 5;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
#boardtable {
    border-collapse: collapse;
    border-spacing: 0;
}
#yesterday {
    position: absolute;
    width: 150px;
    height: 50px;
    top: 435px;
    left: 10px;
    text-align: center;
    font-size: 8pt;
    color: #ffffdd;
}

#settings, #showrules {
    display: none;
    position: absolute;
    width: 300px;
    height: 340px;
    top: 60px;
    left: 160px;
    font-family: "Trebuchet MS","Lucida Sans Unicode","Lucida Console",Arial,Helvetica,Garamond, sans-serif;
    font-size: 12pt;
    color: #222;
    padding: 0 20px 0 20px;
    background-color: #eee;
    border-radius: 24px;
    border-left: 4px groove white;
    border-top: 4px groove white;
    border-right: 4px ridge white;
    border-bottom: 4px ridge white;
    z-index: 20;
}
#showrules {
    font-size: 10pt;
    height: 340px;
}
.settingsbut {
    background: url(/images/cogblack.png);
    background-size: contain;
    width: 24px;
    height: 24px;
    display: inline-block;
}
.settingsbut:hover {
    background: url(/images/cogred.png);
    background-size: contain;
}
#morelines {
    position: absolute;
    width: 200px;
    height: 30px;
    top: 480px;
    left: 440px;
    font-family: "Trebuchet MS","Lucida Sans Unicode","Lucida Console",Arial,Helvetica,Garamond, sans-serif;
    font-size: 10pt;
    color: #999;
    text-align: right;
}
.rulesbut_hide {
    display: none;
}
a {
    text-decoration: underline;
    color: #fff;
}
a:hover {
	color: #ffff99;
}
.left_nav2 {
	PADDING-LEFT: 6px; FONT: bold 11px Arial, Verdana, sans-serif; COLOR: #636363
}
.sud_text {
	FONT: bold 11px Arial, Verdana, sans-serif; COLOR: #636363
}
.input {background: #ffffcc;color: #000000 ;font-weight: normal;}
.smallstyle { font-size: 8pt; }
.SButton {
    border-top: #ffffc9 2px solid;
    border-left: #ffffc9 2px solid;
    border-right: #bb8729 2px solid;
    border-bottom: #bb8729 2px solid;
    background-color: #ffe789;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9pt;
    color: #AA2244;
    font-weight: bold;
    margin: 6px 4px 0 0;
}
.SButton:hover {
    background-color: #f7db6d;
    color: #d02852;
}
.YButton {
    border-top: #ffff00 2px solid;
    border-left: #ffff00 2px solid;
    border-right: #666622 2px solid;
    border-bottom: #666622 2px solid;
    background-color: #ffcc33;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 8pt;
    color: black;
    font-weight: bold;
}
.SNote {
    font-family: Arial, Geneva, sans-serif;
    font-size: 8pt;
}
.TimeBox {
    font-size: 8pt;
    font-weight: bold;
    background: #ffe789;
    text-align: center;
    border-top: #ffffc9 2px solid;
    border-left: #ffffc9 2px solid;
    border-right: #bb8729 2px solid;
    border-bottom: #bb8729 2px solid;
    font-family: Verdana,Arial,Helvetica,Garamond, sans-serif;
}
.OuterT {
	font-size: 8pt;
	background: #ddeeff;
	border: 1px solid #ffffdd;
}

#boardtable td .notesTable {
    width: 100%;
    height: 38px;
}

#boardtable td .notesTable td {
    font-size: 11px;
    line-height: 13px;
    overflow:hidden;
}
#boardtable td .notesTable td.linear {
    font-weight: bold;
    color:#666;
}
#boardtable td .notesTable {
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    table-layout: fixed;
    border: none;
    border-spacing: 0px 0px;
    border-collapse: collapse;
}
#boardtable td .notesTable td {
    padding: 0;
    font-weight: normal;
    text-align: center;
}

.CellSelect {
    -moz-box-shadow: inset 0 0 5px 2px #555555;
    -webkit-box-shadow: inset 0 0 5px 2px #555555;
    box-shadow: inset 0 0 5px 2px #555555;
}

.CellNormalHigh,
.CellGiven,
.CellError,
.CellNormal {
    position: relative;
    font-family: Helvetica, arial, verdana, sans-serif;
    font-size: 24pt;
    font-weight: bold;
    width: 50px;
    height: 50px;
    margin: 0;
    padding: 0;
    text-align: center;
    background-clip: padding-box;
    background-color: #fff;
    border: 1px solid #888;
}

.CellSelect {
    -moz-box-shadow: inset 0 0 4px 2px #555555;
    -webkit-box-shadow: inset 0 0 4px 2px #555555;
    box-shadow: inset 0 0 4px 2px #5588aa;
}
.CellNormalHigh {
    color: #226c9c;
}
.CellGiven {
    color: #990022;
}
.CellGivenHigh {
    color: #222;
}
.CellNormal {
    color: #222;
}
.CellError {
    background-color: #fdd;
}

.emptycircle, .blackcircle, .whitecircle {
    position: relative;
    top: 0;
    left: 8px;
    width: 30px;
    height: 30px;
    margin: 0;
    border: 2px solid #555;
    border-radius: 16px;
    z-index: 10;
}
.blackcircle {
    background: #000;
}
.whitecircle {
    background: #fff;
}
.emptycircle {
    border: 0;
    background: none;
}
.greydot {
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background: #888;
    border: 0;
    margin: 13px 0 0 13px;
}
.twist_cross, .twist_vert, .twist_hori {
    position: absolute;
    display: block;
    width: 18px;
    height: 18px;
    background-image: url(/images/images_cross.png);
    background-size: cover;
    z-index:  9;
    pointer-events: none;
}
.twist_cross {
    background-image: url(/images/binario_cross.png);
}
.twist_vert {
    background-image: url(/images/binario_vert.png);
}
.twist_hori {
    background-image: url(/images/binario_hori.png);
}


#hintmode {
    padding: 2px;
    background-color: #222;
    color: #55a5FF;
    font-weight: bold;
    margin-left: 20px;
}
.coords {
    font-family: verdana;
    font-size: 8pt;
    color: #aa7722;
    text-align: center;
    vertical-align: middle;
}
.SRArtTitle
{
	font-family: "Trebuchet MS","Lucida Sans Unicode","Lucida Console",Arial,Helvetica,Garamond, sans-serif;
	font-size: 20pt;
	color: #fff;
}
.SRCellY {
	font-family: "Trebuchet MS","Lucida Sans Unicode","Lucida Console",Arial,Helvetica,Garamond, sans-serif;
	font-size: 13px;
	color: #ffffaa;
}
.resultNone {
    display:none;
    width:0;
    height:0;
}
.resultCen,
.resultG_dark, .resultR_dark, .resultY_dark,
.resultG_light, .resultR_light, .resultY_light {
    position: absolute;
    width: 180px;
    top: 82px;
    left: 440px;
    z-index: 10;
    font-family: "Trebuchet MS","Lucida Sans Unicode","Lucida Console",Arial,Helvetica,Garamond, sans-serif;
    font-size: 12pt;
    text-align: center;
    border: 2px solid white;
    padding: 8px 12px;
    border-radius: 7px;
    box-shadow: 7px 7px 7px black;
}
.resultG_dark {
    color: #4cff00;
    background-color: #000;
    border: 2px solid white;
}
.resultR_dark {
    color: #f13232;
    background-color: #000;
    border: 2px solid white;
}
.resultY_dark {
    color: #ffcc33;
    background-color: #000;
    border: 2px solid white;
}
.resultG_light, .resultCen {
    color: #009900;
    background-color: #ddffdd;
    border: 2px solid black;
}
.resultR_light {
    color: #990000;
    background-color: #ffdddd;
    border: 2px solid black;
}
.resultY_light {
    color: #222;
    background-color: #dddddd;
    border: 2px solid black;
}
.linearBg2 {
    /* fallback */
    background-color: #e0e0e0;
    color:#990000;
    background-repeat: repeat-x;
    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#e0e0e0));
    /* Safari 5.1, Chrome 10+ */
    background: -webkit-linear-gradient(top, #ffffff, #e0e0e0);
    /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, #ffffff, #e0e0e0);
    /* IE 10 */
    background: -ms-linear-gradient(top, #ffffff, #e0e0e0);
    /* Opera 11.10+ */
    background: -o-linear-gradient(top, #ffffff, #e0e0e0);
}

@media screen and (max-width: 625px) {
    .rulesbut_hide {
        display: inline;
    }
    .rulesarea_hide {
        display: none;
    }
    #titlearea {
    }
    #setbutarea {
        padding-right:20px;
    }
    #boardarea {
        margin: auto;
    }
    #boardtable {
    }
    #settings, #showrules {
        left: 20px;
    }
    #topcoords, #sidecoords {
        display:none;
    }
    #numpadarea {
    }
    .mode1 {
        top: 460px !important;
    }
    .numberpad {
        width: 7.5%;
        font-size: 20pt;
        margin: 10px 3px 9px 0;
    }
    .notesbut {
        width: 113px;
        margin-left: 5px;
        font-size: 14pt;
    }
    .resultG_dark, .resultR_dark, .resultY_dark,
    .resultG_light, .resultR_light, .resultY_light {
        top: 110px;
        left: 25px;
        width: 40%;
    }
    .resultCen {
        left: 85px;
    }
    #rulesarea {
    }
    #yesterday {
        top: 650px;
        left: 50%;
        width: 50%;
    }
    #notetype {
        top: 710px;
        left: 0;
        width: 100%;
        font-size: 9pt;
    }
    #morelines {
        top: 690px;
        left: 20px;
        width: 50%
    }
}

@media screen and (max-width: 410px) {
    .CellNormalHigh,
    .CellGiven,
    .CellGivenHigh,
    .CellNormal {
        font-size: 20pt;
    }
    #boardarea {
        width: 100%;
        border: 2px solid #000000;
    }

    #boardtable td .notesTable td {
        font-size: 11px;
        line-height: 11px;
    }
}