$dark-highlight-color: #EEF
$border-color: #CCC
$text-color: #333
$highlight-background: #EEF
$medium-highlight-color: #E8E8FF
$highlight-link-color: #99A

@mixin caption
  font-size: 12px
  text-transform: none
  line-height: 1.2em
  code, pre
    font-size: 12px
    text-transform: none
  a, a:link, a:visited,
    color: $highlight-link-color
  img
    padding-top: 10px
    display: block

@mixin caption-highlight
  background-color: $medium-highlight-color
  color: $text-color
  pre, code 
    border: 1px solid #BBC
    background-color: $highlight-background
    color: #666



/* document fonts
body
  background-color: #fcfcfc
  font-family: "Lato","proxima-nova","Helvetica Neue",Arial,sans-serif
  font-size: 16px
  line-height: 1.5em
  color: #404040
blockquote 
  font-family:  "Incosolata","Consolata","Monaco",monospace
  font-size: 12px
  line-height: 1.5em
  border-left: 5px solid #CCC
  margin-left: 0
  padding-left: 0.8em
  color: #888 
a
  text-decoration: none
  &:link
    color: #2980b9
  &:visited
    color: #9b59b6
h1, h2, h3, h3, h4, h5, h6, h7
  font-family: "Roboto Slab","ff-tisa-web-pro","Georgia",Arial,sans-serif
  font-size: 16px
  text-transform: uppercase
  margin: 0
  padding-top: 1.5em
  padding-bottom: 0em
  font-weight: bold
  line-height: 1.2em
hr
  padding-top: 0.5em
  padding-bottom: 0.5em
  border: 0px
  background: 0
  border-top: 1px solid #CCC
  height: 1px
h1
  font-size: 30px
h1:first-of-type
  padding-top: 0
h2
  font-size: 16px
code 
  padding: 1px 4px 
pre 
  padding: 5px 20px 
code, pre 
  overflow: auto
  font-family:  "Incosolata","Consolata","Monaco",monospace
  background-color: #FFF
  border: 1px solid #CCC
  border-radius: 5px
  color: #888
  font-size: 12px 
  line-height: 1.5em 


/* LAYOUT
#table-of-contents, 
#main-text,
#figure-list
  position: absolute
  height: 100%
  overflow: auto
#table-of-contents
  width: 300px
  padding-top: 25px
  background-color: #343131
#main-text
  width: 450px
  padding-top: 25px
  padding-left: 50px
  padding-right: 50px
#figure-list
  background-color: #edf0f2


/* font override

#table-of-contents
  font-size: 12px
  font-weight: normal
  line-height: 1.5em
  padding-top: 0
  padding-bottom: 0
  .toc 
    padding-top: 1em

    h1, h2, h3, h4, h5, h6, h7
      font-family: "Lato","proxima-nova","Helvetica Neue",Arial,sans-serif
      text-transform: none
      color: #b3b3b3
    h1, h2
      padding-top: 4px
    a
      padding-left: 20px
      padding-right: 20px
      &.active
        background-color: #5C5A5A

#toc-header
  font-size: 16px
  background-color: #2980b9
  &, a:link, a:visited
    color: #fcfcfc
  font-weight: 100
  text-align: center
  padding-top: 0.5em
  padding-bottom: 0.5em

#main-text
  a.figlink.active 
    padding: 4px 0px
    background-color: $highlight-background
  .timestamp 
    margin-top: 6em
    text-align: right
    border-top: 1px solid #CCC
  .fig-in-text
    @include caption
    @include caption-highlight
    padding: 10px 10px
    img
      width: 100%

#figure-list 
  .fig-in-figlist
    @include caption
    &.active
      @include caption-highlight
    padding: 20px 10px
  code, pre
    background-color: #F8F8F8

@media (max-width: 1200px)
  #main-text
    padding-left: 15px
    padding-right: 15px
  h1
    font-size: 25px


@media (max-width: 480px)
  h1
    font-size: 20px
    padding-top: 70px
  .fig-in-text
    display: block


