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

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

#site-footer {
  color: #ddd;
  font-size: 90%;
  padding: .5em .5em 2em .5em;
}
#site-footer a:link,
#site-footer a:visited {
  color: #ddf;
}

h2 { color: #222266; }

iframe { 
  max-width: 95%;
}
/*--- "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 default language chooser widget ---*/

#language-chooser {
  order: 2;
}

/*--- 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 {
  color: #fff;
  background: #000;
}
.language-list li a.unavailable {
  background: #fff;
  border: 1px solid #ddd;
  color: #ccc;
}
.language-list li a.unavailable.preferred {
  background: #ccc;
  color: #fff;
  border: none;
}
.language-list li a.active,
.language-list li a.unavailable {
  text-decoration: none !important;
  pointer-events: none;
  user-select: none;
    -moz-user-select: none;
  cursor: default;
}
/*
.language-list li a.preferred {
  border: 2px solid red;
}
*/

.top-message { 
  margin: 0;
  font-style: italic;
}
.top-message.warning {
  /*
  border: 1px solid #eeeebb;
  background-color: #ffffcc;
  padding: .1em;
  */
  margin: 0;
  padding: 0;
  color: red;
}

/*--- 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: #265e8d;
  padding-top: .2rem;
}

#body-flex {
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  width: 100%;
  max-width: 62rem;
  position: relative; /* contain sometimes-fixed header */
  /* background-color: #a7df95; */
  background-color: #86beed;
  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; */
  background-color: #b6eeff;
  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;
}

.basic .figure,
.basic figure {
    border: 1px solid #999;
    box-shadow: .1em .1em .3em #ddd;
}
.basic .figure.usmap,
.basic 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 }

/* LOWT::App messages */

.top-message {
  padding: 10px;
  margin-bottom: 1em;
  box-shadow: 3px 3px 5px #999;
  border-radius: 10px;
  font-family: sans-serif;
  background-repeat: no-repeat;
  background-position: 10px 5px;
  min-height: 70px;
}
.top-message h1 {
  font-size: 140%;
  margin-top: 5px;
}
.top-message img {
  float: left;
  margin-right: 8px;
}
.top-message.error { background-color: #ffb0b0; }
.top-message.warning { background-color: #ffffcc; }
.top-message.info { background-color: #bbffbb; }

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

  #article-nav {
    flex-flow: row;
    justify-content: space-between;
  }

  .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.basic main:not(.single-column), */
  body.n-biblioteko-etikedoj main,
  body.n-biblioteko-autoroj main,
  body.n-biblioteko-fontlingvoj main,
  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;
  }

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