codecombat/app/styles/common/site-chrome.sass

@import "app/styles/bootstrap/variables"
@import "app/styles/mixins"

.site-chrome
  background-color: white
  &.show-background
    background: url(/images/pages/base/background.jpg) top center no-repeat    
    background-color: rgb(150,202,68)
  padding-top: 185px
  max-width: 1920px
  margin: 0 auto

  //- Nav
  
  #site-nav
    position: absolute
    background: url(/images/pages/base/nav_background.png) top center no-repeat
    left: 0
    top: 56px
    right: 0
    height: 144px
    text-align: center
    min-width: 1024px
    z-index: 1

    #nav-logo
      position: absolute
      margin-right: auto
      margin-left: auto
      left: 0
      right: 0
      top: -45px
      
    #site-nav-links
      position: absolute
      bottom: 21px
      left: 0
      right: 0
    
    a
      color: rgb(158,135,119)
      &:hover
        color: $white

    a, button, select
      font-size: 18px
      text-transform: uppercase
      font-family: Open Sans Condensed
      margin: 0 7px
      
    button, select
      position: relative
      top: -3px
      height: 32px
      color: #444
      
    .signup-button
      background: red
      color: white
      
    .login-button
      background: white
      color: black

    .language-dropdown
      width: auto
      display: inline-block
      
    #site-nav-smooth-edge
      position: absolute
      left: 0
      right: 0
      bottom: 0
      height: 5px
      
    
    //- Account menu

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

      .dropdown-menu
        //left: auto  // this busts it, not sure why it's in
        width: 280px
        padding: 0px
        border-radius: 0px
        font-family: Open Sans Condensed
        font-variant: small-caps
  
        > .user-dropdown-header
          position: relative
          background: #E4CF8C
          height: 160px
          padding: 10px
          text-align: center
          color: black
          border-bottom: #32281e 1px solid
          > a:hover
            background-color: transparent
          img
            border: #e3be7a 8px solid
            height: 98px // Includes the border
            &:hover
              box-shadow: 0 0 20px #e3be7a
          > h3
            margin-top: 10px
            text-shadow: 2px 2px 3px white
            color: #31281E
          .user-level
            position: absolute
            top: 73px
            right: 86px
            color: gold
            text-shadow: 1px 1px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black
  
        .user-dropdown-body
          color: black
          padding: 15px
          letter-spacing: 1px
          font: 15px 'Helvetica Neue', Helvetica, Arial, sans-serif
          +clearfix()
  
        .user-dropdown-footer
          padding: 10px
          margin-left: 0px
          font-size: 14px
          +clearfix()
  
          .btn-flat
            border: #ddd 1px solid
            border-radius: 0px
            margin: 0px
      
    
  //- Content
    
  #site-content-area
    background: rgb(240,229,199)
    margin: 0 auto -20px
    width: 1024px
    border: 5px solid rgb(110,88,41)
    padding: 20px 12px

    
  //- Footer
  
  #site-footer
    width: 100%
    height: 130px
    position: relative
    overflow: hidden
    
    // Recycling the nav bar background as a rotated image
    #footer-background
      transform: rotate(180deg)
      margin: 0 auto
      display: block
      
    #footer-links, #footer-credits
      position: absolute
      left: 0
      right: 0
      text-align: center
      
    #footer-links
      top: 20px
      height: 45px
      padding: 11px

      a
        color: rgb(158,135,119)
        font-size: 18px
        text-transform: uppercase
        font-family: Open Sans Condensed
        margin: 0 7px

        &:hover
          color: $white

      .share-buttons
        display: inline-block
        position: relative
        top: 3px
        margin-left: 20px
        
      .share-buttons, .partner-badges
        padding-bottom: 10px
        text-align: center
        @include opacity(0.75)
      
        &.fade-in
          @include opacity(0)
      
        &:hover, &:active
          @include opacity(1)
          @include transition(opacity .10s linear)
      
        .github-star-button
          margin-left: 20px
      
        &>div
          display: inline-block
          vertical-align: top

    #footer-credits
      top: 79px
      height: 50px
      color: rgb(158,135,119)
      font-size: 12px
      
      > *
        margin: 0 15px
        width: 186px
        display: inline-block
      
      #footer-logo
        width: 160px
        
      & > span
        position: relative
        top: 8px

      a
        color: rgb(238,227,131)