@font-face {
    font-family: 'Buttons';
    src: url('buttons.ttf');
}

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: black;
}

body {
    background: #222;
    /*width: 480px;*/
    overflow: hidden;
    cursor: default;
}

#output {
    color: white;
    white-space: pre;
    font: 10px 'Lucida Console';
    max-height: 272px;
    overflow-y: auto;
}
#body {
    width: 480px;
    margin: 0 auto;
    box-shadow: rgba(0,0,0,0.8) 0 0 12px;
}

#touch_buttons span {
    padding: 4px;
    display: inline-block;
    opacity: 0.7;
    position: relative;
    top: -0.5em;
    left: -0.5em;
}
#touch_buttons span.pressed {
    transform: scale(1.6);
    -moz-transform: scale(1.6);
    -webkit-transform: scale(1.6);
    -ms-transform: scale(1.6);
}
#touch_buttons_font {
    color: white;
    font: 64px Buttons;
    font-size: 48px;
}

#touch_buttons {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;

    transform: scale(1,1);
    -webkit-transform: scale(1,1);

    width: 480px;
    height: 272px;
    background: transparent;
    opacity: 0.4;

    text-shadow: 0 0 0.2em #000;
    -webkit-text-shadow: 0 0 0.2em #000;
    -moz-text-shadow: 0 0 0.2em #000;
}

#touch_buttons .psp_button {
    position: absolute;
    left: 0;
    top: 0;
}

#touch_buttons #directional_pad {
    position: absolute;
    left: 10%;
    top: 35%;
    font-size: 0.8em;
}

#touch_buttons #button_pad {
    position: absolute;
    left: 85%;
    top: 70%;
    font-size: 0.7em;
}

#touch_buttons #select_start_pad {
    position: absolute;
    left: 45%;
    top: 80%;
    font-size: 0.8em;
}

#touch_buttons #lr_pad {
    position: absolute;
    left: 0%;
    top: 0%;
    width: 100%;
}

#touch_buttons .psp_button#button_up { left: 0em; top:-0.8em;  }
#touch_buttons .psp_button#button_left { left: -0.8em; top:0em; }
#touch_buttons .psp_button#button_right { left: 0.8em; top:0em; }
#touch_buttons .psp_button#button_down { left: 0em; top:0.8em; }

#touch_buttons .psp_button#button_up_left { left: -1em; top:-1em; font-size:0.8em; }
#touch_buttons .psp_button#button_up_right { left: 1em; top:-1em; font-size:0.8em; }
#touch_buttons .psp_button#button_down_left { left: -1em; top:1em; font-size:0.8em; }
#touch_buttons .psp_button#button_down_right { left: 1em; top:1em; font-size:0.8em; }

#touch_buttons .psp_button#button_triangle { left: 0em; top:-1em;  }
#touch_buttons .psp_button#button_cross { left: 0em; top:1em;  }
#touch_buttons .psp_button#button_square { left: -1em; top:0em;  }
#touch_buttons .psp_button#button_circle { left: 1em; top:0em;  }

#touch_buttons .psp_button#button_menu { left: -0.0em; top:-1em;  }
#touch_buttons .psp_button#button_select { left: -0.75em; top:0em;  }
#touch_buttons .psp_button#button_start { left: 0.75em; top:0em;  }

#touch_buttons .psp_button#button_l { left: 0em; top:0em;  }
#touch_buttons .psp_button#button_r { left: 9em; top:0em;  }


body {
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

canvas {
	image-rendering: optimizeSpeed;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: optimize-contrast;
	-ms-interpolation-mode: nearest-neighbor;
}

:-webkit-full-screen #header_info { visibility:hidden; }
:-moz-full-screen #header_info { visibility:hidden; }
:-ms-fullscreen #header_info { visibility:hidden; }
:fullscreen #header_info { visibility:hidden; }
body.fullscreen #header_info { visibility:hidden; }

ul.nav { list-style: none; padding: 0; margin: 0; }
ul.nav li {
    padding: 0;
    margin: 0;
}

.game_menu_toggler_item {
    position:relative;
    left:2em;
    transition:left 0.1s;
    transition-timing-function: ease;
}

.game_menu_toggler_item:hover {
    left:0;
    transition:left 0.25s;
    transition-timing-function: ease;
}