html {
  font-family: "Century Gothic", "Montserrat", sans-serif;
  font-size: calc(10px + (15 - 10) * ((100vw - 300px) / (1600 - 300)));
}

/*
rgba(0, 0, 139, 1)     dark blue
rgba(173, 216, 230, 1) light blue
rgba(245, 245, 255, 1) pale background blue
rgba(0, 0, 255, 1)     mid blue
*/

::-moz-selection { /* Code for Firefox */
  background : rgba(173, 216, 230, 1);
}

::selection {
  background : rgba(173, 216, 230, 1);
}


.background {
  background-color : rgba(245, 245, 255, 0.5);
  z-index : -10;
}

.site::before {
  display : inline-block;
  content : "\00a0";
  background-image : url('/logo.svg');
  background-size : calc(15px + (30 - 15) * ((100vw - 300px) / (1600 - 300)));
  background-repeat : no-repeat;
  margin-right : 10px;
  width : calc(15px + (30 - 15) * ((100vw - 300px) / (1600 - 300)));
  height : calc(11px + (22 - 11) * ((100vw - 300px) / (1600 - 300)));
}

.pdf::before, .external::before, .home::before, .back::before, .forward::before, .flickr::before, .sort::before, .down::before, .up::before {
  background-repeat : no-repeat;
  display : inline-block;
  content : '';
  background-size : 1em;
  width : 1em;
  height : 1em;
}

.pdf::before {
  background-image : url('/_favicons/pdf.svg');
}

.sort::before {
  background-image : url('/_favicons/sort.svg');
  margin-right : 0.5em;
  margin-left : -0.5em;
}

.external::before {
  background-image : url('/_favicons/external.svg');
}

.home::before {
  background-image : url('/_favicons/home.svg');
}

.back::before {
  background-image : url('/_favicons/back.svg');
  margin-right : 0.5em;
}

.forward::before {
  background-image : url('/_favicons/forward.svg');
  margin-right : 0.5em;
}

.flickr::before {
  background-image : url('/_favicons/flickr.svg');
  margin-right : 0.5em;
}

.down::before {
  background-image : url('/_favicons/down.svg');
  margin-right : 0.5em;
}

.up::before {
  background-image : url('/_favicons/up.svg');
  margin-right : 0em;
}

.close::before {
  background-image : url('/_favicons/close.svg');
}

.dropdown .dropbtn, .dropdown-content a, .topnav a:hover, .dropdown:hover .dropbtn, .dropdown-content a:hover, h1, h3, p.update, .appeal, th, a:visited, .fixed, .popup::before, .close, details summary::before, details[open] summary::before, #myBtn {
  color : rgba(0, 0, 139, 1);
}

.topnav, .franchises th, .dates th, th, .progress, .fixed, .dropdown-content a:hover, a:hover, a:focus, summary:focus, #myBtn:hover, textarea, input[type="text"], .popup:hover, .close:hover {
  background-color : rgba(173, 216, 230, 1);
}

.dropdown-content, .topnav a:hover, .dropdown:hover .dropbtn, li:hover li a:hover, body, ::-webkit-scrollbar-track, .popuptext, .popuptextr, .popuptextl, .popuptextfr {
  background-color : rgba(245, 245, 255, 1);
}

li {
  white-space : pre-wrap;
}

a:link.navigation, a:link, .progress {
  color : rgba(0, 0, 255, 1);
  font-weight : normal;
}

#nav {
  position : fixed;
  left : 0;
  top : 0;
  z-index : 100;
  width : 100%;
  transition : top 0.4s;
}

/* background stripe colour */
.topnav {
  overflow: hidden;
}

/* positions 'home' link */
.topnav a {
  float : left;
  text-align : center;
  padding : 0.25rem 0.5rem 0.25rem 0.5rem;
  text-decoration : none;
  font-size : 1.1rem;
}

/* Add an active class to highlight the current page */
.active {
  float : left;
}

