/* ------------------------------------------------------------------------ */
/* Theme coloring for Project Gutenberg */
/* ------------------------------------------------------------------------ */
/* Mix-ins */
.left-align {
  text-align: left;
}
.center-align {
  text-align: center;
}
.right-align {
  text-align: right;
}
.top-align {
  vertical-align: top;
}
.middle-align {
  vertical-align: middle;
}
.bottom-align {
  vertical-align: bottom;
}
.bold {
  font-weight: bold;
}
.italic {
  font-style: italic;
}
.underlined {
  text-decoration: underline;
}
.x-large {
  font-size: x-large;
}
.large {
  font-size: large;
}
.small {
  font-size: small;
}
.really-small {
  font-size: x-small;
}
.mono {
  font-family: monospace;
}
.nowrap {
  white-space: nowrap;
}
.full-width {
  width: 100%;
}
.full-height {
  height: 100%;
}
.no-border {
  border: 0;
}
.no-margin {
  margin: 0;
}
.no-padding {
  padding: 0;
}
.no-cellspacing {
  border-spacing: 0;
}
.no-cellpadding {
  border-collapse: collapse;
}
.no-cellpadding td,
.no-cellpadding th {
  padding: 0;
}
.plain-list ul {
  padding: 0;
}
.plain-list li {
  list-style-type: none;
}
.display-flex {
  display: flex;
}
.invisible {
  visibility: hidden;
}
.transparent {
  opacity: 0;
}
.nodisp {
  display: none !important;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.inline {
  display: inline;
}
.fix-full {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.rotate {
  transform: rotate(90deg);
}
/* ------------------------------------------------------------------------ */
/* WEB FONTS */
/* Because global.less is rendered as part of the themes the web-font URLs
   are relative to the theme/ directory. */
/* DP Sans Mono */
@font-face {
  font-family: 'DP Sans Mono';
  src: local('DP Sans Mono'), url('../fonts/DPSansMono.woff2') format('woff2'), url('../fonts/DPSansMono.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
/* DejaVu Sans Mono */
@font-face {
  font-family: 'DejaVu Sans Mono';
  src: url('../fonts/DejaVuSansMono-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'DejaVu Sans Mono';
  src: url('../fonts/DejaVuSansMono-Bold-webfont.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: 'DejaVu Sans Mono';
  src: url('../fonts/DejaVuSansMono-BoldOblique-webfont.woff') format('woff');
  font-weight: bold;
  font-style: oblique;
}
@font-face {
  font-family: 'DejaVu Sans Mono';
  src: url('../fonts/DejaVuSansMono-Oblique-webfont.woff') format('woff');
  font-weight: normal;
  font-style: oblique;
}
/* EB Garamond */
@font-face {
  font-family: 'EB Garamond';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/EBGaramond-Bold.woff2') format('woff2');
}
/* ======================================================================== */
/* Page Interface Structures */
/*
 * The following variables and classes all relate to various page
 * interfaces, such as the proofreading interfaces (standard and
 * enhanced), WordCheck, the proofreading toolbox, code point
 * validator, display image interface, etc.
 */
/* variables */
/* Base layer for page interface */
/* Text pane */
/* Control panes */
/* Links */
/* WordCheck*/
/* Other colors */
/* Classes*/
.page-interface {
  background-color: #CDCDC1;
  color: black;
}
.page-interface a:link {
  color: #0000ff;
}
.page-interface a:visited {
  color: #990099;
}
.page-interface a:active {
  color: #ff0000;
}
.page-interface .text-pane {
  background-color: #FFF8DC;
  color: black;
}
.page-interface .control-pane {
  background-color: #CDC0B0;
  color: black;
}
.page-interface .control-pane input,
.page-interface .control-pane select,
.page-interface .control-pane button {
  background-color: #FFF8DC;
  color: black;
  border: thin solid #000000;
}
.page-interface .control-pane input[type=submit]:disabled,
.page-interface .control-pane input[type=button]:disabled,
.page-interface .control-pane button:disabled {
  background-color: #b3ae9a;
}
.page-interface .control-pane button,
.page-interface .control-pane input[type=submit],
.page-interface .control-pane input[type=button] {
  box-shadow: 1px 1px grey;
  border-radius: 3px;
}
.page-interface .control-pane input[type=image] {
  border: none;
}
.page-interface .control-pane .menu {
  background-color: Bisque;
}
/* ------------------------------------------------------------------------ */
/* Standard Editing Interface */
#standard_interface_image {
  padding: 0;
  margin: 0;
  background-color: #CDCDC1;
  color: black;
}
#standard_interface_image a:link {
  color: #0000ff;
}
#standard_interface_image a:visited {
  color: #990099;
}
#standard_interface_image a:active {
  color: #ff0000;
}
#standard_interface_image .text-pane {
  background-color: #FFF8DC;
  color: black;
}
#standard_interface_image .control-pane {
  background-color: #CDC0B0;
  color: black;
}
#standard_interface_image .control-pane input,
#standard_interface_image .control-pane select,
#standard_interface_image .control-pane button {
  background-color: #FFF8DC;
  color: black;
  border: thin solid #000000;
}
#standard_interface_image .control-pane input[type=submit]:disabled,
#standard_interface_image .control-pane input[type=button]:disabled,
#standard_interface_image .control-pane button:disabled {
  background-color: #b3ae9a;
}
#standard_interface_image .control-pane button,
#standard_interface_image .control-pane input[type=submit],
#standard_interface_image .control-pane input[type=button] {
  box-shadow: 1px 1px grey;
  border-radius: 3px;
}
#standard_interface_image .control-pane input[type=image] {
  border: none;
}
#standard_interface_image .control-pane .menu {
  background-color: Bisque;
}
#standard_interface_image #imagedisplay {
  text-align: center;
}
#standard_interface_text {
  margin: 0;
  background-color: white;
  color: black;
}
#standard_interface_text #editform input {
  background-color: white;
  color: black;
  border: thin solid black;
}
#standard_interface_text #editform button,
#standard_interface_text #editform input[type=submit],
#standard_interface_text #editform input[type=button] {
  background-color: #efefef;
  box-shadow: 1px 1px grey;
  border-radius: 3px;
  margin: 2px;
}
#standard_interface_text a:link {
  color: #0000ff;
}
#standard_interface_text a:visited {
  color: #990099;
}
#standard_interface_text a:active {
  color: #ff0000;
}
#standard_interface_text .text-link-disabled {
  color: #666666;
}
#text_data,
#text_data:focus {
  background-color: white;
  color: black;
  outline: none;
  padding-left: 0.5em;
}
/* ------------------------------------------------------------------------ */
/* Enhanced Editing Interface */
#enhanced_interface {
  text-align: center;
  overflow: hidden;
  background-color: #CDCDC1;
  color: black;
}
#enhanced_interface a:link {
  color: #0000ff;
}
#enhanced_interface a:visited {
  color: #990099;
}
#enhanced_interface a:active {
  color: #ff0000;
}
#enhanced_interface .text-pane {
  background-color: #FFF8DC;
  color: black;
}
#enhanced_interface .control-pane {
  background-color: #CDC0B0;
  color: black;
}
#enhanced_interface .control-pane input,
#enhanced_interface .control-pane select,
#enhanced_interface .control-pane button {
  background-color: #FFF8DC;
  color: black;
  border: thin solid #000000;
}
#enhanced_interface .control-pane input[type=submit]:disabled,
#enhanced_interface .control-pane input[type=button]:disabled,
#enhanced_interface .control-pane button:disabled {
  background-color: #b3ae9a;
}
#enhanced_interface .control-pane button,
#enhanced_interface .control-pane input[type=submit],
#enhanced_interface .control-pane input[type=button] {
  box-shadow: 1px 1px grey;
  border-radius: 3px;
}
#enhanced_interface .control-pane input[type=image] {
  border: none;
}
#enhanced_interface .control-pane .menu {
  background-color: Bisque;
}
#enhanced_interface #tbtext {
  margin-left: auto;
  margin-right: auto;
  border-collapse: collapse;
  overflow: auto;
  border: thin solid #000000;
}
#enhanced_interface #tdtop {
  vertical-align: middle;
  padding: 2px;
  border: thin solid #000000;
  background-color: #CDC0B0;
  color: black;
}
#enhanced_interface #tdtop input,
#enhanced_interface #tdtop select,
#enhanced_interface #tdtop button {
  background-color: #FFF8DC;
  color: black;
  border: thin solid #000000;
}
#enhanced_interface #tdtop input[type=submit]:disabled,
#enhanced_interface #tdtop input[type=button]:disabled,
#enhanced_interface #tdtop button:disabled {
  background-color: #b3ae9a;
}
#enhanced_interface #tdtop button,
#enhanced_interface #tdtop input[type=submit],
#enhanced_interface #tdtop input[type=button] {
  box-shadow: 1px 1px grey;
  border-radius: 3px;
}
#enhanced_interface #tdtop input[type=image] {
  border: none;
}
#enhanced_interface #tdtop .menu {
  background-color: Bisque;
}
#enhanced_interface #tdtext,
#enhanced_interface #tdbottom {
  vertical-align: top;
  border: thin solid #000000;
  padding: 2px;
}
#enhanced_interface #tdtext {
  background-color: #CDCDC1;
  color: black;
}
#enhanced_interface #tdtext a:link {
  color: #0000ff;
}
#enhanced_interface #tdtext a:visited {
  color: #990099;
}
#enhanced_interface #tdtext a:active {
  color: #ff0000;
}
#enhanced_interface #tdtext .text-pane {
  background-color: #FFF8DC;
  color: black;
}
#enhanced_interface #tdtext .control-pane {
  background-color: #CDC0B0;
  color: black;
}
#enhanced_interface #tdtext .control-pane input,
#enhanced_interface #tdtext .control-pane select,
#enhanced_interface #tdtext .control-pane button {
  background-color: #FFF8DC;
  color: black;
  border: thin solid #000000;
}
#enhanced_interface #tdtext .control-pane input[type=submit]:disabled,
#enhanced_interface #tdtext .control-pane input[type=button]:disabled,
#enhanced_interface #tdtext .control-pane button:disabled {
  background-color: #b3ae9a;
}
#enhanced_interface #tdtext .control-pane button,
#enhanced_interface #tdtext .control-pane input[type=submit],
#enhanced_interface #tdtext .control-pane input[type=button] {
  box-shadow: 1px 1px grey;
  border-radius: 3px;
}
#enhanced_interface #tdtext .control-pane input[type=image] {
  border: none;
}
#enhanced_interface #tdtext .control-pane .menu {
  background-color: Bisque;
}
#enhanced_interface #tdbottom {
  background-color: #CDC0B0;
}
#enhanced_interface #tdbottom .text-link-disabled {
  color: #666666;
}
#enhanced_interface #text_data,
#enhanced_interface #text_data:focus {
  padding: 2px;
  outline: none;
  background-color: #FFF8DC;
  color: black;
}
#enhanced_interface .dropsmall {
  font-size: 75%;
}
/* ------------------------------------------------------------------------ */
/* WordCheck Interface */
#wordcheck_interface {
  text-align: center;
  overflow: auto;
  background-color: #CDCDC1;
  color: black;
}
#wordcheck_interface a:link {
  color: #0000ff;
}
#wordcheck_interface a:visited {
  color: #990099;
}
#wordcheck_interface a:active {
  color: #ff0000;
}
#wordcheck_interface .text-pane {
  background-color: #FFF8DC;
  color: black;
}
#wordcheck_interface .control-pane {
  background-color: #CDC0B0;
  color: black;
}
#wordcheck_interface .control-pane input,
#wordcheck_interface .control-pane select,
#wordcheck_interface .control-pane button {
  background-color: #FFF8DC;
  color: black;
  border: thin solid #000000;
}
#wordcheck_interface .control-pane input[type=submit]:disabled,
#wordcheck_interface .control-pane input[type=button]:disabled,
#wordcheck_interface .control-pane button:disabled {
  background-color: #b3ae9a;
}
#wordcheck_interface .control-pane button,
#wordcheck_interface .control-pane input[type=submit],
#wordcheck_interface .control-pane input[type=button] {
  box-shadow: 1px 1px grey;
  border-radius: 3px;
}
#wordcheck_interface .control-pane input[type=image] {
  border: none;
}
#wordcheck_interface .control-pane .menu {
  background-color: Bisque;
}
#wordcheck_interface #tbtext {
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  border: thin solid #000000;
}
#wordcheck_interface #tdtop {
  padding: 2px;
  border: thin solid #000000;
  background-color: #CDC0B0;
  color: black;
}
#wordcheck_interface #tdtop input,
#wordcheck_interface #tdtop select,
#wordcheck_interface #tdtop button {
  background-color: #FFF8DC;
  color: black;
  border: thin solid #000000;
}
#wordcheck_interface #tdtop input[type=submit]:disabled,
#wordcheck_interface #tdtop input[type=button]:disabled,
#wordcheck_interface #tdtop button:disabled {
  background-color: #b3ae9a;
}
#wordcheck_interface #tdtop button,
#wordcheck_interface #tdtop input[type=submit],
#wordcheck_interface #tdtop input[type=button] {
  box-shadow: 1px 1px grey;
  border-radius: 3px;
}
#wordcheck_interface #tdtop input[type=image] {
  border: none;
}
#wordcheck_interface #tdtop .menu {
  background-color: Bisque;
}
#wordcheck_interface #tdtext {
  vertical-align: top;
  text-align: left;
  padding: 0.5em;
  border: thin solid #000000;
  background-color: #FFF8DC;
  color: black;
}
#wordcheck_interface #tdtext .proofingfont input {
  background-color: white;
  color: black;
  padding: 3px;
  text-indent: 0.5em;
  border: thin solid #6f6f6f;
}
#wordcheck_interface #wc_header input,
#wordcheck_interface #wc_header select {
  background-color: #FFF8DC;
  color: black;
}
#wordcheck_interface #wc_header button,
#wordcheck_interface #wc_header input[type=submit],
#wordcheck_interface #wc_header input[type=button] {
  /*
     * We can't use appearance: button here because Chrome has deprecated it:
     * https://developers.google.com/web/updates/2019/12/chrome-80-deps-rems
     * so we make a "button like object" that won't really resemble the other
     * buttons rendered, but still looks like a button.
     */
  border-radius: 3px;
  cursor: default;
  font-family: Verdana, Helvetica, sans-serif;
  border: thin solid #000000;
}
#wordcheck_interface #wc_header .dict-selection {
  margin: 5px;
}
#wordcheck_interface #wc_header .dict-selection .dict-section {
  margin: 5px;
}
#wordcheck_interface #wc_header .dict-selection .dict-section .dict-section-title {
  padding: 3px 4px;
  display: inline;
}
#wordcheck_interface #wc_header .dict-selection .dict-section .remove-language {
  background-color: #FFF8DC;
  color: black;
  border: thin solid #000000;
  border-radius: 5px;
  font-size: 0.9em;
  display: inline;
  padding: 3px 4px 3px 0;
  margin: 2px;
}
#wordcheck_interface #wc_header .dict-selection .dict-section .remove-language input {
  border: none;
  background: none;
  outline: none;
  box-shadow: none;
  color: red;
}
.preWC {
  background-color: #c2c2c2;
}
.noWC {
  background-color: #ffb321;
  font-weight: bold;
}
.WC {
  background-color: #97fc9e;
}
/* ------------------------------------------------------------------------ */
/* Format Preview */
#format_preview {
  background-color: #CDCDC1;
  color: black;
}
#format_preview a:link {
  color: #0000ff;
}
#format_preview a:visited {
  color: #990099;
}
#format_preview a:active {
  color: #ff0000;
}
#format_preview .text-pane {
  background-color: #FFF8DC;
  color: black;
}
#format_preview .control-pane {
  background-color: #CDC0B0;
  color: black;
}
#format_preview .control-pane input,
#format_preview .control-pane select,
#format_preview .control-pane button {
  background-color: #FFF8DC;
  color: black;
  border: thin solid #000000;
}
#format_preview .control-pane input[type=submit]:disabled,
#format_preview .control-pane input[type=button]:disabled,
#format_preview .control-pane button:disabled {
  background-color: #b3ae9a;
}
#format_preview .control-pane button,
#format_preview .control-pane input[type=submit],
#format_preview .control-pane input[type=button] {
  box-shadow: 1px 1px grey;
  border-radius: 3px;
}
#format_preview .control-pane input[type=image] {
  border: none;
}
#format_preview .control-pane .menu {
  background-color: Bisque;
}
.ilb {
  border: thin solid #404040;
  border-radius: 2px;
  background-color: #CDC0B0;
  color: black;
}
.ilb input,
.ilb select,
.ilb button {
  background-color: #FFF8DC;
  color: black;
  border: thin solid #000000;
}
.ilb input[type=submit]:disabled,
.ilb input[type=button]:disabled,
.ilb button:disabled {
  background-color: #b3ae9a;
}
.ilb button,
.ilb input[type=submit],
.ilb input[type=button] {
  box-shadow: 1px 1px grey;
  border-radius: 3px;
}
.ilb input[type=image] {
  border: none;
}
.ilb .menu {
  background-color: Bisque;
}
/* ------------------------------------------------------------------------ */
/* Codepoint Validator */
.flex_container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.fixedbox {
  flex: 0 0 auto;
  padding: 2px;
  background-color: #CDC0B0;
  color: black;
}
.fixedbox input,
.fixedbox select,
.fixedbox button {
  background-color: #FFF8DC;
  color: black;
  border: thin solid #000000;
}
.fixedbox input[type=submit]:disabled,
.fixedbox input[type=button]:disabled,
.fixedbox button:disabled {
  background-color: #b3ae9a;
}
.fixedbox button,
.fixedbox input[type=submit],
.fixedbox input[type=button] {
  box-shadow: 1px 1px grey;
  border-radius: 3px;
}
.fixedbox input[type=image] {
  border: none;
}
.fixedbox .menu {
  background-color: Bisque;
}
.stretchbox {
  flex: auto;
  min-height: 10px;
  overflow: auto;
  background-color: #FFF8DC;
  color: black;
}
.ws-pre {
  white-space: pre;
  padding-left: 0.5em;
  text-align: left;
  font-family: monospace;
}
.bad-char {
  background: #ff99cc;
}
/* ------------------------------------------------------------------------ */
/* Proofreading control frame */
.control-frame {
  padding: 0;
  margin: 0;
  background-color: #CDC0B0;
  color: black;
}
.control-frame input,
.control-frame select,
.control-frame button {
  background-color: #FFF8DC;
  color: black;
  border: thin solid #000000;
}
.control-frame input[type=submit]:disabled,
.control-frame input[type=button]:disabled,
.control-frame button:disabled {
  background-color: #b3ae9a;
}
.control-frame button,
.control-frame input[type=submit],
.control-frame input[type=button] {
  box-shadow: 1px 1px grey;
  border-radius: 3px;
}
.control-frame input[type=image] {
  border: none;
}
.control-frame .menu {
  background-color: Bisque;
}
/* ------------------------------------------------------------------------ */
/* Proofreading Toolbox */
#toolbox {
  padding: 2px;
  font-family: Verdana, Helvetica, sans-serif;
  background-color: #CDC0B0;
  color: black;
  /* adjust so tools do not jump around with different character pickers */
}
#toolbox input,
#toolbox select,
#toolbox button {
  background-color: #FFF8DC;
  color: black;
  border: thin solid #000000;
}
#toolbox input[type=submit]:disabled,
#toolbox input[type=button]:disabled,
#toolbox button:disabled {
  background-color: #b3ae9a;
}
#toolbox button,
#toolbox input[type=submit],
#toolbox input[type=button] {
  box-shadow: 1px 1px grey;
  border-radius: 3px;
}
#toolbox input[type=image] {
  border: none;
}
#toolbox .menu {
  background-color: Bisque;
}
#toolbox .selector_button {
  background-color: Bisque;
  margin-top: 1px;
  font-size: 1em;
  padding: 0.1em 0.15em 0 0.15em;
  margin-right: 2px;
  min-width: 1em;
}
#toolbox .selected-tab {
  font-weight: bold;
  background-color: #FFF8DC;
  box-shadow: -1px -1px grey;
}
#toolbox .proofbutton {
  padding: 1px 6px;
  margin: 1px 0px;
  cursor: pointer;
  font-size: 0.9em;
  min-width: 2em;
}
#toolbox .key-block {
  display: none;
}
#toolbox .show {
  display: table;
}
#toolbox .table-row {
  display: table-row;
}
#toolbox .table-cell {
  display: table-cell;
}
#toolbox .char_box {
  padding-top: 1px;
}
#toolbox .big_text,
#toolbox .picker {
  font-family: DejaVu Sans Mono;
  vertical-align: middle;
  text-align: center;
  width: 1.1em;
}
#toolbox .big_text {
  font-size: 300%;
  margin: 2px;
}
#toolbox .picker {
  font-size: 1em;
  margin-top: 1px;
  padding: 0;
}
#toolbox #hide-picker {
  box-shadow: -1px -1px grey;
}
#toolbox #char-selector {
  min-width: 225px;
}
#toolbox #char-picker {
  display: inherit;
}
#toolbox .hide-picker-button {
  font-size: 2em;
  height: 2.5em;
  padding: 0;
  background: transparent;
}
#toolbox #tools {
  margin-left: 2px;
  margin-right: 0.5em;
  text-align: right;
  width: 100%;
}
#toolbox #tools a:link {
  color: #0000ff;
}
#toolbox #tools a:visited {
  color: #990099;
}
#toolbox #tools a:active {
  color: #ff0000;
}
/* ------------------------------------------------------------------------ */
/* Page Browser */
#page-browser {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #CDCDC1;
  color: black;
}
#page-browser .fixed-box {
  flex: 0 0 auto;
}
#page-browser .stretch-box {
  flex: 1 1 100%;
  min-height: 10px;
}
#page-browser a:link {
  color: #0000ff;
}
#page-browser a:visited {
  color: #990099;
}
#page-browser a:active {
  color: #ff0000;
}
#page-browser .text-pane {
  background-color: #FFF8DC;
  color: black;
}
#page-browser .control-pane {
  background-color: #CDC0B0;
  color: black;
}
#page-browser .control-pane input,
#page-browser .control-pane select,
#page-browser .control-pane button {
  background-color: #FFF8DC;
  color: black;
  border: thin solid #000000;
}
#page-browser .control-pane input[type=submit]:disabled,
#page-browser .control-pane input[type=button]:disabled,
#page-browser .control-pane button:disabled {
  background-color: #b3ae9a;
}
#page-browser .control-pane button,
#page-browser .control-pane input[type=submit],
#page-browser .control-pane input[type=button] {
  box-shadow: 1px 1px grey;
  border-radius: 3px;
}
#page-browser .control-pane input[type=image] {
  border: none;
}
#page-browser .control-pane .menu {
  background-color: Bisque;
}
#page-browser .control-pane {
  padding: 0 1em;
  overflow: auto;
  border-bottom: thin solid #999;
}
#page-browser .control-pane p {
  margin: 0.2em 0;
}
#page-browser .control-pane input {
  margin: 1px 0.2em;
}
#page-browser .control-pane select {
  margin-right: 0.4em;
}
#page-browser .control-pane input[type=checkbox] {
  vertical-align: middle;
}
#page-browser .control-pane input[type=number] {
  width: 5em;
}
#page-browser .control-pane a {
  margin-right: 0.4em;
  margin-left: 0.4em;
}
#page-browser .control-pane button {
  box-shadow: 1px 1px grey;
  border-radius: 3px;
  width: 1.7em;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.4em;
}
#page-browser .text-pane {
  width: 100%;
  box-sizing: border-box;
  padding-left: 0.5em;
  resize: none;
  border: 0;
  margin: 0;
  display: block;
}
/* ------------------------------------------------------------------------ */
/* Control Bar */
.control-bar {
  padding: 0.1em;
  flex: 0 0 auto;
  display: flex;
  background-color: #CDC0B0;
  color: black;
  border-style: solid;
  border-color: gray;
  overflow: auto;
}
.control-bar input,
.control-bar select,
.control-bar button {
  background-color: #FFF8DC;
  color: black;
  border: thin solid #000000;
}
.control-bar input[type=number] {
  width: 1.9rem;
  text-align: right;
  -moz-appearance: textfield;
}
.control-bar input::-webkit-outer-spin-button,
.control-bar input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.control-bar input[type=submit]:disabled,
.control-bar input[type=button]:disabled,
.control-bar button:disabled {
  background-color: #b3ae9a;
}
.control-bar button,
.control-bar input[type=submit],
.control-bar input[type=button] {
  box-shadow: 1px 1px grey;
  border-radius: 3px;
  width: 1.7em;
  height: 1.7em;
  padding: 0;
}
.control-bar input[type=checkbox] {
  width: 1em;
  height: 1em;
}
.control-bar-menu {
  position: absolute;
  padding: 0.2em;
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.5);
  border-radius: 0.3em;
  background-color: #CDC0B0;
  border: 1px solid gray;
  display: none;
  z-index: 1;
}
.control-bar-menu td {
  padding: 0.2em 0.2em;
}
/* ------------------------------------------------------------------------ */
/* Common color definitions
 * Where a particular color family has multiple shades available, a
 * suffix indicates relative contrast as compared with the default
 * @page-background color.
 * All of the color names defined in this file are the default colors
 * for themes with a white page-background with black page-text, but
 * for themes that have other than a white page-background with black
 * page-text, the colors can be overridden in that theme's .less file
 */
