From 72adf987419f0c8e21b6487ec6b5974a08b6ac6d Mon Sep 17 00:00:00 2001
From: Alberto Garcia Cabeza <alberto@decabeza.es>
Date: Fri, 9 Oct 2015 11:20:57 +0200
Subject: [PATCH] Adds participation scss

---
 app/assets/stylesheets/application.scss   |   1 +
 app/assets/stylesheets/debates.scss       | 541 ++++-------------
 app/assets/stylesheets/participation.scss | 690 ++++++++++++++++++++++
 app/assets/stylesheets/proposals.scss     | 550 ++++-------------
 4 files changed, 889 insertions(+), 893 deletions(-)
 create mode 100644 app/assets/stylesheets/participation.scss

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
index 94ddf4867..9cda8cab1 100644
--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -5,6 +5,7 @@
 @import "variables";
 @import "admin";
 @import "layout";
+@import "participation";
 @import "debates";
 @import "proposals";
 @import "c3";
\ No newline at end of file
diff --git a/app/assets/stylesheets/debates.scss b/app/assets/stylesheets/debates.scss
index eff65e01a..547d57a9b 100644
--- a/app/assets/stylesheets/debates.scss
+++ b/app/assets/stylesheets/debates.scss
@@ -5,282 +5,131 @@
 //  02.1. Featured
 //  02.2. List
 // 03. Show
-// 04. New
 //
 
-// 01. Debates
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-@mixin votes {
-  background: $votes-bg;
-  border-top: 1px solid $votes-border;
-  margin: 0 rem-calc(-12);
-  padding: rem-calc(14) rem-calc(12);
-  position: relative;
-
-  .icon-like {
-    background: white;
-    border: 2px solid $votes-border;
-    border-radius: rem-calc(3);
-    color: $text-light;
-    display: inline-block;
-    font-size: rem-calc(30);
-    line-height: rem-calc(30);
-    padding: rem-calc(3) rem-calc(6);
-    position: relative;
-
-    &:hover {
-      background: $votes-like;
-      border-color: white;
-      color: white;
-      cursor: pointer;
-      opacity: 1 !important;
-    }
-
-    &:active {
-      border-color: $votes-like-act;
-    }
-  }
-
-  .icon-unlike {
-    background: white;
-    border: 2px solid $votes-border;
-    border-radius: rem-calc(3);
-    color: $text-light;
-    display: inline-block;
-    font-size: rem-calc(30);
-    line-height: rem-calc(30);
-    padding: rem-calc(3) rem-calc(6);
-    position: relative;
-
-    &:hover {
-      background: $votes-unlike;
-      border-color: white;
-      color: white;
-      cursor: pointer;
-      opacity: 1 !important;
-    }
-
-    &:active {
-      border-color: $votes-unlike-act;
-    }
-  }
-
-  .like, .unlike {
-    line-height: rem-calc(48);
-    vertical-align: super;
-
-    span {
-      color: white;
-      display: inline-block;
-      font-size: rem-calc(16);
-      font-weight: lighter;
-      line-height: $line-height*2;
-      padding-left: rem-calc(8);
-      vertical-align: top;
-    }
-  }
-
-  .voted {
-    .icon-like {
-      @extend .icon-like;
-      background: $votes-like;
-      border-color: white;
-      color: white;
-    }
-
-    .icon-unlike {
-      @extend .icon-unlike;
-      background: $votes-unlike;
-      border-color: white;
-      color: white;
-    }
-  }
-
-  .no-voted {
-    .icon-like, .icon-unlike {
-      opacity: .5;
-    }
-  }
-
-  .total-votes {
-    color: white;
-    float: right;
-    line-height: $line-height*2;
-  }
-
-  .divider {
-    margin: 0 rem-calc(6);
-  }
-
-  .not-logged {
-    background: rgba(22,99,135,.9);
-    color: white;
-    height: 100%;
-    left: 0;
-    line-height: $line-height*2;
-    padding-top: rem-calc(12);
-    position: absolute;
-    text-align: center;
-    top: 0;
-    width: 100%;
-    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#222222', endColorstr='#222222'); /* IE */
-
-    a {
-      color: white;
-      text-decoration: underline;
-    }
-  }
-
-  .anonymous-votes, .organizations-votes {
-    background: $warning-bg;
-    color: $warning-color;
-    height: 100%;
-    left: 0;
-    line-height: $line-height;
-    padding-top: rem-calc(12);
-    position: absolute;
-    text-align: center;
-    top: 0;
-    width: 100%;
-
-    p {
-      color: $warning-color;
-      margin: 0 rem-calc(12);
-      text-align: left;
-    }
-
-    a {
-      color: $warning-color;
-      font-weight: bold;
-      text-decoration: underline;
-    }
-  }
-}
-
 // 02. Index
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
 // 02.1. Featured
 // - - - - - - - - - - - - -
 
