/*
Theme Name: UCW Twenty Sixteen Child
Theme URI: http://www.uncharted-worlds.org/
Author: Jennifer, based on WordPress original
Author URI: http://www.uncharted-worlds.org/
Template: twentysixteen
Description: Twenty Sixteen child theme for Uncharted Worlds.  
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, red, white, yellow, dark, light, one-column, two-columns, right-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: ucwtwentysixteenchild

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/



/* fonts & font-styles */

body, 
.entry-footer, 
.wont-be-published, 
.pagination
{
  font-family: Verdana, Colfax, "Alright Sans", Alleyn, "DejaVu Sans", Gemeli, Monitor, "FF Basic Gothic", "Bernino Sans", Siro, "FF Milo", Sixta, Sans-Serif;
  /* font-size-adjust: 0.58; left out for now because only supported by firefox. this is the ratio for verdana. */
  /* Was using Bitstream Vera Sans as the fall-back after Verdana, but it makes   display oddly wide. */
  text-align: left;
}

.site-description, 
.intro, 
.j-excerpt-and-thumbnail
{
  font-family: "Bitstream Charter", "Charter BT", "Charter BT Pro", "ITC Charter", Calluna, Gentium, Serif;
  /* Charter BT may be the same as Bitstream Charter in fact */
  font-style: italic;
  font-size: 120%;
}

/* note:  Twenty Sixteen uses Montserrat followed by "Helvetica Neue" as the fonts for titles etc.  They do look lovely, but for now I'm gonna override them anyway for better consistency. */

.site-title, 
.entry-title, 
.comments-title, 
.comment-reply-title,
.post-navigation,
.post-navigation .post-title,
.widget .widget-title
{
  font-family: Verdana, "Bitstream Vera Sans", Colfax, "Alright Sans", Alleyn, "DejaVu Sans", Gemeli, Monitor, "FF Basic Gothic", "Bernino Sans", Siro, "FF Milo", Sixta, Sans-Serif;
}

.site-title, 
.entry-title
{
  font-size: 1.4rem;
}

.site-title
{
  letter-spacing: .05em;
}

.site-description
{
  text-align: center;
}

/* font spacing & sizing */

.site-branding, 
.site-title, 
.site-description, 
.site-info
{ /* to get it centred */
  margin-right: auto; 
  margin-left: auto;
}

.jfooterbox
{
  width: 100%; /* this is the one whose width matches the next/previous things, to stick a nice border on top of */
               /* note:  this is overridden when the page has no widgets, in which case we want it to match the article width instead */
}

.site-description, 
.site-title 
{
  text-align: center;
}

.widget .widget-title
{
  text-transform: none;
}

.comment-reply-title, 
.comments-title, 
.post-navigation .post-title 
{
  font-size: 1.25rem;
}

/* spacing and edging */

p, 
ol, 
ul, 
.widget p,
blockquote > :last-child
{
  margin-top: .9rem;
  margin-bottom: .9rem;
  line-height: 1.4em; 
}

p.intro
{
  margin-top: .8rem;
}

.site-description
{
  line-height: 1.4em;
}

.comment-notes, 
.comment-awaiting-moderation, 
.logged-in-as, 
.form-allowed-tags, 
.comments-policy
{
  line-height: 1.2em; 
}

article.post, 
article.page, 
div#comments
{
  padding-top: 1.1rem;
  padding-left: 0; 
  padding-right: 0;
  background-color: white;
  border: 2px solid #f6f5fa;
}

article.post, 
article.page
{
  padding-bottom: 1.3rem;
}

div#comments
{
  padding-bottom: 2.2rem;
}

blockquote 
{
  margin: 0;
  padding-left: 3em;
  padding-right: 1em;
  font-size: 100%;
}

.post-navigation, 
.pagination
{
  border-top: 2px solid #f6f5fa;
  border-bottom: 2px solid #f6f5fa;
}

