dark.sass

@import "variables"

body.dark
  pre
    font-size: $size-small
    
  position: relative
  color: $color-light-grey
  font-family: $font-main
  background-color: $color-dark-grey
  background-image: url('brain-dark.jpg')
  background-position: top center
  background-repeat: no-repeat
  
  a
    color: $color-links
    text-decoration: none
    &:hover
      color: $color-links-hover

  #nav-bar
    position: relative
    height: 25px
    border-bottom: 1px solid
    #nav-links
      position: absolute
      left: 20px
    #recent-thought-walls
      border: solid 1px $color-light-grey
      background-color: $color-dark-grey
      opacity: 0.0
      position: absolute
      left: 20px
      top: 25px
      padding: 10px
      z-index: 10

  #content
    position: absolute
    left: 20px
    top: 60px
    width: 98%
    height: 300px

  #overlay
    display: none
    opacity: 0.0
    position: fixed
    top: 0px
    left: 0px
    width: 100%
    height: 100%
    background-color: $color-dark-grey
  #overlay-close
    background-color: $color-dark-grey
    border-color: $color-light-grey
    font-size: $size-big
    border: 1px solid
    width: 100%
    height: 25px
    text-align: center
  #overlay-content
    width: 100%
    height: 100%

  .collaboration-div
    position: absolute
    width: 30%
    right: 0px
  .thought-box-overlay-background
    position: relative
    background-color: $color-dark-grey
    width: 100%
    height: 100%
  .thought-box-overlay
    height: 100%
    width: auto
    overflow-y: auto
    overflow-x: hidden
  .thought-overlay
    padding-left: 15px
    padding-right: 15px
  .thought-box
    width: 215px
    height: 125px
    float: left
    position: relative
    border: 1px solid #424242
    border-radius: 5px
    margin-top: 5px
    margin-right: 5px
  .thought
    overflow: hidden
    border: none
    margin-top: -10px
    font-size: $size-medium
    word-wrap: break-word
    padding: 5px 5px 23px 5px
    height: 83px
  .thought-bottom-section-standard
    background-color: #000
    border-bottom-left-radius: 5px
    border-bottom-right-radius: 5px
    height: 24px
    bottom: 0px
  .thought-top-section-overlay
    background-color: black
    width: 100%
    height: 37px
  .thought-controls
    position: absolute
    bottom: 3px
    right: 5px
  .thought-controls-overlay
    position: absolute
    top: 5px
    right: 25px
  .thought-votes-overlay
    position: relative
    top: 5px
    left: 15px
  .thought-votes
    position: absolute
    bottom: 3px
    left: 5px
  .thought-histories-box
    position: relative
    z-index: 100
    margin-top: 5px
    border: 1px solid #ebebeb
    border-radius: 5px
    background-color: black
    padding: 5px
  .thought-history-entry
    position: relative
    border: 1px solid #424242
    border-radius: 5px
    margin-bottom: 5px
  .thought-history-text
    @extend .thought
    margin-top: 0px
  .thought-history-controls
    @extend .thought-controls
  .thought-history-bottom-section
    background-color: #000
    border-bottom-left-radius: 5px
    border-bottom-right-radius: 5px
    height: 24px
    bottom: 0px
  
  #thought-wall-form
    width: 70%
    position: relative
  #update_thought_wall_spinner
    display: none
    position: absolute
    top: 0px
    right: 20px
  #thought-form
    @extend .thought-box
    height: 257px
  .new-thought-box
    opacity: 0.0
    width: 0px
  #thought-new-remaining-characters
    float: left

  .positive
    background: rgba(128, 255, 128, 0.1)
  .neutral
  .negative
    background: rgba(130, 32, 32, 0.2)
  
  input
    color: $color-light-grey
    background-color: $color-dark-grey
    border: none
  #thought-form textarea
    @extend input
    background-color: $color-dim-grey
    font-family: $font-main
    width: 210px
    height: 225px
    overflow: auto
    resize: none
  #thought-edit textarea
    @extend input
    background-color: $color-dim-grey
    font-family: $font-main
    width: 210px
    height: 95px
  #thought-edit-overlay
    height: 100%
  #thought-edit-overlay form
    height: 100%
  #thought-edit-overlay textarea
    @extend input
    background-color: $color-dim-grey
    font-family: $font-main
    font-size: $size-medium
    width: 95%
    height: 85%
  .thought-add-button
    float: right
  .title-entry
    font-size: $size-big
    width: 95%