/* Hide small screen icon */
.topnav .icon {
  display : none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float : left;
  overflow : hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size : 1.1rem; 
  border : none;
  padding: 0.25rem 0.5rem 0.25rem 0.5rem;
  background-color : inherit;
  font-family : inherit;
  margin : 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display : none;
  position : absolute;
  min-width : 160px;
  box-shadow : 0 0.5rem 1rem 0 rgba(0, 0, 139, 1);
  z-index : 900;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float : none;
  padding : 0.25rem 1rem;
  display : block;
  text-align : left;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display : block;
}

/* When the screen is less than 900 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 900px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display : none;
  }

  .topnav a.icon {
    float : right;
    display : block;
    font-size : 16px;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 900px) {
  .topnav.responsive {
    position : relative;
  }

  .topnav.responsive a.icon {
    position : absolute;
    right : 0;
    top : 0;
  }

  .topnav.responsive a {
    float : none;
    display : block;
    text-align : left;
  }

  .topnav.responsive .dropdown {
    float : none;
  }

  .topnav.responsive .dropdown-content {
    position : relative;
  }

  .topnav.responsive .dropdown .dropbtn {
    display : block;
    width : 100%;
    text-align : left;
  }
}

details > summary {
  cursor : pointer;
  font-size : 111.11111%;
}

details {
  font-size : 90%;
}

li:hover li {
  float : none;
}

h1 {
  padding-top : 2.5rem;
}

h2 {
  font-style : italic;
  padding-top : 1.25rem;
}

h3 {
  padding-top : 0.25rem;
  margin-top : 1rem;
  display: inline-block; /* limits border length */
  border-top : 2px solid rgba(173, 216, 230, 1); /* pale blue horizontal line */
  white-space : pre-wrap;
  tab-size : 18;
}

h4 {
  white-space : pre-wrap;
  tab-size : 21;
}

dt {
  padding-top : 0.625rem;
}

dt.nopad {
  padding-top : 0;
  margin-left : -1.5rem;
}

dl {
  margin-top : 0;
  margin-bottom : 0;
  margin-left : 1.5rem;
}

dd {
  padding-top : 0;
  margin-left : 1.5rem;
}

dd.nopad {
  margin-left : 0;
}

nav {
  text-align : left;
  font-size : 93%;
/*  word-spacing: 0.125rem; */
}

p {
  font-size : 1em;
  white-space : pre-wrap;
  page-break-inside : avoid;
  break-inside : avoid;
  vertical-align : baseline;
}

p.ordinary {
  background : none;
}

.rightsmall {
  text-align : right;
  font-size : small;
  font-style : italic;
}

small, .small {
  font-size : 83%;
}

p.update {
  background : none;
}

.appeal {
  max-width : 1100px;
  background : none;
  white-space : pre-wrap;
}

.franchises {
  border-collapse : collapse;
  border : none;
  font-size : 1rem;
  padding : 0.125rem;
}

.franchises th {
  text-align : left;
  vertical-align : baseline;
  font-size : 1rem;
}

.franchises td {
  text-align : left;
  vertical-align : baseline;
  border : none;
  padding-right : 0.25rem;
  padding-left : 0.25rem;
}

.dates th {
  text-align : left;
  vertical-align : top;
  font-size : 1rem;
  padding : 0.125rem;
}

.dates td {
  font-size : 1rem;
  border : none;
  padding : 0.125rem;
}

.dates tbody td:nth-of-type(odd) {
  background : none;
}

table {
  border-collapse : collapse;
  border : none;
  width : 96.5vw;
}

table:last-child {
  margin-bottom : 1rem;
}

th {
  vertical-align : top;
  text-align : left;
  font-size : 1rem;
  padding : 0.125rem 0.5rem 0.125rem 0.5rem;
  border : none;
  white-space : pre-wrap;
  z-index : 150;
}

tbody td:nth-of-type(odd) {
  background-color : rgba(173, 216, 230, 0.20);
}

td {
  vertical-align : top;
  white-space : pre-wrap;
  border-bottom : 1px solid rgba(0, 0, 139, 1);
  border-left : none;
  border-right : none;
  padding : 0.125rem 0.5rem 0.125rem 0.5rem;
  font-size : 1rem;
  line-height : 1.5;
}

