h4, h3 {
    margin: 0;
}

#viewPortWrapper {
    clear: left;
}

#viewPort {
    background-color: #6babed;
    width: 960px;
    height: 625px;
    position: relative;
    z-index: 3;
    margin: 0 auto;
    overflow: hidden;
    user-select: none;
}

#viewPortWrapper.fullscreen {
    display: table;
    width: 100%;
    height: 100%;
}

#viewPortWrapper.fullscreen #viewPortCell {
    background-color: #000;
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    margin: 0;
    touch-action: none;
}

.closeButton {
    position: absolute;
    top: 0.7408%;
    right: 0.4832%;
    width: 4.9458%;
    height: 7.5926%;
    cursor: pointer;
    z-index: 21; /* above splash title */
}

.closeButton img {
    display: block;
    pointer-events: none;
}

#gameLogo {
    background: transparent url(/media/games/common/logo@2.png) no-repeat;
    background-size: 100% !important;
    width: 10.72916%;
    height: 5.76%;
    position: absolute;
    bottom: 1.52%;
    right: 1%;
    z-index: 9999;
}

#splash-top {
    background-color: #164194;
    position: absolute;
    left: -16%;
    top: 0;
    width: 130%;
    height: 70%;
    transform: rotate(-19.4deg);
    transform-origin: 0 0;
}

h1#splashTitle {
    background: transparent url(/media/games/hit-the-button/splash-title@2.png);
    background-size: contain !important;
    width: 47.8125%;
    height: 48.8%;
    position: absolute;
    top: 4.96%;
    left: 2.84%;
    overflow: hidden;
    text-indent: -9999px;
}

#splash div {
    color: #000;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4em;
    display: table;
    -webkit-tap-highlight-color: transparent;
}

#splash span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    height: 100%;
    width: 100%;
    position: relative;
    cursor: pointer;
}

#splash span.one-line {
    height: 15% !important;
}

#splash span.two-lines {
    height: 18% !important;
}

#splash img {
    cursor: pointer;
}

#number-bonds-button img, #number-bonds-button span {
    left: 2.917%;
    bottom: 6.4%;
    height: 24%;
    width: 15.625%;
    position: absolute;
}

#doubles-button img, #doubles-button span {
    left: 25.73%;
    bottom: 6.4%;
    height: 24%;
    width: 15.625%;
    position: absolute;
}

#halves-button img, #halves-button span {
    left: 37.19%;
    bottom: 28.16%;
    height: 24%;
    width: 15.625%;
    position: absolute;
}

#tables-button img, #tables-button span {
    left: 55.41%;
    bottom: 6.4%;
    height: 24%;
    width: 15.625%;
    position: absolute;
}

#divison-button img, #divison-button span {
    left: 66.87%;
    bottom: 28.16%;
    height: 24%;
    width: 15.625%;
    position: absolute;
}

#squares-button img, #squares-button span {
    left: 78.33%;
    bottom: 49.92%;
    height: 24%;
    width: 15.625%;
    position: absolute;
}

#fxcanvas {
    position: absolute;
    top: 15%;
    z-index: 100;
}

/** Game Intro **/
.dialog {
    background-size: 100% !important;
    top: -75%;
    left: 19.427%;
    position: absolute;
    z-index: 400;
    width: 61.146%;
    height: 60.8%;
}

.dialog h2 {
    color: #3D8032;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.3em;
    margin: 0.5em 0 0.15em;
    text-align: center;
}

.circuit .dialog {
    background: transparent url(/media/games/hit-the-button/circuit-dialog.png) no-repeat;
}

.ropes .dialog {
    background: transparent url(/media/games/hit-the-button/ropes-dialog.png) no-repeat;
}

.ropes .dialog h2 {
    color: #522C00;
}

.pipes .dialog {
    background: transparent url(/media/games/hit-the-button/pipes-dialog.png) no-repeat;
}

.pipes .dialog h2 {
    color: #164194;
}

.dialogText {
    margin: 0 5%;
}