-.debate-featured {
+// .debate-featured {
 
-  .panel {
-    background: white;
-    border: 1px solid;
-    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
-    border-radius: rem-calc(3);
-    margin-bottom: rem-calc(24);
-    padding: rem-calc(24) rem-calc(12) 0 rem-calc(12);
+//   .panel {
+//     background: white;
+//     border: 1px solid;
+//     border-color: #e5e6e9 #dfe0e4 #d0d1d5;
+//     border-radius: rem-calc(3);
+//     margin-bottom: rem-calc(24);
+//     padding: rem-calc(24) rem-calc(12) 0 rem-calc(12);
 
-    .debate-content {
-      min-height: rem-calc(353);
-    }
+//     .debate-content {
+//       min-height: rem-calc(353);
+//     }
 
-    .label-debate {
-      background: none;
-      clear: both;
-      color: $debates;
-      display: block;
-      font-size: rem-calc(12);
-      font-weight: bold;
-      text-transform: uppercase;
-      padding-left: 0;
-      padding-top: 0;
-    }
+//     .label-debate {
+//       background: none;
+//       clear: both;
+//       color: $debates;
+//       display: block;
+//       font-size: rem-calc(12);
+//       font-weight: bold;
+//       text-transform: uppercase;
+//       padding-left: 0;
+//       padding-top: 0;
+//     }
 
-    .icon-debates {
-      color: $debates;
-      font-size: rem-calc(36);
-      line-height: $line-height;
-      position: absolute;
-      right: rem-calc(18);
-      top: rem-calc(12);
-    }
+//     .icon-debates {
+//       color: $debates;
+//       font-size: rem-calc(36);
+//       line-height: $line-height;
+//       position: absolute;
+//       right: rem-calc(18);
+//       top: rem-calc(12);
+//     }
 
-    h3 {
-      font-weight: bold;
-      margin: rem-calc(8) 0 0 0;
-      min-height: rem-calc(65);
+//     h3 {
+//       font-weight: bold;
+//       margin: rem-calc(8) 0 0 0;
+//       min-height: rem-calc(65);
 
-      a {
-        clear: both;
-        color: $text;
-        display: block;
-        font-size: rem-calc(16);
-        line-height: $line-height;
-        text-transform: lowercase;
+//       a {
+//         clear: both;
+//         color: $text;
+//         display: block;
+//         font-size: rem-calc(16);
+//         line-height: $line-height;
+//         text-transform: lowercase;
 
-        &:first-letter {
-          text-transform: uppercase;
-        }
-      }
-    }
+//         &:first-letter {
+//           text-transform: uppercase;
+//         }
+//       }
+//     }
 
-    .debate-info {
-      color: $text-medium;
-      font-weight: lighter;
-      margin-bottom: 0;
+//     .debate-info {
+//       color: $text-medium;
+//       font-weight: lighter;
+//       margin-bottom: 0;
 
-      .icon-comments {
-        font-size: rem-calc(16);
-        vertical-align: top;
-      }
+//       .icon-comments {
+//         font-size: rem-calc(16);
+//         vertical-align: top;
+//       }
 
-      a {
-        color: $text-medium;
-      }
-    }
+//       a {
+//         color: $text-medium;
+//       }
+//     }
 
-    .debate-description {
-      color: $text;
-      font-size: rem-calc(13);
-      height: rem-calc(156);
-      line-height: $line-height;
-      margin-bottom: rem-calc(12);
-      margin-top: rem-calc(24);
-      overflow: hidden;
-      position: relative;
+//     .debate-description {
+//       color: $text;
+//       font-size: rem-calc(13);
+//       height: rem-calc(156);
+//       line-height: $line-height;
+//       margin-bottom: rem-calc(12);
+//       margin-top: rem-calc(24);
+//       overflow: hidden;
+//       position: relative;
 
-      a {
-        color: $text;
-      }
+//       a {
+//         color: $text;
+//       }
 
-      ul, ol {
+//       ul, ol {
 
-        li {
-          font-size: rem-calc(13);
-          margin-bottom: rem-calc(12);
-        }
-      }
-    }
+//         li {
+//           font-size: rem-calc(13);
+//           margin-bottom: rem-calc(12);
+//         }
+//       }
+//     }
 
-    .truncate {
-      background: image-url('truncate.png');
-      background-repeat: repeat-x;
-      bottom: 0;
-      height: 24px;
-      position: absolute;
-      width: 100%;
-    }
+//     .truncate {
+//       background: image-url('truncate.png');
+//       background-repeat: repeat-x;
+//       bottom: 0;
+//       height: 24px;
+//       position: absolute;
+//       width: 100%;
+//     }
 
-    p {
-      color: $text;
-      font-size: rem-calc(14);
-      line-height: $line-height;
-      margin-bottom: rem-calc(12);
+//     p {
+//       color: $text;
+//       font-size: rem-calc(14);
+//       line-height: $line-height;
+//       margin-bottom: rem-calc(12);
 
-      &.debate-info {
-        font-size: rem-calc(13);
-      }
-    }
-  }
+//       &.debate-info {
+//         font-size: rem-calc(13);
+//       }
+//     }
+//   }
 
-  .votes {
-    @include votes;
-  }
-}
+//   .votes {
+//     @include votes;
+//   }
+// }
 
 // 02.2. List
 // - - - - - - - - - - - - -
@@ -495,195 +344,3 @@
     }
   }
 }
