/*****************************************************************************
 * Common All-Pages Formatting
 ****************************************************************************/

body {
  padding-top: 78px;
}
h1 {
  clear: both;
  font-size: 32px;
}
h2 {
  clear: both;
  font-size: 24px;
  margin-left: 0px;
  padding-bottom: 0px;
  padding-top: 2px;
  padding-left: 6px;
  border-left: 10px solid #888;
}
h3 {
  clear: left;
  font-size: 18px;
  margin-left: 0px;
  padding-bottom: 0px;
  padding-top: 2px;
  padding-left: 6px;
  border-left: 4px solid #212529;
}
br.clear {
  clear: both;
}
@media (max-width: 767px) {
  h1 {
    font-size: 24px;
  }
  h2 {
    font-size: 20px;
  }
}

div.main_body {
  padding-bottom: 6px;
}
div.main_body li {
    margin-top: 0.5rem;
}
div.main_body li:first-child {
    margin-top: 0;
}

/* General-Purpose Colors & Fonts */
@font-face {
  font-family: 'typewriter';
  src: url('/theme/font/veteran_typewriter.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
span.typewriter {
  font-family: 'typewriter', Fallback, sans-serif;
  line-height: 12px;
}
a {
  color: #305ea8;
}
.btn-primary {
  background-color: #305ea8;
  border-color: #305ea8;
}
span.sf-red {
  color: #f00;
}
span.sf-blue {
  color: #305ea8;
}
div.notice, div.warning {
  width: 100%;
  text-align: center;
  clear: both;
  margin: 12px 0px;
  border: solid 2px #444;
  background-color: #ddd;
}
div.notice span.notice {
  color: #305ea8;
  font-size: 24px;
  font-weight: bold;
}
div.warning span.warning {
  color: #f00;
  font-size: 24px;
  font-weight: bold;
}

/* Lightbox Arrows */
div.ekko-lightbox-nav-overlay span {
  color: #343a40;
}

/* Edit Mode Formatting */
div.edit-mode {
  display: none;
}

/*****************************************************************************
 * Tables in user-supplied content, e.g. pages/items/reviews.
 ****************************************************************************/
table.wide {
  width: 95%;
  border-collapse: collapse;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid #212529;
  margin-bottom: 20px;
}
table.wide td {
  vertical-align: top;
  border: 1px solid #212529;
  padding: 4px;
}

/*****************************************************************************
 * Popover
 ****************************************************************************/
a.popper { 
  color: #305ea8 !important;
  border-bottom: 1px dashed #305ea8; 
  text-decoration: none; 
}

/*****************************************************************************
 * Thumbnails
 ****************************************************************************/

/* Classes for the thumb groups that wrap one or more thumbs. */
div.thumb_group_left {
  clear: left;
  float: left;
  margin-right: 6px;
}
div.thumb_group_right {
  clear: right;
  float: right;
  margin-left: 6px;
}
div.thumb_group_vertical img.inline_thumb,
div.thumb_group_vertical div.issue_no_thumb {
  display:block;
}
div.thumb_group_left img.inline_thumb,
div.thumb_group_left div.issue_no_thumb {
}
div.thumb_group_right img.inline_thumb,
div.thumb_group_right div.issue_no_thumb {
}

/* Classes for the thumbs inside a group. */
img.inline_thumb {
  box-sizing: content-box;
  border: 2px solid #212529;
  margin-bottom: 3px;
}

/* Special <div> we use instead of an <img> if we have no thumb. */
div.issue_no_thumb {
  box-sizing: content-box;
  border: 2px solid #212529;
  margin-bottom: 3px;  
  width: 72px;
  height: 90px;
  text-align: center;
  background-color: #ddd;  
  padding-top: 20px;
}

/* Little visual tweak for thumbs in intro text. */
div.intro img.inline_thumb {
  margin-bottom: 1rem; /* To match <p> margin-bottom. */
}

/*****************************************************************************
 * Navbar
 ****************************************************************************/

#nav-text1, #nav-text2 {
  padding-top: 0px;
  padding-bottom: 0px;
}
#nav-icon {
  padding-right: 6px;
}
@media (max-width: 767px) {
  #nav-icon, #nav-text2 {
    display: none;
  }
  body {
    padding-top: 56px;
  }
}
#cookieAlert {
  position: absolute;
  right: 4px;
  top: -4px;
}
#cookieAlert a {
  font-size: 10px;
  color: #fff;
}
div.dropdown-menu {
  min-width: 120px;
}
#edit-mode { /* Edit Toggle Checkbox */
  position: relative;
  top: 2px;
}

