@import "reset.css";

/* main */

html,
body,
#contents {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  font-family: 'Helvetica', Arial;
  color: #eee;
}

a {
  color: #fff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

#contents {
  position: absolute;
  background: #222;
}

/* header */

#header {
  position: absolute;
  z-index: 150;
  top: 0;
  left: 0;
  height: 44px;
  width: 100%;
  background: #222;
  box-shadow: inset 0 0 5px #000;
  display: none;
}

#header h1 {
  font-size: 1.6em;
  padding: 0.25em;
}

/* controls */
#controls {
  position: absolute;
  z-index: 99;
  bottom: 1em;
  right: 0;
  background: rgba(0, 0, 0, 0.2);
  height: 44px;
  width: 100%;
}

#controls a {
  font-size: 36px;
}

/* footer */
#footer {
  position: absolute;
  z-index: 160;
  bottom: 0;
  right: 0;
  height: 1em;
  color: #666;
  text-align: right;
  padding: 0 0.5em 0.5em 0;
  display: none;
}

#footer a {
  color: #999;
}

/* keyboard */
#overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 105;
  background: rgba(0,0,0,0.5);
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
#keyboard {
  background-image: url(../images/keyboard.svg);
  background-repeat: no-repeat;
  background-size: contain;
  width: 500px /* 315px */ ;
  height: 308px /* 194px */ ;
  z-index: 110;
  top: 50%;
  left: 50%;
  position: absolute;
  margin-top: -154px;
  margin-left: -250px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
#keyboard span {
  display: block;
  position: absolute;
  font-size: 18px;
}
#keyboard .keySpace {
  text-align: right;
  bottom: -2%;
  right: 53%;
  width: 47%;
}
#keyboard .keyUp {
  text-align: right;
  top: -3%;
  right: 17%;
  width: 83%;
}
#keyboard .keyDown {
  text-align: right;
  bottom: -2%;
  right: 17%;
  width: 83%;
}
.showHelp {
}
.hideHelp #overlay,
.hideHelp #keyboard {
  opacity:0;
}

/* contents */
#contents .color {
  height: 100%;
  right: 0;
  top: 0;
  position: absolute;
  overflow: hidden;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  box-shadow: 0 1px 0 red;
}

#contents #color-1 {
  left: 0;
}

/* 2 colors */
#contents.colors-2 .color {
  width: 50%;
}
#contents.colors-2 #color-1 {
  right: 50%;
}
#contents.colors-2 #color-2 {
  right: 0;
}
#contents.colors-2 #color-3,
#contents.colors-2 #color-4,
#contents.colors-2 #color-5,
#contents.colors-2 #color-6,
#contents.colors-2 #color-7,
#contents.colors-2 #color-8,
#contents.colors-2 #color-9,
#contents.colors-2 #color-10 {
  right: 0;
  width: 0;
  opacity: 0;
}

/* 3 colors */
#contents.colors-3 .color {
  width: 33.33333333333333333333333333333333%;
}
#contents.colors-3 #color-1 {
  right: 66.6666666666666666666666666666666%;
}
#contents.colors-3 #color-2 {
  right: 33.33333333333333333333333333333333%;
}
#contents.colors-3 #color-3 {
  right:0;
}
#contents.colors-3 #color-4,
#contents.colors-3 #color-5,
#contents.colors-3 #color-6,
#contents.colors-3 #color-7,
#contents.colors-3 #color-8,
#contents.colors-3 #color-9,
#contents.colors-3 #color-10 {
  right: 0;
  width: 0;
  opacity: 0;
}

/* 4 colors */
#contents.colors-4 .color {
  width: 25%;
}
#contents.colors-4 #color-1 {
  right: 75%;
}
#contents.colors-4 #color-2 {
  right: 50%;
}
#contents.colors-4 #color-3 {
  right: 25%;
}
#contents.colors-4 #color-4 {
  right: 0;
}
#contents.colors-4 #color-5,
#contents.colors-4 #color-6,
#contents.colors-4 #color-7,
#contents.colors-4 #color-8,
#contents.colors-4 #color-9,
#contents.colors-4 #color-10 {
  right: 0;
  width: 0;
  opacity: 0;
}

/* 5 colors */
#contents.colors-5 .color {
  width: 20%;
}
#contents.colors-5 #color-1 {
  right: 80%;
}
#contents.colors-5 #color-2 {
  right: 60%;
}
#contents.colors-5 #color-3 {
  right: 40%;
}
#contents.colors-5 #color-4 {
  right: 20%;
}
#contents.colors-5 #color-5 {
  right: 0;
}
#contents.colors-5 #color-6,
#contents.colors-5 #color-7,
#contents.colors-5 #color-8,
#contents.colors-5 #color-9,
#contents.colors-5 #color-10 {
  right: 0;
  width: 0;
  opacity: 0;
}

