apex4x/Templates/Footnotes/Internal/css/footnote.css

The Comprehensive ARIA Development Suite

/**********************************************
Common Footnote Colours - update in colors.css
*************************************************/
/*

--globalWhite: #ffffff;
--resetBackground: #555555;
--elementBlack: #1f1f23;
--footnote-aqua: #bae8d4;
--footnote-grey: #999999;
--whatsockBeige: #f2d3a1;

*/

/**********************************************
Common Footnote styles
*************************************************/

div.demo-block > p {
  font-size: 0.95em;
  line-height: 1.45;
}
div.demo-block > p + p {
  margin-top: 0.8em;
}

div.content {
  color: var(--resetBackground);
  background: var(--globalWhite);
  padding: 1rem;
  margin-bottom: 2rem;
}
div.content p:last-child {
  font-size: 90%;
  text-align: right;
}

.aria-footnote {
  color: var(--elementBlack);
  background: var(--footnote-aqua);
  text-shadow: 0 1px 0 var(--footnote-grey);
  padding: 0 0 0 0.2em;
}

.aria-footnote a,
.aria-footnote a:link {
  display: inline-block;
  width: 1em;
  height: 1.3em;
  line-height: 1em;
  font-size: 110%;
  text-decoration: none;
  text-align: center;
  border-radius: 1em;
  margin: 0 2px;
}
.aria-footnote a:visited {
}
.aria-footnote a:hover {
  text-decoration: none;
  background: var(--whatsockBeige);
}

#footnotes {
  margin-top: 3rem;
}

#footnotes::before {
  display: block;
  position: relative;
  top: -10px;
  content: "";
  width: 60%;
  height: 4px;
  background: var(--elementBlack);
}

#footnotes p {
  font-size: 0.85em;
  text-indent: -0.9em;
  margin: 0 0 0.8em 0.9em;
}