#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 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: 1%;
}

#splashTitle 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%
}

#splashTitle h1.shadow {
    color: #1a62ad;
    top: 2.88%;
    left: 0.208%;
    z-index: 10;
}

h4 {
    color: #FFF;
    font: 22px/1.4em topmarksbold, sans-serif;
    text-align: center;
    position: absolute;
    top: 90%;
    left: 0;
    width: 100%;
}

h4 a, h4 a:active, h4 a:visited {
    color: #FFF;
    text-decoration: underline;
}

.hasHover h4 a:hover {
    text-decoration: none;
}

.holly {
    position: absolute;
    top: 3.5%;
    left: 7%;
    width: 7.5%;
}

.reflect {
    -webkit-transform: scaleX(-1);
    -moz-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    transform: scaleX(-1);
}

.splash-button {
    background-color: #FFF;
    border-width: 12px;
    border-style: solid;
    position: absolute;
    top: 25%;
    width: 23%;
    height: 46%;
    cursor: pointer;
    border-radius: 20px;
}

.splash-button span {
    color: #FFF;
    font: 36px/1.1em topmarksbold, sans-serif;
    border-width: 3px;
    border-style: solid;
    position: absolute;
    display: block;
    text-align: center;
    top: 108%;
    left: 8%;
    cursor:auto;
    border-radius: 6px;
    padding: 3% 10%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

#objects-button {
    left: 6.25%;
    border-color: #2873BD;
}

.hasHover #objects-button:hover {
    border-color: #2466A8;
}

#objects-button span {
    background-color: #3c88d6;
    border-color: #2466A8;
}

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

#shapes-button {
    left: 37.5%;
    border-color: #d1500a;
}

.hasHover #shapes-button:hover {
    border-color: #b84609;
}

#shapes-button span {
    left: 11%;
    background-color: #ea5b0c;
    border-color: #9e3c08;
}

.hasHover #shapes-button span:hover {
    background-color: #d1500a;
    border-color: #853307;
}

#shapes-button .leftPart, #objects-button .leftPart {
    border-right: 2px solid #222;
}

#shapes-button img {
    margin: 26.5% 0;
    width: 87.92%;
}

#patterns-button {
    right: 6.25%;
    border-color: #7faa2b;
}

.hasHover #patterns-button:hover {
    border-color: #6d9124;
}

#patterns-button span {
    left: 6%;
    background-color: #7faa2b;
    border-color: #638521;
}

.hasHover #patterns-button span:hover {
    background-color: #6d9124;
    border-color: #506b1b;
}

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

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

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

.score {
    color: #FFF;
    font: 32px/1em topmarksbook, sans-serif;
    position: absolute;
    top: 2%;
    right: 6.5%;
    text-align: right;
}

#leftArea {
    background-color: #3c88d6;
    border-right: 2px solid #DDF;
    position: absolute;
    top: 0;
    left: 0;
    width: 29%;
    height: 100%;
}

h2#question {
    color: #FFF;
    font-size: 24px;
    line-height: 1.5em;
    position: absolute;
    top: 11%;
    left: 0%;
    width: 29%;
    text-align: center;
}

#questionArea {
    background-color: #FFF;
    border: 12px solid #1a62ad;
    border-radius: 20px;
    width: 23%;
    height: 46%;
    left: 2%;
    top: 26%;
    position: absolute;
}

.leftPart {
    border-right: solid 2px #222;
    padding: 0;
    margin: 10% 0 0 1.5%;
    width: 48%;
    height: 84.5%;
    float: left;
    text-align: right;
}

.rightPart {
    padding: 0;
    margin: 10% 0 0;
    width: 48%;
    height: 84.5%;
    float: left;
}

.topPart {
    border-bottom: solid 2px #222;
    padding: 0;
    margin: 0 5%;
    width: 90%;
    height: 49%;
    float: left;
}

.bottomPart {
    padding: 0;
    margin: 0 5%;
    width: 90%;
    height: 49%;
    float: left;
}


ul#options {
    position: absolute;
    top: 15%;
    right: 0.5%;
    width: 68%;
    height: 75%;
    list-style: none;
    margin: 0;
    padding: 0;
}

