* {
  margin: 0px;
  padding: 0px;
  font-size: 100%;
  color: white;
  font-family:'Libre Baskerville', serif;
}
/* Always set toc's display to none to preven the table 
of contents displaying */
#toc {
  display: none;
}
.section1 img {
  height: auto;
  max-width: 50%;
}
body, html {
  width: 100%;
  height: 100%;
  background-color: white;
}
.section0 {
  position: relative;
  width: 100%;
  height: 100%;
  float: left;
  background-color: transparent;
  padding: 0%;
  overflow-x: hidden;
}
p {
  font-size: 1em;
  line-height: 2em;
  padding-bottom: 1em;
}
ul {
  padding-bottom: 1em;
}
ul li {
  line-height: 2em;
}
a {
  color: #c2ba95;
  text-decoration: none;
}
a:hover {
  color: #c2ba95;
  text-decoration: underline;
}
header {
  position: absolute;
  left: 0%;
  height: 100%;
  width: 4%;
  background-color: #2E2E2E;
}

blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote p {
  display: inline;
}

/*
In this example the Poetry Book title is in an 
h1 tag that's been rotated 90% around it's top left corner.
Play around with the h1 element's left, bottom and width properties to fit it exactly.
Confusingly, the width property represents the h1 element's width *before* it was rotated.
That means that, after rotation, it's width will apprear to be its height. Yes, it's confusing! 
Because of this, you need to set a maximum width in pixels to give the text inside 
the h1 tag enough room to flow up the page.
Set the h1 element's background-color to red help you debug positioning problems
*/
 h1 {
  font-size: 1.8em;
  color: white;
  position: absolute;
  bottom: -1em;
  left: 0.18em;
  width: 800px;
  padding-left: 0.1em;
  padding-top: 0.16em;
  /* background-color: red; */
  /* Rotate the text */
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  /* Make the rotation happen around the top left corner */
  -webkit-transform-origin: top left;
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  -o-transform-origin: top left;
  transform-origin: top left;
}
.section0 nav {
  position: absolute;
  left: 4%;
  height: 100%;
  width: 16%;
  background-color: black;
  padding-left: 2%;
  padding-right: 2%;
  overflow-y: scroll;
  overflow-x: auto;
  z-index: 2;
}
.section0 nav a {
  display: block;
  padding-bottom: 0.7em;
  padding-left: 1em;
  color: white;
  font-size: 1.2em;
  outline: none;
}
.section0 nav a:hover {
  color: #eee8aa;
  text-decoration: none;
}
.section0 nav span {
  display: block;
  font-size: 1.4em;
  color: white;
  padding-top: 1em;
  padding-bottom: 1em;
}
/* This next style is just used to add 3em of padding to the top
of the first section that doesn't have a category. This is
so that it's neatly padded from the top of the page */
.section0 nav a:first-child {
  padding-top: 3em;
}
nav a:last-child {
  padding-bottom: 2em;
}
nav a[state=selected] {
  color: #eee8aa;
}
nav a[state=unselected] {
  color: white;
}
em, code {
  color: black;
}
pre {
  padding-bottom: 1em;
}
/* 
<section> tags are created automatically by poetryBook.js when it loads the 
markdown document. It wraps each content section beginning with <h2> or ## in
an <section> tag, so that the content pages can be positioned.*/
.section1 {
  position: absolute;
  left: 23%;
  width: 58%;
  height: 100%;
  color: black;
  opacity: 0;
  display: block;
  padding-left: 10%;
  padding-right: 10%;
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: white;
  transition: opacity 0.5s;
  -moz-transition: opacity 0.5s;
  /* Firefox 4 */
  -webkit-transition: opacity 0.5s;
  /* Safari and Chrome */
  -o-transition: opacity 0.5s;
  /* Opera */
  -ms-transition: opacity 0.5s;
  /* IE */
  /* Prevent Safari flickering transition bug */
  -webkit-backface-visibility: hidden;
}
.section1 p, ul li {
  font-size: 1.1em;
  color: black;
}
.section1 h2, .section1 h3 {
  font-size: 1.8em;
  color: black;
  font-weight: normal;
  padding-top: 1em;
  padding-bottom: 1em;
}
.section1 h3 {
  font-size: 1.6em;
}
.section1 h4 {
  font-size: 1.2em;
  color: black;
  padding-bottom: 1em;
  padding-top: 1em;
}
.section1 h5, .section1 h6, {
  font-size: 1em;
}
.section1 a {
  color: black;
  text-decoration: underline;
  outline: none;
  font-size: 1em;
}
.section1 a:hover {
  color: grey;
}
.section1 p:last-child {
  padding-bottom: 3em;
}
/* The next two styles will display or hide <section> tags that belong to the .section1
class based on their selection state set by the poet.js program */
section .section1[state=selected] {
  opacity: 1;
  z-index: 1;
}
section .section1[state=unselected] {
  z-index: 0;
  opacity: 0;
}
/* 
Use these next styles for any sub-navigation you might have inside the sections 
<h3> tags inside <section> tags used to automatically build the sub-navigation bar.
To prevent the sub-navigation bar from displaying, use this:

section nav
{
  display: none;
}
*/
.section1 nav {
  background-color: #2E2E2E;
  width: 12%;
  height: 99%;
  padding-left: 1%;
  padding-right: 2%;
  padding-bottom: 1%;
  top: 0%;
  left: 11%;
  position: fixed;
  opacity: 0.1;
  overflow-y: scroll;
  overflow-x: hidden;
  color: white;
  font-size: 1em;
  outline: none;
  text-decoration: none;
  transition: left 0.2s, opacity 0.2s;
  -moz-transition: left 0.2s, opacity 0.2s;
  /* Firefox 4 */
  -webkit-transition: left 0.2s, opacity 0.2s;
  /* Safari and Chrome */
  -o-transition: left 0.2s, opacity 0.2s;
  /* Opera */
  -ms-transition: left 0.2s, opacity 0.2s;
  /* IE */
  /* Prevent Safari flickering transition bug */
  -webkit-backface-visibility: hidden;
}
.section1 nav a {
  text-decoration: none;
  font-size: 1em;
}
.section1 nav:hover {
  left: 23%;
  opacity: 1;
}
.section1 nav a:hover {
  color: #eee8aa;
}
/* Prevent deep sub-section navigation bars from displaying, if there are any */
 .section2 nav, .section3 nav, .section4 nav, .section5 nav {
  display: none;
}
/* 
If you need to style an individual section that contains the 
page content, it will have the same id name as that page's url location hash.
For example, here's how to style a section that has the url #songsofthepixies:

#songsofthepixies
{
  background-color: red;
}
*/