td.indent {
  text-indent : 1em;
}

.two {
  width : calc(6px + (32 - 6) * ((100vw - 300px) / (1600 - 300)));
}

.three {
  width : calc(9px + (48 - 9) * ((100vw - 300px) / (1600 - 300)));
}

.four {
  width : calc(12px + (64 - 12) * ((100vw - 300px) / (1600 - 300)));
}

.fourh {
  height : calc(12px + (64 - 12) * ((100vw - 300px) / (1600 - 300)));
}

.five {
  width : calc(15px + (80 - 12) * ((100vw - 300px) / (1600 - 300)));
}

.six {
  width : calc(18px + (96 - 18) * ((100vw - 300px) / (1600 - 300)));
}

.sixpseven {
  width : calc(20.1px + (107.2 - 20.1) * ((100vw - 300px) / (1600 - 300)));
}

.seven {
  width : calc(21px + (112 - 21) * ((100vw - 300px) / (1600 - 300)));
}

.eight {
  width : calc(24px + (128 - 24) * ((100vw - 300px) / (1600 - 300)));
}

.nine {
  width : calc(27px + (144 - 18) * ((100vw - 300px) / (1600 - 300)));
}

.ten {
  width : calc(30px + (160 - 30) * ((100vw - 300px) / (1600 - 300)));
}

.eleven {
  width : calc(33px + (176 - 33) * ((100vw - 300px) / (1600 - 300)));
}

.twelve {
  width : calc(36px + (192 - 36) * ((100vw - 300px) / (1600 - 300)));
}

.twelvep5 {
  width : calc(37.5px + (200 - 37.5) * ((100vw - 300px) / (1600 - 300)));
}

.thirteen {
  width : calc(39px + (208 - 39) * ((100vw - 300px) / (1600 - 300)));
}

.fourteen {
  width : calc(42px + (224 - 39) * ((100vw - 300px) / (1600 - 300)));
}

.fifteen {
  width : calc(45px + (240 - 45) * ((100vw - 300px) / (1600 - 300)));
}

.sixteen {
  width : calc(48px + (256 - 48) * ((100vw - 300px) / (1600 - 300)));
}

.seventeen {
  max-width : 230px;
  width : calc(51px + (272 - 51) * ((100vw - 300px) / (1600 - 300)));
}

.eighteen {
  width : calc(54px + (288 - 54) * ((100vw - 300px) / (1600 - 300)));
}

.twenty {
  width : calc(60px + (320 - 60) * ((100vw - 300px) / (1600 - 300)));
}

.twentyone {
  width : calc(63px + (336 - 63) * ((100vw - 300px) / (1600 - 300)));
}

.twentytwo {
  width : calc(66px + (352 - 66) * ((100vw - 300px) / (1600 - 300)));
}

.twentythree {
  width : calc(69px + (368 - 69) * ((100vw - 300px) / (1600 - 300)));
}

.twentyfive {
  width : calc(75px + (400 - 75) * ((100vw - 300px) / (1600 - 300)));
}

.twentyseven {
  width : calc(81px + (432 - 81) * ((100vw - 300px) / (1600 - 300)));
}

.twentyeight {
  width : calc(84px + (448 - 84) * ((100vw - 300px) / (1600 - 300)));
}

.thirty {
  width : calc(90px + (480 - 90) * ((100vw - 300px) / (1600 - 300)));
}

.thirtyfour {
  width : calc(102px + (544 - 102) * ((100vw - 300px) / (1600 - 300)));
}

.thirtyfive {
  width : calc(105px + (560 - 105) * ((100vw - 300px) / (1600 - 300)));
}

.thirtynine {
  width : calc(117px + (624 - 117) * ((100vw - 300px) / (1600 - 300)));
}

.fortythree {
  width : calc(129px + (688 - 129) * ((100vw - 300px) / (1600 - 300)));
}

.fifty {
  width : calc(150px + (800 - 150) * ((100vw - 300px) / (1600 - 300)));
}

