2 files changed, 1076 insertions, 0 deletions
diff --git a/app/assets/stylesheets/responsive/_settings.scss b/app/assets/stylesheets/responsive/_settings.scss
new file mode 100644
index 0000000..015aece
--- /dev/null
+++ b/app/assets/stylesheets/responsive/_settings.scss
@@ -0,0 +1,53 @@
+$main_menu-mobile_menu_cutoff: 58em;
+$row-width: 64em;
+$body-font-family: "Helvetica Neue", Arial, Helvetica, Helmet, Freesans, sans-serif;
+$base-font-size: 16px;
+
+// Specify the filename and dimensions of your logo file here
+$logo-filename: 'logo.png';
+$logo-highdpi-filename: 'logo@2.png'; //Should be at least 2x the size, in the same proportions
+$logo-width: 275px;
+$logo-height: 44px;
+
+$color_sand: #f3f1eb;
+$color_black: #333333;
+$color_orange: #f4a140;
+$color_blue: #4faded;
+$color_green: #62b356;
+$color_yellow: #ffd836;
+$color_red: #e04b4b;
+$color_violet: #a94ca6;
+$color_purple: #5c377f;
+$color_white: #ffffff;
+$color_off_white: #f3f1eb;
+$color_light_grey: #e2dfd9;
+$color_mid_grey: #959287;
+$color_dark_grey: #6c6b68;
+
+$color_neutral_light: $color_sand;
+$color_neutral_dark: $color_black;
+$color_primary: $color_violet;
+$color_secondary: $color_orange;
+
+$body-bg: $color_neutral_light;
+
+$body-font-color: $color_neutral_dark;
+$link-color: darken($color_blue, 20%);
+$action-color: $color_green;
+$font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
+$form_input-bg: $color_white;
+$form-label-font-color: $color_black;
+
+$button-bg: darken($color_green, 10%);
+$button-color: $color_white;
+
+$status-success: darken($color_green, 18%);
+$status-failure: darken($color_red, 10%);
+$status-pending: darken($color_orange, 28%);
+
+$notice-color: $color_green;
+$error-color: $color_red;
+$action-color: $color_orange;
+
+$banner_inner_bg: $color_primary;
+$topnav_bg: darken($color_primary, 10%);
diff --git a/app/assets/stylesheets/responsive/custom.scss b/app/assets/stylesheets/responsive/custom.scss
new file mode 100644
index 0000000..710a7ba
--- /dev/null
+++ b/app/assets/stylesheets/responsive/custom.scss
@@ -0,0 +1,1023 @@
+/* Mixin styles */
+
+/* Hide text when it's replaced by an image */
+.image-replacement {
+  overflow: hidden;
+  text-indent: 150%;
+  white-space: nowrap;
+}
+
+/* General styling of nav menu items */
+%menu-item {
+  text-decoration: none;
+  color: transparentize($color_white, 0.2);
+  @include ie8 {
+    color: $color_white;
+  }
+  transition: background-color 0.5s ease-out;
+  &:hover{
+    background-color: darken($color_primary, 15%);
+    color: $color_white;
+  }
+
+}
+
+/* Selected menu item */
+%selected-menu-item {
+  font-weight: bold;
+  color: $color_primary;
+  background-color: $color_neutral_light;
+  &:hover{
+      background-color: $color_neutral_light;
+  }
+}
+
+
+#navigation .more-menu {
+  background-color: #333;
+}
+
+.account-link:after {
+  position: relative;
+  top: -0.15em;
+  margin-left: 1em;
+  font-size: 0.5em;
+  content: "▼";
+}
+
+.logged-in-menu {
+  color: black;
+  box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.1);
+}
+
+#navigation .logged-in-menu a,
+#navigation .logged-in-menu__signout-link a {
+  color: #197ace;
+  text-decoration: none;
+  transition: none;
+  &:hover {
+    color: #197ace;
+    background-color: transparent;
+    text-decoration: underline;
+  }
+}
+
+#navigation .logged-in-menu__signout-link a {
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 0.8em;
+  color: #888;
+  &:hover {
+    color: #888;
+  }
+}
+
+.pro-pill {
+  color: #567386;
+  font-weight: 600;
+  background-color: #FFFF00;
+}
+
+/* General styles */
+body{
+  background-color: $body-bg;
+  color: $body-font-color;
+}
+
+.entirebody {
+  font-family: $font-family;
+}
+
+a {
+  &:link,
+  &:visited {
+    color: $link-color;
+  }
+  &:hover,
+  &:active,
+  &:focus {
+    color: darken($link-color, 10%);
+  }
+}
+
+/* Let h1s be a little smaller on small screens */
+@media( max-width: $main_menu-mobile_menu_cutoff ){
+  h1 {
+    font-size: 2em;
+  }
+}
+
+/* Square corners for text type inputs */
+form input[type="text"],
+form input[type="password"],
+form input[type="search"],
+form input[type="email"],
+form input[type="url"],
+form input[type="tel"],
+form input[type="number"] {
+    border-radius: 0;
+    background-color: $form_input-bg;
+    /* Set a fixed height for text inputs in older IE 8 */
+    @include ie8{
+        height: 2.3125em;
+    }
+    /* Do the same in px for IE < 7 */
+    @include lte-ie7{
+        height: 22px;
+    }
+}
+
+input.use-datepicker[type=text] {
+  width: 130px;
+  background:image-url('calendar.png') no-repeat 100px 5px $form_input-bg;
+}
+
+/* Button styles */
+
+@mixin button-base($size: normal, $disabled: false) {
+  padding: 0.5em 1.25em;
+  border-radius: 3px;
+  display: inline-block;
+  font-weight: 600;
+  text-decoration: none;
+  transition: background-color 300ms ease-out;
+  margin-bottom: 0;
+  font-family: $font-family;
+  @if $size == large {
+    font-size: 2.2em;
+  }
+  &:hover,
+  &:active,
+  &:focus {
+    text-decoration: none;
+    transition: background-color 300ms ease-out;
+  }
+  @if $disabled {
+    opacity: 0.333;
+    transition: none;
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: inherit;
+      color: inherit;
+      cursor: default;
+      transition: none;
+    }
+  }
+}
+
+@mixin button-primary($args...) {
+  @include button-base($args...);
+  color: $color_white;
+  background-color: $button-bg;
+  border: none;
+  &:hover,
+  &:active,
+  &:focus,
+  &:visited:hover,
+  &:visited:active,
+  &:visited:focus {
+    background-color: darken($button-bg, 10%);
+    color: $color_white;
+  }
+}
+
+@mixin button-secondary($args...) {
+  @include button-base($args...);
+  background-color: desaturate(darken($color_sand, 10%), 5%);
+  color: $color_black;
+  font-weight: normal;
+  &:hover,
+  &:active,
+  &:focus {
+    color: $color_black;
+    background-color: desaturate(darken($color_sand, 20%), 5%);
+  }
+}
+
+@mixin button-tertiary($args...) {
+  @include button-base($args...);
+  background-color: desaturate(darken($color_sand, 5%), 5%);;
+  color: $color_black;
+  font-weight: normal;
+  border: 1px solid desaturate(darken($color_sand, 15%),5%);
+  &:hover,
+  &:active,
+  &:focus {
+    background-color: darken($color_sand, 7.5%);
+    border: 1px solid desaturate(darken($color_sand, 25%),5%);
+  }
+}
+
+form input[type=submit], a.link_button_green, a.link_button_green_large {
+  @include button-primary;
+  text-decoration: none;
+}
+
+a.link_button_green_large {
+  @include button-primary($size: large);
+}
+
+
+/* Action Bar Mixins */
+
+@mixin follow-button {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  margin-bottom: 0;
+}
+
+@mixin follower-count {
+  color: $color_dark_grey;
+  padding: 0.56em 1.25em;
+  border: 1px solid $color_light_grey;
+  position: relative;
+  left: -3px;
+  line-height: 1.6em;
+  border-left: 0;
+  border-radius: 3px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+/* Popups */
+
+.popup {
+  background-color: desaturate(lighten($notice-color, 30%),10%);
+  border: 3px solid $notice-color;
+}
+
+
+/* Header */
+
+#banner_inner {
+  background-color: $color_primary;
+}
+
+#topnav {
+  background-color: darken($color_primary, 10%);
+}
+
+.site-title__logo {
+  // Smaller logo on mobiles
+  width: ($logo-width / 2);
+  height: ($logo-height / 2);
+  background-size: ($logo-width / 2) ($logo-height / 2);
+
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
+    width: $logo-width;
+    height: $logo-height;
+    background-size: $logo-width $logo-height;
+  }
+}
+
+#navigation{
+  border-bottom: none;
+  a {
+    @extend %menu-item;
+  }
+  /* Show which section is currently selected */
+  li.selected a{
+    @extend %selected-menu-item;
+  }
+
+  /* Vertically align the search box */
+  #navigation_search{
+    input{
+      margin-top:0.313em;
+      margin-bottom:0.313em;
+      height: 1.875em;
+      @include ie8 {
+        height: 33px;
+        font-size: 1.1em;
+        padding: 0;
+      }
+    }
+  }
+
+  /* Vertically align the label image for older IE*/
+  @include ie8 {
+    img {
+      margin-top: 0.626em;
+    }
+  }
+
+  #navigation_search_button{
+    background-color: $color_white;
+    border: none;
+    transition: all 0.3s ease-out;
+    color: $color_primary;
+    border-radius: 0;
+    font-size: inherit;
+  }
+}
+
+.greeting {
+  color: $body-bg;
+}
+/* Notices, errors */
+
+#notice, #error, .errorExplanation, #request_header_text, #hidden_request, .describe_state_form form, .undescribed_requests, .warning {
+  border-top: 10px solid;
+  font-size: 1em;
+  margin:1em 0;
+  padding: 1.5em;
+
+  p:first-child {
+    margin-top: 0;
+  }
+
+  p:last-child {
+    margin-bottom:0;
+  }
+
+  ul {
+    margin: 0;
+  }
+}
+
+#notice, #request_header_text {
+  background-color: desaturate(lighten($notice-color, 30%),10%);
+  border-color: $notice-color;
+}
+
+#error, .errorExplanation, #hidden_request, .warning {
+  background-color: desaturate(lighten($error-color, 30%),10%);
+  border-color: $error-color;
+
+}
+
+.undescribed_requests {
+  background-color: desaturate(lighten($action-color, 30%),10%);
+  border-color: $action-color;
+}
+
+/* Logged and local options act like submenus */
+#logged_in_bar{
+  @include respond-min($main_menu-mobile_menu_cutoff) {
+    top: 0;
+  }
+
+  a {
+    @extend %menu-item;
+    background-color: transparent;
+    font-weight: normal;
+    color: $color_white;
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: transparent;
+    }
+  }
+  #logged_in_links {
+    a {
+      font-weight: normal;
+    }
+  }
+}
+
+/* LANGUAGE SWITCHER */
+#user_locale_switcher {
+  background-color: $color_primary;
+  @include respond-min($main_menu-mobile_menu_cutoff) {
+    background-color: transparent;
+  }
+  left: 344px;
+}
+
+/* Dropdown list for switching locale */
+.locale-list {
+  border-bottom: 0;
+  @include respond-min($main_menu-mobile_menu_cutoff) {
+    position: absolute;
+    left: ($logo-width + 40px);
+    top: 2.2em;
+    right: auto;
+  }
+  .locale-list-trigger {
+    margin-bottom: 0;
+    color: $color_white;
+    color: transparentize($color_white, 0.8);
+    @include respond-min($main_menu-mobile_menu_cutoff) {
+      margin-top: 0;
+      border: 1px solid desaturate(lighten($color_primary, 5%), 5%);
+      border-radius: 3px;
+      color: $link-color;
+      padding: 0;
+    }
+  }
+}
+
+.locale-list-trigger .current-locale {
+  position: relative;
+  z-index: 999;
+  border-radius: 3px;
+  color: $color_white;
+  @include respond-min($main_menu-mobile_menu_cutoff) {
+    padding: 0.66em 2em 0.66em 0.66em;
+  }
+}
+
+.locale-list-trigger .current-locale:after {
+  display: block;
+  position: absolute;
+  content: '';
+  right: 10px;
+  top: 12px;
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  @include ie8 {
+    border-top: 5px solid $color_white;
+  }
+  border-top: 5px solid transparentize($color_white, 0.6);
+}
+
+.locale-list-trigger .current-locale,
+.locale-list .available-languages a {
+  display: block;
+  cursor: pointer;
+  font-weight: normal;
+  @include respond-min($main_menu-mobile_menu_cutoff) {
+    font-size: 0.8125em;
+    line-height: 1em;
+  }
+}
+
+.locale-list .available-languages {
+  display: none;
+  padding: 0;
+  margin-bottom: 0;
+  margin-top: 0;
+  font-size: 0.8125em;
+  @include respond-min($main_menu-mobile_menu_cutoff) {
+    position: absolute;
+    top: 2em;
+    left: 0;
+    z-index: 1000;
+    border-radius: 3px;
+    font-size: 1em;
+    min-width: 100%;
+  }
+
+}
+
+.locale-list li {
+  list-style-type: none;
+  border-bottom: 1px solid desaturate(lighten($color_primary, 3%), 5%);
+  @include respond-min($main_menu-mobile_menu_cutoff) {
+    border-bottom-color: $color_neutral_dark;
+    display: block;
+  }
+  &:last-child {
+    @include respond-min($main_menu-mobile_menu_cutoff) {
+      border-bottom: 0;
+      a {
+        border-bottom-right-radius: 3px;
+        border-bottom-left-radius: 3px;
+      }
+    }
+  }
+}
+
+.locale-list .available-languages a,
+.locale-list .available-languages a:link,
+.locale-list .available-languages a:visited {
+  display: block;
+  background-color: $color_primary;
+  padding: 0.66em 1em;
+  width: 100%;
+  text-decoration: none;
+  color: transparentize($color_white, 0.2);
+  @include ie8 {
+    color: $color_white;
+  }
+  @include respond-min($main_menu-mobile_menu_cutoff) {
+    background-color: lighten($color_neutral_dark, 6%);
+  }
+  transition: background-color 0.5s ease-out;
+}
+
+.locale-list .available-languages a:hover,
+.locale-list .available-languages a:focus {
+  border-bottom: none;
+  background-color: darken($color_primary, 5%);
+  @include respond-min($main_menu-mobile_menu_cutoff) {
+    background-color: $color_neutral_dark
+  }
+  color: $color_white;
+
+}
+
+/* JS interactivity */
+.no-js .locale-list .available-languages,
+.locale-list.active .available-languages {
+  display: block;
+}
+
+.locale-list.active .current-locale {
+  background-color: $color_primary;
+  color: $color_white;
+  border-color: $color_primary;
+  @include respond-min($main_menu-mobile_menu_cutoff) {
+    background-color: lighten($color_neutral_dark, 6%);
+    border-bottom: 1px solid lighten($color_neutral_dark, 2%);
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+}
+
+.locale-list.active .current-locale:after {
+  @include ie8 {
+    border-top-color: $color_white;
+  }
+  border-top-color: transparentize($color_white, 0.6);
+}
+
+
+.locale-list.active .locale-list-trigger {
+  border-color: transparent;
+  @include respond-min($main_menu-mobile_menu_cutoff) {
+    border-color: $color_neutral_dark;
+  }
+}
+
+
+#banner {
+
+  /* Hide the greeting on smaller devices */
+  .greeting {
+    display: none;
+  }
+
+  .rsp_menu_button{
+    position: absolute;
+    top: 5px; // vertically centre the button in the header
+    right: 4px; // 15px for margin minus 9 for background offset
+    @extend .image-replacement;
+    background-image: image-url('hamburger.png');
+    background-repeat: no-repeat;
+    background-position: center 10px;
+    background-size: 28px 26px;
+    width: 44px;
+    height: 38px;
+    padding: 0;
+    /* Make sure clickable area covers image */
+    a {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &:target {
+    .rsp_menu_button {
+      top: 5px;
+      right: 4px;
+    }
+  }
+
+  /* Pad evenly top and bottom on smaller devices */
+  #logo_wrapper{
+
+    @include respond-min( $main_menu-mobile_menu_cutoff ){
+      @include lte-ie7 {
+        padding-bottom: 2em;
+      }
+    }
+    @media(max-width: $main_menu-mobile_menu_cutoff ){
+      padding: 0.5em 0 0.5em 0.9375em;
+      img {
+        height: 30px;
+      }
+    }
+  }
+
+}
+
+
+/* Footer */
+#footer {
+  background-color: $color_neutral_dark;
+  color: darken($color_neutral_light, 10%);
+  a {
+    text-decoration: none;
+    color: $color_white;
+    &:hover,
+    &:active,
+    &:focus {
+      color: lighten($color_primary, 10%);
+      text-decoration: underline;
+    }
+  }
+}
+
+.footer__about {
+  h2 {
+    color: $color_white;
+  }
+}
+
+.footer__final {
+  .row {
+    border-top: 1px solid lighten($color_neutral_dark, 6%);
+  }
+}
+
+/* Request page */
+.request-header__action-bar__actions {
+  .action-menu__button {
+    @include button-secondary();
+    &:after {
+      border-color: #a5a5a5 transparent transparent transparent;
+      right: 7%;
+    }
+  }
+
+  .action-bar__follow-button {
+    .track__action {
+      @include button-primary();
+      @include follow-button();
+    }
+  }
+
+  .action-bar__follower-count {
+    @include follower-count();
+  }
+}
+
+div.correspondence {
+  background-color: $color_white;
+  box-shadow: 0 2px 2px transparentize($color_black, 0.8);
+  border: none;
+  border-radius: 5px;
+  margin-bottom: 2em;
+}
+
+.incoming.correspondence {
+  border-top: 8px solid $color_secondary;
+  .correspondence_text a {
+    color: $color_secondary;
+  }
+  a.link_to_this {
+    background-color: $color_secondary;
+  }
+}
+
+.outgoing.correspondence {
+  border-top: 8px solid $color_primary;
+  a.link_to_this {
+    background-color: $color_primary;
+  }
+}
+
+a.correspondence__header__date,
+a.correspondence__header__date:visited {
+  color: #777;
+}
+
+.describe_state_form input[type="radio"] + label {
+  display:inline;
+}
+
+a.link_to_this {
+  background-image: image-url('link-icon.png');
+  @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
+     background-image:image-url('link-icon@2.png');
+  }
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 14px;
+  border-radius: 50%;
+  height: 20px;
+  width: 20px;
+}
+
+#link_box {
+  font-family: $font-family;
+  border-radius: 0;
+  border: 1px solid $color_neutral_dark;
+  .close-button {
+    background-color: $color_secondary;
+    float: right;
+  }
+}
+
+.describe_state_form {
+  padding: 0;
+
+  form{
+    background-color: desaturate(lighten($action-color, 30%),10%);
+    border-color: $action-color;
+    h2 {
+      margin-top: 0;
+    }
+    hr {
+      border-color: $action-color;
+    }
+  }
+}
+
+.sidebar {
+  .new-request-cta {
+    .new-request__make-new-requests {
+      @include button-primary();
+    }
+  }
+}
+
+.feed_link_sidebar .link_button_green {
+  @include button-primary();
+}
+
+.report-this-request {
+  @include button-secondary();
+  color: $color_black !important;
+  /* Using !important here as a temporary fix for a bad declaration (a:link)
+    in Alaveteli core. When this is fixed it can be removed.
+  */
+}
+
+/* Status lines and icons */
+.icon_waiting_classification,
+.icon_waiting_response,
+.icon_waiting_clarification,
+.icon_requires_admin,
+.icon_waiting_response_overdue,
+.icon_gone_postal,
+.icon_error_message,
+.icon_internal_review,
+.icon_user_withdrawn {
+  color: $status-pending;
+}
+
+.icon_attention_requested,
+.icon_not_held,
+.icon_waiting_response_very_overdue,
+.icon_failed,
+.icon_rejected {
+  color: $status-failure;
+}
+
+.icon_successful,
+.icon_partially_successful {
+  color: $status-success;
+}
+
+.request-status-message {
+  color: $color_black;
+}
+
+/* Attachments*/
+
+.view_html_prefix {
+  font-family: $font-family;
+  background-color: $color_primary;
+  color: transparentize($color_white, 0.2);
+  @include ie8 {
+    color: $color_white;
+  }
+  a {
+    color: $color_white;
+  }
+  .view_html_logo, .view_html_description {
+    padding-top: 1em;
+  }
+}
+
+#header_right {
+  .link_button_green {
+    @include button-secondary;
+  }
+}
+
+/* User page */
+#user_photo_on_profile {
+  img, #set_photo {
+    margin-top:0.5em;
+  }
+}
+
+/* Help pages */
+
+dt {
+  font-weight: 700;
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
+    font-size: 2em;
+    line-height: 1.1em;
+  }
+}
+
+/* Front page */
+/* Drop the extract indentation on small screens */
+#frontpage_examples {
+  .excerpt {
+    padding: 0.2em 0 0 0;
+    @include respond-min( $main_menu-mobile_menu_cutoff ){
+      padding: 0 0 0 2em;
+    }
+  }
+  p strong a {
+    @include button-secondary;
+  }
+}
+
+/* How it works section */
+.steps__list {
+  li {
+    @include respond-min( $main_menu-mobile_menu_cutoff ){
+      width: 33.3333%;
+      margin-left: 0 !important;
+    }
+  }
+}
+
+.steps__step-box {
+  background-color: $color_white;
+  padding: 2em;
+  box-shadow: 0 1px 2px transparentize($color_black, 0.75);
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
+    min-height: 11em;
+  }
+  p {
+    line-height: 1.5em;
+    color: $color_neutral_dark;
+  }
+}
+
+.steps__step-number {
+  height: 3.5em;
+  width: 3.5em;
+  background-color: $color_primary;
+  box-shadow: 0 1px 2px transparentize($color_black, 0.75);
+  padding: 1em;
+  border-radius: 100%;
+  color: $color_white;
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
+    left: 50%;
+    margin-left: -1.75em;
+    bottom: -1em;
+    top: auto;
+  }
+}
+
+.learn-more-foi {
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
+    margin-top: 3em;
+  }
+  a {
+    @include button-secondary;
+  }
+}
+
+.learn-more-foi {
+  @include respond-min( $main_menu-mobile_menu_cutoff ){
+    margin-top: 3em;
+  }
+  a {
+    @include button-secondary;
+  }
+}
+
+.latest-requests {
+  .button-secondary {
+    @include button-secondary;
+  }
+}
+
+/* Authority page */
+.authority__header__action-bar {
+  .action-bar__follow-button {
+    .track_action,
+    .link_button_green {
+      @include button-secondary();
+      @include follow-button();
+    }
+  }
+
+  .action-bar__follower-count {
+    @include follower-count();
+  }
+}
+
+.authority__body__sidebar form input[type=submit] {
+  @include button-secondary();
+}
+
+.homepage-hero {
+  background-color: $color_neutral_dark;
+  background-image: image-url('homepage-background-small.jpg');
+  background-repeat: no-repeat;
+  background-position: center top;
+  background-size: cover;
+  color: $color_white;
+  padding: 2em 0 5em;
+  position: relative;
+  @include respond-min($main_menu-mobile_menu_cutoff) {
+    padding: 5em 0 8em;
+    background-image: image-url('homepage-background.jpg');
+  }
+
+  a {
+    color: $color_secondary;
+    &:hover,
+    &:active,
+    &:focus {
+      color: $color_white;
+    }
+  }
+
+  .intro__title {
+    color: $color_white;
+    text-shadow: 0 1px 2px transparentize($color_black, 0.7);
+  }
+
+  .new-request__content {
+    background-color: $color_neutral_dark;
+    border-radius: 5px;
+    padding: 1.888888889em;
+  }
+
+  .new-request__title {
+    color: $color_white;
+    font-size: 1.4375em;
+    margin: 0 0 0.5em;
+  }
+
+  .new-request__description {
+    color: transparentize($color_white, 0.2);
+    @include ie8 {
+      color: $color_white;
+    }
+  }
+  .new-request__make-new-requests {
+    @include button-base;
+    background-color: desaturate(darken($color_secondary, 10%), 5%);
+    color: $color_white;
+    &:hover,
+    &:active,
+    &:focus {
+      background-color: darken($color_secondary, 20%);
+    }
+  }
+}
+
+// User menu
+.pro-pill {
+  background-color: desaturate(darken($color_secondary, 10%), 5%);
+}
+
+#logged_in_bar {
+  .logged-in-menu a,
+  .logged-in-menu__signout-link a {
+    color: $link-color;
+  }
+}
+
+/* Reset the logo, as we dont like image logos */
+.site-title__logo {
+  background-image: unset;
+  overflow-hidden: unset;
+  margin: unset;
+  padding-top: 10px;
+  margin-right: 40px;
+  width: unset;
+  text-indent: unset;
+  background-size: unset;
+
+  font-size: 2em;
+  font-weight: 400;
+  color: #fff!important;
+  height: 50px;
+}
+
+h1 {
+  font-size: 2.2em;
+}
+
+h2 {
+  font-size: 1.8em;
+}
+
+.request_listing .head, .body_listing .head, .user_listing .head {
+  font-size: 1.5em;
+}
+
+.homepage-hero {
+  background-repeat: repeat;
+}
+
+.footer {
+  padding: 5em 0 8em;
+  background-image: url(/assets/homepage-background.jpg);
+}
+
+/* logged in menu */
+.js-loaded .navigation .logged-in-menu {
+  width: auto;
+  background-color: darken($color_primary, 10%);
+}
+
+.dashboard-profile__name, .dashboard-profile__email {
+  color: #ccc;
+}