html {
  -webkit-font-smoothing:   subpixel-antialiased;
  -webkit-text-size-adjust: 100%;
  -webkit-touch-callout:    none;
  -webkit-user-select:      none;
  -khtml-user-select:       none;
  -moz-user-select:         none;
  -ms-user-select:          none;
  user-select:              none;
  webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-backface-visibility: hidden;
}
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body {
  background-color: #000;
  font-family: 'Play', Arial, Helvetica, sans-serif;
  font-size: 14px;
  color: #fff;
}


/* General -------------------------------------------------------------------------------------- */

* {
  font-family: 'Play', Arial, Helvetica, sans-serif;
  padding: 0;
  border: 0;
  margin: 0;
}


/* Fonts ---------------------------------------------------------------------------------------- */

@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/fontawesome/fontawesome-webfont.eot?v=4.6.3');
  src: url('fonts/fontawesome/fontawesome-webfont.eot?#iefix&v=4.6.3')             format('embedded-opentype'),
       url('fonts/fontawesome/fontawesome-webfont.woff2?v=4.6.3')                  format('woff2'),
       url('fonts/fontawesome/fontawesome-webfont.woff?v=4.6.3')                   format('woff'),
       url('fonts/fontawesome/fontawesome-webfont.ttf?v=4.6.3')                    format('truetype'),
       url('fonts/fontawesome/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Play';
  src: url('fonts/play/regular/Play-regular.eot');
  src: url('fonts/play/regular/Play-regular.eot?#iefix') format('embedded-opentype'),
       url('fonts/play/regular/Play-regular.woff2')      format('woff2'),
       url('fonts/play/regular/Play-regular.woff')       format('woff'),
       url('fonts/play/regular/Play-regular.ttf')        format('truetype'),
       url('fonts/play/regular/Play-regular.svg#Play')   format('svg');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Play';
  src: url('fonts/play/bold/Play-bold.eot');
  src: url('fonts/play/bold/Play-bold.eot?#iefix') format('embedded-opentype'),
       url('fonts/play/bold/Play-bold.woff2')      format('woff2'),
       url('fonts/play/bold/Play-bold.woff')       format('woff'),
       url('fonts/play/bold/Play-bold.ttf')        format('truetype'),
       url('fonts/play/bold/Play-bold.svg#Play')   format('svg');
  font-weight: 700;
  font-style: normal;
}


/* Screen --------------------------------------------------------------------------------------- */

.screen {
  width: 100%;
  height: 100%;
  display: none;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

.overlay {
  width: 100%;
  height: 100%;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}

/* Screen header */
.screen_header {
  width: 100%;
  height: 40px;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #333;
  color: #fff;
  border-bottom: 2px solid #ebc6ad;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.4);
}
.xmas .screen_header {
  background-color: #4e5a71;
  border-color: #efd9c5;
}
.screen_header .screen_title {
  width: 100%;
  font-weight: 700;
  line-height: 40px;
  text-transform: uppercase;
  text-shadow: 1px 1px #000;
  text-align: center;
}
.screen_header .button.back {
  width: 34px;
  height: 34px;
  position: absolute;
  top: 3px;
  left: 3px;
  background-color: #666;
  font-family: 'FontAwesome';
  font-weight: normal;
  font-size: 16px;
  line-height: 34px;
  text-shadow: 1px 1px #000;
  text-align: center;
  color: #fff;
  cursor: pointer;
  padding: 0;
  outline: none;
  -webkit-border-radius: 5px;
  -moz-border-radius:    5px;
  border-radius:         5px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition: background-color 0.2s ease 0s, text-shadow 0.2s ease 0s, color 0.2s ease 0s;
  -moz-transition:    background-color 0.2s ease 0s, text-shadow 0.2s ease 0s, color 0.2s ease 0s;
  -o-transition:      background-color 0.2s ease 0s, text-shadow 0.2s ease 0s, color 0.2s ease 0s;
  transition:         background-color 0.2s ease 0s, text-shadow 0.2s ease 0s, color 0.2s ease 0s;
}
.xmas .screen_header .button.back {
  background-color: #7081a0;
}
.no-touch .screen_header .button.back:hover,
          .screen_header .button.back:active,
.no-touch .screen_header .button.back:focus {
  background-color: #fff;
  text-shadow: 1px 1px #fff;
  color: #000;
}
.screen_header .button.back:before {
  content: '\f060';
}

/* Screen footer */
.screen_footer {
  width: 100%;
  height: 40px;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #333;
  color: #fff;
  border-top: 2px solid #ebc6ad;
}
.xmas .screen_footer {
  background-color: #4e5a71;
  border-color: #efd9c5;
}

/* Screen body */
.screen_body {
  width: 100%;
  height: 100%;
  padding: 42px 0 0 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}
.screen_body.footer {
  padding-bottom: 42px;
}


/* Screen: loading ------------------------------------------------------------------------------ */

#screen_loading {
  display: table;
}
#screen_loading_content {
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
#progress_bar_container {
  width: 200px;
  height: 12px;
  font-size: 0;
  line-height: 0;
  border: 2px solid #fff;
  margin: 0 auto 20px auto;
  -webkit-border-radius: 12px;
  -moz-border-radius:    12px;
  border-radius:         12px;
}
#progress_bar {
  width: 0;
  height: 12px;
  background-color: #fff;
}
#text_loading {
  line-height: 20px;
  text-transform: uppercase;
  text-shadow: 1px 1px #000;
  text-align: center;
  color: #fff;
  padding: 0 15px 0 15px;
}


/* Screen: Whirlwind ---------------------------------------------------------------------------- */

#screen_whirlwind {
  background: -webkit-gradient(radial, center center, 0, center center, 460, from(#304896), to(#000));
  background: -webkit-radial-gradient(circle, #304896, #000);
  background: -moz-radial-gradient(circle,    #304896, #000);
  background: -ms-radial-gradient(circle,     #304896, #000);
  text-align: center;
  cursor: pointer;
}

#logo_whirlwind {
  width: 60%;
  height: 60%;
  position: absolute;
  top: 20%;
  left: 20%;
  display: none;
  background-image: url('images/logo_whirlwind.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  opacity: 1;
}
#logo_whirlwind.animation {
  -webkit-animation: logo_whirlwind_pop_in 1s linear;
  -moz-animation:    logo_whirlwind_pop_in 1s linear;
  -ms-animation:     logo_whirlwind_pop_in 1s linear;
  animation:         logo_whirlwind_pop_in 1s linear;
}

@keyframes logo_whirlwind_pop_in {
  0% {
    width: 50%;
    height: 50%;
    top: 25%;
    left: 25%;
    opacity: 0;
  }
  100% {
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    opacity: 1;
  }
}


/* Screen: title -------------------------------------------------------------------------------- */

#screen_title {
  background-color: #dec7b1;
  cursor: pointer;
}
.default #screen_title {
  background-image: url('images/outside.svg');
}
.xmas    #screen_title {
  background-color: #afe1fd;
  background-image: url('images/xmas/house.svg');
}
.xmas #screen_title_container {
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url('images/xmas/snow1.png'), url('images/xmas/snow2.png'), url('images/xmas/snow3.png');
  background-repeat: repeat;
  background-position: top left;
  background-size: auto;
  -webkit-animation: snow 20s linear infinite;
  -moz-animation:    snow 20s linear infinite;
  -ms-animation:     snow 20s linear infinite;
  animation:         snow 20s linear infinite;
}
.android.xmas #screen_title_container {
  -webkit-animation: none;
  -moz-animation:    none;
  -ms-animation:     none;
  animation:         none;
}

