codecombat/app/styles/common/top_nav.sass

@import "../bootstrap/variables"

#top-nav
  a.navbar-brand
    padding: 4px 20px 0px 20px
    margin-left: -20px

  .navbuttontext, .fancy-select .trigger
    font-size: 20px
    font-weight: 400
    letter-spacing: 1px

  .navbuttontext-account
    display: inline-block
    padding: 0 5px 0 0
    margin: 0 5px 0 0
    height: 18px

  .account-settings-image
    width: 18px
    height: 18px

  .glyphicon-user
    font-size: 16px
    margin-right: 5px

  //#9F915B
  //#E4CF8C
  .dropdown
    .dropdown-menu
      right: 0
      left: auto
      width: 280px
      padding: 0px

      li.user-dropdown-header
        background: #E4CF8C
        height: 175px
        padding: 10px
        text-align: center
        color: black
        border: #32281E 1px solid

        img
          border: #e3be7a 8px solid
        p
          margin-top: 10px
          text-shadow: 2px 2px 3px white

      li.user-dropdown-body
        color: black
        padding: 15px

        &:after
          display: table
          content: " "
          clear: both

      li.user-dropdown-footer
        padding: 10px
        margin-left: 0px

        &:after
          display: table
          content: " "
          clear: both

        .btn
          margin: 0px

        .btn-flat
          border: #ddd 1px solid
          border-radius: 0px

  .nav.navbar-link-text, .nav.navbar-link-text > li > a
    font-weight: normal
    font-size: 25px
    letter-spacing: 2px
    color: $white
    &:hover
      color: #f8e413

  .navbar-link-text > a:hover
    background: darken($body-bg, 3%)

  .btn, .btn-group, .fancy-select
    margin-top: 13px

  .nav-tabs > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus
    background-color: #eee

  .nav-tabs > li
    cursor: pointer

  font-size: 25px
  a:not(.btn)
    line-height: 25px

  .btn
    font-size: 20px
    padding: 4px 12px

  .btn, .fancy-select
    float: right
    margin-left: 10px
    line-height: 20px

  select
    opacity: 0

  .fancy-select
    .trigger
      padding: 5px 25px 3px 10px
      width: auto
      &:after
        top: 13px
      max-width: 140px

  .nav
    margin-bottom: 0
    
  div.fancy-select
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)
    div.trigger
      background-color: #9d8f5a
      background-image: linear-gradient(to bottom, #a4955e, #948754)
      background-repeat: repeat-x
      border: 1px solid #cccccc
      border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25)
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05)
      color: white
      &:after
        border-top-color: white
      &.open
        background-color: #8B7F51
        color: #ebebeb
        &:after
          border-top-color: #ebebeb
    ul.options
      max-height: 415px
      background-color: #9d8f5a
      right: 0
      left: auto
      overflow-x: hidden
      &.open
        top: 36px
      li
        color: #ebebeb
        padding: 8px 20px


#mobile-nav
  display: none
@media only screen and (max-width: 800px)
  #top-nav
    display: none
  #mobile-nav
    display: inline
    a.navbar-brand
      padding: 4px 20px 0px 20px
  
    button.navbar-toggle
      background: #483a2d
      border: 2px solid #2f261d
    span.icon-bar
      background: #F9E612
    
    ul li
      font-family: 'Bangers', cursive
      font-weight: normal
      color: #fff
      font-size: 25px
      margin-top: 5px
      margin-bottom: 5px
    .header-font
      color: #fff
    .footer-link-text
      width: 100%
      display: ineline