details {
  margin: 0 0 1em 1.5em; }
 
  details summary {
    padding: 0.5em;
    background-color: rgba(125, 125, 125, 0.2);
    margin: 0 0 0 -1.5em;
    cursor: pointer;
    color: #1c3664;
    font-size: 1em; }
 
    details summary span {
      color: #000;
      font-size: 1em; }
 
    details summary:focus {
      border-color: #000099; }


.summary.expander {
  padding: 0.5em;
  background-color: rgba(125, 125, 125, 0.2);
  margin: 0;
  font-size: 1em;
  cursor: pointer;
  display: block;
  border-width: 1px 1px 0;
  border-style: solid;
  border-color: rgba(101, 101, 101, 0.5); }
 
  .summary.expander.closed {
    border: 1px solid rgba(101, 101, 101, 0.5);
    margin: 0 0 0.5em; }
 
  .summary.expander:focus {
    border-color: #3782b3; }
 
  .summary.expander + .details.expanded {
    display: block;
    border-width: 0 1px 1px;
    border-style: solid;
    border-color: rgba(101, 101, 101, 0.5);
    padding: 1.5em 1em 1em;
    margin: 0 0 1em; }
 
  .summary.expander.closed + .details.expanded {
    display: none; }

  .summary.expander:before {
    content: '';
    display: inline-block;
    margin: 0.4em 0.2em 0 0;
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-top: 0.6em solid #555555;
    border-right-width: 0.4em;
    border-left-width: 0.4em; }
  
  .summary.expander.closed:before {
    content: '';
    display: inline-block;
    margin: 0.2em 0.4em 0 0;
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-bottom-width: 0.4em;
    border-top-width: 0.4em;
    border-left: 0.6em solid #555555; }