Simplify .container width calculations

Removing the explicit width lets .container scale down nicely to the
"middle" 48-60em screen width range without its contents hitting the
sides of the window (as previously happened).

18 files changed, 101 insertions, 221 deletions

diff --git a/web/cobrands/angus/_colours.scss b/web/cobrands/angus/_colours.scss
index fd59b3ef9..31974efa0 100644
--- a/web/cobrands/angus/_colours.scss
+++ b/web/cobrands/angus/_colours.scss
@@ -31,3 +31,5 @@ $col_click_map_dark: darken($col_click_map, 10%);
 
 $col_fixed_label: $angus_green;
 $col_fixed_label_dark: darken($col_click_map, 10%);
+
+$container-max-width: 1200px;
diff --git a/web/cobrands/angus/layout.scss b/web/cobrands/angus/layout.scss
index 0bce8f06d..9429913b4 100644
--- a/web/cobrands/angus/layout.scss
+++ b/web/cobrands/angus/layout.scss
@@ -2,13 +2,10 @@
 @import "_fonts";
 @import "../sass/layout";
 
-$max_page_width: 1200px;
-
 #site-logo {
     width: 165px;
     height: 66px;
     padding: 0.75em 0;
-    margin: 0 1em;
 }
 
 #site-header {
@@ -27,7 +24,7 @@ $max_page_width: 1200px;
     box-sizing: border-box;
     position: absolute;
     bottom: 0;
-    right: 0;
+    right: 1em;
 
     .field {
       min-width: 13em;
@@ -114,37 +111,30 @@ $max_page_width: 1200px;
 
   #front-main-container {
     background-color: $angus_light_grey;
-    width: 100%;
-    max-width: $max_page_width;
+    max-width: $container-max-width;
     padding-top: 1em;
     padding-bottom: 1em;
   }
 }
 
