html {
    height: 100%;
    font-size: 90%; /* Make rem units work as expected. */
}

/* Prevent automatic adjustment of font sizes in some mobile browsers
 * (Safari).*/
@media screen and (max-width: 650px){
  html { -webkit-text-size-adjust: 100%; }
}

body {
    min-height: 100%;
    font-family: "Lucida Grande", Verdana, Geneva, Lucida, 
        Arial, Helvetica, sans-serif;
    color: #222;
    background-color: #F6F8E3;  /* cream background used by RW */
    margin: 0em;
}

h1 {
    color: #E60000; /* approximation of the RW red. */
    font-size: 150%;
    font-weight: normal;
    vertical-align: bottom;
    margin: 0;
    margin-bottom: 0.5em; 
    width: 100%;
    padding-top: 0.5em;
    clear: left;
}

h2 {
    font-size: 125%;
    margin-bottom: 0.5em;
    margin-top: 0.75rem;
}

h3 {
    font-size: 100%;
    margin-bottom: 0.5em;
}   

#page-header h1 {
  font-size: 180%; /* Make main page title bigger. */

  /* Remove margin in header and vertically centre. 48px is the height of the
   * masthead.*/
  padding: calc((48px - 1em) / 2) 0;
  margin: 0;
  line-height: 1em;
}

#page-header #left-header a {
  /* Set height of link to that of masthead image. */
  display: block;
  height: 48px;
}

#page-footer, .note {
    margin-top: 0.5em;
    padding: 0 0.5rem;
    font-size: 75%;
}

#page-menu, #page-content {
  padding-bottom: 1em;
}

.rungat {
    margin-top: 1.5em;
}

a, a:link, a:visited {
    color: blue;
    text-decoration: none;
}

h1 a, h1 a:link, h1 a:visited {
    color: #E60000;
}

address {
    margin-left: 1em;
}

p, .performance div {
    margin: 0.25em 0;
}

.performance div.footnote {
    margin: 0.5em 0;
    max-width: 30em;
}

.featured-perf .performance div.footnote {
    margin: 0.25em 0;
    max-width: 40em;
}

.attempt-head, .typesetter-note, .comp-url {
    font-style: italic;
}

.association, .place, .changes, .title, .donation {
    font-weight: bold;
}

.full-place a, .association a {
    color: black;
}

.full-place a:hover, .association a:hover {
    color: blue;
}

.title.unknown {
    font-style: italic;
}

/* Stop place and title fields being made bold erroneously.*/
#performances .place, #performances .title, #towers .place,
.other-rated .place, .other-rated .title {
    font-weight: normal;
}

.performance div.ringers {
    margin: 0.25em 1em;
}

.performance div.ringers.general-perf {
  margin: 0;
}

.bell { 
    float: left;
    position: relative;
    width: 2em;
    left: 0em;
}

.handbells .bell, .two-in-hand .bell {
    width: 3.375em;
}

.four-in-hand .bell {
    width: 6.5em;
}

.six-in-hand .bell {
    width: 14ch;
}

.eight-in-hand .bell {
    width: 18ch;
}

.ten-in-hand .bell {
    width: 23.5ch;
}

.twelve-in-hand .bell {
    width: 29.5ch;
}

.annotation {
    font-size: 87.5%;
}

/* Put ul.control er so it has greater specificity */
.annotation ul.control {
    font-size: 85.7%;  /* 87.5% * 85.7% = 75% */
    padding-top: 0em;
    margin-top: 0.5em;
}

.annotation .metadata {
    font-size: 85.7%;  /* 87.5% * 85.7% = 75% */
    padding-top: 0em;
    margin-top: 0em;
}

.source, .metadata {
    margin-top: 1.5em;
    clear: left;
}

div.ballot-dp p, .source, .metadata {
  color: #aaa;
  font-size: 75%;
}

.metadata + .metadata {
    margin-top: 0em;
}

.hoax, .deleted, .unpaid, .dup, .your-dup {
    color: #E60000;
    margin-top: 1.5em;
    font-size: 75%;
}

.possible-dup {
    margin-top: 1.5em;
    font-size: 75%;
}

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

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

