/*
based on:
https://github.com/hypertexthero/typography/blob/master/style.css (Public Domain)

some inspiration from yahoo’s: http://purecss.io/, in particular:http://purecss.io/layouts/side-menu/
*/



body{
  width:100%;
  margin:0;
  padding:0;
  background-color: white;
}

/*layout HTML*/

#layoutWrapper{
  padding:0;
  margin:0;
  width:100%; /*important for responsive display,  breakpoint switches this for :auto*/
}

/*general */
/*the normal main container for the content*/
#main, section.level1, section.titlepage { /*main for html, section.level1 for epub*/
  font-size:110%;
  line-height:1.6em;
  margin:0;
  padding:1em;
  margin:auto;
  width:auto;
  max-width:40em;
  max-width:40rem;
  color:rgb(20, 20, 20);
}


#main h1,h2,h3,h4, p, figure, img{
  max-width:100%;
}

a {font-weight:normal; text-decoration:underline;}
a:link {color:#395a7e;}
a:visited {color:#606;}
a:hover {color:#4975a4;}
a:active {color:#4975a4; outline:none; text-decoration:none;}


h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover{
  text-decoration:underline;
}

h1,h2,h3,h4,h5,h6{
  line-height:1.1em;
}

h1.title{
  font-size: 400%;
  text-transform: uppercase;
  color: #395a7e;
  font-weight: normal;
  margin-top:0em;
}

h1 {
  font-size:280%;
  margin:2.5em 0 1em;
  font-weight: normal;
}

section:first-child h1:first-child{
  margin-top:0.5em; /*if the h1 is at the top, then remove the spaceing to top*/
}

h2 {
  font-weight:normal;
  font-size:180%;
  margin:2em 0 0.4em;
}

h3 {
  font-weight:normal;
  text-transform:normal;
  font-size:150%;
  margin:2em 0 0.4em;
  color:#555;
}

h4 {
  font-weight:normal;
  font-size:120%;
  margin:1.5em 0 0.4em;
  color:#555;
}

h5 {
  font-weight:normal;
  font-style:italic;
  font-size:100%;
  margin:1.5em 0 0.4em;
  color:#555;
}

h6 {
  font-weight:bold;
  font-size:90%;
  letter-spacing:0.1em;
  margin:1.5em 0 0.4em;
}

/*link on headline to make the headlines anchor appear in the addressbar*/
a.link-to-self{
  font-size: 0.8em;
  margin-left: 1em;
  color: rgb(57, 107, 165);
  opacity:0.0;
  text-decoration:none;
}

*:hover > a.link-to-self{
  opacity:0.5;
}

a.link-to-self:hover{
  opacity:0.7;
  text-decoration:none;
}

p {
  text-align:left;
  font-size:100%;
  margin:1em 0 0;
}

p + p {
  margin:0;
  text-indent:1.5em;
}

h1+h2, h2+h3, h3+h4{
  margin-top:0.7em;
}


p + ul, p + ol, p + dl {
  margin-bottom:1.5em;
}

blockquote{
  border-left:2px solid #ccc;
  padding-left:1.5em;
  margin:1em 0;
  color:#555;
}

blockquote small{
  display:block;
  line-height:1.7em;
}

blockquote p+p{
  margin-top: 1em;
  text-indent:0em;
}

figure{
  background-color: rgb(255, 255, 255);
  margin: 1em 0 1em 0px;
  box-sizing: border-box;
}

figure>img {
  width: 100%;
  display: block;
  border-bottom: 1px solid rgb(222, 222, 222);

}

figure>figcaption {
  color: #555;
  font-size: 80%;
  margin: 0.33em 0 0 0;
  width: 100%;
  padding-left:0em;
  line-height: 1.45em;
  font-style:normal
}

ul, ol, dl {
  text-align:left;
  padding-left:1.5em;
}

ul li{
  list-style-type: square;
}

dt{
  font-style: italic;
}

dd>p{
  margin-top:0;
}

code {
  font-family:courier, monospace;
}

p > code {
  padding:0.25em;
  background:#eee;
}

pre {
  text-align:left;
  font-size:100%;
}

hr {
  height: 0;
  border: none; /*avoids double border*/
  margin: 2em auto;
  width: 20%;
  border-bottom: 1px solid rgb(207, 207, 207);
}

.footnotes hr{ /*so footnotes are separated by a larger separator*/
  width: 100%;
}