/* Shades based on @page-background. Various contrast levels, commonly
 * used for table rows or other containers that should stand out from
 * the page background
 */
/* Background colors with various meanings, some needing two different
 * contrast levels
 */
/* Special text colors that have a particular meaning that are not
 * related to the theme colors but nonetheless may need to be
 * adjusted depending on the theme. Also, needed variation on
 * theme default page-text color
 */
/* Border colors. Based on the basic theme background and text
 * colors, various levels of contrast. For themes with white
 * page-background and black page-text, the default border color
 * is black. Define that, and work from there for the lower-contrast
 * border colors. It needn't be based on the page-text color,
 * but for the original three themes, it is.
 */
/* ------------------------------------------------------------------------ */
/* mixins with color */
/* standalone classes that can be used as mixins, but that should not
 * be given parameters, as they can't be used as classes in the code
 * directly if they have parameters that the lessc compiler has to
 * sort out
 */
.default-border {
  border: thin solid #000000;
}
.default-border-bottom {
  border-bottom: thin solid #000000;
}
.text-link-disabled {
  color: #666666;
}
.sidebar-color {
  background-color: #e0e8dd;
}
.sans-serif {
  font-family: Verdana, Helvetica, sans-serif;
}
.button {
  /*
     * We can't use appearance: button here because Chrome has deprecated it:
     * https://developers.google.com/web/updates/2019/12/chrome-80-deps-rems
     * so we make a "button like object" that won't really resemble the other
     * buttons rendered, but still looks like a button.
     */
  border-radius: 3px;
  cursor: default;
  font-family: Verdana, Helvetica, sans-serif;
  border: thin solid #000000;
}
span.button {
  font-size: 0.8em;
  padding: 1px 4px;
}
.icon_button {
  font-size: 60%;
  border: none;
  background: none;
  cursor: pointer;
  color: #0000ff;
}
.icon_button:hover {
  background-color: #eeeeee;
}
.lean_button {
  text-decoration-line: underline;
  font: initial;
  border: none;
  background: none;
  cursor: pointer;
  color: #0000ff;
}
/* ------------------------------------------------------------------------ */
/* Global */
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background-color: #ffffff;
  color: #000000;
}
body a:link {
  color: #0000ff;
}
body a:visited {
  color: #990099;
}
body a:active {
  color: #ff0000;
}
img {
  border: 0;
}
table {
  border-collapse: collapse;
}
table th {
  font-weight: bold;
}
table th.label {
  text-align: left;
}
table td,
table th {
  padding: 0.1em 0.2em;
}
/* ------------------------------------------------------------------------ */
/* HTML5 hacks */
section,
footer,
aside,
main,
article,
figure {
  display: block;
}
/* ------------------------------------------------------------------------ */
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: #234523;
  font-family: 'EB Garamond', serif;
  margin: 0.5em auto;
}
h1 {
  font-size: 2.2em;
}
h2 {
  font-size: 1.8em;
}
h3 {
  font-size: 1.5em;
}
h4 {
  font-size: 1.3em;
}
h5 {
  font-size: 1.2em;
}
h6 {
  font-size: 1em;
}
/* ------------------------------------------------------------------------ */
/* Header */
header,
#header {
  width: 100%;
  height: 5em;
  padding: 0;
  border: 0;
  display: table;
  background-color: #e0e8dd;
  color: #000000;
}
header #logo,
#header #logo,
header #logo-right,
#header #logo-right {
  display: table-cell;
  vertical-align: middle;
}
header #logo,
#header #logo {
  height: 75px;
  margin: 0.25em 0.5em;
}
header #logo img,
#header #logo img {
  height: 100%;
  margin: 0.25em 0.5em;
}
header #titles-preserved,
#header #titles-preserved {
  text-align: center;
  font-size: 0.9em;
}
header #titles-preserved #x-preserved,
#header #titles-preserved #x-preserved {
  font-weight: bold;
  font-family: Verdana, Helvetica, sans-serif;
}
header #icon-menu,
#header #icon-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
header .icon-menu-item,
#header .icon-menu-item {
  position: relative;
  margin-right: 1.5em;
  text-align: center;
  font-family: Verdana, Helvetica, sans-serif;
  font-size: 0.7em;
  color: #336633;
}
header .icon-menu-item a:link,
#header .icon-menu-item a:link,
header .icon-menu-item a:visited,
#header .icon-menu-item a:visited,
header .icon-menu-item a:active,
#header .icon-menu-item a:active {
  color: #336633;
}
header .icon-menu-item a,
#header .icon-menu-item a {
  text-decoration: none;
}
header .icon-menu-item .icon-menu-item-name,
#header .icon-menu-item .icon-menu-item-name {
  font-size: 0.9em;
  color: #234523;
}
header .icon-menu-item .icon-menu-item-name a:link,
#header .icon-menu-item .icon-menu-item-name a:link,
header .icon-menu-item .icon-menu-item-name a:visited,
#header .icon-menu-item .icon-menu-item-name a:visited,
header .icon-menu-item .icon-menu-item-name a:active,
#header .icon-menu-item .icon-menu-item-name a:active {
  color: #234523;
}
header .icon-menu-item .inbox-badge,
#header .icon-menu-item .inbox-badge {
  background-color: red;
  border-radius: 2px;
  color: #ffffff;
  padding: 1px 3px;
  font-size: 0.9em;
  position: absolute;
  top: -3px;
  right: -3px;
}
header #search-menu,
#header #search-menu {
  text-align: right;
  padding-right: 1em;
  font-size: 1.2em;
  color: #336633;
}
header #search-menu a:link,
#header #search-menu a:link,
header #search-menu a:visited,
#header #search-menu a:visited,
header #search-menu a:active,
#header #search-menu a:active {
  color: #336633;
}
header #search-menu-input,
#header #search-menu-input {
  width: 80%;
  font-size: 1em;
  border-radius: 8px;
  border: solid thin #d3d3d3;
}
/* ------------------------------------------------------------------------ */
/* Navbar */
nav,
#navbar-outer {
  width: 100%;
  display: table;
}
#navbar {
  height: 2.2em;
  margin: 0;
  border: 0;
  font-size: 0.75em;
  display: table-row;
  background-color: #336633;
  font-family: Verdana, Helvetica, sans-serif;
}
#navbar a:link,
#navbar a:visited,
#navbar a:active {
  color: #ffffff;
}
#navbar span.currentpage {
  font-weight: bold;
}
#navbar label,
#navbar span.text,
#navbar span.currentpage {
  color: #ffffff;
}
#navbar #navbar-left {
  float: left;
  padding: 3px;
  margin: 2px;
  display: table-cell;
}
#navbar #navbar-right,
#navbar #navbar-login {
  text-align: right;
  float: right;
  display: table-cell;
}
#navbar #navbar-right {
  margin: 2px;
  padding: 3px;
}
#navbar #navbar-login {
  margin: 3px;
}
#navbar form {
  margin: 0;
  display: inline;
}
#navbar form input {
  font-family: Verdana, Helvetica, sans-serif;
  font-size: 11px;
}
#navbar form div {
  display: inline;
}
.menu {
  position: relative;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  text-align: center;
  min-width: 4em;
}
.menu-selector {
  display: inline;
}
.menu-icon {
  transition-duration: 0.15s;
}
.menu-contents {
  transition: all 0.15s ease-in-out;
  position: absolute;
  z-index: 1;
  border: thin solid #000000;
  color: #000000;
  background-color: #336633;
  text-align: left;
  padding: 0.5em;
  margin-top: 0.4em;
}
.menu-contents .menu-item {
  margin: 0.3em;
}
#my-activities-string {
  display: inline;
  white-space: nowrap;
}
#my-activities-menu {
  display: none;
  white-space: nowrap;
}
/* ------------------------------------------------------------------------ */
/* Alert & Test bar */
#alertbar-outer,
#testbar-outer {
  width: 100%;
  display: table;
}
#alertbar,
#testbar {
  height: 2.2em;
  margin: 0;
  border: 0;
  font-size: 0.75em;
  display: table-row;
  background-color: #336633;
  font-family: Verdana, Helvetica, sans-serif;
}
#alertbar a:link,
#testbar a:link,
#alertbar a:visited,
#testbar a:visited,
#alertbar a:active,
#testbar a:active {
  color: #ffffff;
}
#alertbar span.currentpage,
#testbar span.currentpage {
  font-weight: bold;
}
#alertbar label,
#testbar label,
#alertbar span.text,
#testbar span.text,
#alertbar span.currentpage,
#testbar span.currentpage {
  color: #ffffff;
}
#alertbar #navbar-left,
#testbar #navbar-left {
  float: left;
  padding: 3px;
  margin: 2px;
  display: table-cell;
}
#alertbar #navbar-right,
#testbar #navbar-right,
#alertbar #navbar-login,
#testbar #navbar-login {
  text-align: right;
  float: right;
  display: table-cell;
}
#alertbar #navbar-right,
#testbar #navbar-right {
  margin: 2px;
  padding: 3px;
}
#alertbar #navbar-login,
#testbar #navbar-login {
  margin: 3px;
}
#alertbar form,
#testbar form {
  margin: 0;
  display: inline;
}
#alertbar form input,
#testbar form input {
  font-family: Verdana, Helvetica, sans-serif;
  font-size: 11px;
}
#alertbar form div,
#testbar form div {
  display: inline;
}
#alertbar p,
#testbar p {
  font-weight: bold;
  text-align: center;
  vertical-align: middle;
  display: table-cell;
}
#alertbar,
#alertbar-outer {
  font-family: Verdana, Helvetica, sans-serif;
  background-color: #ffff66;
  color: #000000;
}
#alertbar a:link,
#alertbar-outer a:link,
#alertbar a:visited,
#alertbar-outer a:visited,
#alertbar a:active,
#alertbar-outer a:active {
  color: #232323;
}
#testbar,
#testbar-outer {
  font-family: Verdana, Helvetica, sans-serif;
  background-color: #ffffff;
  background: repeating-linear-gradient(to right, #ffff66, #ffffff 24%, #ffffff 75%, #ffff66 100%);
  color: #000000;
  border-bottom: thin solid #000000;
}
#testbar a:link,
#testbar-outer a:link,
#testbar a:visited,
#testbar-outer a:visited,
#testbar a:active,
#testbar-outer a:active {
  color: #232323;
}
/* ------------------------------------------------------------------------ */
/* Statsbar */
#sidebar,
#statsbar {
  font-family: Verdana, Helvetica, sans-serif;
  background-color: #e0e8dd;
  color: #000000;
}
/* ------------------------------------------------------------------------ */
/* Footer */
footer,
#footer {
  width: 100%;
  height: 2em;
  font-size: x-small;
  text-align: center;
  vertical-align: middle;
  background-color: #336633;
  color: #ffffff;
  font-family: Verdana, Helvetica, sans-serif;
}
footer a:link,
#footer a:link,
footer a:visited,
#footer a:visited,
footer a:active,
#footer a:active {
  color: #ffffff;
}
footer p,
#footer p {
  margin: 0px;
  padding: 0.3em;
}
footer small,
#footer small {
  font-size: x-small;
}
/* ------------------------------------------------------------------------ */
/* Disclosure boxes with optional info */
details {
  border: 1px solid #999999;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
}
summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}
details[open] {
  padding: 0.5em;
}
details[open] summary {
  border-bottom: 1px solid #999999;
  margin-bottom: 0.5em;
}
/* ------------------------------------------------------------------------ */
/* Content layout */
#page-container {
  border: 0;
  width: 100%;
  display: table;
  background-color: #e0e8dd;
}
#page-body-container {
  display: table-row;
}
#content-container {
  text-align: left;
  vertical-align: top;
  width: 100%;
  padding: 0 0.5em 1em 0.5em;
  display: table-cell;
  background-color: #ffffff;
  color: #000000;
}
#rounded-corner {
  background-color: #ffffff;
}
.quick-links {
  padding: 0;
}
.quick-links li {
  display: inline;
}
.quick-links li::before {
  content: " | ";
}
.quick-links li:first-child::before {
  content: "";
}
/* ------------------------------------------------------------------------ */
/* Graphs */
.graph-tooltip {
  background-color: #ffffff;
  border: thin solid #000000;
  border-width: 2px;
  border-radius: 5px;
  padding: 5px;
  position: absolute;
}
.graph-element {
  color: #000000;
}
.graph-legend {
  fill: #ffffff;
  outline: 2px solid #000000;
  border-radius: 5px;
}
.graph-background {
  fill: #ffffff;
}
.graph-download-button {
  margin: 5px;
}
.graph-divider {
  margin: 1.25em 0 1.25em 0;
}
.graph-normal-series {
  fill: #bbbbbb;
}
.graph-above-goal {
  fill: #ff484f;
}
.graph-series-fill-10 {
  fill: #17becf;
}
.graph-series-stroke-10 {
  stroke: #17becf;
}
.graph-series-fill-9 {
  fill: #bcbd22;
}
.graph-series-stroke-9 {
  stroke: #bcbd22;
}
.graph-series-fill-8 {
  fill: #7f7f7f;
}
.graph-series-stroke-8 {
  stroke: #7f7f7f;
}
.graph-series-fill-7 {
  fill: #e377c2;
}
.graph-series-stroke-7 {
  stroke: #e377c2;
}
.graph-series-fill-6 {
  fill: #8c564b;
}
.graph-series-stroke-6 {
  stroke: #8c564b;
}
.graph-series-fill-5 {
  fill: #9467bd;
}
.graph-series-stroke-5 {
  stroke: #9467bd;
}
.graph-series-fill-4 {
  fill: #d62728;
}
.graph-series-stroke-4 {
  stroke: #d62728;
}
.graph-series-fill-3 {
  fill: #2ca02c;
}
.graph-series-stroke-3 {
  stroke: #2ca02c;
}
.graph-series-fill-2 {
  fill: #ff7f0e;
}
.graph-series-stroke-2 {
  stroke: #ff7f0e;
}
.graph-series-fill-1 {
  fill: #1f77b4;
}
.graph-series-stroke-1 {
  stroke: #1f77b4;
}
/*
 If the screen is "narrow enough", collapse the activities into a menu.
 > 900px allows *all* activities to be displayed for English, French, and German.
*/
@media only screen and (max-width: 900px) {
  #my-activities-string {
    display: none;
  }
  #my-activities-menu {
    display: inline;
  }
}
/*
 If the screen is "narrow enough" we move the statsbar below the page
 content using a flex layout. We don't use a flex layout for the
 regular content because doing so cuts off the project listings on
 the round pages. Until we are able to make full use of the window
 for the round pages (death to the statsbar??) we need to keep a
 table-style layout to force the statsbar off the screen when the
 window gets too narrow
*/
@media only screen and (max-width: 768px) {
  #header p {
    margin: 0.25em 0.5em;
  }
  #page-body-container {
    display: flex;
    display: -ms-flexbox;
    /* for IE 11 */
    flex-direction: column;
  }
  #page-container,
  #content-container {
    display: block;
  }
}
/* For even smaller screens, change the header and footer */
@media only screen and (max-width: 600px) {
  #header #logo {
    max-width: 95%;
  }
  #header #logo img {
    max-width: 95%;
  }
  #header #logo-right {
    display: table-row;
  }
  #header #titles-preserved {
    text-align: right;
    font-size: 0.8em;
    padding-bottom: 5px;
  }
  #header .icon-menu-item {
    font-size: 0.6em;
    padding-bottom: 5px;
  }
  #header .icon-menu-item .icon-menu-item-name {
    display: none;
  }
  #header #search-menu {
    font-size: 1em;
  }
  #buildtime {
    display: none;
  }
}
/* ------------------------------------------------------------------------ */
/* Section dividers */
hr.divider {
  text-align: center;
  width: 75%;
}
/* ------------------------------------------------------------------------ */
/* Star texts */
.star-text-summary {
  width: 33%;
  float: left;
}
.star-text-summary p {
  padding-right: 0.5em;
}
.star-text-summary .star-header {
  text-align: center;
}
.star-gold {
  font-size: 3em;
  color: #ffd700;
  text-align: center;
  text-shadow: 3px 2px 5px black;
}
.star-silver {
  font-size: 3em;
  color: silver;
  text-align: center;
  text-shadow: 3px 2px 5px black;
}
.star-bronze {
  font-size: 3em;
  color: #cd7f32;
  text-align: center;
  text-shadow: 3px 2px 5px black;
}
.rss-icon {
  color: #f26522;
}
@media only screen and (max-width: 481px) {
  .star-text-summary {
    width: 100%;
    padding-bottom: 1em;
  }
  .star-header,
  .star-description {
    display: table-cell;
  }
  .star-header {
    width: 10em;
    padding-right: 1em;
  }
}
/* ------------------------------------------------------------------------ */
/* News items */
div.news {
  margin: 1em 0;
}
div.newsupdated {
  margin-top: 0.7em;
  float: right;
}
div.newsitem {
  border-radius: 5px;
  padding: 0.75em;
  margin-top: 1em;
  overflow: auto;
  border-left: thick solid #d3d3d3;
  border-bottom: thin solid #d3d3d3;
}
div.newsitem p {
  margin: 0 0.5em 0.5em 0;
}
div.newsitem img {
  max-width: 100%;
}
div.newsitem iframe {
  border: 0;
}
.news-header {
  font-size: 1.25em;
  font-weight: bold;
  padding-bottom: 0.5em;
}
.news-normal {
  color: #000000;
}
.news-announcement1 {
  color: maroon;
}
.news-announcement2 {
  color: darkorange;
}
.news-announcement3 {
  color: darkblue;
}
.news-celebration {
  color: green;
}
.news-maintenance {
  color: red;
}
/* ------------------------------------------------------------------------ */
/* Editing news items */
table.newsedit {
  width: 100%;
  border-collapse: collapse;
}
table.newsedit tr td {
  vertical-align: top;
}
table.newsedit tbody.padding tr td.commands,
table.newsedit tbody.padding tr td.items {
  padding-bottom: 1em;
  padding-top: 0.5em;
}
table.newsedit td.commands {
  width: 10%;
  padding-right: 2em;
  padding-left: 1em;
  white-space: nowrap;
}
table.newsedit td.items {
  width: 90%;
}
/* ------------------------------------------------------------------------ */
/* Attention-getting structures */
div.callout {
  border: thin solid #000000;
  background-color: #eeeeee;
  margin-right: 2em;
  margin-left: 2em;
  padding: 1em;
}
div.callout p {
  margin-bottom: 0;
}
div.calloutheader {
  font-weight: bold;
}
.error,
.warning {
  font-weight: bold;
}
.error,
.test_warning {
  color: red;
}
.warning {
  color: blue;
}
.highlight {
  background-color: #ffff66;
  color: #000000;
}
kbd {
  font-family: DejaVu Sans Mono, monospace;
  background-color: #dddddd;
  font-size: 85%;
  border-radius: 6px;
  padding: 0 0.3em;
}
/* ------------------------------------------------------------------------ */
/* Round and Pool filter table */
#filter_form {
  padding: 0 0.5em 0.5em 0.5em;
}
table.filter {
  width: 100%;
}
table.filter td {
  padding: 0.25em 0.25em 0em 0.25em;
  vertical-align: top;
  white-space: nowrap;
}
table.filter td select {
  margin: 0.1em auto;
  width: 100%;
}
/* ------------------------------------------------------------------------ */
/* Flex row & entity -- useful when needing a dynamic list of things */
div.flex_row {
  display: flex;
  flex-flow: row wrap;
  margin: 0.25em;
}
div.flex_row div.entry {
  padding: 0 0.25em;
}
/* ------------------------------------------------------------------------ */
/* Random Rules */
/* Because the guidelines are in the wiki, we have to jump through
   some hoops to get any tables used there to be displayed properly
   if they are included in a random rule. A random_rule class has been
   created in https://www.pgdp.net/wiki/MediaWiki:Common.css to allow
   a class to be added to the tables that are in a random rule. The
   CSS defined here in layout.less is not used directly anywhere in
   the code, but only used to theme random rules imported from the
   pgdp.net wiki.
 */
