/*****************************************************************************/
/*
/* Common
/*
/*****************************************************************************/

/* Global Reset */
* {
  margin: 0;
  padding: 0;
}

html, body { height: 100%; }

body {
  background-color: #fff;
  font-family: Helvetica, Arial, sans-serif;
  text-align: center;
}

h1 {
  font-size: 150%;
  clear: both;
}

h2 {
  font-size: 130%;
  clear: both;
}

h3, h4, h5, h6 {
  font-size: 115%;
}

h1 { margin-bottom: 1em; }
p { margin: 1em 0; }
ul { margin: 1em 0; }
li ul { margin: 0.2em 0; }
li { margin-left: 1em;}

a {
  color: #00a;
  text-decoration-skip-ink: none; /* Make underlines work properly in Chrome */
}
a:hover   { color: #000; }
a:visited { color: #a0a; }
/* Paywall icon adapted from http://publicicons.org/lock-icon/ */
a.ancestry, a.bna, a.oxdnb, a.tda {
  background: url("https://london-road-croydon.org/history/images/site/paywall-icon.png") no-repeat scroll right center transparent;
  padding-right: 15px;
}

/* The <div id="home"> stuff will all eventually be swapped to <main>. */
main, #home {
  margin-top: 1em;
}

main h1, #home h1 {
  padding-top: 1em;
}

/*****************************************************************************/
/*
/* Home
/*
/*****************************************************************************/

.latest-post-info {
  margin-top: -0.35em;
}

.latest-post-info .thumb {
  float: left;
  padding-right: 2em;
  margin-top: 0.35em;
}

@media (max-width: 529px) {
  .latest-post-info .thumb {
    float: none;
    margin: auto;
    width: 240px;
    padding-bottom: 1em;
  }

  .latest-post-info .post-link, .latest-post-info .excerpt {
    display: inline;
  }

  .latest-post-info .post-link:after {
    content: "\a0";
  }
}

.latest-post-info .post-link {
  padding-bottom: 1em;
}

.posts {
  list-style-type: none;
  margin-bottom: 2em;
}

.posts li {
  line-height: 1.75em;
  clear: both;
}

.posts .post-list-date {
  color: #595959;
  font-family: Monaco, "Courier New", monospace;
}

.posts .post-list-thumb {
  display: block;
  float: left;
  margin-right: 1em;
  margin-bottom: 0.5em;
}

.posts, .post-list-text {
  display: block;
  line-height: 1.5em;
}

@media (max-width: 669px) {
  .post-list-date-no-thumb {
    display: block;
  }
}

/*****************************************************************************/
/*
/* Site
/*
/*****************************************************************************/

/*****************************************************************************/
/*
/* Header
/*
/*****************************************************************************/

.header {
  background-color: #000;
  padding-left: 1em;
  padding-right: 1em;
}

.header a {
  font-weight: bold;
  text-decoration: none;
}

.title, .extras {
  display: inline-block;
}

  /* We don’t want the header to take up too much space on smaller screens.
  /* This doesn’t matter too much on most pages, but it really matters for
  /* the map. */

@media (max-width: 869px) {
  .title {
    margin-top: 0.4em;
    margin-bottom: 0.4em;
  }
  .extras, .extras a {
    padding-bottom: 0.5em;
  }
}

@media (min-width: 870px) {
  .title {
    margin-top: 1em;
    margin-bottom: 1em;
  }
  .extras, .extras a {
    padding-bottom: 1em;
  }
}

.header a {
  color: #aaa;
}

.header a:hover {
  color: #fff;
}

.extras a {
  margin-left: 1em;
}

.extras span.selected {
  display: inline-block;
  margin-left: 1em;
  font-weight: bold;
  color: #fff;
}

h1.title span.selected {
  color: #aaa;
}

/*****************************************************************************/
/*
/* Inline nav
/*
/*****************************************************************************/

.post-nav a {
  text-decoration: none;
  color: #595959;
}

.post-nav a:hover {
  color: #000;
}

.post-nav a.prev {
  float: left;
}

.post-nav a.next {
  float: right;
}

/*****************************************************************************/
/*
/* Columns
/*
/*****************************************************************************/

.left-bar, .right-bar {
  padding-top: 1.5em;
}

