/*
 Copyright (c) 2013 The Chromium Authors. All rights reserved.
 Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file.
*/

body {
  -webkit-user-select: none;
  color: white;
  margin: 0;
  overflow: hidden;
  padding: 0;
}

div.main {
  -webkit-box-orient: vertical;
  background: -webkit-linear-gradient(#bababa, #868686) no-repeat;
  display: -webkit-box;
  left: 0;
  position: absolute;
  right: 0;
  top: -10px;
}

div.keyboard {
  -webkit-box-flex: 1;
  display: -webkit-box;
  margin: 0 auto;
  text-align: center;
}

div.rows {
  -webkit-box-flex: 1;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  margin-bottom: 5px;
  text-align: center;
}

div.row {
  -webkit-box-flex: 1;
  display: -webkit-box;
  margin-right: 5px;
  margin-top: 5px;
}

div.row > div {
  -webkit-box-flex: 1;
  display: -webkit-box;
}

.panel {
  border: 0;
  clear: both;
  margin-left: 5px;
  text-align: left;
}

.backspace > div {
  background-image: url('images/del.svg');
}

.tab > div {
  background-image: url('images/tab.svg');
}

.return > div {
  background-image: url('images/ret.svg');
}

.mic > div {
  background-image: url('images/mic.svg');
}

.button {
  background: -webkit-linear-gradient(rgb(90, 97, 111), rgb(80, 86, 98));
}
.button:active {
  background: -webkit-linear-gradient(rgb(80, 86, 98), rgb(90, 97, 111));
}

.auxiliary:active {
  background: -webkit-linear-gradient(rgb(90, 97, 111), rgb(80, 86, 98));
}

.key {
  -webkit-box-flex: 1;
  background: -webkit-linear-gradient(#fff, #cacaca);
  border: 1px solid transparent;
  border-radius: 6px;
  /* Reserving equivalent space to .key:active so
     keys don't shift when selected. */
  /* Do not use box shadow until performance improves
   * http://code.google.com/p/chromium/issues/detail?id=99045
  box-shadow: 0px 1px 1px #000;
  */
  color: #535353;
  display: -webkit-box;
  font-family: sans-serif;
  font-weight: 100;
  margin-left: 5px;
  position: relative;
}

.key > div {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}

.key:active {
  background: -webkit-linear-gradient(#d6d6d6, #acacac);
  border: 1px solid rgba(125,125,125,0.5);
  /* Do not use box shadow until performance improves
   * http://code.google.com/p/chromium/issues/detail?id=99045
  box-shadow: 0px 0px 15px #fff;
  */
}

div.moddown {
  background: -webkit-linear-gradient(#d6d6d6, #acacac);
  border-color: rgb(48, 74, 155);
}

.image-key {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 100%;
  width: 100%;
}

.text-key {
  height: 1.2em;
}


.shift > div.image-key {
  background-image: url('images/shift.svg');
}

.moddown.shift > div.image-key {
  background-image: url('images/shift-down.svg');
}

.hide > div {
  background-image: url('images/keyboard.svg');
}

.at,
.tab,
.com,
.comma,
.hide,
.mic,
.period {
  -webkit-box-flex: 1.3;
}

.symbol {
  -webkit-box-flex: 1.4;
}

.return {
  -webkit-box-flex: 1.5;
}

.backspace {
  -webkit-box-flex: 1.6;
}

.left-shift {
  -webkit-box-flex: 1.8;
}

.right-shift {
  -webkit-box-flex: 2.0;
}

.space {
  -webkit-box-flex: 4.8;
}

.bar {
  -webkit-box-flex: 0.6;
}

.nodisplay {
  display: none;
}