#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;
}

.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 img {
    margin: 26.5% 0;
    width: 87.92%;
}

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

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

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

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

#letters-button img {
    margin: 20% 0;
    width: 79.6%;
}

/** Game View **/
#gameScreen {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

.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%;
    z-index: 5;
}

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

h2#question {
    background-color: #7faf20;
    border: 3px solid #ccfb8a;
    color: #FFF;
    font-size: 28px;
    line-height: 1.5em;
    position: absolute;
    top: 15%;
    right: 1.5%;
    width: 36%;
    text-align: center;
}

#conveyor {
    position: absolute;
    top: 36%;
    height: 17.44%;
    width: 100%;
    z-index: 0;
}

#conveyor img {
    height: 100%;
    width: 100%;
}

#conveyor #stripes {
    background: url('/media/games/symmetry-sorting/conveyor-stripe.png') repeat-x;
    width: 152%;
    position: absolute;
    left: -50%;
    top: 81.88075%;
    height: 18.11925%;
    z-index: 5;
}

#item {
    background-color: #FFF;
    border: 8px solid #1a62ad;
    border-radius: 20px;
    width: 19%;
    height: 38.5%;
    position: absolute;
    left: -25%;
    top: 7.7%;
    z-index: 3;
}

#item.wrong {
    border-color: #C11;
}

.itemHtml {
    position: relative;
    width: 100%;
    height: 100%;
}

.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;
}

/** Boxes **/
#boxes {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}

img.leftBox {
    left: 11%;
}

img.rightBox {
    right: 11%;
}

.leftBox.boxTop, .rightBox.boxTop {
    width: 31.979167%;
    position: absolute;
    top: 58.08%;
    z-index: 2;
    cursor: pointer;
}

.leftBox.boxBot, .rightBox.boxBot {
    position: absolute;
    width: 31.979167%;
    top: 68.48%;
    z-index: 5;
    cursor: pointer;
}

.boxLabel {
    color: #FFF;
    font: 28px/1.2em topmarksbold, sans-serif;
    display: block;
    text-align: center;
    position: absolute;
    top: 79%;
    z-index: 6;
    cursor: pointer;

    padding: 0.7% 0;
    background-color: #2485e0;
    border: 3px solid #D9D9FF;
    border-radius: 6px;
}

.hasHover .boxLabel:hover {
    background-color: #2E90FF;
    border-color: #F0F0FF;
}

span.leftBox {
    width: 22.5%;
    left: 15%;
}

span.rightBox {
    width: 26%;
    left: 60%;
}

#boxes div#boxBlocker {
    background-color: #6babed;
    width: 80%;
    height: 20%;
    position: absolute;
    left: 10%;
    top: 80%;
    z-index: 4;
}

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

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

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

#gameScreen.shapes-vert #item 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, img.spider {
    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.butterfly {
    margin: 45.2% 0;
    width: 94.7167%;
}

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.owl {
    margin: 20% 0;
    width: 86.8235%;
}

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%;
}

/** Sorting objects **/
.leftPart img.chicken {
    margin: 20% 0;
    width: 61.2588%;
}

.rightPart img.chicken {
    margin: 20% 0;
    width: 92.6117%;
}

img.bike {
    margin: 57% 0;
    width: 94.7167%;
}

img.battery {
    margin: 20% 0;
    width: 49.2%;
}

img.dog {
    margin: 20% 0;
    width: 84.894%;
}

img.hippo {
    margin: 20% 0;
    width: 80.007%;
}

img.lorry {
    margin: 59.5% 0;
    width: 94.7167%;
}

img.rocking-horse {
    margin: 23.67% 0;
    width: 96.4706%;
}

img.scooter {
    margin: 20% 0;
    width: 81.0353%;
}

img.train {
    margin: 32.6% 0;
    width: 96.4706%;
}

img.tree {
    margin: 20% 0;
    width: 77.1765%;
}

img.trumpet {
    margin: 46% 0;
    width: 96.4706%;
}

.leftPart img.monkey-3 {
    margin: 20% 0;
    width: 96.4706%;
}

.rightPart img.monkey-3 {
    margin: 20% 0;
    width: 73.3176%;
}

.leftPart img.cup {
    margin: 53.2% 0;
    width: 79.1089%;
}

.rightPart img.cup {
    margin: 53.2% 0;
    width: 96.4706%;
}

/** Letters **/
#gameScreen.letters .topPart, #gameScreen.letters .bottomPart {
    position: relative;
}

#gameScreen.letters .topPart img {
    position: absolute;
    bottom: 0;
    height: 86.39%;
}

#gameScreen.letters .bottomPart img {
    position: absolute;
    top: 0;
    height: 86.39%;
}

img.b, img.r {
    left: 6.41%;
}

img.e, img.f {
    left: 16.68%;
}

img.i {
    left: 23.85%;
}

img.j {
    left: 4.7%;
}

img.k, img.p {
    left: 9.37%;
}

img.l {
    left: 15.44%;
}

img.c {
    height: 77% !important;
    left: 5.5%
}

img.d {
    height: 77% !important;
    left: 5.5%
}

img.o {
    height: 68% !important;
    left: 5.5%;
}

#gameScreen.letters .leftPart img, #gameScreen.letters .rightPart img {
    height: 77%;
    margin: 26.8% 0;
}

img.w {
    height: 61% !important;
    margin: 45.3% 0 !important;    
}