div.fieldrow > div, fieldset > div, div.fieldrow > .field, fieldset > .field {
  display: inline-block;
  vertical-align: top;
}

div.fieldrow > div.nolabel, fieldset > div.nolabel,
div.fieldrow > .field.nolabel, fieldset > .field.nolabel {
  vertical-align: bottom;
}

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

label, legend, .label {
    font-weight: bold;
    display: block;
    margin: 0;
}

div.field {
  max-width: 50em;
  margin: 0.1em;
}

/* Indent subfields from the main field.*/
div.subfield {
  margin: 0.5em 0.75em;
}

/* Stop first line of checkbox/radio labels from wrapping under the control. */
div.field.checkbox, div.field.radio {
  white-space: nowrap;
  /* Increase padding to right. Is obeyed, but quite lax due to nowrap.*/
  padding-right: 2.5em;
}

input[type='checkbox'], input[type='checkbox'] + label,
input[type='radio'], input[type='radio'] + label,
input[type='radio'], input[type='radio'] + label > .label-extra > .field {
  display: inline-block;
  font-weight: normal;
  white-space: normal;
}

input[type='radio'] + label, input[type='checkbox'] + label {
  vertical-align: bottom;
  padding-left: 1.2em;
  /* Offset first line left to indent subsequent wrapped lines.*/
  text-indent: -0.7em;
  /* Increase vertical spacing between controls.*/
  margin: 0.1em 0;
}

input[type='radio'], input[type='checkbox'] {
  /* Approx. align text baseline to control bottom. */
  vertical-align: top;
  width: 1em;
  height: 1em;
  padding: 0;
  /* Increase vertical spacing between controls.*/
  margin: 0.1em 0;
}

.label-extra {
    font-weight: normal;
}

/* When using checkbox groups have the parent checkbox label bold. */
input[type='checkbox'] + label.group-label {
  font-weight: bold;
}
/* Indent group children. */
div.group-children {
  margin-left: 0.5em;
}

/* Highlight readonly textarea by setting background colour to page background
 * colour. */
textarea[readonly=''] {
  background-color:#F6F8E3;
}

.missing { 
    color: white;
    background-color: white;
}

.error, .adminact, .analystact, .adminnote, .negative.number, .missing,
.warning {
    color: #E60000;
}

.ok, .complete {
    color: green;
}

.section, section, .performance {
    margin-bottom: 2em;
}

fieldset .section, fieldset section {
    margin-bottom: 0;
}

form + .section, form + section {
    margin-top: 1em;
}

.section + .section, .section + section, section + .section, section + section {
    margin-top: -1em;
}

.navigation, .details {
    font-size: 87.5%;
}

table + .navigation {
    margin-top: 2em;
}

table {
    border-collapse: collapse;
}

td + td, th + th {
    padding-left: 1em;
}

th {
    font-weight: bold;
    text-align: left;
}

th.vertical {
    writing-mode: vertical-rl;
}

tr.bottom-align > th, tr.bottom-align > td {
    vertical-align: bottom;
}

tr.top-align > th, tr.top-align > td {
    vertical-align: top;
    text-align: right;
}

tr + tr > th, tr + tr > th ~ td {
    padding-top: 0.5em;
    vertical-align: top;
}

input#changes, input#duration, input#age {
    width: 6em;
}

input#tenor_size {
    width: 8em;
}

fieldset.ringers label {
    width: 1.5em;
    padding-right: 0.2em;
    float: left;
    padding-left: 0.2em;
}

fieldset.handbells label {
    width: 3.75em;
}

fieldset {
    border: 1px solid #AD9A62;
}

ul.control, div.empty.control {
    display: block;
    margin-left: 0em;
    padding-left: 0em;
}

#perf-wrapper ul.control {
    padding-top: 2em;
}

ul.form-control {
  margin-top: 0.5em;
}

li ul.control {
    display: inline-block;
}

.control > li {
    display: inline;
}

.control > li + li:before {
    content: ' | ';
    padding-left: 0.3em;
    padding-right: 0.3em;
    color: #000;
}

li.dead {
    color: #aaa;
}

.control {
    font-style: normal;
}

.control:before, .adminact:before, .analystact:before {
    content: '[';
    padding-right: 0.3em;
}

