main.styl

body
  background-color: #eee
  padding: 20px

a
  &, &:link, &:visited, &:hover, &:active
    text-decoration: none

  &.underline
    text-decoration: underline

  &.anchor
    display: block
    position: relative
    top: -60px
    visibility: hidden

p
  color: #444

img
  margin: 5px auto
  display: block
  max-width: 570px

table
  margin: 15px 0px

th, td
  padding: 0 10px

hr
  border-top: 1px solid #bbb

.text-highlight
  color: #009900

clearfix()
  &:after
    content: " "
    visibility: hidden
    display: block
    height: 0
    clear: both

.clearfix
  clearfix()


// generator of property literals, e.g. ".w33 {width: 33px}"
literal(sel, prop, val)
  num = unit(val, '')
  if unit(val) == ''
    .{sel + num}
      {prop}: val px
  else if unit(val) == 'px'
    .{sel + num}
      {prop}: val
  else if unit(val) == '%'
    .{sel + num}p
      {prop}: val

literals = ()

width-literals = 181 185 194 240 249 295 345 370 460 544 560
push(literals, {s: 'w', p: 'width', l: width-literals})

height-literals = 45 50 123 164 180
push(literals, {s: 'h', p: 'height', l: height-literals})

margin-top-literals = -25 20
push(literals, {s: 'mt', p: 'margin-top', l: margin-top-literals})

margin-left-literals = 8 50 495
push(literals, {s: 'ml', p: 'margin-left', l: margin-left-literals})

margin-bottom-literals = 2 32
push(literals, {s: 'mb', p: 'margin-bottom', l: margin-bottom-literals})

margin-right-literals = 4
push(literals, {s: 'mr', p: 'margin-right', l: margin-right-literals})

padding-top-literals = 45
push(literals, {s: 'pt', p: 'padding-top', l: padding-top-literals})

padding-bottom-literals = 45
push(literals, {s: 'pb', p: 'padding-bottom', l: padding-bottom-literals})

for lit in literals
  for val in lit.l
    literal(lit.s, lit.p, val)


#navigation-bar
  position: fixed
  top: 0
  left: 0
  right: 0
  height: 50px
  border-bottom: 1px #ddd solid
  background-color: white
  z-index: 10

  a
    &, &:visited
      color: #999

    &:hover
      color: #444

  .navigation-menu
    position: relative
    float: left
    display: inline
    padding: 13px 5px
    vertical-align: baseline

    > a
      display: block
      position: relative
      padding: 2px 10px
      width: 100%
      box-sizing: border-box

      &:hover
        padding-left: 5px
        border-left: 5px #ccc solid

    > ul
      display: none

    &:hover > ul
      display: block

    ul.menu-dropdown
      position: absolute
      left: 0px
      top: 48px
      width: 180px
      padding: 3px
      background-color: white

      > li
        float: left
        position: relative
        display: inline
        width: 100%
        padding: 3px 0px

        > a
          display: block
          position: relative
          padding: 2px 10px
          width: 100%
          box-sizing: border-box

          &:hover
            padding-left: 5px
            border-left: 5px #ccc solid

#navigation-bar-shadow
  position: relative
  margin-bottom: 50px

#content
  max-width: 600px
  min-width: 400px
  display: block
  margin: 0px auto

  #home-page &
    max-width: 735px
    margin-top: -20px
    margin-bottom: -20px

.fixed-cover
  position: fixed
  top: 50px
  bottom: 0
  overflow: scroll

  #content-fixed
    position: relative
    max-width: 600px
    min-width: 400px
    display: block
    padding-top: 10px

#content-images
  > img
    max-width: 100%

    &:first-child
      margin-top: 0

    &:last-child
      margin-bottom: 0

  > a > img
    max-width: 100%

.overlay
  width: 100%

  > .fader-top
    position: fixed
    background-color: rgba(255,0,0,0)
    background: linear-gradient(to bottom, rgba(238, 238, 238, 1), rgba(238, 238, 238, 0))

  > .fader-bottom
    position: fixed
    bottom: 0
    background-color: rgba(255,0,0,0)
    background: linear-gradient(to top, rgba(238, 238, 238, 1), rgba(238, 238, 238, 0))

.img-container
  clearfix()
  margin-left: auto
  margin-right: auto

  .img-subcontainer
    display: inline-block
    float: left

.image-caption
  text-align: center
  margin-bottom: 10px
  color: #999

ul.no-bullets-standard > li
  display: inline

  > *:last-child
    margin-bottom: 10px

.as-of
  margin-left: 40px
  font-size: 18px
  font-weight: 700
  vertical-align: super
  color: yellow
  background-color: red
  border: 4px solid red

.vision-statement
  padding: 0 15px

  p
    font-size: 12px
    color: #888
    font-style: italic

.paper
  .paper-title
    font-weight: 700
    font-style: italic

  .paper-authors
    color: #777

  .paper-status
    color: #777
    font-style: italic

    .paper-awards
      margin-left: 25px
      color: #333
      font-weight: 700
      font-style: normal

      &::before, &::after
        content: "*"

    .links
      margin-left: 25px
      a
        margin-left: 5px
        font-style: normal

.press-list
  li
    color: #888
    margin-bottom: 10px
    padding-left: 40px
    text-indent: -40px

.salon-list
  .salon-summary
    display: inline

    > *:last-child
      margin-bottom: 10px

    .date
      color: #777
      font-style: italic