@charset "utf-8";

body {
    font-family: Verdana, Arial, Helvetica, sans-serif; 
    font-size: 80%; 
    margin: 0 auto; 
    padding: 0;
    max-width: 1200px;
}
@media screen and (min-width: 1200px) {
    footer {
        border-left: thin solid #007b33;  /* A dark green, used for borders */
        border-right: thin solid #007b33;
    }
}

pre {
    font-size: 105%;
}
code {
    font-size: 105%;
}
table {
    font-size: 100%;
}
input.green {
    background-color: #c7e2c7;
}
h1 {
    font-size: 140%; 
    color: #cc3333;
}
h2 {
    font-size: 120%;
}
h3 {
    font-size: 100%;
}
img {
    border: none
}
abbr {
    text-decoration: underline dotted;
    cursor: help;
}
a, a:link, a:visited {
    color: #007b33;
    text-decoration: none;
}
a:active {
    color: #cc6666;
    text-decoration: none;
}
a:hover {
    color: #cc3333;
    text-decoration: none;
}
@media print {
    th a, th a:link, th a:visited {
        color: black;
    }
}
figcaption {
    font-style: italic;
    font-size: 90%;
    text-align: center;
}

.smalltext {
    font-size: 85%;
}

.nowrap, table.sidehead th, td.created-cell {
    white-space: nowrap;
}

.label, .success {
    color: #007b33;
}

.vtight > * {
    margin-top: 0; 
    margin-bottom: 0;
}

div.auto_complete {
    text-align: left;
    width: 150px;
    background: #fff;
}
div.auto_complete ul {
    border: 1px solid #888;
    margin: 0;
    padding: 0;
    width: 100%;
    list-style-type: none;
}
div.auto_complete ul li {
    margin: 0;
    padding: 3px;
}
div.auto_complete ul li.selected {
    background-color: #c7e2c7;
}
div.auto_complete ul strong.highlight {
    color: #800;
    margin: 0;
    padding: 0;
}

.error, .red, .admin {
    color: #cc3333; /* Persian red: Dove's preferred shade of red */
}
.darkred {
    color: #aa0000; /* Dark red: works better on darker backgrounds */
}
.grey {
    color: #a9a9a9; /* Dark(ish) grey */
}
.highlight-link {
    text-decoration: underline dotted;
    text-decoration-skip: none;
    text-decoration-skip-ink: none;
}
.highlighted-link {
    text-decoration: underline #aa0000;
    text-decoration-thickness: 0.15em;
    text-decoration-width: 0.15em;
    text-decoration-skip: none;
    text-decoration-skip-ink: none;
}

.small {
    font-size: 75%;
}
.note {
    font-style: italic;
}
.control {
    font-style: normal;
}
.right {
    float: right;
}
.left {
    float: left;
}
.loffset::before {
    content: '\2003';
}
ul.control {
    display: block;
    margin-left: 0em;
    padding-left: 0em;
}
ul.control.inline {
    display: inline-block;
    margin-top: 0; 
    margin-bottom: 0;
}
ul.control li {
    display: inline-block;
}
ul.control li.dead {
    color: #aaa;
}
.control:not(.bare)::before {
    content: '[\202F';
    color: black;
}
.control.loffset::before {
    content: '\2003[\202F';
}
.control:not(.bare)::after {
    content: '\202F]';
    color: black;
}
ul.control > li + li::before {
    content: '\202F|\202F';
    color: black;
}
.admin.control::before, .admin.control::after,
ul.admin.control > li + li::before {
    color: #cc3333; /* Persian red: Dove's preferred shade of red */
}

.adminnote::before {
    content: '[';
    color: #cc3333; /* Persian red: Dove's preferred shade of red */
}
.adminnote::after {
    content: ']';
    color: #cc3333; /* Persian red: Dove's preferred shade of red */
}

.control .pageno:first-child::before,
.control .pageno:last-child::after {
    content: ' ';
    display: inline-block;
    width: 0.2em;
}
.control .pageno + .pageno::before {
    content: ' ';
    display: inline-block;
    width: 0.6em;
}
q.single:before {
    content: '‘';
}
q.single:after {
    content: '’';
}

div.fieldrow, fieldset, .form-instructions {
    margin-top: 1em;
}

@media screen {
    th.sort-asc::after {
        content: "\25B2";
        color: #007b33;
    }
    th.sort-desc::after {
        content: "\25BC";
        color: #007b33;
    }
}

