@font-face {font-family:Tekton; src:url(/fonts/TektonPro-Bold.otf);}
    @font-face {font-family:webdings; src:url(/fonts/webdings.ttf);}
    body {margin:0px; padding:0px; background-color:#444; text-align:center; font-family:Arial, Geneva, sans-serif; font-size:12pt;}
    @media screen and (max-width:600px) { body {font-size:10pt;} }
    @media screen and (max-width:500px) { body {font-size:9pt;} }
    @media screen and (max-width:400px) { body {font-size:8pt;} }
    button {padding:5px; outline:0; font:bold 100% Arial; color:#0095A8; background-color:#FEFFE5; border:solid 1px black; border-radius:.3em;}
    button:hover {color:#A66;}
    .shadow {-moz-box-shadow:3px 3px 5px 0px black; -webkit-box-shadow:3px 3px 5px 0px black; box-shadow:3px 3px 5px 0px black;}
    .textShadow {text-shadow: 2px 2px 2px #333;}
    .yellowBG {background:yellow; }
    .greenBG {background:#B8FFB8; }
    .redBG {background:#FDDBC2; }


    #banner {position:relative; overflow:hidden; background-color:#888; text-align:left; margin:0px; padding:0px 5px; border-bottom:1px solid #AAA;}
        #logoImg {position:relative; left:10px; top:0px; width:50px; height:35px; vertical-align:bottom;}
        #bannerBtns {position:absolute; top:8%; right:5px; text-align:right;}
            #regionSelect {width:12em; font:bold 100% Arial; color:#0095A8; background:yellow; border:solid 1px black; border-radius:.3em;}
            #regionSelect option {}
        #titleDiv {position:relative; display:inline-block; text-align:left; vertical-align:top; margin-left:5%; color:#CCC; 
                font-family:"Trebuchet MS",sans-serif;}
            #banner .category {font-size:100%;}
            #banner .title {color:#66DCFF; font-size:120%;}
            
    @media screen and (max-width:800px) {
        .hideForSmallScreens {display:none;}
        #bannerBtns button {background-color:yellow; padding:0px; width:32px; height:32px; border-color:white; overflow:hidden;}
    }
    @media screen and (min-width:801px) {
        #logoImg {width:100px; height:70px;}
        #titleDiv {font-family:"Tekton", "Trebuchet MS",sans-serif; text-shadow:4px 0px 4px #333;}
        button {background: -webkit-gradient(linear, left top, left bottom, from(#FEFFE5), to(#EADF10)); 
            background: -moz-linear-gradient(top, #FEFFE5, #EADF10); border:0; box-shadow:1px 1px 6px 2px black;}
        #banner .category {margin-right:20px; font-size:150%;}
        #banner .title {font-size:250%;}
    }
    /* #consoleAndMap RESPONSIVE min-width ETC ARE IN HTML FILE SO WIDTHS CAN BE WRITTEN BY PHP */
    #consoleAndMap {vertical-align:top; border:solid 5px yellow;}
        #console {position:relative; padding:3px 0px; border-bottom:solid 1px black; text-align:left; font-size:100%; font-family:Arial;}
        @media screen and (min-width:800px) { #console {padding:5px 10px;} }
            #prompt {float:left;}
            #scoreDiv {float:right; text-align:right;}/*  right:5px; bottom:0px;  */
                #console .currentName, .scoreDisplay {font-weight:bold; font-size:150%; color:#A33;}
            #console::after {content:""; display:block; height:1px; clear:both;}
        #mapWrapper {position:relative; width:100%; }
            #mapWrapper img {position:absolute; width:100%; height:100%;}
            #svgMap {position:relative; width:100%; height:100%;} /* opacity:0.9;  background:#93B9CD; */
                path {fill:transparent; fill-opacity:0.5;} /* fill:#DDDDDD; stroke:black; stroke-width:<?php echo $path["stroke-width"]; ?> */
                path:hover {fill:yellow; stroke:black;}
        .mapMeter {position:absolute; top:-1px; padding:0.5%; background:yellow; border:solid 1px black; font-size:80%;} 
            #mapMeterNumCorrect {left:0px; border-width:0 1px 1px 0; border-bottom-right-radius:5px;}
            #mapMeterTotalScore {right:0px; border-width:0 0 1px 1px; border-bottom-left-radius:5px;}
            .mapMeter .numCorrect, .mapMeter .totalScore {font-weight:bold; color:#A33;}
            .symButton {display:inline-block; font-family:webdings; background:white; border:solid 1px #AAA;}
                .symButton.rightArrow::after {content:"4";}
                .symButton.downArrow::after {content:"6";}
                .symButton:hover {color:#A33;}
        #intro, #finished {position:absolute; width:40%; top:20px; margin:0 20%; padding:10%; text-align:center; font-size:100%;
                background:yellow; border:solid 2px black;}
            #startBtn {font-size:120%; padding:10px 20px; margin-top:20px;}
            
            #finishedResults {border:solid 1px #888; margin-bottom:10px; font:bold 100% Arial; padding:10px; background:white;}
        
    #fullTally {display:none; padding:5px; background:#EEE; font-size:70%; font-family:Arial;}/*  overflow-y:scroll; vertical-align:top; */
    /*@media screen and (min-width:1000px) { #fullTally {display:inline-block;} }*/
        .tallyLine {display:table-row;} /* padding:0px 2px; display:none; */
        .tallyLine:first-child, .tallyLine:last-child {font-weight:bold; background:white;}/* display:block;  */
            .tallyLine div {display:table-cell; padding:0 .4em;}/*  height:12px; */
            .tallyLine .num {text-align:right;}/*   width:48px; margin-right:10px;  */
            .okWrong {}/* width:12px; */
            .okWrong.correct::after {content:url(/images/check-green-12.png);}/* background-image:url(/images/check-green-12.png)  */
            .okWrong.incorrect::after {content:url(/images/x-red-12.png);}
            .tallyLine .name {text-align:left;}/* width:140px;   */
            .tallyLine .bonus {text-align:right;}/* width:48px;   */
            .tallyLine .score {text-align:right; font-weight:bold;}/* width:48px;   */
    .stateLabel {display:inline-block; font:normal 75% Arial; background:white; border:solid 1px black; border-width:1px 0 0 1px; cursor:default;}