diff --git a/rpg-docs/client/views/GeneralCSS/globalDetail.css b/rpg-docs/client/views/GeneralCSS/globalDetail.css
index 4e453b5d..0a93d6ed 100644
--- a/rpg-docs/client/views/GeneralCSS/globalDetail.css
+++ b/rpg-docs/client/views/GeneralCSS/globalDetail.css
@@ -17,8 +17,12 @@
 	bottom: 0;
 	left: 0;
 	right: 0;
-	background-color: black;
-	opacity: 0.0;
+	background-color: grey;
+	background-color: rgba(0,0,0,0.35);
+}
+
+#fadeDummy  {
+	pointer-events: none;
 }
 
 .detailContent {
diff --git a/rpg-docs/client/views/layout/layout.html b/rpg-docs/client/views/layout/layout.html
index 35aa32ce..4d82e2e3 100644
--- a/rpg-docs/client/views/layout/layout.html
+++ b/rpg-docs/client/views/layout/layout.html
@@ -17,6 +17,9 @@
 				<core-header-panel fit mode="seamed">
 					{{> yield}}
 				</core-header-panel>
+				<div>
+					<div id="fadeDummy" cross-fade></div>
+				</div>
 			</section>
 			<section id="detailSection">
 				<div id="detailScreenFiller">