[Oxfordshire] Full screen map design

 - Replace .big-green-banner with .click-the-map
    Design follows similar change in Collideoscope. #skip-this-step link
    is hidden for normal users, shown when tabbed to, or when javascript
    is disabled.
 - Move RSS link to bottom of sidebar
 - Combine 'on the map' and 'nearby' tabs into a single list

17 files changed, 418 insertions, 201 deletions

diff --git a/templates/web/fixmystreet/my/my.html b/templates/web/fixmystreet/my/my.html
index 9c857aab9..b614963fe 100644
--- a/templates/web/fixmystreet/my/my.html
+++ b/templates/web/fixmystreet/my/my.html
@@ -61,6 +61,10 @@
 
 [% BLOCK problem %]
     [% "<ul class='issue-list-a full-width'>" IF loop.first %]
-    [% INCLUDE 'report/_item.html', problem = p, no_fixed =1 %]
+    [% IF c.cobrand.moniker == 'oxfordshire' %]
+        [% INCLUDE 'reports/_list-entry.html', problem = p, no_fixed =1 %]
+    [% ELSE %]
+        [% INCLUDE 'report/_item.html', problem = p, no_fixed =1 %]
+    [% END %]
     [% "</ul>" IF loop.last %]
 [% END %]
diff --git a/templates/web/oxfordshire/around/_report_banner.html b/templates/web/oxfordshire/around/_report_banner.html
new file mode 100644
index 000000000..52a869262
--- /dev/null
+++ b/templates/web/oxfordshire/around/_report_banner.html
@@ -0,0 +1,10 @@
+<h1 class="big-green-banner">
+    [% loc( 'Click map to report a problem' ) %]
+</h1>
+<div class="click-the-map">
+    <h2>[% loc( 'Have you found a problem here?' ) %]</h2>
+    <p>Click on the map to report it</p>
+</div>
+<a id="skip-this-step" href="[% url_skip %]" rel="nofollow">
+    [% loc("Can't see the map? <em>Skip this step</em>") %]
+</a>
diff --git a/templates/web/oxfordshire/around/around_map_list_items.html b/templates/web/oxfordshire/around/around_map_list_items.html
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/templates/web/oxfordshire/around/around_map_list_items.html
diff --git a/templates/web/oxfordshire/around/extra_text.html b/templates/web/oxfordshire/around/extra_text.html
index 439bf00a2..107d3324f 100644
--- a/templates/web/oxfordshire/around/extra_text.html
+++ b/templates/web/oxfordshire/around/extra_text.html
@@ -1,5 +1,3 @@
 <div class="extra-text">
     <p>Please do not use this form for reporting <a href="/faq#pothole" target="_blank">emergencies and urgent problems</a>.</p>
-
-    <p><img src="/i/pin-yellow.png" class="extra-text__image" width="48" height="64" /> - <b>these are problems that have already been reported</b>.<br>Click them to see more details.</p>
 </div>
diff --git a/templates/web/oxfordshire/around/on_map_list_items.html b/templates/web/oxfordshire/around/on_map_list_items.html
new file mode 100644
index 000000000..893f5c698
--- /dev/null
+++ b/templates/web/oxfordshire/around/on_map_list_items.html
@@ -0,0 +1,11 @@
+[% all_reports = on_map.merge(around_map) %]
+[% IF all_reports.size %]
+    [% FOREACH problem IN all_reports %]
+        [% UNLESS problem.title; problem = problem.problem; END %]
+        [% INCLUDE "reports/_list-entry.html" %]
+    [% END %]
+[% ELSE %]
+    <li class="empty">
+        <p>[% loc('There are no reports to show.') %]</p>
+    </li>
+[% END %]
diff --git a/templates/web/oxfordshire/around/tabbed_lists.html b/templates/web/oxfordshire/around/tabbed_lists.html
new file mode 100644
index 000000000..0d7dfddfc
--- /dev/null
+++ b/templates/web/oxfordshire/around/tabbed_lists.html
@@ -0,0 +1,5 @@
+[% INCLUDE "reports/_list-filters.html" %]
+
+<ul class="report-list" id="current">
+    [% INCLUDE "around/on_map_list_items.html" %]
+</ul>
diff --git a/templates/web/oxfordshire/header.html b/templates/web/oxfordshire/header.html
index 19bb23374..0bbdaf353 100644
--- a/templates/web/oxfordshire/header.html
+++ b/templates/web/oxfordshire/header.html
@@ -24,73 +24,59 @@
         <script src="[% start %][% version('/cobrands/oxfordshire/position_map.js') %]" charset="utf-8"></script>
         [% INCLUDE 'common_header_tags.html', js_override = '/cobrands/fixmystreet/fixmystreet.js' %]
         [% extra_js %]
