body {
  margin: 0;
  padding: 0;

  font-family: sans-serif;
}

header {
  background-color: rgb(39, 40, 54);
  color: #fff;

  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3rem;
}

header h1 {
  height: 3rem;
  line-height: 3rem;
  font-size: 16pt;
  font-weight: normal;

  margin: 0;
  padding: 0 1rem;

  float: left;
}

header h1 img {
  display: inline-block;

  height: 2rem;
  vertical-align: middle;
  margin-right: 4pt;
}

header h1 a {
  color: #ffffff;
  text-decoration: none;
}

header h1 a:hover {
  text-decoration: underline;
}

header #header-links {
  height: 3rem;
  line-height: 3rem;

  float: right;
  margin-right: 1rem;
}

#header-links form {
  display: inline-block;
  margin-left: 4pt;
}

#header-links input {
  box-sizing: border-box;
  border-radius: 4pt;
  border-style: none;

  height: 24px;
  line-height: 24px;
  padding: 0 4pt;
}

#header-links input[type=search] {
  background-color: #fff;
}

#header-links input[type=submit] {
  background-color: #ddd;
  cursor: pointer;
}

#header-links input[type=submit]:hover {
  background-color: #eee;
}


nav {
  box-sizing: border-box;
  position: fixed;

  top: 3rem;
  left: 0;
  width: 2.5in;
  bottom: 0;

  background-color: #aac;

  padding: 8pt 6pt;
  line-height: 150%;

  overflow-y: auto;
}

nav > .category {
  font-weight: bold;
  padding-right: 6pt;
}

nav > ul {
  list-style: none;
/*  margin-bottom: 6pt;*/
  margin: 0;
  padding: 0;
}

nav > ul + ul {
  margin-top: 6pt;
}

nav > ul > li {
  border-radius: 6pt;
  display: block;
  padding: 0 6pt;
}

nav a {
  color: #444;
  display: block;
  text-decoration: none;
}

nav a:hover {
  color: #222;
}

nav li:hover {
  background-color: #88a;
  color: rgb(39, 40, 54);
}

nav .actions a {
  float: right;
  display: none;
  padding-left: 4pt;
}

nav li:hover > .actions a,
nav > .category > .actions a {
  display: block;
}

nav .actions img {
  vertical-align: middle;
}


content {
  position: fixed;

  top: 3rem;
  left: 2.5in;
  right: 0;
  bottom: 0;

  padding: 1rem;
  overflow: scroll;
}

content h1 {
  color: #48f;
  font-weight: normal;

  margin-top: 6pt;
  padding: 0 1em 0 0;
}

content h1 > a {
  color: inherit;
  text-decoration: none;
}

content h1 > a:hover {
  color: inherit;
  text-decoration: underline;
}

content h1 + .byline {
  margin-top: -1rem;
  margin-bottom: 1rem;
}

content .page-actions {
  float: right;
}

content .page-actions > * {
  display: inline-block;
  background-color: #aac;
  border-style: none;
  border-radius: 4pt;
  color: #444;
  cursor: pointer;

  height: 1.75em;
  line-height: 1.75em;
  padding: 0pt 4pt;

  font-size: 12pt;
  font-weight: normal;
  text-decoration: none;
}

content .page-actions > label {
  background-color: #ccc;
}

content .page-actions > .inactive {
  background-color: #ccc;
  color: #888;
}

content .page-actions > *:hover {
  background-color: #88a;
}

content .page-actions > .inactive:hover {
  background-color: #ccc; /* No change! */
}

@keyframes page-actions-flash {
  from {background: #445;}
  to   {background: #88a;}
}

content .page-actions > .flash {
  animation: page-actions-flash 0.3s ease-in-out 0s;
}

#messages {
  position: fixed;

  right: 1em;
  bottom: 0;
}

#messages li {
  background-color: #ddd;
  border: 1px solid #ccc;

  border-radius: 4pt;
  box-shadow: 0px 1px 4px 3px rgba(0, 0, 0, 0.2);;

  list-style: none;
  padding: 2pt 4pt;
  margin-top: 6pt;
}

#messages li.message {
  background-color: #ccf;
  border: 1px solid #88e;
}

#messages li.success {
  background-color: #cfc;
  border: 1px solid #6d6;
}

#messages li.failure {
  background-color: #fcc;
  border: 1px solid #e88;
}

/*#bdc4d0;*/

a.subtle {
  color: inherit;
  text-decoration: none;
}

a.subtle:hover {
  text-decoration: underline;
}


a.fact:hover {
  background-color: #aac;
}

.facts {
  overflow: auto;
}

.fact {
  background-color: #ddd;
  border-radius: 2pt;
  color: rgb(39, 40, 54);

  text-decoration: none;

  padding: 4pt;
  margin:  4pt;
  float: left;
}

.fact.true {
  background-color: #aac;
}

.fact div.value {
  display: block;

  width: 1in;
  height: 0.75in;
  line-height: 0.75in;
  text-align: center;
  font-size: 200%;

  background-color: #fff;
  color: #000;
}

.fact div.rdkit {
  position: absolute;
  width: 1in;

  height: 17pt;
  margin-top: -17pt;

  color: #aaa;
  font-size: 9pt;
  text-align: center;
}