.dialogText p {
    color: #020;
    font: 28px/1.4em topmarksbook, Arial, Helvetica, sans-serif;
    margin: 0 2em 0.6em;
    text-align: center;
}

.playButton {
    background: transparent url(/media/games/hit-the-button/play@2.png) no-repeat;
    background-size: 100% !important;
    left: 42.6245%;
    bottom: 8%;
    width: 13.11755%;
    height: 20.26316%;
    position: absolute;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/** Game Intro **/
#gameIntro {
    top: 21%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms, visibility 0s linear 200ms;
    visibility: hidden;
}

#gameIntro.gameIntro--visible {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
    visibility: visible;
}

/** Game Ended **/
#gameEnded {
    top: 21%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms, visibility 0s linear 200ms;
    visibility: hidden;
}

#gameEnded.gameEnded--visible {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0s;
    visibility: visible;
}

#gameEnded .menuButton {
    width: 13.11755%;
    height: 20.26316%;
    left: 28%;
    bottom: 8%;
}

#gameEnded .playButton {
    left: auto;
    right: 28%;
}

/** Number Bonds Menu **/
#number-bonds-menu {
    background-color: #066A3A;
    width: 100%;
    height: 100%;
}

#number-bonds-menu h1 {
    background: url(/media/games/hit-the-button/number-bonds-title@2.png) no-repeat;
    background-size: 100% !important;
    width: 54.583%;
    height: 9.6%;
    position: absolute;
    top: 3%;
    left: 22.7085%;
    overflow: hidden;
    text-indent: -9999px;
}

.homeButton {
    background: transparent url(/media/games/hit-the-button/home@2.png) no-repeat;
    background-size: 100% !important;
    position: absolute;
    left: 1%;
    top: 1.3536%;
    width: 8.02%;
    height: 12.32%;
    z-index: 200;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.menu-options {
    position: absolute;
    width: 100%;
    height: 76%;
    top: 16%;
    left: 1%
}

.menu-col {
    width: 46.875%;
    margin: 0 0 0 2.0833333334%;
    float: left;
}

fieldset {
    color: #FFF;
    font: 24px/1.4em topmarksbold, sans-serif;
    border: 3px solid #66B32E;
    border-radius: 12px;
    padding: 0;
    position: static;
    width: 96%;
    margin: 0 0 3% 0;
}

.ropes-menu fieldset {
    border-color: #F39200;
}

.pipes-menu fieldset {
    border-color: #164194;
}

#tables-menu fieldset, #division-menu fieldset {
    border-color: #88cdf5;
}

fieldset.right {
    float: right;
}

fieldset legend {
    color: #FFF;
    padding: 0 0.4em;
    margin: 0 0.5em;
}

fieldset ul {
    width: 97.685185%;
    margin: 1% 0 1% 0.7%;
    padding: 0;
    list-style: none;
}

fieldset ul.two-col {
    width: 45%;
    margin: 0 0 0 4%;
    float: left;
}

fieldset ul.two-col li {
    margin: 8% 0 8% 0.7%;
}

fieldset ul.tight {
    margin: 0.4% 0 0.4% 0.7%;
}

fieldset ul.open {
    margin: 2% 0 2% 0.7%;
}

fieldset li {
    width: 100%;
    height: 12%;
    line-height: 2.25em;
    position: relative;
}

#tables-12-menu fieldset li, #div-12-menu fieldset li {
    line-height: 1.8em;
}

fieldset ul.open li {
    margin: 2% 0 2% 0.7%;
}

fieldset span {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    vertical-align: top;
}

fieldset img {
    float: left;
    margin: 0 2%;
    width: 11.84835%;
}

fieldset ul.two-col img {
    width: 25.641%;
}

/** Doubles Menu **/
#doubles-menu {
    width: 100%;
    height: 100%;
}

#doubles-menu h1 {
    background: url(/media/games/hit-the-button/doubles-title@2.png) no-repeat;
    background-size: 100% !important;
    width: 29.79167%;
    height: 9.44%;
    position: absolute;
    top: 3%;
    left: 35.1%;
    overflow: hidden;
    text-indent: -9999px;
}

