* {
  cursor: default;
  box-sizing:border-box;
}
html,body {
  min-height:100vh;
}
sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.3em;
  line-height: 0;
}
sub { 
  top: 0.3em; 
}

a, a * {
  cursor: pointer;
 }

div.clearfix {
  margin-top:5px;
  overflow: visible;
  position: relative;
}
.clearfix::after {
  content:"";
  display:table;
  clear:both;
}
span.vcenter {
  display:inline-block;
  vertical-align:middle;
  height:100%
}

dl::before {
  content:"";
  display:table;
  clear:both;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  color: #333;
  font-size: 12pt;
  margin: 0;
  border: 0;
  padding: 8px;
  width: 100%;
  background: #fff;
  box-sizing: border-box;
  position:relative;
}

#masthead {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  background: transparent;
}

#masthead-image  {
  padding: 0;
  margin: 0;
  border-width: 0;
  display:block;
  font-size:0;
  width:100%;
  text-align:center;
  background-color:black;
}
#masthead-image::after {
  content:"";
  display:table;
  clear:both;
}
#masthead-image a {
  vertical-align: top;
  padding: 0;
  margin: 0;
  border: none;
  display:inline-block;
}
#masthead-image a img {
  margin:0;
  max-height:88pt;
  max-width:100%;
  width:auto;
  position: relative;
  left:0;
  top:0;
}

#content {
  padding: 20px calc(4% - 20px);
  width: calc(100% - 40px);
  max-width: 900px;
  margin: 0 auto;
  overflow: visible;
  position: relative;
  z-index: 0;
}

#content * {
  box-sizing: border-box;
}

.filmstrip {
  padding: 0;
  margin: 0;
  border: 0 solid white;
  overflow: hidden;
  box-sizing: border-box;
  text-align:center;
  position: relative;
}

.filmstrip img {
  padding: 0;
  margin: 0;
  border: 1px solid white;
  display: none;
  box-sizing: content-box;
  cursor: zoom-in;
}

.filmstrip p {
  display: block;
  max-width: 100%;
  text-align: center;
  padding: 0;
  margin: 0;
  border: 1px solid white;
  color:  #00aeef;
}

.filmstrip p.enlarge-hint {
  text-align: center;
  font-size: 80%;
  font-weight: bold;
  color: rgb(2,103,142);
  position: absolute;
  left: 50%; /* only approximate - will be overridden */
  padding: 0.1em;
  top: 1px; /*inside parent's 1px border*/
  background-color:rgba(255,255,255,0.8);
  background-clip: padding-box;
  border-color: rgba(255,255,255,0.7);
  border-width: 0 4px 4px 4px;
  border-radius: 0 0 6px 6px;
  border-style: outset;
  pointer-events: none;
}
/* Specializations for two different messages */
.filmstrip p.enlarge-hint.multiple {
  width: 17em;
  left: calc(50% - 8.5em);
}
.filmstrip p.enlarge-hint.multiple::after {
  content: "Click any image to enlarge it";
}
.filmstrip p.enlarge-hint.single {
  width: 10em;
  left: calc(50% - 5em);
}
.filmstrip p.enlarge-hint.single::after {
  content: "Click to enlarge";
}

body .magnified {
  display: none;
  margin: 0;
  border: 4px outset rgba(192,192,192,0.7);
  border-radius: 12px;
  position: fixed;
  box-sizing: border-box;
  cursor: zoom-out;
  z-index: 15; /* on top of menus and go-to-top, but below submenus and hover menus */
}
body img.magnified {
}
body div.magnified {
  background-color: rgba(2, 103, 142, 0.7);
  border-width:0;
  border-radius: 8px 8px 0 0;
  color: white;
  padding:6px;
}
body div.magnified span.caption {
  font-weight: bold;
  float: left;
}
body div.magnified span.close-hint {
  font-size: 80%;
  font-style: italic;
  float: right;
}
body div.magnified-button-right, .filmstrip div.magnified-button-left {
  display: none;
  font-size:200%;
  height: 1em;
  width:  1em;
  background-color:  rgba(2,103,142,0.7);
  border-radius: 0;
  position: relative;
  top: 50%;
}
body div.magnified-button-right {
  border-top-left-radius: 0.5em;
  border-bottom-left-radius: 0.5em;
  right: 0;
}
body div.magnified-button-right::after {
  content: ">";
}
body div.magnified-button-left {
  border-top-right-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  left: 0;
}
body div.magnified-button-left::after {
  content: "<";
}

.imagestrip-container {
  width:100%;
  padding: 0 5px 6px 0;
  border:none;
  margin:10px auto;
  position:relative;
  font-size:14pt;
}
.imagestrip-container.single {
  width:360px;
  max-width:100%;
}
.imagestrip-container.has-caption {
  border:1px solid black;
  margin-top:calc(10px + 0.7em);
}
p.imagestrip-container-legend {
  border:none;
  padding: 0 4px;
  margin: 0 0 -0.6em 6px;
  position: relative;
  top: -0.7em;
  left: 0;
  color: #333;
  background-color:#D0E8F0;
  font-size: inherit;
  z-index:5;
  width:fit-content;
}
.imagestrip-row {
  text-align:center;
  margin: 0;
  padding:0;
  line-height:0;
}
.imagestrip-thumb {
  margin: 0 -5px -5px 0;
  padding: 0;
  border: 5px solid white;
  border-radius: 12px;
  box-sizing: content-box;
  position:relative;
  z-index:0;
}
.imagestrip-thumb.selected {
  border-color:white;
  z-index:5;
}
.imagestrip-thumb:hover {
  border-color:yellow;
  z-index:10;
}

