@bg: f01; @white: fff; @grey: eee; @black: #000; @blue: #000; @accent_colour: #000; @light_grey: eee; @dark_grey: eee; @yellow: #422; @red: ff0000; @colour_positive: ff0000; @colour_negative: ff0000;

.box_shadow (…) { } .text_shadow (…) { } .border_radius (…) { } .border_radius_top_left (…) { } .border_radius_top_right (…) { } .border_radius_bottom_right (…) { } .border_radius_bottom_left (…) { } .border_radius_top (…) { } .border_radius_right (…) { } .border_radius_bottom (…) { } .border_radius_left (…) { } div.browse {

margin: 0 0 20px;
&.class {
  padding: 0;
}
div.header {
  padding: 10px 10px 9px; text-align: left; background: @bg url('/images/panel_header_bg.png') repeat-x top left;
  border-bottom: 1px solid (@bg * 0.66 + @black * 0.33); line-height: 1; height: 18px;
  .border_radius_top(3); color: @light_grey;
  h3 { font-size: 16px; margin: 0; color: @white; .text_shadow(1, 1, 0, @bg * 0.66 + @black * 0.33); }
  span.filter {
    float: left; display: block; overflow: hidden; position: relative; z-index: 5;
    a {
      margin: 0 1px 0 0; display: block; float: left; padding: 0 8px; height: 18px; font-weight: bold; font-size: 10px; line-height: 18px;
      text-transform: uppercase; background: url('/images/transparent_backgrounds/black_50.png'); color: @light_grey; text-decoration: none; position: relative; z-index: 3;
      .active {
        background: @white; color: @black; z-index: 4;
        :hover { color: @black; }
      }
      :hover { color: @white; }
      :first-child { .border_radius_left(2); }
      :last-child { .border_radius_right(2); margin-right: 0; }
    }
  }

  span.filter.dropdown {
    margin: 0; position: relative; overflow: visible;
    a {
      .border_radius(2); background: @white; color: @black; margin: 0; position: relative; padding-right: 25px;
      img { float: left; margin: 4px 5px 0 0; }
      b.arrow {
        float: right; display: block; height: 0; width: 0; border: 5px solid transparent; border-top: 5px solid @black; border-bottom: none;
        position: absolute; top: 6px; right: 10px;
      }
      :hover {
        background: @accent_colour; color: @white;
        b.arrow { border-top: 5px solid @white; }
      }
    }
    ul {
      position: absolute; top: 100%; left: 0; margin: 1px 0 0; padding: 0; background: @white; .border_radius(2);
      .box_shadow(0, 1, 1, @black);
      li {
        list-style: none; display: block; padding: 0; margin: 0;
        a {
          display: block; height: 18px; line-height: 18px; color: @black; font-size: 10px; text-transform: uppercase; background: transparent;
          border-bottom: 1px solid (@light_grey * 0.66 + @white * 0.33); float: none; margin: 0; .border_radius(0); white-space: nowrap;
          :hover { background: url('/images/transparent_backgrounds/accent_colour_25.png'); color: @black; }
        }
        :last-child {
          a { border: none; }
        }
      }
    }
  }
  span.filter.dropdown.sort { float: left; margin: 0 0 0 10px; }
  span.filter.dropdown.localisation { float: left; margin: 0 0 0 10px; }
  a.more {
    float: right; color: @white; .text_shadow(1, 1, 0, @bg * 0.66 + @black * 0.33); font-size: 14px; font-weight: bold;
    position: relative; top: 2px;
    :hover { text-decoration: none; }
  }
}
> ul {
  margin: 0; background: @white; padding: 10px 0 0 10px; .border_radius(3); position: relative;
  li {
    display: block; float: left; list-style: none; margin: 0 10px 10px 0; padding: 5px; position: relative;
    background: @white; width: 130px; border: 1px solid (@light_grey * 0.33 + @white * 0.66); .border_radius(2);
    a.remove {
      position: absolute; height: 16px; width: 16px; padding: 3px; background: @accent_colour;
      .border_radius(99); display: none; z-index: 3; top: -8px; right: -8px;
      img { vertical-align: middle; }
    }
    div.thumbnail {
      .border_radius_top(3); position: relative; z-index: 3;
      .marker {
        position: absolute; padding: 2px; .border_radius(2); z-index: 3;
        background: url('/images/transparent_backgrounds/white_75.png'); height: 12px; width: 12px;
      }
      .marker.coupon {
        height: auto; width: auto; top: 10px; right: -3px; padding: 0; background: transparent; overflow: hidden; position: absolute;
        b {
          display: block; height: 0; width: 0; float: left; border: 14px solid transparent; border-top: 14px solid @accent_colour;
          border-bottom: none; border-right: none; float: left;
        }
        span {
          color: @white; font-size: 10px; font-weight: bold; text-transform: uppercase; height: 14px; line-height: 14px; display: block;
          padding: 0 4px 0 2px; background: @accent_colour; .text_shadow(1, 1, 0px, (@accent_colour * 0.75 + @black * 0.25)); margin: 0 0 0 14px;
        }
      }
      .marker.video {
        position: absolute; left: 50%; top: 50%; background: @white; width: 10px; height: 10px;
        b { display: block; width: 0; height: 0; border: 5px solid transparent; border-left: 10px solid @black; border-right: none; }
      }
      .marker.endorsed_by_me { background: none; padding: 0; right: 0; bottom: -32px; .border_radius(2); background: @white; }
      a.thumbnail {
        display: block; overflow: hidden; position: relative; text-align: center;
        img { position: relative; display: block; margin: auto; }
      }
    }
    div.text {
      margin: 3px 0 0; display: block;
      a { text-decoration: none; }
      a.title {
        display: block; text-decoration: none; font-weight: bold; font-size: 12px; line-height: 16px;
        white-space: nowrap; height: 16px; overflow: hidden;
        :before {
          display: block; height: 32px; width: 20px; content: " "; float: right; right: -15px; top: -8px;
          background: @white; position: relative; z-index: 1; .box_shadow(-5, 0, 10, @white);
        }
      }
      small {
        font-size: 11px; line-height: 13px; color: @grey; display: block; height: 13px; overflow: hidden; white-space: nowrap;
        a { font-weight: bold; }
        :before {
          display: block; height: 32px; width: 20px; content: " "; float: right; right: -15px; top: -8px;
          background: @white; position: relative; z-index: 1; .box_shadow(-5, 0, 10, @white);
        }
      }
    }
    :hover {
      background: @accent_colour;
      a.remove { display: block; }
      div.thumbnail {
        a.marker.remove, a.marker.video {
          b { display: inline-block; }
        }
        a.marker.video { .box_shadow(0, 0, 2, @black); }
      }
      div.text {
        a { color: @white; }
        a.title:before { background: @accent_colour; .box_shadow(-5, 0, 10, @accent_colour); }
        small {
          color: @white * 0.75 + @accent_colour * 0.25;
          :before { background: @accent_colour; .box_shadow(-5, 0, 10, @accent_colour); }
        }
      }
      div.footer a { color: @white; }
    }
  }
  > li.ad div.thumbnail a.thumbnail {
    width: 130px; height: 97px;
    img { width: 100%; height: 100%; }
  }
  > li.brand div.thumbnail a.thumbnail {
    width: 120px; height: 87px; padding: 5px; background: @white; .border_radius(2);
    img { max-width: 120px; max-height: 87px; }
  }
  li.paginate {
    margin-bottom: 0;
    a {
      display: block; position: relative; text-decoration: none; height: 131px;
      div.arrow {
        background: #81c153 url('/images/button_bg.png') repeat-x left top; border: 1px solid (@accent_colour * 0.75 + @black * 0.25);
        height: 44px; .border_radius(99); width: 44px; margin: 0 auto; position: relative; top: 32px;
        b { text-indent: -9000px; display: block; border: 10px solid transparent; width: 0; height: 0; position: relative; top: 12px; }
      }
      div.label {
        position: absolute; bottom: 5px; left: 0; right: 0; line-height: 13px;
        color: @accent_colour * 0.85 + @black * 0.15; text-decoration: none;
        font-weight: bold; font-size: 12px; text-align: center;
      }
      :hover {
        div.arrow { background: #abd56e url('/images/button_bg.png') repeat-x left -44px; }
      }
    }
    :hover { background: transparent; }
  }
  li.paginate.previous a div b { border-right: 15px solid @white; border-left: none; left: 12px; }
  li.paginate.next a div b { border-left: 15px solid @white; border-right: none; left: 16px; }
}  
> div.footer {
  padding: 9px 10px 10px; background: @light_grey * 0.75 + @white * 0.25; overflow: hidden;
  border-top: 1px solid @light_grey; .border_radius_bottom(3);
  div.info {
    float: left; color: @grey;
    strong { color: @black; font-weight: normal; }
  }
  div.pagination {
    float: right;
    > * {
      display: inline-block; line-height: 1; padding: 0 6px; line-height: 18px; height: 18px; background: @white;
      .border_radius(3); text-decoration: none; font-weight: bold;
      font-size: 10px; text-transform: uppercase;
    }
    a { color: @grey; }
    a:hover { color: @black; }
    span.disabled { color: @light_grey; }
    span.current { color: @white; background: @bg; border: none; }
    span.current:hover { color: @white; }
  }
}

} div.browse.with_categories { margin: 0 0 0 160px; } div.browse.with_options > ul { .border_radius_top(0); } div.browse.with_footer > ul { .border_radius_bottom(0); }

Browse List

div.browse.list { > ul {

  margin: 0; min-height: 320px;
  padding: 10px 0 0 10px; overflow: hidden;
  > li {
    display: block; list-style: none; margin: 0 10px 10px 0; padding: 5px;
    .border_radius(3); position: relative; line-height: normal;
    .marker {
      position: absolute; padding: 2px; .border_radius(2);
      background: url('/images/transparent_backgrounds/white_75.png');
      img { height: 12px; width: 12px; }
    }
    img.marker { height: 12px; width: 12px; }
    span.marker.new {
      color: black; left: -5px; top: -5px; background: none; background-color: @white * 0.1 + @yellow * 0.6 + @red * 0.3; line-height: 1; padding: 2px 5px;
      font-weight: bold;
    }
    a.marker.media_type {
      display: inline-block; text-decoration: none; top: 39px; left: 8px;
      font-size: 10px;
      b { font-weight: normal; margin: 0 0 0 2px; line-height: 1; display: none; }
      img { vertical-align: middle; }
    }
    a.thumbnail {
      float: left;
      width: 68px; display: block; overflow: hidden;
      border: 1px solid @light_grey;
      :hover { border-color: @accent_colour; }
    }
    span.title_brand {
      display: block; margin: 0 0 2px 75px;
      a { margin: 0; display: inline; }
      a.brand_name { font-weight: normal; font-size: 12px; }
    }
    a.ad_title {
      font-weight: bold; font-size: 14px; margin: 0 0 0 75px; display: block;
    }
    a.brand_name {
      font-weight: bold; font-size: 14px; margin: 0 0 0 75px; display: block;
    }
    small {
      display: block; color: @grey; margin: 0 0 0 75px; font-size: 12px;
    }
    small.brand_name { display: inline; margin: 0; }
    ul.chart {
      margin: 0 0 0 80px;
      height: 39px;
    }
    ul.networks {
      margin: 3px 0 0 75px; padding: 0; overflow: hidden;
      li { display: block; float: left; margin: 0 5px 0 0; line-height: 1; }
    }
    div.points {
      display: none;
      font-size: 12px; text-align: right;
      label { color: @grey; }
    }
    a.remove { bottom: -3px; right: -3px; }
  }
  li.ad {
    a.thumbnail { height: 51px; }
    span.title_brand {
      small.brand_name {
        display: block;
      }
    }
  }
  li.brand {
    a.thumbnail { height: 68px; }
  }
}

} div.browse.list.with_options ul { .border_radius_top(0); } div.browse.list.with_footer ul { .border_radius_bottom(0); } div.browse.list.cols_2 {

> ul {
  > li {
    width: 285px; float: left;
    :hover {
      background: @white;
    }
  }
}

} div.browse.ads.list {

> ul {
  > li {
    height: 53px;
    a.thumbnail {
      height: 51px;
    }
  }
}

} div.browse.brands.list {

> ul {
  > li {
    height: 68px;
    a.thumbnail {
      height: 66px;
    }
  }
}

}

Categories List

categories {

margin: 40px 0 0; width: 160px; float: left; position: relative; z-index: 1;
ul {
  margin: 0; padding: 10px 0 0;
  li {
    list-style: none; margin: 0; padding: 0; font-size: 14px;
    a { color: @grey; display: block; padding: 5px 10px 5px 15px; text-decoration: none; .border_radius_left(3); }
    a:hover { color: @black; background: @light_grey * 0.15 + @white * 0.85; }
  }
  .all a { font-weight: bold; }
  .current a {
    background: @white; color: @black; border: 1px solid (@light_grey * 0.25 + @white * 0.75); border-right: none; border-left: 5px solid @bg; 
    padding-left: 10px;
  }
}

}

/* Ads > Show */ ad {

div.header {
  overflow: hidden;
  h3 { font-size: 16px; margin: 0 0 3px; }
  small {
    a.category { font-weight: bold; color: @accent_colour; }
    span.networks img { position: relative; top: 3px; }
  }
  span.brand {
    float: right; color: @white;
    a.brand_name { font-weight: bold; color: @accent_colour; }
  }
}
div.content {
  padding: 0; position: relative;
  a.toggle_size {
    display: block; .border_radius(3); background-color: @black; padding: 0 5px 0 26px;
    background-position: 5px center; background-repeat: no-repeat; text-decoration: none; margin: 5px 5px 0 0;
    position: absolute; top: 0; right: 0; line-height: 25px; z-index: 45;
  }
  img.creative { margin: 0 auto; max-width: 540px; display: block; }
  object { position: relative; z-index: 44; }
  object.video { line-height: 0; font-size: 0; }
  object embed { position: relative; z-index: 45; line-height: 0; font-size: 0; }
}
div.content.not_video {
  padding: 40px; text-align: center;
    { margin-left: auto; margin-right: auto; }
  object.flash { margin-bottom: 0; }
}
div.footer {
  padding: 0;
  div.vote_views {
    padding: 5px 10px; overflow: hidden;
    div.share { float: right; margin: 2px 0 0 0; }
    #login_register_msg, #encourage_vote_msg { line-height: 22px; font-weight: bold; color: @black; }
  }
}

} sidebar {

#meta {
  table {
    margin: 0;
    tr:last-child td { padding-bottom: 0; }
    td {
      padding: 0 0 5px;
      ul.networks {
        margin: 0; padding: 0;
        li {
          list-style: none; display: inline;
        }
        li {
        }
      }
    }
    td.label { color: @grey; white-space: nowrap; width: 1%; text-align: right; padding-right: 5px; }
  }
}

}

