PT2010

@import base.sass

+blueprint-typography

body 
  +reset-box-model

img
  :border 0

#frame
  +container

#header
  :height 106px
  :position relative
  :overflow hidden
  h1
    :margin 0
    :height 106px
    :width 252px
    +replace-text("header.gif")
  p
    :font-size 16px
    :color #666
    :position absolute
    :top 40px
    :right 0

#splash
  :height 315px
  :padding 53px 0 0 0
  :margin 0 0 15px 0
  :position relative
  :overflow hidden
  :background= image_url("splash.gif") "no-repeat"
  #boxshot
    +column(7)
  #offer
    +column(6)
    +colborder(#E1E1E2)
    h2
      :margin 0 0 5px 30px
      :font-size 14px
      :line-height 1.2
      :font-weight bold
      :color #000
    h3
      :margin 0 0 0 30px
      :font-size 12px
      :line-height 1.4
      :color #000
      strong
        :display block
        :font-size 14px
        :color #008469
    ul
      +horizontal-list
      :margin 8px 0 13px 30px
      li
        +span(2)
        :font-size 10px
        :line-height 1.2
        :text-align center
        &.first
          +border(#4D4F53)
        strong
          :font-size 13px
          :display block
    .form-input-select
      :margin 0 0 5px 30px
      select
        :width 130px
    p
      :margin 10px 0 0 30px
      :font-size 11px
    h4
      :margin 5px 0 0 30px
      :padding 0 0 0 33px
      :background= image_url("phone.gif") "no-repeat" 0 4px
      :font-size 13px
      :font-weight bold
      :color #E98300
  #introducing
    +column(9, true)
    :padding 10px 0 0 20px
    h1
      :font-size 28px
      :margin 0 0 20px 0
      strong
        :display block
        :font-size 38px
    h2
      :color #E98300
      :font-size 20px
      :line-height 1.2
      :margin 0 0 20px 0
    h3
      :color #008469
      :font-size 18px
      :line-height 1.2

=navigation(!title, !width, !last = false)
  &#nav_#{!title}
    :width= !width
    @if !last
      :margin 0
    :background= image_url("#{!title}_off.gif") "no-repeat"
    .#{!title} &
      :background= image_url("#{!title}_on.gif") "no-repeat"

#navigation
  :height 38px
  :border-bottom= 1px "solid" !border_color
  :margin 0 0 15px 0
  ul
    +horizontal-list
    li
      :padding 0
      :margin 0 5px 0 0
      a
        :color #333
        :text-decoration none
        :display block
        :height 27px
        :padding 11px 0 0 0
        :text-align center
      +navigation("home", 54px)  
      +navigation("features", 93px)
      +navigation("tour", 95px)  
      +navigation("business_care", 157px)
      +navigation("quantum", 129px)  
      +navigation("payroll_solutions", 169px)
      +navigation("addons", 124px)  
      +navigation("system_reqs", 92px, true)

#container
  +clearfix

#left
  +column(16)

#right
  +column(8, true)

#footer
  :border-top 1px solid #D8DAD0
  :margin 20px 0 0 0
  :padding 20px 100px 0 0
  :background= image_url("logo.gif") "no-repeat" "right" 0
  p
    :font-size 10px
    :color #666