/** Halves Menu **/
#halves-menu {
    width: 100%;
    height: 100%;
}

#halves-menu h1 {
    background: url(/media/games/hit-the-button/halves-title@2.png) no-repeat;
    background-size: 100% !important;
    width: 25.3125%;
    height: 9.44%;
    position: absolute;
    top: 3%;
    left: 35.1%;
    overflow: hidden;
    text-indent: -9999px;
}

/** Tables Menu **/
#tables-menu {
    width: 100%;
    height: 100%;
}

#tables-menu h1 {
    background: url(/media/games/hit-the-button/tables-title@2.png) no-repeat;
    background-size: 100% !important;
    width: 49.48%;
    height: 9.6%;
    position: absolute;
    top: 3%;
    left: 25.26%;
    overflow: hidden;
    text-indent: -9999px;
}

.tabs {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 95%;
    left: 6%;
    top: 15.1%;
    position: absolute;
}

.tabs li {
    float: left;
    background-color: #0a5b94;
    border: 4px solid #08436e;
    color: #FFF;
    width: 22%;
    height: 20%;
    margin: 0 2% 0 0;
    padding: 0 0 40px;
    z-index: 10;
    position: relative;
    font: 20px/2.2em topmarksbold, sans-serif;
    text-align: center;
    border-radius: 6px;
    cursor: pointer;
}

.tabs li.selected {
    background-color: #0d70b8;
    border: 4px solid #0a5991;
    z-index: 25;
}

.tabPaneBorder {
    background-color: #0a5991;
    border: none;
    border-radius: 6px;
    position: absolute;
    width: 95%;
    height: 67%;
    left: 2.5%;
    top: 22%;
    z-index: 20;
}

.tabPane {
    background-color: #0d70b8;
    border: none;
    border-radius: 4px;
    position: absolute;
    width: 94.2%;
    height: 65.6%;
    left: 2.9%;
    top: 22.7%;
    z-index: 50;
}


/** Division Menu **/
#division-menu {
    width: 100%;
    height: 100%;
}

#division-menu h1 {
    background: url(/media/games/hit-the-button/division-title@2.png) no-repeat;
    background-size: 100% !important;
    width: 52.2917%;
    height: 9.44%;
    position: absolute;
    top: 3%;
    left: 23.9%;
    overflow: hidden;
    text-indent: -9999px;
}

/** Circuit View **/
.menuButton {
    background: transparent url(/media/games/hit-the-button/menu@2.png) no-repeat;
    background-size: 100% !important;
    position: absolute;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#top-strip .menuButton {
    left: 1%;
    top: 9%;
    width: 8.02%;
    height: 82.133%;
    z-index: 200;
}

#game {
    width: 100%;
    height: 100%;
}

#top-strip, #ropes-top-strip, #pipes-top-strip {
    height: 15%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#question {
    position: absolute;
    overflow: hidden;
    text-align: center;
    width: 74%;
    height: 100%;
    left: 13%;
}

#question h2 {
    color: #FF3;
    display: block;
    font: 92px/1.08em topmarksbold, sans-serif;
    text-align: center;
    width: 100%;
    z-index: 300;
    position: absolute;
    left: 0;
    top: 0;
}

#bottom-strip, #ropes-bottom-strip, #pipes-bottom-strip {
    height: 8.8%;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}

h2.section {
    color: #CFC;
    top: 3%;
    left: 1%;
}

#bottom-strip h2.gTitle {
    color: #030;
    font-family: system-ui, sans-serif;
    bottom: 3%;
    left: 1%;
}

#bottom-strip h2 {
    font: normal 22px/1.25em topmarksbold, sans-serif;
    position: absolute;
    margin: 0;
}

#bottom-strip h3 {
    font: normal 36px/1.5em topmarksbold, sans-serif;
    position: absolute;
}

#timerTitle {
    color: #030;
    bottom: 2%;
    left: 33%;
}