-body.fullwidthpage, body.twothirdswidthpage, body.authpage {
-  .container {
-    max-width: $max_page_width;
-    width: 100%;
-
-    .content {
-      background: $angus_light_grey;
-      background-color: $angus_light_grey;
-    }
+body.fullwidthpage,
+body.twothirdswidthpage,
+body.authpage {
+  .content {
+    background: $angus_light_grey;
+    background-color: $angus_light_grey;
   }
 }
 
 body.frontpage {
-  .container {
-    .content {
-      background: $base_bg;
-      background-color: $base_bg;
-    }
+  .content {
+    background: $base_bg;
+    background-color: $base_bg;
   }
 }
 
 body.twothirdswidthpage .content .sticky-sidebar {
-    z-index: 0;
-    left: 43em;
+    padding-left: 1em;
 
     aside {
         top: 198px;
@@ -344,7 +334,7 @@ body.mappage {
 
   footer {
     font-size: 0.8em;
-    max-width: $max_page_width;
+    max-width: $container-max-width;
     margin: 0 auto;
     padding-top: 3em;
     padding-left: 3em;
diff --git a/web/cobrands/bromley/_colours.scss b/web/cobrands/bromley/_colours.scss
index 9cdf8bdb3..53dfcfc8a 100644
--- a/web/cobrands/bromley/_colours.scss
+++ b/web/cobrands/bromley/_colours.scss
@@ -22,3 +22,6 @@ $col_fixed_label: $bromley_blue;
 $col_fixed_label_dark: darken($bromley_blue, 10%);
 
 $header-top-border-width: 4px;
+
+// Override the container width to match Bromley' site, which is wider
+$container-max-width: 1200px;
diff --git a/web/cobrands/bromley/layout.scss b/web/cobrands/bromley/layout.scss
index cfb5981a9..d308daa4b 100644
--- a/web/cobrands/bromley/layout.scss
+++ b/web/cobrands/bromley/layout.scss
@@ -13,10 +13,6 @@ body.fullwidthpage, body.twothirdswidthpage, body.authpage {
 }
 
 body.mappage {
-  .container {
-    max-width: none;
-  }
-
   .bromley-header {
     margin-bottom: 0;
     padding-top: 0.5em;
@@ -34,12 +30,6 @@ body.mappage {
   }
 }
 
-// Override the container width to match Bromley' site, which is wider
-.container {
-  width: 100%;
-  max-width: 1200px;
-}
-
 #main-nav {
   display: block; // remove flex so nav touches top of parent
   min-height: 0; // no vertical align, so no need for a height
diff --git a/web/cobrands/fixmystreet.com/fmsforcouncils.scss b/web/cobrands/fixmystreet.com/fmsforcouncils.scss
index 253d266c1..1d519c420 100644
--- a/web/cobrands/fixmystreet.com/fmsforcouncils.scss
+++ b/web/cobrands/fixmystreet.com/fmsforcouncils.scss
@@ -16,17 +16,18 @@ $fms-green: #62b356;
     max-width: 100%;
   }
 
-  .wrapper {
-    display: block;
-    @media only screen and (min-width: 48em) {
-      display: table;
-    }
+  // Allow page contents to stretch to edges of window
+  .container {
+    max-width: none;
+    padding: 0;
+  }
 
-    // Allow page contents to stretch to edges of window
-    // (But only inside .wrapper, so not affecting footer!)
+  #site-header,
+  .nav-wrapper,
+  .mysoc-footer {
     .container {
-      width: 100%;
-      padding: 0;
+      max-width: 60em;
+      padding: 0 1em;
     }
   }
 
@@ -47,14 +48,6 @@ $fms-green: #62b356;
     }
   }
 
-  #site-header {
-    .container {
-      @media only screen and (min-width: 60em) {
-        max-width: 60em;
-      }
-    }
-  }
-
   .fixed-container {
     max-width: 90em;
     padding: 0;
@@ -64,9 +57,6 @@ $fms-green: #62b356;
     padding: 0;
     background-color: #fff;
     overflow: hidden;
-    @media only screen and (min-width: 60em) {
-      width: 100%;
-    }
   }
 
   .councils-content-wrapper {
diff --git a/web/cobrands/greenwich/_colours.scss b/web/cobrands/greenwich/_colours.scss
index 21a8dbbf9..447b5a134 100644
--- a/web/cobrands/greenwich/_colours.scss
+++ b/web/cobrands/greenwich/_colours.scss
@@ -25,3 +25,5 @@ $col_click_map: $greenwich_red;
 
 $col_fixed_label: #00BD08;
 $col_fixed_label_dark: #4B8304;
+
+$container-max-width: 990px;
diff --git a/web/cobrands/greenwich/layout.scss b/web/cobrands/greenwich/layout.scss
index e7832f374..c2b50088c 100644
--- a/web/cobrands/greenwich/layout.scss
+++ b/web/cobrands/greenwich/layout.scss
@@ -2,8 +2,6 @@
 @import "_fonts";
 @import "../sass/layout";
 
-$fixed_page_width: 990px;
-
 #site-logo,
 body.frontpage #site-logo,
 body.twothirdswidthpage #site-logo
@@ -18,17 +16,13 @@ body.twothirdswidthpage #site-logo
         height: 83px;
 }
 
-.container, #main-nav {
-    width: $fixed_page_width;
-}
-
 #front-main {
     background-color: $base_bg;
     padding-top: 0.5em;
     text-align: left;
 
     #front-main-container {
-        max-width: $fixed_page_width;
+        max-width: $container-max-width;
         background-color: transparent;
         padding: 1em 0;
     }
@@ -45,9 +39,10 @@ body.twothirdswidthpage #site-logo
 
 #site-header {
     background: none;
+    padding: 0 1em; // "wave" background image means its easier to apply padding here than on .container
 
     .container {
-        position: static;
+        padding: 0; // let the #site-header padding do the work on mid-sized screens
     }
 
     .container:first-child {
@@ -61,10 +56,12 @@ body.frontpage {
         border-left: solid 4px $primary;
     }
 
+    // Greenwich positions the menu visually *below* the h1 on the homepage.
     #fms-menu-desktop {
         position: absolute;
-        width: 990px;
-        top: 262px;
+        left: 0;
+        right: 0;
+        top: 150px;
     }
 }
 
@@ -150,6 +147,7 @@ body.mappage {
         background: $base_bg url("/cobrands/greenwich/mastWave.gif") 100% 0 no-repeat;
         background-size: contain;
 
+        // No more "wave" background on .container
         .container {
             min-height: 0;
             background: transparent;
@@ -173,10 +171,6 @@ body.mappage {
         height: 54px;
     }
 
-    #main-nav {
-        width: auto;
-    }
-
     .nav-wrapper {
         border-bottom: solid 4px $primary;
     }
diff --git a/web/cobrands/hart/_colours.scss b/web/cobrands/hart/_colours.scss
index f72106469..3dce0d9b1 100644
--- a/web/cobrands/hart/_colours.scss
+++ b/web/cobrands/hart/_colours.scss
@@ -20,3 +20,5 @@ $nav_fg_hover: #444;
 $map_nav_bg: $primary;
 $mappage-header-height: 173px + 32px;
 $header-top-border: false;
+
+$container-max-width: 60em;
diff --git a/web/cobrands/hart/layout.scss b/web/cobrands/hart/layout.scss
index 8589a3281..0358aca87 100644
--- a/web/cobrands/hart/layout.scss
+++ b/web/cobrands/hart/layout.scss
@@ -63,33 +63,30 @@ body.twothirdswidthpage .content {
 }
 
 // Menu *under* header - with a full width shadow first
-// The !importants are because we do not want this to be reset on a map page as
-// it otherwise would be.
-
 .container--hart {
     box-shadow: 0 0 20px rgba(0,0,0,0.2); // shadow to add contrast with map
-    width: 100% !important;
-    position: absolute !important;
+    position: absolute;
+    max-width: none;
+    padding: 0;
+    width: 100%;
+
+    body.mappage & {
+        position: absolute; // rather than static
+    }
 }
 
 #main-nav {
     min-height: 0;
     float: none;
-    max-width: 60em; // To have it line up at big widths
-    margin: 11em auto 0; // To push it under heade
+    margin: 11em auto 0; // To push it under header
     background-color: #fff;
-}
 
-body.mappage {
-    #site-logo {
-        // XXX Rather than re-overriding this, and margin-right below, should
-        // the 1em padding be on the header container instead of site-logo/
-        // main-nav, or something?
-        margin-left: 2.25em;
-    }
-    #main-nav {
-        max-width: none; // containers are full width on map page, overriding 60em above
-        margin-right: 0;
+    // #main-nav acts a bit like a .container, so we give it the same max-width.
+    max-width: $container-max-width;
+
+    // And, like other .containers, we remove the max-width on the map page.
+    body.mappage & {
+        max-width: none;
     }
 }
 
diff --git a/web/cobrands/oxfordshire/layout.scss b/web/cobrands/oxfordshire/layout.scss
index a1bee844e..fc89b854f 100644
--- a/web/cobrands/oxfordshire/layout.scss
+++ b/web/cobrands/oxfordshire/layout.scss
@@ -118,10 +118,6 @@ body.mappage {
     padding-right: 0;
   }
 
-  .container {
-    width: auto;
-  }
-
   .extra-text {
     padding: 1em;
     margin: 0 -1em;
diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss
index 76db0efde..c319082a8 100644
--- a/web/cobrands/sass/_base.scss
+++ b/web/cobrands/sass/_base.scss
@@ -14,6 +14,8 @@ $form-control-border-color: #aaaaaa !default;
 $header-top-border-width: 0.25em !default;
 $header-top-border: $header-top-border-width solid $primary !default;
 
+$container-max-width: 60em !default;
+
 @import "_mixins";
 @import "_report_list";
 
@@ -460,8 +462,10 @@ ul.error {
 /*** LAYOUT ***/
 
 // Padding creates page margins on mobile
-.container{
+.container {
+  margin: 0 auto;
   padding: 0 1em;
+  max-width: $container-max-width;
 }
 
 // Use full width to reverse .container margins
diff --git a/web/cobrands/sass/_layout.scss b/web/cobrands/sass/_layout.scss
index 3859f09f6..d273eec1f 100644
--- a/web/cobrands/sass/_layout.scss
+++ b/web/cobrands/sass/_layout.scss
@@ -48,11 +48,8 @@ h1 {
 
 // Page wrapper and header bits follow
 
-.container{
-  margin: 0 auto;
-  padding: 0em;
-  width: 60em;
-  position: relative;
+.container {
+    position: relative;
 }
 
 // Body sometimes has a .top_banner at the start, which we don't want to
@@ -136,19 +133,13 @@ h1 {
 }
 
 // .content Is the white box
-
-// The narrow single column box
 .content {
-  margin: 1em 0.5em 0;
+  margin: 1em 0 0 0;
   padding: 1em;
   background: #fff;
   color: #222;
 }
 
-.full-width {
-  margin: 0 ($mappage-sidebar-padding * -1);
-}
-
 // map page - has fixed header and different styling
 body.mappage {
   .wrapper {
@@ -156,7 +147,7 @@ body.mappage {
   }
 
   .container {
-    width: auto;
+    max-width: none;
     position: static;
   }
 
@@ -165,6 +156,10 @@ body.mappage {
     margin: 0;
   }
 
+  .full-width {
+    margin: 0 ($mappage-sidebar-padding * -1);
+  }
+
   #site-header {
     // With the exception of the #site-logo child, the rest of
     // #site-header gets entirely hidden behind .nav-wrapper-2
@@ -176,14 +171,6 @@ body.mappage {
     height: $mappage-header-height;
   }
 
-  #site-logo {
-    margin-#{$left}: 1em;
-  }
-
-  #main-nav {
-    margin-#{$right}: 1em;
-  }
-
 //  .nav-menu--main a, .nav-menu--main span {
 //    padding: 1.4em 0.75em 1.35em;
 //  }
@@ -480,6 +467,17 @@ body.twothirdswidthpage {
       }
     }
   }
+
+  @media (max-width: 61em) {
+    // make twothirdswidthpage nearly as small as main
+    // .content: just enough to still fit the sidebar in
+    .content {
+      width:30em;
+      .sticky-sidebar {
+        #{$left}: 32em;
+      }
+    }
+  }
 }
 
 // Centre the login and password change pages,
@@ -976,37 +974,3 @@ textarea.form-error {
     float: $right;
     width: 25%;
 }
-
-/* MEDIA QUERIES */
-@media only screen and (min-width: 48em) and (max-width: 61em) {
-  .container {
-      width: 100%;
-  }
-
-  // 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;
-  }
-
-  //Revert to mobile use of the .full-width class
-  .full-width{
-    width: auto;
-    margin: 0em -1em;
-  }
-
-  //make twothirdswidthpage nearly as small as main
-  //.content: just enough to still fit the sidebar in
-  body.twothirdswidthpage {
-    .content {
-      width:30em;
-      .sticky-sidebar {
-        #{$left}: 32em;
-      }
-    }
-  }
-}
diff --git a/web/cobrands/stevenage/_colours.scss b/web/cobrands/stevenage/_colours.scss
index 4ec7950ec..42718421a 100644
--- a/web/cobrands/stevenage/_colours.scss
+++ b/web/cobrands/stevenage/_colours.scss
@@ -16,3 +16,5 @@ $nav_fg_hover: #444;
 $col_click_map: #00BD08;
 $col_fixed_label: #00BD08;
 $col_fixed_label_dark: #4B8304;
+
+$container-max-width: 984px; // to match Stevenage header width
diff --git a/web/cobrands/stevenage/layout.scss b/web/cobrands/stevenage/layout.scss
index fc4033875..93ab23268 100644
--- a/web/cobrands/stevenage/layout.scss
+++ b/web/cobrands/stevenage/layout.scss
@@ -23,11 +23,6 @@
     background-color: #6b6969;
     @include linear-gradient(#6b6969, #555454);
 
-    .container {
-        width: auto;
-        max-width: 984px; // match the Stevenage header width
-    }
-
     .iel8 & {
       background-color: #6b6969;
     }
@@ -112,7 +107,7 @@ body.twothirdswidthpage {
     color: #222;
     margin: 0 auto;
     margin-top: 1.5em;
-    max-width: 60em;
+    max-width: $container-max-width;
 }
 
 // Front page button colour
@@ -139,15 +134,11 @@ body.mappage {
         border-top: none;
     }
 
-    // Over-specific selector required to trump _layout.scss
     .nav-wrapper {
         position: absolute;
         top: 0;
         padding: 0;
         background: #fff url("http://www.stevenage.gov.uk/Images/headerBG.jpg") repeat-x bottom left;
-        .container {
-            max-width: none; // Overriding 984px default above
-        }
     }
 
     // Override the defaults, above
diff --git a/web/cobrands/warwickshire/base.scss b/web/cobrands/warwickshire/base.scss
index 24b01183e..eeefc0d80 100644
--- a/web/cobrands/warwickshire/base.scss
+++ b/web/cobrands/warwickshire/base.scss
@@ -107,17 +107,9 @@ body.mappage > div.container {
     display: block;
 }
 
-@media (max-width: 978px) {
-    .navbar-container {
-        padding: 0;
-        margin: 0;
-    }
-}
-
-// Lifted from bootstrap-responsive.css, no idea why this
-// media query has a different pixel size to the one above...
 @media (max-width: 979px) {
     .navbar-fixed-top .navbar-inner {
-        padding: 0 5px;
+        padding-top: 0;
+        padding-bottom: 0;
     }
 }
diff --git a/web/cobrands/warwickshire/layout.scss b/web/cobrands/warwickshire/layout.scss
index be8a2e591..0415d1f2a 100644
--- a/web/cobrands/warwickshire/layout.scss
+++ b/web/cobrands/warwickshire/layout.scss
@@ -41,65 +41,24 @@ body.twothirdswidthpage .content .sticky-sidebar {
     background: $base_bg;
 }
 
-
-// These bits are taken from Warwickshire's CSS to override default FMS styles
-// The 'body.mappage .container' selector has been added to each so it takes precedent over
-// default FMS style.
-
-// http://www.warwickshire.gov.uk/wp-content/themes/gamma/style.css
-.container {
-  width: 940px;
-}
-
-.navbar .container {
-  width: auto;
-}
-
-.navbar-static-top .container,
-.navbar-fixed-top .container,
-.navbar-fixed-bottom .container,
-body.mappage .container {
-  width: 940px;
-}
-
-body.mappage {
-    .navbar-container {
-        width: auto; // 100% width for the FMS nav links container ONLY
+#top-header {
+    [class*="span"] {
+        margin-left: 2%;
     }
-}
 
-// http://www.warwickshire.gov.uk/wp-content/themes/gamma/bootstrap-responsive.css
-@media (min-width: 1200px) {
-    .container,
-      .navbar-static-top .container,
-      .navbar-fixed-top .container,
-      .navbar-fixed-bottom .container,
-      body.mappage .container {
-        width: 1170px;
+    .span12 {
+        width: 98%;
     }
-}
 
-@media (min-width: 768px) and (max-width: 979px) {
-    .container,
-      .navbar-static-top .container,
-      .navbar-fixed-top .container,
-      .navbar-fixed-bottom .container,
-      body.mappage .container {
-        width: 724px;
-      }
-  }
+    .span3 {
+        width: 23%;
+    }
 
-@media (max-width: 767px) {
-    .container,
-    body.mappage .container {
-        width: auto;
-      }
+    .span9 {
+        width: 73%;
+    }
 }
 
-@media (max-width: 979px) {
-    .navbar .container,
-    body.mappage .container {
-        width: auto;
-        padding: 0;
-      }
-}
+#site-search.navbar-form input {
+    width: 16em;
+}
\ No newline at end of file
diff --git a/web/cobrands/zurich/_zurich.scss b/web/cobrands/zurich/_zurich.scss
index b79803d5e..e4ff44220 100644
--- a/web/cobrands/zurich/_zurich.scss
+++ b/web/cobrands/zurich/_zurich.scss
@@ -16,7 +16,7 @@ a:hover {
     background-image: url(bg_mainnav_portal.png);
     background-repeat: repeat-x;
     border: 1px solid #d8d8d8;
-    width: 953px;
+    max-width: 953px;
     padding: 3px 10px;
     margin-bottom: 24px;
     height: 1.5em
diff --git a/web/cobrands/zurich/layout.scss b/web/cobrands/zurich/layout.scss
index f82fc0fc3..a5e6735d7 100644
--- a/web/cobrands/zurich/layout.scss
+++ b/web/cobrands/zurich/layout.scss
@@ -21,8 +21,10 @@ body.admin .admin-nav-wrapper {
     background-color: #fff;
     border-top: none;
     margin-bottom: 2em;
+
     .container {
         background: #fff url(logo_portal.x.jpg) top left repeat-x;
+        padding: 0;
     }
 }