/* Voting */ div.voted {

font-size: 12px; line-height: 22px; color: @black; display: inline-block; font-weight: bold;
img { float: left; margin-right: 5px; padding: 3px; .border_radius(3); }

} voted_up {

img { background: @colour_positive * 0.66 + @bg * 0.15; }

} voted_down {

img { background: @colour_negative * 0.66 + @bg * 0.15; }

} encourage_comment {

display: inline-block; line-height: 22px; font-weight: bold;

} vote {

overflow: hidden; font-size: 12px; line-height: 22px; color: @black; float: left;
a {
  color: @white; font-weight: bold; overflow: hidden; display: block;
  width: 16px; text-decoration: none; text-align: center; font-size: 10px; padding: 3px; text-transform: uppercase;
}
a.up {
  float: left; background: @colour_positive * 0.66 + @bg * 0.15; .border_radius_left(3);
  :hover { background: @colour_positive * 0.85 + @bg * 0.15; }
} 
a.down {
  float: left; background: @colour_negative * 0.66 + @bg * 0.15; .border_radius_right(3);
  margin: 0 5px 0 1px;
  :hover { background: @colour_negative * 0.85 + @bg * 0.15; }
}

} vote.disabled {

a.up {
  background: (@colour_positive * 0.66 + @bg * 0.15) * 0.15 + @grey * 0.85;
  :hover { background: (@colour_positive * 0.85 + @bg * 0.15) * 0.25 + @grey * 0.75; }
}
a.down {
  background: (@colour_negative * 0.66 + @bg * 0.15) * 0.15 + @grey * 0.85;
  :hover { background: (@colour_negative * 0.85 + @bg * 0.15) * 0.25 + @grey * 0.75; }
}

}

/* Panels */ div.panel {

margin: 0 0 20px; position: relative; .box_shadow(0, 0, 3, @light_grey * 0.66 + @white * 0.33); .border_radius(3);
> div.header {
  background: @bg url('/images/panel_header_bg.png') repeat-x top left; border-bottom: 1px solid (@bg * 0.66 + @black * 0.33);
  padding: 5px 10px 4px; .border_radius_top(3); min-height: 18px; 
  h2 { font-size: 16px; margin: 0; color: @white; .text_shadow(1, 1, 0, @bg * 0.66 + @black * 0.33); }
  h3 { color: @white; font-size: 14px; margin: 0; line-height: 18px; .text_shadow(1, 1, 0, @bg * 0.66 + @black * 0.33); }
  small { display: block; font-size: 12px; color: @light_grey * 0.25 + @white * 0.75; }
  span.filter {
    float: left; display: block; overflow: hidden; position: relative; z-index: 5;
    a {
      margin: 0 1px 0 0; display: block; float: left; padding: 0 8px; height: 18px; font-weight: bold; font-size: 10px; line-height: 18px;
      text-transform: uppercase; background: url('/images/transparent_backgrounds/black_50.png'); color: @light_grey; text-decoration: none; position: relative; z-index: 3;
    }
    a:first-child { .border_radius_left(2); }
    a:last-child { .border_radius_right(2); margin-right: 0; }
    a.active { background: @white; color: @black; z-index: 4; }
    a:hover { color: @white; }
    a.active:hover { color: @black; }
  }

  span.filter.dropdown {
    margin: 0; position: relative; overflow: visible;
    a {
      .border_radius(2); background: @white; color: @black; margin: 0; position: relative; padding-right: 25px;
      img { float: left; margin: 4px 5px 0 0; }
      b.arrow {
        float: right; display: block; height: 0; width: 0; border: 5px solid transparent; border-top: 5px solid @black; border-bottom: none;
        position: absolute; top: 6px; right: 10px;
      }
      :hover {
        background: @accent_colour; color: @white;
        b.arrow { border-top: 5px solid @white; }
      }
    }

    ul {
      position: absolute; top: 100%; left: 0; margin: 1px 0 0; padding: 0; background: @white; .border_radius(2);
      .box_shadow(0, 1, 1, @black);
      li {
        list-style: none; display: block; padding: 0; margin: 0;
        a {
          display: block; height: 18px; line-height: 18px; color: @black; font-size: 10px; text-transform: uppercase; background: transparent;
          border-bottom: 1px solid (@light_grey * 0.66 + @white * 0.33); float: none; margin: 0; .border_radius(0); white-space: nowrap;
          :hover { background: url('/images/transparent_backgrounds/accent_colour_25.png'); color: @black; }
        }
      }
      li:last-child {
        a { border: none; }
      }
    }
  }
  span.filter.dropdown.sort { float: left; margin: 0 0 0 10px; }
  span.filter.dropdown.localisation { float: left; margin: 0 0 0 10px; }

  a.more {
    float: right; color: @white; .text_shadow(1, 1, 0, @bg * 0.66 + @black * 0.33); font-size: 14px; font-weight: bold;
    position: relative; top: 2px;
    :hover { text-decoration: none; }
  }
}
> div.content {
  background: @white; padding: 10px;
  .no_padding { padding: 0; }
}
> div.footer {
  background: @light_grey * 0.33 + @white * 0.66; border-top: 1px solid (@light_grey * 0.5 + @white * 0.5);
  padding: 4px 10px 5px; .border_radius_bottom(3);
}

} div.panel.no_footer div.content { .border_radius_bottom(3); } div.panel.no_header div.content { .border_radius_top(3); } div.panel.collapsable {

div.header {
  cursor: pointer;
  b.toggle { float: right; border: 5px solid transparent; border-bottom: 5px solid @white; border-top: none; display: block; width: 0; height: 0; margin: 6px 0 0 0; }
}
div.header:hover {
  background-color: @bg * 0.75 + @white * 0.25;
}

} div.panel.collapsed {

div.header {
  border-bottom: none; .border_radius(3);
  b.toggle { border-bottom: none; border-top: 5px solid @white; }
}
div.blank { border-bottom: none; .border_radius_bottom(3); }
div.content, div.footer { display: none; }

}

/* Sidebar Actions */ sidebar {

#actions {
  .box_shadow(0, 0, 0, transparent);
  div.content {
    background: url('/images/transparent_backgrounds/accent_colour_10.png'); text-align: center;
    p.endorsement {
      margin: 0 0 10px; font-size: 14px; font-weight: bold;
      small { font-weight: normal; line-height: inherit; margin: 10px 0 0; }
      :last-child { margin: 0; }
    }
    div.share { margin: 5px 0 0; }
    a.button {
      font-size: 16px; line-height: normal; height: auto; padding: 5px 10px 5px 35px; font-weight: bold; margin: 0; position: relative;
      img { position: absolute; top: 3px; left: 6px; }
    }
    div.flash.notice {
      margin: 10px 0 0; font-size: 22px;
      small { font-weight: normal; margin: 0 0 10px; }
    }
    div.flash.notice.done { margin: 0; }
    small {
      display: block; margin: 10px 0 0; font-size: 11px; color: #808080; line-height: 12px;
      img.favicon { vertical-align: middle; }
    }
    div.blank {
      border: none; background: none; padding: 10px 0 0; border-top: 1px solid (@accent_colour * 0.5 + @white * 0.5);
      margin: 10px 0 0;
    }
  }
}

}

/* People Lists */ ul.people {

margin: 0; padding: 10px 0 0 10px; background: @white;
> li {
  display: block; margin: 0 10px 10px 0; float: left; padding: 2px; width: 57px; position: relative;
  .border_radius(2); background: @white; list-style: none; border: 1px solid (@light_grey * 0.33 + @white * 0.66);
  a.avatar {
    display: block; width: 59px; height: 59px; overflow: hidden;
    img { width: 100%; height: 100%; }
  }
  a.name { display: block; font-size: 10px; text-align: center; }
  :hover {
    background: @accent_colour;
    a.name { color: @white; }
  }
}

} ul.people.list {

padding: 0;
> li {
  margin: 0 0 10px; padding: 0 0 10px; overflow: hidden; float: none; width: auto; .border_radius(0);
  border: none; border-bottom: 1px solid (@light_grey * 0.33 + @white * 0.66);
  span.points {
    float: right; display: block; padding: 5px; background: @light_grey * 0.15 + @white * 0.85; line-height: 1; 
    text-align: center; width: 50px; height: 30px; .border_radius(3); margin: 0 0 0 10px;
    strong { display: block; color: @black; font-size: 16px; margin: 2px 0 0; }
    label { color: @grey; text-transform: uppercase; font-size: 10px; }
    label.long { display: block; }
    label.short { display: none; }
  }
  a.avatar { float: left; width: 40px; height: 40px; }
  a.name { font-size: 14px; font-weight: bold; margin: 0 0 0 50px; text-align: left; }
  a.name.long { display: inline; }
  a.name.short { display: none; }
  span.networks {
    display: block; margin: 0 0 0 50px;
    img.favicon { vertical-align: middle; }
  }
  :hover {
    background: transparent;
    a.name { color: @accent_colour * 0.85 + @black * 0.15; }
  }
  :last-child { padding-bottom: 0; border-bottom: none; margin-bottom: 0; }
}

} ul.people.list.small {

> li {
  span.points {
    padding: 3px 6px; height: 18px; font-size: 9px; line-height: 17px; width: 60px;
    strong { font-size: 12px; margin: 0; display: inline; }
    label { font-size: 9px; }
    label.long { display: none; }
    label.short { display: inline; }
  }
  a.avatar { width: 24px; height: 24px; }
  a.name { display: inline; line-height: 24px; margin: 0 0 0 5px; font-size: 12px; height: 24px; }
  a.name.long { display: none; }
  a.name.short { display: inline; }
  span.networks { display: inline; margin: 0; }
  :last-child { padding-bottom: 0; border-bottom: none; margin-bottom: 0; }
}

} ul.people.tiled {

> li {
  width: 28px; padding: 2px;
  a.avatar { width: 24px; height: 24px; background: @white; padding: 2px; }
  a.name, small, span.networks, span.points { display: none; }
}

}

