1 files changed, 312 insertions, 0 deletions
diff --git a/web/cobrands/barnet/layout.scss b/web/cobrands/barnet/layout.scss
new file mode 100644
index 000000000..1f43168d6
--- /dev/null
+++ b/web/cobrands/barnet/layout.scss
@@ -0,0 +1,312 @@
+@import "_colours";
+@import "../fixmystreet/_layout";
+
+// So that map appears underneath the header
+.wrapper {
+    position: relative;
+}
+.ie6, .ie7 {
+    .wrapper {
+        padding-top: 1em;
+    }
+}
+
+#front-main {
+    background: $primary;
+    @include border-radius(1em 1em 0 0);
+    margin-bottom: 1em;
+    padding-top: 0;
+    // layout sets this because base has it slightly lighter
+    h2 {
+        color: $primary_text;
+    }
+}
+
+#front_intro {
+    float: left;
+    margin-right: 3em;
+}
+
+#front_recent {
+    margin-left: 3em;
+}
+
+.content {
+    width: auto;
+}
+
+.nav-wrapper {
+    display: none;
+}
+
+.mappage .content {
+    margin-top: 6em;
+}
+
+.frontpage .content {
+    margin: 0;
+    @include box-shadow(none);
+}
+.ie6, .ie7, .ie8  {
+    .frontpage .content {
+        border: none;
+    }
+}
+
+#content .container h1 {
+    border-bottom: none;
+    font-size: 2em;
+    margin-bottom: 0.5em;
+}
+
+/*
+.mappage #content .container h1 {
+    margin-left: 0;
+}
+*/
+
+#content h1.big-green-banner {
+    font-size: 1em;
+    margin-left: -2em;
+}
+
+/* barnet styles */
+
+.clear {
+    clear: both;
+}
+
+.container {
+  padding: 0 1em;
+}
+
+#site-header {
+    display: none;
+}
+
+#side-form {
+    width: 30em;
+}
+
+#report-a-problem-sidebar {
+    left: 33.5em;
+    top: 7em;
+}
+
+.general-sidebar-notes {
+    left: 31.75em;
+    p {
+        margin-bottom: 0 !important;
+    }
+}
+
+#barnet-wrapper {
+  width: 100%;
+  display: table;
+  caption-side: bottom;
+}
+
+body {font-size: 77%; font-family: Arial, Helvetica, sans-serif; color: #3e3d44; padding: 0; margin: 0; line-height: 1.5; background: #e9e9ea;}
+body > html {font-size: 12px;}
+
+#barnet-wrapper {padding: 0; margin: 20px auto; width: 960px; background: #fff;}
+#ie_wrapper {display: block; padding: 20px 25px 25px;}
+#page {float: left; width: 100%;}
+
+#mast {clear: both;}
+
+#mast .pseudoH1 {margin: 0 0 0 -3px; padding: 0; background: url(img/barnet-logo.gif) no-repeat top left; width: 240px; height: 38px; float: left;}
+#mast .pseudoH1 a, #mast .pseudoH1 a:link, #mast .pseudoH1 a:visited, #mast .pseudoH1 a:hover, #mast .pseudoH1 a:active {display: block; width: 240px; height: 38px; padding: 0; background: url(img/barnet-logo.gif) no-repeat top left;}
+#mast .pseudoH1 span {position: absolute; margin-top: -13000px; top: -13000px;}
+
+#mast .mast_links {float: right; display: inline; margin: 0; padding: 10px 0 0; list-style: none; overflow: hidden;}
+
+#mast #search {clear: both; float: right; margin: 8px 0 0; background: #e1e3e4; border-top: 6px solid #bddadc; border-bottom: 2px solid #c8cacb; width: 100%; padding: 3px 0 2px; height: 21px;}
+
+/* ############################################################## */
+
+#content {margin: 0; width: 910px; overflow: hidden; min-height: 350px;}
+#content.withWidth {margin: 0 0 0 232px; width: 446px; overflow: hidden; float: left; display: inline;}
+#content.fullWidth {width: 678px;}
+#content.home {margin-top: 18px;}
+
+.mappage #content.withWidth {margin: 0 0 0 0px; width: auto; overflow: hidden; float: left; display: inline;}
+.mappage #content.fullWidth {width: 900px;}
+
+#breadcrumb {font-size: .9em; color: #5c6267; padding: 6px 0; margin: 0 0 0 232px;}
+#breadcrumb.full {margin: 0;}
+#breadcrumb ul {margin: 0; padding: 0; list-style: none;}
+#breadcrumb ul li {margin: 0; padding: 0 4px 0 0; display: inline;}
+#breadcrumb ul li a:link, #breadcrumb ul li a:visited, #breadcrumb ul li a:hover, #breadcrumb ul li a:active {color: #5c6267; background: url(../css_img/bcArrow.gif) no-repeat right center; padding: 0 10px 0 0; font-weight: normal;}
+#breadcrumb ul li span {font-weight: normal; color: #5c6267;}
+
+#content h1 {margin: 0 0 20px; font-size: 1.8em; border-bottom: 6px solid #bed9dd; font-family: Georgia, Times, 'Times New Roman', serif; color: #5d6167;}
+#content h1 span {padding: 6px 7px 3px; border: 1px solid #eff1f2; border-bottom: 0 none; display: block;}
+#content h2 {font-size: 1.4em; margin: 18px 0 10px; clear: left;}
+#content h2.signin {font-size: 1.2em; color: #fff; background: #000; padding: 3px 10px; margin-bottom: 0;}
+#content h3 {margin: 18px 0 10px; font-size: 1.2em;}
+#content h3.links-heading {float: left;}
+#content h3#pagenavbox {margin-top: 12px; padding-top: 18px; border-top: 1px solid #e1e1e1;}
+#content h4 {margin: 18px 0 10px; font-size: 1.1em;}
+
+#content p {margin: 0 0 10px;}
+#content p.summary {font-size: 1.1em; line-height: 1.5;}
+#content p.date {margin: 0 0 10px; font-size: .9em; color: #666;}
+#content p.faq {margin: 0 0 9px;}
+#content p.page_down {margin: 0 0 10px; padding-left: 20px; background: url(../css_img/icon_download.gif) no-repeat 0 1px;}
+#content p.news {margin: 0; font-size: 1.1em;}
+#content p.small {font-size: .9em;}
+#content p.note {margin: 0; font-size: .9em; color: #666;}
+#content p.details {margin: 5px 0; padding: 0; font-size: .9em; color: #666;}
+#content p.links-top {float: right; margin-top: 5px; margin-left: 18px;}
+
+#content table {margin: 18px 0; width: 100%;}
+#content table tr {border-width: 0 1px 1px 0; border-style: solid; border-color: #fff; background: #EFF1F2;}
+#content table td {border-width: 0 1px 1px 0; border-style: solid; border-color: #fff; background: #EFF1F2; padding: 5px}
+#content table th {border-width: 0 1px 1px 0; border-style: solid; border-color: #fff; background: #E1E3E4; font-weight: bold; font-size: 1em; line-height: 1.5;}
+#content table caption {font-size: 1.1em;}
+
+#content address {font-style: normal; background: url(../css_img/icon_email.gif) no-repeat 0 4px; padding: 3px 0 15px 20px;}
+
+#content ul li {padding: 0 0 6px;}
+#content ol li {padding: 0 0 6px;}
+
+#content a.icon img {float: left; height: 16px; margin: 0 10px 0 0; width: 16px;}
+
+/* ############################################################## */
+
+#column_nav {width: 214px; float: left; display: inline; padding: 0; margin: -35px 0 0 -910px; border-right: 3px solid #fff;}
+body.mappage #column_nav { display: none; }
+
+
+#column_nav .navigation {background: #fff; margin: 0 0 4px;}
+#column_nav h2 {font-size: 1.2em; padding: 0; height: 29px; margin: 0; border-radius: 0 0 3px 3px; background: url(img/nav-bg-active.gif) left bottom repeat-x; border-top: 6px solid #bddadc;}
+#column_nav #nav1 h2 {border-radius: 0 0 0 3px;}
+#column_nav h2 a {color: #fff; padding: 3px 10px 0 26px; display: block; background: url(img/nav-arrow.gif) 8px 7px no-repeat;}
+#column_nav .active h2 a {background: url(img/nav-arrow-active.gif) 8px 8px no-repeat;}
+#column_nav ul {margin: 0 0 0 4px; padding: 8px 7px 4px; border-width: 0 1px 1px; border-color: #e1e1e1; border-style: solid; border-radius: 3px; list-style: none; background: #fff; background: -moz-linear-gradient(top, #ffffff 0%, #f7f9f8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#f7f9f8)); background: -webkit-linear-gradient(top, #ffffff 0%,#f7f9f8 100%); background: -o-linear-gradient(top, #ffffff 0%,#f7f9f8 100%); background: -ms-linear-gradient(top, #ffffff 0%,#f7f9f8 100%); background: linear-gradient(top, #ffffff 0%,#f7f9f8 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f7f9f8',GradientType=0);}
+#column_nav ul li {margin: 0; padding: 2px 4px; border-bottom: 1px solid #bfc0c1; color: #333; font-size: .9em;}
+#column_nav ul li.lastItem {border-bottom: none;}
+#column_nav ul li a:link, #column_nav ul li a:visited, #column_nav ul li a:hover, #column_nav ul li a:active {display: block; color: #333; font-weight: normal;}
+#column_nav ul li a:hover, #column_nav ul li a:active {text-decoration: none; color: #0090a2;}
+
+/* ############################################################## */
+
+#footer {clear: both; margin: 10px 0 0; padding: 15px 0 0; text-align: left;}
+#footer p {border-top: 1px solid #dadadb; border-bottom: 1px solid #dadadb; margin: 0 0 5px; color: #5d6167; float: left; display: inline; height: 24px; padding: 8px 0 2px; width: 551px;}
+#footer p a {color: #5d6167; font-weight: normal; padding: 0 2px;}
+#footer p.assocLinks {float: right; display: inline; padding: 5px 0; width: 359px;}
+#footer p.assocLinks a {float: left; display: inline; margin: 0 0 0 8px; padding: 0; background-position: center top; background-repeat: no-repeat; width: 24px; height: 24px;}
+#footer p.assocLinks a:active, #footer p.assocLinks a:hover, #footer p.assocLinks a:focus {background-position: center bottom;}
+#footer a#goto_browsealoud {background-image: url(img/browsealoud.gif); width: 95px; height: 25px; margin-top: 1px;}
+#footer a#goto_directgov {background-image: url(img/directgov.gif); width: 90px; margin: 0 0 0 22px;}
+#footer a#share_facebook {background-image: url(img/social1-facebook.gif); margin: 0 0 0 24px;}
+#footer a#share_twitter {background-image: url(img/social2-twitter.gif);}
+#footer a#share_youtube {background-image: url(img/social3-youtube.gif);}
+#footer a#share_flickr {background-image: url(img/social4-flickr.gif);}
+#footer a#share_sharethis {background-image: url(img/social5-sharethis.gif);}
+#bottomBar {background: url(img/barnet-footer-logo.gif) 771px 12px no-repeat #21aaaa; display: block; width: 100%; height: 56px; border-top: 6px solid #bddadc;}
+
+#poweredby {margin: 0 auto; padding: 0 0 18px; display: block; width: 910px; text-align: right; color: #999;}
+#poweredby a {font-weight: normal; color: #999;}
+
+/*
+// Don't want gap that normal site has
+body {
+    .table-cell {
+        .content {
+            margin-left: -20px;
+            margin-top: -120px;
+        }
+    }
+}
+
+.container {
+  width: 446px;
+  padding-left: 232px;
+}
+
+.wrapper {
+  width: 960px;
+}
+
+// Don't want FixMyStreet logo on desktop, and we have a skip to content in
+// Bromley header
+#site-header {
+    display: none;
+}
+
+#site-logo {
+    display: none;
+}
+#user-meta {
+    display: none;
+}
+
+// Currently hiding, but do want some internal navigation somewhere at the end
+.nav-wrapper {
+    display: none;
+}
+
+// White background, so no shadow or margin needed.
+
+// Perhaps fix map location (should be in central?)
+.ie6 #map_box, .ie7 #map_box {
+    right: -32em;
+}
+
+.general-sidebar-notes,
+#report-a-problem-sidebar {
+  position: static;
+  width: auto;
+  @include box-shadow(rgba(0, 0, 0, 0), 0, 0, 0);
+  .sidebar-tips,
+  .sidebar-notes {
+    font-size:1em;
+  }
+}
+
+.ie7 .big-green-banner {
+    right: 0;
+}
+
+// Pull OpenLayers navigation down a bit
+#fms_pan_zoom {
+    top: 0.5em !important;
+}
+
+// Fix location of aside sidebar
+body.twothirdswidthpage {
+    .content {
+        aside {
+            @include box-shadow(none);
+        }
+        .sticky-sidebar {
+            aside {
+                position: absolute;
+                top: 0;
+            }
+        }
+    }
+}
+@media only screen and (min-width: 48em) and (max-width: 61em) {
+    body.twothirdswidthpage {
+        .content {
+            .sticky-sidebar {
+                top: auto;
+            }
+        }
+    }
+}
+
+// So as not to interfere with the Bromley footer, make the fixed nav static.
+.shadow-wrap {
+  position: static;
+  padding-top: 0;
+  margin-bottom: 1em;
+  ul#key-tools {
+    border-top: none;
+    border-bottom: 1px solid $primary;
+  }
+}
+ */