.sixty {
  width : calc(180px + (960 - 180) * ((100vw - 300px) / (1600 - 300)));
}

.seventy {
  width : calc(210px + (1120 - 210) * ((100vw - 300px) / (1600 - 300)));
}

a:link.navigation {
  display : block;
  text-align : center;
  padding : 0.4375rem;
  text-decoration : none;
}

a:link {
  text-decoration : none;
/*  font weight for accessibility  */
  font-weight : bold;
}

a:visited {
  text-decoration : none;
}

a:target {
  padding-top : 5rem;
  margin-top : -5rem;
  background-color : transparent;
}

div.narrow {
  max-width : 1100px;
}

.progress {
  text-align : center;
  font-size : 1.5rem;
  z-index : -1000;
}

div.outline {
  border : solid 5px;
  border-color : rgba(173, 216, 230, 1);
  border-radius : 25px;
  padding : 1.25rem;
  width : calc(270px + (1440 - 270) * ((100vw - 300px) / (1600 - 300)));
}

.columns, .columns3, .columns5 {
  column-gap : 1rem;
  column-rule : rgba(173, 216, 230, 1) 1px outset;
}

.columns {
  columns : 200px 4;
}

.columns3 {
  columns : 200px 3;
}

.columns5 {
  columns : 200px 5;
}

.columns p, .columns3 p, .columns5 p, ul, blockquote, pre {
  margin : 0 0 1rem 0;
  padding-top : 0;
  vertical-align : top;
}

sub, sup.normal {
  font-size : 50%;
}

sup.normal::after {
  content : "";
}

sub {
  vertical-align : 0%;
}

s {
  text-decoration-color : rgba(0, 0, 255, 1);
}

em {
  font-style : italic;
  font-size : 81.25%;
}

em::after {
  content : "]";
}

em::before {
  content : "[";
}

pre, blockquote {
  white-space : pre-wrap;
  max-width : 95.5vw; 
  tab-size : 10;
  font-family : courier, courier, monospace;
  margin-top : 1rem;
}

blockquote {
  padding-left : 6em;
  max-width : calc(96.5vw - 10em);
}

.pre-indent {
  margin : 0 0 0 6em;
  max-width : calc(96.5vw - 17em);
  text-indent : -6em;
}

.fixed {
  position : fixed;
  left : 0;
  bottom : 0;
  width : 100%;
  z-index : 100;
}

.large {
  font-size : 125%;
}

code, kbd {
  font-family : monospace;
  color : rgba(0, 0, 139, 1);
  font-weight : bold;
}

div.mainlogo {
  position : fixed;
  width : 100%;
  z-index : -10;
}

.mainlogo {
  float : right;
  margin-right : 1rem;
  margin-top : 40px;
  opacity: 1.0;
  z-index : -10;
  width : 10%;
  min-width : 4.375rem;
}

.centre {
  display : block;
  margin-left : auto;
  margin-right : auto;
  text-align : center;
}

.inline {
  display : inline;
  vertical-align : middle;
}

img {
  border : 0;
  margin-bottom : -0.25rem;
  margin-top : 0.125rem;
}

img.menuleft, img.menuright {
  vertical-align : text-top;
  height : 28px;
}

img.menuright {
  margin : -2.5px 0 -4px -5px;
}

img.menuleft {
  margin : -2.5px 16px -4px -5px;
}

mark {
  color : red;
  font-weight : bold;
  background : none;
}

figure {
  display : inline-table;
  text-align : left;
  margin : 25px;
}

figcaption {
  display : table-caption;
  caption-side : bottom;
}

figure img {
  vertical-align : top;
  max-width : 40vw;
}

figure figcaption {
  font-style : italic;
  margin-top : 7px;
  margin-bottom : 0;
}

#input, #input2, #input3, #input4 {
  width : 220px;
  padding : 0.3125rem;
  border : rgba(173, 216, 230, 1) solid 5px;
  border-radius : 25px; 
  padding : 0.78125rem;
  margin-bottom : 12px;
  color : black;
}