#logo_app {
  width: 90%;
  height: 50%;
  position: absolute;
  top: 10%;
  left: 5%;
  display: none;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  opacity: 1;
}
.default #logo_app {
  background-image: url('images/logo_app.svg');
}
.xmas    #logo_app {
  background-image: url('images/xmas/logo_app.svg');
}
#logo_app.animation {
  -webkit-animation: logo_app_pop_in 1s ease;
  -moz-animation:    logo_app_pop_in 1s ease;
  -ms-animation:     logo_app_pop_in 1s ease;
  animation:         logo_app_pop_in 1s ease;
}

@keyframes logo_app_pop_in {
  0% {
    top: -50%;
    opacity: 0;
  }
  100% {
    top: 10%;
    opacity: 1;
  }
}

@-webkit-keyframes snow {
  0%   { background-position: 0px 0px, 0px 0px, 0px 0px }
  100% { background-position: 500px 1000px, 400px 400px, 300px 300px; }
}
@-moz-keyframes snow {
  0%   { background-position: 0px 0px, 0px 0px, 0px 0px }
  100% { background-position: 500px 1000px, 400px 400px, 300px 300px; }
}
@-ms-keyframes snow {
  0%   { background-position: 0px 0px, 0px 0px, 0px 0px }
  100% { background-position: 500px 1000px, 400px 400px, 300px 300px; }
}
@keyframes snow {
  0%   { background-position: 0px 0px, 0px 0px, 0px 0px }
  100% { background-position: 500px 1000px, 400px 400px, 300px 300px; }
}


/* Screen: menu --------------------------------------------------------------------------------- */

#screen_menu {
  background-color: #e3b390;
}
.default #screen_menu {
  background-image: url('images/inside.svg');
}
.xmas    #screen_menu {
  background-color: #afe1fd;
  background-image: url('images/xmas/house.svg');
}
.xmas #screen_menu_container {
  width: 100%;
  height: 100%;
  position: relative;
  background-image: url('images/xmas/snow1.png'), url('images/xmas/snow2.png'), url('images/xmas/snow3.png');
  background-repeat: repeat;
  background-position: top left;
  background-size: auto;
  -webkit-animation: snow 20s linear infinite;
  -moz-animation:    snow 20s linear infinite;
  -ms-animation:     snow 20s linear infinite;
  animation:         snow 20s linear infinite;
}
.android.xmas #screen_menu_container {
  -webkit-animation: none;
  -moz-animation:    none;
  -ms-animation:     none;
  animation:         none;
}

#screen_menu_body {
  position: absolute;
}
@media only screen and (orientation: landscape) {
  #screen_menu_body {
    width: 60%;
    height: 80%;
    top: 10%;
    left: 20%;
  }
}
@media only screen and (orientation: portrait) {
  #screen_menu_body {
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
  }
}
@media only screen and (orientation: portrait) and (min-height: 1000px) {
  #screen_menu_body {
    height: 60%;
    top: 20%;
  }
}

#menu_buttons {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
#menu_buttons .button {
  width: 100%;
  height: 16%;
  display: table;
  background-color: rgba(0, 0, 0, 0.6);
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: 1px 1px #000;
  text-align: center;
  color: #fa0;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  border: 2px solid #ebc6ad;
  -webkit-border-radius: 10px;
  -moz-border-radius:    10px;
  border-radius:         10px;
  -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:    0 0 2px 1px rgba(0, 0, 0, 0.4);
  box-shadow:         0 0 2px 1px rgba(0, 0, 0, 0.4);
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
  -webkit-transition: background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s, box-shadow 0.2s ease 0s;
  -moz-transition:    background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s, box-shadow 0.2s ease 0s;
  -o-transition:      background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s, box-shadow 0.2s ease 0s;
  transition:         background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s, box-shadow 0.2s ease 0s;
}
.xmas #menu_buttons .button {
  background-color: rgba(0, 0, 0, 0.45);
  color: #fb0;
  border-color: #efd9c5;
}
.no-mobile #menu_buttons .button span {
  color: #fff;
}
.no-touch #menu_buttons .button:hover,
          #menu_buttons .button:active,
.no-touch #menu_buttons .button:focus {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-color: #fff;
  -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.6);
  -moz-box-shadow:    0 0 2px 1px rgba(0, 0, 0, 0.6);
  box-shadow:         0 0 2px 1px rgba(0, 0, 0, 0.6);
}
.no-touch .xmas #menu_buttons .button:hover,
          .xmas #menu_buttons .button:active,
.no-touch .xmas #menu_buttons .button:focus {
  background-color: rgba(0, 0, 0, 0.7);
}
#menu_buttons .button_space {
  width: 100%;
  height: 5%;
}
#menu_buttons .button_text {
  display: table-cell;
  vertical-align: middle;
}


/* Screen: level play --------------------------------------------------------------------------- */

#screen_level_play {
  background-color: #907052;
  background-repeat: repeat;
  background-size: 50px 50px;
}
.default #screen_level_play {
  background-image: url('images/background.svg');
}
.xmas    #screen_level_play {
  background-color: #efd9c5;
  background-image: url('images/xmas/background.svg');
}

/* Canvas */
#canvas_level_play {
  position: absolute;
  top: 0;
  left: 0;
}
#canvas_level_play_top {
  position: absolute;
  top: 0;
  left: 0;
}

/* Side bar */
#side_bar {
  position: absolute;
  z-index: 10;
  background-color: #333;
  background-repeat: repeat;
  background-position: center center;
  background-size: 50px 50px;
  overflow: hidden;
  border: 2px solid #666;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
  /* Prevent text flicker */
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}
.xmas #side_bar {
  background-color: #4e5a71;
  border-color: #7081a0;
}
@media only screen and (orientation: landscape) {
  #side_bar {
    width: 168px;
    height: 100%;
    top: 0;
    right: 0;
  }
}
@media only screen and (orientation: portrait) {
  #side_bar {
    width: 100%;
    height: 168px;
    bottom: 0;
    left: 0;
  }
}

