@import 'reset.scss'
$accent: #f13937

body
  font-family: 'Helvetica Neue', helvetica, sans-serif
  color: #373b43
  text-shadow: 0 1px 1px #fff
  background: #e9e4d7 url("../images/jq_bg.png")
  &::before
    position: absolute
    left: 0
    top: 0
    opacity: .3
    width: 100%
    height: 100px
    background-image: -moz-linear-gradient(100% 100% 90deg, #eae6d9, $accent)
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($accent), to(#eae6d9))
    content: ""
    z-index: 1

#wrapper
  position: relative
  padding: 70px
  z-index: 2
  max-width: 1000px
  margin: 0 auto
  @media screen and (max-width: 850px)
    padding: 20px

a
  text-decoration: none
  color: $accent
  &:hover
    color: $accent - #333

code
  font-weight: bold
  background: #efece4
  padding: 1px 4px
  margin: 0 4px

header
  h1
    font-size: 80px
    font-family: "chunk-1","chunk-2", 'Helvetica Neue', helvetica, sans-serif
    span
      color: $accent
    @media screen and (max-width: 850px)
      font-size: 50px
    @media screen and (max-width: 480px)
      font-size: 30px
  h2
    font-size: 40px
    font-family: "chunk-1","chunk-2", 'Helvetica Neue', helvetica, sans-serif
    margin: 0 0 20px 0
    @media screen and (max-width: 850px)
      font-size: 20px
  p
    font-weight: bold
    margin: 0 0 40px 0

form
  margin: 0 60px 40px 0
  float: left
  @media screen and (max-width: 480px)
    float: none
    margin-right: 0
    overflow: hidden
  label
    font-weight: bold
    display: block
    margin: 0 0 5px 0
  select
    float: left
    margin: 4px 5px 0 0
  a.calendar_icon
    cursor: pointer
    display: inline-block
    margin: 5px 0 0 0
    width: 16px
    height: 16px
    background: url("../images/icon_calendar.png")
  input
    display: inline-block
    margin: 0 5px 10px 0
    padding: 0 5px
    font-size: 14px
    height: 26px
    line-height: 26px
    width: 140px
    border: 1px solid #a9a497

#readme
  clear: both
  font-weight: normal
  h1
    display: none
  h2
    font-size: 16px
    font-weight: bold
    margin: 0 0 20px 0
  h3
    font-size: 14px
    font-weight: bold
    margin: 0 0 20px 20px
  p
    font-size: 13px
    line-height: 20px
    margin: 0 0 20px 0
    padding: 0 40px
  ul
    margin: 0 0 20px 0
    padding: 0 40px
    font-size: 13px
    line-height: 20px
    ul
      padding: 0 20px
      margin: 0
  p + ul
    padding-left: 60px
    padding-right: 60px
  @media screen and (max-width: 480px)
    h3
      margin-left: 0
    p, ul, p + ul
      padding: 0
    ul ul
      padding: 0 10px