-                
+
         [% INCLUDE 'tracking_code.html' %]
 
     </head>
     <body class="[% bodyclass | html IF bodyclass %]">
 <div id="oxford-wrapper">
-	<div id="oxford-header" class="desk-only oxford-left">
-		<a href="http://www.oxfordshire.gov.uk/" title="Home" class="logo">Oxfordshire County Council<span></span></a>
-		<span id="oxford-links">
-			<a href="http://www.oxfordshire.gov.uk/" title="">Oxfordshire County Council home</a>
-		</span>
-		<div style="clear:both"></div>
-		<span class="header"><a href="/">Report a road or street problem</a></span>
-		<div class="oxford-user">
-			<p>
-				[% IF c.user_exists %]
-					[% tprintf(loc('Hi %s'), c.user.name || c.user.email) %] 
-					<a href="/auth/sign_out">[% loc('sign out') %]</a>
-				[% END %]
-			</p>
-		</div>
-		
-		
-		<div id="navigation">
-    		<div class="menubar">
-            	<div class="menu-inner">
-            		<ul class="menu">
-            			<li>
-            			    <[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %]>[% "Report" %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]>
-            			</li>
-    					<li>
-            			    <[% IF c.req.uri.path == '/my' OR ( c.req.uri.path == '/auth' AND c.req.params.r == 'my' ) %]span[% ELSE %]a href="/my"[% END
-                 			%]>[% loc("Your reports") %]</[% ( c.req.uri.path == '/my' OR ( c.req.uri.path == '/auth' AND c.req.params.r == 'my' ) ) ? 'span' : 'a' %]>
-    					</li>
-    					<li>
-    					    <[% IF c.req.uri.path == '/reports/Oxfordshire' %]span[% ELSE %]a href="/reports/Oxfordshire"[% END
-                			     %]>[% loc("All reports") %]</[% c.req.uri.path == '/reports' ? 'span' : 'a' %]>
-    					</li>
-    					<li>
-    					    <[% IF c.req.uri.path == '/alert' %]span[% ELSE %]a href="/alert[% pc ? '/list?pc=' : '' %][% pc | uri %]"[% END
-                			     %]>[% loc("Local alerts") %]</[% c.req.uri.path == '/alert' ? 'span' : 'a' %]>
-    					</li>
-    					<li>
-    					    <[% IF c.req.uri.path == '/faq' %]span[% ELSE %]a href="/faq"[% END
-                			     %]>[% loc("Help") %]</[% c.req.uri.path == '/faq' ? 'span' : 'a' %]>
-    					</li>
-            		</ul>
-            	</div>
+    <div id="oxford-header" class="desk-only oxford-left">
+        <a href="http://www.oxfordshire.gov.uk/" title="Home" class="logo">Oxfordshire County Council<span></span></a>
+        <span id="oxford-links">
+            <a href="http://www.oxfordshire.gov.uk/" title="">Oxfordshire County Council home</a>
+        </span>
+        <div style="clear:both"></div>
+        <span class="header"><a href="/">Report a road or street problem</a></span>
+
+      [% IF c.user_exists %]
+        <div class="oxford-user">
+            <p>
+                [% tprintf(loc('Hi %s'), c.user.name || c.user.email) %]
+                <a href="/auth/sign_out">[% loc('Sign out') %]</a>
+            </p>
+        </div>
+      [% END %]
+
+        <div id="navigation">
+            <div class="menubar">
+                <div class="menu-inner">
+                    <ul class="menu">
+                        <li>
+                            <[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END %]>[% "Report" %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]>
+                        </li>
+                        <li>
+                            <[% IF c.req.uri.path == '/my' OR ( c.req.uri.path == '/auth' AND c.req.params.r == 'my' ) %]span[% ELSE %]a href="/my"[% END
+                             %]>[% loc("Your reports") %]</[% ( c.req.uri.path == '/my' OR ( c.req.uri.path == '/auth' AND c.req.params.r == 'my' ) ) ? 'span' : 'a' %]>
+                        </li>
+                        <li>
+                            <[% IF c.req.uri.path == '/reports/Oxfordshire' %]span[% ELSE %]a href="/reports/Oxfordshire"[% END
+                                 %]>[% loc("All reports") %]</[% c.req.uri.path == '/reports' ? 'span' : 'a' %]>
+                        </li>
+                        <li>
+                            <[% IF c.req.uri.path == '/alert' %]span[% ELSE %]a href="/alert[% pc ? '/list?pc=' : '' %][% pc | uri %]"[% END
+                                 %]>[% loc("Local alerts") %]</[% c.req.uri.path == '/alert' ? 'span' : 'a' %]>
+                        </li>
+                        <li>
+                            <[% IF c.req.uri.path == '/faq' %]span[% ELSE %]a href="/faq"[% END
+                                 %]>[% loc("Help") %]</[% c.req.uri.path == '/faq' ? 'span' : 'a' %]>
+                        </li>
+                    </ul>
+                </div>
             </div>
         </div>