#lightbox {
  display:flex;
  flex-direction:column;
  border:none;
  border-radius:15px;
  overflow:hidden;
  position:fixed;
  width:calc(100% - 10px);
  height:calc(100% - 10px);
  left:5px;
  top:5px;
  z-index:1000;
  background-color: rgba(40,40,40,0.92);
  box-shadow: 3px 3px 6px 4px #808080;
}
#lightbox-galleryname-container {
  position:relative;
  flex-grow:0;
  flex-shrink:0;
  width:100%;
  background-color: rgba(2, 103, 142,0.8);
  left:0;
  color:white;
  font-size:20px;
  text-align:center;
  padding:0;
  margin:0;
  border:none;
  border-radius:15px;
}
#lightbox-galleryname {
  display: inline-block;
  padding: 2px 5px;
  width:calc(100% - 164px);
}
#lightbox-caption-container {
  position:relative;
  flex-grow:0;
  flex-shrink:0;
  width:100%;
  background-color: transparent;
  left:0;
  padding:0;
  margin:0;
  border:none;
}
#lightbox-caption {
  display:inline-block;
  vertical-align:middle;
  height: auto;
  width:100%;
  background-color: transparent;
  color:white;
  font-size:16px;
  text-align:center;
  padding:3px;
  margin:0;
  border:none;
}
#lightbox-close, #lightbox-download {
  font-family:inherit;
  background-color:#e0e0e0;
  border:3px outset #ffffff;
  border-radius:12px;
  color:black;
  font-size:16px;
  height:26px;
  padding:0;
  width:80px;
  position:absolute;
  text-align:center;
  top:2px;
}
#lightbox-close {
  right:2px;
}
#lightbox-download {
  display:none;
  left:2px;
}
#lightbox-download:hover {
  text-decoration:none;
}
button.lightbox-skip {
  position:absolute;
  height:100%;
  width:30px;
  padding:0;
  font-size:20px;
  background-color:#e0e0e0;
  border:3px outset #ffffff;
  color: black;
}
button.lightbox-skip:focus {
  outline:none;
}
button#lightbox-goLeft {
  bottom:0;
  left:0;
  border-radius:12px 0 0 12px;
}
button#lightbox-goRight {
  bottom:0;
  right:0;
  border-radius:0 12px 12px 0;
}
#lightbox-contactStrip {
  position:relative;
  overflow:hidden;
  width:100%;
  left:0;
  border:0px solid #e0e0e0;
  background-color:rgba(0,0,0,0.4);
  height:15%;
  max-height:100px;
  flex-grow:0;
  flex-shrink:0;
}
#lightbox-contactImageArea{
  left:30px;
  width:calc(100% - 60px);
  height:100%;
  overflow:hidden;
  position:absolute;
  padding:0;
  margin:0;
}
#lightbox-contactRoll{
  position:absolute;
  overflow:visible;
  white-space:nowrap;
  height:100%;
  top:0;
  left:0;
  border:none;
  background-color:transparent;
  transition: left 1s;
  -webkit-transition: left 1s;
}
#lightbox-contactStrip .imagestrip-thumb {
  box-sizing:border-box;
  height:100%;
  border-color:#a0a0a0;
  border-width:3px;
  margin: 0 -3px 0 0;
  border-radius:0;
  opacity:0.6;
}
#lightbox-contactStrip .imagestrip-thumb.selected {
  border-color:white;
  z-index:5;
  opacity:1;
}
#lightbox-contactStrip .imagestrip-thumb:hover {
  border-color:yellow;
  opacity:0.9;
  z-index:10;
}
#lightbox-image-area {
  position:relative;
  flex-grow:1;
  width:100%;
  left:0;
  background-color: transparent;
  text-align:center;
  margin: 0; padding: 0;
  white-space: nowrap;
  overflow:auto;
}
#lightbox-image, #lightbox-image-placeholder {
  position:relative;
  vertical-align:middle;
  font-size:150%;
  color:white;
}
#lightbox-image {
  border:4px solid white;
}
#lightbox-image-placeholder {
  border:none;
}

#footer {
  background-color: #303030;
  clear: both;
  text-align: center;
  padding: 5px;
  width:100%;
  margin:0;
}
#footer p {
  color: #fff;
  font-weight: bold;
  font-size: 0.8em;
  margin: 0;
  padding: 0;

}