.left-bar-site-page, .right-bar-site-page {
  padding-top: 0;
  overflow: hidden;
}

@media (max-width: 869px) {
  .left-bar, .right-bar {
    display: none;
  }
}

@media (min-width: 870px) {
  .post-nav-top {
    display: none;
  }
  .post-title {
    margin-top: -0.7em;
  }
}

@media (min-width: 870px) {
  .main {
    float: left;
    width: 100%;
    display: inline; /* Needed for IE, according to http://alistapart.com/article/multicolumnlayouts */
  }

  .left-bar {
    float: left;
    position: relative;
  }

  .middle-bar {
    float: left;
    width: 100%;
    margin-right: -100%;
  }

  .right-bar {
    float: right;
    position: relative;
  }
}

@media (min-width: 1150px) {
  .main-wrapper {
    padding: 0 240px 0 240px;
  }

  .main {
    border-left: 240px solid #fff;
    border-right: 240px solid #fff;
    margin-left: -240px;
    margin-right: -240px;
  }

  .left-bar {
    width: 240px;
    margin-left: -240px;
  }

  .right-bar {
    width: 240px;
    margin-right: -240px;
  }

  .post-nav-margin img {
    width: 220px;
  }

  .left-bar .post-nav-margin {
    padding-left: 10px;
  }

  .right-bar .post-nav-margin {
    padding-right: 10px;
  }
}

@media (min-width: 970px) and (max-width: 1149px) {
  .main-wrapper {
    padding: 0 150px 0 150px;
  }

  .main {
    border-left: 150px solid #fff;
    border-right: 150px solid #fff;
    margin-left: -150px;
    margin-right: -150px;
  }

  .left-bar {
    width: 150px;
    margin-left: -150px;
  }

  .right-bar {
    width: 150px;
    margin-right: -150px;
  }

  .post-nav-margin img {
    width: 130px;
  }
}

@media (min-width: 870px) and (max-width: 969px) {
  .main-wrapper {
    padding: 0 100px 0 100px;
  }

  .main {
    border-left: 100px solid #fff;
    border-right: 100px solid #fff;
    margin-left: -100px;
    margin-right: -100px;
  }

  .left-bar {
    width: 100px;
    margin-left: -100px;
  }

  .right-bar {
    width: 100px;
    margin-right: -100px;
  }

  .post-nav-margin img {
    width: 80px;
  }
}

.post-nav-margin .text {
  margin-top: 0.5em;
  margin-left: 5px;
  margin-right: 5px;
}

.post-nav-margin .excerpt {
  padding-top: 0.5em;
  text-align: justify;
  font-size: 85%;
  color: #595959;
}

@media (max-width: 1149px) {
  .post-nav-margin .excerpt {
    display: none;
  }

  .post-nav-margin .text {
    margin-left: 10px;
    margin-right: 10px;
  }
}

.left-bar .post-nav-margin .post-link {
  text-align: left;
}

.right-bar .post-nav-margin .post-link {
  text-align: right;
}

/*****************************************************************************/
/*
/* Content
/*
/*****************************************************************************/

.content {
  text-align: left;
  max-width: 640px;
  margin: 1em auto 2em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  line-height: 1.5em;
}

h2.post-title {
  padding-top: 1em;
}

.meta {
  color: #595959;
}

h3.subsection {
  font-size: 130%;
  margin-top: 2.8em;
  margin-bottom: 1.2em;
}

h4.subhead, h4.margin-note {
  font-style: italic;
  font-weight: normal;
  color: #595959;
  float: left;
}

@media (min-width: 870px) {
  span.margin-note-right {
    float: right;
    clear: right;
  }

  span.margin-note-left {
    float: left;
    clear: left;
  }
}

@media (min-width: 1150px) {
  span.margin-note-right, span.margin-note-left {
    hyphens: none;
    width: 200px;
    margin-right: -240px;
    margin-left: -240px;
  }
}

@media (min-width: 970px) and (max-width: 1149px) {
  span.margin-note-right, span.margin-note-left {
    hyphens: none;
    width: 120px;
    margin-right: -150px;
    margin-left: -150px;
  }
}

@media (min-width: 870px) and (max-width: 969px) {
  span.margin-note-right, span.margin-note-left {
    hyphens: manual;
    width: 90px;
    margin-right: -100px;
    margin-left: -100px;
  }
}