-        
-		
-		
-		
-	</div> <!-- end of oxford header -->
-<!--
-	<div id="oxford-main-menu" class="desk-only">
-		<ul class="tabs">
-			 <li class="home first"></li>[%
-			 %]<li></li>[%
-			 %]<li></li>[%
-			 %]<li></li>[%
-			 %]<li class="last"></li>
-		</ul>
-	</div>
--->
-	
+
+    </div> <!-- end of oxford header -->
+
     <div class="wrapper">
 
         <div class="table-cell">
@@ -104,7 +90,7 @@
           [% IF c.user_exists %]
             <div id="user-meta">
                 <p>
-                    [% tprintf(loc('Hi %s'), c.user.name || c.user.email) %] 
+                    [% tprintf(loc('Hi %s'), c.user.name || c.user.email) %]
                     <a href="/auth/sign_out">[% loc('sign out') %]</a>
                 </p>
             </div>
diff --git a/templates/web/oxfordshire/reports/_list-entry.html b/templates/web/oxfordshire/reports/_list-entry.html
new file mode 100644
index 000000000..cd70410d3
--- /dev/null
+++ b/templates/web/oxfordshire/reports/_list-entry.html
@@ -0,0 +1,6 @@
+<li class="[% c.cobrand.pin_colour(problem) %]">
+    <a href="[% c.uri_for('/report', problem.id ) %]" class="[% problem.category %]">
+        <h3>[% problem.title | html %]</h3>
+        <p>Reported [%- prettify_dt( problem.confirmed, 1 ) %]</p>
+    </a>
+</li>
diff --git a/templates/web/oxfordshire/reports/_list-filters.html b/templates/web/oxfordshire/reports/_list-filters.html
new file mode 100644
index 000000000..029b14144
--- /dev/null
+++ b/templates/web/oxfordshire/reports/_list-filters.html
@@ -0,0 +1,31 @@
+[% IF use_section_wrapper %]
+<section class="full-width">
+    <form method="get" action="">
+[% END %]
+
+        <p class="report-list-filters">
+            <label>
+                Show
+                <select name="status">
+                    <option value="">all reports</option>
+                    <option value="open">unfixed reports</option>
+                    <option value="fixed">fixed reports</option>
+                </select>
+            </label>
+            <label>
+                about
+                <select name="category">
+                    <option value="">anything</option>
+                    <option value="">bridges</option>
+                    <option value="">carriageway defect</option>
+                    <option value="">debris/spillage</option>
+                    <option value="">…</option>
+                </select>
+            </label>
+            <input type=submit value="go" />
+        </p>
+
+[% IF use_section_wrapper %]
+    </form>
+</section>
+[% END %]
diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js
index fdecee9db..31925e977 100644
--- a/web/cobrands/fixmystreet/fixmystreet.js
+++ b/web/cobrands/fixmystreet/fixmystreet.js
@@ -463,7 +463,8 @@ $.fn.drawer = function(id, ajax) {
                 offset = -110;
             }
             if (cobrand == 'oxfordshire') {
-                offset = -13 * 16;
+                // Oxfordshire uses box-sizing:border-box and padding to work out height
+                offset = 0;
             }
             heightFix(window, '.content', offset, 1);
             // in case we have a map that isn't full screen