/*****************************************************************************
 * Card Tweaks
 ****************************************************************************/

div.card {
  border-color: #212529;
}
h6.card-title {
  color: #fff;
  background-color: #212529;
  padding: 6px 6px;
  margin: 0px;
}
h6.card-title a {
  color: #fff;
}
div.card-body {
  padding: 6px 6px;
}
div.row div.col-md-4 div.card {
  height: calc(100% - 1.5rem);
}
/* Paragraphs inside cards are packed much closer together than normal. */
div.card-body p {
  margin-bottom: 4px;
}
div.card-body p:last-child {
  margin-bottom: 0px;
}

/*****************************************************************************
 * Master is a High-Visibility card, in full-width or 1/3 width.
 ****************************************************************************/

div.card.master3 {
  line-height: 1.25;
  min-height: calc(100% - 1rem);
}
div.card.master {
  background-color: #ddd;
}
div.card.master p {
  font-size: 12px;
}
div.card.master3 {
  text-align: center;
}

/*****************************************************************************
 * Quick Links and Bylines cards
 ****************************************************************************/

div.topcards {
  background-color: #ddd;
  border-width: 2px;
  font-size: 15px;
}

/*****************************************************************************
 * General Purpose Blockquotes.
 ****************************************************************************/

blockquote {
  border-left: 10px solid #ddd;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\201C""\201D";
}
blockquote:before {
  color: #ddd;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 16px;
  vertical-align: -0.4em;
}
blockquote p:nth-child(1) {
  display: inline;
}

/*****************************************************************************
 * Sidebar.
 ****************************************************************************/

div.sidebar {
  max-width: 380px
}
div.sidebar div.card {
  font-size: 14px;
}

