diff --git a/Gemfile b/Gemfile
index 09a0e4a57..a15c6d97c 100644
--- a/Gemfile
+++ b/Gemfile
@@ -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
diff --git a/Gemfile.lock b/Gemfile.lock
index ffb9dda75..f9624f40a 100644
--- 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!
diff --git a/app/assets/javascripts/ie_alert.js.coffee b/app/assets/javascripts/ie_alert.js.coffee
index 5328b5f3b..b756f0f8a 100644
--- 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)
diff --git a/app/assets/stylesheets/_settings.scss b/app/assets/stylesheets/_settings.scss
new file mode 100644
index 000000000..a8041447d
--- /dev/null
+++ 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;
diff --git a/app/assets/stylesheets/admin.scss b/app/assets/stylesheets/admin.scss
index 470885665..ceae3b0ee 100644
--- 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 {
diff --git a/app/assets/stylesheets/foundation_and_overrides.scss b/app/assets/stylesheets/foundation_and_overrides.scss
index 18dc946a6..f175ce046 100644
--- a/app/assets/stylesheets/foundation_and_overrides.scss
+++ b/app/assets/stylesheets/foundation_and_overrides.scss
@@ -1,1488 +1,51 @@
-// Foundation by ZURB
-// foundation.zurb.com
-// Licensed under MIT Open Source
-
-//
-
-// Table of Contents
-// Foundation Settings
-//
-// a. Base
-// b. Grid
-// c. Global
-// d. Media Query Ranges
-// e. Typography
-// 01. Accordion
-// 02. Alert Boxes
-// 03. Block Grid
-// 04. Breadcrumbs
-// 05. Buttons
-// 06. Button Groups
-// 07. Clearing
-// 08. Dropdown
-// 09. Dropdown Buttons
-// 10. Flex Video
-// 11. Forms
-// 12. Icon Bar
-// 13. Inline Lists
-// 14. Joyride
-// 15. Keystrokes
-// 16. Labels
-// 17. Magellan
-// 18. Off-canvas
-// 19. Orbit
-// 20. Pagination
-// 21. Panels
-// 22. Pricing Tables
-// 23. Progress Bar
-// 24. Range Slider
-// 25. Reveal
-// 26. Side Nav
-// 27. Split Buttons
-// 28. Sub Nav
-// 29. Switch
-// 30. Tables
-// 31. Tabs
-// 32. Thumbnails
-// 33. Tooltips
-// 34. Top Bar
-// 36. Visibility Classes
-
-// a. Base
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// This is the default html and body font-size for the base rem value.
-// $rem-base: 16px;
-
-// Allows the use of rem-calc() or lower-bound() in your settings
-@import 'foundation/functions';
-
-// The default font-size is set to 100% of the browser style sheet (usually 16px)
-// for compatibility with browser-based text zoom or user-set defaults.
-
-// Since the typical default browser font-size is 16px, that makes the calculation for grid size.
-// If you want your base font-size to be different and not have it affect the grid breakpoints,
-// set $rem-base to $base-font-size and make sure $base-font-size is a px value.
-// $base-font-size: 100%;
-
-// The $base-font-size is 100% while $base-line-height is 150%
-// $base-line-height: 150%;
-
-// We use this to control whether or not CSS classes come through in the gem files.
-$include-html-classes: true;
-// $include-print-styles: true;
-$include-html-global-classes: $include-html-classes;
-
-// b. Grid
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-grid-classes: $include-html-classes;
-// $include-xl-html-grid-classes: false;
-
-// $row-width: rem-calc(1000);
-// $total-columns: 12;
-// $column-gutter: rem-calc(30);
-
-// c. Global
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// We use these to define default font stacks
-// $font-family-sans-serif: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
-// $font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif;
-// $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace;
-
-// We use these to define default font weights
-// $font-weight-normal: normal;
-// $font-weight-bold: bold;
-
-// $white       : #FFFFFF;
-// $ghost       : #FAFAFA;
-// $snow        : #F9F9F9;
-// $vapor       : #F6F6F6;
-// $white-smoke : #F5F5F5;
-// $silver      : #EFEFEF;
-// $smoke       : #EEEEEE;
-// $gainsboro   : #DDDDDD;
-// $iron        : #CCCCCC;
-// $base        : #AAAAAA;
-// $aluminum    : #999999;
-// $jumbo       : #888888;
-// $monsoon     : #777777;
-// $steel       : #666666;
-// $charcoal    : #555555;
-// $tuatara     : #444444;
-// $oil         : #333333;
-// $jet         : #222222;
-// $black       : #000000;
-
-// We use these as default colors throughout
-// $primary-color: #008CBA;
-// $secondary-color: #e7e7e7;
-// $alert-color: #f04124;
-// $success-color: #43AC6A;
-// $warning-color: #f08a24;
-// $info-color: #a0d3e8;
-
-// We use these to control various global styles
-// $body-bg: $white;
-// $body-font-color: $jet;
-// $body-font-family: $font-family-sans-serif;
-// $body-font-weight: $font-weight-normal;
-// $body-font-style: normal;
-
-// We use this to control font-smoothing
-// $font-smoothing: antialiased;
-
-// We use these to control text direction settings
-// $text-direction: ltr;
-// $opposite-direction: right;
-// $default-float: left;
-// $last-child-float: $opposite-direction;
-
-// We use these to make sure border radius matches unless we want it different.
-// $global-radius: 3px;
-// $global-rounded: 1000px;
-
-// We use these to control inset shadow shiny edges and depressions.
-// $shiny-edge-size: 0 1px 0;
-// $shiny-edge-color: rgba($white, .5);
-// $shiny-edge-active-color: rgba($black, .2);
-
-// d. Media Query Ranges
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $small-breakpoint:  em-calc(640);
-// $medium-breakpoint: em-calc(1024);
-// $large-breakpoint:  em-calc(1440);
-// $xlarge-breakpoint: em-calc(1920);
-
-// $small-range:   (0, $small-breakpoint);
-// $medium-range:  ($small-breakpoint  + em-calc(1), $medium-breakpoint);
-// $large-range:   ($medium-breakpoint + em-calc(1), $large-breakpoint);
-// $xlarge-range:  ($large-breakpoint  + em-calc(1), $xlarge-breakpoint);
-// $xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999));
-
-// $screen: "only screen";
-
-// $landscape: "#{$screen} and (orientation: landscape)";
-// $portrait: "#{$screen} and (orientation: portrait)";
-
-// $small-up: $screen;
-// $small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";
-
-// $medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
-// $medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";
-
-// $large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
-// $large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";
-
-// $xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
-// $xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";
-
-// $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
-// $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";
-
-// $retina: (
-//  "#{$screen} and (-webkit-min-device-pixel-ratio: 2)",
-//  "#{$screen} and (min--moz-device-pixel-ratio: 2)",
-//  "#{$screen} and (-o-min-device-pixel-ratio: 2/1)",
-//  "#{$screen} and (min-device-pixel-ratio: 2)",
-//  "#{$screen} and (min-resolution: 192dpi)",
-//  "#{$screen} and (min-resolution: 2dppx)"
-// );
-
-// Legacy
-// $small: $medium-up;
-// $medium: $medium-up;
-// $large: $large-up;
-
-// We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet
-// $cursor-crosshair-value: crosshair;
-// $cursor-default-value: default;
-// $cursor-disabled-value: not-allowed;
-// $cursor-pointer-value: pointer;
-// $cursor-help-value: help;
-// $cursor-text-value: text;
-
-// e. Typography
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-type-classes: $include-html-classes;
-
-// We use these to control header font styles
-// $header-font-family: $body-font-family;
-// $header-font-weight: $font-weight-normal;
-// $header-font-style: normal;
-// $header-font-color: $jet;
-// $header-line-height: 1.4;
-// $header-top-margin: .2rem;
-// $header-bottom-margin: .5rem;
-// $header-text-rendering: optimizeLegibility;
-
-// We use these to control header font sizes
-// $h1-font-size: rem-calc(44);
-// $h2-font-size: rem-calc(37);
-// $h3-font-size: rem-calc(27);
-// $h4-font-size: rem-calc(23);
-// $h5-font-size: rem-calc(18);
-// $h6-font-size: 1rem;
-
-// We use these to control header size reduction on small screens
-// $h1-font-reduction: rem-calc(10);
-// $h2-font-reduction: rem-calc(10);
-// $h3-font-reduction: rem-calc(5);
-// $h4-font-reduction: rem-calc(5);
-// $h5-font-reduction: 0;
-// $h6-font-reduction: 0;
-
-// These control how subheaders are styled.
-// $subheader-line-height: 1.4;
-// $subheader-font-color: scale-color($header-font-color, $lightness: 35%);
-// $subheader-font-weight: $font-weight-normal;
-// $subheader-top-margin: .2rem;
-// $subheader-bottom-margin: .5rem;
-
-// A general <small> styling
-// $small-font-size: 60%;
-// $small-font-color: scale-color($header-font-color, $lightness: 35%);
-
-// We use these to style paragraphs
-// $paragraph-font-family: inherit;
-// $paragraph-font-weight: $font-weight-normal;
-// $paragraph-font-size: 1rem;
-// $paragraph-line-height: 1.6;
-// $paragraph-margin-bottom: rem-calc(20);
-// $paragraph-aside-font-size: rem-calc(14);
-// $paragraph-aside-line-height: 1.35;
-// $paragraph-aside-font-style: italic;
-// $paragraph-text-rendering: optimizeLegibility;
-
-// We use these to style <code> tags
-// $code-color: $oil;
-// $code-font-family: $font-family-monospace;
-// $code-font-weight: $font-weight-normal;
-// $code-background-color: scale-color($secondary-color, $lightness: 70%);
-// $code-border-size: 1px;
-// $code-border-style: solid;
-// $code-border-color: scale-color($code-background-color, $lightness: -10%);
-// $code-padding: rem-calc(2) rem-calc(5) rem-calc(1);
-
-// We use these to style anchors
-// $anchor-text-decoration: none;
-// $anchor-text-decoration-hover: none;
-// $anchor-font-color: $primary-color;
-// $anchor-font-color-hover: scale-color($anchor-font-color, $lightness: -14%);
-
-// We use these to style the <hr> element
-// $hr-border-width: 1px;
-// $hr-border-style: solid;
-// $hr-border-color: $gainsboro;
-// $hr-margin: rem-calc(20);
-
-// We use these to style lists
-// $list-font-family: $paragraph-font-family;
-// $list-font-size: $paragraph-font-size;
-// $list-line-height: $paragraph-line-height;
-// $list-margin-bottom: $paragraph-margin-bottom;
-// $list-style-position: outside;
-// $list-side-margin: 1.1rem;
-// $list-ordered-side-margin: 1.4rem;
-// $list-side-margin-no-bullet: 0;
-// $list-nested-margin: rem-calc(20);
-// $definition-list-header-weight: $font-weight-bold;
-// $definition-list-header-margin-bottom: .3rem;
-// $definition-list-margin-bottom: rem-calc(12);
-
-// We use these to style blockquotes
-// $blockquote-font-color: scale-color($header-font-color, $lightness: 35%);
-// $blockquote-padding: rem-calc(9 20 0 19);
-// $blockquote-border: 1px solid $gainsboro;
-// $blockquote-cite-font-size: rem-calc(13);
-// $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%);
-// $blockquote-cite-link-color: $blockquote-cite-font-color;
-
-// Acronym styles
-// $acronym-underline: 1px dotted $gainsboro;
-
-// We use these to control padding and margin
-// $microformat-padding: rem-calc(10 12);
-// $microformat-margin: rem-calc(0 0 20 0);
-
-// We use these to control the border styles
-// $microformat-border-width: 1px;
-// $microformat-border-style: solid;
-// $microformat-border-color: $gainsboro;
-
-// We use these to control full name font styles
-// $microformat-fullname-font-weight: $font-weight-bold;
-// $microformat-fullname-font-size: rem-calc(15);
-
-// We use this to control the summary font styles
-// $microformat-summary-font-weight: $font-weight-bold;
-
-// We use this to control abbr padding
-// $microformat-abbr-padding: rem-calc(0 1);
-
-// We use this to control abbr font styles
-// $microformat-abbr-font-weight: $font-weight-bold;
-// $microformat-abbr-font-decoration: none;
-
-// 01. Accordion
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-accordion-classes: $include-html-classes;
-
-// $accordion-navigation-padding: rem-calc(16);
-// $accordion-navigation-bg-color: $silver;
-// $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%);
-// $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%);
-// $accordion-navigation-font-color: $jet;
-// $accordion-navigation-font-size: rem-calc(16);
-// $accordion-navigation-font-family: $body-font-family;
-
-// $accordion-content-padding: ($column-gutter/2);
-// $accordion-content-active-bg-color: $white;
-
-// 02. Alert Boxes
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-alert-classes: $include-html-classes;
-
-// We use this to control alert padding.
-// $alert-padding-top: rem-calc(14);
-// $alert-padding-default-float: $alert-padding-top;
-// $alert-padding-opposite-direction: $alert-padding-top + rem-calc(10);
-// $alert-padding-bottom: $alert-padding-top;
-
-// We use these to control text style.
-// $alert-font-weight: $font-weight-normal;
-// $alert-font-size: rem-calc(13);
-// $alert-font-color: $white;
-// $alert-font-color-alt: scale-color($secondary-color, $lightness: -66%);
-
-// We use this for close hover effect.
-// $alert-function-factor: -14%;
-
-// We use these to control border styles.
-// $alert-border-style: solid;
-// $alert-border-width: 1px;
-// $alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor);
-// $alert-bottom-margin: rem-calc(20);
-
-// We use these to style the close buttons
-// $alert-close-color: $oil;
-// $alert-close-top: 50%;
-// $alert-close-position: rem-calc(4);
-// $alert-close-font-size: rem-calc(22);
-// $alert-close-opacity: .3;
-// $alert-close-opacity-hover: .5;
-// $alert-close-padding: 9px 6px 4px;
-// $alert-close-background: inherit;
-
-// We use this to control border radius
-// $alert-radius: $global-radius;
-
-// $alert-transition-speed: 300ms;
-// $alert-transition-ease: ease-out;
-
-// 03. Block Grid
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-block-grid-classes: $include-html-classes;
-// $include-xl-html-block-grid-classes: false;
-
-// We use this to control the maximum number of block grid elements per row
-// $block-grid-elements: 12;
-// $block-grid-default-spacing: rem-calc(20);
-
-// $align-block-grid-to-grid: false;
-// @if $align-block-grid-to-grid {$block-grid-default-spacing: $column-gutter;}
-
-// Enables media queries for block-grid classes. Set to false if writing semantic HTML.
-// $block-grid-media-queries: true;
-
-// 04. Breadcrumbs
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-nav-classes: $include-html-classes;
-
-// We use this to set the background color for the breadcrumb container.
-// $crumb-bg: scale-color($secondary-color, $lightness: 55%);
-
-// We use these to set the padding around the breadcrumbs.
-// $crumb-padding: rem-calc(9 14 9);
-// $crumb-side-padding: rem-calc(12);
-
-// We use these to control border styles.
-// $crumb-function-factor: -10%;
-// $crumb-border-size: 1px;
-// $crumb-border-style: solid;
-// $crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor);
-// $crumb-radius: $global-radius;
-
-// We use these to set various text styles for breadcrumbs.
-// $crumb-font-size: rem-calc(11);
-// $crumb-font-color: $primary-color;
-// $crumb-font-color-current: $oil;
-// $crumb-font-color-unavailable: $aluminum;
-// $crumb-font-transform: uppercase;
-// $crumb-link-decor: underline;
-
-// We use these to control the slash between breadcrumbs
-// $crumb-slash-color: $base;
-// $crumb-slash: "/";
-
-// 05. Buttons
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-button-classes: $include-html-classes;
-
-// We use these to build padding for buttons.
-// $button-tny: rem-calc(10);
-// $button-sml: rem-calc(14);
-// $button-med: rem-calc(16);
-// $button-lrg: rem-calc(18);
-
-// We use this to control the display property.
-// $button-display: inline-block;
-// $button-margin-bottom: rem-calc(20);
-
-// We use these to control button text styles.
-// $button-font-family: $body-font-family;
-// $button-font-color: $white;
-// $button-font-color-alt: $oil;
-// $button-font-tny: rem-calc(11);
-// $button-font-sml: rem-calc(13);
-// $button-font-med: rem-calc(16);
-// $button-font-lrg: rem-calc(20);
-// $button-font-weight: $font-weight-normal;
-// $button-font-align: center;
-
-// We use these to control various hover effects.
-// $button-function-factor: -20%;
-
-// We use these to control button border styles.
-// $button-border-width: 0;
-// $button-border-style: solid;
-// $button-bg-color: $primary-color;
-// $button-bg-hover: scale-color($button-bg-color, $lightness: $button-function-factor);
-// $button-border-color: $button-bg-hover;
-// $secondary-button-bg-hover: scale-color($secondary-color, $lightness: $button-function-factor);
-// $secondary-button-border-color: $secondary-button-bg-hover;
-// $success-button-bg-hover: scale-color($success-color, $lightness: $button-function-factor);
-// $success-button-border-color: $success-button-bg-hover;
-// $alert-button-bg-hover: scale-color($alert-color, $lightness: $button-function-factor);
-// $alert-button-border-color: $alert-button-bg-hover;
-// $warning-button-bg-hover: scale-color($warning-color, $lightness: $button-function-factor);
-// $warning-button-border-color: $warning-button-bg-hover;
-// $info-button-bg-hover: scale-color($info-color, $lightness: $button-function-factor);
-// $info-button-border-color: $info-button-bg-hover;
-
-// We use this to set the default radius used throughout the core.
-// $button-radius: $global-radius;
-// $button-round: $global-rounded;
-
-// We use this to set default opacity and cursor for disabled buttons.
-// $button-disabled-opacity: .7;
-// $button-disabled-cursor: $cursor-default-value;
-
-// 06. Button Groups
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-button-classes: $include-html-classes;
-
-// Sets the margin for the right side by default, and the left margin if right-to-left direction is used
-// $button-bar-margin-opposite: rem-calc(10);
-// $button-group-border-width: 1px;
-
-// 07. Clearing
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-clearing-classes: $include-html-classes;
-
-// We use these to set the background colors for parts of Clearing.
-// $clearing-bg: $oil;
-// $clearing-caption-bg: $clearing-bg;
-// $clearing-carousel-bg: rgba(51,51,51,0.8);
-// $clearing-img-bg: $clearing-bg;
-
-// We use these to style the close button
-// $clearing-close-color: $iron;
-// $clearing-close-size: 30px;
-
-// We use these to style the arrows
-// $clearing-arrow-size: 12px;
-// $clearing-arrow-color: $clearing-close-color;
-
-// We use these to style captions
-// $clearing-caption-font-color: $iron;
-// $clearing-caption-font-size: .875em;
-// $clearing-caption-padding: 10px 30px 20px;
-
-// We use these to make the image and carousel height and style
-// $clearing-active-img-height: 85%;
-// $clearing-carousel-height: 120px;
-// $clearing-carousel-thumb-width: 120px;
-// $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255);
-
-// 08. Dropdown
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-dropdown-classes: $include-html-classes;
-
-// We use these to controls height and width styles.
-// $f-dropdown-max-width: 200px;
-// $f-dropdown-height: auto;
-// $f-dropdown-max-height: none;
-
-// Used for bottom position
-// $f-dropdown-margin-top: 2px;
-
-// Used for right position
-// $f-dropdown-margin-left: $f-dropdown-margin-top;
-
-// Used for left position
-// $f-dropdown-margin-right: $f-dropdown-margin-top;
-
-// Used for top position
-// $f-dropdown-margin-bottom: $f-dropdown-margin-top;
-
-// We use this to control the background color
-// $f-dropdown-bg: $white;
-
-// We use this to set the border styles for dropdowns.
-// $f-dropdown-border-style: solid;
-// $f-dropdown-border-width: 1px;
-// $f-dropdown-border-color: scale-color($white, $lightness: -20%);
-
-// We use these to style the triangle pip.
-// $f-dropdown-triangle-size: 6px;
-// $f-dropdown-triangle-color: $white;
-// $f-dropdown-triangle-side-offset: 10px;
-
-// We use these to control styles for the list elements.
-// $f-dropdown-list-style: none;
-// $f-dropdown-font-color: $charcoal;
-// $f-dropdown-font-size: rem-calc(14);
-// $f-dropdown-list-padding: rem-calc(5, 10);
-// $f-dropdown-line-height: rem-calc(18);
-// $f-dropdown-list-hover-bg: $smoke;
-// $dropdown-mobile-default-float: 0;
-
-// We use this to control the styles for when the dropdown has custom content.
-// $f-dropdown-content-padding: rem-calc(20);
-
-// Default radius for dropdown.
-// $f-dropdown-radius: $global-radius;
-
-
-// 09. Dropdown Buttons
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-button-classes: $include-html-classes;
-
-// We use these to set the color of the pip in dropdown buttons
-// $dropdown-button-pip-color: $white;
-// $dropdown-button-pip-color-alt: $oil;
-
-// We use these to set the size of the pip in dropdown buttons
-// $button-pip-tny: rem-calc(6);
-// $button-pip-sml: rem-calc(7);
-// $button-pip-med: rem-calc(9);
-// $button-pip-lrg: rem-calc(11);
-
-// We use these to style tiny dropdown buttons
-// $dropdown-button-padding-tny: $button-pip-tny * 7;
-// $dropdown-button-pip-size-tny: $button-pip-tny;
-// $dropdown-button-pip-opposite-tny: $button-pip-tny * 3;
-// $dropdown-button-pip-top-tny: (-$button-pip-tny / 2) + rem-calc(1);
-
-// We use these to style small dropdown buttons
-// $dropdown-button-padding-sml: $button-pip-sml * 7;
-// $dropdown-button-pip-size-sml: $button-pip-sml;
-// $dropdown-button-pip-opposite-sml: $button-pip-sml * 3;
-// $dropdown-button-pip-top-sml: (-$button-pip-sml / 2) + rem-calc(1);
-
-// We use these to style medium dropdown buttons
-// $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3);
-// $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3);
-// $dropdown-button-pip-opposite-med: $button-pip-med * 2.5;
-// $dropdown-button-pip-top-med: (-$button-pip-med / 2) + rem-calc(2);
-
-// We use these to style large dropdown buttons
-// $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3);
-// $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6);
-// $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5;
-// $dropdown-button-pip-top-lrg: (-$button-pip-lrg / 2) + rem-calc(3);
-
-// 10. Flex Video
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-media-classes: $include-html-classes;
-
-// We use these to control video container padding and margins
-// $flex-video-padding-top: rem-calc(25);
-// $flex-video-padding-bottom: 67.5%;
-// $flex-video-margin-bottom: rem-calc(16);
-
-// We use this to control widescreen bottom padding
-// $flex-video-widescreen-padding-bottom: 56.34%;
-
-// 11. Forms
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-form-classes: $include-html-classes;
-
-// We use this to set the base for lots of form spacing and positioning styles
-// $form-spacing: rem-calc(16);
-
-// We use these to style the labels in different ways
-// $form-label-pointer: pointer;
-// $form-label-font-size: rem-calc(14);
-// $form-label-font-weight: $font-weight-normal;
-// $form-label-line-height: 1.5;
-// $form-label-font-color: scale-color($black, $lightness: 30%);
-// $form-label-small-transform: capitalize;
-// $form-label-bottom-margin: 0;
-// $input-font-family: inherit;
-// $input-font-color: rgba(0,0,0,0.75);
-// $input-font-size: rem-calc(14);
-// $input-bg-color: $white;
-// $input-focus-bg-color: scale-color($white, $lightness: -2%);
-// $input-border-color: scale-color($white, $lightness: -20%);
-// $input-focus-border-color: scale-color($white, $lightness: -40%);
-// $input-border-style: solid;
-// $input-border-width: 1px;
-// $input-border-radius: $global-radius;
-// $input-disabled-bg: $gainsboro;
-// $input-disabled-cursor: $cursor-default-value;
-// $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
-// $input-include-glowing-effect: false;
-
-// We use these to style the fieldset border and spacing.
-// $fieldset-border-style: solid;
-// $fieldset-border-width: 1px;
-// $fieldset-border-color: $gainsboro;
-// $fieldset-padding: rem-calc(20);
-// $fieldset-margin: rem-calc(18 0);
-
-// We use these to style the legends when you use them
-// $legend-bg: $white;
-// $legend-font-weight: $font-weight-bold;
-// $legend-padding: rem-calc(0 3);
-
-// We use these to style the prefix and postfix input elements
-// $input-prefix-bg: scale-color($white, $lightness: -5%);
-// $input-prefix-border-color: scale-color($white, $lightness: -20%);
-// $input-prefix-border-size: 1px;
-// $input-prefix-border-type: solid;
-// $input-prefix-overflow: hidden;
-// $input-prefix-font-color: $oil;
-// $input-prefix-font-color-alt: $white;
-
-// We use this setting to turn on/off HTML5 number spinners (the up/down arrows)
-// $input-number-spinners: true;
-
-// We use these to style the error states for inputs and labels
-// $input-error-message-padding: rem-calc(6 9 9);
-// $input-error-message-top: -1px;
-// $input-error-message-font-size: rem-calc(12);
-// $input-error-message-font-weight: $font-weight-normal;
-// $input-error-message-font-style: italic;
-// $input-error-message-font-color: $white;
-// $input-error-message-bg-color: $alert-color;
-// $input-error-message-font-color-alt: $oil;
-
-// We use this to style the glowing effect of inputs when focused
-// $glowing-effect-fade-time: .45s;
-// $glowing-effect-color: $input-focus-border-color;
-
-// We use this to style the transition when inputs are focused and when the glowing effect is disabled.
-// $input-transition-fade-time: 0.15s;
-// $input-transition-fade-timing-function: linear;
-
-// Select variables
-// $select-bg-color: $ghost;
-// $select-hover-bg-color: scale-color($select-bg-color, $lightness: -3%);
-
-
-// 12. Icon Bar
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// We use these to style the icon-bar and items
-// $icon-bar-bg: $oil;
-// $icon-bar-font-color: $white;
-// $icon-bar-font-color-hover: $icon-bar-font-color;
-// $icon-bar-font-size: 1rem;
-// $icon-bar-hover-color: $primary-color;
-// $icon-bar-icon-color: $white;
-// $icon-bar-icon-color-hover: $icon-bar-icon-color;
-// $icon-bar-icon-size: 1.875rem;
-// $icon-bar-image-width: 1.875rem;
-// $icon-bar-image-height: 1.875rem;
-// $icon-bar-active-color: $primary-color;
-// $icon-bar-item-padding: 1.25rem;
-
-// We use this to set default opacity and cursor for disabled icons.
-// $icon-bar-disabled-opacity: .7;
-
-// 13. Inline Lists
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-inline-list-classes: $include-html-classes;
-
-// We use this to control the margins and padding of the inline list.
-// $inline-list-top-margin: 0;
-// $inline-list-opposite-margin: 0;
-// $inline-list-bottom-margin: rem-calc(17);
-// $inline-list-default-float-margin: rem-calc(-22);
-// $inline-list-default-float-list-margin: rem-calc(22);
-
-// $inline-list-padding: 0;
-
-// We use this to control the overflow of the inline list.
-// $inline-list-overflow: hidden;
-
-// We use this to control the list items
-// $inline-list-display: block;
-
-// We use this to control any elements within list items
-// $inline-list-children-display: block;
-
-// 14. Joyride
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-joyride-classes: $include-html-classes;
-
-// Controlling default Joyride styles
-// $joyride-tip-bg: $oil;
-// $joyride-tip-default-width: 300px;
-// $joyride-tip-padding: rem-calc(18 20 24);
-// $joyride-tip-border: solid 1px $charcoal;
-// $joyride-tip-radius: 4px;
-// $joyride-tip-position-offset: 22px;
-
-// Here, we're setting the tip font styles
-// $joyride-tip-font-color: $white;
-// $joyride-tip-font-size: rem-calc(14);
-// $joyride-tip-header-weight: $font-weight-bold;
-
-// This changes the nub size
-// $joyride-tip-nub-size: 10px;
-
-// This adjusts the styles for the timer when its enabled
-// $joyride-tip-timer-width: 50px;
-// $joyride-tip-timer-height: 3px;
-// $joyride-tip-timer-color: $steel;
-
-// This changes up the styles for the close button
-// $joyride-tip-close-color: $monsoon;
-// $joyride-tip-close-size: 24px;
-// $joyride-tip-close-weight: $font-weight-normal;
-
-// When Joyride is filling the screen, we use this style for the bg
-// $joyride-screenfill: rgba(0,0,0,0.5);
-
-// 15. Keystrokes
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-keystroke-classes: $include-html-classes;
-
-// We use these to control text styles.
-// $keystroke-font: "Consolas", "Menlo", "Courier", monospace;
-// $keystroke-font-size: inherit;
-// $keystroke-font-color: $jet;
-// $keystroke-font-color-alt: $white;
-// $keystroke-function-factor: -7%;
-
-// We use this to control keystroke padding.
-// $keystroke-padding: rem-calc(2 4 0);
-
-// We use these to control background and border styles.
-// $keystroke-bg: scale-color($white, $lightness: $keystroke-function-factor);
-// $keystroke-border-style: solid;
-// $keystroke-border-width: 1px;
-// $keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor);
-// $keystroke-radius: $global-radius;
-
-// 16. Labels
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-label-classes: $include-html-classes;
-
-// We use these to style the labels
-// $label-padding: rem-calc(4 8 4);
-// $label-radius: $global-radius;
-
-// We use these to style the label text
-// $label-font-sizing: rem-calc(11);
-// $label-font-weight: $font-weight-normal;
-// $label-font-color: $oil;
-// $label-font-color-alt: $white;
-// $label-font-family: $body-font-family;
-
-// 17. Magellan
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-magellan-classes: $include-html-classes;
-
-// $magellan-bg: $white;
-// $magellan-padding: 10px;
-
-// 18. Off-canvas
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// Off Canvas Tab Bar Variables
-// $include-html-off-canvas-classes: $include-html-classes;
-
-// $tabbar-bg: $oil;
-// $tabbar-height: rem-calc(45);
-// $tabbar-icon-width: $tabbar-height;
-// $tabbar-line-height: $tabbar-height;
-// $tabbar-color: $white;
-// $tabbar-middle-padding: 0 rem-calc(10);
-
-// Off Canvas Divider Styles
-// $tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%);
-// $tabbar-right-section-border: $tabbar-left-section-border;
-
-
-// Off Canvas Tab Bar Headers
-// $tabbar-header-color: $white;
-// $tabbar-header-weight: $font-weight-bold;
-// $tabbar-header-line-height: $tabbar-height;
-// $tabbar-header-margin: 0;
-
-// Off Canvas Menu Variables
-// $off-canvas-width: rem-calc(250);
-// $off-canvas-bg: $oil;
-// $off-canvas-bg-hover: scale-color($tabbar-bg, $lightness: -30%);
-// $off-canvas-bg-active: scale-color($tabbar-bg, $lightness: -30%);
-
-// Off Canvas Menu List Variables
-// $off-canvas-label-padding: .3rem rem-calc(15);
-// $off-canvas-label-color: $aluminum;
-// $off-canvas-label-text-transform: uppercase;
-// $off-canvas-label-font-size: rem-calc(12);
-// $off-canvas-label-font-weight: $font-weight-bold;
-// $off-canvas-label-bg: $tuatara;
-// $off-canvas-label-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%);
-// $off-canvas-label-border-bottom: none;
-// $off-canvas-label-margin:0;
-// $off-canvas-link-padding: rem-calc(10, 15);
-// $off-canvas-link-color: rgba($white, .7);
-// $off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%);
-// $off-canvas-back-bg: #444;
-// $off-canvas-back-border-top: $off-canvas-label-border-top;
-// $off-canvas-back-border-bottom: $off-canvas-label-border-bottom;
-// $off-canvas-back-hover-bg: scale-color($off-canvas-back-bg, $lightness: -30%);
-// $off-canvas-back-hover-border-top: 1px solid scale-color($off-canvas-label-bg, $lightness: 14%);
-// $off-canvas-back-hover-border-bottom: none;
-
-// Off Canvas Menu Icon Variables
-// $tabbar-menu-icon-color: $white;
-// $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%);
-
-// $tabbar-menu-icon-text-indent: rem-calc(35);
-// $tabbar-menu-icon-width: $tabbar-icon-width;
-// $tabbar-menu-icon-height: $tabbar-height;
-// $tabbar-menu-icon-padding: 0;
-
-// $tabbar-hamburger-icon-width: rem-calc(16);
-// $tabbar-hamburger-icon-left: false;
-// $tabbar-hamburger-icon-top: false;
-// $tabbar-hamburger-icon-thickness: 1px;
-// $tabbar-hamburger-icon-gap: 6px;
-
-// Off Canvas Back-Link Overlay
-// $off-canvas-overlay-transition: background 300ms ease;
-// $off-canvas-overlay-cursor: pointer;
-// $off-canvas-overlay-box-shadow: -4px 0 4px rgba($black, .5), 4px 0 4px rgba($black, .5);
-// $off-canvas-overlay-background: rgba($white, .2);
-// $off-canvas-overlay-background-hover: rgba($white, .05);
-
-// Transition Variables
-// $menu-slide: "transform 500ms ease";
-
-// 19. Orbit
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-orbit-classes: $include-html-classes;
-
-// We use these to control the caption styles
-// $orbit-container-bg: none;
-// $orbit-caption-bg: rgba(51,51,51, .8);
-// $orbit-caption-font-color: $white;
-// $orbit-caption-font-size: rem-calc(14);
-// $orbit-caption-position: "bottom"; // Supported values: "bottom", "under"
-// $orbit-caption-padding: rem-calc(10 14);
-// $orbit-caption-height: auto;
-
-// We use these to control the left/right nav styles
-// $orbit-nav-bg: transparent;
-// $orbit-nav-bg-hover: rgba(0,0,0,0.3);
-// $orbit-nav-arrow-color: $white;
-// $orbit-nav-arrow-color-hover: $white;
-
-// We use these to control the timer styles
-// $orbit-timer-bg: rgba(255,255,255,0.3);
-// $orbit-timer-show-progress-bar: true;
-
-// We use these to control the bullet nav styles
-// $orbit-bullet-nav-color: $iron;
-// $orbit-bullet-nav-color-active: $aluminum;
-// $orbit-bullet-radius: rem-calc(9);
-
-// We use these to controls the style of slide numbers
-// $orbit-slide-number-bg: rgba(0,0,0,0);
-// $orbit-slide-number-font-color: $white;
-// $orbit-slide-number-padding: rem-calc(5);
-
-// Graceful Loading Wrapper and preloader
-// $wrapper-class: "slideshow-wrapper";
-// $preloader-class: "preloader";
-
-// Hide controls on small
-// $orbit-nav-hide-for-small: true;
-// $orbit-bullet-hide-for-small: true;
-// $orbit-timer-hide-for-small: true;
-
-// 20. Pagination
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-pagination-classes: $include-html-classes;
-
-// We use these to control the pagination container
-// $pagination-height: rem-calc(24);
-// $pagination-margin: rem-calc(-5);
-
-// We use these to set the list-item properties
-// $pagination-li-float: $default-float;
-// $pagination-li-height: rem-calc(24);
-// $pagination-li-font-color: $jet;
-// $pagination-li-font-size: rem-calc(14);
-// $pagination-li-margin: rem-calc(5);
-
-// We use these for the pagination anchor links
-// $pagination-link-pad: rem-calc(1 10 1);
-// $pagination-link-font-color: $aluminum;
-// $pagination-link-active-bg: scale-color($white, $lightness: -10%);
-
-// We use these for disabled anchor links
-// $pagination-link-unavailable-cursor: default;
-// $pagination-link-unavailable-font-color: $aluminum;
-// $pagination-link-unavailable-bg-active: transparent;
-
-// We use these for currently selected anchor links
-// $pagination-link-current-background: $primary-color;
-// $pagination-link-current-font-color: $white;
-// $pagination-link-current-font-weight: $font-weight-bold;
-// $pagination-link-current-cursor: default;
-// $pagination-link-current-active-bg: $primary-color;
-
-// 21. Panels
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-panel-classes: $include-html-classes;
-
-// We use these to control the background and border styles
-// $panel-bg: scale-color($white, $lightness: -5%);
-// $panel-border-style: solid;
-// $panel-border-size: 1px;
-// $callout-panel-bg: scale-color($primary-color, $lightness: 94%);
-
-// We use this % to control how much we darken things on hover
-// $panel-border-color: scale-color($panel-bg, $lightness: -11%);
-
-// We use these to set default inner padding and bottom margin
-// $panel-margin-bottom: rem-calc(20);
-// $panel-padding: rem-calc(20);
-
-// We use these to set default font colors
-// $panel-font-color: $oil;
-// $panel-font-color-alt: $white;
-
-// $panel-header-adjust: true;
-// $callout-panel-link-color: $primary-color;
-// $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightness: -14%);
-
-// 22. Pricing Tables
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-pricing-classes: $include-html-classes;
-
-// We use this to control the border color
-// $price-table-border: solid 1px $gainsboro;
-
-// We use this to control the bottom margin of the pricing table
-// $price-table-margin-bottom: rem-calc(20);
-
-// We use these to control the title styles
-// $price-title-bg: $oil;
-// $price-title-padding: rem-calc(15 20);
-// $price-title-align: center;
-// $price-title-color: $smoke;
-// $price-title-weight: $font-weight-normal;
-// $price-title-size: rem-calc(16);
-// $price-title-font-family: $body-font-family;
-
-// We use these to control the price styles
-// $price-money-bg: $vapor;
-// $price-money-padding: rem-calc(15 20);
-// $price-money-align: center;
-// $price-money-color: $oil;
-// $price-money-weight: $font-weight-normal;
-// $price-money-size: rem-calc(32);
-// $price-money-font-family: $body-font-family;
-
-
-// We use these to control the description styles
-// $price-bg: $white;
-// $price-desc-color: $monsoon;
-// $price-desc-padding: rem-calc(15);
-// $price-desc-align: center;
-// $price-desc-font-size: rem-calc(12);
-// $price-desc-weight: $font-weight-normal;
-// $price-desc-line-height: 1.4;
-// $price-desc-bottom-border: dotted 1px $gainsboro;
-
-// We use these to control the list item styles
-// $price-item-color: $oil;
-// $price-item-padding: rem-calc(15);
-// $price-item-align: center;
-// $price-item-font-size: rem-calc(14);
-// $price-item-weight: $font-weight-normal;
-// $price-item-bottom-border: dotted 1px $gainsboro;
-
-// We use these to control the CTA area styles
-// $price-cta-bg: $white;
-// $price-cta-align: center;
-// $price-cta-padding: rem-calc(20 20 0);
-
-// 23. Progress Bar
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-media-classes: $include-html-classes;
-
-// We use this to set the progress bar height
-// $progress-bar-height: rem-calc(25);
-// $progress-bar-color: $vapor;
-
-// We use these to control the border styles
-// $progress-bar-border-color: scale-color($white, $lightness: 20%);
-// $progress-bar-border-size: 1px;
-// $progress-bar-border-style: solid;
-// $progress-bar-border-radius: $global-radius;
-
-// We use these to control the margin & padding
-// $progress-bar-margin-bottom: rem-calc(10);
-
-// We use these to set the meter colors
-// $progress-meter-color: $primary-color;
-// $progress-meter-secondary-color: $secondary-color;
-// $progress-meter-success-color: $success-color;
-// $progress-meter-alert-color: $alert-color;
-
-// 24. Range Slider
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-range-slider-classes: $include-html-classes;
-
-// These variables define the slider bar styles
-// $range-slider-bar-width: 100%;
-// $range-slider-bar-height: rem-calc(16);
-
-// $range-slider-bar-border-width: 1px;
-// $range-slider-bar-border-style: solid;
-// $range-slider-bar-border-color: $gainsboro;
-// $range-slider-radius: $global-radius;
-// $range-slider-round: $global-rounded;
-// $range-slider-bar-bg-color: $ghost;
-// $range-slider-active-segment-bg-color: scale-color($secondary-color, $lightness: -1%);
-
-// Vertical bar styles
-// $range-slider-vertical-bar-width: rem-calc(16);
-// $range-slider-vertical-bar-height: rem-calc(200);
-
-// These variabels define the slider handle styles
-// $range-slider-handle-width: rem-calc(32);
-// $range-slider-handle-height: rem-calc(22);
-// $range-slider-handle-position-top: rem-calc(-5);
-// $range-slider-handle-bg-color: $primary-color;
-// $range-slider-handle-border-width: 1px;
-// $range-slider-handle-border-style: solid;
-// $range-slider-handle-border-color: none;
-// $range-slider-handle-radius: $global-radius;
-// $range-slider-handle-round: $global-rounded;
-// $range-slider-handle-bg-hover-color: scale-color($primary-color, $lightness: -12%);
-// $range-slider-handle-cursor: pointer;
-
-// $range-slider-disabled-opacity: .7;
-// $range-slider-disabled-cursor: $cursor-disabled-value;
-
-// 25. Reveal
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-reveal-classes: $include-html-classes;
-
-// We use these to control the style of the reveal overlay.
-// $reveal-overlay-bg: rgba($black, .45);
-// $reveal-overlay-bg-old: $black;
-
-// We use these to control the style of the modal itself.
-// $reveal-modal-bg: $white;
-// $reveal-position-top: rem-calc(100);
-// $reveal-default-width: 80%;
-// $reveal-max-width: $row-width;
-// $reveal-modal-padding: rem-calc(20);
-// $reveal-box-shadow: 0 0 10px rgba($black,.4);
-
-// We use these to style the reveal close button
-// $reveal-close-font-size: rem-calc(40);
-// $reveal-close-top: rem-calc(10);
-// $reveal-close-side: rem-calc(22);
-// $reveal-close-color: $base;
-// $reveal-close-weight: $font-weight-bold;
-
-// We use this to set the default radius used throughout the core.
-// $reveal-radius: $global-radius;
-// $reveal-round: $global-rounded;
-
-// We use these to control the modal border
-// $reveal-border-style: solid;
-// $reveal-border-width: 1px;
-// $reveal-border-color: $steel;
-
-// $reveal-modal-class: "reveal-modal";
-// $close-reveal-modal-class: "close-reveal-modal";
-
-// 26. Side Nav
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-nav-classes: $include-html-classes;
-
-// We use this to control padding.
-// $side-nav-padding: rem-calc(14 0);
-
-// We use these to control list styles.
-// $side-nav-list-type: none;
-// $side-nav-list-position: outside;
-// $side-nav-list-margin: rem-calc(0 0 7 0);
-
-// We use these to control link styles.
-// $side-nav-link-color: $primary-color;
-// $side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%);
-// $side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%);
-// $side-nav-link-bg-hover: hsla(0, 0, 0, .025);
-// $side-nav-link-margin: 0;
-// $side-nav-link-padding: rem-calc(7 14);
-// $side-nav-font-size: rem-calc(14);
-// $side-nav-font-weight: $font-weight-normal;
-// $side-nav-font-weight-active: $side-nav-font-weight;
-// $side-nav-font-family: $body-font-family;
-// $side-nav-font-family-active: $side-nav-font-family;
-
-// We use these to control heading styles.
-// $side-nav-heading-color: $side-nav-link-color;
-// $side-nav-heading-font-size: $side-nav-font-size;
-// $side-nav-heading-font-weight: bold;
-// $side-nav-heading-text-transform: uppercase;
-
-// We use these to control border styles
-// $side-nav-divider-size: 1px;
-// $side-nav-divider-style: solid;
-// $side-nav-divider-color: scale-color($white, $lightness: 10%);
-
-// 27. Split Buttons
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-button-classes: $include-html-classes;
-
-// We use these to control different shared styles for Split Buttons
-// $split-button-function-factor: 10%;
-// $split-button-pip-color: $white;
-// $split-button-span-border-color: rgba(255,255,255,0.5);
-// $split-button-pip-color-alt: $oil;
-// $split-button-active-bg-tint: rgba(0,0,0,0.1);
-
-// We use these to control tiny split buttons
-// $split-button-padding-tny: $button-pip-tny * 10;
-// $split-button-span-width-tny: $button-pip-tny * 6;
-// $split-button-pip-size-tny: $button-pip-tny;
-// $split-button-pip-top-tny: $button-pip-tny * 2;
-// $split-button-pip-default-float-tny: rem-calc(-6);
-
-// We use these to control small split buttons
-// $split-button-padding-sml: $button-pip-sml * 10;
-// $split-button-span-width-sml: $button-pip-sml * 6;
-// $split-button-pip-size-sml: $button-pip-sml;
-// $split-button-pip-top-sml: $button-pip-sml * 1.5;
-// $split-button-pip-default-float-sml: rem-calc(-6);
-
-// We use these to control medium split buttons
-// $split-button-padding-med: $button-pip-med * 9;
-// $split-button-span-width-med: $button-pip-med * 5.5;
-// $split-button-pip-size-med: $button-pip-med - rem-calc(3);
-// $split-button-pip-top-med: $button-pip-med * 1.5;
-// $split-button-pip-default-float-med: rem-calc(-6);
-
-// We use these to control large split buttons
-// $split-button-padding-lrg: $button-pip-lrg * 8;
-// $split-button-span-width-lrg: $button-pip-lrg * 5;
-// $split-button-pip-size-lrg: $button-pip-lrg - rem-calc(6);
-// $split-button-pip-top-lrg: $button-pip-lrg + rem-calc(5);
-// $split-button-pip-default-float-lrg: rem-calc(-6);
-
-// 28. Sub Nav
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-nav-classes: $include-html-classes;
-
-// We use these to control margin and padding
-// $sub-nav-list-margin: rem-calc(-4 0 18);
-// $sub-nav-list-padding-top: rem-calc(4);
-
-// We use this to control the definition
-// $sub-nav-font-family: $body-font-family;
-// $sub-nav-font-size: rem-calc(14);
-// $sub-nav-font-color: $aluminum;
-// $sub-nav-font-weight: $font-weight-normal;
-// $sub-nav-text-decoration: none;
-// $sub-nav-padding: rem-calc(3 16);
-// $sub-nav-border-radius: 3px;
-// $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%);
-
-
-// We use these to control the active item styles
-
-// $sub-nav-active-font-weight: $font-weight-normal;
-// $sub-nav-active-bg: $primary-color;
-// $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%);
-// $sub-nav-active-color: $white;
-// $sub-nav-active-padding: $sub-nav-padding;
-// $sub-nav-active-cursor: default;
-
-// $sub-nav-item-divider: "";
-// $sub-nav-item-divider-margin: rem-calc(12);
-
-// 29. Switch
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-form-classes: $include-html-classes;
-
-// Controlling background color for the switch container
-// $switch-bg: $gainsboro;
-
-// We use these to control the switch heights for our default classes
-// $switch-height-tny: 1.5rem;
-// $switch-height-sml: 1.75rem;
-// $switch-height-med: 2rem;
-// $switch-height-lrg: 2.5rem;
-// $switch-bottom-margin: 1.5rem;
-
-// We use these to style the switch-paddle
-// $switch-paddle-bg: $white;
-// $switch-paddle-transition-speed: .15s;
-// $switch-paddle-transition-ease: ease-out;
-// $switch-active-color: $primary-color;
-
-// 30. Tables
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-table-classes: $include-html-classes;
-
-// These control the background color for the table and even rows
-// $table-bg: $white;
-// $table-even-row-bg: $snow;
-
-// These control the table cell border style
-// $table-border-style: solid;
-// $table-border-size: 1px;
-// $table-border-color: $gainsboro;
-
-// These control the table head styles
-// $table-head-bg: $white-smoke;
-// $table-head-font-size: rem-calc(14);
-// $table-head-font-color: $jet;
-// $table-head-font-weight: $font-weight-bold;
-// $table-head-padding: rem-calc(8 10 10);
-
-// These control the table foot styles
-// $table-foot-bg: $table-head-bg;
-// $table-foot-font-size: $table-head-font-size;
-// $table-foot-font-color: $table-head-font-color;
-// $table-foot-font-weight: $table-head-font-weight;
-// $table-foot-padding: $table-head-padding;
-
-// These control the caption
-// table-caption-bg: transparent;
-// $table-caption-font-color: $table-head-font-color;
-// $table-caption-font-size: rem-calc(16);
-// $table-caption-font-weight: bold;
-
-// These control the row padding and font styles
-// $table-row-padding: rem-calc(9 10);
-// $table-row-font-size: rem-calc(14);
-// $table-row-font-color: $jet;
-// $table-line-height: rem-calc(18);
-
-// These are for controlling the layout, display and margin of tables
-// $table-layout: auto;
-// $table-display: table-cell;
-// $table-margin-bottom: rem-calc(20);
-
-
-// 31. Tabs
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-tabs-classes: $include-html-classes;
-
-// $tabs-navigation-padding: rem-calc(16);
-// $tabs-navigation-bg-color: $silver;
-// $tabs-navigation-active-bg-color: $white;
-// $tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%);
-// $tabs-navigation-font-color: $jet;
-// $tabs-navigation-active-font-color: $tabs-navigation-font-color;
-// $tabs-navigation-font-size: rem-calc(16);
-// $tabs-navigation-font-family: $body-font-family;
-
-// $tabs-content-margin-bottom: rem-calc(24);
-// $tabs-content-padding: ($column-gutter/2);
-
-// $tabs-vertical-navigation-margin-bottom: 1.25rem;
-
-// 32. Thumbnails
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-media-classes: $include-html-classes;
-
-// We use these to control border styles
-// $thumb-border-style: solid;
-// $thumb-border-width: 4px;
-// $thumb-border-color: $white;
-// $thumb-box-shadow: 0 0 0 1px rgba($black,.2);
-// $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5);
-
-// Radius and transition speed for thumbs
-// $thumb-radius: $global-radius;
-// $thumb-transition-speed: 200ms;
-
-// 33. Tooltips
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-tooltip-classes: $include-html-classes;
-
-// $has-tip-border-bottom: dotted 1px $iron;
-// $has-tip-font-weight: $font-weight-bold;
-// $has-tip-font-color: $oil;
-// $has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%);
-// $has-tip-font-color-hover: $primary-color;
-// $has-tip-cursor-type: help;
-
-// $tooltip-padding: rem-calc(12);
-// $tooltip-bg: $oil;
-// $tooltip-font-size: rem-calc(14);
-// $tooltip-font-weight: $font-weight-normal;
-// $tooltip-font-color: $white;
-// $tooltip-line-height: 1.3;
-// $tooltip-close-font-size: rem-calc(10);
-// $tooltip-close-font-weight: $font-weight-normal;
-// $tooltip-close-font-color: $monsoon;
-// $tooltip-font-size-sml: rem-calc(14);
-// $tooltip-radius: $global-radius;
-// $tooltip-rounded: $global-rounded;
-// $tooltip-pip-size: 5px;
-// $tooltip-max-width: 300px;
-
-// 34. Top Bar
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-top-bar-classes: $include-html-classes;
-
-// Background color for the top bar
-// $topbar-bg-color: $oil;
-// $topbar-bg: $topbar-bg-color;
-
-// Height and margin
-// $topbar-height: rem-calc(45);
-// $topbar-margin-bottom: 0;
-
-// Controlling the styles for the title in the top bar
-// $topbar-title-weight: $font-weight-normal;
-// $topbar-title-font-size: rem-calc(17);
-
-// Set the link colors and styles for top-level nav
-// $topbar-link-color: $white;
-// $topbar-link-color-hover: $white;
-// $topbar-link-color-active: $white;
-// $topbar-link-color-active-hover: $white;
-// $topbar-link-weight: $font-weight-normal;
-// $topbar-link-font-size: rem-calc(13);
-// $topbar-link-hover-lightness: -10%; // Darken by 10%
-// $topbar-link-bg: $topbar-bg;
-// $topbar-link-bg-hover: $jet;
-// $topbar-link-bg-color-hover: $charcoal;
-// $topbar-link-bg-active: $primary-color;
-// $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%);
-// $topbar-link-font-family: $body-font-family;
-// $topbar-link-text-transform: none;
-// $topbar-link-padding: ($topbar-height / 3);
-// $topbar-back-link-size: rem-calc(18);
-// $topbar-link-dropdown-padding: rem-calc(20);
-// $topbar-button-font-size: .75rem;
-// $topbar-button-top: 7px;
-
-// Style the top bar dropdown elements
-// $topbar-dropdown-bg: $oil;
-// $topbar-dropdown-link-color: $white;
-// $topbar-dropdown-link-color-hover: $topbar-link-color-hover;
-// $topbar-dropdown-link-bg: $oil;
-// $topbar-dropdown-link-bg-hover: $jet;
-// $topbar-dropdown-link-weight: $font-weight-normal;
-// $topbar-dropdown-toggle-size: 5px;
-// $topbar-dropdown-toggle-color: $white;
-// $topbar-dropdown-toggle-alpha: .4;
-
-// $topbar-dropdown-label-color: $monsoon;
-// $topbar-dropdown-label-text-transform: uppercase;
-// $topbar-dropdown-label-font-weight: $font-weight-bold;
-// $topbar-dropdown-label-font-size: rem-calc(10);
-// $topbar-dropdown-label-bg: $oil;
-
-// Top menu icon styles
-// $topbar-menu-link-transform: uppercase;
-// $topbar-menu-link-font-size: rem-calc(13);
-// $topbar-menu-link-weight: $font-weight-bold;
-// $topbar-menu-link-color: $white;
-// $topbar-menu-icon-color: $white;
-// $topbar-menu-link-color-toggled: $jumbo;
-// $topbar-menu-icon-color-toggled: $jumbo;
-// $topbar-menu-icon-position: $opposite-direction; // Change to $default-float for a left menu icon
-
-// Transitions and breakpoint styles
-// $topbar-transition-speed: 300ms;
-// Using rem-calc for the below breakpoint causes issues with top bar
-// $topbar-breakpoint: #{lower-bound($medium-range)}; // Change to 9999px for always mobile layout
-// $topbar-media-query: "#{$screen} and (min-width:#{lower-bound($topbar-breakpoint)})";
-
-// Top-bar input styles
-// $topbar-input-height: rem-calc(28);
-
-// Divider Styles
-// $topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%);
-// $topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%);
-
-// Sticky Class
-// $topbar-sticky-class: ".sticky";
-// $topbar-arrows: true; //Set false to remove the triangle icon from the menu item
-// $topbar-dropdown-arrows: true; //Set false to remove the \00bb >> text from dropdown subnavigation li//
-
-// 36. Visibility Classes
-// - - - - - - - - - - - - - - - - - - - - - - - - -
-
-// $include-html-visibility-classes: $include-html-classes;
-// $include-accessibility-classes: true;
-// $include-table-visibility-classes: true;
-// $include-legacy-visibility-classes: true;
+@charset 'utf-8';
 
+@import 'settings';
 @import 'foundation';
+
+// If you'd like to include motion-ui, you need to install the motion-ui sass package.
+//
+// @import 'motion-ui/motion-ui';
+
+// We include everything by default.  To slim your CSS, remove components you don't use.
+
+@include foundation-global-styles;
+@include foundation-grid;
+@include foundation-typography;
+@include foundation-button;
+@include foundation-forms;
+@include foundation-visibility-classes;
+@include foundation-float-classes;
+@include foundation-accordion;
+@include foundation-accordion-menu;
+@include foundation-badge;
+@include foundation-breadcrumbs;
+@include foundation-button-group;
+@include foundation-callout;
+@include foundation-close-button;
+@include foundation-drilldown-menu;
+@include foundation-dropdown;
+@include foundation-dropdown-menu;
+@include foundation-flex-video;
+@include foundation-label;
+@include foundation-media-object;
+@include foundation-menu;
+@include foundation-off-canvas;
+@include foundation-orbit;
+@include foundation-pagination;
+@include foundation-progress-bar;
+@include foundation-slider;
+@include foundation-sticky;
+@include foundation-reveal;
+@include foundation-switch;
+@include foundation-table;
+@include foundation-tabs;
+@include foundation-thumbnail;
+@include foundation-title-bar;
+@include foundation-tooltip;
+@include foundation-top-bar;
+
+// If you'd like to include motion-ui, you need to install the motion-ui sass package.
+//
+// @include motion-ui-transitions;
+// @include motion-ui-animations;
diff --git a/app/assets/stylesheets/layout.scss b/app/assets/stylesheets/layout.scss
index 7619683b3..12a21ef87 100644
--- 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
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
diff --git a/app/assets/stylesheets/mixins.scss b/app/assets/stylesheets/mixins.scss
index 3b2bde372..4e99acaab 100644
--- 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;
   }
