/*
 * VERIDIAN CSS
 *
 * NOTE: Now that we're using Bootstrap 4, a CSS3 browser is required and any other browsers are unsupported. This
 *   includes versions of IE below 10.
 *
 * Conventions:
 *   - Veridian class names should no longer start with "veridian"
 *   - Veridian class names shouldn't contain hyphens, to make it clearer which are Bootstrap classes
 *   - Rules are ordered alphabetically within each section
 *   - Media queries appear directly after the normal rule
 *
 * Colours: A mixture of Bootstrap colours, standard HTML web colours, and a few custom colours. Usage should be
 *   commented. The Bootstrap "brand-primary" colour is set to #4F6F19 (Veridian green), and "brand-warning" is set
 *   to #D59F0F (Veridian gold).
 *
 * Font sizes: No base font size is specified, to leave the browser to use its default size. The minimum font size
 *   should be 0.8rem.
 *
 * Copyright (C) 2006-2017  DL Consulting Ltd.
 *
 */

/* ---- General element styling ---- */

a
{
  cursor: pointer;  /* For Javascript "links" */
  text-decoration: none;
}

/* svg elements need "fill" instead of "color", annoyingly */
a svg, button svg
{
  fill: #4F6F19;  /* Bootstrap's "brand-primary" colour */
}
a:hover svg, button:enabled:hover svg
{
  fill: #23310B;  /* Bootstrap's "brand-primary" colour, darkened by 15% */
}

