$width: 1400px
$top-pane-height: 34px
body
  font-size: 12px
  font-family: "lucida grande", "verdana"
  color: white
  overflow: none
  position: fixed
  top: 0
  left: 0
  right: 0
  bottom: 0
  padding: 0
  margin: 0

section
  display: block

button
  margin: 2px 0

=clearfix
  overflow: hidden

=transition($args...)
  -webkit-transition: $args
  -moz-transition: $args
  -ms-transition: $args
  -o-transition: $args
  transition: $args

=inline-block
  display: inline-block
  vertical-align: middle

=linear-gradient($anchor, $colors...)
  background-image: -moz-linear-gradient($anchor, $colors)
  background-image: linear-gradient($anchor, $colors)

.clearfix
  +clearfix

#create_character
  display: block
  position: absolute
  bottom: 300px
  left: 440px
  text-align: center
  .form
    display: inline-block
    margin: auto
    background: rgba(0, 0, 0, 0.4)
    padding: 30px
    border-radius: 15px
    span
      display: inline-block
      margin-right: 10px
      label
        font-size: 2em
        margin-bottom: 10px
        color: #cccccc
      .regions
        white-space: nowrap
        label
          display: inline-block
          font-size: 0.9em
          font-weight: bold
          input
            vertical-align: text-bottom

      input[type='text']
        font-size: 1.8em
        width: 12em
    .submit
      margin-top: 20px
      input
        font-size: 1.5em

.browser-support
  p
    margin: 1em 0
  .browsers
    padding-top: 12px
    a
      display: inline-block
      width: 120px
      span
        display: block
        white-space: nowrap
      em
        font-size: 0.85em
        color: #444444
  background: rgba(0, 0, 0, 0.4)
  padding: 30px
  border-radius: 15px
  text-align: center
  position: absolute
  left: 0
  right: 0
  bottom: 110%

.requires-js
  font-size: 1.2em
  color: red

html.js
  .requires-js
    display: none

html.websockets, html.history, html.canvas
  .browser-support
    display: none

#notfound, #errorpage
  background: #111111 url(/images/404.jpg) center center no-repeat
  position: absolute
  left: 0
  right: 0
  bottom: 0
  top: 0
  .content
    display: none

#errorpage
  background-image: url(/images/500.jpg)

#container
  background: #0a0a0a
  position: absolute
  left: 0
  right: 0
  bottom: 0
  top: 0

  &.characters-new, &.characters-create, &.characters-refresh
    background: #050505 url(/images/splash-l.jpg) bottom left no-repeat

#tabs > div.ui-tabs-panel
  overflow-y: auto
  overflow-x: hidden
  position: absolute
  top: $top-pane-height
  bottom: 34px
  right: 370px
  left: 0
  border: 1px solid #333333

#footer
  position: absolute
  bottom: 0
  left: 0
  right: 0
  height: 14px
  padding: 10px
  vertical-align: middle
  background: #050505
  color: #555555
  +transition(background 0.25s)
  &:hover
    background-color: #050a0f
  a
    color: #888888
    font-weight: bold


.panel-tools
  width: 180px
  border-right: 1px solid #1a1a1a
  float: left
  section
    .inner
      padding: 10px
    margin-bottom: 10px

  h3
    background: #0a0a0a
    font-weight: bold
    border-bottom: 1px solid #1a1a1a
    font-size: 0.8em
    margin: 0 0 10px
    padding: 5px 10px

  button
    width: 100%

  #stats, #weights, #summary, #engineinfo
    background: rgba(0, 0, 0, 0.3)
    .inner
      font-size: 0.8em
      padding: 0
    .stat
      padding: 5px 0
      border-top: 1px solid rgba(80, 80, 80, 0.3)
      border-bottom: 1px solid rgba(0, 0, 0, 0.3)
      &:first-child
        border-top: 0

    span
      +inline-block
      vertical-align: top
    span.key
      padding-right: 10px
      width: 105px
      text-align: right
      color: #aaaaaa
    span.val
      font-weight: bold
      width: 60px
  #weights
    input
      margin-bottom: 1em

  #summary
    span.key
      width: 55px
    span.val
      width: 100px

.panel-content
  padding-left: 180px

