@import "ShortCSS/ShortCSS.styl"
@import "normalize/normalize.styl"

/** sprite */
@import "sprite.styl"
/** ptest css */

body
  -ff _ffv
  -fs 16
  -wmin 320

$link_color = #0063ff
$link_color_border = alpha($link_color,.3)
$link_hover_color = #ff475d
$link_hover_color_border = alpha($link_hover_color,.24)
$link_visited_color = #cf00cf
$link_visited_color_border = alpha($link_visited_color,.3)

a
  -c $link_color
  -td none
  -brb 1 solid $link_color_border

  &:visited
    -c $link_visited_color
    -brbc $link_visited_color_border

  &:hover
  &:visited:hover
    -c $link_hover_color
    -brbc $link_hover_color_border

  &.to-front
    -brb 0 none
    -d block
    -mt -5
    -mb 2em
    line-height 1

    &:visited
      -c $link_color

    &:hover
    &:visited:hover
      -c $link_hover_color

.page

  &__container
    -wmax 800
    -m 0 auto

    +media('max-width:829px')
      -wmax auto
      -w 100%

.header
  -p 30
  -bg #ffcc56
  -bg -moz-repeating-linear-gradient(178deg,  rgba(255,204,86,.5) 8px, rgba(255,140,0,.5) 18px);
  -bg -webkit-repeating-linear-gradient(178deg,  rgba(255,204,86,.5) 8px,rgba(255,140,0,.5) 18px);
  -bg repeating-linear-gradient(178deg,  rgba(255,204,86,.5) 8px,rgba(255,140,0,.5) 18px);
  bx-shadow 2px 3px 15px #eb4 inset
  b-radius 2
  -mt 30
  -mb 60
  -ta center

  +media('max-width:829px')
    bx-shadow none
    -mt 0

  +media('max-width:500px')
    -p 20
    -mb 36

  &__title
    line-height 1
    -m 0
    -ff _fftnr
    -fst italic
    -ts 1 1 1 #a76f19
    -fs 52

    +media('max-width:500px')
      -fs 32

.page-title
  -pb 35

  +media('max-width:500px')
    -fs 1.35em

.content
  -pb 76

  +media('max-width:829px')
    -w 90%
    -m auto


  p
    -m 26 0
    -lh 24

.add-link
  -d inline-block
  -fl right

  &__a
    -br 1 solid $link_color_border imp
    -p 7 14
    b-radius 3

    &:visited
      -c $link_color

    &:hover
      -br 1 solid $link_hover_color_border imp

.sort
  -d table-row
  +media('max-width:424px')
    -ml -9

  &__cell
    -d table-cell

    &:first-child
      +media('max-width:424px')
        -d none

    &:nth-child(2)
      +media('max-width:424px')
        -pl 0

    &+&
      -pl 9

    &>a
      -brb 0 none
      line-height 1

      &:visited
        -c $link_color

      &:hover
      &:visited:hover
        -c $link_hover_color

article
  &+article
    -mt 64
  header
    h2+span
      +media('max-width:500px')
        -d block

.pager
  -mt 50
  -ff _ffa
  -lh 40
  -fs 20

  +media('max-width:559px')
    -fs 16
    -lh 36

  &__page
    -d inline-block

    &--current
      cursor default

    &>a
      -brb none
      -c black
      -p 8 12
      b-radius 35
      +media('max-width:559px')
        -p 5 8

      &:hover
        -c black
        -bgc $link_hover_color_border

    &>span
      -bgc alpha(#dead6f,.5)
      -p 8 12
      b-radius 35
      +media('max-width:559px')
        -p 5 8

    &--string
      &:first-child
        -mr 10
        +media('max-width:559px')
          -mr 0

      &:last-child
        -ml 9
        +media('max-width:559px')
          -ml 0

      &>a
        -p 8 0
        +media('max-width:559px')
          -p 8 0

        &:hover
        //-c black
          -bgc transparent

.footer
  -brt 1 solid #dead6f
  -pt 24
  -fs 85%
  -c #232425
  -pb 40
  +media('max-width:829px')
    -pl 5%

#CAPTCHA
  & > img
    -w (320/2)
    -h (120/2)
    clear both
    -d block
    -mb 6

form
  -w 320

  +media('max-width:374px')
   -w 100%

.form-element
  -m 0 -8 10 -8
  -p 6 8

  &--error
    -bg #ffeeee
    background -moz-repeating-linear-gradient(-45deg,transparent 0px,transparent 11px,rgba(255,0,0,.2)12px), -moz-repeating-linear-gradient(45deg,transparent 0px,transparent 11px,rgba(255,0,0,.2)12px)
    background -webkit-repeating-linear-gradient(-45deg,transparent 0px,transparent 11px,rgba(255,0,0,.2)12px), -webkit-repeating-linear-gradient(45deg,transparent 0px,transparent 11px,rgba(255,0,0,.2)12px)
    background repeating-linear-gradient(-45deg,transparent 0px,transparent 11px,rgba(255,0,0,.2)12px), repeating-linear-gradient(45deg,transparent 0px,transparent 11px,rgba(255,0,0,.2)12px)
    -ff _ffa
    -fs 15
    -lh 30
    -fw 700
    -c #111

  &__input
  &__textarea
    -w 100%
    outline none
    -br 0 none
    -brb 2 solid $link_color_border
    transit border-bottom .15s ease-out 0s
    -p 4 0

    &:focus
      -brb 2 solid $link_hover_color_border

  &__submit
    -c $link_color
    -br 1 solid $link_color_border
    -p 7 14
    b-radius 3
    -bgc white

    &:hover
      -c $link_hover_color
      -br 1 solid $link_hover_color_border

.i-user
  sprite_sprite(sprite_account)
  -mb -6
  -d inline-block
  -mr 5
  -ml 1em

  +media('max-width:500px')
    -ml 0

.i-homepage
  sprite_sprite(sprite_web)
  -mb -6
  -d inline-block
  -mr 5

.i-date
  sprite_sprite(sprite_calendar)
  -mb -6
  -d inline-block
  -mr 5

.i-email
  sprite_sprite(sprite_email)
  -mb -6
  -d inline-block
  -mr 5



apply_media_cache()