diff --git a/app/assets/stylesheets/participation.scss b/app/assets/stylesheets/participation.scss
index fbe9c4f2b..eefd996e8 100644
--- 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;
diff --git a/app/assets/stylesheets/variables.scss b/app/assets/stylesheets/variables.scss
index eeae89a61..6882442d1 100644
--- 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);
diff --git a/app/views/account/show.html.erb b/app/views/account/show.html.erb
index 6c0242329..99931e4ac 100644
--- 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>
diff --git a/app/views/admin/comments/index.html.erb b/app/views/admin/comments/index.html.erb
index 2914cf8c5..af436c7c4 100644
--- 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>
diff --git a/app/views/admin/debates/index.html.erb b/app/views/admin/debates/index.html.erb
index 9718d4fa9..b755e70a1 100644
--- 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>
diff --git a/app/views/admin/moderators/_moderator.html.erb b/app/views/admin/moderators/_moderator.html.erb
index df30c624f..0f01b47b9 100644
--- 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 %>
diff --git a/app/views/admin/moderators/index.html.erb b/app/views/admin/moderators/index.html.erb
index 52b1b32e2..7c39f3234 100644
--- 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>
diff --git a/app/views/admin/officials/edit.html.erb b/app/views/admin/officials/edit.html.erb
index f5748d77f..defbaa483 100644
--- 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? %>
diff --git a/app/views/admin/officials/index.html.erb b/app/views/admin/officials/index.html.erb
index 234ee7c21..ea0e8dccf 100644
--- 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>
diff --git a/app/views/admin/officials/search.html.erb b/app/views/admin/officials/search.html.erb
index b5ffcfcab..c7a7dc2a6 100644
--- 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>
diff --git a/app/views/admin/organizations/index.html.erb b/app/views/admin/organizations/index.html.erb
index aebcbea54..c008d2a64 100644
--- 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 %>
diff --git a/app/views/admin/organizations/search.html.erb b/app/views/admin/organizations/search.html.erb
index 99f2a1f81..877f5b6e6 100644
--- 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 %>
diff --git a/app/views/admin/proposals/index.html.erb b/app/views/admin/proposals/index.html.erb
index 5f956951d..8df15af87 100644
--- 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>
diff --git a/app/views/admin/settings/index.html.erb b/app/views/admin/settings/index.html.erb
index be796d0c0..b18a1eb39 100644
--- 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 %>
diff --git a/app/views/admin/shared/_proposal_search.html.erb b/app/views/admin/shared/_proposal_search.html.erb
index 9604edf34..8fae3b543 100644
--- 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 %>
\ No newline at end of file
diff --git a/app/views/admin/shared/_user_search.html.erb b/app/views/admin/shared/_user_search.html.erb
index 978c33e8d..a964ce549 100644
--- 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 %>
\ No newline at end of file
diff --git a/app/views/admin/spending_proposals/index.html.erb b/app/views/admin/spending_proposals/index.html.erb
index dbbefebfb..8bd95ff74 100644
--- 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"),
diff --git a/app/views/admin/spending_proposals/show.html.erb b/app/views/admin/spending_proposals/show.html.erb
index 88342f912..c59f872a6 100644
--- 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>
@@ -76,4 +75,4 @@
 <% if @spending_proposal.internal_comments.present? %>
   <h2><%= t("admin.spending_proposals.show.internal_comments") %></h2>
   <%= simple_format(safe_html_with_links(@spending_proposal.internal_comments.html_safe), {}, sanitize: false) %>