@media (max-width: 869px) {
  span.margin-note-right::before, span.margin-note-left::before {
    content: " [in margin: ";
  }

  span.margin-note-right:after, span.margin-note-left:after {
    content: "] ";
  }
}

.photo-centre + h4.subhead, .photo-centre-pair + h4.subhead, .photo-centre-pair-portrait + h4.subhead, .photo-centre-pair-square + h4.subhead, .photo-centre-pair-andress + .photo-right + h4.subhead, .photo-centre + .photo-right + h4.subhead, .photo-centre + .photo-right-narrow + h4.subhead, .photo-right + .photo-right {
  margin-top: 1em;
}

/* Different breakpoints for these than for the photo stuff. */
@media (min-width: 1200px) {
  h4.subhead, h4.margin-note {
    font-size: 100%;
    margin-left: -260px;
    max-width: 245px;
  }
}

@media (min-width: 1130px) and (max-width: 1199px) {
  h4.subhead, h4.margin-note {
    font-size: 100%;
    margin-left: -210px;
    max-width: 195px;
  }
}

@media (min-width: 970px) and (max-width: 1129px) {
  h4.subhead, h4.margin-note {
    font-size: 80%;
    margin-left: -150px;
    max-width: 135px;
  }
}

@media (max-width: 969px) {
  h4.subhead, h4.margin-note {
    float: none;
    font-size: 100%;
    font-weight: lighter;
    padding-top: 0.4em;
  }

  h4.margin-note:before {
    content: "[in margin: ";
  }

  h4.margin-note:after {
    content: "]";
  }

  h4.subhead + p {
    margin-top: 0.2em;
  }
}

/* This doesn't quite fix the spacing problem when we have a centre photo
   directly after a subhead, but it helps a bit. */
@media (min-width: 970px) {
  h4.subhead + .xphoto-centre {
    padding-top: 0;
  }
}

blockquote.book, blockquote.interview, blockquote.legislation, blockquote.letter, blockquote.newspaper {
  margin-left: 2em;
}

blockquote.poem {
    display: flex;
    flex-direction: column;
    align-items: center;
}

blockquote + .photo-centre {
  margin-top: 2em;
}

.acknowledgements {
  clear: both;
  font-style: italic;
}

.acknowledgements cite {
  font-style: normal;
}

/*****************************************************************************/
/*
/* Footnotes
/*
/*****************************************************************************/

.ref {
  font-size: 80%;
  vertical-align: super;
  line-height: 0;
  white-space: nowrap;
}

.footnotes {
  clear: both;
  padding-top: 1em;
}

.footnotes li {
  padding-bottom: 1em;
}

.footnotes li p { margin-bottom: 0; }

/* Keep the two below in this order!  The second one targets Firefox (other
   browsers will ignore it). */
.footnotes li p:first-of-type { margin-top: -0.05em; }
@-moz-document url-prefix() {
  .footnotes li p:first-of-type { margin-top: -1.5em; }
}

/* The below is legacy stuff that I want to get rid of — just renumber them. */

li.five-a, li.twelve-a, li.thirteen-a, li.fourteen-a, li.fifteen-a, li.fifteen-b {
  list-style: none;
}

li.five-a:before {
  content: "5a. ";
  margin-left: -2em;
}

li.twelve-a:before {
  content: "12a. ";
  margin-left: -2em;
}

li.thirteen-a:before {
  content: "13a. ";
  margin-left: -2em;
}

li.fourteen-a:before {
  content: "14a. ";
  margin-left: -2em;
}

li.fifteen-a:before {
  content: "15a. ";
  margin-left: -2em;
}

li.fifteen-b:before {
  content: "15b. ";
  margin-left: -2em;
}

.footnotes ol {
  padding-top: 1em;
  padding-left: 0.5em;
}

/*****************************************************************************/
/*
/* Photos
/*
/*****************************************************************************/

.photo-centre, .photo-centre-pair, .photo-centre-pair-portrait, .photo-centre-pair-square {
  clear: both;
  margin: auto;
  padding-top: 1em;
}

.photo-switch-link {
  text-decoration: underline;
  color: #00a;
  cursor: pointer;
}

