added compass, added some basic stylesheets

source/stylesheets/_library.sass

@@ -0,0 +1,9 @@
+@import library/reset.sass
+@import library/clearfix.sass
+@import library/border_radius.sass
+@import library/box_shadow.sass
+@import library/list_borders.sass
+@import library/typography.sass
+@import library/link_colors.sass
+@import library/gradient.sass
+@import library/button_style.sass

source/stylesheets/library/_border_radius.sass

@@ -0,0 +1,47 @@
+!default_border_radius ||= 5px
+
+// Round all borders by amount
+=border-radius(!radius = !default_border_radius)
+  border-radius= !radius
+  -moz-border-radius= !radius
+  -webkit-border-radius= !radius
+
+// Round radius at position by amount.
+// values for !vert: "top", "bottom"
+// values for !horz: "left", "right
+=border-corner-radius(!vert, !horz, !radius = !default_border_radius)
+  border-#{!vert}-#{!horz}-radius= !radius
+  -moz-border-radius-#{!vert}#{!horz}= !radius
+  -webkit-border-#{!vert}-#{!horz}-radius= !radius
+  
+=border-top-left-radius(!radius = !default_border_radius)
+  +border-corner-radius("top", "left", !radius)
+
+=border-top-right-radius(!radius = !default_border_radius)
+  +border-corner-radius("top", "right", !radius)
+
+=border-bottom-left-radius(!radius = !default_border_radius)
+  +border-corner-radius("bottom", "left", !radius)
+
+=border-bottom-right-radius(!radius = !default_border_radius)
+  +border-corner-radius("bottom", "right", !radius)
+
+// Round top corners by amount
+=border-top-radius(!radius = !default_border_radius)
+  +border-top-left-radius(!radius)
+  +border-top-right-radius(!radius)
+
+// Round right corners by amount
+=border-right-radius(!radius = !default_border_radius)
+  +border-top-right-radius(!radius)
+  +border-bottom-right-radius(!radius)
+
+// Round bottom corners by amount
+=border-bottom-radius(!radius = !default_border_radius)
+  +border-bottom-left-radius(!radius)
+  +border-bottom-right-radius(!radius)
+
+// Round left corners by amount
+=border-left-radius(!radius = !default_border_radius)
+  +border-top-left-radius(!radius)
+  +border-bottom-left-radius(!radius)

source/stylesheets/library/_box_shadow.sass

@@ -0,0 +1,10 @@
+!default_box_shadow_color = #333
+!default_box_shadow_x_offset = 1px
+!default_box_shadow_y_offset = 1px
+!default_box_shadow_blur_radius = 8px
+
+=box-shadow(!color = !default_box_shadow_color, !x_offset = !default_box_shadow_x_offset, !y_offset = !default_box_shadow_y_offset, !blur_radius = !default_box_shadow_blur_radius)
+  box-shadow= !x_offset !y_offset !blur_radius !color
+  -webkit-box-shadow= !x_offset !y_offset !blur_radius !color
+  -moz-box-shadow= !x_offset !y_offset !blur_radius !color
+  

source/stylesheets/library/_button_style.sass

@@ -0,0 +1,45 @@
+=btn-border-color(!color)
+  border-color= darken(!color, 25)
+
+=btn-text-shadow(!color)
+  !text_shadow = darken(!color, 25)
+  text-shadow= !text_shadow  "1px 1px 1px"
+
+=btn-style(!color)
+  !color1 = lighten(!color, 30)
+  !color2 = darken(!color, 20)
+  +h-linear-gradient(!color1, !color2)
+  background-color= !color
+  +btn-border-color(!color)
+  +btn-text-shadow(!color)
+
+=btn-style-hover(!color)
+  !color = lighten(!color, 8)
+  !color1 = lighten(!color, 22)
+  !color2 = darken(!color, 38)
+  +h-linear-gradient(!color1, !color2)
+  background-color= !color
+  +btn-border-color(!color)
+  +btn-text-shadow(!color)
+
+=btn-style-active(!color)
+  !color = darken(!color, 5)
+  !color1 = lighten(!color, 25)
+  !color2 = darken(!color, 35)
+  +h-linear-gradient(!color1, !color2)
+  background-color= !color
+  +btn-border-color(!color)
+  +btn-text-shadow(!color)
+
+=btn-structure(!font_size, !border_width, !line_height = !font_size *1.2)
+  !v_padding = floor(!font_size/2.5)
+  !h_padding = floor(!font_size)
+  !v_padding_active = !v_padding - 1px
+  !h_padding_active = !h_padding - 1px
+  border-width= !border_width
+  font-size= !font_size
+  padding= !v_padding !h_padding
+  line-height= !line_height
+  &:active
+    border-width= !border_width + 1px
+    padding= !v_padding_active !h_padding_active

