/** reset.sass **/

html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
  margin: 0;
  padding: 0; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

a {
  outline: 0;
  text-decoration: none; }


/** book_notes.sass **/

body {
  font-family: "proxima-nova", "Helvetica", "Avenir", "Arial", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 90%;
  background: #eee; }

header {
  background-color: rgba(46, 48, 58, 0.96);
  position: fixed;
  top: 0;
  left: 0;
  padding: 1.6em 0;
  width: 100%;
  z-index: 9999; }
  header h1 {
    text-align: center;
    font-size: 1.4em;
    line-height: 1.2em; }
    header h1 .book-notes {
      color: #80D15A;
      text-transform: uppercase; }
    header h1 .by {
      font-weight: normal;
      font-style: italic;
      font-size: 0.75em;
      color: #bbb; }
      header h1 .by a {
        color: #ddd; }

#main {
  margin-top: 5em;
  padding: 40px 0;
  background-color: #fff; }
  #main article {
    position: relative;
    max-width: 620px;
    padding: 0 1em;
    margin: 0 auto; }
  #main img {
    max-width: 100%;
    display: block; }
  #main p {
    margin-bottom: 1em; }
  #main a {
    color: #666;
    text-decoration: underline; }
    #main a:hover {
      color: #999; }
  #main ul, #main ol {
    margin-left: 2em;
    margin-bottom: 1em; }
  #main ol ol {
    list-style-type: lower-roman; }
  #main li {
    margin-bottom: 0.5em; }
  #main h1, #main h2, #main h3, #main h4, #main h5, #main h6 {
    margin-bottom: 1em;
    padding-top: 1em; }
  #main h1 {
    font-size: 2.2em; }
  #main h2 {
    font-size: 1.8em; }
  #main h3 {
    font-size: 1.5em; }
  #main h4 {
    font-size: 1.2em; }
  #main h5 {
    font-size: 1em; }
  #main blockquote {
    border-left: 5px solid #aaa;
    padding-left: 1em;
    font-family: Georgia, serif;
    font-style: italic;
    line-height: 1.4;
    margin: 1.5em 0;
    color: #666; }
  #main hr {
    border: solid #f4f3f3;
    border-width: 5px 0 0;
    clear: both;
    margin: 40px auto;
    width: 60%;
    height: 1px;
    border-radius: 5px;
    max-width: 430px;
    color: #f4f3f3; }
  #main .annotation {
    font-size: 90%; }
    #main .annotation mark {
      background: #eee;
      display: block;
      padding: 10px 12px; }
  #main li mark {
    margin-left: -2em; }
  #main li li mark {
    margin-left: -4em; }
  #main li li li mark {
    margin-left: -6em; }
  #main .highlighted {
    background: #FFF56E;
    outline: 5px solid #FFF56E; }

@media screen and (min-width: 980px) {
  #main {
    padding-left: 40px;
    margin-left: 320px;
    margin-right: 0; }
    #main article {
      margin: 0;
      padding: 0; }
    #main .annotation {
      position: absolute;
      width: 220px;
      left: -320px;
      background: white;
      padding: 10px; }
      #main .annotation:after {
        left: 100%;
        top: 50%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
        border-color: rgba(255, 255, 255, 0);
        border-left-color: #fff;
        border-width: 10px;
        margin-top: -10px; }
      #main .annotation mark {
        background: none;
        padding: 0; }
    #main li mark, #main li li mark, #main li li li mark {
      margin: 0; } }