/* Comments */ comments {

ul {
  margin: 0 0 20px; padding: 0;
  li {
    display: block; list-style: none; padding: 0; margin: 0 0 10px;
    span.meta {
      margin: 0; overflow: hidden; display: block;
      small { font-size: 12px; color: @light_grey; float: right; line-height: 16px; display: inline-block; }
      a.avatar {
        display: inline-block; height: 16px; width: 16px; position: relative; top: 3px;
        img { height: 100%; width: 100%; }
      }
      a.name { font-weight: bold; line-height: 16px; display: inline-block; }
      span.inactive { color: @grey; font-weight: bold; line-height: 16px; display: inline-block; }
    }
    b.tail {
      display: block; width: 0; height: 0; margin: 3px 0 0 10px; border: 5px solid transparent; border-top: none;
      border-bottom: 5px solid @white; position: relative; z-index: 2;
    }
    blockquote {
      margin: 0; padding: 10px; .border_radius(3); font-style: normal; background: @white;
      color: @dark_grey; .box_shadow(0, 0, 3, @light_grey * 0.66 + @white * 0.33);
    }
  }
}
form {
  margin: 0;
  textarea { width: 500px; }
}

}

/* Sidebar Categories */ sidebar {

#categories {
  margin: 0 0 20px;
  width: auto;
  p { margin: 0; }
}

}

sidebar {

#ads > ul li, #recommendations > ul li {
  width: 81px;
  div.thumbnail {
    a.thumbnail { height: 60px; width: 81px; }
  }
  div.text {
    a.title { font-size: 11px; height: 14px; line-height: 14px; }
    small { display: none; }
  }
}
#brands > ul li {
  width: 55px;
  div.thumbnail {
    a.thumbnail {
      height: 45px; width: 45px;
      img { max-height: 45px; max-width: 45px; }
    }
  }
  div.text { display: none; }
}

}

/* My Account */ accounts_controller {

#top {
  #page_title {
    #page_options {
      a.button.public_profile {
        float: right; font-size: 16px; line-height: 1; height: auto; padding: 8px 35px 8px 15px; position: relative;
        b.arrow { display: block; height: 0; width: 0; position: absolute; top: 10px; right: 15px; border: 6px solid transparent; border-right: none; border-left: 6px solid @white; margin: 0; }
      }
      a.button.goto_dashboard {
        float: right; font-size: 16px; line-height: 1; height: auto; padding: 8px 15px 8px 35px; margin-right: 5px; position: relative;
        b.arrow { display: block; height: 0; width: 0; position: absolute; top: 10px; left: 15px; border: 6px solid transparent; border-left: none; border-right: 6px solid @white; margin: 0; }
      }
    }
  }
}
#account_nav {
  float: left; width: 200px; margin: 0 20px 0 0;
  ul.nav {
    margin: 0; padding: 0;
    li {
      margin: 0 0 5px; display: block; list-style: none; padding: 0;
      a {
        display: block; height: 30px; text-decoration: none; color: @white;
        b {
          border: 15px solid transparent; border-right: none; border-left: 10px solid transparent; width: 0;
          height: 0; float: right; display: none;
        }
        span {
          .border_radius(3); background: @bg; display: block; 
          line-height: 30px; padding: 0 10px; font-size: 14px; font-weight: bold; margin: 0 10px 0 0;
        }
      }
      :hover {
        a {
          color: @white;
          b { border-left-color: @bg; display: block; }
          span { background: @bg; .border_radius_right(0); }
        }
      }
    }
    li.current a {
      b { border-left-color: @accent_colour; display: block; }
      span { background: @accent_colour; color: @white; .border_radius_right(0); }
    }
  }
}
#main {
  > div {
    margin: 0 0 20px;
    form { margin: 0; }
  }
  #profile {
    a.avatar {
      float: left; display: block;
      width: 70px; overflow: hidden; position: relative; text-decoration: none;
      img { width: 100%; }
      span {
        display: block; line-height: 1; padding: 3px; margin: 5px 0 0; color: @white; background: @accent_colour;
        .border_radius(3); .text_shadow(1, 1, 0, @grey);
        text-align: center; font-size: 10px; font-weight: bold; text-transform: uppercase;
      }
    }
    form {
      margin: 0 0 0 90px;
      h4 { margin: 10px 0 20px; border-bottom: 1px solid (@light_grey * 0.5 + @white * 0.5); padding: 0; color: @bg; font-size: 16px; }
      ul.choices {
        li { width: 30%; }
      }
      div.extra { margin-top: 20px; }
    }
  }

  #networks {
    ul { margin: 0 -10px -10px 0; padding: 0; overflow: hidden;
      li:hover
      {
        background: @light_grey; display: block; float: left; width: 180px;
        padding: 10px; margin: 0 10px 10px 0; list-style: none; .border_radius(3);
        position: relative;
          { line-height: normal; }
        img { vertical-align: middle; float: left; }
        .name { font-weight: bold; font-size: 14px; display: block; margin: -2px 0 0 42px; }
        small {
          font-size: 12px; color: @grey; display: block; margin-left: 42px; 
          strong { color: @black; font-weight: normal; }
        }
        :hover {
        }
      }
      li.installed {
        background: @white;
        border: 2px solid @accent_colour; padding: 8px;
      }
      li.unavailable {
        .name { color: @black; }
        :hover {
          background: @light_grey;
        }
      }
      li:hover {
        background: @light_grey * 0.5 + @white * 0.5;
      }
    }
  }
}

}

/* Shopping Style Panel */ shopping_style {

div.header a.button.small { float: right; }
div.content {
  p {
    margin: 0 0 10px;
    label { text-transform: uppercase; font-size: 11px; display: block; color: @bg; font-weight: bold; }
    span { color: @black; }
    span.toggle { white-space: nowrap; color: @grey; }
    :last-child { margin: 0; }
  }
  p.more { text-align: left; font-weight: normal; }
  p.less { display: none; margin: 0; }
}

}

/* People Controller */ people_controller.index {

#main {
  div.panel {
    float: left; width: 300px; margin: 0 20px 0 0;
    :last-child { margin-right: 0; }
  }
}

} people_controller.show {

#person_overview, #shopping_style {
  a.button.small {
  }
}
#content {
  #shopping_style {
    float: left; width: 240px; margin: 0 20px 0 0;
  }
  #main { width: 360px; }
}

}

/* Search Results */ search_results {

margin: 0 0 20px;
li {
  :hover {
    small { color: @white * 0.75 + @accent_colour * 0.25; }
  }
}

} search {

div.content {
  padding: 20px;
  form {
    margin: 0; float: none;
    span.submit_and_options {
      display: block;
    }
  }
  p { margin: 0 0 15px; }
  h4 { font-weight: normal; margin: 0 0 5px; }
}

}

/* Recommendations */ recommendations {

div.browse {
  margin: 0; padding: 0; background: none;
  ul { min-height: 0; .border_radius(0); }
}

}

/* Blank States */ div.blank {

padding: 20px; background: @bg * 0.05 + @blue * 0.05 + @white * 0.9; position: relative;
border: 1px solid (@bg * 0.1 + @blue * 0.1 + @white * 0.8); z-index: 1;
h4 { font-size: 18px; margin: 0 0 10px; }
h4:last-child { margin: 0; }
p { font-size: 16px; margin: 0 0 10px; }
p:last-child { margin: 0; }
p.with_list_number.large {
  span { margin-left: 48px; display: block; color: @white; }
}
p.earn span { font-size: 22px; color: @white; line-height: 48px; font-weight: bold; }
a { white-space: nowrap; }
a.hide {
  position: absolute; top: -5px; right: -5px; display: block; height: 16px; width: 16px; padding: 3px; background: #E7E9F6; .border_radius(99);
}

}

div.blank.small {

padding: 10px 20px; 
h4 { font-weight: normal; font-size: 16px; }
p { margin: 0; }

} div.blank.tiny {

padding: 10px 20px;
h4 { font-weight: normal; font-size: 14px; }
p { margin: 0; font-size: 12px; }

} div.blank.rounded {

.border_radius(3); margin: 0 0 20px;

} div.blank.rounded.bottom { .border_radius_top(0); } div.blank.with_border_bottom { border-bottom: 1px solid (@bg * 0.1 + @blue * 0.1 + @white * 0.8); } div.blank.no_border_top { border-top: none; } div.blank.no_border_bottom { border-bottom: none; } div.blank.no_side_borders { border-right: none; border-left: none; } div.panel {

div.blank {
  padding: 10px 20px; overflow: hidden; margin: 0;
  h4 { font-weight: normal; font-size: 14px; }
  p, ul { margin: 0 0 10px; font-size: 12px; }
  p:last-child, ul:last-child { margin: 0; }
}

}

/* Sidebar Browse */ sidebar {

div.panel {
  div.content.browse {
    padding: 0; margin: 0;
    > ul {
        min-height: 0; .border_radius(0);
      > li {
        div.thumbnail {
          a.thumbnail { padding: 5px; }
          img.marker.media_type { top: 48px; left: 8px; }
        }
        div.footer {
          a.title, a.name { font-size: 11px; font-weight: normal; }
        }
      }
    }
  }

  div.content.browse.ads > ul > li {
    width: 93px;
    > div.thumbnail a.thumbnail { width: 83px; height: 62px; } 
  }
  div.content.browse.brands {
    .border_radius(3);
    > ul {
      background: none;
      > li {
        width: 52px;
        > div.thumbnail {
          padding: 3px;
          a.thumbnail { width: 42px; height: 42px; padding: 2px; }
        }
        li.active { background: @accent_colour; }
      }
    }
  }
  div.footer {
    div.info { float: none; }
    div.pagination { float: none; margin: 3px 0 0; }
  }
}

}

/* List Numbers */ label.list_number {

float: left; background: url('/images/transparent_backgrounds/black_15.png'); padding: 2px; width: 24px; height: 24px; display: block;
.border_radius(99);
b {
  display: block; font-weight: bold; font-size: 14px; color: @white; background: @accent_colour; height: 20px; width: 20px; line-height: 20px;
  text-align: center; .border_radius(99); .text_shadow(1, 1, 0px, (@accent_colour * 0.75 + @black * 0.25));
  border: 2px solid @white;
}

} label.list_number.large {

padding: 4px; width: 48px; height: 48px; .border_radius(99); position: relative; left: -10px;
b {
  font-size: 28px; height: 40px; width: 40px; .border_radius(99); line-height: 40px;
  .text_shadow(2, 2, 0px, (@accent_colour * 0.75 + @black * 0.25)); border-width: 4px;
}

}

/* Dashboard */ dashboard_controller {

#ads {
  span.filter.state { float: right; }
}
#sidebar {
  #shopping_style div.content {
    p.less { display: block; }
    p.more { display: none; }
  }
  #influences {
    div.header {
      padding-bottom: 0;
      ul.tabs {
        position: relative; top: 1px; z-index: 3;
        li {
          margin: 0 5px 0 0;
          a {
            border: none; background: url('/images/transparent_backgrounds/white_75.png');
            :hover { color: @black; }
          }
        }
        li.active {
          a {
            background: @white; border: none;
            :hover { color: @black; }
          }
        }
      }
    }

    div.tab_content {
      overflow: hidden; padding: 0;
      > ul {
        padding: 10px 10px 0; max-height: 280px; min-height: 120px; overflow-y: scroll; .border_radius_bottom(3px);
      }
    }
    div.footer {
      form {
        p {
          margin: 0 0 5px;
          img.marker { float: right; margin: 5px 0 0 0; }
          span.invitee {
            line-height: 26px; padding: 3px 3px 0; font-size: 14px;
            small { color: @grey; font-size: 12px; }
          }
        }
        p.indent { margin-left: 36px; }
        p.submit { margin-top: 10px; }
      }
    }
  }
}

div.panel.full {
  > div.content {
    margin: 0; padding: 0; background: none;
    ul {
      li {
        width: 148px;
        div.thumbnail {
          img.marker.media_type { top: 90px; }
          a.thumbnail { width: 138px; height: 104px; }
        }
      }
    }
  }
}
#people {
  form {
    padding: 0 0 5px;
    input { width: 225px; float: left; margin: 0 5px 0 0; }
    a.button { height: 23px; line-height: 23px; width: 60px; padding: 0; text-align: center; }
  }
}

}

/* Remove Pages Titles when Browsing */ ads_controller, brands_controller {

#page_title { display: none; }

}

/* Brands > Show */ brands_controller.show {

#ads {
  div.filters {
    h3 { font-size: 16px; margin: 0; }
    span.show { float: right; }
    span.filter.dropdown.localisation { float: right; margin: 0 0 0 10px; }
    span.filter.state { float: right; margin: 0 0 0 10px; }
  }
}

}

/* FAQ */ pages_controller.faq {

#answers {
  h3 { margin-top: 20px; padding-top: 20px; border-top: 1px solid (@light_grey * 0.75 + @white * 0.25); }
  h3.first { margin-top: 0; padding-top: 0; border: none; }
}
#questions {
  div.content {
    padding: 20px;
    ul {
      margin: 0; padding: 0;
      li {
        margin: 0 0 10px; list-style: none; display: block; padding: 0;
        a { font-size: 14px; }
      }
      li:last-child {
        margin: 0;
      }
    }
  }
}

}