div.splash-audio { background: repeating-linear-gradient(transparent, transparent 2px, grey 3px, grey 3px), url('/theme/splash/audio-348x160.jpg'); }
div.splash-beyond { background: repeating-linear-gradient(transparent, transparent 2px, grey 3px, grey 3px), url('/theme/splash/beyond-348x160.jpg'); }
div.splash-cards { background: repeating-linear-gradient(transparent, transparent 2px, white 3px, white 3px), url('/theme/splash/cards-348x160.jpg'); }
div.splash-characters { background: repeating-linear-gradient(transparent, transparent 2px, white 3px, white 3px), url('/theme/splash/characters-348x160.jpg'); }
div.splash-comics { background: repeating-linear-gradient(transparent, transparent 2px, white 3px, white 3px), url('/theme/splash/comics-348x160.jpg'); }
div.splash-credits { background: repeating-linear-gradient(transparent, transparent 2px, grey 3px, grey 3px), url('/theme/splash/credits-348x160.jpg'); }
div.splash-edit { background: repeating-linear-gradient(transparent, transparent 2px, white 3px, white 3px), url('/theme/splash/edit-348x160.jpg'); }
div.splash-fail { background: repeating-linear-gradient(transparent, transparent 2px, white 3px, white 3px), url('/theme/splash/fail-348x160.jpg'); }
div.splash-fans { background: repeating-linear-gradient(transparent, transparent 2px, white 3px, white 3px), url('/theme/splash/fans-348x160.jpg'); }
div.splash-fastfood { background: repeating-linear-gradient(transparent, transparent 2px, grey 3px, grey 3px), url('/theme/splash/fastfood-348x160.jpg'); }
div.splash-fun { background: repeating-linear-gradient(transparent, transparent 2px, white 3px, white 3px), url('/theme/splash/fun-348x160.jpg'); }
div.splash-faq { background: repeating-linear-gradient(transparent, transparent 2px, white 3px, white 3px), url('/theme/splash/faq-348x160.jpg'); }
div.splash-items { background: repeating-linear-gradient(transparent, transparent 2px, white 3px, white 3px), url('/theme/splash/items-348x160.jpg'); }
div.splash-kafka { background: repeating-linear-gradient(transparent, transparent 2px, white 3px, white 3px), url('/theme/splash/kafka-348x160.jpg'); }
div.splash-letters { background: repeating-linear-gradient(transparent, transparent 2px, white 3px, white 3px), url('/theme/splash/letters-348x160.jpg'); }
div.splash-locations { background: repeating-linear-gradient(transparent, transparent 2px, white 3px, white 3px), url('/theme/splash/locations-348x160.jpg'); }
div.splash-lookback { background: repeating-linear-gradient(transparent, transparent 2px, white 3px, white 3px), url('/theme/splash/lookback-348x160.jpg'); }
div.splash-mail { background: repeating-linear-gradient(transparent, transparent 2px, white 3px, white 3px), url('/theme/splash/mail-348x160.jpg'); }
div.splash-main { background: repeating-linear-gradient(transparent, transparent 2px, white 3px, white 3px), url('/theme/splash/main-728x160.jpg'); }
div.splash-ncrl { background: repeating-linear-gradient(transparent, transparent 2px, white 3px, white 3px), url('/theme/splash/ncrl-348x160.jpg'); }
div.splash-news { background: repeating-linear-gradient(transparent, transparent 2px, white 3px, white 3px), url('/theme/splash/news-348x160.jpg'); }
div.splash-podcast { background: repeating-linear-gradient(transparent, transparent 2px, white 3px, white 3px), url('/theme/splash/podcast-348x160.jpg'); }
div.splash-powers { background: repeating-linear-gradient(transparent, transparent 2px, grey 3px, grey 3px), url('/theme/splash/powers-348x160.jpg'); }
div.splash-rave { background: repeating-linear-gradient(transparent, transparent 2px, white 3px, white 3px), url('/theme/splash/rave-348x160.jpg'); }
div.splash-search { background: repeating-linear-gradient(transparent, transparent 2px, grey 3px, grey 3px), url('/theme/splash/search-348x160.jpg'); }
div.splash-shows { background: repeating-linear-gradient(transparent, transparent 2px, grey 3px, grey 3px), url('/theme/splash/shows-348x160.jpg'); }
div.splash-software { background: repeating-linear-gradient(transparent, transparent 2px, grey 3px, grey 3px), url('/theme/splash/software-348x160.jpg'); }
div.splash-staff { background: repeating-linear-gradient(transparent, transparent 2px, white 3px, white 3px), url('/theme/splash/staff-348x160.jpg'); }
div.splash-transformations { background: repeating-linear-gradient(transparent, transparent 2px, white 3px, white 3px), url('/theme/splash/transformations-348x160.jpg'); }
div.splash-upcoming { background: repeating-linear-gradient(transparent, transparent 2px, white 3px, white 3px), url('/theme/splash/upcoming-348x160.jpg'); }
div.splash-want { background: repeating-linear-gradient(transparent, transparent 2px, white 3px, white 3px), url('/theme/splash/want-348x160.jpg'); }
div.splash {
  height: 160px;
  background-position: center top; 
}
div.splash span.splash_name {
  color: #fff;
  display: block;
  padding: 10px 10px;
  font-size: 32px;
  transform: rotate(-10deg);
}
div.splash-transformations span.splash_name {
  padding: 30px 10px;
}
div.splash-fun span.splash_name,
div.splash-credits span.splash_name {
  color: #000;
  font-size: 24px;  
  padding: 5px 10px;  
}
div.splash-beyond span.splash_name,
div.splash-kafka span.splash_name {
  color: #000;
  font-size: 24px;  
  padding: 20px 10px;
}
div.splash-comics span.splash_name,
div.splash-faq span.splash_name {
  color: #000;
  font-size: 40px;
}
div.splash-podcast span.splash_name {
  color: #000;
}
div.splash-staff span.splash_name {
  color: #000;
}
div.splash-search span.splash_name {
  color: #f00;
  font-size: 40px;
}