ul#options li {
    background-color: #FFF;
    border: 9px solid #3c88d6;
    border-radius: 15px;
    width: 20%;
    height: 40%;
    margin: 0 2.5% 2.5% 0;
    padding: 0;
    float: left;
    cursor: pointer;
}

ul#options li.selected {
    border-color: #0b8f15;
}

ul#options li.selected img, ul#options li.selected table {
    opacity: 0.3;
}

ul#options li.end {
    margin: 0 0 2.5% 0;
}

#checkButton {
    font-size: 30px;
    position: absolute;
    top: 79%;
    left: 4.6%;
    padding: 0.4% 5%;
}

.message {
    background-color: #FFC;
    border: 3px solid #333;
    color: #333;
    font: 30px/1.5em topmarksbook, sans-serif;
    border-radius: 6px;
    padding: 0.6% 2%;
    position: absolute;
    top: 86%;
    left: 32%;
    width: 48%;
}

p.tick {
    background: url(/media/games/common/tick@2.png) no-repeat 0 0;
    background-size: 10%;
    margin: 0;
    padding: 0 0 0 18%;
}

p.cross {
    background: url(/media/games/common/cross@2.png) no-repeat 0 0;
    background-size: 10.5%;
    margin: 0;
    padding: 0 0 0 18%;
}

/** Question Images **/
#game.shapes-hori .topPart, #game.shapes-hori .bottomPart {
    position: relative;
}

#game.shapes-hori .topPart img {
    width: 90.91%;
    position: absolute;
    left: 4.5454545%;
    bottom: 0;
}

#game.shapes-hori .bottomPart img {
    width: 90.91%;
    position: absolute;
    left: 4.5454545%;
    top: 0;
}

#game.shapes-vert #questionArea img {
    margin: 20% 0;
    width: 94.7167%;
}

img.beach-ball, img.dice, img.flower-1, img.flower-2, img.heart, img.house-1, img.house-2, img.ladybird-1, img.ladybird-2, img.sad-face, img.smiley-face {
    margin: 20% 0;
    width: 94.7167%;
}

img.mouse {
    margin: 20% 0;
    width: 68.196%;   
}

img.balloon {
    margin: 20% 0;
    width: 69.1432%;
}

img.bear {
    margin: 20% 0;
    width: 73.879%;
}

img.dog, img.hot-air-balloon-1, img.hot-air-balloon-2, img.robot {
    margin: 20% 0;
    width: 75.7734%;
}

img.monkey-1, img.monkey-2 {
    margin: 20% 0;
    width: 80.5092%;
}

img.frog {
    margin: 20% 0;
    width: 83.3507%;
}

img.penguin {
    margin: 35% 0;
    width: 94.7167%;
}

img.hat-1, img.hat-2 {
    margin: 43.7% 0;
    width: 94.7167%;
}

img.rainbow {
    margin: 67% 0;
    width: 94.7167%;
}

img.rocket {
    margin: 20% 0;
    width: 62.513%;
}

/** Xmas Questions **/
img.gingerbread-1, img.gingerbread-2 {
    margin: 20% 0;
    width: 81.4564%;
}

img.tree-1, img.tree-2 {
    margin: 20% 0;
    width: 85.245%;
}

img.reindeer-1, img.reindeer-2 {
    margin: 20% 0;
    width: 71.0375%;
}

img.reindeer-1, img.reindeer-2 {
    margin: 20% 0;
    width: 71.0375%;
}

img.star-1, img.star-2 {
    margin: 20% 0;
    width: 94.7167%;
}

img.santa {
    margin: 20% 0;
    width: 70.0904%;
}

img.snowflake {
    margin: 31.8% 0;
    width: 94.7167%;
}

img.pudding {
    margin: 20% 0;
    width: 86.1922%;
}

img.bell {
    margin: 20% 0;
    width: 67.2489%;
}

img.bauble-1, img.bauble-2 {
    margin: 20% 0;
    width: 76.7205%;
}

img.present-1, img.present-2 {
    margin: 22.5% 0;
    width: 94.7167%;
}

img.snow-globe {
    margin: 20% 0;
    width: 89.9809%;
}

