/* Copyright (C) 2007 HeartRails Inc. All Rights Reserved. */

* {
  font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
  font-size: small;
  font-style: normal;
  font-weight: normal;
  line-height: 150%;
  margin: 0px;
  padding: 0px;
}

img {
  border: 0px none #ffffff;
}

h1 {
  background-color: #000000;
  color: #ffffff;
  height: 30px;
}

h1 a {
  color: #ffffff;
}

span.heading-left {
  float: left;
  font-weight: bold;
  padding: 5px 10px;
  text-align: left;
}

span.heading-left a {
  font-weight: bold;
}

span.heading-right {
  float: right;
  font-weight: bold;
  padding: 5px 10px;
  text-align: right;
}

span.heading-right a {
  font-weight: bold;
}

a#top {
  text-decoration: none;
}

div#footer {
  padding: 20px 0px 0px;
}

div#footer div {
  background-color: #000000;
  color: #ffffff;
  padding: 5px 0px;
  text-align: center;
  width: 100%;
}

div#footer p {
  font-weight: bold;
  padding: 2px;
}

div#footer a {
  color: #ffffff;
  font-weight: bold;
}

div#main,div#main_2nd {
  margin: 0px auto;
  text-align: left;
  width: 640px;
}

div#main p {
  text-indent: 1em;
}

div#main_2nd p {
  text-indent: 1em;
}

p.sample_url {
  margin: 1em 0em;
}

p.api_url {
  text-align: center;
  font-weight: bold;
  margin: 0em;
}

div#graph {
  margin: 0px auto;
  padding: 20px 0px 0px;
  text-align: center;
  width: 800px;
}

div#error {
  margin: 2em auto;
  border: 2px solid #f00;
  text-align: left;
  width: 400px;
}

div#error h3 {
  margin-left: 2em;
  color: #f00;
  text-decoration: underline;
}

div#error ul li {
  margin-left: 4em;
  color: #f00;
}

p#sample {
  margin: 1em;
  text-align: center;
}

p#drawing,p#embed {
  height: 2em;
  margin: 1em 1em 0em 1em;
}

input#embed_code {
  background-color: #ddd;
}

div#logo {
  padding: 20px 0px 0px;
  text-align: center;
}

div#container {
  width: 100%;
}

div#content {
  clear: both;
  text-align: center;
}

div.heading {
  border-bottom: 1px solid #e9e9e9;
  margin: 0px 0px 5px;
  padding: 20px 0px 0px;
}

div.heading table {
  width: 100%;
}

div.heading th {
  color: #676767;
  text-align: left;
}

div.heading td {
  color: #676767;
  text-align: right;
}

table.condition {
  width: 640px;
}

table.condition th {
  background-color: #fbfbff;
  border-left: 3px solid #f0f0ff;
  border-right: 3px solid #f0f0ff;
  padding: 0px 10px;
  text-align: center;
}

table.condition td {
  padding: 10px;
}

/* 文章欄を行の残り幅いっぱいに広げる（詳細モードで色欄が出るとその分縮む） */
table.condition div.item {
  display: flex;
  align-items: center;
  gap: 4px;
}

table.condition div.item input.item-text {
  flex: 1 1 0;
  width: 0;
}

/* 入力欄の size で列幅が決まり見出しが折り返さないよう、欄はセル幅に合わせる */
table.condition input.title-text {
  width: 100%;
  box-sizing: border-box;
}

table.condition th,
table.condition td.nowrap {
  white-space: nowrap;
}

/* 項目表の見出し列は内容幅に固定し、残りを入力欄に回す */
table.condition.items th {
  width: 1%;
}

table.tag_help {
  border-collapse: collapse;
  border: 1px solid #aaa;
  margin: 1em 4em;
}

table.tag_help th {
  background-color: #eee;
  border-right: 1px dotted #888;
  padding: 0em 1em;
}

table.tag_help td {
  padding: 0em 1em;
}

p.button {
  text-align: center;
  padding: 10px 0px;
}

li {
  margin-left: 2em;
}

.fieldWithErrors input { border: 2px solid #f00; }
.fieldWithErrors select { border: 2px solid #f00; }