application.sass

#logo
  margin-top: 30px
  color: #c00
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
  letter-spacing: -1px
  font-weight: bold

base.sass

/* 
 ** Skeleton V1.0.2
 ** Copyright 2011, Dave Gamache
 ** www.getskeleton.com
 ** Free to use under the MIT license.
 ** http://www.opensource.org/licenses/mit-license.php
 ** 5/20/2011

/* Table of Content
 *==================================================
 *	#Reset & Basics
 *	#Basic Styles
 *	#Site Styles
 *	#Typography
 *	#Links
 *	#Lists
 *	#Images
 *	#Buttons
 *	#Tabs
 *	#Forms
 *	#Misc

/* #Reset & Basics (Inspired by E. Meyers)
 *==================================================

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video
  margin: 0
  padding: 0
  border: 0
  font-size: 100%
  font: inherit
  vertical-align: baseline

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section
  display: block

body
  line-height: 1

ol, ul
  list-style: none

blockquote, q
  quotes: none

blockquote
  &:before, &:after
    content: ''
    content: none

q
  &:before, &:after
    content: ''
    content: none

table
  border-collapse: collapse
  border-spacing: 0

/* #Basic Styles
 *==================================================

body
  background: #fff
  font: 14px / 21px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
  color: #444
  -webkit-font-smoothing: antialiased
  /* Fix for webkit rendering
  -webkit-text-size-adjust: none

/* #Typography
 *==================================================

h1, h2, h3, h4, h5, h6
  color: #181818
  font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif
  font-weight: normal

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a
  font-weight: inherit

h1
  font-size: 46px
  line-height: 50px
  margin-bottom: 14px

h2
  font-size: 35px
  line-height: 40px
  margin-bottom: 10px

h3
  font-size: 28px
  line-height: 34px
  margin-bottom: 8px

h4
  font-size: 21px
  line-height: 30px
  margin-bottom: 4px

h5
  font-size: 17px
  line-height: 24px

h6
  font-size: 14px
  line-height: 21px

.subheader
  color: #777

p
  margin: 0 0 20px 0
  img
    margin: 0
  &.lead
    font-size: 21px
    line-height: 27px
    color: #777

em
  font-style: italic

strong
  font-weight: bold
  color: #333

small
  font-size: 80%

/*	Blockquotes

blockquote
  font-size: 17px
  line-height: 24px
  color: #777
  font-style: italic
  p
    font-size: 17px
    line-height: 24px
    color: #777
    font-style: italic
  margin: 0 0 20px
  padding: 9px 20px 0 19px
  border-left: 1px solid #ddd
  cite
    display: block
    font-size: 12px
    color: #555
    &:before
      content: "\2014 \0020"
    a
      color: #555
      &:visited
        color: #555

hr
  border: solid #ddd
  border-width: 1px 0 0
  clear: both
  margin: 10px 0 30px
  height: 0

/* #Links
 *==================================================

a
  color: #333
  text-decoration: underline
  outline: 0
  &:visited
    color: #333
    text-decoration: underline
    outline: 0
  &:hover, &:focus
    color: #000

p a
  line-height: inherit
  &:visited
    line-height: inherit

/* #Lists
 *==================================================

ul, ol
  margin-bottom: 20px

ul
  list-style: none outside

ol
  list-style: decimal
  margin-left: 30px

ul
  &.square, &.circle, &.disc
    margin-left: 30px
  &.square
    list-style: square outside
  &.circle
    list-style: circle outside
  &.disc
    list-style: disc outside
  ul, ol
    margin: 4px 0 5px 30px
    font-size: 90%

ol
  ol, ul
    margin: 4px 0 5px 30px
    font-size: 90%

ul
  ul li, ol li
    margin-bottom: 6px

ol
  ol li, ul li
    margin-bottom: 6px

li
  line-height: 18px
  margin-bottom: 12px

ul.large li, li p
  line-height: 21px

/* #Images
 *==================================================

img.scale-with-grid
  max-width: 100%
  height: auto

/* #Buttons
 *==================================================

a.button, button
  background: #eee
  /* Old browsers
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%)
  /* FF3.6+
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(0, 0, 0, 0.2)))
  /* Chrome,Safari4+
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%)
  /* Chrome10+,Safari5.1+
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%)
  /* Opera11.10+
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%)
  /* IE10+
  background: linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%)
  /* W3C
  border: 1px solid #aaa
  border-top: 1px solid #ccc
  border-left: 1px solid #ccc
  padding: 4px 12px
  -moz-border-radius: 3px
  -webkit-border-radius: 3px
  border-radius: 3px
  color: #444
  display: inline-block
  font-size: 11px
  font-weight: bold
  text-decoration: none
  text-shadow: 0 1px rgba(255, 255, 255, 0.75)
  cursor: pointer
  margin-bottom: 20px
  line-height: 21px
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif

input
  &[type="submit"], &[type="reset"], &[type="button"]
    background: #eee
    /* Old browsers
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%)
    /* FF3.6+
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(100%, rgba(0, 0, 0, 0.2)))
    /* Chrome,Safari4+
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%)
    /* Chrome10+,Safari5.1+
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%)
    /* Opera11.10+
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%)
    /* IE10+
    background: linear-gradient(top, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%)
    /* W3C
    border: 1px solid #aaa
    border-top: 1px solid #ccc
    border-left: 1px solid #ccc
    padding: 4px 12px
    -moz-border-radius: 3px
    -webkit-border-radius: 3px
    border-radius: 3px
    color: #444
    display: inline-block
    font-size: 11px
    font-weight: bold
    text-decoration: none
    text-shadow: 0 1px rgba(255, 255, 255, 0.75)
    cursor: pointer
    margin-bottom: 20px
    line-height: 21px
    font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif

a.button:hover, button:hover
  color: #222
  background: #eee
  /* Old browsers
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%)
  /* FF3.6+
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(0, 0, 0, 0.3)))
  /* Chrome,Safari4+
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%)
  /* Chrome10+,Safari5.1+
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%)
  /* Opera11.10+
  background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%)
  /* IE10+
  background: linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%)
  /* W3C
  border: 1px solid #888
  border-top: 1px solid #aaa
  border-left: 1px solid #aaa

input
  &[type="submit"]:hover, &[type="reset"]:hover, &[type="button"]:hover
    color: #222
    background: #eee
    /* Old browsers
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%)
    /* FF3.6+
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0.3)), color-stop(100%, rgba(0, 0, 0, 0.3)))
    /* Chrome,Safari4+
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%)
    /* Chrome10+,Safari5.1+
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%)
    /* Opera11.10+
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%)
    /* IE10+
    background: linear-gradient(top, rgba(255, 255, 255, 0.3) 0%, rgba(0, 0, 0, 0.3) 100%)
    /* W3C
    border: 1px solid #888
    border-top: 1px solid #aaa
    border-left: 1px solid #aaa

a.button:active, button:active
  background: #eee
  /* Old browsers
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%)
  /* FF3.6+
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.3)))
  /* Chrome,Safari4+
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%)
  /* Chrome10+,Safari5.1+
  background: -o-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%)
  /* Opera11.10+
  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%)
  /* IE10+
  background: linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%)
  /* W3C
  border: 1px solid #888
  border-bottom: 1px solid #aaa
  border-right: 1px solid #aaa

input
  &[type="submit"]:active, &[type="reset"]:active, &[type="button"]:active
    background: #eee
    /* Old browsers
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%)
    /* FF3.6+
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.3)), color-stop(100%, rgba(255, 255, 255, 0.3)))
    /* Chrome,Safari4+
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%)
    /* Chrome10+,Safari5.1+
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%)
    /* Opera11.10+
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%)
    /* IE10+
    background: linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(255, 255, 255, 0.3) 100%)
    /* W3C
    border: 1px solid #888
    border-bottom: 1px solid #aaa
    border-right: 1px solid #aaa

.button.full-width, button.full-width
  width: 100%
  padding-left: 0 !important
  padding-right: 0 !important
  text-align: center

input
  &[type="submit"].full-width, &[type="reset"].full-width, &[type="button"].full-width
    width: 100%
    padding-left: 0 !important
    padding-right: 0 !important
    text-align: center

/* #Tabs (activate in app.js)
 *==================================================

ul
  &.tabs
    display: block
    margin: 0 0 20px 0
    padding: 0
    border-bottom: solid 1px #ddd
    li
      display: block
      width: auto
      height: 30px
      padding: 0
      float: left
      margin-bottom: 0
      a
        display: block
        text-decoration: none
        width: auto
        height: 29px
        padding: 0px 20px
        line-height: 30px
        border: solid 1px #ddd
        border-width: 1px 0 0 1px
        margin: 0
        background: #f5f5f5
        font-size: 13px
        &.active
          background: #fff
          height: 30px
          position: relative
          top: -4px
          padding-top: 4px
          border-right-width: 1px
          margin: 0 -1px 0 0
          color: #111
          -moz-border-radius-topleft: 2px
          -webkit-border-top-left-radius: 2px
          border-top-left-radius: 2px
          -moz-border-radius-topright: 2px
          -webkit-border-top-right-radius: 2px
          border-top-right-radius: 2px
      &:first-child a
        -moz-border-radius-topleft: 2px
        -webkit-border-top-left-radius: 2px
        border-top-left-radius: 2px
      &:last-child a
        border-width: 1px 1px 0 1px
        -moz-border-radius-topright: 2px
        -webkit-border-top-right-radius: 2px
        border-top-right-radius: 2px
  &.tabs-content
    margin: 0
    display: block
    > li
      display: none
      &.active
        display: block
  &.tabs
    &:before
      content: '\0020'
      display: block
      overflow: hidden
      visibility: hidden
      width: 0
      height: 0
    &:after
      content: '\0020'
      display: block
      overflow: hidden
      visibility: hidden
      width: 0
      height: 0
      clear: both
    zoom: 1

/* Clearfixing tabs for beautiful stacking

/* #Forms
 *==================================================

form, fieldset
  margin-bottom: 20px

input
  &[type="text"], &[type="password"], &[type="email"]
    border: 1px solid #ccc
    padding: 6px 4px
    outline: none
    -moz-border-radius: 2px
    -webkit-border-radius: 2px
    border-radius: 2px
    font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
    color: #777
    margin: 0
    width: 210px
    max-width: 100%
    display: block
    margin-bottom: 20px
    background: #fff

textarea
  border: 1px solid #ccc
  padding: 6px 4px
  outline: none
  -moz-border-radius: 2px
  -webkit-border-radius: 2px
  border-radius: 2px
  font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
  color: #777
  margin: 0
  width: 210px
  max-width: 100%
  display: block
  margin-bottom: 20px
  background: #fff

select
  border: 1px solid #ccc
  padding: 6px 4px
  outline: none
  -moz-border-radius: 2px
  -webkit-border-radius: 2px
  border-radius: 2px
  font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif
  color: #777
  margin: 0
  width: 210px
  max-width: 100%
  display: block
  margin-bottom: 20px
  background: #fff
  padding: 0

input
  &[type="text"]:focus, &[type="password"]:focus, &[type="email"]:focus
    border: 1px solid #aaa
    color: #444
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2)
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2)
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2)

textarea
  &:focus
    border: 1px solid #aaa
    color: #444
    -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2)
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.2)
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.2)
  min-height: 60px

label, legend
  display: block
  font-weight: bold
  font-size: 13px

select
  width: 220px

input[type="checkbox"]
  display: inline

label span, legend span
  font-weight: normal
  font-size: 13px
  color: #444

/* #Misc
 *==================================================

.remove-bottom
  margin-bottom: 0 !important

.half-bottom
  margin-bottom: 10px !important

.add-bottom
  margin-bottom: 20px !important

layout.sass

/* 
 ** Skeleton V1.0.2
 ** Copyright 2011, Dave Gamache
 ** www.getskeleton.com
 ** Free to use under the MIT license.
 ** http://www.opensource.org/licenses/mit-license.php
 ** 5/20/2011

/* Table of Content
 *==================================================
 *	#Site Styles
 *	#Page Styles
 *	#Media Queries
 *	#Font-Face

/* #Site Styles
 *==================================================

/* #Page Styles
 *==================================================

/* #Media Queries
 *==================================================

/* iPad Portrait/Browser
@media only screen and (min-width: 768px) and (max-width: 991px)


/* Mobile/Browser
@media only screen and (max-width: 767px)


/* Mobile Landscape/Browser
@media only screen and (min-width: 480px) and (max-width: 767px)


/* Anything smaller than standard 960
@media only screen and (max-width: 959px)


/* iPad Portrait Only
@media only screen and (min-width: 768px) and (max-width: 991px) and (max-device-width: 1000px)


/* Mobile Only
@media only screen and (max-width: 767px) and (max-device-width: 1000px)


/* Mobile Landscape Only
@media only screen and (min-width: 480px) and (max-width: 767px) and (max-device-width: 1000px)


/* #Font-Face
 *==================================================
/* 	This is the proper syntax for an @font-face file 
 *		Just create a "fonts" folder at the root, 
 *		copy your FontName into code below and remove
 *		comment brackets

/*	@font-face {
 *	    font-family: 'FontName';
 *	    src: url('../fonts/FontName.eot');
 *	    src: url('../fonts/FontName.eot?iefix') format('eot'),
 *	         url('../fonts/FontName.woff') format('woff'),
 *	         url('../fonts/FontName.ttf') format('truetype'),
 *	         url('../fonts/FontName.svg#webfontZam02nTh') format('svg');
 *	    font-weight: normal;
 *	    font-style: normal; }

skeleton.sass

/* 
 ** Skeleton V1.0.2
 ** Copyright 2011, Dave Gamache
 ** www.getskeleton.com
 ** Free to use under the MIT license.
 ** http://www.opensource.org/licenses/mit-license.php
 ** 5/20/2011

/* Table of Contents
 *==================================================
 *	#Base 960 Grid    
 *	#Tablet (Portrait)
 *	#Mobile (Portrait) 
 *	#Mobile (Landscape)
 *	#Clearing

/* #Base 960 Grid 
 *==================================================

.container
  position: relative
  width: 960px
  margin: 0 auto
  padding: 0

.column, .columns
  float: left
  display: inline
  margin-left: 10px
  margin-right: 10px

.row
  margin-bottom: 20px

/* Nested Column Classes

.column.alpha, .columns.alpha
  margin-left: 0

.column.omega, .columns.omega
  margin-right: 0

/* Base Grid

.container
  .one.column
    width: 40px
  .two.columns
    width: 100px
  .three.columns
    width: 160px
  .four.columns
    width: 220px
  .five.columns
    width: 280px
  .six.columns
    width: 340px
  .seven.columns
    width: 400px
  .eight.columns
    width: 460px
  .nine.columns
    width: 520px
  .ten.columns
    width: 580px
  .eleven.columns
    width: 640px
  .twelve.columns
    width: 700px
  .thirteen.columns
    width: 760px
  .fourteen.columns
    width: 820px
  .fifteen.columns
    width: 880px
  .sixteen.columns
    width: 940px
  .one-third.column
    width: 300px
  .two-thirds.column
    width: 620px
  .offset-by-one
    padding-left: 60px
  .offset-by-two
    padding-left: 120px
  .offset-by-three
    padding-left: 180px
  .offset-by-four
    padding-left: 240px
  .offset-by-five
    padding-left: 300px
  .offset-by-six
    padding-left: 360px
  .offset-by-seven
    padding-left: 420px
  .offset-by-eight
    padding-left: 480px
  .offset-by-nine
    padding-left: 540px
  .offset-by-ten
    padding-left: 600px
  .offset-by-eleven
    padding-left: 660px
  .offset-by-twelve
    padding-left: 720px
  .offset-by-thirteen
    padding-left: 780px
  .offset-by-fourteen
    padding-left: 840px
  .offset-by-fifteen
    padding-left: 900px
  &:after
    content: "\0020"
    display: block
    height: 0
    clear: both
    visibility: hidden

/* Offsets

/* #Tablet (Portrait)
 *==================================================

/* Note: Design for a width of 768px

@media only screen and (min-width: 768px) and (max-width: 959px)
  .container
    width: 768px
    .column, .columns
      margin-left: 10px
      margin-right: 10px
  .column.alpha, .columns.alpha
    margin-left: 0
    margin-right: 10px
  .column.omega, .columns.omega
    margin-right: 0
    margin-left: 10px
  .container
    .one.column
      width: 28px
    .two.columns
      width: 76px
    .three.columns
      width: 124px
    .four.columns
      width: 172px
    .five.columns
      width: 220px
    .six.columns
      width: 268px
    .seven.columns
      width: 316px
    .eight.columns
      width: 364px
    .nine.columns
      width: 412px
    .ten.columns
      width: 460px
    .eleven.columns
      width: 508px
    .twelve.columns
      width: 556px
    .thirteen.columns
      width: 604px
    .fourteen.columns
      width: 652px
    .fifteen.columns
      width: 700px
    .sixteen.columns
      width: 748px
    .one-third.column
      width: 236px
    .two-thirds.column
      width: 492px
    .offset-by-one
      padding-left: 48px
    .offset-by-two
      padding-left: 96px
    .offset-by-three
      padding-left: 144px
    .offset-by-four
      padding-left: 192px
    .offset-by-five
      padding-left: 288px
    .offset-by-six
      padding-left: 336px
    .offset-by-seven
      padding-left: 348px
    .offset-by-eight
      padding-left: 432px
    .offset-by-nine
      padding-left: 480px
    .offset-by-ten
      padding-left: 528px
    .offset-by-eleven
      padding-left: 576px
    .offset-by-twelve
      padding-left: 624px
    .offset-by-thirteen
      padding-left: 672px
    .offset-by-fourteen
      padding-left: 720px
    .offset-by-fifteen
      padding-left: 900px
  /* Offsets


/*	#Mobile (Portrait) 
 *==================================================

/* Note: Design for a width of 320px

@media only screen and (max-width: 767px)
  .container
    width: 300px
  .columns, .column
    margin: 0
  .container
    .one.column, .two.columns, .three.columns, .four.columns, .five.columns, .six.columns, .seven.columns, .eight.columns, .nine.columns, .ten.columns, .eleven.columns, .twelve.columns, .thirteen.columns, .fourteen.columns, .fifteen.columns, .sixteen.columns, .one-third.column, .two-thirds.column
      width: 300px
    .offset-by-one, .offset-by-two, .offset-by-three, .offset-by-four, .offset-by-five, .offset-by-six, .offset-by-seven, .offset-by-eight, .offset-by-nine, .offset-by-ten, .offset-by-eleven, .offset-by-twelve, .offset-by-thirteen, .offset-by-fourteen, .offset-by-fifteen
      padding-left: 0
  /* Offsets


/* #Mobile (Landscape)
 *==================================================

/* Note: Design for a width of 480px

@media only screen and (min-width: 480px) and (max-width: 767px)
  .container
    width: 420px
  .columns, .column
    margin: 0
  .container
    .one.column, .two.columns, .three.columns, .four.columns, .five.columns, .six.columns, .seven.columns, .eight.columns, .nine.columns, .ten.columns, .eleven.columns, .twelve.columns, .thirteen.columns, .fourteen.columns, .fifteen.columns, .sixteen.columns, .one-third.column, .two-thirds.column
      width: 420px


/* #Clearing
 *==================================================

/* Self Clearing Goodness

/* Use clearfix class on parent to clear nested columns, 
 *or wrap each row of columns in a <div class="row">

.clearfix
  &:before, &:after
    content: '\0020'
    display: block
    overflow: hidden
    visibility: hidden
    width: 0
    height: 0

.row
  &:before
    content: '\0020'
    display: block
    overflow: hidden
    visibility: hidden
    width: 0
    height: 0
  &:after
    content: '\0020'
    display: block
    overflow: hidden
    visibility: hidden
    width: 0
    height: 0
    clear: both

.clearfix:after
  clear: both

.row, .clearfix
  zoom: 1

/* You can also use a <br class="clear" /> to clear columns

.clear
  clear: both
  display: block
  overflow: hidden
  visibility: hidden
  width: 0
  height: 0