.pagination:before, 
.pagination:after 
{
  background-color: #f6f5fa;
}

.pagination .nav-links:before, 
.pagination .nav-links:after,
.pagination .prev:before, 
.pagination .next:before
{
  font-size: 2.5rem; /* this is the back & forth arrows */
}

.pagination .nav-links
{
  margin-left: 2rem; /* the page numbers in the multi-post pages */
}

.widget, 
.post-navigation div + div, 
.page-header, 
.jfooterbox 
/* page header = e.g. for an author page */
{
  border-top: 2px solid #f6f5fa;
}

.jfooterbox
{
  padding-top: .5em
}

.comments-title, 
.comment-reply-title
{
  border: none;
}

li.comment 
.comment-body
{
  padding-top: 1.2rem;
  padding-bottom: 1.7rem;
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.comments-title
{
  padding-top: 0;
  padding-bottom: 0;
  margin-top: .4rem;
}

textarea, 
input[type="search"],
.comment-list article, 
.comment-form input
{
  border: 2px solid #f6f5fa;
}

input[type="search"]
{
  border: 2px solid #e6e5ea;
}

.comment-metadata 
{
  margin-bottom: .1em;
}

.jfooter 
{
  text-align: center;
}

.jpostdate, 
.jfooter, 
.footnotes, 
.comments-policy, 
.wont-be-published, 
.note,

/* this batch from old ucw theme, may or may not be needed here */
#footer, 
sup,
.postmetadata, 
.comments_explain, 
.secondarystyle, 
.toc, 
.citenote 
{
  font-size: .8rem;
}

.entry-content h2
{ /* i.e. a h2 that I've used to divide up an article */
  font-size: 1.2rem;
  margin-top: 1.2rem;
  margin-bottom: .9rem; /* which matches twenty sixteen default paragraphing, I think */
}

.widget .widget-title
{
  margin-top: .2em;
  margin-bottom: 0;
}

.widget ul
{
  margin-top: .9em;
}

h1, h1.entry-title, h2.entry-title
{
  font-size: 1.4rem;
  padding: 0; 
  margin: 0; 
}

.comments-title 
{
  margin-bottom: 0;
}

.comments-title, 
.comment-reply-title /* Appreciation, criticism & new ideas all welcome... */ 
{
  padding-top: 0;
}

.comment-notes, 
.comment-awaiting-moderation, 
.logged-in-as, 
.form-allowed-tags
{
  margin-bottom: .9rem; /* in twenty sixteen this is 2.15something */
}

.comment-form 
{
  padding-top: 0; /* in twenty sixteen this is 1.75em */
}

.comment-list + .comment-respond, 
.comment-navigation + .comment-respond
{
  padding-top: 0;
}

div.post-thumbnail, 
footer a.post-thumbnail
/* We want this to exist as HTML, so that it can be taken for Twitter etc, but it needn't show on the page. 
If I _do_ want it on the page, I'll put it on at a certain place myself.
This does mean that the thumbnail will pop up again on a copied page such as e.g. LJ, 
unless I put the same styling info into the RSS feed somehow. 
div.post-thumbnail gets rid of it on an individual page, footer a.post-thumbnail gets rid of it on main page.
*/
{
  display: none;
}

img, 
iframe 
/* may also need article img ?? tbc */ 
{
  margin-top: .5rem;
  margin-bottom: .5rem;
}

.j-excerpt-and-thumbnail img, 
.post-thumbnail
{
  max-width: 20em;
  margin-top: .7em;
  margin-bottom: 1.1em;
}

.j-excerpt-and-thumbnail p
{
  margin-bottom: .5rem;
}

.site-header 
{
  padding: 0;
}

.site-main > article 
{
  margin-bottom: 1.5rem;
}

.site-main 
{
  margin-bottom: 1rem;
}

.site-footer
{
  margin-top: 1.5rem;
}

form.search-form
{
  margin-bottom: 4rem;
}

.page-template-searchpage #main /* the space above the search box and its big title */
{
  margin-top: 1.4rem;
}

.page-template-searchpage .site-main > :last-child 
{
  margin-bottom: 4rem;
  /* this overrides a default one for other pages which makes the last-child's margin zero. */
}

.menu-toggle 
{
  font-size: .5rem;
}

.genericon-menu
{
  font-size: 1.3rem;
}

.main-navigation li 
{
  border-top: 2px solid #f6f5fa;
  text-align: center;
  margin-left: 0;
}

.main-navigation .primary-menu 
{
  border-bottom: 2px solid #f6f5fa;
}

blockquote,
.quote
{
  font-style: normal;
  border: none;
}

/* List layout for articles, similar to old UCW but not necessarily accomplished in the same way */
ul, ol
{
  margin: 0;
}

article ul 
{
  list-style-type: circle;
} 

ul li, ol li 
{
  padding: 0;
}

ul li
{
  margin-left: 1.1rem;
  margin-bottom: .2rem;
}

article ol li /* note that ols as part of the comment list don't want this margin, hence specifying article */
{
  margin-left: 1.3rem;
  margin-bottom: .9rem;
}
/* end of list layout */


/* The following is to override the re-flow at larger sizes, which I don't want. 
Heading is taken from the style.css of the parent theme.  - JLM */

/**
 * 14.4 - >= 985px
 */

@media screen and (min-width: 61.5625em) {

  body.no-sidebar:not(.search-results) article:not(.type-page) .entry-content 
  {
    float: none;
  }

  body.no-sidebar:not(.search-results) article:not(.type-page) .entry-footer 
  {
    width: auto;
    margin-top: .2em; /* footer contains a para whose top margin also contributes visually to this gap */
  }

  body:not(.search-results) article:not(.type-page) .entry-footer 
  {
    width: auto;
  }

  body.no-sidebar:not(.search-results) article:not(.type-page) .entry-content 
  {
    margin-left: 15%; /* but this will need further fixing, when I adjust the header and entry-footer not to be 15% either. */
  }

} /* end of conditional bit which holds all the other bits */

/* more overrides */
@media screen and (min-width: 56.875em)
{

  .site-header-menu 
  {
    display: none; /* because we just want the menu icon, not the menu items, unless we click the icon */
  }

  .menu-toggle 
  {
    display: block;
  }

  .site-footer
  /* I want my footer's horizontal-line width to match the horizontal lines for the next/previous navigation. 
     Part of that is to make the footer's container margins match .site-content padding, 
     which has a screen size conditional bit expressed as a percentage.  
   */
  {
    margin-left: 4.5455%;
    margin-right: 4.5455%;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .main-navigation .primary-menu > li 
  {
    float: none;
    border-top: 2px solid  #f6f5fa;
  }

  .no-sidebar .entry-header, 
  .no-sidebar .entry-content, 
  .no-sidebar .entry-summary, 
  .no-sidebar .entry-footer, 
  .no-sidebar .comments-area, 
  .no-sidebar .image-navigation, 
  .no-sidebar .post-navigation, 
  .no-sidebar .pagination, 
  .no-sidebar .page-header, 
  .no-sidebar .page-content, 
  .no-sidebar .content-bottom-widgets
  {
    margin-left: 2rem; 
    margin-right: 2rem;
  } 


} /* end of conditional bit which holds all the other bits */


/* end of re-flow fix */


/* An attempt to make the layout how I want it! */

/* margins & width for a small screen */ 
article.post, 
article.page, 
div#comments, 
.post-navigation, 
.content-bottom-widgets, 
.page-header, 
.no-sidebar .pagination, 
.main-navigation .primary-menu, 
.page-template-searchpage #main
{
  margin-right: 3%; 
  margin-left: 3%;
}
/* note that a comment is an article, so each comment gets this same margin in that capacity */

li.comment .comment-body, 
.site-footer
{
  padding-left: 3%;
  padding-right: 3%;
}

.entry-content, 
body.no-sidebar:not(.search-results) article:not(.type-page) .entry-content,
body.no-sidebar:not(.search-results) article:not(.type-page) .entry-footer,
.entry-header, 
article.comment-body,
.comments-title, 
div#respond,
.page-template-searchpage #content.site-content,
.comments-area,
.content-bottom-widgets,
.page-template-searchpage #main, 
.post-navigation
{
  margin-right: 4%; 
  margin-left: 4%;
}


/* If the screen's big enough, that's overridden by the following: */

@media screen and (min-width: 44em) 
{
  article.post, 
  article.page, 
  article.comment-body, 
  div#comments, 
  body.home .jfooterbox, 
  .no-sidebar .pagination,
  .main-navigation .primary-menu 
  {
    max-width: 40rem;

    /* to get it centred */
    margin-right: auto; 
    margin-left: auto;
  }

  div#respond,
  .entry-content, 
  .comment, 
  .comments-title
  {
    margin-left: 2rem;
    margin-right: 2rem;
  } /* subject to tweaking when I compare with old blog design */

  body.no-sidebar:not(.search-results) article:not(.type-page) .entry-content,
  body.no-sidebar:not(.search-results) article:not(.type-page) .entry-footer,
  .entry-header,
  .entry-content
  {
    margin-left: 2rem;
    margin-right: 2rem;
    width: initial;
  }

  li.comment .comment-body
  {
    padding-left: 1.2rem;
    padding-right: 1.2rem;
  }

} /* end of conditional bit for big screen */


/* another big-screen adaptation which I do actually want */
/* note that this lot only applies to the search page */
@media screen and (min-width: 56.875em)
{
  .page-template-searchpage #main,
  .page-template-searchpage .main-navigation
  /* to match .content-bottom-widgets as set by Twenty Sixteen, 
  as the search page has essentially no other content except the search box and the widgets */
  {
    margin-left: 15%; 
    margin-right: 15%; 
  }

  .page-template-searchpage .main-navigation .primary-menu
  {
    max-width: 100%;
  }

  .page-template-searchpage .site-header
  /* to match .site-content, so that the index stuff inside the header will be able to match the search box in width */
  {
    margin-left: 4%;
    margin-right: 4%;
    padding-left: 4.5455%;
    padding-right: 4.5455%;
  }

} /* end of conditional bit */



.site-description
{
  max-width: 46rem; /* just slightly wider than max article width */
}


/* All these are overriding various bits from Twenty Sixteen,
 which would otherwise override my main statement because they're more specifically addressed. */

           .entry-content a, 
           .entry-summary a, 
    .taxonomy-description a, 
            .logged-in-as a, 
         .comment-content a, 
.pingback .comment-body > a, 
              .textwidget a, 
            .entry-footer a:hover, 
               .site-info a:hover 
{
  box-shadow: none;
}

.wont-be-published
{
  letter-spacing: 0;
}

.pagination .page-numbers 
{
  text-transform: none;
}

.pagination .current 
{
  font-weight: 100;
}

.bypostauthor > article .fn:after 
{
  content:none;
}

@media screen and (min-width: 44.375em) 
{
  .no-sidebar .entry-header,
  .no-sidebar .entry-content,
  .no-sidebar .entry-summary,
  .no-sidebar .entry-footer,
  .no-sidebar .comments-area,
  .no-sidebar .image-navigation,
  .no-sidebar .post-navigation,
  .no-sidebar .page-header,
  .no-sidebar .page-content,
  .no-sidebar .content-bottom-widgets, 
  {
    margin-right: 2rem;
    margin-left: 2rem;
  }
} /* end of conditional bit */


.site-header-main 
{
  display: block;
  -webkit-align-items: center;
  align-items: center;
}

.menu-toggle 
{
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.5rem;
}

.site-branding
{
  margin-bottom: 1rem;
}