.fa {
  padding-right: 5px;
}

.image-credit-wrapper {
overflow: hidden;
position: relative;
max-width: 1400px;
}

.image-credit-wrapper .image-credit {
position: absolute;
right: 0px;
bottom: 0px;
margin-bottom: 6px;
}

.image-credit {
background: rgba(0,0,0,.5);
border-top-left-radius:3px;
color: #ccc;
display: inline-block;
font-size: 11px;
font-family: helvetica;
font-weight: 300;
padding: 5px 8px;
position: absolute;
bottom: 0;
right: 0;
}

.image-credit a {
  color: #ccc;
  text-decoration: none;
}

.image-credit a:hover {
  color: #ccc;
  text-decoration: underline;
}

.hidden {
    position:absolute;
    left:-10000px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
}

#blog-hero h1 {
    text-shadow: 1px 1px 4px rgba(34,34,34,0.6);
}

#blog-hero h2 {
    text-shadow: 1px 1px 4px rgba(34,34,34,0.6);
}

#blog-hero h3 {
    text-shadow: 1px 1px 4px rgba(34,34,34,0.6);
}

#blog-hero #to-start {
    text-shadow: 1px 1px 4px rgba(34,34,34,0.6);
}

img.left {
  display:inline;
  float:left;
  margin:1rem 15px 5px 0;
  max-width: 50%;
}

img.right {
  float:right;
  margin:1rem 0 5px 15px;
  max-width: 50%;;
}

img.center {
  display:block;
  margin:10px
  auto;
}

figure.image-caption {
    text-align: center;
    margin: 1rem;
}

figure.image-caption figcaption {
    opacity: 0.7;
    font-size: 90%;
}

figure.figure-right {
    float:right;
    margin:5px 0 5px 15px;
    max-width: 50%;
}

figure.figure-left {
    float: left;
    margin:5px 15px 5px 0;
    max-width: 50%;
}

figure.caption-left figcaption {
    text-align: left;
}

figure.caption-right figcaption {
    text-align: right;
}

h1.sections-page-title-template, h2.sections-page-title-template, h3.sections-page-title-template, h4.sections-page-title-template, h5.sections-page-title-template, h6.sections-page-title-template {
    margin-top: 0rem;
}

.sections-page-title {
    margin-top: -2rem;
}

/* Sections side navigation: indent each item rather than its link, so long titles that wrap stay lined up - hibbittsdesign.org */
#sections-nav .nav .nav-item {
    padding-left: 0.4rem;
}

#sections-nav .nav .nav-item a {
    padding-left: 0;
}

.bricklayermodulars {
    padding-right: 25px;
}

.blogitem__readingtime {
  padding-left: 10px;
}

/* Markdown tables, in Spectre's standard table style (Quark only styles tables given the "table" class) - hibbittsdesign.org */
#body-wrapper table:not([class]) {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  margin-bottom: 1.2rem;
}

#body-wrapper table:not([class]) th {
  text-align: left;
}

#body-wrapper table:not([class]) td,
#body-wrapper table:not([class]) th {
  border-bottom: 0.05rem solid #e7e9ed;
  padding: 0.6rem 0.4rem;
}

#body-wrapper table:not([class]) th {
  border-bottom-width: 0.1rem;
}

/* The Git Sync link and Creative Commons license inside the content on standard, blog and guide pages, centred
   (Location of Git Sync Link: Page) - hibbittsdesign.org */
.page-extras {
  margin-top: 1.5rem;
  text-align: center;
}

.page-extras .gitrepo-link-note p {
  margin-bottom: 0.5rem;
}

/* the Git Sync link note is quiet, like the attribution, so it doesn't compete with the page content: muted
   (theme-dark.css sets its Dark Mode colour), underlined only on hover, with a clear outline for keyboard focus */
.gitrepo-link-note {
  color: #667189;
}

.gitrepo-link-note a {
  color: inherit;
  text-decoration: none;
}

.gitrepo-link-note a:hover {
  text-decoration: underline;
}

.gitrepo-link-note a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* "Skip to content": hidden until it gets keyboard focus, then shown at the top left. While hidden it's clipped to an
   invisible 1px box (the usual way to hide text from view but not from screen readers), which works in every browser.
   ".skip-link:focus" is listed too because Quark's own a:focus style would otherwise recolour and underline it, and
   a border is used because Quark removes shadows from focused links */
.skip-link,
.skip-link:focus {
    position: absolute;
    left: 1rem;
    top: 1rem;
    z-index: 1000;
    padding: 0.5rem 1rem;
    border: 2px solid #212529;
    border-radius: 0.3rem;
    background: #fff;
    color: #212529;
    font-weight: 600;
    text-decoration: none;
}

/* With the fixed header (header-fixed), the content "Skip to content" goes to (#start) stops below the header, not under it */
.header-fixed #start {
    scroll-margin-top: 5rem;
}

.skip-link:not(:focus) {
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* [topics] shortcode: the A-Z index and its letter headings - hibbittsdesign.org
   Semi-transparent greys are used so the same rules suit light and dark modes */
/* the letters start at the left and wrap onto a new line when needed (justify-content is set because
   Quark 2 spaces out the items in a nav across its full width) */
.topics-index {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.3rem;
    margin: 0 0 1.5rem;
}

/* each letter is a box about 36px square - comfortably above the 24px minimum target size (WCAG 2.2),
   so it's easy to tap on a phone or click with less precise pointing. The letters are large and bold
   (about 19px), which counts as large text, so the theme's link colour has enough contrast (3:1) */
.topics-index a,
.topics-index .topics-index-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    min-height: 2.25rem;
    margin: 0;
    padding: 0 0.4rem;
    border: 1px solid rgba(127, 127, 127, 0.35);
    border-radius: 0.3rem;
    font-size: 1.2rem;
    text-decoration: none;
    font-weight: 700;
}

/* a clear outline around the letter that has keyboard focus (!important is needed because
   Quark Open Publishing's base theme removes focus outlines from links with !important) */
.topics-index a:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 2px;
}

/* a letter with no topics */
.topics-index .topics-index-empty {
    opacity: 0.35;
}

/* no accent bar above the letter headings (Quark 2 adds one to h2 headings) */
h2.topics-letter::before {
    display: none;
}

/* each letter heading, as a soft label; after jumping to it from the index, it stops below a fixed header */
h2.topics-letter {
    scroll-margin-top: 5rem;
    display: inline-block;
    min-width: 2.25em;
    padding: 0.2em 0.6em;
    margin: 1.5rem 0 0.5rem;
    border-radius: 0.3rem;
    background: rgba(127, 127, 127, 0.16);
    font-size: 1.25rem;
    text-align: center;
}