table.random_rule {
  border: thin solid #000000;
  border-collapse: collapse;
}
table.random_rule tr td {
  border: thin solid #000000;
  padding: 0.25em 0.5em;
}
table.random_rule tr th {
  border: thin solid #000000;
  padding: 0.25em 0.5em;
  vertical-align: top;
  text-align: left;
  background-color: cornsilk;
}
/* ------------------------------------------------------------------------ */
/* Registration table */
table.register {
  width: auto;
  border-collapse: separate;
  border: thin solid #000000;
}
table.register th,
table.register td {
  padding: 3px;
}
table.register th {
  text-align: right;
  font-weight: bold;
  background-color: #e0e8dd;
}
table.register td {
  text-align: left;
}
table.register td input[type=text],
table.register td input[type=password],
table.register td input[type=select] {
  width: 98%;
}
table.register td.bar {
  text-align: center;
  background-color: #336633;
}
/* ------------------------------------------------------------------------ */
/* Site Progress Snapshot table on Activity Hub */
table.snapshottable {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
}
table.snapshottable td,
table.snapshottable th {
  padding: 2px;
  margin: 0;
  text-align: center;
  border: thin solid #000000;
}
table.snapshottable th {
  font-weight: normal;
  background-color: #e0e8dd;
}
table.snapshottable th.activity-icon-header {
  border: none;
  background-color: #ffffff;
}
table.snapshottable td.stage-column {
  text-align: left;
  vertical-align: middle;
  padding: 5px;
}
table.snapshottable td.nocell {
  border: none;
}
.access-yes {
  padding-left: 5px;
  float: right;
  display: inline-block;
  min-width: 1.5em;
  vertical-align: middle;
  text-align: center;
  font-size: 1.1em;
  font-weight: bold;
  color: green;
}
.access-yes a:link,
.access-yes a:visited,
.access-yes a:active {
  color: green;
  text-decoration: none;
}
.access-no {
  padding-left: 5px;
  float: right;
  display: inline-block;
  min-width: 1.5em;
  vertical-align: middle;
  text-align: center;
  font-size: 1.1em;
  font-weight: bold;
  color: red;
}
.access-no a:link,
.access-no a:visited,
.access-no a:active {
  color: red;
  text-decoration: none;
}
.access-eligible {
  padding-left: 5px;
  float: right;
  display: inline-block;
  min-width: 1.5em;
  vertical-align: middle;
  text-align: center;
  font-size: 1.1em;
  font-weight: bold;
  color: blue;
}
.access-eligible a:link,
.access-eligible a:visited,
.access-eligible a:active {
  color: blue;
  text-decoration: none;
}
@media only screen and (max-width: 768px) {
  .stage-name,
  .stage-access,
  .pages-goal,
  .pages-completed {
    display: none;
  }
}
/* ------------------------------------------------------------------------ */
/* Progress bar */
div.progressbar {
  font-size: 0.5em;
  border: thin solid #000000;
}
div.goal-on-target {
  background-color: lightgreen;
}
div.goal-maybe {
  background-color: orange;
}
div.goal-unlikely {
  background-color: red;
}
/* ------------------------------------------------------------------------ */
/* Statistics table */
table.stats {
  /* so that right aligned and left aligned columns don't clash */
}
table.stats td,
table.stats th {
  padding-right: 2em;
}
/* ------------------------------------------------------------------------ */
/* Translation table */
table.translation td,
table.translation th {
  padding-right: 1em;
}
/* ------------------------------------------------------------------------ */
/* Available Project Listings */
table.availprojectlisting {
  width: 100%;
  border-collapse: collapse;
  border: thin solid #000000;
}
table.availprojectlisting tr td,
table.availprojectlisting tr th {
  padding-left: 0.5em;
  padding-right: 0.5em;
}
table.availprojectlisting tr th {
  font-weight: bold;
  text-align: left;
  border-bottom: thin solid #000000;
}
table.availprojectlisting tr th img {
  border: 0;
}
table.availprojectlisting tr td {
  border-bottom: thin solid #999999;
}
table.availprojectlisting tr:nth-child(odd) {
  background-color: #dddddd;
}
/* Default stage colors, which can be overridden by the themes
   Stage colors are independent of any of a theme's colors. Though
   they may be overridden, color variable names are not used    */