img.snowman-1, img.snowman-2 {
    margin: 20% 0;
    width: 77.6677%;
}

/** Option Images **/
#game.shapes-vert li img {
    width: 60%;
    margin: 10% 20%;
}

#game.shapes-hori li img {
    width: 90.91%;
    margin: 49% 4.5454545%;
}

li.beach-ball img, li.dice img, li.flower-1 img, li.flower-2 img, li.heart img, li.house-1 img, li.house-2 img, li.ladybird-1 img, li.ladybird-2 img, li.sad-face img, li.smiley-face img {
    width: 60%;
    margin: 10% 20%;
}

li.mouse img {
    width: 43.2%;
    margin: 10% 28.4%;     
}

li.balloon img {
    width: 43.8%;
    margin: 10% 28.1%
}

li.bear img {
    width: 46.8%;
    margin: 10% 26.6%
}

li.dog img, li.hot-air-balloon-1 img, li.hot-air-balloon-2 img, li.robot img {
    width: 48%;
    margin: 10% 26%;
}

li.monkey-1 img, li.monkey-2 img {
    width: 51%;
    margin: 10% 24.5%;
}

li.frog img {
    width: 52.8%;
    margin: 10% 23.6%;
}

li.penguin img {
    width: 60%;
    margin: 21.5% 20%;
}

li.hat-1 img, li.hat-2 img {
    width: 60%;
    margin: 27% 20%;
}

li.rainbow img {
    width: 60%;
    margin: 42% 20%
}

li.rocket img {
    width: 39.6%;
    margin: 10% 30.2%;
}

/** Xmas Answers **/
li.gingerbread-1 img, li.gingerbread-2 img {
    width: 51.6%;
    margin: 12% 24.2%;
}

li.tree-1 img, li.tree-2 img {
    width: 54%;
    margin: 12% 23%;
}

li.reindeer-1 img, li.reindeer-2 img {
    width: 45%;
    margin: 12% 27.5%;
}

li.star-1 img, li.star-2 img {
    width: 60%;
    margin: 12% 20%;
}

li.bauble-1 img, li.bauble-2 img {
    width: 48.6%;
    margin: 12% 25.7%;
}

li.present-1 img, li.present-2 img {
    width: 60%;
    margin: 13% 20%;
}

li.snowman-1 img, li.snowman-2 img {
    width: 49.2%;
    margin: 12% 25.4%;
}

li.santa img {
    width: 44.4%;
    margin: 12% 27.8%;
}

li.snowflake img {
    width: 60%;
    margin: 19.4% 20%;
}

li.snow-globe img {
    width: 57%;
    margin: 12% 21.5%;
}

li.pudding img {
    width: 54.6%;
    margin: 12% 22.7%;
}

li.bell img {
    width: 42.6%;
    margin: 12% 28.7%;
}
/** Patterns **/

#game.patterns .leftPart, #patterns-button .leftPart {
    border: none;
}

#questionArea table, #patterns-button table {
    border-collapse: collapse;
    margin: 0;
    width: 92%;
    height: 100%;
}

#questionArea .leftPart table, #patterns-button .leftPart table {
    float: right;
}

#questionArea td, #patterns-button td, li table td {
    border: 1px solid #222;
    width: 50%;
    height: 24%;
    font-size: 1px;
    line-height: 1px;
}

#questionArea .leftPart td.mirror, #patterns-button .leftPart td.mirror {
    border: none;
    border-right: 1px solid #222;
    height: 14%;
}

#questionArea .rightPart td.mirror, #patterns-button .rightPart td.mirror {
    border: none;
    border-left: 1px solid #222;
    height: 14%;
}

#questionArea .rightPart td.blank {
    border: 1px solid transparent;
    border-left: 1px solid #222;
    height: 24%;
}

li table {
    border-collapse: collapse;
    margin: 9% auto;
    width: 63%;
    height: 89%;
}

td.mirror {
    border: none;
    height: 10%;
}

td.yellow {
    background-color: #ffa500;
}

td.red {
    background-color: #b22222;
}

td.blue {
    background-color: #3c88d6;
}

td.green {
    background-color: #7faa2b;
}

td.purple {
    background-color: #6a5acd;
}