@media (min-width: 670px) {
  .photo-centre, .photo-centre .caption, .photo-centre-pair,
    .photo-centre-pair .caption {
    width: 640px;
  }
  .photo-centre-pair img {
    width: 310px;
  }
}

@media (min-width: 530px) and (max-width: 669px) {
  .photo-centre, .photo-centre .caption {
    width: 500px;
  }
}

@media (min-width: 350px) and (max-width: 529px) {
  .photo-centre, .photo-centre .caption {
    width: 320px;
  }
}

@media (max-width: 349px) {
  .photo-centre, .photo-centre .caption, .photo-centre-pair, .photo-centre-pair .caption, .photo-centre-pair-portrait, .photo-centre-pair-portrait .caption, .photo-centre-pair img {
    width: 240px;
  }
}

@media (min-width: 350px) and (max-width: 529px) {
  .photo-centre-pair, .photo-centre-pair img, .photo-centre-pair .caption {
    width: 320px;
  }
}

@media (min-width: 530px) and (max-width: 669px) {
  .photo-centre-pair {
    width: 500px;
  }
  .photo-centre-pair img {
    width: 240px;
  }
}

@media (min-width: 530px) {
  .photo-centre-pair-portrait {
    width: 500px;
  }
  .photo-centre-pair-image-left {
    float: left;
  }
  .photo-centre-pair-image-right {
    float: right;
  }
}

@media (min-width: 350px) and (max-width: 529px ) {
  .photo-centre-pair-portrait .photo-centre-pair-image-left, .photo-centre-pair-portrait .photo-centre-pair-image-right, .photo-centre-pair-portrait .caption {
    width: 240px;
    margin: auto;
  }
}

@media (min-width: 670px) {
  .photo-right, .photo-right-narrow, .photo-right-match-square-pair {
    clear: both;
    float: right;
    padding-left: 1em;
    padding-bottom: 0.2em;
  }
  .photo-right {
    width: 320px;
  }
  . photo-right-match-square-pair {
    width: 300px;
  }
  .photo-right-narrow {
    width: 205px;
  }
}

@media (min-width: 530px) and (max-width: 669px) {
  .photo-right, .photo-right-match-square-pair {
    clear: both;
    margin: auto;
    width: 500px;
  }
  .photo-right .photo-right-image, .photo-right-match-square-pair .photo-right-image {
    clear: both;
    margin: auto;
    width: 320px;
  }
  .photo-right .caption {
    margin: auto;
    width: 500px;
  }
  .photo-right-narrow {
    clear: both;
    float: right;
    padding-left: 1em;
    padding-bottom: 0.5em;
    width: 205px;
  }
}

@media (max-width: 529px) {
  .photo-right, .photo-right-narrow, .photo-right-match-square-pair {
    clear: both;
    margin: auto;
  }
  .photo-right, .photo-right-match-square-pair {
    width: 320px;
  }
  .photo-right-narrow {
    width: 205px;
  }
}

.photo-centre + .photo-right, .photo-centre-pair + .photo-right, .photo-centre-pair-portrait + .photo-right, .photo-centre-pair-andress + .photo-right, .caption + .photo-right-image, .photo-centre + .photo-right-narrow, .photo-centre-pair + .photo-right-narrow, .photo-centre-pair-portrait + .photo-right-narrow, .photo-right + h4.subhead + .photo-right {
  padding-top: 1.25em;
}

.photo-centre img, .photo-centre-pair img, .photo-centre-pair-portrait img, .photo-right img, .photo-right-narrow img, .photo-centre-pair-andress img, .post-nav-margin img {
  border: 1px solid #e0e0e0;
}

.no-border img {
  border: none !important;
}

.caption {
  text-align: left;
  font-size: 80%;
  clear: both;
}

/* Special cases for Andress Waddon New Road in 0018. */
@media (min-width: 670px) {
  .photo-centre-pair-andress {
    width: 640px;
  }
}

@media (max-width: 669px) {
  .photo-centre-pair-andress .photo-centre-pair-image-left {
    width: 323px;
    margin: auto;
    float: none;
  }
  .photo-centre-pair-andress .photo-centre-pair-image-right {
    width: 295px;
    margin: auto;
    float: none;
  }
  .photo-centre-pair-andress .caption {
    width: 320px;
    margin: auto;
  }
}