source/stylesheets/library/_clearfix.sass

@@ -0,0 +1,24 @@
+// based on compass clearfix
+
+@import _hacks.sass
+
+// Extends the element to enclose any floats it contains.
+// This basic method is preferred for the usual case, when positioned content will not show outside the bounds of the container.
+// Recommendations include using this in conjunction with a width:
+// http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html
+=clearfix
+  :overflow hidden
+  +has-layout
+
+// Extends the element to enclose any floats it contains.
+// This older "Easy Clearing" method has the advantage of allowing positioned elements to hang outside the bounds of the container, at the expense of more tricky CSS.
+// http://www.positioniseverything.net/easyclearing.html
+=pie-clearfix
+  &:after
+    :content " "
+    :display block
+    :height 0
+    :clear both
+    :overflow hidden
+    :visibility hidden
+  +has-layout

source/stylesheets/library/_float.sass

@@ -0,0 +1,16 @@
+// based on compass float
+
+@import modules/_clearfix.sass
+
+// Available as alternate syntax with just +float
+=float(!side = "left")
+  :display inline
+  :float= !side
+
+// Implementation of float:left with fix for double-margin bug
+=float-left
+  +float("left")
+
+// Implementation of float:right with fix for double-margin bug
+=float-right
+  +float("right")

source/stylesheets/library/_gradient.sass

@@ -0,0 +1,15 @@
+=linear-gradient(!from_coord, !to_coord, !color_start, !color_end, !color_stop1 = 0, !color_stop1_pos = .3, !color_stop_2 = 0, !color_stop2_pos = .9)
+  !gradient = "#{!from_coord}, #{!to_coord}, from(#{!color_start}), to(#{!color_end})"
+  //@if !color_stop1 != 0
+  //  !gradient += "color-stop(#{!color_stop1_pos}, #{!color_stop1})"
+  background= "-webkit-gradient(linear, #{!gradient})"
+  background= "-moz-linear-gradient(#{!gradient})"
+
+=h-linear-gradient(!color1, !color2)
+  +linear-gradient("left top", "left bottom", !color1, !color2)
+
+=v-linear-gradient(!color1, !color2)
+  +linear-gradient("left top", "right top", !color1, !color2)
+
+//=h-three-color-gradient(!color1, !color2, !color3, !color3_pos = .5)
+//  +linear-gradient("left top", "left bottom", !color1, !color2, !color3, !color3_pos)

source/stylesheets/library/_hacks.sass

@@ -0,0 +1,8 @@
+// based on compass hacks
+
+=has-layout
+  // This makes ie6 get layout
+  :display inline-block
+  // and this puts it back to block
+  &
+    :display block

source/stylesheets/library/_link_colors.sass