body
{
  /* Part of the "sticky footer" CSS, from https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
          flex-direction: column;
  height: 100%;
}

/* SVG icons inside .btn-primary buttons need light text */
button.btn-primary svg,
button.btn-primary:enabled:hover svg
{
  fill: #fff;
}

button, input[type="button"], input[type="submit"]
{
  cursor: pointer;  /* Treat buttons like links */
}

button:disabled, input[type="button"]:disabled, input[type="submit"]:disabled
{
  cursor: auto;
}

fieldset
{
  border: none;
}

header, footer
{
  /* Part of the "sticky footer" CSS, from https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
  -webkit-box-flex: 0;
  -ms-flex: none;
  -webkit-flex: none;
          flex: none;
}

html
{
  /* We don't set a base font-size here -- leave the browser to use its default size (for better accessibility) */
  height: 100%;  /* Part of the "sticky footer" CSS, from https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}

h1
{
  font-size: 1.5rem;
}

h2
{
  font-size: 1.25rem;
}

h3
{
  font-size: 1.125rem;  /* Only slightly bigger than the base font size */
}

/* Not used in standard Veridian, but defined to override the (much bigger) Bootstrap default */
h4
{
  font-size: 1.0625rem;  /* Fractionally bigger than the base font size */
}

/* Not used in standard Veridian, but defined to override the (much bigger) Bootstrap default */
h5
{
  font-size: 1rem;  /* Base font size */
}

input[type="checkbox"]
{
  margin-right: 4px;  /* For a little bit of space before the label */
}

legend
{
  font-weight: bold;
  font-size: 1.125rem;
  margin-bottom: 0;
}

label
{
  margin-bottom: 0; /* Override the .5rem of margin-bottom that bootstrap applies to all labels */
}

/* We don't want <ol> to display the list numbers itself, due to the ridiculous constant 40px left padding (too much sometimes, not enough other times) */
ol
{
  list-style: none;
  margin: 0px;
  padding: 0px;
}


/* ---- Customised Bootstrap classes ---- */

/* Override the Bootstrap default of 75% which is a bit too small */
.badge
{
  font-size: 0.8rem;
}

/* Override Bootstrap default */
.badge-warning
{
  color: #fff !important;
}

/* Re-style Bootstrap's breadcrumb component by reducing the vertical padding, removing the bottom margin and border-radius, adding a bottom border, and changing the background color */
.breadcrumb
{
  background-color: #F7F7F9;  /* Bootstrap's "gray-lightest" colour */
  border-bottom: 1px solid #ECEEEF;  /* Bootstrap's "gray-lighter" colour */
  border-radius: 0;
  margin-bottom: 0;
  padding-bottom: 0.25rem;
  padding-top: 0.25rem;
}

/* Reduce the left/right padding a little on buttons, to save screen real estate. There's a recommendation for minimum 44px components for touch devices, and with a 24px icon the buttons are now 44px wide. */
.btn
{
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

/* Ensure all buttons in a button group are the same height. */
.input-group-btn
{
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          -webkit-align-items: stretch;
          align-items: stretch;
}

/* Re-style bootstrap's ".btn-light" button a little. Since bootstrap-4.0.0-beta button's borders and backgrounds are the same color, but in the case of .btn-light I think it needs a darker border or it nearly vanishes.
   Note that rgb(0,0,0,.15) is the same color used for the border of a .form-control */
.btn-light
{
  border-color: rgba(0,0,0,.15);
  color: #4F6F19;  /* Bootstrap's "brand-primary" colour */
}

/* Bootstrap sets z-index to 3 for ".input-group .btn:hover" (it's 2 when not hovering). It causes slightly inconsistent behaviour on some browsers (especially firefox) and I don't
   believe it's necessary. */
.input-group .btn:hover
{
  z-index: 2 !important;
}

/* In Veridian all form validation is done on the server side at present, and the "invalid-feedback" class is only used when form validation has failed. We don't therefore want
   bootstrap to hide the "invalid-feedback" divs by default, and display them dynamically when required (i.e. we just want them to be shown whenever they're present). This isn't
   necessary in most cases, but it does mean we can use the .invalid-feedback class antwhere, not just where bootstrap's javascript expects it to be. */
.invalid-feedback
{
  display: block;
}

/* Reduce the left padding on custom-select elements (search page), to save screen real estate. */
.custom-select
{
  padding-left: 0.25rem;
}

/* If a select box has BOTH the "custom-select" and "form-control" bootstrap classes applied we need to override the "flex-direction: column" style
   that is applied by the form-control class. Not doing this causes the "custom-select" box to look weird on many browsers, including Chrome and Safari. */
select.custom-select.form-control
{
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
          flex-direction: row;
}

.form-check
{
  margin-bottom: 0;
}

/* Add padding between label and form control in inline forms (used for "sort by" form on search page) */
.form-inline label
{
  padding-right: 0.5rem;
}

.form-text
{
  margin-top: 0;
}

/* In some cases Bootstrap "nav-link" elements wrap, and it looks ugly */
.nav-link
{
  white-space: nowrap;
}

/* Bootstrap uses cursor:default for "active" nav pill links, which makes no sense */
.nav-pills .nav-link.active
{
  cursor: pointer;
}

/* Modal/popup headers should always be h2 headings, and we want a slightly larger font-size than for other h2 elements */
h2.modal-title
{
  font-size: 1.5rem;
}


/* ---- General classes that can be applied to any element ---- */

.borderradiusleft
{
  border-top-left-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}

.borderradiusright
{
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}

@media (max-width: 700px)
{
  .borderradiusrightwhensmall
  {
    border-top-right-radius: 0.25rem !important;
    border-bottom-right-radius: 0.25rem !important;
  }
}

.commonedging
{
  padding-left: 15px;
  padding-right: 15px;
}
@media (max-width: 500px)
{
  /* Reduce width of left/right edging on smaller screens */
  .commonedging
  {
    padding-left: 5px;
    padding-right: 5px;
  }
}

/* The fullwidthwrapper class is used in a few places to overcome the IE bug described at https://codepen.io/isralduke/pen/vLQxGy
   When changing any HTML that uses this class be careful to check your changes don't cause problems on IE. */
.fullwidthwrapper
{
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  width: 100%;
}

.hiddeninitially
{
  display: none;  /* Initial state, made visible when necessary */
}

/* For hiding some components of the UI on small screens */
@media (max-width: 700px)
{
  .hiddenwhensmall
  {
    display: none !important;
  }
}

/* For hiding some components of the UI that only apply to small screens */
@media (min-width: 701px)
{
  .hiddenwhennotsmall
  {
    display: none !important;
  }
}

.highlightcolor
{
  background-color: #FFFF77;  /* Light yellow */
}

.inactivelink
{
  color: #636C72;  /* Bootstrap's "gray-light" colour */
}

.maincolor, .textcorrectblockcolor
{
  background-color: #4F6F19;  /* Bootstrap's "brand-primary" colour */
}

.overlay
{
  margin: 0px;
  padding: 0px;
  position: absolute;  /* Position relative to ancestor element (which can't be static) */
}

/* Display a "pulldown arrow" before (i.e. to the left, assuming ltr display) or after (i.e. to the right, assuming ltr display) the element. Use the .pulldownarrownone
   class if you want to prevent arrows from being displayed by bootstrap classes that normally add them (e.g. "dropdown-toggle") */
.pulldownarrowbefore,
.pulldownarrowafter
{
  vertical-align: middle;
}
.pulldownarrowbefore::before,
.pulldownarrowafter::after
{
  border-left: .3em solid transparent;
  border-right: .3em solid transparent;
  border-top: .3em solid;
  content: "";
  display: inline-block;
  height: 0;
  vertical-align: middle;
  width: 0;
}
.pulldownarrowbefore::before
{
  margin-right: .3em;
}
.pulldownarrowafter::after
{
  margin-left: .3em;
}
.pulldownarrownone::before,
.pulldownarrownone::after
{
  border: 0;
  margin: 0;
}

/* Dynamic arrow for arrow on the left */
.pulldownarrowbefore.collapsed::before
{
  border-top: .3em solid transparent;
  border-bottom: .3em solid transparent;
  border-left: .3em solid;
}

.semitransparent
{
  -moz-opacity: 0.5;
  opacity: 0.5;
}

.textcorrectcompletelycorrectblockcolor
{
  background-color: gray;
}

.transparent
{
  -moz-opacity: 0.0;
  opacity: 0.0;
}

/* The "wrapwhensmall" class is useful for overriding the "white-space: nowrap" style that is applied to bootstrap components like
   buttons and badges, but only on small screens (e.g. to make wide buttons with multi-word descriptions wrap over multiple lines on
   small screens) */
@media (max-width: 700px)
{
  .wrapwhensmall
  {
    white-space: normal;
  }
}


/* ---- Special "divtable" classes -- here so they can be overridden at any point below ---- */

div.divtable
{
  display: table;
}

div.divtable > div
{
  display: table-row;
}

div.divtable > div > div
{
  display: table-cell;
  vertical-align: top;  /* Override default "baseline" value, which works weirdly */
}

/* On small screens override the "display: table-cell" to display the divtable cells vertically */
@media (max-width: 500px)
{
  div.wrappingdivtable500 > div > div
  {
    display: block;
    width: 100% !important;
  }
}
@media (max-width: 700px)
{
  div.wrappingdivtable700 > div > div
  {
    display: block;
    width: 100% !important;
  }
}


/* ---- Specific classes ---- */

a.deletesectiontaglink, a.editmetadatavaluelink, span.editmetadatavaluelink
{
  font-size: 0.8rem;
  vertical-align: top;  /* For superscript-style display */
}

/* For styling the tab links like the navigation bar entries */
a.documentdisplayleftpanetablink:hover
{
  text-decoration: none;
}

/* Links in user admin table */
a.editusergroupslink, a.listusersallowingcommunicationslink, a.untickusercommunicationslink
{
  font-size: 0.8rem;
  font-weight: normal;
  vertical-align: top;  /* For superscript-style display */
}

/* PDF links have a 18x18 icon as a background image */
a.pdflink
{
  background-image: url(../images/iconpdf.gif);
  background-position: center left;
  background-repeat: no-repeat;
  min-height: 18px;  /* Link height must be >= icon height */
  padding-left: 23px;
  white-space: nowrap;  /* It's important everything is on one line, for the link icon display */
}

button.button250, input.button250
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 250px;
}

div#addsectioncommentformcontainer, div#addsectiontagformcontainer
{
  margin-bottom: 10px;
}

div#alertpopup
{
  z-index: 1060;  /* Must be higher than Bootstrap's .modal z-index of 1050, otherwise error boxes can be hidden */
}

/* Overlaps the div above it, for cosmetic reasons only */
div#bannerlogo
{
  -ms-flex-preferred-size: 400px;
      -webkit-flex-basis: 400px;
          flex-basis: 400px;  /* Limit to 400px on big screens (need to use this instead of max-width for Safari) */
  padding-bottom: 5px;
  padding-top: 5px;
}
div#bannerlogo.offsetbannerlogo
{
  margin-bottom: -22px;
  padding-top: 0;
  position: relative;
  top: -22px;
}
@media (max-width: 700px)
{
  /* Remove the relative positioning, so it no longer overlaps the div above it */
  div#bannerlogo,
  div#bannerlogo.offsetbannerlogo
  {
    margin-bottom: auto;
    position: static;
  }
}
@media print
{
  /* We need to remove the hacky overlapping stuff when printing */
  div#bannerlogo
  {
    margin-bottom: 0px;
    top: 0px;
  }
}

div#bannerlogo img
{
  width: 100%;  /* Fill the div#bannerlogo element */
}

div.commentssearchsnippet, div.tagssearchsnippet, div.txtsearchsnippet
{
  font-size: 0.9rem;
  margin-top: 10px;
}

div.commentssearchsnippet span.commentdateandtime, li.sectioncomment span.commentdateandtime
{
  font-style: italic;
}

div.commentssearchsnippet span.commenttext
{
  margin-right: 15px;
}

div.commentssearchsnippet span.commentuser, li.sectioncomment span.commentuser
{
  font-weight: bold;
  margin-right: 15px;
}

div#content
{
  /* Part of the "sticky footer" CSS, from https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
  -webkit-box-flex: 1;
  -ms-flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
          flex: 1 0 auto;
  width: 100%;
}

div.datebrowserrichardmonthdaynumdocs
{
  font-size: 0.8rem;
}

div#datebrowserrichardmonthlevelcalendar
{
  border-spacing: 2px;
  width: 100%;
}

/* All cells */
div#datebrowserrichardmonthlevelcalendar > div > div
{
  background-color: #F7F7F9;  /* Bootstrap's "gray-lightest" colour */
  border: 1px solid #ECEEEF;  /* Bootstrap's "gray-lighter" colour */
  border-radius: 0.25rem;
  padding: 0.125rem;
  width: 14%;  /* 1/7th */
}

/* Header cells only */
div#datebrowserrichardmonthlevelcalendar > div:first-child > div
{
  background-color: transparent;
  border: none;
  font-size: 1.1rem;
  font-weight: 400;
  padding-bottom: 5px;
}
@media (max-width: 700px)
{
  /* On small screens hide the header cells and any blank/empty cells */
  div#datebrowserrichardmonthlevelcalendar > div:first-child > div, div#datebrowserrichardmonthlevelcalendar > div > div.datebrowserrichardmonthlevelcalendarblankcell, div#datebrowserrichardmonthlevelcalendar > div > div.datebrowserrichardmonthlevelcalendardaycellempty
  {
    display: none;
  }
}

div#datebrowserrichardmonthlevelcalendar div.datebrowserrichardmonthlevelcalendardaycellcontents
{
  min-height: 5rem;  /* Sensible minimum (this can't be set on div.datebrowserrichardmonthlevelcalendardaycell) */
}

div#datebrowserrichardmonthlevelcalendarheader
{
  background-color: #F7F7F9;  /* Bootstrap's "gray-lightest" colour */
  border: 1px solid #4F6F19;  /* Bootstrap's "brand-primary" colour */ 
  border-radius: 0.25rem;
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
    -ms-flex-align: center;
      -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          -webkit-justify-content: space-between;
          justify-content: space-between;
  margin-top: 0.75rem;
  padding-left: 0.5rem;
}

div#datebrowserrichardmonthlevelcalendarheader .btn-group
{
  margin: 0.5rem 0.5rem 0.5rem 0rem;
}

div#datebrowserrichardmonthlevelcalendarheader h2
{
  font-size: 2rem;
  font-weight: 400;
  margin: 0;
}

/* Each child of datebrowserrichardtoplevelcalendar is a year (row) */
div#datebrowserrichardtoplevelcalendar > div
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.25rem 0 0.25rem;
}

/* The h2 heading in each row of the top level calendar is the "year" cell. If there's room we display it to the left of its corresponding list of months, otherwise it's positioned above them. */
div#datebrowserrichardtoplevelcalendar > div > h2
{
  display: inline-block;
  width: 4rem;  /* If this changes the calc() function in the span selector below needs to change too */
}
@media (max-width: 400px)
{
  div#datebrowserrichardtoplevelcalendar > div > h2
  {
    display: block;
    width: 100%;
  }
}

/* The span container in each row of the top level calendar is the cell containing the list of months. If there's room we display it on the same line as the year it corresponds to, otherwise it's positioned below the year. */
div#datebrowserrichardtoplevelcalendar > div > span
{
  display: inline-block;
  width: calc(100% - 4rem);  /* Change this if the width of the h2 selector above is changed */
}
@media (max-width: 400px)
{
  div#datebrowserrichardtoplevelcalendar > div > span
  {
    display: block;
    width: 100%;
  }
}

/* Use Flex to lay out the months in the top-level calendar, wrapping onto multiple lines if necessary */
div#datebrowserrichardtoplevelcalendar ul
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
    -ms-flex-pack: justify;
      -webkit-justify-content: space-between;
          justify-content: space-between;
  list-style: none;
  margin: 0px;
  padding: 0px;
}
@media (max-width: 800px)
{
  div#datebrowserrichardtoplevelcalendar ul
  {
    border-bottom: 1px solid #ECEEEF;  /* Bootstrap's "gray-lighter" colour */
    -ms-flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
  }
}

