:root {
  --color1: #e6c62e;
  --color2: #fc7100;
  --color3: #3c2f2b;
  --color4: #060606cc;
  --color4_r: 6;
  --color4_g: 6;
  --color4_b: 6;
  --color5: #872012;
}

*  {
  margin: 0;
  padding: 0;
  word-wrap: break-word;
}

html, body {
  background-color: var(--color5);
  background-attachment: fixed;
  color: var(--color1);
  font-family: Verdana, Helvetica, sans-serif;
  font-size: 12px;
  height: 100%;
  text-rendering: optimizeLegibility;
}

.inner {
  border-radius: 7px;
  display: block;
  position: relative;
  overflow: visible;
  background-color: var(--color4);
  background-image: url(static/noise.png);
  background-repeat: repeat-x;
  padding: 5px;
}
.inner.highlight {
  box-shadow:0 0 7px 3px var(--color5);
}
  
.hMiniSeperator {
  display: block;
  height: 5px;
  clear: left;
}
.hHalfSeparator {
  display: block;
  height: 10px;
  clear: left;
}
.hSeperator {
  display: block;
  height: 20px;
  clear: both;
}

#pageBG  {
  background: var(--color4);
  background: rgba(var(--color4_r), var(--color4_g), var(--color4_b), 0.8);
  padding:0 10px;
}
input, select, textarea  {
  color: var(--color1);
  background-color: var(--color5);
  /* old border was dashed color5 unrounded */
  border: solid 1px rgba(var(--color3_r), var(--color3_g), var(--color3_b), 0.75);
  border-radius: 5px;
  padding: 3px;
  font-family: Trebuchet MS, Helvetica, Verdana, sans-serif;
  font-size: 15px;
}
textarea  {
  width:400px;
  height:auto;
}
input[type="image"] {
  border: none !important;
  background: none;
  padding: 0px;
}
input[type="submit"] {
  font-weight: bold;
  padding: 5px 10px;
}

p { margin: 7px 0 0 0; }

a { 
  color: var(--color2); 
  text-decoration: none; 
  cursor: pointer;
}
a:hover:not(.no_highlight)  { 
  color: var(--color1); 
}
a.no_highlight {
  cursor: unset;
}

img { border: none; vertical-align: bottom; }

blockquote  { margin: 10px; }

ul  { margin-left:15px; }
ul.noBullet  { list-style:none; }
li  { margin: 5px 0; }

table a { max-width:300px; }

pre { 
  line-height: 1;
  white-space: pre-wrap; 
}
pre br { display: none; }

.icon32 { 
  margin: 8px;
  transform: scale(2); 
}

.hid, .hidden { display:none!important; }

.tab {
    border-radius: 7px;
    padding: 2px 7px;
}

.hButt {
	font-size:15px;
	line-height:18px;
	font-weight:bold;
	position:relative;
	float:left;
	margin-top:5px;
  margin-right:5px;
}

.boxLink  {
  position: relative;
  display: block;
  color: var(--color2);
  background: var(--color3) url(static/noise.png) repeat-x;
  border-radius: 4px;
}
.boxLink.no_highlight {
  background: var(--color5);
}

input[type="radio"] + label {
  text-align: center;
}

.boxLink:hover:not(.no_highlight), .menuBox .current, :checked + label.boxLink:not(.no_highlight) {
  cursor:pointer;
  color: var(--color5);
  background: var(--color1);
}

.t0 {
  font-family: Verdana, sans-serif;  
  font-size:10px; 
  font-weight:normal;
}
.t1 {
  font-family: Arial, sans-serif;  
  font-size:14px;
  font-weight:normal;
}
.t2 {
  font-family: Trebuchet MS, sans-serif;  
  font-size:18px; 
  font-weight:normal;
}
.t3 {
  font-family: Trebuchet MS, sans-serif;  
  font-size:24px; 
  font-weight:normal;
}
.t4 {
  font-family: Trebuchet MS, sans-serif;  
  font-size:32px; 
  font-weight:normal;
}
.t5 {
  font-family: Trebuchet MS, sans-serif;  
  font-size:48px; 
  font-weight:normal;
}
.t6 {
  font-family: Arial, sans-serif;  
  font-size:72px; 
  font-weight:normal;
}
.tb0 {
  font-family: Verdana, sans-serif;
  font-size:10px;
  font-weight:bolder;
}
.tb1 {
  font-family: Arial, sans-serif;
  font-size:14px;
  font-weight:bolder;
}
.tb2 {
  font-family: Arial, sans-serif;
  font-size:18px;
  font-weight:bolder;
}
.tb3, .tb4, .tb5, .tb6 {
  font-family: Arial Black, Arial, sans-serif;
  font-weight:900;
}
.tb3 {
  font-size:24px;
}
.tb4, .arrow {
  font-size:32px;
}
.tb5 {
  font-size:48px;
  letter-spacing:-2px;
  line-height: 48px;
}
.tb6 {
  font-size:72px;
  letter-spacing:-2px;
  line-height: 72px;
}
.tmono {
  font-family: lucida console, monaco, monospaced;
  font-size: 12px;
  padding: 3px 3px 2px 4px;
  background: var(--color3);
  letter-spacing: 1px;
  border-radius: 2px;
}

.uiWindow {
  top: 0;
  left: 0;
	position:sticky;
  display: block;
}

.uiWindow, dialog {
  border: 2px solid var(--color3);
  background-color: var(--color4);
  font-size: 18px;
  font-weight: bold;
  line-height: 22px;
  padding: 7px 15px;
  overflow: hidden;
}

dialog {
  color: var(--color1);
  margin: revert;
  padding: revert;
}

