/* "Gray" theme — used only by related-items pages, deliberately NOT matching
   any article color theme, so readers can tell at a glance they've left the
   article itself. No decorative background image (no min-width rule below,
   unlike every color theme) — flat solid background only, at any width. */

body {  background-color: #2a2a2a;}

.main_container {  font-family: Arial, Helvetica, sans-serif;  color: #999999;}

/* Page header ("Related External Items") — overriding the sitewide serif
   Book Antiqua with sans-serif, and sized down to feel less like an article
   title and more like a utility page. */
.header {  color: #f8eb9a;  font-family: Arial, Helvetica, sans-serif;}
.comp_header_text {  font-size: 28px;}
@media (max-width: 768px) {
  .comp_header_text { font-size: 22px; }
}

/* Relationship-type label — plain text, no box (the "flip": boxes now
   belong only to the links themselves, see .link below). Two states, both
   bold: populated (same gold as the item titles/arrows) and empty (dimmer
   gray, deliberately de-emphasized so it doesn't compete with real content). */
.relationship_type {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 16px;
  color: #f8eb9a;
  text-align: left;
  width: 100%;
  padding-top: 14px;
  padding-bottom: 6px;
}
.relationship_type.relationship_empty {  color: #5a5a5a;}
@media (max-width: 768px) {
  .relationship_type { font-size: 14px; }
}

/* Link pads — same structural role as an in-article "More Specifics" link,
   just recolored to this page's flat gray instead of a theme color. */
.link {  background: #333333;}
.link_arrow div {  background: url('../images/link_arrow.jpg') no-repeat scroll 0% 0% transparent;}
.link_text {  font-size: 14px;  color: #f8eb9a;}
.links a {  color: #f8eb9a;}
.links a:visited {  color: #f8eb9a;}