#timer {
    color: #CFC;
    bottom: 2%;
    left: 46%;
}

#scoreTitle {
    color: #030;
    bottom: 2%;
    left: 62%;
}

#score {
    color: #CFC;
    bottom: 2%;
    left: 74%;
}

/*** Buttons ***/
#buttons {
    color: #FFF;
    list-style: none;
}

#buttons.yellow, #buttons.orange {
    color: #000;
}

#buttons span {
    display: block;
    text-align: center;
    font: 62px/1.9em topmarksbold, sans-serif;
    width: 100%;
}

#buttons.smallFont span {
    font: 46px/2.5em topmarksbold, sans-serif;
}

#buttons.tinyFont span {
    font: 38px/3.02em topmarksbold, sans-serif;
}

#buttons.veryTinyFont span {
    font: 29px/3.9em topmarksbold, sans-serif;
}

#buttons.veryVeryTinyFont span {
    font: 24px/4.62em topmarksbold, sans-serif;
}

#buttons li {
    background-size: 100% !important;
    width: 11.5625%;
    height: 17.76%;
    margin: 0;
    padding: 0;
    position: absolute;
    z-index: 200;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/** Blue **/
#buttons.blue li {
    background: transparent url(/media/games/hit-the-button/b-blue@2.png) no-repeat;
}

#buttons.blue li.down {
    background: transparent url(/media/games/hit-the-button/b-blue-on@2.png) no-repeat;
}

/** Light Blue **/
#buttons.lightblue li {
    background: transparent url(/media/games/hit-the-button/b-lightblue@2.png) no-repeat;
}

#buttons.lightblue li.down {
    background: transparent url(/media/games/hit-the-button/b-lightblue-on@2.png) no-repeat;
}

/** Orange **/
#buttons.orange li {
    background: transparent url(/media/games/hit-the-button/b-orange@2.png) no-repeat;
}

#buttons.orange li.down {
    background: transparent url(/media/games/hit-the-button/b-orange-on@2.png) no-repeat;
}

/** Pink **/
#buttons.pink li {
    background: transparent url(/media/games/hit-the-button/b-pink@2.png) no-repeat;
}

#buttons.pink li.down {
    background: transparent url(/media/games/hit-the-button/b-pink-on@2.png) no-repeat;
}

/** Purple **/
#buttons.purple li {
    background: transparent url(/media/games/hit-the-button/b-purple@2.png) no-repeat;
}

#buttons.purple li.down {
    background: transparent url(/media/games/hit-the-button/b-purple-on@2.png) no-repeat;
}

/** Red **/
#buttons.red li {
    background: transparent url(/media/games/hit-the-button/b-red@2.png) no-repeat;
}

#buttons.red li.down {
    background: transparent url(/media/games/hit-the-button/b-red-on@2.png) no-repeat;
}

/** Yellow **/
#buttons.yellow li {
    background: transparent url(/media/games/hit-the-button/b-yellow@2.png) no-repeat;
}

#buttons.yellow li.down {
    background: transparent url(/media/games/hit-the-button/b-yellow-on@2.png) no-repeat;
}

/** Green **/
#buttons.green li {
    background: transparent url(/media/games/hit-the-button/b-green@2.png) no-repeat;
}

#buttons.green li.down {
    background: transparent url(/media/games/hit-the-button/b-green-on@2.png) no-repeat;
}

/*** CIRCUIT-9 LAYOUT */
.circuit-9 li.slot0 {
    top: 18%;
    left: 14%
}

.circuit-9 li.slot1 {
    top: 18%;
    left: 34.5%
}

.circuit-9 li.slot2 {
    top: 18%;
    left: 55%
}

.circuit-9 li.slot3 {
    top: 44%;
    left: 14%
}

.circuit-9 li.slot4 {
    top: 44%;
    left: 34.5%
}

.circuit-9 li.slot5 {
    top: 44%;
    left: 55%
}

.circuit-9 li.slot6 {
    top: 69%;
    left: 14%
}