/* Person Overview */ person_overview {

padding: 20px 10px; position: relative; z-index: 25;
#person {
  float: left; width: 620px;
  a.avatar {
    display: block; float: left; width: 60px; height: 60px;
    img { height: 100%; width: 100%; }
  }
  > div {
    margin: 0 0 0 75px; color: @white; font-size: 14px; .text_shadow(1, 1, 0, @bg * 0.66 + @black * 0.33);
  }
  div.name {
    h2 {
      margin: 0 0 5px; display: inline;
      a {
        font-size: 20px; font-weight: bold; .text_shadow(1, 1, 0, @bg * 0.66 + @black * 0.33);
        line-height: 1; color: @white; text-decoration: none;
        :hover { text-decoration: underline; }
      }
      a.button.small {
        font-size: 10px;
        :hover { text-decoration: none; }
      }
    }

    span.points {
      float: right; display: block; padding: 5px 10px; .border_radius(2); text-align: center; background: @white; position: relative;
      min-width: 45px;
      strong { color: @black; font-weight: bold; font-size: 24px; line-height: 1; display: block; .text_shadow(0, 0, 0, transparent); }
      label { font-size: 9px; text-transform: uppercase; color: @grey; display: block; .text_shadow(0, 0, 0, transparent); font-weight: bold; }
    }
    span.points.with_redeem {
      .border_radius_bottom(0);
      a.button {
        display: block; text-align: center; .border_radius_top(0); font-size: 10px; font-weight: bold; padding: 0;
        position: absolute; height: 18px; left: 0; right: 0; bottom: -19px; line-height: 18px; text-transform: uppercase; border: none;
      }
    }
    div.options { margin: 0; }
  }
  div.meta {
    color: @white * 0.66 + @bg * 0.33;
    span { color: @white; }
    label { color: @white * 0.66 + @bg * 0.33; }
    ul.networks {
      display: inline; margin: 0; padding: 0;
      li {
        display: inline; line-height: 1;
        img { position: relative; vertical-align: middle; top: -1px; }
      }
    }
  }

  div.extra {
    font-size: 12px; margin-top: 20px; margin-bottom: 20px;
    span.toggle {
      .text_shadow(1, 1, 0, @bg * 0.66 + @black * 0.33);
      a { font-size: 10px; font-weight: bold; text-transform: uppercase; text-decoration: none; color: @accent_colour; }
      b.arrow { display: inline-block; width: 0; height: 0; border: 5px solid transparent; position: relative; top: -2px; }
    }
    #less_info {
      span.toggle {
        b.arrow { border-top: 5px solid @accent_colour; border-bottom: 0; }
      }
    }
    #more_info {
      span.toggle {
        float: right;
        b.arrow { border-bottom: 5px solid @accent_colour; border-top: 0; }
      }
      h4 {
        color: @white; margin: 0 0 10px 0; border-bottom: 1px solid (@white * 0.25 + @bg * 0.75); .text_shadow(1, 1, 0, @bg * 0.66 + @black * 0.33);
        span { font-size: 12px; }
      }
      p {
        margin: 0 0 5px;
        label { display: block; float: left; width: 120px; color: @white * 0.66 + @bg * 0.33; }
        span { display: block; margin: 0 0 0 130px; }
      }
      p:last-child { margin: 0; }

    }
  }
  div.login {
    margin: 0 0 0 75px;
    a.button { font-weight: bold; }
  }
}

}

/* Dashboard Nav */ dashboard_nav {

position: absolute; bottom: 0; left: 10px; margin: 0; padding: 0; overflow: hidden;
li {
  display: block; float: left; margin: 0 5px 0 0;
  a {
    display: block; height: 28px; padding: 0 10px; line-height: 28px; .border_radius_top(2);
    text-decoration: none; color: @white; background: url('/images/transparent_backgrounds/accent_colour_30.png'); font-size: 14px;
    font-weight: bold;
    :hover { background: url('/images/transparent_backgrounds/accent_colour_45.png'); }
  }
}
li.active {
  a {
    background: @white; color: @black;
    :hover { color: @black; }
  }
}

}

/* Dwellometer */ dwellometer {

z-index: 45; float: right; .box_shadow(0, 0, 0, transparent); margin: 0;
div.content {
  text-align: center; position: relative;
  object, object embed { position: relative; z-index: 46; line-height: 0; }
  div.title {
    position: absolute; bottom: 10px; left: 0; right: 0; z-index: 50;
    img { width: 120px; display: block; margin: 0 auto; position: relative; left: -5px; }
  }
}

}

/* Activity Stream */ activity {

div.content {
  ul.events {
    padding: 0; margin: 0 0 -10px;
    li {
      margin: 0; padding: 10px 0; border-bottom: 1px solid (@light_grey * 0.33 + @white * 0.66);
      list-style: none; overflow: hidden;
      small.meta {
        font-size: 12px; color: @light_grey; float: right;
      }
      a.button { float: right; margin: 0 0 10px 10px; }
      a.avatar, a.logo, a.thumbnail {
        height: 32px; display: block; float: left;
        img { width: 100%; height: 100%; }
      }
      a.avatar, a.logo, a.icon { width: 32px; }
      a.thumbnail { width: 42px; }
      div.symbols {
        float: left; overflow: hidden;
        b {
          display: block; float: left; margin: 10px 5px 0;
          img { height: 12px; width: 12px; }
        }
        b.voted { margin: 10px 3px 0; padding: 2px; .border_radius(2); }
        b.voted.for { background: @colour_positive * 0.33 + @white * 0.66; }
        b.voted.against { background: @colour_negative * 0.33 + @white * 0.66; }
      }
      /* Temporarily removed avatar and symbol */

/* div.symbols a.agent, b { display: none; }*/

  div.description {
    font-size: 12px; color: @grey;
    a.agent { font-weight: bold; }
  }
  div.comment {
    margin-top: 2px;
    b.tail {
      display: block; margin: 0 0 0 10px; width: 0; height: 0; border: 5px solid transparent;
      border-top: none; border-bottom: 5px solid (@light_grey * 0.25 + @white * 0.75);
    }
    blockquote {
      margin: 0; font-style: normal; color: @dark_grey;
      .border_radius(3); background: @light_grey * 0.25 + @white * 0.75; padding: 5px 10px;
      span.view_comment {
        color: @grey;
      }
    }
  }
  div.content {
    overflow: hidden;
  }
}
li.new_comment.ad, li.endorsed.ad, li.voted {
  div.description, div.content { margin-left: 106px; }

/* div.description, div.content { margin-left: 53px; }*/

}
li.new_comment.brand, li.replied_to, li.endorsed.brand, li.connected, li.sn_setup {
  div.description, div.content { margin-left: 96px; }

/* div.description, div.content { margin-left: 43px; }*/

    }
    li.replied_to {
      div.content {
        a.thumbnail, a.logo { margin-top: 7px; }
      }
    }
    li.replied_to.ad {
      div.content {
        div.comment { margin-left: 52px; }
      }
    }
    li.replied_to.brand {
      div.content {
        div.comment { margin-left: 42px; }
      }
    }
    li.voted div.description span.action { .border_radius(2); color: @dark_grey; padding: 0 3px; white-space: nowrap; }
    li.voted.for div.description span.action { background: @colour_positive * 0.15 + @white * 0.85; }
    li.voted.against div.description span.action { background: @colour_negative * 0.15 + @white * 0.85; }
    li:first-child { padding-top: 0; }
    li:last-child { border-bottom: none; }
    li:hover div.content div.comment blockquote span.view_comment {
    }
  }
}

}

/* Login/Register Modal */ login_register {

div.location_select,
div.location_search { margin-left: 130px; }
h3 {
  small { font-size: 14px; font-weight: normal; display: block; color: @grey; text-align: left; margin: 0; display: block; }
}

}

/* Contact Form in Pages */ pages_controller {

#sidebar {
  #contact {
    margin: 15px 0 0;
    form {
      label { text-align: left; float: none; width: auto; font-size: 12px; font-weight: bold; line-height: 1; margin: 0 0 5px; }
      p.submit.indent {
        margin: 0;
        span.with_cancel { display: none; }
      }
    }
  }
}

}

/* Exclusive Offers */ offers {

div.content {
  a.gift {
    display: block; text-align: center;
    img { height: 100px; }
  }
}

}