/* Style the "month" cells in the top-level calendar, wrapping onto multiple lines if necessary */
div#datebrowserrichardtoplevelcalendar ul > li
{
  margin-bottom: 0.25rem;
  text-align: center;
  width: calc((100% - (11 * 0.25rem)) / 12);  /* Leave spacing of 0.25rem for each of the 11 spaces between each row of 12 months */
}
@media (max-width: 800px)
{
  div#datebrowserrichardtoplevelcalendar ul > li
  {
    width: calc((100% - (5 * 0.25rem)) / 6);  /* Leave spacing of 0.25rem for each of the 5 spaces between each row of 6 months */
  }
}
@media (max-width: 500px)
{
  div#datebrowserrichardtoplevelcalendar ul > li
  {
    width: calc((100% - (3 * 0.25rem)) / 4);  /* Leave spacing of 0.25rem for each of the 3 spaces between each row of 4 months */
  }
}

/* For styling unclickable months in the top-level calendar */
div#datebrowserrichardtoplevelcalendar li span
{
  color: #CAD0D3;  /* Shade of gray between Bootstrap's "gray-light" and "gray-lighter" colours */
}

/* For styling clickable months in the top-level calendar */
div#datebrowserrichardtoplevelcalendar li a
{
  border: 1px solid #ECEEEF;  /* Bootstrap's "gray-lighter" colour */
  padding: 0.5em 0.25em;
}

@media (max-width: 400px)
{
  /* Reduce the left/right padding on all the top-level components on small screens, to save screen space */
  div.datebrowserwhitneycalendar > *
  {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

div.datebrowserwhitneydocumentselectorcontainer
{
  margin-top: 0.5rem;
}

div.datebrowserwhitneydocumentselectorheader
{
  margin-bottom: 0.75rem;
}

/* For styling the "no specific month or day"/"no specific day of month" descriptions */
div.datebrowserwhitneydocumentselectorheader div.text-muted
{
  font-size: 0.8rem;
}

/* For styling the "no specific month or day"/"no specific day of month" additions to the title */
div.datebrowserwhitneydocumentselectorheader h2 > span
{
  font-size: 1.125rem;
}

div#documentdisplay
{
  border: solid 1px #ECEEEF;  /* Bootstrap's "gray-lighter" colour */
  width: 100%;  /* Expand divtable */
}

div#documentdisplaybasic
{
  margin-top: 10px;
}

div#documentdisplaycontentheader
{
  margin-top: 10px;
}

/* Lay out the title and right side content using Flexbox */
div#documentdisplayheader
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
    -ms-flex-pack: justify;
      -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-box-align: center;
    -ms-flex-align: center;
       -webkit-align-items: center;
          align-items: center;
}

div#documentdisplayheader a.pdflink, div#documentdisplayheader a.tonormalmodelink
{
  font-size: 0.8rem;
  margin-left: 10px;
}

div#documentdisplayheader h1
{
  font-weight: 400;
  margin-bottom: 0;
}
@media (max-width: 500px)
{
  div#documentdisplayheader h1
  {
    font-size: 1.25rem;
  }
}

div#documentdisplayheader.documentdisplaymaximised h1
{
  font-size: 1.25rem;
}

div#documentdisplayleftpane
{
  display: none;  /* Initial state, made visible if the window is wide enough */
  width: 0px;  /* Initial state, resized to the correct width by code in veridian-documentdisplay.js */
}

div#documentdisplayleftpanecontent
{
  height: 0px;  /* Initial state, resized to the correct height by code in veridian-documentdisplay.js */
  overflow: auto;  /* The left pane areas are simply stacked (no collapsible regions), so we need a scroll bar in most cases */
  padding: 0px 5px;
  width: 100%;  /* Critical to get the scrollbars to appear properly in IE */
}

div#documentdisplayleftpaneheader
{
  padding-top: 4px;
  padding-left: 1px;
  padding-right: 1px;
  margin-bottom: 5px;
}

div#documentdisplayleftpaneheader .nav-link
{
  padding: .25rem 1rem;  /* Reduce padding to save space on small screens */
}

div#documentdisplayleftpanesectionleveltabcontentinactive
{
  font-style: italic;
}

div#documentdisplayleftpanesectiontextcontainer
{
  word-break: break-word;  /* Unofficial value only supported by Chrome/Safari */
}

div.documentdisplayleftpanesectiontextheader
{
  padding-bottom: 10px;
}

div.documentdisplayleftpanetabareacontentpadding
{
  padding: 10px 0px;
}

div.documentdisplayleftpanetabareaheader
{
  background-color: #F7F7F9;  /* Bootstrap's "gray-lightest" colour */
  border: 1px solid #ECEEEF;  /* Bootstrap's "gray-lighter" colour */
  border-radius: 0.25rem;
}

div.documentdisplayleftpanetabareaheader h3
{
  font-weight: 400;
  margin: 0;
  padding: 0.5rem;
}

div#documentdisplayleftpanetagscontainer a.deletesectiontaglink
{
  margin-left: 5px;
}

div.documentdisplayleftpanethumbnailcontainer
{
  text-align: center;
}

div.documentdisplayleftpanethumbnailcontainer > *
{
  margin: auto;
}

div.documentdisplaynextprevlinkscontainer
{
  margin: 10px 0px;
}

div#documentdisplaypaneseparator
{
  background-color: #F7F7F9;  /* Bootstrap's "gray-lightest" colour */
  border-left: solid 1px #ECEEEF;  /* Bootstrap's "gray-lighter" colour */
  border-right: solid 1px #ECEEEF;  /* Bootstrap's "gray-lighter" colour */
  cursor: w-resize;
  vertical-align: middle;  /* So the icon is in the middle */
  width: 1%;  /* Take up minimum space */
}

div#documentdisplaypaneseparator .touchclickable
{
  /* This negative margin has the effect of reducing the width of the separator, without reducing the size or padding of the clickable icon on the separator. So the clickable area effectively overflows the separator div by a few pixels to the left and right, providing a larger click target (especially for touchscreens). */
  margin-left: -8px;
  margin-right: -8px;
}

div#documentstructuredisplay
{
  margin-bottom: 15px;
  width: 100%;  /* Expand divtable */
}

div#documentstructuredisplay > div > div:nth-child(2)
{
  padding-left: 15px;
}

div.dynamicclassifiervlistentry
{
  margin: 3px;
}

div.dynamicclassifiervlistentry span
{
  vertical-align: top;  /* So the image and text line up */
}

div#footercontent
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
  min-height: 50px;
}

div#g-recaptcha div
{
  margin: auto; /* Align the reCAPTCHA control to the center */
}

div#headerbottomcell
{
  border-bottom: 1px solid #ECEEEF;  /* Bootstrap's "gray-lighter" colour */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
    -ms-flex-align: center;
      -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          -webkit-justify-content: space-between;
          justify-content: space-between;
}

div#headertopcell
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          -webkit-justify-content: flex-end;
          justify-content: flex-end;
}
@media (max-width: 700px)
{
  div#headertopcell
  {
    -ms-flex-pack: justify !important;
    -webkit-box-pack: justify !important;
            -webkit-justify-content: space-between !important;
            justify-content: space-between !important;
  }
}

div#homepageabout div
{
  margin-bottom: 10px;
}

div#homepagebrowse, div#homepagesearch
{
  padding-bottom: 20px;
  text-align: center;
}

div.homepagebrowseicon
{
  padding: 3px;
}

div#homepagecontent
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

div#homepageleftcolumn
{
  -webkit-box-flex: 1;
      -ms-flex: 1;
          -webkit-flex: 1;
          flex: 1;
  -ms-flex-order: 1;
    -webkit-box-ordinal-group: 2;
          -webkit-order: 1;
          order: 1;
}

div#homepagemiddlecolumn
{
  -webkit-box-flex: 1.5;
      -ms-flex: 1.5;
          -webkit-flex: 1.5;
          flex: 1.5;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  -ms-flex-order: 2;
    -webkit-box-ordinal-group: 3;
          -webkit-order: 2;
          order: 2;
}

div#homepagerightcolumn
{
  -webkit-box-flex: 1;
      -ms-flex: 1;
          -webkit-flex: 1;
          flex: 1;
  -ms-flex-order: 3;
    -webkit-box-ordinal-group: 4;
          -webkit-order: 3;
          order: 3;
}

