#viewPortWrapper {
    clear: left;
}

#viewPort {
    background-color: #7ec05c;
    width: 960px;
    height: 625px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

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

#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 {
    pointer-events: none;
    display: block;
}

#gameLogo {
    width: 10.72916%;
    height: 5.76%;
    position: absolute;
    bottom: 2%;
    right: 1.3%;
}

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

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

#splash .toyBox {
    top: 18%;
    left: 9.5%;
}

#splashCoins {
    background-color: #FFF;
    border: 8px solid #53803D;
    position: absolute;
    bottom: 5%;
    left: 2.2%;
    width: 41%;
    height: 34%;
    padding: 0;
    margin: 0;
}

#splashCoins ul {
    position: relative;
    float: left;
    left: 49%;
    padding: 0;
    list-style: none;
    margin: 1.0184417% 0.9%;
    height: 84%;
    width: 98%;
}

#splashCoins li {
    position: relative;
    float: left;
    right: 50%;
    margin: 1.6% 0.9%;
    height: 48.7407888%;
    width: 22.5591883%;
}

#splashCoins li.wide {
    position: relative;
    float: left;
    right: 50%;
    margin: 0% 0.9%;
    height: 48.7407888%;
    width: 46.9183766%;
}

#splashCoins.AUD ul {
    width: 85%;
}

#splashCoins.AUD li {
    position: relative;
    float: left;
    right: 50%;
    margin: 1.6% 3%;
    height: 48.7407888%;
    width: 26.0076177%;
}

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

.USD #options {
    font-size: 23px;    
}

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

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

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

#options ul li.option2 {
    float: right;
}

.option1 {
    background-color: #A83DD6;
    border-color: #8D1CBA;
}

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

.option2 {
    background-color: #D63D8A;
    border-color: #AD1A61;
}

.hasHover .option2:hover {
    background-color: #BD2873;
    border-color: #921652;
}

.option3 {
    background-color: #3c88d6;
    border-color: #2466A8;
}

.hasHover .option3:hover {
    background-color: #2873BD;
    border-color: #1D548B;
}

#subOptions {
    display: none;
    background-color: #649949;
    border: 3px solid #b2eb96;
    border-radius: 6px;
    position: absolute;
    top: 32%;
    left: 47%;
    width: 47.2%;
    height: 52%;
    text-align: center;
}

#subOptions > div {
    padding: 1.75%;
}

#subOptions h2 {
    color: #000;
    font-size: 24px;
}

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

#subOptions ul li {
    border-width: 3px;
    border-style: solid;
    border-radius: 6px;
    padding: 2.6% 0;
    cursor: pointer;
}

#subOptions .subCol {
    float: left;
    margin: 1.11% 3.4% 0;
    width: 43%;
}

#subOptions .subCol h2 {
    color: #FFF;
}

#subOptions .subCol li {
    margin: 10% 0 2%;
}

#subOptions li span {
    color: #CFCFFF;
    font-size: 90%;
}

#chooseCcy {
    position: absolute;
    left: 47%;
    top: 88.5%;
    width: 40%;
    height: 5.76%;  
}

#chooseCcy h2 {
    color: #000;
    font-size: 24px;
    line-height: 1.4em;
}

#chooseCcy ul {
    list-style: none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0;
    left: 30%;
    width: 75%;
    height: 100%;
}

#chooseCcy li {
    float: left;
    height: 100%;
    width: 21%;
    margin: 0 3% 0 0;
}

#chooseCcy button {
    appearance: none;
    background: none;
    border: 2px solid transparent;
    box-sizing: border-box;
    cursor: pointer;
    font: 1px/1em Arial;
    display: block;
    padding: 2px;
    width: 100%;
    height: 100%;
}

#chooseCcy button.selected {
    border-color: #fff;
    cursor: default;
}

#chooseCcy img {
    display: block;
    height: 100%;
    max-width: 100%;
    pointer-events: none;
}

