@charset "UTF-8";

body {
  background-color: #678353;
  margin: 0px;
  padding: 0px;
  font-family: Arial, Verdana, sans-serif;
  font-size: 100%;
  /* test commit */
}

#main {
  width: 750px;
  margin: 0px auto 0px auto;
  padding: 10px 0px;
}

#header {
  background: #ffffff url('img/wavehead.png') no-repeat left top;
  height: 135px;
}

#leader {
  background: #ffffff;
  height: 90px;
  text-align: center;
  margin: 0px;
  padding: 5px 0px 0px 0px;
}

#content {
  background: #ffffff url('img/wavefoot.png') no-repeat left bottom;
  padding: 0px 15px 60px 15px;
}  

#footer {
  color: #f0f0f0;
  text-align: right;
  font-size: 70%;
  margin: 0px;
  padding: 0px 130px 0px 0px;
}

#header a, #footer a {
  color: #f0f0f0;
  text-decoration: none;
}

#header a:hover, #footer a:hover {
  text-decoration: underline;
}

#header img {
  border: none;
  display: block;
  float: left;
  margin: 0px;
  padding: 0px;
}

#header ul {
  margin: 30px 0px 0px 45px;
  padding: 0px;
  list-style: none;
  text-indent: 0px;
  display: block;
  float: left;
}

#header li {
  display: block;
  float: left;
  margin: 0px;
  padding: 5px;
  color: #f0f0f0;
  font-size: 100%;
}

#header li.active {
  background-color: #5E7040;
}

a {
  color: #5E7040;
}

h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 160%;
  font-weight: bold;
  color: #5E7040;
  display: block;
  text-align: center;
  margin: 15px;
  padding: 0px;
}

h2 {
  font-size: 100%;
  font-weight: normal;
  color: #000000;
  display: block;
  text-align: left;
  margin: 0px 3px 3px 3px;
  padding: 0px;
}

#question {
  background: #eeeeee;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  height: 100px;
  border: solid 1px #000000;
}

#consult, #newq {
  margin-top: 10px;
}

#focus, #midput, #output {
  display: none;
}

dt {
  font-weight: bold;
  font-size: 100%;
  margin: 15px 5px 5px 5px;
  padding: 0px;
}

dd {
  font-weight: normal;
  margin: 0px 0px 10px 25px;
  padding: 0px;
}

#hextable {
  display: block;
  margin: 0px 10px 0px 15px;
  padding: 0px;
  border: none;
  table-layout: fixed;
  border-collapse: collapse;
}

#hextable th {
  text-align: center;
  width: 75px;
  height: 60px;
  font-weight: bold;
  font-size: 90%;
  border: none;
  border-bottom: solid 1px black;
  margin: 0px;
  padding: 0px;
}

#hextable td {
  text-align: center;
  width: 75px;
  height: 60px;
  border: none;
  margin: 0px;
  padding: 0px;
}

#hextable th img {
  width: 44px;
  height: 20px;
  display: block;
  margin: 3px auto 0px auto;
}

#hextable .even td {
  background: #e0f0d0;
}

#hextable .even th, #hextable .odd th {
  border-bottom: none;
  border-right: solid 1px black;
}

#hextable th.legend {
  border-bottom: none;
}

#hexmain {
  font-size: 100%;
  width: 480px;
  height: 6em;
  margin: 0px auto 0px auto;
  padding: 10px;
  text-align: left;
  border-top: solid 1px #000000;
  border-bottom: solid 1px #000000;
}

#symbol {
  display: block;
  float: left;
  width: 44px;
  height: 44px;
  margin: 0px;
  padding: 0px;
}

img.trigram {
  width: 44px;
  height: 20px;
  display: block;
  border: none;
}

#symbol img.trigram {
  margin: 4px 0px 0px 0px;
  padding: 0px;
}

#output img.trigram {
  margin: 0px;
  padding: 0px;
}

#resultflav {
  display: block;
  margin: 4px auto 0px auto;
  padding: 5px 0px 5px 0px;
  border: none;
}

#parts {
  font-size: 80%;
  font-weight: normal;
  width: 65px;
  display: block;
  float: left;
  margin: 2px 0px 0px 0px;
  padding: 0px;
  text-align: center;
}

#desc {
  font-size: 100%;
  font-weight: normal;
  display: block;
  float: left;
  margin: 0px;
  padding: 0px;
  width: 360px;
}

#hexmain h2 {
  float: left;
  width: 360px;
  margin-bottom: 5px;
}

#flavour {
  display: block;
  height: 180px;
  clear: both;
  text-align: center;
  margin: 0px 0px 0px 0px;
  padding: 10px;
}

#pager {
  display: block;
  margin: 10px auto 0px auto;
  text-align: center;
}

#pager span {
  padding: 5px 10px 5px 10px;
  margin: 0px;
  color: #c0c0c0;
  border: solid 1px #c0c0c0;
}

#pager a {
  text-decoration: none;
}

#pager a span {
  color: #5E7040;
  border: solid 1px #5E7040;
}

#coins {
  width: 500px;
  margin: 0px auto 0px auto;
  padding: 0px;
  text-align: center;
}

#lines {
  width: 236px;
  margin: 0px auto 0px auto;
  padding: 5px 0px 0px 0px;
  text-align: center;
  border-top: 1px solid #000000;
}

#upperlines {
  width: 100px;
  margin: 0px;
  padding: 0px 5px 5px 5px;
  text-align: center;
  float: left;
  font-size: 90%;
}

#lowerlines {
  width: 100px;
  margin: 0px;
  padding: 0px 5px 5px 5px;
  text-align: center;
  float: left;
  font-size: 90%;
}

img.coin {
  width: 100px;
  height: 100px;
  padding: 0px;
  margin: 10px;
}

img.line {
  width: 44px;
  height: 8px;
  display: block;
  padding: 0px;
  margin: 2px auto 0px auto;
}

#focus {
  margin: 10px 0px 5px 0px;
}

#output {
  text-align: center;
}

div.result_code {
  overflow: scroll;
  background: #eeeeee;
  width: 75%;
  height: 250px;
  border: solid 1px black;
  margin: 0px auto 10px auto;
  text-align: left;
}

div.result_code p {
  font-family: monospace;
}