/* On screens between 500px and 800px display #homepagemiddlecolumn at the top, with the other two columns side by side below it */
@media (max-width: 800px)
{
  div#homepagecontent
  {
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
  }
  div#homepagemiddlecolumn
  {
    /* Make the "middle" column fill the full screen width */
    -ms-flex-preferred-size: 100%;
        -webkit-flex-basis: 100%;
            flex-basis: 100%;
    /* Remove left and right margin because it's now stacked vertically */
    margin-left: 0;
    margin-right: 0;
    /* Make the middle column the first in order */
    -ms-flex-order: 1;
      -webkit-box-ordinal-group: 2;
            -webkit-order: 1;
            order: 1;
    /* Add some bottom margin to the "middle" column, as it now has the "left" and "right" columns benether it */
    margin-bottom: 0.5rem;
  }

  div#homepageleftcolumn
  {
    /* Make the left column the second in order */
    -ms-flex-order: 2;
      -webkit-box-ordinal-group: 3;
            -webkit-order: 2;
            order: 2;

    /* Give the left column some right margin and the right column some left margin */
    margin-right: 0.25rem;
  }

  div#homepagerightcolumn
  {
    /* Give the left column some right margin and the right column some left margin */
    margin-left: 0.25rem;
  }
}

/* On screens less than 500px wide display the three columns on the home page as a single column */
@media (max-width: 500px)
{
  div#homepagecontent
  {
    display: block;
  }
  div#homepagemiddlecolumn,
  div#homepageleftcolumn,
  div#homepagerightcolumn
  {
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0.5rem;
  }
}

div#homepagecontent h2
{
  font-size: 1.125rem;  /* Smaller than usual for h2 */
  text-align: center;
  text-transform: uppercase;
}

div#homepagesampler
{
  text-align: center;
}

div#homepagesampler img
{
  max-width: 100%; /* Don't allow sampler image to overflow container on mid-size screens */
}

div#homepagetextcorrectscoreboard div
{
  margin: auto;
}

div#homepagetextcorrectscoreboardmoreinfo
{
  padding-top: 5px;
  text-align: center;
}

div.imagecontainer
{
  -webkit-box-sizing: border-box;
          box-sizing: border-box;  /* Important so bottom padding added in _sectionlevel:sectionimagecontaineropen_ doesn't increase overall height */
  margin: 5px 0px;  /* No left/right margin because this gets in the way if width: 100% is used (e.g. on the search snippet images below) */
  position: relative;  /* So it can contain absolutely-positioned overlays (e.g. query term highlighting) */
}
@media print
{
  /* Override the padding-bottom added in _sectionlevel:sectionimagecontaineropen_, otherwise it creates gaps in the printed output (wasting paper) */
  div.imagecontainer
  {
    padding-bottom: 0px !important;
  }
}

/* See _sectionlevel:sectionimagecontaineropen_ for more information */
div.imagecontainer img
{
  left: 0px;
  position: absolute;  /* Position relative to ancestor element (imagecontainer) */
  top: 0px;
  white-space: nowrap;  /* For the "alt" tag for broken images */
}
@media print
{
  /* Override the "page-break-inside: avoid" rule from Bootstrap's CSS file. The section-level images can be any size and shape, and we want to avoid big gaps in the printed output (wasting paper). */
  div.imagecontainer img
  {
    page-break-inside: auto;
  }
}

/* Allow the search snippet images to shrink to fit the available space */
div.imgsearchsnippet div.imagecontainer, div.imgsearchsnippet div.imagecontainer img
{
  height: 100% !important;
  width: 100% !important;
}

div.inputformwrappingdivtable500
{
  width: 100%;  /* Expand divtable */
}

/* All cells */
div.inputformwrappingdivtable500 > div > div
{
  padding-bottom: 0.5rem;
  vertical-align: middle;
}

div.inputformwrappingdivtable500 > div > div input
{
  max-width: 500px;  /* Limit this to avoid ridiculously long input fields on large screens */
}

div.inputformwrappingdivtable500 > div > div label
{
  margin-bottom: 0px;  /* Remove bottom margin added by Bootstrap */
}

/* First column cells only */
div.inputformwrappingdivtable500 > div > div:first-child
{
  width: 12rem;  /* Fixed width, to satisfy Stefan's OCD */
}

/* On small screens remove the bottom padding from all cells except the last in the row, to stack them better vertically */
@media (max-width: 500px)
{
  div.inputformwrappingdivtable500 > div > div:not(:last-child)
  {
    padding-bottom: 0px;
  }
}

div#inputupsuhcontainer
{
  margin-bottom: 10px;
}

div#inputupsuhcontainer a.privacylink, div#inputupaefsocontainer a.privacylink
{
  font-size: 0.9rem;
  margin-left: 15px;
}

div#languageswitch
{
  margin-left: 1rem;  /* To separate user links from language links, best this way around for the case where there is no language switch */
}

div#loadingimage
{
  padding: 10px;
}

div#logicalsectionimagedisclaimer
{
  margin: 15px 0px;
}

div.logicalsectiontocnodecontainer, div.pagetocnodecontainer
{
  padding-bottom: 3px;
  padding-left: 27px;  /* Crucial to get the link background image in the right place */
  padding-top: 3px;
}

/* Logical section/page TOC nodes have a 21x18 icon as a background image */
div.logicalsectiontocnodecontainer a.logicalsectiontocnodelink, div.logicalsectiontocnodecontainer span.logicalsectiongroupingnode, div.pagetocnodecontainer a.pagetocnodelink
{
  background-image: url(../images/icontext.gif);
  background-position: center left;
  background-repeat: no-repeat;
  margin-left: -27px;  /* Crucial to get the background image in the right place */
  padding-left: 27px;
}

/* Grouping nodes have a different icon */
div.logicalsectiontocnodecontainer span.logicalsectiongroupingnode
{
  background-image: url(../images/iconopenfldr.gif);
}

div.mediaviewer
{
  overflow: auto;  /* To create a scrollbar if the media viewer exceeds the right pane height */
  text-align: center;
}

div.mediaviewer > div#playercontainer
{
  position: relative;  /* So the player can be vertically centered */
}

div.metadatadisplay
{
  padding: 5px 0px;
  width: 100%;  /* Expand divtable */
}

div.metadatadisplay div.content
{
  padding: 0px 3px;
}

div.metadatadisplay div.label
{
  font-weight: bold;
  padding: 0px 3px;
  text-align: right;
  white-space: nowrap; width: 1%;  /* Take up minimum space without wrapping */
}

div#navbarcollapsed
{
  display: block;
  -ms-flex: 2;
  -webkit-box-flex: 2;
          -webkit-flex: 2;
          flex: 2;
}

/* All the following "nextprev*links" styles are used on the document display pages when documentlevelimagesview=none */
div#nextprevdocumentlinks
{
  width: 100%;  /* Expand divtable */
}

div#nextprevdocumentlinks div.nextdocumentlinkcell
{
  text-align: right;
  width: 33%;  /* 1/3rd */
}

div#nextprevdocumentlinks div.prevdocumentlinkcell
{
  width: 33%;  /* 1/3rd */
}

div#nextprevdocumentlinks div.publicationlinkcell
{
  text-align: center;
  width: 33%;  /* 1/3rd */
}

div#nextprevlogicalsectionlinks
{
  width: 100%;  /* Expand divtable */
}

div#nextprevlogicalsectionlinks div.prevdocumentlinkcell, div#nextprevlogicalsectionlinks div.prevsectionlinkcell
{
  width: 25%;  /* 1/4th */
}

div#nextprevlogicalsectionlinks div.nextdocumentlinkcell, div#nextprevlogicalsectionlinks div.nextsectionlinkcell
{
  text-align: right;
  width: 25%;  /* 1/4th */
}

div#nextprevpagelinks
{
  width: 100%;  /* Expand divtable */
}

div#nextprevpagelinks div.prevdocumentlinkcell, div#nextprevpagelinks div.prevsectionlinkcell
{
  width: 25%;  /* 1/4th */
}

div#nextprevpagelinks div.nextdocumentlinkcell, div#nextprevpagelinks div.nextsectionlinkcell
{
  text-align: right;
  width: 25%;  /* 1/4th */
}

div#nextprevsearchresultlinks
{
  width: 100%;  /* Expand divtable */
}

div#nextprevsearchresultlinks div.backtosearchresultslinkcell
{
  text-align: center;
  width: 33%;  /* 1/3rd */
}

div#nextprevsearchresultlinks div.nextsearchresultlinkcell
{
  text-align: right;
  width: 33%;  /* 1/3rd */
}

div#nextprevsearchresultlinks div.prevsearchresultlinkcell
{
  width: 33%;  /* 1/3rd */
}

