/*
 * General CSS file
 * By @davoscript
 */

body{
    height:100vh;
    margin:0;
    padding:0;
}

.gamescene{
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#DDD;
}

/* Main game container */
#appbox {
    position: relative;
    overflow: hidden;
    width:100%;
    height:100vh;
    /*
    width:320px;
    height:480px;
    */
    margin:0 auto;
    text-align: center;
}
body.ios #appbox{height:100%;}

/* Screens */
.screen{
    position: absolute;
    top:0;
    -moz-transform: translate3d(100%, 0, 0);
    -webkit-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    width: 100%;
    height: 100%;
    overflow-x: hidden;
}
.inner-padding{
    padding:20px;
}


/* Debug */
#debug{}


/* Screen Animations */

/* Slide In from the right */
@keyframes slideInR{
  from {transform: translate3d(100%, 0, 0);}
  to {transform: translate3d(0%, 0, 0);}
}
@-webkit-keyframes slideInR{
  from {-webkit-transform: translate3d(100%, 0, 0);}
  to {-webkit-transform: translate3d(0%, 0, 0);}
}

.screen.slideInR{
  -moz-animation: slideInR .3s forwards;
  -webkit-animation: slideInR .3s forwards;
  -ms-animation: slideInR .3s forwards;
  animation: slideInR .3s forwards;
}

/* Slide Out to the left */
@keyframes slideOutL{
  from {transform: translate3d(0%, 0, 0);}
  to {transform: translate3d(-100%, 0, 0);}
}
@-webkit-keyframes slideOutL{
  from {-webkit-transform: translate3d(0%, 0, 0);}
  to {-webkit-transform: translate3d(-100%, 0, 0);}
}

.screen.slideOutL{
  -moz-animation: slideOutL .3s forwards;
  -webkit-animation: slideOutL .3s forwards;
  -ms-animation: slideOutL .3s forwards;
  animation: slideOutL .3s forwards;
}

/* Slide In from the Left */
@keyframes slideInL{
  from {transform: translate3d(-100%, 0, 0);}
  to {transform: translate3d(0%, 0, 0);}
}
@-webkit-keyframes slideInL{
  from {-webkit-transform: translate3d(-100%, 0, 0);}
  to {-webkit-transform: translate3d(0%, 0, 0);}
}
.screen.slideInL{
  -moz-animation: slideInL .3s forwards;
  -webkit-animation: slideInL .3s forwards;
  -ms-animation: slideInL .3s forwards;
  animation: slideInL .3s forwards;
}

/* Slide Out to the Right */
@keyframes slideOutR{
  from {transform: translate3d(0%, 0, 0);}
  to {transform: translate3d(100%, 0, 0);}
}
@-webkit-keyframes slideOutR{
  from {-webkit-transform: translate3d(0%, 0, 0);}
  to {-webkit-transform: translate3d(100%, 0, 0);}
}

.screen.slideOutR{
  -moz-animation: slideOutR .3s forwards;
  -webkit-animation: slideOutR .3s forwards;
  -ms-animation: slideOutR .3s forwards;
  animation: slideOutR .3s forwards;
}

.screen.initial{
    -moz-transform: translate3d(0%, 0, 0);
    -webkit-transform: translate3d(0%, 0, 0);
    -ms-transform: translate3d(0%, 0, 0);
    transform: translate3d(0%, 0, 0);
}