.control:after, .adminact:after, .analystact:after {
    content: ']';
    padding-left: 0.3em;
}

ul.control:before, ul.adminact:before, ul.analystact:before {
    content: '[ ';
    padding-right: 0.3em;
}

ul.control:after, ul.analystact:after {
    content: ' ]';
    padding-left: 0.3em;
}

ul.adminact:after {
    content: ' ] (as administrator)';
    padding-left: 0.3em;
}

.empty.control:before, .empty.control:after,
ul.empty.control:before, ul.empty.control:after {
    content: '';
}

ul.control.inline {
  display: inline;
  padding: 0;
}

.undo-ui-menu.ui-menu { 
    display: inline-block;
    background: #F6F8E3; 
    border: none;
    margin: 0;
}

.undo-ui-menu.ui-menu .ui-menu-icon { 
    display: none;
}

.undo-ui-menu.ui-menu .ui-state-focus,
.undo-ui-menu.ui-menu .ui-state-active {
    background: #F6F8E3; 
    border: none;
}

.undo-ui-menu .ui-widget {
    font-family: "Lucida Grande", Verdana, Geneva, Lucida, 
        Arial, Helvetica, sans-serif;
    font-size: 90% !important;
}


#page-header, #left-header, #page-main, #page-menu, #page-footer {
    vertical-align: top;
}

#page-header, #page-footer {
    width: 100%;
}

#left-header, #page-menu {
    width: 150px;
}

#page-header {
    border-bottom: 2px solid #AD9A62; /* brown colour used by RW */
}

#page-footer, hr {
    border-top: 2px solid #AD9A62; /* brown colour used by RW */
}

#page-content, #right-header {
    width: 100%;
}

#right-header {
    position: relative;
}

#whoami {
    position: absolute;
    right: 1em;
    bottom: 0.15em;
    font-size: 75%;
}


#page-menu ul, .footer {
    padding-left: 15px;
}

#menu-ad {
    margin-left: 15px;
    margin-bottom: 0.5em;
    border: none;
}

a img {
    border: none;
}

#page-menu li {
    list-style-type: none;
}

.typeset-peal {
    width: 50em;
    text-indent: 1em; 
    text-align: justify;
    vertical-align: top;
}

.typeset-peal .donation  {
    float: right;
}

.edit-typeset {
    width: 25em;
    vertical-align: top;
}

.edit-typeset + td {
    vertical-align: top;
}

.paragraphs, .footnote, .details, .typesetter-note, .caption, .annotation {
    max-width: 40em;
    overflow-wrap: anywhere;
}

.paragraphs p + p {
    margin-top: 0.75em;
}

q:before {
    content: '\201C';
}

q:after {
    content: '\201D';
}

.atright {
    float: right;
}

.features .date, .all-features .date  {
    font-weight: bold;
}

table.features, table.all-features {
  padding-left: 0;
}

table.features tr, table.all-features tr {
  margin-bottom: 0.5em;
  vertical-align: top;
}

table.all-features {
  max-width: 50em;
}

.like {
    margin-bottom: 1em;
}

.like, a#likethis, .small.control, p.small, div.small, td.small {
    font-size: 75%;
}

.medium.control, p.medium, div.medium, td.medium, button.medium, li.medium {
  font-size: 90%;
}

.like a#likethis {
    font-size: 100%;
}

#performance-ad {
    float: right;
    margin: 0em 2em 1em 2em;
}
@media screen and (max-width: 80em) {
  #performance-ad { 
    float: left;
    margin: 0.5em 0em 1em 0em;
  }
}

/* Mostly styling specific to the homepage. */
#current {
    float: right;
    width: 35em;
    padding-left: 2em;
    padding-right: 1em;
}

#front-page-ad {
    margin-top: 2em;
    margin-bottom: 0.5em;
    border: none;
}

#other-features, #news, #perf-wrapper, #thisissue {
    float: left;
}

#other-features {
    clear: left;
}

#other-features div.control {
  margin-top: 1em;
}

.wrap {
  white-space: normal;
}
.nowrap {
  white-space: nowrap;
}

