$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
  font-weight: normal
  line-height: 1.2em
  letter-spacing: 0.1em
  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
  pre, code 
    border: 1px solid #BBC
    background-color: $highlight-background

/* 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 
pre code
  border: 0px
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 

#navbar, #table-of-contents, #main-text, #figure-list
  border: 0px

#navbar
  font-family: "Lato","proxima-nova","Helvetica Neue",Arial,sans-serif
  font-size: 16px
  font-weight: normal
  letter-spacing: 0.1em
  background-color: #2980b9
  &, a:link, a:visited
    color: #fcfcfc
  text-align: left
  padding: 10px 20px

#table-of-contents
  padding-top: 25px
  background-color: #343131
  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
      font-size: 12px
      text-transform: none
      font-weight: normal
      letter-spacing: 0.1em
      color: #b3b3b3
      line-height: 1.2em
    h1, h2
      margin-top: 4px
      line-height: 1.2em
    a.active
        background-color: #5C5A5A

#main-text
  padding-top: 25px
  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

#figure-list 
  background-color: #edf0f2
  .fig-in-figlist
    @include caption
    &.active
      @include caption-highlight
  code, pre
    background-color: #F8F8F8
  .reference
    line-height: 1.2em
    margin-bottom: 0.4em
    text-indent: -1em
    margin-left: 1em

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


@media (max-width: 480px)
  h1
    font-size: 20px
    margin-top: 70px


