/*
  Welcome to Susy. Use this file to define screen styles.
  Import this file using the following HTML or equivalent:
  <link href="/stylesheets/screen.css" media="screen" rel="stylesheet" type="text/css" />
 
/* @group reset */
@import compass/reset.sass
/* @end */

/* @group defaults */
@import base.sass
/* @end */

/* @group STRUCTURE */

body
  +susy
 
#page
  +container
  +sans-family
  :color= !text
 
#brand
  +columns(8)
  +pad(1,1)
  +full
  :margin
    :top 3em
    :bottom 1.5em
  h1 a
    +columns(5,8)
    +pad(1,2,8)
    +full(8)
    +replace-text("susy_logo.png", "left")
    :height 105px
    &:focus, &:hover, &:active
      :border-bottom 0
    
#nav
  +columns(2)
  +alpha
  ul
    +no-bullets
    :margin 0
    :text-align right
    :font-weight bold
 
#content
  +columns(8)
  +omega
  :margin-bottom 3em
  #description
    +columns(5,8)
    +alpha(8)
  #credit
    +columns(3,8)
    +omega(8)
    :color= !light
 
#site-info
  +columns(8)
  +prefix(2)
  +full
  :padding
    :top .5em
    :bottom .75em
  :border-top
    :width .25em
    :style dashed
    :color= !light
  +serif-family
  :font-style italic
  :color= !light
  p
    :margin 0
    &.license
      +columns(5,8)
      +alpha(8)
    &.styles
      +columns(3,8)
      +omega(8)
      :text-align right
  a:link, a:visited
    :color= !light
    :font-weight bold

.tutorial
  #content
    :margin-bottom 3em
    li
      :margin-bottom 1.5em
    code
      :font-size 1.25em
      :font-family monospace
      :color= !light
    img
      :width 100%

/* @end */