table.sidehead table > * > tr > :first-child,
table.sidehead table > * > tr,
table.sidehead table > *,
table.sidehead table,
div.fieldrow   table > * > tr > :first-child,
div.fieldrow   table > * > tr,
div.fieldrow   table > *,
div.fieldrow   table  {
    margin-left: 0;
    padding-left: 0;
}

div.fieldrow:first-child {
    margin-top: 0em;
}

div.fieldrow > div, fieldset > div, div.fieldrow > .field, fieldset > .field,
table.sidehead > tbody > tr > td > .field {
    vertical-align: top;
    display: inline-block;
}

div.fieldrow div.fieldrow, fieldset div.fieldrow {
    display: block;
}

label, legend, div.fieldrow div.label {
    font-weight: bold;
    display: block;
    color: black;
}

input.link[type='submit'] {
    background: none;
    border: none;
    color: #007b33;
    text-decoration: none;
    cursor: pointer;
    padding: 0;
}

input[type='checkbox'], input[type='checkbox'] + label,
input[type='radio'], input[type='radio'] + label {
    vertical-align: middle;
    display: inline-block;
}

input[type='checkbox'] + label,
input[type='radio'] + label {
    margin-left: 1em;
}

input:focus::placeholder {
    color: transparent;
}

.fieldrow.htight input[type='checkbox'] + label,
.fieldrow.htight input[type='radio'] + label {
    margin-left: 0;
}

input.fullwidth, select.fullwidth {
    box-sizing: border-box;
    width: 100%;
}

.label-extra, th .extra, h1 .extra, h2 .extra, h3 .extra {
    font-weight: normal;
}

fieldset {
    border: thin solid #007b33;  /* A dark green, used for borders */
}

tr.rule-below {
    border-bottom: thin solid #007b33;  /* A dark green, used for borders */
}

table.sidehead > tbody > tr > th {
    text-align: right;
}

table.sidehead > tbody > tr > td:only-of-type { 
    width: 100%;
}

table.sidehead.diff > tbody > tr > td,
table.sidehead.diff3 > tbody > tr > td { 
    width: auto; 
}

table.topalign > tbody > tr > * {
    vertical-align: top;
}

table.stripe {
    border-collapse: collapse;
}

table.stripe > tbody > tr > * {
     padding: 2pt 4pt;
}

@media screen {
    table.stripe > tbody > tr:nth-child(even) {
        background-color: #eff7ef;
    }

    table.stripe > tbody > tr:nth-child(odd) {
        background-color: #ffffff;
    }

    table.stripe.spaced > tbody > tr > * {
        padding: 4pt 4pt;
    }

    
    div.table-scroller {
        border: thin solid #999999;
        overflow-x: auto;
    }

    .panel div.table-scroller {
        border: none;
    }

    div.panel > div.table-scroller {
        padding: 0;
        width: 100%;
    }
    
    div.table-scroller > table {
        width: 100%;
        border: none;
    }
}

p:first-child {
    margin-top: 0;
}

p:last-child {
    margin-bottom: 0;
}

.warning::before, .error::before {
    content: "\26A0\FE0F\A0";
    font-family: "apple color emoji", "segoe ui emoji", "noto color emoji", 
                 "android emoji", "emojisymbols", "emojione mozilla", 
                 "twemoji mozilla", "segoe ui symbol";
    font-size: 150%;
}
.success::before {
    content: "\2714\A0";
    font-family: "apple color emoji", "segoe ui emoji", "noto color emoji", 
                 "android emoji", "emojisymbols", "emojione mozilla", 
                 "twemoji mozilla", "segoe ui symbol";
    font-size: 150%;
}

@media screen {
    div.text-page, .fixedwidth, .sidemenu {
        max-width: 60em;
    }
}

fieldset.fixedwidth > table {
    width: 100%;
}

.pad {
    margin-top: 1em;
}

.panel {
    border: thin solid #999999;
    border-collapse: collapse;
}

.panel thead, .panel .header {
    background: #c7e2c7 url(/images/channelBG.jpg) repeat-x bottom;
}

.panel thead, .panel .header:not(:last-child) {
    border-bottom: thin solid #999999;
}

.panel .header2 {
    background: #dbecdb;
}

.panel > .body {
    background: white;
}

.panel > div.header {
    font-weight: bold;
}

a.header {
    display: block;
    font-weight: bold;
}

.panel.pad, tr.totals,
table.panel > tbody > tr.header:not(:first-child), 
div.panel > div.header:not(:first-child),
div.panel > table:not(:first-child),
div.panel > .table-scroller:not(:first-child) > table {
    border-top: thin solid #999999;
}