/* Change from two column layout to one column. */
@media screen and (max-width: 81em) {
  #current {
    padding-left: 0em;
  }
  #current, #other-features, #news, #perf-wrapper, #thisissue {
    float: none;
    width: 95%;
    max-width: 40rem;
  }
}

#page-content h1 {
  border-top: 2px solid #E60000;
  margin-top: 1em;
}

#current div:first-of-type h1, td#page-content > h1:first-of-type {
  border-top: 0;
  padding-top: 0;
  margin-top: 0.75rem;
}

@media screen and (max-width: 81em) {
  #current div:first-of-type h1 {
    border-top: 2px solid #E60000;
    margin-top: 1em;
    padding-top: 0.5em;
  }
}

/* Stop main item width getting too large.*/
.main-item {
  max-width: 40em;
}

/* Make main items a little smaller than the welcome text on the homepage.*/
.main-item {
  font-size: 95%;
}

/* Make secondary items smaller. */
.secondary-item {
  font-size: 85%;
}

.linked-performances, .linked-events, .linked-pathways,
.proof, .music {
  font-size: 75%;
}

/* Make main homepage text all the same size on small screens. */
@media screen and (max-width: 81em){
  .main-item { font-size: 100%; }
  .secondary-item { font-size: 90%; }
}

/* Make text size more consistent across pages on small screens. */
@media screen and (max-device-width: 420px) {
  html { font-size: 11px; }
}

#current .other-rated {
    margin-right: 1em;
}

#current .other-rated + p {
    margin-top: 1em;
}

#current .other-rated .date,
#performances .date, .linked-performances .date, #users .date {
    white-space: nowrap;
} 

/* Don't wrap performance details on small devices in e.g. search. */
@media screen and (max-width: 80em) {
  /* Vertical align top to make reading results easier when text wraps. */
  table#performances td, table.other-rated td {
    vertical-align: top;
  }
  table#performances .place {
    min-width: 30ch;
  }
  table.other-rated .place {
    min-width: 24ch;
  }
  /* Only wrap very long performance titles.*/
  table#performances .title {
    min-width: 32ch;
  }
  table.other-rated .title {
    min-width: 27ch;
  }
}

/* Increase spacing between performance listings on small screens to make
 * clicking easier. */
@media screen and (max-device-width: 800px) {
  table#performances td { padding-bottom: 0.5em; }
}

/* Reduce horizontal table padding on small screens where horizontal space is
 * precious.*/
@media screen and (max-width: 460px) {
  td + td, th + th { padding-left: 0.5em; }
}

/* Add extra spacing before performances table to prevent issues with controls
 * overlap on list pages without pagination controls.*/
table#performances {
  margin-top: 1.5em;
}

.comp {
}

.comp .error, .comp p {
    white-space: normal;
    font-family: "Lucida Grande", Verdana, Geneva, Lucida, 
        Arial, Helvetica, sans-serif;
}

.diary td {
    vertical-align: top;
}

/* Fix day column width to be at least as wide as 'Wednesday'.*/
table.diary td.day {
  min-width: 9ch;
  text-align: right;
}
table.diary td.ordinal {
  min-width: 3ch;
  padding-left: 0.4em;
  text-align: center;
}
table.diary td.month {
  padding-left: 0.4em;
}
/* Set minimum width for time column to ensure alignment between tables.*/
table.diary td.time {
  min-width: 5ch;
}
.grey, .http-status {
    color: DarkGrey;
}

tr.Saturday > :first-child, tr.Saturday > :first-child + td, 
tr.Sunday   > :first-child, tr.Sunday   > :first-child + td  {
    color: #E60000;
}

tr.Sunday.lastofday {
    border-bottom: 1px solid #AD9A62; /* brown colour used by RW */
}

/* Additional separation between last entry of a day and the next day. */
tr.lastofday td {
  padding-bottom: 0.33em;
}

pre {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

.advanced {
    display: none;
}

th {
    vertical-align: top;
}

div.gallery {
    clear: left;
    padding-top: 1em;
}

div.gallery.thumb div.image {
    width: 100px;
    padding-right: 1em;
}

div.gallery div.image {
    vertical-align: top;
    display: inline-block;
}

/* Prevent extra lines of text shifting issue images upwards.*/
div.issue {
  vertical-align: top;
}

div.issue img /* , .major-news img */ {
    border: 1px solid #AD9A62; /* brown colour used by RW */
}

div.gallery .caption, div.issue .caption {
    font-size: 75%;
}

div.major-news {
    clear: both;
}

div.major-news .caption {
    font-style: italic;
    margin-bottom: 0.5em;
}

#performances .has_media .place {
    background: transparent url(/attach.png) center right no-repeat;
    padding-right: 19px;
}