div.browse {

margin: 0 0 20px;
&.class {
  padding: 0;
}
div.header {
  padding: 10px 10px 9px; text-align: left; background: @bg url('/images/panel_header_bg.png') repeat-x top left;
  border-bottom: 1px solid (@bg * 0.66 + @black * 0.33); line-height: 1; height: 18px;
  .border_radius_top(3); color: @light_grey;
  h3 { font-size: 16px; margin: 0; color: @white; .text_shadow(1, 1, 0, @bg * 0.66 + @black * 0.33); }
  span.filter {
    float: left; display: block; overflow: hidden; position: relative; z-index: 5;
    a {
      margin: 0 1px 0 0; display: block; float: left; padding: 0 8px; height: 18px; font-weight: bold; font-size: 10px; line-height: 18px;
      text-transform: uppercase; background: url('/images/transparent_backgrounds/black_50.png'); color: @light_grey; text-decoration: none; position: relative; z-index: 3;
      .active {
        background: @white; color: @black; z-index: 4;
        :hover { color: @black; }
      }
      :hover { color: @white; }
      :first-child { .border_radius_left(2); }
      :last-child { .border_radius_right(2); margin-right: 0; }
    }
  }

  span.filter.dropdown {
    margin: 0; position: relative; overflow: visible;
    a {
      .border_radius(2); background: @white; color: @black; margin: 0; position: relative; padding-right: 25px;
      img { float: left; margin: 4px 5px 0 0; }
      b.arrow {
        float: right; display: block; height: 0; width: 0; border: 5px solid transparent; border-top: 5px solid @black; border-bottom: none;
        position: absolute; top: 6px; right: 10px;
      }
      :hover {
        background: @accent_colour; color: @white;
        b.arrow { border-top: 5px solid @white; }
      }
    }
    ul {
      position: absolute; top: 100%; left: 0; margin: 1px 0 0; padding: 0; background: @white; .border_radius(2);
      .box_shadow(0, 1, 1, @black);
      li {
        list-style: none; display: block; padding: 0; margin: 0;
        a {
          display: block; height: 18px; line-height: 18px; color: @black; font-size: 10px; text-transform: uppercase; background: transparent;
          border-bottom: 1px solid (@light_grey * 0.66 + @white * 0.33); float: none; margin: 0; .border_radius(0); white-space: nowrap;
          :hover { background: url('/images/transparent_backgrounds/accent_colour_25.png'); color: @black; }
        }
        :last-child {
          a { border: none; }
        }
      }
    }
  }
  span.filter.dropdown.sort { float: left; margin: 0 0 0 10px; }
  span.filter.dropdown.localisation { float: left; margin: 0 0 0 10px; }
  a.more {
    float: right; color: @white; .text_shadow(1, 1, 0, @bg * 0.66 + @black * 0.33); font-size: 14px; font-weight: bold;
    position: relative; top: 2px;
    :hover { text-decoration: none; }
  }
}
> ul {
  margin: 0; background: @white; padding: 10px 0 0 10px; .border_radius(3); position: relative;
  li {
    display: block; float: left; list-style: none; margin: 0 10px 10px 0; padding: 5px; position: relative;
    background: @white; width: 130px; border: 1px solid (@light_grey * 0.33 + @white * 0.66); .border_radius(2);
    a.remove {
      position: absolute; height: 16px; width: 16px; padding: 3px; background: @accent_colour;
      .border_radius(99); display: none; z-index: 3; top: -8px; right: -8px;
      img { vertical-align: middle; }
    }
    div.thumbnail {
      .border_radius_top(3); position: relative; z-index: 3;
      .marker {
        position: absolute; padding: 2px; .border_radius(2); z-index: 3;
        background: url('/images/transparent_backgrounds/white_75.png'); height: 12px; width: 12px;
      }
      .marker.coupon {
        height: auto; width: auto; top: 10px; right: -3px; padding: 0; background: transparent; overflow: hidden; position: absolute;
        b {
          display: block; height: 0; width: 0; float: left; border: 14px solid transparent; border-top: 14px solid @accent_colour;
          border-bottom: none; border-right: none; float: left;
        }
        span {
          color: @white; font-size: 10px; font-weight: bold; text-transform: uppercase; height: 14px; line-height: 14px; display: block;
          padding: 0 4px 0 2px; background: @accent_colour; .text_shadow(1, 1, 0px, (@accent_colour * 0.75 + @black * 0.25)); margin: 0 0 0 14px;
        }
      }
      .marker.video {
        position: absolute; left: 50%; top: 50%; background: @white; width: 10px; height: 10px;
        b { display: block; width: 0; height: 0; border: 5px solid transparent; border-left: 10px solid @black; border-right: none; }
      }
      .marker.endorsed_by_me { background: none; padding: 0; right: 0; bottom: -32px; .border_radius(2); background: @white; }
      a.thumbnail {
        display: block; overflow: hidden; position: relative; text-align: center;
        img { position: relative; display: block; margin: auto; }
      }
    }
    div.text {
      margin: 3px 0 0; display: block;
      a { text-decoration: none; }
      a.title {
        display: block; text-decoration: none; font-weight: bold; font-size: 12px; line-height: 16px;
        white-space: nowrap; height: 16px; overflow: hidden;
        :before {
          display: block; height: 32px; width: 20px; content: " "; float: right; right: -15px; top: -8px;
          background: @white; position: relative; z-index: 1; .box_shadow(-5, 0, 10, @white);
        }
      }
      small {
        font-size: 11px; line-height: 13px; color: @grey; display: block; height: 13px; overflow: hidden; white-space: nowrap;
        a { font-weight: bold; }
        :before {
          display: block; height: 32px; width: 20px; content: " "; float: right; right: -15px; top: -8px;
          background: @white; position: relative; z-index: 1; .box_shadow(-5, 0, 10, @white);
        }
      }
    }
    :hover {
      background: @accent_colour;
      a.remove { display: block; }
      div.thumbnail {
        a.marker.remove, a.marker.video {
          b { display: inline-block; }
        }
        a.marker.video { .box_shadow(0, 0, 2, @black); }
      }
      div.text {
        a { color: @white; }
        a.title:before { background: @accent_colour; .box_shadow(-5, 0, 10, @accent_colour); }
        small {
          color: @white * 0.75 + @accent_colour * 0.25;
          :before { background: @accent_colour; .box_shadow(-5, 0, 10, @accent_colour); }
        }
      }
      div.footer a { color: @white; }
    }
  }
  > li.ad div.thumbnail a.thumbnail {
    width: 130px; height: 97px;
    img { width: 100%; height: 100%; }
  }
  > li.brand div.thumbnail a.thumbnail {
    width: 120px; height: 87px; padding: 5px; background: @white; .border_radius(2);
    img { max-width: 120px; max-height: 87px; }
  }
  li.paginate {
    margin-bottom: 0;
    a {
      display: block; position: relative; text-decoration: none; height: 131px;
      div.arrow {
        background: #81c153 url('/images/button_bg.png') repeat-x left top; border: 1px solid (@accent_colour * 0.75 + @black * 0.25);
        height: 44px; .border_radius(99); width: 44px; margin: 0 auto; position: relative; top: 32px;
        b { text-indent: -9000px; display: block; border: 10px solid transparent; width: 0; height: 0; position: relative; top: 12px; }
      }
      div.label {
        position: absolute; bottom: 5px; left: 0; right: 0; line-height: 13px;
        color: @accent_colour * 0.85 + @black * 0.15; text-decoration: none;
        font-weight: bold; font-size: 12px; text-align: center;
      }
      :hover {
        div.arrow { background: #abd56e url('/images/button_bg.png') repeat-x left -44px; }
      }
    }
    :hover { background: transparent; }
  }
  li.paginate.previous a div b { border-right: 15px solid @white; border-left: none; left: 12px; }
  li.paginate.next a div b { border-left: 15px solid @white; border-right: none; left: 16px; }
}  
> div.footer {
  padding: 9px 10px 10px; background: @light_grey * 0.75 + @white * 0.25; overflow: hidden;
  border-top: 1px solid @light_grey; .border_radius_bottom(3);
  div.info {
    float: left; color: @grey;
    strong { color: @black; font-weight: normal; }
  }
  div.pagination {
    float: right;
    > * {
      display: inline-block; line-height: 1; padding: 0 6px; line-height: 18px; height: 18px; background: @white;
      .border_radius(3); text-decoration: none; font-weight: bold;
      font-size: 10px; text-transform: uppercase;
    }
    a { color: @grey; }
    a:hover { color: @black; }
    span.disabled { color: @light_grey; }
    span.current { color: @white; background: @bg; border: none; }
    span.current:hover { color: @white; }
  }
}

} div.browse.with_categories { margin: 0 0 0 160px; } div.browse.with_options > ul { .border_radius_top(0); } div.browse.with_footer > ul { .border_radius_bottom(0); } /* Browse List */ div.browse.list { > ul {

  margin: 0; min-height: 320px;
  padding: 10px 0 0 10px; overflow: hidden;
  > li {
    display: block; list-style: none; margin: 0 10px 10px 0; padding: 5px;
    .border_radius(3); position: relative; line-height: normal;
    .marker {
      position: absolute; padding: 2px; .border_radius(2);
      background: url('/images/transparent_backgrounds/white_75.png');
      img { height: 12px; width: 12px; }
    }
    img.marker { height: 12px; width: 12px; }
    span.marker.new {
      color: black; left: -5px; top: -5px; background: none; background-color: @white * 0.1 + @yellow * 0.6 + @red * 0.3; line-height: 1; padding: 2px 5px;
      font-weight: bold;
    }
    a.marker.media_type {
      display: inline-block; text-decoration: none; top: 39px; left: 8px;
      font-size: 10px;
      b { font-weight: normal; margin: 0 0 0 2px; line-height: 1; display: none; }
      img { vertical-align: middle; }
    }
    a.thumbnail {
      float: left;
      width: 68px; display: block; overflow: hidden;
      border: 1px solid @light_grey;
      :hover { border-color: @accent_colour; }
    }
    span.title_brand {
      display: block; margin: 0 0 2px 75px;
      a { margin: 0; display: inline; }
      a.brand_name { font-weight: normal; font-size: 12px; }
    }
    a.ad_title {
      font-weight: bold; font-size: 14px; margin: 0 0 0 75px; display: block;
    }
    a.brand_name {
      font-weight: bold; font-size: 14px; margin: 0 0 0 75px; display: block;
    }
    small {
      display: block; color: @grey; margin: 0 0 0 75px; font-size: 12px;
    }
    small.brand_name { display: inline; margin: 0; }
    ul.chart {
      margin: 0 0 0 80px;
      height: 39px;
    }
    ul.networks {
      margin: 3px 0 0 75px; padding: 0; overflow: hidden;
      li { display: block; float: left; margin: 0 5px 0 0; line-height: 1; }
    }
    div.points {
      display: none;
      font-size: 12px; text-align: right;
      label { color: @grey; }
    }
    a.remove { bottom: -3px; right: -3px; }
  }
  li.ad {
    a.thumbnail { height: 51px; }
    span.title_brand {
      small.brand_name {
        display: block;
      }
    }
  }
  li.brand {
    a.thumbnail { height: 68px; }
  }
}

} div.browse.list.with_options ul { .border_radius_top(0); } div.browse.list.with_footer ul { .border_radius_bottom(0); } div.browse.list.cols_2 {

> ul {
  > li {
    width: 285px; float: left;
    :hover {
      background: @white;
    }
  }
}

} div.browse.ads.list {

> ul {
  > li {
    height: 53px;
    a.thumbnail {
      height: 51px;
    }
  }
}

} div.browse.brands.list {

> ul {
  > li {
    height: 68px;
    a.thumbnail {
      height: 66px;
    }
  }
}

}

/* Categories List */ categories {

margin: 40px 0 0; width: 160px; float: left; position: relative; z-index: 1;
ul {
  margin: 0; padding: 10px 0 0;
  li {
    list-style: none; margin: 0; padding: 0; font-size: 14px;
    a { color: @grey; display: block; padding: 5px 10px 5px 15px; text-decoration: none; .border_radius_left(3); }
    a:hover { color: @black; background: @light_grey * 0.15 + @white * 0.85; }
  }
  .all a { font-weight: bold; }
  .current a {
    background: @white; color: @black; border: 1px solid (@light_grey * 0.25 + @white * 0.75); border-right: none; border-left: 5px solid @bg; 
    padding-left: 10px;
  }
}

}

/* Ads > Show */ ad {

div.header {
  overflow: hidden;
  h3 { font-size: 16px; margin: 0 0 3px; }
  small {
    a.category { font-weight: bold; color: @accent_colour; }
    span.networks img { position: relative; top: 3px; }
  }
  span.brand {
    float: right; color: @white;
    a.brand_name { font-weight: bold; color: @accent_colour; }
  }
}
div.content {
  padding: 0; position: relative;
  a.toggle_size {
    display: block; .border_radius(3); background-color: @black; padding: 0 5px 0 26px;
    background-position: 5px center; background-repeat: no-repeat; text-decoration: none; margin: 5px 5px 0 0;
    position: absolute; top: 0; right: 0; line-height: 25px; z-index: 45;
  }
  img.creative { margin: 0 auto; max-width: 540px; display: block; }
  object { position: relative; z-index: 44; }
  object.video { line-height: 0; font-size: 0; }
  object embed { position: relative; z-index: 45; line-height: 0; font-size: 0; }
}
div.content.not_video {
  padding: 40px; text-align: center;
    { margin-left: auto; margin-right: auto; }
  object.flash { margin-bottom: 0; }
}
div.footer {
  padding: 0;
  div.vote_views {
    padding: 5px 10px; overflow: hidden;
    div.share { float: right; margin: 2px 0 0 0; }
    #login_register_msg, #encourage_vote_msg { line-height: 22px; font-weight: bold; color: @black; }
  }
}

} sidebar {

#meta {
  table {
    margin: 0;
    tr:last-child td { padding-bottom: 0; }
    td {
      padding: 0 0 5px;
      ul.networks {
        margin: 0; padding: 0;
        li {
          list-style: none; display: inline;
        }
        li {
        }
      }
    }
    td.label { color: @grey; white-space: nowrap; width: 1%; text-align: right; padding-right: 5px; }
  }
}

}

/* Voting */ div.voted {

font-size: 12px; line-height: 22px; color: @black; display: inline-block; font-weight: bold;
img { float: left; margin-right: 5px; padding: 3px; .border_radius(3); }

} voted_up {

img { background: @colour_positive * 0.66 + @bg * 0.15; }

} voted_down {

img { background: @colour_negative * 0.66 + @bg * 0.15; }

} encourage_comment {

display: inline-block; line-height: 22px; font-weight: bold;

} vote {

overflow: hidden; font-size: 12px; line-height: 22px; color: @black; float: left;
a {
  color: @white; font-weight: bold; overflow: hidden; display: block;
  width: 16px; text-decoration: none; text-align: center; font-size: 10px; padding: 3px; text-transform: uppercase;
}
a.up {
  float: left; background: @colour_positive * 0.66 + @bg * 0.15; .border_radius_left(3);
  :hover { background: @colour_positive * 0.85 + @bg * 0.15; }
} 
a.down {
  float: left; background: @colour_negative * 0.66 + @bg * 0.15; .border_radius_right(3);
  margin: 0 5px 0 1px;
  :hover { background: @colour_negative * 0.85 + @bg * 0.15; }
}

} vote.disabled {

a.up {
  background: (@colour_positive * 0.66 + @bg * 0.15) * 0.15 + @grey * 0.85;
  :hover { background: (@colour_positive * 0.85 + @bg * 0.15) * 0.25 + @grey * 0.75; }
}
a.down {
  background: (@colour_negative * 0.66 + @bg * 0.15) * 0.15 + @grey * 0.85;
  :hover { background: (@colour_negative * 0.85 + @bg * 0.15) * 0.25 + @grey * 0.75; }
}

} sidebar {

#ads > ul li, #recommendations > ul li {
  width: 81px;
  div.thumbnail {
    a.thumbnail { height: 60px; width: 81px; }
  }
  div.text {
    a.title { font-size: 11px; height: 14px; line-height: 14px; }
    small { display: none; }
  }
}
#brands > ul li {
  width: 55px;
  div.thumbnail {
    a.thumbnail {
      height: 45px; width: 45px;
      img { max-height: 45px; max-width: 45px; }
    }
  }
  div.text { display: none; }
}

}

