/* This is the CSS needed to make OEDP articles look reasonably well.
   Note that the tags and classes used here constitute a sort of
   "in-house style" for OEDP articles. It is not a CSS standard for
   the entire encyclosphere, but should be able to use this CSS and
   expect the articles to appear well in KSF-authored readers. */


/* TEXT STYLING */
.center {
  text-align: center;
}
.smallcaps { font-variant:small-caps; }
.align-right {
  text-align: right;
  display: block;
}
/* Headings are not bolded. */
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}


/* INDENT: surround by <ul class="indent">; this adds 25px padding and
   removes bullets. */
ul.indent {
  padding-inline-start: 25px;
  list-style-type: none;
}
/* Fix bug in which note inside indented <ul> is incorrectly formatted. */
ul.indent span.notebox {
  padding-left:  35px;
}
/* Ordinary <li> needs nothing further; double-indented items use
   class="double-indent". */
li.double-indent {
  text-indent: 25px;
}
.hanging-indent {
  padding-left: 25px ;
  text-indent: -25px ;
}


/* FIGURE */
figure {
  border: 2px solid lightgray;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
figure.has-caption {
  border-bottom: none;
}
figure:not(.has-caption) {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

figure.big {
  max-width: fit-content;
  margin: 10px auto 10px auto;
}
figure.big img {
  object-fit: cover;
}

figure.small {
  display: table;
  margin: 0px 10px 5px 0px;
  max-width: 50vw;
}
figure.small.align-right {
  float: right;
  margin-left: 10px;
}
figure.small:not(.align-right) {
  float: left;
}


/* CAPTION */
figcaption {
  width: inherit;
  max-width: inherit;
  display: table-caption;
  caption-side: bottom;
  text-align: justify;
  margin: 0px 0px 2px 0px;
  padding: 10px;
  font-size: small;
  border: 2px solid lightgray;
  border-top: none;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
figcaption.big {
  display: block;
  border: none;
  margin: auto;
}


/* FOOTNOTES/ENDNOTES */
.notebox {
  float:right;
  border: 2px solid lightgray;
  border-radius: 5px;
  padding: 10px;
  margin: 5px;
  max-width: 45%;
  background-color: #f7f7f7;
}
a.clickable { cursor: pointer; }
a.clickable:link { color: blue; text-decoration: none; }
a.clickable:visited { color: purple; text-decoration: none; }
a.clickable:hover { color: green; text-decoration: none; }


/* MISC */
hr { max-width: 10%; margin: auto; }