.circuit-9 li.slot7 {
    top: 69%;
    left: 34.5%
}

.circuit-9 li.slot8 {
    top: 69%;
    left: 55%
}

/*** CIRCUIT-11 LAYOUT */
.circuit-11 li.slot0 {
    top: 18%;
    left: 13%
}

.circuit-11 li.slot1 {
    top: 18%;
    left: 29%
}

.circuit-11 li.slot2 {
    top: 18%;
    left: 45%
}

.circuit-11 li.slot3 {
    top: 18%;
    left: 61%
}

.circuit-11 li.slot4 {
    top: 44%;
    left: 21%
}

.circuit-11 li.slot5 {
    top: 44%;
    left: 37%
}

.circuit-11 li.slot6 {
    top: 44%;
    left: 53%
}

.circuit-11 li.slot7 {
    top: 69%;
    left: 13%
}

.circuit-11 li.slot8 {
    top: 69%;
    left: 29%
}

.circuit-11 li.slot9 {
    top: 69%;
    left: 45%
}

.circuit-11 li.slot10 {
    top: 69%;
    left: 61%
}

/*** PIPES-10 LAYOUT */
.lattice-10 li.slot0 {
    top: 17.4%;
    left: 16.05%
}

.lattice-10 li.slot1 {
    top: 17.4%;
    left: 38.65%
}

.lattice-10 li.slot2 {
    top: 17.4%;
    left: 61.5%
}

.lattice-10 li.slot3 {
    top: 43.5%;
    left: 4.8%
}

.lattice-10 li.slot4 {
    top: 43.5%;
    left: 27.3%
}

.lattice-10 li.slot5 {
    top: 43.5%;
    left: 50.2%
}

.lattice-10 li.slot6 {
    top: 43.5%;
    left: 72.5%
}

.lattice-10 li.slot7 {
    top: 69.6%;
    left: 16.05%
}

.lattice-10 li.slot8 {
    top: 69.6%;
    left: 38.65%
}

.lattice-10 li.slot9 {
    top: 69.6%;
    left: 61.5%
}

/*** PIPES-11 LAYOUT */
.lattice-11 li.slot0 {
    top: 17.4%;
    left: 4.8%
}

.lattice-11 li.slot1 {
    top: 17.4%;
    left: 27.3%
}

.lattice-11 li.slot2 {
    top: 17.4%;
    left: 50.2%
}

.lattice-11 li.slot3 {
    top: 17.4%;
    left: 72.5%
}

.lattice-11 li.slot4 {
    top: 43.5%;
    left: 16.05%
}

.lattice-11 li.slot5 {
    top: 43.5%;
    left: 38.65%
}

.lattice-11 li.slot6 {
    top: 43.5%;
    left: 61.5%
}

.lattice-11 li.slot7 {
    top: 69.6%;
    left: 4.8%
}

.lattice-11 li.slot8 {
    top: 69.6%;
    left: 27.3%
}

.lattice-11 li.slot9 {
    top: 69.6%;
    left: 50.2%
}

.lattice-11 li.slot10 {
    top: 69.6%;
    left: 72.5%
}

/*** PIPES-12 LAYOUT */
.lattice-12 li.slot0 {
    top: 17.4%;
    left: 4.6%
}

.lattice-12 li.slot1 {
    top: 17.4%;
    left: 27.35%
}

.lattice-12 li.slot2 {
    top: 17.4%;
    left: 50%
}

.lattice-12 li.slot3 {
    top: 17.4%;
    left: 72.7%
}

.lattice-12 li.slot4 {
    top: 43.5%;
    left: 4.6%
}

.lattice-12 li.slot5 {
    top: 43.5%;
    left: 27.35%
}

.lattice-12 li.slot6 {
    top: 43.5%;
    left: 50%
}

.lattice-12 li.slot7 {
    top: 43.5%;
    left: 72.7%
}

.lattice-12 li.slot8 {
    top: 69.6%;
    left: 4.6%
}

.lattice-12 li.slot9 {
    top: 69.6%;
    left: 27.35%
}

