lesslateral 1.2.21

data/spec/less/accessors.less

@@ -0,0 +1,20 @@
+.magic-box {
+  @trim: orange;
+  content: "gold";
+  width: 60cm;
+  height: 40cm;
+  #lock {
+    color: silver;
+  }
+}
+
+#accessors {
+  content: .magic-box['content']; // "gold"
+  width: .magic-box['width']; // 60cm
+}
+
+.unlock {
+  .magic-box;
+  color: #lock['color']; // silver
+  border-color: .magic-box[@trim]; // orange
+}

data/spec/less/big.less

@@ -0,0 +1,1264 @@
+
+@bg: #193a59;
+@bg_sat: #1C202B;
+@bg_alt: #282C38;
+@fg: @white;
+
+@accent_colour: #64AE4B;
+@button_colour_off: #98000E;
+@button_colour_on: #A61A26;
+
+// Monochrome Colours
+@white: #FFFFFF;
+@light_grey: #C0C0C0;
+@grey: #808080;
+@dark_grey: #404040;
+@black: #000000;
+
+// Basic Colours
+@yellow: #FFFF00;
+@red: #FF0000;
+@green: #00FF00;
+@blue: #0000FF;
+
+// Other Colours
+@colour_negative: @bg * 0.2 + @red * 0.7 + @black * 0.1;
+@colour_positive: @bg * 0.2 + @green * 0.7 + @black * 0.1;
+
+.box-shadow (@h: 0, @v: 0, @blur: 0, @color: none) {
+  box-shadow:         @h @v @blur @color;
+  -moz-box-shadow:    @h @v @blur @color;
+  -webkit-box-shadow: @h @v @blur @color;
+}
+.text-shadow (@ts_h: 0, @ts_v: 0, @ts_blur: 0, @ts_color: none) {
+  text-shadow: @ts_h @ts_v @ts_blur @ts_color;
+}
+.border-radius (@r: 0) {
+  border-radius:         @r;
+	-moz-border-radius:    @r;
+	-webkit-border-radius: @r;
+}
+.border-radius-top-left (@r: 0) {
+  border-top-left-radius:         @r;
+	-moz-border-radius-topleft:    @r;
+	-webkit-border-top-left-radius: @r;
+}
+.border-radius-top-right (@r: 0) {
+  border-top-right-radius:         @r;
+	-moz-border-radius-topright:    @r;
+	-webkit-border-top-right-radius: @r;
+}
+.border-radius-bottom-right (@r: 0) {
+  border-bottom-right-radius:         @r;
+	-moz-border-radius-bottomright:    @r;
+	-webkit-border-bottom-right-radius: @r;
+}
+.border-radius-bottom-left (@r: 0) {
+  border-bottom-left-radius:         @r;
+	-moz-border-radius-bottomleft:    @r;
+	-webkit-border-bottom-left-radius: @r;
+}
+/* Application > Home */
+#pages_controller.beta {
+  background: @bg url('/images/body_bg_4.png') repeat-x left top;
+  #feedback { top: 53px; }
+  #top {
+    position: relative;
+    z-index: 10;
+    #masthead {
+      background: none;
+      div.page_width {
+        h1 {
+          position: absolute; margin-top: 52px; margin-left: 9px;
+          a {
+            height: 152px; width: 370px; background: url('/images/logo_home_2.png');
+          }
+          span.beta_marker {
+            position: absolute; top: 55px; left: 366px;
+          }
+        }
+      }
+      #utilities {
+        a {
+          background: url('/images/transparent_backgrounds/black_50.png');
+          :hover {
+            background: url('/images/transparent_backgrounds/black_25.png');
+          }
+        }
+      }
+    }
+    #pitch {
+      margin-top: 209px;
+      div.page_width {
+        position: relative;
+        #pitch_left {
+          float: left;
+          width: 380px;
+          padding-right: 60px;
+          img.main_image { width: 100%; }
+        }
+        #pitch_right {
+          margin: -10px 0 0 0;
+          width: 520px;
+          float: right; position: relative;
+          div.container {
+
+          }
+        }
+      }
+      h2 { font-size: 36px; font-weight: normal; margin: 0; line-height: 42px; color: @white; .text-shadow(2px, 2px, 0, @black); margin: 0 0 20px; }
+      h3 { font-size: 32px; font-weight: bold; color: @white; .text-shadow(2px, 2px, 0, @black); margin: 58px -40px 0 0; text-align: right; }
+      h4 { font-size: 22px; font-weight: normal; color: @white; margin: 0 20px 0 0;.text-shadow(2px, 2px, 0, @black); }
+      #get_invited {
+        margin-top: 30px;
+        p.flash.error {
+          background: @red * 0.66 + @black * 0.33; padding: 5px; line-height: 1; margin: 0 0 10px;
+          .border-radius(3px); color: @white;
+        }
+        form {
+          label { text-transform: none; font-size: 14px; font-weight: normal; color: @grey; line-height: normal; margin: 0 0 5px; }
+          #email { width: 320px; margin-right: 2px; font-size: 16px; height: 26px; }
+          a.button { text-transform: uppercase; font-size: 12px; font-weight: bold; line-height: 26px; font-size: 16px; height: 29px; }
+        }
+        a.button.signup {
+          display: block; margin: 10px 0 0;
+          strong { text-transform: uppercase; font-size: 12px; font-weight: bold; line-height: 25px; }
+        }
+      }
+    }
+  }
+  #content {
+    background: transparent; border-bottom-color: @bg * 0.66 + @black * 0.33; min-height: 0;
+    border-bottom: none;
+  }
+  #footer {
+    border-top: none; 
+    div.page_width { padding-top: 40px; }
+  }
+}
+
+/* Quick Help */
+#show_quick_help {
+  position: absolute; top: 53px; right: 5px; z-index: 50; display: block;
+}
+#show_quick_help:hover { padding-right: 3px; }
+#quick_help {
+  padding: 0; margin: 0 0 20px; .border-radius(3px);
+  > ul {
+    margin: 0; overflow: hidden; background: transparent url('/images/transparent_backgrounds/white_05.png'); padding: 20px;
+    li {
+      display: block; float: left; width: 292px; margin: 0 20px 0 0; padding: 0; list-style: none;
+      h3 { font-size: 18px; margin: 0 0 0 38px; }
+      p { font-size: 14px; margin: 0 0 0 38px; }
+      ul.social_networks {
+        margin: 0; padding: 0;
+        li { display: inline; margin: 0 5px 0 0; padding: 0; float: none; }
+      }
+      a.button { font-size: 24px; line-height: 1; height: auto; padding: 10px 20px 15px; display: block; text-align: center; }
+    }
+    li:last-child { margin: 0; }
+  }
+}
+
+/* Feedback */
+#feedback { position: absolute; top: 174px; right: 5px; z-index: 50; display: block; }
+#feedback:hover { padding-right: 3px; }
+
+/* Browse */
+div.browse {
+  margin: 0 0 20px;
+  div.filters {
+    padding: 10px 10px 9px; text-align: left; background: @light_grey * 0.75 + @white * 0.25;
+    border-bottom: 1px solid @light_grey; overflow: hidden; line-height: 1;
+    .border-radius-top-left(3px); .border-radius-top-right(3px); color: @light_grey;
+    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: @white; color: @grey; text-decoration: none; position: relative; z-index: 3;
+      }
+      a:first-child { .border-radius-top-left(3px); .border-radius-bottom-left(3px); }
+      a:last-child { .border-radius-top-right(3px); .border-radius-bottom-right(3px); }
+      a.active { background: @bg; color: @white; z-index: 4; }
+      a:hover { color: @black; }
+      a.active:hover { color: @white; }
+    }
+    span.switch_to { float: left; }
+    span.show { float: right ;}
+  }
+> ul {
+    margin: 0; background: @white; padding: 10px 0 0 10px;
+    .border-radius(3px);
+    > li {
+      .box-shadow(0, 0, 3px, @light_grey);
+      position: relative;
+      a.remove {
+        position: absolute; height: 16px; width: 16px; padding: 3px; background: @white; .border-radius(99px); display: none; 
+      }
+      a.thumbnail {
+        display: block; overflow: hidden;
+        img { height: 100%; width: 100%; }
+      }
+    }
+    > li:hover {
+      a.remove {
+        display: block;
+      }
+    }
+  }  
+> 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-left(3px); .border-radius-bottom-right(3px);
+    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(3px); 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; }
+    }
+  }
+}
+
+/* Browse Grid */
+div.browse.grid {
+> ul {
+    margin: 0; min-height: 240px;
+    padding: 10px 0 0 10px;
+    .border-radius(3px);
+    li {
+      display: block; float: left; list-style: none; margin: 0 10px 10px 0;
+      div.top {
+        .border-radius-top-left(3px); .border-radius-top-right(3px); position: relative;
+        .marker {
+          position: absolute; padding: 2px; .border-radius(2px);
+          background: url('/images/transparent_backgrounds/white_75.png'); height: 12px; width: 12px;
+        }
+        img.marker.media_type { left: 8px; }
+        a.marker.remove {
+          display: inline-block; text-decoration: none; top: 8px; left: 8px;
+          font-size: 10px; filter: alpha(opacity=75); opacity: 0.75; -moz-opacity: 0.75;
+          b { font-weight: normal; padding: 0 2px; line-height: 1; display: none; color: @red * 0.75; }
+          img { vertical-align: middle; }
+        }
+        a.remove { top: -3px; right: -3px; }
+      }
+      div.footer {
+        text-align: center;
+        .border-radius-bottom-left(3px); .border-radius-bottom-right(3px);
+        padding: 0 5px 5px; display: block;
+        line-height: 13px;
+        a { display: block; text-decoration: none; font-weight: bold; font-size: 12px; }
+      }
+      div.mouseover_box { width: 200px; }
+    }
+    li:hover {
+      div.top {
+        a.marker.remove, a.marker.media_type {
+          filter: alpha(opacity=100); opacity: 1; -moz-opacity: 1;
+          b { display: inline-block; }
+        }
+      }
+    }
+    li.with_mouseover_box:hover {
+      div.top {
+        background: @accent_colour;
+        a.remove { background: @accent_colour; }
+      }
+      div.footer {
+        background: @accent_colour;
+        a { color: @white; }
+      }
+    }
+  }
+}
+div.browse.ads.grid {
+> ul {
+    li {
+      width: 142px;
+      div.top {
+        img.marker.media_type { top: 85px; }
+        a.thumbnail { width: 132px; height: 99px; padding: 5px; }
+      }
+    }
+  }
+}
+div.browse.brands.grid {
+> ul {
+    li {
+      width: 140px;
+      div.top {
+        .border-radius(3px); padding: 5px;
+        a.thumbnail {
+          width: 120px; height: 120px; padding: 5px; background: @white;
+        }
+      }
+    }
+  }
+}
+div.browse.grid.with_categories { margin: 0 0 0 160px; }
+div.browse.grid.with_options {
+  > ul { .border-radius-top-left(0px); .border-radius-top-right(0px); }
+}
+div.browse.grid.with_footer {
+  > ul { .border-radius-bottom-left(0px); .border-radius-bottom-right(0px); }
+}
+div.browse.grid.fixed {
+  > ul {
+    li {
+      width: 142px;
+      div.top {
+        img.marker.media_type { top: 85px; left: 8px; }
+        a.thumbnail { width: 132px; height: 99px; padding: 5px; }
+      }
+      div.footer {
+        height: 13px;
+        a.title { font-size: 11px; font-weight: normal; }
+      }
+    }
+  }
+}
+
+/* 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(3px); position: relative; line-height: normal;
+      .marker {
+        position: absolute; padding: 2px; .border-radius(2px);
+        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:hover {
+      a.remove {
+        img { filter: alpha(opacity=100); opacity: 1; -moz-opacity: 1; }
+      }
+    }
+    li.ad {
+      a.thumbnail { height: 51px; }
+      span.title_brand {
+        small.brand_name {
+          display: block;
+          a { font-weight: bold; }
+        }
+      }
+    }
+    li.brand {
+      a.thumbnail { height: 68px; }
+    }
+  }
+}
+div.browse.list.with_options {
+  > ul { .border-radius-top-left(0px); .border-radius-top-right(0px); }
+}
+div.browse.list.with_footer {
+  > ul { .border-radius-bottom-left(0px); .border-radius-bottom-right(0px); }
+}
+div.browse.list.cols_2 {
+  > ul {
+    > li { width: 285px; float: left; }
+  }
+}
+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;
+  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; text-decoration: none; .border-radius-top-left(3px); .border-radius-bottom-left(3px); }
+      a:hover { color: @black; background: @light_grey * 0.15 + @white * 0.85; }
+    }
+    .all a { font-weight: bold; }
+    .current a { background: @white; color: @black; }
+  }
+}
+
+/* Ads > Show */
+#ad {
+  div.header {
+    overflow: hidden;
+    h3 { font-size: 16px; }
+    small {
+      a { font-weight: bold; }
+      a.subscribe_to_brand {
+        color: @white; font-size: 9px; text-transform: uppercase;
+        background: @accent_colour; text-decoration: none; .border-radius(3px); padding: 1px 4px;
+        .text-shadow(1px, 1px, 0, @accent_colour * 0.87 + @black * 0.25); letter-spacing: 0.5px;
+      }
+      span.networks img { position: relative; top: 3px; }
+    }
+  }
+  div.content {
+    padding: 0; position: relative;
+    a.toggle_size {
+      display: block; .border-radius(3px); 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;
+      filter: alpha(opacity=15); opacity: 0.15; -moz-opacity: 0.15;
+    }
+    a.toggle_size.enlarge { background-image: url('/images/icons/arrow-out.png'); }
+    a.toggle_size.reduce { background-image: url('/images/icons/arrow-in.png'); }
+    a.toggle_size:hover { background-color: @accent_colour; color: @white; }
+    img.creative { max-width: 580px; padding: 20px; margin: 0 auto; display: block; }
+  }
+}
+body.reduced_video {
+  #ad {
+    a.toggle_size.reduce { display: none; }
+  }
+  #ad:hover {
+    a.toggle_size.enlarge { filter: alpha(opacity=66); opacity: 0.66; -moz-opacity: 0.66; }
+    a.toggle_size.enlarge:hover { filter: alpha(opacity=100); opacity: 1.0; -moz-opacity: 1.0; }
+  }
+}
+body.enlarged_video {
+  #ad {
+    width: 960px;
+    a.toggle_size.enlarge { display: none; }
+  }
+  #ad:hover {
+    a.toggle_size.reduce { filter: alpha(opacity=66); opacity: 0.66; -moz-opacity: 0.66; }
+    a.toggle_size.reduce:hover { filter: alpha(opacity=100); opacity: 1.0; -moz-opacity: 1.0; }
+  }
+  #sidebar { margin: 827px 0 0 0; }
+}
+#sidebar {
+  div.voted {
+    margin: 0 0 20px; color: @white; font-weight: bold; font-size: 12px; text-transform: uppercase; line-height: 34px; height: 34px;
+    .border-radius(3px); text-align: center;
+    img { position: relative; top: 4px; }
+  }
+  #voted_up { background: @colour_positive * 0.66 + @bg * 0.15; }
+  #voted_down { background: @colour_negative * 0.66 + @bg * 0.15; }
+  #vote {
+    margin: 0 0 20px; overflow: hidden;
+    a {
+      color: @white; font-weight: bold; overflow: hidden; display: block; height: 30px; line-height: 30px;
+      width: 50%; text-decoration: none; text-align: center; font-size: 10px; padding: 0; text-transform: uppercase;
+      img { position: relative; top: 4px; }
+    }
+    a.up {
+      float: left; background: @colour_positive * 0.66 + @bg * 0.15; .border-radius-top-left(3px); .border-radius-bottom-left(3px);
+      :hover { background: @colour_positive * 0.85 + @bg * 0.15; }
+    } 
+    a.down {
+      float: left; background: @colour_negative * 0.66 + @bg * 0.15; .border-radius-top-right(3px); .border-radius-bottom-right(3px);
+      :hover { background: @colour_negative * 0.85 + @bg * 0.15; }
+    }
+  }
+  #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;
+            img { filter: alpha(opacity=4); opacity: 0.4; -moz-opacity: 0.4; position: relative; top: 2px; }
+          }
+          li {
+            img.installed { filter: alpha(opacity=100); opacity: 1; -moz-opacity: 1; }
+          }
+        }
+      }
+      td.label { color: @grey; white-space: nowrap; width: 1%; text-align: right; padding-right: 5px; }
+    }
+  }
+}
+
+/* Charts */
+ul.chart {
+  background: transparent;
+  overflow: hidden; border-left: 1px solid @grey; margin: 0; padding: 0;
+  li {
+    height: 100%; display: block; float: left; padding: 0; margin: 0; position: relative; background: transparent;
+    b { display: block; background: @light_grey; position: absolute; bottom: 0; left: 0; right: 0; border-bottom: 1px solid @grey; }
+  }
+}
+ul.chart.two_wks {
+  li {
+    width: 7.142857142857143%;
+  }
+}
+
+/* Panels */
+div.panel {
+  margin: 0 0 20px; position: relative;
+  > div.header {
+    background: @light_grey * 0.75 + @white * 0.25;
+    border-bottom: 1px solid @light_grey;
+    padding: 5px 10px 4px;
+    .border-radius-top-left(3px);
+    .border-radius-top-right(3px);
+    h3 { color: @black; font-size: 14px; margin: 0; }
+    small { display: block; font-size: 12px; margin: 0 0 3px; }
+  }
+  > div.content {
+    background: @white; padding: 10px;
+    p.blank { margin: 0; }
+  }
+  > div.footer {
+    background: @light_grey * 0.75 + @white * 0.25;
+    border-top: 1px solid @light_grey;
+    padding: 4px 10px 5px;
+    .border-radius-bottom-left(3px);
+    .border-radius-bottom-right(3px);
+  }
+}
+div.panel.no_footer {
+  div.content {
+    .border-radius-bottom-left(3px);
+    .border-radius-bottom-right(3px);
+  }
+}
+div.panel.no_header {
+  div.content {
+    .border-radius-top-left(3px);
+    .border-radius-top-right(3px);
+  }
+}
+div.panel.collapsable {
+  div.header {
+    cursor: pointer;
+    b.toggle { float: right; border: 5px solid transparent; border-bottom: 5px solid @black; border-top: none; display: block; width: 0; height: 0; margin: 6px 0 0 0; }
+  }
+  div.header:hover {
+    background: @light_grey * 0.66 + @white * 0.33
+  }
+}
+div.panel.collapsed {
+  div.header {
+    border-bottom: none; .border-radius(3px);
+    b.toggle { border-bottom: none; border-top: 5px solid @black; }
+  }
+  div.blank { border-bottom: none; .border-radius-bottom-left(3px); .border-radius-bottom-right(3px); }
+  div.content, div.footer { display: none; }
+}
+
+
+/* Sidebar Actions */
+#sidebar {
+  #actions {
+    margin: 0 0 20px;
+    a.button { font-size: 16px; line-height: normal; height: auto; padding: 5px 10px; }
+    small { display: block; margin: 5px 0 0; font-size: 12px; }
+  }
+}
+
+/* Mouseover Box */
+div.mouseover_box {
+  display: none; position: absolute; top: 100%; z-index: 10; left: 50%;
+  b.tail {
+    display: block; height: 0; width: 0; border: 5px solid transparent; border-bottom: 5px solid @accent_colour; border-top: 0; margin: 5px 0 0 -5px;
+    position: relative; z-index: 9;
+  }
+  div.content {
+    padding: 10px; background: @bg; overflow: hidden; line-height: normal; position: relative; .box-shadow(0, 0, 5px, @bg);
+    position: relative; z-index: 8; left: -50%; .border-radius(3px); border: 5px solid @accent_colour; background: @white;
+    a.name, a.title { font-weight: bold; font-size: 12px; }
+    small {
+      display: block; color: @grey; font-size: 11px; line-height: normal;
+      strong { color: @black; }
+      img.favicons { vertical-align: middle; }
+    }
+  }  
+}
+.with_mouseover_box:hover {
+  div.mouseover_box { display: block; }
+}
+
+/* Sidebar People */
+#sidebar {
+  #people {
+    > * > ul {
+      margin: 0 0 -10px; padding: 0;
+      > li {
+        display: block; margin: 0 10px 10px 0; float: left; padding: 3px; width: 40px; position: relative;
+        .box-shadow(0, 0, 3px, @light_grey); .border-radius(3px);
+        a.avatar {
+          display: block; width: 40px; height: 40px; overflow: hidden; .border-radius(3px);
+          img { width: 100%; height: 100%; }
+        }
+        a.name { display: block; text-align: center; font-size: 10px; overflow: hidden; text-decoration: none; }
+        div.mouseover_box {
+          width: 500%;
+          div.content {
+            label { display: block; color: @grey; font-size: 10px; text-transform: uppercase; }
+            div.networks {
+              ul {
+                overflow: hidden; margin: 0; padding: 0;
+                li {
+                  display: block; float: left; list-style: none; margin: 3px 3px 0 0; padding: 0;
+                  a { display: block; height: 16px; width: 16px; }
+                }
+              }
+            }
+            div.points {
+              width: 40px; float: right;
+              border-left: 1px solid (@light_grey * 0.33 + @white * 0.66); padding-left: 10px; margin-left: 10px;
+              strong { font-size: 14px; font-weight: bold; color: @black; }
+            }
+          }
+        }
+      }
+      > li:hover {
+        background-color: @accent_colour;
+        a.name { color: @white; }
+      }
+    }
+  }
+}
+
+/* Comments */
+#comments {
+  ul {
+    margin: 0 0 20px; padding: 0;
+    li {
+      display: block; list-style: none; padding: 0; margin: 0 0 10px;
+      p.author {
+        margin: 0; overflow: hidden;
+        small { font-size: 12px; color: @light_grey; float: right; }
+        a.avatar {
+          display: inline-block; height: 16px; width: 16px; position: relative; top: 3px;
+          img { height: 100%; width: 100%; }
+        }
+        a.name { font-weight: bold; }
+      }
+      b.tail { display: block; width: 0; height: 0; margin: 6px 0 0 10px; border: 5px solid transparent; border-top: none; border-bottom: 5px solid (@bg * 0.66 + @black * 0.33); }
+      blockquote { margin: 0; padding: 10px; .border-radius(3px); font-style: normal; background: @bg * 0.66 + @black * 0.33; color: @white; }
+    }
+  }
+  form {
+    margin: 0;
+    textarea { width: 500px; }
+  }
+}
+
+/* Sidebar Categories */
+#sidebar {
+  #categories {
+    margin: 0 0 20px;
+    width: auto;
+    p { margin: 0; }
+  }
+}
+
+/* Sidebar Campaigns */
+#sidebar {
+  #campaigns {
+    ul {
+      margin: 0 0 -10px; padding: 0;
+      li {
+        margin: 0 0 10px; padding: 10px; .border-radius(3px); background: @white; list-style: none; overflow: hidden;
+        a.thumbnail {
+          float: left; width: 38px; height: 38px; display: block; border: 1px solid @light_grey; overflow: hidden;
+          :hover { border-color: @accent_colour; }
+          img { width: 100%; }
+        }
+        a.name { display: block; font-weight: bold; margin: 0 0 0 50px; }
+        small {
+          display: block; color: @grey; font-size: 11px; margin: 0 0 0 50px;
+          strong { font-weight: normal; color: @black; }
+        }
+      }
+    }
+  }
+}
+
+/* Sidebar Dwellometer */
+#sidebar {
+  #dwellometer {
+    div.content {
+      min-height: 80px;
+      div.points {
+        width: 80px; background: @white; .border-radius(3px); text-align: center; padding: 5px; line-height: 1; float: right;
+        .box-shadow(0, 0, 2px, @grey);
+        label { display: block; color: @light_grey; font-size: 11px; text-transform: uppercase; }
+        strong { display: block; color: @black; font-size: 24px; }
+        a.button { font-size: 12px; line-height: 1; display: block; text-align: center; height: auto; margin: 10px 0 0; padding: 3px 5px 4px; .box-shadow(0px, 0px, 0px, @black); }
+      }
+      div.chart {
+        ul.chart { height: 88px; margin: 0 100px 0 0; }
+      }
+      div.activity {
+        ul {
+          margin: 10px 0 0; padding: 0;
+          li {
+            list-style: none; padding: 0; margin: 0;
+            span.meta { float: right; color: @grey; }
+          }
+        }
+      }
+      img.gauge { width: 100%; }
+    }
+  }
+}
+
+/* Sidebar Ads */
+#sidebar {
+  #ads {
+    div.content {
+      div.browse.list {
+        > ul {
+          margin: 0 0 -10px; min-height: 0;
+          padding: 0;
+          > li { margin: 0 0 10px; }
+        }
+      }
+    }
+  }
+}
+
+/* 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 15px;
+          b.arrow { display: block; height: 0; width: 0; float: right; border: 6px solid transparent; border-right: none; border-left: 6px solid @white; margin: 3px 0 0 10px; }
+        }
+      }
+    }
+  }
+  #main {
+    > div {
+      margin: 0 0 20px;
+      form { margin: 0; }
+    }
+    #profile {
+      a.avatar {
+        float: left;
+        width: 68px; border: 1px solid @light_grey; overflow: hidden; position: relative;
+        img { width: 100%; }
+        span {
+          display: none; position: absolute; bottom: 0; left: 0; right: 0; line-height: 1; padding: 5px;
+          text-align: center; font-size: 11px; color: @white; background: @accent_colour;
+        }
+      }
+      a.avatar:hover {
+        border: 1px solid @accent_colour;
+        span { display: block; }
+      }
+      form {
+        margin: 0 0 0 80px;
+      }
+    }
+    #networks {
+      ul { margin: 0 -10px -10px 0; padding: 0; overflow: hidden;
+        li {
+          filter: alpha(opacity=66); opacity: 0.66; -moz-opacity: 0.66;
+          background: @light_grey; display: block; float: left; width: 180px;
+          padding: 10px; margin: 0 10px 10px 0; list-style: none; .border-radius(3px);
+          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 {
+            a.edit { filter: alpha(opacity=100); opacity: 1; -moz-opacity: 1; }
+          }
+        }
+        li.installed {
+          filter: alpha(opacity=100); opacity: 1; -moz-opacity: 1;
+          background: @white;
+        }
+        li.unavailable {
+          filter: alpha(opacity=33); opacity: 0.33; -moz-opacity: 0.33;
+          .name { color: @black; }
+          :hover {
+            filter: alpha(opacity=33); opacity: 0.33; -moz-opacity: 0.33;
+            background: @light_grey;
+          }
+        }
+        li:hover {
+          filter: alpha(opacity=100); opacity: 1; -moz-opacity: 1;
+          background: @light_grey * 0.5 + @white * 0.5;
+        }
+      }
+    }
+  }
+  #sidebar {
+    ul.nav {
+      margin: 0; padding: 0; width: 66%; float: right;
+      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-left: none; border-right: 10px solid transparent; width: 0;
+            height: 0; float: left; display: none;
+          }
+          span {
+            .border-radius(3px); background: @bg; display: block;
+            line-height: 30px; padding: 0 10px; font-size: 14px; font-weight: bold; margin: 0 0 0 10px;
+          }
+        }
+        :hover {
+          a {
+            color: @white;
+            b { border-right-color: @bg; display: block; }
+            span { background: @bg; .border-radius-top-left(0px); .border-radius-bottom-left(0px); }
+          }
+        }
+      }
+      li.current {
+        a {
+          b { border-right-color: @accent_colour; display: block; }
+          span {
+            background: @accent_colour; color: @white;
+            .border-radius-top-left(0px); .border-radius-bottom-left(0px);
+          }
+        }
+      }
+    }
+  }
+}
+
+/* People > Show */
+#people_controller.show {
+  #content {
+    div.page_width {
+      > h2 { display: none; }
+      #main {
+        #profile {
+          overflow: hidden; margin: 0 0 20px;
+          img.avatar { width: 68px; border: 1px solid @light_grey; float: left; }
+          h2.name { margin: 0 0 0 80px; line-height: 1; }
+          small { font-size: 14px; color: @grey; margin: 0 0 0 80px; display: block; }
+        }
+      }
+    }
+  }
+}
+
+/* Quick Search */
+#quick_search {
+  margin: 0 0 0 10px;
+  input[type="text"] {
+    border: 1px solid (@light_grey * 0.75 + @black + 0.25); font-size: 12px; padding-top: 5px;
+    background-image: url('../../images/icons/magnifier.png');
+    background-repeat: no-repeat;
+    background-position: 5px center; height: 19px;
+    padding-left: 26px; float: left; margin: 0 3px 0 0;
+  }
+  span.submit_and_options {
+    position: relative; float: left; display: none;
+    a.button { height: 24px; .box-shadow(0, 0, 0, @black); float: left; font-size: 12px; line-height: 21px; }
+    a.button.submit {          
+      .border-radius-top-right(0px); .border-radius-bottom-right(0px); padding: 0 5px; line-height: 24px;
+    }
+    a.button.select {
+      border-left: none; padding: 0 5px;
+      .border-radius-top-left(0px); .border-radius-bottom-left(0px);
+      b { display: block; height: 0; width: 0; border: 5px solid transparent; border-top: 5px solid @white; border-bottom: 0; position: relative; top: 9px; }
+    }
+    #select_type {
+      position: absolute; top: 27px; right: 0; z-index: 5;
+      ul {
+        margin: 0 0 0 0; padding: 0;
+        li {
+          list-style: none; display: block; padding: 0; margin: 0;
+          a {
+            display: block; white-space: nowrap; float: none;
+            border-bottom: none; .border-radius(0px); line-height: 22px; padding: 0 5px;
+          }
+          a.top { .border-radius-top-left(3px); .border-radius-top-right(3px); }
+          a.bottom { border-bottom: 1px solid (@accent_colour * 0.75 + @black * 0.25); .border-radius-bottom-left(3px); .border-radius-bottom-right(3px); }
+        }
+      }
+    }
+  }
+}
+
+/* Search Results */
+#search_results {
+  margin: 0 0 20px;
+}
+#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; }
+  }
+}
+
+/* Blank States */
+div.blank {
+  padding: 20px; background: @accent_colour * 0.2 + @white * 0.8; position: relative;
+  border: 1px solid (@accent_colour * 0.33 + @white * 0.66);
+  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: @accent_colour * 0.2 + @white * 0.8; .border-radius(11px);
+  }
+}
+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(3px); margin: 0 0 20px;
+}
+div.blank.rounded.bottom {
+  .border-radius-top-left(0px); .border-radius-top-right(0px);
+}
+div.blank.with_border_bottom {
+  border-bottom: 1px solid (@accent_colour * 0.33 + @white * 0.66);
+}
+div.blank.no_border_top {
+  border-top: none;
+}
+div.blank.no_side_borders {
+  border-right: none; border-left: none;
+}
+div.panel {
+  div.blank {
+    padding: 10px 20px; overflow: hidden; margin: 0;
+    border-top: none;
+    h4 { font-weight: normal; font-size: 14px; }
+    p, ul { margin: 0 0 10px; font-size: 12px; }
+  }
+}
+
+/* Sidebar Browse */
+#sidebar {
+  div.panel {
+    div.content.browse.grid {
+      padding: 0; margin: 0;
+      > ul {
+          min-height: 0;
+        > li {
+          div.top {
+            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.grid > ul > li {
+      width: 93px;
+      > div.top a.thumbnail { width: 83px; height: 62px; } 
+    }
+    div.content.browse.brands.grid > ul > li {
+      width: 52px;
+      > div.top {
+        padding: 0;
+        a.thumbnail { width: 42px; height: 42px; }
+      }
+    }
+  }
+}
+
+/* Flash Notices and Errors */
+.flash {
+  margin: 0 0 20px; .border-radius(3px); padding: 10px 10px 10px 31px; font-size: 14px; color: @white;
+  background-position: 10px 13px; background-repeat: no-repeat;
+  strong, a { white-space: nowrap; }
+  a { color: @white; }
+
+}
+.flash.notice {
+  background-color: @colour_positive * 0.66 + @bg * 0.33; background-image: url('../../images/icons/tick-circle.png');
+}
+.flash.error {
+  background-color: @colour_negative * 0.66 + @bg * 0.33; background-image: url('../../images/icons/exclamation-red.png');
+}
+div.errorExplanation {
+  margin: 0 0 20px; .border-radius(3px); padding: 10px 10px 10px 31px; font-size: 14px; color: @white;
+  background-color: @colour_negative * 0.66 + @bg * 0.33; background-image: url('../../images/icons/exclamation-red.png');
+  background-position: 10px 13px; background-repeat: no-repeat;
+  h2 { font-size: 16px; margin: 0 0 10px; }
+  p { margin: 0 0 10px; }
+  ul {
+    margin: 0;
+  }
+}
+
+/* Modal Window Content */
+div.modal {
+  padding: 30px;
+  p {
+    font-size: 16px;
+  }
+  p.submit {
+    margin: 0; text-align: right; font-size: 14px;
+    a.button { margin-top: 5px; }
+  }
+}
+
+/* Dialog-Styled Pages */
+#pages_controller.logged_out,
+#people_controller.new,
+#sessions_controller {
+  background: @bg url('/images/body_bg_4.png') repeat-x left top;
+  #feedback { top: 53px; }
+  #top {
+    height: 320px;
+    #masthead {
+      background: none;
+      div.page_width {
+        h1 {
+          position: absolute; margin-top: 52px; margin-left: 9px;
+          a {
+            height: 152px; width: 370px; background: url('/images/logo_home_2.png');
+          }
+          span.beta_marker {
+            position: absolute; top: 55px; left: 366px;
+          }
+        }
+      }
+    }
+    #page_title {
+      padding: 160px 145px 20px;
+      width: 720px;
+    }
+  }
+  #content {
+    background: url('/images/content_bg_4.jpg') no-repeat center top; border-bottom: none;
+    min-height: 0;
+    div.page_width {
+      margin: -80px auto 80px; padding: 40px; .border-radius(3px); background: url('/images/transparent_backgrounds/black_50.png');
+      width: 640px; overflow: hidden;
+      p { font-size: 14px; }
+      form {
+        label { color: @light_grey; }
+        label.description a { white-space: nowrap; color: @accent_colour; }
+      }
+      #no_account {
+        .border-radius(3px); background: url('/images/transparent_backgrounds/white_05.png');
+        padding: 20px; width: 200px;
+        float: right;
+        h4 { margin: 0 0 10px; color: @white; }
+        p {
+          margin: 0; color: @light_grey * 0.33 + @white * 0.66;
+          a { white-space: nowrap; color: @accent_colour; }
+        }
+      }
+      ul.tabs {
+        overflow: hidden; margin: 0; padding: 0;
+        li {
+          display: block; float: left; width: 50%;
+          a {
+            display: block; padding: 10px; .border-radius-top-left(3px); .border-radius-top-right(5px); color: @black;
+            font-weight: bold; text-decoration: none; font-size: 16px;
+          }
+          a:hover { background-color: @light_grey * 0.2 + @white * 0.8; }
+        }
+        li.current {
+          a { background-color: @white; }
+        }
+      }
+    }
+  }
+}
+
+/* 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(14px);
+  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(12px); .text-shadow(1px, 1px, 0px, (@accent_colour * 0.75 + @black * 0.25));
+    border: 2px solid @light_grey;
+  }
+}
+label.list_number.large {
+  padding: 4px; width: 48px; height: 48px; .border-radius(28px); position: relative; left: -10px;
+  b {
+    font-size: 28px; height: 40px; width: 40px; .border-radius(24px); line-height: 40px;
+    .text-shadow(2px, 2px, 0px, (@accent_colour * 0.75 + @black * 0.25)); border-width: 4px;
+  }
+}
+
+/* No Widget Warning */
+#no_widget_warning {
+  margin: 0 0 20px;
+  img.sn_icons { float: left; width: 120px; }
+  h4, p { margin-left: 140px; }
+}
+
+/* Dashboard */
+#pages_controller.dashboard {
+  #sidebar {
+    #friends {
+      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.top {
+            img.marker.media_type { top: 90px; }
+            a.thumbnail { width: 138px; height: 104px; }
+          }
+        }
+      }
+    }
+  }
+}
+
+/* Remove Pages Titles when Browsing */
+#pages_controller.dashboard, #ads_controller, #brands_controller {
+  #page_title { display: none; }
+}
+
+/* Brands > Show */
+#brands_controller.show {
+  #ads {
+    div.filters {
+      h3 { font-size: 16px; margin: 0; }
+    }
+  }
+}
+
+/* Browse Mode */
+body.browse_mode {
+  #quick_help {
+    margin-left: 160px;
+    ul {
+      li {
+        width: 33%; margin: 0;
+        h3, p { margin-right: 20px; }
+      }
+    }
+  }
+  #no_widget_warning {
+    margin-left: 160px;
+  }
+}
+
+/* Rewards Page */
+#pages_controller.rewards #quick_help { margin-left: 0; }