@import "whitespace-reset"
@import "mixins"

body, html
  background: #28323a
  direction: rtl

body
  font: normal 12px Helvetica, Arial, sans-serif
  color: #fff
  #content
    margin-top: 100px
    border-top: 1px solid #fff
    border-bottom: 1px solid #fff
    background: #394651 image-url("v2/bg_not-found.gif") center top no-repeat
    min-height: 360px
    text-align: center
    h1
      font-size: 3em
      margin: 180px 0 10px 0
    h2, p
      font-size: 1.2em
      line-height: 140%
    a
      color: #90bce4
    #message
      width: 800px
      margin: 0 auto
    form
      margin: 30px auto 20px auto
      width: 280px
      position: relative
      label
        position: absolute
        right: -9999px
      .text
        float: right
        margin: 0 0 0 10px
        +border-radius(180px)
        +gradient-bg(#ccd2d7, #fefeff)
        input[type="text"]
          width: 175px
          height: 18px
          padding: 6px 38px 6px 5px
          font-size: 1.16em
          line-height: 140%
          color: #394651
          outline: none
          border: none
          background: transparent image-url("v2/icon_search.png") 190px 50% no-repeat
      input[type="submit"]
        float: right
        min-width: 30px
        min-height: 30px
        padding: 0 4px
        overflow: visible
        font-size: .83em
        line-height: 28px
        font-weight: bold
        text-transform: uppercase
        border: none
        +border-radius(180px)
        +gradient-bg(#fefeff, #ccd2d7)
        &:hover
          +gradient_bg(saturate(#fefeff + #111111, 10%), saturate(#ccd2d7 + #111111, 10%))
        &:active
          +gradient-bg(#fefeff, #ccd2d7)