.lattice-12 li.slot10 {
    top: 69.6%;
    left: 50%
}

.lattice-12 li.slot11 {
    top: 69.6%;
    left: 72.7%
}

/** Lights **/
#correct {
    background: transparent url(/media/games/hit-the-button/correct-off@2.png) no-repeat;
    background-size: 100% !important;
    width: 7.8125%;
    height: 12.16%;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 89.15%;
    bottom: 50%;
    z-index: 50;
}

#correct.on {
    background: transparent url(/media/games/hit-the-button/correct-on@2.png) no-repeat;
}

#wrong {
    background: transparent url(/media/games/hit-the-button/wrong-off@2.png) no-repeat;
    background-size: 100% !important;
    width: 7.8125%;
    height: 12.16%;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 89.15%;
    top: 56%;
}

#wrong.on {
    background: transparent url(/media/games/hit-the-button/wrong-on@2.png) no-repeat;
}

.bg {
    height: 100%;
    width: 100%;
    padding: 0;
}

#circuit-menu-bg {
    background-color: #066A3A;
}

#circuit-bg {
    background-color: #47AE4E;
}

#circuit-bg-main {
    background-color: #066A3A;
    position: absolute;
    left: 0;
    top: 15.04%;
    height: 76.16%;
    width: 100%;
}

.circuit #game-bg {
    background: transparent url(/media/games/hit-the-button/circuit-11-wires@2.png) no-repeat;
    background-size: 100% !important;
    width: 91.875%;
    height: 59.2%;
    position: absolute;
    top: 23.4%;
    left: 4.0625%;
}

/** Blue BG **/
#blue-bg {
    background: transparent url(/media/games/hit-the-button/pipes-bg@2.png);
    background-size: contain !important;
    overflow: hidden;
}

/** Pipes BG **/
.pipes.lattice-10 #game-bg {
    background: transparent url(/media/games/hit-the-button/pipes-10@2.png) no-repeat;
    background-size: 100% !important;
    width: 68.96%;
    height: 57.92%;
    position: absolute;
    top: 23.4%;
    left: 10%;
}

#pipes-top-strip {
    background-color: #164194;
}

#pipes-bottom-strip {
    background-color: #164194;
}

.pipes h2.section, .pipes #timer, .pipes #score {
    color: #FFF;
}

.pipes #bottom-strip h2.gTitle, .pipes #timerTitle, .pipes #scoreTitle {
    color: #92B0E0;
}


/** Pipes 12 Button BG **/
.pipes.lattice-12 #game-bg {
    background: transparent url(/media/games/hit-the-button/pipes-12@2.png) no-repeat;
    background-size: 100% !important;
    width: 70.8%;
    height: 57.92%;
    position: absolute;
    top: 23.4%;
    left: 9%;
}

/** Ropes BG **/
#ropes-bg {
    background: transparent url(/media/games/hit-the-button/wood-bg.png) no-repeat;
    background-size: cover !important;
}

#ropes-top-spacer {
    background-color: #432918;
    width: 100%;
    position: absolute;
    top: 0;
    height: 0;
}

#ropes-top-strip {
    background-color: #432918;
}

#ropes-bottom-strip {
    background-color: #432918;
}

.ropes.lattice-10 #game-bg {
    background: transparent url(/media/games/hit-the-button/ropes-10@2.png) no-repeat;
    background-size: 100% !important;
    width: 68.96%;
    height: 57.92%;
    position: absolute;
    top: 23.4%;
    left: 10%;
}

.ropes.lattice-11 #game-bg {
    background: transparent url(/media/games/hit-the-button/ropes-11@2.png) no-repeat;
    background-size: 100% !important;
    width: 68.96%;
    height: 57.92%;
    position: absolute;
    top: 23.4%;
    left: 10%;
}

.ropes h2.section, .ropes #timer, .ropes #score {
    color: #FFBE8D;
}

.ropes #bottom-strip h2.gTitle, .ropes #timerTitle, .ropes #scoreTitle {
    color: #FF7E27;
}