@import "app/styles/mixins"

#game-menu-modal
  
  .close
    // We have to style this indendently because it's not in the header (we don't have a header).
    position: absolute
    top: -5px
    right: 0
    padding: 15px
    font-size: 28px
    background-color: transparent
    z-index: 1

    @include opacity(0.60)

    &:hover
      @include opacity(1)

  // Make room for an overlaid close button in the lower right (we don't have a footer).
  .overlaid-close-button
    position: absolute
    right: 35px
    bottom: 20px
  
  #inventory-view #available-equipment
    bottom: 60px

  .modal-dialog
    margin-top: 0
    width: 963px

  .nav-tabs
    h2
      margin: 0
  
  .tab-pane
    h3:first-child
      margin-top: 0
  
  // http://stackoverflow.com/questions/18432577/stacked-tabs-in-bootstrap-3
  .tabs-left
    > .nav-tabs
      float: left
      width: 185px
      border-bottom: 0

    > .tab-content
      padding: 0px 15px
      margin-left: 185px
   
  .tab-content > .tab-pane, .pill-content > .pill-pane
    display: none
   
  .tab-content > .active, .pill-content > .active
    display: block
   
  .tabs-left
    > .nav-tabs > li
      float: none
   
      > a
        min-width: 74px
        margin-right: 0
        margin-bottom: 0
   
  .tabs-left > .nav-tabs
    border-right: 1px solid #ddd
   
    > li > a
      margin-right: -1px
      -webkit-border-radius: 4px 0 0 4px
      -moz-border-radius: 4px 0 0 4px
      border-radius: 4px 0 0 4px
   
      &:hover, &:focus
        border-color: #eee #ddd #eee #eee
   
    > .active a
      &, &:hover, &:focus
        border-color: #ddd transparent #ddd #ddd
        *border-right-color: #fff