/* Pairs of square images are treated differently from non-square ones. */
@media (min-width: 670px) {
  .photo-centre-pair-square {
    width: 640px;
  }
}

@media (max-width: 669px) {
  .photo-centre-pair-square .photo-centre-pair-image-left,
  .photo-centre-pair-square .photo-centre-pair-image-right {
    width: 300px;
    margin: auto;
    float: none;
  }
  .photo-centre-pair-square .caption {
    width: 300px;
    margin: auto;
  }
}

/*****************************************************************************/
/*
/* PhotoSwipe image galleries
/*
/*****************************************************************************/

/* Fairly basic styling. */
div.photoswipe-gallery figure {
    margin: 10px;
}

div.photoswipe-gallery figure figcaption {
    max-width: 150px;
    font-size: 80%;
    text-align: center;
}

div.photoswipe-gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

/*****************************************************************************/
/*
/* jPlayer
/*
/*****************************************************************************/

@media (min-width: 670px) {
  .jp-audio {
    float: right;
    margin-left: 1em;
  }
}

@media (max-width: 669px) {
  .jp-audio {
    margin: auto;
  }
}

/*****************************************************************************/
/*
/* Comments
/*
/*****************************************************************************/

.comments {
  padding-top: 2em;
  padding-bottom: 2em;
}

.comments ol {
}

.comments li {
  padding-top: 1em;
  list-style: none;
  margin-left: -1.2em;
}

.comment_text p {
  margin-top: 0;
}

.comments h2, .commenter_name {
  font-weight: bold;
  color: #595959;
}

.comment_date:before, .comment_date, .comment_date:after {
  color: #aaa;
}

.comment_date:before {
  content: "(";
}

.comment_date:after {
  content: ")";
}

.comment_text {
  display: block;
}

/*****************************************************************************/
/*
/* Footer
/*
/*****************************************************************************/

.footer {
  clear: both;
  font-size: 80%;
  text-align: left;
  color: #595959;
  border-top: 1px solid #aaa;
  margin: 1em;
  padding-top: 0.5em;
  overflow: hidden;
}

.footer .contact {
  float: left;
  margin-right: 3em;
  padding-bottom: 0.5em;
}

.footer .contact a {
  color: #4553a1;
}

.footer .rss {
  margin-top: 1.1em;
  margin-right: -.2em;
  float: right;
}

.footer .rss img {
  border: 0;
}

/*****************************************************************************/
/*
/* Posts
/*
/*****************************************************************************/

/* standard */
.post pre {
  border: 1px solid #ddd;
  background-color: #eef;
  padding: 0 .4em;
}

.post ul, .post ol {
  margin-left: 1.35em;
}

.post code {
  border: 1px solid #ddd;
  background-color: #eef;
  padding: 0 .2em;
}

.post pre code {
  border: none;
}

/* terminal */
.post pre.terminal {
  border: 1px solid #000;
  background-color: #333;
  color: #FFF;
}

.post pre.terminal code {
  background-color: #333;
}

/*****************************************************************************/
/*
/* Sources section
/*
/*****************************************************************************/

nav.source-crumbs ol {
    list-style-type: none;
}

nav.source-crumbs ol li {
    display: inline-block;
    margin-left: 0;
}

nav.source-crumbs a::after {
    display: inline-block;
    color: #000;
    content: '>';
    font-size: 80%;
    font-weight: bold;
    padding: 0 8px;
}

ul.street-directories {
    column-width: 11em;
}

div#sort-control button {
    box-sizing: border-box;
    border: none;
    font-family: inherit;
    cursor: pointer;
    font-size: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 0.2em 0.4em;
    text-align: center;
    min-width: 10ch;
}

div#sort-control button:hover {
    background-color: #aaa;
}

div#sort-control span.inactive {
    display: inline-block;
    font-weight: bold;
    min-width: 10ch;
    text-align: center;
}

table#will_list {
    border-collapse: collapse;
}

table#will_list th {
    text-align: center;
    padding: 0.4em;
    border: thin solid black;
}

table#will_list td {
    padding: 0.4em;
    border: thin solid black;
}

/*****************************************************************************/
/*
/* Indexes
/*
/*****************************************************************************/

.index h2 {
  font-size: 150%;
  margin-top: 1em;
  margin-bottom: 1em;
}

.index dd {
  padding-left: 1em;
}