/* readmore.css (OBSOLETE)
 * 
 * CSS for a `Read More' system.
 *
 * To use, simply have this:
 *   <div id="thing" class="readmore-wrapper">
 *     <div class="readmore">…content…</div>
 *     <div class="readmore-ender"/></div>
 *     <div>
 *       <a href="#thing" class="readmore-expand">Read more</a>
 *     </div>
 *   </div>
 *
 * For example:
 *   http://ccel.org/ccel/calvin
 *   http://ccel.org/ccel/calvin#biography
 *
 * As of 2017-12-13, those examples seem to have no "readmore" feature
 * on regular or mobile browsers I tried (there's a "show all N works", but
 * no sign of "readmore" in the HTML (though possibly it only gets
 * added by some Javascript... At any rate, we'd need to port to Laravel.
 *
 * \see also readmore.js.
 */

.readmore {
  /* Establish a new containing block for the readmore-ender */
  position: relative;
}
.readmore .readmore-ender {
  position: absolute;
  bottom: 0;

  width: 100%;
  height: 2em;

  /* 0xef = 239, so #efefef == rgb(239, 239, 239). Retrieved from layout.css:#content. */
  background-image: linear-gradient(
    to bottom,
    rgba(239, 239, 239, 0),
    rgba(239, 239, 239, 1)
  );
  background-image: -o-linear-gradient(
    to bottom,
    rgba(239, 239, 239, 0),
    rgba(239, 239, 239, 1)
  );
  background-image: -moz-linear-gradient(
    to bottom,
    rgba(239, 239, 239, 0),
    rgba(239, 239, 239, 1)
  );
  background-image: -ie-linear-gradient(
    to bottom,
    rgba(239, 239, 239, 0),
    rgba(239, 239, 239, 1)
  );
  background-image: -ms-linear-gradient(
    to bottom,
    rgba(239, 239, 239, 0),
    rgba(239, 239, 239, 1)
  );
}

/* Activate the readmore stuff when JS is available */
.readmore .readmore-ender,
.readmore-expand {
  display: none;
}
.js .readmore .readmore-ender,
.js .readmore-expand {
  display: block;
}
.js .readmore {
  max-height: 32em;
  overflow: hidden;
}
/* React to expansion of the readmore */
.js .readmore-expanded .readmore {
  max-height: none;
  overflow: visible;
}
.js .readmore-expanded .readmore-expand,
.js .readmore-expanded .readmore-ender {
  display: none;
}