div#ocrdisclaimer
{
  background-color: #ECEEEF;  /* Bootstrap's "gray-lighter" colour */
  border-radius: 0.25rem;
  padding: 0.25rem 0;
  margin: 0.75rem 0;
}

div#ocrdisclaimer p
{
  margin: 0.75rem;
}

div.oseadviewer, div.panojsviewer
{
  background-color: black;
}

div.pageblock
{
  cursor: pointer;
  z-index: 40;  /* Must be more than querytermarea's z-index */
}

/* .pagecontentmargin is used to apply margins to the div#pagecontent on most pages. We don't apply the margin to #pagecontent directly though,
    as on some pages we do NOT want padding or margins on #pagecontent. For example, applying padding and/or margin to #pagecontent on document
    display pages will affect the positioning of the footer on those pages. */
div.pagecontentmargin
{
  margin-top: 0.75rem;
  margin-bottom: 1.5rem;
}

div#panojscontextmenupopup
{
  background-color: #292B2C;  /* Bootstrap's "gray-dark" colour */
  border: 2px solid #636C72;  /* Bootstrap's "gray-light" colour */
  padding: 4px;
  position: fixed;  /* Position relative to browser window */
  z-index: 100;  /* Must be more than everything else including backgroundblocker */
}

/* Each PanoJS context menu link is expected to have a 18x18 icon as a background image */
div#panojscontextmenupopup a, div#panojscontextmenupopup a:link, div#panojscontextmenupopup a:visited
{
  background-position: center left;
  background-repeat: no-repeat;
  color: #CAD0D3;  /* Shade of gray between Bootstrap's "gray-light" and "gray-lighter" colours */
  display: inline-block;
  margin: 1px 0px;
  min-height: 18px;  /* Link height must be >= icon height */
  padding-left: 23px;
}

div#panojscontextmenupopup a:hover
{
  color: white;
}

div#panojscontextmenupopup div
{
  white-space: nowrap;  /* It's important everything is on one line, for the link icon display in particular */
}

div#panojscontextmenupopup div.panojsadduserlistitemslinkcontainer a
{
  background-image: url(../images/iconadd_invert.gif);
}

div#panojscontextmenupopup div.panojslogicalsectionimageslinkcontainer a
{
  background-image: url(../images/iconclip_invert.gif);
}

div#panojscontextmenupopup div.panojspdflinkcontainer a
{
  background-image: url(../images/iconpdf.gif);
}

div#panojscontextmenupopup div.panojssectiontextlinkcontainer a, div#panojscontextmenupopup div.panojstextcorrectlinkcontainer a
{
  background-image: url(../images/icontext_invert.gif);
}

div#panojscontextmenupopup div.panojszoomtoreadlinkcontainer a
{
  background-image: url(../images/iconzoomtoread_invert.gif);
}

div#panojscontextmenupopup div.panojscontextmenupopupsectionheader
{
  color: white;
  padding-bottom: 4px;
  white-space: normal;  /* We want the header divs to wrap normally, otherwise long titles mess things up */
}

/* This is a bit tricky. We want:
   1. The individual links to display on one line (important for the link icon display)
   1a. The popup to expand horizontally (past the max-width value if necessary), if the links are long
   2. The headers to wrap if necessary, so the max-width value is honoured if the titles (but not links) are long
   3. The context menu popup to be as small as possible, after accounting for the previous rules
   The only way I've found to do all this is to use "display: table" and max-width here (and white-space above)
*/
div#panojscontextmenupopupcontent
{
  display: table;  /* Expand to fit the links if they're wide */
  max-width: 200px;  /* The context menu doesn't need to be wide, and this is bigger than the default links */
}

div#panojscontextmenupopupseparator
{
  border: 1px solid #636C72;  /* Bootstrap's "gray-light" colour */
  margin: 6px 0px;
}

div.panojscrosshair
{
  background-color: #464A4C;  /* Bootstrap's "gray" colour */
  z-index: 50;  /* Must be more than most PanoJS overlays we add, except for panojscontextmenupopup */
}

div.panojsinverthighlight
{
  background-color: #636C72;  /* Bootstrap's "gray-light" colour */
  z-index: 25;  /* Must be less than the other PanoJS overlays we add (e.g. querytermarea, pageblock) */
}

div.panojspagelabel
{
  background-color: white;
  padding: 3px;
  z-index: 45;  /* Must be less than panojscrosshair's z-index */
}

div.panojsviewerbuttons
{
  background-color: #292B2C;  /* Bootstrap's "gray-dark" colour */
  border: 1px solid black;
  border-radius: 0.25rem;
  opacity: 0.8;
  padding: 0.25rem;
  position: absolute;
  right: 0.25rem;
  top: 0.25rem;
  z-index: 100;
}

/* Remove all the default styling that applies to <button>s */
div.panojsviewerbuttons button
{
  background: none;
  border: none;
  display: block;
  margin: 0;
  padding: 0;
}

div.panojsviewerbuttons button.hiddeninitially
{
  display: none;  /* Need to override the "display: block" from above for "hiddeninitially" buttons */
}

div.panojsviewerbuttons button svg
{
  fill: #F7F7F9;  /* Bootstrap's "gray-lightest" colour */
}

div.panojsviewerbuttons button:enabled:hover svg
{
  fill: #636C72;  /* Bootstrap's "gray-light" colour */
}

div.panojsviewerbuttons button:enabled svg.highlightedbutton,
div.panojsviewerbuttons button:enabled:hover svg.highlightedbutton
{
  fill: #d59f0f;  /* Bootstrap's "brand-warning" colour */
}

div#publicationbrowserpagecontent > h2
{
  border-bottom: 1px solid #ECEEEF;  /* Bootstrap's "gray-lighter" colour */
  margin-bottom: 0.125rem;
  margin-top: 0.75rem;
}

div.publicationicon
{
  margin: 15px 0px 5px 0px;
}

/* Ensure publication icons are restricted to the width of the screen (for small screen devices) */
div.publicationicon img
{
  max-width: 100%;
}

div#publicationlevelcontent
{
  clear: both;  /* Clear the float applied in div#publicationlevelcontrols */
}

/* Floated to the right on large screens, and positioned to the left on small screens */
div#publicationlevelcontrols
{
  float: right;
  margin-bottom: 1rem;
  margin-left: 1rem;
}
@media (max-width: 500px)
{
  div#publicationlevelcontrols
  {
    float: none;
    margin-bottom: 0;
    margin-left: 0;
  }
}

div.qapageblock
{
  background-color: #7BAD27;  /* Bootstrap's "brand-primary" colour, lightened by 15% */
  border: 1px solid rgba(0,0,0,0.5);
  border-bottom: 3px solid rgba(0,0,0,0.5);
  border-radius: 3px;
  -moz-opacity: 0.5;
  opacity: 0.5;
}

div.querytermarea
{
  z-index: 30;  /* Must be less than pageblock's z-index */
}
@media print
{
  /* Background colours seem to be removed when printing, so the query term highlighting isn't effective. Something better should probably be done here, but for now just disabling this altogether. */
  div.querytermarea
  {
    display: none;
  }
}

div.runtimeloggraph
{
  margin-bottom: 30px;
}

div#searchhistorylist
{
  width: 100%;  /* Expand divtable */
}

div#searchhistorylist > div > div
{
  padding: 4px;
}

div#searchhistorylist > div > div.linkcell span
{
  text-transform: lowercase;
}

div#searchhistorylist > div > div.numresultscell
{
  text-align: right;
  white-space: nowrap; width: 1%;  /* Take up minimum space without wrapping */
}

/* Display advanced search content in two columns on large screens, and stacked on small screens */
div#searchpageadvancedsearchcontent
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
    -ms-flex-pack: justify;
      -webkit-justify-content: space-between;
          justify-content: space-between;
  font-size: 0.9rem;
}
@media (max-width: 800px)
{
  div#searchpageadvancedsearchcontent
  {
    display: block;
  }
}

/* Display advanced search content in two columns on large screens, and stacked on small screens */
div#searchpageadvancedsearchcontent > div
{
  width: 48%;
}
@media (max-width: 800px)
{
  div#searchpageadvancedsearchcontent > div
  {
    width: 100%;
  }
}

div#searchpageadvancedsearchcontent fieldset
{
  border: 1px solid #ECEEEF;  /* Bootstrap's "gray-lighter" colour */
  background-color: #F7F7F9;  /* Bootstrap's "gray-lightest" colour */
  margin-bottom: 0.5rem;
  padding: 0.5rem;
}

/* Use the same font size as set for the parent div (div#searchpageadvancedsearchcontent) */
div#searchpageadvancedsearchcontent .form-control
{
  font-size: inherit;
}

div#searchpagesearchextracontainer
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
    -ms-flex-pack: justify;
      -webkit-justify-content: space-between;
          justify-content: space-between;
  margin-bottom: 0.25rem;
}

