/* Ed: the minimal edition theme.
 * ___________________
 * \_   _____/\______ \
 *  |    __)_  |    |  \
 *  |        \ |    `   \
 * /_______  //_______  /
 *         \/         \/
 * Designed, built, and released under an MIT license by @elotroalex and brill friends. See credits
 * for more info.
 * Based on the Poole and Lanyon theme by @mdo. Learn more at
 * https://github.com/minicomp/ed.
*/

/*
  To apply a different color scheme to the whole scroll down to the themes section for instructions
*/


/*
  General

  Update the foundational and global aspects of the page.
*/

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

html {
  font-family: $main-font;
  font-size: 16px;
  line-height: 1.5;
}

@media (min-width: 38em) {
  html {
    font-size: $regular-font-size;
  }
}

body {
  color: $text-color;
  background-color: #fff;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

.content {
  margin-bottom: 4rem;
}


/*
  Wrapper

  The wrapper is used to position site content when the sidebar is toggled. We use an outter wrap to
  position the sidebar without interferring with the regular page content.
*/

.wrap {
  position: relative;
  width: 100%;
}


/*
  Container

  Center the page content.
*/

.container {
  max-width: 38rem;
  padding-left:  1rem;
  padding-right: 1rem;
  margin-left:  auto;
  margin-right: auto;
}

@media (min-width: 38em) {
  .container {
    max-width: 32rem;
  }
}

@media (min-width: 56em) {
  .container {
    max-width: 38rem;
  }
}

/* Links*/
a, .text-title a {
  color: $link-color;
  text-decoration: none;
}

/* `:focus` is linked to `:hover` for basic accessibility*/
a:hover,
a:focus {
  text-decoration: underline;
}

/* Headings*/
h1, h2, h3, h4, h5, h6 {
  font-family: $heading-font;
  margin-bottom: .5rem;
  font-weight: 300;
  color: $heading-color;
  letter-spacing: -.025rem;
  line-height: 1.25;
  text-rendering: optimizeLegibility;
}

h1 {
  font-size: 1.4rem;
}

h1.text-title {
  font-size: 1.4rem;
}

h2 {
  margin-top: 1rem;
  font-size: 1.2rem;
}

h3, h4, h5 {
  font-size: 1rem;
}

h3 {
  margin-top: 1.5rem;
}

h4, h5, h6 {
  margin-top: 1rem;
}

/* Body text*/
p {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* Lists*/
ul {
  list-style: circle;
}

ul, ol {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* Horizontal ruler*/
hr {
  margin-top: 60px;
  position: relative;
  margin: 1.5rem 0;
  border: 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #fff;
}

/* Search Highlihting*/
mark {
  color: white;
  background-color: $link-color;
}

/* Quotes*/
blockquote {
  padding: 0rem 1.5rem 0rem 2rem;
  margin: 0 0 20px 0;
  color: $text-color;
  border-left: none;
  font-style: italic;
}

blockquote p:last-child {
  margin-bottom: 0;
}

@media (min-width: 30em) {
  blockquote {
    padding-right: 5rem;
    padding-left: 1.25rem;
  }
}

/* To add an attribution make sure to make a line with the attribution class*/
li.attribution {
  text-align: right;
  list-style: none;
  padding: 0rem 1.5rem 0rem 2rem;
  margin: 0 0 20px 0;
  color: $text-color;
}

/* Images*/
img {
  display: block;
  max-width: 100%;
  margin: 0 0 1rem;
  border-radius: 5px;
}

/* Tables*/
table {
  margin-bottom: 1rem;
  width: 100%;
  border: 1px solid #e5e5e5;
  border-collapse: collapse;
}

td,
th {
  padding: .25rem .5rem;
  border: 1px solid #e5e5e5;
}

tbody tr:nth-child(odd) td,
tbody tr:nth-child(odd) th {
  background-color: #f9f9f9;
}


/*
  Masthead

  Super small header above the content for site name and short description.
*/

.masthead {
  margin-bottom: 3rem;
  text-align: center;
  padding-top: 26px;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

.masthead-title {
  margin-top: 0;
  margin-bottom: 0;
  color: #505050;
  line-height: .777em;
}

.masthead-title a {
  color: $link-color;
}

.masthead-title small {
  font-family: $main-font;
  font-size: .88rem;
  font-weight: 300;
  color: $text-color;
  letter-spacing: .05rem;
  font-family: $heading-font;
}

h3.masthead-title {
  font-family: $main-font;
  font-size: 1.8rem;
  margin-top: 2px;
}

@media (max-width: 48em) {
  .masthead-title {
    text-align: center;
  }

  .masthead-title small {
    display: none;
  }

  h3.masthead-title {
  margin-left: 15%;
  margin-right: 15%;
  }
}

@media (max-width: 320px) {
  h3.masthead-title {
  margin-top: 2em;
  margin-left: 0%;
  margin-right: 0%;
  }
}

/* Page and Posts*/
.page {
  margin-bottom: 4em;
}

.page-title {
  color: $heading-color;
  margin-top: 0;
}


/*
  Sidebar

  The sidebar is the drawer, the item we are toggling with our handy hamburger button in the corner
  of the page.

  This particular sidebar implementation was inspired by Chris Coyier's "Offcanvas Menu with CSS
  Target" article, and the checkbox variation from the comments by a reader. It modifies both
  implementations to continue using the checkbox (no change in URL means no polluted browser
  history), but this uses `position` for the menu to avoid some potential content reflow issues.

  Source: http://css-tricks.com/off-canvas-menu-with-css-target/#comment-207504
*/

/* Style and "hide" the sidebar*/
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: -14rem;
  width: 14rem;
  visibility: hidden;
  overflow-y: auto;
  font-family: "PT Sans", Helvetica, Arial, sans-serif;
  font-size: .875rem;/* 15px*/
  color: rgba(255,255,255,.6);
  background-color: #202020;
  -webkit-transition: all .3s ease-in-out;
          transition: all .3s ease-in-out;
}

@media (min-width: 30em) {
  .sidebar {
    font-size: .75rem;/* 14px*/
  }
}

/* Sidebar content*/
.sidebar {
  background-color: $link-color;
}

.sidebar a {
  font-weight: normal;
  color: #fff;
}

.sidebar-item {
  padding: 1rem;
}

.sidebar-item p:last-child {
  margin-bottom: 0;
}

/* Sidebar nav*/
.sidebar-nav {
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.sidebar-nav-item {
  display: block;
  padding: .5rem 1rem;
  border-top: 1px solid rgba(255,255,255,.1);
}

a.sidebar-nav-item-toc {
  color: rgba(255,255,255,.8);
}

.sidebar-nav-item.active,
a.sidebar-nav-item:hover,
a.sidebar-nav-item:focus {
  text-decoration: none;
  background-color: rgba(255,255,255,.1);
  border-color: transparent;
}

@media (min-width: 48em) {
  .sidebar-item {
    padding: 1.5rem;
  }

  .sidebar-nav-item {
    padding-left:  1.5rem;
    padding-right: 1.5rem;
  }
}

/* Hide the sidebar checkbox that we toggle with `.sidebar-toggle`*/
.sidebar-checkbox {
  display: none;
}

/* Style the `label` that we use to target the `.sidebar-checkbox`*/
.sidebar-toggle {
  position: absolute;
  top:  .8rem;
  left: 1rem;
  display: block;
  padding: .25rem .75rem;
  color: #505050;
  background-color: #fff;
  border-radius: .25rem;
  cursor: pointer;
}

.sidebar-toggle:before {
  display: inline-block;
  width: 1rem;
  height: .75rem;
  content: "";
  background-image: -webkit-linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%);
  background-image:    -moz-linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%);
  background-image:     -ms-linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%);
  background-image:         linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%);
}

