a:link:hover { text-decoration: underline }

@media screen and (min-width: 43rem) {
  #usmap {
    margin-top: 0.6em;
  }
}

#site-footer {
  color: #ddd;
  font-size: 90%;
  padding: .5em .5em 2em .5em;
  /* background: url('/images/skylines.jpg') no-repeat bottom right; */
  /* width: 100%; */
}
#site-footer a:link,
#site-footer a:visited {
  color: #ddf;
}


/*--- "collapsible" boxes that shrink in height on small screens ---*/

.collapsible {
  width: 100%;
  font-size: 100%;
  border: 1px solid #aca;
  border-radius: .3em;
  margin: 0 0 .5em 0;
  overflow: hidden;
  position: relative;
  line-height: 1.4em;
  background: #fff;
}
.collapsible dl {
  margin-left: 1em;
}
.collapsible dt:before {
  content: "• "
}
.collapsible h1,
.collapsible h2,
.collapsible h3 {
  line-height: 1.4em;
  /* text-align: center; */
  margin: 0;
  padding: .2rem .5rem;
}
.collapsible header {
  font-size: 110%;
  color: green;
  padding: .5rem .5rem;
  text-align: center;
}
.collapsible header h1 {
  font-size: 100%;
  display: inline;
}
.collapsible header label {
  display: inline;
  width: 100%;
  cursor: pointer;
  user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.collapsible header label:after {
  transition: all 0.3s;
  content: "❯";
  font-size: 120%;
  float: right;
  vertical-align: middle;
}
.collapsible main {
  padding: 0 .5em .2em .5em;
  overflow: hidden;
  transition: all 0.5s;
  font-size: 90%;
}
.collapsible input[type="checkbox"] ~ main {
  max-height: 0em;
}
.collapsible input[type="checkbox"]:checked ~ main {
  max-height: none;
}
.collapsible input[type="checkbox"]:checked + header > label:after {
  transform: rotate(90deg);
  /* transform-origin: .31em .58em; */
}
.collapsible input[type="checkbox"]:checked + header {
  border-bottom: 1px solid #aca;
}
.collapsible main h1,
.collapsible main h2 {
  font-size: 100% !important;
  padding-bottom: 0;
}
.collapsible main h3 {
  padding-top: 0;
  font-size: 90%;
}
.collapsible > p {
  margin: .5em 1em;
}
.collapsible hr {
  width: 2em;
  height: auto;
  padding: auto;
  border: none;
  margin: .8em auto .4em auto;
  color: transparent;
}
.collapsible hr:after {
  color: #040;
  content: "★";
}
.collapsible input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

/*--- a list of available languages for a given page ---*/

.language-list ul { 
  list-style-type: none;
  margin: 0;
  padding: 0 0 .5em 0;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
}
.language-list li {
  margin: 0 0 0 .5em;
  padding: 0;
}
.language-list li a {
  background: #eef;
  padding: .1em .3em;
  border-radius: .2em;
}
.language-list li a.active {
  background: #000;
}
.language-list li a.inactive {
  background: #ddd;
}
.language-list li a.active,
.language-list li a.inactive {
  color: #fff;
  text-decoration: none !important;
  pointer-events: none;
  cursor: default;
}

/*--- make special links into large, clickable "buttons" ---*/
p.click-me a {
  display: inline-block;
  background-color: #587fb0;
  background: linear-gradient(180deg, #6496c8, #346392);
  border-radius: .3em;
  color: #fff;
  text-shadow: -0.1em 0.1em #346392;
  letter-spacing: 0.03em;
  padding: 0.7em 1em;
  font-size: 120%;
  box-shadow: inset 0 0 0 1px #27496d;
}
p.click-me a:hover { 
  text-decoration: none;
  /* background: #e0e0f0; */
  box-shadow: inset 0 0 0 1px #27496d, 0 .1em .2em #193047;
}
p.click-me a:active {
  box-shadow: inset 0 0 0 1px #27496d, inset 0 .1em .5em #193047;
}

/* ---  --- */

body {
  font-size: 11pt;
  display: flex;
  flex-flow: column;
  align-items: center;
  background-color: #333;
  padding-top: .2rem;
}

#body-flex {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  width: 100%;
  max-width: 90rem;
  position: relative; /* contain sometimes-fixed header */
  background-color: #a7df95;
  overflow-x: hidden; /* crop wayward pull-down menus */
}
#site-nav {
  display: flex;
  width: 100%;
  flex-flow: column;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: .7em 1rem .5rem 1rem;
}
#masthead {
  display: flex;
  flex-flow: column;
  /* justify-content: space-between; */
  align-items: center;
  width: 100%;
}
#body-flex > article {
  display: flex;
  flex-flow: column nowrap;
  width: 100%;
  padding: 1rem 1.2rem .8rem 1.2rem;
  border-top: 1px solid #282;
  background: url('/images/globe.jpg') no-repeat top right;
  background-color: #fff;
}
#article-nav {
  display: flex;
  flex-flow: column;
  align-content: flex-start;
}
#article-nav > .breadcrumbs { 
  order: 1; 
}
#article-nav > .language-list { 
  order: 2;
}

