
th {
  font-size: 1em;
  text-align: center;
  padding: 4px 8px 2px 8px;
  background-color: #38c;
  color: #fff;
  border-radius: 10px 10px 0 0;
}

td {
  font-size: 1em;
  text-align: right;
  border:1px solid #38c;
  padding:3px 7px 2px 7px;
}

td:first-child {
  border-bottom-left-radius: 10px;
}

td:last-child {
  border-bottom-right-radius: 10px;
}

.info {
  font-size: 0.9em;
  text-align: center;
  padding: 2px 8px 4px 8px;
  background-color: #38c;
  color: #fff;
}

table {
  border:1px solid #38c;
  border-collapse: separate;
  border-radius: 10px;
  margin-bottom: 4px;
  width: 100%;
  max-width: 800px;
}

#whiteboard {
  width: 50%;
  max-width: 400px;
  float:right;
  border: 1px solid #38c;
  padding: 6px;
  border-radius: 30px;
}

.aboutheader {
  font-size: 1em;
  text-align: center;
  padding: 4px 8px 2px 8px;
  background-color: #38c;
  color: #fff;
  border-radius: 10px 0 0 0;
}

.abouttable {
  border:1px solid #38c;
  border-collapse: separate;
  border-radius: 10px 0 10px 0;
  margin-bottom: 4px;
  width: 100%;
}

.code {
  border:1px solid #38c;
  padding: 10px;
  background-color: #eee;
  border-radius: 10px;
}

.plotheader {
  border:1px solid #38c;
  padding: 2px 10px 2px 10px;
  background-color: #38c;
  border-radius: 10px 10px 0 0;
  color: #fff;
}

.plotcode {
  border:1px solid #38c;
  margin-top: 2px;
  padding: 10px;
  background-color: #eee;
  border-radius: 0 10px 10px 10px;
}

figure.diagram {
  width: 35%;
  max-width: 400px;
  border: 1px solid #38c;
  margin: 0 8px 0 8px;
  padding: 2px 8px 2px 2px;
  border-radius: 8px;
}

figure.diagram img {
  width: 100%;
  border: 1px solid #38c;
  padding: 2px 2px 2px 2px;
  border-radius: 7px 7px 0 0;
  margin: 0px;
}

figure.diagram figcaption {
  background-color: #e9e9e9; color: #444;
  font-style: italic;
  font-size: 80%;
  width: 100%;
  padding: 2px;
  border: 1px solid #ddd;
  border-radius: 0 0 6px 6px;
  margin: 0px;
}