/*** 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%;
    z-index: 20;
}

#instructions {
    color: #000;
    font: 32px/1.2em topmarksbold,sans-serif;
    position: absolute;
    top: 1.5%;
    left: 15%;
    width: 70%;
    margin: 0;
    text-align: center;
}

.toyBox {
    background-color: #FFF;
    border: 8px solid #53803D;
    position: absolute;
    top: 9%;
    left: 2.2%;
    width: 25%;
    height: 35%;
    text-align: center;
    overflow: hidden;
    z-index: 25;
}

#game .toyBox div {
    opacity: 0.01;
    width: 10%;
    height: 10%;
    top: 44%;
    left: 44%;
    position: absolute;
}

#price {
    position: absolute;
    top: 46.5%;
    left: 3.6%;
    width: 25%;
    text-align: center;
    z-index: 22;
}

#price img {
    width: 100%;
}

#price span {
    font: 42px/1.3em topmarksbold, sans-serif;
    display: block;
    position: absolute;
    z-index: 30;
    width: 64%;
    left: 28%;
    top: 33%;
    text-align: center;
}

#status {
    border: 1px solid #FFF;
    font: 26px/1.3077em topmarksbook, sans-serif;
    display: none;
    position: absolute;
    left: 30.2083%;
    top: 64%;
    width: 41%;
    height: 5.44%;
    text-align: center;
}

#status.correct {
    background-color: #CFC;
    border-color: #53803D;
}

#status.wrong {
    background-color: #FFCB72;
    border-color: #8E6120;
}

#clearButton {
    position: absolute;
    left: 75%;
    top: 64%;    
}

#checkButton {
    position: absolute;
    right: 2.2%;
    top: 64%;    
}

#checkButton.disabled, #checkButton.disabled:hover {
    background-color: #BBB;
    border-color: #A6A6A6;
    cursor:default;
}

#coinTray {
    background-color: #FFF;
    border: 8px solid #53803D;
    position: absolute;
    bottom: 8.7%;
    right: 2.2%;
    width: 93.9333%;
    height: 18%;
    padding: 0;
    margin: 0;
    z-index: 40;
}

#coinTray ul { 
    position: relative;
    float: left;
    left: 49%;
    padding: 0;
    list-style: none;
    margin: 1.0184417% 0.95%;
    height: 84%;
    width: 98%;
}

#coinTray li {
    position: relative;
    float: left;
    right: 50%;
    height: 100%;
    width: 10.69407771%;
    margin: 0 0.9%;
}

#coinTray li.wide {
    width: 23.18815542%;
}

#coinTray.AUD li {
    margin: 0 2.9%;
}

#coinTray li img, #payBox img {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#coinTray li img:focus, #payBox img:focus {
    outline: none !important;
}

#payBoxBorder {
    background-color: #FFF;
    border: 8px solid #53803D;
    position: absolute;
    top: 9%;
    right: 2.2%;
    width: 66%;
    height: 51.5%;
    padding: 0;
    margin: 0;
    z-index: 30;
}

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

#payBox ul {
    position: relative;
    padding: 0;
    margin: 0;
    left: 1%;
    list-style: none;
    height: 98%;
    width: 99.4328%;
}

#payBox li {
    position: relative;
    float: left;
    margin: 1% 2.2%;
    height: 29.959056%;
    width: 15%;
}

/* For the USD mixed mode */
#payBox ul.small {
    top: 31.35987488%;
    height: 66.64012512%;
}

#payBox ul.small li {
    height: 44.06005222%;
}



#payBox li.wide {
    width: 34.4%;
}

#payBox .wideStack {
    position: absolute;
    padding: 0;
    left: 1%;
    height: 29.35987488%;
    width: 98%;
}

#payBox .wideStack li {
    position: absolute;
    margin: 0;
    height: 100%;
    width: 100%;
}

.wideStack img {
    position: absolute;
    width: 31.7271146%;
    height: 88.3597884%;
    margin: 0;
}

img.shadow {
    -webkit-box-shadow: -5px 0px 6px -2px rgba(51,51,51,1);
    -moz-box-shadow: -5px 0px 6px -2px rgba(51,51,51,1);
    box-shadow: -5px 0px 6px -2px rgba(51,51,51,1); 
}

.singleStack1 {
    /*background-color: #F00;*/
    top: 2%;
}

.singleStack2 {
    /*background-color: #0F0;*/
    top: 35%;
}

.singleStack3 {
    /*background-color: #00F;*/
    top: 68%;
}

#payBox .halfStack {
    position: absolute;
    padding: 0;
    height: 29.35987488%;
    width: 47.5293171%;
}

#payBox .halfStack li {
    position: absolute;
    margin: 0;
    height: 100%;
    width: 100%;
}