span.link_label {
  font-weight: bold;
}
span.link_none {
  color: #444;
  font-style: italic;
}

/*****************************************************************************
 * Front Page
 ****************************************************************************/

div.review_teaser_card {
  padding-left: 0px;
  padding-right: 0px;
}
div.review_teaser_card div.card-body {
  text-align: center;
}
div.review_teaser_card div.card-body {
  padding-left: 0px;
  padding-right: 0px;
}
div.review_teaser,
div.article_teaser {
  display: inline-block;
  vertical-align: top;
  text-align: center;
}
div.review_teaser {
  width: 116px;
}
div.article_teaser {
  width: 80px;
}

div.review_teaser div.inner,
div.article_teaser div.inner {
  display: inline-block;
  margin-left: auto;  
  margin-right: auto;  
  margin-bottom: 0px;
}
div.review_teaser div.inner div,
div.article_teaser div.inner div {
  float: left;
}
div.review_teaser div.notes {
  min-height: 80px; 
  width: 11px;
}
div.review_teaser div.notes ul {
    margin: 0;
    padding: 0;
    -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
         -o-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: rotate(-90deg) translate(-110px, 0px);
       -moz-transform: rotate(-90deg) translate(-110px, 0px);
         -o-transform: rotate(-90deg) translate(-110px, 0px);
            transform: rotate(-90deg) translate(-110px, 0px);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
div.review_teaser div.notes ul li {
  width: 110px;
  color: #888;
  font-size: 10px;
  list-style: none;    
  text-align: right;
}
div.review_teaser div.notes ul li a {
  color: #888;
  text-decoration: none;
}
div.review_teaser div.notes.lookback ul li a {
  /*color: #b81010;  */
  color: #212529;  
}
div.review_teaser div.review,
div.article_teaser div.article {
  position: relative;
  display: inline-block;
}
div.review_teaser div.review img,
div.article_teaser div.article img {
  border: 1px solid #212529;  
  max-width: 92px;
}
div.review_teaser.new div.review:after,
div.article_teaser.new div.article:after {
    position: absolute;
    background-color: #fff;
    opacity: 0.75;
    font-size: 12px;
    font-weight: bold;
    content: "New";
    color: #f00;
    /*top: 3px; -- use this instead to put "New" at the top right corner */
    bottom: 6px;
    right: 3px;
    padding: 2px 4px;
    border: 1px solid #212529;
    border-radius: 8px 8px 8px 8px; 
}

div.review_teaser p, 
div.article_teaser p {
  /*clear: left;*/
  text-align: center;
  display: block;
  font-size: 11px;
  margin-left: 2px;
  margin-right: 2px;
  line-height: 1em;
}
div.review_teaser p {
  margin-top: -8px;
  margin-bottom: 8px;  
}
div.article_teaser p {
  margin-top: -6px;
  margin-bottom: 6px;  
}

div.review_teaser.new p a, 
div.article_teaser.new p a {
  /*color: #f00 !important;*/
  font-weight: bold !important;
}

/* Jiggery-Pokery to make these break nicely in responsive. */
@media (max-width: 1199px) {
}
@media (max-width: 991px) {
  div.review_teaser_col {
    max-width: 360px;
  }
  div.items_teaser_col {
    max-width: 360px;
  }
  div.review_teaser {
    width: 106px;
  }
  div.review_teaser div.review img {
    max-width: 82px;
  }  
  div.splash-main {
    background-position-x: left;
  }
}
@media (max-width: 767px) {
  div.review_teaser_col {
    max-width: none;
  }
  div.items_teaser_col {
    max-width: none;
  }
}
@media (max-width: 655px) {

}


h3.item_teaser {
  font-size: 17px;
  margin-bottom: 2px;  
}
p.item_teaser {
  font-size: 13px;
  margin-bottom: 2px;
}
p.item_teaser span.teaser_date {
  color: #888;
}
p.item_teaser.new a {
  /*color: #f00;*/
  font-weight: bold;
}
p.item_teaser.new a:after {
    /*position: absolute;*/
    background-color: #fff;
    opacity: 1;
    font-size: 12px;
    font-weight: bold;
    content: "New";
    color: #f00;
    /*top: 3px; -- use this instead to put "New" at the top right corner */
/*    bottom: 6px;
    right: 3px;
*/    padding: 2px 4px;
    margin-left: 2px;

    border: 1px solid #212529;
    border-radius: 8px 8px 8px 8px; 
}


/*****************************************************************************
 * Special Forms - e.g. Mail, Site Search
 ****************************************************************************/

p.mail_alert {
  color: #f00;
  font-weight: bold;
  margin-bottom: 6px;
} 
table.mail_form td select {
  height: 30px;
}
table.mail_form th {
  padding-top: 4px;
  text-align: right;
  vertical-align: top;
}

/*****************************************************************************
 * Credits Index
 ****************************************************************************/
table.credits_index td {
  padding-top: 0px;
  padding-bottom: 0px;
}

/*****************************************************************************
 * Issue Level Toggles
 ****************************************************************************/

#level_toggles_show {
  margin-bottom: 4px;
}
#level_toggle_panel {
  float: right;
  padding: 0px;
}
#level_toggles {
  border: 2px solid #212529;
  background-color: #ddd;
  display: none;
}
#level_toggle_panel input {
  vertical-align: middle;
  margin: 0px 0px 0px 2px;
}
#level_toggle_panel p {
  font-size: 14px;
  line-height: 1.1;
  margin: 0px;
  padding: 2px 0px;
}