textarea, input[type="text"] {
  max-width : 95%;
  background-color : rgba(255, 255, 255, 1);
  border : solid 2px;
}

a:focus, summary:focus {
  outline : none;
}

input[type="text"]:focus, input[type="submit"]:focus, input[type="reset"]:focus {
  border : solid 4px rgba(173, 216, 230, 1);
}

input:focus {
  outline : none;
}

.element {
  display : inline-block;
}

#clock {
  display : inline-block;
  box-sizing : content-box;
  background-color : #191919;
  border : #CD362C solid 3.5px;
  color : #F9CC33;
  margin-bottom : -0.125rem;
  padding : 0.125rem 0.125rem 0 0.125rem;
  font-family : 'Segment7Standard';
  font-size : 18px;
  vertical-align : bottom;
  float : right;
}

@font-face {
  font-family : 'segment7standard';
  src : url("/clock/segment7standard.woff2") format('woff2'), url("/clock/segment7standard.woff") format('woff');
  font-weight : normal;
  font-style : normal;
}

#clock b {
  font : 11px courier;
  display : inline-block;
  line-height : 18px;
  vertical-align : top;
}

#clock #secs { 
  color : #D84B2C; 
  font-size : 13px;
}

#time{
  transform : skewX(-5deg);
}

#navright {
  float : right;
  height : 28px;
}

/* scrollbars */

::-webkit-scrollbar {
  width : 1.1rem;
}

::-webkit-scrollbar-track {
  box-shadow : 1px 0 4px rgba(0, 0, 139, 1) inset;
  border-radius : 0;
}

::-webkit-scrollbar-thumb {
  background : rgba(0, 0, 139, 0.5);
  border-radius : 0;
}

::-webkit-scrollbar-thumb:hover {
  background : rgba(0, 0, 139, 1);
}

abbr .help {
  cursor : help;
}

summary::-webkit-details-marker { /* ::marker does not work */
  display : none;
}

details summary {
  margin : -0.13rem 0 -0.13rem 0;
}

details summary::before, details[open] summary::before {
  font-weight: bold;
  font-family : courier, courier, monospace;
  font-size: 115%;
}

details summary::before { 
  content : "+ "; 
}

details[open] summary::before { 
  content : "- ";
}

summary {
  list-style : none;
}

summary::marker {
  display : none;
}


em {
  margin-left : 1rem;
}

em.left {
  margin-left : 0;
}

.tabthin, .tab0p75, .tab1, .tab1p5, .tab2, .tab2p5, .tab3, .tab3p1, .tab5p5, .tab6, .tab7, .tab7p5, .tab8, .tab9, .tab13, .tab14, .tab16, .tab17, .tab17p5, .tab19, .tab19p5, .tab21 {
  display : inline-block;
}

.tabthin {
  width : 2rem;
  vertical-align : middle;
  line-height : 1;
}

.tab0p75 {
  width : 0.75rem;
}

.tab1 {
  width : 1rem;
}

.tab1p5 {
  width : 1.5rem;
}

.tab2 {
  width : 2rem;
}

.tab2p5 {
  width : 2.5rem;
}

.tab3 {
  width : 3rem;
}

.tab3p1 {
  width : 3.1rem;
}

.tab5p5 {
  width : 5.5rem;
}

.tab6 {
  width : 6rem;
}

.tab7 {
  width : 7rem;
}

.tab7p5 {
  width : 7.5rem;
}

.tab8 {
  width : 8rem;
}

.tab9 {
  width : 9rem;
}

.tab13 {
  width : 13rem;
}

.tab14 {
  width : 14rem;
}

.tab16 {
  width : 16rem;
}

.tab17 {
  width : 17rem;
}

.tab17p5 {
  width : 17.5rem;
}

.tab18 {
  width : 18rem;
}

.tab19 {
  width : 19rem;
}

.tab19p5 {
  width : 19.5rem;
}

.tab21 {
  width : 21rem;
}

i {
  padding-left : 0.25rem;
}

i.normal {
  padding-left : 0;
}

i.left {
  padding-right : 0.25rem;
  padding-left : 0;
}

