/* ---------------------------------------------------------------------------
   slideshow-caption.css

   Self-contained caption styling for the Swiper-based slideshows (the header
   slideshow rendered by plugins/slideshow/nerve.cfc::renderSwiperHeaderShow and
   the newcore slideshow module). It replaces the ONLY thing those two needed
   from /nerve/nerveSlider.min.css, so neither has a nerveSlider dependency any
   more.

   Extracted verbatim from nerveSlider.min.css -- selectors, specificity and
   property values are byte-for-byte the same, so the cascade against the ~818
   per-layout template stylesheets (which override these with
   `.ns_nerveSlider .ns_caption {...}` rules of identical specificity) behaves
   exactly as before. Load this file at the same point in the document where
   nerveSlider.min.css used to be linked.

   Two deliberate changes from the original:

   1. The scrim was `url(icons/caption-gradient.png)`, a 10x136 image of pure
      black at varying alpha with no horizontal variance. It is reproduced below
      as a CSS gradient sampled from that image (alpha 0 at the top ramping to
      203/255 at the bottom), dropping a binary asset and one HTTP request.
   2. `filter: dropshadow(color=#000000, offx=1, offy=1)` is omitted. That is the
      proprietary IE 5.5-8 filter; no supported browser implements it, and the
      `text-shadow` above already provides the same effect everywhere.

   NOTE: the legacy nerveSlider engine still needs the full nerveSlider.min.css.
   /nerve/ can only be deleted once every school has been moved to the Swiper
   engine via the `swiperHeader` module_settings flag.
   --------------------------------------------------------------------------- */

.ns_nerveSlider .ns_caption {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 136px;
    display: block;
    font-family: Arial, "Helvetica Neue";
    /* was: transparent url(icons/caption-gradient.png) 0 bottom repeat-x */
    background-color: transparent;
    background-image: linear-gradient(to bottom,
        rgba(0, 0, 0, 0)     0%,
        rgba(0, 0, 0, 0.047) 10%,
        rgba(0, 0, 0, 0.157) 25%,
        rgba(0, 0, 0, 0.294) 40%,
        rgba(0, 0, 0, 0.396) 50%,
        rgba(0, 0, 0, 0.490) 60%,
        rgba(0, 0, 0, 0.631) 75%,
        rgba(0, 0, 0, 0.745) 90%,
        rgba(0, 0, 0, 0.796) 100%);
    background-position: 0 bottom;
    background-size: 100% 136px;
    background-repeat: repeat-x;
    color: #fff;
    font-size: 14px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 50;
    line-height: 19px;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
    margin: 0;
    padding: 0;
}

.ns_nerveSlider .ns_caption > div {
    display: block;
    position: absolute;
    bottom: 0;
    white-space: normal;
    overflow: hidden;
    margin: 50px 35px 25px;
}

.ns_nerveSlider .ns_caption > div img {
    position: relative;
}

.ns_nerveSlider .ns_caption a {
    position: static;
    width: auto;
    height: auto;
    display: inline;
    overflow: auto;
}

.ns_nerveSlider .ns_caption > div h1 {
    font-size: 30px;
    line-height: 30px;
    font-weight: 300;
    position: static;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    box-shadow: none;
    -webkit-box-shadow: none;
    float: none;
    display: block;
    margin: 0 0 12px;
    padding: 0;
}

.ns_nerveSlider .ns_caption > div h1:before,
.ns_nerveSlider .ns_caption > div h1:after {
    display: none;
}