/* Level indicator */
#indicator_level {
  width: 164px;
  position: absolute;
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 1px 1px #000;
  text-align: center;
  line-height: 20px;
  color: #fa0;
  padding: 10px;
  border-bottom: 2px solid #666;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
  /* Prevent text flicker */
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}
.xmas #indicator_level {
  color: #fb0;
  border-color: #7081a0;
}

@media only screen and (orientation: landscape) {
  #indicator_level {
    top: 0;
    right: 0;
  }
}
@media only screen and (orientation: landscape) and (max-height: 420px) {
  #indicator_level {
    text-align: center;
  }
}

@media only screen and (orientation: portrait) {
  #indicator_level {
    width: 166px;
    top: 0;
    left: 164px;
    border-right: 2px solid #666;
  }
}
@media only screen and (orientation: portrait) and (max-width: 497px) {
  #indicator_level {
    left: 0;
    text-align: center;
  }
}

/* Game buttons */
#menu_button,
#settings_button,
#undo_button,
#pause_button,
#restart_button {
  height: 30px;
  background-color: rgba(0, 0, 0, 0.5);
  font-weight: bold;
  font-size: 14px;
  line-height: 30px;
  text-transform: uppercase;
  text-shadow: 1px 1px #000;
  text-align: center;
  color: #fa0;
  cursor: pointer;
  overflow: hidden;
  padding: 0 15px 0 15px;
  border: 2px solid #ebc6ad;
  -webkit-border-radius: 30px;
  -moz-border-radius:    30px;
  border-radius:         30px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition: background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s;
  -moz-transition:    background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s;
  -o-transition:      background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s;
  transition:         background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s;
  /* Prevent text flicker */
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}
.xmas #menu_button,
.xmas #settings_button,
.xmas #undo_button,
.xmas #pause_button,
.xmas #restart_button {
  color: #fb0;
  border-color: #7081a0;
}
.xmas #menu_button,
.xmas #settings_button {
  background-color: rgba(0, 0, 0, 0.75);
  border-color: #efd9c5;
}
#undo_button,
#pause_button,
#restart_button {
  border-color: #666;
}
#undo_button,
#pause_button {
  margin: 0 0 10px 0;
}
.no-touch #settings_button:hover,
          #settings_button:active,
.no-touch #settings_button:focus,
.no-touch #menu_button:hover,
          #menu_button:active,
.no-touch #menu_button:focus {
  background-color: rgba(0, 0, 0, 1);
  color: #fff;
  border-color: #fff;
}
.no-touch #undo_button:hover,
          #undo_button:active,
.no-touch #undo_button:focus,
.no-touch #pause_button:hover,
          #pause_button:active,
.no-touch #pause_button:focus,
.no-touch #restart_button:hover,
          #restart_button:active,
.no-touch #restart_button:focus {
  background-color: rgba(0, 0, 0, 1);
  color: #fff;
  border-color: #fff;
}
.no-mobile #undo_button     span,
.no-mobile #pause_button    span,
.no-mobile #restart_button  span,
.no-mobile #settings_button span,
.no-mobile #menu_button     span {
  color: #fff;
}

#menu_button {
  position: absolute;
  z-index: 20;
}
@media only screen and (orientation: landscape) {
  #menu_button {
    top: 5px;
    left: 5px;
  }
}
@media only screen and (orientation: portrait) {
  #menu_button {
    top: 5px;
    left: 5px;
  }
}

#settings_button {
  position: absolute;
  z-index: 20;
}
@media only screen and (orientation: landscape) {
  #settings_button {
    bottom: 5px;
    left: 5px;
  }
}
@media only screen and (orientation: portrait) {
  #settings_button {
    top: 5px;
    right: 5px;
  }
}

#undo_pause_restart {
  width: 164px;
  position: absolute;
  padding: 0 10px 0 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}

@media only screen and (orientation: landscape) {
  #undo_pause_restart {
    top: 56px;
    right: 0;
  }
}
@media only screen and (orientation: landscape) and (max-height: 420px) {
  #undo_pause_restart {
    display: none;
  }
}

@media only screen and (orientation: portrait) {
  #undo_pause_restart {
    top: 0;
    left: 0;
    padding-top: 21px;
    padding-bottom: 21px;
    border-right: 2px solid #666;
  }
  .xmas #undo_pause_restart {
    border-color: #7081a0;
  }
}
@media only screen and (orientation: portrait) and (max-width: 497px) {
  #undo_pause_restart {
    display: none;
  }
}

/* Main undo button + game menu button */
#main_undo_button,
#game_menu_button {
  width: 30px;
  height: 30px;
  display: none;
  position: absolute;
  background-color: #666;
  font-family: 'FontAwesome';
  font-weight: normal;
  font-size: 16px;
  line-height: 30px;
  text-shadow: 1px 1px #000;
  text-align: center;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.4);
  -webkit-border-radius: 5px;
  -moz-border-radius:    5px;
  border-radius:         5px;
  -webkit-transition: background-color 0.2s ease 0s, text-shadow 0.2s ease 0s, color 0.2s ease 0s;
  -moz-transition:    background-color 0.2s ease 0s, text-shadow 0.2s ease 0s, color 0.2s ease 0s;
  -o-transition:      background-color 0.2s ease 0s, text-shadow 0.2s ease 0s, color 0.2s ease 0s;
  transition:         background-color 0.2s ease 0s, text-shadow 0.2s ease 0s, color 0.2s ease 0s;
  /* Prevent text flicker */
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}
.xmas #main_undo_button,
.xmas #game_menu_button {
  background-color: #7081a0;
}
#main_undo_button:before {
  content: '\f0e2';
}
#game_menu_button:before {
  content: '\f0c9';
}
.no-touch #main_undo_button:hover,
          #main_undo_button:active,
.no-touch #main_undo_button:focus,
.no-touch #game_menu_button:hover,
          #game_menu_button:active,
.no-touch #game_menu_button:focus {
  background-color: #fff;
  text-shadow: 1px 1px #fff;
  color: #000;
}

@media only screen and (orientation: landscape) and (max-height: 420px) {
  #main_undo_button {
    top: 5px;
    left: 10px;
    display: block;
  }
  #game_menu_button {
    top: 5px;
    right: 10px;
    display: block;
  }
}

@media only screen and (orientation: portrait) and (max-width: 497px) {
  #main_undo_button {
    top: 5px;
    left: 10px;
    display: block;
  }
  #game_menu_button {
    top: 5px;
    left: 124px;
    display: block;
  }
}

/* Game play data */
#game_play_data {
  width: 164px;
  position: absolute;
  line-height: 20px;
  text-transform: uppercase;
  text-shadow: 1px 1px #000;
  padding: 0 10px 0 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}

@media only screen and (orientation: landscape) {
  #game_play_data {
    top: 192px;
    right: 0;
  }
}
@media only screen and (orientation: landscape) and (max-height: 420px) {
  #game_play_data {
    top: 56px;
  }
}
@media only screen and (orientation: landscape) and (max-height: 280px) {
  #game_play_data {
    display: none;
  }
}