.fact div.title {
  margin-bottom: 0;
  margin-top: 4pt;

  padding: 0 2pt;
  text-align: center;
}


content table {
  border-spacing: 0;
  border-collapse: collapse;
}

content tbody tr:nth-child(2n+1) {
  background-color: #eee;
}

content tbody tr:hover {
  background-color: #aac;
}

content td, th {
  padding: 4pt 8pt;
  text-align: center;
}

content table.molecules td, table.molecules th {
  padding: 0 1rem;
  text-align: center;
}

content table.molecules td:first-child {
  /* canvas */
  padding: 0;
}

content th {
  border-bottom: 2px solid #000;
}

content table canvas {
  height: 0.75in;
  width: 1.5in;
}


#screen {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;

  background-color: rgba(0, 0, 0, 0.5);
}

.modal {
  display: none;

  position: fixed;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;

  background-color: #fff;
  border-radius: 1em;
  padding: 1em;
}


.hilight {
  background-color: #ddd;
  border-radius: 2pt;

  padding: 4pt;
  margin:  4pt;

  float: left;
}

.hilight canvas {
  background-color: #fff;

  width: 4in;
  height: 3in;
}

dt {
  font-weight: bold;
  margin-top: 4pt;
}

dd {
  margin-top: 2pt;
  margin-left: 1em;
}

button.link {
  background: none;
  border-style: none;
  cursor: pointer;

  font: inherit;
}

button.link:hover {
  text-decoration: underline;
}

table.sortable th[data-format] {
  cursor: pointer;

  padding-right: 12pt;
  background-image: url('/static/icons/sort-none.svg');
  background-position: right;
  background-repeat: no-repeat;
}

table.sortable th.asc {
  background-image: url('/static/icons/sort-asc.svg');
}

table.sortable th.desc {
  background-image: url('/static/icons/sort-desc.svg');
}


.spreadsheet-guide {
  float: right;
  width: 4in;

  background-color: #eee;
  border-radius: 4pt;
  padding: 1rem;
}

.spreadsheet-guide h3 {
  color: #77a;
  margin-top: 0;

  border-bottom: 1px solid #ccc;
}

.spreadsheet-guide dt {
  margin-top: 6pt;
}

.spreadsheet-guide dd {
  color: #444;
  margin-left: 0;
}


.tabset {
  margin: 1em 0;
}

.tabset .tabs {
  padding-left: 12pt;
}

.tabset .tabs > * {
  display: inline-block;

  color: #666;
  background-color: #eee;
  text-decoration: none;

  padding: 4px 8px;
  border-radius: 4px 4px 0 0;
}

.tabset .tabs > :hover {
  text-decoration: underline;
}

.tabset .tabs > .active {
  color: #000;
  background-color: #ccc;
}

.tabset .panels {
  background-color: #ccc;
  border-radius: 4pt;
  padding: 4pt;
}

.tabset .panels > * {
  background-color: #fff;
  display: none;
  padding: 4pt;
}

.tabset .panels > .active {
  display: block;
}


.collapsify .header {
  cursor: pointer;
  padding-left: 1.5rem;

  background-image: url("/static/icons/expanded.svg");
  background-position: left;
  background-repeat: no-repeat;
}

.collapsify .header.collapsed {
  background-image: url("/static/icons/collapsed.svg");
}

.collapsify .section > .section {
  padding-left: 1rem;
}

.collapsify .collapsed + .section {
  display: none;
}


.markdown h1 {
  font-size: 120%;
  font-weight: bold;
  color: #444;

  margin: 6pt 0;
}

.markdown h2 {
  font-size: 115%;
  font-weight: normal;
  color: #666;

  margin: 4pt 0;
}

.markdown h3 {
  font-size: 110%;
}

.markdown h4 {
  font-size: 105%;
}

.markdown h5 {
  font-size: 100%;
}

.markdown h6 {
  font-size: 100%;
}

.markdown ul {
  margin: 2pt 0 4pt 0;
}

.markdown input[type="checkbox"] {
  border: none;
  border-radius: unset;
  display: inline-block;

  width: auto;
  height: auto;
}

.markdown li.todo {
  color: #000;
}

.markdown li.todo.done {
  color: #ccc;
}

.markdown table {
  border: 1px solid #eee;
  margin: 2pt 0 4pt 0;
}

.markdown th[align="left"],
.markdown td[align="left"] {
  text-align: left;
}

.markdown th[align="right"],
.markdown td[align="right"] {
  text-align: right;
}


.paged {
  margin: 8pt 0;
}

.pager             {text-align: center;}
.pager:first-child {margin-bottom: 4pt;}
.pager:last-child  {margin-top:    4pt;}

.pager a,
.pager .dots {
  display: inline-block;

  color: #000;
  border-radius: 4pt;
  text-decoration: none;

  width: 36pt;
  height: 24pt;
  line-height: 26pt;
}

.pager a {
  background-color: #ddd;
}

.pager a.active {
  background-color: #aaa;
  font-weight: bold;
}

.pager a:hover {
  background-color: #aac;
}