Adds foundation 6 🎉

2016-02-15 17:29:03 +01:00
parent 319fe27150
commit 3752f3a53b
139 changed files with 1829 additions and 3342 deletions
--- a/2
+++ b/2
@@ -5,7 +5,7 @@ gem 'rails', '4.2.5.1'
 # Use PostgreSQL
 gem 'pg'
 # Use SCSS for stylesheets
-gem 'sassc-rails'
+gem 'sass-rails', '~> 5.0', '>= 5.0.4'
 # Use Uglifier as compressor for JavaScript assets
 gem 'uglifier', '>= 1.3.0'
 # Use CoffeeScript for .coffee assets and views
--- a/Gemfile.lock
+++ b/Gemfile.lock
@@ -162,8 +162,7 @@ GEM
      i18n (~> 0.5)
    faraday (0.9.2)
      multipart-post (>= 1.2, < 3)
-    ffi (1.9.10)
-    foundation-rails (5.5.3.2)
+    foundation-rails (6.1.2.0)
      railties (>= 3.1.0)
      sass (>= 3.3.0, < 3.5)
    foundation_rails_helper (1.1.0)
@@ -356,17 +355,6 @@ GEM
      sprockets (>= 2.8, < 4.0)
      sprockets-rails (>= 2.0, < 4.0)
      tilt (>= 1.1, < 3)
-    sassc (1.8.4)
-      bundler
-      ffi (~> 1.9.6)
-      sass (>= 3.3.0)
-    sassc-rails (1.2.0)
-      railties (>= 4.0.0)
-      sass
-      sassc (~> 1.6)
-      sprockets (> 2.11)
-      sprockets-rails
-      tilt
    savon (2.11.1)
      akami (~> 1.2)
      builder (>= 2.1.2)
@@ -500,7 +488,7 @@ DEPENDENCIES
  rinku
  rollbar (~> 2.8.0)
  rspec-rails (~> 3.3)
-  sassc-rails
+  sass-rails (~> 5.0, >= 5.0.4)
  savon
  simple_captcha2
  social-share-button!
--- a/app/assets/javascripts/ie_alert.js.coffee
+++ b/app/assets/javascripts/ie_alert.js.coffee
@@ -2,8 +2,8 @@ App.IeAlert =
  set_cookie_and_hide: (event) ->
    event.preventDefault()
    $.cookie('ie_alert_closed', 'true', { path: '/', expires: 365 });
-    $('.ie-alert-box').remove()
+    $('.ie-callout').remove()

  initialize: ->
-    $('.ie-alert-box-close-js').on 'click', (event) ->
+    $('.ie-callout-close-js').on 'click', (event) ->
      App.IeAlert.set_cookie_and_hide(event)