div#searchpagesearchformcontainer
{
  margin-bottom: 0.25rem;
}

#searchpagesearchresultfacets
{
  -ms-flex-negative: 0;
  -webkit-flex-shrink: 0;
          flex-shrink: 0; /* Required on Chrome, Safari, and Edge to prevent the facet cell from being squeezed into the smallest possible space */
}

#searchpagesearchresultfacets .card
{
  margin-bottom: 0.25rem;
}

#searchpagesearchresultfacets .card-body
{
  padding: 0.5rem;
  font-size: 0.8rem;
}

#searchpagesearchresultfacets .card-header
{
  padding: 0.5rem;
}

#searchpagesearchresultfacets h3
{
  margin: 0;
  font-size: 1rem;  /* Smaller than usual for h3 */
}

#searchpagesearchresultfacets span.searchresultfacetentrycount
{
  margin-left: 5px;  /* Done like this to prevent the count from being separated onto a new line */
}

div#searchpagesearchfilterscontainer .badge
{
  line-height: inherit; /* Override bootstrap's default line-height: 1rem for badges. We want these a bit bigger for fat fingers on small screens. */
  font-weight: 400; /* Override bootstrap's default */
  margin-bottom: 0.25rem; /* Applied to the badges, not the container, as they may wrap over multiple lines on small screens, and they need vertical space between them */
}

#searchpagesearchresults
{
  -ms-flex-preferred-size: 100%;
    -webkit-flex-basis: 100%;
          flex-basis: 100%; /* Required for IE bug - see https://stackoverflow.com/questions/35111090/why-ie11-doesnt-wrap-the-text-in-flexbox */
  padding-left: 5px;
}
@media (max-width: 700px)
{
  #searchpagesearchresults
  {
    padding-left: 0px;
  }
}

/* Uses flexbox so the sort control can wrap if necessary */
#searchpagesearchresults div#searchresultsheader
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
    -ms-flex-align: center;
      -webkit-align-items: center;
          align-items: center;
  -webkit-box-pack: justify;
    -ms-flex-pack: justify;
      -webkit-justify-content: space-between;
          justify-content: space-between;
}

#searchpagesearchresults #searchresultssummary
{
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 0;
}

/* Contains the search facets and search results -- laid out side by side on large screens, vertically on small screens */
div#searchpagesearchresultscontainer
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
@media (max-width: 700px)
{
  div#searchpagesearchresultscontainer
  {
    display: block;
  }
}

div#sectionleveltabtitlearea h2
{
  font-weight: 400;
  line-height: 1.5rem;
  margin-bottom: 0;
}

div.skiplink
{
  position: absolute;
  left: 1rem;
  top: 0;
  z-index: 100;
}
div.skiplink a:focus
{
  color: #fff;
  margin: 0.5rem;
  background-color: #dc3545; /* brand-danger */
  border: 1px solid transparent;
  padding: 0.5rem;
  border-radius: 0 0 0.5rem 0.5rem;
}

div#socialbookmarks
{
  font-size: 0.6875rem;  /* Reduce jsSocials icon size */
}

div#sortresultsformcontrols
{
  display: -ms-flexbox;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          -webkit-align-items: center;
          align-items: center;
}

div#sortresultsformcontrols label
{
  margin-right: 0.25rem;
}

div#singleimagepreviewer
{
  text-align: center;
}

div#singleimagepreviewer div#previewbox
{
  border: 1px dashed red;
  left: 0px;
  position: absolute;  /* Position relative to ancestor element (which can't be static) */
  top: 0px;
}

div#singleimagepreviewer div#previewcontrol
{
  cursor: crosshair;
  margin: auto;
  position: relative;  /* So it can contain absolutely-positioned overlays (i.e. the previewbox) */
}

/* For the OpenSeadragon viewer */
div#singleimagepreviewer div#previewcontrol-displayregion
{
  /* Override OpenSeadragon's ridiculous 999999999 value, otherwise the red box covers the dropdown menus (and everything else) */
  z-index: 50 !important;
}

div#singleimagepreviewer > span
{
  font-size: 0.8rem;
}

div#textcorrectbasicinterface
{
  width: 100%;  /* Expand divtable */
}

div#textcorrectbasicinterface div.blockimagecell
{
  border-bottom: solid 1px grey;
  padding: 15px 0px;
  width: 1%;  /* Take up minimum space */
}

div#textcorrectbasicinterface div.blockformcell
{
  border-bottom: solid 1px grey;
  padding: 15px 0px 15px 30px;
}

div.textcorrectcontributors
{
  font-style: italic;
}

div#textcorrectpanojsinterfacecontent div#documentdisplayleftpanecontent, div#textcorrectpanojsinterfacecontent div#documentdisplayleftpaneheader
{
  padding-left: 2px;  /* Undo padding added to div#documentdisplayleftpanecontent and div#documentdisplayleftpaneheader above */
}

div#textcorrectpanojsinterfaceformcontainer i
{
  padding: 5px;
}

div#textcorrectpanojsinterfacehelpandstatus
{
  width: 100%;  /* Expand divtable */
}

div#textcorrectpanojsinterfacehelpandstatus > div > div
{
  padding-bottom: 0.125rem;
  font-size: 0.9rem;
}

div#textcorrectselectedlinebox
{
  border-color: red;
  border-style: solid;
  z-index: 35;  /* Must be more than querytermarea's z-index and less than pageblock's z-index */
}

div#textcorrectstats, div#metadataeditstats
{
  margin-bottom: 1rem;
}

div#timinginfo
{
  padding: 5px;
}

div#useraccountpagecontent .card
{
  margin-top: 0.25rem;
}

.useradmintableresultssummary
{
  padding-left: 0.3rem;
  padding-right: 0.3rem;
}

/* Fix Bootstrap tabs bug: When finding out the (only) active element in a container, i.e., tab, tab content etc, */
/* it only picks up the first active element. If there is an active button in the container, the button will be */
/* selected instead of what it wants because the active button is in front of the second tab content. */
.page-item.current .page-link 
{
  z-index: 2;
  color: #fff;
  background-color: #4F6F19;
  border-color: #4F6F19;
}

@media (max-width: 500px)
{
  /* Reduce the default 1.25rem left and right padding on small screens */
  div#useraccountpagecontent .tab-content
  {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* Display the user account page tabs vertically on small screens */
@media (max-width: 500px)
{
  div#useraccountpagetabgroup ul.card-header-tabs
  {
    webkit-box-orient: vertical !important;
    webkit-box-direction: normal !important;
    webkit-flex-direction: column !important;
    ms-flex-direction: column !important;
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            -webkit-flex-direction: column !important;
            flex-direction: column !important;
  }

  /* Make the inactive tabs actually look like tabs -- why isn't this done always? */
  div#useraccountpagetabgroup ul.card-header-tabs .nav-link
  {
    border-color: #ddd #ddd #fff;  /* Copied from Bootstrap's ".nav-tabs .nav-link.active" rule */
  }
}

div.useraccountpagetabarea, div#authenticateuserformfields, div#confirminvitenewuserformfields, div#registernewuserformfields, div#resetuserpasswordformfields
{
  background-color: #F7F7F9;  /* Bootstrap's "gray-lightest" colour */
  border: 1px solid #ECEEEF;  /* Bootstrap's "gray-lighter" colour */
  border-radius: 0.25rem;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.5rem;
}

div#useraccountpageuserinfotabcontent div#coreuserinfo a.textcorrectstatslink
{
  font-size: 0.9rem;
  margin-left: 15px;
}

div#useraccountpageuserinfotabcontent h2
{
  font-weight: 400;
  margin-bottom: 0.75rem;
  margin-top: 0.25rem;
}

div#useradmincontent.card div.tab-content
{
  padding-left: 0;
  padding-right: 0;
}

div#useradminformscontainer
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  max-width: 1050px;
  padding-bottom: 0.75rem;
}

div#useradmininvitenewuserformcontainer
{
  margin-left: 4rem;
}

div#useradmininvitenewuserformcontainer #inputemail
{
  min-width: 280px; /* Wide enough for a typical email address, at least */
}

div#useradminfilterformcontainer #inputfilter
{
  min-width: 280px; /* Wide enough for a typical email address, at least */
}

div#registernewuserformfields .form-check, div#confirminvitenewuserformfields .form-check
{
  margin-bottom: 0.5rem;
}

div#userlists div.userlistlinkscontainer
{
  float: right;
}

div.userscoreboard > div > div
{
  padding: 3px;
}

div.userscoreboardentrypos
{
  text-align: right;
}

div.userscoreboardentryvalue
{
  text-align: right;
}

div.userscoreboardentryname
{
  overflow-wrap: break-word;
  word-wrap: break-word;
  -ms-word-break: break-all;
  word-break: break-all;
}

div.usertextcorrectedblockheader
{
  font-weight: bold;
  margin-top: 15px;
}

div.usertextcorrectedblockline
{
  width: 100%;  /* Expand divtable */
}

div.usertextcorrectedblockline > div > div
{
  padding-left: 20px;
  width: 50%;  /* 1/2 */
}

div#viewer, span#viewer
{
  height: 0px;  /* Initial state, resized to the correct height by code in veridian-documentdisplay.js */
  width: 100%;  /* So the span expands, to match the div */
}

div#viewercontrols > div
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
    -ms-flex-pack: justify;
      -webkit-justify-content: space-between;
          justify-content: space-between;
  -webkit-box-align: center;
    -ms-flex-align: center;
       -webkit-align-items: center;
          align-items: center;
  font-size: 0.8rem;
  padding: 1px 2px;
}

