From 6dbe70d474072b8b39ecd6815c29eb6d03b72554 Mon Sep 17 00:00:00 2001
From: Augusto dos Anjos Almeida <augusto.almeida@serpro.gov.br>
Date: Mon, 25 May 2015 14:52:26 -0300
Subject: [PATCH] Cores aplicadas

---
 index.html               |  21 +++++++++++++--------
 js/handlebars-helpers.js |   6 +++++-
 js/main.js               |   2 +-
 novo.css                 | 327 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------
 sass/novo.sass           | 298 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------------------------------------------------------------------
 sass/style.scss          |  54 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 6 files changed, 572 insertions(+), 136 deletions(-)

diff --git a/index.html b/index.html
index 34b0856..e8d2b1f 100644
--- a/index.html
+++ b/index.html
@@ -25,7 +25,10 @@
             if(base.match(/file:/) || filename.match(/http:/)){
               base = '';
             }else{
-              base = this.initBase() + '/';
+              base = this.initBase();
+              if(base.indexOf('/', base.length - 1) === -1) {
+                base = base + '/';
+              }
             }
             return base + filename;
           }
@@ -94,11 +97,11 @@
 
     <script id="proposal-template" type="text/x-handlebars-template">
       <header>
-        <h1><a href="#">{{article.title}}</a></h1>
         <a id="display-contrast" href="#">Alto Contraste</a>
         <div class="social top">
           {{#social_share "Dialoga Brasil" "Aqui suas ideias viram propostas e você ajuda a melhorar as ações do governo" "#"}}{{/social_share}}
         </div>
+        <h1><a href="#">{{article.title}}</a></h1>
       </header>
 
       <div id="content">
@@ -129,7 +132,7 @@
             </ul>
           </nav>
           {{#each article.categories}}
-            <section id="proposal-item-{{id}}" class="proposal-category-items proposal-category-items-{{slug}} hide proposal-container" data-category="{{slug}}">
+            <section id="proposal-item-{{id}}" class="proposal-category-items proposal-category-items-{{slug}} hide proposal-container clearfix {{slug}}" data-category="{{slug}}">
               <div class="header">
                 <div class="name">{{name}}</div>
                 <div class="description"></div>
@@ -177,8 +180,10 @@
                 <div class="abstract">
                   <img src="{{../host}}{{image.url}}" alt="Imagem de apresentação do programa."/>
                 </div>
-                <div class="title">{{title}}</div>
-                <div class="abstract">{{{abstract}}}</div>
+                <a href="#/programas/{{id}}/sobre-o-programa">
+                  <div class="title">{{title}}</div>
+                  <div class="abstract">{{{abstract}}}</div>
+                </a>
                 <div class="show_body row">
                   <a class="col-sm-6 col-sm-offset-3" href="#/programas/{{id}}/sobre-o-programa"><span>Conheça o programa</span></a>
                 </div>
@@ -202,7 +207,7 @@
                     <div class="col-sm-4 col-sm-offset-4">
                       <div class="social right">
                         <span>COMPARTILHE<br>ESTE PROGRAMA</span>
-                        {{#social_share title abstract '#'}}{{/social_share}}
+                        {{{social_share title abstract (program_detail_url id)}}}
                       </div>
                     </div>
                   </div>
@@ -235,7 +240,7 @@
                   </section>
                 </div>
                 <div class="support-proposal-container col-sm-6">
-                  <section class="support-proposal box box-propostas box-center">
+                  <section class="support-proposal box box-propostas box-center box-apoie">
                     <div class="container-title box-title">Apoie outras propostas</div>
                     <div class="alert alert-warning hide" role="alert">
                       <i class="fa fa-warning"></i><strong>Proposta não encontrada</strong>
@@ -399,7 +404,7 @@
         <li><a href="{{url}}" class="fb-share icon icon-facebook" data-caption="{{title}}" data-description="{{stripTags description}}">Compartilhar no Facebook</a></li>
         <li><a href="https://twitter.com/intent/tweet?url={{encodeURI url}}&text={{stripTags description}}" class="tw-share icon icon-twitter popup">Compartilhar no Twitter</a></li>
         <li><a href="https://plus.google.com/share?url={{encodeURI url}}" class="gp-share icon icon-gplus popup">Compartilhar no Google Plus</a></li>
-        <li><a href="whatsapp://send?text={{stripTags description}}" class="ws-share icon icon-whatsapp">Compartilhar no WhatsApp</a></li>
+        <li><a href="whatsapp://send?text={{stripTags description}} {{encodeURI url}}" class="ws-share icon icon-whatsapp">Compartilhar no WhatsApp</a></li>
       </ul>
     </script>
 
diff --git a/js/handlebars-helpers.js b/js/handlebars-helpers.js
index 4bdd314..ed8c6a9 100644
--- a/js/handlebars-helpers.js
+++ b/js/handlebars-helpers.js
@@ -31,7 +31,7 @@ define(['handlebars'], function(Handlebars){
           element = '';
           continue;
         }      
-        category = category + '<li class="category-'+proposal.categories[x].slug+'">' + proposal.categories[x].name + '</li>';
+        category = category + '<li class="category-'+proposal.categories[x].slug+' button button-inline">' + proposal.categories[x].name + '</li>';
       }
       if(element == ''){
         continue;
@@ -107,6 +107,10 @@ define(['handlebars'], function(Handlebars){
     return "#/programas/"+parent_id+"/propostas/"+id;
   });
 
+  Handlebars.registerHelper('program_detail_url', function(id) {
+    return "#/programas/"+id+"/sobre-o-programa";
+  });
+
   Handlebars.registerHelper('encodeURI', function(uri) {
     return encodeURIComponent(uri);
   });
diff --git a/js/main.js b/js/main.js
index eec9288..4733974 100644
--- a/js/main.js
+++ b/js/main.js
@@ -20,7 +20,7 @@ define(['handlebars', 'fastclick', 'handlebars_helpers'], function(Handlebars, F
   var participa = true;
   if(participa){
     var host = 'http://www.participa.br';
-    var proposal_discussion = '92856'; //participa
+    var proposal_discussion = '103358'; //participa
   }else{
     var host = 'http://noosfero.com:3000';
     var proposal_discussion = '632'; //local serpro
diff --git a/novo.css b/novo.css
index 01884c6..2951c74 100644
--- a/novo.css
+++ b/novo.css
@@ -2,22 +2,19 @@
 body {
   font-family: "Open Sans", sans-serif;
   font-size: 16px;
-  font-weight: 300; }
+  font-weight: 400; }
 
 h1 {
-  border-bottom: 1px solid #000;
-  bottom: 0;
+  border-bottom: 1px solid #d6dcd7;
+  color: #03316f;
   font-family: asap, sans;
   font-size: 28px;
   font-weight: 500;
-  margin: 0;
-  padding: 20px 0;
-  position: absolute;
-  text-transform: uppercase;
-  width: 100%; }
+  padding-bottom: 20px;
+  text-transform: uppercase; }
 
 h2 {
-  border-bottom: 1px solid;
+  border-bottom: 1px solid #eeeff1;
   font-size: 38px;
   font-weight: 300;
   margin-bottom: 40px;
@@ -26,6 +23,7 @@ h2 {
   h2 small {
     display: block;
     font-size: 16px;
+    padding-top: 5px;
     text-transform: none; }
 
 h3 {
@@ -37,38 +35,35 @@ h4 {
   font-size: 34px;
   font-weight: 500; }
 
-header {
-  position: relative;
-  height: 100px; }
+p, ul, select {
+  color: #000; }
 
 .container, .row {
   margin-bottom: 20px; }
 
-#content p {
-  font-family: asap, sans;
-  margin-bottom: 60px;
-  margin-left: 20px;
-  margin-right: 20px;
-  margin-top: 20px; }
-
 .button {
-  background-color: #000;
-  border: 0;
+  border-bottom: 3px solid #000;
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
   border-radius: 6px;
   color: #fff;
   cursor: pointer;
   display: block;
-  font-size: 14px;
-  font-weight: 400;
+  font-size: 16px;
+  font-weight: 700;
   padding: 20px 0;
   text-align: center;
-  text-transform: uppercase;
   transition: all 400ms; }
   .button:hover {
-    background-color: #333333;
+    background-color: black;
     text-decoration: none; }
   .button:hover, .button:focus {
     color: #fff; }
+  .button-inline {
+    display: inline-block;
+    padding-bottom: 10px !important;
+    padding-top: 10px !important; }
   .button-send span {
     padding-left: 30px;
     background-image: url(images/airplane.png);
@@ -122,11 +117,12 @@ header {
   position: relative;
   z-index: 1; }
   .social.top {
-    margin-top: 45px;
+    margin-top: 40px;
     float: right; }
   .social.right {
     padding-top: 10px; }
     .social.right span {
+      color: #000;
       display: inline-block;
       font-size: 12px;
       font-weight: 300;
@@ -146,6 +142,13 @@ header {
     display: inline-block;
     padding: 0 2px !important; }
 
+#content p {
+  font-family: asap, sans;
+  margin-bottom: 60px;
+  margin-left: 20px;
+  margin-right: 20px;
+  margin-top: 20px; }
+
 .tab {
   margin-top: 20px; }
   .tab ul {
@@ -194,8 +197,20 @@ header {
     font-weight: 700;
     padding-bottom: 5px;
     padding-top: 110px; }
-    .themes a:hover {
+    .themes a:hover, .themes a:focus {
       text-decoration: none; }
+  .themes .arrow-box {
+    position: relative;
+    top: 20px; }
+    .themes .arrow-box:after {
+      bottom: 100%;
+      left: 50%;
+      border: solid transparent;
+      content: "";
+      position: absolute;
+      border-bottom-color: #000;
+      border-width: 8px;
+      margin-left: -8px; }
 
 #proposal-categories, #proposal-group {
   border-bottom: 1px solid #000;
@@ -212,13 +227,11 @@ header {
 .proposal-container {
   background-color: #ccc;
   border-radius: 6px;
-  padding-bottom: 10px;
-  padding-left: 20px;
-  padding-right: 20px;
-  padding-top: 20px; }
+  margin-bottom: 20px;
+  padding: 20px 20px 0; }
   .proposal-container .name {
-    color: #000;
-    border-bottom: 1px solid #000;
+    color: #fff;
+    border-bottom: 2px solid #fff;
     font-family: asap, sans;
     font-size: 24px;
     font-weight: 700;
@@ -262,8 +275,13 @@ header {
       background-color: #fff; }
     .box-propostas p {
       border-bottom: 0;
+      font-size: 14px;
       padding-bottom: inherit; }
+  .box-apoie p {
+    border-bottom: 0;
+    padding-bottom: inherit; }
   .box-header {
+    color: #335277;
     font-family: asap, sans;
     font-size: 24px;
     font-weight: 700; }
@@ -273,7 +291,6 @@ header {
     list-style: none;
     padding-left: 0; }
     .box-category li {
-      background-color: #000;
       color: #fff;
       display: inline-block;
       padding-bottom: 5px;
@@ -284,7 +301,7 @@ header {
     font-size: 38px;
     font-weight: 400;
     margin-bottom: 20px; }
-  .box-subtitle, .box-propostas p {
+  .box-subtitle, .box-apoie p {
     font-size: 24px;
     font-weight: 700;
     line-height: 1.2;
@@ -357,7 +374,11 @@ header {
     margin-bottom: 20px;
     margin-top: 20px; }
     .proposal-header .show_body a {
-      background-color: #000;
+      background-color: #666666;
+      border-bottom: 5px solid #000;
+      border-left: 0;
+      border-right: 0;
+      border-top: 0;
       border-radius: 6px;
       color: #fff;
       font-size: 38px;
@@ -369,7 +390,7 @@ header {
       text-align: center;
       transition: all 400ms; }
       .proposal-header .show_body a:hover {
-        background-color: #333333;
+        background-color: black;
         text-decoration: none; }
   .proposal-header img {
     width: 100%; }
@@ -415,18 +436,22 @@ header {
   float: left; }
 .results-content .vote-result, .results-content .updated-at {
   float: right; }
+.results-content .updated-at {
+  margin-top: 20px; }
 .results-content table {
   clear: both;
   font-weight: 300; }
   .results-content table tr:nth-child(odd) {
     background: #e5e5e5; }
   .results-content table td {
-    padding: 0 5px; }
+    padding: 5px; }
   .results-content table .header {
     font-weight: 700;
     text-align: center; }
   .results-content table .abstract-text {
     width: 80%; }
+    .results-content table .abstract-text p {
+      margin: inherit; }
   .results-content table .value {
     text-align: center;
     width: 10%; }
@@ -458,7 +483,7 @@ header {
     display: inline-block;
     line-height: 24px; }
   .paging .current {
-    background-color: #333333; }
+    background-color: #262626; }
   .paging .next {
     border-radius: 0 6px 6px 0; }
   .paging .prev {
@@ -496,7 +521,6 @@ header {
   top: 43%;
   width: 20px; }
   .slick-def:before, .slick-prev:before, .slick-next:before {
-    color: #000;
     font-family: "FontAwesome";
     font-size: 20px; }
 .slick-prev {
@@ -517,9 +541,232 @@ header {
   padding: 20px; }
   .list-unstyled li:first-child {
     border-top: 0; }
+.list-styled {
+  margin-left: 20px;
+  padding-left: 0; }
 
 .hide {
   display: none; }
 
 h3.titulo-destaque {
   font-size: 38px; }
+
+section.saude .description {
+  margin-top: 20px; }
+  section.saude .description:before {
+    color: #fff;
+    content: "Saúde é direito de todos e dever do Estado. O Sistema Único de Saúde (SUS) é universal, integral e de responsabilidade do Governo Federal, estados e municípios. Atende a todos os brasileiros.";
+    font-family: asap, sans;
+    padding-top: 20px; }
+
+section.seguranca-publica .description {
+  margin-top: 20px; }
+  section.seguranca-publica .description:before {
+    color: #fff;
+    content: "A Segurança Pública é um direito fundamental, dever do Estado e responsabilidade de todos. A proteção da vida, a disseminação da cultura de paz e a integração dos órgãos e instituições são os maiores compromissos desta política pública.";
+    font-family: asap, sans;
+    padding-top: 20px; }
+
+section.educacao .description {
+  margin-top: 20px; }
+  section.educacao .description:before {
+    color: #fff;
+    content: "O Brasil avançou na qualidade e ampliou o acesso à educação em todos os níveis ‐ da creche à pós‐graduação. Com o Plano Nacional de Educação (PNE) para os próximos 10 anos, o Brasil consolida um caminho de oportunidades, por meio da educação, para todos os brasileiros.";
+    font-family: asap, sans;
+    padding-top: 20px; }
+
+section.reducao-da-pobreza .description {
+  margin-top: 20px; }
+  section.reducao-da-pobreza .description:before {
+    color: #fff;
+    content: "Com o esforço do Brasil para reduzir a pobreza e a desigualdade, na última década, 36 milhões de pessoas superaram a miséria e o país saiu do Mapa da Fome das Nações Unidas.";
+    font-family: asap, sans;
+    padding-top: 20px; }
+
+.saude {
+  color: #00a9bd; }
+  .saude .button, .saude .show_body a {
+    background-color: #00a9bd;
+    border-color: #006571;
+    transition: all 400ms; }
+    .saude .button:hover, .saude .show_body a:hover {
+      background-color: #006571;
+      text-decoration: none; }
+  .saude .select {
+    background-color: #00a9bd; }
+  .saude .proposal-header .title, .saude .proposal-header p, .saude .proposal-header p {
+    background-color: #006571; }
+  .saude .box-propostas {
+    border-color: #00a9bd; }
+  .saude .box-title {
+    color: #00a9bd; }
+  .saude .box-category li {
+    background-color: #00a9bd; }
+  .saude .slick-prev, .saude .slick-next {
+    color: #00a9bd; }
+  .saude .slick-slider .date, .saude .slick-slider .time {
+    color: #00a9bd; }
+
+section.saude {
+  background-color: #00a9bd; }
+
+.category-saude {
+  background-color: #00a9bd;
+  background-image: url(images/icons/saude.png);
+  background-position: 5px 50%;
+  background-repeat: no-repeat;
+  background-size: 22px;
+  border-color: #006571;
+  transition: all 400ms; }
+  .category-saude:hover {
+    background-color: #006571;
+    text-decoration: none; }
+
+#proposal-category-saude a {
+  background-color: #00a9bd;
+  background-image: url(images/icons/saude.png);
+  background-position: 50% 10px;
+  background-repeat: no-repeat; }
+#proposal-category-saude .arrow-box:after {
+  border-bottom-color: #00a9bd; }
+
+.seguranca-publica {
+  color: #e34748; }
+  .seguranca-publica .button, .seguranca-publica .show_body a {
+    background-color: #e34748;
+    border-color: #c01d1e;
+    transition: all 400ms; }
+    .seguranca-publica .button:hover, .seguranca-publica .show_body a:hover {
+      background-color: #c01d1e;
+      text-decoration: none; }
+  .seguranca-publica .select {
+    background-color: #e34748; }
+  .seguranca-publica .proposal-header .title, .seguranca-publica .proposal-header p, .seguranca-publica .proposal-header p {
+    background-color: #c01d1e; }
+  .seguranca-publica .box-propostas {
+    border-color: #e34748; }
+  .seguranca-publica .box-title {
+    color: #e34748; }
+  .seguranca-publica .box-category li {
+    background-color: #e34748; }
+  .seguranca-publica .slick-prev, .seguranca-publica .slick-next {
+    color: #e34748; }
+  .seguranca-publica .slick-slider .date, .seguranca-publica .slick-slider .time {
+    color: #e34748; }
+
+section.seguranca-publica {
+  background-color: #e34748; }
+
+.category-seguranca-publica {
+  background-color: #e34748;
+  background-image: url(images/icons/seguranca-publica.png);
+  background-position: 5px 50%;
+  background-repeat: no-repeat;
+  background-size: 22px;
+  border-color: #c01d1e;
+  transition: all 400ms; }
+  .category-seguranca-publica:hover {
+    background-color: #c01d1e;
+    text-decoration: none; }
+
+#proposal-category-seguranca-publica a {
+  background-color: #e34748;
+  background-image: url(images/icons/seguranca-publica.png);
+  background-position: 50% 10px;
+  background-repeat: no-repeat; }
+#proposal-category-seguranca-publica .arrow-box:after {
+  border-bottom-color: #e34748; }
+
+.educacao {
+  color: #ffb400; }
+  .educacao .button, .educacao .show_body a {
+    background-color: #ffb400;
+    border-color: #b37e00;
+    transition: all 400ms; }
+    .educacao .button:hover, .educacao .show_body a:hover {
+      background-color: #b37e00;
+      text-decoration: none; }
+  .educacao .select {
+    background-color: #ffb400; }
+  .educacao .proposal-header .title, .educacao .proposal-header p, .educacao .proposal-header p {
+    background-color: #b37e00; }
+  .educacao .box-propostas {
+    border-color: #ffb400; }
+  .educacao .box-title {
+    color: #ffb400; }
+  .educacao .box-category li {
+    background-color: #ffb400; }
+  .educacao .slick-prev, .educacao .slick-next {
+    color: #ffb400; }
+  .educacao .slick-slider .date, .educacao .slick-slider .time {
+    color: #ffb400; }
+
+section.educacao {
+  background-color: #ffb400; }
+
+.category-educacao {
+  background-color: #ffb400;
+  background-image: url(images/icons/educacao.png);
+  background-position: 5px 50%;
+  background-repeat: no-repeat;
+  background-size: 22px;
+  border-color: #b37e00;
+  transition: all 400ms; }
+  .category-educacao:hover {
+    background-color: #b37e00;
+    text-decoration: none; }
+
+#proposal-category-educacao a {
+  background-color: #ffb400;
+  background-image: url(images/icons/educacao.png);
+  background-position: 50% 10px;
+  background-repeat: no-repeat; }
+#proposal-category-educacao .arrow-box:after {
+  border-bottom-color: #ffb400; }
+
+.reducao-da-pobreza {
+  color: #51d0b3; }
+  .reducao-da-pobreza .button, .reducao-da-pobreza .show_body a {
+    background-color: #51d0b3;
+    border-color: #2da78b;
+    transition: all 400ms; }
+    .reducao-da-pobreza .button:hover, .reducao-da-pobreza .show_body a:hover {
+      background-color: #2da78b;
+      text-decoration: none; }
+  .reducao-da-pobreza .select {
+    background-color: #51d0b3; }
+  .reducao-da-pobreza .proposal-header .title, .reducao-da-pobreza .proposal-header p, .reducao-da-pobreza .proposal-header p {
+    background-color: #2da78b; }
+  .reducao-da-pobreza .box-propostas {
+    border-color: #51d0b3; }
+  .reducao-da-pobreza .box-title {
+    color: #51d0b3; }
+  .reducao-da-pobreza .box-category li {
+    background-color: #51d0b3; }
+  .reducao-da-pobreza .slick-prev, .reducao-da-pobreza .slick-next {
+    color: #51d0b3; }
+  .reducao-da-pobreza .slick-slider .date, .reducao-da-pobreza .slick-slider .time {
+    color: #51d0b3; }
+
+section.reducao-da-pobreza {
+  background-color: #51d0b3; }
+
+.category-reducao-da-pobreza {
+  background-color: #51d0b3;
+  background-image: url(images/icons/reducao-da-pobreza.png);
+  background-position: 5px 50%;
+  background-repeat: no-repeat;
+  background-size: 22px;
+  border-color: #2da78b;
+  transition: all 400ms; }
+  .category-reducao-da-pobreza:hover {
+    background-color: #2da78b;
+    text-decoration: none; }
+
+#proposal-category-reducao-da-pobreza a {
+  background-color: #51d0b3;
+  background-image: url(images/icons/reducao-da-pobreza.png);
+  background-position: 50% 10px;
+  background-repeat: no-repeat; }
+#proposal-category-reducao-da-pobreza .arrow-box:after {
+  border-bottom-color: #51d0b3; }
diff --git a/sass/novo.sass b/sass/novo.sass
index 0ec2787..2985a65 100644
--- a/sass/novo.sass
+++ b/sass/novo.sass
@@ -1,14 +1,51 @@
 // ------------------------------------
-// variaveis
+// Organização da folha de estilo:
+// 
+// 1 - Variaveis
+//   1.1 - espacamento
+//   1.2 - arredondamento
+//   1.3 - tamanhos de fontes
+//   1.4 - dicionarios
+//   1.5 - cores
+// 2 - Mixins
+//   2.1 - hover
+// 3 - Base
+// 4 - Grid
+// 5 - Elementos reusaveis
+//   5.1 - botao padrao
+//   5.2 - botao voltar
+//   5.3 - icones de compartilhamento
+// 6 - Blocos de elementos
+//   6.1 - compartilhar
+//   6.2 - texto do Dialoga Brasil
+//   6.3 - tabs de temas e programas
+//   6.4 - blocos dos temas
+//   6.5 - listagem dos programas
+//   6.6 - blocos dos programas
+//   6.7 - header do programa e select box
+//   6.8 - imagem destaque do programa, titulo, descricao e botao de acesso
+//   6.9 - login form
+//   6.10 - votacao
+//   6.11 - lista de resultados
+//   6.12 - paginador
+//   6.13 - calendario dos ministros
+//   6.14 - listas
+// 7 - Modificadores
+// 8 - Cores do Temas
 // ------------------------------------
 
-// espacamento
+
+// ------------------------------------
+// 1 - Variaveis
+// ------------------------------------
+
+// 1.1 - espacamento
 $gutter: 20px
 
-// arredondamento
+// 1.2 - arredondamento
 $radius: 6px
 
-// tamanhos de fontes
+// 1.3 - tamanhos de fontes
 $font-size-base: 16px
 $font-size-big: $font-size-base + 2
 $font-size-small: $font-size-base - 2
@@ -19,45 +56,44 @@ $font-size-h4: 34px
 $theme-size-header: 24px
 $proposal-title: 32px
 
+// 1.4 - dicionarios
+$categories: (saude: #00a9bd, seguranca-publica: #e34748, educacao: #ffb400, reducao-da-pobreza: #51d0b3)
+$categories-descriptions: (saude: "Saúde é direito de todos e dever do Estado. O Sistema Único de Saúde (SUS) é universal, integral e de responsabilidade do Governo Federal, estados e municípios. Atende a todos os brasileiros.", seguranca-publica: "A Segurança Pública é um direito fundamental, dever do Estado e responsabilidade de todos. A proteção da vida, a disseminação da cultura de paz e a integração dos órgãos e instituições são os maiores compromissos desta política pública.", educacao: "O Brasil avançou na qualidade e ampliou o acesso à educação em todos os níveis ‐ da creche à pós‐graduação. Com o Plano Nacional de Educação (PNE) para os próximos 10 anos, o Brasil consolida um caminho de oportunidades, por meio da educação, para todos os brasileiros.", reducao-da-pobreza: "Com o esforço do Brasil para reduzir a pobreza e a desigualdade, na última década, 36 milhões de pessoas superaram a miséria e o país saiu do Mapa da Fome das Nações Unidas.")
 
-// dicionarios
-$categories: (saude: #00a9bd, seguranca: #e34748, educacao: #ffb400, reducao-da-pobreza: #51d0b3)
-$categories-descriptions: (saude: "Saúde é direito de todos e dever do Estado. O Sistema Único de Saúde (SUS) é universal, integral e de responsabilidade do Governo Federal, estados e municípios. Atende a todos os brasileiros.", seguranca: "A Segurança Pública é um direito fundamental, dever do Estado e responsabilidade de todos. A proteção da vida, a disseminação da cultura de paz e a integração dos órgãos e instituições são os maiores compromissos desta política pública.", educacao: "O Brasil avançou na qualidade e ampliou o acesso à educação em todos os níveis ‐ da creche à pós‐graduação. Com o Plano Nacional de Educação (PNE) para os próximos 10 anos, o Brasil consolida um caminho de oportunidades, por meio da educação, para todos os brasileiros.", reducao-da-pobreza: "Com o esforço do Brasil para reduzir a pobreza e a desigualdade, na última década, 36 milhões de pessoas superaram a miséria e o país saiu do Mapa da Fome das Nações Unidas.")
+// 1.5 - cores
+$header-color: #03316f
+$link-color: #335277
 
 
 // ------------------------------------
-// mixins
+// 2 - Mixins
 // ------------------------------------
 
-// hover
+// 2.1 - hover
 =hover($color, $amount)
   transition: all 400ms
   &:hover
-    background-color: lighten($color, $amount)
+    background-color: darken($color, $amount)
     text-decoration: none
 
-
 // ------------------------------------
-// base
+// 3 - Base
 // ------------------------------------
 
 body
   font-family: 'Open Sans', sans-serif
   font-size: $font-size-base
-  font-weight: 300
+  font-weight: 400
 h1
-  border-bottom: 1px solid #000
-  bottom: 0
+  border-bottom: 1px solid #d6dcd7
+  color: $header-color
   font-family: asap, sans
   font-size: $font-size-h1
   font-weight: 500
-  margin: 0
-  padding: $gutter 0
-  position: absolute
+  padding-bottom: $gutter
   text-transform: uppercase
-  width: 100%
 h2
-  border-bottom: 1px solid
+  border-bottom: 1px solid #eeeff1
   font-size: $font-size-h2
   font-weight: 300
   margin-bottom: $gutter * 2
@@ -66,6 +102,7 @@ h2
   small
     display: block
     font-size: 16px
+    padding-top: $gutter * 0.25
     text-transform: none
 h3
   font-size: $font-size-h3
@@ -74,13 +111,11 @@ h3
 h4
   font-size: $font-size-h4
   font-weight: 500
-header
-  position: relative
-  height: 100px
-
+p,ul,select
+  color: #000
 
 // ------------------------------------
-// grid
+// 4 - Grid
 // ------------------------------------
 
 .container, .row
@@ -88,34 +123,30 @@ header
 
 
 // ------------------------------------
-// elementos
+// 5 - Elementos reusaveis
 // ------------------------------------
 
-// conteudo
-#content
-  p
-    font-family: asap, sans
-    margin-bottom: $gutter * 3
-    margin-left: $gutter
-    margin-right: $gutter
-    margin-top: $gutter
-
-// botao padrao
+// 5.1 - botao padrao
 .button
-  background-color: #000
-  border: 0
+  border-bottom: 3px solid #000
+  border-left: 0
+  border-right: 0
+  border-top: 0
   border-radius: $radius
   color: #fff
   cursor: pointer
   display: block
-  font-size: $font-size-small
-  font-weight: 400
+  font-size: $font-size-base
+  font-weight: 700
   padding: $gutter 0
   text-align: center
-  text-transform: uppercase
-  +hover(#000, 20%)
+  +hover(#000, 15%)
   &:hover, &:focus
     color: #fff
+  &-inline
+    display: inline-block
+    padding-bottom: $gutter * 0.5 !important
+    padding-top: $gutter * 0.5 !important
   &-send
     span
       padding-left: $gutter * 1.5
@@ -126,7 +157,7 @@ header
     .fa
       margin-right: $gutter * 0.5
 
-// botao voltar
+// 5.2 - botao voltar
 .btn
   background-color: transparent
   border: 0
@@ -138,7 +169,7 @@ header
   padding-top: 0
   vertical-align: middle
 
-// icones
+// 5.3 - icones de compartilhamento
 .icon
   background-color: transparent !important
   background-repeat: no-repeat
@@ -171,19 +202,20 @@ header
 
 
 // ------------------------------------
-// blocos
+// 6 - Blocos de elementos
 // ------------------------------------
 
-// compartilhar
+// 6.1 - compartilhar
 .social
   position: relative
   z-index: 1
   &.top
-    margin-top: 45px
+    margin-top: $gutter * 2
     float: right
   &.right
     padding-top: 10px
     span
+      color: #000
       display: inline-block
       font-size: 12px
       font-weight: 300
@@ -203,7 +235,16 @@ header
     display: inline-block
     padding: 0 2px !important
 
-// tabs de temas e programas
+// 6.2 - texto do Dialoga Brasil
+#content
+  p
+    font-family: asap, sans
+    margin-bottom: $gutter * 3
+    margin-left: $gutter
+    margin-right: $gutter
+    margin-top: $gutter
+
+// 6.3 - tabs de temas e programas
 .tab
   margin-top: $gutter
   ul
@@ -234,7 +275,7 @@ header
     border-right: 1px solid #000
     border-top: 1px solid #000
 
-// blocos dos temas
+// 6.4 - blocos dos temas
 .themes
   font-size: 0
   text-align: center
@@ -253,10 +294,22 @@ header
     font-weight: 700
     padding-bottom: $gutter * 0.25
     padding-top: $gutter * 5.5
-    &:hover
+    &:hover,&:focus
       text-decoration: none
-
-// listagem
+  .arrow-box
+    position: relative
+    top: $gutter
+    &:after
+      bottom: 100%
+      left: 50%
+      border: solid transparent
+      content: ""
+      position: absolute
+      border-bottom-color: #000
+      border-width: 8px
+      margin-left: -8px
+
+// 6.5 - listagem dos programas
 #proposal
   &-categories
     border-bottom: 1px solid #000
@@ -271,19 +324,15 @@ header
       padding-left: 0
   &-group
     @extend #proposal-categories
-
-// programas por temas
 .proposal
   &-container
     background-color: #ccc
     border-radius: $radius
-    padding-bottom: $gutter * 0.5
-    padding-left: $gutter
-    padding-right: $gutter
-    padding-top: $gutter
+    margin-bottom: $gutter
+    padding: $gutter $gutter 0
     .name
-      color: #000
-      border-bottom: 1px solid #000
+      color: #fff
+      border-bottom: 2px solid #fff
       font-family: asap, sans
       font-size: $theme-size-header
       font-weight: 700
@@ -296,7 +345,7 @@ header
       list-style: none
       padding-left: 0
 
-// box dos programas
+// 6.6 - blocos dos programas
 .box
   background-color: #fff
   border: 1px solid gray
@@ -328,10 +377,16 @@ header
     &:hover
       background-color: #fff
     p
+      border-bottom: 0
+      font-size: $font-size-small
+      padding-bottom: inherit
+  &-apoie
+    p
       @extend .box-subtitle
       border-bottom: 0
       padding-bottom: inherit
   &-header
+    color: $link-color
     font-family: asap, sans
     font-size: $theme-size-header
     font-weight: 700
@@ -341,7 +396,6 @@ header
     list-style: none
     padding-left: 0
     li
-      background-color: #000
       color: #fff
       display: inline-block
       padding-bottom: $gutter * 0.25
@@ -380,7 +434,7 @@ header
   &-center
     text-align: center
 
-// header do programa
+// 6.7 - header do programa e select box
 .select
   background-color: #000
   margin-bottom: $gutter * 0.5
@@ -405,7 +459,7 @@ header
       width: 60%
       vertical-align: middle
 
-// imagem destaque do programa, titulo, descricao e botao de acesso
+// 6.8 - imagem destaque do programa, titulo, descricao e botao de acesso
 .proposal-header
   position: relative
   .title
@@ -429,7 +483,11 @@ header
     margin-bottom: $gutter
     margin-top: $gutter
     a
-      background-color: #000
+      background-color: lighten(#000, 40%)
+      border-bottom: 5px solid #000
+      border-left: 0
+      border-right: 0
+      border-top: 0
       border-radius: $radius
       color: #fff
       font-size: $font-size-h2
@@ -439,7 +497,7 @@ header
       padding-right: 0
       padding-top: $gutter * 0.5
       text-align: center
-      +hover(#000, 20%)
+      +hover(#000, 15%)
   img
     width: 100%
   p
@@ -450,7 +508,7 @@ header
     padding-top: $gutter * 0.25
     text-transform: none
 
-// login form
+// 6.9 - login form
 .login
   text-align: left
   input
@@ -473,7 +531,7 @@ header
   i
     font-style: normal
 
-// votacao
+// 6.10 - votacao
 .vote-actions
   .like
     background: url(images/like.png) no-repeat
@@ -484,24 +542,29 @@ header
   .dislike
     background-image: url(images/dislike.png)
 
-// lista de resultados
+// 6.11 - lista de resultados
 .results-content
   .total
     float: left
-  .vote-result, .updated-at
+  .vote-result
     float: right
+  .updated-at
+    @extend .vote-result
+    margin-top: $gutter
   table
     clear: both
     font-weight: 300
     tr:nth-child(odd)
       background: #e5e5e5
     td
-      padding: 0 5px
+      padding: $gutter * 0.25
     .header
       font-weight: 700
       text-align: center
     .abstract-text
       width: 80%
+      p
+        margin: inherit
     .value
       text-align: center
       width: 10%
@@ -514,7 +577,7 @@ header
       text-overflow: ellipsis
       white-space: nowrap
 
-// paginador
+// 6.12 - paginador
 .paging
   padding: $gutter * 0.25
   ul
@@ -536,13 +599,13 @@ header
     display: inline-block
     line-height: 24px
   .current
-    background-color: lighten(#000, 20%)
+    background-color: lighten(#000, 15%)
   .next
     border-radius: 0 $radius $radius 0
   .prev
     border-radius:  $radius 0 0 $radius
 
-// calendario dos ministros
+// 6.13 - calendario dos ministros
 .slick
   &-slider
     list-style: none
@@ -576,7 +639,6 @@ header
     top: 43%
     width: 20px
     &:before
-      color: #000
       font-family: "FontAwesome"
       font-size: 20px
   &-prev
@@ -592,21 +654,85 @@ header
   &-disabled
     opacity: 0.25
 
-// lista sem bullets
-.list-unstyled
-  li
-    border-top: 1px solid
-    font-size: $font-size-big
-    font-weight: 700
-    padding: $gutter
-    &:first-child
-      border-top: 0
+// 6.14 - listas
+.list
+  &-unstyled
+    li
+      border-top: 1px solid
+      font-size: $font-size-big
+      font-weight: 700
+      padding: $gutter
+      &:first-child
+        border-top: 0
+  &-styled
+    margin-left: $gutter
+    padding-left: 0
 
 
 // ------------------------------------
-// modificadores
+// 7 - Modificadores
 // ------------------------------------
 .hide
   display: none
 h3.titulo-destaque
-  font-size: $font-size-h3 + 10
\ No newline at end of file
+  font-size: $font-size-h3 + 10
+@each $category, $description in $categories-descriptions
+  section.#{$category}
+    .description
+      margin-top: $gutter
+      &:before
+        color: #fff
+        content: "#{$description}"
+        font-family: asap, sans
+        padding-top: $gutter
+
+
+// ------------------------------------
+// 8 - Cores do Temas
+// ------------------------------------
+
+@each $category, $color in $categories
+  .#{$category}
+    color: $color
+    .button,.show_body a
+      background-color: $color
+      border-color: darken($color, 15%)
+      +hover($color, 15%)
+    .select
+      background-color: $color
+    .proposal
+      &-header
+        .title,p
+          background-color: darken($color, 15%)
+    .box
+      &-propostas
+        border-color: $color
+      &-title
+        color: $color
+      &-category
+        li
+          background-color: $color
+    .slick
+      &-prev,&-next
+        color: $color
+      &-slider
+        .date,.time
+          color: $color
+  section.#{$category}
+    background-color: $color
+  .category-#{$category}
+    background-color: $color
+    background-image: url(images/icons/#{$category}.png)
+    background-position: 5px 50%
+    background-repeat: no-repeat
+    background-size: 22px
+    border-color: darken($color, 15%)
+    +hover($color, 15%)
+  #proposal-category-#{$category}
+    a
+      background-color: $color
+      background-image: url(images/icons/#{$category}.png)
+      background-position: 50% 10px
+      background-repeat: no-repeat
+    .arrow-box:after
+      border-bottom-color: $color
\ No newline at end of file
diff --git a/sass/style.scss b/sass/style.scss
index 32c78c8..688cd22 100755
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -152,3 +152,57 @@ form {
     margin-bottom: 20px;
   }
 }
+
+@media (max-width: 480px) {
+  header {
+    height: auto;
+    h1 {
+      border-bottom: 0;
+      padding-bottom: 15px;
+      padding-top: 50px;
+      position: relative;
+      margin-bottom: 0;
+    }
+    #display-contrast {
+      position: absolute;
+      top: 10px;
+    }
+  }
+  .social {
+    &.top {
+      float: none;
+      margin-top: 0;
+      margin-bottom: 20px;
+    }
+  }
+  .select {
+    .proposal-category {
+      &:after {
+        content: "";
+        display: block;
+        clear: both;
+      }
+    }
+    .proposal-selection {
+      float: none;
+      margin: 4px 0 0 !important;
+      width: auto;
+    }
+  }
+  .proposal-header {
+    .show_body {
+      a {
+        display: block !important;
+        line-height: 1;
+      }
+      span {
+        display: inline !important;
+      }
+    }
+    .abstract {
+      p {
+        padding-bottom: 5px !important;
+      }
+    }
+  }
+}
\ No newline at end of file
--
libgit2 0.21.2