aside {
  width: 250px;
  max-width: 50%;
  min-width: 30%;
  float: right;
  padding: 5px;
  margin-right: 0;
  margin-left: calc(5% - 10px);
  margin-bottom: 10px;
  margin-top: 10px;
  background-color: #fff;
  border: 1px #303030 solid;
  -moz-border-radius: 15px;
  border-radius: 15px;
  overflow:visible;
  position:relative;
  right:-20px;
  z-index: 3;
}
aside.inline {
  width:800px;
  max-width:90%;
  float:none;
  position:initial;
  margin:10px auto;
  padding:10px;
}
/*whoa, fieldsets are freaky*/
fieldset aside.inline {
  width:unset;
}
aside h5 {
  margin: 0;
  padding: 0px 10px;
  font-size: 12pt;
  text-align: center;
  color: #303030;
}
/* Avoid need for enclosing <p> around standalone link */
aside > a {
  display: block;
}
aside p, aside > a {
  margin: 0;
  padding: 5px 10px;
  font-size: 12pt;
  text-align: center;
}
aside p {  
  color: #333;
}

.map {
  width: calc(50% - 15px);
  height: 40vw;
  float: right;
  margin-top: 0;
  margin-right: 0;
  margin-left: 15px;
  margin-bottom: 10px;
  overflow:auto;
  position: relative; /* just for z-index */
  z-index: 1;
}

.offset {
  margin-left: 120px;
}

.contactform {
  background-color: #fff;
  display:table;
  margin: 10px;
  padding: 20px;
  color: #333;
  border: 1px #333 solid;
  -moz-border-radius: 15px;
  border-radius: 15px;
}
.contactform div:nth-of-type(even)  {
    background-color: #dddddd;
}
.contactform div:nth-of-type(odd) {
    background-color: #f0f0f0;
}
.contactform div {
  display: table-row;
  box-sizing: border-box;
}
.contactform div * {
  display: table-cell;
  margin-top: 5px;
  margin-bottom: 5px;
  vertical-align: top;
}
.contactform div input {
  width: 100%;
}
.contactform div textarea {
  width: 100%;
}
.contactform div p.field-name {
  padding: 5px;
  width: 20%;
  font-weight: bold;
}
.contactform div p.annotation {
  width: 20%;
  padding: 5px;
  font-style: italic;
  font-size: 90%;
}
.contactform > form > input {
  margin: 5px 30%;
  width: 40%;
}
.photoright {
  max-width:50%;
  min-width:25%;
  width:300px;
  margin: 5px;
  padding: 5px;
  border: 1px #ccc solid;
  float:right;
  text-align: center;
  position:relative;
  z-index:1;
}
.cameo {
  width:150px;
  max-width:50%;
  border-radius:50%;
  border:none;
  margin:0;
}

a:link
{
  color: #00f;text-decoration:none  
}
a:visited
{
  color: #00f;text-decoration:none 
} 
a:active 
{
  color: #00f;text-decoration:none
}
a:hover      
{ 
  color: #00f;text-decoration:underline
}


h1 
{
  width: 100%;
  font-family: Bahnschrift,Arial,Helvetica,sans-serif;
  text-align:center;
  margin: 0;
  margin-bottom: 6pt;
  padding: 20pt 20px;
  background-image: linear-gradient(180deg,rgba(0,0,70,0),rgba(0,0,70,1) 10px,rgba(0,0,70,1) calc(100% - 10px),rgba(0,0,70,0));
  color: white;
  font-size: 36pt;
}

#content>h1, #content>div.clearfix>h1 {
  /* bleed over 20px L/R margins of #content */
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
  overflow: visible;
}

h2 {
  margin-top: 24pt;
  margin-bottom: 4pt;
  padding: 2px 10px;
  max-width: calc(100% + 20px);
  min-width: calc(50% + 10px);
  width: 400px;
  position: relative;
  left: -10px;
  overflow: visible;
  color: #303030;
  background-color: #b0b0b0;
  font-size: 18pt;
}
h2 .hot {
  top: -2px;
  right: -10px;
  border-radius: 0 0 0 0.3em;
}
.foldable>h2:first-of-type {
  margin-top:6pt;
}

h3 
{
  font-family: Arial, Helvetica, sans-serif;
  margin-top: 12pt;
  margin-bottom: 2pt;
  color: #303030;
  font-size: 16pt;
  background-color: inherit;
}
h3 .hot {
  display: inline;
  float:none;
  margin: 0;
}

h4
{
  margin-top: 0;
  margin-bottom: 0;
  color: #404040;
  font-size: 13pt;
  background-color: inherit;
}

h5
{
  margin-top: 0;
  margin-bottom: 0;
  color: #00aeef;
  font-size: 12pt;
  background-color: inherit;
}

h6
{
  margin-top: 0;
  margin-bottom: 0;
  color: #00aeef;
  font-size: 10pt;
  background-color: inherit;
}



p {
  font-size: 12pt;
  font-weight: normal;
  font-style: normal;
  color: #333;
  line-height: 130%;
  margin-bottom: 5px;
  margin-top: 0px;
  padding: 3px 5px 3px 0;
  /*width: 100%; max-width: 36em;*/
}
p.label {
  background-color:#e0e0e0;
  padding:0.2em 1em;
}