@media only screen and (orientation: portrait) {
  #game_play_data {
    width: 166px;
    top: 42px;
    left: 164px;
    padding-top: 31px;
    padding-bottom: 31px;
    border-right: 2px solid #666;
  }
  .xmas #game_play_data {
    border-color: #7081a0;
  }
}
@media only screen and (orientation: portrait) and (max-width: 497px) {
  #game_play_data {
    left: 0;
  }
}

#data_time,
#data_moves,
#data_pushes {
  width: 100%;
  position: relative;
}
#time,
#moves,
#pushes {
  font-weight: normal;
  /* Prevent text flicker */
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}
#indicator_time,
#indicator_moves,
#indicator_pushes {
  position: absolute;
  top: 0;
  right: 0;
  /* Prevent text flicker */
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}

/* Arrow button */
#arrow_buttons {
  width: 140px;
  height: 140px;
  position: absolute;
  z-index: 30;
  background-color: #191919;
  border: 2px solid #666;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.4);
  -webkit-border-radius: 140px;
  -moz-border-radius:    140px;
  border-radius:         140px;
}
.xmas #arrow_buttons {
  background-color: #272d38;
  border-color: #7081a0;
}
@media only screen and (orientation: landscape) {
  #arrow_buttons {
    bottom: 10px;
    right: 10px;
  }
}
@media only screen and (orientation: portrait) {
  #arrow_buttons {
    bottom: 10px;
    right: 10px;
  }
}

.arrow_button {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: #666;
  font-family: 'FontAwesome', Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 25px;
  line-height: 50px;
  text-shadow: 1px 1px #000;
  text-align: center;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.4);
  -webkit-border-radius: 50px;
  -moz-border-radius:    50px;
  border-radius:         50px;
  -webkit-transition: background-color 0.2s ease 0s, text-shadow 0.2s ease 0s, color 0.2s ease 0s;
  -moz-transition:    background-color 0.2s ease 0s, text-shadow 0.2s ease 0s, color 0.2s ease 0s;
  -o-transition:      background-color 0.2s ease 0s, text-shadow 0.2s ease 0s, color 0.2s ease 0s;
  transition:         background-color 0.2s ease 0s, text-shadow 0.2s ease 0s, color 0.2s ease 0s;
  /* Prevent text flicker */
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}
.xmas .arrow_button {
  background-color: #4e5a71;
}
.no-touch .arrow_button:hover,
          .arrow_button:active,
.no-touch .arrow_button:focus {
  background-color: #fff;
  text-shadow: 1px 1px #fff;
  color: #000;
}

#arrow_button_up {
  top: 5px;
  left: 45px;
}
#arrow_button_up:before {
  content: '\f062';
}

#arrow_button_left {
  top: 45px;
  left: 5px;
}
#arrow_button_left:before {
  content: '\f060';
}

#arrow_button_right {
  top: 45px;
  right: 5px;
}
#arrow_button_right:before {
  content: '\f061';
}

#arrow_button_down {
  bottom: 5px;
  left: 45px;
}
#arrow_button_down:before {
  content: '\f063';
}

/* Game paused */
#overlay_pause {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  background-color: rgba(0, 0, 0, 0.5);
}
#game_paused_container {
  width: 100%;
  height: 100%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}
#game_paused_box {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 28px 25px 28px 25px;
  border: 2px solid #ebc6ad;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.4);
  -webkit-border-radius: 8px;
  -moz-border-radius:    8px;
  border-radius:         8px;
}
.xmas #game_paused_box {
  border-color: #efd9c5;
}
#game_paused {
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 1px 1px #000;
  font-size: 14px;
  line-height: 14px;
  color: #fff;
  margin: 0 0 25px 0;
  /* Prevent text flicker */
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}
#game_paused.blinker {
  -webkit-animation: blinker 1s linear infinite;
  -moz-animation:    blinker 1s linear infinite;
  -ms-animation:     blinker 1s linear infinite;
  animation:         blinker 1s linear infinite;
}
.android #game_paused.blinker {
  -webkit-animation: none;
  -moz-animation:    none;
  -ms-animation:     none;
  animation:         none;
}

@keyframes blinker {
  0% {
    text-shadow: 1px 1px rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 1);
  }
  50% {
    text-shadow: 1px 1px rgba(0, 0, 0, 0);
    color: rgba(255, 255, 255, 0);
  }
  100% {
    text-shadow: 1px 1px rgba(0, 0, 0, 1);
    color: rgba(255, 255, 255, 1);
  }
}

#resume_game {
  height: 30px;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.5);
  font-weight: bold;
  font-size: 14px;
  line-height: 30px;
  text-transform: uppercase;
  text-shadow: 1px 1px #000;
  color: #fa0;
  cursor: pointer;
  padding: 0 15px 0 15px;
  border: 2px solid #ebc6ad;
  -webkit-border-radius: 30px;
  -moz-border-radius:    30px;
  border-radius:         30px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition: background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s;
  -moz-transition:    background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s;
  -o-transition:      background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s;
  transition:         background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s;
  /* Prevent text flicker */
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}
.xmas #resume_game {
  color: #fb0;
  border-color: #efd9c5;
}
.no-touch #resume_game:hover,
          #resume_game:active,
.no-touch #resume_game:focus {
  background-color: rgba(0, 0, 0, 1);
  color: #fff;
  border-color: #fff;
}
.no-mobile #resume_game span {
  color: #fff;
}

/* Overlay game menu */
#overlay_game_menu {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 40;
  background-color: rgba(0, 0, 0, 0.5);
}
#game_menu_container {
  width: 100%;
  height: 100%;
  display: table-cell;
  font-size: 0;
  line-height: 0;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}

#game_menu_box {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 20px 20px 20px 20px;
  border: 2px solid #ebc6ad;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.4);
  -webkit-border-radius: 8px;
  -moz-border-radius:    8px;
  border-radius:         8px;
  margin: 5px;
}
.xmas #game_menu_box {
  border-color: #efd9c5;
}
#overlay_undo_button,
#overlay_pause_button,
#overlay_restart_button,
#overlay_cancel_button {
  height: 30px;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.5);
  font-weight: bold;
  font-size: 14px;
  line-height: 30px;
  text-transform: uppercase;
  text-shadow: 1px 1px #000;
  color: #fa0;
  cursor: pointer;
  padding: 0 15px 0 15px;
  border: 2px solid #ebc6ad;
  -webkit-border-radius: 30px;
  -moz-border-radius:    30px;
  border-radius:         30px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.4);
  margin: 8px;
  -webkit-transition: background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s;
  -moz-transition:    background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s;
  -o-transition:      background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s;
  transition:         background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s;
  /* Prevent text flicker */
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}
.xmas #overlay_undo_button,
.xmas #overlay_pause_button,
.xmas #overlay_restart_button,
.xmas #overlay_cancel_button {
  color: #fb0;
  border-color: #efd9c5;
}
.no-touch #overlay_undo_button:hover,
          #overlay_undo_button:active,