/*****************************************************************************
 * Title/Issue Searching
 ****************************************************************************/

#file-uploader {
  display: inline-block;
  max-width: 50%;
}
div.search_outer {
  padding: 10px;
  padding-right: 8px;
}
div.text_searching {
  display: inline-block;
  vertical-align: top;
}
#search_close {
  font-size: 20px;
  position: absolute;
  right: 2px;
  top: 0px;
  cursor: pointer;
  display: none;
}
ul.qq-upload-list {
  padding-left: 0px;
  margin-bottom: 0px;
}


#results_div {
  overflow: auto;
}
div.results_item {
  margin-bottom: 4px;
  margin-left: 4px;
  width: calc(50% - 4px);
  float: left;
  font-size: 12px;
  min-height: 114px;
}
div.results_item p {
  margin: 0px;
}
div.results_image {
  float: left;
  margin-right: 4px;
  box-sizing: content-box;
  border: 2px solid #212529;  
}
div.results_header {
  overflow: auto;
  font-weight: bold;
  font-size: 14px;
  padding: 4px;
}
div.results_nav {
  float: left;
  color: #aaa;
}
div.results_message {
  float: right;
  text-align: right;
}


/*****************************************************************************
 * Issue Cards
 ****************************************************************************/

div.issue_tag {
  float: left;
  display: block;
  background-color: #ddd;
  border: 2px solid #212529;
  margin: 0px 6px 2px 0px;  
  padding: 0px 4px;
  font-size: 14px;
}
div.issue_bonus {
  float: left;
  width: 100%;
  font-size: 14px;
  /*border-top: 1px solid #888;*/
}
span.issue_info_key {
  font-weight: bold;
}
span.issue_bonus_key {
  font-weight: bold;
  font-style: italic;
}
div.vinfo {
  font-weight: bold;
  font-style: italic;
  font-size: 14px;
}
div.issue_card {
  clear: both;
}
div.issue_multi, 
div.issue_component {
  background-color: #ddd;
}
div.issue_multi h6.card-title,
div.issue_component h6.card-title {
  background-color: #666;
}