.indented {
    margin-left: 1em;
    margin-top:  0em !important;
}

p.righttext {
    margin-left: 20%;
    margin-top:  0em;
    text-align:  right;
}

p.righttext + p.righttext {
    margin-top: 0em;
}

.statistics:not(.compact) * {
    padding-top: 0.5em;
    vertical-align: middle;
}

.number, .currency {
    text-align: right;
    width: 2em;
}

.statistics th {
    vertical-align: middle;
    text-align: center;
}

.disambiguator {
    color: #888;
}
.disambiguator:before, .ui-autocomplete .tenor:before {
    content: '(';
}
.disambiguator:after, .ui-autocomplete .tenor:after {
    content: ')';
}

@media print {
    #page-menu, #menu-ad, #performance-ad, #front-page-ad, 
    .control, .like, .footer-extra {
        display: none !important;
    }

    #left-header, #right-header {
        display: inline-block;
        width: auto;
    } 

    #page-footer {
        position: fixed;
        bottom: 0;
    }
}

.hilight {
    background: #FF8080;
}

code {
    background: #FFF;
}

.discount {
    color: #E60000;
}

span.discount {
  font-weight: bold;
}

span.additional-text {
  color: #555;
  margin-top: 1.5em;
  margin-right: 0.5em;
  font-size: 90%;
}

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

table.sidehead > tbody > tr > td {
    vertical-align: baseline;
}

table.stripe {
    border-collapse: collapse;
}

table.stripe > tbody > tr:nth-child(odd), tr.odd-row {
    background-color: #FCFDF3;  /* a paler cream */
}

table.stripe > * > tr > td {
    padding: 2pt 4pt;
    vertical-align: baseline;
}

table.stripe > * > tr > td:first-child {
    padding-left: 0;
}

table.stripe > * > tr > td:last-child {
    padding-right: 0;
}

table.stripe > thead > tr:last-child {
    border-bottom: thin solid black;
}

table.stripe > tfoot > tr:first-child {
    border-top: thin solid black;
}

button:not(.std), input[type=submit] {
  padding: 1pt 0.3em;
}

button.link, input.link {
  background: none!important;
  border: none;
  padding: 0!important;
  /*optional*/
  font-family: arial, sans-serif;
  /*input has OS specific font-family*/
  color: blue;
  cursor: pointer;
}

/* Styling for icons in nav menu in view.php.*/
ul.control .link-icon {
  vertical-align: middle;
}

ul#nav-menu span.fa-pencil-alt {
  font-size: 0.8em;
}

button.social-share {
  display: inline-block;
  height: 1.3em;

  border: 0;
  border-radius: 3px;
  cursor: pointer;
}

button.facebook-share {
  background: #1877f2;
  padding: 0 4px;
}

button.social-share img {
  display: block;
  vertical-align: middle;
  height: 0.8em;
}

button.facebook-share img {
  height: 1em;
}

/* Styling for ballots. */

form#ballot-creator, form#answer-ballot {
  margin-bottom: 1em;
}

input.newoption {
  margin-top: 0.5em;
}

div.ballot-field {
  display: block;
  margin: 1em 0;
}

table ul.small-table-control,
table ul.ballot-control,
table ul.shop-control,
table ul.tabulated-control,
table ul.contents-control {
  margin-top: 0;
  margin-bottom: 0;
}

p#ballot-submit-info {
  margin-top: 1em;
}

table.centre-columns tr th,
table.reduced-padding tr th,
table.centre-columns tr td,
table.reduced-padding tr td {
  padding: 0.3em 0.4em;
}

table.centre-columns tr th,
table.reduced-padding tr th {
  vertical-align: bottom;
}

table tr th.centre,
table tr td.centre {
  text-align :center;
}

table th.order-status {
  text-align: center;
  padding: 0.3em 0.4em;
}