@media screen {
    .panel tfoot, .panel .footer {
        background-color: #eff7ef;
    }
}
.panel tfoot, .panel .footer {
    border-top: thin solid #999999;
}

div.panel.narrow {
    display: inline-block;
}

div.panel > *, 
nav.panel > *  {
    padding: 6px 6px;
    width: calc(100% - 2*6px);
}

div.panel > table {
    padding: 0;
    width: 100%;
}

div.panel.vtight > * {
    padding: 0px 6px;
}

@media screen {
    table.panel:not(.stripe) > tbody, div.panel, nav.panel {
        background-color: #eff7ef;
    }
}

table.panel > tbody > tr:first-child > td,
div.panel > table > tbody > tr:first-child > *,
div.panel > .table-scroller > table > tbody > tr:first-child > * {
    padding-top: 6px;
}

table.panel > tbody > tr:last-child > *,
div.panel > table > tbody > tr:last-child > *,
div.panel > .table-scroller > table > tbody > tr:last-child > * {
    padding-bottom: 6px;
}

table.panel > * > tr > :first-child,
div.panel > table > * > tr > :first-child,
div.panel > .table-scroller > table > * > tr > :first-child {
    padding-left: 6px;
}

table.panel > * > tr > :last-child,
div.panel > table > * > tr > :last-child,
div.panel > .table-scroller > table > * > tr > :last-child {
    padding-right: 6px;
}

table.panel > thead > tr > th,
div.panel > table > thead > tr > th,
div.panel > .table-scroller > table > thead > tr > th {
    padding: 6px 6px;
}

table.panel > thead > tr > th:not([align]) {
    text-align: left;
}

.panel + .panel:not(.pad) {
    border-top: none;
}

td.diff-right {
    border-right: 4pt solid #cc3333;
}

td.diff-left {
    border-left: 4pt solid #cc3333;
}

tr.diff-merged {
    border-left: 2pt solid #007b33;
    border-right: 2pt solid #007b33;
}

header, footer {
    width: 100%;
    clear: both;
}

@media screen {
    main {
        clear: both;
        padding: 0 12px 12px 12px;
        width: calc(100% - 2*12px);
    }
}

table.page {
    width: 100%;
}

table.page > tbody > tr > td {
    padding: 6px;
    border: none;
    vertical-align: top;
}
table.page > tbody > tr:first-child > td {
    padding-top: 0;
}
table.page > tbody > tr:last-child > td {
    padding-bottom: 0;
}
table.page > tbody > tr > td:first-child {
    padding-left: 0;
}
table.page > tbody > tr > td:last-child {
    padding-right: 0;
}

table.page > tbody > tr > td > .panel {
    width: 100%;
}

.flex {
  display: flex;
  flex-flow: row wrap;
  margin: -6px -6px;
}

.flexcol {
  flex: 1;
  margin: 6px 6px;
  min-width: 300px;
}

.flexcol.flexcol-narrow {
    min-width: 250px;
}

.flexcol.flexcol-wide {
    flex-grow: 5;
}

.flexcol.flexcol-medium {
    flex-grow: 3;
}

header::before {
    display: block;
    content: "";
    height: 10px;
    background: #007b33 url(/images/headBG.gif) repeat-x bottom;
}

footer {
    background: #f0f0f0;
    border-top: thin solid #007b33;
    padding-top: 8px;
}

header .left, footer .left {
    margin: 0px 0px 3px 12px;
    clear: left;
}

header .right, footer .right {
    clear: right;
}

footer .right {
    margin: 0px 12px 3px 0px;
}

@font-face {
    font-family: "Libertinus Serif";
    src: url(/fonts/LibertinusSerif-Italic.woff) format('woff');
    font-weight: normal;
    font-style: italic;
}

header a.title {
    color: #666;
    font-family: "Libertinus Serif", "Linux Libertine", "Times New Roman", 
                 serif;
    font-style: italic;
    font-size: 240%;
    text-decoration: underline;
    text-decoration-color: #007b33;
    margin: 6px;
    display: inline-block;
    padding-right: 3px;
    padding-left: 3px;
}

.header-search {
    margin: 3px;
    padding-top: 12px; 
}

header .search input {
    width: 200px;
}