#gear .panel-content
  padding-left: 190px

#advanced .panel-content
  padding-top: 2em
  padding-right: 2em
  padding-left: 190px

#wait
  display: none
  position: fixed
  top: 0
  bottom: 0
  right: 0
  left: 0
  background: rgba(0, 0, 0, 0.7) url(/images/wait.gif) center center no-repeat
  z-index: 1000
  #waitMsg
    position: absolute
    top: 55%
    left: 0
    right: 0
    font-size: 2em
    color: white
    font-weight: bold
    text-align: center

.with-tools
  background-image: url(/images/panel-left.png) !important
  background-repeat: repeat-y !important
  background-position: top left

.dropdownMenu
  +linear-gradient(#262626, #1a1a1a)
  border: 1px solid #444444
  position: absolute
  z-index: 101
  font-size: 0.85em
  a
    display: block
    font-weight: bold
    padding: 5px 10px
    +transition(color 0.2s)
    &:hover
      +linear-gradient(top, #111111, #050505)
      color: white

#tabs
  position: absolute
  top: 0px
  padding: 0
  bottom: 0
  left: 0
  right: 0

  #settingsDropdown
    position: absolute
    bottom: 0px
    display: block
    padding: 3px 3px 2px
    border-radius: 3px
    +linear-gradient(bottom, #222222, #323232, #4b4b4b)
    border: 1px solid #444444
    left: 528px
    &.active
    border-bottom-left-radius: 0
    border-bottom-right-radius: 0
    border-bottom: 0

  #top-pane
    a#logo
      display: block
      right: 5px
      bottom: 2px
      position: absolute
      width: 319px
      height: 30px
      background: url(/images/logo3s.jpg) bottom right no-repeat

    position: relative
    height: $top-pane-height - 1
  .ui-tabs-nav
    border: 0
    position: absolute
    bottom: 0
    left: 10px
    font-size: 1em
    li
      width: auto
      clear: none
      border-bottom-left-radius: 0
      border-bottom-right-radius: 0
      border-width: 1px 1px 0px
      font-size: 0.85em
      font-weight: bold
      &.ui-tabs-selected
        padding-bottom: 1px
        margin-bottom: -1px
        a
          text-shadow: #111111 1px 1px 0px
      a
        outline: none
        text-shadow: #050505 -1px -1px 0px

  #console-footer
    overflow: hidden
    position: absolute
    bottom: 34px
    top: $top-pane-height
    right: 0px
    width: 370px
    border-top: 1px solid #333333
    border-bottom: 1px solid #333333

    .ad
      position: absolute
      bottom: 5px
      left: 0
      right: 0
      text-align: center


    section
      margin: 10px 0
      .window
        border: 0
      h3
        border-bottom: 1px solid #1f1f1f
        border-top: 1px solid #1f1f1f
        font-size: 0.8em
        padding: 2px 10px


    #console, #log
      .inner
        font-size: 0.8em
    #console
      .inner
        padding: 0
    #dps
      font-size: 2em
      text-align: center
      margin: 5px
      border: 1px solid #1a1a1a
      background: #111111 url(/images/hatch.png)
      padding: 5px
      font-weight: bold
      position: relative
      .inner
        display: inline
      em
        display: inline-block
        vertical-align: middle
        font-size: 0.7em
        &.p
          color: #00aa00
        &.n
          color: #aa0000
    #dpsgraph
      height: 120px
      margin: 0 8px 0 10px

span.pos
  color: #00aa00
span.neg
  color: #aa0000

h1#head
  border-radius: 10px
  padding: 25px
  background: #1a1a1a url(http://us.battle.net/static-render/us/cenarion-circle/66/1873474-card.jpg) bottom right no-repeat
  span
    display: block

#card
  background: #111111 url(/images/hatch.png)
  +transition(background 0.2s)
  &:hover
    background-color: #0972A5
  border-bottom: 1px solid #1a1a1a
  display: block
  top: 10px
  right: 10px
  height: 85px
  padding: 5px
  text-shadow: #050505 3px 3px 3px
  .img
    width: 84px
    border: 1px solid #555555
    height: 84px
    overflow: hidden
    float: left
    position: relative
    img
      position: absolute
  &.goblin .img img
    left: -190px
    bottom: -45px
  &.undead .img img
    left: -190px
    bottom: -45px
  &.worgen .img img
    left: -140px
    bottom: -45px
  &.orc .img img
    bottom: -43px
  .info
    margin-left: 94px
    text-align: left
    font-size: 2.8em
    display: block
    font-weight: bold
    white-space: nowrap
    span
      display: block
    .realm
      margin-top: 10px
      font-size: 0.4em

h1
  margin: 0.5em 0
  font-size: 2.5em
  font-weight: bold
  color: #777777
  .info
    font-size: 0.35em
    font-weight: normal
    color: #333333
a
  color: #3aaaf9

.ui-tabs-panel
  +clearfix

input[type='text'] //, input[type='search']
  background-color: rgba(80, 80, 80, 0.2)
  border: 0px
  color: #999999
  padding: 3px 6px
  border-radius: 3px
  +transition(all 0.25s)
  &:focus
    outline: none
    background-color: rgba(192, 192, 212, 0.5)
    color: #111111

.window
  .inner
    padding: 1em
  border: 1px solid #333333
  border-width: 0 0 1px
  font-size: 0.9em
  &:first-child
    border-width: 1px 0
  h3
    cursor: pointer
    background: rgba(0, 0, 0, 0.2)
    border-bottom: 1px solid #111111
    padding: 4px 10px
    font-weight: bold
    margin: 0 0 0.5em

.floater
  .inner
    padding: 1em
  +inline-block
  clear: none
  vertical-align: top
  border: 1px solid rgba(80, 80, 80, 0.3)
  border-width: 1px
  margin: 10px
  box-shadow: 3px 3px 3px 0 rgba(0, 0, 0, 0.3)
  font-size: 0.8em
  h3
    cursor: pointer
    background: rgba(0, 0, 0, 0.2)
    border-bottom: 1px solid #111111
    padding: 4px 10px
    font-size: 1.3em
    font-weight: bold
    margin: 0 0 0.5em

.flash
  position: fixed
  top: 20px
  right: 20px
  max-width: 600px
  border: 2px solid rgba(255, 255, 255, 0.2)
  cursor: pointer
  border-radius: 10px
  background: rgba(0, 20, 40, 0.9)
  font-size: 1.5em
  z-index: 1000
  padding: 10px 20px

#header
  padding: 10px 0px 10px 25px
  text-shadow: black -1px -1px 1px
  border-bottom: 1px solid #111111
  color: #333333
  font-size: 2.25em
  background: #1a1a1a
  margin-bottom: 20px
  display: none

.ui-selectmenu-menu
  background: #050505
  border-color: #222222
  min-width: 150px
  font-size: 0.8em

.ui-selectmenu-status
  white-space: nowrap
a
  text-decoration: none

a.wowhead
  opacity: 0.2
  background: url(/images/wowhead.png) center center no-repeat
  text-indent: -9999px
  display: block
  width: 16px
  height: 16px
  float: right
  +transition(opacity 0.1s)
  &:hover
    opacity: 1.0

em.upgrade
  color: #ffd100 !important
  font-size: 0.9em

img.upgrade
  width: 16px
  height: 16px
  vertical-align: top
  padding: 0px
  margin: 0px

#tabs, #create_character
  .label_check, .label_radio
    +inline-block
    line-height: 2em
    padding-left: 30px
    margin-right: 20px
    background: url(/images/controls.png) top left no-repeat
    -webkit-user-select: none
    -moz-user-select: none

  .label_radio
    background-position: left -311px
    &:hover
      background-position: left -522px

  .c_on
    background-position: left -99px !important
  .r_on
    background-position: left -418px !important

  .c_on, .r_on
    color: white !important

  .label_check input, .label_radio input
    position: absolute
    left: -9999px

  #settings, #advanced .panel-content, #bonuses, #docs
    h3
      font-size: 1.3em
      font-weight: bold
      margin: 0 0.5em 1em
    h5
      font-size: 1em
      font-weight: bold
      margin: 0 1.5em 1em
    .option-list
      float: left
      +inline-block
      vertical-align: top
      margin-bottom: 2em
    section.cluster
      +clearfix
      background: #0c0c0c
      padding: 1em
      margin-bottom: 1em
      border: 1px solid #222222
      border-radius: 5px

    select
      background: #222222
      color: white
      border-color: black
      padding: 5px
      option
        padding: 2px 0

    .label_check, .input, .select
      display: block
      width: 500px
      background-color: #080808
      min-height: 22px
      font-weight: bold
      font-size: 0.9em
      border-radius: 5px
      &:hover
        background-color: rgba(0, 0, 0, 0.4)

    .input, .select
      padding-left: 10px
      width: 520px
      .select-container
        +inline-block
      span.label
        +inline-block
        width: 170px
        text-align: right
        margin-right: 10px

    .select, .input
      span.desc
        display: block
        clear: left
        margin-top: 0.25em
        font-size: 0.8em
        color: #666666
        font-weight: normal
        margin-left: 190px
        white-space: normal
    .label_check
      background-position: 3px 2px
      span
        font-weight: normal
        display: block
        font-size: 0.9em
        color: #777777
        margin-top: -0.5em

  #bonuses
    .label_check, .input, .select
      width: inherit

#errorExplanation
  background: rgba(0, 0, 0, 0.3)
  text-align: left
  padding: 1em
  margin: 1em 0
  h2
    font-size: 1.5em
  ul
    padding: 1em

.pct
  +inline-block
  height: 13px
  border: 1px solid #333333
  width: 350px
  position: relative
  height: 13px
  .label
    z-index: 11
    font-size: 0.7em
    font-weight: bold
    position: absolute
    top: 2px
    bottom: 0
    left: 100%
    vertical-align: middle
    white-space: nowrap
    padding-left: 5px
    text-align: right
    color: rgba(255, 255, 255, 0.7)
  .pct-inner
    position: absolute
    top: 1px
    bottom: 1px
    z-index: 10
    left: 0px
    width: 77%
    background: #666666

.popup
  min-width: 500px
  position: absolute
  top: 60px
  box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.3)
  background: rgba(20, 20, 20, 0.95)
  visibility: hidden
  z-index: 1000
  .close-popup
    top: 15px
  &.visible
    visibility: visible
  h1
    margin: -1em -1em 1em
    font-size: 1em
    color: white
    background: rgba(0, 0, 0, 0.3)
    padding: 0.5em 1em
    border-bottom: 1px solid #333333
  .body
    overflow-y: auto
    overflow-x: hidden
    max-height: 600px
    border-top: 1px solid rgba(1, 1, 1, 0.1)
    min-width: 250px

  #filter
    height: 40px
    border-bottom: 1px solid rgba(0, 0, 0, 0.3)
    position: absolute
    top: 0
    left: 0
    right: 0
    input
      outline: none
      position: absolute
      padding: 5px
      left: 5px
      right: 25px
      top: 5px
      background: #333333
      color: #aaaaaa

.ui-button-text
  text-shadow: #111111 -1px -1px 0px

#bonuses
  padding: 1em
  fieldset
    margin: 2em 0
    border-top: 1px solid darken(#065175, 5%)
    legend
      font-weight: bold
      margin-left: 1em
      margin-bottom: 0.5em

#tools
  button
    display: block
    margin: 5px auto
    min-width: 135px

#logs
  position: absolute
  top: 260px
  bottom: 265px
  left: 0
  right: 0
  overflow-x: hidden
  overflow-y: automatic

.awin-large
  #logs
    bottom: 295px

.awin-medium
  #logs
    bottom: 265px

.awin-small
  #logs
    bottom: 75px


#console, #log
  .inner
    max-height: 50%
    overflow-y: auto
    overflow-x: hidden

#log
  .gold
    color: #ffdc89
  .underline
    border-bottom: 1px dotted #333333

#console
  color: #ccc
  .log
    font-size: 1.2em
    .sub
      margin: 2px
      font-size: 0.9em
      color: #666666
    padding: 8px 0 8px 24px
    margin-bottom: 0.5em 0
    border-top: 1px solid #1c1c1c
    border-bottom: 1px solid #090909
    &:first-child
      border-top: 0
    &:last-child
      border-bottom: 0
    background: url(/images/log.png) 5px 10px no-repeat
    &.warning
      background-image: url(/images/alert.png)
    &.error
      background-image: url(/images/delete.png)

#tooltip
  max-width: 300px
  background: rgba(0, 0, 0, 0.85)
  padding: 1em
  position: absolute
  box-shadow: 0px 0px 16px 3px #111111
  border: 1px solid #666666
  line-height: 1.6
  border-top-color: #aaaaaa
  border-left-color: #aaaaaa
  border-radius: 5px
  font-size: 0.9em
  .title
    font-size: 1.1em
    font-weight: bold
    color: white
    margin-bottom: 0.3em
  .desc
    p
      margin: 1em 0
    color: #ffd200
  &.small
    padding: 2px
    font-size: 0.8em
    .title
      margin: 0
  &.clean
    border: 0
    box-shadow: 0px 0px 3px 3px black
    background: rgba(0, 0, 0, 0.75)
    .title
      color: #eeddcc

#talents
  .panel-content
    padding-top: 18px
    padding-left: 198px

  #specactive
    font-size: 2em
    text-align: left
    margin-bottom: 10px
    border: 1px solid #333333
    background: #050505
    padding: 5px
    font-weight: bold
    position: relative
    width: 400px
    height: 34px
    .spec-name
      padding-left: 44px
    .spec-icon
      position: absolute
      width: 36px
      height: 36px
      left: 3px
      top: 3px
      border: 1px solid #434445
      border-radius: 3px
      box-shadow: 0 0 4px 0 black

  #talentframe
    padding: 3px
    border: 1px solid #333333
    background: #050505
    +inline-block
  .tiers
    +inline-block
    position: relative
    width: 100px
    height: 509px
    @for $i from 0 through 6
      .row-level-#{$i}
        top: (70px * $i) + 10px
        left: 10px
    .level
      border: 1px solid #333333
      background-color: rgba(0,0,0, 0.4)
      background-position: center center
      position: relative
      border-radius: 3px
      width: 56px
      height: 56px
      position: absolute
      bottom: 10px
      right: 10px
      font-size: 2em
      color: rgba(255, 255, 255, 0.8)
      background: rgba(0, 0, 0, 0.6)
      border-radius: 3px
      line-height: 52px
      text-align: center
  .tree
    +inline-block
    position: relative
    width: 300px
    height: 509px
    background:
      repeat: no-repeat
    @for $i from 0 through 6
      .row-#{$i}
        top: (70px * $i) + 10px
    @for $i from 0 through 2
      .col-#{$i}
        left: (100px * $i) + 10px

    .talent
      cursor: pointer
      border: 1px solid #333333
      box-shadow: 0 0 4px 0 black
      background-color: rgba(0,0,0, 0.4)
      background-position: center center
      position: relative
      .grey
        position: absolute
        top: 0
        left: 0
        bottom: 0
        right: 0
        background: rgba(0, 0, 0, 0.7)
        border-radius: 3px
      &.active .grey
        display: none
      &.active
        opacity: 1
        border-color: #ffdd00
      &:hover
        border-color: lime
      border-radius: 3px
      width: 56px
      height: 56px
      position: absolute

#talentrankings, #upgraderankings, #dpsbreakdown, #traitrankings
  .pct
    width: 120px
    height: 7px
    .label
      margin-top: -3px
  .pct-inner
    +transition(width 1s)
  .talent_contribution
    margin-bottom: 14px
    font-weight: bold
    .name
      font-size: 0.8em

#artifact
  .panel-content
    padding-top: 18px
    padding-left: 198px

  // This is for the header of the artifact frame that contains the icon
  // and name of the artifact
  #artifactactive
    font-size: 2em
    text-align: left
    margin-bottom: 10px
    border: 1px solid #333333
    background: #050505
    padding: 5px
    font-weight: bold
    position: relative
    width: 710px
    height: 34px
    .spec-name
      padding-left: 44px
    .spec-icon
      position: absolute
      width: 36px
      height: 36px
      left: 3px
      top: 3px
      border: 1px solid #434445
      border-radius: 3px
      box-shadow: 0 0 4px 0 black
    .power-spent
      float: right
      font-size: 0.75em
      padding-top: 0.25em
      padding-right: 5px

  // This is for the artifact frame itself
  #artifactframe
    border: 1px solid #333333
    background: #050505
    +inline-block
    height: 615px
    width: 720px
    position: relative

    .trait
      position: absolute
      height: 90px
      width: 90px
      cursor: pointer

    .relic
      z-index: 2
      height: 90px
      width: 90px
      cursor: pointer
      &.inactive
        visibility: hidden

    .icon
      position: absolute
      z-index: 3
      border-radius: 50%
      left: 22px
      top: 22px
      height: 46px
      width: 46px
      background: black
      &.inactive
        opacity: 0.6

    .ring
      position: absolute
      z-index: 4
      left: 5px
      top: 5px

    .ring-thin
      left: 17px
      top: 17px

    .line
      z-index: 0
      position: absolute
      background-image: url(/images/artifacts/artifact-line-active.png)
      background-repeat: repeat-x
      height: 16px
      transform-origin: 50% 50%
      &.inactive
        background-image: url(/images/artifacts/artifact-line-inactive.png)

    .level
      background-color: black
      border: 1px solid #666666
      border-radius: 20%
      color: rgb(255, 209, 0)
      display: block
      font-family: 'Open Sans', Arial
      position: absolute
      text-align: center
      left: calc((100% - 2em - 2px) / 2)
      top: 65%
      width: 2em
      z-index: 5

      &.inactive
        display: none

    .relicframe
      height: 80px
      width: 80px
      background-size: contain
      top: 7%
      position: absolute
      z-index: 10

      .relicicon
        height: 30px
        width: 30px
        top: 25px
        left: 25px
        border-radius: 50%
        position: absolute
        z-index: 11

        &.inactive
          display: none

    .relicilvl
      top: calc(7% + 80px)
      position: absolute
      z-index: 5
      background: #222222
      color: white
      border-color: black
      padding: 5px

#artifact_button_div
  padding: 10px

#tabs
  border: 0
  #settings, #buffs, #target, #docs
    padding: 2em

  .ui-tabs-panel
    border: 1px solid #333333
    label
      white-space: nowrap
      vertical-align: middle
      +inline-block
      margin: 0.5em
      padding-top: 4px
      padding-bottom: 4px
      cursor: pointer
      color: #777777
      &:hover
        color: white

.slots
  width: 49%
  min-width: 340px
  position: relative
  float: left

  .gem
    position: relative
    .socket
      position: absolute
      top: 9px
      left: 13px

  .gems .gem, .enchant, .bonuses, .name
    background: #0e0e0e url(/images/texture.png)
    margin-bottom: 2px
    border-radius: 2px
    padding: 5px
    font-size: 0.9em
    min-height: 14px
    +transition(background 0.2s)
    &:hover, &.active
      background-color: rgba(0,128,255,0.15)
    .img
      background: url(/images/empty.png)
      width: 13px
      height: 13px
      margin-right: 12px
      overflow: hidden
      position: relative
      border: 1px solid #333333
      img
        width: 17px
        margin-left: -2px
        margin-top: -2px
      vertical-align: middle
      display: inline-block
  .enchant
    .img
      width: 17px
      height: 17px
      margin-right: 5px
      img
        width: 24px

  .bonus
    color: lime
    margin-bottom: 4px
    font-size: 0.9em
    padding: 4px 4px 4px 35px
  .bonuses
    img
      vertical-align: middle
      margin-right: 5px
    .oldstat
      color: #ee0000
      padding-right: 1em
    .newstat
      color: #00ee00
      padding-right: 1em

  .enchant
    color: lime
    font-size: 0.9em

.slot
  position: relative
  min-height: 60px
  padding: 2px 2px 1px
  margin: 10px
  margin-left: 66px
  border-radius: 3px
  +transition(background 0.2s)
  background: #0a0a0a
  &:hover
    background-color: #1f232a
    cursor: pointer

  &.active, .active
    background-color: #1f232a

  $full: 75
  $opac: 0.1
  .gems
    /*
      .Red
        background: rgba( $full, 0, 0, $opac )
      .Blue
        background: rgba( 0, 0, $full, $opac )
      .Yellow
        background: rgba( $full, $full, 0, $opac )
      .Orange
        background: rgba( $full, $full / 2, 0, $opac )
      .Purple
        background: rgba( $full / 2, 0, $full, $opac )
      .Green
        background: rgba( 0, $full, 0, $opac )

  .image
    background: url(/images/empty.png)
    position: absolute
    top: 2px
    left: -60px
    width: 48px
    height: 48px
    overflow: hidden
    border: 1px solid #333333
    box-shadow: 1px 1px 5px 0px black
    border-radius: 3px
    img
      width: 48px
    .ilvl
      font-size: 0.7em
      color: white
      position: absolute
      bottom: 1px
      right: 1px
      background: rgba(0, 0, 0, 0.85)
      padding: 1px 2px
      color: lime
      border-radius: 2px
  .lock
    opacity: 0.3
    position: absolute
    top: 55px
    left: -24px
    +transition(hover 0.1s)
    &.lock_on
      opacity: 1.0
    &:hover
      opacity: 1.0

  .name
    font-weight: bold
    font-size: 1.07em
    text-shadow: black -1px -1px
    .aep
      color: white
      font:
        weight: normal
        size: 0.7em
        style: normal
    .heroic
      color: lime
      padding: 0 0em
      font:
        weight: normal
        size: 0.7em
    .ilvl
      color: white
      font:
        size: 0.7em
        style: normal
  .desc
    display: block
    font-size: 0.8em
    color: #aaaaaa
    padding: 2px 0

  .tags
    text-shadow: black -1px -1px
    color: lime
    padding: 0 0em
    font:
      weight: normal
      size: 0.8em

.alternatives
  padding-top: 40px
  border: 1px solid #222222 !important
  .slot
    margin: 5px 15px 5px 50px
    min-height: 46px
    padding: 3px 5px 5px
    border-radius: 5px
    background: transparent
    &:hover
      background: rgba(30, 35, 40, 0.9)
    &.active, .active
      background: lighten(#031e33, 7%)
      .pct
        border-color: lighten(#031e33, 35%)
      .pct-inner
        background-color: lighten(#031e33, 35%)

    .gem
      +inline-block
    .image
      width: 36px
      height: 36px
      left: -45px
      top: 2px
      img
        margin-left: -2px
        margin-top: -2px
        width: 40px

.quality-2
  color: lighten(#00A900, 10%)
.quality-3
  color: lighten(#0062C3, 10%)
.quality-4
  color: #A335EE
.quality-5
  color: #FF8000
.quality-6
  color: #E5CC80
.quality-7
  color: #E5CC80

#impex
  padding: 1em
  h3
    font-size: 1.3em
    font-weight: bold
    margin: 0.7em 0
  textarea
    font-family: 'liberation mono', 'courier new', monospace
    font-size: 0.8em
    padding: 1em
    border: 1px solid #333333
    background: #111111
    color: #aaaaaa
    width: 80%
    height: 100px

@media screen and (max-width: 1281px)
  #container
    &.characters-new, &.characters-create, &.characters-refresh
      background: #050505 url(/images/splash-s.jpg) bottom left no-repeat

  #create_character
    bottom: 200px
    left: 250px

  #card
    .img
      width: 90px
    .info
      margin-left: 100px
      .name
        font-size: 0.75em
      .realm
        font-size: 0.3em
  .popup
    .body
      max-height: 400px

#dialogs
  display: none

.ui-widget-overlay
  background: rgba(0, 0, 0, 0.8)

.ui-dialog
  background: rgba(10, 15, 20, 0.9)
  border: 2px solid #065175
  border-radius: 5px

.ui-widget-content.ui-dialog-buttonpane
  border-color: #222222

#saveSnapshot
  label
    font-weight: bold
    margin-bottom: 0.5em
  #snapshotName
    width: 200px
    margin: auto

#loadSnapshot
  table
    border-collapse: collapse
    width: 100%
    th, td
      border: 1px solid lighten(rgba(20, 25, 30, 0.9), 10%)
    th
      background: rgba(20, 25, 30, 0.9)
      padding: 2px 5px
      font-size: 1.1em
      font-weight: bold
    td:first-child
      width: 75%
    td
      padding: 5px
      a
        font-weight: bold
        text-decoration: underline
