$border-color: #CCC
$border-style: 1px solid $border-color
$highlight-color: #F0F0FF
$margin-size: 3px


/* layout

body 
  padding-left: $margin-size
  padding-right: $margin-size
#table-of-contents, 
#main-text, 
#figure-list 
  position: absolute
  height: 100%
  overflow: auto
  border-top: $border-style
  margin-top: $margin-size
#table-of-contents 
  width: 220px
  padding-top: 20px
  border-left: $border-style
  border-right: $border-style
  margin-left: $margin-size
#main-text 
  width: 450px
  background: white
  padding: 0px 50px 0px 20px
  border-left: $border-style
  border-right: $border-style
  margin-left: $margin-size
#figure-list 
  border-left: $border-style
  border-right: $border-style
  margin-right: $margin-size
  margin-left: $margin-size


/* navbar and menu icon
$line-color: black
$back-color: white
#navbar
  position: absolute
  overflow: hidden
  height: 25px
  line-height: 25px
  width: 100%
  white-space: nowrap
#toc-trigger 
  float: left
  cursor: pointer
  margin-right: 1em
  margin-left: 0em
  padding-top: 5px
  padding-bottom: 5px
  height: 15px
#hamburger
  width: 25px
  height: 15px
  background: linear-gradient(to bottom, $line-color, $line-color 20%, $back-color 20%, $back-color 40%,  $line-color 40%, $line-color 60%, $back-color 60%, $back-color 80%, $line-color 80%, $line-color 100%)
#navbar
  border-bottom: 1px solid $border-color
  padding-top: 10px
  padding-bottom: 10px
  padding-left: 20px
  text-transform: uppercase
  border-bottom: $border-style
  margin-top: $margin-size
  margin-left: $margin-size
  margin-right: $margin-size
  padding-left: 20px
  border-top: $border-style
  border-left: $border-style
  border-right: $border-style



/* document font styles
body
  font-family: Garamond, serif
  letter-spacing: 0.05em
  font-size: 16px
  color: 0
  line-height: 1.3em 
a, a:link, a:visited 
  color: #333 
  text-decoration: underline 
ul 
  list-style-type: dot
h1, h2, h3, h4, h5, h6, h7
  font-family: Cardo, Palatino, serif
  color: #333
  letter-spacing: 0.1em
  font-weight: 300
  line-height: 1.1em 
  margin-top: 2em
  margin-bottom: 0 
  text-transform: uppercase
h1 
  font-size: 27px
  letter-spacing: 0.1em
  margin-top: 100px
  margin-bottom: 0em 
h2
  font-size: 20px
  border-bottom: $border-style
h3, h4, h5, h6, h7 
  font-size: 16px

blockquote 
  border-left: $margin-size solid #DDD
  margin-left: 0
  padding-left: 2em
  color: #888 

code 
  padding: 1px 4px 
pre 
  padding: $margin-size 20px 
code, pre 
  overflow: auto
  background-color: #F9F9F9
  border: 1px solid #DDD
  border-radius: $margin-size
  font-style: normal
  color: #333
  font-family: Courier, monospace;
  font-size: 12px 
  line-height: 1.5em 



/* supplescroll override styles
#table-of-contents 
  padding-left: 20px
  padding-right: 50px
  text-transform: uppercase
  font-size: 12px
  a 
    border: none
    text-decoration: none
  .toc
    h1, h2, h3, h4, h5, h6, h7
      line-height: 1.2em
      border: none
      text-transform: uppercase
    a h1
      border: none
    .active 
      text-decoration: underline
      background-color: transparent

#main-text
  a.figlink.active
    background-color: $highlight-color
    &:link, &:visited
      color: #666
  .breadcrumb
    margin-top: 0.5em
    text-transform: uppercase
    font-size: 12px
  .fig-in-text
    pre, code
      border: 1px solid #CCE
      background-color: $highlight-color
    font-style: italic
    code, pre
      letter-spacing: 0.05em
    background-color: $highlight-color
    padding: 2*$margin-size
    img
      padding: 10px 
      width: 100%
  .timestamp 
    margin-top: 6em
    text-align: right
    border-top: 1px solid #CCC

#figure-list
  line-height: 1.2em
  font-style: italic
  code, pre
    letter-spacing: 0.05em
  .fig-in-figlist
    border-top: $border-style
    border-bottom: $border-style
    margin-top: $margin-size
    margin-bottom: $margin-size
    padding-left: 20px
    padding-right: 50px
  .active
    background-color: $highlight-color
    color: #666
    pre, code 
      border: 1px solid #CCE
      background-color: $highlight-color
  .reference
    font-style: normal
    font-size: 16px
    margin-bottom: 0.4em
    text-indent: -1em
    margin-left: 1em


@media screen and (max-width: 1200px) 
  h1 
    margin-top: 2em
  h2 
    font-size: 18px
  h3, h4, h5, h6, h7 
    font-size: 14px
  


@media screen and (max-width: 480px) 
  h1 
    margin-top: 2em
  h2 
    font-size: 14px
  .fig-in-text 
    display: block

