References #24 - Beginning of refactoring for paper layout.

app/assets/stylesheets/_variables.sass

@@ -0,0 +1,26 @@
+$color-light-grey: #ebebeb
+$color-dark-grey:  #1b1b1b
+$color-medium-grey: #777
+$color-dim-grey: #222
+
+$color-links: #FF9729
+$color-links-hover: #E3CF57
+
+$size-big:    26px
+$size-medium: 14px
+$size-small:  12px
+
+@font-face
+  font-family: PTMono
+  src: url(/assets/PTM55FT.ttf)
+
+$font-main: PTMono, sans-serif
+
+.size-big
+  font-size: $size-big
+.size-medium
+  font-size: $size-medium
+.size-small
+  font-size: $size-small
+.hidden
+  display: none

app/assets/stylesheets/dark.sass

@@ -0,0 +1,207 @@
+@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%