/*html, body {
    width:  100%;
    height: 100%;
    overflow: hidden;
    background-color: black;
    background-repeat:no-repeat;
    background-size:100% 100%;
    margin: 0;
    padding:0;
}*/
html {
    height: 100vh;
    /*position: relative;*/
}

body {
    width:100%;
    height:100vh;
    background-color: black;
    margin: 0;
    padding:0;
    overflow: hidden;
    background-color: black;
    background-repeat:no-repeat;
    background-size:100% 100%;
}

#container {
    width:100%;
    height:100%;
}
/*PRELOADER*/
/*hidden will only be visible once preloading starts. 
also need to hide until js script loads and scale it based on window dimension
code that handles the progress movement is in asset manager
require the progressBarBg.png and logo from res folder
#preloadWrapper - required by baseclass for centering.
*/
#preloadWrapper{
/*    top:0px;
    width: 100%;
    height: 100%;

    visibility: hidden;
    position: absolute;*/

    /*position: relative;*/
/*    display: block;

    width:100%;
    height: 100%;
    transform-origin: 0px 0px 0px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;   For some Androids */

    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    visibility: hidden;
    position: absolute;

}
#backgroundDimmer{
    background: #000;
    opacity: 0.9;   
    position:absolute;
    width: 100%;
    height: 100vh;
    display: none;
}
#preloadAlign{
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);

/*    display: block;
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin: auto;
    transform-origin: 0px 0px 0px;*/
    
}
#preloadScale{
    position: relative;
    width: 100%;
    height: 100%;
}
/*    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    top:0;
    bottom:0;
    left:0;
    right:0;
    transform-origin: 0px 0px 0px;*/
}
#preloaderContainer{
    position: relative;
    width: 100%;
    height: 100%;
}
#preloadElements{
    position:relative; 
    display: inline-block;
}
/*Preload Message*/
#preloadMessageWrapper{
    display: block;
    position: relative;
    width: 100%;
    margin: 0 auto;
    height: 100%;
    text-align: center;
}
/*Preload Text*/
#preloadTxtMsg{
    display: inline;
}



/*MANIPULATE CANVASES HERE*/
#canvasWrapper{
    position: absolute;
    display: block;

    width:100%;
    height: 100%;
    transform-origin: 0px 0px 0px;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent; /*  For some Androids */

}

#canvasAlign{
    display: block;
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin: auto;
    transform-origin: 0px 0px 0px;
    
}
#canvasScale{
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    top:0;
    bottom:0;
    left:0;
    right:0;
    transform-origin: 0px 0px 0px;
}
canvas {    
    font-family: ObelixPro,OCRAStd,MainframeBBBold,ArialBold;
}



/*PLAY LANDSCAPE MESSAGE*/
/* will show once window is (window.innerHeight > window.innerWidth)
dynamically created in Theme Class onResize function*/
#playLandscape{
    background-image: url("../res/images/landscapeMessage.gif");
    background-repeat:no-repeat;
    background-size:100% 100%;
}
#playLandscapeContainer{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top:0px;
}

#standardFeature_Canvas{
    /*top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    position: absolute;*/

    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
.canvasSpan {
    pointer-events:none;
    text-align:left;
    position:absolute;
    transform-origin:0px 0px;
    transform:translate3d(0px, 0px, 0px) rotate(0rad) rotateX(0rad) rotateY(0rad) scale(1, 1);
    width:1px;
    overflow:hidden;
}

.fullscreenAndriod {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    margin: auto;
    width: 100vw;
    height: 120vh;
    background-position: center top;
    background-color: rgba(0, 0, 0, 0.9);
    text-align: center;
    vertical-align: middle;
    font-family: arial;
    font-size: 18px;
    color: #FFFFFF;
}

.fullscreenIOS {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    width: 100%;
    height: 100%;
    background-image: url('../res/images/swipeUp.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center top;
    background-color: rgba(0, 0, 0, 0.7);
}