/* Alt Sub-Entries */
div.alt_issue {
  float: left;
  width: calc(50% - 4px);
  padding-top: 2px;
  padding-right: 0px;
  margin-top: 2px;
  margin-right: 4px;
  border-top: 6px solid #888;
}
div.alt_issue div.vinfo {
  font-size: 12px;
}
div.alt_issue div.issue_tag {
  font-size: 12px;
  padding: 0px 2px;
}
div.alt_issue table.issue_credits td {
  font-size: 12px;
}
div.alt_issue_first {
  clear: left;
}

/* WIDTH FOR ISSUE DIVS to make everything wrap nicely (non-Compact) */
div.issue_detail, div.issue_more {
  float: left;
  min-width: 596px; /* = 716 - (114 + 6) */
  font-size: 14px;
}
div.alt_issue div.issue_detail, div.alt_issue div.issue_more {
  float: left;
  min-width: 234px;  /* = 354 - (114 + 6) */
}
@media (max-width: 1199px) {
  div.issue_detail, div.issue_more {
    min-width: 475px;  /* = 595 - (114 + 6) */
  }
  div.alt_issue div.issue_detail, div.alt_issue div.issue_more {
    float: left;
    min-width: 171px;  /* = 293 - (114 + 6) */
  }
}
@media (max-width: 991px) {
  div.issue_more, div.issue_detail {
    min-width: 546px; 
  }
  /* TODO: Add min-width for alt_issue divs */
}
@media (max-width: 767px) {
  div.issue_more, div.issue_detail {
    min-width: 376px;
  }
  div.alt_issue div.issue_detail, div.alt_issue div.issue_more {
    min-width: 122px;
  }
}
@media (max-width: 655px) {
  div.issue_more, div.issue_detail {
    min-width: 376px;
  }
  div.alt_issue {
    width: 100%;
  }
  div.alt_issue div.issue_detail, div.alt_issue div.issue_more {
    min-width: 376px;
  }
}

/* Credits & Reviews Tables */
table.issue_credits, table.issue_reprints {
  border-left: 6px groove #aaa;
  border-spacing: 0px;
  /* max-width: 600px; */ /* = 716 - 6x2 - (110 + 2+2+6) */
  /* Let's try 100% instead, the 600px doesn't always give good results. */
  max-width: 100%;
}
@media (max-width: 992px) {
  table.issue_credits, table.issue_reprints {
    max-width: 100%;
  }
}
table.issue_credits td, table.issue_reprints td {
  vertical-align: top;
  font-size: 14px;
  padding: 0px;
}
table.issue_credits td.credits_job, 
table.issue_reprints td.reprints_type {
  text-align: right;
  font-weight: bold;
}
table.issue_credits td.credits_job, 
table.issue_reprints td.reprints_type,
table.issue_credits td.credits_note {
  padding-left: 4px;
  padding-right: 4px;
}

/* Gallery Stuff */
div.gallery_wrapper {
  display: inline-block;
}
div.gallery_image {
  display: block;
  width: 100%;
}
div.gallery_title {
  display: block;
  width: 100%;
  text-align: center;
  font-style: italic;
  font-size: 12px;
}
div.gallery_group {
  display: inline;
  float: left;
  margin-right: 6px;
}

/*****************************************************************************
 * COMPACT
 ****************************************************************************/

/* Special 1/3 (or 1/2) width tweaks for Cards and such. */
/* We go ahead and trample everything from up above. */
div.issue_compact h6.card-title {
  font-size: 80%;
  padding: 2px 4px;
}
div.issue_compact table.issue_credits td,
div.issue_compact table.issue_reprints td {
  font-size: 80%;
  padding-left: 0px;
  padding-right: 0px;
}
div.issue_compact table.issue_reprints,
div.issue_compact table.issue_credits {
  border: none;
}
div.issue_compact div.issue_tag {
  font-size: 80%;  
}
div.issue_compact div.issue_info {
  font-size: 80%;  
}
div.issue_compact div.alt_issue {
  width: 100%;
}
div.vinfo_wrap {
  width: 16px;
  height: 114px;
  float: left;
}
div.issue_compact div.vinfo {
  display: inline-block;
  margin: 0;
  padding: 0;
  line-height: 1;
  text-align: right;
  font-size: 80%;
  height: 16px;
  width: 114px;
    -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
         -o-transform-origin: 0 0;
            transform-origin: 0 0;
    -webkit-transform: rotate(-90deg) translate(-110px, 0px);
       -moz-transform: rotate(-90deg) translate(-110px, 0px);
         -o-transform: rotate(-90deg) translate(-110px, 0px);
            transform: rotate(-90deg) translate(-110px, 0px);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);  
}