@media screen and (max-width: 800px) {
    .widescreen, a.header.widescreen {
        display: none;
    }

    .topnav {
        display: none;
    }

    #show-navigation:target .topnav {
        display: block;
        position: absolute;
        width: 100%;
        top: 10px;
        right: 0;
        background: #eff7ef;

        box-sizing: border-box;
        padding: 12px;
        
        border-bottom: thin solid #999999;
    }

    .topnav ul {
        list-style-type: none;
        padding: 0;
    }

    .topnav ul li {
        font-size: 150%;
        padding: 6px;
    }

    .header-search {
        box-sizing: border-box;

        display: flex;
        overflow:hidden;
        position: absolute;
        top: 10px;
        right: 0;
        margin: 0;
        padding: 6px 12px 0;

        height: 0;
    }

    #show-search:target .header-search {
        height: 42px;
        background: white;
    }
    
    #show-advanced-search .advanced-search {
        display: none;
    }
    
    #show-advanced-search:target .advanced-search {
        display: block;
    }
    
    #show-advanced-search:target .link-advanced-search-open {
        display: none;
    }

    .header-search input {
        flex-grow: 1;
    }

    .header-icon-close, .header-icon-topnav-open, .header-icon-search-open {
        display: inline-block;
        width: 26px;
        height: 26px;
        font-size: 20px;
        margin-left: 6px;
        text-align: center;
    }
    .header-icon-search-open {
        transform: rotate(45deg);
        font-size: 26px;
        margin-top: 9px;
    }

    .flex-widescreen > .flexcol {
        width: 100%;
    }
}

@media not screen and (max-width: 800px) {
    .smallscreen, a.header.smallscreen {
        display: none;
    }

    .header-content::before {
        float: left;
        vertical-align: middle;
        content: "";
        width: 68px;
        height: 66px;
        background: url(/images/logo-small.png) no-repeat;
        margin: 6px 6px 6px 0;
    }

    .topnav {
        text-align: right;
    }
    
    .topnav ul {
        display: block;
        margin: 0;
    }
    .topnav ul li {
        display: inline-block;
    }

    .topnav ul > li + li::before {
        content: '\202F|\202F';
        color: black;
    }
    
    .flex-widescreen {
        display: flex;
        flex-flow: row wrap;
        margin: -6px -6px;
    }

    table.sidehead > * > tr > :first-child {
        width: 12em;
    }
}

.header-content {
    padding: 0 12px;
}


footer::after, header::after {
    content: "";
    display: table;
    clear: both;
}

footer.favourites {
    border-top: thin solid #AA0000;
}

header .favourites {
    padding-left: 12px;
    background: #E6D3D7;
}

header .favourites::before {
    background: #AA0000 url(images/headFavsBG.gif) repeat-x bottom;
}

nav > ul.control {
    margin: 0;
}

.cracked {
    background-color: #ffefef !important;
}

.hung-dead {
    font-style: italic;
}

@media print {
    nav, .control, .nav {
        display: none !important;
    }
    table.stripe.spaced > tbody > tr > * {
        padding-top: 1pt;
        padding-bottom: 0pt;
    }
    .panel.wide {
        border: none;
    }
}

table.panel:target, div.panel:target {
    border: 2pt solid #cc3333;
}

td.highlight-slot {
    padding: 0 !important;
    width: 2pt;
}

tr.highlight td.highlight-slot {
    background-color: #cc3333;
}

tr.clickable-row > td {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

tr.clickable-row > td > a {
    display: block;
    padding-right: 5px;
}

tr.clickable-row:hover > td > a {
    color: #cc3333;
}

ul.tight {
    margin: 0;
    padding: 0;
    list-style: none;
}

ul.tight:not(.nobullet) li::before {
    content: "· ";
}

ul.tight li.spacer {
    height: 1em;
}

img.border {
    border: thin solid #999999;
}

.help {
    font-size: 135%;
    line-height: 0.75em;
    cursor: help;
    float: right;
}

.ui-autocomplete {
    max-height: 200px;
    max-width: 500px;
    overflow-y: auto;
    overflow-x: hidden;
    display: block;
}
/* IE 6 doesn't support max-height */
* html .ui-autocomplete {
    height: 200px;
}
.ui-autocomplete .ui-menu-item { 
    font-size: 90%;
    display: block;
    padding-right: 0;
    margin-right: 0;
}
.ui-autocomplete .ui-menu-item a { 
    text-decoration: none;
}
.ui-menu-item .ui-menu-item-wrapper {
    padding-top: 1.5pt;
    padding-bottom: 1.5pt;
    margin: 0;
    border: thin solid white;
    background: white;
    color: black;
    display: block;
    padding-left: 2.4em;
    text-indent: -2em;
}
.ui-menu-item .ui-menu-item-wrapper.ui-state-active {
    background: #eff7ef;
    border: thin solid #007b33; 
    z-index: 1;
}