table.stage_P1 tr:nth-child(even) {
  background-color: #ffe4b5;
}
table.stage_P1 tr:nth-child(odd) {
  background-color: cornsilk;
}
table.stage_P2 tr:nth-child(even) {
  background-color: #ffe4b5;
}
table.stage_P2 tr:nth-child(odd) {
  background-color: cornsilk;
}
table.stage_P3 tr:nth-child(even) {
  background-color: plum;
}
table.stage_P3 tr:nth-child(odd) {
  background-color: thistle;
}
table.stage_F1 tr:nth-child(even) {
  background-color: #ffe4b5;
}
table.stage_F1 tr:nth-child(odd) {
  background-color: cornsilk;
}
table.stage_F2 tr:nth-child(even) {
  background-color: plum;
}
table.stage_F2 tr:nth-child(odd) {
  background-color: thistle;
}
table.stage_PP tr:nth-child(even) {
  background-color: #cccccc;
}
table.stage_PP tr:nth-child(odd) {
  background-color: #ffffff;
}
table.stage_PPV tr:nth-child(even) {
  background-color: #99ffff;
}
table.stage_PPV tr:nth-child(odd) {
  background-color: #eaf7f7;
}
table.stage_SR tr:nth-child(even) {
  background-color: #ccffcc;
}
table.stage_SR tr:nth-child(odd) {
  background-color: #ccff99;
}
/* ------------------------------------------------------------------------ */
/* FAQ */
table.faqtable {
  width: 100%;
  border: 0;
  padding: 1em;
}
table.faqtable tr td.column {
  vertical-align: top;
  width: 50%;
  padding-right: 1em;
}
/* ------------------------------------------------------------------------ */
/* User Preferences */
/*
This stylesheet originated from http://www.alistapart.com/articles/slidingdoors/
Quote http://www.alistapart.com/copyright/:
*/
/*
 *  A List Apart gives away CSS styles, JavaScript, PHP and Perl scripts,
 *  XHTML markup techniques, and other bits of "source code" for the use
 *  of its readers. You may freely copy, paste, and modify any of this
 *  code for use on your own web projects large or small, commercial or
 *  non-commercial. You need not ask permission to do so. You need not
 *  credit ALA or its authors. It is our gift to you.
 *
 *  ...
 *
 *  Images, including those used in tutorials (example), cannot be
 *  reproduced outside this magazine, except by the author or designer
 *  who created them.
 *
 *  You may adapt elements of our CSS in your own projects, but the
 *  unique combination of images, colors, sizes, typography, and
 *  positioning ("the design") is copyright 2003 A List Apart Magazine
 *  and Happy Cog Studios and may not be reproduced.
 */
