Stevenage Home page styles

6 files changed, 1858 insertions, 27 deletions

diff --git a/web/cobrands/stevenage/_colours.scss b/web/cobrands/stevenage/_colours.scss
index 62bb6d6ad..72027c302 100644
--- a/web/cobrands/stevenage/_colours.scss
+++ b/web/cobrands/stevenage/_colours.scss
@@ -1,9 +1,9 @@
 /* COLOURS */
 
 
-$primary: #FFD000;
-$primary_b: #F3B11E;
-$primary_text: #222;
+$primary: #066539;
+$primary_b: lighten($primary, 20%);
+$primary_text: #333;
 
 $contrast1: #00BD08;
 $contrast1_dark: #4B8304;
diff --git a/web/cobrands/stevenage/_council_header.scss b/web/cobrands/stevenage/_council_header.scss
index b2b207c87..c561c0665 100644
--- a/web/cobrands/stevenage/_council_header.scss
+++ b/web/cobrands/stevenage/_council_header.scss
@@ -19,6 +19,7 @@
     padding: 0;
     font-size:62.5%;
     max-width: 100%;
+    background-color: #fff;
     
         #stv-everything {
       /*font-size: 125%;*/
@@ -561,6 +562,7 @@
     #stv-menu #stv-primaryNavigation li {
       display: block;
       float: left;
+      margin: 0;
         font-size: 1.5em;
         height: 2em;
         overflow: visible;
