Resolved promos banner overlap

Resolves #1220

static/css/restyle.less

@@ -325,7 +325,7 @@ button.search-button {
 #promos {
     width: 960px;
     display: none !important;
-    height: 0 !important;
+    height: auto !important;
     min-height: 0 !important;
     margin-left: -210px;
     margin-bottom: 15px;
@@ -410,27 +410,34 @@ button.search-button {
     font-family: @primary-font !important;
 }
 
-#promos .prev {
-    left: 0;
-}
-#promos .next {
-    right: 0;
-}
-#promos h2, #promos h3 {
-    font-style: normal;
-    font-family: inherit;
-}
-#promos .promo h2, #promos .ryff h3 {
-    font-size: 36px;
-    font-weight: 100;
-    line-height: 1.3em;
-    color: #fff;
-}
-#promos h3 {
-    color: #fff;
-}
-.promo h2 {
-    text-shadow: none;
+#promos {
+    .prev {
+        left: 0;
+    }
+    .next {
+         right: 0;
+    }
+
+    h2, h3 {
+        font-style: normal;
+        font-family: inherit;
+    }
+
+    .promo {
+        background-size: cover;
+    }
+
+    #monthly.promo {
+        h2, h3 {
+            font-size: 36px;
+            font-weight: 100;
+            line-height: 1.3em;
+            color: #fff;
+        }
+        h2 {
+            text-shadow: none;
+        }
+    }
 }
 
 
@@ -491,7 +498,7 @@ button.search-button {
 #featured-addon h3 a, #monthly h3 a {
     color: #fff;
 }
-.addons p.desc, #monthly .wrap p {
+#monthly .addons p.desc, #monthly .wrap p {
     max-height: 5.4em;
     font-size: 0.85rem;
     font-weight: 200;
@@ -534,6 +541,10 @@ button.good {
     margin-top: 0;
 }
 
+.shift-secondary {
+    margin-top: 290px !important;
+}
+
 .secondary {
     margin: 12px 0;
 

static/js/impala/addon_details.js

@@ -1,8 +1,10 @@
 $(function () {
     if (!$("body").hasClass('addon-details')) return;
-    $('#background-wrapper').css('height',
-        $('.amo-header').height() +
-        $('#addon-description-header').height() + 20 + 'px');
+    if ($('#background-wrapper').css('position') === 'absolute') {
+        $('#background-wrapper').css('height',
+            $('.amo-header').height() +
+            $('#addon-description-header').height() + 20 + 'px');
+    }
 
     $(".previews").zCarousel({
         btnNext: ".previews .next",

static/js/impala/promos.js

@@ -25,18 +25,23 @@ function initPromos($context, module_context, version, platform) {
         data = {version: version, platform: platform};
     }
     $.get(promo_url, data, function(resp) {
-        // Hide panel is we have no promos to show
-        if (resp !== '') {
-            $('#background-wrapper').addClass('carousel-header');
-            $('#promos').addClass('show');
-            $('#side-nav').addClass('expanded');
-        }
         $('.slider', $promos).append($(resp));
         if ($('.panel', $promos).length) {
             // Show promo module only if we have at least panel.
             $promos.trigger('promos_shown', [$promos]);
             $('.persona-preview', $promos).previewPersona(true);
         }
+        // Hide panel if we have no promos to show and it's the redesign
+        if (resp !== ''
+            && $('#background-wrapper').css('position') === 'absolute') {
+            $('#page > .secondary').addClass('shift-secondary');
+            $('#background-wrapper').addClass('carousel-header');
+            $('#promos').addClass('show');
+            $('#side-nav').addClass('expanded');
+            $('#background-wrapper').css('height',
+                $('.amo-header').height() +
+                $('#promos').height() + 40 + 'px');
+        }
     });
 }