codecombat/app/styles/play/level/tome/spell_palette.sass

@import "../../../bootstrap/mixins"

#spell-palette-view
  position: absolute
  bottom: 10px
  left: 10px
  right: 10px
  height: 140px
  // Height relates to .tab-content height
  padding-top: 35px
  padding-left: 12px
  padding-right: 4px
  color: #333
  // Get crazy with the backgrounds so that we can lower the opacity on the editor background above it, making a gradient of the disabled background color on the top around where it's usually covered
  background-color: transparent
  background-size: 100% 100%
  z-index: 0
  overflow-y: auto
  
  img
    position: absolute
    left: 0
    top: 0
    width: 100%
    height: 100%
    z-index: -1

  &.disabled
    @include opacity(0.80)

  h4
    color: #333
    font-size: 16px
    line-height: 16px
    margin: 0 4px
    font-weight: normal

  .nav > li > a
    padding: 2px 20px 0px 20px
    margin-bottom: 3px

  ul.nav.nav-pills
    li.active a
      background-color: transparent
    &.multiple-tabs li.active a
      background-color: lighten(rgb(230, 212, 146), 10%)
    &.multiple-tabs li:not(.active) a
      cursor: pointer

  //.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus
  //  background-color: lighten(rgb(230, 212, 146), 10%)

  .property-entry-column
    display: inline-block
    margin-right: 3px
    vertical-align: top