I feel pretty,

Oh, so pretty,
I feel pretty and witty and gay!
And I pity
Any girl who isn't me today.

UI/Content/base.less

@@ -25,6 +25,10 @@
   }
 }
 
+.backdrop .page {
+  background-color: transparent;
+}
+
 html {
   overflow: -moz-scrollbars-vertical;
   overflow-y: scroll;
@@ -61,12 +65,6 @@ html {
   }
 }
 
-#in-sub-nav {
-  ul {
-    margin: 0 0 80px 0;
-  }
-}
-
 #notification-region {
   pre {
     font-size: 12px;

UI/Content/menu.less

@@ -11,3 +11,12 @@
   color: #b9b9b9;
 
 }
+
+#in-sub-nav {
+  margin-bottom: 80px;
+}
+
+.backdrop #in-sub-nav {
+  background-color: #000000;
+  opacity: 0.85;
+}

UI/Content/theme.less

@@ -750,7 +750,7 @@ body h1, body h2, body h3, body h4, body h5, body h6 {
 #in-sub-nav {
   ul {
     text-align: center;
-    margin-bottom: 80px;
+    margin-bottom: 10px;
   }
   li {
     list-style-type: none;

UI/Series/Details/SeriesDetailsLayout.js

@@ -1,5 +1,5 @@
 "use strict";
-define(['app', 'Series/Details/SeasonCollectionView','Shared/LoadingView'], function () {
+define(['app', 'Series/Details/SeasonCollectionView', 'Shared/LoadingView'], function () {
         NzbDrone.Series.Details.SeriesDetailsLayout = Backbone.Marionette.Layout.extend({
 
             itemViewContainer: '.x-series-seasons',
@@ -9,10 +9,19 @@ define(['app', 'Series/Details/SeasonCollectionView','Shared/LoadingView'], func
                 seasons: '#seasons'
             },
 
-            onShow: function () {
+            ui: {
+                header: '.x-header'
+            },
 
+            initialize: function () {
+                $('body').addClass('backdrop');
+            },
+
+            onShow: function () {
                 var self = this;
 
+                $.backstretch(this.model.get('fanArt'));
+
                 this.seasons.show(new NzbDrone.Shared.LoadingView());
 
                 this.seasonCollection = new NzbDrone.Series.SeasonCollection();
@@ -30,6 +39,7 @@ define(['app', 'Series/Details/SeasonCollectionView','Shared/LoadingView'], func
 
             onClose: function () {
                 $('.backstretch').remove();
+                $('body').removeClass('backdrop');
             }
         });
     }

UI/Series/Details/SeriesDetailsTemplate.html

@@ -1,10 +1,5 @@
 <div class="row series-page-header">
-    <div class="span3">
-        <a href="{{traktUrl}}" target="_blank">
-            <img class="series-poster" src="{{poster}}" {{defaultImg}}>
-        </a>
-    </div>
-    <div class="offset1 span7">
+    <div class="span11">
         <div class="row">
             <h1>{{title}}</h1>
         </div>

UI/Series/series.less

@@ -18,14 +18,19 @@
 }
 
 .series-page-header {
-  .card;
-  padding: 30px 0px;
+  background: #000000;
+  color: #ffffff;
+  opacity: 0.9;
+  padding: 30px 30px;
+  margin: 50px 10px;
+  opacity: 0.9;
 }
 
 .series-season {
   .card;
   margin: 80px 10px;
   padding: 20px 40px;
+  opacity: 0.9;
 
 }
 
@@ -124,3 +129,4 @@
 .series-detail-overview {
   margin-bottom: 50px;
 }
+

UI/Shared/Styles/card.less

@@ -1,5 +1,6 @@
 .card {
   margin :10px;
+  background-color: #ffffff;
   padding: 10px;
   box-shadow: 0px 0px 10px 1px #e1e1e1;
   color: #444444;