--- a/app/assets/stylesheets/_settings.scss
+++ b/app/assets/stylesheets/_settings.scss
@@ -0,0 +1,548 @@
+//  Foundation for Sites Settings
+//  -----------------------------
+//
+//  Table of Contents:
+//
+//   1. Global
+//   2. Breakpoints
+//   3. The Grid
+//   4. Base Typography
+//   5. Typography Helpers
+//   6. Abide
+//   7. Accordion
+//   8. Accordion Menu
+//   9. Badge
+//  10. Breadcrumbs
+//  11. Button
+//  12. Button Group
+//  13. Callout
+//  14. Close Button
+//  15. Drilldown
+//  16. Dropdown
+//  17. Dropdown Menu
+//  18. Flex Video
+//  19. Forms
+//  20. Label
+//  21. Media Object
+//  22. Menu
+//  23. Off-canvas
+//  24. Orbit
+//  25. Pagination
+//  26. Progress Bar
+//  27. Reveal
+//  28. Slider
+//  29. Switch
+//  30. Table
+//  31. Tabs
+//  32. Thumbnail
+//  33. Title Bar
+//  34. Tooltip
+//  35. Top Bar
+
+@import 'util/util';
+
+// 1. Global
+// ---------
+
+$global-font-size: 100%;
+$global-width: rem-calc(1200);
+$global-lineheight: 1.5;
+$primary-color: #2199e8;
+$secondary-color: #777;
+$success-color: #43ac6a;
+$warning-color: #ffae00;
+$alert-color: #ec5840;
+$light-gray: #e6e6e6;
+$medium-gray: #cacaca;
+$dark-gray: #8a8a8a;
+$black: #0a0a0a;
+$white: #fefefe;
+$body-background: $white;
+$body-font-color: $black;
+$body-font-family: 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif;
+$body-antialiased: true;
+$global-margin: 1rem;
+$global-padding: 1rem;
+$global-weight-normal: normal;
+$global-weight-bold: bold;
+$global-radius: 3px;
+$global-text-direction: ltr;
+
+// 2. Breakpoints
+// --------------
+
+$breakpoints: (
+  small: 0,
+  medium: 640px,
+  large: 1024px,
+  xlarge: 1200px,
+  xxlarge: 1440px,
+);
+$breakpoint-classes: (small medium large);
+
+// 3. The Grid
+// -----------
+
+$grid-row-width: $global-width;
+$grid-column-count: 12;
+$grid-column-responsive-gutter: (
+  small: 20px,
+  medium: 30px,
+);
+$grid-column-align-edge: true;
+$block-grid-max: 8;
+
+// 4. Base Typography
+// ------------------
+
+$header-font-family: $body-font-family;
+$header-font-weight: $global-weight-normal;
+$header-font-style: normal;
+$font-family-monospace: Consolas, 'Liberation Mono', Courier, monospace;
+$header-sizes: (
+  small: (
+    'h1': 24,
+    'h2': 20,
+    'h3': 19,
+    'h4': 18,
+    'h5': 17,
+    'h6': 16,
+  ),
+  medium: (
+    'h1': 48,
+    'h2': 40,
+    'h3': 31,
+    'h4': 25,
+    'h5': 20,
+    'h6': 16,
+  ),
+);
+$header-color: inherit;
+$header-lineheight: 1.4;
+$header-margin-bottom: 0.5rem;
+$header-text-rendering: optimizeLegibility;
+$small-font-size: 80%;
+$header-small-font-color: $medium-gray;
+$paragraph-lineheight: 1.6;
+$paragraph-margin-bottom: 1rem;
+$paragraph-text-rendering: optimizeLegibility;
+$code-color: $black;
+$code-font-family: $font-family-monospace;
+$code-font-weight: $global-weight-normal;
+$code-background: $light-gray;
+$code-border: 1px solid $medium-gray;
+$code-padding: rem-calc(2 5 1);
+$anchor-color: $primary-color;
+$anchor-color-hover: scale-color($anchor-color, $lightness: -14%);
+$anchor-text-decoration: none;
+$anchor-text-decoration-hover: none;
+$hr-width: $global-width;
+$hr-border: 1px solid $medium-gray;
+$hr-margin: rem-calc(20) auto;
+$list-lineheight: $paragraph-lineheight;
+$list-margin-bottom: $paragraph-margin-bottom;
+$list-style-type: disc;
+$list-style-position: outside;
+$list-side-margin: 1.25rem;
+$list-nested-side-margin: 1.25rem;
+$defnlist-margin-bottom: 1rem;
+$defnlist-term-weight: $global-weight-bold;
+$defnlist-term-margin-bottom: 0.3rem;
+$blockquote-color: $dark-gray;
+$blockquote-padding: rem-calc(9 20 0 19);
+$blockquote-border: 1px solid $medium-gray;
+$cite-font-size: rem-calc(13);
+$cite-color: $dark-gray;
+$keystroke-font: $font-family-monospace;
+$keystroke-color: $black;
+$keystroke-background: $light-gray;
+$keystroke-padding: rem-calc(2 4 0);
+$keystroke-radius: $global-radius;
+$abbr-underline: 1px dotted $black;
+
+// 5. Typography Helpers
+// ---------------------
+
+$lead-font-size: $global-font-size * 1.25;
+$lead-lineheight: 1.6;
+$subheader-lineheight: 1.4;
+$subheader-color: $dark-gray;
+$subheader-font-weight: $global-weight-normal;
+$subheader-margin-top: 0.2rem;
+$subheader-margin-bottom: 0.5rem;
+$stat-font-size: 2.5rem;
+
+// 6. Abide
+// --------
+
+$abide-inputs: true;
+$abide-labels: true;
+$input-background-invalid: $alert-color;
+$form-label-color-invalid: $alert-color;
+$input-error-color: $alert-color;
+$input-error-font-size: rem-calc(12);
+$input-error-font-weight: $global-weight-bold;
+
+// 7. Accordion
+// ------------
+
+$accordion-background: $white;
+$accordion-plusminus: true;
+$accordion-item-color: foreground($accordion-background, $primary-color);
+$accordion-item-background-hover: $light-gray;
+$accordion-item-padding: 1.25rem 1rem;
+$accordion-content-background: $white;
+$accordion-content-border: 1px solid $light-gray;
+$accordion-content-color: foreground($accordion-background, $primary-color);
+$accordion-content-padding: 1rem;
+
+// 8. Accordion Menu
+// -----------------
+
+$accordionmenu-arrows: true;
+$accordionmenu-arrow-color: $primary-color;
+
+// 9. Badge
+// --------
+
+$badge-background: $primary-color;
+$badge-color: foreground($badge-background);
+$badge-padding: 0.3em;
+$badge-minwidth: 2.1em;
+$badge-font-size: 0.6rem;
+
+// 10. Breadcrumbs
+// ---------------
+
+$breadcrumbs-margin: 0 0 $global-margin 0;
+$breadcrumbs-item-font-size: rem-calc(11);
+$breadcrumbs-item-color: $primary-color;
+$breadcrumbs-item-color-current: $black;
+$breadcrumbs-item-color-disabled: $medium-gray;
+$breadcrumbs-item-margin: 0.75rem;
+$breadcrumbs-item-uppercase: true;
+$breadcrumbs-item-slash: true;
+
+// 11. Button
+// ----------
+
+$button-padding: 0.85em 1em;
+$button-margin: 0 0 $global-margin 0;
+$button-fill: solid;
+$button-background: $primary-color;
+$button-background-hover: scale-color($button-background, $lightness: -15%);
+$button-color: #fff;
+$button-color-alt: #000;
+$button-radius: $global-radius;
+$button-sizes: (
+  tiny: $small-font-size,
+  small: 0.75rem,
+  default: 0.9rem,
+  large: 1.25rem,
+);
+$button-opacity-disabled: 0.25;
+
+// 12. Button Group
+// ----------------
+
+$buttongroup-margin: 1rem;
+$buttongroup-spacing: 1px;
+$buttongroup-child-selector: '.button';
+$buttongroup-expand-max: 6;
+
+// 13. Callout
+// -----------
+
+$callout-background: $white;
+$callout-background-fade: 85%;
+$callout-border: 1px solid rgba($black, 0.25);
+$callout-margin: 0 0 1rem 0;
+$callout-padding: 1rem;
+$callout-font-color: $body-font-color;
+$callout-font-color-alt: $body-background;
+$callout-radius: $global-radius;
+$callout-link-tint: 30%;
+
+// 14. Close Button
+// ----------------
+
+$closebutton-position: right top;
+$closebutton-offset-horizontal: 1rem;
+$closebutton-offset-vertical: 0.5rem;
+$closebutton-size: 2em;
+$closebutton-lineheight: 1;
+$closebutton-color: $dark-gray;
+$closebutton-color-hover: $black;
+
+// 15. Drilldown
+// -------------
+
+$drilldown-transition: transform 0.15s linear;
+$drilldown-arrows: true;
+$drilldown-arrow-color: $primary-color;
+$drilldown-background: $white;
+
+// 16. Dropdown
+// ------------
+
+$dropdown-padding: 1rem;
+$dropdown-border: 1px solid $medium-gray;
+$dropdown-font-size: 1rem;
+$dropdown-width: 300px;
+$dropdown-radius: $global-radius;
+$dropdown-sizes: (
+  tiny: 100px,
+  small: 200px,
+  large: 400px,
+);
+
+// 17. Dropdown Menu
+// -----------------
+
+$dropdownmenu-arrows: true;
+$dropdownmenu-arrow-color: $anchor-color;
+$dropdownmenu-min-width: 200px;
+$dropdownmenu-background: $white;
+$dropdownmenu-border: 1px solid $medium-gray;
+
+// 18. Flex Video
+// --------------
+
+$flexvideo-margin-bottom: rem-calc(16);
+$flexvideo-ratio: 4 by 3;
+$flexvideo-ratio-widescreen: 16 by 9;
+
+// 19. Forms
+// ---------
+
+$fieldset-border: 1px solid $medium-gray;
+$fieldset-padding: rem-calc(20);
+$fieldset-margin: rem-calc(18 0);
+$legend-padding: rem-calc(0 3);
+$form-spacing: rem-calc(16);
+$helptext-color: #333;
+$helptext-font-size: rem-calc(13);
+$helptext-font-style: italic;
+$input-prefix-color: $black;
+$input-prefix-background: $light-gray;
+$input-prefix-border: 1px solid $medium-gray;
+$input-prefix-padding: 1rem;
+$form-label-color: $black;
+$form-label-font-size: rem-calc(14);
+$form-label-font-weight: $global-weight-normal;
+$form-label-line-height: 1.8;
+$select-background: $white;
+$select-triangle-color: #333;
+$select-radius: $global-radius;
+$input-color: $black;
+$input-font-family: inherit;
+$input-font-size: rem-calc(16);
+$input-background: $white;
+$input-background-focus: $white;
+$input-background-disabled: $light-gray;
+$input-border: 1px solid $medium-gray;
+$input-border-focus: 1px solid $dark-gray;
+$input-shadow: inset 0 1px 2px rgba($black, 0.1);
+$input-shadow-focus: 0 0 5px $medium-gray;
+$input-cursor-disabled: default;
+$input-transition: box-shadow 0.5s, border-color 0.25s ease-in-out;
+$input-number-spinners: true;
+$input-radius: $global-radius;
+
+// 20. Label
+// ---------
+
+$label-background: $primary-color;
+$label-color: foreground($label-background);
+$label-font-size: 0.8rem;
+$label-padding: 0.33333rem 0.5rem;
+$label-radius: $global-radius*10;
+
+// 21. Media Object
+// ----------------
+
+$mediaobject-margin-bottom: $global-margin;
+$mediaobject-section-padding: $global-padding;
+$mediaobject-image-width-stacked: 100%;
+
+// 22. Menu
+// --------
+
+$menu-margin: 0;
+$menu-margin-nested: 1rem;
+$menu-item-padding: 0.7rem 1rem;
+$menu-icon-spacing: 0.25rem;
+$menu-expand-max: 6;
+
+// 23. Off-canvas
+// --------------
+
+$offcanvas-size: 250px;
+$offcanvas-background: $light-gray;
+$offcanvas-zindex: -1;
+$offcanvas-transition-length: 0.5s;
+$offcanvas-transition-timing: ease;
+$offcanvas-fixed-reveal: true;
+$offcanvas-exit-background: rgba($white, 0.25);
+$maincontent-class: 'off-canvas-content';
+$maincontent-shadow: 0 0 10px rgba($black, 0.5);
+
+// 24. Orbit
+// ---------
+
+$orbit-bullet-background: $medium-gray;
+$orbit-bullet-background-active: $dark-gray;
+$orbit-bullet-diameter: 1.2rem;
+$orbit-bullet-margin: 0.1rem;
+$orbit-bullet-margin-top: 0.8rem;
+$orbit-bullet-margin-bottom: 0.8rem;
+$orbit-caption-background: rgba($black, 0.5);
+$orbit-caption-padding: 1rem;
+$orbit-control-background-hover: rgba($black, 0.5);
+$orbit-control-padding: 1rem;
+$orbit-control-zindex: 10;
+
+// 25. Pagination
+// --------------
+
+$pagination-font-size: rem-calc(14);
+$pagination-margin-bottom: $global-margin;
+$pagination-item-color: $black;
+$pagination-item-padding: rem-calc(3 10);
+$pagination-item-spacing: rem-calc(1);
+$pagination-radius: $global-radius;
+$pagination-item-background-hover: $light-gray;
+$pagination-item-background-current: $primary-color;
+$pagination-item-color-current: foreground($pagination-item-background-current);
+$pagination-item-color-disabled: $medium-gray;
+$pagination-ellipsis-color: $black;
+$pagination-mobile-items: false;
+$pagination-arrows: true;
+
+// 26. Progress Bar
+// ----------------
+
+$progress-height: 1rem;
+$progress-background: $medium-gray;
+$progress-margin-bottom: $global-margin;
+$progress-meter-background: $primary-color;
+$progress-radius: $global-radius;
+
+// 27. Reveal
+// ----------
+
+$reveal-background: $white;
+$reveal-width: 600px;
+$reveal-max-width: $global-width;
+$reveal-offset: rem-calc(100);
+$reveal-padding: $global-padding;
+$reveal-border: 1px solid $medium-gray;
+$reveal-radius: $global-radius;
+$reveal-zindex: 1005;
+$reveal-overlay-background: rgba($black, 0.45);
+
+// 28. Slider
+// ----------
+
+$slider-height: 0.5rem;
+$slider-width-vertical: $slider-height;
+$slider-background: $light-gray;
+$slider-fill-background: $medium-gray;
+$slider-handle-height: 1.4rem;
+$slider-handle-width: 1.4rem;
+$slider-handle-background: $primary-color;
+$slider-opacity-disabled: 0.25;
+$slider-radius: $global-radius;
+$slider-transition: all 0.2s ease-in-out;
+
+// 29. Switch
+// ----------
+
+$switch-background: $medium-gray;
+$switch-background-active: $primary-color;
+$switch-height: 2rem;
+$switch-height-tiny: 1.5rem;
+$switch-height-small: 1.75rem;
+$switch-height-large: 2.5rem;
+$switch-radius: $global-radius;
+$switch-margin: $global-margin;
+$switch-paddle-background: $white;
+$switch-paddle-offset: 0.25rem;
+$switch-paddle-radius: $global-radius;
+$switch-paddle-transition: all 0.25s ease-out;
+
+// 30. Table
+// ---------
+
+$table-background: $white;
+$table-color-scale: 5%;
+$table-border: 1px solid smart-scale($table-background, $table-color-scale);
+$table-padding: rem-calc(8 10 10);
+$table-hover-scale: 2%;
+$table-row-hover: darken($table-background, $table-hover-scale);
+$table-row-stripe-hover: darken($table-background, $table-color-scale + $table-hover-scale);
+$table-striped-background: smart-scale($table-background, $table-color-scale);
+$table-stripe: even;
+$table-head-background: smart-scale($table-background, $table-color-scale / 2);
+$table-foot-background: smart-scale($table-background, $table-color-scale);
+$table-head-font-color: $body-font-color;
+$show-header-for-stacked: false;
+
+// 31. Tabs
+// --------
+
+$tab-margin: 0;
+$tab-background: $white;
+$tab-background-active: $light-gray;
+$tab-border: $light-gray;
+$tab-item-color: foreground($tab-background, $primary-color);
+$tab-item-background-hover: $white;
+$tab-item-padding: 1.25rem 1.5rem;
+$tab-expand-max: 6;
+$tab-content-background: $white;
+$tab-content-border: $light-gray;
+$tab-content-color: foreground($tab-background, $primary-color);
+$tab-content-padding: 1rem;
+
+// 32. Thumbnail
+// -------------
+
+$thumbnail-border: solid 4px $white;
+$thumbnail-margin-bottom: $global-margin;
+$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
+$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5);
+$thumbnail-transition: box-shadow 200ms ease-out;
+$thumbnail-radius: $global-radius;
+
+// 33. Title Bar
+// -------------
+
+$titlebar-background: $black;
+$titlebar-color: $white;
+$titlebar-padding: 0.5rem;
+$titlebar-text-font-weight: bold;
+$titlebar-icon-color: $white;
+$titlebar-icon-color-hover: $medium-gray;
+$titlebar-icon-spacing: 0.25rem;
+
+// 34. Tooltip
+// -----------
+
+$has-tip-font-weight: $global-weight-bold;
+$has-tip-border-bottom: dotted 1px $dark-gray;
+$tooltip-background-color: $black;
+$tooltip-color: $white;
+$tooltip-padding: 0.75rem;
+$tooltip-font-size: $small-font-size;
+$tooltip-pip-width: 0.75rem;
+$tooltip-pip-height: $tooltip-pip-width * 0.866;
+$tooltip-pip-offset: 1.25rem;
+$tooltip-radius: $global-radius;
+
+// 35. Top Bar
+// -----------
+
+$topbar-padding: 0.5rem;
+$topbar-background: $light-gray;
+$topbar-title-spacing: 1rem;
+$topbar-input-width: 200px;
--- a/app/assets/stylesheets/admin.scss
+++ b/app/assets/stylesheets/admin.scss
@@ -11,17 +11,6 @@
 // - - - - - - - - - - - - - - - - - - - - - - - - -

 body.admin {
-  background: white;
-
-  h2 {
-    font-size: rem-calc(24);
-    font-weight: bold;
-  }
-
-  h3 {
-    font-size: rem-calc(14);
-    font-weight: normal;
-  }

  form {
    .button {
@@ -68,7 +57,6 @@ body.admin {
  }

  .admin-content {
-    margin-top: rem-calc(24);

    .proposal-new, .proposal-edit {
      padding-top: 0;
@@ -96,11 +84,6 @@ body.admin {
 // - - - - - - - - - - - - - - - - - - - - - - - - -

 .admin-sidebar {
-  margin-top: rem-calc(24);
-
-  @media (min-width: $small-breakpoint) {
-    margin-left: rem-calc(-20);
-  }

  a {
    color: white\9 !important;
@@ -128,9 +111,7 @@ body.admin {
      outline: 0;

      &:first-child {
-        background: #2B3139;
-        color: rgba(255,255,255,0.3);
-        padding: rem-calc(24) rem-calc(12);
+        font-weight: bold;
        text-transform: uppercase;
      }

@@ -251,7 +232,7 @@ body.admin {
  padding: rem-calc(6) rem-calc(12);
 }

-.button.tiny.success {
+.button.small.success {
  margin-left: rem-calc(12);

  &.no-margin {
--- a/app/assets/stylesheets/foundation_and_overrides.scss
+++ b/app/assets/stylesheets/foundation_and_overrides.scss
--- a/app/assets/stylesheets/layout.scss
+++ b/app/assets/stylesheets/layout.scss
@@ -10,7 +10,6 @@
 // 08. User account
 // 09. Search
 // 10. Official levels
-// 11. Pagination
 // 12. Tables
 // 13. Social
 // 14. Pages
@@ -95,7 +94,7 @@ a {

 .button {
  background: $brand;
-  font-family: $font-sans;
+  font-size: $base-font-size;

  &:hover {
    text-decoration: none !important;
@@ -114,19 +113,6 @@ a {
  display: inline-block;
 }

-.row {
-  max-width: 1170px;
-}
-
-.row-full {
-  max-width: 100% !important;
-}
-
-.sidebar {
-  margin-top: $line-height;
-  margin-bottom: $line-height*2;
-}
-
 .sidebar-divider {
  border-top: 1px solid $border;
  margin-top: $line-height;
@@ -155,8 +141,8 @@ a {
 }

 .margin {
-  margin-top: $line-height;
  margin-bottom: $line-height;
+  margin-top: $line-height;
 }

 .margin-top {
@@ -167,12 +153,21 @@ a {
  margin-bottom: $line-height;
 }

-.back, .icon-angle-left {
-  @include back;
+.no-margin-top {
+  margin-top: rem-calc(-24);
+}

-  & + h1 {
-    clear:both;
-  }
+.padding  {
+  padding-bottom: $line-height;
+  padding-top: $line-height;
+}
+
+.highlight {
+  background: $highlight;
+}
+
+.icon-check {
+  color: $check;
 }

 .wrapper {
@@ -191,7 +186,7 @@ a {
  min-height: $line-height*12;
 }

-.ie-alert-box {
+.ie-callout {
  position: absolute;
  top: 0;
  width: 100%;
@@ -220,13 +215,21 @@ a {
  }
 }

-.sub-nav {
+.menu.simple {
  border-bottom: 1px solid $border;
+  margin: $line-height 0;

-  dd.active {
-    border-bottom: 2px solid $brand;
-    color: $brand;
-    padding-bottom: $line-height/4;
+  li {
+    padding-bottom: rem-calc(7);
+
+    a {
+      color: $text-medium;
+    }
+
+    &.active {
+      border-bottom: 2px solid $brand;
+      color: $brand;
+    }
  }
 }

@@ -234,20 +237,32 @@ a {
  font-size: $small-font-size;
 }

+.relative {
+  position: relative;
+}
+
+.logo {
+  @include logo;
+}
+
+.close-button {
+  top: $line-height/2;
+}
+
+.back, .icon-angle-left {
+  @include back;
+}
+
 // 02. Header
 // - - - - - - - - - - - - - - - - - - - - - - - - -

 header {
-  background: $highlight;
+  background: $brand;
  border-bottom: 1px solid $border;
-
-  .home-page {
-    padding: $line-height 0;
-  }
+  margin-bottom: $line-height;

  .selected {
    border-bottom: 1px solid white;
-    position: relative;
  }

  .locale {
@@ -269,188 +284,69 @@ header {
      float: right;
    }
  }
-
-  .search-form {
-
-    @media (min-width: $small-breakpoint) {
-      margin-bottom: 0 !important;
-    }
-
-    .postfix {
-      background: $border;
-      border: 1px solid #ccc;
-      border-left: 0;
-      color: $text;
-      height: rem-calc(37);
-
-      &:hover {
-        background: $brand;
-        color: white;
-      }
-    }
-
-    input {
-      border-right: 0;
-    }
-
-    input, .button {
-     top: $line-height/4;
-    }
-
-    @media (max-width: $small-breakpoint) {
-
-      .postfix {
-        font-size: $h3-font-size;
-        padding-top: $line-height/6;
-        top: 0;
-      }
-
-      .column {
-        padding: 0;
-      }
-    }
-  }
-}
-
-.contain-to-grid {
-  background: $brand;
 }

 .top-bar {
  background: $brand !important;
  color: white;
-  min-height: $line-height*2;
-  max-width: 1170px !important;
-  padding: 0 $line-height/2;
+  height: $line-height*2;
+  line-height: $line-height*2;
+  padding-bottom: 0;
+  padding-top: 0;

  @media (min-width: $small-breakpoint) {
-    height: auto;
    padding: 0;
  }

-  .name {
+  .top-bar-title a {
+    @include logo;
+    line-height: rem-calc(80) !important;

-    @media (min-width: $small-breakpoint) {
-      margin-left: $line-height/2;
-    }
-
-    a {
-      @include logo;
-      line-height: $line-height*2;
-
-      @media (min-width: $small-breakpoint) {
-        line-height: rem-calc(80); // Same as logo image height
-      }
+    &:hover {
+      text-decoration: none;
    }
  }

-  &.expanded .title-area {
-    background: none;
-  }
-
-  @media screen\0 {
-    .title-area {
-      min-width: rem-calc(475);
-    }
-  }
-
-  .toggle-topbar {
-
-    a {
-      font-size: rem-calc(10);
-    }
-
-    &.menu-icon a {
-      padding: 0 $line-height;
-
-      span::after {
-        right: 0;
-      }
-    }
-  }
-
-  &.expanded .toggle-topbar a {
-    color: white;
-
-    span::after {
-      box-shadow: 0 0 0 1px #FFFFFF, 0 7px 0 1px #FFFFFF, 0 14px 0 1px #FFFFFF;
-    }
-  }
-}
-
-.top-bar-section {
-  margin-right: $line-height;
-  width: 100%;
-
  ul {
-    margin-left: $line-height/2;
+    background: none;
+    padding-right: rem-calc(15);

-    @media (min-width: $small-breakpoint) {
-      margin-left: 0;
-    }
+    &.menu > li {
+      display: block;

-    li {
-      background: none;
+      @media (min-width: $small-breakpoint) {
+        display: table-cell;
+        height: $line-height*3.5;
+      }

-      &:not(.has-form) a:not(.button) {
-        background: none;
+      a {
        color: white;
-
-        &:hover {
-          background: none;
-        }
+        padding-left: 0;

        @media (min-width: $small-breakpoint) {
-          background: none;
-          line-height: rem-calc(80); // Same as logo image height
-          padding: 0 $line-height/2;
+          font-size: $small-font-size;
+          padding: rem-calc(11) rem-calc(16);
        }
-      }

-      &:hover {
-        background: none;
-        color: white;
-        transition: text-decoration 275ms;
-      }
+        &.button {
+          text-align: left;

-      &.active:not(.has-form) a:not(.button) {
-        background: none;
-        height: $line-height*4;
-        line-height: $line-height*4;
+          @media (min-width: $small-breakpoint) {
+            background: white;
+            color: $brand;
+            text-align: center;
+          }
+        }
      }
    }
  }

-  ul li > a {
-    font-size: $base-font-size;
+  .menu-icon.dark {
+    height: 20px;

-    &.button {
-      border-radius: 0;
-      font-size: $base-font-size;
-      line-height: $line-height*1.5;
-      text-align: left;
-      background: none;
-
-      &:hover, &:focus {
-        background-color: #007095 !important;
-        text-decoration: underline;
-      }
-    }
-
-    @media (min-width: $small-breakpoint) {
-
-      font-size: $small-font-size;
-
-      &.button {
-        background: white;
-        border-radius: rem-calc(3);
-        color: $brand;
-        font-size: $small-font-size;
-        line-height: rem-calc(15);
-        margin-top: rem-calc(16);
-        padding-left: rem-calc(15);
-        text-align: center;
-      }
+    &::after, &:hover::after {
+      background: white;
+      box-shadow: 0 7px 0 white, 0 14px 0 white;
    }
  }
 }
@@ -471,24 +367,18 @@ header {
  }
 }

-.subnavigation-background {
-  background: white;
-  height: rem-calc(50);
-  margin-top: rem-calc(-50);
-}
-
 .subnavigation {
-  clear: both;
+  padding-bottom: $line-height;

  @media (min-width: $small-breakpoint) {
    background: white;
-    min-height: rem-calc(50);
+    padding-bottom: 0;
  }

  a {
    color: white;
    display: inline-block;
-    line-height: $line-height*2;
+    line-height: rem-calc(46);
    position: relative;
    text-align: left;
    width: 100%;
@@ -514,6 +404,36 @@ header {
      }
    }
  }
+
+  .input-group {
+    margin-bottom: 0;
+    padding-top: $line-height/4;
+  }
+
+  .input-group-field {
+    margin-bottom: 0 !important;
+  }
+
+  .input-group-button {
+    line-height: $line-height*1.5;
+
+    button {
+      background: $border;
+      border: 1px solid #ccc;
+      border-left: 0;
+      color: $text;
+      height: $line-height*1.5;
+      line-height: $line-height*1.5;
+      padding-top: 0;
+    }
+  }
+
+  input {
+    height: $line-height*1.5 !important;
+    margin-bottom: 0;
+    margin-right: 0;
+    width: 100%;
+  }
 }

 .submenu {
@@ -666,10 +586,6 @@ h3.sidebar-title {

 .auth {

-  .back, .icon-angle-left {
-    @include back;
-  }
-
  p, a, .checkbox {
    font-size: $small-font-size;
  }
@@ -689,6 +605,9 @@ form.locale-form {

  select {
    background-image: image-url("language_select.png");
+    background-origin: border-box;
+    background-position: right;
+    background-size: 24px 24px;

    option {
      background: white;
@@ -701,6 +620,7 @@ form.locale-form {
      background-color: transparent;
      border: 0;
      color: white;
+      font-size: $small-font-size;
      margin-bottom: 0;
      outline: none;
      padding-left: rem-calc(3);
@@ -736,11 +656,6 @@ form {
    height: $line-height*2;
    margin-bottom: rem-calc(16);

-    &.search-form {
-      height: rem-calc(37);
-      padding: 0 rem-calc(6);
-    }
-
    &.error {
      margin-bottom: rem-calc(1);
    }
@@ -806,7 +721,7 @@ form {
 // 07. Alerts
 // - - - - - - - - - - - - - - - - - - - - - - - - -

-.alert-box {
+.callout {
  font-family: $font-sans;
  font-size: $small-font-size;

@@ -816,7 +731,7 @@ form {
    color: $success-color;
  }

-  &.info {
+  &.primary {
    background-color: $info-bg;
    border-color: $info-border;
    color: $info-color;
@@ -850,7 +765,7 @@ span.error, small.error {
  color: $alert-color;
 }

-span.error, small.no-error {
+span.no-error, small.no-error {
  background: $success-bg;
  color: $success-color;
 }
@@ -866,17 +781,10 @@ label.error, label.error a {
  color: $alert-color;
 }

-.alert-messages {
-  background-color: white;
-  padding-top: $line-height;
-}
-
 // 08. User account
 // - - - - - - - - - - - - - - - - - - - - - - - - -

 .account {
-  background: white;
-  padding-top: $line-height;

  select {
    height: $line-height*2;
@@ -1038,7 +946,6 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
  h3 {
    border-top: 1px solid $votes-border;
    display: inline-block;
-    font-family: $font-family-sans-serif;
    font-size: rem-calc(16);
    margin: -1px 0 $line-height/2;
    padding-top: $line-height/4;
@@ -1062,7 +969,7 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
    margin-bottom: 0;
    margin-top: rem-calc(28);
    position: absolute;
-    right: 15px;
+    right: 0;
    z-index: 2;
  }
 }
@@ -1121,17 +1028,6 @@ img.avatar, img.admin-avatar, img.moderator-avatar, img.initialjs-avatar {
  background: $level-5;
 }

-// 11. Pagination
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-ul.pagination {
-  margin-top: $line-height;
-
-  li {
-    color: $text-medium;
-  }
-}
-
 // 12. Tables
 // - - - - - - - - - - - - - - - - - - - - - - - - -

@@ -1372,90 +1268,47 @@ table {
 // 14. Pages
 // - - - - - - - - - - - - - - - - - - - - - - - - -

-.page {
-  padding-bottom: $line-height*2;
+.more-information {

-  .menu {
-    margin-top: $line-height;
+  ul {

-    ul {
-      list-style-type: none;
-      margin-left: 0;
+    li {
+      border-bottom: 1px solid $border;
+      font-weight: bold;
+      margin-left: rem-calc(-12);
+      position: relative;

-      & ul {
-        margin-left: $line-height/2;
+      span {
+        color: $text;
+        display: inline-block;
+        font-weight: normal;
      }
-    }

-    a {
-      display: block;
-      font-size: rem-calc(13);
-      margin-bottom: $line-height/2;
-    }
-  }
+      a {
+        display: block;
+        padding: $line-height/2;

-  .icon-check {
-    color: $check;
-  }
+        &:hover {
+          background: $highlight;

-  .text {
-    margin-top: $line-height;
-
-    h1, h2, h3, h4, h5, h6 {
-      text-align: left;
-    }
-
-    ul, ol {
-      margin-left: $line-height/2;
-
-      li {
-        font-size: rem-calc(15);
-        line-height: rem-calc(30);
-        margin-bottom: $line-height/2;
-      }
-    }
-
-    p {
-      font-size: rem-calc(15);
-      line-height: rem-calc(30);
-    }
-  }
-
-  .more-information {
-    margin-top: $line-height;
-
-    ul {
-      list-style-type: none;
-      margin-left: 0;
-
-      li {
-        border-bottom: 1px solid $border;
-        font-size: rem-calc(16);
-        font-weight: bold;
-        padding-bottom: $line-height/2;
-        position: relative;
-        text-align: left;
-
-        span {
-          color: $text-medium;
-          display: block;
-          font-size: $small-font-size;
-          font-weight: normal;
-        }
-
-        &:after {
-          content: none;
-          color: $text-light;
-          font-family: "icons" !important;
-          position: absolute;
-          right: 0;
-          top: rem-calc(12);
-
-          @media (min-width: $small-breakpoint) {
-            content: 'c';
+          span {
+            text-decoration: none;
          }
        }
      }
+
+      &:after {
+        content: none;
+        color: $text-medium;
+        font-family: "icons" !important;
+        position: absolute;
+        right: 0;
+        top: 24px;
+
+        @media (min-width: $small-breakpoint) {
+          content: 'c';
+        }
+      }
    }
  }
 }
@@ -1464,7 +1317,6 @@ table {
 // - - - - - - - - - - - - - - - - - - - - - - - - -

 .verification {
-  min-height: $line-height*25;

  @media (min-width: $small-breakpoint) {
    .left + .left {
@@ -1497,7 +1349,7 @@ table {
  }

  .verification-step {
-    font-family: $font-sans;
+    background: #f6f6f6;
    font-weight: bold;
    line-height: rem-calc(20);
    padding-top: $line-height/4;
@@ -1525,10 +1377,12 @@ table {
    }

    &.active {
+      background: #43AC6A;
      color: white;
    }

    &.completed {
+      background: #43AC6A;
      color: rgba(255,255,255,.5);

      .number {
@@ -1782,7 +1636,6 @@ table {
 }

 .flag-disable, .flag-active {
-  line-height: $line-height;
  vertical-align: middle;
 }

@@ -1794,6 +1647,10 @@ table {
  color: $delete;
 }

+.dropdown-pane a {
+  color: $text-medium;
+}
+
 // 18. Activity
 // - - - - - - - - - - - - - - - - - - - - - - - - -

--- a/app/assets/stylesheets/mixins.scss
+++ b/app/assets/stylesheets/mixins.scss
@@ -7,18 +7,18 @@
 // - - - - - - - - - - - - - - - - - - - - - - - - -

@mixin back {
+  clear: both;
  color: $text-medium;
-  font-family: $font-sans;
-  font-size: $small-font-size;
+  float: left;
 }

@mixin logo {
  color: white;
  font-family: $font-logo;
+  font-size: $h3-font-size;
  font-weight: lighter;

  @media (min-width: $small-breakpoint) {
-    font-size: $h3-font-size;
    line-height: $line-height*2;
    margin-top: 0;
  }
--- a/app/assets/stylesheets/participation.scss
+++ b/app/assets/stylesheets/participation.scss
@@ -275,7 +275,6 @@
 .debate-new, .debate-edit,
 .proposal-new, .proposal-edit,
 .spending-proposal-new, .spending-proposal-edit  {
-  padding-top: $line-height;

  .back {
    @include back;
@@ -337,15 +336,6 @@
 // - - - - - - - - - - - - - - - - - - - - - - - - -

 .debate-show, .proposal-show {
-  padding-top: rem-calc(12);
-
-  .back, .icon-angle-left {
-    @include back;
-  }
-
-  h4 {
-    margin: rem-calc(12) 0;
-  }

  .edit-debate, .edit-proposal {
    margin-bottom: 0;
@@ -355,7 +345,7 @@
    clear: both;
    color: $text-medium;
    font-size: $small-font-size;
-    line-height: $line-height*2;
+    min-height: $line-height*2;
    position: relative;

    a {
@@ -433,8 +423,8 @@
  .document-link, .video-link {
    border: 1px solid $border;
    display: block;
-    margin-top: rem-calc(12);
-    padding: rem-calc(12);
+    margin: $line-height/2 0;
+    padding: $line-height/2;
    position: relative;

    a {
@@ -478,7 +468,7 @@
      padding: rem-calc(24);
    }

-    @media (min-width: $small-breakpoint  + em-calc(1)) and (max-width:$medium-breakpoint) {
+    @media (min-width: $small-breakpoint  + rem-calc(1)) and (max-width:$medium-breakpoint) {
      .in-favor, .against {
        text-align: left;
        width: rem-calc(100);
@@ -595,6 +585,7 @@
    .debate-content, .proposal-content {
      margin: 0;
      min-height: rem-calc(180);
+      position: relative;

      .tags {
        display: block;
@@ -610,12 +601,12 @@

    .icon-debates {
      color: $debates;
-      left: rem-calc(60);
+      left: rem-calc(48);
    }

    .icon-proposals {
      color: $proposals;
-      left: rem-calc(88);
+      left: rem-calc(72);
    }

    .debate-info, .proposal-info {
@@ -807,10 +798,6 @@
 .featured-debates, .featured-proposals {
  padding: $line-height/2 0;

-  @media (min-width: $small-breakpoint) {
-    margin-top: $line-height !important;
-  }
-
  @media (min-width: $medium-breakpoint) {
    margin-left: 0 !important;
    margin-right: 0 !important;
--- a/app/assets/stylesheets/variables.scss
+++ b/app/assets/stylesheets/variables.scss
@@ -128,8 +128,8 @@ $comment-official:  rgba(70,219,145,.3);
 // 06. Responsive
 // - - - - - - - - - - - - - - - - - - - - - - - - -

-$small:             em-calc(480);
-$small-breakpoint:  em-calc(640);
-$medium-breakpoint: em-calc(1024);
-$large-breakpoint:  em-calc(1440);
-$xlarge-breakpoint: em-calc(1920);
+$small:             rem-calc(480);
+$small-breakpoint:  rem-calc(640);
+$medium-breakpoint: rem-calc(1024);
+$large-breakpoint:  rem-calc(1440);
+$xlarge-breakpoint: rem-calc(1920);
--- a/app/views/account/show.html.erb
+++ b/app/views/account/show.html.erb
@@ -1,7 +1,7 @@
 <div class="row account">
  <div class="small-12 column">
-    <div class="right text-right">
-      <%= link_to t("account.show.change_credentials_link"), edit_user_registration_path, class: "button radius small secondary" %>
+    <div class="float-right text-right">
+      <%= link_to t("account.show.change_credentials_link"), edit_user_registration_path, class: "button secondary" %>
      <br>
      <%= link_to t("account.show.erase_account_link"), users_registrations_delete_form_path, class: "delete" %>
    </div>
@@ -61,7 +61,7 @@
            <% end %>
          </div>

-          <%= f.submit t("account.show.save_changes_submit"), class: "button radius" %>
+          <%= f.submit t("account.show.save_changes_submit"), class: "button" %>
        </div>

        <div class="user-permissions small-12 medium-6 column">
@@ -105,9 +105,9 @@
                    <%= t("account.show.verified_account") %>
                  </p>
                <% elsif current_user.level_two_verified? %>
-                  <%= link_to t("account.show.finish_verification"), verification_path, class: "button radius success" %>
+                  <%= link_to t("account.show.finish_verification"), verification_path, class: "button success" %>
                <% else %>
-                  <%= link_to t("account.show.verify_my_account"), verification_path, class: "button radius success" %>
+                  <%= link_to t("account.show.verify_my_account"), verification_path, class: "button success" %>
                <% end %>
              </span>
            </div>
--- a/app/views/admin/comments/index.html.erb
+++ b/app/views/admin/comments/index.html.erb
@@ -21,12 +21,12 @@
                restore_admin_comment_path(comment, request.query_parameters),
                method: :put,
                data: { confirm: t("admin.actions.confirm") },
-                class: "button radius tiny success right" %>
+                class: "button small success float-right" %>
          <% unless comment.confirmed_hide? %>
            <%= link_to t("admin.actions.confirm_hide"),
                  confirm_hide_admin_comment_path(comment, request.query_parameters),
                  method: :put,
-                  class: "button radius tiny warning right" %>
+                  class: "button small warning float-right" %>
          <% end %>
        </div>
      </div>
--- a/app/views/admin/debates/index.html.erb
+++ b/app/views/admin/debates/index.html.erb
@@ -19,14 +19,14 @@
              restore_admin_debate_path(debate, request.query_parameters),
              method: :put,
              data: { confirm: t("admin.actions.confirm") },
-              class: "button radius tiny success no-margin" %>
+              class: "button small success no-margin" %>
      </td>
      <td>
        <% unless debate.confirmed_hide? %>
          <%= link_to t("admin.actions.confirm_hide"),
                confirm_hide_admin_debate_path(debate, request.query_parameters),
                method: :put,
-                class: "button radius tiny warning right" %>
+                class: "button small warning float-right" %>
        <% end %>
      </td>
    </tr>
--- a/app/views/admin/moderators/_moderator.html.erb
+++ b/app/views/admin/moderators/_moderator.html.erb
@@ -5,9 +5,9 @@
  <%= link_to t('admin.moderators.moderator.delete'),
    admin_moderator_path(moderator),
    method: :delete,
-    class: "button tiny radius alert right"
+    class: "button small alert float-right"
  %>
 <% else %>
  <%= link_to t('admin.moderators.moderator.add'),{ controller: "admin/moderators", action: :create, user_id: moderator.user_id },
-    method: :post, class: "button tiny radius success right" %>
+    method: :post, class: "button small success float-right" %>
 <% end %>
--- a/app/views/admin/moderators/index.html.erb
+++ b/app/views/admin/moderators/index.html.erb
@@ -6,7 +6,7 @@
        <%= text_field_tag :email, '', placeholder: t('admin.moderators.search.email_placeholder') %>
      </div>
      <div class="small-12 medium-6 column">
-        <%= submit_tag t('admin.moderators.search.search'), class: 'button radius' %>
+        <%= submit_tag t('admin.moderators.search.search'), class: 'button' %>
      </div>
    <% end %>
  </div>
--- a/app/views/admin/officials/edit.html.erb
+++ b/app/views/admin/officials/edit.html.erb
@@ -1,12 +1,12 @@
 <h2>
  <%= t("admin.officials.edit.title") %>
-  <span class="official right"><strong><%= @user.name %></strong> (<%= @user.email %>)</span>
+  <span class="official float-right"><strong><%= @user.name %></strong> (<%= @user.email %>)</span>
 </h2>

 <%= form_for @user, url: admin_official_path(@user)  do |f| %>
  <%= f.text_field :official_position %>
  <%= f.select :official_level, official_level_options %>
-  <%= link_to t("admin.officials.edit.back"), admin_officials_path, class: "button radius small secondary" %>
+  <%= link_to t("admin.officials.edit.back"), admin_officials_path, class: "button small secondary" %>
  <%= f.submit %>

  <% if @user.official? %>
--- a/app/views/admin/officials/index.html.erb
+++ b/app/views/admin/officials/index.html.erb
@@ -15,7 +15,7 @@
      <%= official.official_position %>
    </span>

-    <%= link_to official.official? ? t("admin.officials.search.edit_official") : t("admin.officials.search.make_official"), edit_admin_official_path(official), class: "button radius tiny right" %>
+    <%= link_to official.official? ? t("admin.officials.search.edit_official") : t("admin.officials.search.make_official"), edit_admin_official_path(official), class: "button small float-right" %>
  </li>
 <% end %>
 </ul>
--- a/app/views/admin/officials/search.html.erb
+++ b/app/views/admin/officials/search.html.erb
@@ -15,7 +15,7 @@
      <span class="bullet">&nbsp;&bull;&nbsp;</span>
      <span class="level"><%= t("admin.officials.level_#{user.official_level}") %></span>

-    <%= link_to user.official? ? t("admin.officials.search.edit_official") : t("admin.officials.search.make_official"), edit_admin_official_path(user), class: "button radius tiny right" %>
+    <%= link_to user.official? ? t("admin.officials.search.edit_official") : t("admin.officials.search.make_official"), edit_admin_official_path(user), class: "button small float-right" %>
    </li>
  <% end %>
 </ul>
--- a/app/views/admin/organizations/index.html.erb
+++ b/app/views/admin/organizations/index.html.erb
@@ -7,7 +7,7 @@
      <%= text_field_tag :term, "", placeholder: t("admin.organizations.index.search_placeholder") %>
    </div>
    <div class="form-inline small-12 medium-6 column">
-      <%= f.submit t("admin.organizations.index.search"), class: "button radius success" %>
+      <%= f.submit t("admin.organizations.index.search"), class: "button success" %>
    </div>
  </div>
 <% end %>
@@ -36,7 +36,7 @@
      <td>
        <%= link_to t("admin.organizations.index.verify"),
                verify_admin_organization_path(organization, request.query_parameters),
-                method: :put, class: "button radius tiny success"
+                method: :put, class: "button small success"
        %>
      </td>
    <% end %>
@@ -49,7 +49,7 @@
    <% if can? :reject, organization %>
      <td><%= link_to t("admin.organizations.index.reject"),
                reject_admin_organization_path(organization, request.query_parameters),
-                method: :put, class: "button radius tiny alert"
+                method: :put, class: "button small alert"
          %>
      </td>
    <% end %>
--- a/app/views/admin/organizations/search.html.erb
+++ b/app/views/admin/organizations/search.html.erb
@@ -7,7 +7,7 @@
      <%= text_field_tag :term, "", placeholder: t("admin.organizations.index.search_placeholder") %>
    </div>
    <div class="form-inline small-12 medium-6 column">
-      <%= f.submit t("admin.organizations.index.search"), class: "button radius success" %>
+      <%= f.submit t("admin.organizations.index.search"), class: "button success" %>
    </div>
  </div>
 <% end %>
@@ -32,7 +32,7 @@
      <td>
        <%= link_to t("admin.organizations.index.verify"),
                verify_admin_organization_path(organization, request.query_parameters),
-                method: :put, class: "button radius tiny success"
+                method: :put, class: "button small success"
        %>
      </td>
    <% end %>
@@ -45,7 +45,7 @@
    <% if can? :reject, organization %>
      <td><%= link_to t("admin.organizations.index.reject"),
                reject_admin_organization_path(organization, request.query_parameters),
-                method: :put, class: "button radius tiny alert"
+                method: :put, class: "button small alert"
          %>
      </td>
    <% end %>
--- a/app/views/admin/proposals/index.html.erb
+++ b/app/views/admin/proposals/index.html.erb
@@ -27,14 +27,14 @@
              restore_admin_proposal_path(proposal, request.query_parameters),
              method: :put,
              data: { confirm: t("admin.actions.confirm") },
-              class: "button radius tiny success no-margin" %>
+              class: "button small success no-margin" %>
      </td>
      <td>
        <% unless proposal.confirmed_hide? %>
          <%= link_to t("admin.actions.confirm_hide"),
                confirm_hide_admin_proposal_path(proposal, request.query_parameters),
                method: :put,
-                class: "button radius tiny warning right" %>
+                class: "button small warning float-right" %>
        <% end %>
      </td>
    </tr>
--- a/app/views/admin/settings/index.html.erb
+++ b/app/views/admin/settings/index.html.erb
@@ -7,7 +7,7 @@

      <%= form_for(setting, url: admin_setting_path(setting), html: { id: "edit_#{dom_id(setting)}"}) do |f| %>
        <%= f.text_area :value, label: false, id: dom_id(setting), lines: 1 %>
-        <%= f.submit(t('admin.settings.index.update_setting'), class: "button radius tiny success") %>
+        <%= f.submit(t('admin.settings.index.update_setting'), class: "button small success") %>
      <% end %>
    </li>
  <% end %>
@@ -27,7 +27,7 @@
      <%= form_for(feature_flag, url: admin_setting_path(feature_flag), html: { id: "edit_#{dom_id(feature_flag)}"}) do |f| %>

        <%= f.hidden_field :value, id: dom_id(feature_flag), value: (feature_flag.enabled? ? "" : "active") %>
-        <%= f.submit(t("admin.settings.index.features.#{feature_flag.enabled? ? 'disable' : 'enable'}"), class: "button radius tiny #{feature_flag.enabled? ? 'warning' : 'success'}", data: {confirm: t("admin.actions.confirm")}) %>
+        <%= f.submit(t("admin.settings.index.features.#{feature_flag.enabled? ? 'disable' : 'enable'}"), class: "button small #{feature_flag.enabled? ? 'warning' : 'success'}", data: {confirm: t("admin.actions.confirm")}) %>
      <% end %>
    </li>
  <% end %>
--- a/app/views/admin/shared/_proposal_search.html.erb
+++ b/app/views/admin/shared/_proposal_search.html.erb
@@ -4,7 +4,7 @@
      <%= text_field_tag :search, "", placeholder: t("admin.shared.proposal_search.placeholder") %>
    </div>
    <div class="form-inline small-12 medium-6 column">
-      <%= f.submit t("admin.shared.proposal_search.button"), class: "button radius success" %>
+      <%= f.submit t("admin.shared.proposal_search.button"), class: "button success" %>
    </div>
  </div>
 <% end %>
--- a/app/views/admin/shared/_user_search.html.erb
+++ b/app/views/admin/shared/_user_search.html.erb
@@ -4,7 +4,7 @@
      <%= text_field_tag :name_or_email, "", placeholder: t("admin.shared.user_search.placeholder") %>
    </div>
    <div class="form-inline small-12 medium-6 column">
-      <%= f.submit t("admin.shared.user_search.button"), class: "button radius success" %>
+      <%= f.submit t("admin.shared.user_search.button"), class: "button success" %>
    </div>
  </div>
 <% end %>
--- a/app/views/admin/spending_proposals/index.html.erb
+++ b/app/views/admin/spending_proposals/index.html.erb
@@ -1,6 +1,6 @@
 <h2><%= t("admin.spending_proposals.index.title") %></h2>

-<div class="small-12 medium-4 column right">
+<div class="small-12 medium-4 column float-right">
  <%= form_tag admin_spending_proposals_path, method: :get, enforce_utf8: false do %>
    <%= select_tag :geozone_id, options_for_select(geozone_select_options.unshift([t("geozones.none"), "all"]), params[:geozone_id]),
                  { prompt: t("admin.spending_proposals.index.geozone_filter_all"),
--- a/app/views/admin/spending_proposals/show.html.erb
+++ b/app/views/admin/spending_proposals/show.html.erb
@@ -30,10 +30,10 @@
 <h2><%= t("admin.spending_proposals.show.responsibles") %></h2>

 <p><strong><%= t("admin.spending_proposals.show.assigned_admin") %>:</strong>
-   <%= form_for(@spending_proposal, url: assign_admin_admin_spending_proposal_path(@spending_proposal), remote: true, html: {id: 'administrator_assignment_form'}) do |f| %>
-     <%= f.select :administrator_id, @admins.collect { |a| [ "#{a.name} (#{a.email})", a.id ] }, {include_blank: t("admin.spending_proposals.show.undefined"), label: false}, class: "js-submit-on-change" %>
-   <% end %>
- </p>
+  <%= form_for(@spending_proposal, url: assign_admin_admin_spending_proposal_path(@spending_proposal), remote: true, html: {id: 'administrator_assignment_form'}) do |f| %>
+   <%= f.select :administrator_id, @admins.collect { |a| [ "#{a.name} (#{a.email})", a.id ] }, {include_blank: t("admin.spending_proposals.show.undefined"), label: false}, class: "js-submit-on-change" %>
+  <% end %>
+</p>

 <p><strong><%= t("admin.spending_proposals.show.assigned_valuators") %>:</strong></p>
 <div id="assigned_valuators">
@@ -56,7 +56,6 @@
  <% if @valuators.blank? %><p><%= t("admin.spending_proposals.show.no_valuators") %></p><% end %>
 </div>

-
 <h2><%= t("admin.spending_proposals.show.dossier") %></h2>

 <p><strong><%= t("admin.spending_proposals.show.price") %> (<%= t("admin.spending_proposals.show.currency") %>):</strong>
--- a/app/views/admin/stats/show.html.erb
+++ b/app/views/admin/stats/show.html.erb
@@ -79,12 +79,12 @@
        </div>
      </div>

-      <div class="small-12">
+      <div class="small-12 column">
        <h2><%= t "admin.stats.show.visits_title" %></h2>
        <%= visits_chart_tag id: "visits" %>
      </div>

-      <div class="small-12">
+      <div class="small-12 column">
        <% @event_types.each do |event, count| %>
          <h2><%= event.titleize %> (<%= count %>)</h2>
          <%= events_chart_tag event %>
--- a/app/views/admin/tags/index.html.erb
+++ b/app/views/admin/tags/index.html.erb
@@ -16,7 +16,7 @@
    </div>
  </div>

-  <%= f.submit(t("admin.tags.create"), class: "button radius success") %>
+  <%= f.submit(t("admin.tags.create"), class: "button success") %>

 <% end %>

@@ -32,14 +32,14 @@
          as: :tag,
          html: { id: "edit_tag_#{tag.id}", class: "text-right"}) do |f| %>

-          <span class="left">
+          <span class="float-left">
            <%= f.label "featured_#{tag.id}" do %>
              <%= f.check_box :featured, label: false, id: "tag_featured_#{tag.id}", class: "inline-block" %>
              <span class="checkbox inline-block"><%= t("admin.tags.mark_as_featured") %></span>
            <% end %>
          </span>

-        <%= f.submit(t("admin.tags.update"), class: "button radius tiny success") %>
+        <%= f.submit(t("admin.tags.update"), class: "button small success") %>

        <%= link_to t("admin.tags.destroy"), admin_tag_path(tag), method: :delete, class: "delete" %>
      <% end %>
--- a/app/views/admin/users/index.html.erb
+++ b/app/views/admin/users/index.html.erb
@@ -13,12 +13,12 @@
          restore_admin_user_path(user, request.query_parameters),
          method: :put,
          data: { confirm: t("admin.actions.confirm") },
-          class: "button radius tiny success right" %>
+          class: "button small success float-right" %>
    <% unless user.confirmed_hide? %>
      <%= link_to t("admin.actions.confirm_hide"),
          confirm_hide_admin_user_path(user, request.query_parameters),
          method: :put,
-          class: "button radius tiny warning right" %>
+          class: "button small warning float-right" %>
    <% end %>
  </li>
 <% end %>
--- a/app/views/admin/users/show.html.erb
+++ b/app/views/admin/users/show.html.erb
@@ -7,7 +7,7 @@
 </p>
 <p>
  <%= link_to t("admin.users.show.back"), admin_users_path,
-            class: "button radius tiny secondary" %>
+            class: "button small secondary" %>
 </p>

 <% if @debates.present? %>
--- a/app/views/comments/_comment.html.erb
+++ b/app/views/comments/_comment.html.erb
@@ -10,16 +10,16 @@
        <% end %>
      <% else %>
        <% if comment.as_administrator? %>
-          <%= image_tag("admin_avatar.png", size: 32, class: "admin-avatar left") %>
+          <%= image_tag("admin_avatar.png", size: 32, class: "admin-avatar float-left") %>
        <% elsif comment.as_moderator? %>
-          <%= image_tag("moderator_avatar.png", size: 32, class: "moderator-avatar left") %>
+          <%= image_tag("moderator_avatar.png", size: 32, class: "moderator-avatar float-left") %>
        <% else %>
        <% if comment.user.hidden? || comment.user.erased? %>
            <i class="icon-deleted user-deleted"></i>
          <% elsif comment.user.organization? %>
-            <%= image_tag("collective_avatar.png", size: 32, class: "avatar left") %>
+            <%= image_tag("collective_avatar.png", size: 32, class: "avatar float-left") %>
          <% else %>
-            <%= avatar_image(comment.user, seed: comment.user_id, size: 32, class: "left") %>
+            <%= avatar_image(comment.user, seed: comment.user_id, size: 32, class: "float-left") %>
          <% end %>
        <% end %>

@@ -68,7 +68,7 @@
          </div>

          <div id="<%= dom_id(comment) %>_reply" class="reply">
-            <span id="<%= dom_id(comment) %>_votes" class="comment-votes right">
+            <span id="<%= dom_id(comment) %>_votes" class="comment-votes float-right">
              <%= render 'comments/votes', comment: comment %>
            </span>

--- a/app/views/comments/_errors.html.erb
+++ b/app/views/comments/_errors.html.erb
@@ -1,3 +1,3 @@
-<div class="alert-box alert radius">
+<div data-alert class="callout alert">
  <%= t("errors.messages.blank").capitalize %>
 </div>
--- a/app/views/comments/_flag_actions.html.erb
+++ b/app/views/comments/_flag_actions.html.erb
@@ -1,45 +1,30 @@
 <span class="flag-content">
  <% if show_flag_action? comment %>
    <span class="divider">&nbsp;|&nbsp;</span>
-    <a class="button" id="flag-expand-comment-<%= comment.id %>"
-      data-dropdown="flag-drop-comment-<%= comment.id %>"
-      aria-controls="flag-drop-comment-<%= comment.id %>"
-      aria-expanded="false"
-      title="<%= t('shared.flag') %>">
-      &nbsp;
-      <i class="icon-flag flag-disable"></i>&nbsp;&nbsp;
+    <a id="flag-expand-comment-<%= comment.id %>"
+    data-toggle="flag-drop-comment-<%= comment.id %>"
+    title="<%= t('shared.flag') %>">
+      <i class="icon-flag flag-disable"></i>
    </a>
-    <ul id="flag-drop-comment-<%= comment.id %>"
-        class="f-dropdown"
-        data-dropdown-content
-        aria-hidden="true"
-        tabindex="-1">
-      <li>
-        <%= link_to t("shared.flag"), flag_comment_path(comment), method: :put,
-                    remote: true, id: "flag-comment-#{comment.id}" %>
-      </li>
-    </ul>
+    <div id="flag-drop-comment-<%= comment.id %>"
+         class="dropdown-pane"
+         data-dropdown
+         data-auto-focus="true">
+      <%= link_to t("shared.flag"), flag_comment_path(comment), method: :put,
+                  remote: true, id: "flag-comment-#{comment.id}" %>
+    </div>
  <% end %>

  <% if show_unflag_action? comment %>
    <span class="divider">&nbsp;|&nbsp;</span>
-    <a class="button" id="unflag-expand-comment-<%= comment.id %>"
-       data-dropdown="unflag-drop-comment-<%= comment.id %>"
-       aria-controls="unflag-drop-comment-<%= comment.id %>"
-       aria-expanded="false"
+    <a id="unflag-expand-comment-<%= comment.id %>"
+       data-toggle="unflag-drop-comment-<%= comment.id %>"
       title="<%= t('shared.unflag') %>">
-      &nbsp;
-      <i class="icon-flag flag-active"></i>&nbsp;&nbsp;
+      <i class="icon-flag flag-active"></i>
    </a>
-    <ul id="unflag-drop-comment-<%= comment.id %>"
-        class="f-dropdown"
-        data-dropdown-content
-        aria-hidden="true"
-        tabindex="-1">
-      <li>
-        <%= link_to t("shared.unflag"), unflag_comment_path(comment), method: :put,
-                    remote: true, id: "unflag-comment-#{comment.id}" %>
-      </li>
-    </ul>
+    <div class="dropdown-pane" id="unflag-drop-comment-<%= comment.id %>" data-dropdown data-auto-focus="true">
+      <%= link_to t("shared.unflag"), unflag_comment_path(comment), method: :put,
+                  remote: true, id: "unflag-comment-#{comment.id}" %>
+    </div>
  <% end %>
 </span>
--- a/app/views/comments/_form.html.erb
+++ b/app/views/comments/_form.html.erb
@@ -8,16 +8,16 @@
      <%= f.hidden_field :commentable_id, value: commentable.id %>
      <%= f.hidden_field :parent_id, value: parent_id %>

-      <%= f.submit comment_button_text(parent_id), class: "button radius small inline-block" %>
+      <%= f.submit comment_button_text(parent_id), class: "button" %>

      <% if can? :comment_as_moderator, commentable %>
-        <div class="right">
+        <div class="float-right">
          <%= f.check_box :as_moderator, id: "comment-as-moderator-#{css_id}", label: false %>
          <%= label_tag "comment-as-moderator-#{css_id}", t("comments.form.comment_as_moderator"), class: "checkbox" %>
        </div>
      <% end %>
      <% if can? :comment_as_administrator, commentable %>
-        <div class="right">
+        <div class="float-right">
          <%= f.check_box :as_administrator, id: "comment-as-administrator-#{css_id}",label: false %>
          <%= label_tag "comment-as-administrator-#{css_id}", t("comments.form.comment_as_admin"), class: "checkbox" %>
        </div>
--- a/app/views/comments/show.html.erb
+++ b/app/views/comments/show.html.erb
@@ -1,7 +1,7 @@
 <div class="row">
  <div class="small-12 column margin-top">
-    <%= link_to @comment.commentable, class: "left back"  do %>
-      <i class="icon-angle-left left"></i>
+    <%= link_to @comment.commentable, class: "back" do %>
+      <i class="icon-angle-left"></i>
      <%= t("comments.show.return_to_commentable") + @comment.commentable.title %>
    <% end %>
  </div>
--- a/app/views/debates/_comments.html.erb
+++ b/app/views/debates/_comments.html.erb
@@ -14,7 +14,7 @@
        <% else %>
        <br>

-        <div class="alert-box radius info">
+        <div data-alert class="callout primary">
          <%= t("debates.show.login_to_comment",
              signin: link_to(t("votes.signin"), new_user_session_path),
              signup: link_to(t("votes.signup"), new_user_registration_path)).html_safe %>
--- a/app/views/debates/_debate.html.erb
+++ b/app/views/debates/_debate.html.erb
@@ -1,11 +1,11 @@
 <% cache [locale_and_user_status, debate, @debate_votes[debate.id]] do %>
-  <div id="<%= dom_id(debate) %>" class="debate clear">
+  <div id="<%= dom_id(debate) %>" class="debate clear" data-type="debate">
    <div class="panel">
      <div class="row">

        <div class="small-12 medium-9 column">
          <div class="debate-content">
-            <span class="label-debate left"><%= t("debates.debate.debate") %></span>
+            <span class="label-debate float-left"><%= t("debates.debate.debate") %></span>
            <i class="icon-debates"></i>
            <h3><%= link_to debate.title, debate %></h3>
            <p class="debate-info">
--- a/app/views/debates/_flag_actions.html.erb
+++ b/app/views/debates/_flag_actions.html.erb
@@ -1,23 +1,19 @@
 <span class="flag-content">
  <% if show_flag_action? debate %>
-    <a class="button" id="flag-expand-debate-<%= debate.id %>" data-dropdown="flag-drop-debate-<%= debate.id %>" aria-controls="flag-drop-debate-<%= debate.id %>" aria-expanded="false" title="<%= t('shared.flag') %>">
-      &nbsp;<i class="icon-flag flag-disable"></i>&nbsp;&nbsp;
+    <a id="flag-expand-debate-<%= debate.id %>" data-toggle="flag-drop-debate-<%= debate.id %>" title="<%= t('shared.flag') %>">
+      <i class="icon-flag flag-disable"></i>
    </a>
-    <ul id="flag-drop-debate-<%= debate.id %>" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
-      <li>
-        <%= link_to t('shared.flag'), flag_debate_path(debate), method: :put, remote: true, id: "flag-debate-#{ debate.id }" %>
-      </li>
-    </ul>
+    <div class="dropdown-pane" id="flag-drop-debate-<%= debate.id %>" data-dropdown data-auto-focus="true">
+      <%= link_to t('shared.flag'), flag_debate_path(debate), method: :put, remote: true, id: "flag-debate-#{ debate.id }" %>
+    </div>
  <% end %>

  <% if show_unflag_action? debate %>
-    <a class="button" id="unflag-expand-debate-<%= debate.id %>" data-dropdown="unflag-drop-debate-<%= debate.id %>" aria-controls="unflag-drop-debate-<%= debate.id %>" aria-expanded="false" title="<%= t('shared.unflag') %>">
-      &nbsp;<i class="icon-flag flag-active"></i>&nbsp;&nbsp;
+    <a id="unflag-expand-debate-<%= debate.id %>" data-toggle="unflag-drop-debate-<%= debate.id %>" title="<%= t('shared.unflag') %>">
+      <i class="icon-flag flag-active"></i>
    </a>
-    <ul id="unflag-drop-debate-<%= debate.id %>" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
-      <li>
-        <%= link_to t('shared.unflag'), unflag_debate_path(debate), method: :put, remote: true, id: "unflag-debate-#{ debate.id }" %>
-      </li>
-    </ul>
+    <div class="dropdown-pane" id="unflag-drop-debate-<%= debate.id %>" data-dropdown data-auto-focus="true">
+      <%= link_to t('shared.unflag'), unflag_debate_path(debate), method: :put, remote: true, id: "unflag-debate-#{ debate.id }" %>
+    </div>
  <% end %>
 </span>
--- a/app/views/debates/_form.html.erb
+++ b/app/views/debates/_form.html.erb
@@ -37,7 +37,7 @@
    </div>

    <div class="actions small-12 column">
-      <%= f.submit(class: "button radius", value: t("debates.#{action_name}.form.submit_button")) %>
+      <%= f.submit(class: "button", value: t("debates.#{action_name}.form.submit_button")) %>
    </div>
  </div>
 <% end %>
--- a/app/views/debates/edit.html.erb
+++ b/app/views/debates/edit.html.erb
@@ -1,12 +1,12 @@
 <div class="debate-edit row">

  <div class="small-12 column">
-    <%= link_to debates_path, class: "left back clear" do %>
-      <i class="icon-angle-left left"></i>
+    <%= link_to debates_path, class: "back" do %>
+      <i class="icon-angle-left"></i>
      <%= t("debates.edit.back_link") %>
    <% end %>

-    <div class="right">
+    <div class="float-right">
      <%= link_to t("debates.edit.show_link"), @debate %>
    </div>

--- a/app/views/debates/index.html.erb
+++ b/app/views/debates/index.html.erb
@@ -9,7 +9,7 @@
  <div class="wrap row">
    <div id="debates" class="debates-list small-12 medium-9 column">

-      <div class="small-12 margin-top search-results">
+      <div class="small-12 search-results">
        <% if @search_terms || @advanced_search_terms %>
          <h2>
            <%= page_entries_info @debates %>
@@ -34,7 +34,7 @@
      <%= render 'shared/order_links', i18n_namespace: "debates.index" %>

      <div class="show-for-small-only">
-        <%= link_to t("debates.index.start_debate"), new_debate_path, class: 'button radius expand' %>
+        <%= link_to t("debates.index.start_debate"), new_debate_path, class: 'button expanded' %>
      </div>

      <%= render @debates %>
@@ -42,8 +42,9 @@
    </div>

    <div class="small-12 medium-3 column">
-      <aside class="sidebar" role="complementary">
-        <%= link_to t("debates.index.start_debate"), new_debate_path, class: 'button radius expand' %>
+
+      <aside class="margin-bottom" role="complementary">
+        <%= link_to t("debates.index.start_debate"), new_debate_path, class: 'button expanded' %>
        <%= render "shared/tag_cloud", taggable: 'debate' %>
      </aside>
    </div>
--- a/app/views/debates/new.html.erb
+++ b/app/views/debates/new.html.erb
@@ -1,12 +1,12 @@
 <div class="debate-new row">

  <div class="small-12 medium-9 column">
-    <%= link_to debates_path, class: "left back" do %>
-      <i class="icon-angle-left left"></i>
+    <%= link_to debates_path, class: "back" do %>
+      <i class="icon-angle-left"></i>
      <%= t("debates.new.back_link") %>
    <% end %>
    <h1><%= t("debates.new.start_new") %></h1>
-    <div class="alert-box info radius">
+    <div data-alert class="callout primary">
      <%= t("debates.new.info",
      info_link: link_to(t("debates.new.info_link"), new_proposal_path )).html_safe %>
      <%= link_to "/more_information", target: "_blank" do %>
@@ -17,7 +17,7 @@
  </div>

  <div class="small-12 medium-3 column">
-    <i class="icon-debates right"></i>
+    <i class="icon-debates float-right"></i>
    <h2><%= t("debates.new.recommendations_title") %></h2>
    <ul class="recommendations">
      <li><%= t("debates.new.recommendation_one") %></li>
--- a/app/views/debates/show.html.erb
+++ b/app/views/debates/show.html.erb
@@ -3,11 +3,12 @@
  <section class="debate-show">
    <div id="<%= dom_id(@debate) %>" class="row">
      <div class="small-12 medium-9 column">
-        <i class="icon-angle-left left"></i>&nbsp;
-        <%= link_to t("debates.show.back_link"), :back, class: 'left back' %>
-
+        <%= link_to :back, class: "back" do %>
+          <i class="icon-angle-left"></i>
+          <%= t("debates.show.back_link") %>
+        <% end %>
        <% if current_user && @debate.editable_by?(current_user) %>
-          <%= link_to edit_debate_path(@debate), class: 'edit-debate button success tiny radius right' do %>
+          <%= link_to edit_debate_path(@debate), class: 'edit-debate button success small float-right' do %>
            <i class="icon-edit"></i>
            <%= t("debates.show.edit_debate_link") %>
          <% end %>
@@ -15,7 +16,7 @@

        <h1><%= @debate.title %></h1>
        <% if @debate.conflictive? %>
-          <div class="alert-box alert radius margin-top">
+          <div data-alert class="callout alert margin-top">
            <strong><%= t("debates.show.flag") %></strong>
          </div>
        <% end %>
--- a/app/views/devise/confirmations/new.html.erb
+++ b/app/views/devise/confirmations/new.html.erb
@@ -1,6 +1,5 @@
 <% provide :title do %><%= t("devise_views.confirmations.new.title") %><% end %>
-<h2 class="text-center"><%= t("devise_views.confirmations.new.title") %></h2>
-
+<h2><%= t("devise_views.confirmations.new.title") %></h2>

 <%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
  <%= render 'shared/errors', resource: resource %>
@@ -8,19 +7,16 @@
  <div class="row">
    <div class="small-12 columns">
      <%= f.email_field :email, autofocus: true, placeholder: t("devise_views.confirmations.new.email_label"), value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>
+
+      <% if @requires_password %>
+          <p><%= f.password_field :password %></p>
+          <p><%= f.password_field :password_confirmation %></p>
+      <% end %>
+
+      <%= hidden_field_tag :confirmation_token,@confirmation_token %>
+
+      <%= f.submit(t("devise_views.confirmations.new.submit"), class: "button expanded") %>
    </div>
-
-    <% if @requires_password %>
-        <p><%= f.password_field :password %></p>
-        <p><%= f.password_field :password_confirmation %></p>
-    <% end %>
-
-    <%= hidden_field_tag :confirmation_token,@confirmation_token %>
-
-    <div class="small-12 columns">
-      <%= f.submit(t("devise_views.confirmations.new.submit"), class: "button radius expand") %>
-    </div>
-  </div>
 <% end %>

 <%= render "devise/shared/links" %>
--- a/app/views/devise/confirmations/show.html.erb
+++ b/app/views/devise/confirmations/show.html.erb
@@ -27,7 +27,7 @@
  <%= hidden_field_tag :confirmation_token, params[:confirmation_token] %>

  <div class="small-12 columns">
-    <%= f.submit(t("devise_views.confirmations.show.submit"), class: "button radius expand") %>
+    <%= f.submit(t("devise_views.confirmations.show.submit"), class: "button expanded") %>
  </div>
 <% end %>

--- a/app/views/devise/menu/_login_items.html.erb
+++ b/app/views/devise/menu/_login_items.html.erb
@@ -1,31 +1,29 @@
-<ul class="right">
-  <% if user_signed_in? %>
-    <li>
-      <%= link_to notifications_path, class: "notifications" do %>
-        <% if current_user.notifications_count > 0 %>
-          <i class="icon-circle"></i>
-          <i class="icon-notification" title="<%= t('layouts.header.new_notifications', count: current_user.notifications_count).html_safe %>">
-          </i>
-        <% else %>
-          <i class="icon-no-notification" title="<%= t('layouts.header.no_notifications') %>"></i>
-        <% end %>
+<% if user_signed_in? %>
+  <li>
+    <%= link_to notifications_path, class: "notifications" do %>
+      <% if current_user.notifications_count > 0 %>
+        <i class="icon-circle"></i>
+        <i class="icon-notification" title="<%= t('layouts.header.new_notifications', count: current_user.notifications_count).html_safe %>">
+        </i>
+      <% else %>
+        <i class="icon-no-notification" title="<%= t('layouts.header.no_notifications') %>"></i>
      <% end %>
-    </li>
-    <li>
-      <%= link_to(t("layouts.header.my_activity_link"), user_path(current_user)) %>
-    </li>
-    <li>
-      <%= link_to(t("layouts.header.my_account_link"), account_path) %>
-    </li>
-    <li>
-      <%= link_to(t("devise_views.menu.login_items.logout"), destroy_user_session_path, method: :delete) %>
-    </li>
-  <% else %>
-    <li>
-      <%= link_to(t("devise_views.menu.login_items.login"), new_user_session_path)  %>
-    </li>
-    <li>
-      <%= link_to(t("devise_views.menu.login_items.signup"), new_user_registration_path, class: "button radius small") %>
-    </li>
-  <% end %>
-</ul>
+    <% end %>
+  </li>
+  <li>
+    <%= link_to(t("layouts.header.my_activity_link"), user_path(current_user)) %>
+  </li>
+  <li>
+    <%= link_to(t("layouts.header.my_account_link"), account_path) %>
+  </li>
+  <li>
+    <%= link_to(t("devise_views.menu.login_items.logout"), destroy_user_session_path, method: :delete) %>
+  </li>
+<% else %>
+  <li>
+    <%= link_to(t("devise_views.menu.login_items.login"), new_user_session_path)  %>
+  </li>
+  <li>
+    <%= link_to(t("devise_views.menu.login_items.signup"), new_user_registration_path, class: "button") %>
+  </li>
+<% end %>
--- a/app/views/devise/passwords/new.html.erb
+++ b/app/views/devise/passwords/new.html.erb
@@ -1,17 +1,14 @@
 <% provide :title do %><%= t("devise_views.passwords.new.title") %><% end %>
-<h2 class="text-center"><%= t("devise_views.passwords.new.title") %></h2>
+<h2><%= t("devise_views.passwords.new.title") %></h2>
 <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
  <%= render 'shared/errors', resource: resource %>

  <div class="row">
    <div class="small-12 column">
      <%= f.email_field :email, autofocus: true, placeholder: t("devise_views.passwords.new.email_label") %>
-    </div>

-    <div class="small-12 column text-center">
-      <%= f.submit t("devise_views.passwords.new.send_submit"), class: "button radius expand" %>
+      <%= f.submit t("devise_views.passwords.new.send_submit"), class: "button expanded" %>
    </div>
-  </div>
 <% end %>

 <%= render "devise/shared/links" %>
--- a/app/views/devise/sessions/new.html.erb
+++ b/app/views/devise/sessions/new.html.erb
@@ -15,7 +15,7 @@
    </div>

    <div class="small-12 columns">
-      <%= link_to t("devise_views.shared.links.new_password"), new_password_path(resource_name), class: "right", tabindex: "3" %>
+      <%= link_to t("devise_views.shared.links.new_password"), new_password_path(resource_name), class: "float-right", tabindex: "3" %>
      <%= f.password_field :password, autocomplete: "off", placeholder: t("devise_views.sessions.new.password_label"), tabindex: "2" %>
    </div>

@@ -29,7 +29,7 @@
    <% end -%>

    <div class="small-12 columns">
-      <%= f.submit(t("devise_views.sessions.new.submit"), class: "button radius expand") %>
+      <%= f.submit(t("devise_views.sessions.new.submit"), class: "button expanded") %>
    </div>
  </div>
 <% end %>
--- a/app/views/kaminari/_gap.html.erb
+++ b/app/views/kaminari/_gap.html.erb
@@ -1,3 +1,3 @@
-<li>
+<li class="ellipsis" aria-hidden="true">
  <%= t("views.pagination.truncate").html_safe %>
 </li>
--- a/app/views/kaminari/_next_page.html.erb
+++ b/app/views/kaminari/_next_page.html.erb
@@ -1,3 +1,3 @@
-<li>
+<li class="pagination-next">
  <%= link_to t("views.pagination.next").html_safe, url, :rel => "next", :remote => remote %>
 </li>
--- a/app/views/kaminari/_page.html.erb
+++ b/app/views/kaminari/_page.html.erb
@@ -1,3 +1,10 @@
-<li class="<%= 'current' if page.current? %>">
-  <%= link_to page, url, {:remote => remote, :rel => page.next? ? "next" : page.prev? ? "prev" : nil} %>
-</li>
+<% if page.current? %>
+  <li class="current">
+    <span class="show-for-sr"><%= t("views.pagination.current") %></span>
+    <%= page %>
+  </li>
+<% else %>
+  <li>
+    <%= link_to page, url, {:remote => remote, :rel => page.next? ? "next" : page.prev? ? "prev" : nil} %>
+  </li>
+<% end %>
--- a/app/views/kaminari/_paginator.html.erb
+++ b/app/views/kaminari/_paginator.html.erb
@@ -1,7 +1,7 @@
 <%= paginator.render do -%>
  <div class="pagination-centered">
    <nav>
-      <ul class="pagination">
+      <ul class="pagination text-center margin-top" role="navigation" aria-label="Pagination">
        <%= first_page_tag unless current_page.first? %>
        <%= prev_page_tag unless current_page.first? %>

--- a/app/views/kaminari/_prev_page.html.erb
+++ b/app/views/kaminari/_prev_page.html.erb
@@ -1,3 +1,3 @@
-<li>
+<li class="pagination-previous">
  <%= link_to t("views.pagination.previous").html_safe, url, :rel => "prev", :remote => remote %>
 </li>
--- a/app/views/layouts/_admin_header.html.erb
+++ b/app/views/layouts/_admin_header.html.erb
@@ -5,22 +5,33 @@
    </div>
  </section>

-  <div class="contain-to-grid clear">
-    <nav class="top-bar" data-topbar>
-      <ul class="title-area">
-        <li class="name">
-          <%= link_to root_path do %>
-            <%= image_tag('header_logo_madrid.png', class: 'left', size: '96x96', alt: t("layouts.header.logo")) %>
-            <%= setting['org_name'] %> <span>|</span> <span class="logo-site"><%= t("admin.dashboard.index.title") %></span>
-          <% end %>
-        </li>
-        <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
-      </ul>
+  <div class="row">
+    <div class="top-bar">

-      <section class="top-bar-section">
-        <%= render 'devise/menu/login_items' %>
-        <%= render 'shared/admin_login_items' %>
-      </section>
-    </nav>
+      <%= link_to Setting['org_name'], root_path, class: "logo show-for-small-only" %>
+
+      <span data-responsive-toggle="responsive-menu" data-hide-for="medium" class="float-right">
+        <span class="menu-icon dark" data-toggle></span>
+        <%= t("application.menu")%>
+      </span>
+
+      <div id="responsive-menu">
+        <div class="top-bar-title">
+          <%= link_to root_path, class: "hide-for-small-only" do %>
+            <%= image_tag('header_logo_madrid.png', class: 'hide-for-small-only float-left', size: '80x80', alt: t("layouts.header.logo")) %>
+            <%= Setting['org_name'] %>
+            &nbsp;|&nbsp;<%= t("admin.dashboard.index.title") %>
+          <% end %>
+        </div>
+
+        <div class="top-bar-right">
+          <ul class="menu">
+            <%= render "shared/admin_login_items" %>
+            <%= render "devise/menu/login_items" %>
+          </ul>
+        </div>
+
+      </div>
+    </div>
  </div>
 </header>
--- a/app/views/layouts/_header.html.erb
+++ b/app/views/layouts/_header.html.erb
@@ -1,22 +1,21 @@
 <header>
-  <section class="top-links show-for-medium-up">
-    <div class="row">
-      <%= render "shared/locale_switcher" %>
-      <div class="external-links">
-        <%= link_to setting['org_name'], root_path, class: ("selected" unless current_page?("/opendata")) %>&nbsp;|
-        <%= link_to t("layouts.header.external_link_transparency"), t("layouts.header.external_link_transparency_url") %>&nbsp;|
-        <%= link_to t("layouts.header.external_link_opendata"), "/opendata", class: ("selected" if current_page?("/opendata")) %>
-      </div>
-    </div>
-  </section>

-  <div class="contain-to-grid clear">
-    <nav class="top-bar" data-topbar>
-      <ul class="title-area">
-        <li class="toggle-topbar menu-icon"><a href="#"><span><%= t("application.menu")%></span></a></li>
-        <li class="name">
-          <%= link_to root_path do %>
-            <%= image_tag('header_logo_madrid.png', class: 'show-for-medium-up left', size: '80x80', alt: t("layouts.header.logo")) %>
+  <%= render "shared/top_links" %>
+
+  <div class="row">
+    <div class="top-bar">
+
+      <%= link_to Setting['org_name'], root_path, class: "logo show-for-small-only" %>
+
+      <span data-responsive-toggle="responsive-menu" data-hide-for="medium" class="float-right">
+        <span class="menu-icon dark" data-toggle></span>
+        <%= t("application.menu")%>
+      </span>
+
+      <div id="responsive-menu">
+        <div class="top-bar-title">
+          <%= link_to root_path, class: "hide-for-small-only" do %>
+            <%= image_tag('header_logo_madrid.png', class: 'hide-for-small-only float-left', size: '80x80', alt: t("layouts.header.logo")) %>
            <% if opendata_page? %>
              <%= t("layouts.header.open_gov", open: "#{t('layouts.header.open')}") %> <span>|</span>
              <span class="logo-site"><%= t("layouts.header.open_data") %></span>
@@ -24,70 +23,33 @@
               <%= setting['org_name'] %>
            <% end %>
          <% end %>
-        </li>
-      </ul>
-
-      <section class="top-bar-section">
-        <%= render "devise/menu/login_items" %>
-        <%= render "shared/admin_login_items" %>
-      </section>
-
-      <section class="subnavigation row">
-
-        <div class="small-12 medium-9 column">
-          <% if feature?(:debates) %>
-            <%= link_to t("layouts.header.debates"), debates_path, class: ("active" if controller_name == "debates") %>
-          <% end %>
-          <%= link_to t("layouts.header.proposals"), proposals_path, class: ("active" if  controller_name == "proposals") %>
-          <% if feature?(:spending_proposals) %>
-            <%= link_to t("layouts.header.spending_proposals"), spending_proposals_path, class: ("active" if controller_name == "spending_proposals") %>
-          <% end %>
-          <%= link_to t("layouts.header.more_information"), page_path('more_information'), class: ("active" if current_page?("/more_information"))  %>
-          <% if setting['blog_url'] %>
-            <%= link_to setting['blog_url'], target: "_blank" do %>
-              <%= t("layouts.header.external_link_blog") %>
-              <i class="icon-external"></i>
-            <% end %>
-          <% end %>
        </div>
-        <div class="small-12 medium-3 column">
-          <%= yield :header_addon %>
+
+        <div class="top-bar-right">
+          <ul class="menu">
+            <%= render "shared/admin_login_items" %>
+            <%= render "devise/menu/login_items" %>
+          </ul>
+
+          <div class="show-for-small-only">
+            <div class="subnavigation row">
+              <%= render "shared/subnavigation" %>
+            </div>
+          </div>
        </div>
-      </section>
-    </nav>
+      </div>
+    </div>
  </div>

-  <div class="row-full subnavigation-background"></div>
-
-  <% if home_page? %>
-    <div class="row home-page">
-      <div class="small-12 medium-7 column">
-        <h1><%= t("layouts.header.open_city_title") %></h1>
-        <p>
-          <%= t("layouts.header.open_city_slogan_html") %>&nbsp;
-          <%= link_to t("layouts.header.more_information"), page_path('more_information') %>
-        </p>
-        <div class="small-12 medium-6">
-          <%= link_to t("layouts.header.see_all"), proposals_path, class: "button radius see-more warning expand" %>
-        </div>
+  <div class="subnavigation row expanded">
+    <div class="row">
+      <div class="hide-for-small-only">
+        <%= render "shared/subnavigation" %>
      </div>
-
-      <div class="show-for-medium-up small-12 medium-5 column text-center">
-        <%= image_tag("icon_home.png", size: "330x240", alt:"", role:"presentation") %>
+      <div class="small-12 medium-3 column">
+        <%= yield :header_addon %>
      </div>
    </div>
-  <% end %>
+  </div>

-  <% if opendata_page? %>
-    <div class="row home-page">
-      <div class="small-12 medium-7 column">
-        <h1><%= t("pages.opendata.title") %></h1>
-        <h2><%= t("pages.opendata.slogan_html") %></h2>
-        <%= link_to t("pages.opendata.go_old"), t("layouts.header.external_link_opendata_url"), target: "_blank", class: "button radius" %>
-      </div>
-      <div class="show-for-medium-up small-12 medium-5 column text-center">
-        <%= image_tag("icon_home.png", size: "330x240", alt:"", role:"presentation") %>
-      </div>
-    </div>
-  <% end %>
 </header>
--- a/app/views/layouts/_test.html.erb
+++ b/app/views/layouts/_test.html.erb
@@ -0,0 +1,38 @@
+<div class="row">
+  <div class="top-bar">
+
+    <%= link_to Setting['org_name'], root_path, class: "logo show-for-small-only" %>
+
+    <span data-responsive-toggle="responsive-menu" data-hide-for="medium" class="float-right">
+      <span class="menu-icon dark" data-toggle></span>
+      <%= t("application.menu")%>
+    </span>
+
+    <div id="responsive-menu">
+      <div class="top-bar-title">
+        <%= link_to root_path, class: "hide-for-small-only" do %>
+          <%= image_tag('header_logo_madrid.png', class: 'hide-for-small-only float-left', size: '80x80', alt: t("layouts.header.logo")) %>
+          <% if opendata_page? %>
+            <%= t("layouts.header.open_gov", open: "#{t('layouts.header.open')}") %> <span>|</span>
+            <span class="logo-site"><%= t("layouts.header.open_data") %></span>
+          <% else %>
+             <%= Setting['org_name'] %>
+          <% end %>
+        <% end %>
+      </div>
+
+      <div class="top-bar-right">
+        <ul class="menu">
+          <%= render "shared/admin_login_items" %>
+          <%= render "devise/menu/login_items" %>
+        </ul>
+
+        <div class="show-for-small-only">
+          <div class="subnavigation row">
+            <%= render "shared/subnavigation" %>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
--- a/app/views/layouts/admin.html.erb
+++ b/app/views/layouts/admin.html.erb
@@ -7,7 +7,6 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title><%= content_for?(:title) ? yield(:title) : "Admin" %></title>
    <%= stylesheet_link_tag    "application" %>
-    <%= javascript_include_tag "vendor/modernizr" %>
    <%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
    <%= content_for :head %>
    <%= csrf_meta_tags %>
@@ -17,7 +16,7 @@
  <body class="admin">
    <%= render 'layouts/admin_header' %>

-    <div class="row">
+    <div class="row expanded">

      <div class="small-12 medium-3 column">
        <%= side_menu %>
@@ -25,15 +24,19 @@

      <div class="admin-content small-12 medium-9 column">
        <% if notice %>
-          <div data-alert class="alert-box radius success">
-            <a href="#" class="close" title="<%= t("application.close") %>">&times;</a>
+          <div data-alert class="callout success" data-closable>
+            <button class="close-button" aria-label="<%= t("application.close") %>" type="button" data-close>
+              <span aria-hidden="true">&times;</span>
+            </button>
            <%= notice %>
          </div>
        <% end %>

        <% if alert %>
-          <div data-alert class="alert-box radius alert">
-            <a href="#" class="close" title="<%= t("application.close") %>">&times;</a>
+          <div data-alert class="callout alert" data-closable>
+            <button class="close-button" aria-label="<%= t("application.close") %>" type="button" data-close>
+              <span aria-hidden="true">&times;</span>
+            </button>
            <%= alert %>
          </div>
        <% end %>
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -6,7 +6,6 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title><%= content_for?(:title) ? yield(:title) : setting['org_name'] %></title>
    <%= stylesheet_link_tag    "application" %>
-    <%= javascript_include_tag "vendor/modernizr" %>
    <%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
    <%= favicon_link_tag "favicon.ico" %>
@@ -25,8 +24,11 @@

      <!--[if lt IE 9]>
      <% if browser.ie? && cookies['ie_alert_closed'] != 'true' %>
-        <div data-alert class="alert-box info ie-alert-box">
-          <a href="#" class="close ie-alert-box-close-js">&times;</a>
+        <div data-alert class="callout primary ie-callout" data-closable>
+          <button class="close-button ie-callout-close-js"
+                  aria-label="<%= t("application.close") %>" type="button" data-close>
+            <span aria-hidden="true">&times;</span>
+          </button>
          <h2><%= t("layouts.application.ie_title") %></h2>
          <p>
            <%= t("layouts.application.ie",
@@ -41,23 +43,23 @@
      <![endif]-->

      <% if notice %>
-      <div id="notice" class="alert-messages">
-        <div class="row">
-          <div data-alert class="alert-box success radius">
-            <a href="#" class="close" title="<%= t("application.close") %>">&times;</a>
-            <%= notice %>
-          </div>
+      <div id="notice" data-alert class="row" data-closable>
+        <div class="callout success">
+          <button class="close-button" aria-label="<%= t("application.close") %>" type="button" data-close>
+            <span aria-hidden="true">&times;</span>
+          </button>
+          <%= notice %>
        </div>
      </div>
      <% end %>

      <% if alert %>
-      <div id="alert" class="alert-messages">
-        <div class="row">
-          <div data-alert class="alert-box alert radius">
-            <a href="#" class="close" title="<%= t("application.close") %>">&times;</a>
-            <%= alert %>
-          </div>
+      <div id="alert" data-alert class="row" data-closable>
+        <div class="callout alert">
+          <button class="close-button" aria-label="<%= t("application.close") %>" type="button" data-close>
+            <span aria-hidden="true">&times;</span>
+          </button>
+          <%= alert %>
        </div>
      </div>
      <% end %>
--- a/app/views/layouts/devise.html.erb
+++ b/app/views/layouts/devise.html.erb
@@ -6,7 +6,6 @@
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title><%= content_for?(:title) ? yield(:title) : "Gobierno abierto" %></title>
    <%= stylesheet_link_tag    "application" %>
-    <%= javascript_include_tag "vendor/modernizr" %>
    <%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
    <%= favicon_link_tag "favicon.ico" %>
@@ -18,7 +17,7 @@
        <div class="small-12 medium-8 large-5 column small-centered margin-top">
          <h1>
            <%= link_to root_path do %>
-              <%= image_tag('header_logo_madrid.png', class: 'show-for-medium-up left', size: '96x96', alt: t("layouts.header.logo")) %>
+              <%= image_tag('header_logo_madrid.png', class: 'show-for-medium-up float-left', size: '96x96', alt: t("layouts.header.logo")) %>
              <%= t("layouts.header.open_gov", open: "#{t('layouts.header.open')}").html_safe %>
            <% end %>
          </h1>
@@ -26,25 +25,26 @@
      </div>

      <div class="row auth">
-        <div class="small-12 medium-8 large-5 column small-centered">
-          <div class="panel">
-            <% if notice %>
-              <div data-alert class="alert-box radius success">
-                <a href="#" class="close" title="<%= t("application.close") %>">&times;</a>
-                  <%= notice %>
-              </div>
-            <% end %>
+        <div class="small-12 medium-8 large-5 column small-centered panel padding margin-bottom">
+          <% if notice %>
+            <div data-alert class="callout success" data-closable>
+              <button class="close-button" aria-label="<%= t("application.close") %>" type="button" data-close>
+                <span aria-hidden="true">&times;</span>
+              </button>
+              <%= notice %>
+            </div>
+          <% end %>

-            <% if alert %>
-              <div data-alert class="alert-box radius warning">
-                <a href="#" class="close" title="<%= t("application.close") %>">&times;</a>
-                  <%= alert %>
-              </div>
-            <% end %>
+          <% if alert %>
+            <div data-alert class="callout warning" data-closable>
+              <button class="close-button" aria-label="<%= t("application.close") %>" type="button" data-close>
+                <span aria-hidden="true">&times;</span>
+              </button>
+              <%= alert %>
+            </div>
+          <% end %>

-            <%= yield %>
-
-          </div>
+          <%= yield %>
        </div>
      </div>
      <div class="push"></div>
--- a/app/views/layouts/management.html.erb
+++ b/app/views/layouts/management.html.erb
@@ -8,7 +8,6 @@
    <title><%= content_for?(:title) ? yield(:title) : "Management" %></title>
    <%= stylesheet_link_tag  "application", media: "all" %>
    <%= stylesheet_link_tag  "print", media: "print" %>
-    <%= javascript_include_tag "vendor/modernizr" %>
    <%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
    <%= content_for :head %>
    <%= csrf_meta_tags %>
@@ -28,8 +27,8 @@
          <ul class="title-area">
            <li class="name">
              <%= link_to management_root_path do %>
-                <%= image_tag('header_logo_madrid.png', class: 'left', size: '96x96') %>
-                <%= setting['org_name'] %> <span>|</span> <span class="logo-site"><%= t("management.dashboard.index.title") %></span>
+                <%= image_tag('header_logo_madrid.png', class: 'float-left', size: '96x96') %>
+                <%= Setting['org_name'] %> <span>|</span> <span class="logo-site"><%= t("management.dashboard.index.title") %></span>
              <% end %>
            </li>
            <li class="toggle-topbar menu-icon"><a href="#"><span></span></a></li>
@@ -47,15 +46,19 @@

      <div class="admin-content small-12 medium-9 column">
        <% if notice %>
-          <div data-alert class="alert-box radius success">
-            <a href="#" class="close" title="<%= t("application.close") %>">&times;</a>
+          <div data-alert class="callout success" data-closable>
+            <button class="close-button" aria-label="<%= t("application.close") %>" type="button" data-close>
+              <span aria-hidden="true">&times;</span>
+            </button>
            <%= notice %>
          </div>
        <% end %>

        <% if alert %>
-          <div data-alert class="alert-box radius alert">
-            <a href="#" class="close" title="<%= t("application.close") %>">&times;</a>
+          <div data-alert class="callout alert" data-closable>
+            <button class="close-button" aria-label="<%= t("application.close") %>" type="button" data-close>
+              <span aria-hidden="true">&times;</span>
+            </button>
            <%= alert %>
          </div>
        <% end %>
--- a/app/views/legislations/show.html.erb
+++ b/app/views/legislations/show.html.erb
@@ -1,11 +1,12 @@
 <div class="row margin-top">
  <div class="small-12 column">
-    <div class="right">
-      <a data-dropdown="drop-help" aria-controls="drop-help" aria-expanded="false" class="button radius warning">
+    <div class="float-right">
+      <a class="button warning" type="button" data-toggle="help-legislation">
        <sub><i class="icon-edit"></i></sub>&nbsp;
        <%= t("legislation.help.title") %>
      </a>
-      <div id="drop-help" data-dropdown-content class="f-dropdown content" aria-hidden="true" tabindex="-1">
+
+      <div class="dropdown-pane" id="help-legislation" data-dropdown data-auto-focus="true">
        <p>
          <%= t("legislation.help.text",
              sign_in: link_to(t("legislation.help.text_sign_in"), new_user_session_path),
--- a/app/views/management/_account_info.html.erb
+++ b/app/views/management/_account_info.html.erb
@@ -2,7 +2,7 @@
  <section class="small-12 medium-9 column margin-top">
    <div class="account-info">

-      <%= link_to(t("management.account_info.change_user"), logout_management_users_path, method: :delete, class: 'right change-user') %>
+      <%= link_to(t("management.account_info.change_user"), logout_management_users_path, method: :delete, class: 'float-right change-user') %>

      <% if managed_user.level_two_or_three_verified? %>
        <p>
--- a/app/views/management/document_verifications/invalid_document.html.erb
+++ b/app/views/management/document_verifications/invalid_document.html.erb
@@ -1,4 +1,4 @@
-<div class="alert-box alert radius">
+<div data-alert class="callout alert">
  <% if @document_verification.errors[:age].any? %>
    <%= t("management.document_verifications.under_age") %>
  <% else %>
--- a/app/views/management/document_verifications/new.html.erb
+++ b/app/views/management/document_verifications/new.html.erb
@@ -1,4 +1,4 @@
-<div class="alert-box success radius">
+<div data-alert class="callout success">
  <%= t("management.document_verifications.please_check_account_data") %>
 </div>

@@ -11,5 +11,5 @@
    url: management_document_verifications_path do |f| %>
  <%= f.hidden_field :document_type %>
  <%= f.hidden_field :document_number %>
-  <%= f.submit t("management.document_verifications.verify"), class: "button success radius" %>
+  <%= f.submit t("management.document_verifications.verify"), class: "button success" %>
 <% end %>
--- a/app/views/management/document_verifications/verified.html.erb
+++ b/app/views/management/document_verifications/verified.html.erb
@@ -1,4 +1,4 @@
-<div class="alert-box success radius">
+<div data-alert class="callout success">
  <%= t("management.document_verifications.already_verified") %>
 </div>

@@ -6,4 +6,4 @@
      message: t("management.document_verifications.in_census_has_following_permissions"),
      permissions: [:debates, :create_proposals, :support_proposals, :vote_proposals] %>

-<a href="javascript:window.print();" class="button warning radius"><%= t("management.print_info") %></a>
+<a href="javascript:window.print();" class="button warning"><%= t("management.print_info") %></a>
--- a/app/views/management/email_verifications/new.html.erb
+++ b/app/views/management/email_verifications/new.html.erb
@@ -1,4 +1,4 @@
-<div class="alert-box success radius">
+<div data-alert class="callout success">
  <%= t("management.email_verifications.document_found_in_census") %> <%= t("management.email_verifications.choose_options") %>
 </div>

@@ -15,7 +15,7 @@
      <%= f.hidden_field :document_number %>
      <%= f.text_field :email, label: false, placeholder: t('management.email_verifications.email_placeholder') %>

-      <%= f.submit t("management.email_verifications.send_email"), class: "button success radius" %>
+      <%= f.submit t("management.email_verifications.send_email"), class: "button success" %>
    <% end %>
  </li>

@@ -23,7 +23,7 @@
    <strong><%= t("management.email_verifications.if_no_existing_account") %></strong>

    <p class="margin-top">
-      <%= link_to t('management.users.create_user'), new_management_user_path(user: params[:email_verification]), class: "button warning radius" %>
+      <%= link_to t('management.users.create_user'), new_management_user_path(user: params[:email_verification]), class: "button warning" %>
    </p>
  </li>
 </ul>
--- a/app/views/management/email_verifications/sent.html.erb
+++ b/app/views/management/email_verifications/sent.html.erb
@@ -1,4 +1,4 @@
-<div class="alert-box success radius">
+<div data-alert class="callout success">
  <%= t("management.email_verifications.email_sent_instructions") %>
 </div>

@@ -7,6 +7,6 @@
      permissions: [:debates, :create_proposals, :support_proposals, :vote_proposals] %>

 <p>
-  <a href="javascript:window.print();" class="button warning radius"><%= t("management.print_info") %></a>
+  <a href="javascript:window.print();" class="button warning"><%= t("management.print_info") %></a>
 </p>

--- a/app/views/management/proposals/index.html.erb
+++ b/app/views/management/proposals/index.html.erb
@@ -5,7 +5,7 @@
    <div id="proposals" class="proposals-list small-12 medium-9 column">

      <div class="filters">
-        <div class="small-12 medium-7 left">
+        <div class="small-12 medium-7 float-left">
          <% if @search_terms %>
            <h2 class="margin-top">
              <%= page_entries_info @proposals %>
--- a/app/views/management/proposals/print.html.erb
+++ b/app/views/management/proposals/print.html.erb
@@ -1,7 +1,7 @@
 <section role="main">
  <div class="row">
    <div id="proposals" class="proposals-list small-12 column">
-      <a id="print_link" href="javascript:window.print();" class="button warning radius right">
+      <a id="print_link" href="javascript:window.print();" class="button warning float-right">
        <%= t('management.proposals.print.print_button') %>
      </a>

--- a/app/views/management/users/new.html.erb
+++ b/app/views/management/users/new.html.erb
@@ -16,7 +16,7 @@
          label: t('management.email_label'),
          placeholder: t('management.email_label') %>

-      <%= f.submit t("management.users.create_user_submit"), class: "button success radius" %>
+      <%= f.submit t("management.users.create_user_submit"), class: "button success" %>
    <% end %>
  </div>
 </div>
--- a/app/views/moderation/comments/index.html.erb
+++ b/app/views/moderation/comments/index.html.erb
@@ -5,7 +5,7 @@
 <div class="row">
  <h3 class="small-8 large-8 columns"><%= page_entries_info @comments %></h3>
  <div class="small-4 large-4 columns">
-    <div class="right">
+    <div class="float-right">
      <%= t("moderation.comments.index.order") %>
      <%= render 'shared/order_selector', i18n_namespace: "moderation.comments.index" %>
    </div>
@@ -13,7 +13,7 @@
 </div>

 <%= form_tag moderate_moderation_comments_path(request.query_parameters), method: :put do %>
-  <p class="right js-check">
+  <p class="float-right js-check">
    <%= t('shared.check') %>:
    <%= link_to t('shared.check_all'), '#', data: {check_all: "comment_ids[]"} %>
    |
@@ -55,19 +55,19 @@

  <%= submit_tag t('moderation.comments.index.block_authors'),
    name: "block_authors",
-    class: "button radius alert",
+    class: "button alert",
    data: {confirm: t('moderation.comments.index.confirm')}
  %>

-  <div class="right">
+  <div class="float-right">
    <%= submit_tag t('moderation.comments.index.hide_comments'),
      name: "hide_comments",
-      class: "button radius alert",
+      class: "button alert",
      data: {confirm: t('moderation.comments.index.confirm')}
    %>
    <%= submit_tag t('moderation.comments.index.ignore_flags'),
      name: "ignore_flags",
-      class: "button radius success",
+      class: "button success",
      data: {confirm: t('moderation.comments.index.confirm')}
    %>
  </div>
--- a/app/views/moderation/debates/index.html.erb
+++ b/app/views/moderation/debates/index.html.erb
@@ -5,7 +5,7 @@
 <div class="row">
  <h3 class="small-8 large-8 columns"><%= page_entries_info @debates %></h3>
  <div class="small-4 large-4 columns">
-    <div class="right">
+    <div class="float-right">
      <%= t("moderation.debates.index.order") %>
      <%= render 'shared/order_selector', i18n_namespace: "moderation.debates.index" %>
    </div>
@@ -13,7 +13,7 @@
 </div>

 <%= form_tag moderate_moderation_debates_path(request.query_parameters), method: :put do %>
-  <p class="left js-check">
+  <p class="float-left js-check">
    <%= t('shared.check') %>:
    <%= link_to t('shared.check_all'), '#', data: {check_all: "debate_ids[]"} %>
    |
@@ -53,19 +53,19 @@

  <%= submit_tag t('moderation.debates.index.block_authors'),
    name: "block_authors",
-    class: "button radius alert",
+    class: "button alert",
    data: {confirm: t('moderation.debates.index.confirm')}
  %>

-  <div class="right">
+  <div class="float-right">
    <%= submit_tag t('moderation.debates.index.hide_debates'),
      name: "hide_debates",
-      class: "button radius alert",
+      class: "button alert",
      data: {confirm: t('moderation.debates.index.confirm')}
    %>
    <%= submit_tag t('moderation.debates.index.ignore_flags'),
      name: "ignore_flags",
-      class: "button radius success",
+      class: "button success",
      data: {confirm: t('moderation.debates.index.confirm')}
    %>
  </div>
--- a/app/views/moderation/proposals/index.html.erb
+++ b/app/views/moderation/proposals/index.html.erb
@@ -5,7 +5,7 @@
 <div class="row">
  <h3 class="small-8 large-8 columns"><%= page_entries_info @proposals %></h3>
  <div class="small-4 large-4 columns">
-    <div class="right">
+    <div class="float-right">
      <%= t("moderation.proposals.index.order") %>
      <%= render 'shared/order_selector', i18n_namespace: "moderation.proposals.index" %>
    </div>
@@ -13,7 +13,7 @@
 </div>

 <%= form_tag moderate_moderation_proposals_path(request.query_parameters), method: :put do %>
-  <p class="left js-check">
+  <p class="float-left js-check">
    <%= t('shared.check') %>:
    <%= link_to t('shared.check_all'), '#', data: {check_all: "proposal_ids[]"} %>
    |
@@ -53,19 +53,19 @@

  <%= submit_tag t('moderation.proposals.index.block_authors'),
    name: "block_authors",
-    class: "button radius alert",
+    class: "button alert",
    data: {confirm: t('moderation.proposals.index.confirm')}
  %>

-  <div class="right">
+  <div class="float-right">
    <%= submit_tag t('moderation.proposals.index.hide_proposals'),
      name: "hide_proposals",
-      class: "button radius alert",
+      class: "button alert",
      data: {confirm: t('moderation.proposals.index.confirm')}
    %>
    <%= submit_tag t('moderation.proposals.index.ignore_flags'),
      name: "ignore_flags",
-      class: "button radius success",
+      class: "button success",
      data: {confirm: t('moderation.proposals.index.confirm')}
    %>
  </div>
--- a/app/views/moderation/users/index.html.erb
+++ b/app/views/moderation/users/index.html.erb
@@ -6,7 +6,7 @@
      <%= text_field_tag :name_or_email, "", placeholder: t("moderation.users.index.search_placeholder") %>
    </div>
    <div class="small-12 medium-6 column">
-      <%= f.submit t("moderation.users.index.search"), class: "button radius success" %>
+      <%= f.submit t("moderation.users.index.search"), class: "button success" %>
    </div>
  </div>
 <% end %>
--- a/app/views/notifications/index.html.erb
+++ b/app/views/notifications/index.html.erb
@@ -1,14 +1,14 @@
 <div class="row">
  <div class="small-12 column">

-    <h1 class="left margin-top"><%= t("notifications.index.title") %></h1>
+    <h1 class="float-left margin-top"><%= t("notifications.index.title") %></h1>

    <% if @notifications.empty? %>
-      <div class="alert-box radius info margin-top clear">
+      <div data-alert class="callout primary margin-top clear">
        <%= t("notifications.index.empty_notifications") %>
      </div>
    <% else %>
-      <div class="right margin-top">
+      <div class="float-right margin-top">
        <%= link_to t("notifications.index.mark_all_as_read"),
                    mark_all_as_read_notifications_path, method: :put %>
      </div>
--- a/app/views/organizations/registrations/new.html.erb
+++ b/app/views/organizations/registrations/new.html.erb
@@ -35,7 +35,7 @@
      <% end %>


-      <%= f.submit t("devise_views.organizations.registrations.new.submit"), class: "button radius expand" %>
+      <%= f.submit t("devise_views.organizations.registrations.new.submit"), class: "button expanded" %>
    </div>
  </div>
 <% end %>
--- a/app/views/organizations/registrations/success.html.erb
+++ b/app/views/organizations/registrations/success.html.erb
@@ -5,5 +5,5 @@
 <p><%= t("devise_views.organizations.registrations.success.instructions_3_html") %></p>
 <p>
  <%= link_to t("devise_views.organizations.registrations.success.back_to_index"),
-      root_path, class: "button radius small margin-top expand" %>
+      root_path, class: "button small margin-top expanded" %>
 </p>
--- a/app/views/pages/conditions.html.erb
+++ b/app/views/pages/conditions.html.erb
@@ -1,100 +1,101 @@
 <% provide :title do %><%= t('pages.titles.conditions') %><% end %>
-<div class="page row-full">
-  <div class="row">
-    <div class="text small-12 column">

-      <%= render '/shared/print' %>
+<div class="row margin-top">

-      <h1><%= t("pages.conditions") %></h1>
-      <h2>AVISO LEGAL SOBRE LAS CONDICIONES DE USO, PRIVACIDAD Y PROTECCIÓN DE DATOS PERSONALES DEL PORTAL DE GOBIERNO ABIERTO DEL AYUNTAMIENTO DE MADRID</h2>
+  <div class="small-12 medium-9 column">
+    <h1><%= t("pages.conditions") %></h1>
+    <h2>AVISO LEGAL SOBRE LAS CONDICIONES DE USO, PRIVACIDAD Y PROTECCIÓN DE DATOS PERSONALES DEL PORTAL DE GOBIERNO ABIERTO DEL AYUNTAMIENTO DE MADRID</h2>

-      <h3>1. Ámbito de aplicación de las condiciones de uso</h3>
-      <p>La participación (entendiéndola como participación activa más allá de la lectura del contenido presente) en el Portal de Gobierno Abierto del Ayuntamiento de Madrid se regula por las presentes condiciones de uso que vinculan a todas las personas que participen en este sitio web. Por ello, cualquier persona que desee participar deberá registrarse, a cuyo fin se solicitará la aceptación de estas condiciones de uso.</p>
-      <p>El Ayuntamiento de Madrid se reserva la facultad de modificar las presentes condiciones de uso para la participación en el Portal de Gobierno Abierto del Ayuntamiento de Madrid, cuya última versión se publicará en este sitio web.</p>
-      <p>La participación en el Portal de Gobierno Abierto del Ayuntamiento de Madrid se regula por las presentes condiciones de uso que vinculan a todas las personas que participen en este sitio web. Cualquier persona que desee participar deberá registrarse, a cuyo fin se solicitará la aceptación de estas condiciones de uso.</p>
-      <p>El Ayuntamiento de Madrid se reserva la facultad de modificar las presentes condiciones de uso del Portal de Gobierno Abierto del Ayuntamiento de Madrid cuya última versión se publicará en este sitio web.</p>
+    <h3>1. Ámbito de aplicación de las condiciones de uso</h3>
+    <p>La participación (entendiéndola como participación activa más allá de la lectura del contenido presente) en el Portal de Gobierno Abierto del Ayuntamiento de Madrid se regula por las presentes condiciones de uso que vinculan a todas las personas que participen en este sitio web. Por ello, cualquier persona que desee participar deberá registrarse, a cuyo fin se solicitará la aceptación de estas condiciones de uso.</p>
+    <p>El Ayuntamiento de Madrid se reserva la facultad de modificar las presentes condiciones de uso para la participación en el Portal de Gobierno Abierto del Ayuntamiento de Madrid, cuya última versión se publicará en este sitio web.</p>
+    <p>La participación en el Portal de Gobierno Abierto del Ayuntamiento de Madrid se regula por las presentes condiciones de uso que vinculan a todas las personas que participen en este sitio web. Cualquier persona que desee participar deberá registrarse, a cuyo fin se solicitará la aceptación de estas condiciones de uso.</p>
+    <p>El Ayuntamiento de Madrid se reserva la facultad de modificar las presentes condiciones de uso del Portal de Gobierno Abierto del Ayuntamiento de Madrid cuya última versión se publicará en este sitio web.</p>


-      <h3>2. Objetivo de la iniciativa</h3>
-      <p>A través del Portal de Gobierno Abierto, el Ayuntamiento de Madrid quiere fomentar la participación de los ciudadanos en la gestión de la ciudad, implicándoles en la generación de ideas y propuestas novedosas y viables, con el objeto de mejorar su calidad de vida. Es una apuesta decidida por una gestión más cercana a los ciudadanos que permitirá recibir sus propuestas y además, crear canales directos de comunicación con el gobierno municipal, contribuyendo a tomar las decisiones más acertadas para el interés general.</p>
-      <h3>3. Cuestiones generales sobre la participación en el Portal de Gobierno Abierto del Ayuntamiento de Madrid</h3>
-      <p>Podrá participar cualquier persona física a partir de los 16 años que se haya registrado previamente en el Portal de Gobierno Abierto. Mediante la aceptación de estas condiciones de uso se declara tener 16 años o más. Los mayores de edad a cuyo cargo se encuentran los menores, son los plenos responsables de la actuación que tengan éstos en el Portal de Gobierno Abierto. No existe limitación en cuanto al número de debates, comentarios o propuestas a presentar por los participantes.</p>
-      <p>Al introducir el título de las propuestas, se recomienda escribir una descripción breve y precisa con un máximo de 2000 caracteres. Para completar la argumentación se podrán asociar documentos adjuntos o de las Redes Sociales Vimeo, Youtube, Slideshare, Flickr o SoundCloud.</p>
+    <h3>2. Objetivo de la iniciativa</h3>
+    <p>A través del Portal de Gobierno Abierto, el Ayuntamiento de Madrid quiere fomentar la participación de los ciudadanos en la gestión de la ciudad, implicándoles en la generación de ideas y propuestas novedosas y viables, con el objeto de mejorar su calidad de vida. Es una apuesta decidida por una gestión más cercana a los ciudadanos que permitirá recibir sus propuestas y además, crear canales directos de comunicación con el gobierno municipal, contribuyendo a tomar las decisiones más acertadas para el interés general.</p>
+    <h3>3. Cuestiones generales sobre la participación en el Portal de Gobierno Abierto del Ayuntamiento de Madrid</h3>
+    <p>Podrá participar cualquier persona física a partir de los 16 años que se haya registrado previamente en el Portal de Gobierno Abierto. Mediante la aceptación de estas condiciones de uso se declara tener 16 años o más. Los mayores de edad a cuyo cargo se encuentran los menores, son los plenos responsables de la actuación que tengan éstos en el Portal de Gobierno Abierto. No existe limitación en cuanto al número de debates, comentarios o propuestas a presentar por los participantes.</p>
+    <p>Al introducir el título de las propuestas, se recomienda escribir una descripción breve y precisa con un máximo de 2000 caracteres. Para completar la argumentación se podrán asociar documentos adjuntos o de las Redes Sociales Vimeo, Youtube, Slideshare, Flickr o SoundCloud.</p>

-      <h3>4. Obligaciones de los usuarios del Portal de Gobierno Abierto</h3>
-      <p>Al ser el Ayuntamiento de Madrid un punto de encuentro cuyo objetivo es debatir, y compartir y valorar propuestas relacionadas con la mejora de la ciudad, los usuarios están obligados a hacer un uso diligente y acorde a dicho objetivo.</p>
-      <p>El Ayuntamiento de Madrid no es responsable del uso incorrecto del Portal de Gobierno Abierto por los usuarios o de los contenidos localizados en el mismo, siendo cada usuario responsable de su  uso correcto y de la legalidad de los contenidos y opiniones que haya compartido.</p>
-      <p>El Ayuntamiento de Madrid se reserva, por lo tanto, el derecho a limitar el acceso al Portal de Gobierno Abierto del Ayuntamiento de Madrid de opiniones, informaciones, comentarios o documentos que los usuarios quieran incorporar, pudiendo instalar filtros a tal efecto. Todo ello se realizará únicamente mientras tenga el fin de preservar el objetivo fundamental del Portal de Gobierno Abierto.</p>
-      <p>De acuerdo a la normativa legal vigente queda prohibida la utilización del Portal de Gobierno Abierto del Ayuntamiento de Madrid con fines distintos a los de debatir, compartir y valorar propuestas,  y específicamente:</p>
-      <p>Compartir cualquier contenido que pueda ser considerado como una vulneración en cualquier forma de los derechos fundamentales al honor, imagen e intimidad personal y familiar de terceros o contra la dignidad de las personas.</p>
-      <p>Compartir imágenes o fotografías que recojan imágenes o datos personales de terceros sin haber obtenido el oportuno consentimiento de sus titulares.</p>
-      <p>Compartir cualquier contenido que vulnere el secreto en las comunicaciones, la infracción de derechos de propiedad industrial e intelectual o de las normas reguladoras de la protección de datos de carácter personal.</p>
-      <p>Reproducir, distribuir, compartir contenidos, informaciones o imágenes que hayan sido puestas a disposición por otros usuarios sin la autorización expresa de estos.</p>
-      <p>Su utilización con fines de publicidad.</p>
-      <p>La realización de cualquiera de los anteriores comportamientos permitirá al Ayuntamiento de Madrid suspender temporalmente la actividad de un participante, inhabilitar su cuenta o borrar su contenido, sin perjuicio de otras responsabilidades que puedan ser reclamadas.</p>
-      <p>En caso de que el contenido introducido por los usuarios incorpore un enlace a otro sitio web, el Ayuntamiento de Madrid no será responsable por los daños o perjuicios derivados del acceso al enlace o a sus contenidos.</p>
-      <p>En caso de litigio de cualquier clase o por cualquier motivo entre los participantes en el sitio web y/o un tercero, el Ayuntamiento de Madrid quedará exento de cualquier responsabilidad por reclamaciones, demandas o daños de cualquier naturaleza relacionados o derivados del litigio.</p>
+    <h3>4. Obligaciones de los usuarios del Portal de Gobierno Abierto</h3>
+    <p>Al ser el Ayuntamiento de Madrid un punto de encuentro cuyo objetivo es debatir, y compartir y valorar propuestas relacionadas con la mejora de la ciudad, los usuarios están obligados a hacer un uso diligente y acorde a dicho objetivo.</p>
+    <p>El Ayuntamiento de Madrid no es responsable del uso incorrecto del Portal de Gobierno Abierto por los usuarios o de los contenidos localizados en el mismo, siendo cada usuario responsable de su  uso correcto y de la legalidad de los contenidos y opiniones que haya compartido.</p>
+    <p>El Ayuntamiento de Madrid se reserva, por lo tanto, el derecho a limitar el acceso al Portal de Gobierno Abierto del Ayuntamiento de Madrid de opiniones, informaciones, comentarios o documentos que los usuarios quieran incorporar, pudiendo instalar filtros a tal efecto. Todo ello se realizará únicamente mientras tenga el fin de preservar el objetivo fundamental del Portal de Gobierno Abierto.</p>
+    <p>De acuerdo a la normativa legal vigente queda prohibida la utilización del Portal de Gobierno Abierto del Ayuntamiento de Madrid con fines distintos a los de debatir, compartir y valorar propuestas,  y específicamente:</p>
+    <p>Compartir cualquier contenido que pueda ser considerado como una vulneración en cualquier forma de los derechos fundamentales al honor, imagen e intimidad personal y familiar de terceros o contra la dignidad de las personas.</p>
+    <p>Compartir imágenes o fotografías que recojan imágenes o datos personales de terceros sin haber obtenido el oportuno consentimiento de sus titulares.</p>
+    <p>Compartir cualquier contenido que vulnere el secreto en las comunicaciones, la infracción de derechos de propiedad industrial e intelectual o de las normas reguladoras de la protección de datos de carácter personal.</p>
+    <p>Reproducir, distribuir, compartir contenidos, informaciones o imágenes que hayan sido puestas a disposición por otros usuarios sin la autorización expresa de estos.</p>
+    <p>Su utilización con fines de publicidad.</p>
+    <p>La realización de cualquiera de los anteriores comportamientos permitirá al Ayuntamiento de Madrid suspender temporalmente la actividad de un participante, inhabilitar su cuenta o borrar su contenido, sin perjuicio de otras responsabilidades que puedan ser reclamadas.</p>
+    <p>En caso de que el contenido introducido por los usuarios incorpore un enlace a otro sitio web, el Ayuntamiento de Madrid no será responsable por los daños o perjuicios derivados del acceso al enlace o a sus contenidos.</p>
+    <p>En caso de litigio de cualquier clase o por cualquier motivo entre los participantes en el sitio web y/o un tercero, el Ayuntamiento de Madrid quedará exento de cualquier responsabilidad por reclamaciones, demandas o daños de cualquier naturaleza relacionados o derivados del litigio.</p>

-      <h3>5. Uso del Portal de Gobierno Abierto</h3>
-      <p>Los participantes podrán acceder y navegar por el Portal de Gobierno Abierto libremente y de forma anónima. Sólo cuando quieran realizar alguna acción que implique la creación, apoyo o comentario de una propuesta, o a la participación en un debate,  se le solicitará que introduzca sus credenciales, para cuya obtención será necesario registrarse previamente. El registro que permitirá participar comentando en cualquiera de las secciones, creando debates o propuestas, se realizará introduciendo los siguientes datos:</p>
-      <ul>
-        <li>Nombre de usuario</li>
-        <li>Correo electrónico</li>
-        <li>Aceptación de las condiciones de uso de el Portal de Gobierno Abierto</li>
+    <h3>5. Uso del Portal de Gobierno Abierto</h3>
+    <p>Los participantes podrán acceder y navegar por el Portal de Gobierno Abierto libremente y de forma anónima. Sólo cuando quieran realizar alguna acción que implique la creación, apoyo o comentario de una propuesta, o a la participación en un debate,  se le solicitará que introduzca sus credenciales, para cuya obtención será necesario registrarse previamente. El registro que permitirá participar comentando en cualquiera de las secciones, creando debates o propuestas, se realizará introduciendo los siguientes datos:</p>
+    <ul>
+      <li>Nombre de usuario</li>
+      <li>Correo electrónico</li>
+      <li>Aceptación de las condiciones de uso de el Portal de Gobierno Abierto</li>
+    </ul>
+    <p>El Portal de Gobierno Abierto también permite la identificación mediante el usuario de Facebook, Twitter y Google+.</p>
+    <p>Para participar apoyando propuestas, al usuario se le requerirá que verifique su cuenta cumpliendo que tiene 16 años o más y está empadronado en Madrid, para lo cual se le guiará a través de una serie de pasos donde se le solicitarán datos relativos al padrón y un medio de comunicación a través del cual facilitarle uno o dos códigos seguros para completar la verificación de su cuenta (dependiendo del medio de comunicación elegido por el usuario).</p>
+
+    <p>El usuario podrá interactuar con la herramienta interviniendo, al menos, de las siguientes formas:</p>
+    <h4>1. DEBATES</h4>
+    <p>En el apartado de debates el usuario podrá participar:</p>
+    <ul>
+      <li>Creando un debate. Cada usuario podrá abrir uno o más debates. Los debates serán publicados automáticamente.</li>
+      <li>Votando de manera positiva o negativa a los debates creadas por los usuarios. Los debates aparecerán con los votos positivos y negativos recibidos. Cada usuario podrá exclusivamente votar o bien positivo o bien negativo, y una vez a un mismo debate.</li>
+      <li> Comentando los debates del resto de usuarios. Cada debate podrá ser comentado por el resto de usuarios.</li>
      </ul>
-      <p>El Portal de Gobierno Abierto también permite la identificación mediante el usuario de Facebook, Twitter y Google+.</p>
-      <p>Para participar apoyando propuestas, al usuario se le requerirá que verifique su cuenta cumpliendo que tiene 16 años o más y está empadronado en Madrid, para lo cual se le guiará a través de una serie de pasos donde se le solicitarán datos relativos al padrón y un medio de comunicación a través del cual facilitarle uno o dos códigos seguros para completar la verificación de su cuenta (dependiendo del medio de comunicación elegido por el usuario).</p>
-
-      <p>El usuario podrá interactuar con la herramienta interviniendo, al menos, de las siguientes formas:</p>
-      <h4>1. DEBATES</h4>
-      <p>En el apartado de debates el usuario podrá participar:</p>
+      <h4>2. PROPUESTAS</h4>
+      <p>En el apartado de propuestas ciudadanas el usuario podrá participar:</p>
      <ul>
-        <li>Creando un debate. Cada usuario podrá abrir uno o más debates. Los debates serán publicados automáticamente.</li>
-        <li>Votando de manera positiva o negativa a los debates creadas por los usuarios. Los debates aparecerán con los votos positivos y negativos recibidos. Cada usuario podrá exclusivamente votar o bien positivo o bien negativo, y una vez a un mismo debate.</li>
-        <li> Comentando los debates del resto de usuarios. Cada debate podrá ser comentado por el resto de usuarios.</li>
-        </ul>
-        <h4>2. PROPUESTAS</h4>
-        <p>En el apartado de propuestas ciudadanas el usuario podrá participar:</p>
-        <ul>
-        <li>Creando una propuesta. Cada usuario podrá dar de alta una o más propuestas. Las propuestas serán publicadas automáticamente.</li>
-        <li>Apoyando las propuestas creadas por los usuarios. Las propuestas aparecerán con el número de apoyos recibidos. Cada usuario podrá exclusivamente apoyar una vez a una misma propuesta. Cuando una propuesta reciba apoyos equivalente al 2% del padrón de personas con 16 años o más, la propuesta pasará a una fase posterior donde durante una semana se invitará a la ciudadanía a aceptarla o rechazarla como propuesta colectiva.</li>
-        <li>Comentando las propuestas del resto de usuarios. Cada propuesta podrá ser comentada por el resto de usuarios, pudiendo argumentar las razones del apoyo o introducir mejoras a la misma.</li>
-      </ul>
+      <li>Creando una propuesta. Cada usuario podrá dar de alta una o más propuestas. Las propuestas serán publicadas automáticamente.</li>
+      <li>Apoyando las propuestas creadas por los usuarios. Las propuestas aparecerán con el número de apoyos recibidos. Cada usuario podrá exclusivamente apoyar una vez a una misma propuesta. Cuando una propuesta reciba apoyos equivalente al 2% del padrón de personas con 16 años o más, la propuesta pasará a una fase posterior donde durante una semana se invitará a la ciudadanía a aceptarla o rechazarla como propuesta colectiva.</li>
+      <li>Comentando las propuestas del resto de usuarios. Cada propuesta podrá ser comentada por el resto de usuarios, pudiendo argumentar las razones del apoyo o introducir mejoras a la misma.</li>
+    </ul>

-      <h3>6. Condiciones para el tratamiento de los contenidos proporcionados por los usuarios</h3>
-      <p>Las presentes condiciones regulan los términos aplicables al contenido remitido por los usuarios de esta plataforma a través del formulario correspondiente (en adelante, el contenido). Estas condiciones se aplican tanto al contenido inicialmente remitido al Portal de Gobierno Abierto como a cualquier contenido que se envíe con posterioridad o se manifieste al Ayuntamiento de Madrid, debiendo significarse lo siguiente:</p>
-      <ul>
-        <li>A. No Confidencialidad: Todo el contenido remitido por el usuario al Ayuntamiento de Madrid deberá ser susceptible de ser conocido por el público en general. Por lo tanto, el Ayuntamiento de Madrid tratará el citado contenido como información no confidencial.</li>
-        <li>B. Procedimiento: En el caso de que el Ayuntamiento de Madrid esté interesado en el contenido remitido por el usuario, se pondrá en contacto con él para solicitarle información adicional. Dicha información tendrá asimismo carácter de no confidencial, sin perjuicio de que en el caso de que las partes consideren la necesidad de intercambiarse información de carácter confidencial se firme el correspondiente Acuerdo de Confidencialidad.<br><br>
-        El Ayuntamiento de Madrid se reserva el derecho de no contactar con los usuarios que le hubieran remitido el contenido. Todo ello sin perjuicio de lo establecido en el apartado relativo a "Derechos de Propiedad Intelectual e industrial".<br><br>
-        En el supuesto que el Ayuntamiento de Madrid, a su entera discreción, decidiera contactar con determinados usuarios, éstos conocen y aceptan que por ello el Ayuntamiento de Madrid no adquiere compromiso alguno.</li>
+    <h3>6. Condiciones para el tratamiento de los contenidos proporcionados por los usuarios</h3>
+    <p>Las presentes condiciones regulan los términos aplicables al contenido remitido por los usuarios de esta plataforma a través del formulario correspondiente (en adelante, el contenido). Estas condiciones se aplican tanto al contenido inicialmente remitido al Portal de Gobierno Abierto como a cualquier contenido que se envíe con posterioridad o se manifieste al Ayuntamiento de Madrid, debiendo significarse lo siguiente:</p>
+    <ul>
+      <li>A. No Confidencialidad: Todo el contenido remitido por el usuario al Ayuntamiento de Madrid deberá ser susceptible de ser conocido por el público en general. Por lo tanto, el Ayuntamiento de Madrid tratará el citado contenido como información no confidencial.</li>
+      <li>B. Procedimiento: En el caso de que el Ayuntamiento de Madrid esté interesado en el contenido remitido por el usuario, se pondrá en contacto con él para solicitarle información adicional. Dicha información tendrá asimismo carácter de no confidencial, sin perjuicio de que en el caso de que las partes consideren la necesidad de intercambiarse información de carácter confidencial se firme el correspondiente Acuerdo de Confidencialidad.<br><br>
+      El Ayuntamiento de Madrid se reserva el derecho de no contactar con los usuarios que le hubieran remitido el contenido. Todo ello sin perjuicio de lo establecido en el apartado relativo a "Derechos de Propiedad Intelectual e industrial".<br><br>
+      En el supuesto que el Ayuntamiento de Madrid, a su entera discreción, decidiera contactar con determinados usuarios, éstos conocen y aceptan que por ello el Ayuntamiento de Madrid no adquiere compromiso alguno.</li>

-        <li>C. Publicidad o difusión de los contenidos presentados: Los participantes en el Portal de Gobierno Abierto del Ayuntamiento de Madrid declaran conocer y aceptar el hecho de que la información aportada podrá ser publicada en la web <a href="http://www.madrid.es" target="_blank">www.madrid.es</a>, así como a través de otros medios que la organización considere oportunos para dar a conocer esta iniciativa.</li>
+      <li>C. Publicidad o difusión de los contenidos presentados: Los participantes en el Portal de Gobierno Abierto del Ayuntamiento de Madrid declaran conocer y aceptar el hecho de que la información aportada podrá ser publicada en la web <a href="http://www.madrid.es" target="_blank">www.madrid.es</a>, así como a través de otros medios que la organización considere oportunos para dar a conocer esta iniciativa.</li>

-        <li>D. No devolución material: El Ayuntamiento de Madrid carece de obligación alguna de devolver el Contenido remitido por los usuarios.</li>
-        <li>E. Procedimiento de aviso y retirada: El Ayuntamiento de Madrid procesará las peticiones de eliminación o retirada de contenidos que incumplan las condiciones de uso que hayan añadido los participantes. Asimismo, cualquier persona, con motivos razonados si existe incumplimiento de las presentes condiciones de uso, podrá solicitar la retirada de contenidos al Ayuntamiento de Madrid. El Ayuntamiento de Madrid se reserva el derecho de hacer las comprobaciones o verificaciones oportunas con carácter previo a la retirada de cualquier contenido.</li>
-      </ul>
+      <li>D. No devolución material: El Ayuntamiento de Madrid carece de obligación alguna de devolver el Contenido remitido por los usuarios.</li>
+      <li>E. Procedimiento de aviso y retirada: El Ayuntamiento de Madrid procesará las peticiones de eliminación o retirada de contenidos que incumplan las condiciones de uso que hayan añadido los participantes. Asimismo, cualquier persona, con motivos razonados si existe incumplimiento de las presentes condiciones de uso, podrá solicitar la retirada de contenidos al Ayuntamiento de Madrid. El Ayuntamiento de Madrid se reserva el derecho de hacer las comprobaciones o verificaciones oportunas con carácter previo a la retirada de cualquier contenido.</li>
+    </ul>

-      <h3>7. Política de privacidad y protección de datos</h3>
-      <ul>
-        <li>A. Titularidad de los derechos de propiedad intelectual e industrial: El usuario que aporta el Contenido declara, con la aceptación de las presentes Condiciones, ser titular de los derechos de propiedad intelectual y/o industrial u ostentar derechos suficientes sobre dicho contenido y que además lo remite al Ayuntamiento de Madrid de forma voluntaria para su divulgación en el Portal de Gobierno Abierto del Ayuntamiento de Madrid.<br><br>
-        La titularidad de todos y cada uno de los Contenidos presentados que se encuentren protegidos o sean susceptibles de encontrarse protegidos, por el Derecho de la Propiedad Industrial e Intelectual, corresponde a los autores y/o titulares de los mencionados Contenidos.<br><br>
-        El Ayuntamiento de Madrid no asume responsabilidad alguna, ya sea directa o indirecta, respecto de cualquier tipo de controversia, disputa y/o litigio que pudiera derivarse de la publicación, divulgación y/o difusión de los contenidos aportados sin el preceptivo consentimiento de sus legítimos titulares.<br><br>
-        El Ayuntamiento de Madrid respetará todos los Derechos de Propiedad Intelectual o Industrial sobre el contenido remitido por los usuarios. Cualquier vulneración de los Derechos de Propiedad Intelectual o Industrial será responsabilidad de la persona que aporte el contenido.<br><br>
-        El Ayuntamiento de Madrid, por la mera recepción del contenido, no recibe del usuario licencia alguna de propiedad intelectual o industrial, por lo que no hará uso del contenido salvo aceptación expresa de su titular.</li>
-        <li>B. Protección de datos: Los datos personales aportados por los usuarios que se registren en el Portal de Gobierno Abierto, serán incorporados y tratados en el fichero Gestión de Procesos Participativos, cuya finalidad es gestionar los procesos participativos para el control de la habilitación de las personas que participan en los mismos y recuento meramente numérico y estadístico de los resultados derivados de los procesos de participación ciudadana. Gestión de Agendas para convocatorias y envío de información solicitada. El órgano responsable del fichero es la Dirección General competente en materia de Participación Ciudadana, ante la que la persona interesada podrá ejercer los derechos de acceso, rectificación, cancelación y oposición, todo lo cual se informa en cumplimiento del artículo 5 de la Ley Orgánica 15/1999, de 13 de diciembre, de Protección de Datos de Carácter Personal.</li>
-      </ul>
+    <h3>7. Política de privacidad y protección de datos</h3>
+    <ul>
+      <li>A. Titularidad de los derechos de propiedad intelectual e industrial: El usuario que aporta el Contenido declara, con la aceptación de las presentes Condiciones, ser titular de los derechos de propiedad intelectual y/o industrial u ostentar derechos suficientes sobre dicho contenido y que además lo remite al Ayuntamiento de Madrid de forma voluntaria para su divulgación en el Portal de Gobierno Abierto del Ayuntamiento de Madrid.<br><br>
+      La titularidad de todos y cada uno de los Contenidos presentados que se encuentren protegidos o sean susceptibles de encontrarse protegidos, por el Derecho de la Propiedad Industrial e Intelectual, corresponde a los autores y/o titulares de los mencionados Contenidos.<br><br>
+      El Ayuntamiento de Madrid no asume responsabilidad alguna, ya sea directa o indirecta, respecto de cualquier tipo de controversia, disputa y/o litigio que pudiera derivarse de la publicación, divulgación y/o difusión de los contenidos aportados sin el preceptivo consentimiento de sus legítimos titulares.<br><br>
+      El Ayuntamiento de Madrid respetará todos los Derechos de Propiedad Intelectual o Industrial sobre el contenido remitido por los usuarios. Cualquier vulneración de los Derechos de Propiedad Intelectual o Industrial será responsabilidad de la persona que aporte el contenido.<br><br>
+      El Ayuntamiento de Madrid, por la mera recepción del contenido, no recibe del usuario licencia alguna de propiedad intelectual o industrial, por lo que no hará uso del contenido salvo aceptación expresa de su titular.</li>
+      <li>B. Protección de datos: Los datos personales aportados por los usuarios que se registren en el Portal de Gobierno Abierto, serán incorporados y tratados en el fichero Gestión de Procesos Participativos, cuya finalidad es gestionar los procesos participativos para el control de la habilitación de las personas que participan en los mismos y recuento meramente numérico y estadístico de los resultados derivados de los procesos de participación ciudadana. Gestión de Agendas para convocatorias y envío de información solicitada. El órgano responsable del fichero es la Dirección General competente en materia de Participación Ciudadana, ante la que la persona interesada podrá ejercer los derechos de acceso, rectificación, cancelación y oposición, todo lo cual se informa en cumplimiento del artículo 5 de la Ley Orgánica 15/1999, de 13 de diciembre, de Protección de Datos de Carácter Personal.</li>
+    </ul>

-      <p>Como principio general, los datos personales no serán comunicados a terceros, excepto cuando la comunicación haya sido autorizada por el usuario, o la información sea requerida por la autoridad judicial, ministerio fiscal o la policía judicial, o se de alguno de los supuestos regulados en el artículo 11 de la Ley Orgánica 15/1999, de 13 de diciembre, de Protección de Datos de Carácter Personal.</p>
-      <ul>
-        <li>Los derechos de acceso, rectificación, cancelación y oposición, se podrán ejercitar dirigiendo una comunicación por escrito al Ayuntamiento de Madrid, Área de Gobierno de Participación Ciudadana, Transparencia y Gobierno Abierto, Dirección General de Participación Ciudadana.</li>
-      </ul>
+    <p>Como principio general, los datos personales no serán comunicados a terceros, excepto cuando la comunicación haya sido autorizada por el usuario, o la información sea requerida por la autoridad judicial, ministerio fiscal o la policía judicial, o se de alguno de los supuestos regulados en el artículo 11 de la Ley Orgánica 15/1999, de 13 de diciembre, de Protección de Datos de Carácter Personal.</p>
+    <ul>
+      <li>Los derechos de acceso, rectificación, cancelación y oposición, se podrán ejercitar dirigiendo una comunicación por escrito al Ayuntamiento de Madrid, Área de Gobierno de Participación Ciudadana, Transparencia y Gobierno Abierto, Dirección General de Participación Ciudadana.</li>
+    </ul>

-      <h3>8. Normativa aplicable</h3>
-      <p>Las normas del ordenamiento jurídico español rigen de manera exclusiva estas condiciones de uso. Cualquier disputa, controversia o reclamación derivada de estas condiciones de uso, o el incumplimiento, rescisión o invalidación de estas, se resolverán exclusivamente ante los juzgados competentes.</p>
+    <h3>8. Normativa aplicable</h3>
+    <p>Las normas del ordenamiento jurídico español rigen de manera exclusiva estas condiciones de uso. Cualquier disputa, controversia o reclamación derivada de estas condiciones de uso, o el incumplimiento, rescisión o invalidación de estas, se resolverán exclusivamente ante los juzgados competentes.</p>

-      <h3>9. Revisión de las condiciones de uso</h3>
-      <p>El Ayuntamiento de Madrid se reserva el derecho de revisar las presentes condiciones de uso y la política de privacidad en cualquier momento y por cualquier razón. En dicho caso, los usuarios registrados serán avisados a través de este espacio en línea y, si continúan utilizando el Portal de Gobierno Abierto, se entenderán aceptadas las modificaciones introducidas.</p>
-    </div>
+    <h3>9. Revisión de las condiciones de uso</h3>
+    <p>El Ayuntamiento de Madrid se reserva el derecho de revisar las presentes condiciones de uso y la política de privacidad en cualquier momento y por cualquier razón. En dicho caso, los usuarios registrados serán avisados a través de este espacio en línea y, si continúan utilizando el Portal de Gobierno Abierto, se entenderán aceptadas las modificaciones introducidas.</p>
+  </div>
+
+  <div class="small-12 medium-3 column">
+    <%= render '/shared/print' %>
  </div>
 </div>
--- a/app/views/pages/faq.html.erb
+++ b/app/views/pages/faq.html.erb
@@ -1,107 +1,103 @@
-<div class="page row-full">
-  <div class="row">
-    <div class="menu small-12 medium-3 column">
-      <i class="icon-angle-left left"></i>&nbsp;
-      <%= link_to t("debates.show.back_link"), "/more_information", class: 'left back' %>
-      <ul class="clear">
-        <li><a href="#1">No me funciona la verificación de residencia.</a></li>
-        <li><a href="#2">No estoy empadronado en Madrid ¿por qué no puedo participar?</a></li>
-        <li><a href="#3">¿Para qué sirve verificar mi cuenta? ¿qué es esto de la carta con un código que me vais a mandar?</a></li>
-        <li><a href="#4">¿Necesito teléfono móvil o acceso a Internet para poder participar?</a></li>
-        <li><a href="#5">¿Cómo creo y verifico mi cuenta?</a></li>
-        <li><a href="#6">¿Cómo puedo enviar una propuesta al Ayuntamiento? ¿Puedo mandaros directamente mi propuesta a alguno de los correos electrónico que aparecen en la web de participación?</a></li>
-        <li><a href="#7">Hay muchas propuestas parecidas, ¿no se podrían unificar?</a></li>
-        <li><a href="#8">Me he olvidado de mi contraseña o no me funciona ¿qué puedo hacer?</a></li>
-        <li><a href="#9">No consigo crear mi cuenta correctamente.</a></li>
-        <li><a href="#10">¿Cómo puedo cambiar mi correo electrónico, mi nombre de usuario, mi contraseña o activar/desactivar las notificaciones que me llegan al correo electrónico?</a></li>
-      </ul>
-    </div>
-    <div class="text small-12 medium-9 column">
-      <h1 class="clear">Soluciones a problemas técnicos (FAQ)</h1>
+<div class="row margin-top">
+  <div class="menu small-12 medium-3 column">
+    <%= link_to "/more_information", class: 'back' do %>
+      <i class="icon-angle-left"></i>
+      <%= t("debates.show.back_link") %>
+    <% end %>

-      <p>Te presentamos una lista de las soluciones a los problemas y dudas técnicas más frecuentes del Portal de Gobierno Abierto. Si esto no resuelve tu problema, puedes llamar al 010 (o a su versión grauita 915298210) o acercarte a cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a> que tienes en Madrid.</p>
+    <ul class="menu vertical margin-top">
+      <li><a href="#1"><strong>No me funciona la verificación de residencia.</strong></a></li>
+      <li><a href="#2"><strong>No estoy empadronado en Madrid ¿por qué no puedo participar?</strong></a></li>
+      <li><a href="#3"><strong>¿Para qué sirve verificar mi cuenta? ¿qué es esto de la carta con un código que me vais a mandar?</strong></a></li>
+      <li><a href="#4"><strong>¿Necesito teléfono móvil o acceso a Internet para poder participar?</strong></a></li>
+      <li><a href="#5"><strong>¿Cómo creo y verifico mi cuenta?</strong></a></li>
+      <li><a href="#6"><strong>¿Cómo puedo enviar una propuesta al Ayuntamiento? ¿Puedo mandaros directamente mi propuesta a alguno de los correos electrónico que aparecen en la web de participación?</strong></a></li>
+      <li><a href="#7"><strong>Hay muchas propuestas parecidas, ¿no se podrían unificar?</strong></a></li>
+      <li><a href="#8"><strong>Me he olvidado de mi contraseña o no me funciona ¿qué puedo hacer?</strong></a></li>
+      <li><a href="#9"><strong>No consigo crear mi cuenta correctamente.</strong></a></li>
+      <li><a href="#10"><strong>¿Cómo puedo cambiar mi correo electrónico, mi nombre de usuario, mi contraseña o activar/desactivar las notificaciones que me llegan al correo electrónico?</strong></a></li>
+    </ul>
+  </div>

-      <h2 id="1">No me funciona la verificación de residencia.</h2>
+  <div class="text small-12 medium-9 column">
+    <h1 class="clear">Soluciones a problemas técnicos (FAQ)</h1>
+    <p>Te presentamos una lista de las soluciones a los problemas y dudas técnicas más frecuentes del Portal de Gobierno Abierto. Si esto no resuelve tu problema, puedes llamar al 010 (o a su versión grauita 915298210) o acercarte a cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a> que tienes en Madrid.</p>

-      <p>Comprueba las siguientes posibilidades:</p>
-      <ul>
-        <li>¿Has puesto el DNI o documento con todos los caracteres juntos, incluyendo la letra al final?</li>
-        <li>¿Estás seguro de que estás empadronado en el <strong>municipio</strong> de Madrid? (el municipio es geográficamente más pequeño que la Comunidad de Madrid).</li>
-        <li>Puede que haya algún problema en el registro de empadronamiento con tus datos. Por favor llama al 010 (o a su versión grauita 915298210) y confirma que tu información de Padrón es correcta.</li>
-        <li>Si todo lo anterior no soluciona el problema, puedes acercarte a cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a> que hay por todo Madrid, y te lo resolverán en el acto.</li>
-      </ul>
+    <h2 id="1">No me funciona la verificación de residencia.</h2>
+    <p>Comprueba las siguientes posibilidades:</p>
+    <ul>
+      <li>¿Has puesto el DNI o documento con todos los caracteres juntos, incluyendo la letra al final?</li>
+      <li>¿Estás seguro de que estás empadronado en el <strong>municipio</strong> de Madrid? (el municipio es geográficamente más pequeño que la Comunidad de Madrid).</li>
+      <li>Puede que haya algún problema en el registro de empadronamiento con tus datos. Por favor llama al 010 (o a su versión grauita 915298210) y confirma que tu información de Padrón es correcta.</li>
+      <li>Si todo lo anterior no soluciona el problema, puedes acercarte a cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a> que hay por todo Madrid, y te lo resolverán en el acto.</li>
+    </ul>

-      <h2 id="2">No estoy empadronado en Madrid ¿por qué no puedo participar?</h2>
+    <h2 id="2">No estoy empadronado en Madrid ¿por qué no puedo participar?</h2>
+    <p>El apoyo y votación de propuestas está limitado a la gente empadronada en Madrid, ya que se trata de tomar decisiones que afectarán al municipio y a los que viven en él, y por tanto nos parece que son ellos los que tienen que tomar la decisión final. Es cierto que hay personas que no están empadronadas en Madrid y que aun así les pueden afectar esas decisiones, pero el Padrón es el censo más amplio del que disponemos que nos permite que el proceso de participación sea seguro y lleguemos al máximo posible de personas. No obstante, sí que es posible participar aunque no se esté empadronado. La sección de debates está abierta a todo el mundo, y también es posible lanzar una propuesta, o comentar las propuestas existentes sin necesidad de estar empadronado. Sólo la decisión sobre las propuestas (apoyos y votaciones) están limitadas a la gente empadronada.</p>

-      <p>El apoyo y votación de propuestas está limitado a la gente empadronada en Madrid, ya que se trata de tomar decisiones que afectarán al municipio y a los que viven en él, y por tanto nos parece que son ellos los que tienen que tomar la decisión final. Es cierto que hay personas que no están empadronadas en Madrid y que aun así les pueden afectar esas decisiones, pero el Padrón es el censo más amplio del que disponemos que nos permite que el proceso de participación sea seguro y lleguemos al máximo posible de personas. No obstante, sí que es posible participar aunque no se esté empadronado. La sección de debates está abierta a todo el mundo, y también es posible lanzar una propuesta, o comentar las propuestas existentes sin necesidad de estar empadronado. Sólo la decisión sobre las propuestas (apoyos y votaciones) están limitadas a la gente empadronada.</p>
+    <h2 id="3">¿Para qué sirve verificar mi cuenta? ¿qué es esto de la carta con un código que me vais a mandar?</h2>
+    <p>Para usar la web necesitamos una cuenta de usuario, que podrá hacer más o menos cosas según esté más o menos verificada:</p>
+    <ul>
+      <li>Si nos <a href="https://decide.madrid.es/users/sign_up">registramos</a> en la web con nuestro correo electrónico y no damos ningún dato más (no hacemos el proceso de verificación de residencia) podremos:</li>
+    </ul>

-      <h2 id="3">¿Para qué sirve verificar mi cuenta? ¿qué es esto de la carta con un código que me vais a mandar?</h2>
+    <p><i class="icon-check"></i> Participar en debates</p>
+    <p><i class="icon-check"></i> Crear propuestas</p>

-      <p>Para usar la web necesitamos una cuenta de usuario, que podrá hacer más o menos cosas según esté más o menos verificada:</p>
-      <ul>
-        <li>Si nos <a href="https://decide.madrid.es/users/sign_up">registramos</a> en la web con nuestro correo electrónico y no damos ningún dato más (no hacemos el proceso de verificación de residencia) podremos:</li>
-      </ul>
+    <ul>
+      <li>Si despues de registrarnos realizamos la verificación básica (a través de la web consiste en verificar la residencia y dar un móvil para que nos manden un código de confirmación; ver información detallada del proceso en la sección <a href="#5">"¿Cómo creo y verifico mi cuenta?"</a> será posible:</li>
+    </ul>

-      <p><i class="icon-check"></i> Participar en debates</p>
-      <p><i class="icon-check"></i> Crear propuestas</p>
+    <p><i class="icon-check"></i> Participar en debates</p>
+    <p><i class="icon-check"></i> Crear propuestas</p>
+    <p><i class="icon-check"></i> Apoyar propuestas</p>

-      <ul>
-        <li>Si despues de registrarnos realizamos la verificación básica (a través de la web consiste en verificar la residencia y dar un móvil para que nos manden un código de confirmación; ver información detallada del proceso en la sección <a href="#5">"¿Cómo creo y verifico mi cuenta?"</a> será posible:</li>
-      </ul>
+    <ul>
+      <li>Si realizamos la verificación completa de nuestra cuenta (esto se puede realizar presencialmente en cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a> que hay por todo Madrid, o después de realizar la verificación básica pulsando en el enlace "Solicitar una carta por correo postal" que nos mandará a casa una carta con un código y unas instrucciones muy sencillas para terminar de verificarnos completamente) nos será posible realizar todas las acciones:</li>
+    </ul>

-      <p><i class="icon-check"></i> Participar en debates</p>
-      <p><i class="icon-check"></i> Crear propuestas</p>
-      <p><i class="icon-check"></i> Apoyar propuestas</p>
+    <p><i class="icon-check"></i> Participar en debates</p>
+    <p><i class="icon-check"></i> Crear propuestas</p>
+    <p><i class="icon-check"></i> Apoyar propuestas</p>
+    <p><i class="icon-check"></i> Votar propuestas</p>

-      <ul>
-        <li>Si realizamos la verificación completa de nuestra cuenta (esto se puede realizar presencialmente en cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a> que hay por todo Madrid, o después de realizar la verificación básica pulsando en el enlace "Solicitar una carta por correo postal" que nos mandará a casa una carta con un código y unas instrucciones muy sencillas para terminar de verificarnos completamente) nos será posible realizar todas las acciones:</li>
-      </ul>
+    <p><strong>Recuerda</strong> que la votación de propuestas es un proceso muy concreto que sólo ocurre durante una semana una vez las propuestas han llegado al 2% de apoyos, por lo tanto por lo general será posible realizar todas las acciones en la web con la verificación básica de nuestra cuenta.</p>

-      <p><i class="icon-check"></i> Participar en debates</p>
-      <p><i class="icon-check"></i> Crear propuestas</p>
-      <p><i class="icon-check"></i> Apoyar propuestas</p>
-      <p><i class="icon-check"></i> Votar propuestas</p>
+    <p>También es importante recalcar que podemos crear y verificar completamente nuestra cuenta sin pasar por Internet, realizando el proceso completamente de manera presencial en cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a> que hay por todo Madrid.

-      <p><strong>Recuerda</strong> que la votación de propuestas es un proceso muy concreto que sólo ocurre durante una semana una vez las propuestas han llegado al 2% de apoyos, por lo tanto por lo general será posible realizar todas las acciones en la web con la verificación básica de nuestra cuenta.</p>
+    <h2 id="4">¿Necesito teléfono móvil o acceso a Internet para poder participar?</h2>
+    <p>No. Todas las acciones relacionadas con las propuestas, tanto crearlas, como apoyarlas, votarlas o informarnos sobre ellas, es algo que podemos hacer presencialmente en cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a> que hay por todo Madrid, simplemente presentando nuestro DNI, pasaporte o tarjeta de residencia (recuerda que para apoyar o votar propuestas es necesario estar empadronado en Madrid). Además podremos presentar hojas de firmas para apoyar una propuesta concreta. También podremos crearnos una cuenta de usuario completamente verificada, en caso de que optemos en algún momento por utilizar la web directamente.
+    </p>

-      <p>También es importante recalcar que podemos crear y verificar completamente nuestra cuenta sin pasar por Internet, realizando el proceso completamente de manera presencial en cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a> que hay por todo Madrid.
+    <h2 id="5">¿Cómo creo y verifico mi cuenta?</h2>
+    <ul>
+      <li>Lo primero es crear una cuenta básica. Para ello hacemos clic en el enlace <a href="https://decide.madrid.es/users/sign_up">Registrarse</a> y rellenamos los datos que nos piden. Es un requisito marcar la casilla de aceptación de las condiciones de uso, y rellenar correctamente el captcha (en la parte inferior del formulario se nos presenta una imagen con unas letras deformadas que tendremos que introducir en la casilla inferior como medida de seguridad; ten en cuenta la diferencia entre mayúsculas y minúsculas). Al crear una cuenta nos llegará un correo electrónico a la dirección que hayamos especificado, y tendremos que hacer click en el enlace que contiene (el enlace que pone "Confirmar mi cuenta") para terminar de crear la cuenta.</li>
+      <li>Una vez creada la cuenta básica, y tras <a href="https://decide.madrid.es/users/sign_in">entrar</a> con nuestro correo y contraseña, el sistema nos dará la opción de realizar una verificación básica de la misma. Tanto este paso como el siguiente se pueden realizar presencialmente en cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a> que hay por todo Madrid. Si preferimos hacerlo a través de la web, hacemos click en el enlace <a href="https://decide.madrid.es/account">"Mi cuenta"</a> de la parte superior derecha, y luego en el botón "Verificar mi cuenta". Lo primero que se nos pedirá es que introduzcamos nuestros datos de residencia, para verificar que estamos empadronados en el municipio de Madrid (es importante introducir el número de documento con la letra; y marcar la casilla de aceptación de acceso al Padrón). Si los datos son correctos, se nos pedirá un teléfono móvil para mandarnos un código de confirmación, que introduciremos en la siguiente página que se nos presente. Este móvil no se utilizará para contactarnos ni para enviarnos nada en ningún momento, sólo es una medida de seguridad. Si preferimos no dar ningún teléfono móvil, podemos realizar el proceso sin necesidad de él en las Oficinas de Atención al Ciudadano, como comentamos anteriormente. Una vez introducido correctamente el código de confirmación, nuestra cuenta nos permitirá apoyar propuestas.</li>
+      <li>Para poder acceder a las votaciones finales de las propuestas, tendremos que verificar completamente nuestra cuenta. No obstante recuerda que la votación de propuestas es un proceso muy concreto que sólo ocurre durante una semana una vez las propuestas han llegado al 2% de apoyos, por lo tanto por lo general será posible realizar todas las acciones en la web con la anterior verificación básica de nuestracuenta. Para verificar completamente nuestra cuenta, podemos hacerlo presencialmente en cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a>, o bien a través de la web <a href="https://decide.madrid.es/users/sign_in">entrando</a> con nuestro correo y contraseña, hacer clic en el enlace <a href="https://decide.madrid.es/account">"Mi cuenta"</a> de la parte superior derecha, pulsar el botón "Finalizar verificación", y finalmente hacer click en "Solicitar el envío de un correo postal". Una vez solicitado, nos llegará a nuestra dirección de empadronamiento una carta, con un código de seguridad y unas sencillas instrucciones para realizar la verificación.</li>
+    </ul>

-      <h2 id="4">¿Necesito teléfono móvil o acceso a Internet para poder participar?</h2>
+    <h2 id="6">¿Cómo puedo enviar una propuesta al Ayuntamiento? ¿Puedo mandaros directamente mi propuesta a alguno de los correos electrónico que aparecen en la web de participación?</h2>
+    <p>El camino correcto para hacer una propuesta es añadirla uno mismo directamente en la web de participación dentro de la sección <a href="https://decide.madrid.es/proposals">"Propuestas"</a> (para ello es necesario primero crear una cuenta haciendo click en el enlace <a href="https://decide.madrid.es/users/sign_up">Registrarse</a>, y una vez creada, hacer click en el botón "Crear propuesta" de la sección "Propuestas"), o presencialmente a través de cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a> que hay por todo Madrid. En caso de que lo que queremos presentar sea una sugerencia o reclamación, la información para presentarlas se encuentra <a href-"https://sede.madrid.es/portal/site/tramites/menuitem.1f3361415fda829be152e15284f1a5a0/?vgnextoid=32eddd9d6baed010VgnVCM2000000c205a0aRCRD" target="_blank">en esta página</a>.

-      <p>No. Todas las acciones relacionadas con las propuestas, tanto crearlas, como apoyarlas, votarlas o informarnos sobre ellas, es algo que podemos hacer presencialmente en cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a> que hay por todo Madrid, simplemente presentando nuestro DNI, pasaporte o tarjeta de residencia (recuerda que para apoyar o votar propuestas es necesario estar empadronado en Madrid). Además podremos presentar hojas de firmas para apoyar una propuesta concreta. También podremos crearnos una cuenta de usuario completamente verificada, en caso de que optemos en algún momento por utilizar la web directamente.
-      </p>
-      <h2 id="5">¿Cómo creo y verifico mi cuenta?</h2>
-      <ul>
-        <li>Lo primero es crear una cuenta básica. Para ello hacemos clic en el enlace <a href="https://decide.madrid.es/users/sign_up">Registrarse</a> y rellenamos los datos que nos piden. Es un requisito marcar la casilla de aceptación de las condiciones de uso, y rellenar correctamente el captcha (en la parte inferior del formulario se nos presenta una imagen con unas letras deformadas que tendremos que introducir en la casilla inferior como medida de seguridad; ten en cuenta la diferencia entre mayúsculas y minúsculas). Al crear una cuenta nos llegará un correo electrónico a la dirección que hayamos especificado, y tendremos que hacer click en el enlace que contiene (el enlace que pone "Confirmar mi cuenta") para terminar de crear la cuenta.</li>
-        <li>Una vez creada la cuenta básica, y tras <a href="https://decide.madrid.es/users/sign_in">entrar</a> con nuestro correo y contraseña, el sistema nos dará la opción de realizar una verificación básica de la misma. Tanto este paso como el siguiente se pueden realizar presencialmente en cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a> que hay por todo Madrid. Si preferimos hacerlo a través de la web, hacemos click en el enlace <a href="https://decide.madrid.es/account">"Mi cuenta"</a> de la parte superior derecha, y luego en el botón "Verificar mi cuenta". Lo primero que se nos pedirá es que introduzcamos nuestros datos de residencia, para verificar que estamos empadronados en el municipio de Madrid (es importante introducir el número de documento con la letra; y marcar la casilla de aceptación de acceso al Padrón). Si los datos son correctos, se nos pedirá un teléfono móvil para mandarnos un código de confirmación, que introduciremos en la siguiente página que se nos presente. Este móvil no se utilizará para contactarnos ni para enviarnos nada en ningún momento, sólo es una medida de seguridad. Si preferimos no dar ningún teléfono móvil, podemos realizar el proceso sin necesidad de él en las Oficinas de Atención al Ciudadano, como comentamos anteriormente. Una vez introducido correctamente el código de confirmación, nuestra cuenta nos permitirá apoyar propuestas.</li>
-        <li>Para poder acceder a las votaciones finales de las propuestas, tendremos que verificar completamente nuestra cuenta. No obstante recuerda que la votación de propuestas es un proceso muy concreto que sólo ocurre durante una semana una vez las propuestas han llegado al 2% de apoyos, por lo tanto por lo general será posible realizar todas las acciones en la web con la anterior verificación básica de nuestracuenta. Para verificar completamente nuestra cuenta, podemos hacerlo presencialmente en cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a>, o bien a través de la web <a href="https://decide.madrid.es/users/sign_in">entrando</a> con nuestro correo y contraseña, hacer clic en el enlace <a href="https://decide.madrid.es/account">"Mi cuenta"</a> de la parte superior derecha, pulsar el botón "Finalizar verificación", y finalmente hacer click en "Solicitar el envío de un correo postal". Una vez solicitado, nos llegará a nuestra dirección de empadronamiento una carta, con un código de seguridad y unas sencillas instrucciones para realizar la verificación.</li>
-      </ul>
-      <h2 id="6">¿Cómo puedo enviar una propuesta al Ayuntamiento? ¿Puedo mandaros directamente mi propuesta a alguno de los correos electrónico que aparecen en la web de participación?</h2>
+    <h2 id="7">Hay muchas propuestas parecidas, ¿no se podrían unificar?</h2>
+    <p>En breve implementaremos una nueva funcionalidad de la web que permitirá marcar propuestas similares como tales, y que se muestren al visualizar cualquiera de ellas. De esta forma la gente podrá decidir cuál de ellas apoyar tras compararlas, y ayudará a que no se dispersen tanto los apoyos y no se repitan tanto las mismas propuestas. También implementaremos un sistema que cuando creemos nuestra propuesta nos mostrará propuestas similares, por si la idea que queremos lanzar ya existiera en el portal de participación.</p>

-      <p>El camino correcto para hacer una propuesta es añadirla uno mismo directamente en la web de participación dentro de la sección <a href="https://decide.madrid.es/proposals">"Propuestas"</a> (para ello es necesario primero crear una cuenta haciendo click en el enlace <a href="https://decide.madrid.es/users/sign_up">Registrarse</a>, y una vez creada, hacer click en el botón "Crear propuesta" de la sección "Propuestas"), o presencialmente a través de cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a> que hay por todo Madrid. En caso de que lo que queremos presentar sea una sugerencia o reclamación, la información para presentarlas se encuentra <a href-"https://sede.madrid.es/portal/site/tramites/menuitem.1f3361415fda829be152e15284f1a5a0/?vgnextoid=32eddd9d6baed010VgnVCM2000000c205a0aRCRD" target="_blank">en esta página</a>.
+    <p>Sobre la posibilidad de unificar propuestas, lo que pueden parecer pequeñas diferencias entre dos propuestas similares, pueden marcar grandes diferencias a la hora de hacerlas realidad. Por ello hay personas que pueden querer apoyar una de ellas y no otras. Es por eso que debemos respetar los apoyos particulares que haya dado la gente, y no unificar las propuestas. Esto es independiente de que los autores de las propuestas quieran unirlas. Una vez las propuestas están recibiendo apoyos pasan a ser tanto de la gente que las apoya como de sus autores.</p>

-      <h2 id="7">Hay muchas propuestas parecidas, ¿no se podrían unificar?</h2>
+    <h2 id="8">Me he olvidado de mi contraseña o no me funciona ¿qué puedo hacer?</h2>
+    <ul>
+      <li>Puedes hacer <a href="https://decide.madrid.es/users/password/new">solicitar un nueva contraseña</a> para que se te envíe una nueva contraseña a tu correo electrónico.</li>
+      <li>Si la anterior solución no funcionan, puedes acercarte a cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a> que hay por todo Madrid, donde te resolverán el problema presencialmente solucionando el problema asociado a tu cuenta o creándote una cuenta nueva.</li>
+    </ul>

-      <p>En breve implementaremos una nueva funcionalidad de la web que permitirá marcar propuestas similares como tales, y que se muestren al visualizar cualquiera de ellas. De esta forma la gente podrá decidir cuál de ellas apoyar tras compararlas, y ayudará a que no se dispersen tanto los apoyos y no se repitan tanto las mismas propuestas. También implementaremos un sistema que cuando creemos nuestra propuesta nos mostrará propuestas similares, por si la idea que queremos lanzar ya existiera en el portal de participación.</p>
+    <h2 id="9">No consigo crear mi cuenta correctamente.</h2>
+    <ul>
+      <li>Revisa por favor la sección <a href="#1">"No me funciona la verificación de residencia"</a>, por si el problema estuviera en ese paso, que suele ser el problema más frecuente.</li>
+      <li>Si no se ha solucionado, revisa la sección <a href="#5">"¿Cómo creo y verifico mi cuenta?"</a>, para asegurarte de que estás siguiendo los pasos adecuadamente.</li>
+      <li>Si todavía se mantiene el problema, acércate a cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a> que hay por todo Madrid, donde te resolverán el problema presencialmente.</li>
+    </ul>

-      <p>Sobre la posibilidad de unificar propuestas, lo que pueden parecer pequeñas diferencias entre dos propuestas similares, pueden marcar grandes diferencias a la hora de hacerlas realidad. Por ello hay personas que pueden querer apoyar una de ellas y no otras. Es por eso que debemos respetar los apoyos particulares que haya dado la gente, y no unificar las propuestas. Esto es independiente de que los autores de las propuestas quieran unirlas. Una vez las propuestas están recibiendo apoyos pasan a ser tanto de la gente que las apoya como de sus autores.</p>
-
-      <h2 id="8">Me he olvidado de mi contraseña o no me funciona ¿qué puedo hacer?</h2>
-      <ul>
-        <li>Puedes hacer <a href="https://decide.madrid.es/users/password/new">solicitar un nueva contraseña</a> para que se te envíe una nueva contraseña a tu correo electrónico.</li>
-        <li>Si la anterior solución no funcionan, puedes acercarte a cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a> que hay por todo Madrid, donde te resolverán el problema presencialmente solucionando el problema asociado a tu cuenta o creándote una cuenta nueva.</li>
-      </ul>
-
-      <h2 id="9">No consigo crear mi cuenta correctamente.</h2>
-      <ul>
-        <li>Revisa por favor la sección <a href="#1">"No me funciona la verificación de residencia"</a>, por si el problema estuviera en ese paso, que suele ser el problema más frecuente.</li>
-        <li>Si no se ha solucionado, revisa la sección <a href="#5">"¿Cómo creo y verifico mi cuenta?"</a>, para asegurarte de que estás siguiendo los pasos adecuadamente.</li>
-        <li>Si todavía se mantiene el problema, acércate a cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a> que hay por todo Madrid, donde te resolverán el problema presencialmente.</li>
-      </ul>
-
-      <h2 id="10">¿Cómo puedo cambiar mi correo electrónico, mi nombre de usuario, mi contraseña, darme de baja o activar/desactivar las notificaciones que me llegan al correo electrónico?</h2>
-
-      <p>Haz click en el enlace <a href="https://decide.madrid.es/users/sign_in">"Entrar"</a>, introduce tu correo electrónico y tu contraseña, y pulsa el botón "Entrar". Una vez hecho esto, haz click en el enlace <a href="https://decide.madrid.es/account">"Mi cuenta"</a> donde encontrarás todas las opciones que te permitirán cambiar tu correo electrónico, nombre de usuario, contraseña, darte de baja o activar/desactivar las notificaciones. Una vez realizado el cambio adecuado asegúrate de hacer click en el botón "Guardar cambios".</p>
-    </div>
+    <h2 id="10">¿Cómo puedo cambiar mi correo electrónico, mi nombre de usuario, mi contraseña, darme de baja o activar/desactivar las notificaciones que me llegan al correo electrónico?</h2>
+    <p>Haz click en el enlace <a href="https://decide.madrid.es/users/sign_in">"Entrar"</a>, introduce tu correo electrónico y tu contraseña, y pulsa el botón "Entrar". Una vez hecho esto, haz click en el enlace <a href="https://decide.madrid.es/account">"Mi cuenta"</a> donde encontrarás todas las opciones que te permitirán cambiar tu correo electrónico, nombre de usuario, contraseña, darte de baja o activar/desactivar las notificaciones. Una vez realizado el cambio adecuado asegúrate de hacer click en el botón "Guardar cambios".</p>
  </div>
 </div>
--- a/app/views/pages/how_it_works.html.erb
+++ b/app/views/pages/how_it_works.html.erb
@@ -1,23 +1,23 @@
-<div class="page row-full">
-  <div class="row">
-    <div class="menu small-12 medium-3 column">
-      <i class="icon-angle-left left"></i>&nbsp;
-      <%= link_to t("debates.show.back_link"), "/more_information", class: 'left back' %>
-      <ul class="clear">
-          <li>
-            <a href="#i">I. <%= t('pages.more_information.how_it_works.i') %></a>
-            <ul>
-              <li><a href="#i1">I.1. <%= t('pages.more_information.how_it_works.i1') %></a></li>
-              <li><a href="#i2">I.2. <%= t('pages.more_information.how_it_works.i2') %></a></li>
-            </ul>
-          </li>
-      </ul>
-    </div>
-    <div class="text small-12 medium-9 column">
+<div class="row margin-top">
+  <div class="small-12 medium-3 column">
+    <%= link_to "/more_information", class: 'back' do %>
+      <i class="icon-angle-left"></i>
+      <%= t("debates.show.back_link") %>
+    <% end %>

-  <h1><%= t('pages.more_information.titles.how_it_works') %></h1>
+    <ul class="menu vertical margin-top">
+        <li>
+          <a href="#i"><strong>I. <%= t('pages.more_information.how_it_works.i') %></strong></a>
+          <ul class="nested vertical menu">
+            <li><a href="#i1"><strong>I.1. <%= t('pages.more_information.how_it_works.i1') %></strong></a></li>
+            <li><a href="#i2"><strong>I.2. <%= t('pages.more_information.how_it_works.i2') %></strong></a></li>
+          </ul>
+        </li>
+    </ul>
+  </div>

+  <div class="small-12 medium-9 column">
+    <h1><%= t('pages.more_information.titles.how_it_works') %></h1>
    <%= markdown t('pages.more_information.how_it_works.text') %>
  </div>
-  </div>
 </div>
--- a/app/views/pages/how_to_use.html.erb
+++ b/app/views/pages/how_to_use.html.erb
@@ -1,13 +1,12 @@
-<div class="page row-full">
-  <div class="row">
-    <div class="text small-12 column">
-      <i class="icon-angle-left left"></i>&nbsp;
-      <%= link_to t("debates.show.back_link"), "/more_information", class: 'left back' %>
+<div class="row margin-top">
+  <div class="text small-12 column">
+    <%= link_to "/more_information", class: 'back' do %>
+      <i class="icon-angle-left"></i>
+      <%= t("debates.show.back_link") %>
+    <% end %>

-      <h1 class="clear"><%= t('pages.more_information.titles.how_to_use') %></h1>
+    <h1><%= t('pages.more_information.titles.how_to_use') %></h1>

-      <%= markdown t('pages.more_information.how_to_use.text') %>
-      
-    </div>
+    <%= markdown t('pages.more_information.how_to_use.text') %>
  </div>
 </div>
--- a/app/views/pages/more_information.html.erb
+++ b/app/views/pages/more_information.html.erb
@@ -1,60 +1,69 @@
 <% provide :title do %><%= t('pages.titles.more_information') %><% end %>
 <div class="page row-full">
  <div class="row">
-    <div class="more-information text small-12 medium-8 column">
+    <div class="more-information margin-top small-12 medium-7 column">
      <h1><%= t('pages.titles.more_information') %></h1>
-      <ul>
+      <ul class="no-bullet">
        <li>
          <%= link_to page_path('how_it_works') do %>
            <%= t('pages.more_information.titles.how_it_works') %>
+            <br>
            <span><%= t('pages.more_information.description.how_it_works') %></span>
          <% end %>
        </li>
        <li>
        <%= link_to page_path('how_to_use') do %>
            <%= t('pages.more_information.titles.how_to_use') %>
+            <br>
            <span><%= t('pages.more_information.description.how_to_use') %></span>
        <% end %>
        </li>
        <li>
        <%= link_to page_path('participation') do %>
            <%= t('pages.more_information.titles.participation') %>
+            <br>
            <span><%= t('pages.more_information.description.participation') %></span>
        <% end %>
        </li>
        <li>
        <%= link_to page_path('proposals_info') do %>
            <%= t('pages.more_information.titles.proposals_info') %>
+            <br>
            <span><%= t('pages.more_information.description.proposals_info') %></span>
        <% end %>
        </li>
        <li>
        <%= link_to page_path('spending_proposals_info') do %>
            <%= t('pages.more_information.titles.spending_proposals_info') %>
+            <br>
            <span><%= t('pages.more_information.description.spending_proposals_info') %></span>
        <% end %>
        </li>
        <li>
        <%= link_to page_path('participation_world') do %>
            <%= t('pages.more_information.titles.participation_world') %>
+            <br>
            <span><%= t('pages.more_information.description.participation_world') %></span>
        <% end %>
        </li>
        <li>
        <%= link_to page_path('participation_facts') do %>
            <%= t('pages.more_information.titles.participation_facts') %>
+            <br>
            <span><%= t('pages.more_information.description.participation_facts') %></span>
        <% end %>
        </li>
        <li>
        <%= link_to page_path('faq') do %>
            <%= t('pages.more_information.titles.faq') %>
+            <br>
            <span><%= t('pages.more_information.description.faq') %></span>
        <% end %>
        </li>
        <li>
        <%= link_to page_path('proposals_info', :anchor => "iii") do %>
            <%= t('pages.more_information.titles.signature_sheet') %>
+            <br>
            <span><%= t('pages.more_information.description.signature_sheet') %></span>
        <% end %>
        </li>
--- a/app/views/pages/opendata.html.erb
+++ b/app/views/pages/opendata.html.erb
@@ -1,8 +1,21 @@
 <% provide :title do %><%= t('pages.titles.opendata') %><% end %>
-<div class="page row-full">
-  <div class="row">
-    <div class="alert-box info radius text small-12 column">
-      <p><%= t('pages.while_unfinished_html') %></p>
+
+<div class="row expanded highlight">
+  <div class="row margin">
+    <div class="small-12 medium-7 column">
+      <h1><%= t("pages.opendata.title") %></h1>
+      <p><strong><%= t("pages.opendata.slogan_html") %></strong></p>
+      <%= link_to t("pages.opendata.go_old"), t("layouts.header.external_link_opendata_url"), target: "_blank", class: "button" %>
+    </div>
+
+    <div class="show-for-medium-up small-12 medium-5 column text-center">
+      <%= image_tag("icon_home.png", size: "330x240", alt:"", role:"presentation") %>
    </div>
  </div>
 </div>
+
+<div class="row margin-top">
+  <div class=" small-12 column">
+    <p><%= t('pages.while_unfinished_html') %></p>
+  </div>
+</div>
--- a/app/views/pages/participation.html.erb
+++ b/app/views/pages/participation.html.erb
@@ -1,84 +1,87 @@
-<div class="page row-full">
-  <div class="row">
-  <div class="menu small-12 medium-3 column">
-    <i class="icon-angle-left left"></i>&nbsp;
-    <%= link_to t("debates.show.back_link"), "/more_information", class: 'left back' %>
-    <ul class="clear">
+<div class="row margin-top">
+  <div class="small-12 medium-3 column">
+    <%= link_to "/more_information", class: 'back' do %>
+      <i class="icon-angle-left"></i>
+      <%= t("debates.show.back_link") %>
+    <% end %>
+
+    <ul class="menu vertical margin-top hide-for-small-only">
        <li>
-          <a href="#i">I. Participación</a>
-          <ul>
-            <li><a href="#i1">I.1. Propuestas ciudadanas</a></li>
-            <li><a href="#i2">I.2. Presupuestos participativos</a></li>
-            <li><a href="#i3">I.3. Legislacion colaborativa</a></li>
-            <li><a href="#i4">I.4. Co-gobierno ciudadano</a></li>
-            <li><a href="#i5">I.5. Participación sectorial</a></li>
-            <li><a href="#i6">I.6. Inclusión, neutralidad y privacidad</a></li>
-            <li><a href="#i7">I.7. Innovación social</a></li>
+          <a href="#i"><strong>I. Participación</strong></a>
+          <ul class="nested vertical menu">
+            <li><a href="#i1"><strong>I.1. Propuestas ciudadanas</strong></a></li>
+            <li><a href="#i2"><strong>I.2. Presupuestos participativos</strong></a></li>
+            <li><a href="#i3"><strong>I.3. Legislacion colaborativa</strong></a></li>
+            <li><a href="#i4"><strong>I.4. Co-gobierno ciudadano</strong></a></li>
+            <li><a href="#i5"><strong>I.5. Participación sectorial</strong></a></li>
+            <li><a href="#i6"><strong>I.6. Inclusión, neutralidad y privacidad</strong></a></li>
+            <li><a href="#i7"><strong>I.7. Innovación social</strong></a></li>
          </ul>
        </li>
        <li>
-          <a href="#ii">II. Transparencia</a>
-          <ul>
-            <li><a href="#ii1">II.1. Ordenanza de transparencia</a></li>
-            <li><a href="#ii2">II.2. Portal de transparencia</a></li>
-            <li><a href="#ii3">II.3. Datos abiertos</a></li>
-            <li><a href="#ii4">II.4. Agendas públicas</a></li>
-            <li><a href="#ii5">II.5. Transparencia del Lobby</a></li>
+          <a href="#ii"><strong>II. Transparencia</strong></a>
+          <ul class="nested vertical menu">
+            <li><a href="#ii1"><strong>II.1. Ordenanza de transparencia</strong></a></li>
+            <li><a href="#ii2"><strong>II.2. Portal de transparencia</strong></a></li>
+            <li><a href="#ii3"><strong>II.3. Datos abiertos</strong></a></li>
+            <li><a href="#ii4"><strong>II.4. Agendas públicas</strong></a></li>
+            <li><a href="#ii5"><strong>II.5. Transparencia del Lobby</strong></a></li>
          </ul>
        </li>
    </ul>
-    </div>
-    <div class="text small-12 medium-9 column">
-      <h1>Participación y Transparencia en Madrid - Próximas novedades</h1>
+  </div>

-        <p>Desde el nuevo gobierno del Ayuntamiento de Madrid ponemos en marcha un nuevo proyecto de participación y transparencia, desarrollado a través de la recién creada área de gobierno: Participación Ciudadana, Transparencia y Gobierno Abierto. El objetivo de este nuevo proyecto es claro: que los madrileños puedan decidir directamente la política de la ciudad, y que todo lo que ocurra en el Ayuntamiento, hasta el último rincón, esté a la vista de todos.</p>
+  <div class="small-12 medium-9 column">
+    <h1>Participación y Transparencia en Madrid - Próximas novedades</h1>

-        <p>Este nuevo área de gobierno también es la encargada de la atención al ciudadano, de las sugerencias y reclamaciones, de la evaluación y calidad de las políticas y gestión del Ayuntamiento, de la administración electrónica y otros temas relacionados con la relación entre ciudadanía e institución.</p>
+    <p>Desde el nuevo gobierno del Ayuntamiento de Madrid ponemos en marcha un nuevo proyecto de participación y transparencia, desarrollado a través de la recién creada área de gobierno: Participación Ciudadana, Transparencia y Gobierno Abierto. El objetivo de este nuevo proyecto es claro: que los madrileños puedan decidir directamente la política de la ciudad, y que todo lo que ocurra en el Ayuntamiento, hasta el último rincón, esté a la vista de todos.</p>

-        <p>Iremos publicando nuestros avances, las novedades y cualquier otra cosa que queramos compartir con vosotros en relación con el proyecto en <a href="/blog" target="_blank">nuestro blog</a>.</p>
+    <p>Este nuevo área de gobierno también es la encargada de la atención al ciudadano, de las sugerencias y reclamaciones, de la evaluación y calidad de las políticas y gestión del Ayuntamiento, de la administración electrónica y otros temas relacionados con la relación entre ciudadanía e institución.</p>

-        <p>Podéis escribirnos para lo que queráis a <a href="mailto:ag.gobiernoabierto@madrid.es">ag.gobiernoabierto@madrid.es</a></p>
+    <p>Iremos publicando nuestros avances, las novedades y cualquier otra cosa que queramos compartir con vosotros en relación con el proyecto en <a href="/blog" target="_blank">nuestro blog</a>.</p>

-        <p>A continuación os presentamos algunas de las principales novedades que tenemos planeadas poner en marcha en relación con el proyecto de participación y transparencia, aparte de las que vayamos diseñando o se nos vayan proponiendo durante la legislatura:</p>
+    <p>Podéis escribirnos para lo que queráis a <a href="mailto:ag.gobiernoabierto@madrid.es">ag.gobiernoabierto@madrid.es</a></p>

-        <h3 id="i">I. Participación.</h3>
-        <ul>
-        <li id="i1"><strong>I.1. Propuestas ciudadanas.</strong> Un espacio que permite que entre todos decidamos qué debe ser Madrid. Cualquiera puede presentar propuestas, que en caso de que sean aceptadas mayoritariamente se llevarán a cabo por parte del Ayuntamiento. Debate, propón, decide.</li>
+    <p>A continuación os presentamos algunas de las principales novedades que tenemos planeadas poner en marcha en relación con el proyecto de participación y transparencia, aparte de las que vayamos diseñando o se nos vayan proponiendo durante la legislatura:</p>

-        <li id="i2"><strong>I.2. Presupuestos participativos.</strong> Parte del presupuesto de inversión del Ayuntamiento (el que no está comprometido ya con necesidades básicas como pueden ser los servicios sociales o las emergencias), será reservado para ser decidido su uso por la ciudadanía. La gente hará propuestas, se tasarán las más apoyadas, y luego los ciudadanos decidirán en cuáles de esos proyectos priorizar el presupuesto reservado.</li>
+    <h3 id="i">I. Participación.</h3>
+    <ul>
+    <li id="i1"><strong>I.1. Propuestas ciudadanas.</strong> Un espacio que permite que entre todos decidamos qué debe ser Madrid. Cualquiera puede presentar propuestas, que en caso de que sean aceptadas mayoritariamente se llevarán a cabo por parte del Ayuntamiento. Debate, propón, decide.</li>

-        <li id="i3"><strong>I.3. Legislacion colaborativa.</strong> A través de diferentes fases de participación, la ciudadanía tendrá un papel fundamental colaborando directamente en la elaboración de las propuestas, reglamentos, decretos o cualquier otro tipo de trabajo político desarrollado por el gobierno municipal. Una participación real desde el principio al fin del proceso legislativo, desde decidir los expertos en la materia hasta revisar el texto final.</li>
+    <li id="i2"><strong>I.2. Presupuestos participativos.</strong> Parte del presupuesto de inversión del Ayuntamiento (el que no está comprometido ya con necesidades básicas como pueden ser los servicios sociales o las emergencias), será reservado para ser decidido su uso por la ciudadanía. La gente hará propuestas, se tasarán las más apoyadas, y luego los ciudadanos decidirán en cuáles de esos proyectos priorizar el presupuesto reservado.</li>

-        <li id="i4"><strong>I.4. Co-gobierno ciudadano.</strong> Mediante este sistema la ciudadanía podrá decidir las líneas prioritarias de actuación del Ayuntamiento a medio plazo.</li>
+    <li id="i3"><strong>I.3. Legislacion colaborativa.</strong> A través de diferentes fases de participación, la ciudadanía tendrá un papel fundamental colaborando directamente en la elaboración de las propuestas, reglamentos, decretos o cualquier otro tipo de trabajo político desarrollado por el gobierno municipal. Una participación real desde el principio al fin del proceso legislativo, desde decidir los expertos en la materia hasta revisar el texto final.</li>

-        <li id="i5"><strong>I.5. Participación sectorial.</strong> La participación ciudadana se va a tratar de manera transversal en todas las áreas de gobierno del Ayuntamiento, afectando a todos los procesos que se lleven a cabo. Un ejemplo de esto es el proceso de auditoría ciudadana de la deuda, que llevaremos a cabo con el Área de Gobierno de Economía y Hacienda.</li>
+    <li id="i4"><strong>I.4. Co-gobierno ciudadano.</strong> Mediante este sistema la ciudadanía podrá decidir las líneas prioritarias de actuación del Ayuntamiento a medio plazo.</li>

-        <li id="i6"><strong>I.6. Inclusión, neutralidad y privacidad.</strong> Una de las misiones principales del área será velar por la inclusión de todo el mundo en los procesos participativos, para que todas las voces y voluntades formen parte de ellos y no se quede nadie fuera. Para ello, desarrollaremos una mesa de inclusión a la que invitaremos a todos los expertos, colectivos y asociaciones que trabajen con colectivos excluidos, para diseñar las maneras adecuadas de superar estas brechas. La protección de la participación se complementará con la protección de la neutralidad y privacidad en todos los procesos, para asegurar su legitimidad y confianza.</li>
+    <li id="i5"><strong>I.5. Participación sectorial.</strong> La participación ciudadana se va a tratar de manera transversal en todas las áreas de gobierno del Ayuntamiento, afectando a todos los procesos que se lleven a cabo. Un ejemplo de esto es el proceso de auditoría ciudadana de la deuda, que llevaremos a cabo con el Área de Gobierno de Economía y Hacienda.</li>

-        <li id="i7"><strong>I.7. Innovación social.</strong> Pretendemos crear un entorno que movilice la inteligencia colectiva existente en favor de una ciudad más hospitalaria e inclusiva. Espacios donde la sociedad se hable y piense con la administración, con la convicción de que son los ciudadanos quienes mejor conocen sus problemas, y es en lo colectivo donde están los expertos que pueden hallar las soluciones.</li>
-        </ul>
-        <h3 id="ii">II. Transparencia</h3>
-        <ul>
-          <li id="ii1"><strong>II.1. Ordenanza de transparencia</strong>
-          Este ayuntamiento cree en la transparencia como medio para conseguir objetivos claves para el desarrollo de la democracia. En la práctica, el derecho de acceso a la información tiene un efecto disuasorio y preventivo sobre la corrupción. Además tiene un impacto directo sobre los derechos democráticos más esenciales como es el derecho a la participación, desde su concepción más básica como es votar en las elecciones, el derecho a una prensa libre e independiente o sobre todo nuestro derecho a obtener o a exigir una rendición de cuentas completa de lo público.<br>
-          El Ayuntamiento de Madrid se propone aprobar una norma de transparencia que incluya los principios más avanzados en esta materia y que incluya la obligación de las instituciones públicas hacer pública, reactiva o proactivamente, toda la información, registrada, archivada, elaborada, recibida o en posesión de las autoridades públicas sea cual sea el formato. Se trata de explicar todo lo que afecte a una decisión sobre lo público: qué se hace, quién lo hace, por qué se hace, cómo se hace y cuánto cuesta. Además esta información debe ser publicada en formatos abiertos que la hagan más accesible y reutilizable por cualquiera.</li>
+    <li id="i6"><strong>I.6. Inclusión, neutralidad y privacidad.</strong> Una de las misiones principales del área será velar por la inclusión de todo el mundo en los procesos participativos, para que todas las voces y voluntades formen parte de ellos y no se quede nadie fuera. Para ello, desarrollaremos una mesa de inclusión a la que invitaremos a todos los expertos, colectivos y asociaciones que trabajen con colectivos excluidos, para diseñar las maneras adecuadas de superar estas brechas. La protección de la participación se complementará con la protección de la neutralidad y privacidad en todos los procesos, para asegurar su legitimidad y confianza.</li>

-          <li id="ii2"><strong>II.2. Portal de transparencia</strong>
-          En cumplimiento de la Ley 19/2013 de Transparencia, Acceso a la Información y Buen Gobierno, y de su futura implementación en una Ordenanza Municipal en Madrid, el Ayuntamiento de Madrid plantea el desarrollo y mejora del Portal de la Transparencia. El Ayuntamiento no se limitará a cumplir con las obligaciones que se adquieran cuando entre en vigor la ley 19/2013 sino que aprobará mediante su Ordenanza las obligaciones y derechos que posibiliten la publicación de una lista de la información más ambiciosa que debe encontrarse en el Portal de transparencia del Ayuntamiento siguiendo los mandatos legales.<br>
-          El objetivo de esta mejora es no solo la publicación de un mayor volumen de información sino también la publicación de esta información en formatos que la hagan más accesible y fácil de entender para los ciudadanos.</li>
+    <li id="i7"><strong>I.7. Innovación social.</strong> Pretendemos crear un entorno que movilice la inteligencia colectiva existente en favor de una ciudad más hospitalaria e inclusiva. Espacios donde la sociedad se hable y piense con la administración, con la convicción de que son los ciudadanos quienes mejor conocen sus problemas, y es en lo colectivo donde están los expertos que pueden hallar las soluciones.</li>
+    </ul>
+    <h3 id="ii">II. Transparencia</h3>
+    <ul>
+      <li id="ii1"><strong>II.1. Ordenanza de transparencia</strong>
+      Este ayuntamiento cree en la transparencia como medio para conseguir objetivos claves para el desarrollo de la democracia. En la práctica, el derecho de acceso a la información tiene un efecto disuasorio y preventivo sobre la corrupción. Además tiene un impacto directo sobre los derechos democráticos más esenciales como es el derecho a la participación, desde su concepción más básica como es votar en las elecciones, el derecho a una prensa libre e independiente o sobre todo nuestro derecho a obtener o a exigir una rendición de cuentas completa de lo público.<br>
+      El Ayuntamiento de Madrid se propone aprobar una norma de transparencia que incluya los principios más avanzados en esta materia y que incluya la obligación de las instituciones públicas hacer pública, reactiva o proactivamente, toda la información, registrada, archivada, elaborada, recibida o en posesión de las autoridades públicas sea cual sea el formato. Se trata de explicar todo lo que afecte a una decisión sobre lo público: qué se hace, quién lo hace, por qué se hace, cómo se hace y cuánto cuesta. Además esta información debe ser publicada en formatos abiertos que la hagan más accesible y reutilizable por cualquiera.</li>

-          <li id="ii3"><strong>II.3. Datos abiertos</strong>
-          El Ayuntamiento tiene como objetivo compartir todos los datos que tienen en su poder en formatos abiertos y fomentar su reutilización por parte de la sociedad. El objetivo por tanto es doble, por un lado se trabajará en la mejora del portal de datos, en aumentar la cantidad, la calidad y la frecuencia en la publicación de datos, y por otro lado se abrirán canales de colaboración para promover las aplicaciones y los usos que resulten de la reutilización de los datos.</li>
+      <li id="ii2"><strong>II.2. Portal de transparencia</strong>
+      En cumplimiento de la Ley 19/2013 de Transparencia, Acceso a la Información y Buen Gobierno, y de su futura implementación en una Ordenanza Municipal en Madrid, el Ayuntamiento de Madrid plantea el desarrollo y mejora del Portal de la Transparencia. El Ayuntamiento no se limitará a cumplir con las obligaciones que se adquieran cuando entre en vigor la ley 19/2013 sino que aprobará mediante su Ordenanza las obligaciones y derechos que posibiliten la publicación de una lista de la información más ambiciosa que debe encontrarse en el Portal de transparencia del Ayuntamiento siguiendo los mandatos legales.<br>
+      El objetivo de esta mejora es no solo la publicación de un mayor volumen de información sino también la publicación de esta información en formatos que la hagan más accesible y fácil de entender para los ciudadanos.</li>

-          <li id="ii4"><strong>II.4. Agendas públicas</strong>
-          En el moderno proceso de toma de decisiones por los responsables políticos, la publicación de las agendas de los cargos públicos es una medida fundamental para garantizar la transparencia de las instituciones. De esta forma, la ciudadanía puede tener una idea clara de quiénes participan en el proceso de toma de decisiones.<br>
-          Esta necesidad de publicidad viene refrendada por destacados organismos internacionales, como el Grupo de Estados Contra la Corrupción del Consejo de Europa (GRECO), que la señala como uno de los estándares internacionales a tener en cuenta para incorporar al sistema parlamentario español; o la Organización para la Cooperación y el Desarrollo Económico (OCDE) que, en junio de 2013, destacaba que "en el despertar de una crisis global donde la protección del interés público ha sido cuestionada de forma mundial, hay una creciente necesidad de valorar el progreso alcanzado para garantizar un proceso de toma de decisiones abierto, balanceado y con un público informado".<br>
-          En línea con este espíritu de apertura, y con la decidida voluntad de que exista fluidez en la información, se considera necesario hacer públicas las agendas de los Concejales como inicio de una política de transparencia y rendición de cuentas en el Ayuntamiento de Madrid, de forma que sea posible saber qué trabajo realizan los miembros del gobierno municipal y qué colectivos o circunstancias pueden tener repercusión en las decisiones que se toman.<br>
-          Ya se pueden consultar <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Transparencia/Informacion-institucional-y-organizativa/Agendas-publicas-de-los-concejales/Agendas-publicas-de-los-concejales?vgnextfmt=default&vgnextchannel=481f003fec17e410VgnVCM1000000b205a0aRCRD" target="_blank">las agendas de los concejales</a> pero el Ayuntamiento está trabajando en una aplicación mejor que permita encontrar las reuniones más fácilmente.</li>
+      <li id="ii3"><strong>II.3. Datos abiertos</strong>
+      El Ayuntamiento tiene como objetivo compartir todos los datos que tienen en su poder en formatos abiertos y fomentar su reutilización por parte de la sociedad. El objetivo por tanto es doble, por un lado se trabajará en la mejora del portal de datos, en aumentar la cantidad, la calidad y la frecuencia en la publicación de datos, y por otro lado se abrirán canales de colaboración para promover las aplicaciones y los usos que resulten de la reutilización de los datos.</li>

-          <li id="ii5"><strong>II.5. Transparencia del Lobby</strong>
-          Con el objetivo de hacer el proceso de toma de decisiones del Ayuntamiento de Madrid un proceso lo más transparente posible, se propone la creación de un registro de lobbies que obligue a todas las personas que quieran reunirse con el Gobierno para ejercer influencia sobre los asuntos públicos a estar registrada en el mismo. El objetivo de este registro es conocer a qué intereses representan las personas que se reúnen con los representantes públicos.</li>
-        </ul>
-    </div>
+      <li id="ii4"><strong>II.4. Agendas públicas</strong>
+      En el moderno proceso de toma de decisiones por los responsables políticos, la publicación de las agendas de los cargos públicos es una medida fundamental para garantizar la transparencia de las instituciones. De esta forma, la ciudadanía puede tener una idea clara de quiénes participan en el proceso de toma de decisiones.<br>
+      Esta necesidad de publicidad viene refrendada por destacados organismos internacionales, como el Grupo de Estados Contra la Corrupción del Consejo de Europa (GRECO), que la señala como uno de los estándares internacionales a tener en cuenta para incorporar al sistema parlamentario español; o la Organización para la Cooperación y el Desarrollo Económico (OCDE) que, en junio de 2013, destacaba que "en el despertar de una crisis global donde la protección del interés público ha sido cuestionada de forma mundial, hay una creciente necesidad de valorar el progreso alcanzado para garantizar un proceso de toma de decisiones abierto, balanceado y con un público informado".<br>
+      En línea con este espíritu de apertura, y con la decidida voluntad de que exista fluidez en la información, se considera necesario hacer públicas las agendas de los Concejales como inicio de una política de transparencia y rendición de cuentas en el Ayuntamiento de Madrid, de forma que sea posible saber qué trabajo realizan los miembros del gobierno municipal y qué colectivos o circunstancias pueden tener repercusión en las decisiones que se toman.<br>
+      Ya se pueden consultar <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Transparencia/Informacion-institucional-y-organizativa/Agendas-publicas-de-los-concejales/Agendas-publicas-de-los-concejales?vgnextfmt=default&vgnextchannel=481f003fec17e410VgnVCM1000000b205a0aRCRD" target="_blank">las agendas de los concejales</a> pero el Ayuntamiento está trabajando en una aplicación mejor que permita encontrar las reuniones más fácilmente.</li>
+
+      <li id="ii5"><strong>II.5. Transparencia del Lobby</strong>
+      Con el objetivo de hacer el proceso de toma de decisiones del Ayuntamiento de Madrid un proceso lo más transparente posible, se propone la creación de un registro de lobbies que obligue a todas las personas que quieran reunirse con el Gobierno para ejercer influencia sobre los asuntos públicos a estar registrada en el mismo. El objetivo de este registro es conocer a qué intereses representan las personas que se reúnen con los representantes públicos.</li>
+    </ul>
  </div>
 </div>
+
--- a/app/views/pages/participation_facts.html.erb
+++ b/app/views/pages/participation_facts.html.erb
@@ -1,39 +1,38 @@
-<div class="page row-full">
-  <div class="row">
-    <div class="text small-12 medium-10 column small-centered">
-      <i class="icon-angle-left left"></i>&nbsp;
-      <%= link_to t("debates.show.back_link"), "/more_information", class: 'left back' %>
+<div class="row margin-top">
+  <div class="text small-12 column">

-      <h1 class="clear">Hechos sobre participación ciudadana y democracia directa</h1>
+    <%= link_to "/more_information", class: 'back' do %>
+      <i class="icon-angle-left"></i>
+      <%= t("debates.show.back_link") %>
+    <% end %>

-      <div class="small-12 medium-9">
-        <div class="flex-video">
-          <iframe width="560" height="315" src="https://www.youtube.com/embed/s_asCv_nkX0?list=PLhnvwI6F9eqUk7l8_sIVcPz7DjvE27hfS" frameborder="0" allowfullscreen title="Vídeos del canal de YouTube de Abriendo Madrid"></iframe>
-        </div>
-      </div>
+    <h1>Hechos sobre participación ciudadana y democracia directa</h1>

-      <h2>La democracia directa produce gente más informada y con más cultura política.</h2>
-      <p>El poner en marcha mecanismos de participación reales hace que la gente se preocupe por las decisiones que tiene que tomar, y que por lo tanto se informe sobre ellas. Esto se observa sistemáticamente al comparar diferentes regiones de un mismo país con diferentes grados de democracia directa, o en procesos particulares como por ejemplo la votación del Tratado por una Constitución para Europa, comparando los países que lo votaron en referéndum y los que no.</p>
-      <p>En ocasiones se argumenta que no se deben crear mecanismos de decisión ciudadana, porque un posible bajo nivel cultural o de conocimiento político haría que se tomaran malas decisiones. Esto se ha argumentado tradicionalmente en contra del voto femenino, del voto inmigrante, del voto de la gente sin renta, etc. pero lo que se ha demostrado es que permitir a toda esa gente decidir ha sido precisamente lo que ha permitido que escaparan de su situación de desigualdad cultural y de derechos, o al menos que la mejoraran considerablemente.</p>
-      <p><em>M. Benz / A. Stutzer (2004), «Are voters better informed when they have a larger say in politics?», Public Choice 119, p. 31-59</em></p>
-
-      <h2>La democracia directa es más efectiva para tomar decisiones que la representativa. Por ejemplo genera menos deuda.</h2>
-      <p>Los proyectos disparatados y los gastos desmesurados suelen venir por parte de políticos electos en lugar de por procesos de participación ciudadana. Los estados de Estados Unidos con sistemas de iniciativas populares efectivos generan un 7% menos de deuda que los que no los tienen, y las regiones en Suiza con referéndum obligatorios para gastos públicos importantes gastan un 19% menos que los demás.</p>
-      <p><em>R.K. von Weizsäcker (1992), «Staatsverschuldung und Demokratie», Kyklos 45, p. 51-67</em></p>
-      <p><em>L.P. Feld / J.G. Matsusaka (2003), »Budget referendums and government spending: evidence from Swiss cantons», Journal of Public Economics 87, p. 2703-2724</em></p>
-      <p><em>J. G. Matsusaka (2004), «For the Many or the Few. The Initiative, Public Policy, and American Democracy» University of Chicago Press</em></p>
-
-      <h2>La democracia directa protege mejor los derechos humanos y los de las minorías que la representativa</h2>
-      <p>Estudios de todos los referéndum suizos durante treinta años muestran que los referéndum cuando tratan sobre aumentar los derechos de las minorías se aprueban aproximadamente un 25% más que los que tratan de temas generales. En concreto, el 80% de los referéndum de este tipo a nivel federal fueron aprobados.</p>
-      <p>Decisiones como eliminar el derecho a la vivienda de manera efectiva, el derecho de sanidad para las personas migrantes, o el iniciar guerras contra otros países, suelen darse a través de gobiernos representativos, y no en referéndum ciudadanos.</p>
-      <p><em>B.S. Frey / M. Goette (1998), «Does the popular vote destroy civil rights?», American Journal of Political Science 42, p. 1343-1348</em></p>
-
-      <h2>En cualquier caso, la democracia directa no sustituye ni amenaza a la democracia representativa, la complementa. Y soluciona algunos problemas que no consigue la otra.</h2>
-      <p>El año que más iniciativas ciudadanas se votaron en los diferentes estados con democracia directa de Estados Unidos, estas decisiones sólo representaron el 0,6% de todas las decisiones que tomaron los políticos en esos estados.</p>
-      <p>Las decisiones directas de la ciudadanía no sustituyen en ningún lugar del mundo el sistema político representativo, sólo lo amplían y mejoran. Tampoco pretenden ser la solución a todos los problemas, también se toman decisiones equivocadas a través de las decisiones ciudadanas, pero se reduce el número de las decisiones erróneas que se toman teniendo sólo un sistema representativo.</p>
-      <p><em>M.D. Waters (2002), «Initiative and referendum in the United States: a primer», Washington: Citizen Lawmaker Press</em></p>
-
-      <h2>Si los ciudadanos son capaces de elegir entre políticos que toman decisiones buenas o malas para el país, deben ser capaces de elegir directamente entre buenas y malas decisiones.</h2>
+    <div class="flex-video">
+      <iframe width="560" height="315" src="https://www.youtube.com/embed/s_asCv_nkX0?list=PLhnvwI6F9eqUk7l8_sIVcPz7DjvE27hfS" frameborder="0" allowfullscreen title="Vídeos del canal de YouTube de Abriendo Madrid"></iframe>
    </div>
+
+    <h2>La democracia directa produce gente más informada y con más cultura política.</h2>
+    <p>El poner en marcha mecanismos de participación reales hace que la gente se preocupe por las decisiones que tiene que tomar, y que por lo tanto se informe sobre ellas. Esto se observa sistemáticamente al comparar diferentes regiones de un mismo país con diferentes grados de democracia directa, o en procesos particulares como por ejemplo la votación del Tratado por una Constitución para Europa, comparando los países que lo votaron en referéndum y los que no.</p>
+    <p>En ocasiones se argumenta que no se deben crear mecanismos de decisión ciudadana, porque un posible bajo nivel cultural o de conocimiento político haría que se tomaran malas decisiones. Esto se ha argumentado tradicionalmente en contra del voto femenino, del voto inmigrante, del voto de la gente sin renta, etc. pero lo que se ha demostrado es que permitir a toda esa gente decidir ha sido precisamente lo que ha permitido que escaparan de su situación de desigualdad cultural y de derechos, o al menos que la mejoraran considerablemente.</p>
+    <p><em>M. Benz / A. Stutzer (2004), «Are voters better informed when they have a larger say in politics?», Public Choice 119, p. 31-59</em></p>
+
+    <h2>La democracia directa es más efectiva para tomar decisiones que la representativa. Por ejemplo genera menos deuda.</h2>
+    <p>Los proyectos disparatados y los gastos desmesurados suelen venir por parte de políticos electos en lugar de por procesos de participación ciudadana. Los estados de Estados Unidos con sistemas de iniciativas populares efectivos generan un 7% menos de deuda que los que no los tienen, y las regiones en Suiza con referéndum obligatorios para gastos públicos importantes gastan un 19% menos que los demás.</p>
+    <p><em>R.K. von Weizsäcker (1992), «Staatsverschuldung und Demokratie», Kyklos 45, p. 51-67</em></p>
+    <p><em>L.P. Feld / J.G. Matsusaka (2003), »Budget referendums and government spending: evidence from Swiss cantons», Journal of Public Economics 87, p. 2703-2724</em></p>
+    <p><em>J. G. Matsusaka (2004), «For the Many or the Few. The Initiative, Public Policy, and American Democracy» University of Chicago Press</em></p>
+
+    <h2>La democracia directa protege mejor los derechos humanos y los de las minorías que la representativa</h2>
+    <p>Estudios de todos los referéndum suizos durante treinta años muestran que los referéndum cuando tratan sobre aumentar los derechos de las minorías se aprueban aproximadamente un 25% más que los que tratan de temas generales. En concreto, el 80% de los referéndum de este tipo a nivel federal fueron aprobados.</p>
+    <p>Decisiones como eliminar el derecho a la vivienda de manera efectiva, el derecho de sanidad para las personas migrantes, o el iniciar guerras contra otros países, suelen darse a través de gobiernos representativos, y no en referéndum ciudadanos.</p>
+    <p><em>B.S. Frey / M. Goette (1998), «Does the popular vote destroy civil rights?», American Journal of Political Science 42, p. 1343-1348</em></p>
+
+    <h2>En cualquier caso, la democracia directa no sustituye ni amenaza a la democracia representativa, la complementa. Y soluciona algunos problemas que no consigue la otra.</h2>
+    <p>El año que más iniciativas ciudadanas se votaron en los diferentes estados con democracia directa de Estados Unidos, estas decisiones sólo representaron el 0,6% de todas las decisiones que tomaron los políticos en esos estados.</p>
+    <p>Las decisiones directas de la ciudadanía no sustituyen en ningún lugar del mundo el sistema político representativo, sólo lo amplían y mejoran. Tampoco pretenden ser la solución a todos los problemas, también se toman decisiones equivocadas a través de las decisiones ciudadanas, pero se reduce el número de las decisiones erróneas que se toman teniendo sólo un sistema representativo.</p>
+    <p><em>M.D. Waters (2002), «Initiative and referendum in the United States: a primer», Washington: Citizen Lawmaker Press</em></p>
+
+    <h2>Si los ciudadanos son capaces de elegir entre políticos que toman decisiones buenas o malas para el país, deben ser capaces de elegir directamente entre buenas y malas decisiones.</h2>
  </div>
 </div>
--- a/app/views/pages/participation_world.html.erb
+++ b/app/views/pages/participation_world.html.erb
@@ -1,50 +1,48 @@
-<div class="page row-full">
-  <div class="row">
-  <div class="menu small-12 medium-3 column">
-    <i class="icon-angle-left left"></i>&nbsp;
-    <%= link_to t("debates.show.back_link"), "/more_information", class: 'left back' %>
-    <ul class="clear">
-        <li>
-          <a href="#i">La nueva ola global de participación ciudadana</a>
-        </li>
-        <li>
-          <a href="#ii">Participación ciudadana directa con experiencia</a>
-        </li>
+<div class="row margin-top">
+  <div class="small-12 medium-3 column">
+    <%= link_to "/more_information", class: 'back' do %>
+      <i class="icon-angle-left"></i>
+      <%= t("debates.show.back_link") %>
+    <% end %>
+
+    <ul class="menu vertical margin-top">
+        <li><a href="#i"><strong>La nueva ola global de participación ciudadana</strong></a></li>
+        <li><a href="#ii"><strong>Participación ciudadana directa con experiencia</strong></a></li>
    </ul>
  </div>
-    <div class="text small-12 medium-9 column">
-      <h1>Participación ciudadana directa en el mundo</h1>
-      <p>En el mundo existen sistemas de participación ciudadana muy similares al que vamos a implementar en Madrid, que llevan funcionando desde hace más de cien años y en países muy diferentes. La experiencia larga y variada de dichos sistemas demuestra que lo que ponemos en marcha en Madrid tendrá un impacto muy positivo en la sociedad, como ha tenido en esos otros países.</p>

-      <p>Además de los ejemplos clásicos, como Suiza, asistimos a un desarrollo muy fuerte de los sistemas de participación ciudadana en todo el mundo, en particular en los últimos años, gracias especialmente a las nuevas posibilidades que nos brinda Internet. Islandia, Finlandia, Brasil, Estados Unidos, son algunos de los países que más están apostando por una participación directa de la ciudadanía en la toma de decisiones.</p>
+  <div class="small-12 medium-9 column">
+    <h1>Participación ciudadana directa en el mundo</h1>
+    <p>En el mundo existen sistemas de participación ciudadana muy similares al que vamos a implementar en Madrid, que llevan funcionando desde hace más de cien años y en países muy diferentes. La experiencia larga y variada de dichos sistemas demuestra que lo que ponemos en marcha en Madrid tendrá un impacto muy positivo en la sociedad, como ha tenido en esos otros países.</p>

-      <h2 id="i">La nueva ola global de participación ciudadana</h2>
+    <p>Además de los ejemplos clásicos, como Suiza, asistimos a un desarrollo muy fuerte de los sistemas de participación ciudadana en todo el mundo, en particular en los últimos años, gracias especialmente a las nuevas posibilidades que nos brinda Internet. Islandia, Finlandia, Brasil, Estados Unidos, son algunos de los países que más están apostando por una participación directa de la ciudadanía en la toma de decisiones.</p>

-      <p>Las nuevas formas de participación se están dirigiendo principalmente a que sean la ciudadanía quien decida qué caminos debe tomar la política de su país, a través de mecanismos de <strong>iniciativas ciudadanas</strong>. Finlandia es uno de los países donde se están desarrollando nuevas herramientas similares al nuevo portal de gobierno abierto de Madrid. Su plataforma <a href="http://openministry.info/" target="_blank">Open Ministry</a> permite a la población presentar y apoyar propuestas, y ha conseguido por ejemplo que se apruebe gracias a él la ley de matrimonio igualitario. Islandia también ha tenido una gran repercusión desde 2011, cuando lanzaron su plataforma Better Reykjavik, que ha permitido que el 58% de la población participe en el proceso de propuestas, seleccionando cada mes las 15 ideas más votadas.</p>
+    <h2 id="i">La nueva ola global de participación ciudadana</h2>

-      <p>Estonia es uno de los países que gracias a una apuesta clara por las nuevas tecnologías, ha podido situarse en cabeza de Europa en el nivel de uso por parte de la ciudadanía de Internet para  la interacción con el gobierno. No sólo los ciudadanos y ciudadanas resuelven diariamente todos sus trámites a través de Internet, sino que han puesto en marcha plataformas como Rahvakogu, donde después de los escándalos políticos de 2012, 50.000 personas (de un total de 1.3 millones) participaron proponiendo medidas para mejorar la situación democrática del país.</p>
+    <p>Las nuevas formas de participación se están dirigiendo principalmente a que sean la ciudadanía quien decida qué caminos debe tomar la política de su país, a través de mecanismos de <strong>iniciativas ciudadanas</strong>. Finlandia es uno de los países donde se están desarrollando nuevas herramientas similares al nuevo portal de gobierno abierto de Madrid. Su plataforma <a href="http://openministry.info/" target="_blank">Open Ministry</a> permite a la población presentar y apoyar propuestas, y ha conseguido por ejemplo que se apruebe gracias a él la ley de matrimonio igualitario. Islandia también ha tenido una gran repercusión desde 2011, cuando lanzaron su plataforma Better Reykjavik, que ha permitido que el 58% de la población participe en el proceso de propuestas, seleccionando cada mes las 15 ideas más votadas.</p>

-      <p>Otra de las principales experiencias que se están extendiendo rápidamente por todo el mundo son los <strong>presupuestos participativos</strong>. Estos consisten en mecanismos, generalmente acompañados de una plataforma en Internet, por los cuales el gobierno reserva parte de sus presupuestos de inversión (los que no están comprometidos ya en cuestiones como limpieza o servicios sociales), para que sea la ciudadanía quien decida en qué se gasta dicho dinero.</p>
+    <p>Estonia es uno de los países que gracias a una apuesta clara por las nuevas tecnologías, ha podido situarse en cabeza de Europa en el nivel de uso por parte de la ciudadanía de Internet para  la interacción con el gobierno. No sólo los ciudadanos y ciudadanas resuelven diariamente todos sus trámites a través de Internet, sino que han puesto en marcha plataformas como Rahvakogu, donde después de los escándalos políticos de 2012, 50.000 personas (de un total de 1.3 millones) participaron proponiendo medidas para mejorar la situación democrática del país.</p>

-      <p>Islandia es uno de los países de referencia al respecto, a través de su plataforma Betri Reykjavík-Betri Hverfi (Better District). Cada año se gastan 1.8 millones de euros en alrededor de 200 proyectos propuestos por la población para los distintos barrios de Reykjavík. Las ciudadanas y ciudadanos pueden participar y seguir el proyecto a través de la plataforma digital <a href="http://www.betrireykjavik.is" target="_blank">betrireykjavik</a>, en <a href="http://www.facebook.com/Betri.Reykjavik" target="_blank">Facebook</a> o a través de centros en sus distritos o comités distritales.</p>
+    <p>Otra de las principales experiencias que se están extendiendo rápidamente por todo el mundo son los <strong>presupuestos participativos</strong>. Estos consisten en mecanismos, generalmente acompañados de una plataforma en Internet, por los cuales el gobierno reserva parte de sus presupuestos de inversión (los que no están comprometidos ya en cuestiones como limpieza o servicios sociales), para que sea la ciudadanía quien decida en qué se gasta dicho dinero.</p>

-      <p>Otras experiencias de referencia incluyen París, donde los residentes decidirán hasta el 2020 cómo se gastan 426 millones de euros (lo que corresponde al 5% del presupuesto municipal de París); Nueva York, donde el año pasado dedicaron <a href="http://council.nyc.gov/html/action/pb.shtml" target="_blank">32 millones de euros a presupuestos participativos</a>; más de 100 ciudades brasileñas donde se han manejado <a href="http://www.washingtonpost.com/blogs/monkey-cage/wp/2014/01/22/brazil-let-its-citizens-make-decisions-about-city-budgets-heres-what-happened/" target="_blank">presupuestos participativos que han oscilado entre el 5% y el 15%</a>; entre muchas otras ciudades del mundo.</p>
+    <p>Islandia es uno de los países de referencia al respecto, a través de su plataforma Betri Reykjavík-Betri Hverfi (Better District). Cada año se gastan 1.8 millones de euros en alrededor de 200 proyectos propuestos por la población para los distintos barrios de Reykjavík. Las ciudadanas y ciudadanos pueden participar y seguir el proyecto a través de la plataforma digital <a href="http://www.betrireykjavik.is" target="_blank">betrireykjavik</a>, en <a href="http://www.facebook.com/Betri.Reykjavik" target="_blank">Facebook</a> o a través de centros en sus distritos o comités distritales.</p>

-      <h2 id="ii">Participación ciudadana directa con experiencia</h2>
+    <p>Otras experiencias de referencia incluyen París, donde los residentes decidirán hasta el 2020 cómo se gastan 426 millones de euros (lo que corresponde al 5% del presupuesto municipal de París); Nueva York, donde el año pasado dedicaron <a href="http://council.nyc.gov/html/action/pb.shtml" target="_blank">32 millones de euros a presupuestos participativos</a>; más de 100 ciudades brasileñas donde se han manejado <a href="http://www.washingtonpost.com/blogs/monkey-cage/wp/2014/01/22/brazil-let-its-citizens-make-decisions-about-city-budgets-heres-what-happened/" target="_blank">presupuestos participativos que han oscilado entre el 5% y el 15%</a>; entre muchas otras ciudades del mundo.</p>

-      <p>En diferentes países del mundo existen sistemas de participación ciudadana directa que vienen funcionando desde hace mucho tiempo sin pasar por las nuevas tecnologías. Aunque estos sistemas no tengan la agilidad de las nuevas plataformas, los procesos que se dan en ellos son básicamente los mismos, y nos aseguran la calidad y los resultados de los mecanismos que se van a poner en marcha. Comentamos a continuación tres de los casos más importantes y resaltamos algunas cifras para entender de lo que hablamos:</p>
+    <h2 id="ii">Participación ciudadana directa con experiencia</h2>

-      <h3>Suiza</h3>
-      <p>Desde 1848 se han votado unos 600 referéndum a nivel federal (<a href="https://www.admin.ch/ch/f/pore/va/vab_2_2_4_1_gesamt.html" target="_blank">compilación en francés</a>), y se celebran cada año en todo el país del orden de 200 referéndum a todos los niveles (municipal, cantonal y federal).</p>
-      <p>Aproximadamente una de cada dos leyes aprobadas en el Parlamento directamente, y luego consultada a la ciudadanía, fue anulada. Por otro lado, incluso aunque las iniciativas populares no tengan éxito, el gobierno acaba concediendo parte de las demandas propuestas, y se genera una atención nacional sobre el asunto tratado. Esto hace que aproximadamente la mitad de la gente que lanzó las iniciativas que no tuvieron éxito consideren que mereció la pena el esfuerzo y se obtuvo algo que no hubiera sido posible sin la iniciativa.</p>
+    <p>En diferentes países del mundo existen sistemas de participación ciudadana directa que vienen funcionando desde hace mucho tiempo sin pasar por las nuevas tecnologías. Aunque estos sistemas no tengan la agilidad de las nuevas plataformas, los procesos que se dan en ellos son básicamente los mismos, y nos aseguran la calidad y los resultados de los mecanismos que se van a poner en marcha. Comentamos a continuación tres de los casos más importantes y resaltamos algunas cifras para entender de lo que hablamos:</p>

-      <h3>Estados Unidos</h3>
-      <p>En este país no se cuenta con procesos de iniciativas ciudadanas a nivel federal, pero 27 de los 51 estados cuentan con algún tipo sistema de democracia directa (cambiando mucho la regulación y el alcance de un estado a otro). A nivel local, aproximadamente la mitad de las ciudades cuentan con un sistema de iniciativas ciudadanas vinculantes.</p>
-      <p>Entre 1904 y 2000 se convocaron casi 2.000 referéndum iniciados por la ciudadanía. En 1996 en los estados con mecanismos de iniciativas ciudadanas se convocaron 96 referéndum, frente a las más de 14.000 leyes y resoluciones aprobadas por los representantes de esos estados.</p>
+    <h3>Suiza</h3>
+    <p>Desde 1848 se han votado unos 600 referéndum a nivel federal (<a href="https://www.admin.ch/ch/f/pore/va/vab_2_2_4_1_gesamt.html" target="_blank">compilación en francés</a>), y se celebran cada año en todo el país del orden de 200 referéndum a todos los niveles (municipal, cantonal y federal).</p>
+    <p>Aproximadamente una de cada dos leyes aprobadas en el Parlamento directamente, y luego consultada a la ciudadanía, fue anulada. Por otro lado, incluso aunque las iniciativas populares no tengan éxito, el gobierno acaba concediendo parte de las demandas propuestas, y se genera una atención nacional sobre el asunto tratado. Esto hace que aproximadamente la mitad de la gente que lanzó las iniciativas que no tuvieron éxito consideren que mereció la pena el esfuerzo y se obtuvo algo que no hubiera sido posible sin la iniciativa.</p>

-      <h3>Alemania</h3>
-      <p>No existe en Alemania ningún mecanismo de democracia directa a nivel nacional, pero sí a nivel regional y local. Estos sistemas se introdujeron en su mayoría en los años 90. En 1996 el número de iniciativas ciudadanas fue de 318, reduciéndose en años posteriores, una vez tratados tantos temas pendientes anteriores a la introducción de estos mecanismos, a una media de 100 por año.</p>
+    <h3>Estados Unidos</h3>
+    <p>En este país no se cuenta con procesos de iniciativas ciudadanas a nivel federal, pero 27 de los 51 estados cuentan con algún tipo sistema de democracia directa (cambiando mucho la regulación y el alcance de un estado a otro). A nivel local, aproximadamente la mitad de las ciudades cuentan con un sistema de iniciativas ciudadanas vinculantes.</p>
+    <p>Entre 1904 y 2000 se convocaron casi 2.000 referéndum iniciados por la ciudadanía. En 1996 en los estados con mecanismos de iniciativas ciudadanas se convocaron 96 referéndum, frente a las más de 14.000 leyes y resoluciones aprobadas por los representantes de esos estados.</p>
+
+    <h3>Alemania</h3>
+    <p>No existe en Alemania ningún mecanismo de democracia directa a nivel nacional, pero sí a nivel regional y local. Estos sistemas se introdujeron en su mayoría en los años 90. En 1996 el número de iniciativas ciudadanas fue de 318, reduciéndose en años posteriores, una vez tratados tantos temas pendientes anteriores a la introducción de estos mecanismos, a una media de 100 por año.</p>

-    </div>
  </div>
 </div>
--- a/app/views/pages/privacy.html.erb
+++ b/app/views/pages/privacy.html.erb
@@ -1,26 +1,29 @@
 <% provide :title do %><%= t('pages.titles.privacy') %><% end %>
-<div class="page row-full">
-  <div class="row">
-    <div class="text small-12 column">

-      <%= render '/shared/print' %>
+<div class="row margin-top">

-      <h1><%= t("pages.privacy") %></h1>
+  <div class="small-12 medium-9 column">
+    <h1><%= t("pages.privacy") %></h1>

-      <h2>AVISO DE PROTECCIÓN DE DATOS</h2>
-      <ol>
-        <li>La navegación por la informacion disponible en el Portal de Gobierno Abierto del Ayuntamiento de Madrid es anónima.</li>
-        <li>Para utilizar los servicios contenidos en el Portal de Gobierno Abierto del Ayuntamiento de Madrid el usuario deberá darse de alta y proporcionar previamente los datos de carácter personal segun la informacion especifica que consta en cada tipo de alta.</li>
-        <li>Los datos aportados serán incorporados y tratados por el Ayuntamiento de Madrid de acuerdo con la descripción del fichero siguiente:
-          <ul>
-            <li><strong>Nombre del fichero/tratamiento:</strong> GESTIÓN DE PROCESOS PARTICIPATIVOS</li>
-            <li><strong>Finalidad del fichero/tratamiento:</strong> Gestionar los procesos participativos para el control de la habilitación de las personas que participan en los mismos y recuento meramente numérico y estadístico de los resultados derivados de los procesos de participación ciudadana</li>
-            <li><strong>Órgano responsable:</strong> DIRECCIÓN GENERAL DE PARTICIPACIÓN CIUDADANA (c/ Alcalá 45, 28014-Madrid)</li>
-          </ul>
-        </li>
-        <li>El interesado podrá ejercer los derechos de acceso, rectificación, cancelación y oposición, ante el órgano responsable indicado todo lo cual se informa en el cumplimiento del artículo 5 de la Ley Orgánica 15/1999, de 13 de diciembre, de Protección de Datos de Carácter Personal.</li>
-        <li>Como principio general, este sitio web no comparte ni revela información obtenida, excepto cuando haya sido autorizada por el usuario, o la informacion sea requerida por la autoridad judicial, ministerio fiscal o la policia judicial, o se de alguno de los supuestos regulados en el artículo 11 de la Ley Orgánica 15/1999, de 13 de diciembre, de Protección de Datos de Carácter Personal.</li>
-      </ol>
-    </div>
+    <h2>AVISO DE PROTECCIÓN DE DATOS</h2>
+    <ol>
+      <li>La navegación por la informacion disponible en el Portal de Gobierno Abierto del Ayuntamiento de Madrid es anónima.</li>
+      <li>Para utilizar los servicios contenidos en el Portal de Gobierno Abierto del Ayuntamiento de Madrid el usuario deberá darse de alta y proporcionar previamente los datos de carácter personal segun la informacion especifica que consta en cada tipo de alta.</li>
+      <li>Los datos aportados serán incorporados y tratados por el Ayuntamiento de Madrid de acuerdo con la descripción del fichero siguiente:
+        <ul>
+          <li><strong>Nombre del fichero/tratamiento:</strong> GESTIÓN DE PROCESOS PARTICIPATIVOS</li>
+          <li><strong>Finalidad del fichero/tratamiento:</strong> Gestionar los procesos participativos para el control de la habilitación de las personas que participan en los mismos y recuento meramente numérico y estadístico de los resultados derivados de los procesos de participación ciudadana</li>
+          <li><strong>Órgano responsable:</strong> DIRECCIÓN GENERAL DE PARTICIPACIÓN CIUDADANA (c/ Alcalá 45, 28014-Madrid)</li>
+        </ul>
+      </li>
+      <li>El interesado podrá ejercer los derechos de acceso, rectificación, cancelación y oposición, ante el órgano responsable indicado todo lo cual se informa en el cumplimiento del artículo 5 de la Ley Orgánica 15/1999, de 13 de diciembre, de Protección de Datos de Carácter Personal.</li>
+      <li>Como principio general, este sitio web no comparte ni revela información obtenida, excepto cuando haya sido autorizada por el usuario, o la informacion sea requerida por la autoridad judicial, ministerio fiscal o la policia judicial, o se de alguno de los supuestos regulados en el artículo 11 de la Ley Orgánica 15/1999, de 13 de diciembre, de Protección de Datos de Carácter Personal.</li>
+    </ol>
  </div>
+
+  <div class="small-12 medium-3 column">
+    <%= render '/shared/print' %>
+  </div>
+
 </div>
+
--- a/app/views/pages/proposals_info.html.erb
+++ b/app/views/pages/proposals_info.html.erb
@@ -1,52 +1,50 @@
-<div class="page row-full">
-  <div class="row">
-  <div class="menu small-12 medium-3 column">
-    <i class="icon-angle-left left"></i>&nbsp;
-    <%= link_to t("debates.show.back_link"), "/more_information", class: 'left back' %>
-    <ul class="clear">
-        <li>
-          <a href="#i">Explicación detallada del proceso</a>
-        </li>
-        <li>
-          <a href="#ii">Preguntas Frecuentes</a>
-        </li>
-        <li>
-          <a href="#iii">Hojas de firmas para recoger apoyos</a>
-        </li>
+<div class="row margin-top">
+  <div class="small-12 medium-3 column">
+
+    <%= link_to "/more_information", class: 'back' do %>
+      <i class="icon-angle-left"></i>
+      <%= t("debates.show.back_link") %>
+    <% end %>
+
+    <ul class="vertical menu margin-top">
+        <li><a href="#i"><strong>Explicación detallada del proceso</strong></a></li>
+        <li><a href="#ii"><strong>Preguntas Frecuentes</strong></a></li>
+        <li><a href="#iii"><strong>Hojas de firmas para recoger apoyos</strong></a></li>
    </ul>
  </div>
-    <div class="text small-12 medium-9 column">
-      <h1>¿Cómo funcionan las propuestas ciudadanas?</h1>
-      <p>El mecanismo de propuestas ciudadanas se resume en cuatro pasos muy sencillos:</p>
-      <ol>
-        <li><strong>¡Propones!</strong> Creas una propuesta en esta web.</li>
-        <li><strong>¡Apoyas!</strong> La gente hace click en el botón de apoyar tu propuesta (necesitas el apoyo del 2% de los empadronados mayores de 16 años para pasar a la siguiente fase).</li>
-        <li><strong>¡Decides!</strong> Si has conseguido suficientes apoyos, dejamos 45 días para que la gente pueda debatir sobre la propuesta, y después durante una semana se invita a toda la gente de Madrid a decidir si están a favor o en contra de tu propuesta, en esta misma web.</li>
-        <li><strong>¡Se hace!</strong> Si hay más gente a favor de tu propuesta que en contra, el gobierno del Ayuntamiento de Madrid asumirá como propia la propuesta y la llevará a cabo.</li>
-      </ol>

-      <p>Además no hace falta ni que tengas Internet, todos los pasos se pueden hacer en cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a> que hay por todo Madrid.</p>
+  <div class="small-12 medium-9 column">
+    <h1>¿Cómo funcionan las propuestas ciudadanas?</h1>
+    <p>El mecanismo de propuestas ciudadanas se resume en cuatro pasos muy sencillos:</p>
+    <ol>
+      <li><strong>¡Propones!</strong> Creas una propuesta en esta web.</li>
+      <li><strong>¡Apoyas!</strong> La gente hace click en el botón de apoyar tu propuesta (necesitas el apoyo del 2% de los empadronados mayores de 16 años para pasar a la siguiente fase).</li>
+      <li><strong>¡Decides!</strong> Si has conseguido suficientes apoyos, dejamos 45 días para que la gente pueda debatir sobre la propuesta, y después durante una semana se invita a toda la gente de Madrid a decidir si están a favor o en contra de tu propuesta, en esta misma web.</li>
+      <li><strong>¡Se hace!</strong> Si hay más gente a favor de tu propuesta que en contra, el gobierno del Ayuntamiento de Madrid asumirá como propia la propuesta y la llevará a cabo.</li>
+    </ol>

-      <div class="flex-video">
-        <iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLhnvwI6F9eqWqN8vyiZtfpV8SO11ague2" frameborder="0" allowfullscreen title="Vídeos del canal de YouTube de Abriendo Madrid"></iframe>
-      </div>
+    <p>Además no hace falta ni que tengas Internet, todos los pasos se pueden hacer en cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a> que hay por todo Madrid.</p>

-      <h2 id="i">Explicación detallada del proceso</h2>
-      <ol>
-        <li><strong>Creación de una propuesta</strong>. Cualquier persona (sin necesidad siquiera de estar empadronada en Madrid) puede crear una propuesta. Lo único que hay que hacer es pulsar el botón “Crear una propuesta” y rellenar los campos requeridos. La propuesta puede ser tan sencilla como una simple frase, pero te recomendamos detallarla todo lo posible, incluso añadiendo material adicional, para que sea más completa e interesante. Una vez creada aparecerá en esta web para que cualquiera pueda apoyarla.</li>
-        <li><strong>Apoyo de propuestas</strong>. Para apoyar una de las propuestas que aparece en la web, pulsamos el botón “apoyar esta propuesta” que aparece en cada una. Para este paso tendremos que estar empadronados en Madrid, así que al llevarlo a cabo por primera vez se nos pedirá que verifiquemos nuestra cuenta para estar seguros de este requerimiento. Se nos va a pedir que introduzcamos algunos datos para comprobar nuestra información de empadronamiento, y se nos enviará un código personal para que el proceso sea seguro. Las propuestas necesitan una cierta cantidad de apoyos para pasar a la siguiente fase; concretamente el 2% de los empadronados mayores de 16 años (que suponen 53.726 apoyos).</li>
-        <li><strong>Decisión sobre propuestas</strong>. Cuando una propuesta consigue los apoyos necesarios, se anuncia en la web. Desde ese momento se dejan 45 días para que todo el mundo pueda debatir e informarse sobre la propuesta. Todas las otras propuestas que hayan conseguido los apoyos necesarios en los primeros 30 días del tiempo de debate se agruparán junto a la primera para decidir sobre ellas al mismo tiempo. Pasados los 45 días se exponen estas propuestas en un espacio especial de votación de la web, donde durante una semana cualquier persona empadronada en Madrid y mayor de 16 años podrá decidir si está a favor o rechaza la propuesta. Para participar en este paso tendrás que tener tu cuenta de usuario verificada completamente, de tal forma que nos aseguremos que cada persona no tiene más de una cuenta y el proceso es seguro.</li>
-        <li><strong>Realización de las propuestas</strong>. En caso de que haya más gente a favor de una propuesta que rechazándola se aceptará como propuesta colectiva de la ciudadanía de Madrid, y el gobierno del Ayuntamiento de Madrid la asumirá como propia y la llevará a cabo.  Para ello en un plazo máximo de un mes, se realizarán los informes técnicos correspondientes sobre su legalidad, viabilidad y coste económico,  teniendo en cuenta a los sectores afectados y a la persona que haya lanzado la propuesta, para detallar la actuación correspondiente por parte del Ayuntamiento. Se publicarán en la web todos los informes realizados, y un seguimiento de las actuaciones que se lleven a cabo, para asegurar un correcto desarrollo de la propuesta.</li>
-      </ol>
+    <div class="flex-video">
+      <iframe width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLhnvwI6F9eqWqN8vyiZtfpV8SO11ague2" frameborder="0" allowfullscreen title="Vídeos del canal de YouTube de Abriendo Madrid"></iframe>
+    </div>

-      <p>Todas las acciones relacionadas con el proceso de propuestas ciudadanas pueden realizarse a través del portal de gobierno abierto, o presencialmente en cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a> existentes en Madrid.</p>
+    <h2 id="i">Explicación detallada del proceso</h2>
+    <ol>
+      <li><strong>Creación de una propuesta</strong>. Cualquier persona (sin necesidad siquiera de estar empadronada en Madrid) puede crear una propuesta. Lo único que hay que hacer es pulsar el botón “Crear una propuesta” y rellenar los campos requeridos. La propuesta puede ser tan sencilla como una simple frase, pero te recomendamos detallarla todo lo posible, incluso añadiendo material adicional, para que sea más completa e interesante. Una vez creada aparecerá en esta web para que cualquiera pueda apoyarla.</li>
+      <li><strong>Apoyo de propuestas</strong>. Para apoyar una de las propuestas que aparece en la web, pulsamos el botón “apoyar esta propuesta” que aparece en cada una. Para este paso tendremos que estar empadronados en Madrid, así que al llevarlo a cabo por primera vez se nos pedirá que verifiquemos nuestra cuenta para estar seguros de este requerimiento. Se nos va a pedir que introduzcamos algunos datos para comprobar nuestra información de empadronamiento, y se nos enviará un código personal para que el proceso sea seguro. Las propuestas necesitan una cierta cantidad de apoyos para pasar a la siguiente fase; concretamente el 2% de los empadronados mayores de 16 años (que suponen 53.726 apoyos).</li>
+      <li><strong>Decisión sobre propuestas</strong>. Cuando una propuesta consigue los apoyos necesarios, se anuncia en la web. Desde ese momento se dejan 45 días para que todo el mundo pueda debatir e informarse sobre la propuesta. Todas las otras propuestas que hayan conseguido los apoyos necesarios en los primeros 30 días del tiempo de debate se agruparán junto a la primera para decidir sobre ellas al mismo tiempo. Pasados los 45 días se exponen estas propuestas en un espacio especial de votación de la web, donde durante una semana cualquier persona empadronada en Madrid y mayor de 16 años podrá decidir si está a favor o rechaza la propuesta. Para participar en este paso tendrás que tener tu cuenta de usuario verificada completamente, de tal forma que nos aseguremos que cada persona no tiene más de una cuenta y el proceso es seguro.</li>
+      <li><strong>Realización de las propuestas</strong>. En caso de que haya más gente a favor de una propuesta que rechazándola se aceptará como propuesta colectiva de la ciudadanía de Madrid, y el gobierno del Ayuntamiento de Madrid la asumirá como propia y la llevará a cabo.  Para ello en un plazo máximo de un mes, se realizarán los informes técnicos correspondientes sobre su legalidad, viabilidad y coste económico,  teniendo en cuenta a los sectores afectados y a la persona que haya lanzado la propuesta, para detallar la actuación correspondiente por parte del Ayuntamiento. Se publicarán en la web todos los informes realizados, y un seguimiento de las actuaciones que se lleven a cabo, para asegurar un correcto desarrollo de la propuesta.</li>
+    </ol>

-      <p>El proceso de recogida de apoyos de una propuesta puede realizarse también a través de hojas de firmas, cuyo modelo puede ser <a href="/docs/formulario_propuestas_ciudadanas.pdf" target="_blank">descargado en este documento PDF</a>. Los apoyos recogidos de esta manera se sumarán a los apoyos ya existentes en el portal de gobierno abierto. Las hojas pueden ser entregadas en cualquiera de los Registros del Ayuntamiento, presentes en cada una de las Juntas de Distrito. <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/Ayuntamiento/Oposiciones-y-Empleo/Direcciones-y-telefonos/Oficinas-de-Registro-del-Ayuntamiento-de-Madrid?vgnextfmt=default&vgnextoid=adedb88db777f010VgnVCM2000000c205a0aRCRD&vgnextchannel=ddc3ca1c5a057010VgnVCM100000dc0ca8c0RCRD" target="_blank">Ver la lista completa de Oficinas de Registro</a>.</p>
+    <p>Todas las acciones relacionadas con el proceso de propuestas ciudadanas pueden realizarse a través del portal de gobierno abierto, o presencialmente en cualquiera de las <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD" target="_blank">26 Oficinas de Atención al Ciudadano</a> existentes en Madrid.</p>

-      <p>Las directrices aprobadas por el Ayuntamiento por las que se regulan las propuestas ciudadanas son las siguientes: <a href="/docs/directrices_ejercicio_propuesta.pdf" target="_blank">Directrices sobre el derecho de propuesta (documento PDF)</a>.</p>
+    <p>El proceso de recogida de apoyos de una propuesta puede realizarse también a través de hojas de firmas, cuyo modelo puede ser <a href="/docs/formulario_propuestas_ciudadanas.pdf" target="_blank">descargado en este documento PDF</a>. Los apoyos recogidos de esta manera se sumarán a los apoyos ya existentes en el portal de gobierno abierto. Las hojas pueden ser entregadas en cualquiera de los Registros del Ayuntamiento, presentes en cada una de las Juntas de Distrito. <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/Ayuntamiento/Oposiciones-y-Empleo/Direcciones-y-telefonos/Oficinas-de-Registro-del-Ayuntamiento-de-Madrid?vgnextfmt=default&vgnextoid=adedb88db777f010VgnVCM2000000c205a0aRCRD&vgnextchannel=ddc3ca1c5a057010VgnVCM100000dc0ca8c0RCRD" target="_blank">Ver la lista completa de Oficinas de Registro</a>.</p>

-      <h2 id="ii">Preguntas Frecuentes</h2>
-      <ol>
+    <p>Las directrices aprobadas por el Ayuntamiento por las que se regulan las propuestas ciudadanas son las siguientes: <a href="/docs/directrices_ejercicio_propuesta.pdf" target="_blank">Directrices sobre el derecho de propuesta (documento PDF)</a>.</p>
+
+    <h2 id="ii">Preguntas Frecuentes</h2>
+    <ol>
      <li><strong>¿Cuáles son los requisitos que se solicitan para poder apoyar o votar propuestas?</strong><br>
      Estar empadronado en Madrid y ser mayor de 16 años. En caso de que se haga a través de Internet se requerirá que se haya verificado la cuenta de usuario de la web (encontramos el botón de verificación en el apartado “Mi cuenta” en la esquina superior derecha), proporcionando la información del padrón, y un medio de comunicación para obtener un código seguro de participación que introduciremos en la web para validar nuestra cuenta.
      </li>
@@ -97,13 +95,11 @@

      <li><strong>¿Cómo se sabe que una propuesta se ha cumplido?</strong><br>
      Cuando se aprueba una propuesta, el Ayuntamiento publica en la página web cuáles son los pasos que se van a realizar para ponerla en práctica, incluyendo los informes que las correspondientes áreas redacten y las acciones que se emprenden. La información es completa y transparente para que puedas hacer un seguimiento de cómo evoluciona cada propuesta ciudadana.</li>
+    </ol>

-      <h2 id="iii">Hojas de firmas para recoger apoyos</h2>
-
-      <p>El proceso de recogida de apoyos de una propuesta, además de en la web, puede realizarse a través de hojas de firmas, cuyo modelo puede ser <a href="/docs/formulario_propuestas_ciudadanas.pdf" target="_blank">descargado en este documento PDF</a>.</p>
-      <p>La hoja debe contener en las casillas superiores el código de la propuesta y su título, según figura en la página web específica de la propuesta, dentro del Portal de Gobierno Abierto.</p>
-      <p>Los apoyos recogidos de esta manera se sumarán a los apoyos ya existentes en el portal de gobierno abierto. Las hojas pueden ser entregadas en cualquiera de los Registros del Ayuntamiento, presentes en cada una de las Juntas de Distrito. <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/Ayuntamiento/Oposiciones-y-Empleo/Direcciones-y-telefonos/Oficinas-de-Registro-del-Ayuntamiento-de-Madrid?vgnextfmt=default&vgnextoid=adedb88db777f010VgnVCM2000000c205a0aRCRD&vgnextchannel=ddc3ca1c5a057010VgnVCM100000dc0ca8c0RCRD" target="_blank">Ver la lista completa de Oficinas de Registro</a>.</p>
-
-    </div>
+    <h2 id="iii">Hojas de firmas para recoger apoyos</h2>
+    <p>El proceso de recogida de apoyos de una propuesta, además de en la web, puede realizarse a través de hojas de firmas, cuyo modelo puede ser <a href="/docs/formulario_propuestas_ciudadanas.pdf" target="_blank">descargado en este documento PDF</a>.</p>
+    <p>La hoja debe contener en las casillas superiores el código de la propuesta y su título, según figura en la página web específica de la propuesta, dentro del Portal de Gobierno Abierto.</p>
+    <p>Los apoyos recogidos de esta manera se sumarán a los apoyos ya existentes en el portal de gobierno abierto. Las hojas pueden ser entregadas en cualquiera de los Registros del Ayuntamiento, presentes en cada una de las Juntas de Distrito. <a href="http://www.madrid.es/portales/munimadrid/es/Inicio/Ayuntamiento/Oposiciones-y-Empleo/Direcciones-y-telefonos/Oficinas-de-Registro-del-Ayuntamiento-de-Madrid?vgnextfmt=default&vgnextoid=adedb88db777f010VgnVCM2000000c205a0aRCRD&vgnextchannel=ddc3ca1c5a057010VgnVCM100000dc0ca8c0RCRD" target="_blank">Ver la lista completa de Oficinas de Registro</a>.</p>
  </div>
 </div>
--- a/app/views/pages/spending_proposals_info.html.erb
+++ b/app/views/pages/spending_proposals_info.html.erb
@@ -1,20 +1,18 @@
-<div class="page row-full">
-  <div class="row">
-  <div class="menu small-12 medium-3 column">
-    <i class="icon-angle-left left"></i>&nbsp;
-    <%= link_to t("spending_proposals.new.back_link"), "/more_information", class: 'left back' %>
-    <ul class="clear">
-        <li>
-          <a href="#i">Explicación detallada del proceso</a>
-        </li>
+<div class="row margin-top">
+  <div class="small-12 medium-3 column">
+    <%= link_to "/more_information", class: 'back' do %>
+      <i class="icon-angle-left"></i>
+      <%= t("debates.show.back_link") %>
+    <% end %>
+
+    <ul class="menu vertical margin-top">
+      <li><a href="#i"><strong>Explicación detallada del proceso</strong></a></li>
    </ul>
  </div>
-    <div class="text small-12 medium-9 column">
-      <h1>¿Cómo funcionan los presupuestos ciudadanos?</h1>

-      <h2 id="i">Explicación detallada del proceso</h2>
-      <p>Próximamente se podrá encontrar aquí una descripción del proceso de participación ciudadana en los presupuestos.</p>
-
-    </div>
+  <div class="small-12 medium-9 column">
+    <h1>¿Cómo funcionan los presupuestos ciudadanos?</h1>
+    <h2 id="i">Explicación detallada del proceso</h2>
+    <p>Próximamente se podrá encontrar aquí una descripción del proceso de participación ciudadana en los presupuestos.</p>
  </div>
 </div>
--- a/app/views/proposals/_comments.html.erb
+++ b/app/views/proposals/_comments.html.erb
@@ -15,7 +15,7 @@
        <% else %>
        <br>

-        <div class="alert-box radius info">
+        <div data-alert class="callout primary">
          <%= t("proposals.show.login_to_comment",
              signin: link_to(t("votes.signin"), new_user_session_path),
              signup: link_to(t("votes.signup"), new_user_registration_path)).html_safe %>
--- a/app/views/proposals/_featured_votes.html.erb
+++ b/app/views/proposals/_featured_votes.html.erb
@@ -6,7 +6,7 @@
      </div>
    <% else %>
      <%= link_to vote_featured_proposal_path(proposal, value: 'yes'),
-          class: "button button-support tiny radius expand",
+          class: "button button-support small expanded",
          title: t('proposals.proposal.support_title'), method: "post", remote: true do %>
        <%= t("proposals.proposal.support") %>
      <% end %>
--- a/app/views/proposals/_flag_actions.html.erb
+++ b/app/views/proposals/_flag_actions.html.erb
@@ -1,23 +1,19 @@
 <span class="flag-content">
  <% if show_flag_action? proposal %>
-    <a id="flag-expand-proposal-<%= proposal.id %>" data-dropdown="flag-drop-proposal-<%= proposal.id %>" aria-controls="flag-drop-proposal-<%= proposal.id %>" aria-expanded="false" title="<%= t('shared.flag') %>">
-      &nbsp;<i class="icon-flag flag-disable"></i>&nbsp;&nbsp;
+    <a id="flag-expand-proposal-<%= proposal.id %>" data-toggle="flag-drop-proposal-<%= proposal.id %>" title="<%= t('shared.flag') %>">
+      <i class="icon-flag flag-disable"></i>
    </a>
-    <ul id="flag-drop-proposal-<%= proposal.id %>" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
-      <li>
-        <%= link_to t('shared.flag'), flag_proposal_path(proposal), method: :put, remote: true, id: "flag-proposal-#{ proposal.id }" %>
-      </li>
-    </ul>
+    <div class="dropdown-pane" id="flag-drop-proposal-<%= proposal.id %>" data-dropdown data-auto-focus="true">
+      <%= link_to t('shared.flag'), flag_proposal_path(proposal), method: :put, remote: true, id: "flag-proposal-#{ proposal.id }" %>
+    </div>
  <% end %>

  <% if show_unflag_action? proposal %>
-    <a id="unflag-expand-proposal-<%= proposal.id %>" data-dropdown="unflag-drop-proposal-<%= proposal.id %>" aria-controls="unflag-drop-proposal-<%= proposal.id %>" aria-expanded="false" title="<%= t('shared.unflag') %>">
-      &nbsp;<i class="icon-flag flag-active"></i>&nbsp;&nbsp;
+    <a id="unflag-expand-proposal-<%= proposal.id %>" data-toggle="unflag-drop-proposal-<%= proposal.id %>" title="<%= t('shared.unflag') %>">
+      <i class="icon-flag flag-active"></i>
    </a>
-    <ul id="unflag-drop-proposal-<%= proposal.id %>" class="f-dropdown" data-dropdown-content aria-hidden="true" tabindex="-1">
-      <li>
-        <%= link_to t('shared.unflag'), unflag_proposal_path(proposal), method: :put, remote: true, id: "unflag-proposal-#{ proposal.id }" %>
-      </li>
-    </ul>
+    <div class="dropdown-pane" id="unflag-drop-proposal-<%= proposal.id %>" data-dropdown data-auto-focus="true">
+      <%= link_to t('shared.unflag'), unflag_proposal_path(proposal), method: :put, remote: true, id: "unflag-proposal-#{ proposal.id }" %>
+    </div>
  <% end %>
 </span>
--- a/app/views/proposals/_form.html.erb
+++ b/app/views/proposals/_form.html.erb
@@ -89,7 +89,7 @@
    </div>

    <div class="actions small-12 column">
-      <%= f.submit(class: "button radius", value: t("proposals.#{action_name}.form.submit_button")) %>
+      <%= f.submit(class: "button", value: t("proposals.#{action_name}.form.submit_button")) %>
    </div>
  </div>
 <% end %>
--- a/app/views/proposals/_proposal.html.erb
+++ b/app/views/proposals/_proposal.html.erb
@@ -1,16 +1,18 @@
-<div id="<%= dom_id(proposal) %>" class="proposal clear">
+<div id="<%= dom_id(proposal) %>" class="proposal clear" data-type="proposal">
  <div class="panel">
    <div class="row">

      <div class="small-12 medium-9 column">
        <div class="proposal-content">
+
          <% cache [locale_and_user_status(proposal), 'index', proposal, proposal.author] do %>
-            <span class="label-proposal left"><%= t("proposals.proposal.proposal") %></span>
+            <span class="label-proposal float-left"><%= t("proposals.proposal.proposal") %></span>
            <i class="icon-proposals"></i>
            <h3><%= link_to proposal.title, namespaced_proposal_path(proposal) %></h3>
            <p class="proposal-info">
              <i class="icon-comments"></i>&nbsp;
              <%= link_to t("proposals.proposal.comments", count: proposal.comments_count), namespaced_proposal_path(proposal, anchor: "comments") %>
+
              <span class="bullet">&nbsp;&bull;&nbsp;</span>
              <%= l proposal.created_at.to_date %>

--- a/app/views/proposals/_votes.html.erb
+++ b/app/views/proposals/_votes.html.erb
@@ -23,7 +23,7 @@
      </div>
    <% else %>
      <%= link_to vote_url,
-          class: "button button-support tiny radius expand",
+          class: "button button-support small expanded",
          title: t('proposals.proposal.support_title'), method: "post", remote: true do %>
        <%= t("proposals.proposal.support") %>
      <% end %>
--- a/app/views/proposals/edit.html.erb
+++ b/app/views/proposals/edit.html.erb
@@ -1,12 +1,12 @@
 <div class="proposal-edit row">

  <div class="small-12 column">
-    <%= link_to proposals_path, class: "left back clear" do %>
-      <i class="icon-angle-left left"></i>
+    <%= link_to proposals_path, class: "back" do %>
+      <i class="icon-angle-left"></i>
      <%= t("proposals.edit.back_link") %>
    <% end %>

-    <div class="right">
+    <div class="float-right">
      <%= link_to t("proposals.edit.show_link"), @proposal %>
    </div>

--- a/app/views/proposals/index.html.erb
+++ b/app/views/proposals/index.html.erb
@@ -9,7 +9,7 @@
  <div class="wrap row">
    <div id="proposals" class="proposals-list small-12 medium-9 column">

-      <div class="small-12 margin-top search-results">
+      <div class="small-12 search-results">
        <% if @search_terms || @advanced_search_terms %>
          <h2>
            <%= page_entries_info @proposals %>
@@ -43,7 +43,7 @@
      <%= render 'shared/order_links', i18n_namespace: "proposals.index" %>

      <div class="show-for-small-only">
-        <%= link_to t("proposals.index.start_proposal"), new_proposal_path, class: 'button radius expand' %>
+        <%= link_to t("proposals.index.start_proposal"), new_proposal_path, class: 'button expanded' %>
      </div>

      <%= render partial: 'proposals/proposal', collection: @proposals %>
@@ -51,8 +51,8 @@
    </div>

    <div class="small-12 medium-3 column">
-      <aside class="sidebar" role="complementary">
-        <%= link_to t("proposals.index.start_proposal"), new_proposal_path, class: 'button radius expand' %>
+      <aside class="margin-bottom" role="complementary">
+        <%= link_to t("proposals.index.start_proposal"), new_proposal_path, class: 'button expanded' %>
        <%= render "shared/tag_cloud", taggable: 'proposal' %>
        <%= render 'categories' %>
        <%= render 'geozones' %>
--- a/app/views/proposals/new.html.erb
+++ b/app/views/proposals/new.html.erb
@@ -1,12 +1,12 @@
 <div class="proposal-new row">

  <div class="small-12 medium-9 column">
-    <%= link_to proposals_path, class: "left back" do %>
-      <i class="icon-angle-left left"></i>
+    <%= link_to proposals_path, class: "back" do %>
+      <i class="icon-angle-left"></i>
      <%= t("proposals.new.back_link") %>
    <% end %>
    <h1><%= t("proposals.new.start_new") %></h1>
-    <div class="alert-box info radius">
+    <div data-alert class="callout primary">
      <%= link_to "/proposals_info", target: "_blank" do %>
        <%= t("proposals.new.more_info")%>
      <% end %>
@@ -15,7 +15,7 @@
  </div>

  <div class="small-12 medium-3 column">
-    <i class="icon-proposals right"></i>
+    <i class="icon-proposals float-right"></i>
    <h2><%= t("proposals.new.recommendations_title") %></h2>
    <ul class="recommendations">
      <li><%= t("proposals.new.recommendation_one") %></li>
--- a/app/views/proposals/show.html.erb
+++ b/app/views/proposals/show.html.erb
@@ -10,11 +10,12 @@
  <section class="proposal-show">
    <div id="<%= dom_id(@proposal) %>" class="row">
      <div class="small-12 medium-9 column">
-        <i class="icon-angle-left left"></i>&nbsp;
-        <%= link_to t("proposals.show.back_link"), :back, class: 'left back' %>
-
+        <%= link_to :back, class: "back" do %>
+          <i class="icon-angle-left"></i>
+          <%= t("proposals.show.back_link") %>
+        <% end %>
        <% if current_user && @proposal.editable_by?(current_user) %>
-          <%= link_to edit_proposal_path(@proposal), class: 'edit-proposal button success tiny radius right' do %>
+          <%= link_to edit_proposal_path(@proposal), class: 'edit-proposal button success small float-right' do %>
            <i class="icon-edit"></i>
            <%= t("proposals.show.edit_proposal_link") %>
          <% end %>
@@ -22,7 +23,7 @@

        <h1><%= @proposal.title %></h1>
        <% if @proposal.conflictive? %>
-          <div class="alert-box alert radius margin-top">
+          <div data-alert class="callout alert margin-top">
            <strong><%= t("proposals.show.flag") %></strong>
          </div>
        <% end %>
@@ -39,11 +40,14 @@
          <span class="js-flag-actions">
            <%= render 'proposals/flag_actions', proposal: @proposal %>
          </span>
-          <br>
-            <%= t("proposals.show.code") %>
-            <%= @proposal.code %>
        </div>

+        <br>
+        <p>
+          <%= t("proposals.show.code") %>
+          <strong><%= @proposal.code %></strong>
+        </p>
+
        <blockquote><%= @proposal.summary %></blockquote>

        <%= safe_html_with_links @proposal.description %>
--- a/app/views/shared/_admin_login_items.html.erb
+++ b/app/views/shared/_admin_login_items.html.erb
@@ -1,15 +1,13 @@
-<ul class="right">
-  <% if current_user %>
-    <% if current_user.administrator? %>
-      <li>
-        <%= link_to t("layouts.header.administration"), admin_root_path %>
-      </li>
-    <% end %>
-
-    <% if current_user.moderator? || current_user.administrator? %>
-      <li>
-        <%= link_to t("layouts.header.moderation"), moderation_root_path %>
-      </li>
-    <% end %>
+<% if current_user %>
+  <% if current_user.administrator? %>
+    <li>
+      <%= link_to t("layouts.header.administration"), admin_root_path %>
+    </li>
  <% end %>
-</ul>
+
+  <% if current_user.moderator? || current_user.administrator? %>
+    <li>
+      <%= link_to t("layouts.header.moderation"), moderation_root_path %>
+    </li>
+  <% end %>
+<% end %>
--- a/Show More
+++ b/Show More