.no-touch #overlay_undo_button:focus,
.no-touch #overlay_pause_button:hover,
          #overlay_pause_button:active,
.no-touch #overlay_pause_button:focus,
.no-touch #overlay_restart_button:hover,
          #overlay_restart_button:active,
.no-touch #overlay_restart_button:focus,
.no-touch #overlay_cancel_button:hover,
          #overlay_cancel_button:active,
.no-touch #overlay_cancel_button:focus {
  background-color: rgba(0, 0, 0, 1);
  color: #fff;
  border-color: #fff;
}
.no-mobile #overlay_undo_button    span,
.no-mobile #overlay_pause_button   span,
.no-mobile #overlay_restart_button span,
.no-mobile #overlay_cancel_button  span {
  color: #fff;
}


/* Screen: level completed ---------------------------------------------------------------------- */

#screen_level_completed {
  background-color: #b0a7aa;
}
.default #screen_level_completed {
  background-image: url('images/outside2.svg');
}
.xmas    #screen_level_completed {
  background-color: #84d4ff;
  background-image: url('images/xmas/mountain.svg');
}
#level_completed_container_1 {
  width: 100%;
  height: 100%;
  display: table;
  text-align: center;
}
.xmas #level_completed_container_1 {
  background-image: url('images/xmas/snow1.png'), url('images/xmas/snow2.png'), url('images/xmas/snow3.png');
  background-repeat: repeat;
  background-position: top left;
  background-size: auto;
  -webkit-animation: snow 20s linear infinite;
  -moz-animation:    snow 20s linear infinite;
  -ms-animation:     snow 20s linear infinite;
  animation:         snow 20s linear infinite;
}
.android.xmas #level_completed_container_1 {
  -webkit-animation: none;
  -moz-animation:    none;
  -ms-animation:     none;
  animation:         none;
}

#level_completed_container_2 {
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}

#level_completed_container_3 {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.6);
  font-weight: bold;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  text-shadow: 1px 1px #000;
  color: #fff;
  padding: 25px 25px 28px 25px;
  border: 2px solid #ebc6ad;
  -webkit-border-radius: 8px;
  -moz-border-radius:    8px;
  border-radius:         8px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.4);
}
.xmas #level_completed_container_3 {
  border-color: #efd9c5;
}

#level_completed {
  color: #fa0;
  margin: 0 0 20px 0;
}
.xmas #level_completed {
  color: #fb0;
}

#level_completed_time_label,
#level_completed_moves_label,
#level_completed_pushes_label {
  display: inline-block;
  margin: 0 10px 0 0;
}
#level_completed_time_value,
#level_completed_moves_value,
#level_completed_pushes_value {
  display: inline-block;
}

#level_completed_highscore {
  height: 20px;
  margin: 20px 0 0 0;
}

#level_completed_button {
  height: 34px;
  margin: 20px 0 0 0;
}
#next_level,
#enter_name {
  height: 30px;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.5);
  font-weight: bold;
  font-size: 14px;
  line-height: 30px;
  text-transform: uppercase;
  text-shadow: 1px 1px #000;
  color: #fa0;
  cursor: pointer;
  padding: 0 15px 0 15px;
  border: 2px solid #ebc6ad;
  -webkit-border-radius: 30px;
  -moz-border-radius:    30px;
  border-radius:         30px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition: background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s;
  -moz-transition:    background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s;
  -o-transition:      background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s;
  transition:         background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s;
}
.xmas #next_level,
.xmas #enter_name {
  color: #fb0;
  border-color: #efd9c5;
}
.no-touch #next_level:hover,
          #next_level:active,
.no-touch #next_level:focus,
.no-touch #enter_name:hover,
          #enter_name:active,
.no-touch #enter_name:focus {
  background-color: rgba(0, 0, 0, 1);
  color: #fff;
  border-color: #fff;
}
.no-mobile #next_level span,
.no-mobile #enter_name span {
  color: #fff;
}


/* Screen: keyboard ----------------------------------------------------------------------------- */

#screen_keyboard {
  background-color: #b0a7aa;
}
.default #screen_keyboard {
  background-image: url('images/outside2.svg');
}
.xmas    #screen_keyboard {
  background-color: #84d4ff;
  background-image: url('images/xmas/mountain.svg');
}
#keyboard_container_1 {
  width: 100%;
  height: 100%;
  display: table;
}
.xmas #keyboard_container_1 {
  background-image: url('images/xmas/snow1.png'), url('images/xmas/snow2.png'), url('images/xmas/snow3.png');
  background-repeat: repeat;
  background-position: top left;
  background-size: auto;
  -webkit-animation: snow 20s linear infinite;
  -moz-animation:    snow 20s linear infinite;
  -ms-animation:     snow 20s linear infinite;
  animation:         snow 20s linear infinite;
}
.android.xmas #keyboard_container_1 {
  -webkit-animation: none;
  -moz-animation:    none;
  -ms-animation:     none;
  animation:         none;
}

#keyboard_container_2 {
  width: 100%;
  height: 100%;
  display: table-cell;
  font-size: 0;
  line-height: 0;
  vertical-align: middle;
}

#keyboard_container_3 {
  width: 90%;
  max-width: 400px;
  height: 90%;
  max-height: 350px;
  background-color: rgba(0, 0, 0, 0.65);
  padding: 0;
  margin: 0 auto 0 auto;
  -webkit-border-radius: 5px;
  -moz-border-radius:    5px;
  border-radius:         5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}

@media only screen and (max-width: 400px) {
  #keyboard_container_3 {
    width: 100%;
    -webkit-border-radius: 0;
    -moz-border-radius:    0;
    border-radius:         0;
  }
}

@media only screen and (max-height: 400px) {
  #keyboard_container_3 {
    height: 100%;
  }
}

#keyboard_container_4 {
  width: 100%;
  height: 100%;
  padding: 4%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}

@media only screen and (max-width: 400px) {
  #keyboard_container_4 {
    padding-left:  1%;
    padding-right: 1%;
  }
}

/* Keyboard input */
#keyboard_input_container {
  width: 100%;
  display: table;
  padding: 0 0.5% 0 0.5%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}
#keyboard_input {
  width: 100%;
  height: 100%;
  display: table-cell;
  background-color: #fff;
  font-weight: bold;
  font-size: 0;
  line-height: 0;
  text-transform: uppercase;
  text-align: center;
  vertical-align: middle;
  color: #000;
  border: 1px solid #333;
  -webkit-border-radius: 5px;
  -moz-border-radius:    5px;
  border-radius:         5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}
