gistfile1.rb

# --- Variables

!width = 1008px
!dark = #141414
!light_grey = #636363
!lighter_grey = #efefef
!lighter_lighter_grey = #e3e3e3
!light_blue = #119de5

# --- Mixins

=arrow
  :background url(images/arrow.png) 50% 100% no-repeat

=arrow-dark
  :background url(images/arrow-dark.png) 50% 100% no-repeat

=sprites
  :background-image url(images/sprites.png)
  
=background-sprites
  :background-image url(images/sprites.background.png)

=clearfix
  &:after
    :display block
    :clear both
    :height 0
    :visibility hidden
    :line-height 0
    :content '.'
    
=inline-menu
  :display inline
  :list-style none
  :margin 0
  :padding 0
  li
    :display block
    :float left
  
=striped
  &:nth-child(even)
    :background url(images/h2.png) 0 0 repeat-x

# --- Tags

body
  :text-align center
  :font 11px "Lucida Grande"
  :line-height 1.5
  :color= !light_grey
  :background
    :color= !lighter_grey
    :image url(images/background.png)
    :position 0 0
    :repeat repeat-x
  
h1, h2, h3, h4
  :margin 8px 0 8px 0
  :font
    :size 24px
    :weight normal
  :color= !dark
  
h2
  :font-size 22px
  
h3
  :font-size 18px
  
h4
  :font-size 16px

a
  :text-decoration none
  :color= !light_blue
  
p
  :margin 10px 0
  
a.button
  +sprites
  :display block
  :width 88px
  :font-family "Lucida Sans Unicode"
  :text-align center
  :line-height 25px
  :text-shadow -1px 1px 1px #5490ae 
  :color white
  :background
    :position -2px -68px
    :repeat no-repeat
    
  &:hover
    :text-shadow 1px 1px 1px #5490ae
    :background-position -93px -68px
    
  &:active
    :background-position -184px -68px

table
  :border-collapse collapse
  :width 100%

  tr 
    td
      :border-bottom= 1px solid !lighter_lighter_grey
      :height 42px

  tr:first-child
    td
      :border-top= 1px solid !lighter_lighter_grey

table.select 

  tr td:first-child
    :padding 0 0 0 12px
    :width 42px

    input
      :margin-top 10px

table.striped tr
  +striped

# --- General classes

.right
  :float right

.block
  h2
    :margin-left 10px
    :font-size 24px
  
  .heading
    :height 112px
    
    .description
      :margin 8px 12px 20px 10px
      :width 250px
  
.block-2-left
  :float left
  :width 64%
  
  .description
    :width 300px
  
.block-2-right
  :float right
  :padding-left 25px
  :width 30%
  :border-left= 1px solid !lighter_lighter_grey
  
input[type=checkbox]
  :width 20px
  :height 20px
  
# --- General IDs
  
#header
  :position relative
  :height 130px

#logo
  +sprites
  :position absolute
  :top 38px
  :left 13px
  :padding-left 18px
  :font-size 30px
  :color= !dark
  :background
    :position 0 -95px
    :repeat no-repeat
    
#navigation
  +inline-menu
  :position absolute
  :top 95px
  :right 0
  
  li
    :height 36px
    
    a
      :padding 0 8px
      :font-family "Lucida Sans Unicode"
      :color= !light_grey

  li.active
    +arrow-dark
    
    a
      :color= !dark
      
  li:hover
    +arrow
    
    a
      :color= !dark
      
  li:active
    +arrow-dark
    
#wrapper
  :margin 0 auto
  :width= !width
  :text-align left

#container-top
  +background-sprites
  :height 12px
  :background-position 0 0
    
#container-bottom
  +background-sprites
  :height 21px
  :background-position 0 -100px

#container
  +clearfix
  :padding-bottom 15px
  :background
    :image url(images/v2.png)
    :position 0 0 repeat-y

#primary
  :padding 0 20px 20px 20px
  
  ul
    :margin 15px 0
    :padding 0
    :list-style none
    
    li
      :padding 8px 0
      :text-indent 10px
      :border-bottom= 1px solid !lighter_lighter_grey
      :color= !dark
      
      &:first-child
        :border-top= 1px solid !lighter_lighter_grey
  
  ul.striped li
    +striped

# --- Specifics

  ul.roles
    :margin-top 0

table.users

  tr
    td
      &:nth-child(2)
        :width 50px
        :color= !dark

      &:last-child a
        :float right
        :margin-top 1px
        :margin-right 5px