.sticky {
  position : sticky;
  position : -webkit-sticky;
  top : calc(2 * (10px + (15 - 10) * ((100vw - 300px) / (1600 - 300))));
  margin-bottom : -1rem;
  z-index : 3; /* change to 1 if unexpected results */
}

.elrsticky {
  position : sticky;
  position : -webkit-sticky;
  top : calc(2 * (10px + (15 - 10) * ((100vw - 300px) / (1600 - 300))));
  margin-bottom : 0rem;
  margin-top : 1rem;
  z-index : 2;
  background : linear-gradient(rgba(245, 245, 255, 0) 0%, rgba(245, 245, 255, 0.9) 10%, rgba(245, 245, 255, 0.9) 80%, rgba(245, 245, 255, 0) 100%);
  display : table;
}

.elrsticky h3 {
  opacity : 1;
}

/* creates counter  */
body {
  counter-reset : section;
}

#myBtn {
  display : none;
  position : fixed;
  bottom : 4em;
  right : 20px;
  z-index : 99;
  border : none;
  background-color : rgba(173, 216, 230, 0.5);
  cursor : pointer;
  padding : 10px;
  border-radius : 10px;
  font-size : 1rem;
}

/* Popup container - can be anything you want */
.popup {
  position : relative;
  display : inline;
  cursor : pointer;
  -webkit-user-select : none;
  -moz-user-select : none;
  -ms-user-select : none;
  user-select : none;
  width : 100%;
  font-weight : normal;
}

/* The actual popup */
.popuptext, .popuptextr, .popuptextl, .popuptextfr {
  visibility : hidden;
  width : max-content;
  max-width : 30vw;
  min-width : min-content;
  border-width : 5px;
  border-style : solid;
  border-color : rgba(173, 216, 230, 1);
  color: rgba(0, 0, 0, 1);
  font-size : 83%;
  text-align : left;
  border-radius : 10px;
  padding : 8px 8px;
  position : absolute;
  z-index : 5;
  bottom : 125%;
  left : 0;
}

.popuptext /* , .popuptextfr */ {
  transform: translate(-48%, 0);
}

.popuptextr {
  transform: translate(-96%, 0);
}

.popuptextl {
  transform: translate(0%, 0);
}

/*	Max width before this PARTICULAR table gets nasty. This query will take effect for any screen smaller than 760px and also iPads specifically.
	*/
@media
  only screen 
  and (max-width : 760px), (min-width : 768px) 
  and (max-width : 1024px)

{
  .popuptextr, .popuptextl {
    transform: translate(-48%, 0);
  }

  .popuptextfr {
    transform: translate(-96%, 0);
  }

  em {
    font-weight : normal;
  }
}

/* Toggle this class - hide and show the popup */
.popup .show {
  visibility : visible;
}

.popup::before {
  counter-increment: section;
  content: "[" counter(section) "]";
  font-size : 67%;
  vertical-align : super;
}

.close {
  float : right;
  margin-left : 1em;
  margin-top : -0.4em;
  margin-right : -0.4em;
  padding : 0.4em;
  border-radius : 0.4em;
}

.r {
  float : right;
  font-size : 100%;
  text-align : right;
  padding : 0 0 0 0.25rem;
}

.solved {
  position : absolute;
  top : 50%;
  left : 50%;
  transform : rotate(-20deg) translate(-50%, -100%);
  color : #00008b;
  font-size : 5vw;
  background-color : rgba(245, 245, 255, 0.4);
  font-weight : bold;
  border-radius : 1vw;
}

strong {
  font-weight : bold;
  color : rgba(0, 0, 139, 1);
}

.links span {
  display : inline-block;
  white-space : normal;
  margin-left : 0.8em;
}

.links span::after {
  content : "|";
  margin : 0.1em 0.3em 0.1em 1.2em;
}

.links span:last-child::after {
  content : none;
}

#croppic {
  width: 10%;
  height: 20%;
}

img.croppic {
  width: 26.8rem;
  height: 20.0rem;
  object-fit: cover;
  object-position: 25% 100%;
}