initial desktop style (and some example tweaks to the markup…)

Signed-off-by: Josh Angell <josh@supercooldesign.co.uk>

4 files changed, 326 insertions, 282 deletions

diff --git a/templates/web/fixmystreet/footer.html b/templates/web/fixmystreet/footer.html
index f7513e1d6..e275a3b9b 100644
--- a/templates/web/fixmystreet/footer.html
+++ b/templates/web/fixmystreet/footer.html
@@ -1,35 +1,30 @@
             </div><!-- .content role=main -->
         </div><!-- .container -->
 
-    </div> <!-- .wrapper -->
-
-
-    
-    
-    <div class="nav-wrapper">
-        <div class="header">
-            <div id="main-nav" role="navigation">
-                <ul id="mysoc-menu">
-                    <li><a href="http://www.mysociety.org/">mySociety</a></li>[%
-                    %]<li><a href="http://mysociety.org/donate/">Donate</a></li>[%
-                    %]<li><a href="http://www.mysociety.org/projects/">Our Sites</a></li>
-                </ul>
-
-                <ul id="main-menu">
-                    <li><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END
-                        %]>[% loc("Report a problem") %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[%
-                    %]<li><[% IF c.req.uri.path == '/my' %]span[% ELSE %]a href="/my"[% END
-                        %]>[% loc("Your reports") %]</[% c.req.uri.path == '/my' ? 'span' : 'a' %]></li>[%
-                    %]<li><[% IF c.req.uri.path == '/reports' %]span[% ELSE %]a href="/reports"[% 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 class="nav-wrapper">
+            <div class="nav-wrapper-2">
+                <div id="main-nav" role="navigation">
+                    <ul id="mysoc-menu">
+                        <li><a href="http://www.mysociety.org/">mySociety</a></li>[%
+                        %]<li><a href="http://mysociety.org/donate/">Donate</a></li>[%
+                        %]<li><a href="http://www.mysociety.org/projects/">Our Sites</a></li>
+                    </ul>
+
+                    <ul id="main-menu">
+                        <li><[% IF c.req.uri.path == '/' %]span[% ELSE %]a href="/"[% END
+                            %]>[% loc("Report a problem") %]</[% c.req.uri.path == '/' ? 'span' : 'a' %]></li>[%
+                        %]<li><[% IF c.req.uri.path == '/my' %]span[% ELSE %]a href="/my"[% END
+                            %]>[% loc("Your reports") %]</[% c.req.uri.path == '/my' ? 'span' : 'a' %]></li>[%
+                        %]<li><[% IF c.req.uri.path == '/reports' %]span[% ELSE %]a href="/reports"[% 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>
 
 <!-- <div id="footer">
 
@@ -52,6 +47,6 @@
 </div> -->
 
 <!-- [% INCLUDE 'debug_footer.html' %] -->
-
+    </div> <!-- .wrapper -->
 </body>
-</html>
+</html>
\ No newline at end of file
diff --git a/templates/web/fixmystreet/report/display.html b/templates/web/fixmystreet/report/display.html
index 9670a6810..0cdfae49f 100644
--- a/templates/web/fixmystreet/report/display.html
+++ b/templates/web/fixmystreet/report/display.html
@@ -14,9 +14,7 @@
 <div id="side">
 
 [% IF banner.id %]
-<p class="banner" id="[% banner.id %]">
-    [% banner.text %]
-</p>
+    <p class="banner" id="[% banner.id %]">[% banner.text %]</p>
 [% END %]
 
 [% INCLUDE 'report/_main.html' %]
@@ -54,146 +52,113 @@
 [% INCLUDE 'report/updates.html' %]
 
 <div id="update_form">
-
-    <h2>
-        [% loc( 'Provide an update') %]
-    </h2>
+    <h2>[% loc( 'Provide an update') %]</h2>
 
     [% IF c.cobrand.moniker != 'emptyhomes' %]
-    <p>
-    <small>[% loc( 'Please note that updates are not sent to the council. If you leave your name it will be public. Your information will only be used in accordance with our <a href="/faq#privacy">privacy policy</a>' ) %]</small>
-    </p>
+    <p><small>[% loc( 'Please note that updates are not sent to the council. If you leave your name it will be public. Your information will only be used in accordance with our <a href="/faq#privacy">privacy policy</a>' ) %]</small></p>
     [% END %]
 
     [% INCLUDE 'errors.html' %]
 
-    <form method="post" action="[% c.uri_for( '/report/update' ) %]" name="updateForm" class="fieldset validate"[% IF c.cobrand.allow_photo_upload %] enctype="multipart/form-data"[% END %]>
+    <form method="post" action="[% c.uri_for( '/report/update' ) %]" name="updateForm" class="validate"[% IF c.cobrand.allow_photo_upload %] enctype="multipart/form-data"[% END %]>
+        <fieldset>
 
-        <input type="hidden" name="submit_update" value="1">
-        <input type="hidden" name="id" value="[% problem.id | html %]">
+            <input type="hidden" name="submit_update" value="1">
+            <input type="hidden" name="id" value="[% problem.id | html %]">
 
-        [% IF field_errors.update %]
-            <div class='form-error'>[% field_errors.update %]</div>
-        [% END %]
-        <div class="form-field">
-            <label for="form_update">[% loc( 'Update:' ) %]</label>
-            <textarea name="update" id="form_update" rows="7" cols="30" required>[% update.text | html %]</textarea>
-        </div>
-
-        [% IF c.user && c.user.belongs_to_council( problem.council ) %]
-        <div class="form-field">
-            <label for="form_state">[% loc( 'State:' ) %]</label>
-            <select name="state" id="form_state">
-            [% FOREACH state IN [ ['confirmed', loc('Open')], ['investigating',
-            loc('Investigating')], ['planned', loc('Planned')], ['in progress',
-            loc('In Progress')], ['closed', loc('Closed')], ['fixed', loc('Fixed')] ] %]
-                <option [% 'selected ' IF state.0 == problem.state %] value="[% state.0 %]">[% state.1 %]</option>
+            [% IF field_errors.update %]
+                <div class='form-error'>[% field_errors.update %]</div>
             [% END %]
-            </select>
-        </div>
-        [% ELSE %]
-            [% IF problem.is_fixed AND c.user_exists AND c.user.id == problem.user_id %]
-            <div class="checkbox">
-             <input type="checkbox" name="reopen" id="form_reopen" value="1"[% ' checked' IF update.mark_open %]>
-             <label for="form_reopen">[% loc('This problem has not been fixed') %]</label>
-            </div>
-            [% ELSIF !problem.is_fixed %]
-            <div class="checkbox">
-             <input type="checkbox" name="fixed" id="form_fixed" value="1"[% ' checked' IF update.mark_fixed %]>
-             <label for="form_fixed">[% loc('This problem has been fixed') %]</label>
-            </div>
+            
+            <label for="form_update">[% loc( 'Update:' ) %]</label>
+            <textarea name="update" id="form_update" required>[% update.text | html %]</textarea>
+
+            [% IF c.user && c.user.belongs_to_council( problem.council ) %]
+                <label for="form_state">[% loc( 'State:' ) %]</label>
+                <select name="state" id="form_state">
+                [% FOREACH state IN [ ['confirmed', loc('Open')], ['investigating',
+                loc('Investigating')], ['planned', loc('Planned')], ['in progress',
+                loc('In Progress')], ['closed', loc('Closed')], ['fixed', loc('Fixed')] ] %]
+                    <option [% 'selected ' IF state.0 == problem.state %] value="[% state.0 %]">[% state.1 %]</option>
+                [% END %]
+                </select>
+            [% ELSE %]
+                [% IF problem.is_fixed AND c.user_exists AND c.user.id == problem.user_id %]
+                
+                <input type="checkbox" name="reopen" id="form_reopen" value="1"[% ' checked' IF update.mark_open %]>
+                <label class="inline" for="form_reopen">[% loc('This problem has not been fixed') %]</label>
+                
+                [% ELSIF !problem.is_fixed %]
+                
+                <input type="checkbox" name="fixed" id="form_fixed" value="1"[% ' checked' IF update.mark_fixed %]>
+                <label class="inline" for="form_fixed">[% loc('This problem has been fixed') %]</label>
+
+                [% END %]
             [% END %]
-        [% END %]
 
         [% IF c.cobrand.allow_photo_upload %]
-        [% IF field_errors.photo %]
-            <div class='form-error'>[% field_errors.photo %]</div>
-        [% END %]
-        <div id="fileupload_normalUI">
-        [% IF upload_fileid %]
-            <p>[% loc('You have already attached a photo to this update, attaching another one will replace it.') %]</p>
-            <input type="hidden" name="upload_fileid" value="[% upload_fileid %]">
-        [% END %]
-        <label for="form_photo">[% loc('Photo:') %]</label>
-        <input type="file" name="photo" id="form_photo" style="width:20em">
-        </div>
-        [% END %]
+            [% IF field_errors.photo %]
+                <p class='form-error'>[% field_errors.photo %]</p>
+            [% END %]
 
-[% IF c.user_exists %]
+            <div id="fileupload_normalUI">
+            [% IF upload_fileid %]
+                <p>[% loc('You have already attached a photo to this update, attaching another one will replace it.') %]</p>
+                <input type="hidden" name="upload_fileid" value="[% upload_fileid %]">
+            [% END %]
+                <label for="form_photo">[% loc('Photo:') %]</label>
+                <input type="file" name="photo" id="form_photo">
+            </div>
+        [% END %]
 
-    [% INCLUDE name %]
+        [% IF c.user_exists %]
 
-        <div class="checkbox">
+            [% INCLUDE name %]
+            
             <input type="submit" id="update_post" value="[% loc('Post') %]">
-        </div>
-
-[% ELSE %]
-
-    [% IF field_errors.email %]
-        <div class='form-error'>[% field_errors.email %]</div>
-    [% END %]
-    <div class="form-field">
-        <label for="form_rznvy">[% loc('Your email:' ) %]</label>
-        <input type="email" name="rznvy" id="form_rznvy" value="[% update.user.email | html %]" size="30" required>
-    </div>
+                
 
-<div id="form_sign_in">
-    <h3>[% loc("Now to submit your update&hellip; do you have a FixMyStreet password?") %]</h3>
-
-    <div id="form_sign_in_yes">
-
-        [% IF field_errors.password %]
-            <div class='form-error'>[% field_errors.password %]</div>
-        [% END %]
+        [% ELSE %]
 
-        <p>
-        <label class="n" for="password_sign_in">[% loc('<strong>Yes</strong>, I have a password:') %]</label>
-        <input type="password" name="password_sign_in" id="password_sign_in" value="" size="25">
-        </p>
+            [% IF field_errors.email %]
+                <p class='form-error'>[% field_errors.email %]</p>
+            [% END %]
 
-        <div class="fieldset">
+            <label for="form_rznvy">[% loc('Your email:' ) %]</label>
+            <input type="email" name="rznvy" id="form_rznvy" value="[% update.user.email | html %]" required>
 
-        <p>
-        <input type="checkbox" id="remember_me" name="remember_me" value='1'[% ' checked' IF remember_me %]>
-        <label class="n" for="remember_me">
-        [% loc('Keep me signed in on this computer') %]
-        </label>
-        </p>
+            <div id="form_sign_in">
+                <h3>[% loc("Now to submit your update&hellip; do you have a FixMyStreet password?") %]</h3>
 
-        <p>
-        <input type="submit" name="submit_sign_in" id="submit_sign_in" value="[% loc('Post') %]">
-        </p>
+                <div id="form_sign_in_yes">
+                    [% IF field_errors.password %]
+                        <p class='form-error'>[% field_errors.password %]</p>
+                    [% END %]
 
-        </div>
+                    <label class="n" for="password_sign_in">[% loc('<strong>Yes</strong>, I have a password:') %]</label>
+                    <input type="password" name="password_sign_in" id="password_sign_in" value="">
 
-    </div>
-    <div id="form_sign_in_no">
+                    <input type="checkbox" id="remember_me" name="remember_me" value='1'[% ' checked' IF remember_me %]>
+                    <label class="inline n" for="remember_me">[% loc('Keep me signed in on this computer') %]</label>
+                    <input type="submit" name="submit_sign_in" id="submit_sign_in" value="[% loc('Post') %]">
+                </div>
+                <div id="form_sign_in_no">
+                    <p>[% loc('<strong>No</strong>, let me confirm my update by email:') %]</p>
 
-        <p>[% loc('<strong>No</strong>, let me confirm my update by email:') %]</p>
+                    [% INCLUDE name %]
+                    
+                    <label for="password_register">[% loc('Enter a new password:') %]</label>
+                    <input type="password" name="password_register" id="password_register" value="">
 
-        <div class="fieldset">
+                    <p><small>[% loc('Providing a password is optional, but doing so will allow you to more easily report problems, leave updates and manage your reports.') %]</small></p>
 
-            [% INCLUDE name %]
+                    <input type="submit" name="submit_register" id="submit_register" value="[% loc('Post') %]">
+                </div>
 
-            <div class="form-field">
-                <label for="password_register">[% loc('Enter a new password:') %]</label>
-                <input type="password" name="password_register" id="password_register" value="" size="25">
             </div>
 
-        <p style="clear:both"><small>[% loc('Providing a password is optional, but doing so will allow you to more easily report problems, leave updates and manage your reports.') %]</small></p>
-
-        <p>
-        <input type="submit" name="submit_register" id="submit_register" value="[% loc('Post') %]">
-        </p>
-
-        </div>
-
-    </div>
-
-</div>
-
-[% END %]
-
+        [% END %]
+        </fieldset>
     </form>
 </div>
 
@@ -203,22 +168,18 @@
 
 [% BLOCK name %]
     [% IF field_errors.name %]
-        <div class='form-error'>[% field_errors.name %]</div>
+        <p class='form-error'>[% field_errors.name %]</p>
     [% END %]
 
-    <div>
-        <label for="form_name">[% loc('Your name:') %]</label>
-        <input type="text" name="name" id="form_name" value="[% update.name || c.user.name | html %]" size="25">
-    </div>
-
-    <div class="checkbox">
-        <input type="checkbox" name="may_show_name" id="form_may_show_name" value="1"[% ' checked' UNLESS update.anonymous %]>
-        <label for="form_may_show_name">[% loc('Show my name publicly') %]</label>
-        <small>[% loc('(we never show your email)') %]</small>
-    </div>
-
-    <div class="checkbox">
-        <input type="checkbox" name="add_alert" id="form_add_alert" value="1"[% ' checked' IF add_alert %]>
-        <label for="form_add_alert">[% loc( 'Alert me to future updates' ) %]</label>
-    </div>
+    <label for="form_name">[% loc('Your name:') %]</label>
+    <input type="text" name="name" id="form_name" value="[% update.name || c.user.name | html %]" size="25">
+
+
+    <input type="checkbox" name="may_show_name" id="form_may_show_name" value="1"[% ' checked' UNLESS update.anonymous %]>
+    <label class="inline" for="form_may_show_name">[% loc('Show my name publicly') %]</label>
+    <p><small>[% loc('(we never show your email)') %]</small></p>
+
+
+    <input type="checkbox" name="add_alert" id="form_add_alert" value="1"[% ' checked' IF add_alert %]>
+    <label class="inline" for="form_add_alert">[% loc( 'Alert me to future updates' ) %]</label>
 [% END %]
diff --git a/web/cobrands/fixmystreet/base.scss b/web/cobrands/fixmystreet/base.scss
index 90c0eef0c..baaee2f9c 100644
--- a/web/cobrands/fixmystreet/base.scss
+++ b/web/cobrands/fixmystreet/base.scss
@@ -92,6 +92,13 @@ p {
   margin:0 0 1em 0;
 }
 
+small{
+    font-family: 'helvetica', 'arial',sans-serif;
+    font-style: italic;
+    font-size: 0.8125em;
+    line-height: 1.2307em;
+}
+
 h1 {
   font-family:'Museo300-display', 'Helvetica', 'Arial', sans-serif;
   font-size: 2em;
@@ -198,24 +205,11 @@ a {
 
 /*CUSTOM TYPE*/
 
-h4.static{
-  font-family: 'helvetica', 'arial',sans-serif;
-  text-transform: uppercase;
-  font-size: 0.875em;
-  line-height: 1.71428em;
-  color:#888;
-  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;  
+.small-print {
+    @extend small;
+    margin-bottom: 1.2307em;  
+    color:#888888;  
 }
-
-
 .meta{
     color:#555555;
     font-style: italic;
@@ -228,15 +222,21 @@ h4.static-with-rule{
     font-size: 0.75em;
 }
 
-.small-print{
+h4.static{
     font-family: 'helvetica', 'arial',sans-serif;
-    font-style: italic;
-    font-size: 0.8125em;
-    line-height: 1.2307em;
-    margin-bottom: 1.2307em;  
-    color:#888888;  
+    text-transform: uppercase;
+    font-size: 0.875em;
+    line-height: 1.71428em;
+    color:#888;
+    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;  
 }
-
 
 /*FORM*/
 fieldset{
@@ -296,11 +296,14 @@ label{
   margin: 0em -1em 0 -1em;
 }
 
-// #header creates grey bar in mobile, .header is used on desktop
+// #header creates grey bar in mobile, .nav-wrapper-2 is used on desktop
 #header{
   @include background-image(linear-gradient(#000, #222 10%, #222 90%, #000));
   border-top: 0.25em solid $primary;
   height: 4em;
+  .container {
+    min-height:4em;
+  }
   #site-logo{
     width: 175px;
     height: 40px;
diff --git a/web/cobrands/fixmystreet/layout.scss b/web/cobrands/fixmystreet/layout.scss
index 15b8002ef..15bb3e8f3 100644
--- a/web/cobrands/fixmystreet/layout.scss
+++ b/web/cobrands/fixmystreet/layout.scss
@@ -1,139 +1,224 @@
+@import "compass";
 @import "_colours";
+@import "_mixins";
 
-body {
-    margin: 7px 0 0 0;
-    padding: 0;
-    background-color: #3c3c3c;
-    background-image: url(/cobrands/fixmystreet/texture.png);
+
+//hacks for desk/mob only stuff
+.desk-only {
+  display:block !important;
+}
+.mob-only {
+  display:none !important;
 }
 
-#wrapper2 {
-    padding: 0 0.5em;
+
+// Page wrapper and header bits follow
+
+.container{
+  margin: 0 auto;
+  padding: 0em;
+  width: 60em;
+  position: relative;
 }
 
-/* A third wrapper is needed because display:table cannot be given a max-width.
- * The other two wrappers (to set full width white background and the
- * max-width, are defined in base.scss. */
-#wrapper3 {
-    display: table;
-    caption-side: top;
-    width: 100%;
-    background-color: #fff;
+.wrapper{ 
+  display: table;
+  caption-side: top;
+  width: 100%;
 }
 
-/* As the navigation is put in place using position:absolute in IE6+7, add some
- * extra space here to cover it. */
-.ie6, .ie7 {
-    #wrapper3 {
-        padding-top: 2em;
+.nav-wrapper{
+  display: table-caption;
+    .nav-wrapper-2{
+        background: #222;
+        width: 100%;
+        height: 3.5em;
+        position: fixed;
+        border-top: 0.25em solid $primary;
+        z-index:2;
+        @include background(linear-gradient(#000, #222 10%, #222 90%, #000));
     }
 }
 
-#meta {
-    float: right;
-    margin: -3em 0 0 1em;
-}
 
-#mysociety {
-    padding: 0 0 1em 0;
+// Resets a lot of the mobile styling. #header only used to help position logo on desktop
+#header{
+  height: auto;
+  background: none;
+  border-top: 0px;
+  #site-logo{
+    margin-top: 0.75em;
+    position: fixed;
+    z-index: 3;
+  }
+}
+
+
+#main-nav{
+  margin: 0 auto;
+  padding: 0em;
+  width: 60em;
+  
+  ul{
+    list-style: none;
+    padding: 0px;
+    margin: 0px;
+    float:right;
+    li{
+      list-style: none;
+      display: inline;
+      margin: 0px;
+      padding: 0px;
+      float:left;
+      a{
+        display: block;
+        color:#fff;
+        background: none;  
+        border-bottom: none;      
+      }
+    }
+    &#main-menu{
+      li{
+        a{
+          padding: 1em 0.75em 1.3em 0.75em;
+          font-size: 0.9em;
+          &:hover{
+          @include background(linear-gradient(#000, #444 10%, #444 95%, #111));
+          }
+        }
+      }
+    }
+    &#mysoc-menu{
+        padding: 0em 0.5em;
+        margin-left: 0.25em;
+        background:$primary;
+        @include border-radius(0 0 0.25em 0.25em);
+        @include box-shadow(0em 0.3em 0.1em 0em #000);
+        li{
+            a{
+                color:#000;
+                text-transform: uppercase;
+                font-size: 0.75em;
+                padding: 1.25em 0.3em 0.75em 0.3em;
+                &:hover{
+                    color:#fff;
+                }
+            }
+        }
+    }
+  }
 }
 
-/* Giving this a display: table-caption, and #wrapper3 a caption-side: top,
- * means that this div appears above the main content, even though it is below
- * it in source order. */
-#navigation {
-    border: none;
-    padding-top: 0;
-    margin: 0;
-    display: table-caption;
-    line-height: 1.2;
-}
 
-#navigation .spacer {
-    display: table-cell;
-    width: 100%;
-}
 
-/* The two lists in the navigation are displayed as simple horizontal lists in
- * table cells. */
-.nav {
-    display: table-cell;
-    width: auto;
-    white-space: nowrap;
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-    vertical-align: top;
-}
 
-.nav li {
-    display: inline-block;
-}
+// .content Is the white box
 
-.nav a, .nav span {
-    text-decoration: none;
-    display: block;
-    padding: 10px;
+// The narrow single column box
+.content{
+  width: 27em;
+  margin-top: 3em;
+  background: #fff;
+  padding: 1em;
+  padding-bottom: 3em;
+  margin-left: 0.5em;
+  margin-bottom: -1em;
+  @include box-shadow(0px 0px 6px 1px #000);
 }
 
-.nav span {
-    text-decoration: underline;
+#map_box{
+  position: absolute;
+  height: 25em;
+  width: 30em;
+  right: 0em;
+  top: 0em;
+  z-index:1;
 }
 
-#site-nav a, #site-nav span {
-    color: $colour;
-    padding: 9px 20px 8px 0px;
-}
 
-#site-nav a:hover {
-    color: #000;
+
+
+
+// Wraps around #key-tools to bo
+.shadow-wrap{
+    position:fixed;
+    bottom: 0em;
+    margin-left: -1em;
+    width: 29em;
+    overflow: hidden;
+    padding-top: 3em;
+    // List sticks to the bottom of the page on desktop
+    ul#key-tools{
+      border-top: 0.25em solid $primary;
+      @include box-shadow(-0em 0px 1em 1em #fff);
+      display: block;
+      overflow:hidden;
+      background: #f6f6f6;
+      li{
+        display: inline;
+        a{
+          font-family: 'helvetica', 'arial',sans-serif;
+          font-size: 0.75em;
+          color:#888888;  
+          background: none;      
+          padding: 0.5em 0;
+        }
+      }
+    }
 }
 
+.full-width{
+    margin: 0 0 0em -1em;
+    width: 29em;
+}
 
 
-#footer p {
-    text-align: center;
-    display: table-cell;
-    width: 31%;
-    padding: 0 1%;
-    margin: 0;
+/*FORMS*/
+input[type=text],
+textarea{
+    width: 25em;
 }
 
-/* IE6 and IE7 do no understand display:table, but we'd like them to get the
- * grasp of the right thing, rather than the mobile-first default. So move the
- * navigation bar into place with position:absolute, and float all the list
- * items. */
-.ie6, .ie7 {
-
-    #navigation {
-        position: absolute;
-        top: 7px;
-        right: 0;
-        width: 47em;
-    }
 
-    #navigation .spacer {
-        display: none;
+
+/* MEDIA QUERIES */
+@media only screen and (min-width: 640px) and (max-width: 960px) {
+    .container {
+        width: 100%;
     }
 
-    .nav {
-        float: left;
+    // Remove central positioning of mainmenu and float right.
+    // Left padding is to ensure no overlap of the site-logo
+    // Background styling replicates header styling
+
+    #main-nav{
+        width: auto;
+        float:right;
+        padding-left: 180px;
+        background: #222;
+        @include background(linear-gradient(#000, #222 10%, #222 90%, #000));
     }
 
-    .nav li {
-        float: left;
-        display: block;
+    //Main menu drops below logo and my-soc menu
+    #main-menu{
+        margin-top: 3em;
     }
 
-    .nav a {
-        display: block;
+    //Map become percentage width
+    #map_box{
+        width: 40%;
+        margin-right: 5%;
     }
 
-    #footer p {
-        text-align: left;
+    //Revert to mobile use of the .full-width class
+    .full-width{
         width: auto;
-        padding: 0;
-        margin: 0.5em 0;
+        margin: 0em -1em 0 -1em;
     }
 
-}
+    //Remove all styling from the .content box
+    .content{ 
+        width: 50%;
+        @include box-shadow(0px 0px 0px 0px #000); 
+    }
+}
\ No newline at end of file