table.preferences {
  border-collapse: collapse;
}
table.preferences td,
table.preferences th {
  border: thin solid #000000;
}
table.preferences th.longlabel {
  text-align: center;
}
table.preferences th.label,
table.preferences th.longlabel {
  background-color: #e0e8dd;
  color: #000000;
}
.tabs {
  float: left;
  width: 90%;
  border-bottom: thin solid #999999;
}
.tabs ul {
  margin: 0;
  padding: 0 20px 0 10px;
  list-style: none;
}
.tabs li {
  float: left;
  margin: 0;
  padding: 0 0 0 4px;
  border-radius: 5px 5px 0 0;
  margin-bottom: -2px;
  background-color: #e3e3e3;
  border: thin solid #999999;
}
.tabs li a {
  color: #666666;
}
.tabs a {
  float: left;
  display: block;
  padding: 5px 15px 4px 6px;
  text-decoration: none;
  min-width: 8em;
}
.tabs .current-tab {
  border-bottom: none;
  background-color: #ffffff;
}
.tabs .current-tab a {
  font-weight: bold;
  color: #000000;
}
/* ------------------------------------------------------------------------ */
/* Themed tables */
table.themed {
  width: 100%;
  border-collapse: collapse;
  border: thin solid #000000;
}
table.themed tr {
  background-color: #e0e8dd;
  color: #000000;
}
table.themed tr th,
table.themed tr td {
  padding: 0.1em;
}
table.themed tr th {
  background-color: #336633;
  color: #ffffff;
}
table.themed tr th a:link,
table.themed tr th a:visited {
  color: #ffffff;
}
table.theme_striped tr th,
table.theme_striped tr td {
  padding: 0.1em 0.5em 0.1em 0.5em;
}
table.theme_striped th {
  background-color: #336633;
  color: #ffffff;
}
table.theme_striped tr:nth-child(even) {
  background-color: #ffffff;
}
table.theme_striped tr:nth-child(odd) {
  background-color: #e0e8dd;
}
table.basic {
  border-collapse: collapse;
  border: thin solid #000000;
}
table.basic th {
  background-color: #cccccc;
}
table.basic td,
table.basic th {
  border: thin solid #000000;
}
table.basic th.label {
  text-align: left;
}
table.basic td.satisfied {
  text-align: right;
  background-color: #ccffcc;
}
table.basic td.not_satisfied {
  text-align: right;
  background-color: #ffcccc;
}
table.basic textarea {
  width: 100%;
}
table.striped th {
  background-color: #cccccc;
}
table.striped tr:nth-child(odd) td {
  background-color: #dddddd;
}
table.no-border td,
table.no-border th {
  border: none;
}
/* ------------------------------------------------------------------------ */
/* PPV Report */
p.inline_input {
  margin: 0;
  padding: 0;
}
p.hanging_indent {
  text-indent: -1.25em;
  margin-left: 1.25em;
}
p.hanging_indent_long {
  text-indent: -3em;
  margin-left: 3em;
}
p.form_problem {
  margin-bottom: 0;
  font-weight: bold;
  color: red;
}
p.form_problem:before {
  content: '↓';
  /* down-arrow */
}
table.ppv_reportcard {
  width: 95%;
  border: thin solid #000000;
}
table.ppv_reportcard th {
  font-weight: bold;
  border: thin solid #000000;
}
table.ppv_reportcard th.major_section {
  background-color: #e0e8dd;
}
table.ppv_reportcard th.heading {
  background-color: #cccccc;
}
table.ppv_reportcard td {
  border: thin solid #000000;
}
/* ------------------------------------------------------------------------ */
/* Image Sources */
table.image_source {
  border-collapse: collapse;
  width: 90%;
  margin: auto;
}
table.image_source tr.e {
  background-color: #eeeeee;
}
table.image_source tr.o {
  background-color: #dddddd;
}
table.image_source th {
  text-align: center;
  padding: 5px;
  background-color: #eeeeee;
  border: thin solid #999999;
}
table.image_source td {
  padding: 5px;
  border: thin solid #999999;
}
table.image_source td a.sourcelink {
  font-size: 90%;
  margin: 10px 0px 3px 25px;
}
table.image_source th.label {
  text-align: left;
}
table.image_source td.enabled {
  text-align: center;
  background-color: #88ff88;
}
table.image_source td.disabled {
  text-align: center;
  background-color: #dddddd;
}
table.image_source td.pending {
  text-align: center;
  background-color: #ffcc66;
}
/* ------------------------------------------------------------------------ */
/* Page Detail */
table.pagedetail {
  width: auto;
}
table.pagedetail th,
table.pagedetail td {
  text-align: center;
  font-weight: normal;
  border: thin solid #000000;
}
.in_progress {
  background-color: #ffcc66;
}
.done_current {
  background-color: #88ff88;
}
.done_previous {
  background-color: #ff8888;
}
/* ------------------------------------------------------------------------ */
/* Remote File Manager */
table.dirlist {
  width: 100%;
}
table.dirlist .actions {
  text-align: center!important;
}
table.dirlist caption {
  text-align: left;
  font-size: 111%;
  margin-top: 0.5em;
  padding: 5px;
}
div.remote-file-mgr-info {
  background-color: #88ff88;
  color: #000000;
  border: thin solid #000000;
  padding: 0.5em;
  margin: 0.8em 0;
}
/* ------------------------------------------------------------------------ */
/* Project Load (add_files.php) */
table#addfiles td.load-add {
  background-color: #ccffcc;
}
table#addfiles td.load-replace {
  background-color: #ffcc66;
}
table#addfiles td.load-error {
  background-color: #ffcccc;
}
/* ------------------------------------------------------------------------ */
/* Quizzes */
.quiz-passed {
  background-color: #ccffcc;
}
.quiz-not-passed {
  background-color: #ffcccc;
}
.quiz-date-ok {
  background-color: #ccffcc;
}
.quiz-date-not-ok {
  background-color: #ffcccc;
}
.quiz-ok {
  background-color: #88ff88;
}
.quiz-not-ok {
  background-color: #ff8888;
}
/* ------------------------------------------------------------------------ */
/* Special days tables */
table.list_special_days {
  width: 90%;
  margin: auto;
}
table.list_special_days tr.e {
  background-color: #eeeeee;
}
table.list_special_days tr.o {
  background-color: #dddddd;
}
table.list_special_days tr.month > * {
  border: none;
  border-bottom: solid 2px #000000;
}
table.list_special_days td,
table.list_special_days th {
  padding: 3px;
  border: thin solid #999999;
}
table.list_special_days td.codecell {
  vertical-align: middle;
  text-align: center;
}
table.list_special_days th.headers {
  padding: 0.5em;
}
table.list_special_days td.enabled {
  text-align: center;
  background-color: #88ff88;
}
table.list_special_days td.disabled {
  text-align: center;
  background-color: #dddddd;
}
table.list_special_days td.center {
  text-align: center;
}
table.list_special_days td.right,
table.list_special_days th.right {
  text-align: right;
  font-weight: normal;
}
table.show_special_days th {
  background-color: #eeeeee;
}
table.edit_special_day {
  width: 90%;
  margin: auto;
}
table.edit_special_day th,
table.edit_special_day td {
  padding: 5px;
  border: thin solid #000000;
  background-color: #eeeeee;
}
/* ------------------------------------------------------------------------ */
/* Search Form */
/* Container to wrap the search columns */
div.search-columns {
  width: 99%;
  overflow: auto;
  text-align: center;
  clear: both;
}
/* This sets everything into one column... */
table.search-column {
  width: 99%;
  /* Set the size of the row label to be consistent */
}
table.search-column tr th {
  width: 8em;
}
/* ... and this says if the screen is >800px, make it two columns. */
@media only screen and (min-width: 800px) {
  table.search-column {
    width: 50%;
    float: left;
  }
  table.search-column tr th {
    width: auto;
  }
}
/* ------------------------------------------------------------------------ */
/* Search Results drop-down */
.dropdown {
  position: relative;
  display: inline;
}
.dropdown-content {
  display: none;
  position: absolute;
  top: 1.5em;
  right: 0;
  padding: 0.3em;
  margin: 0 0 0 -15em;
  z-index: 1;
  background-color: #ffffff;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.5);
  border-radius: 0.3em;
}
/* button looking like a link */
.dropdown-button {
  border: none;
  padding: 1px;
  background-color: inherit;
  color: #000000;
  cursor: pointer;
  font-family: initial;
  font-size: initial;
  text-decoration: underline;
}
.dropdown-show {
  display: block;
}
/* ------------------------------------------------------------------------ */
/* Link box */
#linkbox {
  text-align: left;
  vertical-align: top;
  padding: 0 1em;
  float: right;
  margin: 0.5em auto 0.5em 0.5em;
  border: thin solid #000000;
  background-color: #e0e8dd;
}
#linkbox ul {
  padding: 0;
}
#linkbox li {
  list-style-type: none;
}
#linkbox h2 {
  text-align: center;
  font-size: 1.5em;
}
#linkbox li {
  margin-top: 3px;
}
/* ------------------------------------------------------------------------ */
/* Page compare grid */
.grid-wrapper {
  display: grid;
  grid-template-columns: max-content max-content;
  grid-column-gap: 2em;
  grid-row-gap: 2px;
}
/* ------------------------------------------------------------------------ */
/* Project Page */
li.spaced {
  margin: 1em 0;
}
.thin-heading {
  margin-bottom: 0.2em;
}
.thin-para {
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}
.list-head {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.blurb-box {
  width: 100%;
  max-width: 630px;
  background-color: #dddddd;
}
.project-comments,
.post-processor-comments,
.sr-instructions {
  background-color: #cccccc;
}
#event_subscriptions th,
#project_holds th,
#event_subscriptions td,
#project_holds td {
  padding-right: 1em;
}
.checkbox-cell {
  text-align: center;
}
.checkbox-cell-selected {
  text-align: center;
  background-color: #ccffcc;
}
.transition-disabled {
  color: #9a9a9a;
}
/* ------------------------------------------------------------------------ */
/* Review Work */
td.has-diff {
  /* we use !important so this overrides the bg color in striped tables */
  background-color: #ccffcc !important;
}
/* ------------------------------------------------------------------------ */
/* CharSuite Explorer */
.gs-char {
  font-size: 1.5em;
}
.gs-codepoint {
  font-size: 0.7em;
}
/* ------------------------------------------------------------------------ */
/* replace text validator */
.replace_check {
  height: 20em;
  width: 50em;
  border: thin solid #000000;
}
/* ------------------------------------------------------------------------ */
/* Completed Project Listings */
.book-title {
  font-weight: bold;
}
/* ------------------------------------------------------------------------ */
/* Task Center */
div.task-nav {
  padding: 0.5em 0;
}
div.task-comment-title a.perma {
  color: #9a9a9a;
  font-size: small;
  text-decoration: none;
}
div.task-comment {
  border-left: thick solid #e0e8dd;
  padding-left: 1em;
  margin-bottom: 1em;
}
div.task-comment .task-comment-body {
  margin-left: 1em;
  word-break: break-word;
}
div.task-detail {
  display: flex;
  align-items: flex-start;
  width: 100%;
}
table.task-detail-block {
  border: thin solid #000000;
  margin: 0 0.1em;
  width: 50%;
  flex-grow: 1;
  flex-basis: auto;
}
table.task-detail-block tr th,
table.task-detail-block tr td {
  padding: 0.1em 0.5em 0.1em 0.5em;
  height: 1.5em;
}
table.task-detail-block tr th {
  background-color: #e0e8dd;
  white-space: nowrap;
}
table.task-detail-block tr td {
  background-color: #ffffff;
  width: 100%;
}
/* For small enough screens, make the two columns as two rows instead. */
@media only screen and (max-width: 768px) {
  div.task-detail {
    flex-direction: column;
  }
  table.task-detail-block {
    margin: 0.1em 0;
    width: 100%;
  }
}
/* ------------------------------------------------------------------------ */
/* Mentoring */
/* Text colors and sizes for the message mentors see on the P2 round page */
p.mentor-recent {
  color: #339933;
  font-weight: bold;
  text-align: center;
}
p.mentor-older {
  color: #ff6600;
  font-size: large;
  font-weight: bold;
  text-align: center;
}
p.mentor-oldest {
  color: #ff0000;
  font-size: x-large;
  font-weight: bold;
  text-align: center;
}
/* ------------------------------------------------------------------------ */
/* Diff styling */
/* Import diff styling from MediaWiki */
/*!
 * Diff rendering
 */

