/**
 * Standard Hydra styles
 */

html, body {
    width: 100%;
    height: 100%;
    background-color: black;
    font-weight: bold;
    font-family: helvetica, sans-serif;
    color: white;
    margin: 0;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-align: center;
    box-pack: center;
    box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-box-orient: vertical;
    display: -webkit-box;
    display: -moz-box;
    display: box;
}

#hydra-stage {
    width: 320px;
    height: 416px;
    overflow: hidden;
    position: relative;
}

#hydra-stage * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-text-size-adjust: none;
    position: absolute;
    cursor: default;
}

#hydra-fps {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

.button {
    cursor: pointer;
}

/**
 * Game specific styles
 */

.ad-banner {
    min-width: 320px;
    min-height: 48px;
    position: relative;
}

.board {
    width: 320px;
    height: 360px;
    overflow: hidden;
    background-image: url(grass.png);
    border-top: 3px solid #996633;
}

.clock, .score {
    font-size: 18pt;
    background-color: rgba(0,0,0,0.5);
    border: 2px solid black;
    padding-left: 4px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
}

.ready, .go {
    font-weight: bold;
    -webkit-text-stroke: 1px black;
    -moz-text-stroke: 1px black;
    -ms-text-stroke: 1px black;
    -o-text-stroke: 1px black;
    text-stroke: 1px black;
}
.ready {
    font-size: 36pt;
    color: yellow;
}
.go {
    font-size: 100pt;
    color: lime;
    pointer-events: none;
}

.darkness {
    background-color: black;
    width: 320px;
    height: 416px;
}

.score {
    width: 150px;
}
.pause-button {
    width: 32px;
    height: 32px;
    background-image: url(pause.png);
}
.paused {
    font-size: 30pt;
}

.fader {
    width: 320px;
    height: 416px;
    background-color: black;
}

.clock {
    width: 60px;
    text-align: center;
}

.block0 {
    background-image: url(bug40.png);
    width: 40px;
    height: 40px;
}

.block1 {
    background-image: url(banana40.png);
    width: 40px;
    height: 40px;
}
.block2 {
    background-image: url(orange40.png);
    width: 40px;
    height: 40px;
}
.block3 {
    background-image: url(grapes40.png);
    width: 40px;
    height: 40px;
}

.floater {
    color: #0f0;
    font-size: 24pt;
    pointer-events: none;
    -webkit-text-stroke: 1px black;
    -moz-text-stroke: 1px black;
}

.menu-button {
    background: #ff5c00 url(button-gradient.png) repeat-x;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    text-shadow: -1px -2px 2px rgba(0, 0, 0, 0.5);
    border-bottom: 1px solid rgba(0, 0, 0, 0.25);
    font-size: 18pt;
    margin: 20px;
    padding: 10px 20px 11px;
}

.scene-playing {
    background-image: url(wood.png);
    width: 100%;
    height: 100%;
}

.scene-mainmenu {
   background-image: url(grass.png);
   width: 100%;
   height: 100%;
}

.menu {
    top: 220px;
    width: 320px;
}
.menu * {
    position: static !important;
}

/*.ui-attract {*/
/*    pointer-events: none;*/
/*}*/

.credits {
    position: absolute;
    left: 190px;
    top: 380px;
    white-space: nowrap;
    line-height: 32px;
    color: gray;
}
.credits.button-down {
    color: white;
}

.logo {
    background-image: url(logo.png);
    width: 320px;
    height: 413px;
    pointer-events: none;
}

.punch-button {
  background: #4162a8;
  border: 1px solid #19253f;
  /*border-radius: 5px;*/
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111;
  -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111;
  -ms-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111;
  -o-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111;
  box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111;
  color: #fff;
  font-family: "helvetica neue", helvetica, arial, sans-serif;
  font-weight: bold;
  line-height: 1;
  margin: 12px auto 10px auto;
  text-align: center;
  text-shadow: 0px -1px 1px rgba(0, 0, 0, .8);

  padding: 10px 0 12px 0;
  font-size: 24pt;
  width: 200px;
}

.punch-button.button-down {
  background: #395591;
  /*box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111;*/
  -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111;
  -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111;
  -ms-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111;
  -o-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111;
  box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111;
  margin-top: 16px;
  margin-bottom: 6px;
}

.mute-button {
    background-image: url(volume-max.png);
    width: 40px;
    height: 40px;
}

.mute-button.button-down {
    background-image: url(volume-mute.png);
}

.scene-orientation {
    width: 320px;
    height: 416px;
    background-color: rgba(0, 0, 0, 0.8);
    text-align: center;
}

.scene-orientation :first-child {
    position: static !important;
    margin-top: 100px;
}
