#viewPortWrapper {
    clear: left;
}

#viewPort {
    background-color: #6babed;
    width: 960px;
    height: 625px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-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;
}


#viewPort p {
    margin: .5em 0;
}

#viewPort h2 {
    color: #222;
    font: 32px/1.3em topmarksbold,Arial,Helvetica,sans-serif;
    font-size: 32px;
    line-height: 1.3em;
    margin: 0;
    padding: 0;
}

#gameLogo {
    width: 12.425%;
    position: absolute;
    bottom: 2%;
    right: 5.2%;
}

#splash h1 {
    color: #FFF;
    font: 64px/1.1em topmarksbold, Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    position: absolute;
    top: 2.56%;
    z-index: 20;
    width: 100%
}

#splash h1.shadow {
    color: #D4145A;
    top: 2.88%;
    left: 0.208%;
    z-index: 10;
}

#splashGrid {
    border: 12px solid #FFF;
    border-radius: 20px;
    position: absolute;
    top: 27.8%;
    left: 3.5%;
    width: 37.5%;
    height: 56.705%
}

#options {
    color: #FFF;
    font: 25px/1.4em topmarksbook, sans-serif;
    position: absolute;
    top: 16%;
    left: 47%;
    width: 54%;
    text-align: center;
}

#options ul {
    float: left;
    width: 100%;
}

#options ul, #subOptions ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

#options ul li {
    float: left;
    border-radius: 6px;
    margin: 0 6% 0 0;
    padding: 1% 0 1%;
    width: 40.2%;
    cursor: pointer;
}

.option1, .button.option1 {
    background-color: #D6573D;
    border: 3px solid #AD351A;
}

.hasHover li.option1:hover, .hasHover .button.option1:hover {
    background-color: #BD4128;
    border: 3px solid #922D16;
}

.option2, .button.option2 {
    background-color: #A83DD6;
    border: 3px solid #8D1CBA;
}

.hasHover li.option2:hover, .hasHover .button.option2:hover {
    background-color: #9128BD;
    border: 3px solid #7D19A4;
}

#subOptions {
    background-color: #3c88d6;
    border: 3px solid #2466A8;
    border-radius: 6px;
    position: absolute;
    top: 27%;
    left: 47%;
    width: 47.2%;
    height: 61%;
    text-align: center;
}

#subOptions > div {
    padding: 1.75%;
}

#subOptions h2 {
    color: #FFF;
    font-size: 23px;
}

#subOptions .subCol {
    float: left;
    margin: 0 3%;
    width: 44%;
}

#subOptions ul {
    color: #FFF;
    font: 22px/1.1em topmarksbold, sans-serif;
    padding: 0 16%;
}

.ordering #subOptions ul {
    padding: 1% 0;
}

#subOptions ul li {
    border-radius: 6px;
    margin: 3.2% 0 0;
    padding: 1.5% 2%;
    cursor: pointer;
}

/*** Game View ***/
#game {
    float: left;
    width: 100%;
    height: 100%;
}

.button {
    color: #FFF;
    font: 22px/1em topmarksbook, sans-serif;
    background-color: #3c88d6;
    border: 3px solid #1a62ad;
    border-radius: 6px;
    padding: 0.4% 1.5%;
    text-align: center;
    cursor: pointer;
}

.hasHover .button:hover {
    background-color: #1d4c7c;
    border: 3px solid #103358;
}

#backHome {
    position: absolute;
    display: inline;
    top: 1.28%;
    left: 0.833%;
}

#rightPanel {
    background-color: #3c88d6;
    position: absolute;
    top: 0;
    left: 100%;
    width: 22%;
    height: 100%;
    margin: 0;
    padding: 0;
    border-left: 2px solid #ddf;
}

#rightPanel h3 {
    background-color: #164194;
    color: #FFF;
    font: 24px/1.2em topmarksbold,sans-serif;
    padding: 0.2em;
    margin: 0;
    text-align: center;
}

#rightPanel span {
    background-color: #237bbd;
    color: #FFF;
    font: 32px/1.8em topmarksbold,sans-serif;
    font-weight: normal;
    display: block;
    position: absolute;
    top: 100%;
    text-align: center;
    width: 100%;
}

#title {
    position: absolute;
    top: 11%;
    left: 0;
    width: 100%;
}

#rightPanel #title span {
    font-size: 24px;
}

#score {
    position: absolute;
    top: 36%;
    width: 100%;
}

#timer {
    position: absolute;
    top: 56%;
    width: 100%;
}

.dialog {
    color: #FFE;
    font: 26px/1.5em topmarksbook,sans-serif;
    background-color: #237bbd;
    padding: 0;
    position: absolute;
    top: -65%;
    left: 20%;
    height: 60%;
    width: 60%;
}


.dialog > div {
    margin: 3% 4%;
}

#viewPort .dialog h2 {
    background-color: #164194;
    color: #FFF;
    font: 46px/1.2em topmarksbold,sans-serif;
    padding: 0.2em;
    margin: 0 0 .6em;
    text-align: center;
}