.sidebar-toggle:active,
#sidebar-checkbox:focus ~ .sidebar-toggle,
#sidebar-checkbox:checked ~ .sidebar-toggle {
  color: #fff;
  background-color: #555;
}

.sidebar-toggle:active:before,
#sidebar-checkbox:focus ~ .sidebar-toggle:before,
#sidebar-checkbox:checked ~ .sidebar-toggle:before {
  background-image: -webkit-linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%);
  background-image:    -moz-linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%);
  background-image:     -ms-linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%);
  background-image:         linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%);
}

@media (min-width: 30.1em) {
  .sidebar-toggle {
    position: fixed;
  }
}

@media print {
  .sidebar-toggle {
    display: none;
  }
}


/*
  Slide effect

  Handle the sliding effects of the sidebar and content in one spot, seperate from the default
  styles.

  As an a heads up, we don't use `transform: translate3d()` here because when mixed with
  `position: fixed;` for the sidebar toggle, it creates a new containing block. Put simply, the
  fixed sidebar toggle behaves like `position: absolute;` when transformed.

  Read more about it at http://meyerweb.com/eric/thoughts/2011/09/12/.
*/

.wrap,
.sidebar,
.sidebar-toggle {
  -webkit-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
          backface-visibility: hidden;
}