-<% end %>
+<% end %>
\ No newline at end of file
diff --git a/app/views/admin/stats/show.html.erb b/app/views/admin/stats/show.html.erb
index 930738407..84abd7be9 100644
--- 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 %>
diff --git a/app/views/admin/tags/index.html.erb b/app/views/admin/tags/index.html.erb
index 576dd4ce6..707235265 100644
--- 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 %>
diff --git a/app/views/admin/users/index.html.erb b/app/views/admin/users/index.html.erb
index bb71fcd8f..a575bdef2 100644
--- 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 %>
diff --git a/app/views/admin/users/show.html.erb b/app/views/admin/users/show.html.erb
index 6d98d4e38..7fba928b3 100644
--- 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? %>
diff --git a/app/views/comments/_comment.html.erb b/app/views/comments/_comment.html.erb
index e6202673c..f73e581d5 100644
--- 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>
 
diff --git a/app/views/comments/_errors.html.erb b/app/views/comments/_errors.html.erb
index e70eed258..e074475ef 100644
--- 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>
diff --git a/app/views/comments/_flag_actions.html.erb b/app/views/comments/_flag_actions.html.erb
index b68b31038..b7f0e6ef8 100644
--- 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>
diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb
index 0d2a75eff..1dd371566 100644
--- 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>
diff --git a/app/views/comments/show.html.erb b/app/views/comments/show.html.erb
index 4fcbdead4..cd4f66ba0 100644
--- 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>
diff --git a/app/views/debates/_comments.html.erb b/app/views/debates/_comments.html.erb
index 538847a62..cc96ab4ba 100644
--- 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 %>
diff --git a/app/views/debates/_debate.html.erb b/app/views/debates/_debate.html.erb
index 6148630d3..fcd74b3db 100644
--- 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">
diff --git a/app/views/debates/_flag_actions.html.erb b/app/views/debates/_flag_actions.html.erb
index 9456d82d2..0b0e52adb 100644
--- 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>
diff --git a/app/views/debates/_form.html.erb b/app/views/debates/_form.html.erb
index 60bee011d..9187f370b 100644
--- 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 %>
diff --git a/app/views/debates/edit.html.erb b/app/views/debates/edit.html.erb
index 45499263f..836ec946b 100644
--- 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>
 