.diff {
	border: 0;
	border-spacing: 4px;
	margin: 0;
	width: 100%;
	/* Ensure that colums are of equal width */
	table-layout: fixed;
}

.diff td {
	padding: 0.33em 0.5em;
}

.diff td.diff-marker {
	/* Compensate padding for increased font-size */
	padding: 0.25em;
}

.diff col.diff-marker {
	width: 2%;
}

.diff .diff-content {
	width: 48%;
}

.diff td div {
	/* Force-wrap very long lines such as URLs or page-widening char strings */
	word-wrap: break-word;
}

.diff-title {
	vertical-align: top;
}

.diff-notice,
.diff-multi,
.diff-otitle,
.diff-ntitle {
	text-align: center;
}

.diff-lineno {
	font-weight: bold;
}

td.diff-marker {
	text-align: right;
	font-weight: bold;
	font-size: 1.25em;
	line-height: 1.2;
}

.diff-addedline,
.diff-deletedline,
.diff-context {
	font-size: 88%;
	line-height: 1.6;
	vertical-align: top;
	white-space: -moz-pre-wrap;
	white-space: pre-wrap;
	border-style: solid;
	border-width: 1px 1px 1px 4px;
	border-radius: 0.33em;
}

.diff-addedline {
	border-color: #a3d3ff;
}

