$bg: #030d57
$fg: #fff
$accent: #ff3b3b
$border: #fff
$box1: #505050
$box2: #842626
$disabled: #6c6b6b
$error: #ff3b3b
$box-shadow: 3px 3px 1px #000


html, body
  font-family: sans-serif
  background-color: $bg
  color: $fg
  text-align: left
  max-width: 920px
  min-width: 320px
  padding: 5px
  margin: auto
  margin-bottom: 15px

a, a:visited, a:hover
  color: $fg

h1
  letter-spacing: -4px
  color: $fg
  font-size: 100px
  font-family: 'Times New Roman', Times, serif
  transform: scale(.5, 1)
  letter-spacing: 1px
  padding: 0
  margin: 0
  margin-bottom: 35px
  border-bottom: 1px solid $fg
  text-align: center
  text-transform: uppercase
  width: 200%
  margin-left: -50%
  &@media screen and (max-width: 900px)
    font-size: 60px

h1 strong
  color: $accent
  font-style: normal

img, code
  display: block
  max-width: 100%
  background: $box1
  box-shadow: $box-shadow
  border: 1px solid #ffffff42

code
  margin-top: 25px
  padding: 15px
  word-wrap: break-word

ul
  text-align: left  
  margin: auto
  margin-top: 25px
  padding-left: 25px
  ul
    margin-top: 0

li
  margin-top: 8px

li a, li span
  font-weight: normal

p
  margin-bottom: 25px

hr
  margin-top:15px

h2
  margin-top: 35px
  margin-bottom: 5px
  border-bottom: 1px solid $border

h3
  margin-top: 30px

div.markdown.home
  max-width: 600px
  margin: auto
  text-align: center

div.markdown.home h1 
  width: 100%
  margin-left: 0

@media screen and (max-width: 650px)
  h1
    font-size: 60px

// === FORM
input[type=submit], button, .btn
  font-size: 16px
  padding: 5px 15px
  font-weight: bold
  text-transform: uppercase
  display: block
  margin: 25px auto
  background: $box1
  color: $fg
  border: 1px solid $border
  text-decoration: none
  cursor: pointer
  display: inline-block
  margin: 0
  
  &:disabled
    color: $disabled
    border: 1px solid $disabled
    cursor: default

  &.btn-small
    font-size: 14px
    padding: 1px 5px
    display: inline-block
    margin: 0

form
  margin-bottom: 25px

  input[type=submit]
    font-size: 24px
    display: block
    margin: auto
    margin-top: 20px
    margin-bottom: 15px

  .form-field
    margin-top: 20px

    label
      display: block
      font-weight: bold
      margin-bottom: 1px


    input[type=text]
      width: 100%
      height: 28px
      font-size: 18px

    textarea
      width: 100%
      height: 150px
      font-size: 16px

    select
      width: 100%
      height: 37px
      font-size: 16px

    .description
      font-size: 14px
      margin-bottom: 4px
      font-style: italic

    .error
      font-size: 12px
      font-style: italic
      color: $error
      margin-top: 4px
      font-weight: bold
      display: none
    
    &.error
      .error
        display: block
      input[type=text], textarea
        border: 3px solid $error

    .input-checkbox-choice, .input-radio-choice
      display: inline-block
      margin-top: 5px
      margin-right: 15px
      position: relative

      label
        font-weight: normal
        display: inline-block

.record-info
  font-size: 18px
  margin-top: -20px
  margin-bottom: 15px
  padding: 10px
  background: $box2
  box-shadow: $box-shadow

  span::after
    content: "|"
    display: inline-block
    margin-left: 5px

  span:last-child::after
    content: ""

  img
    box-shadow: 1px 1px 1px #000
    box-shadow: none
    width: 28px
    display: inline
    margin-right: 7px
    vertical-align: -8px

.record-list
  .record-list-item
    margin-bottom: 8px
    background: $box1
    padding: 5px
    box-shadow: $box-shadow
    position: relative

    .name
      font-weight: bold
      font-size: 18px

    span
      white-space: nowrap
      overflow: hidden
      text-overflow: ellipsis
      display: inline-block

      &::after
        content: "|"
        display: inline-block
        margin-left: 5px

      &:last-child::after
        content: ""

    .options
      float: right
      margin: 0
      margin-top: 3px

  .empty
    font-style: italic

// === JOB SPRITESHEET
.input-checkbox-choice.from-jobs, .input-radio-choice.from-jobs
  width: 76px
  height: 76px

  input
    position: relative
    visibility: hidden

  label
    position: absolute
    color: transparent
    top: 0
    left: 0
    width: 76px
    height: 76px
    overflow: hidden
    user-select: none
    cursor: pointer
    z-index: 2
    opacity: .5
    filter: grayscale(1)

  label:hover
    opacity: .75
    filter: grayscale(.5)

  input:checked+label
    opacity: 1
    filter: grayscale(0)

  label
    background-image: url(/static/jobs/spritesheet.png)
    background-position: 0px 0px

// === USER PAGE
.user
  h2
    margin-bottom: 15px

  form
    margin-bottom: 0

  .character
    padding: 10px
    position: relative
    background: #842626
    box-shadow: $box-shadow
    margin-bottom: 15px

    .avatar
      float: left
      vertical-align: top
      width: 72px
      height: 72px
      margin-right: 10px
      background: $border
      img
        box-shadow: none

    .info
      div
        white-space: nowrap
        overflow: hidden
        text-overflow: ellipsis
      .name  
        font-size: 18px
        font-weight: bold
      .status
        text-transform: uppercase
        margin-top: 2px

    .options
      position: absolute
      right: 8px
      bottom: 8px
      text-align: right

  .empty
    font-style: italic

  .options
    margin-top: 15px
    text-align: center




// === DOCUMENT
.form.document
  form
    textarea
      height: 500px

.form.document #form-header, .content .document .content
  h1
    font-family: sans-serif
    transform: none
    width: 100%
    text-transform: none
    margin-left: 0
    text-align: left
    letter-spacing: normal
    font-size: 35px
    margin-bottom: 10px

  h2
    margin-top: 30px
    margin-bottom: 5px
    border-bottom: none

  h3
    margin-top: 30px