diff --git a/app/views/debates/index.html.erb b/app/views/debates/index.html.erb
index b1a316887..2dc9cbbaa 100644
--- 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>
diff --git a/app/views/debates/new.html.erb b/app/views/debates/new.html.erb
index 4dc3ed2e1..977157989 100644
--- 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>
diff --git a/app/views/debates/show.html.erb b/app/views/debates/show.html.erb
index a1985f259..eb3f5bbc0 100644
--- 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 %>
diff --git a/app/views/devise/confirmations/new.html.erb b/app/views/devise/confirmations/new.html.erb
index e06517e75..88016f5ce 100644
--- 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" %>
diff --git a/app/views/devise/confirmations/show.html.erb b/app/views/devise/confirmations/show.html.erb
index 88a3a6292..722aedae4 100644
--- 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 %>
 
diff --git a/app/views/devise/menu/_login_items.html.erb b/app/views/devise/menu/_login_items.html.erb
index 7681619e1..7330d4c73 100644
--- 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 %>
diff --git a/app/views/devise/passwords/new.html.erb b/app/views/devise/passwords/new.html.erb
index 5f381555a..59608c148 100644
--- 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" %>
diff --git a/app/views/devise/sessions/new.html.erb b/app/views/devise/sessions/new.html.erb
index 56783bcb5..5e787440f 100644
--- 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 %>
diff --git a/app/views/kaminari/_gap.html.erb b/app/views/kaminari/_gap.html.erb
index 288e7c69b..fc2dbed0f 100644
--- 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>
diff --git a/app/views/kaminari/_next_page.html.erb b/app/views/kaminari/_next_page.html.erb
index 05695cd6f..f305b1b7d 100644
--- 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>
diff --git a/app/views/kaminari/_page.html.erb b/app/views/kaminari/_page.html.erb
index 329f36b3f..12610dada 100644
--- 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 %>
diff --git a/app/views/kaminari/_paginator.html.erb b/app/views/kaminari/_paginator.html.erb
index 9e7c906cd..ca9bc4bea 100644
--- 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? %>
 
