/*              Bits of style for all websites - HTML 5 & CSS3
                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/

/* ------------------------------------------------------------------------- Keyframes for generic animations -- */
@keyframes colourIn {
    0% { filter: grayscale(100%) ; }
    100% { filter: none ; }
}

@keyframes fadeOff { /* Fade off - only using Opacity */
      0% { opacity: 1 ; }
    100% { opacity: 0 ; }
}
@keyframes fadeOn { /* Fade on - only using Opacity (clearer than equivelent fadeOff reverse) */
      0% { opacity: 0 ; }
    100% { opacity: 1 ; }
}
@keyframes fade { /* Fade off and change layer (z-index) */
      0% { z-index: 99 ; opacity: 1 ; }
    100% { z-index: -1 ; opacity: 0 ; }
}

:root { --divider: #3a3a3a ; }
:root { --offWhite: #fffef9 ; }
:root { --greyOut: #ddd ; }

/* ============================================================================================ Document-wide == */
* {
    margin: 0 ; padding: 0 ; border: 0 none transparent ;
    cursor: inherit ; hyphens: manual ; /* soft hyphens are hidden by default  */
}
body {
    overflow: auto ; position: absolute ; top: 0 ; left : 0 ; min-width: 96vw ;
    margin: auto ; padding: 0 22px 0 0 ; /* For cross-browser consistency */
    color: black ; background: var(--offWhite) ; border-image: url("../images/tb00b.gif") 0 0 0 100% / 0 0 0 27px ;
    font-family: "Trebuchet MS", Georgia, "Minion Web", "Times New Roman", Times, serif ;
    font-size-adjust: 0.49 ; text-align: left ; vertical-align: baseline ;
    font-weight: normal ; text-decoration: none ; line-height: 130% ;
    cursor: default ;
    scroll-behavior: smooth ;
}
:lang(en) { quotes: "‘" "’" "“" "”" ; }
:lang(de), :lang(yi) { quotes: "» " " «" " ›" "‹ " ; font-style: italic ; }
:lang(fr) { quotes: "« " " »" "‹ " " ›" ; }
:lang(la) { quotes: "‘" "’" "“" "”" ; font-style: italic ; }
:lang(sh) { quotes:  "„" "”" "‚" "’" ; }
span[lang] { font-style: italic ; }

footer, header, section, nav { display: block ; } /* article & aside under Page Body below */

abbr { color: #640 ; }
  abbr[title] { cursor: alias ; }
address { text-align: right ; }

blockquote {
    display: block ; max-width: 85ex ; margin: 0 ; padding: 1rem 5ex 0 5ex ;
    text-indent: -1.6ex ;
}
  /* Don't use these, use first and last child
     blockquote::before { content: open-quote ; }
     blockquote::after { content: close-quote ; float: right ; margin: -0.5ex -1.5ex 0 0 ; }
  */
  blockquote+sup.Reference { float: right ; margin: -1ex 4ex 0 0 ; }
  blockquote+footer+p { margin-top: 7ex ; }

    blockquote p, article blockquote p, section blockquote p, article blockquote.bodyChunk p, article .bodyChunk blockquote p {
        margin: 1ex 0 0 0 ; text-indent: 0 ;
    }
    blockquote p, section blockquote p { min-width: 0 ; max-width: 100% ; }
      blockquote p+ol, article blockquote p+ol , article blockquote.bodyChunk p+ol {
          margin: 3ex 3ex 2ex 3ex ;
      }
    blockquote p:first-child, article blockquote p:first-child { text-indent: -1.6ex ; }
    blockquote>*:first-child::before { content: open-quote ; }
    blockquote p:last-of-type::after { content: close-quote ; }
      blockquote cite { font-style: normal ; }
      section blockquote footer { float: none ; margin: 1.5ex 3ex 3ex 0 ; }
/* See below for section footer */

cite {
    white-space: nowrap ;
    color: #666 ; font-size: 95% ; font-style: oblique ;
}
  a cite { color: inherit ; }

code {
    display: block ; margin: 1ex 0 1.5ex 5ex ; text-indent: 0 ;
    color: #031; font-family: Verdana, Arial, Helvetica, sans-serif ; font-size: 90% ; font-size-adjust: 0.47 ;
    white-space: pre-line ;
}
kbd { font-family: "Courier New", monospace ; font-size: 80% ; font-size-adjust: 0.47 ; white-space: nowrap ; }

dl { margin: 0.6ex 4% 2ex 3ex ; line-height: 110% ; }
dt { margin: 1.5ex 0 0 0 ; }
dd { margin: 0 0 0.3ex 4ex ; }

dfn {
    color: #333 ; font-size: 100% ; font-size-adjust: 0.42 ;
    font-family: "Minion Web", Georgia, "Times New Roman", Times, "Trebuchet MS", serif ; font-style: oblique ;
    white-space: nowrap ;
}

h1, h2, h3, h4, h5, h6, th {
    font-family: "Trebuchet MS", "Myriad Web", Verdana, Arial, Helvetica, sans-serif ;
    font-weight: bold ; letter-spacing: 0.2em ; text-decoration: none ;
    break-after: avoid ;
}
h1 { font-size: 160% ; line-height: 105% ; }
h2 { font-size: 140% ; }
h3 { margin: 3ex 0 0.6ex 0 ; color: #bbb ; font-size: 120% ; line-height: 95% ; }
h4 {
    margin: 2.5ex 0 0.3ex 0 ;
    color: #999 ; letter-spacing: 0.1em ; font-size: 107% ;
}
h5 { margin: 2ex 0 0 0 ; color: #888 ; letter-spacing: 0.1ex ; font-size: 102% ; }
h6, th {
    margin: 1ex 0 0 0 ;
    color: #777 ; letter-spacing: 0 ; font-size: 98% ;
}

hr { border-top: 1px groove #888 ; }

i { font-style: italic ; } /* for Logot &c */
    i i { color: #488 ; font-style: normal ; }

iframe { resize: both ; overflow: hidden ; }
  iframe[seamless] { resize: none ; overflow: visible ; }

img { display: block ; max-width: none ; height: auto ; }
object { display: block ; }

p {
    min-width: 45ex ; max-width: 67ex ; margin: 0.2ex 0 1.5ex 0 ;
    line-height: 120% ;
}
details { display: block ; font: 75% small-caption ; margin: 1ex 0 0 0 ; text-indent: 0 ; }
  details p { font: 120% "Trebuchet MS", Georgia, "Times New Roman", Times, serif ; }

samp {
    color: #233; background-color: transparent ;
    font-family: Verdana, Arial, Helvetica, sans-serif ;
    font-size: 100% ; font-size-adjust: 0.54 ;
    white-space: nowrap ;
}
  samp::before, samp::after, var::before, var::after { content: " " ; font-size: 30% ; line-height: 100% ; }
                                      /* Remove size when browsers honour thin space */
sub, sup { font-size: 60% ; font-weight: bold ; }
sub { vertical-align: -40% ; }
sup { vertical-align: 50% ; }
    sup.Reference { /* Use for links to references in footnotes */
        font-size: 65% ;
        vertical-align: 40% ;
    }
    sup.Reference::before { content: "(" ; font-weight: normal ; }
    sup.Reference::after { content: ")" ; font-weight: normal ; }

time { white-space: nowrap ; }

var { font: italic 110% "Times New Roman", Times, serif ; }
cite var { font-size: 150% ; line-height: 90% ; }
  cite var::before, cite var::after { content: none ; }

/* ------------------------------------------------------------------------- Classes -- */
.Formulae { font: normal 130%/200% "Times New Roman", Times, serif ; }
  .Formulae p { font: normal 120%/175% "Times New Roman", Times, serif ; }

.Inactive {  /* An element that is normally active, e.g. a link */
    cursor: default ; color: #444 ;
}

.Quantity, .ISBN { /* Use for measures e.g. 20 kg and for ISBNs & ISDNs */
    white-space: nowrap ; word-spacing: -0.45ex ;
}
  .Quantity::before, .ISBN::before, .Quantity::after, .ISBN::after { content: " " ; }

.Matrix {
    border-style: none solid ; border-width: 2px ; border-color: #666 ; border-radius: 0.8ex ; border-collapse: revert ;
    background: #fff ; padding: 0 ;
}

  .Matrix td {
    padding: 0.2ex 0.5ex ; font-family: "Courier New", monospace ; vertical-align: middle ; text-align: right ;
  }

.On { opacity: 1 ; }
.FadeOn { animation: 2.7s linear 1ms normal both 1 running fadeOn ; }
.FadeIn { animation: 3s ease-out 1ms reverse both 1 running fade ; }
.In { opacity: 1 ; z-index: 9 ; } /* Must be on top to be clickable */
.FadeOut { animation: 1.7s ease-out 1ms normal both 1 running fade ; }
.Out { opacity: 0 ; z-index: -1 ; }
.FadeOff { animation: 1.5s linear 1ms normal both 1 running fadeOff ; }
.Off { opacity: 0 ; }
.Up { z-index: 9 ; }
.Down { opacity: 1 ; z-index: -1 ; }

.AfterTitle::after { content: ' ' attr(title) ; }

/* -------------------------------------------------------------------------- Tables -- */
table {
    margin: 2ex auto 2ex auto ;
    table-layout: auto ; border-collapse: collapse ; empty-cells: show ;
}
  caption {
      padding: 0.6ex 1ex 0.6ex 1ex ; border-top: 1px solid #000 ; border-bottom: 1px solid #888 ;
      text-align: left ;
  }
  colgroup { border-left: 1px solid #888 ; border-right: 1px solid #888 ; }
  col { border-left: 1px solid #888 ; border-right: 1px solid #888 ; }
  tfoot { border-top: 1px solid #888 ; }
  td { vertical-align: middle ; font-family: Georgia, "Times New Roman", Times, serif ; }

/* -------------------------------------------------------------- Forms & interaction-- */
[onclick] { cursor: pointer ; }
button { border: 1px solid #666 ; padding: 0 0.5ex 0.2ex 0.5ex ; cursor: pointer ; text-align: center ; }
command:empty::before { content: attr(label) ; }
input {
    color: hsla(179, 90%, 20%, 1.00) ; background: #fff ; border: 1px solid #ddd ;
    font-size: inherit ;  cursor: text ;
}
  input:out-of-range { color: hsla(10, 90%, 40%, 1.00) ; }
  input[disabled], input[readonly] { cursor: default ; }
menuitem:empty::before { content: attr(label) ; }

/* ------------------------------------------------------- Navigation in general -- */
a {
    outline: none ; text-decoration: none ; font-size: inherit ; cursor: pointer ;
    transition: color 0.1s, text-shadow 1s, transform 0.5s ;
}
    :link { color: #00c ; } /* Link not yet visited */
    :visited { color: #008 ; } /* Note reduced browser support for privacy reasons */
    a:hover { color: #44f ; text-shadow: 0.1ex 0 #fff, -0.1ex 0 #fff, 0 0.1ex #fff, 0 -0.1ex #fff ; }
    :focus { color: #48f ; outline: none ; }
    a:active { color: #c1bbb3 ; outline: none ; }
    [data-target~="self"]:not([href*="#"]) { cursor: default ; }
    a[data-target~="self"]:not([href="#pageTop"]) { color: #04a ; }
    [rel="help"] { cursor: help ; }
    [rel="license"], [data-target~="popup"] { color: #408 ; cursor: pointer ; }
    [rel="license"]:hover, [data-target~="popup"]:hover, [data-target~="popup"]:focus, [data-target~="popup"]:active {
        color: #0aa ; white-space: nowrap ;
    }
    a abbr { color: inherit ; text-decoration: none ; }
    a sup { color: #00d ; }

:target { color: #066 ; }

/* ================================================================================================= Divisions == */
/* -------------------------------- Top line -- */

/* px throughout, not ex measurements, for accurate placement of decorative topline */

#home {
    position: absolute ; left: 10px ; top: 16px ; width: 35px ; height: 35px ; z-index: 99 ;
    background-color: var(--offWhite) ;
}
header {
    padding: 10px 0 0 45px ;  /* Padding, no margin, at top so  top  button goes all the way */
    text-align: right ;
}
  header h1 {
      border-bottom: 3px solid var(--divider) ;
      color: #888 ; line-height: 21px ; font-size: 14px ; letter-spacing: 8px ;
  }
    header h1 b, b { color: #066 ; font-weight: bold ; font-size: 110% ; } /* For testbeds */
    header h1 cite { font-size: 100% ; }
  header h2 {
      padding: 0 4px 0 0 ;
      color: #444 ; font-weight: normal ; font-size: 14px ; letter-spacing: 0.6ex ;
  }
    header a:link, header a:visited, header a:hover, header a:focus,
    header [data-target~="self"]:not([href="#pageTop"]) {
        color: inherit ; text-decoration: none ; cursor: default ;
    }
    header svg { float: right ; padding: 2px 0 0 12px ; }

/* ----------------------------------------------------------------------------------------------------- Menu -- */
/* These styles apply to all menus, not only menus in a specific position */
#menu { z-index: 10 ; color: #111 ; font: menu ; }
  #menu ul { list-style: none ; }
    #menu a { color: inherit ; }
    #menu :focus { color: #216 ; }
    #menu a:hover { color: #08f ; transform-origin: -1ex 0 ; }
    #menu [rel="author"]:hover, #menu [data-target~="start"]:hover, #menu [rel="help"]:hover { color: #22b ; }
    #menu [data-target~="self"], #menu [data-target~="self"]:hover {
        color: #043 ; text-shadow: none ;
        font-size: 88% ; font-variant: small-caps ; letter-spacing: 0.2em ; text-decoration: none ;
    }
    a.Inactive, a.Inactive:link, a.Inactive:hover, #menu a.Inactive, #menu a.Inactive:hover {
        color: var(--greyOut) ; background-color: transparent ; cursor: default ;
        font-size: 85% ; font-weight: lighter ; text-decoration: none ;
    }
      #menu cite { white-space: inherit ; }
      #menu img { display: none ; }

/* --------------------------------------------------------------------------------- Content areas -- */
/* ---------------------------------------------------------------- Illustrations -- */
/* Also figure spec included below to match  section  and  aside */
figure { }
  figure iframe, figure img, figure object, figure video {
      float: right ; max-width: 100% ; height: auto ;  /* max 100% - no overflow from small containers */
      margin: 0 auto 0 auto ; border: 1px solid #999 ;
  }
  figure img, figure video { background: transparent ; }
  figure iframe, figure object { background-color: #fff ; }
  figcaption {
      clear: both ; padding: 0.5ex 0 0 0 ; margin: 1ex 0 0.5ex 0 ;
      text-align: left ; font-size: 95% ; letter-spacing: 0.1ex ; line-height: 110% ;
  }

  figure svg { width: 100% ; }

  /* For the  url()  form of CSS filters, the SVG filters file, ../xml/filters.svg is required in the PHP or HTML */
  svg#filters { visibility: hidden ; position: absolute ; width: 0 ; height: 0 ; }
  .BlueGrey, .ToBlueGrey:hover  { filter: url('#blueGrey') saturate(60%) contrast(110%) ; }
  .Grey, .ToGrey:hover { filter: grayscale(98%) ; }
  .Sepia, .ToSepia:hover { filter: url('#sepia') saturate(75%) ; }
  .Colour, .ToColour:hover { filter: none ; }

  .Fade1s { transition: filter 1s ease-in-out 0.1s ; }

/* ---------------------------------------------------- Slides -- */
#bigScreen { background: transparent ; }
  #screen { float: none ; width: 100% ; cursor: default ; }
  #bigScreen figcaption { text-align: right ; }

/* ---------------------------------------------------------------------- Body text -- */
/* ---------------------------- Main and general - */
main, article, section {
    color: #100800 ; background-color: transparent ;
    line-height: 140% ; font-size: 96% ; letter-spacing: 1px ;
}
main, #pageBody { /* pageBody (unfortunate - for historical reasons) may be an article or a section */
    clear: both ; float: none ; display: table ;
    margin: 3ex auto 1ex auto ;
    padding: 3ex 0 3ex 12.5% ; /* padding set by *Menu53.css */
}

section, aside, figure, template, main header, article header {
    float: left ; width: calc(42.5% - 1rem) ; min-width: 45ex ; max-width: 68ex ;
    margin: -1ex 0 0 calc(2.5% + 1rem) ; padding: 0 ;
}
    section aside { min-width: 0 ; max-width: none ; }
    article footer, aside footer, section footer {
        border: none ; font-size: 86% ; line-height: 100% ; margin: 0 ; padding: 0 ;
    }
    section img { max-width: 60% ; margin: 5ex auto 5ex auto ; }

    main ul, main ol, article ul, article ol {
        margin: 0.7ex 3ex 2ex 5ex ;
        list-style-type: none ; list-style-image: none ;
    }
    main ol, article ol { counter-reset: item ; }
    main li, article li {
        margin: 1.5ex 2ex 1.5ex 1ex ;
        text-indent: -5ex ; line-height: 115% ;
    }
    main ul>li::before, main ol ul>li::before, article ul>li::before, article ol ul>li::before {
        content: "♦ " ; counter-increment: none ; color: #888 ;
    }
    main ol>li::before, article ol>li::before {
        display: inline-block ; min-width: 3ex ; padding: 0 1ex 0 0 ;
        content: counters(item, ".") ; counter-increment: item ;
        text-align: right ; text:
    }

/* ------------------------------------ Articles - */
article { display: table ; margin: 3ex auto 3ex auto ; padding: 0 0 0 2.2rem ; }
    article a { white-space: nowrap ; }
    article a:hover { border-bottom: 1px dotted #22f ; }

article.References {
    display: block ; margin: auto; padding: 2rem 0 0.5rem 0 ; background: var(--offWhite) ;
    columns: 60ex 3 ; column-fill: balance ; column-gap: 2rem ; column-rule: 1px solid var(--divider) ;
}
  article.References>h1 { column-span: all ; }
  article.References>h3 { margin: 0 0 1ex 3ex ; }
  article.References ol { margin: 1ex 0 2rem 2ex ; }
    article.References li { break-inside: avoid-column ; }


    article li li {
        margin: 0.5ex 1.5ex 1.5ex 0 ;
        line-height: 100% ;
    }
    article ul ul>li::before {
        content: "• " ;
        color: #777 ; font-size-adjust: 0.6 ;
    }
    article ol li li {
        margin-left: 1.7ex ;
        text-indent: -4.8ex ;
    }
    article li li ul>li::before {
        content: "▪ " ;
        color: #666 ;
    }
    article ol li li li {
        margin-left: 3.6ex ;
        text-indent: -6.8ex ;
    }
    article li li li ul>li::before {
        content: "◊ " ;
        font-size-adjust: 0.4 ;
        color: #000 ;
    }
    article ol li li li li {
        margin-left: 5.7ex ;
        text-indent: -8.8ex ;
    }
    article li li li li ul>li::before {
        content: "▫ " ;
        font-size-adjust: 0.55 ;
    }
    article ol li li li li li {
        margin-left: 7.7ex ;
        text-indent: -10.8ex ;
    }
    article li li li li li ul>li::before {
        content: "∙ " ;
        font-size-adjust: 0.6 ;
    }
    article li h4, article li h5, article li.SubHeading {
        margin: -1.9ex 0 0.8ex 0 ;
        padding: 0 ; text-indent: 0 ;
        white-space: nowrap ;
    }
    article li h5, article li.SubHeading { margin: -2ex 0 0.3ex 0 ; }
    article li p {
        margin: 0 0 -1.7ex 0 ;
        padding: 0 ; text-indent: 0 ;
        line-height: 115% ; font-size: 90% ;
    }

/* -------------------------------------- Asides - */
aside { margin-top: 2ex ; }
    aside p { font-size: 90% ; line-height: 115% ; }

/* ---------------------------------------------------------------------------- Navigation buttons -- */
button[onclick*="fadeOut"], button[onclick*="crossFade"] {
    position: absolute ; top: 0.1ex ; right: 0 ; width: 3.5ex ; height: 3.5ex ; z-index: 99 ;
    text-align: center ;
}
  button[onclick*="fadeOut"]:empty::before, button[onclick*="crossFade"]:empty::before {
      content: "╳" ;
      font-size: 70% ; font-weight: bold ; vertical-align: 20% ;
  }

/* -------------------------------------  Page foot -- */
nav.BackNext {
    clear: both ;
    margin: 3ex 0 0 0 ; padding: 2ex 0 0 0 ;
    text-align: right ; vertical-align: bottom ;
}
    [href="#pageTop"]:empty, [href="#pageTop"]:empty:hover {  /* px to match vertical menu line */
        z-index: 99 ; position: absolute ; left: 26px ; bottom: 0 ; height: 0.65rem ;
        margin: 0 ; border-bottom: 3px solid black ;
        font-size: 165% ; letter-spacing: -0.4ex ; line-height: 28% ;
    }
    [href="#pageTop"]:empty::before { content: "    ▲" ; }
    [href="#pageTop"]:empty::after { content: none ; }
    [rel="prev"]:empty, [href*="goBack"]:empty {
        float: left ;
        margin: 0 0 0 12% ;
        padding: 0 0 0 5ex ;
        font-size: 165% ;
    }
    [rel="prev"]:empty::before, [href*="goBack"]:empty::before, [onclick*="goBack"]:empty::before {
        content: "◄" ;
    }
    [rel="next"]:empty {
        float: right ;
        margin: 0 0 2ex 3ex ;
        font-size: 165% ;
    }
    [rel="next"]:empty::before { content: "►" ; }

    a:empty:hover  { text-decoration: none ; }

/* --------------------------------------------- Footnotes -- */
footer, .Footnotes {
    clear: both ; float: right ; min-width: 35ex ;
    margin: 2ex 0 0 0 ; padding: 1ex 0 0.5ex 0 ; border-top: 2px solid var(--divider) ;
    text-align: right ; vertical-align: bottom ;
}
    footer ul, footer ol { font-family: Georgia, serif ; font-size: 65% ; word-spacing: 1px ; }
    footer ol { padding: 0 0 1ex 0 ; }
    footer ul { list-style: none ; }
    footer ol+ul {
        padding: 1ex 0 0 0 ;
        border-top: 1px solid #555 ;
    }

    footer a { color: #00a ; background-color: transparent ; white-space: nowrap ; }
    footer a:hover { color: #00f ; border-bottom: 1px dotted #00f ; }
    footer cite { font-size: 105% ; }
    footer cite::before, footer cite::after { content: " " ; }
    footer li, footer p {
        color: black ; background-color: transparent ;
        clear: right ; margin: 0 0 0.5ex 0 ; line-height: 130% ;
    }
    footer h6 { float: right ; width: 100% ; margin: 1.5ex 0 0 0 ; border-top: 1px solid rgba(0, 0, 0, 0.5) ; }

#p5_loading { left: 8rem ; bottom: 1.6rem ; }

/* ================================================================================================== */