/*
 * The "fisheye": a hierarchical view of the website showing the 
 * user where they are in the document hierarchy at all times. 
 * Provides more "lateral" information than breadcrumbs, less
 * overwhelming than a full sitemap.
 *
 * For small screens, allows collapse to a toggled "hamburger" 
 * menu using CSS only.
 */

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

#hamburger label {
  color: #0000ee; /* standard link color */
}

#fisheye a {
  color: #0000ee;
}

#fisheye a:visited {
  color: #551a8b;
}

#fisheye li span:before {
  color: #aaa;
}

#fisheye ul ul li .you-are-here a {
  color: black;
}

#siblings ul ul li:before {
  color: #888;
}

#siblings .active a {
  color: #000;
}
 
/* -------------------- */

#hamburger { /* aka hamburger */
  clear: both;
  margin: 0;
  padding: 0;
}

#hamburger input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

#hamburger input[type=checkbox]:checked ~ #fisheye {
  display: block;
  clear: both;
}

#hamburger label {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 1.7rem;
  clear: left;
  text-align: center;
  cursor: pointer;
  user-select: none;
  height: 1.5em;
  user-select: none;
  margin: .3rem .2rem .1rem .5rem;
  padding-bottom: 1px;
}

#hamburger label:before {
  content: '\2261';
  font-size: 2.2rem;
  line-height: 1.7rem;
  vertical-align: middle;
}
#hamburger label:after {
  content: 'menu';
  font-size: 1em;
  font-variant: small-caps;
  vertical-align: middle;
  line-height: 1.7rem;
  margin-left: .2em;
}

/*
#hamburger input[type=checkbox]:checked ~ label:after {
  content: 'hide menu';
}
*/

@media only print {
  #hamburger { display: none }
}

/* -------------------- */

#fisheye {
  padding: .5em 0 .5em 0em;
}

#fisheye li span {
  display: block;
  width: 100%;
  text-overflow: '…';
  overflow: hidden;
}
#fisheye a {
  white-space: nowrap;
  width: 100%;
}

#fisheye ul {
  list-style-type: none;
  margin: 0 .1em .1em 0;
  padding: 0;
}

#fisheye li {
  line-height: 1.5em;
  margin: 0;
}

#fisheye li span:before {
  padding-right: .1em;
  font-family: monospace;
  content: " ";
}

#fisheye ul li.on-breadcrumb-trail > span:before {
  content: "▾";
}

#fisheye ul ul {
   margin-left: 0; /* first level not indented */
}

/* "open" branches are highlighted */
#fisheye ul ul li .active a {
   font-weight: bold;
}

#fisheye ul ul li .you-are-here a {
  pointer-events: none;
  cursor: default;
  font-weight: bold;
}

#fisheye ul ul ul {
  font-size: 90%;
  margin-left: .9em;
}

#fisheye ul ul ul ul {
   font-size: 95%;
}

/* an abbreviated fisheye view, used in menus atop pages */
#siblings {
  margin-bottom: 1em;
  text-align: center;
  font-size: 110%;
  line-height: 1.2em;
}

#siblings ul {
  display: inline;
  list-style-type: none;
  width: 100%;
  padding: 0;
}

#siblings ul li {
  display: inline;
  margin: 0;
  padding: 0;
}

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

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

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

#siblings .active a {
  font-weight: bold !important;
  pointer-events: none;
  cursor: default;
}