diff --git a/app/views/kaminari/_prev_page.html.erb b/app/views/kaminari/_prev_page.html.erb
index f4c5c4041..902a8c89e 100644
--- 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>
diff --git a/app/views/layouts/_admin_header.html.erb b/app/views/layouts/_admin_header.html.erb
index bc946e534..9d4943ca2 100644
--- 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>
+</header>
\ No newline at end of file
diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb
index b71341e30..4d531c324 100644
--- 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>
diff --git a/app/views/layouts/_test.html.erb b/app/views/layouts/_test.html.erb
new file mode 100644
index 000000000..60f6b811b
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/app/views/layouts/admin.html.erb b/app/views/layouts/admin.html.erb
index 012bea2ab..0bf1fd9f0 100644
--- 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 %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 22fd97143..8369e98a3 100644
--- 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 %>
diff --git a/app/views/layouts/devise.html.erb b/app/views/layouts/devise.html.erb
index 0a6f0ecc6..4771762a0 100644
--- 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>
diff --git a/app/views/layouts/management.html.erb b/app/views/layouts/management.html.erb
index 1758e42a2..30f40ac2d 100644
--- 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 %>
diff --git a/app/views/legislations/show.html.erb b/app/views/legislations/show.html.erb
index 15dbf75db..9d9fc9212 100644
--- 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),
diff --git a/app/views/management/_account_info.html.erb b/app/views/management/_account_info.html.erb
index 24c64548f..d27f1524d 100644
--- 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>
diff --git a/app/views/management/document_verifications/invalid_document.html.erb b/app/views/management/document_verifications/invalid_document.html.erb
index 3652e1db7..58ddb221e 100644
--- 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 %>
diff --git a/app/views/management/document_verifications/new.html.erb b/app/views/management/document_verifications/new.html.erb
index f52dfe9f5..068d84f41 100644
--- 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 %>
diff --git a/app/views/management/document_verifications/verified.html.erb b/app/views/management/document_verifications/verified.html.erb
index ab788a89f..636e40642 100644
--- 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>
diff --git a/app/views/management/email_verifications/new.html.erb b/app/views/management/email_verifications/new.html.erb
index cc98836ed..ca13a3c43 100644
--- 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>
diff --git a/app/views/management/email_verifications/sent.html.erb b/app/views/management/email_verifications/sent.html.erb
index eb0860530..8419351e5 100644
--- 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>
 
diff --git a/app/views/management/proposals/index.html.erb b/app/views/management/proposals/index.html.erb
index f6044265c..4e873862a 100644
--- 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 %>
diff --git a/app/views/management/proposals/print.html.erb b/app/views/management/proposals/print.html.erb
index 13944e898..33d8cccc3 100644
--- 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>
 
diff --git a/app/views/management/users/new.html.erb b/app/views/management/users/new.html.erb
index 226210695..4283a9760 100644
--- 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>
diff --git a/app/views/moderation/comments/index.html.erb b/app/views/moderation/comments/index.html.erb
index aeddc941c..c95bbd05b 100644
--- 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>
diff --git a/app/views/moderation/debates/index.html.erb b/app/views/moderation/debates/index.html.erb
index 8baf3ab2b..390c089cf 100644
--- 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>
diff --git a/app/views/moderation/proposals/index.html.erb b/app/views/moderation/proposals/index.html.erb
index 945fa8085..1f6124543 100644
--- 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>
diff --git a/app/views/moderation/users/index.html.erb b/app/views/moderation/users/index.html.erb
index 18f4f5f67..988419f53 100644
--- 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 %>
diff --git a/app/views/notifications/index.html.erb b/app/views/notifications/index.html.erb
index 4f57ed5d9..a145139cd 100644
--- 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>
diff --git a/app/views/organizations/registrations/new.html.erb b/app/views/organizations/registrations/new.html.erb
index c013023d7..8058efa8a 100644
--- 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 %>
diff --git a/app/views/organizations/registrations/success.html.erb b/app/views/organizations/registrations/success.html.erb
index 66a1918e9..a28c7f59e 100644
--- 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>
diff --git a/app/views/pages/conditions.html.erb b/app/views/pages/conditions.html.erb
index 8cf4d5bf0..61599f951 100644
--- 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>
diff --git a/app/views/pages/faq.html.erb b/app/views/pages/faq.html.erb
index 895584a4a..9fd168dca 100644
--- 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>
diff --git a/app/views/pages/how_it_works.html.erb b/app/views/pages/how_it_works.html.erb
index da62a5758..eec62da64 100644
--- 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>
diff --git a/app/views/pages/how_to_use.html.erb b/app/views/pages/how_to_use.html.erb
index 1e0bfa3b6..e488f2072 100644
--- 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>
diff --git a/app/views/pages/more_information.html.erb b/app/views/pages/more_information.html.erb
index 4d8586107..82f1dbecc 100644
--- 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>
diff --git a/app/views/pages/opendata.html.erb b/app/views/pages/opendata.html.erb
index 295eca893..edefb92cc 100644
--- 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>
diff --git a/app/views/pages/participation.html.erb b/app/views/pages/participation.html.erb
index 9e641fda1..649896224 100644
--- 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>
+
diff --git a/app/views/pages/participation_facts.html.erb b/app/views/pages/participation_facts.html.erb
index 12f69d02b..995c4413d 100644
--- 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>
diff --git a/app/views/pages/participation_world.html.erb b/app/views/pages/participation_world.html.erb
index badda5eec..f93ccf619 100644
--- 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>
diff --git a/app/views/pages/privacy.html.erb b/app/views/pages/privacy.html.erb
index 27892ed8c..d78961d88 100644
--- 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>
+
diff --git a/app/views/pages/proposals_info.html.erb b/app/views/pages/proposals_info.html.erb
index dbaaf0002..a54a40353 100644
--- 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>
diff --git a/app/views/pages/spending_proposals_info.html.erb b/app/views/pages/spending_proposals_info.html.erb
index bb02f0286..060024ab0 100644
--- 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>
\ No newline at end of file
+</div>
diff --git a/app/views/proposals/_comments.html.erb b/app/views/proposals/_comments.html.erb
index eb54f9796..4a0bd2aea 100644
--- 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 %>
diff --git a/app/views/proposals/_featured_votes.html.erb b/app/views/proposals/_featured_votes.html.erb
index bafe3d583..0e9319a29 100644
--- 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 %>
diff --git a/app/views/proposals/_flag_actions.html.erb b/app/views/proposals/_flag_actions.html.erb
index 3ab259ac8..382414921 100644
--- 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>
diff --git a/app/views/proposals/_form.html.erb b/app/views/proposals/_form.html.erb
index 7dd16812e..447b52fe5 100644
--- 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 %>
diff --git a/app/views/proposals/_proposal.html.erb b/app/views/proposals/_proposal.html.erb
index b8699348c..164b97589 100644
--- 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 %>
 
diff --git a/app/views/proposals/_votes.html.erb b/app/views/proposals/_votes.html.erb
index d6e015c3f..1c52356eb 100644
--- 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 %>
diff --git a/app/views/proposals/edit.html.erb b/app/views/proposals/edit.html.erb
index 1ed03d533..71ef41e9d 100644
--- 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>
 
diff --git a/app/views/proposals/index.html.erb b/app/views/proposals/index.html.erb
index e1308a17e..1d1eb6113 100644
--- 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' %>
diff --git a/app/views/proposals/new.html.erb b/app/views/proposals/new.html.erb
index a24a31e77..43368e442 100644
--- 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>
diff --git a/app/views/proposals/show.html.erb b/app/views/proposals/show.html.erb
index d298327f9..2b060d501 100644
--- 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 %>
diff --git a/app/views/shared/_admin_login_items.html.erb b/app/views/shared/_admin_login_items.html.erb
index 1d22679c5..2636f3a73 100644
--- 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 %>
diff --git a/app/views/shared/_advanced_search.html.erb b/app/views/shared/_advanced_search.html.erb
index 03c1a4319..ecab790b6 100644
--- a/app/views/shared/_advanced_search.html.erb
+++ b/app/views/shared/_advanced_search.html.erb
@@ -1,4 +1,6 @@
-<%= link_to t("shared.advanced_search.title"), "#", id: 'js-advanced-search-title', class: "advanced-search small" %>
+<div class="relative">
+  <%= link_to t("shared.advanced_search.title"), "#", id: 'js-advanced-search-title', class: "advanced-search small" %>
+</div>
 
 <div class="advanced-search-form clear">
   <%= form_tag search_path, method: :get do %>
@@ -10,40 +12,44 @@
                            placeholder: t("shared.advanced_search.general_placeholder") %>
       </div>
 
-      <div class="small-12 large-3 left">
-        <label><%= t("shared.advanced_search.author_type") %></label>
-        <%= select_tag('advanced_search[official_level]', official_level_search_options,
-                      include_blank: t("shared.advanced_search.author_type_blank")) %>
-      </div>
-
-      <div class="small-12 large-9 column">
-        <div class="small-12 large-4 left">
-          <label><%= t("shared.advanced_search.date") %></label>
-          <%= select_tag('advanced_search[date_min]', date_range_options,
-                        include_blank: t("shared.advanced_search.date_range_blank"),
-                        id: 'js-advanced-search-date-min') %>
+      <div class="row">
+        <div class="small-12 large-3 column">
+          <label><%= t("shared.advanced_search.author_type") %></label>
+          <%= select_tag('advanced_search[official_level]', official_level_search_options,
+                        include_blank: t("shared.advanced_search.author_type_blank")) %>
         </div>
 
-        <div id='js-custom-date' class='small-12 large-8 column' style="display: none">
-          <div class='small-12 large-6 column'>
-            <label><%= t("shared.advanced_search.from") %></label>
-            <%= text_field_tag 'advanced_search[date_min]',
-                                params[:advanced_search].try(:[], :date_min),
-                                placeholder: t("shared.advanced_search.date_placeholder"),
-                                class: 'js-calendar' %>
+        <div class="small-12 large-9 column">
+          <div class="small-12 large-4 column">
+            <label><%= t("shared.advanced_search.date") %></label>
+            <%= select_tag('advanced_search[date_min]', date_range_options,
+                          include_blank: t("shared.advanced_search.date_range_blank"),
+                          id: 'js-advanced-search-date-min') %>
           </div>
-          <div class='small-12 large-6 column'>
-            <label><%= t("shared.advanced_search.to") %></label>
-            <%= text_field_tag 'advanced_search[date_max]',
-                                params[:advanced_search].try(:[], :date_max),
-                                placeholder: t("shared.advanced_search.date_placeholder"),
-                                class: 'js-calendar' %>
+
+          <div id='js-custom-date' class='small-12 large-8 column' style="display: none">
+            <div class='small-12 large-6 column'>
+              <label><%= t("shared.advanced_search.from") %></label>
+              <%= text_field_tag 'advanced_search[date_min]',
+                                  params[:advanced_search].try(:[], :date_min),
+                                  placeholder: t("shared.advanced_search.date_placeholder"),
+                                  class: 'js-calendar' %>
+            </div>
+            <div class='small-12 large-6 column'>
+              <label><%= t("shared.advanced_search.to") %></label>
+              <%= text_field_tag 'advanced_search[date_max]',
+                                  params[:advanced_search].try(:[], :date_max),
+                                  placeholder: t("shared.advanced_search.date_placeholder"),
+                                  class: 'js-calendar' %>
+            </div>
           </div>
         </div>
       </div>
 
-      <div class="small-12 medium-3">
-        <%= submit_tag t("shared.advanced_search.search"), class: 'button radius expand' %>
+      <div class="row medium-uncollapse">
+        <div class="small-12 medium-3 column end">
+          <%= submit_tag t("shared.advanced_search.search"), class: 'button expanded' %>
+        </div>
       </div>
 
     </div>
diff --git a/app/views/shared/_errors.html.erb b/app/views/shared/_errors.html.erb
index ac8abe7e2..eab4906ed 100644
--- a/app/views/shared/_errors.html.erb
+++ b/app/views/shared/_errors.html.erb
@@ -1,6 +1,8 @@
 <% if resource.errors.any? %>
-  <div id="error_explanation" data-alert class="alert-box alert radius">
-    <a href="#" class="close" title="<%= t("application.close") %>">&times;</a>
+  <div id="error_explanation" 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>
 
     <strong>
       <%= pluralize resource.errors.count, t("form.error"), t("form.errors") %>
diff --git a/app/views/shared/_filter_subnav.html.erb b/app/views/shared/_filter_subnav.html.erb
index d03ab3ea9..aec1daa30 100644
--- a/app/views/shared/_filter_subnav.html.erb
+++ b/app/views/shared/_filter_subnav.html.erb
@@ -3,15 +3,15 @@
    #   i18n_namespace: for example "moderation.debates.index"
 %>
 
-<dl class="sub-nav clear">
-  <dt class="sr-only"><%= t("#{i18n_namespace}.filter") %>: </dt>
+<ul class="menu simple clear">
+  <li class="sr-only"><%= t("#{i18n_namespace}.filter") %>: </li>
 
   <% @valid_filters.each do |filter| %>
     <% if @current_filter == filter %>
-      <dd class="active"><%= t("#{i18n_namespace}.filters.#{filter}") %></dd>
+      <li class="active"><%= t("#{i18n_namespace}.filters.#{filter}") %></li>
     <% else %>
-      <dd><%= link_to t("#{i18n_namespace}.filters.#{filter}"),
-        current_path_with_query_params(filter: filter, page: 1) %></dd>
+      <li><%= link_to t("#{i18n_namespace}.filters.#{filter}"),
+        current_path_with_query_params(filter: filter, page: 1) %></li>
     <% end %>
   <% end %>
-</dl>
+</ul>
diff --git a/app/views/shared/_print.html.erb b/app/views/shared/_print.html.erb
index 471cf6692..5544258d3 100644
--- a/app/views/shared/_print.html.erb
+++ b/app/views/shared/_print.html.erb
@@ -1,3 +1,3 @@
-<a href="javascript:window.print();" id="print_link" class="button warning tiny radius right">
+<a href="javascript:window.print();" id="print_link" class="button warning expanded">
   <%= t("shared.print.print_button") %>
 </a>
\ No newline at end of file
diff --git a/app/views/shared/_search_form.html.erb b/app/views/shared/_search_form.html.erb
index 1a5edd4a9..6747e8317 100644
--- a/app/views/shared/_search_form.html.erb
+++ b/app/views/shared/_search_form.html.erb
@@ -1,22 +1,14 @@
-<div id="search_form" class="search-form">
-  <div class="row">
-
-    <%= form_tag search_path, method: :get do %>
-    <div class="small-12 column">
-      <div class="row collapse">
-        <div class="small-10 column">
-          <label class="sr-only"><%= t("#{i18n_namespace}.title") %></label>
-          <input type="text" name="search" placeholder="<%= t("#{i18n_namespace}.placeholder") %>" class="search-form" value="<%= params[:search] %>">
-        </div>
-        <div class="small-2 column">
-          <button type="submit" class="button postfix" title="<%= t("#{i18n_namespace}.button") %>">
-            <span class="sr-only"><%= t("#{i18n_namespace}.button") %></span>
-            <i class="icon-search"></i>
-          </button>
-        </div>
+<div id="search_form">
+  <%= form_tag search_path, method: :get do %>
+    <div class="input-group">
+      <label class="sr-only"><%= t("#{i18n_namespace}.title") %></label>
+      <input type="text" name="search" placeholder="<%= t("#{i18n_namespace}.placeholder") %>" class="input-group-field" value="<%= params[:search] %>">
+      <div class="input-group-button">
+        <button type="submit" class="button" title="<%= t("#{i18n_namespace}.button") %>">
+          <span class="sr-only"><%= t("#{i18n_namespace}.button") %></span>
+          <i class="icon-search"></i>
+        </button>
       </div>
     </div>
-    <% end %>
-
-  </div>
+  <% end %>
 </div>