/* Go to 2 columns instead of 3. */
@media (max-width: 1199px) {
  div.compact_col.col-md-4 {
    flex-basis: 50%;
    max-width: 50%;
  }
}
@media (max-width: 991px) {
  div.compact_col.col-md-4 {
    flex-basis: 33.3%;
    max-width: 33.3%;
  }
}
@media (max-width: 767px) {
  div.compact_col.col-md-4 {
    flex-basis: 50%;
    max-width: 50%;
  }
}
/*@media (max-width: 655px) {
  div.compact_col.col-md-4 {
    flex-basis: 100%;
    max-width: 100%;
  }
}*/

/*****************************************************************************
 * CHRONOLOGY
 ****************************************************************************/
table.chronology_index {
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  width: calc(100% - 40px);
}
table.chronology_index tbody {

}
table.chronology_index td {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}
ul.chronology_year li div {
  font-size: 12px;
}
ul.chronology_year li div.levelST {
  font-style: italic;
}

/*****************************************************************************
 * PERSON CREDITS PAGES
 ****************************************************************************/
table.person_credits {
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  width: calc(100% - 40px);  
}
table.person_credits td.person_date {
  font-weight: bold;
  text-align: center;
  width: 100px;  
}
span.credits_name {
  font-style: italic;
  font-weight: bold;
}

/*****************************************************************************
 * COMICS INDEX
 ****************************************************************************/

div.section_card p {
  margin-bottom: 0px;
}
div.section_card div.card-body {
  padding: 2px;
}
div.section_card table {
  margin-bottom: 0px;
}
div.section_card table th, 
div.section_card table td {
  padding-top: 6px;
  padding-bottom: 6px;
}
div.section_card table th {
  width: 33%;
  text-align: right;
}
div.section_card table tr:first-child th,
div.section_card table tr:first-child td {
  border-top: none;
}

/*****************************************************************************
 * CHECKLISTS
 ****************************************************************************/

table.check_table {
  border: 2px solid #212529;
  width: 100%;
  margin-bottom: 20px;
}
table.check_table td {
  border: 2px solid #212529;
  padding: 2px;
}
table.check_table td.check_issue {
  background-color: #ddd;
  width: 10%;
}
table.check_table td.check_title {
  font-weight: bold;
  padding-left: 10px;
}
table.check_table td.check_oneshot {
  font-size: 14px;
}

/*****************************************************************************
 * ARTICLE - Index
 ****************************************************************************/

div.article_index {
  padding-bottom: 10px;
}
span.article_letter {
  font-size: 24px;
  border: 2px solid #212529;
  margin: 2px;
  padding: 2px;
}

/*****************************************************************************
 * ARTICLE - Internal
 ****************************************************************************/

/* Article File Photo & Traits Bundles */
div.file_photo {
  margin-bottom: 10px;
}
div.file_photo_wrapper {
  box-sizing: content-box;
  border: 1px solid #000;
  background-color: #343a40;
  padding-left: 6px;
  padding-right: 6px;
  padding-top: 6px;
  width: 185px;
}
div.file_photo_wrapper img {
  box-sizing: content-box;
  border: 1px solid #000;
  width: 183px;
  height: 179px;
}
div.file_photo_label {
  color: #fff;
  text-align: center;
  width: 183px;
  transform: rotate(-2deg);
}
table.article_traits td.trait_title {
  text-align: right;
  white-space: nowrap;
  vertical-align: top;
  padding-top: 3px;
  font-style: italic;
  font-weight: bold;
}
table.article_traits td.trait_content {
  vertical-align: top;
  overflow: hidden;
}
table.article_traits td.trait_content p {
  margin: 2px 2px 2px 4px; 
}

