body {
    margin: 0;
    background: #000;
    color: #FFF;
    font-family: Arial;
    font-size: 32pt;
    overflow: hidden;
    /*min-height: 1024px;*/
    height: 640px;
    padding: 5px;
}

#noembed {
    width: 100%;
    margin: auto;
    text-align: center;
}

#videooverlay {
    position: absolute;
    z-index: 101;
    background-color: black;
    width: 960px;
    height: 640px;
    visibility: hidden;
}

#datacaptureoverlay {
    position: absolute;
    top: 180px;
    left: 0px;
    margin: 0 auto;
    width: 100%;
    z-index: 100;
    font-size: 20px;
    color: black;
    font-family: 'Lato', sans-serif;
    font-weight: bold;
    text-align: center;
    visibility: hidden;
}

#datacaptureoverlay label {
    display: inline-block;
    width: 260px;
    font-family: 'Lato', sans-serif;
}

#videoplaybutton {
    position: absolute;
    background-image: url(../images/playButton.png);
    width: 100px;
    height: 100px;
    left: 430px;
    top: 270px;
    z-index: 110;
}

#loading {
    position: absolute;
    background-image: url(../images/loading.svg);
    width: 100px;
    height: 100px;
    left: 430px;
    top: 270px;
    z-index: 111;
}

#datacaptureoverlay input[type=text] {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #444;
    width: 250px;
}

#content {
    width: 960px;
    height: 640px;
    /*margin: 60px auto 20px auto;*/
    margin: 0;
    background: #000;
}

.desktop #content {
    -webkit-box-shadow: 0px 0px 25px 10px rgba(0, 0, 0, 1);
    -moz-box-shadow: 0px 0px 25px 10px rgba(0, 0, 0, 1);
    box-shadow: 0px 0px 25px 10px rgba(0, 0, 0, 1);
    height: 640px;
    width: 960px;
}

#message {
    width: 500px;
    text-align: center;
    margin: auto;
    /*padding: 40px 0;*/
}

#fullscreen {
    position: absolute;
    top: 5px;
    right: 5px;
}

#portraitMessage {
    display: none;
}


/* Handle orientation - Show game in portrait only. Handled by JS, because only applies to mobile devices. */

.landscape.mobile #landscape {
    display: block;
}

.portrait.mobile #landscape {
    display: none;
}


/*.landscape.mobile > #bg-container {
      display: none;
    }
    .portrait.mobile > #bg-container {
      display: block;
    }*/

.mobile .banner {
    display: none;
}

.no-canvas>#bg-container {
    display: none;
}

#no-canvas {
    display: none;
}

.no-canvas #no-canvas {
    display: block;
}

#no-canvas img {
    width: 100%;
}

#bg-container {
    _margin: auto;
    _width: 960px;
    _height: 640px;
}


/* On small devices, fill the entire screen and hide the rest of the page. */

@media (max-device-width: 10in),
(max-device-height: 10in) {
    html {
        /* Prevent scrollbars from causing a resize feedback loop. */
        overflow: hidden;
    }
    html,
    body {
        height: 640px;
        margin: 0px;
    }
    #content {
        /* Canvas Scaling Issue on iOS 7.1 */
        /*height: 100%;
        width: 100%;*/
        margin: inherit;
    }
    .no-mobile {
        display: none;
    }
}


/* iPhone 2G, 3G, 4, 4S Media Queries */

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) and (orientation:portrait) {
    html {
        /* Prevent scrollbars from causing a resize feedback loop. */
        overflow: hidden;
    }
    html,
    body {
        height: 100%;
    }
    #content {
        height: 100%;
        width: auto;
        margin: inherit;
    }
}


/* Samsung Galaxy S4 */

@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) {
    html {
        /* Prevent scrollbars from causing a resize feedback loop. */
        overflow: hidden;
    }
    #content {
        height: 100%;
        width: auto;
        margin: inherit;
    }
}

@media screen and (orientation:portrait) {
    .mobile #portraitMessage {
        display: block;
    }
    .mobile #content {
        display: none;
    }
}

@media screen and (orientation:landscape) {
    .mobile #portraitMessage {
        display: none;
    }
    .mobile #content {
        display: block;
    }
}

input[type="checkbox"] {
    display: none;
}

input[type="checkbox"]+label {
    color: black;
    font-family: 'Lato', sans-serif;
}

input[type="checkbox"]+label span {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin: -2px 10px 0 0;
    vertical-align: middle;
    background: url(../images/cross.png);
    cursor: pointer;
}

input[type="checkbox"]:checked+label span {
    background: url(../images/tick.png);
}

input[type="radio"] {
    display: none;
}

input[type="radio"]+label {
    color: black;
    font-family: 'Lato', sans-serif;
}

input[type="radio"]+label span {
    display: inline-block;
    width: 25px;
    height: 25px;
    margin: -2px 10px 0 0;
    vertical-align: middle;
    background: url(../images/cross.png);
    cursor: pointer;
}

input[type="radio"]:checked+label span {
    background: url(../images/tick.png);
}