/*
 * "fisheye", "siblings", "breadcrumbs" and "pulldown" node lists: 
 * different views of a website's hierarchy. 
 *
 * A "breadcrumb trail" shows the path through the hierarchy from root
 * node (home) to the user's current location.
 * 
 * A "fisheye view" shows an abbreviated overview of the entire hierarchy 
 * with more detail closer to the user's current location. Provides more 
 * "lateral" information than breadcrumbs, less information than a full 
 * sitemap.
 *
 * For small screens, the display of large hierarchies can be togged using
 * an optional "hamburger" menu.
 *
 * Last update: 2018-08-14 <hoss@lodestone.org>.
 */

/* ----- colors --------- */

.nodes a {
  color: #0000ee;
}
.nodes a:visited {
  color: #551a8b;
}
.fisheye li span.link:before {
  color: #aaa;
}
.nodes .active > a,
.nodes .you-are-here > a,
.nodes .you-are-here > span.link > a {
  color: #000;
  font-weight: bold;
}
.siblings li:before {
  color: #888;
}

/* The optional "hamburger" icon that controls visibility for a menu. */

#hamburger-menu {
  margin: 0;
  padding: 0;
  width: 100%;
}
#hamburger-menu input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
#hamburger-button ~ .nodes {
  /* overridden by state of hamburger-button */
  display: none;
}
#hamburger-button:checked ~ .nodes {
  display: block;
}
#hamburger-label { /* can be placed anywhere on the page */
  display: block;
  margin: 0;
  cursor: pointer;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  line-height: 1em;
  font-size: 150%;
}

/* ---------- common menu styles ---------- */

.nodes ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nodes:not(.pulldown) ul ul ul {
  font-size: 95%;
}
.nodes ul ul ul ul {
  font-size: 100%;
}
.nodes li {
  line-height: 1.5em;
  margin: 0;
  padding: 0;
}
.nodes li span.link {
  display: block;
  width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}
.nodes.fisheye a,
.nodes.breadcrumbs a,
.nodes.siblings a {
  white-space: nowrap;
  width: 100%;
}
.nodes li.you-are-here > a,
.nodes li.you-are-here > span.link,
.nodes li.you-are-here > span.link > a {
  font-weight: bold;
  pointer-events: none;
  cursor: default;
  text-decoration: none;
}

/*---- contents: a detailed list of visible child nodes ---*/

ul.contents {
  margin-left: 0;
  padding-left: 0;
}

ul.contents.with-images li {
  list-style-type: none;
  display: flex;
  margin: 0 0 1em 0;
  padding-left: 0;
}

ul.contents.with-images li div.text {
  margin-left: .5em;
  line-height: 1.3em;
  flex: 16;
}

ul.contents .byline {
}
ul.contents.with-images li .image {
  flex: 3;
}
ul.contents.with-images li .image img {
  width: 100%;
  margin-top: .2em;
}

dl.contents {
  margin: 0;
}

.contents div.summary,
.contents dd {
  font-size: 85%;
  color: #555;
  line-height: 1.3em;
}

ul.contents div.text > a {
  font-weight: bold;
  font-size: 105%;
}

/*
.contents dt:before { 
  content: "• ";
}
*/

.contents dt { 
  break-after: avoid;
}

.contents dd {
  break-before: avoid;
}
  
.contents dt > a > p {
  display: inline;
}

.contents dd > p:first-child {
  margin-top: 0;
}

/*---- fisheye: a site map pruned depending on user location ----*/

.fisheye {
  padding: .5em;
}
/* start indenting at third level */
.fisheye ul ul ul {
  margin-left: .8em;
}
.fisheye li span.link:before {
  padding: 0 .1em 0 0;
  font-family: monospace;
}
.fisheye li span.link:before {
  content: " ";
}
/*
.fisheye ul li.branch > span.link:before {
  content: "▸";
}
*/
.fisheye ul li.on-breadcrumb-trail.branch > span.link:before {
  content: "▾";
}
.fisheye ul li.on-breadcrumb-trail > span.link > a {
  font-weight: bold;
}
/* no arrow indicator at root node */
.fisheye > ul > li.branch > span.link:before {
  content: " " !important;
}

/*--- siblings: an abbreviated fisheye view, used in menus atop pages ---*/

.siblings ul {
  margin-bottom: 1em;
  text-align: center;
  font-size: 110%;
  line-height: 1.2em;
  display: inline;
  width: 100%;
  padding: 0;
}

.siblings li {
  display: inline;
  margin: 0;
  padding: 0;
}

.siblings li a {
  padding: .2em;
}

/* first is "home" link; mark it as such */ 
.siblings li span.link a:after {
  content: " home";
}
.siblings ul li span.link a:after {
  content: "";
}

.siblings ul li:before {
  content: " | ";
}

/* ---- breadcrumbs ----- */

.breadcrumbs {
  margin-bottom: .7em;
}
.breadcrumbs ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
}
.breadcrumbs li {
  flex: 0 0 auto;
} 
.breadcrumbs li:after{
  content: " →";
  margin-right: .5em;
} 
.breadcrumbs li:last-child:after {
  content: ""
}
.breadcrumbs a {
  white-space: nowrap;
  max-width: 12em;
  overflow: hidden;
  text-overflow: ellipsis;
} 

/*---- pulldown menu ----- */

.pulldown ul.nodes { 
  margin: 0;
  padding: 1em;
  width: 100%;
  font-size: 100%;
  list-style: none;
}
.pulldown ul.nodes ul { 
  list-style: none;
}
.pulldown ul.nodes ul ul {
  margin-left: 1em;
}
.pulldown ul.nodes ul ul ul ul {
  display: none
}