#keyboard_input #keyboard_text {
  width: auto;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  line-height: 14px;
  margin: 0 1px 0 0;
}
#keyboard_input #keyboard_cursor {
  width: 2px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
  background-color: #000;
  -webkit-animation: cursor 1s linear infinite;
  -moz-animation:    cursor 1s linear infinite;
  -ms-animation:     cursor 1s linear infinite;
  animation:         cursor 1s linear infinite;
}

@keyframes cursor {
  0% {
    background-color: rgba(0, 0, 0, 1);
  }
  50% {
    background-color: rgba(0, 0, 0, 0);
  }
  100% {
    background-color: rgba(0, 0, 0, 1);
  }
}

/* Keyboard keys */
.keyboard_row {
  width: 100%;
  text-align: center;
}
.keyboard_space {
  width: 100%;
}

.keyboard_space {
  height: 5%;
}
#keyboard_input_container,
.keyboard_row {
  height: 16%;
}

.key_container {
  width: 100%;
  height: 100%;
  display: inline-block;
  padding: 0 0.5% 0 0.5%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}
#keyboard_row_1 .key_container {
  width: 10%;
}
#keyboard_row_2 .key_container {
  width: 11.11111111111111%;
}
#keyboard_row_3 .key_container {
  width: 14.28571428571429%;
}
#keyboard_row_4 .key_container {
  width: 33.33333333333333%;
}
.key {
  width: 100%;
  height: 100%;
  display: table;
  background-color: #666;
  background-image: linear-gradient(to bottom, #777, #666);
  font-weight: normal;
  font-size: 14px;
  line-height: 14px;
  text-transform: uppercase;
  text-shadow: 1px 1px rgba(0, 0, 0, 1);
  text-align: center;
  color: #fff;
  cursor: pointer;
  overflow: hidden;
  border: 1px solid #333;
  -webkit-border-radius: 5px;
  -moz-border-radius:    5px;
  border-radius:         5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}
.no-touch .key:hover,
          .key:active,
.no-touch .key:focus {
  background-color: #fa0;
  background-image: linear-gradient(to bottom, #fa0, #e90);
  text-shadow: 1px 1px rgba(0, 0, 0, 0.75);
}
.no-touch .xmas .key:hover,
          .xmas .key:active,
.no-touch .xmas .key:focus {
  background-color: #fb0;
  background-image: linear-gradient(to bottom, #fb0, #ea0);
}
.key span {
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}

#key_ok {
  background-color: #fa0;
  background-image: linear-gradient(to bottom, #fa0, #e90);
  font-weight: bold;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.75);
}
.xmas #key_ok {
  background-color: #fb0;
  background-image: linear-gradient(to bottom, #fb0, #ea0);
}


/* Screen: level select ------------------------------------------------------------------------- */

#screen_level_select {
  background-color: #907052;
}
.xmas #screen_level_select {
  background-color: #efd9c5;
}

#canvas_level_select {
  position: absolute;
  top: 42px;
  left: 0;
  background-color: #907052;
  background-repeat: repeat;
  background-size: 50px 50px;
  cursor: pointer;
}
.default #canvas_level_select {
  background-image: url('images/background.svg');
}
.xmas    #canvas_level_select {
  background-color: #fff;
  background-image: url('images/xmas/background.svg');
}
#canvas_level_select_top {
  position: absolute;
  top: 42px;
  left: 0px;
  cursor: pointer;
}

#level_current,
#instructions_current {
  width: 100%;
  line-height: 40px;
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: 1px 1px #000;
  text-align: center;
  color: #fff;
}

.pagination_button {
  width: 34px;
  height: 34px;
  display: block;
  position: absolute;
  top: 3px;
  background-color: #666;
  font-family: 'FontAwesome';
  font-weight: normal;
  font-size: 18px;
  line-height: 34px;
  text-shadow: 1px 1px #000;
  text-align: center;
  color: #fff;
  cursor: pointer;
  -webkit-border-radius: 5px;
  -moz-border-radius:    5px;
  border-radius:         5px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.4);
  -webkit-transition: background-color 0.2s ease 0s, text-shadow 0.2s ease 0s, color 0.2s ease 0s;
  -moz-transition:    background-color 0.2s ease 0s, text-shadow 0.2s ease 0s, color 0.2s ease 0s;
  -o-transition:      background-color 0.2s ease 0s, text-shadow 0.2s ease 0s, color 0.2s ease 0s;
  transition:         background-color 0.2s ease 0s, text-shadow 0.2s ease 0s, color 0.2s ease 0s;
}
.xmas .pagination_button {
  background-color: #7081a0;
}
.no-touch .pagination_button:hover,
          .pagination_button:active,
.no-touch .pagination_button:focus {
  background-color: #fff;
  text-shadow: 1px 1px #fff;
  color: #000;
}
          .pagination_button.disabled,
.no-touch .pagination_button.disabled:hover,
          .pagination_button.disabled:active,
.no-touch .pagination_button.disabled:focus {
  background-color: #444;
  text-shadow: 1px 1px #444;
  color: #000;
  cursor: auto;
}
          .xmas .pagination_button.disabled,
.no-touch .xmas .pagination_button.disabled:hover,
          .xmas .pagination_button.disabled:active,
.no-touch .xmas .pagination_button.disabled:focus {
  background-color: #272d38;
  text-shadow: 1px 1px #000;
  color: #7081a0;
}

#pagination_button_left_10 {
  left: 3px;
}
#pagination_button_left_10:before {
  content: '\f100';
}

#pagination_button_left_1 {
  left: 50px;
}
#pagination_button_left_1:before {
  content: '\f104';
}

#pagination_button_right_1 {
  right: 50px;
}
#pagination_button_right_1:before {
  content: '\f105';
}

#pagination_button_right_10 {
  right: 3px;
}
#pagination_button_right_10:before {
  content: '\f101';
}

#pagination_button_left {
  left: 3px;
}
#pagination_button_left:before {
  content: '\f104';
}

#pagination_button_right {
  right: 3px;
}
#pagination_button_right:before {
  content: '\f105';
}


/* Screen: instructions ------------------------------------------------------------------------- */

#screen_instructions {
  background-color: #e3b390;
}
.default #screen_instructions {
  background-image: url('images/inside.svg');
}
.xmas    #screen_instructions {
  background-color: #3a2f6e;
  background-image: url('images/xmas/night.svg');
}
#screen_instructions .screen_body {
  padding: 42px 0 82px 0;
}
.xmas #screen_instructions .screen_body {
  background-image: url('images/xmas/snow1.png'), url('images/xmas/snow2.png'), url('images/xmas/snow3.png');
  background-repeat: repeat;
  background-position: top left;
  background-size: auto;
  -webkit-animation: snow 20s linear infinite;
  -moz-animation:    snow 20s linear infinite;
  -ms-animation:     snow 20s linear infinite;
  animation:         snow 20s linear infinite;
}
.android.xmas #screen_instructions .screen_body {
  -webkit-animation: none;
  -moz-animation:    none;
  -ms-animation:     none;
  animation:         none;
}

