}
div.forumHier > div > form,
div.forumTime > div > form,
div.forumHierRoot > div > form {
  margin: 0.5em 0;
}
.forum-post-collapser {
  /* Common style for the bottom-of-post and right-of-post
     expand/collapse widgets. */
  font-size: 0.8em;

  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0 0 0.5em 0.5em;
  background-color: rgba(0, 0, 0, 0.05);
  opacity: 0.8;
  cursor: pointer;
}
.forum-post-collapser.bottom {
  margin: 0 0 0.4em 0;
  height: 1.75em;
  line-height: 1.75em;
  /* ^^^ Those sizes are finely tuned for the current selection of
     arrow characters. If those change, these should, too. Remember that
     FF/Chrome simply do not agree on alignment with most values :/.  */





  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.forum-post-collapser.bottom > span {
  margin: 0 1em 0 1em;
  vertical-align: middle;
}
.forum-post-collapser.bottom > span::before {
  content: "⇣⇣⇣";
}
.forum-post-collapser.bottom.expanded > span::before {
  content: "⇡⇡⇡" /*reminder: FF/Chrome cannot agree on alignment of ⮝*/;
}
div.forumPostBody{
  max-height: 50em;
  overflow: auto;
}
div.forumPostBody.with-expander {
  display: flex;
  flex-direction: row;
  overflow: auto;
}
div.forumPostBody.with-expander:not(.expanded) > :first-child {
  overflow-y: hidden;
}
div.forumPostBody.with-expander > *:first-child {
  /* Main content DIV/PRE */
  overflow: auto;
  flex: 10 1 auto;
}
div.forumPostBody.with-expander.expanded > *:first-child {
  margin-bottom: 0.5em /* try to suppress scroll bar */;
}
div.forumPostBody.with-expander .forum-post-collapser.right {
  /* "Tap zone" for expansion of the post, sits to the right of the
     post's content. */
  flex: 1 10 auto;
  min-width: 1.25em;
  max-width: 1.25em;

  margin: 0 0 0 0.2em;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  border-radius: 0.1em;
  cursor: pointer;


  border-bottom: 0;
  border-radius: 0 0.5em 0 0;


}
div.forumPostBody.with-expander .forum-post-collapser.right > span:before {
  content: "⇣";
}
div.forumPostBody.with-expander.expanded .forum-post-collapser.right > span:before {
  content: "⇡";
}
div.forumPostBody.expanded {
  max-height: initial;
}
div.forumPostBody.shrunken {
  /* When an expandable post is un-expanded, it is shrunkend down

       their max-height). */
    document.querySelectorAll(
      'div.forumHier, div.forumTime, div.forumHierRoot'
    ).forEach(function f(forumPostWrapper){
      const content = forumPostWrapper.querySelector('div.forumPostBody');
      if(!content || !scrollbarIsVisible(content)) return;
      const parent = content.parentElement,
            widget =  D.addClass(
              D.div(),
              'forum-post-collapser','bottom'
            ),
            rightTapZone = D.addClass(
              D.div(),
              'forum-post-collapser','right'
            );
      /* Repopulates the rightTapZone with arrow indicators. Because
         of the wildly varying height of these elements, This has to
         be done dynamically at init time and upon collapse/expand. Will not
         work until the rightTapZone has been added to the DOM. */
      const refillTapZone = function f(){
        if(!f.baseTapIndicatorHeight){
          /* To figure out how often to place an arrow in the rightTapZone,

          D.append(rightTapZone, D.span());
          rtzHeight -= f.baseTapIndicatorHeight * 8;
        }while(rtzHeight>0);
      };
      const handlerStep1 = getWidgetHandler(widget, content);
      const widgetEventHandler = ()=>{ handlerStep1(); refillTapZone(); };
      content.classList.add('with-expander');

      widget.addEventListener('click', widgetEventHandler, false);
      /** Append 3 children, which CSS will evenly space across the
          widget. This improves visibility over having the label
          in only the left, right, or center. */
      var i = 0;
      for( ; i < 3; ++i ) D.append(widget, D.span());
      if(content.nextSibling){