div#viewercontrols > div > div
{
  white-space: nowrap;  /* So the controls in each cell don't get split over multiple lines */
}

/* Remove all the default styling that applies to <button>s */
div#viewercontrols div.buttonscell button
{
  background: none;
  border: none;
  margin: 0;
  padding: 0;
}

div.vlistentryactioncell
{
  padding: 3px;
  white-space: nowrap;
}

div.vlistentryiconcell
{
  padding: 3px;
  padding-top: 6px;
  /* Take up minimum space without wrapping */
  -ms-flex: 0 0 auto;
    -webkit-box-flex: 0;
          -webkit-flex: 0 0 auto;
          flex: 0 0 auto;
}

div.vlistentrymaincell
{
  padding: 3px;
  -ms-flex-preferred-size: 100%;
    -webkit-flex-basis: 100%;
          flex-basis: 100%; /* Required for IE bug - see https://stackoverflow.com/questions/35111090/why-ie11-doesnt-wrap-the-text-in-flexbox */
}

div.vlistentrynumbercell
{
  padding: 3px;
  white-space: nowrap; width: 1%;  /* Take up minimum space without wrapping */
}

div.widthrestrictiondefault
{
  margin: auto;
  max-width: 1000px;
}

/* Uses display:table to allow for content that is too wide for the view port. This is currently only used on the "user management" page, as the user tables don't attempt to be responsive. Note that applying display:table to other full-width pages causes problems for IE (e.g. it causes the responsive home page to get messed up on smaller screens). */
div.widthrestrictionnoneallowoverflow
{
  display: table;  /* Expand to fit the content if it's wide */
}

footer#footer
{
  background-color: #F7F7F9;  /* Bootstrap's "gray-lightest" colour */
  border-top: 1px solid #ECEEEF;  /* Bootstrap's "gray-lighter" colour */
  font-size: 0.8rem;
}

form#addsectioncommentform input[type="submit"], form#addsectiontagform input[type="submit"]
{
  margin-top: 5px;
}

form#adduserlistitemsform #userlistitemformbutton
{
  margin-top: 0.5rem;
}

form#authenticateuserform a#forgotpassword
{
  font-size: 0.9rem;
}

form#contentblockform div#contentblockformcontrols
{
  text-align: center; max-width: 500px;  /* Center controls under the fields but limit by max-width on big screens */
}

form#contentblockform input[type="text"], form#contentblockform textarea
{
  width: 100%; max-width: 500px;  /* Fill the space available, but limit by max-width on big screens */
}

form.datebrowserwhitneyyearselector select
{
  max-width: 200px;  /* Limit this to avoid ridiculously long select fields on large screens */
}

form#textcorrectbasicinterfaceform div.inputblockcccontainer
{
  margin-top: 8px;
  text-align: center;
}

form#textcorrectbasicinterfaceform input[type="submit"]
{
  margin-left: 20px;
}

form#textcorrectbasicinterfaceform input[name="ntv"], form#textcorrectbasicinterfaceform textarea[name="ntv"], form#textcorrectpanojsinterfaceform input[name="ntv"], form#textcorrectpanojsinterfaceform textarea[name="ntv"]
{
  font-family: Serif; /* Improve the text readability to help text correctors to distinguish between I, l and 1 easier. */
}

form#textcorrectbasicinterfaceform input[name="ntv"], form#textcorrectbasicinterfaceform textarea[name="ntv"]
{
  width: 97%;  /* Fill the space available except for a tiny bit of margin */
}

form#textcorrectbasicinterfaceform textarea[name="otv"], form#textcorrectpanojsinterfaceform textarea[name="otv"]
{
  display: none;  /* Hidden field, equivalent to <input type="hidden"> */
}

form#textcorrectpanojsinterfaceform div.inputblockcccontainer
{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

form#textcorrectpanojsinterfaceform div.inputntvcontainer
{
  margin-bottom: 1px;
}

/* Prevent Bootstrap's .form-control:focus rule from messing with the border color of the "ntv" text entry boxes when correcting text (we want them to be red when focused) */
form#textcorrectpanojsinterfaceform div.inputntvcontainer .form-control[name="ntv"]:focus
{
  border-color: red;
}

form#textcorrectpanojsinterfaceform textarea[name="ntv"]
{
  height: 500px;  /* We can't tell without Javascript how big this should be [Unavoidable fixed height] */
}

/* Used for trapping bots submitting forms */
input.trap
{
  display: none;  /* Permanently hidden */
}

/* !! These two styles are required to make the "home" icon line up properly in the breadcrumbs. If the interface is customised to display text instead of an icon in the root of the breadcrumbs this may need to be removed. Anyone who can make the "home" icon line up properly in the breadcrumbs, on all browsers, without this hacky negative margin trick, gets a chocolate fish... */
ol.breadcrumb > .breadcrumb-item:first-child
{
  margin-bottom: -10px;
}
ol.breadcrumb > .breadcrumb-item:first-child svg.svgicon
{
  vertical-align: initial;
}

/* Add a top border to all the search results... */
ol.searchresults li
{
  border-top: solid 1px #CAD0D3;  /* Shade of gray between Bootstrap's "gray-light" and "gray-lighter" colours */
  padding: 12px 0px;
}

/* ...except the first one */
ol.searchresults li:first-child
{
  border-top: none;
}

ol.searchresults li div.searchresult > div
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
    -ms-flex-pack: justify;
      -webkit-justify-content: space-between;
          justify-content: space-between;
}
@media (max-width: 1000px)
{
  /* Put the "vlistentryactioncell" under the "vlistentrymaincell" search result instead of beside it, on all but very wide screens */
  ol.searchresults li div.searchresult > div
  {
    display: block;
  }
}

/* Add a top border to all the section comments... */
ol.sectioncomments li
{
  border-top: solid 1px gray;
  padding: 10px 5px;
}

/* ...except the first one */
ol.sectioncomments li:first-child
{
  border-top: none;
}

ol.sectioncomments li > div
{
  text-align: right;
}

/* Add a top border to all the user activity entries... */
ol.useractivityentries li
{
  border-top: solid 1px #CAD0D3;  /* Shade of gray between Bootstrap's "gray-light" and "gray-lighter" colours */
  padding: 12px 0px;
}

/* ...except the first one */
ol.useractivityentries li:first-child
{
  border-top: none;
}

/* Use flexbox for the user activity entry cells, so they wrap down if necessary */
ol.useractivityentries li div.useractivityentry > div
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
}

/* Add a top border to all the user list items... */
ol.userlistitems li
{
  border-top: solid 1px #CAD0D3;  /* Shade of gray between Bootstrap's "gray-light" and "gray-lighter" colours */
  padding: 12px 0px;
}

/* ...except the first one */
ol.userlistitems li:first-child
{
  border-top: none;
}

/* Use flexbox for the user list item cells, so they wrap down if necessary */
ol.userlistitems li div.userlistitem > div
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
}

/* This is a span so we can include it in <a> tags without HTML validation errors */
span.blockedcontent
{
  background-color: #CAD0D3;  /* Shade of gray between Bootstrap's "gray-light" and "gray-lighter" colours */
  display: inline-block;  /* So width and height can be set, and the element can be centered within its parent */
}

/* This is a span so we can include it in <a> tags without HTML validation errors */
span.nothumbnailavailable
{
  border: solid 1px #636C72;  /* Bootstrap's "gray-light" colour */
  color: #636C72;  /* Bootstrap's "gray-light" colour */
  display: inline-block;  /* So width and padding can be set, and the element can be centered within its parent */
  padding: 20px 2px;
  text-align: center;
  white-space: normal;  /* So the text wraps (if necessary) to fit the desired width */
  max-width: 100%;
}

span.qapageblocknum
{
  background-color: black;
  border-radius: 3px;
  color: white;
  font-size: 30px;
  -moz-opacity: 0.5;
  opacity: 0.5;
}