#instructions_container_1 {
  width: 100%;
  height: 100%;
  display: table;
}
#instructions_container_2 {
  width: 100%;
  height: 100%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.instruction {
  display: none;
  position: relative;
  font-size: 0;
  line-height: 0;
}
.xmas .instruction {
  background-color: #efd9c5;
}
#canvas_instruction_1_top,
#canvas_instruction_2_top,
#canvas_instruction_3_top,
#canvas_instruction_4_top {
  position: absolute;
  top: 0;
  left: 0;
}

#instruction_text_container {
  width: 100%;
  position: absolute;
  bottom: 42px;
  left: 0;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.5);
  font-weight: bold;
  font-size: 14px;
  line-height: 20px;
  text-transform: uppercase;
  text-shadow: 1px 1px #000;
  text-align: center;
  color: #fff;
  padding: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}


/* Screen: settings ----------------------------------------------------------------------------- */

#screen_settings {
  background-color: #b0a7aa;
}
.default #screen_settings {
  background-image: url('images/outside2.svg');
}
.xmas    #screen_settings {
  background-color: #84d4ff;
  background-image: url('images/xmas/mountain.svg');
}
.xmas #screen_settings .screen_body {
  background-image: url('images/xmas/snow1.png'), url('images/xmas/snow2.png'), url('images/xmas/snow3.png');
  background-repeat: repeat;
  background-position: top left;
  background-size: auto;
  -webkit-animation: snow 20s linear infinite;
  -moz-animation:    snow 20s linear infinite;
  -ms-animation:     snow 20s linear infinite;
  animation:         snow 20s linear infinite;
}
.android.xmas #screen_settings .screen_body {
  -webkit-animation: none;
  -moz-animation:    none;
  -ms-animation:     none;
  animation:         none;
}

#settings_buttons {
  position: absolute;
  margin: 22px 0 0 0;
}
@media only screen and (orientation: landscape) {
  #settings_buttons {
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
  }
}
@media only screen and (orientation: portrait) {
  #settings_buttons {
    width: 90%;
    height: 60%;
    top: 20%;
    left: 5%;
  }
}
@media only screen and (orientation: portrait) and (min-height: 1000px) {
  #settings_buttons {
    height: 40%;
    top: 30%;
  }
}

#screen_settings .screen_body .button {
  width: 100%;
  height: 21.25%;
  display: table;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.6);
  font-weight: 700;
  text-shadow: 1px 1px #000;
  text-transform: uppercase;
  text-align: center;
  color: #fa0;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  overflow: hidden;
  border: 2px solid #ebc6ad;
  -webkit-border-radius: 10px;
  -moz-border-radius:    10px;
  border-radius:         10px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.4);
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
  -webkit-transition: background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s, box-shadow 0.2s ease 0s;
  -moz-transition:    background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s, box-shadow 0.2s ease 0s;
  -o-transition:      background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s, box-shadow 0.2s ease 0s;
  transition:         background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s, box-shadow 0.2s ease 0s;
}
.xmas #screen_settings .screen_body .button {
  background-color: rgba(0, 0, 0, 0.45);
  color: #fb0;
  border-color: #efd9c5;
}
.no-touch #screen_settings .screen_body .button:hover,
          #screen_settings .screen_body .button:active,
.no-touch #screen_settings .screen_body .button:focus {
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-color: #fff;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.6);
}
.no-touch .xmas #screen_settings .screen_body .button:hover,
          .xmas #screen_settings .screen_body .button:active,
.no-touch .xmas #screen_settings .screen_body .button:focus {
  background-color: rgba(0, 0, 0, 0.7);
}
#screen_settings .screen_body .button_text {
  display: table-cell;
  vertical-align: middle;
}
#screen_settings .screen_body .button.on  .button_text:after,
#screen_settings .screen_body .button.off .button_text:after {
  font-family: 'FontAwesome';
  font-weight: normal;
}
#screen_settings .screen_body .button.on  .button_text:after {
  color: #0c0;
  content: '\f00c';
}
#screen_settings .screen_body .button.off .button_text:after {
  color: #f00;
  content: '\f00d';
}
.no-mobile #screen_settings .screen_body .button span {
  color: #fff;
}

#screen_settings .screen_body .button_space {
  width: 100%;
  height: 5%;
}


/* Screen: languages ---------------------------------------------------------------------------- */

#screen_languages {
  background-color: #b0a7aa;
}
.default #screen_languages {
  background-image: url('images/outside2.svg');
}
.xmas    #screen_languages {
  background-color: #84d4ff;
  background-image: url('images/xmas/mountain.svg');
}
.xmas #screen_languages .screen_body {
  background-image: url('images/xmas/snow1.png'), url('images/xmas/snow2.png'), url('images/xmas/snow3.png');
  background-repeat: repeat;
  background-position: top left;
  background-size: auto;
  -webkit-animation: snow 20s linear infinite;
  -moz-animation:    snow 20s linear infinite;
  -ms-animation:     snow 20s linear infinite;
  animation:         snow 20s linear infinite;
}
.android.xmas #screen_languages .screen_body {
  -webkit-animation: none;
  -moz-animation:    none;
  -ms-animation:     none;
  animation:         none;
}

#screen_languages .screen_body .button {
  width: 100%;
  height: 100%;
  display: table;
  float: left;
  text-align: center;
  cursor: pointer;
}

@media only screen and (orientation: landscape) {
  #screen_languages .screen_body .button {
    width: 33.3333333333%;
    height: 50%;
  }
}

@media only screen and (orientation: portrait) {
  #screen_languages .screen_body .button {
    width: 50%;
    height: 33.3333333333%;
  }
}

#screen_languages .screen_body .button_container {
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
#screen_languages .screen_body .button_flag {
  width: 30%;
  height: 30%;
  display: block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  margin: 0 auto 0 auto;
}
#screen_languages .screen_body .button_text {
  width: auto;
  height: 30px;
  display: inline-block;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.5);
  font-weight: bold;
  font-size: 14px;
  line-height: 30px;
  text-transform: uppercase;
  text-shadow: 1px 1px #000;
  text-align: center;
  color: #fa0;
  padding: 0 15px 0 15px;
  border: 2px solid #ebc6ad;
  -webkit-border-radius: 30px;
  -moz-border-radius:    30px;
  border-radius:         30px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.4);
  margin: 5% auto 0 auto;
  -webkit-transition: background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s;
  -moz-transition:    background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s;
  -o-transition:      background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s;
  transition:         background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s;
}
.xmas #screen_languages .screen_body .button_text {
  color: #fb0;
  border-color: #efd9c5;
}
.no-mobile #screen_languages .screen_body .button_text span {
  color: #fff;
}
.no-touch #screen_languages .screen_body .button:hover  .button_text,
          #screen_languages .screen_body .button:active .button_text,
.no-touch #screen_languages .screen_body .button:focus  .button_text {
  background-color: rgba(0, 0, 0, 1);
  color: #fff;
  border-color: #fff;
}