-
-// 03. Show
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-.debate-show {
-  padding-top: rem-calc(12);
-
-  .back {
-    @include back;
-  }
-
-  .icon-angle-left {
-   @extend .back;
-  }
-
-  h1 {
-    clear: both;
-    font-size: rem-calc(30);
-    font-weight: bold;
-    margin: 0;
-    text-transform: lowercase;
-
-    &:first-letter {
-      text-transform: uppercase;
-    }
-  }
-
-  .edit-debate {
-    margin-bottom: 0;
-  }
-
-  .debate-info {
-    clear: both;
-    color: $text-medium;
-    font-weight: lighter;
-    line-height: $line-height*2;
-    text-align: justify;
-
-    a {
-        color: $text-medium;
-    }
-
-    p {
-      font-size: rem-calc(15);
-      line-height: $line-height;
-      margin-bottom: 0;
-    }
-  }
-
-  .debate-description {
-    font-size: rem-calc(15);
-    line-height: rem-calc(30);
-  }
-
-  ul, ol {
-    margin: rem-calc(12) 0;
-
-    li {
-      font-size: rem-calc(15);
-      margin-bottom: rem-calc(15);
-    }
-  }
-
-  .author-photo {
-    line-height: $line-height*2;
-    margin-right: rem-calc(6);
-    vertical-align: middle;
-    width: 32px;
-  }
-
-  .author {
-    color: $text;
-    font-weight: bold;
-  }
-
-  aside {
-
-    h3 {
-      border-top: 2px solid $brand;
-      display: inline-block;
-      font-size: rem-calc(16);
-      margin: -1px 0 rem-calc(12);
-      padding-top: rem-calc(6);
-      text-transform: uppercase;
-    }
-  }
-
-  .votes {
-    @include votes;
-    border: 0;
-    border-radius: 0;
-    margin: 0;
-
-    .total-votes {
-      display: block;
-      float: none;
-      line-height: $line-height;
-    }
-
-    .not-logged {
-      line-height: $line-height;
-      padding: rem-calc(24);
-    }
-
-    @media (min-width: $small-breakpoint  + em-calc(1)) and (max-width:$medium-breakpoint) {
-      .in-favor, .against {
-        text-align: left;
-        width: rem-calc(100);
-      }
-    }
-
-    .divider {
-      display: none;
-    }
-
-    @media (min-width: $medium-breakpoint) {
-      .divider {
-        display: inline-block;
-      }
-    }
-  }
-
-  .leave-comment {
-    display: inline-block;
-    margin-top: rem-calc(24);
-  }
-
-  .tags {
-    display: block;
-    margin: rem-calc(24) 0;
-
-    a {
-      margin-right: rem-calc(6);
-    }
-  }
-}
-
-.bullet {
-  color: $border;
-}
-
-// 04. New
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-.debate-new, .debate-edit {
-  background: white;
-  padding-top: rem-calc(24);
-
-  .back {
-    @include back;
-  }
-
-  h1 {
-    clear: both;
-    font-size: rem-calc(36);
-    font-weight: bold;
-    line-height: $line-height*2;
-    margin-bottom: rem-calc(24);
-  }
-
-  .icon-debates {
-    color: $debates;
-    font-size: rem-calc(60);
-    line-height: $line-height;
-    opacity: .5;
-  }
-
-  h2 {
-    clear: both;
-    font-size: rem-calc(20);
-    font-weight: bold;
-    line-height: $line-height;
-    margin: 0;
-  }
-
-  .recommendations {
-    list-style-type: none;
-    margin-left: 0;
-    margin-top: rem-calc(24);
-
-    li {
-      font-size: rem-calc(12);
-      margin: rem-calc(12) 0;
-
-      &:before {
-        color: $debates;
-        content: "l ";
-        font-family: "icons" !important;
-      }
-    }
-  }
-}
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
new file mode 100644
index 000000000..deb13635a
--- /dev/null
+++ b/app/assets/stylesheets/participation.scss
@@ -0,0 +1,690 @@
+// Table of Contents
+//
+// Styles for debates and proposals
+// 01. Votes and supports
+// 02. New participation
+// 03. Show participation
+// 04. Featured
+// 05.
+//
+
+// 01. Votes and supports
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+@mixin votes {
+  background: $votes-bg;
+  border-top: 1px solid $votes-border;
+  margin: 0 rem-calc(-12);
+  padding: rem-calc(14) rem-calc(12);
+  position: relative;
+
+  .icon-like {
+    background: white;
+    border: 2px solid $votes-border;
+    border-radius: rem-calc(3);
+    color: $text-light;
+    display: inline-block;
+    font-size: rem-calc(30);
+    line-height: rem-calc(30);
+    padding: rem-calc(3) rem-calc(6);
+    position: relative;
+
+    &:hover {
+      background: $votes-like;
+      border-color: white;
+      color: white;
+      cursor: pointer;
+      opacity: 1 !important;
+    }
+
+    &:active {
+      border-color: $votes-like-act;
+    }
+  }
+
+  .icon-unlike {
+    background: white;
+    border: 2px solid $votes-border;
+    border-radius: rem-calc(3);
+    color: $text-light;
+    display: inline-block;
+    font-size: rem-calc(30);
+    line-height: rem-calc(30);
+    padding: rem-calc(3) rem-calc(6);
+    position: relative;
+
+    &:hover {
+      background: $votes-unlike;
+      border-color: white;
+      color: white;
+      cursor: pointer;
+      opacity: 1 !important;
+    }
+
+    &:active {
+      border-color: $votes-unlike-act;
+    }
+  }
+
+  .like, .unlike {
+    line-height: rem-calc(48);
+    vertical-align: super;
+
+    span {
+      color: white;
+      display: inline-block;
+      font-size: rem-calc(16);
+      font-weight: lighter;
+      line-height: $line-height*2;
+      padding-left: rem-calc(8);
+      vertical-align: top;
+    }
+  }
+
+  .voted {
+    .icon-like {
+      @extend .icon-like;
+      background: $votes-like;
+      border-color: white;
+      color: white;
+    }
+
+    .icon-unlike {
+      @extend .icon-unlike;
+      background: $votes-unlike;
+      border-color: white;
+      color: white;
+    }
+  }
+
+  .no-voted {
+    .icon-like, .icon-unlike {
+      opacity: .5;
+    }
+  }
+
+  .total-votes {
+    color: white;
+    float: right;
+    line-height: $line-height*2;
+  }
+
+  .divider {
+    margin: 0 rem-calc(6);
+  }
+
+  .not-logged {
+    background: rgba(22,99,135,.9);
+    color: white;
+    height: 100%;
+    left: 0;
+    line-height: $line-height*2;
+    padding-top: rem-calc(12);
+    position: absolute;
+    text-align: center;
+    top: 0;
+    width: 100%;
+    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#222222', endColorstr='#222222'); /* IE */
+
+    a {
+      color: white;
+      text-decoration: underline;
+    }
+  }
+
+  .anonymous-votes, .organizations-votes {
+    background: $warning-bg;
+    color: $warning-color;
+    height: 100%;
+    left: 0;
+    line-height: $line-height;
+    padding-top: rem-calc(12);
+    position: absolute;
+    text-align: center;
+    top: 0;
+    width: 100%;
+
+    p {
+      color: $warning-color;
+      margin: 0 rem-calc(12);
+      text-align: left;
+    }
+
+    a {
+      color: $warning-color;
+      font-weight: bold;
+      text-decoration: underline;
+    }
+  }
+}
+
+@mixin supports {
+  background: $proposals;
+  border-top: 1px solid $proposals-border;
+  margin: 0 rem-calc(-12);
+  padding: rem-calc(14) rem-calc(12);
+  position: relative;
+
+  .progress {
+    background-color: rgba(255,255,255,.8);
+    height: rem-calc(12);
+    margin-bottom: rem-calc(6);
+    margin-top: rem-calc(4);
+
+    .meter {
+      background: $votes-like;
+    }
+  }
+
+  .percentage {
+    font-size: rem-calc(10);
+    color: $brand;
+    vertical-align: top;
+    position: absolute;
+    top: 17px;
+    right: 18px;
+  }
+
+  abbr {
+    color: white;
+
+    &[title] {
+      border-bottom: 1px dotted white;
+    }
+  }
+
+  .button-support {
+    background: white;
+    color: $proposals;
+    display: inline-block;
+    font-size: rem-calc(14);
+    margin-top: rem-calc(12);
+
+    &:hover {
+      background: $proposals-border;
+      color: white;
+      cursor: pointer;
+    }
+
+    &:active {
+      opacity: .75;
+    }
+  }
+
+  .total-supports {
+    color: white;
+    text-align: center;
+    font-size: rem-calc(14);
+
+    span {
+      display: block;
+      font-size: rem-calc(11);
+      opacity: .75;
+    }
+  }
+
+  .divider {
+    margin: 0 rem-calc(6);
+  }
+
+  .not-logged {
+    background: rgba(255,164,45,.9);
+    color: white;
+    height: 100%;
+    left: 0;
+    line-height: $line-height*2;
+    padding-top: rem-calc(12);
+    position: absolute;
+    text-align: center;
+    top: 0;
+    width: 100%;
+    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#222222', endColorstr='#222222'); /* IE */
+
+    a {
+      color: white;
+      text-decoration: underline;
+    }
+  }
+
+  .anonymous-votes, .organizations-votes {
+    background: $warning-bg;
+    color: $warning-color;
+    height: 100%;
+    left: 0;
+    line-height: $line-height;
+    padding-top: rem-calc(12);
+    position: absolute;
+    text-align: center;
+    top: 0;
+    width: 100%;
+
+    p {
+      color: $warning-color;
+      margin: 0 rem-calc(12);
+      text-align: left;
+    }
+
+    a {
+      color: $warning-color;
+      font-weight: bold;
+      text-decoration: underline;
+    }
+  }
+
+  .supported {
+    color: white;
+    margin-top: rem-calc(12);
+  }
+}
+
+// 02. New participation
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+.debate-new, .debate-edit, .proposal-new, .proposal-edit,  {
+  background: white;
+  padding-top: rem-calc(24);
+
+  .back {
+    @include back;
+  }
+
+  h1 {
+    clear: both;
+    font-size: rem-calc(36);
+    font-weight: bold;
+    line-height: $line-height*2;
+    margin-bottom: rem-calc(24);
+  }
+
+  .icon-debates {
+    color: $debates;
+    font-size: rem-calc(60);
+    line-height: $line-height;
+    opacity: .5;
+  }
+
+  .icon-proposals {
+    color: $proposals;
+    font-size: rem-calc(50);
+    line-height: $line-height;
+    opacity: .5;
+  }
+
+  h2 {
+    clear: both;
+    font-size: rem-calc(20);
+    font-weight: bold;
+    line-height: $line-height;
+    margin: 0;
+  }
+
+  .recommendations {
+    list-style-type: none;
+    margin-left: 0;
+    margin-top: rem-calc(24);
+
+    li {
+      font-size: rem-calc(12);
+      margin: rem-calc(12) 0;
+
+      &:before {
+        content: "l ";
+        font-family: "icons" !important;
+      }
+    }
+  }
+}
+
+.debate-new, .debate-edit {
+
+  .recommendations li:before {
+    color: $debates;
+  }
+}
+
+.proposal-new, .proposal-edit {
+
+  .recommendations li:before {
+    color: $proposals;
+  }
+}
+
+// 02. Show participation
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+.debate-show, .proposal-show {
+  padding-top: rem-calc(12);
+
+  .back, .icon-angle-left {
+    @include back;
+  }
+
+  h1 {
+    clear: both;
+    font-size: rem-calc(30);
+    font-weight: bold;
+    margin: 0;
+    text-transform: lowercase;
+
+    &:first-letter {
+      text-transform: uppercase;
+    }
+  }
+
+  h4 {
+    margin: rem-calc(12) 0;
+  }
+
+  .edit-debate, .edit-proposal {
+    margin-bottom: 0;
+  }
+
+  .debate-info, .proposal-info {
+    clear: both;
+    color: $text-medium;
+    font-weight: lighter;
+    line-height: $line-height*2;
+    text-align: justify;
+
+    a {
+        color: $text-medium;
+    }
+
+    p {
+      font-size: rem-calc(15);
+      line-height: $line-height;
+      margin-bottom: 0;
+    }
+  }
+
+  .debate-description, .proposal-description {
+    font-size: rem-calc(15);
+    line-height: rem-calc(30);
+  }
+
+  ul, ol {
+    margin: rem-calc(12) 0;
+
+    li {
+      font-size: rem-calc(15);
+      margin-bottom: rem-calc(15);
+    }
+  }
+
+  .author-photo {
+    line-height: $line-height*2;
+    margin-right: rem-calc(6);
+    vertical-align: middle;
+    width: 32px;
+  }
+
+  .author {
+    color: $text;
+    font-weight: bold;
+  }
+
+  aside {
+
+    h3 {
+      border-top: 2px solid $brand;
+      display: inline-block;
+      font-size: rem-calc(16);
+      margin: -1px 0 rem-calc(12);
+      padding-top: rem-calc(6);
+      text-transform: uppercase;
+    }
+  }
+
+  blockquote {
+    margin-top: rem-calc(12);
+    padding-top: 0;
+    font-size: rem-calc(15);
+    line-height: rem-calc(30);
+  }
+
+  .document-link {
+    border: 1px solid $border;
+    display: block;
+    margin-top: rem-calc(12);
+    padding: rem-calc(12);
+    position: relative;
+
+    a {
+      padding-left: rem-calc(24);
+    }
+
+    :before {
+      color: #007BB7;
+      content: "G";
+      font-family: "icons" !important;
+      font-size: rem-calc(24);
+      left: rem-calc(6);
+      padding-top: rem-calc(3);
+      position: absolute;
+      top: 0;
+    }
+  }
+
+  .video-link {
+    @extend .document-link;
+
+    :before {
+      color: #CC181E;
+      content: "D";
+    }
+  }
+
+  .votes {
+    @include votes;
+    border: 0;
+    border-radius: 0;
+    margin: 0;
+
+    .total-votes {
+      display: block;
+      float: none;
+      line-height: $line-height;
+    }
+
+    .not-logged {
+      line-height: $line-height;
+      padding: rem-calc(24);
+    }
+
+    @media (min-width: $small-breakpoint  + em-calc(1)) and (max-width:$medium-breakpoint) {
+      .in-favor, .against {
+        text-align: left;
+        width: rem-calc(100);
+      }
+    }
+
+    .divider {
+      display: none;
+    }
+
+    @media (min-width: $medium-breakpoint) {
+      .divider {
+        display: inline-block;
+      }
+    }
+  }
+
+  .supports {
+    @include supports;
+    border: 0;
+    border-radius: 0;
+    margin: 0;
+
+    .total-supports {
+      display: block;
+      float: none;
+      line-height: $line-height;
+    }
+
+    .not-logged {
+      line-height: $line-height;
+      padding: rem-calc(24);
+    }
+  }
+
+  .leave-comment {
+    display: inline-block;
+    margin-top: rem-calc(24);
+  }
+
+  .tags {
+    display: block;
+    margin: rem-calc(24) 0;
+
+    a {
+      margin-right: rem-calc(6);
+    }
+  }
+}
+
+.bullet {
+  color: $border;
+}
+
+// 04. Featured
+// - - - - - - - - - - - - - - - - - - - - - - - - -
+
+.debate-featured, .proposal-featured {
+
+  .panel {
+    background: white;
+    border: 1px solid;
+    border-color: #E5E6E9 #DFE0E4 #D0D1D5;
+    border-radius: rem-calc(3);
+    margin-bottom: rem-calc(24);
+    padding: rem-calc(24) rem-calc(12) 0 rem-calc(12);
+
+    .debate-content, .proposal-content {
+      min-height: rem-calc(353);
+    }
+
+    .label-debate, .label-proposal {
+      background: none;
+      clear: both;
+      display: block;
+      font-size: rem-calc(12);
+      font-weight: bold;
+      text-transform: uppercase;
+      padding-left: 0;
+      padding-top: 0;
+    }
+
+    .label-debate {
+      color: $debates;
+    }
+
+    .label-proposal {
+      color: $proposals;
+    }
+
+    .icon-debates, .icon-proposals {
+      font-size: rem-calc(36);
+      line-height: $line-height;
+      position: absolute;
+      right: rem-calc(18);
+      top: rem-calc(12);
+    }
+
+    .icon-debates {
+      color: $debates;
+    }
+
+    .icon-proposals {
+      color: $proposals;
+    }
+
+    h3 {
+      font-weight: bold;
+      margin: rem-calc(8) 0 0 0;
+      min-height: rem-calc(65);
+
+      a {
+        clear: both;
+        color: $text;
+        display: block;
+        font-size: rem-calc(16);
+        line-height: $line-height;
+        text-transform: lowercase;
+
+        &:first-letter {
+          text-transform: uppercase;
+        }
+      }
+    }
+
+    .debate-info, .proposal-info {
+      color: $text-medium;
+      font-weight: lighter;
+      margin-bottom: 0;
+
+      .icon-comments {
+        font-size: rem-calc(16);
+        vertical-align: top;
+      }
+
+      a {
+        color: $text-medium;
+      }
+    }
+
+    .debate-description, .proposal-description {
+      color: $text;
+      font-size: rem-calc(13);
+      height: rem-calc(156);
+      line-height: $line-height;
+      margin-bottom: rem-calc(12);
+      margin-top: rem-calc(24);
+      overflow: hidden;
+      position: relative;
+
+      a {
+        color: $text;
+      }
+
+      ul, ol {
+
+        li {
+          font-size: rem-calc(13);
+          margin-bottom: rem-calc(12);
+        }
+      }
+    }
+
+    .truncate {
+      background: image-url('truncate.png');
+      background-repeat: repeat-x;
+      bottom: 0;
+      height: 24px;
+      position: absolute;
+      width: 100%;
+    }
+
+    p {
+      color: $text;
+      font-size: rem-calc(14);
+      line-height: $line-height;
+      margin-bottom: rem-calc(12);
+
+      &.debate-info {
+        font-size: rem-calc(13);
+      }
+    }
+  }
+
+  .supports {
+    @include supports;
+  }
+
+  .votes {
+    @include votes;
+  }
+}
+
+
+
+
diff --git a/app/assets/stylesheets/proposals.scss b/app/assets/stylesheets/proposals.scss
index 92db612b7..d2cdac183 100644
--- a/app/assets/stylesheets/proposals.scss
+++ b/app/assets/stylesheets/proposals.scss
@@ -5,138 +5,8 @@
 //  02.1. Featured
 //  02.2. List
 // 03. Show