diff --git a/app/views/shared/_subnavigation.html.erb b/app/views/shared/_subnavigation.html.erb
new file mode 100644
index 000000000..b28b18dfc
--- /dev/null
+++ b/app/views/shared/_subnavigation.html.erb
@@ -0,0 +1,10 @@
+<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"))  %>
+</div>
diff --git a/app/views/shared/_top_links.html.erb b/app/views/shared/_top_links.html.erb
new file mode 100644
index 000000000..99424e09d
--- /dev/null
+++ b/app/views/shared/_top_links.html.erb
@@ -0,0 +1,16 @@
+<section class="top-links hide-for-small-only">
+  <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")) %>
+      <% if Setting['blog_url'] %>
+        &nbsp;|
+        <%= link_to Setting['blog_url'], target: "_blank" do %>
+          <%= t("layouts.header.external_link_blog") %>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+</section>
diff --git a/app/views/shared/_wide_order_selector.html.erb b/app/views/shared/_wide_order_selector.html.erb
index defa8415e..d6cda44e6 100644
--- a/app/views/shared/_wide_order_selector.html.erb
+++ b/app/views/shared/_wide_order_selector.html.erb
@@ -5,12 +5,12 @@
 
 <div class="wide-order-selector small-12 medium-8">
   <form>
-    <div class="small-12 medium-8 left">
+    <div class="small-12 medium-8 float-left">
       <label for="order-selector-participation">
         <%= t("#{i18n_namespace}.select_order") %>
       </label>
     </div>
-    <div class="small-12 medium-4 left">
+    <div class="small-12 medium-4 float-left">
       <select class="js-location-changer js-order-selector select-order" data-order="<%= @current_order %>" name="order-selector" id="order-selector-participation">
          <% @valid_orders.each do |order| %>
            <option <%= 'selected' if order == @current_order %>
diff --git a/app/views/spending_proposals/_form.html.erb b/app/views/spending_proposals/_form.html.erb
index b02618b55..c8f4d3687 100644
--- a/app/views/spending_proposals/_form.html.erb
+++ b/app/views/spending_proposals/_form.html.erb
@@ -45,7 +45,7 @@
     </div>
 
     <div class="actions small-12 column">
-      <%= f.submit(class: "button radius", value: t("spending_proposals.form.submit_buttons.#{action_name}")) %>
+      <%= f.submit(class: "button", value: t("spending_proposals.form.submit_buttons.#{action_name}")) %>
     </div>
   </div>
 <% end %>
\ No newline at end of file
diff --git a/app/views/spending_proposals/index.html.erb b/app/views/spending_proposals/index.html.erb
index 301ae2442..00a1b6442 100644
--- a/app/views/spending_proposals/index.html.erb
+++ b/app/views/spending_proposals/index.html.erb
@@ -7,7 +7,7 @@
       <p><%= t('spending_proposals.index.text_html') %></p>
 
       <% if can? :create, SpendingProposal %>
-        <%= link_to t('spending_proposals.index.create_link'), new_spending_proposal_path, class: 'button radius' %>
+        <%= link_to t('spending_proposals.index.create_link'), new_spending_proposal_path, class: 'button' %>
       <% else %>
         <p><%= t('spending_proposals.index.verified_only', verify_account: link_to(t('spending_proposals.index.verify_account'), verification_path)).html_safe %></p>
       <% end %>
diff --git a/app/views/spending_proposals/new.html.erb b/app/views/spending_proposals/new.html.erb
index 6909f67aa..bd8f00203 100644
--- a/app/views/spending_proposals/new.html.erb
+++ b/app/views/spending_proposals/new.html.erb
@@ -1,12 +1,12 @@
 <div class="spending-proposal-new row margin-top">
 
   <div class="small-12 medium-9 column">
-    <%= link_to spending_proposals_path, class: "left back" do %>
-      <i class="icon-angle-left left"></i>
+    <%= link_to spending_proposals_path, class: "back" do %>
+      <i class="icon-angle-left"></i>
       <%= t("spending_proposals.new.back_link") %>
     <% end %>
     <h1><%= t("spending_proposals.new.start_new") %></h1>
-    <div class="alert-box info radius">
+    <div data-alert class="callout primary">
       <%= link_to "/spending_proposals_info", target: "_blank" do %>
         <%= t("spending_proposals.new.more_info")%>
       <% end %>
@@ -15,7 +15,7 @@
   </div>
 
   <div class="small-12 medium-3 column">
-    <i class="icon-budget right"></i>
+    <i class="icon-budget float-right"></i>
     <h2><%= t("spending_proposals.new.recommendations_title") %></h2>
     <ul class="recommendations">
       <li><%= t("spending_proposals.new.recommendation_one") %></li>
diff --git a/app/views/users/registrations/delete_form.html.erb b/app/views/users/registrations/delete_form.html.erb
index b19fd7e99..228d4db98 100644
--- a/app/views/users/registrations/delete_form.html.erb
+++ b/app/views/users/registrations/delete_form.html.erb
@@ -1,13 +1,16 @@
-<i class="icon-angle-left left"></i>&nbsp;<%= link_to t("devise_views.users.registrations.edit.back_link"), :back, class: "left back" %>
+<%= link_to :back, class: "back" do %>
+  <i class="icon-angle-left"></i>
+  <%= t("devise_views.users.registrations.edit.back_link") %>
+<% end %>
 
-<h1><%= t("devise_views.users.registrations.delete_form.title") %></h1>
+<h2><%= t("devise_views.users.registrations.delete_form.title") %></h2>
 
 <%= form_for(resource, as: resource_name,
              url: users_registrations_path,
              html: { method: :delete }) do |f| %>
   <%= devise_error_messages! %>
 
-  <div class="alert-box alert radius margin-top">
+  <div data-alert class="callout alert">
     <%= t("devise_views.users.registrations.delete_form.info") %>
   </div>
   <p>
@@ -19,5 +22,5 @@
         placeholder: t("devise_views.users.registrations.delete_form.erase_reason_label"),
         label: t("devise_views.users.registrations.delete_form.erase_reason_label") %>
 
-  <%= f.submit t("devise_views.users.registrations.delete_form.submit"), class: "button radius alert expand" %>
+  <%= f.submit t("devise_views.users.registrations.delete_form.submit"), class: "button alert expanded" %>
 <% end %>
diff --git a/app/views/users/registrations/edit.html.erb b/app/views/users/registrations/edit.html.erb
index 1db32f63f..f034d0207 100644
--- a/app/views/users/registrations/edit.html.erb
+++ b/app/views/users/registrations/edit.html.erb
@@ -1,4 +1,7 @@
-<i class="icon-angle-left left"></i>&nbsp;<%= link_to t("devise_views.users.registrations.edit.back_link"), :back, class: "left back" %>
+<%= link_to :back, class: "back" do %>
+  <i class="icon-angle-left float-left"></i>
+  <%= t("devise_views.users.registrations.edit.back_link") %>
+<% end %>
 
 <h1><%= t("devise_views.users.registrations.edit.edit") %></h1>
 
@@ -34,7 +37,7 @@
     </div>
 
     <div class="small-12 column">
-      <%= f.submit t("devise_views.users.registrations.edit.update_submit"), class: "button radius" %>
+      <%= f.submit t("devise_views.users.registrations.edit.update_submit"), class: "button" %>
     </div>
   </div>
 <% end %>
diff --git a/app/views/users/registrations/finish_signup.html.erb b/app/views/users/registrations/finish_signup.html.erb
index 7d034e90f..fa7bb621e 100644
--- a/app/views/users/registrations/finish_signup.html.erb
+++ b/app/views/users/registrations/finish_signup.html.erb
@@ -15,7 +15,7 @@
     <%= f.hidden_field :email %>
   <% end %>
 
-  <%= f.submit t("devise_views.users.registrations.new.submit"), class: 'button radius expand' %>
+  <%= f.submit t("devise_views.users.registrations.new.submit"), class: 'button expanded' %>
   <div class="text-center">
     <%= link_to t("devise_views.users.registrations.new.cancel"), destroy_user_session_path, class: 'delete', method: :delete %>
   </div>
diff --git a/app/views/users/registrations/new.html.erb b/app/views/users/registrations/new.html.erb
index e5ba6560b..def7266a6 100644
--- a/app/views/users/registrations/new.html.erb
+++ b/app/views/users/registrations/new.html.erb
@@ -45,7 +45,7 @@
       <% end %>
 
 
-      <%= f.submit t("devise_views.users.registrations.new.submit"), class: "button radius expand" %>
+      <%= f.submit t("devise_views.users.registrations.new.submit"), class: "button expanded" %>
     </div>
   </div>
 <% end %>
diff --git a/app/views/users/registrations/success.html.erb b/app/views/users/registrations/success.html.erb
index a7b1066ca..98720a2ce 100644
--- a/app/views/users/registrations/success.html.erb
+++ b/app/views/users/registrations/success.html.erb
@@ -4,5 +4,5 @@
 <p><%= t("devise_views.users.registrations.success.instructions_2_html") %></p>
 <p>
   <%= link_to t("devise_views.users.registrations.success.back_to_index"),
-      root_path, class: "button radius small margin-top expand" %>
+      root_path, class: "button small margin-top expanded" %>
 </p>
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
index 7d14602a7..9b3e69415 100644
--- a/app/views/users/show.html.erb
+++ b/app/views/users/show.html.erb
@@ -11,25 +11,25 @@
       </h2>
 
       <% if @user.public_activity || @authorized_current_user %>
-        <dl class="sub-nav margin-top">
+        <ul class="menu simple margin-top">
           <% @valid_filters.each do |filter| %>
             <% if @activity_counts[filter] > 0 %>
               <% if authorized_for_filter?(filter) %>
                 <% if @current_filter == filter %>
-                  <dd class="active">
+                  <li class="active">
                     <%= t("users.show.filters.#{filter}", count: @activity_counts[filter]) %>
-                  </dd>
+                  </li>
                 <% else %>
-                  <dd>
+                  <li>
                     <%= link_to t("users.show.filters.#{filter}", count: @activity_counts[filter]),
                                 current_path_with_query_params(filter: filter, page: 1) %>
-                  </dd>
+                  </li>
                 <% end %>
               <% end %>
             <% end %>
           <% end %>
           <%= t("users.show.no_activity") if @activity_counts.values.inject(&:+) == 0 %>
-        </dl>
+        </ul>
 
         <%= render "activity_page" %>
       <% else %>
@@ -38,4 +38,4 @@
 
     </div>
   </div>
-</section>
\ No newline at end of file
+</section>
diff --git a/app/views/verification/letter/edit.html.erb b/app/views/verification/letter/edit.html.erb
index 6768d9780..c792e219d 100644
--- a/app/views/verification/letter/edit.html.erb
+++ b/app/views/verification/letter/edit.html.erb
@@ -24,7 +24,7 @@
 
         <%= f.text_field :verification_code, label: t("pages.verify.code"), placeholder: t("pages.verify.code") %>
 
-        <%= f.submit(class: "button radius success expand", value: t("pages.verify.submit")) %>
+        <%= f.submit(class: "button success expanded", value: t("pages.verify.submit")) %>
       <% end %>
     </div>
   </div>
diff --git a/app/views/verification/letter/new.html.erb b/app/views/verification/letter/new.html.erb
index 7ef174dd5..130fb106c 100644
--- a/app/views/verification/letter/new.html.erb
+++ b/app/views/verification/letter/new.html.erb
@@ -12,15 +12,15 @@
         <span class="number">3</span> <%= t("verification.step_3") %>
       </div>
 
-      <div class="progress small-12 success radius">
+      <div class="progress small-12 success">
         <span class="meter" style="width: 100%"></span>
       </div>
     </div>
 
     <div class="small-12 medium-4 column">
 
-      <%= link_to account_path, class: "left back clear" do %>
-        <i class="icon-angle-left left"></i>
+      <%= link_to account_path, class: "back" do %>
+        <i class="icon-angle-left float-left"></i>
         <%= t("verification.back") %>
       <% end %>
 
@@ -38,7 +38,7 @@
         </ul>
       </div>
 
-      <%= link_to t("verification.letter.new.go_to_index"), root_path, class: "button radius warning" %>
+      <%= link_to t("verification.letter.new.go_to_index"), root_path, class: "button warning" %>
     </div>
     <div class="small-12 medium-8 column final-votes-info">
 
diff --git a/app/views/verification/letter/show.html.erb b/app/views/verification/letter/show.html.erb
index d5722f1fb..a21cfb4ed 100644
--- a/app/views/verification/letter/show.html.erb
+++ b/app/views/verification/letter/show.html.erb
@@ -1,15 +1,14 @@
-<div class="verification account row">
-
-  <%= link_to account_path, class: "left back clear" do %>
-    <i class="icon-angle-left left"></i>
-    <%= t("verification.back") %>
-  <% end %>
-
+<div class="row">
   <div class="small-12 column">
 
+    <%= link_to account_path, class: "back" do %>
+      <i class="icon-angle-left"></i>
+      <%= t("verification.back") %>
+    <% end %>
+
     <h1><%= t("verification.letter.edit.title") %></h1>
 
