@import compass/utilities/general/reset.sass

// Override !column_default with the number of top-level navigation columns you need
//  - not including your home page
!column_default ||= 4

=slickmap(!body_selector = "body", !columns = !column_default)
  #{!body_selector}
    +nested-reset
    +slickmap-body
    @if !body_selector != "body"
      +slickmap-defaults(!columns)
  @if !body_selector == "body"
    +slickmap-defaults(!columns)

=slickmap-primary-nav(!columns = !column_default)
  margin: 0
  float: left
  width: 100%
  li
    width= 100/!columns + "%"

  &.col1 li
    width: 99.9%
  &.col2 li
    width: 50.0%
  &.col3 li
    width: 33.3%
  &.col4 li
    width: 25.0%
  &.col5 li
    width: 20.0%
  &.col6 li
    width: 16.6%
  &.col7 li
    width: 14.2%
  &.col8 li
    width: 12.5%
  &.col9 li
    width: 11.1%
  &.col10 li
    width: 10.0%    

  li
    ul li
      width: 100% !important

    a:link:before, a:visited:before, span:before
      color: #78a9c0

    // Second Level
    li
      width: 100%
      clear: left
      margin-top: 0
      padding: 10px 0 0 0
      background= slickmap_image("vertical-line.png") "center" "bottom" "repeat-y"
      a, span
        background-color: #cee3ac
        border-color: #b8da83
        &:hover
          border-color: #94b75f
          background-color: #e7f1d7
      &:first-child
        padding-top: 30px
      &:last-child
        background= slickmap_image("vertical-line.png") "center" "bottom" "repeat-y"

      a:link:before, a:visited:before, span:before
        color: #8faf5c

      // Third Level
      ul
        margin: 10px 0 0 0
        width: 100%
        float: right
        padding: 9px 0 10px 0
        background= #fff slickmap_image("L3-ul-top.png") "center" "top" "no-repeat"

      li
        background= slickmap_image("L3-center.png") "left" "center" "no-repeat"
        padding: 5px 0
        a, span
          background-color: #fff7aa
          border-color: #e3ca4b
          font-size: 12px
          padding: 5px 0
          width: 80%
          float: right
          &:hover
            background-color: #fffce5
            border-color: #d1b62c
        &:first-child
          padding: 15px 0 5px 0
          background= slickmap_image("L3-li-top.png") "left" "center" "no-repeat"
        &:last-child
          background= slickmap_image("L3-bottom.png") "left" "center" "no-repeat"
        a:link:before, a:visited:before, span:before
          color: #ccae14
          font-size: 9px

  li
    float: left
    background= slickmap_image("L1-center.png") "center" "top" "no-repeat"
    padding: 30px 0
    margin-top: -30px
    &:last-child
      background= slickmap_image("L1-right.png") "center" "top" "no-repeat"
    a, span
      margin: 0 20px 0 0
      padding: 10px 0
      display: block
      font-size: 14px
      font-weight: bold
      text-align: center
      color: black
      background= #c3eafb slickmap_image("white-highlight.png") "top" "left" "repeat-x"
      border: 2px solid #b5d9ea
      -moz-border-radius: 5px
      -webkit-border-radius: 5px
      -webkit-box-shadow: rgba(0,0,0,0.5) 2px 2px 2px
      -moz-box-shadow: rgba(0,0,0,0.5) 2px 2px 2px
      &:hover, span
        background-color: #e2f4fd
        border-color: #97bdcf

=slickmap-primary-nav-home    
  display: block
  float: none
  background= #fff slickmap_image("L1-left.png") "center" "bottom" "no-repeat"
  position: relative
  z-index: 2
  padding: 0 0 30px 0

=slickmap-utility-nav
  float: right
  max-width: 50%
  margin-right: 10px
  li
    float: left
    margin-bottom: 10px
    a, span
      margin: 0 10px 0 0
      padding: 5px 10px
      display: block
      border: 2px solid #e3ca4b
      font-size: 12px
      font-weight: bold
      text-align: center
      color: black
      background= #fff7aa slickmap_image("white-highlight.png") "top" "left" "repeat-x"
      -moz-border-radius: 5px
      -webkit-border-radius: 5px
      -webkit-box-shadow: rgba(0,0,0,0.5) 2px 2px 2px
      -moz-box-shadow: rgba(0,0,0,0.5) 2px 2px 2px
      &:hover
        background-color: #fffce5
        border-color: #d1b62c
    a:link:before, a:visited:before, span:before
      color: #ccae14
      font-size: 9px
      margin-bottom: 3px

// General Styles
=slickmap-body
  background: white
  color: black
  padding: 40px
  font-family: Gotham, Helvetica, Arial, sans-serif
  font-size: 12px
  line-height: 1

=slickmap-defaults(!columns = !column_default)
  .sitemap
    margin: 0 0 40px 0
    float: left
    width: 100%
  h1
    font-weight: bold
    text-transform: uppercase
    font-size: 20px
    margin: 0 0 5px 0
  h2
    font-family: "Lucida Grande", Verdana, sans-serif
    font-size: 10px
    color: #777777
    margin: 0 0 20px 0
  a, span
    text-decoration: none
  a:link:before, a:visited:before, span:before
    display: block
    text-transform: uppercase
    font-size: 10px
    margin-bottom: 5px
    word-wrap: break-word
  a:link:before, a:visited:before
    content: " "attr(href)" "
  span:before
    content: " "attr(title)" "
  ol, ul
    list-style: none
 
  #primaryNav
    +slickmap-primary-nav(!columns)
    li#home
      +slickmap-primary-nav-home
  
  // Utility Navigation
  #utilityNav
    +slickmap-utility-nav