diff --git a/web/cobrands/oxfordshire/_colours.scss b/web/cobrands/oxfordshire/_colours.scss
index 900f96d3d..ed494674a 100644
--- a/web/cobrands/oxfordshire/_colours.scss
+++ b/web/cobrands/oxfordshire/_colours.scss
@@ -2,6 +2,8 @@
 
 $oxfordshire_dk_green: #114500;
 $oxfordshire_lt_green: #339E00;
+$oxfordshire_very_light_green: #f6fcf0;
+$oxfordshire_mid_grey_green: #e0e5da;
 
 $primary: $oxfordshire_lt_green;
 $primary_b: $oxfordshire_dk_green;
@@ -10,6 +12,9 @@ $primary_text: #fff;
 $base_bg: #fff;
 $base_fg: #000;
 
+// Taken from the OCC website
+$oxfordshire_link_colour: #0c62ba;
+
 /* Unused here */
 $map_nav_bg: #222;
 $nav_fg: #fff;
@@ -19,7 +24,7 @@ $col_click_map: $oxfordshire_lt_green;
 $col_click_map_dark: $primary_text;
 
 $col_fixed_label: $oxfordshire_lt_green;
-$col_fixed_label_dark: $primary_text;
+$col_fixed_label_dark: mix(#000, $oxfordshire_lt_green, 50%);
 
 // Oxfordshire have toasty orange buttons
 
diff --git a/web/cobrands/oxfordshire/base.scss b/web/cobrands/oxfordshire/base.scss
index c3242dbec..dae1e02f0 100644
--- a/web/cobrands/oxfordshire/base.scss
+++ b/web/cobrands/oxfordshire/base.scss
@@ -45,3 +45,15 @@ dd, p {
   line-height: 1.4em;
 }
 
+// TODO: Should this be applied to the base base stylesheet, to prevent possible similar issues in other cobrands?
+#sub_map_links {
+  line-height: 1em;
+}
+
+body.frontpage {
+    .issue-list-a, .list-a {
+        li .text {
+            padding-left: 3em;
+        }
+    }
+}
diff --git a/web/cobrands/oxfordshire/images/click-map-chevron-small.gif b/web/cobrands/oxfordshire/images/click-map-chevron-small.gif
new file mode 100644
index 000000000..fdc871c41
--- /dev/null
+++ b/web/cobrands/oxfordshire/images/click-map-chevron-small.gif
diff --git a/web/cobrands/oxfordshire/images/logo-light-green.gif b/web/cobrands/oxfordshire/images/logo-light-green.gif
new file mode 100644
index 000000000..6bf7b6940
--- /dev/null
+++ b/web/cobrands/oxfordshire/images/logo-light-green.gif
diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss
index 9b6308e09..93361ad95 100644
--- a/web/cobrands/oxfordshire/layout.scss
+++ b/web/cobrands/oxfordshire/layout.scss
@@ -1,8 +1,9 @@
 @import "_colours";
 @import "../sass/layout";
+@import "../sass/report_list";
 
 body, body a {
-  font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; 
+  font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
 }
 
 #front-main {
@@ -65,23 +66,6 @@ body.twothirdswidthpage {
     }
 }
 