dl {
  width: auto;
  overflow:hidden;
  text-align: left;
  margin:0.75em 0;
}
.headlines-container dl {
  width: 90%;
  margin-left: 5%;
}
dt .hot {
  padding-bottom: 0.2em;
  padding-left: 0.4em;
  border-radius: 0 0 0 0.6em;
}
dt {
  border: 0;
  color: white;
  background-color: #02678e;
  font-size: 110%;
  font-weight: bold;
  overflow: hidden;
  padding: 0;
  width:100%;
  position:relative;
  left:0;
}
dt a, dt a:link, dt a:visited, dt p {
  color: white;
  text-decoration: none;
  width: 100%;
  font-size: 110%;
  font-weight: bold;
  display: block;
  padding: 0.2em 0.5em;
}
dt a:hover {
  background-color: #ebebeb;
  text-decoration: none;
}
dt a>span.hot {
  top: -0.2em;
  right: -0.5em;
}
dd {
  border: 2px solid #02678e;
  background-color: white;
  border-top-width: 0;
  margin: 0 0 0.5em 0;
  padding: 0.4em 0.5em;
  width:100%;
  position: relative;
  left:0;
}
dt:hover + dd {
  border-color: #ebebeb;
}
dd:last-of-type {
  margin-bottom: 0;
}

dl.flow>dt {
  font-weight:normal;
  font-size:120%;
  text-align:center;
  float:left;
  margin:0.5em 0 0 0;
  padding:0.2em 0.5em 0.4em 0.5em;
  border-radius:10px;
  width:40%;
  z-index:1;
}
dl.flow>dd {
  overflow:visible;
  border:2px solid #02678e;
  width:80%;
  padding-left:calc(20% + 1em);
  margin-left:20%;
}
dl.flow>dd::after {
  content:"";
  display:table;
  clear:both;
}
dl.flow>dt:hover + dd {
}

.hot {
  float: right;
  padding: 0 0.3em;
  color: white;
  background-color: red;
  border-radius: 0.3em;
  position: relative;
  overflow: visible;
  top: 0;
  right: 0;
  margin-left:0.4em;
}

li {
  margin-top: 0.2em;
}
li .hot {
  float:none;
  display:inline-block;
  margin-right:1em;
  margin-left: 0;
}

ul {
  margin:0 0 0.5em 0;
  box-sizing: border-box;
}
ul ul {
  margin:0;
}
ul li
{
  color: #333;
  margin-top:0.1em;
  margin-bottom:0.1em;
  padding-top: 0;
  padding-bottom: 2px;
}
ul ul li {
  padding-bottom:0;
  margin-bottom:0;
}
.justify {
  text-align: justify;
}

.centertext {
  text-align:center;
}
.line {
  color: #00aeef;
  width: 875px;
  height: 1px;
}

tr {
  border-collapse: separate;
}
td {
  padding: 3px 6px;
  border: 2px solid white;
}
th {
  padding: 3px 6px;
  background-color: #707070;
  color: white;
  border: 1px solid white;
}
th.sorttable_sorted::after {
  content:"\00A0\0025BE";
  display:inline;
}
th.sorttable_sorted_reverse::after {
  content:"\00A0\0025B4";
  display:inline;
}
tr:nth-of-type(odd) td:nth-of-type(even) {
  background-color: #e0e0e0;
}
tr:nth-of-type(odd) td:nth-of-type(odd) {
  background-color: #e8e8e8;
}
tr:nth-of-type(even) td:nth-of-type(even) {
  background-color: #f0f0f0;
}
tr:nth-of-type(even) td:nth-of-type(odd) {
  background-color: #f8f8f8;
}
tbody+tbody>tr:first-of-type>td, tbody+tbody>tr:first-of-type>th {
  border-top-width: 4px;
  border-top-style: solid;
  border-top-color: white;
}
table {
  margin: 10px 20px 10px 20px;
  border-collapse: collapse;
  border: 3px solid #c0c0c0;
}
@media screen and (max-width: 600.5px) {
  table {
    margin: 6px 0 10px 0;
  }
}

.TOC ol {
  list-style-type: none;
  padding-left: 10px;
  margin-bottom:5px;
}
.TOC ol>li>a {
  padding-left:0.5em;
  padding-right:0.5em;
  display:inline-block;
}
.TOC>ol {
  margin-bottom:15px;
}
.TOC>ol>li>a {
  font-size: 120%;
  background-image: linear-gradient(180deg, #ffffff, #ffffff30);
  border-radius:10px;
}

.TOC>ol>li li {
  font-size: initial;
}

/* Navigation Start */
/* Main menu settings */
.centeredmenu {
   margin: 8px 0;
   padding:3px 0 2px 0;
   background-color: white;
   border-top:1px solid #02678e; /* line above menu */
   border-bottom:1px solid #02678e; /* line below menu */
   width:100%;
   font-size:90%; /* Menu text size */
   position: relative;
   z-index:10;
}
.centeredmenu.empty {
  padding:0;
}
.centeredmenu:hover { z-index: 20;}

#sitespecific-sticky-menu.centeredmenu {
  position: fixed;
  display: none;
}
#go-to-top {
  position: fixed;
  right: 5px;
  display: block;
  margin: 0;
  border: 0.2em solid white;
  border-top-width: 0;
  border-radius: 0 0 0.7em 0.7em;
  padding: 0.4em;
  background-color: rgba(2, 103, 142, 0.7);
  color: white;
  font-weight: bold;
  font-size: 90%;
  width: auto;
  height: auto;
  z-index:5; /* under the menus */
  opacity: 0;
}

