:root {
  --background-color-1: #FFD497;
	--background-color-2: #E8E6EF; 
	--text-color: #000000;
	--link-color-1: #823329;
	--link-color-2: #000000;
	--border-color: #274060;
}

html, body {
  height: 100%;
  margin: 0;
}

ul li {
  padding: 0.3em;
}

.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  background:var(--background-color-1);
  color:var(--text-color);
  font-family:Arial,Helvetica,sans-serif;
}

header {
  flex-shrink: 0;
  border-bottom: 3px solid var(--border-color);
}

header > img {
  float: left;
  margin: 1em;
  filter: drop-shadow(-11px -7px 3px var(--border-color));
}

header > .form {
  float: left;
  margin: 1em;
}

header > .help {
  padding: 1em;
}

header > .help > fieldset > ul {
  margin: 0em;
}

fieldset {
  border: 2px solid var(--border-color);
}

.content {
  flex-grow: 1;
  overflow: auto;
  min-height: 2em;
  background:var(--background-color-2);
  padding: 2px;
}

footer {
  padding: 1em;
  flex-shrink: 0;
  border-top: 3px solid var(--border-color);
}

a:link { color:var(--link-color-1); text-decoration:none; }
a:visited { color:var(--link-color-1); text-decoration:none; }
a:hover { color:var(--link-color-2); }
a.active { color:var(--link-color-2); }

input.query {
	padding: 4px 8px;
	margin: 12px 4px;
	width: 600px;
}

select.features {
	padding: 4px 8px;
	margin: 12px 4px;
	width: 600px;
}

button.submit {
	padding: 4px 8px;
	margin: 12px 4px;
}

table, th, td {
  border:1px solid var(--border-color);
  border-collapse: collapse;
  padding: 3px 7px;
}

td {
  vertical-align: top;
  font-family: monospace;
}

table th {
	background-color:var(--background-color-2);
	font-weight: bold;
	cursor: default;
}

table.sortable th:not(.sorttable_sorted):not(.sorttable_sorted_reverse):not(.sorttable_nosort):after { 
	content: " \25B4\25BE" 
}