index.css.sass

.button
  box-shadow: 0 0 0 7px $clouds
  margin: 7px
  text-transform: uppercase
  font-size: .9em

#logo
  +image-replace('logo.png')
  margin-top: 40px

#personal_options
  position: absolute
  top: 0
  right: 0

#header
  position: relative
  .actions
    +horizontal-list
    margin-top: 45px
    text-transform: capitalize
    font-size: .9em
    ul
      padding: 8px
      background: $clouds
      box-shadow: 0 1px 2px rgba(black, .1)
    li
      margin: 0
      padding: 0
    a
      color: $wetasphalt
      padding: 5px 30px
      background: white
      float: left
      border: 1px solid darken(whitesmoke, 10%)
      border-right-width: 0
      
      &:hover, &:active
        background: lighten(whitesmoke, 2%)
        box-shadow: 0 0 5px rgba(black, .1) inset

    li:last-child a
      border-right-width: 1px

.header_wrapper
  border-top: 6px solid $clouds
  +context('.home_page')
    background: $iceblue image_url('mountains.jpg') repeat-x bottom
    margin-bottom: 70px
    +decorative-content
      +image-replace('tree.png')
      bottom: 15px
      left: 0

#personal_options
  padding: 5px 15px 10px
  background: $clouds
  font-size: .8em
  a:hover
    text-decoration: underline
  nav
    float: right
  .account_menu
    text-transform: capitalize
  .locale_link
    margin-right: 20px

.home_header
  padding-top: 30px
  h1
    text-align: center
    padding-bottom: 40px
  .vimeo
    margin-bottom: -30px
    .vimeo-iframe
      position: relative
      z-index: 20
    +decorative-content(after, false)
      $img: 'shadow-video.png'
      +image-replace($img)
      +move(22px, top)
      right: -25px
      z-index: 1
  .button
    margin-right: 40px


  p.callout
    color: $midnightblue
    font-size: 1.2em
    line-height: 1.3em
    word-spacing: 1px

#footer
  background: $wetasphalt
  color: $clouds
  padding-top: 30px
  padding-bottom: 10px
  .info
    font-size: .9em
    ul
      width: 80%
      box-shadow: 0 0 0 6px rgba(white,.15), 0 1px 2px rgba(black, .1)
    a
      display: block
      color: $wetasphalt
      padding: 10px
      background: white
      border: 1px solid darken(whitesmoke, 10%)
      border-bottom-width: 0
      
      &:hover, &:active
        background: lighten(whitesmoke, 2%)
        box-shadow: 0 0 5px rgba(black, .1) inset

    li:last-child a
      border-bottom-width: 1px
  
.opendata
  ul
    font-size: 1.6em
  .stat-number
    color: $lightblue
    font-weight: bold
    margin-right: .8em