dialog::backdrop {
  backdrop-filter: blur(2px);
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0),
    rgba(0, 0, 0, 0.5) 2px
  );
}

.uiWindow p, dialog p {
  margin: 10px 0;
  padding: 0;
  clear: both;
  font-family: lucida console, monaco, monospaced;
}

.uiWindow img	{
	float:left;
	padding-right:16px;
}

.uiWindow .closeTab {
	position:absolute;
	display:none;
	bottom: -2px;
	right: -2px;
	background: var(--color3);
  font-size: 10px;
  line-height: 10px;
  font-weight:normal;
  padding: 1px 5px 2px 5px;
	border-top-left-radius: 5px;
}

.uiWindow .submessage {
  position: absolute;
  left: 0;
  bottom: -8px;
  font-style: italic;
  font-size: 11px;
  white-space: nowrap;
  width: 100%;
  overflow-x: hidden;
  text-overflow: ellipsis;
}
.uiWindow .submessage::before {
  font-style: normal;
  content: "ⓘ ";
}
.uiWindow:has(.closeTab) .submessage {
  width: calc(100% - 53.83px);
}
.uiWindow .submessage .prefix {
  font-style: normal;
}

.uiWindow .closeTab:hover {
	background: var(--color1);
	color: var(--color5);
}

#toast-parent .uiWindow:last-child {
  border-color: var(--color1);
}

.botbrAvatar {
	position: relative;
	height: 129px;
	width: 129px;
}
.botbrAvatar img {
	position: absolute;
	height: 129px;
	width: 129px;
	z-index: 10;
}
.botbrAvatar a img, .botbrAvatar .noLink {
	position: absolute;
	height: 125px;
	width: 125px;
	z-index: 15;
	padding: 2px;
}

.container_12,
.container_16 {
  margin-left: auto;
  margin-right: auto;
  max-width: 960px;
}

.vote-table {
  margin: 0 auto;
}
.vote-table input[type="radio"], .vote-table .numbers {
  display: block;
  float: left;
  height: 20px;
  width: 20px;
  text-align: center;
}
.catLabel {
  text-align: right;
  padding-right: 5px;
  overflow: hidden;
  white-space: nowrap;
  max-width: calc(100vw - 254px);
}

/* NEW */

.emtry-view {
  display: grid;
  grid-template-columns: 4em auto 4em;
  grid-template-rows: 5em 1fr;
  gap: 4px 6px;
}

.auto-columns {
  display: grid;
  grid-auto-flow: column;
  gap: 4px;
}
.tight {
  grid-auto-columns: max-content;
}
.carousel {
  overflow-x: auto;
}

.arrow {
  text-align: center;
}
.arrow.double {
  letter-spacing: -0.8em;
  text-indent: -0.8em;
}


.next.arrow {
  border-radius: 0 7px 7px 0;
}
.prev.arrow {
  border-radius: 7px 0 0 7px;
}

.uiWindow-container {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
}

.invisible {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  clip-path: inset(100% 100% 100% 100%);
}

.invisible-focusable {
  position: absolute;
  opacity: 0;
  inset: 0;
}
input[type="radio"].invisible-focusable:focus-visible + label {
  outline: 2px solid var(--color5);
}

@keyframes flash-text {
  15% { color: var(--color2); }
  100% { color: unset; }
}
.flash-text {
  animation: flash-text 0.5s linear;
}

@keyframes slide-in {
  0% { opacity: 0.25; transform: translateY(0.2em); }
  100% { opacity: 1; transform: translateY(0); }
}
.slide-in {
  animation: slide-in .25s ease;
}

@keyframes hide {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
.auto-hide {
  animation: hide .5s ease-in;
}

.slide-in.auto-hide {
  animation: slide-in .25s ease-in, hide .5s ease-in 5s forwards;
}

.attention.uiWindow p {
  background-color: var(--color5);
  border-radius: 4px;
  padding: 8px 10px;
  margin: 2px 0;
}

input.bad {
  color: var(--color2);
  font-weight: bold;
}

table#the-spreadsheet {
  width: 100%;
  table-layout: fixed;
}

table#the-spreadsheet td input {
  text-align: right;
  font-size: 10px;
  width: 100%;
  box-sizing: border-box;
}
table#the-spreadsheet th,
table#the-spreadsheet td:first-child {
  overflow: hidden;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

input[readonly] {
  background-color: unset;
}

.credential-field {
  max-width: calc(100% - 5px);
  margin-bottom: 4px;
}

#emtry-id-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  justify-items: center;
}
#emtry-id-row :nth-child(1) {
  grid-column: 2;
}
#emtry-id-row :nth-child(2) {
  grid-column: 3;
  justify-self: end;
}

#feat {
  line-height: 1em;
  margin-top: 5px;
}
#feat:empty {
  margin-top: 0;
}

#emtry-heading {
  min-width: 140px;
}
#toggle-emtry-profile {
  display: inline-block;
  float: right;
}

#you-avatar {
  float: right;
  width: 20px;
  border-radius: 5px;
  cursor: pointer;
}

#you {
  --bg: url(static/noise.png);
  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background-image: var(--bg);
  background-repeat: repeat-x, no-repeat;
  background-size: auto, 100%;
  transition: opacity 1s ease-out;
}

table.vote-table td:nth-child(2) {
  min-width: 140px;
}

@media (max-width: 600px) {
  .emtry-view {
    grid-template-columns: 2em auto 2em;
    gap: 2px 4px;
  }
  .auto-columns:not(.firm) {
    display: revert;
  }
  .arrow {
    font-size:18px;
    font-weight:bolder;
  }
  #emtry-id-row {
    margin-top: 2em;
  }
  #emtry-heading {
    text-align: center;
  }
  #toggle-emtry-profile {
    float: none;
  }
}