diff --git a/web/cobrands/stevenage/_fmsbase.scss b/web/cobrands/stevenage/_fmsbase.scss
new file mode 100644
index 000000000..3221301c6
--- /dev/null
+++ b/web/cobrands/stevenage/_fmsbase.scss
@@ -0,0 +1,1537 @@
+/* HEADINGS and TYPOGRAPHY */
+
+body {
+  font-family: 'PTSansRegular',PT Sans,Verdana,Arial,Sans-Serif;
+  margin:0;
+  font-size:1em;
+  line-height:1.5;
+  color: #222;
+  background-color: #fff;
+}
+
+
+p {
+  font-size: 1em;
+  font-weight: normal;
+  margin:0 0 1em 0;
+}
+
+small{
+  font-family: 'PTSansRegular',PT Sans,Verdana,Arial,Sans-Serif;
+  font-style: italic;
+  font-size: 0.8125em;
+  line-height: 1.2307em;
+}
+
+h1 {
+  font-family: 'PTSansCaptionRegular', PT Sans Caption, Verdana, Arial, Sans-Serif;
+  font-size: 2em;
+  line-height: 1em;
+  font-weight: normal;
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+h1#reports_heading span {
+  display: none;
+}
+h1#reports_heading a {
+  display: block;
+  font-size: 50%;
+}
+
+h2 {
+  font-family: 'PTSansCaptionRegular', PT Sans Caption, Verdana, Arial, Sans-Serif;
+  font-size: 1.5em; /*24px*/
+  line-height: 1.3333em; /*32px*/
+  font-weight: normal;
+  margin-top: 1.333333333em; /*32px*/
+  margin-bottom: 0.666666666em; /*16px*/
+}
+
+h3 {
+  font-size: 1.25em;
+  line-height: 1.20em;
+  margin-top: 1.2em;
+  margin-bottom: 0.8em;
+  font-weight: normal;
+}
+
+h4 {
+  font-size: 1em;
+  font-weight: normal;
+  margin-bottom: 1em; 
+}
+
+// default list styles
+ul, ol {
+  font-size: 1em;
+  margin-bottom: 2em;  
+  margin-left: 2em;
+  padding:0;
+}
+
+li{
+  margin-bottom: 0.5em;
+}
+
+ul li{
+  list-style: square;
+}
+
+ol li {
+  list-style:decimal;
+}
+
+// lets you have a traditional ol but with nicely styled numbers
+// for older browsers it just falls back to the normal ol
+ol.big-numbers {
+  padding: 0;
+  margin: 0;
+  counter-reset: li; // reset counter to be 'li' instead of a number
+  > li {
+    position: relative;
+    list-style: none;
+    padding:0 0 0 2.5em;
+    margin-bottom:2em;
+    &:before {
+      content: counter(li); // set the content to be whatever the 'li' var is
+      counter-increment: li; // add to the counter var
+      position: absolute;
+      left: 0;
+      top:-0.2em;
+      color:#ccc;
+      line-height:1;
+      font: {
+        font-family: 'PTSansRegular',PT Sans,Verdana,Arial,Sans-Serif;
+        weight:bold;
+        size:2.5em;
+      }
+    }
+  }
+}
+
+dl {
+  margin: 0;
+  padding: 0;
+  dt {
+    font-size: 1em;
+    line-height: 1.5em;
+    font-weight: bold;
+  }
+  dd {
+    font-weight: 1em;
+    line-height: 1.5em;
+    margin:0 0 1em 0;
+  }
+}
+
+blockquote {
+  p:before {
+    content: '“';
+  }
+  p:after {
+    content: '”';
+  }
+}
+
+pre {
+  font-family: monospace;
+}
+
+img {
+  //do this otherwise IE will just not display
+  //any img without a height defined
+  height:auto;
+  max-width: 100%;
+}
+// So that map popups display correctly
+#popup img {
+    max-width: none;
+}
+
+select, input, textarea {
+  font-size: 99%;
+  max-width: 95%;
+}
+.ie7 {
+    select, input, textarea {
+        max-width: none;
+    }
+}
+
+// To deal with bug from drop-down being wider than holder
+select {
+  width: 100%;
+}
+
+// links
+a,
+a:visited {
+  text-decoration:none;
+  color:#0BA7D1;
+  &:hover,
+  &:active {
+    text-decoration:underline;
+    color:#0D7CCE;    
+  }
+}
+
+// custom type
+.small-print {
+  @extend small;
+  margin-bottom: 1.2307em;
+  color:#666666;
+}
+.meta{
+  color:#555555;
+  font-style: italic;
+  margin-bottom: 0px;
+}
+.meta-2{
+  font-family: 'PTSansRegular',PT Sans,Verdana,Arial,Sans-Serif;
+  color:#666666;
+  font-style: italic;
+  font-size: 0.75em;
+}
+
+h4.static{
+  font-family: 'PTSansRegular',PT Sans,Verdana,Arial,Sans-Serif;
+  text-transform: uppercase;
+  font-size: 0.875em;
+  line-height: 1.71428em;
+  color:#666;
+  margin-top: 2em;
+}
+h4.static-with-rule{
+  @extend.static;
+  background: #f6f6f6;
+  border-top: 0.25em solid $primary;
+  margin-bottom:0.25em;
+  padding: 0.5em 1em;
+}
+
+/* FORMS */
+
+// input placeholders, these need to be on separate lines as if the browser
+// can't understand a selector it will invalidate the whole line.
+::-webkit-input-placeholder {
+  color: #666666;
+  font: {
+    style:italic;
+    size:0.9375em;
+  }
+}
+:-moz-placeholder {
+  color:#666666;
+  font: {
+    style:italic;
+    size:0.9375em;
+  }
+}
+:-ms-placeholder {
+  color:#666666;
+  font: {
+    style:italic;
+    size:0.9375em;
+  }
+}
+//this only gets used when the browser doesn't support @placeholder
+.placeholder {
+  color:#666666;
+  font: {
+    style:italic;
+    size:0.9375em;
+  }
+}
+
+// wrap anything inside the form in a fieldset to give
+// us the right spacing
+fieldset {
+  margin: 1em;
+}
+
+input[type=text],
+input[type=password],
+input[type=email],
+input[type=file],
+textarea {
+  @include box-sizing(border-box);
+  width: 100%;
+  // adjust so the sides line up
+  padding: 0.5em;
+}
+.ie7 {
+    input[type=text],
+    input[type=password],
+    input[type=email],
+    input[type=file],
+    textarea {
+        max-width: 95%;
+    }
+    // In order to work around the IE7 specific issue of inheriting left margins
+    // http://techblog.willshouse.com/2009/07/12/ie6ie7-form-element-margin-inheritance-bug/
+    fieldset > input[type=text],
+    fieldset > input[type=password],
+    fieldset > input[type=email],
+    fieldset > textarea {
+        margin-left: -1em;
+    }
+}
+
+textarea {
+  border: 0.125em solid #888888;
+  @include border-radius(0.25em);
+  display: block;
+  font-size: 1em;
+  line-height: 1.5em;
+  font-family: 'PTSansRegular',PT Sans,Verdana,Arial,Sans-Serif;
+  min-height:8em;
+}
+
+input[type=text],
+input[type=password],
+input[type=email],
+input[type=file] {
+  border: 0.125em solid #888888;
+  @include border-radius(0.25em);
+  display: block;
+  font-size: 1em;
+  line-height: 1em;
+}
+input[type=file] {
+  margin-bottom:1em;
+}
+
+label{
+  display: block;
+  margin-top: 1.25em;
+  margin-bottom: 0.25em;
+  font-weight: bold;
+  &.inline{
+    display: inline;
+    padding: 0 2em 0 1em;
+    font-weight: normal;
+  }
+}
+
+// grey background, full width box
+.form-box {
+  margin: 0 -2em 0.25em -2em;
+  background:#eeeeee;
+  padding:1em 2em 1em 2em;
+  >input[type=text] {
+    margin-bottom:1em;
+  }
+  .title {
+    font-size:1.25em;
+    margin:0.5em 0;
+  }
+  h5 {
+    margin:0 0 1em;
+    font: {
+      size:1.125em;
+      weight:normal;
+    }
+    strong {
+      font-size:2em;
+      margin-right:0.25em;
+    }
+  }
+}
+// IE6 doesn't extend the grey box back with the above negative margins, and
+// the password box falls off screen for some reason. Just have boring margins,
+// it looks okay.
+.ie6 .form-box {
+    margin: 0 0 0.25em 0;
+    padding: 1em;
+}
+// Prevent grey displaying oddly by giving it a width, and stop odd left margin issue
+.ie7 .form-box {
+    width: 100%;
+    > input[type=text] {
+        margin-left: 2em;
+    }
+}
+
+.form-txt-submit-box {
+  min-height:3em;
+  input[type=password],
+  input[type=text],
+  input[type=email] {
+    width: 65%;
+    float:left;
+  }
+  input[type=submit] {
+    float:right;
+    width:28%;
+    margin-right:0.25em;
+    padding-top:0.7em;
+    padding-bottom:0.6em;
+  }
+}
+
+.checkbox-group {
+  margin:1em 0;
+}
+
+
+// form errors
+div.form-error,
+p.form-error {
+  @include inline-block;
+  background:#ff0000;
+  color:#fff;
+  padding:0 0.5em;
+  @include border-radius(0.25em 0.25em 0 0);
+  a {
+    color: white;
+    text-decoration: underline;
+  }
+  a:hover {
+    text-decoration: none;
+  }
+}
+
+input.form-error,
+textarea.form-error {
+  border-color:#ff0000;
+  @include border-radius(0 0.25em 0.25em 0.25em);
+}
+
+ul.error {
+  background:#ff0000;
+  color:#fff;
+  padding:0 0.5em;
+  @include border-radius(0.25em);
+}
+
+// don't display valid error boxes as now the page jump
+// won't be until the user submits, which is fine
+div.label-valid,
+p.label-valid {
+  display:none !important;
+  visibility: hidden;
+}
+
+
+
+/*** LAYOUT ***/
+
+// Padding creates page margins on mobile
+.container{
+  padding: 0 1em 1em;
+}
+
+// Use full width to reverse .container margins
+.full-width {
+  margin: 0 -1em;
+}
+
+// #site-header creates grey bar in mobile
+// .nav-wrapper-2 is used on desktop
+#site-header{
+  border-top: 0.25em solid $primary;
+  height: 3em;
+  @include background(linear-gradient(#000, #222 10%, #222 90%, #000));
+  .container {
+    min-height:4em;
+  }
+}
+#site-logo{
+  display: block;
+  width: 175px;
+  height: 40px;
+  top: 0.4em;
+  background: url('data:image/png;base64,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') no-repeat;
+  text-indent: -999999px;
+  position: absolute;
+  z-index:2;
+}
+.ie6 #site-logo {
+  background: url('/cobrands/fixmystreet/images/ie_logo.gif') 0 -5px no-repeat;
+}
+.ie7 #site-logo {
+  background: url('/cobrands/fixmystreet/images/sprite.png') -3px -3px no-repeat;
+}
+
+// this is a skip to nav for mobile users only
+#nav-link {
+  width: 50px;
+  height: 48px;
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAwCAMAAABkKdmIAAAACW9GRnMAAAAFAAADlACdjNY6AAAACXBIWXMAAABIAAAASABGyWs+AAAACXZwQWcAAAF5AAAQZgCwCYXlAAABEVBMVEUAAAAiIiIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAsJAAAAABPQAAAAAAlHgBnVAAAAACSdwAAAAAAAAAaFQAAAAAAAAAAAAAAAACRdgCqigAAAAAAAABHOgDCnwAAAACriwCAaAApIQDOqABIOwCgggBqVwB8ZQDVrgCwkADjuQCafgDftgDetQCqigDrwADHogDGoQDFoAD1yADzxgDyxQDwxAD/0AD///+ZbHkYAAAAWXRSTlMAAAECAwQFBgkLDA0OEBESExQVFxgeHyEkJSkqMTI2Oj0/Q0RHSEpOT1FSVVtmZmxsdX6Kj5ebnp+goaenqKmru7y9vsTY3uPk5OTl5+zs7e7x9PX3+Pr7/fI8qpUAAAABYktHRFoDu6WiAAABMklEQVRIx+3T2VLCMBSA4ZjU1hhpUKgWlaq0VSuutYg7IJuIogKKvv+LSM2AelNOuHCGGf77b7KcBKGwT2AzYej/CIYSPCBEhRKVCILVBJQkVCwIS0NJmglCYhkoycSIINyBEocPiAsl7ljkeypTMhHko9tpD+t0QavUSjcX+bDzy9vSPYj0zg523LDtvaNCD3aWh11ziXMeT64fP0OPX1xbmCVEXdyqwm/sNEWJMr96LXHJb4fLczR1IjWXx83kyv6r3CiLG05VdvpXd9IP5n36XyaStGCiNSS6XYaRsq0LgpnlNyGi6VsMC6IZXlAfLeqBZ2iCIELNbFBpvLQjempUgqxJxb76KdT0/Fw+spzvmVRB6McYlu24ETm2ZfwW/b1pTOeR6Uwj6E8YkxFhjMbuC8zPYpEN6mT7AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDEyLTA1LTAyVDE5OjQ2OjUxKzAxOjAwHHW0eAAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxMi0wNS0wMlQxOTo0Njo1MSswMTowMG0oDMQAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAAAAElFTkSuQmCC') no-repeat;
+  display: block;
+  text-indent: -999999px;
+  position: absolute;
+  right:2em;
+  top:-2px;
+  &:hover {
+    top:2px;
+  }
+}
+
+
+#main-nav{
+  ul{
+    @include list-reset-soft;
+    li{
+      a, span {
+        display: block;
+        padding: 0.5em 1em;
+        background:#f6f6f6;
+        color:#333;
+        font-size: 1.25em;
+        border-bottom: 0.25em solid #333;
+      }
+      a:hover, span.hover {
+        background:  #333;
+        color:#fff;
+        text-decoration: none;
+      }
+      span {
+        background-color: #ccc;
+      }
+    }
+    &#mysoc-menu{
+      li {
+        a {
+          color: $primary_text;
+          background: $primary;
+          &#mysoc-logo {
+            background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIkAAAAyCAMAAABf9whNAAAACW9GRnMAAADwAAAAJgAMZizzAAAACXBIWXMAAABIAAAASABGyWs+AAAACXZwQWcAAAF5AAAQZgCwCYXlAAAANlBMVEUAAAAiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiL///90WH2CAAAAEHRSTlMADx8vP09fb3+Pn6+/z9/v+t8hjgAAAAFiS0dEEeK1PboAAAGqSURBVFjD7ZbNjtwgEAY/oIE2YKj3f9ocPDOZ3eN6FCUKdWsJQ+H+saXNZrPZbDabzf/GovwdIhH8LUzHn/PqI32Jcw1v0fjidQf30EZPqmMURXeT5F5kbYwqSQbeWpAU6xg961pT+mgm+WR4Ke6SzG9JwQRWB6iaTClCzQBLknT0AibZAnCBSx2ALACGQ5JOznsmq1TA82LKIalC6Jwh5seaMGdUWKxiJQpclWVqLNlJsxThUIB6z8Qft3FQgEODrs4qUuj9qoljpAr2euKkmxVIjzrpTBUI90xMGgzJQGrMAEUGrGKQn6c7/HbngT1MMqRO1wdNDA6WpNgW5Ld38s1kuLt7fPbO5Lg7Z76ZaLJoV3WAa6wsxbmiyrMMruyMVxc3SaqvAv+YSQWS1Fs9oAi8jQKmsGB4zwJXgdO9VWnAkaUAHJ81CTAkLYAm5ZbB/QhSmm9d7Ff7Splr5jaI90zMgpQsScHsGmRFUsheH6O1jecR5m5BZlFSzF5NkpJ7lMJ85etDlPWjHdMJ6aMiFdYPdgzw6Q90Yvwo2+fM+3dps9lsNpvNP8gvi7UYry9B6TcAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTItMDUtMDJUMTk6NDY6NTErMDE6MDAcdbR4AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDEyLTA1LTAyVDE5OjQ2OjUxKzAxOjAwbSgMxAAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAASUVORK5CYII=');
+            background-repeat:no-repeat;
+            text-indent:-999999px;
+          }
+        }
+      }
+    }
+  }
+}
+.ie6 #main-nav ul#mysoc-menu li a#mysoc-logo {
+  background: url('/cobrands/fixmystreet/images/ie_mysoc_logo.gif') center no-repeat;
+}
+.ie7 #main-nav ul#mysoc-menu li a#mysoc-logo {
+  background: url('/cobrands/fixmystreet/images/sprite.png') -240px -38px no-repeat;
+}
+
+//defines where the table caption is (login stuff on mob, nav menu on desktop)
+.wrapper {
+  width:100%;
+  display:table;
+  caption-side:bottom;
+}
+// this is the user's logged in details or the login link etc
+#user-meta {
+  p {
+    position: relative;
+    color: $primary_text;
+    background: $primary;
+    padding:1em 6em 1em 1em;
+    a {
+      position: absolute;
+      right:1em;
+      @include inline-block;
+      text-transform:uppercase;
+      font-size:0.75em;
+      background:#333;
+      padding:0.25em 0.75em;
+      color:#fff;
+      @include border-radius(0.25em);
+    }
+  }
+}
+
+
+// #key-tools is the list that's pulled out an stick to the bottom of the page of desktop, below is mostly just aesthetic
+.shadow-wrap {
+  @extend .full-width;
+  ul#key-tools{
+    @include list-reset-soft;
+    margin-bottom: 1em;
+    display: table;
+    width:100%;
+    li{
+      display: table-cell;
+      vertical-align: bottom;
+      text-align: center;
+      border-right:0.25em solid #fff;
+      &:last-child {
+        border-right:none;
+      }
+      input[type=submit] {
+          width: 100%;
+          border: none;
+      }
+      a, input[type=submit] {
+        display: block;
+        background-color: #f5f5f5;
+        background-repeat: no-repeat;
+        color:#333;
+        padding:4em 2em 1em 2em;
+        text-transform:uppercase;
+        font: {
+          size:0.6875em;
+          font-family: 'PTSansRegular',PT Sans,Verdana,Arial,Sans-Serif;
+        }
+        &:hover, &.hover {
+          text-decoration:none;
+          background-color:#333;
+          color:#fff;
+        }
+        &.abuse {
+          background-image:url('/cobrands/fixmystreet/images/sprite.png');
+          background-position:center -2424px;
+        }
+        &.feed {
+          background-image:url('/cobrands/fixmystreet/images/sprite.png');
+          background-position:center -2563px;
+        }
+        &.chevron {
+          background-image:url('/cobrands/fixmystreet/images/sprite.png');
+          background-position:center -2716px;
+        }
+        &.hover {
+          background-image:url('/cobrands/fixmystreet/images/sprite.png');
+          background-position:center -2064px;
+        }
+      }
+    }
+  }
+}
+
+//because display:table doesn't work we float
+.ie6, .ie7 {
+  .shadow-wrap {
+    ul#key-tools{
+      background:#f5f5f5;
+      li{
+        float:left;
+        a {
+          padding-left:1.5em;
+          padding-right:3em;
+        }
+      }
+    }
+  }
+}
+.ie6 .shadow-wrap ul#key-tools li a {
+  &.abuse {
+    background-image:url('/cobrands/fixmystreet/images/ie_key_tools_sprite.gif');
+    background-position: right 0px;
+  }
+  &.feed {
+    background-image:url('/cobrands/fixmystreet/images/ie_key_tools_sprite.gif');
+    background-position: right -58px;
+  }
+  &.chevron {
+    background-image:url('/cobrands/fixmystreet/images/ie_key_tools_sprite.gif');
+    background-position: right -116px;
+  }
+  &:hover {
+    background-image:url('/cobrands/fixmystreet/images/ie_key_tools_sprite_dark.gif');
+  }
+}
+
+
+//footer blocks
+#footer-mobileapps {
+  @extend .full-width;
+  padding:1em;
+  h4 {
+    margin:0;
+  }
+  ul {
+    @include list-reset-soft;
+    li {
+      border-bottom:1px solid #AFAFAF;
+      &:last-child {
+        border-bottom:none;
+      }
+      a {
+        display:block;
+        padding:0.5em 0;
+      }
+    }
+  }
+}
+
+#footer-help {
+  ul {
+    @include list-reset-soft;
+    li {
+      border-bottom:1px solid #AFAFAF;
+      &:last-child {
+        border-bottom:none;
+      }
+      h4 {
+        margin:0.75em 0 0.25em 0;
+      }
+      p {
+        font-size:0.75em;
+      }
+    }
+  }
+}
+
+
+
+/*BUTTONS*/
+
+// Default style set for buttons, inputs and .btn class. Red and green class available.
+
+button, input[type=submit],.btn{
+  @include button-reset;
+}
+
+.green-btn,
+button.green-btn,
+input.green-btn{
+  @include button-reset(#9FDE23, #7FB900, #5B9700, #fff, #9FDE23, #7FB900, #5B9700, #fff);
+}
+
+.red-btn,
+button.red-btn,
+input.red-btn{
+  @include button-reset(#FF0038, #BF002A, #80001C, #fff, #FF0038, #BF002A, #80001C, #fff);
+}
+
+.final-submit,
+input.final-submit {
+  margin:1em 0.5em;
+  float:right;
+}
+
+.button-right,
+.button-left,
+a.button-right,
+a.button-left {
+  @include inline-block;
+  cursor:pointer;
+  font-size: 1em;
+  line-height: 1;
+  margin:0;
+  border:1px solid #999;  
+  color:#333;
+  background: #eee;
+  @include border-radius(4px);
+  &:hover{
+    color:#fff;
+    background:#777;
+    text-decoration: none;
+    border:1px solid #666;  
+  }
+}
+.button-right,
+a.button-right,
+:hover.button-right,
+a:hover.button-right {
+  padding:1em 3em 1em 1em;
+  background-image: url('/cobrands/fixmystreet/images/sprite.png');
+  background-repeat:no-repeat;
+  background-position:right -686px;
+}
+
+.button-left,
+a.button-left,
+:hover.button-left,
+a:hover.button-left {
+  padding:1em 1em 1em 3em;
+  background-image: url('/cobrands/fixmystreet/images/sprite.png');
+  background-repeat:no-repeat;
+  background-position:-18px -802px;
+}
+
+.big-green-banner {
+  position: relative;
+  z-index:1000;
+  top:-1.75em;
+  background: $contrast1;
+  color: #fff;
+  padding:1em;
+  text: {
+    transform:uppercase;
+    align:center;
+  }
+  font-size:0.875em;
+  &:before {
+    content: "";
+    left:-0.5em;
+    top:0;
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-left: 0.5em solid transparent;
+    border-bottom: 0.5em solid $contrast1_dark;
+  }
+}
+
+.banner {
+  position: relative;
+  z-index:1100;
+  p {
+    position: absolute;
+    top:-1.95em;
+    right:0;
+    @include inline-block;
+    font-size:0.6875em;//11px
+    line-height:1em;
+    padding:0.5em 1em;
+    margin:0;
+    color:#1a1a1a;
+    background: #ccc;
+    text: {
+      transform:uppercase;
+      align:center;
+    }
+    &:before {
+      content: "";
+      left:-0.5em;
+      top:0;
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-left: 0.5em solid transparent;
+      border-bottom: 0.5em solid #888;
+    }
+    &#fixed {
+      color:#fff;
+      background: $contrast1;
+      &:before {
+        border-bottom: 0.5em solid $contrast1_dark;
+      }
+    }
+  }
+}
+
+/*OTHER*/
+
+.plain-list {
+  @include list-reset-soft;
+  li {
+    margin-bottom:1em;
+  }
+}
+
+.issue-list{
+  margin: 0 0 1em 0;
+  padding: 0;
+  border-bottom: 0.25em solid $primary;
+  li{
+    list-style: none;
+    background: #f6f6f6;
+    margin: 0.25em 0 0 0;
+    padding: 0.5em 1em;
+    display:block;
+    .update-wrap {
+      display:table;
+      width:100%;
+      .update-text,
+      .update-img {
+        display:table-cell;
+        vertical-align:top;
+        p {
+          margin-bottom: 0.5em;
+        }
+      }
+      .update-img {
+        text-align:right;
+        img {
+          margin:-0.5em -1em 0 0.5em;
+          height:auto;
+        }
+      }
+    }
+  }
+}
+//display:table fixes
+.ie7, .ie7 {
+  .issue-list li .update-wrap {
+    .update-text {
+      float:left;
+      width:19em;
+    }
+    .update-img {
+      float:right;
+    }
+  }
+}
+
+.issue-list-a {
+  margin: 0 0 1em 0;
+  padding: 0;
+  border-bottom: 0.25em solid $primary;
+  li {
+    list-style: none;
+    margin:0;
+    padding:0;
+      margin: 0.25em 0 0 0;
+      /* see note below about this */
+      display:table;
+      background: #f6f6f6;
+      color:#222222;
+      width:100%;
+      &:hover {
+        text-decoration:none;
+        color:#222222;
+        background:#e6e6e6;
+      }
+      a {
+          color:#222222;
+      }
+      a:hover {
+          color:#222222;
+          background:#e6e6e6;
+          text-decoration: none;
+      }
+      .text {
+        /* this is and the display:table above are required otherwise
+           on iphone the rows end up being slightly wider than the screen */
+        display: table-cell;
+        width: 100%;
+        vertical-align:top;
+        padding: 0px 0px 0px 1em;
+        .img {
+          width: 90px;
+          float: right;
+          height:auto;
+        }
+        h4 {
+          padding-right: 1em;
+          padding-top: 0.25em;
+          margin:0;
+        }
+        small {
+          color:#666;
+          display: block;
+          padding-right: 1em;
+          padding-top: 0.25em;
+          padding-bottom: 0.25em;
+        }
+      }
+    >p {
+      margin: 0.25em 0 0 0;
+      padding: 0.5em 1em;
+      background: #f6f6f6;
+    }
+  }
+}
+.list-a {
+  @extend .issue-list-a;
+  a {
+    padding:0.5em 1em;
+    font-weight:bold;
+  }
+}
+//display:table fixes
+.ie6, .ie7 {
+  .issue-list-a {
+    overflow:hidden;
+    li {
+      clear:both;
+      width:100%;
+      display:block;
+      overflow:hidden;
+      .text {
+        float:left;
+      }
+    }
+  }
+}
+.ie6 .issue-list-a li a {
+  height:5.5em;
+  .img {
+    height:60px;
+  }
+}
+
+// fancybox gallery images have a magnifying glass in the corner
+.update-img {
+  a {
+    @include inline-block;
+    position:relative;
+    span {
+      position:absolute;
+      top:0;
+      right:0;
+      display:block;
+      width:20px;
+      height:20px;
+      opacity: 0.5;
+      background:#fff url(/cobrands/fixmystreet/images/sprite.png) -16px -1098px no-repeat;
+      //hide text - http://nicolasgallagher.com/another-css-image-replacement-technique/
+      font: 0/0 a;
+      color: transparent;
+    }
+    &:hover span {
+      opacity: 1;
+    }
+  }
+}
+//bit of a hack - as we can't use em's, push the span out to the right
+//by how much it would be if the user did not resize the text
+.issue-list li .update-wrap .update-img a span {
+  right:-16px;
+  top:-8px;
+}
+
+.problem-header {
+  margin-bottom:1em;
+}
+.problem-header .update-img {
+    float: right;
+    margin-left: 0.5em;
+    margin-bottom: 0.5em;
+}
+
+// map stuff
+#map_box{
+  @extend .full-width;
+  background: #333;
+  height: 29em;
+  margin-bottom: 1em;
+  overflow: hidden;
+  position: relative;
+  #map {
+    width:100%;
+    height:100%;
+  }
+}
+
+// OpenLayers fix for navigation being top right
+// Left and right so that zoom can be left, pan right.
+#fms_pan_zoom {
+  right: 0.5em !important;
+  top: 0.5em !important;
+  left: 0.5em !important;
+}
+// The left and right of the above causes the navigation to move off-screen left in IE6.
+// XXX Need to check IE7
+.ie6 #fms_pan_zoom {
+  left: auto !important;
+}
+
+// Openlayers map controls (overrides)
+#fms_pan_zoom_panup,
+#fms_pan_zoom_pandown,
+#fms_pan_zoom_panleft,
+#fms_pan_zoom_panright,
+#fms_pan_zoom_zoomin,
+#fms_pan_zoom_zoomout {
+  width:36px !important;
+  height:36px !important;
+  text-indent:-999999px;
+  opacity:0.85;
+  background:url('/cobrands/fixmystreet/images/sprite.png') no-repeat;
+  &:hover {
+    opacity:1;
+  }
+  filter: none !important; // Override OpenLayers PNG handling of the navigation
+}
+
+#fms_pan_zoom_zoomworld {
+  display:none !important;
+  visibility:none !important;
+}
+
+#fms_pan_zoom_panup {
+  background-position:-42px -222px;
+  right:30px !important;
+  left: auto !important;
+  top:0 !important;
+}
+#fms_pan_zoom_pandown {
+  background-position:-42px -282px;
+  right:30px !important;
+  left: auto !important;
+  top:72px !important;
+}
+#fms_pan_zoom_panleft {
+  background-position:-12px -252px;
+  width:48px !important;
+  right:48px !important;
+  left: auto !important;
+  top:36px !important;
+}
+#fms_pan_zoom_panright {
+  background-position:-60px -252px;
+  width:48px !important;
+  right:0 !important;
+  left: auto !important;
+  top:36px !important;
+}
+#fms_pan_zoom_zoomin {
+  background-position:-152px -223px;
+  height:44px !important;
+  left:0 !important;
+  top:0 !important;
+}
+#fms_pan_zoom_zoomout {
+  background-position:-152px -259px;
+  height:44px !important;
+  left:0 !important;
+  top:44px !important;
+}
+
+//hide pins, show old reports etc
+#sub_map_links {
+  position: absolute;
+  left: 0;
+  right:0;
+  bottom: 0;
+  z-index: 1100;
+  background:#333;
+  background:rgba(0, 0, 0, 0.7);
+  margin:0;
+  a {
+    @include inline-block;
+    font-size:0.6875em;
+    color:#fff;
+    padding:0.6em 3em 0.5em 1em;
+    background-repeat:no-repeat;
+    &#hide_pins_link {
+      background-image:url('/cobrands/fixmystreet/images/sprite.png');
+      background-position: right -3976px;
+    }
+    &#all_pins_link {
+      background-image:url('/cobrands/fixmystreet/images/sprite.png');
+      background-position: right -4022px;
+    }
+    &#map_permalink {
+      background-image:url('/cobrands/fixmystreet/images/sprite.png');
+      background-position: right -4070px;
+    }
+    &.feed {
+      background-image:url('/cobrands/fixmystreet/images/sprite.png');
+      background-position: right -3936px;
+    }
+    &:hover {
+      background-color:#000;
+      text-decoration:none;
+    }
+  }
+}
+
+.ie6 #sub_map_links a {
+  &#hide_pins_link {
+    background-image:url('/cobrands/fixmystreet/images/ie_sub_map_links_sprite.gif');
+    background-position: right 1px;
+  }
+  &#all_pins_link {
+    background-image:url('/cobrands/fixmystreet/images/ie_sub_map_links_sprite.gif');
+    background-position: right -45px;
+  }
+  &#map_permalink {
+    background-image:url('/cobrands/fixmystreet/images/ie_sub_map_links_sprite.gif');
+    background-position: right -93px;
+  }
+}
+
+#mob_sub_map_links {
+  position: absolute;
+  z-index:1100;
+  bottom:0;
+  display:table;
+  margin:0;
+  width:100%;
+  background:rgba(0, 0, 0, 0.7);
+  a {
+    color:#fff;
+    width:50%;
+    padding:0.5em 0;
+    font-size:1em;
+    display:table-cell;
+    text-align:center;
+    &:hover {
+      background:#000;
+      text-decoration:none;
+    }
+  }
+  &.map_complete {
+    background:none;
+    display:block;
+    border-bottom:4px solid #fff;
+    a#try_again {
+      display:block;
+      margin:0 auto 6em auto;
+      background:rgba(0, 0, 0, 0.8);
+      @include border-radius(0.5em);
+    }
+    a#mob_ok {
+      position:absolute;
+      right:1em;
+      bottom:0;
+      height:20px;
+      padding-top:30px;
+      display:block;
+      width:4em;
+      background:#fff url('/cobrands/fixmystreet/images/sprite.png') 12px -4140px no-repeat;
+      color:#000;
+    }
+  }
+}
+
+.mobile-map-banner {
+  margin:0;
+  position: absolute;
+  top:0;
+  left:0;
+  right:0;
+  font-size:0.75em;
+  background:rgba(0, 0, 0, 0.7);
+  padding:0.75em 30px;
+  a {
+    @include button-reset(#333, #1a1a1a, #1a1a1a, #fff, #333, #1a1a1a, #1a1a1a, #fff);
+    font: {
+      weight:normal;
+      size:0.875em;
+    }
+    line-height:1;
+    padding:0.5em 0.75em;
+    position:absolute;
+    left:0.3em;
+    top:0.3em;
+  }
+}
+
+.olControlAttribution {
+    bottom: 3.25em !important;
+    right: 0.25em !important;
+    left: 0.25em !important;
+    color: #222222;
+    font-size:0.75em !important;
+}
+.olControlAttribution img {
+    vertical-align: bottom;
+}
+.olControlPermalink {
+    bottom: 3px !important;
+    right: 3px;
+}
+
+/* Drag is only present in noscript form. XXX Copy from core. */
+#drag {
+    input, img {
+        position: absolute;
+        border: none;
+        max-width: none;
+    }
+    input {
+        cursor: crosshair;
+        background-color: #cccccc;
+    }
+    img {
+        cursor: move;
+    }
+    img.pin {
+        z-index: 100;
+        background-color: inherit;
+    }
+    a img.pin {
+        cursor: pointer;
+        cursor: hand;
+    }
+}
+
+// only on mobile, this is a sidebar on desk (#report-a-problem-sidebar)
+a.rap-notes-trigger,
+a:hover.rap-notes-trigger {
+  display:block;
+  width:90%;
+  padding-left:5%;
+  padding-right:5%;
+}
+.rap-notes {
+  margin:1em 0;
+}
+
+//report a problem tabs
+#problems-nav {
+  padding:0 1em;
+  overflow:hidden;
+  border-bottom:0.25em solid #333;
+  ul {
+    @include list-reset-soft;
+    display:table;
+    width:100%;
+    li {
+      display:table-cell;
+      border-right:0.25em solid #fff;
+      &:last-child {
+        border-right:none;
+      }
+      a {
+        display:block;
+        background:#e2e2e2;
+        color:#333;
+        padding:1em;
+        text: {
+          transform:uppercase;
+          align:center;
+        }
+        &:hover {
+          text-decoration:none;
+          background:#e6e6e6;
+        }
+        &.active {
+          background:#333;
+          color:#fff;
+        }
+      }
+    }
+  }
+}
+
+//display:table fixes
+.ie6, .ie7 {
+  #problems-nav {
+    clear:both;
+    margin:0;
+    padding:0;
+    ul li {
+      float:left;
+    }
+  }
+}
+
+
+table.nicetable {
+  width:100%;
+  margin-bottom:2em;
+  thead {
+    border-bottom:0.25em solid #ccc;
+    th {
+      font-size:0.75em;
+    }
+  }
+  tr {
+    &.a {
+      background:#f6f6f6;
+    }
+    &:nth-child(even) {
+      background:#f6f6f6;
+    }
+    &.gone {
+        color: #666666;
+        background-color: #cccccc;
+    }
+    &:hover {
+      background:#FFF5CC;
+      cursor:pointer;
+    }
+    td {
+      padding:0.25em;
+      a {
+        &:hover {
+          text-decoration:none;
+        }
+      }
+    }
+  }
+  .title {
+    text-align:left;
+  }
+  .data {
+    width:12%;
+  }
+}
+
+.promo {
+  @extend .full-width;
+  color: $primary_text;
+  background: $primary;
+  padding:1em;
+  margin-bottom:1em;
+  overflow:hidden;
+  position: relative;
+  .close-promo {
+    position:absolute;
+    top:0.5em;
+    right:0.5em;
+    display:block;
+    width:16px;
+    height:16px;
+    text-indent:-999999px;
+    background:url(/cobrands/fixmystreet/images/sprite.png) -341px -263px no-repeat;
+    @include border-radius(4px);
+    &:hover {
+      background:#222 url(/cobrands/fixmystreet/images/sprite.png) -341px -223px no-repeat;
+    }
+  }
+}
+
+.alert {
+  @extend .full-width;
+  background:#ff0000;
+  padding:1em;
+  margin-bottom:1em;
+  color:#fff;
+  a, a:hover {
+    color:$primary;
+  }
+}
+
+.pagination {
+  text-align:center;
+  padding:0.5em 1em;
+  background:#eee;
+  position:relative;
+  .prev {
+    position:absolute;
+    left:0.5em;
+  }
+  .next {
+    position:absolute;
+    right:0.5em;
+  }
+  a {
+    @include inline-block;
+    color: $primary_text;
+    background: $primary;
+    padding-left:0.5em;
+    padding-right:0.5em;
+    color:#1a1a1a;
+    &:hover {
+      color:#1a1a1a;
+      text-decoration:none;
+      background:$primary/1.1;
+    }
+  }
+}
+
+// this is a bit of a hack to get some differentation between desk and mobile
+.desk-only {
+  display:none;
+}
+
+// hide anything with this class if js is working
+.js .hidden-js {
+  display: none;
+  visibility: hidden;
+}
+
+// hide anything with this class if js is NOT working
+.no-js .hidden-nojs {
+  display: none !important;
+  visibility: hidden;
+}
+
+
+/* Front page */
+#front-main {
+  text-align:center;
+  margin: 1em;
+  h2 {
+    font: {
+      style:italic;
+      font-family: 'PTSansRegular',PT Sans,Verdana,Arial,Sans-Serif;
+      size:1.1875em;
+    }
+    color:#4d4d4d;
+  }
+  p {
+    margin: 0.5em 0 0;
+  }
+  #postcodeForm {
+    @extend .full-width;
+    padding:1em;
+    color: $primary_text;
+    background: $primary;
+    font-family: 'PTSansRegular',PT Sans,Verdana,Arial,Sans-Serif;
+    label {
+      margin:0;
+    }
+    div {
+      display:table;
+      width:100%;
+      background:#fff;
+      border:1px solid $primary;
+      input#pc {
+        display:table-cell;
+        margin:0;
+        padding:0.25em 2%;
+        width:86%;
+        border:none;
+        background:none;
+        line-height:1.5em;
+      }
+      input#submit {
+        display:table-cell;
+        border:none;
+        padding:0;
+        margin:0;
+        width:14%;
+        height:35px;
+        background:$primary;
+        color:#fff;
+        text-transform:uppercase;
+        @include border-radius(0);
+        &:hover {
+          background:lighten($primary, 10%);
+        }
+      }
+    }
+  }
+  a#geolocate_link {
+    @include inline-block;
+    vertical-align:top;
+    background:#1a1a1a;
+    color:#C8C8C8;
+    padding:0.5em;
+    font: {
+      font-family: 'PTSansRegular',PT Sans,Verdana,Arial,Sans-Serif;
+      size:0.8125em;
+    }
+    @include border-radius(0 0 0.25em 0.25em);
+    &:hover {
+      text-decoration:none;
+      background:#2a2a2a;
+    }
+  }
+}
+
+#front-howto {
+  #front_stats {
+    display:table;
+    width:100%;
+    color: $primary_text;
+    background: $primary;
+    font-family: 'PTSansRegular',PT Sans,Verdana,Arial,Sans-Serif;
+    div {
+      display:table-cell;
+      text-align:center;
+      padding:1em;
+      line-height:1.25em;
+      font: {
+        size:0.8125em;
+        weight:bold;
+      }
+      big {
+        display:block;
+        margin-bottom:0.5em;
+        font-size:1.5385em;
+      }
+    }
+  }
+}
+
+#front-recently {
+  .issue-list-a {
+    border-bottom:none;
+  }
+}
+
+#alerts {
+    ul {
+        margin-bottom: 1em;
+    }
+    li {
+        padding: 0em;
+        margin-bottom: 0.5em;
+    }
+    .a {
+        background: #f6f6f6;
+    }
+    img[width="16"] {
+        float: right;
+    }
+}
+
diff --git a/web/cobrands/stevenage/_h5bp.scss b/web/cobrands/stevenage/_h5bp.scss
new file mode 100644
index 000000000..f4078cca6
--- /dev/null
+++ b/web/cobrands/stevenage/_h5bp.scss
@@ -0,0 +1,271 @@
+/*
+ * HTML5 ✰ Boilerplate, with minor tweaks.
+ *
+ * What follows is the result of much research on cross-browser styling.
+ * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
+ * Kroc Camen, and the H5BP dev community and team.
+ *
+ * Detailed information about this CSS: h5bp.com/css
+ *
+ * ==|== normalize ==========================================================
+ */
+
+
+/* =============================================================================
+   HTML5 display definitions
+   ========================================================================== */
+
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
+audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
+audio:not([controls]) { display: none; }
+[hidden] { display: none; }
+
+
+/* =============================================================================
+   Base
+   ========================================================================== */
+
+/*
+ * 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units
+ * 2. Force vertical scrollbar in non-IE - mySociety removed.
+ * 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g
+ */
+
+html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
+
+/* mySociety change: line-height from 1.4 */
+body { margin: 0; font-size: 1em; line-height: 1.5; }
+
+/* mySociety addition: background colour */
+body, button, input, select, textarea {
+    font-family: sans-serif; 
+    color: #222;
+    background-color: #fff
+}
+
+/*
+ * Remove text-shadow in selection highlight: h5bp.com/i
+ * These selection declarations have to be separate
+ * mySociety change: background colour from #fe57a1
+ */
+
+::-moz-selection { background: #ffeeaa; color: #000; text-shadow: none; }
+::selection { background: #ffeeaa; color: #000; text-shadow: none; }
+
+
+/* =============================================================================
+   Links
+   ========================================================================== */
+
+/* mySociety removal: link colours specified elsewhere */
+a:focus { outline: thin dotted; }
+
+/* Improve readability when focused and hovered in all browsers: h5bp.com/h */
+a:hover, a:active { outline: 0; }
+
+
+/* =============================================================================
+   Typography
+   ========================================================================== */
+
+abbr[title] { border-bottom: 1px dotted; }
+
+b, strong { font-weight: bold; }
+
+/* mySociety change: from 1em 40px; */
+blockquote { margin: 1.5em 2em; }
+
+dfn { font-style: italic; }
+
+hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
+
+ins { background: #ff9; color: #000; text-decoration: none; }
+
+mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
+
+/* Redeclare monospace font family: h5bp.com/j */
+pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; }
+
+/* Improve readability of pre-formatted text in all browsers */
+pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
+
+q { quotes: none; }
+q:before, q:after { content: ""; content: none; }
+
+small { font-size: 85%; }
+
+/* Position subscript and superscript content without affecting line-height: h5bp.com/k */
+sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
+sup { top: -0.5em; }
+sub { bottom: -0.25em; }
+
+
+/* =============================================================================
+   Lists
+   ========================================================================== */
+
+/* mySociety change: left 40px, top/bottom 1em */
+ul, ol { margin: 0 0 1.5em; padding: 0 0 0 2em; }
+dd { margin: 0 0 0 2em; }
+nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
+
+
+/* =============================================================================
+   Embedded content
+   ========================================================================== */
+
+/*
+ * 1. Improve image quality when scaled in IE7: h5bp.com/d
+ * 2. Remove the gap between images and borders on image containers: h5bp.com/e
+ */
+
+img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }
+
+/*
+ * Correct overflow not hidden in IE9
+ */
+
+svg:not(:root) { overflow: hidden; }
+
+
+/* =============================================================================
+   Figures
+   ========================================================================== */
+
+figure { margin: 0; }
+
+
+/* =============================================================================
+   Forms
+   ========================================================================== */
+
+form { margin: 0; }
+fieldset { border: 0; margin: 0; padding: 0; }
+
+/* Indicate that 'label' will shift focus to the associated form element */
+label { cursor: pointer; }
+
+/*
+ * 1. Correct color not inheriting in IE6/7/8/9
+ * 2. Correct alignment displayed oddly in IE6/7
+ */
+
+legend { border: 0; *margin-left: -7px; padding: 0; }
+
+/*
+ * 1. Correct font-size not inheriting in all browsers
+ * 2. Remove margins in FF3/4 S5 Chrome
+ * 3. Define consistent vertical alignment display in all browsers
+ */
+
+button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
+
+/*
+ * 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet)
+ */
+
+button, input { line-height: normal; }
+
+/*
+ * 1. Display hand cursor for clickable form elements
+ * 2. Allow styling of clickable form elements in iOS
+ * 3. Correct inner spacing displayed oddly in IE7 (doesn't effect IE6)
+ */
+
+button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; }
+
+/*
+ * Consistent box sizing and appearance
+ */
+
+input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
+input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
+input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
+
+/*
+ * Remove inner padding and border in FF3/4: h5bp.com/l
+ */
+
+button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
+
+/*
+ * 1. Remove default vertical scrollbar in IE6/7/8/9
+ * 2. Allow only vertical resizing
+ */
+
+textarea { overflow: auto; vertical-align: top; resize: vertical; }
+
+
+/* =============================================================================
+   Tables
+   ========================================================================== */
+
+table { border-collapse: collapse; border-spacing: 0; }
+td { vertical-align: top; }
+
+
+/* ==|== primary styles =====================================================
+   Author:
+   ========================================================================== */
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/* ==|== non-semantic helper classes ========================================
+   Please define your styles before this section.
+   ========================================================================== */
+
+/* For image replacement */
+.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
+.ir br { display: none; }
+
+/* Hide from both screenreaders and browsers: h5bp.com/u */
+.hidden { display: none !important; visibility: hidden; }
+
+/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
+.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
+
+/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
+.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
+
+/* Hide visually and from screenreaders, but maintain layout */
+.invisible { visibility: hidden; }
+
+/* Contain floats: h5bp.com/q */
+/* mySociety change: rename to cf */
+.cf:before, .cf:after { content: ""; display: table; }
+.cf:after { clear: both; }
+.cf { *zoom: 1; }
+
+
+
+/* ==|== print styles =======================================================
+   Print styles.
+   Inlined to avoid required HTTP connection: h5bp.com/r
+   ========================================================================== */
+
+/* mySociety removal: bits of * and :after */
+@media print {
+  * { box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } /* Black prints faster: h5bp.com/s */
+  a, a:visited { text-decoration: underline; }
+  abbr[title]:after { content: " (" attr(title) ")"; }
+  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
+  thead { display: table-header-group; } /* h5bp.com/t */
+  tr, img { page-break-inside: avoid; }
+  img { max-width: 100% !important; }
+  @page { margin: 0.5cm; }
+  p, h2, h3 { orphans: 3; widows: 3; }
+  h2, h3 { page-break-after: avoid; }
+}
diff --git a/web/cobrands/stevenage/_layout.scss b/web/cobrands/stevenage/_layout.scss
index 7b35362a1..1c551b88f 100644
--- a/web/cobrands/stevenage/_layout.scss
+++ b/web/cobrands/stevenage/_layout.scss
@@ -10,7 +10,7 @@
 }
 
 body {
-  //background: #1A1A1A url(/cobrands/fixmystreet/images/tile.jpg) 0 0 repeat;
+  background: #dddddb; //#1A1A1A url(/cobrands/fixmystreet/images/tile.jpg) 0 0 repeat;
 }
 
 h1 {
@@ -58,14 +58,21 @@ h1 {
   display: table-caption;
   .nav-wrapper-2{
     width: 100%;
-    min-height: 4em;
+    min-height: min-intrinsic;
     position: absolute;
-    top:160px;
-    border-top:4px solid #1a1a1a;
-    @include border-image(url(/cobrands/fixmystreet/images/tile-y-border.jpg) 4 0 0 0);
+    top:158px;
+    border-top: none;
     border-left:0;
     border-right:0;
     z-index:2;
+    padding-top: 0.75em;
+    padding-bottom: 0.25em;
+    background-color: #6b6969;
+    background-image: -webkit-gradient(linear, left top, left bottom, from(#6b6969), to(#555454)); /* Safari 4+, Chrome */
+    background-image: -webkit-linear-gradient(top, #6b6969, #555454); /* Chrome 10+, Safari 5.1+, iOS 5+ */
+    background-image:    -moz-linear-gradient(top, #6b6969, #555454); /* Firefox 3.6-15 */
+    background-image:      -o-linear-gradient(top, #6b6969, #555454); /* Opera 11.10-12.00 */
+    background-image:         linear-gradient(to bottom, #6b6969, #555454); /* Firefox 16+, IE10, Opera 12.50+ */
   }
 }
 
@@ -122,7 +129,7 @@ h1 {
     list-style: none;
     padding: 0px;
     margin: 0px;
-    float:right;
+    float:none;
     li{
       list-style: none;
       display: inline;
@@ -133,25 +140,30 @@ h1 {
       span {
         display: block;
         color:#fff;
-        background: none;  
-        border-bottom: none;      
+        background: none;
+        border-bottom: none; 
+        margin: 0;    
+        margin-right: 2px;
+        font-family: 'PTSansRegular',PT Sans,Verdana,Arial,Sans-Serif;
       }
     }
     &#main-menu{
       li{
         a, span{
-          padding: 0.75em;
+          padding: 0.5em 0.75em;
           font-size: 0.9em;
+          margin: 0;
+          @include border-radius(0.25em);
         }
         a:hover{
           background:#444;
-          @include background(linear-gradient(#000, #444 10%, #444 95%, #111));
         }
         a.report-a-problem-btn {
           color: $primary_text;
           background: $primary;
           padding:0.25em;
           margin:0.5em;
+          margin-bottom: 0;
           color:#333;
           @include border-radius(0.25em);
           &:hover {
@@ -159,7 +171,8 @@ h1 {
           }
         }
         span {
-          color:$primary;
+          color: #fff;
+          background-color: #066539;
         }
       }
     }
@@ -287,6 +300,11 @@ body.mappage {
 body.fullwidthpage {
   .content {
     width: 57em;
+    box-shadow: none;
+    -webkit-box-shadow: none;
+    -moz-box-shadow:none;
+    -o-box-shadow:none;
+    background: none;
   }
   .intro {
     width:40em;
@@ -375,7 +393,7 @@ body.twothirdswidthpage {
 
 //footer blocks
 #footer-mobileapps {
-  border-right:1em solid #fff;
+  border-right:1em solid transparent;
   background:none;
   padding:0;
   @include box-shadow(inset rgba(0, 0, 0, 0) 0 0 0);
@@ -433,14 +451,14 @@ body.twothirdswidthpage {
 }
 
 #footer-help {
-  border-left:1em solid #fff;
+  border-left:1em solid transparent;
   ul {
     display:table;
     li {
       display:table-cell;
       border-bottom:none;
       &:last-child {
-        border-left:1.25em solid #fff;
+        border-left:1.25em solid transparent;
       }
     }
   }
@@ -768,10 +786,10 @@ body.frontpage {
     }
   }
   .nav-wrapper-2{
-    height:6em;
+    height:auto;
   }
   #site-header{
-    height:8em;
+    height:auto;
   }
   #site-logo{
     top:3em;
@@ -827,9 +845,11 @@ body.frontpage {
 // big yellow bit full screen width
 #front-main {
   color: $primary_text;
-  background: $primary url(/cobrands/fixmystreet/images/tile-y.jpg);
-  margin: 0;
+  background: #fff;
+  margin: 0 auto;
+  margin-top: 1.5em;
   padding: 1em;
+  max-width: 60em;
   #front-main-container {
     max-width: 57em;
     margin:0 auto;
@@ -898,7 +918,7 @@ body.frontpage {
 }
 
 #front-howto {
-  border-right:1em solid #fff;
+  border-right:1em solid transparent;
   #front_stats {
     background:none;
     color: #222;
@@ -922,7 +942,7 @@ body.frontpage {
 }
 
 #front-recently {
-  border-left:1em solid #fff;
+  border-left:1em solid transparent;
 }
 
 #front-howto h2,
@@ -964,13 +984,14 @@ body.frontpage {
 
   #main-nav{
     width: auto;
-    float:right;
+    float:left;
     padding-left: 180px;
   }
   .nav-wrapper {
   //   width:auto;
     .nav-wrapper-2 {
       // width:auto;
+      @include background(linear-gradient(#222, #555 30%, #555 60%, #222));
     }
   }
 
diff --git a/web/cobrands/stevenage/base.scss b/web/cobrands/stevenage/base.scss
index dbe9e1a68..b1ceac384 100644
--- a/web/cobrands/stevenage/base.scss
+++ b/web/cobrands/stevenage/base.scss
@@ -1,8 +1,8 @@
-@import "../fixmystreet/_h5bp";
-@import "./_colours";
+@import "h5bp";
+@import "colours";
 @import "../fixmystreet/_mixins";
 @import "compass";
 
-@import "../fixmystreet/_base";
+@import "fmsbase";
 @import "council_header";