/* Article Appearances Table */
table.article_apps th, 
table.article_apps td {
  padding: 2px 6px; 
}

table.article_apps th.app_date, 
table.article_apps td.app_date {
  text-align: right;
  white-space: nowrap;
}
table.article_apps td.app_note {
  font-style: italic;
}
table.article_apps {
  margin-bottom: 20px;
}

div.article_gallery {
  display: block;
  margin-bottom: 20px;
}

/*****************************************************************************
 * ITEM - Index
 ****************************************************************************/

span.item_image_index {
  display: block;
  font-size: 14px;
}
div.item_image_thumb img {
  box-sizing: content-box;
  border: 2px solid #212529;  
}
div.item_image_thumb {
  text-align: center;  
}
span.item_text_index {
  display: block;
}

/*****************************************************************************
 * ITEM - Letter Formats
 ****************************************************************************/

h5.letter_from {
  border-top: 2px solid #212529;
  font-weight: bold;
  margin-top: 8px;
  clear: both;
}
h5.letter_from:not(:first-of-type) {
  margin-top: 30px;
}
div.letter_request {
  border-left: 10px solid #212529;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\201C""\201D";
}
div.letter_request:before {
  color: #212529;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 16px;
  vertical-align: -0.4em;
}
div.letter_request p:nth-child(1) {
  display: inline;
}
div.letter_request p:nth-child(2) {
  margin-top: 1em;
}
div.letter_response {
  font-style: italic;
  margin-bottom: 10px;
}

/* Block Quote inside Letter looks dumb... */
div.letter_request blockquote {
  padding: none;
  margin: 0 0 1rem;
  border-left: none;  
  quotes: none;
  font-style: italic;
  color: #666;
}
div.letter_request blockquote:before {
  content: none;
}
div.letter_request blockquote p {
  display: block;
}

/*****************************************************************************
 * ITEM - Vote Results
 ****************************************************************************/

table.vote_results {
  border-spacing: 0;
  margin-bottom: 12px;
}
table.vote_results th {
  text-align: center;
  vertical-align: bottom;
  font-weight: bold;
}
table.vote_results td {
  padding: 2px 6px;
}
table.vote_results td.vote_percent {
  font-weight: bold;
  vertical-align: top;
}
table.vote_results td.vote_percent span.percent_sign {
  color: #888;
  font-weight: normal;
}
table.vote_results td.vote_question {
  vertical-align: top;
  font-style: italic;
}

/*****************************************************************************
 * STAFF - Profile PAges
 ****************************************************************************/

div.staff_card img {
  margin-right: 6px;
}

/*****************************************************************************
 * SMURF - Reading index
 ****************************************************************************/

table.smurf_table {
  margin-bottom: 20px;
  width: 100%;  
}
table.smurf_table th {
  vertical-align: top;
  padding-top: 6px;
  padding-right: 12px;
}
table.smurf_table td {
  padding-top: 6px;
}
table.smurf_table td p {
  margin-bottom: 0px;
}
table.smurf_table td div.smurf_issue {
  clear: left;
  font-weight: bold;
}
table.smurf_table td div.smurf_note {
  vertical-align: top;
  font-style: italic;
  margin-left: 20px;
  font-size: 14px;
}
table.smurf_table td div.smurf_note img {
  float: left;
  margin-right: 6px;
}
table.smurf_table td div.gallery_wrapper {
  border: solid 2px #444;
  background-color: #ddd;
}
table.smurf_table td div.smurf_complete div.gallery_wrapper {
  border: solid 2px #444;
  background-color: #222;
  color: #fff;
}
table.smurf_table td div.gallery_image {
  min-width: 110px;
  text-align: center;
}
div.smurf_tag {
  float: right;
  display: block;
  background-color: #ddd;
  border: 2px solid #212529;
  margin: 0px 0px 2px 6px;  
  padding: 0px 4px;
  font-size: 14px;
}