/* My Account */ accounts_controller {

#top {
  #page_title {
    #page_options {
      a.button.public_profile {
        float: right; font-size: 16px; line-height: 1; height: auto; padding: 8px 35px 8px 15px; position: relative;
        b.arrow { display: block; height: 0; width: 0; position: absolute; top: 10px; right: 15px; border: 6px solid transparent; border-right: none; border-left: 6px solid @white; margin: 0; }
      }
      a.button.goto_dashboard {
        float: right; font-size: 16px; line-height: 1; height: auto; padding: 8px 15px 8px 35px; margin-right: 5px; position: relative;
        b.arrow { display: block; height: 0; width: 0; position: absolute; top: 10px; left: 15px; border: 6px solid transparent; border-left: none; border-right: 6px solid @white; margin: 0; }
      }
    }
  }
}
#account_nav {
  float: left; width: 200px; margin: 0 20px 0 0;
  ul.nav {
    margin: 0; padding: 0;
    li {
      margin: 0 0 5px; display: block; list-style: none; padding: 0;
      a {
        display: block; height: 30px; text-decoration: none; color: @white;
        b {
          border: 15px solid transparent; border-right: none; border-left: 10px solid transparent; width: 0;
          height: 0; float: right; display: none;
        }
        span {
          .border_radius(3); background: @bg; display: block; 
          line-height: 30px; padding: 0 10px; font-size: 14px; font-weight: bold; margin: 0 10px 0 0;
        }
      }
      :hover {
        a {
          color: @white;
          b { border-left-color: @bg; display: block; }
          span { background: @bg; .border_radius_right(0); }
        }
      }
    }
    li.current a {
      b { border-left-color: @accent_colour; display: block; }
      span { background: @accent_colour; color: @white; .border_radius_right(0); }
    }
  }
}
#main {
  > div {
    margin: 0 0 20px;
    form { margin: 0; }
  }
  #profile {
    a.avatar {
      float: left; display: block;
      width: 70px; overflow: hidden; position: relative; text-decoration: none;
      img { width: 100%; }
      span {
        display: block; line-height: 1; padding: 3px; margin: 5px 0 0; color: @white; background: @accent_colour;
        .border_radius(3); .text_shadow(1, 1, 0, @grey);
        text-align: center; font-size: 10px; font-weight: bold; text-transform: uppercase;
      }
    }
    form {
      margin: 0 0 0 90px;
      h4 { margin: 10px 0 20px; border-bottom: 1px solid (@light_grey * 0.5 + @white * 0.5); padding: 0; color: @bg; font-size: 16px; }
      ul.choices {
        li { width: 30%; }
      }
      div.extra { margin-top: 20px; }
    }
  }

  #networks {
    ul { margin: 0 -10px -10px 0; padding: 0; overflow: hidden;
      li:hover
      {
        background: @light_grey; display: block; float: left; width: 180px;
        padding: 10px; margin: 0 10px 10px 0; list-style: none; .border_radius(3);
        position: relative;
          { line-height: normal; }
        img { vertical-align: middle; float: left; }
        .name { font-weight: bold; font-size: 14px; display: block; margin: -2px 0 0 42px; }
        small {
          font-size: 12px; color: @grey; display: block; margin-left: 42px; 
          strong { color: @black; font-weight: normal; }
        }
        :hover {
        }
      }
      li.installed {
        background: @white;
        border: 2px solid @accent_colour; padding: 8px;
      }
      li.unavailable {
        .name { color: @black; }
        :hover {
          background: @light_grey;
        }
      }
      li:hover {
        background: @light_grey * 0.5 + @white * 0.5;
      }
    }
  }
}

}

/* Shopping Style Panel */ shopping_style {

div.header a.button.small { float: right; }
div.content {
  p {
    margin: 0 0 10px;
    label { text-transform: uppercase; font-size: 11px; display: block; color: @bg; font-weight: bold; }
    span { color: @black; }
    span.toggle { white-space: nowrap; color: @grey; }
    :last-child { margin: 0; }
  }
  p.more { text-align: left; font-weight: normal; }
  p.less { display: none; margin: 0; }
}

}

/* People Controller */ people_controller.index {

#main {
  div.panel {
    float: left; width: 300px; margin: 0 20px 0 0;
    :last-child { margin-right: 0; }
  }
}

} people_controller.show {

#person_overview, #shopping_style {
  a.button.small {
  }
}
#content {
  #shopping_style {
    float: left; width: 240px; margin: 0 20px 0 0;
  }
  #main { width: 360px; }
}

}

/* Search Results */ search_results {

margin: 0 0 20px;
li {
  :hover {
    small { color: @white * 0.75 + @accent_colour * 0.25; }
  }
}

} search {

div.content {
  padding: 20px;
  form {
    margin: 0; float: none;
    span.submit_and_options {
      display: block;
    }
  }
  p { margin: 0 0 15px; }
  h4 { font-weight: normal; margin: 0 0 5px; }
}

}

/* Recommendations */ recommendations {

div.browse {
  margin: 0; padding: 0; background: none;
  ul { min-height: 0; .border_radius(0); }
}

}

/* Blank States */ div.blank {

padding: 20px; background: @bg * 0.05 + @blue * 0.05 + @white * 0.9; position: relative;
border: 1px solid (@bg * 0.1 + @blue * 0.1 + @white * 0.8); z-index: 1;
h4 { font-size: 18px; margin: 0 0 10px; }
h4:last-child { margin: 0; }
p { font-size: 16px; margin: 0 0 10px; }
p:last-child { margin: 0; }
p.with_list_number.large {
  span { margin-left: 48px; display: block; color: @white; }
}
p.earn span { font-size: 22px; color: @white; line-height: 48px; font-weight: bold; }
a { white-space: nowrap; }
a.hide {
  position: absolute; top: -5px; right: -5px; display: block; height: 16px; width: 16px; padding: 3px; background: #E7E9F6; .border_radius(99);
}

}

div.blank.small {

padding: 10px 20px; 
h4 { font-weight: normal; font-size: 16px; }
p { margin: 0; }

} div.blank.tiny {

padding: 10px 20px;
h4 { font-weight: normal; font-size: 14px; }
p { margin: 0; font-size: 12px; }

} div.blank.rounded {

.border_radius(3); margin: 0 0 20px;

} div.blank.rounded.bottom { .border_radius_top(0); } div.blank.with_border_bottom { border-bottom: 1px solid (@bg * 0.1 + @blue * 0.1 + @white * 0.8); } div.blank.no_border_top { border-top: none; } div.blank.no_border_bottom { border-bottom: none; } div.blank.no_side_borders { border-right: none; border-left: none; } div.panel {

div.blank {
  padding: 10px 20px; overflow: hidden; margin: 0;
  h4 { font-weight: normal; font-size: 14px; }
  p, ul { margin: 0 0 10px; font-size: 12px; }
  p:last-child, ul:last-child { margin: 0; }
}

}

yelow {

#short {
  color: #fea;
}
#long {
  color: #ffeeaa;
}
#rgba {
  color: rgba(255, 238, 170, 0.1);
}

}

blue {

#short {
  color: #00f;
}
#long {
  color: #0000ff;
}
#rgba {
  color: rgba(0, 0, 255, 0.1);
}

}