@media only screen and (max-width: 400px) {
  #screen_languages .screen_body .button_flag {
    width: 50%;
    height: 50%;
  }
  #screen_languages .screen_body .button_text {
    display: none;
  }
}

@media only screen and (max-height: 300px) {
  #screen_languages .screen_body .button_flag {
    width: 50%;
    height: 50%;
  }
  #screen_languages .screen_body .button_text {
    display: none;
  }
}

#screen_languages .screen_body #button_lang_en .button_flag { background-image: url('images/flag_gb.svg'); }
#screen_languages .screen_body #button_lang_nl .button_flag { background-image: url('images/flag_nl.svg'); }
#screen_languages .screen_body #button_lang_de .button_flag { background-image: url('images/flag_de.svg'); }
#screen_languages .screen_body #button_lang_fr .button_flag { background-image: url('images/flag_fr.svg'); }
#screen_languages .screen_body #button_lang_it .button_flag { background-image: url('images/flag_it.svg'); }
#screen_languages .screen_body #button_lang_es .button_flag { background-image: url('images/flag_es.svg'); }


/* Screen: credits ------------------------------------------------------------------------------ */

#screen_credits {
  background-color: #b0a7aa;
}
.default #screen_credits {
  background-image: url('images/outside2.svg');
}
.xmas    #screen_credits {
  background-color: #3a2f6e;
  background-image: url('images/xmas/night.svg');
}

#credits_container_1 {
  width: 100%;
  height: 100%;
  display: table;
}
.xmas #credits_container_1 {
  background-image: url('images/xmas/snow1.png'), url('images/xmas/snow2.png'), url('images/xmas/snow3.png');
  background-repeat: repeat;
  background-position: top left;
  background-size: auto;
  -webkit-animation: snow 20s linear infinite;
  -moz-animation:    snow 20s linear infinite;
  -ms-animation:     snow 20s linear infinite;
  animation:         snow 20s linear infinite;
}
.android.xmas #credits_container_1 {
  -webkit-animation: none;
  -moz-animation:    none;
  -ms-animation:     none;
  animation:         none;
}
#credits_container_2 {
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}

#credits_container_3 {
  display: table;
  background-color: rgba(0, 0, 0, 0.6);
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: 1px 1px #000;
  text-align: center;
  white-space: nowrap;
  border: 2px solid #ebc6ad;
  overflow: hidden;
  -webkit-border-radius: 10px;
  -moz-border-radius:    10px;
  border-radius:         10px;
  -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:    0 0 2px 1px rgba(0, 0, 0, 0.4);
  box-shadow:         0 0 2px 1px rgba(0, 0, 0, 0.4);
  margin: 0 auto 0 auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}
.xmas #credits_container_3 {
  border-color: #efd9c5;
}
@media only screen and (orientation: landscape) {
  #credits_container_3 {
    width: 50%;
    height: 40%;
  }
}
@media only screen and (orientation: portrait) {
  #credits_container_3 {
    width: 70%;
    height: 30%;
  }
}

#credits_container_3 .credit {
  width: 100%;
  height: 100%;
  display: none;
  vertical-align: middle;
}
#credits_container_3 .role {
  color: #fa0;
}
.xmas #credits_container_3 .role {
  color: #fb0;
}
#credits_container_3 .name {
  color: #fff;
}


/* Advertisements ------------------------------------------------------------------------------- */

#screen_ad_after_title,
#screen_ad_after_level {
  text-align: center;
  cursor: pointer;
  overflow: hidden;
}

#screen_ad_after_title {
  background-color: #000;
}
#screen_ad_after_level {
  background-color: #000;
}

#screen_ad_after_title iframe,
#screen_ad_after_level iframe {
  margin: 0 auto 0 auto;
}

.close_banner_container {
  width: 60px;
  height: 60px;
  position: fixed;
  top: 0;
  right: 0;
  padding: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}
.close_banner {
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.5);
  font-family: 'FontAwesome';
  font-weight: normal;
  font-size: 22px;
  line-height: 36px;
  text-shadow: 1px 1px #000;
  text-align: center;
  color: #fff;
  cursor: pointer;
  border: 2px solid #fff;
  -webkit-border-radius: 40px;
  -moz-border-radius:    40px;
  border-radius:         40px;
  -webkit-box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:    0 0 2px 1px rgba(0, 0, 0, 0.4);
  box-shadow:         0 0 2px 1px rgba(0, 0, 0, 0.4);
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
  -webkit-transition: background-color 0.2s ease 0s;
  -moz-transition:    background-color 0.2s ease 0s;
  -o-transition:      background-color 0.2s ease 0s;
  transition:         background-color 0.2s ease 0s;
}
.close_banner:before {
  content: '\f00d';
}
.no-touch .close_banner:hover,
          .close_banner:active,
.no-touch .close_banner:focus {
  background-color: rgba(0, 0, 0, 1);
}


/* Confirm dialog ------------------------------------------------------------------------------- */

#overlay_confirm {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 40;
  background-color: rgba(0, 0, 0, 0.5);
}
#confirm_container {
  width: 100%;
  height: 100%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

#confirm_box {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 28px 25px 28px 25px;
  border: 2px solid #ebc6ad;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.4);
  -webkit-border-radius: 8px;
  -moz-border-radius:    8px;
  border-radius:         8px;
}
.xmas #confirm_box {
  border-color: #efd9c5;
}

#are_you_sure {
  font-weight: bold;
  text-transform: uppercase;
  text-shadow: 1px 1px #000;
  font-size: 14px;
  line-height: 14px;
  color: #fff;
  margin: 0 0 25px 0;
}
#yes,
#cancel {
  height: 30px;
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.5);
  font-weight: bold;
  font-size: 14px;
  line-height: 30px;
  text-transform: uppercase;
  text-shadow: 1px 1px #000;
  text-align: center;
  color: #fa0;
  cursor: pointer;
  padding: 0 15px 0 15px;
  border: 2px solid #ebc6ad;
  -webkit-border-radius: 30px;
  -moz-border-radius:    30px;
  border-radius:         30px;
  box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.4);
  margin: 0 8px 0 8px;
  -webkit-transition: background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s;
  -moz-transition:    background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s;
  -o-transition:      background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s;
  transition:         background-color 0.2s ease 0s, color 0.2s ease 0s, border-color 0.2s ease 0s;
}
.xmas #yes,
.xmas #cancel {
  color: #fb0;
  border-color: #efd9c5;
}
.no-touch #yes:hover,
          #yes:active,
.no-touch #yes:focus,
.no-touch #cancel:hover,
          #cancel:active,
.no-touch #cancel:focus {
  background-color: rgba(0, 0, 0, 1);
  color: #fff;
  border-color: #fff;
}
.no-mobile #yes    span,
.no-mobile #cancel span {
  color: #fff;
}