/* ----------
  共通
---------- */
body, textarea {
  font-size: 16px;
  font-family: IPAMonaPGothic,'IPA モナー Pゴシック',Monapo,Mona,'MS PGothic','ＭＳ Ｐゴシック',sans-serif;
  line-height: 1.2;
}
textarea {
  line-height: 1;
}
label {
  margin-right: 5px;
}
a.block-link {
  display: block;
}
.pretty-font {
  font-family: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif;
}
.push-button {
  cursor: pointer;
  border-radius: 30px;
  box-shadow: 3px 3px 3px rgba(0,0,0,.7);
}
.push-button:active {
  position: relative;
  top: 2px; left: 2px;
  box-shadow: 1px 1px 1px rgba(0,0,0,.7);
}

/* ----------
  トップ
---------- */
html, body {
  margin: 0;
  padding: 0;
}
h1 {
  margin: 0 0 20px -50px;
  border: solid #555;
  border-width: 1px 2px 3px 1px;
  padding: 10px 10px 10px 50px;
  background-image: url("imgs/title_back.gif");
}
h1 a {
  display: block;
  color: #000;
  text-decoration: none;
}
h1 a:hover {
  color: #888;
}
div#content {
  margin: 0 20px;
  padding: 20px;
  border-left: 3px dashed #ccc;
  width: 800px;
  background-color: #efefef;
  box-shadow: 0 0 8px #000;
}
div#exp {
  margin: 10px 20px;
  color: #555;
  font-size: 12px;
}
div#usage {
  position: absolute;
  display: none;
  margin: 5px;
  border: 1px solid #555;
  padding: 10px;
  width: 400px;
  background-color: #fff;
}
div#usage #code {
  margin: 2px;
  border: 1px solid #aaa;
  padding: 2px;
  font-family: monospace;
}
#how-use, #mail {
  text-decoration: underline;
  color: #00f;
  cursor: pointer;
}
#how-use:active, #mail:active {
  text-decoration: none;
  color: #f00;
}
div#usage ul {
  margin: 0; padding-left: 15px;
}
div#usage li {
  margin: 5px 0;
}
ul.new {
  margin: 0 20px; padding: 0;
  list-style-type: none;
  color: #555;
  font-size: 12px;
}
ul.new li {
  margin-left: 3.5em;
  text-indent: -3em;
}
ul.new li::before {
  content: "【new】";
  color: red;
}
div#loading {
  background-image: url("imgs/loading.gif");
  margin: 10px;
  width: 220px; height: 19px;
}
div#error_message {
  display: none;
  margin: 10px;
  border: 3px double red;
  padding: 5px;
  font-size: 12px;
}
div#error_message::before {
  content: url("imgs/error.png");
  float: left;
}
/* ----------
  入力
---------- */
div#inputs {
  margin: 10px 0 0px 30px;
  padding: 10px;
}
div#inputs table {
  padding: 10px;
  border-spacing: 1px 5px;
}
div#inputs td {
  border-bottom: 1px solid #aaa;
}
div#inputs td {
  padding: 3px;
}
div#inputs td.label {
  text-align: right;
  font-size: 14px;
  background-color: #ccc;
}
div#inputs td.label img {
  margin-right: 3px;
}
div#inputs td.label::after {
  content: "";
}
div#basic {
  float: left;
  border: 3px dotted #555;
}
div#inputs .inputExp {
  padding: 5px;
  text-align: center;
  font-weight: bold;
}
div#basic .inputExp {
  background-color: #aca;
}
textarea#origin {
  width: 150px;
  height: 50px;
  border: 1px solid red;
  border-bottom-width: 2px;
}
div#realtime {
  margin-bottom: 5px;
  font-size: 12px;
  text-align: center;
}
div.spacer {
  float: left;
  width: 20px;
}
div#advanced {
  float: left;
  border: 3px dotted #555;
  width: 460px;
}
div#advanced .inputExp {
  background-color: #363;
  color: #fff;
}
div#advanced .inputExp:hover {
  background-color: #8a8;
}
div#advancedTable {
  overflow: hidden;
  height: 1px;
}
div#clear {
  clear: left;
}
div#make {
  text-align: center;
}
input#btnMake {
  margin: 10px;
  width: 80%;
  height: 50px;
  font-weight: bold;
  font-size: 16px;
  color: #050;
  background-image: url("imgs/button0.jpg");
  border: 1px solid #aaa;
  border-radius: 10px;
}
input#btnMake:hover {
  text-decoration: underline;
}
/* ----------
  出力
---------- */
div#outputs {
  margin: 0px 0 0px 30px;
  padding: 10px;
}
div#outputs div#info {
  margin: 5px;
  font-size: 12px;
  color: #333;
}
div#outputs div#qrinfo {
  display: none;
  margin: 5px;
  font-size: 12px;
  color: #a33;
}
div#outputs textarea#output {
  width: 700px;
  height: 500px;
}
/* ----------
  フッター
---------- */
div#sketchbook {
  position: relative;
  margin: 0 auto;
  width: 500px;
  height: 64px;
  /*display: none;*/
}
div#sketch-write, div#sketch-read {
  float: left;
  height: 64px;
  text-align: center;
  line-height: 64px;
  font-weight: bold;
  color: #000;
  cursor: pointer;
}
div#sketch-write {
  margin-right: 10px;
  width: 260px;
  background-image: url("imgs/button1.jpg");
}
div#sketch-write div {
  background: url("imgs/icon_6m_64.png") no-repeat right bottom;
  padding-right: 30px
}
div#sketch-read {
  width: 230px;
  background-image: url("imgs/button2.gif");
}
div#sketch-read div {
  background: url("imgs/icon_5p_64.png") no-repeat right bottom;
  padding-right: 30px
}
div#mailform {
  position: relative;
  display: none;
}
div#footer {
  text-align: right;
  font-size: 10px;
  color: #999;
}
div#counter {
  text-align: right;
}

#author {
  margin: 5px 0;
  text-align: right;
  font-size: 12px;
}
#author a {
  color: #333;
}
#author a:hover {
  color: #555;
  text-decoration: none;
}

div#ace {
  margin: 2px;
  font-size: 13px;
}