overflow {

.a { color: #111111 - #444444; } // #000000
.b { color: #eee + #fff; } // #ffffff
.c { color: #aaa * 3; } // #ffffff
.d { color: #00ee00 + #009900; } // #00ff00

}

grey {

color: rgb(200, 200, 200);

}

#808080 {

color: hsl(50, 0%, 50%);

}

#00ff00 {

color: hsl(120, 100%, 50%);

} /******************\

Comment Header  *

******************/

/*

   Comment

/

/*

 Comment Test

 - cloudhead (http://cloudhead.net)

/

//////////////// @var: “content”; ////////////////

/* Colors

 ------
   #EDF8FC (background blue)
   #166C89 (darkest blue)

 Text:
   #333 (standard text) // A comment within a comment!
   #1F9EC9 (standard link)

/

/* @group Variables ——————- */ comments /* boo */ {

/**/ // An empty comment 
color: red; /* A C-style comment */
background-color: orange; // A little comment
font-size: 12px;

/* lost comment */ content: @var;

border: 1px solid black;

// padding & margin //
padding: 0;
margin: 2em;

} //

/* commented out

 #more-comments {
   color: grey;
 }
/

last { color: blue } // .comma-delimited {

background: url(bg.jpg) no-repeat, url(bg.png) repeat-x top left, url(bg);
text-shadow: -1px -1px 1px red, 6px 5px 5px yellow;
-moz-box-shadow: 0pt 0pt 2px rgba(255, 255, 255, 0.4) inset,
  0pt 4px 6px rgba(255, 255, 255, 0.4) inset;

} @font-face {

font-family: Headline;
src: local(Futura-Medium),
     url(fonts.svg#MyGeometricModern) format("svg");

} .other {

-moz-transform: translate(0, 11em) rotate(-90deg);

} p:not() {

color: black;

}

input.class#id:not(1) {

color: white;

}

div#id.class[b=2].class:not(1) {

color: white;

}

ul.comma > li:not(:only-child)::after {

color: white;

}

ol.comma > li:nth-last-child(2)::after {

color: white;

}

li:nth-child(4n+1), li:nth-child(-5n), li:nth-child(-n+2) {

color: white;

}

a {

color: black;

}

a {

color: black;

}

form {

color: black;

}

p::before {

color: black;

} @charset “utf-8”; div { color: black; } div { width: 99%; }

{
min-width: 45em;

}

h1, h2 > a > p, h3 {

color: none;

}

div.class {

color: blue;

}

div#id {

color: green;

}

.class#id {

color: purple;

}

.one.two.three {

color: grey;

}

@media print {

font-size: 3em;

}

@media screen {

font-size: 10px;

}

@font-face {

font-family: 'Garamond Pro';
src: url("/fonts/garamond-pro.ttf");

}

a:hover, a:link {

color: #999;

}

p, p:first-child {

text-transform: none;

}

q:lang(no) {

quotes: none;

}

p + h1 {

font-size: 2.2em;

}

shorthands {

border: 1px solid #000;
font: 12px/16px Arial;
margin: 1px 0;
padding: 0 auto;
background: url("http://www.lesscss.org/spec.html") no-repeat 0 4px;

}

more-shorthands {

margin: 0;
padding: 1px 0 2px 0;
font: normal small/20px 'Trebuchet MS', Verdana, sans-serif;

}

.misc {

-moz-border-radius: 2px;
display: -moz-inline-stack;
width: .1em;
background-color: #009998;
background-image: url(images/image.jpg);
background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue));
margin: ;

}

important {

color: red !important;
width: 100%!important;
height: 20px ! important;

}

functions {

@var: 10;
color: color("evil red"); // #660000
width: increment(15);
height: undefined("self");
border-width: add(2, 3);
variable: increment(@var);

}

built-in {

@r: 32;
escaped: e("-Some::weird(#thing, y)");
lighten: lighten(#ff0000, 50%);
darken: darken(#ff0000, 50%);
saturate: saturate(#29332f, 20%);
desaturate: desaturate(#203c31, 20%);
greyscale: greyscale(#203c31);
format: %("rgb(%d, %d, %d)", @r, 128, 64);
format-string: %("hello %s", "world");
eformat: e(%("rgb(%d, %d, %d)", @r, 128, 64));

}

@var: @a; @a: 100%;

.lazy-eval {

width: @var;

} .mixin (@a: 1px, @b: 50%) {

width: @a * 5;
height: @b - 1%;

}

.mixina (@style, @width, @color: black) {

border: @width @style @color;

}

.mixiny (@a: 0, @b: 0) {

margin: @a;
padding: @b;

}

.hidden() {

color: transparent;

}

.two-args {

color: blue;
.mixin(2px, 100%);
.mixina(dotted, 2px);

}

.one-arg {

.mixin(3px);

}

.no-parens {

.mixin;

}

.no-args {

.mixin();

}

.var-args {

@var: 9;
.mixin(@var, @var * 2);

}

.multi-mix {

.mixin(2px, 30%);
.mixiny(4, 5);

}

.maxa(@arg1: 10, @arg2: f00) {

padding: @arg1 * 2px;
color: @arg2;

}

body {

.maxa(15);

}

@glob: 5; .global-mixin(@a:2) {

width: @glob + @a;

}

.scope-mix {

.global-mixin(3);

}

.nested-ruleset (@width: 200px) {

width: @width;
.column { margin: @width; }

} .content {

.nested-ruleset(600px);

}

//

.same-var-name2(@radius) {

radius: @radius;

} .same-var-name(@radius) {

.same-var-name2(@radius);

} same-var-name {

.same-var-name(5px);

}

//

.var-inside () {

@var: 10px;
width: @var;

} var-inside { .var-inside; } .mix-inner (@var) {

border-width: @var;

}

.mix (@a: 10) {

.inner {
  height: @a * 10;

  .innest {
    width: @a;  
    .mix-inner(@a * 2);
  }  
}

}

.class {

.mix(30);

} .mixin () {

zero: 0;

} .mixin (@a: 1px) {

one: 1;

} .mixin (@a) {

one-req: 1;

} .mixin (@a: 1px, @b: 2px) {

two: 2;

}

.mixin (@a, @b, @c) {

three-req: 3;

}

.mixin (@a: 1px, @b: 2px, @c: 3px) {

three: 3;

}

.zero {

.mixin();

}

.one {

.mixin(1);

}

.two {

.mixin(1, 2);

}

.three {

.mixin(1, 2, 3);

}

//

.mixout ('left') {

left: 1;

}

.mixout ('right') {

right: 1;

}

.left {

.mixout('left');

} .right {

.mixout('right');

}

//

.border (@side, @width) {

color: black;
.border-side(@side, @width);

} .border-side (left, @w) {

border-left: @w;

} .border-side (right, @w) {

border-right: @w;

}

.border-right {

.border(right, 4px);

} .border-left {

.border(left, 4px);

}

//

.border-radius (@r) {

both: @r * 10;

} .border-radius (@r, left) {

left: @r;

} .border-radius (@r, right) {

right: @r;

}

.only-right {

.border-radius(33, right);

} .only-left {

.border-radius(33, left);

} .left-right {

.border-radius(33);

} .mixin { border: 1px solid black; } .mixout { border-color: orange; } .borders { border-style: dashed; }

namespace {

.borders {
  border-style: dotted;
}
.biohazard {
  content: "death";
  .man {
    color: transparent;
  }
}

} theme {

> .mixin {
  background-color: grey;
}

} container {

color: black;
.mixin;
.mixout;
#theme > .mixin;

}

header {

.milk {
  color: white;
  .mixin;
  #theme > .mixin;
}
#cookie {
  .chips {
    #namespace .borders;
    .calories {
      #container;
    }
  }
  .borders;
}

} .secure-zone { namespace .biohazard .man; } .direct {

#namespace > .borders;

} operations {

color: #110000 + #000011 + #001100; // #111111
height: 10px / 2px + 6px - 1px * 2; // 9px
width: 2 * 4 - 5em; // 3em
.spacing {
  height: 10px / 2px+6px-1px*2;
  width: 2  * 4-5em;
}
substraction: 20 - 10 - 5 - 5; // 0
division: 20 / 5 / 4; // 1

}

@x: 4; @y: 12em;

.with-variables {

height: @x + @y; // 16em
width: 12 + @y; // 24em
size: 5cm - @x; // 1cm

}

@z: -2;

.negative {

height: 2px + @z; // 0px
width: 2px - @z; // 4px

}

.shorthands {

padding: -1px 2px 0 -4px; //

}

.colors {

color: #123; // #112233
border-color: #234 + #111111; // #334455
background-color: #222222 - #fff; // #000000
.other {
  color: 2 * #111; // #222222
  border-color: #333333 / 3 + #111; // #222222
}

} .parens {

@var: 1px;
border: (@var * 2) solid black;
margin: (@var * 1) (@var + 2) (4 * 4) 3;
width: (6 * 6);
padding: 2px (6px * 6px);

}

.more-parens {

@var: (2 * 2);
padding: (2 * @var) 4 4 (@var * 1px);
width: (@var * @var) * 6;
height: (7 * 7) + (8 * 8);
margin: 4 * (5 + 5) / 2 - (@var * 2);
//margin: (6 * 6)px;

}

.nested-parens {

width: 2 * (4 * (2 + (1 + 6))) - 1;
height: ((2+3)*(2+3) / (9-4)) + 1;

}

.mixed-units {

margin: 2px 4em 1 5pc;
padding: (2px + 4px) 1em 2px 2;

} first > .one {

> #second .two > #deux {
  width: 50%;
  #third {
    &:focus {
      color: black;
      #fifth {
        > #sixth {
          .seventh #eighth {
            + #ninth {
              color: purple;
            }
          }
        }
      }
    }
    height: 100%;
  }
  #fourth, #five, #six {
    color: #110000;
    .seven, .eight > #nine {
      border: 1px solid black;
    }
    #ten {
      color: red;
    }
  }
}
font-size: 2em;

} @x: blue; @z: transparent; @mix: none;

.mixin {

@mix: #989;

}

.tiny-scope {

color: @mix; // #989
.mixin;

}

.scope1 {

@y: orange;
@z: black;
color: @x; // blue
border-color: @z; // black
.hidden {
  @x: #131313;
}
.scope2 {
  @y: red;
  color: @x; // blue
  .scope3 {
    @local: white;
    color: @y; // red
    border-color: @z; // black
    background-color: @local; // white
  }
}

}h1, h2, h3 {

a, p {
  &:hover {
    color: red;
  }
}

}

all { color: blue; } the { color: blue; } same { color: blue; }

ul, li, div, q, blockquote, textarea {

margin: 0;

}

td {

margin: 0;
padding: 0;

}

td, input {

line-height: 1em;

} strings {

background-image: url("http://son-of-a-banana.com");
quotes: "~" "~";
content: "#*%:&^,)!.(~*})";
empty: "";
brackets: "{" "}";

} comments {

content: "/* hello */ // not-so-secret";

} single-quote {

quotes: "'" "'";
content: '""#!&""';
empty: '';

} @a: 2; @x: @a * @a; @y: @x + 1; @z: @x * 2 + @y;

.variables {

width: @z + 1cm; // 14cm

}

@b: @a * 10; @c: #888;

@fonts: “Trebuchet MS”, Verdana, sans-serif; @f: @fonts;

@quotes: “~” “~”; @q: @quotes;

.variables {

height: @b + @x + 0px; // 24px
color: @c;
font-family: @f;
quotes: @q;

}

.redefinition {

@var: 4;
@var: 2;
@var: 3;
three: @var;

}

.values {

@a: 'Trebuchet';
font-family: @a, @a, @a;

}

.whitespace

{ color: white; }

.whitespace {

color: white;

}

.whitespace

{ color: white; }

.whitespace{color:white;}

.whitespace { color : white ; }

.white, .space, .mania { color: white; }

.no-semi-column { color: white } .no-semi-column {

color: white;
white-space: pre

} .no-semi-column {border: 2px solid white} .newlines {

background: the,
            great,
            wall;
border: 2px
        solid
        black;

} .empty {

} yelow {

#short {
  color: #fea;
}
#long {
  color: #ffeeaa;
}
#rgba {
  color: rgba(255, 238, 170, 0.1);
}

}

blue {

#short {
  color: #00f;
}
#long {
  color: #0000ff;
}
#rgba {
  color: rgba(0, 0, 255, 0.1);
}

}

overflow {

.a { color: #111111 - #444444; } // #000000
.b { color: #eee + #fff; } // #ffffff
.c { color: #aaa * 3; } // #ffffff
.d { color: #00ee00 + #009900; } // #00ff00

}

grey {

color: rgb(200, 200, 200);

}

#808080 {

color: hsl(50, 0%, 50%);

}

#00ff00 {

color: hsl(120, 100%, 50%);

} /******************\

Comment Header  *

******************/

/*

   Comment

/

/*

 Comment Test

 - cloudhead (http://cloudhead.net)

/

//////////////// @var: “content”; ////////////////

/* Colors

 ------
   #EDF8FC (background blue)
   #166C89 (darkest blue)

 Text:
   #333 (standard text) // A comment within a comment!
   #1F9EC9 (standard link)

/

/* @group Variables ——————- */ comments /* boo */ {

/**/ // An empty comment 
color: red; /* A C-style comment */
background-color: orange; // A little comment
font-size: 12px;

/* lost comment */ content: @var;

border: 1px solid black;

// padding & margin //
padding: 0;
margin: 2em;

} //

/* commented out

 #more-comments {
   color: grey;
 }
/

last { color: blue } // .comma-delimited {

background: url(bg.jpg) no-repeat, url(bg.png) repeat-x top left, url(bg);
text-shadow: -1px -1px 1px red, 6px 5px 5px yellow;
-moz-box-shadow: 0pt 0pt 2px rgba(255, 255, 255, 0.4) inset,
  0pt 4px 6px rgba(255, 255, 255, 0.4) inset;

} @font-face {

font-family: Headline;
src: local(Futura-Medium),
     url(fonts.svg#MyGeometricModern) format("svg");

} .other {

-moz-transform: translate(0, 11em) rotate(-90deg);

} p:not() {

color: black;

}

input.class#id:not(1) {

color: white;

}

div#id.class[b=2].class:not(1) {

color: white;

}

ul.comma > li:not(:only-child)::after {

color: white;

}

ol.comma > li:nth-last-child(2)::after {

color: white;

}

li:nth-child(4n+1), li:nth-child(-5n), li:nth-child(-n+2) {

color: white;

}

a {

color: black;

}

a {

color: black;

}

form {

color: black;

}

p::before {

color: black;

} @charset “utf-8”; div { color: black; } div { width: 99%; }

{
min-width: 45em;

}

h1, h2 > a > p, h3 {

color: none;

}

div.class {

color: blue;

}

div#id {

color: green;

}

.class#id {

color: purple;

}

.one.two.three {

color: grey;

}

@media print {

font-size: 3em;

}

@media screen {

font-size: 10px;

}

@font-face {

font-family: 'Garamond Pro';
src: url("/fonts/garamond-pro.ttf");

}

a:hover, a:link {

color: #999;

}

p, p:first-child {

text-transform: none;

}

q:lang(no) {

quotes: none;

}

p + h1 {

font-size: 2.2em;

}

shorthands {

border: 1px solid #000;
font: 12px/16px Arial;
margin: 1px 0;
padding: 0 auto;
background: url("http://www.lesscss.org/spec.html") no-repeat 0 4px;

}

more-shorthands {

margin: 0;
padding: 1px 0 2px 0;
font: normal small/20px 'Trebuchet MS', Verdana, sans-serif;

}

.misc {

-moz-border-radius: 2px;
display: -moz-inline-stack;
width: .1em;
background-color: #009998;
background-image: url(images/image.jpg);
background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue));
margin: ;

}

important {

color: red !important;
width: 100%!important;
height: 20px ! important;

}

functions {

@var: 10;
color: color("evil red"); // #660000
width: increment(15);
height: undefined("self");
border-width: add(2, 3);
variable: increment(@var);

}

built-in {

@r: 32;
escaped: e("-Some::weird(#thing, y)");
lighten: lighten(#ff0000, 50%);
darken: darken(#ff0000, 50%);
saturate: saturate(#29332f, 20%);
desaturate: desaturate(#203c31, 20%);
greyscale: greyscale(#203c31);
format: %("rgb(%d, %d, %d)", @r, 128, 64);
format-string: %("hello %s", "world");
eformat: e(%("rgb(%d, %d, %d)", @r, 128, 64));

}

@var: @a; @a: 100%;

.lazy-eval {

width: @var;

} .mixin (@a: 1px, @b: 50%) {

width: @a * 5;
height: @b - 1%;

}

.mixina (@style, @width, @color: black) {

border: @width @style @color;

}

.mixiny (@a: 0, @b: 0) {

margin: @a;
padding: @b;

}

.hidden() {

color: transparent;

}

.two-args {

color: blue;
.mixin(2px, 100%);
.mixina(dotted, 2px);

}

.one-arg {

.mixin(3px);

}

.no-parens {

.mixin;

}

.no-args {

.mixin();

}

.var-args {

@var: 9;
.mixin(@var, @var * 2);

}

.multi-mix {

.mixin(2px, 30%);
.mixiny(4, 5);

}

.maxa(@arg1: 10, @arg2: f00) {

padding: @arg1 * 2px;
color: @arg2;

}

body {

.maxa(15);

}

@glob: 5; .global-mixin(@a:2) {

width: @glob + @a;

}

.scope-mix {

.global-mixin(3);

}

.nested-ruleset (@width: 200px) {

width: @width;
.column { margin: @width; }

} .content {

.nested-ruleset(600px);

}

//

.same-var-name2(@radius) {

radius: @radius;

} .same-var-name(@radius) {

.same-var-name2(@radius);

} same-var-name {

.same-var-name(5px);

}

//

.var-inside () {

@var: 10px;
width: @var;

} var-inside { .var-inside; } .mix-inner (@var) {

border-width: @var;

}

.mix (@a: 10) {

.inner {
  height: @a * 10;

  .innest {
    width: @a;  
    .mix-inner(@a * 2);
  }  
}

}

.class {

.mix(30);

} .mixin () {

zero: 0;

} .mixin (@a: 1px) {

one: 1;

} .mixin (@a) {

one-req: 1;

} .mixin (@a: 1px, @b: 2px) {

two: 2;

}

.mixin (@a, @b, @c) {

three-req: 3;

}

.mixin (@a: 1px, @b: 2px, @c: 3px) {

three: 3;

}

.zero {

.mixin();

}

.one {

.mixin(1);

}

.two {

.mixin(1, 2);

}

.three {

.mixin(1, 2, 3);

}

//

.mixout ('left') {

left: 1;

}

.mixout ('right') {

right: 1;

}

.left {

.mixout('left');

} .right {

.mixout('right');

}

//

.border (@side, @width) {

color: black;
.border-side(@side, @width);

} .border-side (left, @w) {

border-left: @w;

} .border-side (right, @w) {

border-right: @w;

}

.border-right {

.border(right, 4px);

} .border-left {

.border(left, 4px);

}

//

.border-radius (@r) {

both: @r * 10;

} .border-radius (@r, left) {

left: @r;

} .border-radius (@r, right) {

right: @r;

}

.only-right {

.border-radius(33, right);

} .only-left {

.border-radius(33, left);

} .left-right {

.border-radius(33);

} .mixin { border: 1px solid black; } .mixout { border-color: orange; } .borders { border-style: dashed; }

namespace {

.borders {
  border-style: dotted;
}
.biohazard {
  content: "death";
  .man {
    color: transparent;
  }
}

} theme {

> .mixin {
  background-color: grey;
}

} container {

color: black;
.mixin;
.mixout;
#theme > .mixin;

}

header {

.milk {
  color: white;
  .mixin;
  #theme > .mixin;
}
#cookie {
  .chips {
    #namespace .borders;
    .calories {
      #container;
    }
  }
  .borders;
}

} .secure-zone { namespace .biohazard .man; } .direct {

#namespace > .borders;

} operations {

color: #110000 + #000011 + #001100; // #111111
height: 10px / 2px + 6px - 1px * 2; // 9px
width: 2 * 4 - 5em; // 3em
.spacing {
  height: 10px / 2px+6px-1px*2;
  width: 2  * 4-5em;
}
substraction: 20 - 10 - 5 - 5; // 0
division: 20 / 5 / 4; // 1

}

@x: 4; @y: 12em;

.with-variables {

height: @x + @y; // 16em
width: 12 + @y; // 24em
size: 5cm - @x; // 1cm

}

@z: -2;

.negative {

height: 2px + @z; // 0px
width: 2px - @z; // 4px

}

.shorthands {

padding: -1px 2px 0 -4px; //

}

.colors {

color: #123; // #112233
border-color: #234 + #111111; // #334455
background-color: #222222 - #fff; // #000000
.other {
  color: 2 * #111; // #222222
  border-color: #333333 / 3 + #111; // #222222
}

} .parens {

@var: 1px;
border: (@var * 2) solid black;
margin: (@var * 1) (@var + 2) (4 * 4) 3;
width: (6 * 6);
padding: 2px (6px * 6px);

}

.more-parens {

@var: (2 * 2);
padding: (2 * @var) 4 4 (@var * 1px);
width: (@var * @var) * 6;
height: (7 * 7) + (8 * 8);
margin: 4 * (5 + 5) / 2 - (@var * 2);
//margin: (6 * 6)px;

}

.nested-parens {

width: 2 * (4 * (2 + (1 + 6))) - 1;
height: ((2+3)*(2+3) / (9-4)) + 1;

}

.mixed-units {

margin: 2px 4em 1 5pc;
padding: (2px + 4px) 1em 2px 2;

} first > .one {

> #second .two > #deux {
  width: 50%;
  #third {
    &:focus {
      color: black;
      #fifth {
        > #sixth {
          .seventh #eighth {
            + #ninth {
              color: purple;
            }
          }
        }
      }
    }
    height: 100%;
  }
  #fourth, #five, #six {
    color: #110000;
    .seven, .eight > #nine {
      border: 1px solid black;
    }
    #ten {
      color: red;
    }
  }
}
font-size: 2em;

} @x: blue; @z: transparent; @mix: none;

.mixin {

@mix: #989;

}

.tiny-scope {

color: @mix; // #989
.mixin;

}

.scope1 {

@y: orange;
@z: black;
color: @x; // blue
border-color: @z; // black
.hidden {
  @x: #131313;
}
.scope2 {
  @y: red;
  color: @x; // blue
  .scope3 {
    @local: white;
    color: @y; // red
    border-color: @z; // black
    background-color: @local; // white
  }
}

}h1, h2, h3 {

a, p {
  &:hover {
    color: red;
  }
}

}

all { color: blue; } the { color: blue; } same { color: blue; }

ul, li, div, q, blockquote, textarea {

margin: 0;

}

td {

margin: 0;
padding: 0;

}

td, input {

line-height: 1em;

} strings {

background-image: url("http://son-of-a-banana.com");
quotes: "~" "~";
content: "#*%:&^,)!.(~*})";
empty: "";
brackets: "{" "}";

} comments {

content: "/* hello */ // not-so-secret";

} single-quote {

quotes: "'" "'";
content: '""#!&""';
empty: '';

} @a: 2; @x: @a * @a; @y: @x + 1; @z: @x * 2 + @y;

.variables {

width: @z + 1cm; // 14cm

}

@b: @a * 10; @c: #888;

@fonts: “Trebuchet MS”, Verdana, sans-serif; @f: @fonts;

@quotes: “~” “~”; @q: @quotes;

.variables {

height: @b + @x + 0px; // 24px
color: @c;
font-family: @f;
quotes: @q;

}

.redefinition {

@var: 4;
@var: 2;
@var: 3;
three: @var;

}

.values {

@a: 'Trebuchet';
font-family: @a, @a, @a;

}

.whitespace

{ color: white; }

.whitespace {

color: white;

}

.whitespace

{ color: white; }

.whitespace{color:white;}

.whitespace { color : white ; }

.white, .space, .mania { color: white; }

.no-semi-column { color: white } .no-semi-column {

color: white;
white-space: pre

} .no-semi-column {border: 2px solid white} .newlines {

background: the,
            great,
            wall;
border: 2px
        solid
        black;

} .empty {

} yelow {

#short {
  color: #fea;
}
#long {
  color: #ffeeaa;
}
#rgba {
  color: rgba(255, 238, 170, 0.1);
}

}