@@ -0,0 +1,24 @@
+!default_link_color           ||= #165B94
+!default_link_color_hover     ||= #fff
+!default_link_color_alt       ||= #91D5F1
+!default_link_color_hover_alt ||= #000
+
+=link-color(!hover = true)
+  +link-color-style(!default_link_color, !default_link_color_hover, !default_link_color, !hover)
+
+=link-color-alt(!hover = true)
+  +link-color-style(!default_link_color_alt, !default_link_color_hover_alt, !default_link_color_alt, !hover)
+  
+=link-color-heading(!link_color = "inherit", !hover_bg_color = #ccc)
+  +link-color-style(!link_color,)
+
+=link-color-style(!color = !default_link_color, !color_hover = !default_link_color_hover, !link_hover_bg = !color, !hover = true)
+  color= !color
+  padding: 2px
+  margin: 0 -2px
+  +border-radius(3px)
+  @if !hover
+    &:hover
+      background-color= !link_hover_bg
+      color= !color_hover
+      text-decoration: none

source/stylesheets/library/_list_borders.sass

@@ -0,0 +1,7 @@
+=list-borders(!color1,!color2)
+  border-left= "1px solid" !color1
+  border-right= "1px solid" !color2
+  &.alpha
+    border-left: none
+  &.omega
+    border-right: 0

source/stylesheets/library/_opacity.sass

@@ -0,0 +1,18 @@
+//**
+  Provides cross-browser css opacity.
+  @param !opacity
+    A number between 0 and 1, where 0 is transparent and 1 is opaque.
+=opacity(!opacity)
+  :opacity= !opacity
+  :-moz-opacity= !opacity
+  :-khtml-opacity= !opacity
+  :-ms-filter= "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + round(!opacity*100) + ")"
+  :filter= "alpha(opacity=" + round(!opacity*100) + ")"
+
+// Make an element completely transparent.
+=transparent
+  +opacity(0)
+
+// Make an element completely opaque.
+=opaque
+  +opacity(1)

source/stylesheets/library/_reset.sass

@@ -0,0 +1,58 @@
+// Borrowed from the blueprint reset
+
+// Global reset rules.
+// For more specific resets, use the reset mixins provided below
+=global-reset
+  html, body
+    +reset
+  +nested-reset
+
+// Reset all elements within some selector scope.To reset the selector itself,
+// mixin the appropriate reset mixin for that element type as well. This could be
+// useful if you want to style a part of your page in a dramatically different way.
+=nested-reset
+  div, span, object, iframe, h1, h2, h3, h4, h5, h6, p,
+  pre, a, abbr, acronym, address, code, del, dfn, em, img,
+  dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr
+    +reset
+  blockquote, q
+    +reset-quotation
+  th, td, caption
+    +reset-table-cell
+  table
+    +reset-table
+  a img
+    :border none
+
+=reset-box-model
+  :margin 0
+  :padding 0
+  :border 0
+
+=reset
+  +reset-box-model
+  :font
+    :weight inherit
+    :style inherit
+    :size 100%
+    :family inherit
+  :vertical-align baseline
+
+=reset-quotation
+  +reset
+  :quotes "" ""
+  &:before,
+  &:after
+    :content ""
+
+=reset-table-cell
+  +reset
+  :text-align left
+  :font-weight normal
+  :vertical-align middle
+
+=reset-table
+  +reset
+  :border-collapse separate
+  :border-spacing 0
+  :vertical-align middle

source/stylesheets/library/_sprite_hover.sass

@@ -0,0 +1,4 @@
+=sprite-column-hover-row(!col, !row_hover=2, !width=!sprite_default_size, !height=!sprite_default_size, !margin=!sprite_default_margin)
+  +sprite-position(!col, 1, !width, !height, !margin)
+  &:hover
+    +sprite-position(!col, !row_hover, !width, !height, !margin)

source/stylesheets/library/_sprite_img.sass

