Custom SASS Mixins

// Favorites
@import partials/base.sass
@import partials/colors.sass
@import blueprint/reset.sass
@import compass
@import compass/layout/sticky_footer.sass
@import blueprint/modules/grid.sass
@import blueprint

//Custom Sizes
!xsmall= 0.7em
!small= 0.8em
!copy= 1.em
!big= 1.3em
!xbig= 1.4em

//Custom color mixins
=colors
  //meedan brand colors
  !dark_blue= #2E5463
  !bright_blue= #28A9E0
  !normal_blue= !bright_blue - #33333
  !orange= #F37327
  !green= #468C0D
  !bright_green= #95CB3F

  //main theme colors
  !background= #ffffff
  !normal= #c3c3c3
  !med_grey= #c3c3c3
  !light_grey= #f8f8f8
  !dark_grey= #333

  !font_color           = #333
  !quiet_color          = !font_color + #333
  !loud_color           = !font_color - #222

  !link_color        = !normal_blue
  !link_hover_color  = !bright_blue
  !link_focus_color  = !dark_grey
  !link_active_color = !dark_grey
  !link_visited_color= !dark_grey    

// Other Custom Mixins

=rounded
  +left_rounded_corners
  +right_rounded_corners

=left_rounded_corners(!radius = 4px)
  -webkit-border-radius-bottomleft= !radius
  -webkit-border-radius-topleft= !radius
  -moz-border-radius-bottomleft= !radius
  -moz-border-radius-topleft= !radius

=right_rounded_corners(!radius = 4px)
  -webkit-border-radius-topright= !radius
  -webkit-border-radius-bottomright= !radius
  -moz-border-radius-topright= !radius
  -moz-border-radius-bottomright= !radius

=opacity(!opacity, !hover_opacity = false)
  :opacity= !opacity / 100
  :-moz-opacity= !opacity / 100
  :-ms-filter= "progid:DXImageTransform.Microsoft.Alpha(Opacity=#{!opacity})"
  :filter= "alpha(opacity=#{!opacity})"
  @if !hover_opacity
    +opacity-hover(!hover_opacity)
 
=opacity-hover(!opacity)
  &:hover
    +opacity(!opacity)

// for a tabbed ul
=tabs
  :list-style-type none
  :padding 0px 12px 0px 5px
  +column(15)
  :margin 0
  li
    :float left
    :font-size #{!big}
    :display inline
    :border 1px solid #{!med_grey}
    :border-bottom-width 0
    :color #{!dark_grey}
    :margin-left 10px
  li a 
    :padding 10px 10px
    :text-decoration none
    :float left
    +gradient
  a:hover 
    :text-decoration underline
  a.selected 
    :position relative
    :top 1px
    :background #{!light_grey}
    :color #{!dark_grey}
    :border-bottom 1px solid #{!light_grey}

// Note that this contains horizontal padding and can break a grid
=featurebutton
  :font-size 0.7em
  :background #{!light_grey}
  :float left
  :padding 10px
  :margin-left 10px
  a
    +link-colors(!dark_grey, !normal_blue, !dark_grey, !dark_grey, !dark_grey)
    
=button
  :border 1px solid #{!med_grey}
  +rounded

=gradient
  :background url('gradient.png') repeat-x

=italic
  :font-family georgia
  :font-style italic