@import 'variables'

*
  box-sizing: border-box

.clearfix
  +clearfix

html
  -webkit-font-smoothing: antialiased
  font-family: $font-stack
  height: 100%
  background-color: $background-color

strong
  font-weight: bold !important

#container
  margin: 40px auto
  margin-bottom: 100px

.clear-table
  width: 100%
  padding: 10px
  color: darken($background-color, 40%)
  text-shadow: rgba(255,255,255,0.8) 0 1px 0

  .category
    font-size: 12px
    text-transform: uppercase
    background-color: darken($background-color, 3%)

  td, th
    padding: 10px
    border-bottom: 1px solid darken($background-color, 7%)

  th
    font-weight: bold

h1
  &.standard-head
    font-size: 25px
    color: darken($background-color, 40%)
    margin-bottom: 20px
    text-shadow: rgba(255,255,255,0.8) 0 1px 0

#message-container
  background-color: #fff
  box-shadow: darken($background-color, 5%) 0 0 20px
  min-height: 600px
  width: 100%
  padding: 50px
  overflow-x: auto
  border-radius: 8px
  font-size: 16px
  font-family: $font-stack
  color: darken(#8a9ba5, 20%)
  -webkit-font-smoothing: antialiased
  resize: none
  line-height: 1.5

  h1, h2, h3, h4, h5, h6
    margin-bottom: 15px

  h1
    font-size: 28px
    padding-bottom: 10px
    border-bottom: 1px solid darken(#f2f2f2, 5%)

  h2
    font-size: 23px

  h3
    font-size: 19px
    font-weight: bold

  h4
    font-size: 17px
    font-weight: bold

  ul, ol
    padding-left: 20px

  ul
    list-style-type: disc

  ol
    list-style-type: lower-alpha

  blockquote
    color: darken(#ccc, 15%)
    padding-left: 10px
    border-left: 2px #f2f2f2 solid

  pre
    white-space: normal
    word-wrap: break-word

  p
    margin-bottom: 15px

  strong
    font-weight: bold

  em
    font-style: italic

  code
    font-family: "Monaco", "consolas", monospace
    background-color: #f2f2f2
    border-radius: 3px
    font-size: 12px
    padding: 3px 6px
    white-space: pre
    display: inline-block

  a
    color: #4e97ca
    text-decoration: none

  hr
    border: none
    height: 1px
    border-bottom: 1px solid darken(#f2f2f2, 5%)
    margin-bottom: 15px

/* -----------------------------------------
 * BODY SKELETON
 * ----------------------------------------- */

.body-skeleton
  padding: 0 20px

.body-skeleton, .body-skeleton-no-p
  @include outer-container

  .column-row
    @include row

  .columns-three
    @include span-columns(3)

  .columns-four
    @include span-columns(4)

  .columns-five
    @include span-columns(5)

  .columns-six
    @include span-columns(6)

  .columns-seven
    @include span-columns(7)

  .columns-eight
    @include span-columns(8)

  .columns-nine
    @include span-columns(9)

  .columns-twelve
    @include span-columns(12)

.pull-left
  float: left

.pull-right
  float: right

/* -----------------------------------------
 * NEW NOTE
 * ----------------------------------------- */

#unencrypted-message
  width: 100%
  border: 0
  outline: 0
  font-size: 16px
  font-family: $font-stack
  color: darken(#8a9ba5, 20%)
  -webkit-font-smoothing: antialiased
  resize: none
  line-height: 1.5
  height: 100%

#encrypted-message-body
  x-overflow: scroll

#message-button-container
  margin-top: 30px

#container
  font-family: $font-stack

#hidden-fields
  display: none

/* -----------------------------------------
 * BUTTONS
 * ----------------------------------------- */

.btn
  display: inline-block
  color: #fff
  font-weight: bold
  font-size: 16px
  border-radius: 6px
  @include background-image(linear-gradient(top, #788e9b, #6a7e8a))
  border: 0
  -webkit-font-smoothing: antialiased
  font-family: $font-stack
  cursor: pointer
  padding: 10px 20px
  text-shadow: rgba(0,0,0,0.1) 0 -1px 0
  box-shadow: rgba(255,255,255,0.8) 0 1px 0
  text-decoration: none
  outline: 0
  transition: 0.1s linear opacity

  &:hover
    opacity: 0.95
    transition: 0.1s linear opacity

  .alt-text
    color: #cedce4
    font-size: 13px
    float: right
    font-weight: normal
    padding-left: 13px
    padding-top: 2px

.lock-sprite
  width: 12px
  height: 17px
  background: image-url('lock.png') no-repeat
  display: inline-block
  margin-right: 15px

/* -----------------------------------------
 * WARNING MESSAGE
 * ----------------------------------------- */

#warning
  width: 100%
  font-size: 13px
  text-align: center
  color: darken($background-color, 30%)
  padding-bottom: 30px
  text-shadow: rgba(255,255,255,0.8) 0 1px 0

/* -----------------------------------------
 * CREATION CONFIRMATION
 * ----------------------------------------- */

#message-success
  margin-bottom: 50px
  color: darken($background-color, 60%)

  p
    font-size: 14px
    text-shadow: rgba(255,255,255,1) 0 1px 0

  #clippy
    margin-top: 20px
    border-radius: 3px
    @include background-image(linear-gradient(top, $background-color, darken($background-color, 3%)))
    padding: 12px
    text-align: center
    text-shadow: rgba(255,255,255,1) 0 1px 0
    width: 100%
    cursor: pointer
    border: 1px solid darken($background-color, 15%)
    box-shadow: rgba(255,255,255,0.9) 0 1px 0
    font-weight: bold
    font-size: 14px

  #message-link
    background-color: darken($background-color, 3%)
    border: 1px solid darken($background-color, 15%)
    text-shadow: rgba(255,255,255,1) 0 1px 0
    padding: 10px 18px
    font-family: "Monaco", "consolas", monospace
    border-radius: 3px
    margin-top: 20px
    line-height: 1.5
    overflow: hidden
    word-wrap: none
    white-space: nowrap
    font-size: 12px
    cursor: pointer
    box-shadow: rgba(0,0,0,0.02) 0 1px 0 inset, rgba(255,255,255,0.9) 0 1px 0
    transition: 0.1s linear all

    &:hover
      background-color: darken($background-color, 5%)
      border: 1px solid darken($background-color, 12%)
      transition: 0.1s linear all

  h1
    font-size: 23px
    color: darken($background-color, 40%)
    margin-bottom: 20px

/* -----------------------------------------
 * SETTINGS BAR
 * ----------------------------------------- */

#settings-bar
  padding-bottom: 20px
  margin-top: -10px

#markdown-toggle
  font-size: 13px
  text-align: right
  float: right
  color: darken($background-color, 30%)
  text-shadow: rgba(255,255,255,0.8) 0 1px 0
  // cursor: pointer
  background: image-url('markdown-icon.png') no-repeat
  padding-left: 25px

  // &:hover
  //   color: darken($background-color, 40%)

/* -----------------------------------------
 * FOOTER
 * ----------------------------------------- */

#app-nav
  border-top: 1px solid darken($background-color, 10%)
  font-family: $font-stack
  font-size: 12px
  color: darken(#8ba7b8, 10%)
  text-shadow: rgba(255,255,255,0.8) 0 1px 0
  padding: 17px 20px 14px 20px
  width: 100%
  position: fixed
  bottom: 0
  margin-top: 30px
  box-shadow: rgba(255,255,255,0.8) 0 1px 0 inset
  display: inline-block
  @include background-image(linear-gradient(top, $background-color, darken($background-color, 5%)))

  a
    color: darken($background-color, 35%)
    text-decoration: none
    cursor: pointer

    &:hover
      color: darken($background-color, 50%)

  #app-description
    float: left

  #app-links
    float: right

  li
    display: inline-block
    margin-right: 20px
    font-weight: bold

    &:last-child
      margin-right: 0