-// 04. New
 //
 
-// 01. Proposals
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-.button-proposal {
-  background: $proposals;
-
-  &:hover {
-    background: $proposals-border;
-  }
-}
-
-@mixin supports {
-  background: $proposals;
-  border-top: 1px solid $proposals-border;
-  margin: 0 rem-calc(-12);
-  padding: rem-calc(14) rem-calc(12);
-  position: relative;
-
-  .progress {
-    background-color: rgba(255,255,255,.8);
-    height: rem-calc(12);
-    margin-bottom: rem-calc(6);
-    margin-top: rem-calc(4);
-
-    .meter {
-      background: $votes-like;
-    }
-  }
-
-  .percentage {
-    font-size: rem-calc(10);
-    color: $brand;
-    vertical-align: top;
-    position: absolute;
-    top: 17px;
-    right: 18px;
-  }
-
-  abbr {
-    color: white;
-
-    &[title] {
-      border-bottom: 1px dotted white;
-    }
-  }
-
-  .button-support {
-    background: white;
-    color: $proposals;
-    display: inline-block;
-    font-size: rem-calc(14);
-    margin-top: rem-calc(12);
-
-    &:hover {
-      background: $proposals-border;
-      color: white;
-      cursor: pointer;
-    }
-
-    &:active {
-      opacity: .75;
-    }
-  }
-
-  .total-supports {
-    color: white;
-    text-align: center;
-    font-size: rem-calc(14);
-
-    span {
-      display: block;
-      font-size: rem-calc(11);
-      opacity: .75;
-    }
-  }
-
-  .divider {
-    margin: 0 rem-calc(6);
-  }
-
-  .not-logged {
-    background: rgba(255,164,45,.9);
-    color: white;
-    height: 100%;
-    left: 0;
-    line-height: $line-height*2;
-    padding-top: rem-calc(12);
-    position: absolute;
-    text-align: center;
-    top: 0;
-    width: 100%;
-    filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#222222', endColorstr='#222222'); /* IE */
-
-    a {
-      color: white;
-      text-decoration: underline;
-    }
-  }
-
-  .anonymous-votes, .organizations-votes {
-    background: $warning-bg;
-    color: $warning-color;
-    height: 100%;
-    left: 0;
-    line-height: $line-height;
-    padding-top: rem-calc(12);
-    position: absolute;
-    text-align: center;
-    top: 0;
-    width: 100%;
-
-    p {
-      color: $warning-color;
-      margin: 0 rem-calc(12);
-      text-align: left;
-    }
-
-    a {
-      color: $warning-color;
-      font-weight: bold;
-      text-decoration: underline;
-    }
-  }
-
-  .supported {
-    color: white;
-    margin-top: rem-calc(12);
-  }
-}
 
 // 02. Index
 // - - - - - - - - - - - - - - - - - - - - - - - - -