.dialog p {
    text-align: center;
}

.dialog .buttons {
    position: absolute;
    bottom: 8%;
    left: 0;
    width: 100%;
    height: 14%;
    padding: 0;
    margin: 0;
}

.dialog .buttons div {
    background-color: #f18309;
    border: 3px solid #ec671e;
    font-size: 28px;
    width: 18%;
    padding: 0.6% 4%;
    margin: 0 auto;
    color: #FFF;
    border-radius: 6px;
    text-align: center;
    cursor: pointer;
}

.hasHover .dialog .buttons div:hover {
    background-color: #d97809;
    border-color: #d45c1c;
}

#gameEnded .menuBtn {
    position: absolute;
    top: 0;
    right: 54%;
}

#gameEnded .playBtn {
    position: absolute;
    top: 0;
    left: 54%;
} 

#buttonGrid {
    float: left;
    line-height: 1.7em;
    list-style: none;
    position: absolute;
    left: 4.7%;
    width: 70%;
    height: 60%;
    margin: 0;
    padding: 0;
}

#buttonGrid.rows2 {
    top: 42%;
    font-size: 72px;
}

#buttonGrid.rows3 {
    top: 28%;
    font-size: 68px;
}

#buttonGrid.rows2.small {
    font-size: 64px;
    line-height: 1.9em;
}

#buttonGrid.rows3.small {
    font-size: 60px;
    line-height: 1.92em;
}

#buttonGrid.rows2 li {
    margin-top: 6%;
    height: 33%;
}

#buttonGrid.rows3 li {
    margin-top: 4%;
    height: 29%;
}

#buttonGrid li {
    cursor: pointer;
    float: left;
    width: 18%;
    margin: 0 2% 0 0;
    position: relative;
}

#buttonGrid li:last-child {
    margin-right: 0;
}

#buttonGrid li:after {
    padding-top: 100%;
    display: block;
    content: '';
}

#buttonGrid div {
    border-width: 3px;
    border-style: solid;
}

#buttonGrid div.selected {
    color: #000;
    border-color: #3272b3 !important;
    background-color: #FFF !important;
    text-shadow: none !important;
    -moz-box-shadow:    inset 0 0 15px #3272b3;
    -webkit-box-shadow: inset 0 0 15px #3272b3;
    box-shadow:         inset 0 0 15px #3272b3;
}

#buttonGrid.color1 div {
    background-color: #79c928;
    border-color: #1AAD48;
    text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);
}

.hasHover #buttonGrid.color1 div:hover {
    background-color: #67b21c;
    border-color: #17973F;
}

#buttonGrid.color2 div {
    background-color: #A83DD6;
    border-color: #8D1CBA;
}

.hasHover #buttonGrid.color2 div:hover {
    background-color: #9128BD;
    border-color: #7D19A4;
}

#buttonGrid.color3 div {
    background-color: #e1c32a;
    border-color: #AD971A;
    text-shadow: 1px 1px 2px rgba(150, 150, 150, 1);
}

.hasHover #buttonGrid.color3 div:hover {
    background-color: #c5a815;
    border-color: #9B8717;
}

#buttonGrid.color4 div {
    background-color: #D63D8A;
    border-color: #AD1A61;
}

.hasHover #buttonGrid.color4 div:hover {
    background-color: #BD2873;
    border-color: #921652;
}

#buttonGrid.color5 div {
    background-color: #D6573D;
    border-color: #AD351A;
}

.hasHover #buttonGrid.color5 div:hover {
    background-color: #BD4128;
    border-color: #922D16;
}

#buttonGrid li div {
    color: #FFF;
    font-family: topmarksbold;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    text-align: center;
    border-radius: 6px;
}

#sum {
    background-color: #82c3ff;
    border: 6px solid #3c88d6;
    border-radius: 10px;
    color: #3c88d6;
    font: 40px/1.1em topmarksbold, Arial, Helvetica, sans-serif;
    position: absolute;
    top: 20%;
    left: 4.4%;
    width: 68%;
    padding: 1% 0;
    text-align: center;
}

#sum.rows3 {
    top: 13%;
}

#sum span {
    color: #FFF;
    font-size: 120%;
    line-height: 120%;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 1);
    display: inline-block;
    width: 14%;
}

#sum span.fixed {
    color: #000;
    text-shadow: none;
    width: 14%;
}

#checkButton {
    color: #FFF;
    background-color: #82c3ff;
    border: 6px solid #3272b3;
    border-radius: 10px;
    font: 40px/1.5em topmarksbold, Arial, Helvetica, sans-serif;
    position: absolute;
    top: 80%;
    right: 7%;
    width: 75%;
    padding: 3.9% 0;
    text-align: center;
    cursor: pointer;
    opacity: 0.4;
}

#checkButton.ready {
    color: #000;
    opacity: 1;
}

.resetButton {
    position: absolute;
    bottom: 2%;
    left: 32.7%;
    width: 12%;
}