#bodysection-flex {
  width: 100%;
}

#logo { order: 1 }
#search { order: 3 }
#hamburger-label { order: 4 }

#search {
  margin: .3rem 0 .2em 0;
} 
#search input[type="search"] {
  -moz-appearance:none;
  -webkit-appearance:none;
  padding: 0 .5em;
  margin: 0;
  font-family: inherit;
  font-size: 100%;
  max-width: 12rem;
}

#hamburger-menu .nodes {
  background-color: #e7ffd5;
  border-radius: .5em;
  margin-top: .3rem;
}

#body-flex > article > main {
  position: relative;
  margin-top: 1.2em;
}

body.article main > *:not(.head):first-child,
body.article main > *:not(.head):first-child > *:first-child,
article.subarticle:first-of-type > header > * {
  margin-top: 0;
  padding-top: 0;
}

.base .figure,
.base figure {
    border: 1px solid #999;
    box-shadow: .1em .1em .3em #ddd;
}
.base .figure.usmap,
.base figure.usmap { border: none; box-shadow: none }

/* .aggregate .figure,
.aggregate figure,
*/
.figure.small,
figure.small {
  width: 40%;
  margin: 0 0 .5em 1.4em;
  float: right;
  clear: right;
}

.issue-name { display: none }

/* ----------- breakpoint 0.5 ----------- */
/* masthead contents appear in a single row */
@media all and (min-width: 30rem) {

  #masthead {
    flex-flow: row;
    justify-content: space-between;
    align-items: flex-start;
  }
  #hamburger-label { 
    order: 2;
    align-self: flex-end;
  }
  #article-nav {
    flex-flow: row;
    justify-content: space-between;
  }
  #article-nav > .language-list {
    order: 3;
  }
  ul.issue-list {
    flex-flow: row wrap;
    align-items: flex-start;
    align-content: center;
  }
}

/* ----------- breakpoint 1 ------------------- */
/* screen is now wide enough for pull-down menus/sidebar */
@media screen and (min-width: 43rem) {

  .issue-name { display: block }

  .narrow-only { display: none }
  .collapsible {
    margin-bottom: 1em;
  }
  .collapsible > header > label:after {
    content: none;
  }
  .collapsible input[type="checkbox"],
  .collapsible label {
    pointer-events: none;
  }
  .collapsible header { 
    border-bottom: 1px solid #aca;
  }
  .collapsible main {
    max-height: none !important;
  }
  #body-flex {
    /* min-height: 40rem; */
  }
  #body-flex > article { 
    display: flex;
  }

  #bodysection-flex {
    display: flex;
  }
  #bodysection-main {
    width: 50%;
  }
  #bodysection-aside {
    width: 50%;
    padding-left: 2em;
  }
  #bodysection-aside h1,
  #bodysection-aside h2,
  #bodysection-aside h3 {
    margin-top: 0;
    padding-top: 0;
  }
  #bodysection-aside ol {
    padding-left: 1.2em;
  }

  body.n-bulteno.base main:not(.single-column),
  body.n-bulteno.collection main:not(.single-column),
  body.n-bulteno.collection.aggregate main,
  body.n-bulteno.article main:not(.single-column) {
    column-width: 18em;
    column-gap: 1.9em; /* 2.8em */
    padding-right: 1em;
  }

  .base .figure,
  .base figure,
  .core .figure,
  .core figure,
  .issue figure {
    float: right;
    margin: 0 0 .5em 1.4em;
    clear: right;
    width: 50%;
  }
}