@@ -144,123 +14,123 @@
 // 02.1. Featured
 // - - - - - - - - - - - - -
 
-.proposal-featured {
+// .proposal-featured {
 
-  .panel {
-    background: white;
-    border: 1px solid;
-    border-color: #e5e6e9 #dfe0e4 #d0d1d5;
-    border-radius: rem-calc(3);
-    margin-bottom: rem-calc(24);
-    padding: rem-calc(24) rem-calc(12) 0 rem-calc(12);
+//   .panel {
+//     background: white;
+//     border: 1px solid;
+//     border-color: #e5e6e9 #dfe0e4 #d0d1d5;
+//     border-radius: rem-calc(3);
+//     margin-bottom: rem-calc(24);
+//     padding: rem-calc(24) rem-calc(12) 0 rem-calc(12);
 
-    .proposal-content {
-      min-height: rem-calc(353);
-    }
+//     .proposal-content {
+//       min-height: rem-calc(353);
+//     }
 
-    .label-proposal {
-      background: none;
-      clear: both;
-      color: $proposals;
-      display: block;
-      font-size: rem-calc(12);
-      font-weight: bold;
-      text-transform: uppercase;
-      padding-left: 0;
-      padding-top: 0;
-    }
+//     .label-proposal {
+//       background: none;
+//       clear: both;
+//       color: $proposals;
+//       display: block;
+//       font-size: rem-calc(12);
+//       font-weight: bold;
+//       text-transform: uppercase;
+//       padding-left: 0;
+//       padding-top: 0;
+//     }
 
-    .icon-proposals {
-      color: $proposals;
-      font-size: rem-calc(36);
-      line-height: $line-height;
-      position: absolute;
-      right: rem-calc(18);
-      top: rem-calc(12);
-    }
+//     .icon-proposals {
+//       color: $proposals;
+//       font-size: rem-calc(36);
+//       line-height: $line-height;
+//       position: absolute;
+//       right: rem-calc(18);
+//       top: rem-calc(12);
+//     }
 
-    h3 {
-      font-weight: bold;
-      margin: rem-calc(8) 0 0 0;
-      min-height: rem-calc(65);
+//     h3 {
+//       font-weight: bold;
+//       margin: rem-calc(8) 0 0 0;
+//       min-height: rem-calc(65);
 
-      a {
-        clear: both;
-        color: $text;
-        display: block;
-        font-size: rem-calc(16);
-        line-height: $line-height;
-        text-transform: lowercase;
+//       a {
+//         clear: both;
+//         color: $text;
+//         display: block;
+//         font-size: rem-calc(16);
+//         line-height: $line-height;
+//         text-transform: lowercase;
 
-        &:first-letter {
-          text-transform: uppercase;
-        }
-      }
-    }
+//         &:first-letter {
+//           text-transform: uppercase;
+//         }
+//       }
+//     }
 
-    .proposal-info {
-      color: $text-medium;
-      font-weight: lighter;
-      margin-bottom: 0;
+//     .proposal-info {
+//       color: $text-medium;
+//       font-weight: lighter;
+//       margin-bottom: 0;
 
-      .icon-comments {
-        font-size: rem-calc(16);
-        vertical-align: top;
-      }
+//       .icon-comments {
+//         font-size: rem-calc(16);
+//         vertical-align: top;
+//       }
 
-      a {
-        color: $text-medium;
-      }
-    }
+//       a {
+//         color: $text-medium;
+//       }
+//     }
 
-    .proposal-description {
-      color: $text;
-      font-size: rem-calc(13);
-      height: rem-calc(156);
-      line-height: $line-height;
-      margin-bottom: rem-calc(12);
-      margin-top: rem-calc(24);
-      overflow: hidden;
-      position: relative;
+//     .proposal-description {
+//       color: $text;
+//       font-size: rem-calc(13);
+//       height: rem-calc(156);
+//       line-height: $line-height;
+//       margin-bottom: rem-calc(12);
+//       margin-top: rem-calc(24);
+//       overflow: hidden;
+//       position: relative;
 
-      a {
-        color: $text;
-      }
+//       a {
+//         color: $text;
+//       }
 
-      ul, ol {
+//       ul, ol {
 
-        li {
-          font-size: rem-calc(13);
-          margin-bottom: rem-calc(12);
-        }
-      }
-    }
+//         li {
+//           font-size: rem-calc(13);
+//           margin-bottom: rem-calc(12);
+//         }
+//       }
+//     }
 
-    .truncate {
-      background: image-url('truncate.png');
-      background-repeat: repeat-x;
-      bottom: 0;
-      height: 24px;
-      position: absolute;
-      width: 100%;
-    }
+//     .truncate {
+//       background: image-url('truncate.png');
+//       background-repeat: repeat-x;
+//       bottom: 0;
+//       height: 24px;
+//       position: absolute;
+//       width: 100%;
+//     }
 
-    p {
-      color: $text;
-      font-size: rem-calc(14);
-      line-height: $line-height;
-      margin-bottom: rem-calc(12);
+//     p {
+//       color: $text;
+//       font-size: rem-calc(14);
+//       line-height: $line-height;
+//       margin-bottom: rem-calc(12);
 
-      &.debate-info {
-        font-size: rem-calc(13);
-      }
-    }
-  }
+//       &.debate-info {
+//         font-size: rem-calc(13);
+//       }
+//     }
+//   }
 
-  .supports {
-    @include supports;
-  }
-}
+//   .supports {
+//     @include supports;
+//   }
+// }
 
 // 02.2. List
 // - - - - - - - - - - - - -