blue {

#short {
  color: #00f;
}
#long {
  color: #0000ff;
}
#rgba {
  color: rgba(0, 0, 255, 0.1);
}

}

overflow {

.a { color: #111111 - #444444; } // #000000
.b { color: #eee + #fff; } // #ffffff
.c { color: #aaa * 3; } // #ffffff
.d { color: #00ee00 + #009900; } // #00ff00

}

grey {

color: rgb(200, 200, 200);

}

#808080 {

color: hsl(50, 0%, 50%);

}

#00ff00 {

color: hsl(120, 100%, 50%);

} /******************\

Comment Header  *

******************/

/*

   Comment

/

/*

 Comment Test

 - cloudhead (http://cloudhead.net)

/

//////////////// @var: “content”; ////////////////

/* Colors

 ------
   #EDF8FC (background blue)
   #166C89 (darkest blue)

 Text:
   #333 (standard text) // A comment within a comment!
   #1F9EC9 (standard link)

/

/* @group Variables ——————- */ comments /* boo */ {

/**/ // An empty comment 
color: red; /* A C-style comment */
background-color: orange; // A little comment
font-size: 12px;

/* lost comment */ content: @var;

border: 1px solid black;

// padding & margin //
padding: 0;
margin: 2em;

} //

/* commented out

 #more-comments {
   color: grey;
 }
/

last { color: blue } // .comma-delimited {

background: url(bg.jpg) no-repeat, url(bg.png) repeat-x top left, url(bg);
text-shadow: -1px -1px 1px red, 6px 5px 5px yellow;
-moz-box-shadow: 0pt 0pt 2px rgba(255, 255, 255, 0.4) inset,
  0pt 4px 6px rgba(255, 255, 255, 0.4) inset;

} @font-face {

font-family: Headline;
src: local(Futura-Medium),
     url(fonts.svg#MyGeometricModern) format("svg");

} .other {

-moz-transform: translate(0, 11em) rotate(-90deg);

} p:not() {

color: black;

}

input.class#id:not(1) {

color: white;

}

div#id.class[b=2].class:not(1) {

color: white;

}

ul.comma > li:not(:only-child)::after {

color: white;

}

ol.comma > li:nth-last-child(2)::after {

color: white;

}

li:nth-child(4n+1), li:nth-child(-5n), li:nth-child(-n+2) {

color: white;

}

a {

color: black;

}

a {

color: black;

}

form {

color: black;

}

p::before {

color: black;

} @charset “utf-8”; div { color: black; } div { width: 99%; }

{
min-width: 45em;

}

h1, h2 > a > p, h3 {

color: none;

}

div.class {

color: blue;

}

div#id {

color: green;

}

.class#id {

color: purple;

}

.one.two.three {

color: grey;

}

@media print {

font-size: 3em;

}

@media screen {

font-size: 10px;

}

@font-face {

font-family: 'Garamond Pro';
src: url("/fonts/garamond-pro.ttf");

}

a:hover, a:link {

color: #999;

}

p, p:first-child {

text-transform: none;

}

q:lang(no) {

quotes: none;

}

p + h1 {

font-size: 2.2em;

}

shorthands {

border: 1px solid #000;
font: 12px/16px Arial;
margin: 1px 0;
padding: 0 auto;
background: url("http://www.lesscss.org/spec.html") no-repeat 0 4px;

}

more-shorthands {

margin: 0;
padding: 1px 0 2px 0;
font: normal small/20px 'Trebuchet MS', Verdana, sans-serif;

}

.misc {

-moz-border-radius: 2px;
display: -moz-inline-stack;
width: .1em;
background-color: #009998;
background-image: url(images/image.jpg);
background: -webkit-gradient(linear, left top, left bottom, from(red), to(blue));
margin: ;

}

important {

color: red !important;
width: 100%!important;
height: 20px ! important;

}

functions {

@var: 10;
color: color("evil red"); // #660000
width: increment(15);
height: undefined("self");
border-width: add(2, 3);
variable: increment(@var);

}

built-in {

@r: 32;
escaped: e("-Some::weird(#thing, y)");
lighten: lighten(#ff0000, 50%);
darken: darken(#ff0000, 50%);
saturate: saturate(#29332f, 20%);
desaturate: desaturate(#203c31, 20%);
greyscale: greyscale(#203c31);
format: %("rgb(%d, %d, %d)", @r, 128, 64);
format-string: %("hello %s", "world");
eformat: e(%("rgb(%d, %d, %d)", @r, 128, 64));

}

@var: @a; @a: 100%;

.lazy-eval {

width: @var;

} .mixin (@a: 1px, @b: 50%) {

width: @a * 5;
height: @b - 1%;

}

.mixina (@style, @width, @color: black) {

border: @width @style @color;

}

.mixiny (@a: 0, @b: 0) {

margin: @a;
padding: @b;

}

.hidden() {

color: transparent;

}

.two-args {

color: blue;
.mixin(2px, 100%);
.mixina(dotted, 2px);

}

.one-arg {

.mixin(3px);

}

.no-parens {

.mixin;

}

.no-args {

.mixin();

}

.var-args {

@var: 9;
.mixin(@var, @var * 2);

}

.multi-mix {

.mixin(2px, 30%);
.mixiny(4, 5);

}

.maxa(@arg1: 10, @arg2: f00) {

padding: @arg1 * 2px;
color: @arg2;

}

body {

.maxa(15);

}

@glob: 5; .global-mixin(@a:2) {

width: @glob + @a;

}

.scope-mix {

.global-mixin(3);

}

.nested-ruleset (@width: 200px) {

width: @width;
.column { margin: @width; }

} .content {

.nested-ruleset(600px);

}

//

.same-var-name2(@radius) {

radius: @radius;

} .same-var-name(@radius) {

.same-var-name2(@radius);

} same-var-name {

.same-var-name(5px);

}

//

.var-inside () {

@var: 10px;
width: @var;

} var-inside { .var-inside; } .mix-inner (@var) {

border-width: @var;

}

.mix (@a: 10) {

.inner {
  height: @a * 10;

  .innest {
    width: @a;  
    .mix-inner(@a * 2);
  }  
}

}

.class {

.mix(30);

} .mixin () {

zero: 0;

} .mixin (@a: 1px) {

one: 1;

} .mixin (@a) {

one-req: 1;

} .mixin (@a: 1px, @b: 2px) {

two: 2;

}

.mixin (@a, @b, @c) {

three-req: 3;

}

.mixin (@a: 1px, @b: 2px, @c: 3px) {

three: 3;

}

.zero {

.mixin();

}

.one {

.mixin(1);

}

.two {

.mixin(1, 2);

}

.three {

.mixin(1, 2, 3);

}

//

.mixout ('left') {

left: 1;

}