.centeredmenu::after {
  content:"";
  display:table;
  clear:both;
}
/* Top menu items */
.centeredmenu ul {
   margin:0;
   padding:0;
   list-style:none;
   float:right;
   position:relative;
   right:50%;
}
.centeredmenu ul li {
   min-width:8em;
   margin:0 0 0 4px;
   padding:0;
   float:left;
   position:relative;
   left:50%;
   top:0px;
}
.centeredmenu ul li a {
   display:block;
   margin:0;
   padding:.6em .5em .4em;
   font-size:1em;
   line-height:1em;
   background:#02678e;
   text-decoration:none;
   color:#fff;
   font-weight:bold;
   border-bottom:1px solid white;
}

.centeredmenu ul li a:hover,
.centeredmenu ul li a:active,
.centeredmenu ul li:hover a,
.centeredmenu ul li:active a {
   background:#014c69; /* Top menu items background colour */
   color:#fff;
   border-bottom:1px solid white;
   z-index: 20; /* lift above page content */
}

/* Submenu items */
.centeredmenu ul ul {
   display:none; /* Sub menus are hidden by default */
   position:absolute;
   top:2em;
   left:0;
   right:auto; /*resets the right:50% on the parent ul */
   width:12.5em; /* width of the drop-down menus */
   max-width:100%;
   z-index:20; /* This makes the dropdown menus appear above the page content below */
   border-width: 1px 2px 1px 2px;
   border-color: white;
   border-style: solid;
}
.centeredmenu ul ul li {
   left:auto;  /*resets the left:50% on the parent li */
   margin:0;
   clear:left;
   width:100%;
}
.centeredmenu ul ul li a,
.centeredmenu ul li.active li a,
.centeredmenu ul li:hover ul li a,
.centeredmenu ul li:active ul li a {
   font-size:1em;
   font-weight:bold; /* resets the bold set for the top level menu items */
   background: rgba(2, 103, 142, 0.9); /*#02678e;*/
   color:#fff;
   line-height:1.4em; /* overwrite line-height value from top menu */
   border-bottom:1px solid rgba(255,255,255,0.9);
}
.centeredmenu ul ul li a:hover,
.centeredmenu ul ul li a:active,
.centeredmenu ul li:hover ul li a:hover,
.centeredmenu ul li:active ul li a:active {
   background:#014c69; /* Sub menu items background colour */
   color:#fff;
}

/* Flip the last submenu so it stays within the page */
.centeredmenu ul ul.last {
   left:auto; /* reset left:0; value */
   right:0; /* Set right value instead */
}

/* Make the sub menus appear on hover */
.centeredmenu ul li:hover ul,
.centeredmenu ul li:active ul {
   display:block; /* Show the sub menus */
}

/* Special appearance for private area links */
.centeredmenu ul li.private a {
  background-color: rgb(229,247,253);
  color: #02678e;
  font-weight: normal;
}

/* Divider for use between things that have no margin */
div.divider {
  position: relative;
  left: -20px;
  margin: 4px 0;
  padding: 12px;
  background-image: linear-gradient(180deg,rgba(0,0,70,0),rgba(0,0,70,1) 10px,rgba(0,0,70,1) calc(100% - 10px),rgba(0,0,70,0));
}
div.bled {
  width: calc(100% + 40px);
}
a.headline-tile {
  display: inline-block;
  background-color:#ebebeb;
  background-blend-mode:multiply;
  width:380px;
  min-height:380px;
  max-width:100%;
  margin:0;
  padding:0 0 6px 0;
  border:6px solid white;
  border-radius:16px;
  cursor:pointer;
  background-position:center;
  background-size:cover;
  text-align:center;
  vertical-align:top;
}
a.headline-tile:hover {
  border-color:#02678e;
  text-decoration:none;
}
a.headline-tile>header {
  color:white;
  text-shadow:0 0 4px black;
  font-size:24pt;
  font-weight:bold;
  margin:0;
  padding:3px 10px;
  border-radius:10px 10px 0 0;
  background-color:#00adf0;
}
a.headline-tile>p {
  font-size:14pt;
  font-weight:bold;
  color:#000046;
  padding:4px 10px;
  margin:0;
  line-height:1.1;
  text-shadow:none;
}
a.headline-tile>img {
  display:block;
  width:100%;
  margin:0 0 6px 0;
  padding:0;
}
div.headline-tile-container {
  text-align:center;
  font-size:0;
}

