@import "_mixins/all"

#top
  line-height: 40px
  @include background(linear-gradient(#444, #111))
  font-size: $font-size-normal

  h1
    float: left
    width: 73px
    height: 30px
    margin: 4px 40px 0 22px
    text-indent: -9999px
    background: inline-image('ui/logo.png') no-repeat

  ul
    list-style-type: none

  a, span
    color: $color-link-top
    text-decoration: none

  li
    display: inline-block
    a, span
      display: block
      padding: 0 15px
      &:hover
        color: $color-link-top-highlight

  .profile
    position: relative
    float: right

    .handle
      margin: 0

    .signed-out, .signing-in, .signed-in
      display: none
      padding: 0 15px 0 45px
    .signed-out, .signing-in
      min-width: 110px
    &.signed-out .signed-out
      display: block
    &.signing-in .signing-in
      display: inline-block
    &.signed-in .signed-in
      display: block

    .signing-in
      background: inline-image('ui/spinner.gif') no-repeat 110px 16px

    img
      position: absolute
      top: 7px
      left: 15px
      width: 22px
      height: 22px
      @include border-radius(3px)

    &.signed-in:hover > ul
      display: block

    ul
      display: none
      position: absolute
      z-index: 300
      top: 40px
      width: 100%
      min-width: 145px
      background-color: $color-bg-dropdown
      @include border-bottom-radius(6px)
      @include single-box-shadow(rgba(black, 0.3), 2px, 2px, 10px)

      li
        display: block
        &:last-child a:hover
          @include border-bottom-radius(4px)

      a
        display: block
        padding: 5px 25px 5px 45px
        line-height: 24px
        white-space: nowrap
        &:hover
          background-color: $color-bg-dropdown-highlight

#home #navigation .home,
#stats #navigation .stats,
#profile #navigation .profile
  background-color: $color-bg-link-top
  a
    color: $color-link-top-highlight