@import base.sass


$brown: #201a11
$orange: #b53a04

*:focus
  outline: $orange dotted thin

body
  background: $brown

a
  text-decoration: none
  color: $orange
  &:visited
    color: white
    text-decoration: none
  &:hover
    color: white
    text-decoration: none

header[role="banner"]
  border-bottom: #cccccc 1px solid
  margin-bottom: 1em
  a
    color: white !important
    &:hover
      color: $orange unquote("!important")
  h1
    background: url('../img/tree-dark.png') left bottom no-repeat !important
  h2
    background: url('../img/text-dark.png') left bottom no-repeat !important

      
#breadcrumbs
  color: white
  a
    color: white
    &:hover
      color: $orange
article[role="main"] .geo a
  color: white
article[role="main"] .geo a:hover
  color: $orange
footer
  color: #cccccc
  a
    color: #cccccc !important
    &:hover
      color: $orange !important

img
  &.postpic, &.postpicright
    border: none
  &.picfull
    border: none

#post-body
  color: #cccccc

aside, header
  color: #cccccc

aside section
  a
    color: #cccccc !important
    &:hover
      color: $orange !important

#post-metadata
  border-top: #555555 1px dotted
  border-bottom: #555555 1px dotted
  p
    color: #cccccc

.addendum dt
  margin-left: -30px !important

h4 a.disqus-link-count
  color: #cccccc !important

#writing-detail
  img
    border: none
  .legend
    padding: 8px


#parks article
  position: relative
  display: block
  margin: 0 0 2em 0
  h1
    display: block
    background: $brown
    +transparent_class
    color: white
    margin: 0 0 0 10px
    width: 100%
    text-align: left
    
  .figure
    position: relative
    border: none
  .legend 
    position: relative
    width: 100%
    padding: 0
    margin: 0
    h2
      font: normal .875em Helvetica, Verdana, sans-serif
      color: white
      margin: 0 0 1.3em 1em

  .buttons
    display: block
    padding: 0
    background: $brown
    font-size: 10px
    line-height: 1em
    color: white
    text-align: center
    text-transform: uppercase
    margin: 0 auto
    li
      display: inline
      margin: 0 .25em
      font: normal 1em Helvetica, Verdana, sans-serif
    a
      font-weight: bold
    

  .map-container
    width: 469px
    height: 392px
    position: absolute
    right: 20px
    bottom: 60px
    z-index: 2000
    margin: 0
    padding: 0
    background: url("../img/mapbg-dark.png") no-repeat top left
  .map-wrapper
    width: 400px
    height: 328px
    margin: 37px 0 0 44px

  .meta
    height: 0
  .more-container
    width: 405px
    height: 260px
    position: absolute
    right: -30px
    bottom: 40px
    z-index: 2000
    background: url("../img/parkbg.png") no-repeat top left
    dl
      margin-top: 45px
      margin-left: 45px
      dt,dd
        font-size: 0.9em
        line-height: 25px
        margin: 4px 0
        font-family: Helvetica, Verdana, sans-serif
        color: white
      dt
        clear: left
        float: left
        width: 65px
        //border-bottom: 1px solid #999
        font-weight: bold
        line-height: 25px
        font-size: 0.7em
        text-transform: uppercase
      dd
        float: left
        width: 250px
        overflow: hidden
        //border-bottom: 1px solid #999
        a:hover
          color: $orange


@media only screen and (min-width: 800px)
  #parks article
    h1
      margin: 0
      font-size: 2em
      padding-left: .25em
      position: absolute
      top: 10px
      left: 10px
      line-height: 2em
      z-index: 1000
    .legend 
      position: absolute  
      padding: .25em 1em
      height: 4em
      h2
        float: left
        font-size: 1.2em
        margin: 0
        line-height: 2.6em
    .buttons
      +transparent_class
      float: right
      margin: 2em 2em 0 0
      a
        padding: .875em 1.75em .75em
        background: #463215
        color: #fff
        -moz-border-radius: 25px
        -webkit-border-radius: 25px
        border-radius: 25px
      a:hover
        background: $orange
        color: white   
  
    
  #post-body
    .legend
      width: 100% !important

.ie :focus
  outline: 0
.ie header[role="banner"]
  border-bottom: #cccccc 1px solid !important
  h2
    background: url('../img/text-dark.png') left bottom no-repeat !important
.ie #parks .buttons 
  a
    padding: 10px
    line-height: 2em