/* Headline with thumbnail */
.headline {
  font-size: 110%;
  background-color: rgb(229,247,253);
  display: inline-block;
  width: 18em;
  height: 3.3em;
  border:0.2em solid rgb(229,247,253);
  position: relative;
  margin: 0.1em;
  padding: 0;
}
.headline:hover, a.headline:active {
  border:0.2em solid #02678e;
}
.headline > img {
  position: absolute;
  left:0; top:0;
  max-height: 100%;
  max-width: 3.0em;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
}
.headline > p {
  font-size: inherit;
  text-align: left;
  vertical-align: middle;
  background-color: transparent;
  font-weight: bold;
  color: #202020;
  padding: 0.1em;
  border:0;
  margin:0;
  position: absolute;
  top:0; left:3.3em; right: 0; bottom: 0;
  display: block;
}
.headline .hot {
  top: -0.1em;
  right: -0.1em;
  padding: 0em 0.2em 0em 0.2em;
  border-radius: 0;
  font-size: 90%;
  margin-bottom: 0;
}
.headlines-container {
  width: calc(100% + 40px);
  position: relative;
  left: -20px;
  border: 2px solid #02678e;
  padding: 4px;
  text-align: center;
}
.headlines-container h1 {
  text-align: center;
  background-color: #02678e;
  border: 0;
  width: calc(100% + 8px);
  padding-top: 3px;
  padding-bottom: 3px;
  padding-left: 8px;
  padding-right: 8px;
  margin: -4px;
  margin-bottom: 4px;
}

.headlines-container .gsearch {
  width: calc(100% - 40px);
}
.headlines-container .gsearch .gsc-control-cse {
  border-width: 0;
  padding: 0 1em;
}


