@CHARSET "UTF-8";

/* {{{ Global */

* {
  margin: 0;
  padding: 0;
}

/* }}} Global */

/* {{{ Tags */

html {
  width: 100%;
  height: 100%;
  font-size: 62.5%;
  overflow-y: scroll;
}

body {
  width: 100%;
  height: 100%;
  text-align: left;
  font-size: 1.2em;
  font-family: 'Lucida Grande', Meiryo, メイリオ, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
  -webkit-text-size-adjust: 100%;
}

img {
  border: none;
  vertical-align: bottom;
}

a {
  outline: none;
}

/* }}} Tags */

/* {{{ Tag classes */

input.hidden-button {
  background-color: transparent;
  border: none;
  line-height: 1px;
  font-size: 1px;
  width: 1px;
  height: 1px;
  outline: none;
}

/* }}} Tag classes */

/* {{{ Common classes */

.img-bottom {
  line-height: 0px;
  vertical-align: top;
}

.img-bottom img {
  vertical-align: top;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.clear-both {
  clear: both;
  float: none;
  width: 0;
  height: 0;
  visibility: hidden;
  display: block;
  margin: 0;
  padding: 0;
}

* html .clear-both {
  clear: both;
  width: 0;
  height: 0;
  display: none;
  margin: 0;
  padding: 0;
}

.clear {
  clear: both;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  display: inline-block;
}

* html .clearfix {
  height: 1%;
}

.clearfix {
  display: block;
}

.inline-block {
  display: inline-block;
}

.block-right {
  margin-left: auto;
}

.block-center {
  margin-right: auto;
  margin-left: auto;
}

.block-left {
  margin-right: auto;
}

.inline-left {
  text-align: left;
}

.inline-center {
  text-align: center;
}

.inline-right {
  text-align: right;
}

.inline-top {
  vertical-align: top;
}

.inline-middle {
  vertical-align: middle;
}

.inline-bottom {
  vertical-align: bottom;
}

.text-xx-large {
  font-size: 2em;
}

.text-x-large {
  font-size: 1.5em;
}

.text-large {
  font-size: 1.2em;
}

.text-small {
  font-size: .83em;
}

.text-x-small {
  font-size: .66em;
}

.text-xx-small {
  font-size: .5em;
}

.pointer {
  cursor: pointer;
}

@keyframes processing-color-anime {
  0%,100%{
    color: #a9a9a9;
  }
  50%{
    color: #696969;
  }
}

.processing {
  animation: processing-color-anime 1s linear infinite;
}

.black {
  color: #000000 !important;
}

.dark-gray {
  color: #404040 !important;
}

.gray {
  color: #808080 !important;
}

.silver {
  color: #c0c0c0 !important;
}

.white {
  color: #ffffff !important;
}

.red {
  color: #ff0000 !important;
}

.lime {
  color: #00ff00 !important;
}

.blue {
  color: #0000ff !important;
}

.maroon {
  color: #800000 !important;
}

.green {
  color: #008000 !important;
}

.navy {
  color: #000080 !important;
}

.yellow {
  color: #ffff00 !important;
}

.orange {
  color: #ff8000 !important;
}

.fuchsia {
  color: #ff00ff !important;
}

.aqua {
  color: #00ffff !important;
}

.olive {
  color: #808000 !important;
}

.purple {
  color: #800080 !important;
}

.teal {
  color: #008080 !important;
}

.pink {
  color: #ffc0cb !important;
}

.light-pink {
  color: #ffb6c1 !important;
}

.dark-pink {
  color: #ff1493 !important;
}

.bold {
  font-weight: bold !important;
}

.italic {
  font-style: italic !important;
}

.ln {
  margin-bottom: 1em;
}

.zero {
  width: 0;
  height: 0;
}

.underline {
  text-decoration: underline;
}

.debug {
  border: solid 1px #ff0000;
}

.width-full{
  width: 100%;
}

.width-half{
  width: 50%;
}

.width-third{
  width: 33.3%;
}

.width-quarter{
  width: 25%;
}

.number{
  font-family: "Helvetica", "Arial", sans-serif;
}

.monospace {
  font-family: monospace;
}

.display-none {
  display: none;
}

.font-zero {
  font-size: 0px;
  line-height: 0px;
}

.break {
  margin-bottom: 1em;
}

/* }}} Common classes */

/* {{{ BlackOut */

#mdk-black-out-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 8000;
  background-color: #000000;
  opacity: 0.7;
  -moz-opacity: 0.7;
  filter: alpha(opacity=70);
}

#mdk-black-out-iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 7999;
  background-color: #000000;
  opacity: 0;
  -moz-opacity: 0;
  filter: alpha(opacity=0);
}

#mdk-black-out {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 8001;
  height: auto;
}

#mdk-black-out-indicator {
  margin: auto;
}

/* }}} BlackOut */

/* tips */
.maf-tips-box {
  display: inline-block;
  position: relative;
  vertical-align: text-top;
  min-height: 20px;
}

.maf-tips-box:hover {
  cursor: pointer;
}

p + .maf-tips-box {
  margin-top: -7px;
}

.maf-tips {
  padding: 3px;
  border-radius: 3px;
  display: none;
  position: absolute;
  width: 130px;
  top: -28px;
  left: -60px;
  color: #fff;
  background-color: #87c209;
  text-align: center;
  font-weight: bold;
}

.maf-tips-box:hover span.maf-tips {
  display: inline-block;
}

.maf-tips::after {
  content: '';
  border-style: solid;
  border-width: 8px 5px 0 5px;
  border-color: #87c209 transparent transparent transparent;
  position: absolute;
  top: 20px;
  left: 63px;
  width: 0;
  height: 0;
}

.maf-tips.long {
  width: 210px;
  left: -105px;
}

.maf-tips.long::after {
  left: 108px;
}

.maf-tips.long300 {
  top: -30px;
  width: 310px;
  left: -155px;
}

.maf-tips.long300::after {
  top: 23px;
  left: 162px;
}

.maf-tips.long400 {
  top: -30px;
  width: 410px;
  left: -205px;
}

.maf-tips.long400::after {
  top: 23px;
  left: 207px;
}

.maf-tips.long500 {
  top: -37px;
  width: 510px;
  left: -255px;
}

.maf-tips.long500::after {
  top: 23px;
  left: 258px;
}

.maf-tips.middle {
  width: 160px;
  left: -80px;
}

.maf-tips.middle::after {
  left: 85px;
}

.maf-tips.high {
  top: -54px;
}

.maf-tips.high::after {
  top: 46px;
}