Zurich state banner display.

3 files changed, 38 insertions, 2 deletions

diff --git a/web/cobrands/zurich/_colours.scss b/web/cobrands/zurich/_colours.scss
index d21bc6e38..8187f0c68 100644
--- a/web/cobrands/zurich/_colours.scss
+++ b/web/cobrands/zurich/_colours.scss
@@ -10,7 +10,7 @@ $primary_text: #fff;
 $col_click_map: $lighter_blue;
 $col_click_map_dark: darken($lighter_blue, 20%);
 
-$col_fixed_label: #00BD08;
+$col_fixed_label: #648721;
 $col_fixed_label_dark: #4B8304;
 
 // Zurich admin tables:
@@ -21,4 +21,4 @@ $table_heading_border_col:   #7a7a7a;
 $table_heading_col:    #fff;
 $table_heading_underline_col: #393939;
 $button_col:    #fff;
-$button_bg_col: #a1a1a1;  // also search bar (tables)
\ No newline at end of file
+$button_bg_col: #a1a1a1;  // also search bar (tables)
diff --git a/web/cobrands/zurich/base.scss b/web/cobrands/zurich/base.scss
index 28ce8295c..9e434b5c9 100644
--- a/web/cobrands/zurich/base.scss
+++ b/web/cobrands/zurich/base.scss
@@ -18,3 +18,21 @@
     color: #666;
     font-size: 85%;
 }
+
+// Simplify the banner to just be a floated box. Colours etc. still
+// inherited from the base stylesheet.
+.banner {
+    p {
+        position: static;
+        float: right;
+        font-weight: bold;
+        padding: 1em;
+        margin: 0;
+        text-transform: uppercase;
+        text-align: center;
+        &:before {
+            display: none;
+        }
+    }
+}
+
diff --git a/web/cobrands/zurich/layout.scss b/web/cobrands/zurich/layout.scss
index 82ae2be75..b6e8337e1 100644
--- a/web/cobrands/zurich/layout.scss
+++ b/web/cobrands/zurich/layout.scss
@@ -78,3 +78,21 @@ body.twothirdswidthpage {
     }
 }
 
+// Zurich base has made this a more simple construct. The top is to pull it up
+// over the content padding to be attached to the top of the content area.
+// We reduce the padding as no pin image, and change the background.
+.banner {
+    top: -1em;
+    p {
+        &#fixed {
+            padding-top: 2em;
+            @include background(linear-gradient(#769643, #648721 4px));
+        }
+    }
+}
+.ie6 .banner p {
+    &#fixed {
+        background-image: none;
+    }
+}
+