/* Containers for calendar events */
div.post-it {
  min-width: calc(50%  - 15px);
  max-width: calc(100% - 15px);
  width: 30em;
  min-height: 8em;
  padding: 0.5em 1em;
  margin: 0.5em 10px 1em 5px;
  background: -moz-linear-gradient(-45deg, #ffffb0 calc(100% - 70px), #ffffe0 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, right bottom, color-stop(calc(100% - 70px),#ffffb0), color-stop(100%,#ffffe0)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(-45deg, #ffffb0 calc(100% - 70px),#ffffe0 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(-45deg, #ffffb0 calc(100% - 70px),#ffffe0 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(-45deg, #ffffb0 calc(100% - 70px),#ffffe0 100%); /* IE10+ */
  background: linear-gradient(135deg, #ffffb0 calc(100% - 70px),#ffffe0 100%); /* W3C */
  border: 0px solid #f3f390;
  border-bottom-right-radius: 80px 18px;
  position: relative;
  z-index: auto;
}
div.post-it:after {
  content: "";
  position:absolute;
  top:20px;
  left:20px;
  width: calc(100% - 40px);
  height: calc(100% - 40px);
  box-shadow: 1px 2px 10px 18px #909090;
  z-index:-1;
}
div.post-it.agenda {
  min-height: 12em;
}
div.post-it>h3:first-of-type {
  margin-top:0.3em;
}
div.agenda > .event-timings {
}
div.agenda > .event-summary-location {
}
div.agenda  .event-summary {
  font-weight: bold;
  color: #00aeef;
}
div.agenda > .event-location {
}
div.agenda > .event-description {
}
div.post-it.meetings {
}
div.meetings > .event-timings {
}
div.meetings > .event-summary-location {
  display: none;
}
div.meetings > .event-summary {
  font-weight: bold;
  color: #00aeef;
}
div.meetings > .event-location {
}
div.meetings > .event-description {
}

/*---------------- Folding text stuff --------------*/
.foldable {
  border: none;
  position:relative;
}
.foldable .fold-button {
  display: block;
  float:right;
  background-color: #303030;
  color:white;
  padding:1pt;
  padding-left:3pt;
  margin:0;
  margin-top:0.2em;
  margin-left: 1em;
  font-weight: bold;
  font-family: inherit;
  font-size: 90%;
  border:none;
  line-height:1.1em;
  position:relative;
  z-index:2;
  overflow:hidden;
  top:-3px;
  right: 0;
}
.foldable .fold-button:hover {
  cursor:pointer;
}
.foldable.fold-state-open .fold-button::after {
 content: "hide \0025B2";
}
.foldable.fold-state-closed .fold-button::after {
 content: "read more \0025BC";
}

.foldable.fold-state-closed {
  height:40pt;
  overflow-y:hidden;
  overflow-x:visible;
}
.foldable.fold-state-open {
  border-radius: 0;
  border-right: 1px solid #303030;
  border-bottom: 1px solid #303030;
  border-bottom-right-radius: 8px;
}
.foldable > .fold-shade {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background-image:linear-gradient(to bottom, transparent, rgba(255,255,255,0.6) 80%,white);
}
.foldable.fold-state-open > .fold-shade {
  display:none;
}
.foldable.fold-state-closed .fold-button {
  display: block;
}

/* ------------- Quote boxes -------------- */
blockquote {
  margin:1vw 0;
  padding:0.8em 1em;
  background-color: rgb(229,247,253);
  border-radius: 12px;
  border: 2px solid #02678e;
  background-image:    url("/images/lquo.jpg"), url("/images/rquo.jpg");
  background-position: left top, right bottom;
  background-size:   1.5em;
  background-repeat: no-repeat;
}
blockquote h2 {
  background-color: white;
}
blockquote aside {
  width: 30%;
  margin-right: 1em;
  margin-left: 1em;
}
blockquote > p:nth-of-type(1) {
  text-indent: 1em;
}
blockquote.foldable .fold-button {
  right: 1em;
}
blockquote > table {
  margin: 10px 0;
}
blockquote::after {
  content:"";
  display:table;
  clear:both;
}
blockquote.no-clear::after {
  display:none;
}

h1 > form {
  height: 1.2em;
  display: block;
  float: right;
}
h1 > form > input {
  height: 100%;
  font-size: 70%;
  
}
/* Content gallery */
.item-set-container {
  position:relative;
  text-align:center;
  background-color:rgb(0,174,239);
  margin-top:20px;
  margin-bottom:40px;
  box-shadow:0 0 10px 10px rgb(0,174,239);
  border-radius:10px;
  display:flex;
  flex-flow:wrap row;
}
.item-set-container-banner {
  border-radius:10px;
}
.item-set-caption {
  margin:0;
  width:80%;
  position:absolute;
  top:10px;
  left:10%;
  font-weight:bold;
  font-size:1.5em;
  color:white;
  text-align:center;
  background-color:rgba(0,0,70,0.8);
  border:2px solid transparent;
  border-radius:10px;
  opacity:1;
  display:block;
  z-index:1000;
  transition: left 0.5s, top 0.5s, opacity 1s;
}
svg.item-set-svg {
  position:absolute;
  top:0;
  left:0;
  pointer-events:none;
  width:100%;
  height:100%;
  z-index:200;
}
.item-set-connector-line {
  stroke:transparent;
  stroke-width:4;
  stroke-linecap:round;
  vector-effect=non-scaling-stroke;
  transition:stroke 2s;
}
.item-thumb-wrapper {
  flex:0 0 0; /*will be overridden*/
  position:relative;
  margin:3px;
}
.item-caption-wrapper {
  flex:1 0 0;
  position:relative;
  margin:3px;
  text-align:right;
}
.item-caption-wrapper .hot {
  float:left;
  margin-left:0;
  margin-right:0.5em;
}
.item-thumb-image {
  border-radius:8px;
  border:3px solid transparent;
  transition:border-color 1s;
  width:100%;
  height:auto;
  margin:auto 0;
  display:inline-block;
  vertical-align:middle;
}
.item-element {
  flex:1 0 230px;
  position:relative;
  background-color:#ebebeb;
  box-shadow:0 0 3px 3px #ebebeb;
  border-radius:10px;
  margin:6px;
  display:flex;
  cursor:pointer;
}
.item-element-placeholder {
  flex:1 0 230px;
  margin:0 6px;
}
.item-element * {
  cursor:pointer;
}
.item-caption {
  display:inline-block;
  vertical-align:middle;
  text-align:right;
  padding-right:0.5em;
}
.item-set-content-container {
  display:flex;
  flex-flow:column;
  border-radius:8px 8px 0 0;
  box-shadow:0 0 20px 20px rgba(100,100,100,0.95);
  position:fixed;
  left:5vmin;
  top:5vmin;
  width:calc(100vw - 10vmin);
  height:calc(100vh - 10vmin);
  display:none;
  z-index:10000;
  background-color:rgba(100,100,100,0.95);
}
.item-set-content-caption:hover {
  cursor:pointer;
}
.item-set-content-caption {
  border:3px solid rgb(0,0,70);
  border-radius:8px 8px 0 0;
  margin:0;
  width:100%;
  background-color:rgb(229, 247, 253);
}
.item-set-content-caption p {
  width: fit-content;
  display:inline-block;
  color:rgb(0,0,70);
  margin:0;
  text-align:left;
  font-weight:bold;
  padding:3px 0.5em 3px 0.5em;
}
.item-set-content-frame {
  flex:1 1 auto;
  width:100%;
  border:none
}
.item-set-content-controls {
  float:right;
  top:0;
  display:block;
  margin-left:1em;
}
.item-set-content-controls button {
  margin: 3px;
  border-radius: 8em;
  border: 0px solid transparent;
  padding: 0.2em 0.5em;
  background-color:rgb(0,174,239);
  font-family: inherit;
  font-weight:bold;
  font-size:90%;
}
.item-set-content-controls button.close {
  background-color:red;
  color:white;
}

/* Poetry */
div.poem {
  font-family: georgia, charter, serif;
  -webkit-column-width: 25em;
  -moz-column-width: 25em;
  column-width: 25em;
  -webkit-column-gap: 2;
  -moz-column-gap: 0;
  column-gap: 0;
  -webkit-column-rule: 1px solid #ddd;
  -moz-column-rule: 1px solid #ddd;
  column-rule: 1px solid #ddd;
  border-width: 3px 0;
  border-style: solid;
  border-color: #ddd;
  background-color:#f0ffff;
}
div.poem > div.stanza {
  font-family: inherit;
  max-width: 25.5em; /* mysteriously needs to be 0.5em bigger than column width */
  width: 100%;
  padding: 1em;
  display: inline-block;
}
div.poem p {
  font-family: inherit;
  padding: 0.5em;
}
div.poem > div.stanza > p {
  padding: 0 2em 0 2.5em;
  text-indent: -2em;
}
div.poem > div.stanza > p > span.keyletter {
  font-weight: bold;
  background-color: yellow;
}

.video-container {
  margin-bottom:2em;
  width:100%;
  max-width:800px;
}
.video-container video {
  max-width:100%;
  max-height:600px;
  display:block;
  margin:auto;
}

.video-wrapper {
  position: relative;
  padding: 0;
  height: 0;
  margin-bottom: 1em;
}
.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (max-width: 600.5px) {
  .not-for-small-screen { display: none; }
  .video-wrapper {
    width: 100%;
    padding-bottom: 75%; /* default 4:3 */
  }
  .video-wrapper.h16v9 {
    padding-bottom: 56.25%;
  }
}
@media screen and (min-width: 600.5px) {
  .not-for-large-screen { display: none; }
  .video-wrapper {
    width: 528px;
    padding-bottom: 396px; /* default 4:3 */
  }
  .video-wrapper.h16v9 {
    padding-bottom: 297px;
  }
}
/*forms*/
label {
  display:flex;
  flex-flow:wrap row;
  background-color:#ebebeb;
  padding:4px;
  margin:4px 0;
  text-align:left;
}
label * {
  flex:1 0 0;
  margin:0 0.5em;
}
label input[type="radio"] {
  flex:unset;
}
label.fullwidth {
  display:block;
  padding:6px;
}
label.fullwidth * {
  width:100%;
  margin:6px 0 0 0;
  display:block;
}
fieldset {
  margin: 1em 0;
}
fieldset>legend {
  font-weight:bold;
  font-size:120%;
  color:#333;
}

.merge-labels label {
  margin:0;
}
.merge-labels.stripe label:nth-of-type(even) {
  background-color:#c0c0c0;
}
input:invalid, select:invalid, textarea:invalid {
  background-color:#ffff80;
}
input:valid, select:valid, textarea:valid {
  background-color:#ffffff;
}

@keyframes fader {
  from {opacity:0}
  to {opacity:1}
}
div.chunked-progress {
  position:relative;
  transition:opacity 1s;
}
div.chunked-progress>progress {
  display:block;
  width:100%;
}
div.chunked-progress>progress:last-of-type {
  position:absolute;
  top:0;
  animation:fader 1s infinite alternate linear;
}
div.file-list-container>p {
  padding:0.1em 10px;
  font-size:10pt;
  margin-bottom:2px;
  border:1px solid #000045;
}
div.file-list-container>p input[type=checkbox] {
  float:right;
  margin:auto;
}
div.file-list-container>p.completed {
  opacity:0.6;
}
div.file-list-container>p.disabled input {
  visibility:hidden;
}

.slideshow-container {
  position:relative;
  overflow:hidden;
}
.slideshow-container .slide img {
  margin:0.3em;
  max-width:calc(100% - 0.6em);
  max-height:calc(100% - 0.6em);
  display:block;
}
.slideshow-container.fade .slide {
  transition:opacity 2s;
}
.slideshow-container.shift .slide {
  transition:right 2s;
}
.slideshow-container * {
  position:absolute;
}
.slideshow-container .slide {
  height:100%;
  width:100%;
  opacity:0;
  visibility:hidden;
  z-index:0;
}
.slideshow-container p {
  text-align:left;
  z-index:5;
  padding:0 0.5em 0.4em 0.5em;
  margin:0;
}
.slideshow-container.fade .slide.prev {
  z-index:1;
  visibility:visible;
}
.slideshow-container.fade .slide.curr {
  z-index:2;
  opacity:1;
  visibility:visible;
}
.slideshow-container.fade .slide.next {
  z-index:1;
  visibility:visible;
}
.slideshow-container.shift .slide.prev {
  z-index:1;
  visibility:visible;
  opacity:1;
  right:100%;
}
.slideshow-container.shift .slide.curr {
  z-index:2;
  opacity:1;
  visibility:visible;
  right:0;
}
.slideshow-container.shift .slide.next {
  z-index:1;
  visibility:visible;
  opacity:1;
  right:-100%;
}

.slideshow-container.artwork {
  background-color:#8A8E5C;
  
}
.slideshow-container.artwork * {
  font-family:Charter, times, serif;
  font-size:clamp(14pt,4vmin,48pt);
  color:white;
  background-color:#8A8E5CA0;
}
.slideshow-container.artwork p {
  border-radius:0.2em;
}
.slideshow-container.artwork p.caption {
  width:100%;
  text-align:right;
  right:0;
  bottom:0;
  background-image: linear-gradient(0,#8A8E5CB0,#8A8E5CB0 80%,#8A8E5C00);
  background-color: transparent;
  padding-top: 10px;
  border-radius:0;
}
.slideshow-container.artwork .slide img {
bottom:0;
right:0;
}
.item-set-container.artwork {
  border:10px solid #8A8E5C;
  background-color: #8A8E5C;
  border-radius:0;
  box-shadow:unset;
}