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

html, body { height: 100%; }

body {
  background-color: #eee;
  font-family: "Roboto Slab", "Palatino", serif;
  -moz-font-feature-settings: "liga" 0;
  -o-font-feature-settings: "liga" 0;
  -webkit-font-feature-settings: "liga" 0;
}

.header h1, .nav, .post, .front-page {
  background-color: #fff;
}

h1, h2, h3, h4, h5, h6, .header h1 a, .date {
  color: #614945;
}

/* Link text should have a minimum contrast of 4.5:1 with the background. */
a, a.front-page-article h3, a.front-page-article-no-image h3 {
  color: #b55e2b;
}

a, .header a:hover {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a[href*="//"]:not([href*="localhost"]):not([href*="flickr"]):not([href*="croydon.randomness.org.uk/plastic-free-july"]):not([href="https://twitter.com/croydn"]) {
  background: url("http://croydon.randomness.org.uk/plastic-free-july/images/external-link.png") no-repeat scroll right center transparent;
  padding-right: 13px;
}

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

h2 {
  font-size: 130%;
  clear: both;
  margin-bottom: -0.3em;
}

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

h3, h4, h5, h6 {
  font-size: 115%;
  padding-top: 0.7em;
  margin-bottom: -0.5em;
}

h3.latest-articles {
  margin-bottom: 0.3em;
}

h1, h2, h3, h4, h5, h6, .date {
  font-family: "Shadows Into Light Two", sans-serif;
}

/* Avoid justifying titles in body of post. */
h2, h3, h4, h5, h6 {
  text-align: left;
}

/* Tweak fonts for Shadows Into Light (only gets applied once the
   font has definitely loaded). */
.wf-shadowsintolighttwo-n4-active h1,
.wf-shadowsintolighttwo-n4-active h2,
.wf-shadowsintolighttwo-n4-active h3,
.wf-shadowsintolighttwo-n4-active h4,
.wf-shadowsintolighttwo-n4-active h5,
.wf-shadowsintolighttwo-n4-active h6,
.wf-shadowsintolighttwo-n4-active .date {
  word-spacing: -0.2em;
  letter-spacing: 0.025em;
}

.wf-shadowsintolighttwo-n4-active .header h1 {
  font-size: 190%;
}

.wf-shadowsintolighttwo-n4-active h2 {
  font-size: 170%;
}

.wf-shadowsintolighttwo-n4-active .post .date {
  font-size: 120%;
}

p, .footnotes li {
  line-height: 1.6em;
}

p {
  margin: 1em 0;
}

.post ul {
  padding-left: 40px;
}

.post ul li {
  padding-top: 5px;
}

hr {
  width: 66%;
  margin: 30px auto;
  border-top: 1px dotted #614945;
}

body {
  background-image: url("/plastic-free-july/images/background-image-by-lis-watkins.jpg");
}

.post {
  text-align: justify;
  padding: 0 40px 20px 40px;
}

.nav {
  clear: both;
}

.nav ul {
  list-style: none;
}

.nav .date {
  padding-right: 5px;
}

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

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

.post-nav-below-comments {
  padding-top: 20px;
}

/* Comments */

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

ol.comments {
  padding: 1em;
}

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

.comment_text p {
  margin-top: 0;
}

.commenter_name {
  font-weight: bold;
  color: #614945;
}

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

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

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

.comment_text {
  display: block;
}

/* Archives and Authors */

.archives ul.posts, .author-bio ul.posts, ul.authors {
  padding-top: 20px;
  list-style: none;
}

.archives li, .author-bio li, ul.authors li {
  padding-bottom: 5px;
}

.author-bio .post-title {
  padding-bottom: 20px;
}

/* Photos */

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

.photo-right {
  clear: both;
  width: 240px;
}

.caption {
  font-size: 80%;
}

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

@media (min-width: 530px) {
  .photo-right {
    float: right;
    padding: 20px 0 10px 30px;
  }
  .photo-centre-pair-image-left {
    float: left;
  }
  .photo-centre-pair-image-right {
    float: right;
  }
  .photo-centre-pair img {
    border: thin solid black;
  }
}

@media (max-width: 529px) {
  .photo-right, .photo-centre-pair {
    margin: auto;
  }
  .photo-right:first-child {
    padding-top: 20px;
  }
}

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

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

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

/* Footnotes */

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

.footnotes {
  padding-top: 10px;
}

.footnotes ol {
  padding-top: 15px;
}

.footnotes li {
  margin-left: 20px;
}

/* Responsive stuff (see also Photo section) */

/* Small width - nav and header along the top instead of the side */
@media (max-width: 1084px) {

  .site .post {
    padding-top: 20px;
  }

  .site .header h1 {
    padding: 30px 0 10px 40px;
  }

  .site .wf-shadowsintolighttwo-n4-active h2 {
    font-size: 140%;
  }

  .site .wf-shadowsintolighttwo-n4-active .post .date {
    font-size: 100%;
  }

  .site .post-title {
    margin-top: 20px;
  }

  .site .post .date {
    display: block;
    margin-top: 8px;
  }

  .site .nav li {
    float: left;
    padding-right: 1em;
  }

  .site .nav li:first-child {
    padding-left: 40px;
  }

  .site .nav .latest-articles {
    display: none;
  }
}

/* Small width - background image visible in straight margins if there's room. */
@media (min-width: 780px) and (max-width: 1084px) {
  .site .header, .site .nav {
    width: 720px;
    margin: auto;
  }
  .site .post {
    width: 640px;
    margin: auto;
  }
}

/* Small width - bit of background image at top if no (or not much) room for
   margins.  Restrict max width of main content to same as other layouts. */
@media (max-width: 939px) {
  .site {
    margin-top: 100px;
  }
  .site .content {
    max-width: 640px;
  }
}

/* Very small width - decrease padding on content, don't justify text. */
@media (max-width: 660px) {
  .site .post, .site .header h1, .site .nav li:first-child {
    padding-left: 10px;
  }

  .site .header h1 {
    padding-top: 10px;
  }

  .site .wf-shadowsintolighttwo-n4-active .header h1 {
    font-size: 170%;
  }

  .site .post {
    padding-right: 10px;
    text-align: left;
  }
}

/* Nav at the side, nav+content centred as a block */
@media (min-width: 1085px) {
  .site .header {
    text-align: right;
  }

  .site .header h1 {
    margin: 20px 0 0 -40px;
    padding: 10px 20px 20px 40px;
    float: right;
    width: 220px;
  }

  .site .nav {
    float: right;
    width: 240px;
    padding: 20px 0 20px 40px;
    margin-left: -40px;
  }

  .site .nav ul {
    padding-bottom: 1em;
  }

  .site .nav li {
    padding-right: 10px;
    padding-bottom: 0.3em;
  }

  .site .post {
    width: 640px;
    float: left;
    margin-bottom: 20px;
  }

  .site .post .date {
    margin-top: 10px;
  }

  .site {
    width: 960px;
    margin: auto;
  }

  /* Flexbox stuff */
  .site .post {
    display: flex;
    flex-direction: column;
  }

  .site .post .date {
    order: 1;
    text-align: right;
    padding-left: 20px; /* For browsers that don't support flexbox. */
  }

  .site .post-title {
    order: 2;
  }

  .site .content {
    order: 3;
  }

  .site .post-nav-above-comments {
    order: 4;
  }

  .site .comments {
    order: 5;
  }

  .site .post-nav-below-comments {
    order: 6;
  }
}

/* Nav at the side, content centred */
@media (min-width: 1270px) {
  .site .post {
    margin-left: 240px;
  }
  .site {
    width: 1200px;
    margin: auto;
  }
}

/* Front page */

.front-page .header h1 {
  padding: 20px;
  text-align: center;
}

.front-page .nav {
  text-align: center;
}

.front-page .nav .link {
  padding-left: 20px;
}

.front-page .nav .link:first-child {
  padding-left: 0;
}

.front-page .content {
  clear: both;
  padding: 20px;
}

.article-box .image {
  float: left;
  padding-right: 20px;
  padding-top: 5px;
}

a.front-page-article, a.front-page-article-no-image {
  display: block;
  color: #000;
}

a.front-page-article {
  min-height: 190px;
}

a.front-page-article:hover, a.front-page-article-no-image:hover {
  text-decoration: none;
  background-color: #eac0a8;
}

.article-box h3 {
  padding: 0;
  margin: 0;
}

/* Wider screens - two columns of content. */

@media (min-width: 1020px) {

  .front-page .latest-articles {
    padding-top: 40px;
    display: table;
  }

  .article-pair {
    display: table-row;
  }

  a.front-page-article-no-image {
    min-height: 190px;
  }

  /* This doesn't work when I concatenate the padding/margins.  I have no
     idea why.
    a.front-page-article, a.front-page-article-no-image {
      padding: 20px -20px 10px 20px;
      margin: -20px 20px -10px -20px;
    }
  */

  a.front-page-article, a.front-page-article-no-image {
    padding-top: 20px;
    margin-top: -20px;
    padding-left: 20px;
    margin-left: -20px;
    padding-bottom: 10px;
    margin-bottom: -10px;
    padding-right: -20px;
    margin-right: 20px;
  }

  .article-box:last-child a.front-page-article, .article-box:last-child a.front-page-article-no-image {
     padding-right: 20px;
     margin-right: -20px;
  }

  .article-box {
    display: table-cell;
    vertical-align: top;
    clear: both;
    padding-bottom: 20px;
    text-align: justify;
  }

  .front-page .footer {
    clear: both;
  }
}

/* Wider screens - 240px images if there's room.  Extra-wide side margins on
   extra-wide screens. */

@media (min-width: 1420px) {
  .front-page {
    margin: 100px 150px;
  }
}

@media (min-width: 1270px) and (max-width: 1419px) {
  .front-page {
    margin: 100px 65px;
  }
}

@media (min-width: 1270px) {

  .front-page .blurb, .front-page .latest-articles {
    width: 1080px;
    margin: auto;
  }

  .article-box, .article-box .text-no-image  {
    width: 500px;
  }

  .article-box .text {
    width: 240px;
    margin-left: 260px;
  }

}

/* Slightly narrower screens - still two columns, but 180px images.  Reduce
   top margin of page slightly to compensate for narrower content columns.
   Lose the side margins if necessary. */

@media (min-width: 1170px) and (max-width: 1269px) {
  .front-page {
    margin: 75px;
  }
}

@media (min-width: 1020px) and (max-width: 1169px) {
  .front-page {
    margin: 75px 0;
  }
}

@media (min-width: 1020px) and (max-width: 1269px) {

  .front-page .blurb, .front-page .latest-articles {
    width: 960px;
    margin: auto;
  }

  .article-box {
    width: 440px;
  }

  .article-box img {
    width: 180px;
  }

  .article-box .text {
    width: 240px;
    margin-left: 200px;
  }

  .article-box .text-no-image {
    width: 440px;
  }
}

/* Screens too narrow to fit in two columns of content. */

@media (max-width: 1019px) {
  .front-page {
    margin-top: 100px;
  }

  .front-page .latest-articles {
    padding-top: 20px;
  }

  .article-box {
    padding-top: 20px;
  }

  a.front-page-article, a.front-page-article-no-image {
    padding: 10px 20px;
    border: thin dotted #eac0a8;
  }
}

/* Smaller images if screen is really narrow. */

@media (max-width: 660px) {
  .article-box img {
    width: 180px;
  }

  a.front-page-article {
    min-height: 0;
  }
}

/* And if it's really really narrow, make sure there's a linebreak between
   photo and subheader. */

@media (max-width: 380px) {
  .article-box h3 {
    clear: both;
    padding-top: 10px;
    margin-bottom: -10px;
  }
}