.halfStack img {
    position: absolute;
    width: 65.4178607%;
    height: 88.3597884%;
    margin: 0;
}

.mixedStack1 {
    left: 1%;
    top: 2%;
}

.mixedStack2 {
    top: 2%;
    right: 1%;
}

/*** Coins ***/
.GBP1 {
    width: 71.1111%;
    height: 71.1111%;
    margin: 14.4444%
}

.GBP2 {
    width: 91.1111%;
    height: 91.1111%;
    margin: 4.4444%
}

.GBP5 {
    width: 63.3333%;
    height: 63.3333%;
    margin: 18.3333%
}

.GBP10 {
    width: 86.6667%;
    height: 86.6667%;
    margin: 6.6667%
}

.GBP20 {
    width: 75.5556%;
    height: 75.5556%;
    margin: 12.2222%
}

.GBP50 {
    width: 96.6667%;
    height: 96.6667%;
    margin: 1.6667%
}

.GBP100 {
    width: 78.8889%;
    height: 78.8889%;
    margin: 10.556%
}

.GBP100b {
    width: 82.1%;
    height: 82.1%;
    margin: 8.95%;
}

.GBP200 {
    width: 100%;
    height: 100%;
    margin: 0;
}


.AUD5 {
    width: 61.05263%;
    height: 61.05263%;
    margin: 19.47368%
}

.AUD10 {
    width: 73.68421%;
    height: 73.68421%;
    margin: 13.15789%
}

.AUD20 {
    width: 90.52632%;
    height: 90.52632%;
    margin: 4.736842%;
}

.AUD50 {
    width: 100%;
    height: 100%;
    margin: 0;
}

.AUD100 {
    width: 78.94737%;
    height: 78.94737%;
    margin: 10.52632%
}

.AUD200 {
    width: 64.21053%;
    height: 64.21053%;
    margin: 17.89474%;
}


.USD1 {
    width: 60%;
    height: 60%;
    margin: 20%;
}

.USD5 {
    width: 66.31579%;
    height: 66.31579%;
    margin: 16.84211%;
}

.USD10 {
    width: 55.78947%;
    height: 55.78947%;
    margin: 22.10526%;
}

.USD25 {
    width: 75.78947%;
    height: 75.78947%;
    margin: 12.10526%;
}

.USD100, .USD500 {
    width: 100%;
    height: 88.14847%;
    margin: 2.7336925% 0;
}

.EUR1 {
    width: 63.106796%;
    height: 63.106796%;
    margin: 18.446602%
}

.EUR2 {
    width: 72.815534%;
    height: 72.815534%;
    margin: 13.592233%
}

.EUR5 {
    width: 82.524272%;
    height: 82.524272%;
    margin: 8.737864%
}

.EUR10 {
    width: 76.699029%;
    height: 76.699029%;
    margin: 11.650485%
}

.EUR20 {
    width: 86.407767%;
    height: 86.407767%;
    margin: 6.796117%
}

.EUR50 {
    width: 94.174757%;
    height: 94.174757%;
    margin: 2.912621%
}

.EUR100 {
    width: 90.291262%;
    height: 90.291262%;
    margin: 4.854369%
}

.EUR200 {
    width: 100%;
    height: 100%;
    margin: 0;
}

/** Change **/
#change {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.change-GBP20 {
    width: 39.61552%;
    margin: 5.90918% 30.19%;
}

.change-GBP100 {
    width: 38.98420%;
    margin: 5.90918% 30.5%;
}

.change-GBP100b {
    width: 40.543568%;
    margin: 5.6819% 29.326923%;
}

.change-GBP500 {
    width: 75.75877%;
    margin: 5.90918% 12.12%;

}

.change-GBP1000 {
    width: 73.54914%;
    margin: 5.90918% 13.22%;
}


.change-EUR20, .change-EUR100 {
    width: 42%;
    margin: 4.3% 29%;
}

.change-EUR500, .change-EUR1000 {
    width: 75.75877%;
    margin: 5.951097% 12.12%;
}

.change-USD10 {
    float: left;
    width: 33.933%;
    margin: 8.4% 0 0 10.5%;
}

.change-USD100, .change-USD500, .change-USD1000 {
    width: 75.75877%;
    margin: 9.3% 12.12%;
}

/** Toys **/
.car {
    width: 89.58333%;
    height: 42.51429%;
    margin: 28.74286% 5.20833%;
}