-//-------------------------------------------------
-// following declarations concern the map display:
-//-------------------------------------------------
-// So that map appears underneath the header
-.wrapper {
-    position: relative;
-    .table-cell {
-      padding-left: 13px; // added 13px to match Oxfordshire's normal look
-      padding-right: 13px;
-    }
-}
-.ie6, .ie7 {
-    .wrapper {
-        padding-top: 1em;
-    }
-}
-
 // To prevent font size larger interfering with the fixed Oxfordshire layout
 .container { width: auto; }
 .full-width { width: 464px; }
@@ -110,59 +94,204 @@ body.twothirdswidthpage .content {
 }
 
 body.mappage {
-    .content {
-        width: 345px;
-        padding: 1em;
-        position: relative;
-        z-index: 1;
+  $mappage-header-height: 60px;
+
+  #oxford-wrapper {
+    width: auto;
+    padding: 0;
+    background: transparent;
+  }
+
+  #oxford-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 2; // 1 more than `body.mappage .content`
+    width: auto;
+    min-height: $mappage-header-height;
+    padding: 0;
+    background-color: #069b01; // picked from header.jpg
+    background-position: 100% 40%;
+    overflow: auto;
+    box-shadow: 0 0 5px rgba(0,0,0,0.3);
+
+    & > * {
+      display: none;
     }
 
-    .container {
-        width: auto;
-        min-height: 635px;
-        z-index: auto;
+    a.logo {
+      display: block;
+      float: left;
+      height: $mappage-header-height;
+      width: 200px;
+      margin: 0;
+      background: transparent url("/cobrands/oxfordshire/images/logo-light-green.gif") no-repeat 50% 50%;
+      text-indent: -999px;
+
+      * {
+        display: none;
+      }
     }
-    .full-width { width: 377px; }
-    .shadow-wrap { width: 377px; }
 
-    #report-a-problem-sidebar {
-        top: 1em;
-        left: 23.5em;
+    #navigation {
+      display: block;
+      position: static;
+      float: right;
     }
-}
 
-.ie6, .ie7 {
-    body.mappage .container {
-        width: 464px;
-        margin-left: 0;
+    .menubar {
+      display: block;
+      width: auto;
+      border-top: none;
+      padding: 0;
+
+      // override super-specific "#navigation .menubar .menu-inner .menu>li>a"
+      // selector from OCC header styles in oxfordshire.scss
+      .menu-inner .menu {
+        li {
+          margin-bottom: 0;
+        }
+
+        a, span {
+          line-height: 20px;
+          padding-top: ($mappage-header-height - 20px) / 2;
+          padding-bottom: ($mappage-header-height - 20px) / 2;
+        }
+      }
     }
-}
 
-// As map can scroll and isn't at the top, give it an edge
-#map_box {
-    border: solid 1px #999;
-    top: 1em;
-    right: 0;
-    left: 0;
-    margin: 0 1em;
+    .oxford-user {
+      display: block;
+      font-size: 13px;
+      margin: 0;
+      color: mix(#ddd, #069b01, 80%);
+
+      p {
+          margin: 0;
+          padding-top: ($mappage-header-height - 20px) / 2;
+          padding-bottom: ($mappage-header-height - 20px) / 2;
+          line-height: 20px;
+      }
+
+      a {
+        padding: 0 10px;
+        text-decoration: none;
+      }
+    }
+  }
+
+  .wrapper .table-cell {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .container {
+    width: auto;
+  }
+
+  .content {
+    padding: 1em;
+    padding-top: $mappage-header-height + 10px;
+    position: relative;
+    z-index: 1;
+    box-shadow: 0 0 5px rgba(0,0,0,0.3);
+    background-color: $oxfordshire_very_light_green;
+
+    // fixmystreet.js gives this element a min-height equal to the window height.
+    // Set border-box sizing, so that our padding doesn't get added onto height.
+    box-sizing: border-box;
+
+    .extra-text {
+      padding: 1em;
+      margin: 0 -1em;
+      border-bottom: 1px solid $oxfordshire_mid_grey_green;
+
+      p:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .full-width {
+      width: auto;
+      margin: 0 -1em;
+    }
+
+    input[type="file"] {
+      background-color: transparent;
+    }
+  }
+
+  // Space between green header and sidebar content
+  #report-a-problem-main,
+  .problem-header {
+    padding-top: 1em;
+  }
+
+  // The "Fixed" / "Unknown" tabs on Oxford report pages are "folded"
+  // round right edge of the sidebar, rather than over the top of it.
+  .banner {
+    margin: 0 -1em; // line tab up with right edge of 1em padded sidebar
+
+    // Float the tab, rather than absolute positioning, to benefit
+    // from text wrapping and stop content being hidden behind it.
+    p {
+      position: relative; // still required for :before positioning
+      top: auto;
+      right: auto;
+      float: right;
+      margin: 1em -0.75em 0.5em 1em;
+
+      // Swap "fold" triangle to bottom right corner of box, rather than top left.
+      &:before {
+        left: auto;
+        right: 0;
+        top: auto;
+        bottom: -0.75em;
+        border-left: none;
+        border-bottom: none !important; // override default id selectors
+        border-top: 0.75em solid #888;
+        border-right: 0.75em solid transparent;
+      }
+
+      &#fixed:before {
+        border-top-color: #1D4D05; // dark green
+        border-top-color: $col_fixed_label_dark;
+      }
+    }
+  }
+
+  #oxford-footer {
+    display: none;
+  }
 }
 
