.fadeout-box {
  max-height: 75px;
  position: relative;
  overflow: hidden;
}

.fadeout-box .read-more {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  margin: 0px ; padding: 45px 0 0 0;

  /* "transparent" only works here because == rgba(0,0,0,0) */
  /* background-image: linear-gradient(to bottom, transparent, black); */
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0, rgba(255, 255, 255, 0)),
    color-stop(1, rgba(255, 255, 255, 100)));
}

q {
  quotes: "\201c" "\201D" "\2018" "\2019"  ;
}

.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  border: 0;
  margin: 0;
  padding: 0;
  display: none;
  transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  border: inherit;
  margin: inherit;
  padding: inherit;
  max-height: 999em;
  display: inherit;
}

.read-more-state ~ .read-more-trigger:before {
  content: 'Show more';
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Show less';
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  color: #666;
  font-size: .9em;
  line-height: 2;
  border: 1px solid #ddd;
  border-radius: .25em;
}

/* Other style */ 
body {
  padding: 2%;
}

/* BUTTONS - FoSCT Styled for light background */
/* FoSCT Colors are: Brown:a97b50; Gradient-Green:71bf44; Gradient-Yellow:c9dc44; */
/*     Blue:00aeef; Letter-green: 8cc63f; White:ffffff;  */

.fosct-btn {
    background:    #b2b2b2;     
        This was a dimmer version, but rather just text dimmed, so easier to read
    background:    -webkit-linear-gradient(#1866aa , #999999 50%, #1866aa );
    background:    linear-gradient(#1866aa , #999999 50%, #1866aa );
        */
        background:    #1866aa;
        background:    -webkit-linear-gradient(#44aaff, #1866aa 50%, #44aaff);
        background:    linear-gradient(#44aaff, #1866aa 50%, #44aaff);
    border:        1px solid #556699;
    border-radius: 4px;
    box-shadow:    1px 1px #444444;
    display:       inline-block;
    text-align:    center;
    text-decoration: none;
        width:          100%;
}

.fosct-btn:link, .fosct-btn:visited {
    color:         #cccccc;
    text-shadow:   2px 2px #000000;
}

.fosct-btn:hover {
    background:    #1866aa;
    background:    -webkit-linear-gradient(#44aaff, #1866aa 50%, #44aaff);
    background:    linear-gradient(#44aaff, #1866aa 50%, #44aaff);
    color: #ffffff;
}

.fosct-btn:active {
    text-shadow:   -2px -2px #000000;
        transform: translateY(2px);
        transform: translateX(2px);
    box-shadow:    0px 0px #444444;
}


p.b, ul.b, h1.b, h2.b, h3.b, h4.b, h5.b {
  padding: 2%;
  background: #fff9c6;
  color: #8e4016; /* old #c7b27e */ 
  border: 1px solid #fce29f;
  border-radius: .25em;
  margin: 5px 0px 5px;
}
.person {
  text-align:left;
  border: 1px solid black;
  border-collapse: collapse;
  padding:2px;
  width: 800px;
}
.p-img {
  text-align:center;
  vertical-align: top;
  padding:5px;
  width: 11%;
  background-color: #CCFFCC;
}
.p-text {
  text-align:left;
  margin-top: 0px;
  padding:0px 5px 5px;
  width: 89%;
  background-color: #CCFFCC;
}

.subhead {
  background-color: silver;
  text-align:left;
  border: 1px solid black;
  padding:5px;
  width: 800px;
}

div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  padding: 5px;
  z-index: +2;
  // background-color: #cae8ca;
  // border: 2px solid #4CAF50;
}