/* ToggleBox - used e.g. here https://www.gavinorland.com/the-seventeenth-century-lady/... */

.toggleBox {
  margin: 20px 0 40px;
}

.toggleBox:last-child {
  margin: 20px 0 0;
}

.toggleBox h1 {
  -moz-transition: color 0.3s linear;
  -o-transition: color 0.3s linear;
  -webkit-transition: color 0.3s linear;
  border-left: #aaa 1px solid;
  cursor: pointer;
  float: left;
  font-size: 27px !important;
  margin: 10px 0 40px !important;
  padding: 0 15px !important;
  transition: color 0.3s linear;
}

.toggleBox h1:first-child {
  padding-left: 0 !important;
  border-left: none;
}

.toggleBox h1.on {
  /* border-bottom: #999 1px solid;
  padding-bottom: 3px; */
  color: #ed702b;
  cursor: pointer;
  -moz-transition: color 0.1s linear;
  -webkit-transition: color 0.1s linear;
  -o-transition: color 0.1s linear;
  transition: color 0.1s linear;
}

.toggleBox > div {
  /* Cannot apply top margin here because floated h1s are out of flow. */
  clear: both;
  display: none;
}