div#ballot-more-link {
  margin-top: 0.5em;
}

li#ballot-more-link {
  font-weight: bold;
}

ul#dismiss-control-list {
  display: block;
  margin-left: 0em;
  padding-left: 0em;
  list-style-type: none;
}

div.fade {
  -webkit-mask-image: linear-gradient(to bottom, black, transparent 100%);
  mask-image: linear-gradient(to bottom, black, transparent 100%);
}

div.multifade {
  -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

div.store-profile-data {
  margin-top: 0.75em;
  /* Override fieldset > .field display: inline-block to allow margin
   * collapsing.
   */
  display: block;
}

input[type="checkbox"]#store_profile_data + label {
  font-weight: bold;
}

/* Ballot report styling.*/
table#responses-table {
  margin: 2em 0;
}

table#responses-table tr th,
table#responses-table tr td {
  padding: 0.3em 0.5em;
  text-align: center;
}

table#responses-table > thead > tr:first-child {
  border-top: thin solid black;
}

div.ballot-dp p:last-of-type {
  margin-bottom: 0;
}
div.ballot-dp div:last-of-type {
  margin-bottom: 0;
}

/* Styling for time selector. */
div.native-time, div.fieldrow > div.native-time, fieldset > div.native-time {
  display: none;
}

div.fallback-time span {
  display: inline-block;
}

/* Styling for place name input. */
span.selection-cancel-control {
  margin-left: 0.2em;
  display: none;
}
span.selection-cancel-control a {
  padding: 0.2em;
}

/* Styling for groups of checkboxes. */
div.fieldrow.groupedchk > div, div.fieldrow.groupedchk > .field {
  vertical-align: top;
}

/* Position selected tower text absolute to stop it affecting
 * form layout. Max. width is required for long tower names
 * e.g. Durham Cathedral
 * */
div.autofill-selection {
  position: absolute;
  max-width: 40em;
  padding-top: 0.25em;
}

/* styling for corrections tables */
table.correction, tr.correction, th.correction, td.correction {
  border: 1px solid black;
}

td.correction {
  padding: 2px 5px 2px 5px;
}

/* Make space for selected autofill text. */
div.field.has-autofill-selection {
  margin-bottom: 2.5em;
}
/* Can usually get away with slightly larger max width when in
 * fieldrow. This reduces unsightly name wrapping.
 */
div.fieldrow > div.field div.autofill-selection {
  max-width: 44.5em;
}
/* When in fieldrow we won't get margin collapsing from any fields
 * below, thus make the margin only just cover the field bottom.
 */
div.fieldrow > div.field.has-autofill-selection {
  margin-bottom: 1em;
}

/* When in a ballot use parent div.ballot-field to take care
 * of field spacing.
 */
div.ballot-field.tower > div.field.has-autofill-selection {
  margin-bottom: 0;
}
div.ballot-field.tower {
  margin-bottom: 2.5em;
}

/* Fieldset means max width must be smaller when on frontpage. */
#current fieldset div.field div.autofill-selection {
  max-width: 37em;
}

/* Styling for event type selector. */
span.event-type-desc {
  display: inline-block;
  max-width: 35em;
  margin: 0.5em 1em;
}
div.event-type {
  margin-top: 1em;
}

/* Styling for event responses table. */
table.event-responses td > ul.control {
  margin: 0;
}

table.event-responses td {
  padding: 0.5em;
}

/* Styling for new event page. */
div#video-url-field {
  margin-bottom: 1.5em;
}

/* Diary search styling */
div.fieldrow > fieldset.field {
  border: 0;
  padding: 0;
  margin:0;
}
div.fieldrow > fieldset.field > legend {
  padding: 0;
}

div.fieldrow.event-types {
  max-width: 50em;
}

/* Styling for event page. */
div#event-heading div {
  margin: 0.1em 0;
}
div#event-heading div:last-of-type {
  margin-bottom: 0.8em;
}
div#event-heading div#type {
  margin-top: 0.2em;
  font-weight: bold;
}

div.event-responses {
  display: inline-block;
  vertical-align: top;
  margin-right: 1em;
}
div.event-responses > p.metadata {
  max-width: 30em;
}