span#searchsubmitbuttoncontainer
{
  z-index: 5;  /* Must be greater than any buttons to the left/right, otherwise the btn-primary "shadow" is partially hidden, but not too high otherwise it will cover dropdowns etc. */
}

svg.svgicon
{
  vertical-align: middle;
}

/* Apply to icons that need to be clickable, to provide a suitably large click area for fat fingers on touch screen devices */
svg.touchclickable
{
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 1.75rem;
  padding: 0.25rem;
  width: 1.75rem;
}

/* Sort status of user admin table column title */
table.useradmintable a.useradmintablecolumnheader.ascend::after
{
  content: "\25b2";
}

table.useradmintable a.useradmintablecolumnheader.descend::after
{
  content: "\25bc";
}

table.useradmintable td.communications
{
  text-align: center;
}

table.useradmintable td.date
{
  white-space: nowrap;  /* So the day/month/year don't get split over multiple lines */
}

table.useradmintable td.metadataedits, table.useradmintable td.textcorrections
{
  text-align: right;
}

table.useradmintable th
{
  text-align: left;  /* Override th default of centered */
  padding: 8px;
  vertical-align: top;
}

table.useradmintable th#useradmintablecommunications
{
  text-align: center;
}

textarea#editvalueformnewvalue
{
  margin-bottom: 0.5rem;
}

ul.datebrowserricharddocuments li
{
  padding: 0.125rem;
}

/* Make the text that appears in the list of documents as small as possible, to save horizontal space which is often very limited. The "em" rule is for feature code display. */
ul.datebrowserricharddocuments li a, ul.datebrowserricharddocuments li a:link, ul.datebrowserricharddocuments li a:visited, ul.datebrowserricharddocuments li em
{
  font-size: 0.8rem;
}

ul.datebrowserwhitneydayselector
{
  -ms-flex-wrap: wrap;
  -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: justify;
    -ms-flex-pack: justify;
      -webkit-justify-content: space-between;
          justify-content: space-between;
  list-style: none;
  margin: 0px;
  padding: 0px;
  width: 100%;
}

ul.datebrowserwhitneydayselector li
{
  margin: 0.125rem 0;
  text-align: center;
  width: calc((100% - (6 * 0.25rem)) / 7);  /* Leave spacing of 0.25rem for each of the 6 spaces between each row of 7 days */
}

ul.datebrowserwhitneydayselector li a
{
  border: 1px solid #ECEEEF;  /* Bootstrap's "gray-lighter" colour */
  padding: 0.5em 0.25em;  /* Override Bootstrap's "nav-link" behaviour (need less padding for small screens) */
}

ul.datebrowserwhitneydayselector li a:focus, ul.datebrowserwhitneydayselector li a:hover
{
  text-decoration: underline;  /* Override Bootstrap's "nav-link" behaviour */
}

/* For styling unclickable days */
ul.datebrowserwhitneydayselector li span
{
  color: #CAD0D3;  /* Shade of gray between Bootstrap's "gray-light" and "gray-lighter" colours */
  padding: 0.5em 0.25em;  /* Should match "ul.datebrowserwhitneydayselector li a" (above) */
}

ul.datebrowserwhitneydaysofweek
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
    -ms-flex-pack: justify;
      -webkit-justify-content: space-between;
          justify-content: space-between;
  list-style: none;
  margin: 0 0 0.5rem 0;
  padding: 0px;
}

ul.datebrowserwhitneydaysofweek li
{
  text-align: center;
  width: calc((100% - (6 * 0.25rem)) / 7);  /* Leave spacing of 0.25rem for each of the 6 spaces between each row of 7 days */
}

ul.datebrowserwhitneymonthselector
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: justify;
    -ms-flex-pack: justify;
      -webkit-justify-content: space-between;
          justify-content: space-between;
  list-style: none;
  margin: 0px;
  padding: 0px;
}
@media (max-width: 800px)
{
  ul.datebrowserwhitneymonthselector
  {
    -ms-flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
            flex-wrap: wrap;
  }
}

ul.datebrowserwhitneymonthselector li
{
  margin: 0.125rem 0;
  text-align: center;
  width: calc((100% - (11 * 0.25rem)) / 12);  /* Leave spacing of 0.25rem for each of the 11 spaces between each row of 12 months */
}
@media (max-width: 800px)
{
  /* Two rows of 6 months each, on smaller screens */
  ul.datebrowserwhitneymonthselector li
  {
    width: calc((100% - (5 * 0.25rem)) / 6);  /* Leave spacing of 0.25rem for each of the 5 spaces between each row of 6 months */
  }
}
@media (max-width: 500px)
{
  /* Three rows of 4 months each, on small screens */
  ul.datebrowserwhitneymonthselector li
  {
    width: calc((100% - (3 * 0.25rem)) / 4);  /* Leave spacing of 0.25rem for each of the 3 spaces between each row of 4 months */
  }
}

ul.datebrowserwhitneymonthselector li a
{
  border: 1px solid #ECEEEF;  /* Bootstrap's "gray-lighter" colour */
  padding: 0.5em 0.25em;  /* Override Bootstrap's "nav-link" behaviour (need less padding for small screens) */
}

ul.datebrowserwhitneymonthselector li a:focus, ul.datebrowserwhitneymonthselector li a:hover
{
  text-decoration: underline;  /* Override Bootstrap's "nav-link" behaviour */
}

/* For styling unclickable months */
ul.datebrowserwhitneymonthselector li span
{
  color: #CAD0D3;  /* Shade of gray between Bootstrap's "gray-light" and "gray-lighter" colours */
  padding: 0.5em 0.25em;  /* Should match "ul.datebrowserwhitneymonthselector li a" (above) */
}

/* Increase the touchable area of the left pane tab dropdowns, to make it easier for fat fingers on touch screen devices */
ul#documentdisplayleftpanetabgroup .dropdown-toggle
{
  margin-left: -0.25rem;
  margin-right: -0.25rem;
  padding: 0.25rem;
}

ul.helptableofcontents, ul.privacytableofcontents
{
  list-style: none;
  padding: 0px;
}

/* This is a fix for IE only (found on IE11, but may also be a problem on IE10). On IE this is set (by the browser, not Bootstrap) to 100%, and it causes weird layout problems (i.e. the flex items won't wrap and they overflow to the right) */
ul#navbarentries .nav-item
{
  -ms-flex-preferred-size: auto;
}

ul#publicationbrowserhlist, ul#tagbrowserhlist
{
  margin-bottom: 0.25rem;
  margin-top: 1rem;
  -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  justify-content: center;
    -webkit-box-pack: center;
      -webkit-justify-content: center;
        -ms-flex-pack: center;
}

ul#publicationbrowserhlist li, ul#tagbrowserhlist li
{
  margin-bottom: 0.125rem;
  min-width: 44px;  /* Recommendation for minimum 44px components for touch devices */
  text-align: center;
}

/* No curved borders, because these aren't done properly if the hlist wraps onto multiple lines */
ul#publicationbrowserhlist .page-link, ul#tagbrowserhlist .page-link
{
  border-radius: 0;
}

ul.publicationbrowserlist, ul#publicationdocumentslist, ul.tagbrowservlist
{
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-wrap: wrap;
      -webkit-flex-wrap: wrap;
          flex-wrap: wrap;
  list-style: none;
  margin: 0px;
  padding: 0.25rem;
}

ul.publicationbrowserlist li, ul.tagbrowservlist li
{
  border-bottom: 1px solid #F7F7F9;  /* Bootstrap's "gray-lightest" colour */
  padding: 0.25rem;
  width: 100%;  /* Single column display */
}

ul.publicationbrowserlist.doublecolumn li
{
  width: 50%;  /* Double column display */
}
@media (max-width: 500px)
{
  ul.publicationbrowserlist.doublecolumn li
  {
    width: 100%;  /* Revert to single column on small screens */
  }
}

ul#publicationdocumentslist li
{
  border-bottom: 1px solid #F7F7F9;  /* Bootstrap's "gray-lightest" colour */
  padding: 0.125rem;
  width: 100%;  /* Single column display */
}

#viewer #well .aroundoverlay {
  position: absolute;
  background-color: rgba(0,0,0,0.5);
  z-index: 90;
  touch-action: none;
  -ms-touch-action: none;
}

#viewer #well #clipdiv
{
  border: 0;
  margin: 0;
  padding: 0;
  position: absolute;
  display: block;
  z-index: 90;
  touch-action: none;
  -ms-touch-action: none;
}

#viewer #well #clipbuttondiv
{
  margin: 0;
  padding: 0;
  position: absolute;
  display: block;
  text-align: right;
  z-index: 100;
}

button.clipbutton
{
  height: 24px;
}