/* Hidden Content */
 .x {
  display: none;
}
/*
Hidden content

If a headig is given a class called "x", in the 
markdown document, the content won't appear in the navigation bar.

** Unlinked Content [x] **

This is translated into the following HTML

<h2 class="x">Unlinked Content</h2>

The tree.js file will wrap an <section> tag around all the content that belongs
to that heading, to make a new tag that looks something like this:

<section class="x" id="unlinkedcontent">

(The id will be the same as <h2> title, except in lower case without spaces or punctuation.)
That means you can selectively display this content depending on user interaction.
This is the basis for creating complex user interfaces.
To see this in action, uncomment the next section of css code and 
reload the index.html page.
*/

/*
#unlinkedcontent
{
  z-index: 2000;
  left: 35%;
  top: 25%;
  width: 50%;
  height: 50%;
  background-color: rgba(0, 0, 0, 0.8);
  display: block;
  opacity: 100;
  padding: 1em;
  -moz-box-shadow:    5px 5px 5px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
  box-shadow:         5px 5px 5px rgba(0, 0, 0, 0.5); 
}

#unlinkedcontent *
{
  font-size: 1.2em;
  line-height: 1.4em;
  color: white;
}

#unlinkedcontent h2
{
  font-size: 1.4em;
  padding-top: 0;
  display: block;
}
*/

/* Responsive design styles */

/* Styles for screens under 1150px */
 @media all and (max-width: 1150px) {
  h1 {
    font-size: 1.4em;
  }
}
/* Styles for screens under 850px */
 @media all and (max-width: 850px) {
  /*Make fonts smaller*/
  .section0 nav h2, .section1 h2 {
    font-size: 1em;
  }
  .section1 h3, .section0 nav a {
    font-size: 0.9em;
  }
  .section1 h4 {
    font-size: 0.875em;
  }
  .section1 p, section li {
    font-size: 0.875em;
  }
  /* Move the title heading from the side to the top*/
  .section0 nav {
    width: 20%;
    height: 80%;
    top: 20%;
    left: 0%;
  }
  header {
    height: 20%;
    width: 20%;
    padding-left: 2%;
    padding-right: 2%;
    z-index: 2;
  }
  h1 {
    top: 0.5em;
    left: 1em;
    font-size: 1.6em;
    padding: 0;
    margin:0;
    width: auto;
    height:auto;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
  }
  .section1 nav {
    display: none;
  }
  .section1 img {

    max-width: 100%;
  }
  .section0 h1 {
    display:none;
  }
}