/* Styling for performances reports. */
div#perf-reports div.performance div.association {
  font-variant: small-caps;
  font-size: 120%;
}
div#perf-reports div.performance div.attribution a {
  color: #222;
}
/* Reduce bottom performance margin as we have explicit line breaks between
 * performances.
 */
div#perf-reports div.performance {
  margin-bottom: 0.8em;
}

/* Styling for tables with centred columns e.g. products list, stock history
 * etc. */
table.centre-columns tr th:not(.currency):not(.number):not(.left),
table.centre-columns tr td:not(.currency):not(.number):not(.left) {
  text-align: center;
}
table.centre-columns tr th.left,
table.centre-columns tr td.left {
  text-align: left;
}

/* Make products list scrollable (where necessary). */
table#products-list {
  display: block;
  white-space: nowrap;
  overflow-x: auto;
}

/* Admin page styling. */
div.admin-group, div.subscriptions-group {
  display: grid;
  column-gap: 1.5em;
}
div#performances-admin, div.subscriptions-group {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
div#site-admin,
div#rw-admin {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Allow some very wide elements to span 2 columns. */
div#site-admin > div.span-2-column {
  grid-column: span 2;
}
/* Collapse to single column on small screens to make dynamic wrapping work
 * properly.*/
@media screen and (max-width: 40em) {
  div#site-admin > div.span-2-column {
    grid-column: span 1;
  }
}

/* Fix alignment of fields with a date-picker in some browsers. */
img.ui-datepicker-trigger {
  margin: 0 3px;
}

/* Make current page bold in navigation menu. */
a.nav-active {
  font-weight: bold;
}

div.forminfo {
  margin-bottom: 1em;
}

/* Make asterisk red for required fields. */
span.required {
  color: #E60000;
}

/* Styling for cancelled 'X' in diary and associated tables.*/
td.cancelled {
  color: #E60000;
  min-width: 10px;
  padding-left: 0.5em;
}
td.cancelled + td {
  padding-left: 0.5em;
}

/* Styling for controls on list.php.*/
div.list-control {
  vertical-align: middle;
  margin: 0.1em;
}
div.list-control > div.checkbox {
  padding-right: 1em;
}
/*
 * Compensate for checkbox positioning so that the bottom of the checkbox is
 * in-line with the bottom of adjacent fields within the same fieldrow.
 */
div.inline-checkbox {
  vertical-align: bottom;
  position: relative;
  top: 0.2em;
  /* Increase spacing from elements on the left.*/
  margin-left: 0.2em;
}

/* Page content container to set fieldsets to the same (dynamic) width on the
 * Account page.*/
div#page-content-container {
  max-width: max-content;
}

/* Styling for text for which the help icon should be just right of. */
div.help-description {
  display: block;
}
div.help-description > .help-icon {
  margin-left: 1em;
}

/* Styling for inline help '?' icon image.*/
div.help-icon.inline {
  display:inline-block;
  vertical-align:middle;
  margin-left:0.2em;
}

/* Set colour of red '(?)' help text symbol.*/
a.help-link {
  color: #E60000;
}

/* Stop label text on preference selectors being longer than the fields.*/
select#hide_simulators, select#hide_automated {
  width: 25ch;
}
/* Stop label text on flag search selectors being longer than the fields.*/
div.fieldrow.advanced > div.field > select#simulated_sound,
div.fieldrow.advanced > div.field > select#automated_ringing {
  width: 15ch;
}

/* Hide collapsible menu checkbox. */
input#menutoggle {
  display: none;
}

/* Style collapsible menu icons. */
table#page-table label[for=menutoggle] {
  /* Hide by default. */
  display:none;

  padding-left: 0;

  /* Make mouse pointer behave like this is clickable link. */
  cursor: pointer;
}
table#page-table td#page-menu label[for=menutoggle] {
  font-size: 3rem;
}

/* Increase menu element spacings on small screens. */
@media screen and (max-device-width: 800px) {
  #page-menu li {
    padding-top: 0.4em;
  }
}

