$defaultColor   = #8FB1DD
$aquaColor      = #91D6DF
$blueColor      = #BAD0EF
$greenColor     = #9BDD89
$tealColor      = #97BEAD
$purpleColor    = #B6B4EB
$brownColor     = #DABB9E
$redColor       = #DD9DAC
$chocolateColor = #BB906F

// Sample colors
$color1         = #9EDFB5
$color2         = #DFA57C
$color3         = #E6BC7E
$color4         = #D5D298
$color5         = #98D5A7
$color6         = #98D5BA
$color7         = #91D6DF
$color8         = #8FB1DD
$color9         = #A8B5E7
$color10        = #AF9EDA
$color11        = #DA9EC7
$color12        = #DA9EAF
$color13        = #DA9EA1
$color14        = #DAA39E
$color15        = #DAAF9E
$color16        = #DABB9E
$color17        = #DAC79E
$color18        = #A5DA9E
$color19        = #9EDAB1
$color20        = #9EC4DA 
$color21        = #B6B4EB
$color22        = #DD9DAC
$color23        = #BAA8E6
$color24        = #9BDD89
$color25        = #E6D4A8
$color26        = #E6CBA8
$color27        = #E6B7A8
$color28        = #97BEAD

$primaryColor   = $defaultColor
$lightGrey      = #A0A0A0
$faintGrey      = #F0F0F0
$linkColor      = darken($primaryColor, 20%)
$textColor      = #606060
$textDarkColor  = darken($textColor, 4%)
$alertColor     = #D3A924

$normalFont     = 300
$boldFont       = 400
$heavyFont      = 700

border-radius()
  -moz-border-radius: arguments
  -webkit-border-radius: arguments
  border-radius: arguments

/* Vertical Background Gradient */
vbg-gradient(fc = #FFF, tc = #FFF)
  background: fc
  background: -webkit-gradient(linear, left top, left bottom, from(fc), to(tc))
  background: -moz-linear-gradient(top, fc, tc)
  background: linear-gradient(top, fc, tc)

/* Horizontal Background Gradient */
hbg-gradient(fc = #FFF, tc = #FFF) 
  background: fc
  background: -webkit-gradient(linear, left top, right top, from(fc), to(tc))
  background: -moz-linear-gradient(left, fc, tc)
  background: linear-gradient(left, fc, tc)

box-shadow()
  -moz-box-shadow: arguments
  -webkit-box-shadow: arguments
  box-shadow: arguments

inset-box-shadow()
  -moz-box-shadow: inset arguments
  -webkit-box-shadow: inset arguments
  box-shadow: inset arguments

box-flex(s = 0)
  -webkit-box-flex: s
  -moz-box-flex: s
  box-flex: s

hbox()
  display: -webkit-box
  -webkit-box-orient: horizontal
  -webkit-box-align: stretch
  -webkit-box-pack: start
  
  display: -moz-box
  -moz-box-orient: horizontal
  -moz-box-align: stretch
  -moz-box-pack: start

vbox()
  display: -webkit-box
  -webkit-box-orient: vertical
  -webkit-box-align: stretch

  display: -moz-box
  -moz-box-orient: vertical
  -moz-box-align: stretch

border-box()
  -webkit-box-sizing: border-box
  -moz-box-sizing: border-box
  box-sizing: border-box

content-box()
  -webkit-box-sizing: content-box
  -moz-box-sizing: content-box
  box-sizing: content-box

transition(s = 0.3s, o =  opacity, t = linear)
  -webkit-transition: s o t
  -moz-transition: s o t
  transition: s o t

ellipsis()
  text-overflow: ellipsis
  overflow: hidden
  white-space:nowrap

inset-line(opacity = 0.4, size = 1px)
  inset-box-shadow(0, size, 0, rgba(255, 255, 255, opacity))

outset-line(opacity = 0.4, size = 1px)
  box-shadow(0, size, 0, rgba(255, 255, 255, opacity))

box-pack(type = center)
  -webkit-box-pack: type
  -moz-box-pack: type
  box-pack: type
  
transform(tr)
  -webkit-transform: tr
  -moz-transform: tr
  -ms-transform: tr
  -o-transform: tr
  transform: tr
  
hacel()
  transform(translate3d(0,0,0))

arrow(direction = 'right', size = 10px, color = #666, width = 0.53em, length = 1em)
  /*
   * In Internet Explorer, The"border-style: dashed" will never be
   * rendered unless "(width * 5) >= border-width" is true.
   * Since "width" is set to "0", the "dashed-border" remains
   * invisible to the user, which renders the border just like how
   * "border-color: transparent" renders.
   */
  border-style: dashed
  border-color: transparent
  border-width: width
  display: -moz-inline-box
  display: inline-block
  /* Use font-size to control the size of the arrow. */
  font-size: size
  height: 0
  line-height: 0
  position: relative
  vertical-align: middle
  width: 0
  
  border-{direction}-width: length;
  border-{direction}-style: solid;
  border-{direction}-color: color;
  {direction}: 0.25em;

iconic(content = '\67', color = $textColor, pos = 'before')
  &:{pos}
    content: content
    font-family: 'fontello-kleks'
    font-style: normal
    font-weight: normal
    speak: none
    display: inline-block
    text-decoration: none
    width: 1em
    text-align: center
    line-height: 1em
    font-size: 1em
    color: color
    -webkit-font-smoothing: antialiased

clearfix()
  *zoom: 1
  &:before, &:after
    display: table
    content: ""
  &:after
    clear: both