-    <div class="alert-box success radius clear margin-top">
+    <div data-alert class="callout success">
       <%= t("verification.letter.create.flash.success_html",
           offices: link_to(t("verification.letter.create.flash.offices"),
                            t("verification.letter.create.flash.offices_url"),
@@ -17,6 +16,6 @@
       %>
     </div>
 
-    <%= link_to t("verification.letter.edit.see_all"), proposals_path, class: "button warning radius" %>
+    <%= link_to t("verification.letter.edit.see_all"), proposals_path, class: "button warning" %>
   </div>
 </div>
diff --git a/app/views/verification/residence/_errors.html.erb b/app/views/verification/residence/_errors.html.erb
index 97db6c6ab..ca02ee0df 100644
--- a/app/views/verification/residence/_errors.html.erb
+++ b/app/views/verification/residence/_errors.html.erb
@@ -1,7 +1,9 @@
 <% if @residence.errors[:residence_in_madrid].present? %>
 
-  <div id="error_explanation" data-alert class="alert-box alert radius">
-  	<a href="#" class="close" title="<%= t("application.close") %>">&times;</a>
+  <div id="error_explanation" 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>
     <%= t("verification.residence.new.error_verifying_census",
     offices: link_to( t("verification.residence.new.error_verifying_census_offices"),
     "http://www.madrid.es/portales/munimadrid/es/Inicio/El-Ayuntamiento/Atencion-al-ciudadano/Oficinas-de-Atencion-al-Ciudadano?vgnextfmt=default&vgnextchannel=5b99cde2e09a4310VgnVCM1000000b205a0aRCRD", target: "_blank")).html_safe %>
diff --git a/app/views/verification/residence/new.html.erb b/app/views/verification/residence/new.html.erb
index 26b7f2cc8..3ad074277 100644
--- a/app/views/verification/residence/new.html.erb
+++ b/app/views/verification/residence/new.html.erb
@@ -13,12 +13,12 @@
       </div>
     </div>
 
-    <div class="progress small-12 success radius">
+    <div class="progress small-12 success">
       <span class="meter" style="width: 33%"></span>
     </div>
 
-    <%= link_to account_path, class: "left back clear" do %>
-      <i class="icon-angle-left left"></i>
+    <%= link_to account_path, class: "back" do %>
+      <i class="icon-angle-left"></i>
       <%= t("verification.back") %>
     <% end %>
 
@@ -38,14 +38,16 @@
     <%= form_for @residence, as: "residence", url: residence_path do |f| %>
       <%= render "errors" %>
 
-      <div class="small-12 medium-8">
-        <div class="small-12 medium-4 left">
-        <%= f.label t("verification.residence.new.document_type_label") %>
-        <%= f.select :document_type, document_types, prompt: "", label: false %>
-        </div>
-        <div class="small-12 medium-5 left">
-        <%= f.label t("verification.residence.new.document_number") %>
-        <%= f.text_field :document_number, label: false %>
+      <div class="row">
+        <div class="small-12 medium-8">
+          <div class="small-12 medium-4 column">
+          <%= f.label t("verification.residence.new.document_type_label") %>
+          <%= f.select :document_type, document_types, prompt: "", label: false %>
+          </div>
+          <div class="small-12 medium-5 column end">
+          <%= f.label t("verification.residence.new.document_number") %>
+          <%= f.text_field :document_number, label: false %>
+          </div>
         </div>
       </div>
 
@@ -76,7 +78,7 @@
       </div>
 
       <div class="small-12 clear">
-        <%= f.submit t("verification.residence.new.verify_residence") %>
+        <%= f.submit t("verification.residence.new.verify_residence"), class: "button success" %>
       </div>
     <% end %>
   </div>
diff --git a/app/views/verification/sms/edit.html.erb b/app/views/verification/sms/edit.html.erb
index ac71bba57..94fed7fd4 100644
--- a/app/views/verification/sms/edit.html.erb
+++ b/app/views/verification/sms/edit.html.erb
@@ -13,12 +13,12 @@
       </div>
     </div>
 
-    <div class="progress small-12 success radius">
+    <div class="progress small-12 success">
       <span class="meter" style="width: 66%"></span>
     </div>
 
-    <%= link_to account_path, class: "left back clear" do %>
-      <i class="icon-angle-left left"></i>
+    <%= link_to account_path, class: "back" do %>
+      <i class="icon-angle-left"></i>
       <%= t("verification.back") %>
     <% end %>
 
@@ -26,8 +26,10 @@
 
     <%= form_for @sms, as: "sms", url: sms_path, method: :put do |f| %>
       <% if @error %>
-        <div data-alert class="alert-box alert radius">
-          <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>
           <%= @error %>
         </div>
       <% end %>
@@ -37,10 +39,12 @@
         <%= f.text_field :confirmation_code, label: false %>
       </div>
 
-      <%= f.submit t("verification.sms.edit.submit_button") %>
+      <%= f.submit t("verification.sms.edit.submit_button"), class: "button success" %>
     <% end %>
 
-    <%= t("verification.sms.edit.resend_sms_text") %>
-    <%= link_to t("verification.sms.edit.resend_sms_link"), verified_user_path %>
+    <p>
+      <strong><%= t("verification.sms.edit.resend_sms_text") %></strong><br>
+      <%= link_to t("verification.sms.edit.resend_sms_link"), verified_user_path %>
+    </p>
   </div>
 </div>
diff --git a/app/views/verification/sms/new.html.erb b/app/views/verification/sms/new.html.erb
index 1bc047105..2e304ddda 100644
--- a/app/views/verification/sms/new.html.erb
+++ b/app/views/verification/sms/new.html.erb
@@ -13,12 +13,12 @@
       </div>
     </div>
 
-    <div class="progress small-12 success radius">
+    <div class="progress small-12 success">
       <span class="meter" style="width: 66%"></span>
     </div>
 
-    <%= link_to account_path, class: "left back clear" do %>
-      <i class="icon-angle-left left"></i>
+    <%= link_to account_path, class: "back" do %>
+      <i class="icon-angle-left"></i>
       <%= t("verification.back") %>
     <% end %>
 
@@ -33,7 +33,7 @@
         <%= f.text_field :phone, label: false %>
       </div>
 
-      <%= f.submit t("verification.sms.new.submit_button") %>
+      <%= f.submit t("verification.sms.new.submit_button"), class: "button success" %>
     <% end %>
   </div>
 </div>
diff --git a/app/views/verification/verified_user/_form.html.erb b/app/views/verification/verified_user/_form.html.erb
index a19fa6255..3dd9d39e6 100644
--- a/app/views/verification/verified_user/_form.html.erb
+++ b/app/views/verification/verified_user/_form.html.erb
@@ -1,4 +1,4 @@
 <%= form_for verified_user, url: url, method: :post do |f| %>
   <%= f.hidden_field :id %>
-  <%= f.submit t("verification.verified_user.form.submit_button"), class: "button radius success tiny" %>
+  <%= f.submit t("verification.verified_user.form.submit_button"), class: "button success small" %>
 <% end %>
diff --git a/app/views/verification/verified_user/show.html.erb b/app/views/verification/verified_user/show.html.erb
index 2193e4fcd..f1ae927b2 100644
--- a/app/views/verification/verified_user/show.html.erb
+++ b/app/views/verification/verified_user/show.html.erb
@@ -1,8 +1,8 @@
 <div class="verification account row">
   <div class="small-12 column">
 
-    <%= link_to account_path, class: "left back clear" do %>
-      <i class="icon-angle-left left"></i>
+    <%= link_to account_path, class: "back" do %>
+      <i class="icon-angle-left"></i>
       <%= t("verification.back") %>
     <% end %>
 
@@ -29,7 +29,7 @@
       <ul class="verification-list">
         <% @verified_users.each do |verified_user| %>
           <% if verified_user.phone.present? %>
-            <li id="<%= dom_id(verified_user) %>_phone" style="float:left">
+            <li id="<%= dom_id(verified_user) %>_phone" class="float-left">
               <span><%= mask_phone(verified_user.phone) %></span>
               <span><%= render "form", url: sms_path, verified_user: verified_user %></span>
             </li>
diff --git a/app/views/welcome/highlights.html.erb b/app/views/welcome/highlights.html.erb
deleted file mode 100644
index 66d335448..000000000
--- a/app/views/welcome/highlights.html.erb
+++ /dev/null
@@ -1,27 +0,0 @@
-<% provide :title do %><%= t('welcome.signed_in_home_title') %><% end %>
-<% cache [locale_and_user_status, @list, @debate_votes, @proposal_votes, @paginator.current_page, @paginator.total_pages] do %>
-  <section role="main">
-    <div class="wrap row">
-      <div id="activities" class="debates-list small-12 medium-9 column">
-
-        <div class="small-12 medium-7 left">
-            <h1 class="inline-block"><%= t('welcome.highlights') %></h1>
-            &nbsp;&nbsp;
-            <h2 class="margin-top">
-              <%= t('welcome.signed_in_home_title') %>
-            </h2>
-        </div>
-
-        <%= render @list %>
-        <%= paginate @paginator %>
-      </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' %>
-          <%= link_to t("debates.index.start_debate"), new_debate_path, class: 'button radius expand' %>
-        </aside>
-      </div>
-    </div>
-  </section>
-<% end %>
\ No newline at end of file
diff --git a/app/views/welcome/index.html.erb b/app/views/welcome/index.html.erb
index 3236b2f7a..32780e9c1 100644
--- a/app/views/welcome/index.html.erb
+++ b/app/views/welcome/index.html.erb
@@ -1,3 +1,22 @@
+<div class="expanded highlight padding no-margin-top">
+  <div class="row">
+    <div class="small-12 medium-6 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 see-more expanded" %>
+      </div>
+    </div>
+
+    <div class="hide-for-small-only small-12 medium-5 column text-center">
+      <%= image_tag("icon_home.png", size: "330x240", alt:"", role:"presentation") %>
+    </div>
+  </div>
+</div>
+
 <% cache [locale_and_user_status, @featured_debates, @featured_proposals, 'featured'] do %>
   <section role="main">
     <div class="row text-center margin">
diff --git a/config/locales/en.yml b/config/locales/en.yml
index e6064e527..5514d2401 100755
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -483,12 +483,10 @@ en:
       alt: Icon it gets done
       description: If the proposal is accepted by the majority, the City Council accepts it as its own and it gets done.
       title: It gets done
-    highlights: 'Highlights: '
     proposal:
       alt: Icon propose
       description: Open space for citizen proposals about the kind of city we want to live in.
       title: You propose
-    signed_in_home_title: Recent activity
     verification:
       i_dont_have_an_account: I don't have an account
       i_have_an_account: I already have an account
diff --git a/config/locales/es.yml b/config/locales/es.yml
index 9b9cb2439..bf256fa13 100755
--- a/config/locales/es.yml
+++ b/config/locales/es.yml
@@ -27,7 +27,6 @@ es:
       username_label: Nombre de usuario
       verified_account: Cuenta verificada
       verify_my_account: Verificar mi cuenta
-
   application:
     close: Cerrar
     menu: Menú
@@ -484,12 +483,10 @@ es:
       alt: Icono se hace
       description: Si la propuesta es aceptada mayoritariamente, el Ayuntamiento la asume como propia y se hace.
       title: Se hace
-    highlights: 'Portada: '
     proposal:
       alt: Icono propones
       description: Espacio abierto para propuestas ciudadanas sobre el tipo de ciudad en el que queremos vivir.
       title: Propones
-    signed_in_home_title: Actividad reciente
     verification:
       i_dont_have_an_account: No tengo cuenta, quiero crear una y verificarla
       i_have_an_account: Ya tengo una cuenta que quiero verificar
diff --git a/config/locales/kaminari.en.yml b/config/locales/kaminari.en.yml
index 3e1fb89dc..35590c1ca 100755
--- a/config/locales/kaminari.en.yml
+++ b/config/locales/kaminari.en.yml
@@ -15,8 +15,9 @@ en:
           zero: "%{entry_name} cannot be found"
   views:
     pagination:
-      first: "&laquo; First"
-      last: Last &raquo;
-      next: Next &rsaquo;
-      previous: "&lsaquo; Previous"
+      first: First
+      last: Last
+      next: Next
+      previous: Previous
       truncate: "&hellip;"
+      current: You're on page
\ No newline at end of file
diff --git a/config/locales/kaminari.es.yml b/config/locales/kaminari.es.yml
index a9887aad0..7869cea2a 100644
--- a/config/locales/kaminari.es.yml
+++ b/config/locales/kaminari.es.yml
@@ -15,8 +15,9 @@ es:
           zero: No se han encontrado %{entry_name}
   views:
     pagination:
-      first: "&laquo; Primera"
-      last: "Última &raquo;"
-      next: Siguiente &rsaquo;
-      previous: "&lsaquo; Anterior"
+      first: Primera
+      last: Última
+      next: Siguiente
+      previous: Anterior
       truncate: "&hellip;"
+      current: Estás en la página
diff --git a/doc/style-guide.html b/doc/style-guide.html
deleted file mode 100644
index 60d2571b7..000000000
--- a/doc/style-guide.html
+++ /dev/null
@@ -1,455 +0,0 @@
-<!DOCTYPE html>
-<html lang="es">
-<head>
-  <meta charset="UTF-8">
-  <title>gobierno abierto | Guía de estilo web</title>
-  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.2/css/foundation.min.css">
-  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,800,700' rel='stylesheet' type='text/css'>
-  <link href='http://fonts.googleapis.com/css?family=Lato:400,700,300' rel='stylesheet' type='text/css'>
-</head>
-
-<!-- This CSS it's only for styleguide purposes, don't use in the final product. Thanks! ;) -->
-<style type="text/css">
-/* 01. Global
-/* - - - - - - - - - - - - - - - - - - - - - - - - - */
-
-body {
-  background: #F9F9F9;
-  color: #555458;
-  font-family: "Open Sans", "Helvetica Neue", Helvetica, Sans-serif !important;
-  font-size: 13px;
-  line-height: 24px;
-}
-
-p {
-  font-size: 13px;
-  margin: 0 0 12px;
-  padding: 0;
-}
-
-a {
-  color: #439fe0;
-  text-decoration: none;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
-.menu ul {
-  list-style-type: none;
-  margin-left: 0;
-  margin-top: 24px;
-  padding-left: 0;
-}
-
-ul li {
-  font-size: 13px;
-  margin-bottom: 12px;
-}
-
-.style-guide {
-  background: white;
-  border: 1px solid #d8d8d8;
-  border-radius: 6px;
-  box-shadow: 0 1px 2px 0 rgba(0,0,0,.08);
-  margin: 0 auto;
-  margin-top: 24px;
-  max-width: 800px;
-  padding: 12px 24px 24px;
-  position: relative;
-}
-
-.title {
-  border-bottom: 1px solid #d8d8d8;
-}
-
-.subtitle {
-  margin-top: 24px;
-}
-
-.clear {
-  clear: both;
-}
-
-/* 02. Typo
-/* - - - - - - - - - - - - - - - - - - - - - - - - - */
-
-.lato {
-  color: black;
-  font-family: 'Lato', sans-serif;
-  font-size: 30px;
-  font-weight: lighter;
-}
-
-/* 03. Headings
-/* - - - - - - - - - - - - - - - - - - - - - - - - - */
-
-h1,h2 {
-  margin: 0;
-  padding:  0;
-}
-
-h2.section {
-  border-bottom: 1px solid #d8d8d8;
-  font-size: 24px;
-  font-weight: bold;
-  margin: 24px 0 12px;
-}
-
-h1 {
-  font-size: 32px;
-  margin: 12px 0;
-}
-
-h2 {
-  font-size: 24px;
-  margin: 12px 0;
-}
-
-h3 {
-  font-size: 18px;
-  margin: 12px 0;
-}
-
-h4 {
-  font-size: 16px;
-  margin: 12px 0;
-}
-
-h5 {
-  font-size: 14px;
-  margin: 12px 0;
-}
-
-h6 {
-  font-size: 13px;
-  margin: 12px 0;
-}
-
-/* 04. Links
-/* - - - - - - - - - - - - - - - - - - - - - - - - - */
-
-a.link-example {
-  color: #2895F1;
-}
-
-a.link-example:hover {
-  color: #2178BF;
-}
-
-a.link-example-dark {
-  color: #fff;
-}
-
-a.link-example-dark:hover {
-  color: #2178BF;
-}
-
-/* 05. Forms
-/* - - - - - - - - - - - - - - - - - - - - - - - - - */
-
-form label {
-  font-weight: bold;
-  line-height: 24px;
-}
-
-form input[type]:not([type=submit]) {
-  background: #F8F8F8;
-  height: 48px;
-  margin-bottom: 16px;
-}
-
-.note {
-  display: block;
-  font-size: 12px;
-  margin-bottom: 12px;
-}
-
-.checkbox {
-  display: inline-block;
-  font-size: 14px;
-  font-weight: normal;
-  line-height: 48px;
-  margin: 0 0 0 6px;
-  vertical-align: top;
-}
-
-/* 06. Colors
-/* - - - - - - - - - - - - - - - - - - - - - - - - - */
-
-.color-list {
-  margin-bottom: 24px;
-}
-
-.color {
-  color: black;
-  display: inline-block;
-  font-size: 12px;
-  height: 100px;
-  margin-right: 10px;
-  margin-top: 10px;
-  padding-top: 24px;
-  text-align: center;
-  width: 100px;
-}
-
-/* 07. Alerts
-/* - - - - - - - - - - - - - - - - - - - - - - - - - */
-
-.alert-box.success {
-  background-color: #DFF0D8;
-  border-color: #D6E9C6;
-  color: #3C763D;
-}
-
-.alert-box.info {
-  background-color: #D9EDF7;
-  border-color: #BCE8F1;
-  color: #31708F;
-}
-
-.alert-box.warning {
-  background-color: #FCF8E3;
-  border-color: #FAEBCC;
-  color: #8A6D3B;
-}
-
-.alert-box.alert {
-  background-color: #F2DEDE;
-  border-color: #EBCCD1;
-  color: #A94442;
-}
-
-</style>
-<!-- This CSS it's only for styleguide purposes, don't use in the final product. Thanks! ;) -->
-
-<body>
-
-<div class="row style-guide">
-  <h1 class="title"><span class="lato">gobierno <strong>abierto</strong></span> <span class="right">Guía de estilo web</span></h1>
-
-  <div class="menu small-12 medium-2 column">
-    <div class="index">
-      <ul>
-        <li><a href="#1">1. Introducción</a></li>
-        <li><a href="#2">2. Tipografía</a></li>
-        <li><a href="#3">3. Enlaces</a></li>
-        <li><a href="#4">4. Botones</a></li>
-        <li><a href="#5">5. Formularios</a></li>
-        <li><a href="#6">6. Colores</a></li>
-        <li><a href="#7">7. Alertas</a></li>
-      </ul>
-    </div>
-  </div>
-
-  <div class="small-12 medium-10 column">
-    <h2 class="section" id="1">1. Introducción</h2>
-    <p>¡Hola! hemos creado algunas directrices de cómo usar el diseño en los diferentes elementos.</p>
-    <p><span class="label radius alert">IMPORTANTE</span><br><strong> Esta guía de estilo no es definitiva ya que irá creciendo junto al proyecto, por lo que algunos elementos pueden tener modificaciones en el futuro.</strong></p>
-    <p>En este proyecto para el maquetar el front utilizamos como base el framework <a href="http://foundation.zurb.com/" target="_blank">Foundation</a>. Puedes leer toda su <a href="http://foundation.zurb.com/docs/" target="_blank">documentación</a> pero te recomendamos que leas con atención los siguientes enlaces, ya que resumen muy bien el funcionamiento del framework:</p>
-    <ul>
-      <li><a href="http://foundation.zurb.com/docs/components/grid.html" target="_blank">Grid</a></li>
-      <li><a href="http://foundation.zurb.com/docs/utility-classes.html" target="_blank">Utility classes</a></li>
-      <li><a href="http://foundation.zurb.com/docs/components/kitchen_sink.html" target="_blank">Kitchen shink</a></li>
-    </ul>
-    <p>Para desarrollar el CSS utilizamos <a href="http://sass-lang.com/" target="_blank">SASS</a>. Si clonas el <a href="https://github.com/consul/consul" target="_blank">repositorio</a> verás la siguiente estructura en las hojas de estilo:</p>
-
-    <ul>
-        <li><code><strong>application.sccs</strong></code> hace un @import del resto de SCSS para compilarlos en un solo fichero.</li>
-        <li><code><strong>debates.sccs</strong></code> todos los estilos relacionados con la sección de debates.</li>
-        <li><code><strong>fonts.sccs</strong></code> desde aquí se important todas las fuentes.</li>
-        <li><code><strong>foundation_and_overrides.sccs</strong></code> fichero SCSS de Foundation con todas sus variables por defecto.</li>
-        <li><code><strong>icons.sccs</strong></code> fuente de iconos personalizada para el proyecto, creada en <a href="http://fontastic.me/" target="_blank">Fontastic.me</a>.</li>
-        <li><code><strong>variables.sccs</strong></code> lista de variables para utilizar en el resto de SCSS. </li>
-    </ul>
-
-    <h2 class="section" id="2">2. Tipografía</h2>
-    <p>La fuente que utilizamos para el texto es <a href="https://www.google.com/fonts/specimen/Open+Sans" target="_blank">Open Sans</a> y utlizamos <a href="https://www.google.com/fonts/specimen/Lato" target="_blank">Lato</a> para el logotipo: <span class="lato">gobierno <strong>abierto</strong></span></p>
-
-    <h1>Heading 1</h1>
-    <code>h1 {font-size: 32px;}</code>
-
-    <h2>Heading 2</h2>
-    <code>h2 {font-size: 24px;}</code>
-
-    <h3>Heading 3</h3>
-    <code>h3 {font-size: 18px;}</code>
-
-    <h4>Heading 4</h4>
-    <code>h4 {font-size: 16px;}</code>
-
-    <h5>Heading 5</h5>
-    <code>h5 {font-size: 14px;}</code>
-
-    <h6>Heading 6</h6>
-    <code>h6 {font-size: 13px;}</code>
-
-    <p class="subtitle"><strong>Ejemplo de texto</strong></p>
-    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
-
-    <code>p {font-size: 13px; line-height: 24px;}</code>
-
-    <h2 class="section" id="3">3. Enlaces</h2>
-    <p>Los enlaces sobre fondo blanco utilizan el color <code style="color: #2895F1;">#2895F1;</code> y al hacer hover cambian al color <code style="color: #2178BF;">#2178BF;</code> Ejemplo: <a href="#" class="link-example">Esto es un enlace</a></p>
-
-    <p>Los enlaces sobre fondo oscuro utilizan el color <code>#FFFFF;/white</code> y al hacer hover cambian al color <code style="color: #2178BF;">#2178BF;</code> Ejemplo: <a href="#" class="link-example-dark" style="background: black; padding: 0 6px;">Esto es un enlace</a></p>
-
-    <h2 class="section" id="4">4. Botones</h2>
-
-    <p>Utilizamos los botones con bordes redondeados por defecto en Foundation, en varios tamaños.</p>
-
-    <p class="subtitle"><strong>Botones expandidos</strong></p>
-    <a href="#" class="button radius expand">Button default</a>
-    <code>class="button radius expand"></code>
-    <br><br>
-    <a href="#" class="button radius success expand">Button success</a>
-    <code>class="button radius success expand"</code>
-    <br><br>
-    <a href="#" class="button radius secondary expand">Button secondary</a>
-    <code>class="button radius secondary expand"></code>
-    <br><br>
-    <a href="#" class="button radius alert expand">Button alert</a>
-    <code>class="button radius alert expand"</code>
-
-    <p class="subtitle"><strong>Botones normales</strong></p>
-    <a href="#" class="button radius">Button default</a>
-    <code>class="button radius"></code>
-    <br>
-    <a href="#" class="button radius success">Button success</a>
-    <code>class="button radius success"</code>
-    <br>
-    <a href="#" class="button radius secondary">Button secondary</a>
-    <code>class="button radius secondary"></code>
-    <br>
-    <a href="#" class="button radius alert">Button alert</a>
-    <code>class="button radius alert"</code>
-
-    <p class="subtitle"><strong>Botones pequeños</strong></p>
-    <a href="#" class="button radius small">Button default</a>
-    <code>class="button radius small"></code>
-    <br>
-    <a href="#" class="button radius small success">Button success</a>
-    <code>class="button radius small success"</code>
-    <br>
-    <a href="#" class="button radius small secondary">Button secondary</a>
-    <code>class="button radius small secondary"></code>
-    <br>
-    <a href="#" class="button radius small alert">Button alert</a>
-    <code>class="button radius small alert"</code>
-
-    <h2 class="section" id="5">5. Formularios</h2>
-
-      <div class="row">
-        <div class="small-12 medium-8 small-centered column">
-          <form>
-            <label>Nombre</label>
-            <p class="note">Mensaje de información para rellenar el campo</p>
-            <input type="text">
-            <label>Apellidos</label>
-            <input type="text">
-            <label>Mensaje</label>
-            <textarea cols="30" rows="6"></textarea>
-            <label>
-              <input type="checkbox">
-              <span class="checkbox">Acepto las condiciones</span>
-            </label>
-            <button class="radius expand">Publicar</button>
-          </form>
-        </div>
-        <code>form { background: #F8F8F8; height: 48px; margin-bottom: 16px; }</code>
-      </div>
-
-    <h2 class="section" id="6">6. Colores</h2>
-    <div class="color-list">
-      <div class="color" style="background: #E9E9E9">
-        <span>body<br><strong>#E9E9E9</strong></span>
-      </div>
-
-      <div class="color" style="background: #EDEFF0">
-        <span>background<br><strong>#EDEFF0</strong></span>
-      </div>
-
-      <div class="color" style="background: #DEE0E3">
-        <span>border<br><strong>#DEE0E3</strong></span>
-      </div>
-
-      <div class="color" style="background: #0077B9">
-        <span>brand<br><strong>#0077B9</strong></span>
-      </div>
-      <br>
-      <div class="color" style="background: #222222">
-        <span>text<br><strong>#222222</strong></span>
-      </div>
-
-      <div class="color" style="background: #999999">
-        <span>text-medium<br><strong>#999999</strong></span>
-      </div>
-
-      <div class="color" style="background: #CCCCCC">
-        <span>text-light<br><strong>#CCCCCC</strong></span>
-      </div>
-      <br>
-
-      <div class="color" style="background: #2895F1">
-        <span>link<br><strong>#2895F1</strong></span>
-      </div>
-
-      <div class="color" style="background: #2178BF">
-        <span>link-hover<br><strong>#2178BF</strong></span>
-      </div>
-      <br>
-      <div class="color" style="background: #008CCF">
-        <span>debates<br><strong>#008CCF</strong></span>
-      </div>
-
-      <div class="color" style="background: #26AEEE">
-        <span>votes-bg<br><strong>#26AEEE</strong></span>
-      </div>
-
-      <div class="color" style="background: #1F94CB">
-        <span>votes-border<br><strong>#1F94CB</strong></span>
-      </div>
-      <br>
-      <div class="color" style="background: #7BD2A8">
-        <span>votes-like<br><strong>#7BD2A8</strong></span>
-      </div>
-
-      <div class="color" style="background: #5D9E7F">
-        <span>votes-like-act<br><strong>#5D9E7F</strong></span>
-      </div>
-
-      <div class="color" style="background: #EF8585">
-        <span>votes-unlike<br><strong>#EF8585</strong></span>
-      </div>
-
-      <div class="color" style="background: #BD6A6A">
-        <span>votes-unlike-act<br><strong>#BD6A6A</strong></span>
-      </div>
-      <br>
-      <div class="color" style="background: #46DB91">
-        <span>check<br><strong>#46DB91</strong></span>
-      </div>
-    </div>
-
-    <h2 class="section clear" id="7">7. Alertas</h2>
-
-    <div class="alert-box radius success">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
-    <code>class="alert-bx radius success"</code>
-    <br><br>
-    <div class="alert-box radius info">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
-    <code>class="alert-bx radius info"</code>
-    <br><br>
-    <div class="alert-box radius alert">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
-    <code>class="alert-bx radius alert"</code>
-    <br><br>
-    <div class="alert-box radius warning">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
-    <code>class="alert-bx radius warning"</code>
-    <br><br>
-    <div class="alert-box radius secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
-    <code>class="alert-bx radius secondary"</code>
-
-  </div>
-</div>
-</body>
-</html>
\ No newline at end of file
diff --git a/spec/features/highlights_spec.rb b/spec/features/highlights_spec.rb
deleted file mode 100644
index c17ee17ce..000000000
--- a/spec/features/highlights_spec.rb
+++ /dev/null
@@ -1,34 +0,0 @@
-require 'rails_helper'
-
-feature "Highlights" do
-
-  scenario 'Debates and proposals order by hot_score' do
-    create(:debate, title: 'best debate 100').update_column(:hot_score, 100)
-    create(:debate, title: 'worst debate 50').update_column(:hot_score, 50)
-    create(:debate, title: 'medium debate 70').update_column(:hot_score, 70)
-
-    create(:proposal, title: 'best proposal 90').update_column(:hot_score, 90)
-    create(:proposal, title: 'worst proposal 60').update_column(:hot_score, 60)
-    create(:proposal, title: 'medium proposal 80').update_column(:hot_score, 80)
-
-    login_as(create(:user))
-
-    visit highlights_path
-
-    expect('best debate 100').to    appear_before('best proposal 90')
-    expect('best proposal 90').to   appear_before('medium proposal 80')
-    expect('medium proposal 80').to appear_before('medium debate 70')
-    expect('medium debate 70').to   appear_before('worst proposal 60')
-    expect('worst proposal 60').to  appear_before('worst debate 50')
-  end
-
-  scenario 'create debate and create proposal links' do
-    login_as(create(:user))
-
-    visit highlights_path
-
-    expect(page).to have_link("Create a proposal")
-    expect(page).to have_link("Start a debate")
-  end
-
-end
\ No newline at end of file
diff --git a/spec/features/home_spec.rb b/spec/features/home_spec.rb
index f5eec3121..708b1c883 100644
--- a/spec/features/home_spec.rb
+++ b/spec/features/home_spec.rb
@@ -43,7 +43,7 @@ feature "Home" do
     end
 
     def ie_alert_box_xpath
-      "/html/body/div[@class='wrapper']/comment()[contains(.,'ie-alert-box')]"
+      "/html/body/div[@class='wrapper']/comment()[contains(.,'ie-callout')]"
     end
   end
 end
diff --git a/spec/features/moderation/comments_spec.rb b/spec/features/moderation/comments_spec.rb
index 4a7249042..faffef79b 100644
--- a/spec/features/moderation/comments_spec.rb
+++ b/spec/features/moderation/comments_spec.rb
@@ -49,7 +49,7 @@ feature 'Moderate comments' do
         background do
           @comment = create(:comment)
           visit moderation_comments_path
-          within('.sub-nav') do
+          within('.menu.simple') do
             click_link "All"
           end
 
@@ -123,21 +123,21 @@ feature 'Moderate comments' do
       expect(page).to have_link('Marked as viewed')
 
       visit moderation_comments_path(filter: 'all')
-      within('.sub-nav') do
+      within('.menu.simple') do
         expect(page).to_not have_link('All')
         expect(page).to have_link('Pending')
         expect(page).to have_link('Marked as viewed')
       end
 
       visit moderation_comments_path(filter: 'pending_flag_review')
-      within('.sub-nav') do
+      within('.menu.simple') do
         expect(page).to have_link('All')
         expect(page).to_not have_link('Pending')
         expect(page).to have_link('Marked as viewed')
       end
 
       visit moderation_comments_path(filter: 'with_ignored_flag')
-      within('.sub-nav') do
+      within('.menu.simple') do
         expect(page).to have_link('All')
         expect(page).to have_link('Pending')
         expect(page).to_not have_link('Marked as viewed')
diff --git a/spec/features/moderation/debates_spec.rb b/spec/features/moderation/debates_spec.rb
index 87a8b4d7d..9d48123f2 100644
--- a/spec/features/moderation/debates_spec.rb
+++ b/spec/features/moderation/debates_spec.rb
@@ -56,7 +56,7 @@ feature 'Moderate debates' do
         background do
           @debate = create(:debate)
           visit moderation_debates_path
-          within('.sub-nav') do
+          within('.menu.simple') do
             click_link "All"
           end
 
@@ -130,21 +130,21 @@ feature 'Moderate debates' do
       expect(page).to have_link('Marked as viewed')
 
       visit moderation_debates_path(filter: 'all')
-      within('.sub-nav') do
+      within('.menu.simple') do
         expect(page).to_not have_link('All')
         expect(page).to have_link('Pending')
         expect(page).to have_link('Marked as viewed')
       end
 
       visit moderation_debates_path(filter: 'pending_flag_review')
-      within('.sub-nav') do
+      within('.menu.simple') do
         expect(page).to have_link('All')
         expect(page).to_not have_link('Pending')
         expect(page).to have_link('Marked as viewed')
       end
 
       visit moderation_debates_path(filter: 'with_ignored_flag')
-      within('.sub-nav') do
+      within('.menu.simple') do
         expect(page).to have_link('All')
         expect(page).to have_link('Pending')
         expect(page).to_not have_link('Marked as viewed')
diff --git a/spec/features/moderation/proposals_spec.rb b/spec/features/moderation/proposals_spec.rb
index e41a69bb2..956ca611c 100644
--- a/spec/features/moderation/proposals_spec.rb
+++ b/spec/features/moderation/proposals_spec.rb
@@ -48,7 +48,7 @@ feature 'Moderate proposals' do
         background do
           @proposal = create(:proposal)
           visit moderation_proposals_path
-          within('.sub-nav') do
+          within('.menu.simple') do
             click_link "All"
           end
 
@@ -122,21 +122,21 @@ feature 'Moderate proposals' do
       expect(page).to have_link('Mark as viewed')
 
       visit moderation_proposals_path(filter: 'all')
-      within('.sub-nav') do
+      within('.menu.simple') do
         expect(page).to_not have_link('All')
         expect(page).to have_link('Pending review')
         expect(page).to have_link('Mark as viewed')
       end
 
       visit moderation_proposals_path(filter: 'pending_flag_review')
-      within('.sub-nav') do
+      within('.menu.simple') do
         expect(page).to have_link('All')
         expect(page).to_not have_link('Pending')
         expect(page).to have_link('Mark as viewed')
       end
 
       visit moderation_proposals_path(filter: 'with_ignored_flag')
-      within('.sub-nav') do
+      within('.menu.simple') do
         expect(page).to have_link('All')
         expect(page).to have_link('Pending review')
         expect(page).to_not have_link('Marked as viewed')
diff --git a/spec/rails_helper.rb b/spec/rails_helper.rb
index 5b2f2c85a..902bc040a 100644
--- a/spec/rails_helper.rb
+++ b/spec/rails_helper.rb
@@ -24,7 +24,16 @@ RSpec.configure do |config|
   end
 end
 
+Capybara.register_driver :poltergeist do |app|
+  Capybara::Poltergeist::Driver.new(app,
+    inspector: true, # allows remote debugging by executing page.driver.debug
+    phantomjs_logger: File.open(File::NULL, "w"), # don't print console.log calls in console
+    phantomjs_options: ['--load-images=no', '--disk-cache=false']
+  )
+end
+
 Capybara.javascript_driver = :poltergeist
+
 Capybara.exact = true
 
 OmniAuth.config.test_mode = true