/* main document styles */
@font-face {
  font-family:'FontAwesomeWeb';
  src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), 
      url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), 
      url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), 
      url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
      url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight:normal;
  font-style:normal;
}

.fa {
  display:inline-block;
  font:normal normal normal 14px/1 FontAwesomeWeb, FontAwesome;
  font-size:inherit;
  text-rendering:auto;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a, a:visited {
  color:#36C;
  text-decoration:none;
  outline:none;
}

a:hover { 
  color:#14A; 
  text-decoration:underline;
}

a:focus {
  color:#028;
  text-decoration:underline;
}

header {
  color:#FFF;
  background-color:#36C;
  text-align:center;
  padding:15px 15px 15px 15px;
  position:relative;
  overflow:hidden;
}

header h1 { font-size:32px; }

a#fork-me {
  color:#FFF;
  background:#333;
  font-size:16px;
  font-weight:bold;
  text-align:center;
  text-transform:uppercase;
  text-decoration:none;
  line-height:30px;
  height:30px;
  width:200px;
  transform:rotate(45deg);
  position:absolute;
  right:-55px;
  top:30px;
  transition-property:color, background;
  transition-duration:300ms;
}

a#fork-me:hover, a#fork-me:focus {
  color:#333;
  background:#FFF;
}

body {
  color:#333;
  background:#FFF;
  font-size:13px;
  font-family:Arial, sans-serif;
  padding:0;
  margin:0;
  display:flex;
  min-height:100vh;
  flex-direction:column;
}

p { font-size:14px; }

.center { text-align:center; }

#content {
  flex:1 0 auto;
}

.content-block {
  background-color:#EEE;
  border:1px solid #CCC;
  border-top:none;
  border-bottom:none;
  max-width:1000px;
  margin:0 auto;
  padding:30px;
}

.title {
  color:#36C;
  font-size:20px;
  border-bottom:2px solid #36C;
  padding-bottom:3px;
}

button {
  color:#FFF;
  background-color:#36C;
  font-size:13px;
  text-decoration:none;
  border:none;
  font-weight:bold;
  display:inline-block;
  padding:6px 12px;
  margin:3px;
  cursor:pointer;
  outline:none;
  -webkit-touch-callout:none;
    -webkit-user-select:none;
     -khtml-user-select:none;
       -moz-user-select:none;
        -ms-user-select:none;
            user-select:none;
}

button:hover { background-color:#25B; }
button:focus { background-color:#14A; }

/* button icons */
button .fa {
  font-size:18px;
  vertical-align:-2px;
  margin-right:6px;
}


/* kanji canvas styles */
.kanji-canvas-container {
  text-align:center;
}

.kanji-canvas {
  background-color:#FFF;
  border:1px solid #333;
  outline:none;
}
.kanji-canvas:focus { border-color:#36C; }

.kanji-canvas-controls {
  font-size:0;
  margin:5px 0;
}

.kanji-canvas-candidates:empty { visibility:hidden; }
.kanji-canvas-candidates {
  font-size:32px;
  background-color:#FFF;
  border:1px solid #CCC;
  box-sizing:border-box;
  display:inline-block;
  padding:5px 10px;
  min-height:60px;
}