.wrap,
.sidebar-toggle {
  -webkit-transition: -webkit-transform .3s ease-in-out;
          transition: transform .3s ease-in-out;
}

#sidebar-checkbox:checked + .sidebar {
  z-index: 10;
  visibility: visible;
}

#sidebar-checkbox:checked ~ .sidebar,
#sidebar-checkbox:checked ~ .wrap,
#sidebar-checkbox:checked ~ .sidebar-toggle {
  -webkit-transform: translateX(14rem);
      -ms-transform: translateX(14rem);
          transform: translateX(14rem);
}


/*
  Reverse layout

  Flip the orientation of the page by placing the `.sidebar` and sidebar toggle
  on the right side.
*/

.layout-reverse .sidebar {
  left: auto;
  right: -14rem;
}

.layout-reverse .sidebar-toggle {
  left: auto;
  right: 1rem;
}

.layout-reverse #sidebar-checkbox:checked ~ .sidebar,
.layout-reverse #sidebar-checkbox:checked ~ .wrap,
.layout-reverse #sidebar-checkbox:checked ~ .sidebar-toggle {
  -webkit-transform: translateX(-14rem);
      -ms-transform: translateX(-14rem);
          transform: translateX(-14rem);
}


/*
  Overlay sidebar

  Make the sidebar content overlay the viewport content instead of pushing it
  aside when toggled.
*/

.sidebar-overlay #sidebar-checkbox:checked ~ .wrap {
  -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
          transform: translateX(0);
}

.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar-toggle {
  box-shadow: 0 0 0 .25rem #fff;
}

.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar {
  box-shadow: .25rem 0 .5rem rgba(0,0,0,.1);
}

/* Only one tweak for a reverse layout*/
.layout-reverse.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar {
  box-shadow: -.25rem 0 .5rem rgba(0,0,0,.1);
}


/*
  Themes

  Applies custom color schemes by adding the appropriate class to the `body`. Based on colors from
  Base16: http://chriskempson.com/projects/base16/
*/

/* Red*/
.theme-base-red .sidebar,
.theme-base-red .sidebar-toggle:active,
.theme-base-red #sidebar-checkbox:checked ~ .sidebar-toggle {
  background-color: #ac4142;
}

.theme-base-red .container a,
.theme-base-red .sidebar-toggle,
.theme-base-red .related-posts li a:hover {
  color: #ac4142;
}

/* Orange*/
.theme-base-orange .sidebar,
.theme-base-orange .sidebar-toggle:active {
  background-color: #d28445;
}

.theme-base-orange .container a,
.theme-base-orange .sidebar-toggle,
.theme-base-orange .related-posts li a:hover {
  color: #d28445;
}

/* Green*/
.theme-base-green .sidebar,
.theme-base-green .sidebar-toggle:active {
  background-color: #90a959;
}

.theme-base-green .container a,
.theme-base-green .sidebar-toggle,
.theme-base-green .related-posts li a:hover {
  color: #90a959;
}

/* Cyan*/
.theme-base-cyan .sidebar,
.theme-base-cyan .sidebar-toggle:active {
  background-color: #75b5aa;
}

.theme-base-cyan .container a,
.theme-base-cyan .sidebar-toggle,
.theme-base-cyan .related-posts li a:hover {
  color: #75b5aa;
}

/* Blue*/
.theme-base-blue .sidebar,
.theme-base-blue .sidebar-toggle:active {
  background-color: #6a9fb5;
}