@@ -381,225 +251,3 @@
     }
   }
 }
-
-// 03. Show
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-.proposal-show {
-  padding-top: rem-calc(12);
-
-  .back {
-    @include back;
-  }
-
-  .icon-angle-left {
-   @extend .back;
-  }
-
-  h1 {
-    clear: both;
-    font-size: rem-calc(30);
-    font-weight: bold;
-    margin: 0;
-    text-transform: lowercase;
-
-    &:first-letter {
-      text-transform: uppercase;
-    }
-  }
-
-  h4 {
-    margin: rem-calc(12) 0;
-  }
-
-  .edit-proposal {
-    margin-bottom: 0;
-  }
-
-  .proposal-info {
-    clear: both;
-    color: $text-medium;
-    font-weight: lighter;
-    line-height: $line-height*2;
-    text-align: justify;
-
-    a {
-        color: $text-medium;
-    }
-
-    p {
-      font-size: rem-calc(15);
-      line-height: $line-height;
-      margin-bottom: 0;
-    }
-  }
-
-  .proposal-description {
-    font-size: rem-calc(15);
-    line-height: rem-calc(30);
-  }
-
-  ul, ol {
-    margin: rem-calc(12) 0;
-
-    li {
-      font-size: rem-calc(15);
-      margin-bottom: rem-calc(15);
-    }
-  }
-
-  .author-photo {
-    line-height: $line-height*2;
-    margin-right: rem-calc(6);
-    vertical-align: middle;
-    width: 32px;
-  }
-
-  .author {
-    color: $text;
-    font-weight: bold;
-  }
-
-  aside {
-
-    h3 {
-      border-top: 2px solid $brand;
-      display: inline-block;
-      font-size: rem-calc(16);
-      margin: -1px 0 rem-calc(12);
-      padding-top: rem-calc(6);
-      text-transform: uppercase;
-    }
-  }
-
-  blockquote {
-    margin-top: rem-calc(12);
-    padding-top: 0;
-    font-size: rem-calc(15);
-    line-height: rem-calc(30);
-  }
-
-  .document-link {
-    border: 1px solid $border;
-    display: block;
-    margin-top: rem-calc(12);
-    padding: rem-calc(12);
-    position: relative;
-
-    a {
-      padding-left: rem-calc(24);
-    }
-
-    :before {
-      color: #007BB7;
-      content: "G";
-      font-family: "icons" !important;
-      font-size: rem-calc(24);
-      left: rem-calc(6);
-      padding-top: rem-calc(3);
-      position: absolute;
-      top: 0;
-    }
-  }
-
-  .video-link {
-    @extend .document-link;
-
-    :before {
-      color: #CC181E;
-      content: "D";
-    }
-  }
-
-  .supports {
-    @include supports;
-    border: 0;
-    border-radius: 0;
-    margin: 0;
-
-    .total-supports {
-      display: block;
-      float: none;
-      line-height: $line-height;
-    }
-
-    .not-logged {
-      line-height: $line-height;
-      padding: rem-calc(24);
-    }
-  }
-
-  .leave-comment {
-    display: inline-block;
-    margin-top: rem-calc(24);
-  }
-
-  .tags {
-    display: block;
-    margin: rem-calc(24) 0;
-
-    a {
-      margin-right: rem-calc(6);
-    }
-  }
-}
-
-.bullet {
-  color: $border;
-}
-
-// 04. New
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-.proposal-new {
-  background: white;
-  padding-top: rem-calc(24);
-
-  .back {
-    @include back;
-  }
-
-  h1 {
-    clear: both;
-    font-size: rem-calc(36);
-    font-weight: bold;
-    line-height: $line-height*2;
-    margin-bottom: rem-calc(24);
-  }
-
-  .icon-proposals {
-    color: $proposals;
-    font-size: rem-calc(50);
-    line-height: $line-height;
-    opacity: .5;
-  }
-
-  h2 {
-    clear: both;
-    font-size: rem-calc(20);
-    font-weight: bold;
-    line-height: $line-height;
-    margin: 0;
-  }
-
-  .recommendations {
-    list-style-type: none;
-    margin-left: 0;
-    margin-top: rem-calc(24);
-
-    li {
-      font-size: rem-calc(12);
-      margin: rem-calc(12) 0;
-
-      &:before {
-        color: $proposals;
-        content: "l ";
-        font-family: "icons" !important;
-      }
-    }
-  }
-}
-
-.proposal-edit {
-  @extend .proposal-new;
-}