/* Cheddar, ported from the classic custom CSS: the dark #414141 top bar and
   header band, green #7ea230 links, headings and buttons, the uppercase bold
   nav, the green "Log in" pill, the orange #e39812 staff comment header, and
   the Trade Gothic stack (the site's custom HTML still loads TradeGothic.css
   from getcheddar.com). Dropped: the 1170px widths, the card shadows, the
   big buttons, pagination, kb-search, flash and table rules for the classic
   markup, and the !important overrides. */

/* type and links */
body.tn-frontend {
  --tn-font: "TradeGothicLT", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --tn-link: #7ea230;
  --tn-link-hover: #5f7e1d;
}
.tn-frontend strong, .tn-frontend b,
.tn-frontend #content :is(h1, h2, h3), .tn-frontend #superheader #tender_nav, .tn-frontend #superheader .welcome {
  font-family: "TradeGothicLT-Bold", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
}
.tn-frontend #content :is(h1, h2, h3) { color: #7ea230; }
.tn-frontend #content .home-staff h2 { color: var(--tn-muted); }  /* the shell's small label stays grey */

/* green primary buttons: .btn, the old .gbutton, submits and the header's search button */
.tn-frontend :is(.btn, .gbutton, input[type=submit], #search button) { --tn-brand: #7ea230; --tn-brand-hover: #5f7e1d; }

/* the top bar: uppercase bold nav, the green "Log in" pill (their JS makes the whole pill a link) */
.tn-frontend #superheader #tender_nav { text-transform: uppercase; letter-spacing: .5px; }
.tn-frontend #superheader .welcome { margin: 0; padding: 6px 12px; font-size: 11px; line-height: 1.4; color: #fff; text-transform: uppercase; letter-spacing: .5px; background: #7ea230; border-radius: var(--tn-radius); cursor: pointer; }
.tn-frontend #superheader .welcome:hover { background: #5f7e1d; }
.tn-frontend #superheader .welcome a { color: #fff; opacity: 1; }
/* logged in: the account links on a darker rounded box, in green */
.tn-frontend #superheader #user_nav { margin: 6px 0; padding: 0 6px; background: #2d2d2d; border-radius: 6px; }
.tn-frontend #superheader #user_nav li a { padding: 7px 8px; color: #7ea230; }

/* the header band: dark like the top bar, edge to edge behind the logo; a white search field on it */
.tn-frontend #header {
  margin-bottom: 24px;
  background: #414141;
  box-shadow: 0 0 0 100vmax #414141;
  clip-path: inset(0 -100vmax);
}
.tn-frontend #search input.searchfield { color: #414141; background: #fff; border-color: #fff; }
.tn-frontend #search input.searchfield::placeholder { color: #8d8d8d; }

/* staff comments: an orange header bar with white text, an orange ring on the avatar */
.tn-frontend #content .comment-list > li.staffer:not(.internal) > .comment-header { color: #fff; background: #e39812; border-color: #e39812; }
.tn-frontend #content .comment-list > li.staffer:not(.internal) > .comment-header :is(.number, .number:hover, .author-name, .author-name a, .author-name a:hover, .idtag, .date),
.tn-frontend #content .comment-list > li.staffer:not(.internal) > .comment-header .idtag::before { color: #fff; }
.tn-frontend #content .comment-list > li.staffer:not(.internal) > .comment-header .admin-functions .action { color: rgba(255, 255, 255, .85); }
.tn-frontend #content .comment-list > li.staffer:not(.internal) > .comment-header .admin-functions .action em { color: inherit; }
.tn-frontend #content .comment-list > li.staffer:not(.internal) > .comment-header .admin-functions .action:hover { color: #fff; background: #c27e05; }
.tn-frontend .comment-list > li.staffer > .avatar { box-shadow: 0 0 0 2px var(--tn-surface), 0 0 0 4px #e39812; }

/* the table of contents their knowledge base articles use */
.tn-frontend ol.table_of_contents { padding: 15px; background: #efefef; border: 1px solid #d1d1d1; border-radius: var(--tn-radius); }
.tn-frontend .table_of_contents ol { margin: 3px 0; }
.tn-frontend .table_of_contents li { padding-bottom: 5px; font-size: 12px; font-weight: 700; }