@@ -0,0 +1,52 @@
+//**
+  Example 1:
+  a.twitter
+    +sprite-img("icons-32.png", 1)
+  a.facebook
+    +sprite-img("icons-32png", 2)
+  ...
+  Example 2:
+  a
+    +sprite-background("icons-32.png")
+    a.twitter
+      +sprite-column(1)
+    a.facebook
+      +sprite-row(2)
+    ...
+ 
+!sprite_default_size  ||= 32px
+!sprite_default_margin ||= 0px
+!sprite_image_default_width ||= !sprite_default_size
+!sprite_image_default_height ||= !sprite_default_size
+ 
+ 
+// Sets all the rules for a sprite from a given sprite image to show just one of the sprites.
+// To reduce duplication use a sprite-bg mixin for common properties and a sprite-select mixin for positioning.
+=sprite-img(!img, !col, !row = 1, !width = !sprite_image_default_width, !height = !sprite_image_default_height, !margin = !sprite_default_margin)
+  +sprite-background(!img, !width, !height)
+  +sprite-position(!col, !row, !width, !height, !margin)
+ 
+// Sets rules common for all sprites, assumes you want a square, but allows a rectangular region.
+=sprite-background(!img, !width = !sprite_default_size, !height = !width)
+  +sprite-background-rectangle(!img, !width, !height)
+ 
+// Sets rules common for all sprites, assumes a rectangular region.
+=sprite-background-rectangle(!img, !width = !sprite_image_default_width, !height = !sprite_image_default_height)
+  :background= image_url(!img) "no-repeat"
+  :width= !width
+  :height= !height
+  :overflow hidden
+ 
+// Allows horizontal sprite positioning optimized for a single row of sprites.
+=sprite-column(!col, !width = !sprite_image_default_width, !margin = !sprite_default_margin)
+  +sprite-position(!col, 1, !width, 0px, !margin)
+ 
+// Allows vertical sprite positioning optimized for a single column of sprites.
+=sprite-row(!row, !height = !sprite_image_default_height, !margin = !sprite_default_margin)
+  +sprite-position(1, !row, 0px, !height, !margin)
+ 
+// Allows vertical and horizontal sprite positioning from a grid of equal dimensioned sprites.
+=sprite-position(!col, !row = 1, !width = !sprite_image_default_width, !height = !sprite_image_default_height, !margin = !sprite_default_margin)
+  !x = ((!col - 1) * -!width) - ((!col - 1) * !margin)
+  !y = ((!row - 1) * -!height) - ((!row - 1) * !margin)
+  :background-position= !x !y

source/stylesheets/library/_typography.sass

@@ -0,0 +1,67 @@
+!base_font_size ||= 14px
+!base_font_size_small ||= 12px
+!h6 ||= !base_font_size
+!h5 ||= ceil(!h6*1.1)
+!h4 ||= ceil(!h5*1.1)
+!h3 ||= ceil(!h4*1.2)
+!h2 ||= ceil(!h3*1.25)
+!h1 ||= ceil(!h2*1.255)
+
+=set-heading-sizes(!font_size = !base_font_size)
+  !h6 = !font_size
+  !h5 = ceil(!h6*1.1)
+  !h4 = ceil(!h5*1.1)
+  !h3 = ceil(!h4*1.2)
+  !h2 = ceil(!h3*1.25)
+  !h1 = ceil(!h2*1.255)
+  h1, h2, h3, h4
+    &:first-child
+      margin-top: 0
+  h1
+    font-size= !h1
+    margin-bottom= !h2/2
+    line-height= !h1 * 1.2
+  h2
+    font-size= !h2
+    margin= !h2/2 0 !h2/2
+    line-height= !h2 * 1.2
+  h3
+    font-size= !h3
+    margin= !h2/2 0 !h2/2
+    line-height= !h3 * 1.2
+  h4
+    font-size= !h4
+    margin= !h4/2 0 !h4/2
+    line-height= !h4 * 1.2
+  h5
+    font-size= !h5
+    margin= !h4/2 0 !h4/2
+    line-height= !h5 * 1.2
+  h6
+    font-size= !h6
+    margin= !h4/2 0 !h4/2
+    line-height= !h6 * 1.2
+
+=typography-defaults(!font_size = !base_font_size)
+  line-height= ceil(!font_size * 1.5)
+  p
+    padding-bottom= !font_size * 2
+  h1,h2,h3,h4,h5,h6
+    font-weight: bold
+  em
+    font-style: italic
+  strong
+    font-weight: bold
+  span.highlight, em.highlight, strong.highlight
+    background-color: #ff6
+    padding: 2px
+    margin: 0 -2px
+  ul, ol, dl
+    list-style: inside
+    margin= 0 0 (!font_size)
+  li
+    padding: 0 0 2px
+  small
+    font-size= floor(!font_size * .85)
+  big
+    font-size= floor(!font_size * 1.25)

