css.sass

=box_gradient($color_stops, $type)// {{{
  $firststop: firststop($color_stops)
  $laststop: laststop($color_stops)

  @if $type == "horizontal"
    background: $firststop /* Old browsers */
    background: -moz-linear-gradient(left, #{$color_stops}) /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, colorstops(#{$color_stops})) /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #{$color_stops}) /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #{$color_stops}) /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #{$color_stops}) /* IE10+ */
    background: linear-gradient(left, #{$color_stops}) /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$firststop}', endColorstr='#{$laststop}',GradientType=1 ) /* IE6-8 */
  @if $type == "vertical"
    background: #{$firststop}/* Old browsers */
    background: -moz-linear-gradient(top, #{$color_stops}) /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, colorstops(#{$color_stops})) /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #{$color_stops}) /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #{$color_stops}) /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #{$color_stops}) /* IE10+ */
    background: linear-gradient(top, #{$color_stops}) /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$firststop}', endColorstr='#{$laststop}',GradientType=0 ) /* IE6-8 */
  @if $type == "diagonalbt"
    background: #{$firststop}/* Old browsers */
    background: -moz-linear-gradient(-45deg, #{$color_stops}) /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, colorstops(#{$color_stops})) /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, #{$color_stops}) /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #{$color_stops}) /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, #{$color_stops}) /* IE10+ */
    background: linear-gradient(-45deg, #{$color_stops}) /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$firststop}', endColorstr='#{$laststop}',GradientType=1 ) /* IE6-8 fallback on horizontal gradient */
  @if $type == "diagonaltb"
    background: #{$firststop}/* Old browsers */
    background: -moz-linear-gradient(45deg, #{$color_stops}) /* FF3.6+ */
    background: -webkit-gradient(linear, left bottom, right top, colorstops(#{$color_stops})) /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(45deg, #{$color_stops}) /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(45deg, #{$color_stops}) /* Opera 11.10+ */
    background: -ms-linear-gradient(45deg, #{$color_stops}) /* IE10+ */
    background: linear-gradient(45deg, #{$color_stops}) /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$firststop}', endColorstr='#{$laststop}',GradientType=1 ) /* IE6-8 fallback on horizontal gradient */
  @if $type == "radial"
    background: #{$firststop}/* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, #{$color_stops}) /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, colorstops(#{$color_stops})) /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, #{$color_stops}) /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, #{$color_stops}) /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, #{$color_stops}) /* IE10+ */
    background: radial-gradient(center, ellipse cover, #{$color_stops}) /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{$firststop}', endColorstr='#{$laststop}',GradientType=1 ) /* IE6-8 fallback on horizontal gradient */// }}}
=box_shadow($shadow)// {{{
  -webkit-box-shadow: #{$shadow}
  -moz-box-shadow: #{$shadow}
  -ms-box-shadow: #{$shadow}
  -o-box-shadow: #{$shadow}
  box-shadow: #{$shadow}// }}}
@function golden-ratio($value, $increment)// {{{
  @if $increment > 0
    @for $i from 1 through $increment
      $value: ($value * 1.618)
  @if $increment < 0
    $increment: abs($increment)
    @for $i from 1 through $increment
      $value: ($value / 1.618)
  @return $value

// div {
// Increment Up GR with positive value
// font-size: golden-ratio(14px, 1); // returns: 22.652px
//
// Increment Down GR with negative value
// font-size: golden-ratio(14px, -1); // returns: 8.653px
//
// Can be used with ceil(round up) or floor(round down)
// font-size: floor( golden-ratio(14px, 1) ); // returns: 22px
// font-size: ceil( golden-ratio(14px, 1) ); // returns: 23px
// }
//
// modularscale.com
// goldenratiocalculator.com// }}}
=border-radius($radius)// {{{// {{{
  border-radius: $radius
  -moz-border-radius: $radius
  -webkit-border-radius: $radius// }}}
=border-radius-top($radius)// {{{
  +border-radius-top-left($radius)
  +border-radius-top-right($radius)// }}}
=border-radius-right($radius)// {{{
  +border-radius-top-right($radius)
  +border-radius-bottom-right($radius)// }}}
=border-radius-bottom($radius)// {{{
  +border-radius-bottom-right($radius)
  +border-radius-bottom-left($radius)// }}}
=border-radius-left($radius)// {{{
  +border-radius-top-left($radius)
  +border-radius-bottom-left($radius)// }}}
=border-radius-top-right($radius)// {{{
  +border-radius-top-right($radius)// }}}
=border-radius-bottom-right($radius)// {{{
  +border-radius-bottom-right($radius)// }}}
=border-radius-bottom-left($radius)// {{{
  +border-radius-bottom-left($radius)// }}}
=border-radius-top-left($radius)// {{{
  +border-radius-top-left($radius)// }}}
=border-radius-top-right($radius)// {{{
  border-top-right-radius: $radius
  -moz-border-radius-topright: $radius
  -webkit-border-top-right-radius: $radius// }}}
=border-radius-bottom-right($radius)// {{{
  border-bottom-right-radius: $radius
  -moz-border-radius-bottomright: $radius
  -webkit-border-bottom-right-radius: $radius// }}}
=border-radius-bottom-left($radius)// {{{
  border-bottom-left-radius: $radius
  -moz-border-radius-bottomleft: $radius
  -webkit-border-bottom-left-radius: $radius// }}}
=border-radius-top-left($radius)// {{{
  border-top-left-radius: $radius
  -moz-border-radius-topleft: $radius
  -webkit-border-top-left-radius: $radius// }}}// }}}
=transparency($value)// {{{
  // Transparency
  // Modern Browsers
  opacity: $value
  // IE 8
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity:" $value * 100 ")"
  // IE 5-7
  filter: "alpha(opacity:" $value * 100 ")"
  zoom: 1// }}}

// $base-color: #4B8EFA
// .boxX
//   +box_gradient("#{$base-color} 0%, #{darken($base-color, 20%)} 100%", "horizontal")
//   +box_shadow( 0 2px 2px 0px rgba($base-color, 0.2) inset)
// .box
//   +box_gradient("#ffffff 0%, #fcf5de 100%", "horizontal")
//   +box_shadow( 0 2px 2px 0px rgba($base-color, 0.2))
// .box2
//   +box_gradient("#f0b7a1 0%, #8c3310 50%, #752201 51%, #bf6e4e 100%", "vertical")
//   +box_shadow( 0 2px 2px 0px rgba($base-color, 0.3))
//   +border-radius-left(2px 3px)
// .box3
//   +box_gradient("#f3e2c7 0%, #c19e67 50%, #b68d4c 51%, #e9d4b3 100%", "diagonaltb")
//   +box_shadow( 0 2px 2px 0px rgba($base-color, 0.4))
//   border-color: adjust-hue($base-color, 4%)
//   +border-radius(2px 3px)

$navbot: #DA2C20
// $navbot: #4C8EFB
$shadow: #000
nav
  margin-top: 40px
  float: left
  width: 800px
  li
    float: left
    margin-right: 10px
    display: block
    +box_gradient("#fff 0%, #fcf5de 100%", "vertical")
    +border_radius(4px)
    cursor: pointer
    border: 1px solid #E4C37C
    padding: 10px
    &:hover
      +box_shadow( 0px 2px 2px rgba($shadow, 0.3))
    a
      color: $navbot
      font-weight: bold
      text-decoration: none
    &.clicked
      float: left
      margin-right: 10px
      display: block
      background: #fff
      +border-radius-top(4px)
      border-top: 1px solid #E4C37C
      border-left: 1px solid #E4C37C
      border-right: 1px solid #E4C37C
      padding: 10px
      +box_shadow( 0px 2px 2px rgba($shadow, 0.3))