/* 6 colors */
#contents.colors-6 .color {
  width: 16.6666666666666666666666666666666%;
}
#contents.colors-6 #color-1 {
  right: 83.3333333333333333333333333333333%;
}
#contents.colors-6 #color-2 {
  right: 66.6666666666666666666666666666666%;
}
#contents.colors-6 #color-3 {
  right: 50%;
}
#contents.colors-6 #color-4 {
  right: 33.3333333333333333333333333333333%;
}
#contents.colors-6 #color-5 {
  right: 16.6666666666666666666666666666666%;
}
#contents.colors-6 #color-6 {
  right: 0;
}
#contents.colors-6 #color-7,
#contents.colors-6 #color-8,
#contents.colors-6 #color-9,
#contents.colors-6 #color-10 {
  right: 0;
  width: 0;
  opacity: 0;
}

/* 7 colors */
#contents.colors-7 .color {
  width: 14.28571428571429%;
}
#contents.colors-7 #color-1 {
  right: 85.71428571428571%;
}
#contents.colors-7 #color-2 {
  right: 71.42857142857145%;
}
#contents.colors-7 #color-3 {
  right: 57.14285714285716%;
}
#contents.colors-7 #color-4 {
  right: 42.85714285714287%;
}
#contents.colors-7 #color-5 {
  right: 28.57142857142858%;
}
#contents.colors-7 #color-6 {
  right: 14.28571428571429%;
}
#contents.colors-7 #color-7 {
  right: 0%
}
#contents.colors-7 #color-8,
#contents.colors-7 #color-9,
#contents.colors-7 #color-10 {
  right: 0;
  width: 0;
  opacity: 0;
}

/* 8 colors */
#contents.colors-8 .color {
  width: 12.5%;
}
#contents.colors-8 #color-1 {
  right: 87.5%;
}
#contents.colors-8 #color-2 {
  right: 75%;
}
#contents.colors-8 #color-3 {
  right: 62.5%;
}
#contents.colors-8 #color-4 {
  right: 50%;
}
#contents.colors-8 #color-5 {
  right: 37.5%;
}
#contents.colors-8 #color-6 {
  right: 25%;
}
#contents.colors-8 #color-7 {
  right: 12.5%;
}
#contents.colors-8 #color-8 {
  right: 0;
}
#contents.colors-8 #color-9,
#contents.colors-8 #color-10 {
  right: 0;
  width: 0;
  opacity: 0;
}

/* 9 colors */
#contents.colors-9 .color {
  width: 11.1111111111111111111111111%;
}
#contents.colors-9 #color-1 {
  right: 88.88888888888888888888888888%;
}
#contents.colors-9 #color-2 {
  right: 77.77777777777777777777777777%;
}
#contents.colors-9 #color-3 {
  right: 66.66666666666666666666666666%;
}
#contents.colors-9 #color-4 {
  right: 55.55555555555555555555555555%;
}
#contents.colors-9 #color-5 {
  right: 44.44444444444444444444444444%;
}
#contents.colors-9 #color-6 {
  right: 33.33333333333333333333333333%;
}
#contents.colors-9 #color-7 {
  right: 22.22222222222222222222222222%;
}
#contents.colors-9 #color-8 {
  right: 11.11111111111111111111111111%;
}
#contents.colors-9 #color-9 {
  right: 0;
}
#contents.colors-9 #color-10 {
  right: 0;
  width: 0;
  opacity: 0;
}

/* 10 colors */
#contents.colors-10 .color {
  width: 10%;
}
#contents.colors-10 #color-1 {
  right: 90%;
}
#contents.colors-10 #color-2 {
  right: 80%;
}
#contents.colors-10 #color-3 {
  right: 70%;
}
#contents.colors-10 #color-4 {
  right: 60%;
}
#contents.colors-10 #color-5 {
  right: 50%;
}
#contents.colors-10 #color-6 {
  right: 40%;
}
#contents.colors-10 #color-7 {
  right: 30%;
}
#contents.colors-10 #color-8 {
  right: 20%;
}
#contents.colors-10 #color-9 {
  right: 10%;
}
#contents.colors-10 #color-10 {
  right: 0;
}



/* Landscape phones and down */
@media (max-width: 480px) {
  /* */
}

/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
  #keyboard,
  #overlay {
    display: none;
  }
  #touchMenu {
    position: absolute;
    z-index: 120;
    bottom: 2em;
    left: 0;
    color: #666;
    text-align: right;
    width: 100%;
  }
  #touchMenu li {
    float: left;
  }
  #touchMenu .touchNew {
    width: 50%;
  }
  #touchMenu .touchLess,
  #touchMenu .touchMore {
    width: 25%;
  }
  #touchMenu li a {
    display: block;
    background: red;
    text-align: center;
    margin: 0 10px;
    background: rgba(0,0,0,0.7);
    font-size: 36px;
    border-radius: 20px;
    padding: 20px 0;
    text-decoration: none;
  }
  #touchMenu li a:active {
    background: rgba(0,0,0,0.9);
  }
}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
  /* */
}

/* Large desktop */
@media (min-width: 1200px) {
  #keyboard {
    display: block;
  }
}