-// Perhaps fix map location (should be in central?)
-.ie6 #map_box, .ie7 #map_box {
-    right: -480px;
+.report-list, .issue-list-a {
+    li:after {
+        background-color: $oxfordshire_mid_grey_green;
+    }
+
+    h3 {
+        color: $oxfordshire_link_colour;
+    }
 }
 
-// So as not to interfere with the Oxfordshire footer, make the fixed nav ("get updates" etc) static.
 .shadow-wrap {
-    position: static;
-    padding-top: 0;
-    margin-bottom: 1em;
+    width: 432px;
+
     ul#key-tools {
-        border-top: none;
-        border-bottom: 1px solid $primary;
+        -webkit-box-shadow: 0em 0px 1em 1em $oxfordshire_very_light_green;
+        -moz-box-shadow: 0em 0px 1em 1em $oxfordshire_very_light_green;
+        box-shadow: 0em 0px 1em 1em $oxfordshire_very_light_green;
+        border-top-width: 2px;
     }
 }
 
+// Stop bottom of update form disappearing behind the #key-tools shadow
+#update_form {
+  padding-bottom: 4em;
+}
+
 #oxford-wrapper #front-main #postcodeForm div {
   border: 1px solid #fff; // because orange "Go" button (see below) abuts this border, looks a tiny bit better if it's not dark green
 
@@ -195,21 +324,48 @@ input.green-btn{
   cursor: pointer;
 }
 