/* Collapse menu for small screen devices. */
@media screen and (max-width: 650px){
  /* Show collapsible navigation bar. */
  table#page-table label[for=menutoggle] {
      display: inline;
  }
  /* Show burger icon and close icon at appropriate times. */
  input#menutoggle ~ table label[for=menutoggle] span#menuclose,
  input#menutoggle:checked ~ table tr td label[for=menutoggle] span#menubars {
      display:none;
  }
  input#menutoggle:checked ~ table label[for=menutoggle] span#menuclose {
      display: inline;
  }

  /* Display and hide navigation links and RW masthead when appropriate. */
  div#menu-items, div#rw-mast {
      display: none;
  }
  input#menutoggle:checked ~ table div#menu-items,
  input#menutoggle:checked ~ table div#rw-mast {
      display: block;
  }

  /* Align menu icon in right header to BellBoard title. */
  td#right-header {
    vertical-align: middle;
    padding: 0.5rem;
  }
  td#right-header h1 {
    display: inline;
    font-size: 2.75rem;
    line-height: 3.5rem;
    vertical-align: baseline;
    padding: 0;
  }
  td#right-header label[for=menutoggle] {
    font-size: 3.5rem;
    line-height: 3.5rem;
    vertical-align: baseline;
    padding-right: 0.25em;
  }

  /* Small right-hand page margin. */
  td#page-content {
    padding-right: 0.5em;
  }

  /* Styling for collapsible menu.*/
  #page-menu {
    text-align: center;
    padding-left: 0.1em;
  }
  #page-menu ul {
    text-align: center;
    font-size: 160%;
    margin-top: 0.1em;
    padding-left: 0;
  }
  #page-menu li {
    padding-top: 0.6em;
  }
}

/* Scale RSS icon height with text. */
.rss-icon { height: 1.2em; }

/* Align issue contents to top of table: increases readability when wrapping
 * occurs. */
table#issue-contents td {
  vertical-align: top;
}
table#issue-contents td {
  max-width: 100ch;
}
/* Reduce tendency to wrap authors on small screens.*/
@media screen and (max-width: 80em) {
  table#issue-contents td.author {
    min-width: 14ch;
  }
}

/* Make columns in each product category table align. */
table.order-form-products {
  width: 100%;
}
table.order-form-products th:first-child {
  width: 60%;
}

input[type="checkbox"] + label.product-category-control {
  font-weight: bold;
  /* Don't leave space for the hidden checkbox. */
  margin-left: 0;
  /* Allow clicking on whole fieldset width. */
  display: block;
}

fieldset.order-details {
  width: max-content;
}
table.package-table {
  width: 100%;
  margin-top: 0.75em;
}
/* Width needs to be larger to handle hundreds of pounds and preserve table
 * alignment. */
table.package-table td.currency{
  width: 3.75em;
}
table.package-table td.number{
  width: 1em;
}
table.package-table th{
  vertical-align: bottom;
}
table.package-table th + th,
table.package-table td + td {
  padding-left: 0.4em;
}

table.package-shipping-details {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
table.package-shipping-details td,
table.package-shipping-details th {
  padding-top: 0px;
  padding-bottom: 0px;
}
table#rw-order-history td {
  vertical-align: top;
}
table#rw-order-history td.date {
  text-align: right;
}
table#rw-order-history th.date, table#rw-order-history th.currency {
  text-align: center;
}

td.refunded-order {
  background: cyan;
}
td.cancelled-order {
  background: pink;
}
div#menu-items li.section {
  margin-top: 0.5em;
  padding-top: 0.5em;
}

form.horizontal-selects select {
  margin-right: 0.3em;
}

details summary h3 {
  display: inline-block;
}

details.inline-closed {
  margin-right: 1em;
  display: inline-block;
}

details.inline-closed[open] {
  display: block;
}

details > summary {
  list-style: none;
}

details > summary::before {
  content: '\2795'; /* heavy plus sign */
  padding-right: 0.5em;
}

details[open] > summary::before {
  content: '\2796'; /* heavy minus sign */
}

details.inline-closed:not([open]) summary h3 {
  margin-top: 0.5em;
}

details[open] + details.inline-closed:not([open]) {
  margin-top: 1em;
}

canvas {
  border: 1px solid black;
  direction: ltr;
  margin-bottom: 1em;
}

#pdfdisplay {
  margin-right: 1em;
}