.dinosaur {
    width: 78.75%;
    height: 85.94286%;
    margin: 7.028571% 10.625%;
}

.lorry {
    width: 89.58334%;
    height: 53.91667%;
    margin: 23.02857% 5.20833%;
}

.train {
    width: 89.58333%;
    height: 41.14286%;
    margin: 29.42857% 5.20833%;
}

.phone {
    width: 89.58333%;
    height: 70.85714%;
    margin: 14.57143% 5.20833%;
}

.tractor {
    width: 89.58333%;
    height: 65.37143%;
    margin: 17.31429% 5.20833%;
}

.trumpet {
    width: 79.16667%;
    height: 85.94286%;
    margin: 7.028571% 10.41667%;
}

.yoyo {
    width: 89.58333%;
    height: 80.45714%;
    margin: 9.771429% 5.20833%;
}

.dog {
    width: 89.58333%;
    height: 54.85714%;
    margin: 22.57143% 5.20833%;
}

.lion {
    width: 89.58333%;
    height: 85.94286%;
    margin: 7.028571% 5.20833%;
}

.aeroplane {
    width: 87.91667%;
    height: 85.94286%;
    margin: 7.028571% 6.041667%;
}

.palette {
    width: 89.58333%;
    height: 83.2%;
    margin: 8.4% 5.20833%;
}

.spinningtop, .beachball {
    width: 78.33333%;
    height: 85.94286%;
    margin: 7.028571% 10.83333%;
}

.spaceship, .bike {
    width: 89.58333%;
    height: 69.94286%;
    margin: 15.02857% 5.20833%;
}

.digger {
    width: 89.58333%;
    height: 61.71429%;
    margin: 19.14286% 5.20833%;
}

.cart {
    width: 72.5%;
    height: 85.94286%;
    margin: 7.028571% 13.75%;
}

.umbrella {
    width: 80%;
    height: 85.94286%;
    margin: 7.028571% 10%;
}

.elephant {
    width: 89.58333%;
    height: 84.11429%;
    margin: 7.942857% 5.20833%;
}

.meerkat, .headphones {
    width: 51.25%;
    height: 85.94286%;
    margin: 7.028571% 24.375%;
}

.giraffe, .drum {
    width: 61.66667%;
    height: 85.94286%;
    margin: 7.028571% 19.16667%;
}

.teddy {
    width: 63.33333%;
    height: 85.94286%;
    margin: 7.028571% 18.33333%;
}

.helicopter {
    width: 89.58333%;
    height: 66.74286%;
    margin: 16.62857% 5.20833%;
}

.rockinghorse {
    width: 80.41667%;
    height: 85.94286%;
    margin: 7.028571% 9.79167%;
}

.scooter {
    width: 65.41667%;
    height: 85.94286%;
    margin: 7.028571% 17.29167%;
}

.sleigh {
    width: 89.58333%;
    height: 55.77143%;
    margin: 22.11429% 5.20833%;
}

.robot {
    width: 62.08333%;
    height: 85.94286%;
    margin: 7.028571% 18.95833%;
}

.laptop {
    width: 89.58333%;
    height: 84.57143%;
    margin: 7.714286% 5.20833%;
}

.controller {
    width: 89.58333%;
    height: 59.42857%;
    margin: 20.28571% 5.20833%;
}

.pedalcar {
    width: 89.58333%;
    height: 72.68571%;
    margin: 13.65714% 5.20833%;
}

#footer h3 {
    color: #030;
    font: 34px/1.3em topmarksbold, sans-serif;
    position: absolute;
    bottom: 0;
    padding: 0;
    margin: 0;
}

#gameSection {
    left: 2.2%;
    width: 58%;
}

#footer h3 .gTitle {
    font-size: 90%;
    color: #CFC;
}

#footer h3#scoreTitle {
    color: #030;
    font: 34px/1.3em topmarksbold, sans-serif;
    position: absolute;
    left: 70%;
    bottom: 0;
    width: 20%;
    padding: 0;
    margin: 0;
}

#footer h3#score {
    color: #CFC;
    font: 34px/1.3em topmarksbold, sans-serif;
    position: absolute;
    left: 82%;
    bottom: 0;
    padding: 0;
    margin: 0;
}

.corners4 {
    border-radius: 4px;
}

.corners12 {
    border-radius: 12px;
}