-.big-green-banner {
-    text-align: left;
-    text-transform: inherit;
-    font-family: inherit;
-    font-size: 1.5em;
-    padding: 0.5em 2em 0.5em 0.5em;
-    line-height: 1.3;
-    background: #339e00 url("/cobrands/fixmystreet/images/sprite.png") right -2177px no-repeat;
+.click-the-map {
+    border-bottom-color: $oxfordshire_mid_grey_green;
 
-    .ie6 &, .ie7 & {
-        zoom: 1;
-        position: relative;
+    p {
+        color: $oxfordshire_lt_green;
+        background-image: url(/cobrands/oxfordshire/images/click-map-chevron-small.gif);
     }
 }
 
+#skip-this-step {
+  display: block;
+  color: inherit;
+  margin: 0 -15px;
+  padding: 16px;
+  font-size: 18px;
+  line-height: 20px;
+  border-bottom: 1px solid #E7E1C0;
+  background: #FDF4C5;
+
+  em {
+    font-style: normal;
+    text-decoration: underline;
+    color: $primary;
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+
+  html.js & {
+    // If javascript is enabled, hide the skip link off-screen,
+    // but keep it visible for screen readers.
+    position: absolute;
+    top: -999px;
+
+    &:focus {
+      // And show it again if it receives focus (eg: via tab key)
+      position: static;
+    }
+  }
+}
+
 .extra-text__image {
     float: left;
     margin-right: 1em;
diff --git a/web/cobrands/oxfordshire/oxfordshire.scss b/web/cobrands/oxfordshire/oxfordshire.scss
index d6b31586c..46de1f22b 100644
--- a/web/cobrands/oxfordshire/oxfordshire.scss
+++ b/web/cobrands/oxfordshire/oxfordshire.scss
@@ -7,9 +7,9 @@
 
 
 body {
-  font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; 
-  line-height:18px; 
-  a {text-decoration:none; color:#0c62ba}
+  font-family:"Trebuchet MS",Arial, Helvetica, sans-serif;
+  line-height:18px;
+  a, a:visited {text-decoration:none; color:$oxfordshire_link_colour}
   a { font-size: 1em; } // mySociety
   a:hover {text-decoration:underline}
   margin:0;
@@ -27,15 +27,15 @@ body {
 }
 
 #oxford-header {
-  padding:0 16px 7px 16px; 
-  clear:both; 
-  overflow:hidden; 
-  position:relative; 
+  padding:0 16px 7px 16px;
+  clear:both;
+  overflow:hidden;
+  position:relative;
   width:958px;
 
   /* note================= */
   height: 133px;
-  height:auto !important; 
+  height:auto !important;
   min-height:133px;
   /* note================= */
 
@@ -47,7 +47,7 @@ body {
   a.logo,  a.logo span {width:173px; height:38px; background: url("/cobrands/oxfordshire/images/logo.jpg") no-repeat 0 0;}
 
   h1 {
-    float:left; padding:8px 0 0 10px; margin:0; font-size:1.25em; line-height:normal; 
+    float:left; padding:8px 0 0 10px; margin:0; font-size:1.25em; line-height:normal;
     font-weight:bold; color:#ffffff; white-space:nowrap;font-family:"Trebuchet MS",Tahoma,Arial,sans-serif;
   }
   span.header {
@@ -76,73 +76,71 @@ body {
   }
 }
 
-
-
 #oxford-main-menu {
   clear: both;
   margin: 0;
   padding: 0;
   font-size: 1em;
   position: relative;
-  ul { 
+  ul {
     margin: 0 0 0 330px;
     position: relative;
     li {
       margin: 0;
-      list-style-type: none; 
-      float:left; 
+      list-style-type: none;
+      float:left;
       width:126px;
       text-align:center;
       background: #e0e0e0;
       padding: 8px 0;
-      margin: 0 0 0 2px;  
+      margin: 0 0 0 2px;
     }
   }
   // from occ.css (client site): #main .view-features-for-homepage ul.tabs
   ul.tabs {
-    float:left; 
-    position:relative; 
-    padding:0; 
+    float:left;
+    position:relative;
+    padding:0;
     margin:0.5em 0 0 0;
-    z-index:10; 
+    z-index:10;
     width: 990px;
-    //width:635px; 
-    min-height:32px; 
-    overflow:hidden; 
-    clear:both; 
+    //width:635px;
+    min-height:32px;
+    overflow:hidden;
+    clear:both;
     background: #939393 url("/cobrands/oxfordshire/images/tabs-featured.png") repeat 0 0;
     li {
-      float:left; 
-      padding:0 0 0px 1px; 
-      margin:0; 
-      font:0.813em/27px "Trebuchet MS"; 
-      color:#ffffff; 
-      height:32px; 
+      float:left;
+      padding:0 0 0px 1px;
+      margin:0;
+      font:0.813em/27px "Trebuchet MS";
+      color:#ffffff;
+      height:32px;
       background: #666 url("/cobrands/oxfordshire/images/divider1x32.png") no-repeat 0 0;
     }
     li.first {padding:0; background:none}
     span, // mySociety
     a {
-      display:block; 
-      position:relative; 
-      padding:8px 0 0 0; 
-      font:bold 1em "Trebuchet MS"; 
-      height:24px; 
-      color:#ffffff; 
-      text-align:center; 
-      background: #939393 url("/cobrands/oxfordshire/images/tabs-featured.png") repeat-x 0 0; 
+      display:block;
+      position:relative;
+      padding:8px 0 0 0;
+      font:bold 1em "Trebuchet MS";
+      height:24px;
+      color:#ffffff;
+      text-align:center;
+      background: #939393 url("/cobrands/oxfordshire/images/tabs-featured.png") repeat-x 0 0;
       white-space:nowrap;
     }
     a:hover,
     a:focus {
-      background: none #EA6C18; 
-      background:-moz-linear-gradient(100% 100% 90deg, #ff4401, #EA6C18); 
-      background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#EA6C18), to(#ff4401)); 
+      background: none #EA6C18;
+      background:-moz-linear-gradient(100% 100% 90deg, #ff4401, #EA6C18);
+      background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#EA6C18), to(#ff4401));
       color: #ffffff;
     }
     li span, // mySociety
     li.active a {
-      text-decoration:none; 
+      text-decoration:none;
       background: #4c4c4c url("/cobrands/oxfordshire/images/tabs-featured-on.png") repeat-x 0 0;
     }
     li.active a:hover,
@@ -154,13 +152,13 @@ body {
 }
 
 #oxford-footer {
-  float:left; 
-  display:inline; 
-  margin:0 -8px 0 -8px; 
-  padding:10px 25px 30px 21px; 
-  clear:both; 
-  overflow:hidden; 
-  width:960px; 
+  float:left;
+  display:inline;
+  margin:0 -8px 0 -8px;
+  padding:10px 25px 30px 21px;
+  clear:both;
+  overflow:hidden;
+  width:960px;
   background:#000000 url(/cobrands/oxfordshire/images/footer.jpg) no-repeat bottom left;
   address {float:left; padding:11px 0 0 0; margin:0; color:#989898; font:0.813em arial}
   a {font:1em arial; color:#ffffff; margin:0px 5px 0px 5px}
@@ -190,7 +188,7 @@ body {
 }
 
  /* ---------------------------------------------------------------------------------
-    oxfordshire nav menubar from e.g., 
+    oxfordshire nav menubar from e.g.,
     http://fisd.oxfordshire.gov.uk/kb5/oxfordshire/fsd/includes/css/wireframe/navbar.css
   ---------------------------------------------------------------------------------*/
 
diff --git a/web/cobrands/oxfordshire/position_map.js b/web/cobrands/oxfordshire/position_map.js
index 9e299ea72..bcd0e0c12 100644
--- a/web/cobrands/oxfordshire/position_map.js
+++ b/web/cobrands/oxfordshire/position_map.js
@@ -1,28 +1,22 @@
-/**
- * Position the map box correctly on window resize.
- *
- * Called from fixmystreet.js when the window 'resize' event is fired
- * and the page is transitioning to a desktop version.
- */
 function position_map_box() {
     var $html = $('html');
-    var oxfordshire_right;
-    if ($html.hasClass('ie6') || $html.hasClass('ie7')) {
-        oxfordshire_right = '-480px';
+    if ($html.hasClass('ie6')) {
+        $('#map_box').prependTo('body').css({
+            zIndex: 0, position: 'absolute',
+            top: 0, left: 0, right: 0, bottom: 0,
+            width: '100%', height: $(window).height(),
+            margin: 0
+        });
     } else {
-        oxfordshire_right = '0em';
+        $('#map_box').prependTo('body').css({
+            zIndex: 0, position: 'fixed',
+            top: 0, left: 0, right: 0, bottom: 0,
+            width: '100%', height: '100%',
+            margin: 0
+        });
     }
-
-    var map_box_width = "956px";
-    var map_box_height = "600px";
-    // Do the same as CSS (in case resized from mobile).
-    $('#map_box').prependTo('.wrapper').css({
-        zIndex: 1, position: 'absolute',
-        top: '1em', left: '', right: oxfordshire_right, bottom: '',
-        width: map_box_width, height: map_box_height,
-        margin: "0 1em"
-    });
 }
 
 function map_fix() {}
-var slide_wards_down = 1;
+var slide_wards_down = 0;
+