source/stylesheets/partials/_base.sass

@@ -0,0 +1,16 @@
+//compass default reset
++global-reset
+//my reset
+button
+  margin: 0
+  padding: 0
+  background: none
+  border: none
+  cursor: pointer
+
+button::-moz-focus-inner
+  border: none
+  padding: 0
+
+@import compass/utilities.sass
+@import base/typography.sass

source/stylesheets/partials/_main.sass

@@ -0,0 +1,4 @@
+@import main/theme.sass
+@import main/layout.sass
+@import main/form.sass
+@import main/flash_messages.sass

source/stylesheets/partials/base/_typography.sass

@@ -0,0 +1,26 @@
+!base_font_size = 15px
+!base_font_size_small = 13px
+!default_border_radius = 6px
+
+=heading-font 
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
+=sans-font
+  font-family: "Lucida Grande", "Lucida Sans Unicode", "Trebuchet MS", Helvetica, Arial, Verdana, sans-serif
+=serif-font
+  font-family: Baskerville, "Times New Roman", Times, Georgia, serif
+=fixed-font
+  font-family: "Menlo", "Bitstream Vera Sans", Monaco, "Andale Mono", "Lucida Console", monospace
+    
+body
+  font-size= !base_font_size
+  +set-heading-sizes
+  +typography-defaults
+  +sans-font
+  
+h1,h2,h3,h4,h5,h6
+  color: #333
+  letter-spacing: -1px
+  font-weight: bold
+ol li
+  list-style: decimal
+  margin-left: 1.9em

source/stylesheets/partials/main/_flash_messages.sass

@@ -0,0 +1,36 @@
+!flash_notice       ||= #00529B
+!flash_success      ||= #4F8A10
+!flash_warning      ||= #FBF4BD
+!flash_error        ||= #D8000C
+!flash_notice_bg    ||= #BDE5F8
+!flash_success_bg   ||= #DFF2BF
+!flash_warning_bg   ||= #FBF4BD
+!flash_error_bg     ||= #FFD9DA
+
+=flash-message-style
+  +flash-message-structure
+  &.notice
+    +flash-color(!flash_notice, !flash_notice_bg)
+  &.success
+    +flash-color(!flash_success, !flash_success_bg)
+  &.warning
+    +flash-color(!flash_warning, !flash_warning_bg)
+  &.error
+    +flash-color(!flash_error, !flash_error_bg)
+
+=flash-message-structure
+  background-repeat: no-repeat
+  background-position: 10px center
+  border: 1px dashed
+  padding: 10px 15px
+  margin: 0 0 15px
+
+=flash-color(!color, !bg = 0)
+  color= !color
+  @if !bg == 0
+    background-color= desaturate(lighten(adjust_hue(!color, -10), 83), 20)
+  @else
+    background-color= !bg
+
+#flash
+  +flash-message-style

source/stylesheets/partials/main/_form.sass

@@ -0,0 +1,61 @@
+#page
+  form
+    clear: both
+    padding-bottom= !pad
+    fieldset, fieldset input.textbox, fieldset textarea
+      +border-radius
+    fieldset
+      background-color= !fieldset_bg
+      width: 480px
+      border= "1px solid" !fieldset_border
+      padding: 35px 25px 20px
+      margin-bottom= !pad*2.2
+    label
+      font-size: 90%
+      display: block
+      padding-bottom: 4px
+    select
+      font-size: 110%
+    input.textbox, textarea
+      font-size: 115%
+      color= !textinput_color
+      background-color= !textinput_bg
+      
+      width: 70%
+      padding: 6px 8px
+      outline: 0
+      display: inline-block
+      
+      border: 1px solid
+      border-top-color= !textinput_border_top
+      border-bottom-color= !textinput_border_bottom
+      border-left-color= !textinput_border_left
+      border-right-color= !textinput_border_right
+      
+      &:focus
+        background= !textinput_bg_focus
+        border-color= !textinput_border_focus
+        
+    input.checkbox, label.checkbox
+      display: inline-block
+    p
+      +clearfix
+      padding= 0 8px !pad
+    input.wrong:focus
+      outline: 2px solid #d0a5a5
+      background: #fef2f2
+    button
+      +border-radius(5px)
+      +btn-style(!blue_btn)
+      +btn-structure(18px, 1px)
+      color= !default_button_text_color
+      border:
+        width: 1px
+        style: solid
+      &:hover, &:focus
+        +btn-style-hover(!blue_btn)
+        outline: none
+      &:active
+        +btn-style-active(!blue_btn)
+    a.cancel
+      color= !cancel_link

