Implemented header background in sass

css/style.css

@@ -3720,9 +3720,9 @@ header.banner .nav-primary ul a.active {
 header.banner .nav-primary ul li a:hover {
   background: #e1662f;
   border-top: 0;
-  -moz-box-shadow: inset 0 2px 2px -2px #777777;
-  -webkit-box-shadow: inset 0 2px 2px -2px #777777;
-  box-shadow: inset 0 2px 2px -2px #777777;
+  -moz-box-shadow: inset 0 2px 2px -2px #777;
+  -webkit-box-shadow: inset 0 2px 2px -2px #777;
+  box-shadow: inset 0 2px 2px -2px #777;
 }
 
 /* line 70, ../sass/core/patterns/_header.scss */
@@ -3801,7 +3801,7 @@ header.banner .nav-primary ul li a:hover {
 
 /* line 124, ../sass/core/patterns/_header.scss */
 header.banner .nav-primary ul li a.active {
-  background-color: #dddddd;
+  background-color: #ddd;
 }
 
 /* line 128, ../sass/core/patterns/_header.scss */
@@ -4087,7 +4087,7 @@ html.no-svg header.banner .logo-ubuntu, .opera-mini header.banner .logo-ubuntu {
 
   /* line 389, ../sass/core/patterns/_header.scss */
   header.banner .nav-primary ul li a.active {
-    background-color: #dddddd;
+    background-color: #ddd;
   }
 
   /* line 393, ../sass/core/patterns/_header.scss */
@@ -4910,7 +4910,7 @@ header.banner .search-toggle {
     -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
     box-sizing: content-box;
-    background: url("//assets.ubuntu.com/sites/ubuntu/latest/u/img/icons/icon-search.png") no-repeat scroll 5px center, none repeat scroll 0 0 #be3d00;
+    background: url("//assets.ubuntu.com/sites/ubuntu/latest/u/img/icons/icon-search.png") no-repeat scroll 5px center, none repeat scroll 0 0 #BE3D00;
     border: 6px solid #DE6532;
     border-width: 0 0 1px;
     color: #fff;
@@ -5238,9 +5238,9 @@ footer.global {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
-  -moz-box-shadow: inset 0 2px 2px -1px lightgray;
-  -webkit-box-shadow: inset 0 2px 2px -1px lightgray;
-  box-shadow: inset 0 2px 2px -1px lightgray;
+  -moz-box-shadow: inset 0 2px 2px -1px #d3d3d3;
+  -webkit-box-shadow: inset 0 2px 2px -1px #d3d3d3;
+  box-shadow: inset 0 2px 2px -1px #d3d3d3;
   background: none;
   border-top: 0;
   clear: both;
@@ -5458,9 +5458,9 @@ html.no-svg footer.global .top-link a, .opera-mini footer.global .top-link a {
 }
 /* line 16, ../sass/core/patterns/_contextual-footer.scss */
 #context-footer hr {
-  -moz-box-shadow: inset 0 2px 2px -2px #333333;
-  -webkit-box-shadow: inset 0 2px 2px -2px #333333;
-  box-shadow: inset 0 2px 2px -2px #333333;
+  -moz-box-shadow: inset 0 2px 2px -2px #333;
+  -webkit-box-shadow: inset 0 2px 2px -2px #333;
+  box-shadow: inset 0 2px 2px -2px #333;
   background: #dd4814;
   height: 14px;
   margin: 0 0 10px;
@@ -7487,6 +7487,56 @@ html.yui3-js-enabled .accordion-button.active {
   border: 1px solid #f7f7f7;
 }
 
+/* line 28, ../sass/_classes.scss */
+h1 small, h2 small {
+  font-size: 0.7em !important;
+}
+
+/* line 32, ../sass/_classes.scss */
+.background-wallpaper {
+  color: #ffffff;
+}
+/* line 35, ../sass/_classes.scss */
+.background-wallpaper .note {
+  color: rgba(255, 255, 255, 0.6) !important;
+}
+/* line 39, ../sass/_classes.scss */
+.background-wallpaper .box {
+  -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2) inset;
+  -mox-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2) inset;
+  -ms-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2) inset;
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2) inset;
+}
+/* line 43, ../sass/_classes.scss */
+.background-wallpaper .link-button {
+  color: #ffffff !important;
+}
+/* line 48, ../sass/_classes.scss */
+.background-wallpaper .download-desktop {
+  background: url("../img/backgrounds/download-desktop.jpg") 100% 70%;
+}
+/* line 51, ../sass/_classes.scss */
+.background-wallpaper .lubuntu {
+  background: url("../img/backgrounds/lubuntu.png");
+}
+/* line 54, ../sass/_classes.scss */
+.background-wallpaper .community {
+  background: url("../img/backgrounds/community.jpg");
+}
+
+/* line 59, ../sass/_classes.scss */
+.full-width {
+  width: 100% !important;
+}
+
+/* line 63, ../sass/_classes.scss */
+.link-button {
+  background: transparent !important;
+  padding: 0 !important;
+  font-size: 16px !important;
+  color: #333333 !important;
+}
+
 /* line 10, ../sass/style.scss */
 ::selection {
   background: #ed6637;
@@ -7533,7 +7583,7 @@ body.toolbar .logo {
 
 /* line 40, ../sass/style.scss */
 body.node-type-community-page {
-  background: url("../img/dotted.png") repeat scroll 0 0 #f5f6f7;
+  background: url("../img/dotted.png") repeat scroll 0 0 #F5F6F7;
 }
 
 /* line 44, ../sass/style.scss */
@@ -7599,8 +7649,9 @@ header.banner.inverted .header-search input[type="search"] {
   border: none;
   margin-bottom: 0;
   background-color: transparent;
-  -moz-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
   -webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
+  -mox-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
+  -ms-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
   box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2);
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
@@ -7614,19 +7665,19 @@ header.banner.inverted .header-search input[type="search"]:focus {
 }
 /* line 14, ../sass/_mixins.scss */
 header.banner.inverted .header-search input[type="search"]::-webkit-input-placeholder {
-  color: #555555;
+  color: #555;
 }
 /* line 17, ../sass/_mixins.scss */
 header.banner.inverted .header-search input[type="search"]:-moz-placeholder {
-  color: #555555;
+  color: #555;
 }
 /* line 20, ../sass/_mixins.scss */
 header.banner.inverted .header-search input[type="search"]::-moz-placeholder {
-  color: #555555;
+  color: #555;
 }
 /* line 23, ../sass/_mixins.scss */
 header.banner.inverted .header-search input[type="search"]:-ms-input-placeholder {
-  color: #555555;
+  color: #555;
 }
 /* line 120, ../sass/style.scss */
 header.banner.inverted .header-search button[type="submit"] {
@@ -7654,3 +7705,5 @@ header.banner .site-name .logo-ubuntuit {
   margin-left: 20px;
   font-weight: 300;
 }
+
+/*# sourceMappingURL=style.css.map */

sass/_classes.scss

@@ -21,3 +21,48 @@
 		border: 1px solid $light-grey;
 	}
 }
+
+//--------------------------------------------------
+// Classes for header with a background
+//--------------------------------------------------
+h1 small, h2 small {
+    font-size: 0.7em !important;
+}
+
+.background-wallpaper {
+    color: #ffffff;
+
+    .note {
+        color: rgba(255, 255, 255, 0.6) !important;
+    }
+
+    .box {
+        @include box-shadow(0px 1px 2px 0px rgba(0, 0, 0, 0.2) inset);
+    }
+
+    .link-button {
+        color: #ffffff !important;
+    }
+
+    // Background images
+    .download-desktop {
+        background: url('../img/backgrounds/download-desktop.jpg') 100% 70%;
+    }
+    .lubuntu {
+        background: url('../img/backgrounds/lubuntu.png');
+    }
+    .community {
+        background: url('../img/backgrounds/community.jpg');
+    }
+}
+
+.full-width {
+    width: 100% !important;
+}
+
+.link-button {
+    background: transparent !important;
+    padding: 0 !important;
+    font-size: 16px !important;
+    color: #333333 !important;
+}

sass/_mixins.scss

@@ -24,3 +24,10 @@
 		color: $color;
 	}
 }
+
+@mixin box-shadow($shadow) {
+    -webkit-box-shadow: $shadow;
+       -mox-box-shadow: $shadow;
+        -ms-box-shadow: $shadow;
+            box-shadow: $shadow;
+}