.diff-deletedline {
	border-color: #ffe49c;
}

.diff-context {
	background: #f8f9fa;
	border-color: #eaecf0;
	color: #222;
}

.diffchange {
	font-weight: bold;
	text-decoration: none;
}

.diff-addedline .diffchange,
.diff-deletedline .diffchange {
	border-radius: 0.33em;
	padding: 0.25em 0;
}

.diff-addedline .diffchange {
	background: #d8ecff;
}

.diff-deletedline .diffchange {
	background: #feeec8;
}

/* Correct user & content directionality when viewing a diff */
.diff-currentversion-title,
.diff {
	direction: ltr;
	unicode-bidi: embed;
}

/* @noflip */ .diff-contentalign-right td {
	direction: rtl;
	unicode-bidi: embed;
}

/* @noflip */ .diff-contentalign-left td {
	direction: ltr;
	unicode-bidi: embed;
}

.diff-multi,
.diff-otitle,
.diff-ntitle,
.diff-lineno {
	direction: ltr !important; /* stylelint-disable-line declaration-no-important */
	unicode-bidi: embed;
}

/*!
 * Wikidiff2 rendering for moved paragraphs
 */

.mw-diff-movedpara-left,
.mw-diff-movedpara-right,
.mw-diff-movedpara-left:visited,
.mw-diff-movedpara-right:visited,
.mw-diff-movedpara-left:active,
.mw-diff-movedpara-right:active {
	display: block;
	color: transparent;
}

.mw-diff-movedpara-left:hover,
.mw-diff-movedpara-right:hover {
	text-decoration: none;
	color: transparent;
}

.mw-diff-movedpara-left:after,
.mw-diff-movedpara-right:after {
	display: block;
	color: #222;
	margin-top: -1.25em;
}

.mw-diff-movedpara-left:after,
.rtl .mw-diff-movedpara-right:after {
	content: '↪';
}

.mw-diff-movedpara-right:after,
.rtl .mw-diff-movedpara-left:after {
	content: '↩';
}

/* ------------------------------------------------------------------------ */
