/* ---------------------------------------------------------------------
   article.css - article detail page (articles.php)

   Layered on top of main.css. The site shell (columns, top menu, login
   box, side bar, footer) all comes from main.css; only rules that are
   specific to reading a single article live here.
   --------------------------------------------------------------------- */

/* --- top banner ------------------------------------------------------ */
#article_banner {
  margin: 0 0 20px;
  text-align: center;
}

/* --- headline -------------------------------------------------------- */
#article h1 {
  margin: 0 0 12px;
  padding: 0;
  color: #fff;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 32px;
  font-weight: normal;
  line-height: 1.15;
}

/* --- byline: avatar, poet, view count -------------------------------- */
#article .byline {
  margin: 0 0 22px;
  padding: 0 0 12px;
  border-bottom: 1px dashed #ccc;
  overflow: hidden;
}
#article .byline img {
  float: left;
  margin: 0 10px 0 0;
  width: 44px;
  height: 44px;
  border: 1px solid #303030;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}
#article .byline .poet {
  margin: 2px 0 0;
  font-size: 1.4em;
  font-weight: bold;
  font-variant: small-caps;
}
#article .byline .article_views {
  margin: 2px 0 0;
}

/* --- share row ------------------------------------------------------- */
#share_code {
  margin: 0 0 25px;
}

/* --- the article itself ---------------------------------------------- */
.article-body {
  margin: 0 0 30px;
  color: #e6e6e6;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 18px;
  line-height: 1.7;
  text-align: left;
}

/* main.css resets div/table/td/tr to 11px Helvetica; editor-pasted
   markup inside the article must keep the reading styles instead. */
.article-body div,
.article-body span,
.article-body table,
.article-body td,
.article-body tr {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

.article-body p {
  margin: 0 0 1.2em;
  color: inherit;
}
.article-body a {
  color: #ffcc2f;
}
.article-body a:hover {
  color: #fff;
}
.article-body h2,
.article-body h3,
.article-body h4 {
  margin: 1.6em 0 0.5em;
  color: #fff;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-weight: normal;
  line-height: 1.2;
}
.article-body h2 {
  font-size: 24px;
}
.article-body h3 {
  font-size: 21px;
}
.article-body h4 {
  font-size: 19px;
}
.article-body ul,
.article-body ol {
  margin: 0 0 1.2em 1.6em;
  padding: 0;
}
.article-body li {
  margin: 0 0 0.4em;
}
.article-body blockquote {
  margin: 1.4em 0;
  padding: 2px 0 2px 15px;
  border-left: 8px solid #fc3;
  color: #ccc;
  font-style: italic;
}
.article-body img {
  max-width: 100%;
  height: auto;
}
.article-body hr {
  margin: 1.6em 0;
  border: 0;
  border-top: 1px dashed #ccc;
}

/* --- "other articles you may like" ----------------------------------- */
/* reuses the #articles / ul.art_mod module from the home page */
#articles.cross-sell {
  margin: 40px 0 0;
  padding: 20px 0 0;
  border-top: 1px dashed #ccc;
}
#articles.cross-sell h2 {
  font-size: 1.6em;
  font-weight: normal;
}
#articles.cross-sell ul.art_mod {
  margin-left: -10px;
}
#articles.cross-sell ul.art_mod li a {
  display: block;
  font-size: 120%;
  line-height: 1.25;
}
#articles.cross-sell ul.art_mod li a:hover {
  color: #ffcc2f;
}

/* --- facebook comments ----------------------------------------------- */
#fb_comm {
  margin: 40px 0 0;
  padding: 20px 0 0;
  border-top: 1px dashed #ccc;
}
#fb_comm h2 {
  margin: 0 0 10px;
  color: #fff;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1.6em;
  font-weight: normal;
}
.fb-comments,
.fb-comments iframe[style] {
  width: 100% !important;
}

/* --- article not found ------------------------------------------------ */
.article-missing {
  margin: 20px 0;
  padding: 20px;
  border: 1px dashed #ccc;
  color: #ccc;
  font-size: 1.4em;
  text-align: center;
}
.article-missing a {
  color: #ffcc2f;
}

/* --- poet panel in the right column ----------------------------------- */
/* matched to #right-col #side-bar in main.css */
#right-col #poet-box {
  margin: 15px 0 0;
  padding: 15px;
  width: 243px;
  border: 1px solid #303030;
  background: url(../images/sharedimgs/overlay-transparency.png) top left;
  text-align: center;
}
#poet-box h2 {
  margin: 0 0 10px;
  padding: 0;
  color: #ababab;
  font-size: 18px;
  font-weight: normal;
}
#poet-box img.avatar {
  width: 100px;
  height: 100px;
  border: 1px solid #303030;
  object-fit: cover;
  aspect-ratio: 1 / 1;
}
#poet-box .poet-name {
  margin: 8px 0 12px;
  font-size: 1.4em;
  font-weight: bold;
  font-variant: small-caps;
}
#poet-box .poet-note {
  margin: 0 0 10px;
  color: #ababab;
  font-size: 1.05em;
  line-height: 1.5;
}
#poet-box ul {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
#poet-box ul li {
  margin: 0 0 6px;
  padding: 0 0 6px;
  border-bottom: 1px dotted #3a3a3a;
}
#poet-box ul li.last {
  border-bottom: none;
}
#poet-box ul li a {
  color: #ccc;
  font-size: 1.15em;
  text-decoration: none;
}
#poet-box ul li a:hover {
  color: #ffcc2f;
}