.theme-base-blue .container a,
.theme-base-blue .sidebar-toggle,
.theme-base-blue .related-posts li a:hover {
  color: #6a9fb5;
}

/* Magenta*/
.theme-base-magenta .sidebar,
.theme-base-magenta .sidebar-toggle:active {
  background-color: #aa759f;
}

.theme-base-magenta .container a,
.theme-base-magenta .sidebar-toggle,
.theme-base-magenta .related-posts li a:hover {
  color: #aa759f;
}

/* Brown*/
.theme-base-brown .sidebar,
.theme-base-brown .sidebar-toggle:active {
  background-color: #8f5536;
}

.theme-base-brown .container a,
.theme-base-brown .sidebar-toggle,
.theme-base-brown .related-posts li a:hover {
  color: #8f5536;
}


/*
 ED SPECIAL LAYOUTS
*/

p.centered {
  text-align: center;
}

p.larger {
  font-size: 1.6rem;
}

p.large {
  font-size: 1.4rem
}

p.small {
  font-size: 0.8rem;
}

div.poem,
div.narrative {
  margin-bottom: 5rem;
}

div.toc {
  margin-bottom: 4rem;
}


/*
  Poem styles

  If you want your lines not to wrap on small screens, add the rule "white-space: nowrap;"; If you
  want you want to remove the hanging indent, reset the padding-left to 0 and erase text-indent
*/

.poetry ul,
ul.poetry {
  list-style: none;
  list-style-type: none;
  padding-left: 1rem;
  text-indent: -1rem;
}


/* This snippet helps us reset the margin for all spans with the indent- class*/
.poetry span[class^='indent-']{
  margin: 0;/* reset browsers default margin styles*/
}


/*
  To set line indentation for poetry wrap the line in a span, with a class="indent-x" attribute.
  The x is represents an rem (root em) value
*/

.indent-1 {
  font-style: normal;
  padding-left: 1rem;
}

.indent-2 {
  font-style: normal;
  padding-left: 2rem;
}

.indent-3 {
  font-style: normal;
  padding-left: 3rem;
}

.indent-4 {
  font-style: normal;
  padding-left: 4rem;
}

.indent-5 {
  font-style: normal;
  padding-left: 5rem;
}

.indent-6 {
  font-style: normal;
  padding-left: 6rem;
}

.indent-7 {
  font-style: normal;
  padding-left: 7rem;
}

.indent-8 {
  font-style: normal;
  padding-left: 8rem;
}

.indent-9 {
  font-style: normal;
  padding-left: 9rem;
}

.indent-10 {
  font-style: normal;
  padding-left: 10rem;
}

.poetry .byline {
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0;
  margin-top: -.5rem;
}

/* Footnotes styles*/
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

.footnotes {
  line-height: 1.2rem;
  font-size: 0.9rem;
  letter-spacing: .01rem;
}

.footnotes .foot-block {
  display: inline-block;
  padding: 0 4rem 0 2rem;
  margin-bottom: .8rem;
  font-style: italic;
}

a.footnote {
  padding-left: .1rem;
  font-size: .66rem;
}

/*Bibliography styles*/
ol.bibliography {
  list-style-type:none;
  padding-left: 1rem;
  text-indent: -1rem;
}

/* Diplomatic editions*/
.add {
  color:#288828;
  font-style: italic;
}

.delete {
  text-decoration: line-through;
  color: #AA3232;
}

.underline {
  text-decoration: underline;
}


/*
  Line layouts for prose-poetry and theater

  To use these layouts you need to add the classes to your markdown or HTML lines.
  (ex. "- {:.centered} hello!")
*/

li.centered {
  text-align: center;
}

li.speaker,
li.speakerGroup {
  text-align: center;
  padding-top: 1.2em;
}

li.speakerGroup {
  margin-bottom: -1.6em;
}

li.attribution {
  text-align: right;
  list-style: none;
  padding: 0rem 1.5rem 0rem 2rem;
  margin: 0 0 20px 0;
  color: #454545;
}

li.prose {
  list-style-position: inside;
  margin-left: -1em;
  text-indent: 0;
}

li.prose-indent {
  text-indent: 2rem;
}