source/stylesheets/partials/main/_layout.sass

@@ -0,0 +1,62 @@
+!page_width = 560px
+!pad = 15px
+!default_border_radius = 4px
+
+html body
+  background-color= !body_bg
+  color= !body_color
+  a
+    color= !link_color
+
+#header
+  background-color= !header_bg
+  border-bottom= "1px solid" !header_border
+  padding: 20px 0
+  a.title
+    font-size= !h3
+    display: inline-block
+    color= !header_nav
+    text-decoration: none
+  #header_nav
+    float: right
+    +horizontal-list
+    a
+      color: #ccc
+    li.alpha a
+      color: #f2f2f2
+
+.page_width
+  width= !page_width
+  margin: 0 auto
+  padding:
+    left: 30px
+    right: 30px
+
+#page
+  background-color= !page_bg
+  border-top= "1px solid" !page_border
+  padding: 25px 0
+
+#subnav
+  +clearfix
+  margin: -25px 0 25px
+  padding: 10px 0
+  background-color= !subnav_bg
+  border-bottom= "1px solid" !subnav_border
+  font-size: 85%
+  #account
+    float: right
+    a
+      color= !subnav_logout_color
+      display: inline-block
+      padding-left: 10px
+      margin-left: 8px
+      border-left= "1px solid" #aaa
+
+#footer
+  font-size= !base_font_size_small
+  clear: both
+  padding: 15px 0
+  color= !footer_color
+  +h-linear-gradient(darken(!body_bg, 25), !body_bg)
+  border-top= "4px solid" !footer_bg

source/stylesheets/partials/main/_theme.sass

@@ -0,0 +1,50 @@
+// Main Section Colors
+!body_color = #333
+!body_bg = #323232
+!test = darken(!body_bg, 20)
+!header_bg = #323232
+!header_border = #181818
+!header_nav = #ddd
+!header_nav_hover = #fff
+!page_border = #fff
+!page_bg = #ececec
+!footer_color = #999
+!footer_bg = #444
+!subnav_bg = #fff
+!subnav_border = #ccc
+!subnav_link_color = #333
+!subnav_logout_color = #777
+
+// Link Colors
+!link_color = #165B94
+
+// Form Colors
+!fieldset_bg = #fff
+!fieldset_border = #c3c3c3
+
+!textinput_color = #333
+!textinput_bg = #f4f4f4
+!textinput_bg_focus = #fefeee
+
+!textinput_border_top = #aaa
+!textinput_border_bottom = #c6c6c6
+!textinput_border_left = #c3c3c3
+!textinput_border_right = #c3c3c3
+!textinput_border_focus = #989898
+
+!cancel_link = #555
+
+// Button Colors
+!default_button_text_color = #fff
+!default_button_bg = yellow
+!blue_btn = desaturate(adjust_hue(!default_button_bg, -16), 25)
+
+// Flash Message Colors
+!flash_notice   	= #00529B
+!flash_notice_bg  = #BDE5F8
+!flash_success    = #4F8A10
+!flash_success_bg = #DFF2BF
+!flash_warning    = #FBF4BD
+!flash_warning_bg = #FBF4BD
+!flash_error      = #D8000C
+!flash_error_bg   = #FFD9DA

source/stylesheets/screen.sass

@@ -0,0 +1,3 @@
+@import library.sass
+@import partials/base.sass
+@import partials/main.sass