@charset "UTF-8";
head, body {
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "Exo";
  background-color: #ecf0f1;
  min-width: 1100px; }

@font-face {
  font-family: "Bellota";
  src: url("../font/bellota-regular.otf"); }
@font-face {
  font-family: "Franchise";
  src: url("../font/franchise-free-bold.otf"); }
@font-face {
  font-family: "Onramp";
  src: url("../font/onramp.ttf"); }
@font-face {
  font-family: "Exo";
  src: url("../font/exo-regular.otf"); }
header {
  width: 100%;
  font-family: "Exo"; }
  header #title {
    text-align: center;
    font-size: 3rem;
    margin-bottom: 1%; }
  header #home_msg {
    text-align: center;
    margin-bottom: 2%;
    font-size: 1.2em; }

#container {
  width: 100%;
  height: 100%; }

.keyboard {
  display: inline;
  text-align: left;
  width: 55%;
  height: 100%;
  font-size: 1.1rem; }
  .keyboard .arrow, .keyboard .numpad, .keyboard .arrow_home, .keyboard .main, .keyboard .result {
    display: inline-block; }
  .keyboard .kb_up, .keyboard .main {
    margin: 0.5% 1%; }
  .keyboard .numpad, .keyboard .output {
    margin-left: 4%; }
  .keyboard table td {
    text-align: center;
    width: 50px;
    height: 50px;
    border: solid 1px black;
    cursor: pointer;
    background-color: #0072E3;
    color: #EEEEEE; }
    .keyboard table td:hover {
      background-color: #FF2D2D; }
    .keyboard table td span {
      display: none; }
  .keyboard .kb_up {
    text-align: center;
    height: 55%;
    width: 99%; }
  .keyboard .kb_down {
    text-align: center;
    width: 100%; }
    .keyboard .kb_down .main table {
      border-spacing: 2px 1px;
      width: 700px; }
      .keyboard .kb_down .main table #space {
        width: 318.18182px; }
  .keyboard .empty {
    border: none;
    background-color: #ecf0f1;
    cursor: default; }
    .keyboard .empty:hover {
      background-color: #ecf0f1;
      cursor: default; }
  .keyboard .output {
    display: inline-block;
    width: 50%; }
    .keyboard .output span {
      float: left;
      display: block;
      width: 65%;
      text-align: left;
      margin: 1%;
      margin-left: 4%;
      font-size: 1.1em; }
    .keyboard .output .span-btn {
      width: 22%;
      text-align: center;
      float: right;
      border: solid 1px black;
      padding: 0.5% 0;
      cursor: pointer;
      background-color: #bdc3c7;
      margin-right: 4.6%; }
      .keyboard .output .span-btn:active {
        position: relative;
        top: 1px;
        left: 1px; }
    .keyboard .output #reset {
      width: 22%;
      float: left;
      margin-left: 4.6%;
      margin-right: 0; }
    .keyboard .output .result {
      width: 90%;
      height: 250px;
      background-color: grey;
      border: solid 1px black;
      margin-bottom: 0.5%;
      margin-left: 0;
      color: #ffffff;
      cursor: default; }
      .keyboard .output .result:focus {
        outline: none; }
  .keyboard .savedKey {
    color: red; }

@media (min-width: 1500px) {
  .kb_down {
    width: 50% !important;
    float: left;
    margin-top: 5%; } }
#menu {
  display: inline-block; }
  #menu .img-list {
    min-width: 200px;
    max-width: 85%;
    margin: 0 auto; }
  #menu input + label > img {
    height: 112px;
    display: table;
    cursor: pointer;
    box-sizing: border-box;
    border: solid 2px lightgray;
    opacity: 0.7; }
  #menu img {
    /*http://stackoverflow.com/a/17945428/3560404 */
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%);
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.7)), color-stop(100%, rgba(255, 255, 255, 0.7)));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%);
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.7) 100%);
    -ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=25)";
    /* Hack IE8 */
    filter: alpha(opacity=25);
    /* Hack IE 5-7 */
    -webkit-transition: opacity 0.5s ease-in-out;
    /* transition pour Chrome et Safari */
    -moz-transition: opacity 0.5s ease-in-out;
    /* transition pour Firefox */
    -o-transition: opacity 0.5s ease-in-out;
    /* transition pour Opéra */
    transition: opacity 0.5s ease-in-out; }
  #menu input {
    display: none; }
    #menu input + label > img:hover {
      border: solid 2px #7f8c8d;
      opacity: 0.8;
      /* opacite au survol */
      -ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=90)";
      /* Hack IE 8 */
      filter: alpha(opacity=90);
      /* Hack IE 5-7 */
      background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
      background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(100%, rgba(255, 255, 255, 0.1)));
      background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
      background: -o-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
      background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%); }
    #menu input:checked + label > img {
      border: solid 2px #0066CC;
      opacity: 1;
      /* opacite au survol */
      -ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=90)";
      /* Hack IE 8 */
      filter: alpha(opacity=90);
      /* Hack IE 5-7 */
      background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);
      background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
      background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(100%, rgba(255, 255, 255, 0.1)));
      background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
      background: -o-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
      background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%);
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.1) 100%)}
  #menu ul {
    list-style-type: none; }
  #menu li {
    display: inline-block; }
  #menu .img-list {
    text-align: center; }
  #menu form {
    width: auto; }
  #menu span, #menu p {
    margin-left: 5%;
    font-size: 1.2em; }
  #menu #selectedkey {
    margin: 0; }
  #menu #selectdiv {
    width: 65%;
    display: inline-block; }
  #menu #resetdiv {
    display: inline-block; }
  #menu .toggle-btn {
    width: 100%;
    margin-bottom: 1%; }
  #menu #customText span, #menu #customText #customTextArea {
    display: inline;
    vertical-align: middle; }

@media (min-width: 1500px) {
  #menu {
    width: 50%;
    float: right; } }
footer {
  width: 100%;
  text-align: center;
  margin: 3% 0;
  font-size: 1.15em; }

/*# sourceMappingURL=main.css.map */