diff --git a/src/components/Overlay/Media.js b/src/components/Overlay/Media.js
index 9fc73dc..4248f9a 100644
--- a/src/components/Overlay/Media.js
+++ b/src/components/Overlay/Media.js
@@ -46,12 +46,22 @@ class SourceOverlay extends React.Component {
             <h3>{shortenedTitle}</h3>
           </div>
         </div>
+
+        <div className='mo-container' onClick={e => e.stopPropagation()}>
+          <div className='mo-media-container'>
+            <Content media={paths.map(selectTypeFromPath)} viewIdx={this.state.idx} />
+          </div>
+
+        </div>
+
         <div className='mo-footer'>
+          <Controls paths={paths} viewIdx={this.state.idx} onShiftHandler={this.onShiftGallery} />
+
           <div className='mo-meta-container'>
-            <div className='mo-box-title'>
-              {title ? <p><b>{title}</b></p> : null}
-              <div>{desc}</div>
-            </div>
+            {/* <div className='mo-box-title'> */}
+            {/*   {title ? <p><b>{title}</b></p> : null} */}
+            {/*   <div>{desc}</div> */}
+            {/* </div> */}
 
             <div className='mo-box'>
               <div>
@@ -69,13 +79,6 @@ class SourceOverlay extends React.Component {
             </div>
           </div>
         </div>
-        <div className='mo-container' onClick={e => e.stopPropagation()}>
-          <div className='mo-media-container'>
-            <Content media={paths.map(selectTypeFromPath)} viewIdx={this.state.idx} />
-            <Controls paths={paths} viewIdx={this.state.idx} onShiftHandler={this.onShiftGallery} />
-          </div>
-
-        </div>
 
       </div>
     )
diff --git a/src/scss/overlay.scss b/src/scss/overlay.scss
index 94bfddd..0449b76 100644
--- a/src/scss/overlay.scss
+++ b/src/scss/overlay.scss
@@ -109,14 +109,7 @@ $overlay-bg: rgba(239,239,239,0.9);
   }
 }
 
-.mo-footer {
-  position: fixed;
-  min-height: 250px;
-  background-color: $offwhite;
-  width: 100%;
-  opacity: 0.9;
-  bottom: 0;
-}
+
 
 // .mo-header {
 //   min-height: 42px;
@@ -144,6 +137,14 @@ $overlay-bg: rgba(239,239,239,0.9);
 //   }
 // }
 
+.media-gallery-controls {
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: -50%;
+}
+
 .mo-media-container {
   flex: 1;
   flex-direction: row;
@@ -155,88 +156,84 @@ $overlay-bg: rgba(239,239,239,0.9);
   max-height: calc(#{$panel-height} - 100px);
   font-family: "Lato", Helvetica, sans-serif;
 
-  // .media-player {
-  //   width: 100%;
-  //   max-width: $vimeo-width;
-  // }
-
   .media-content {
     display: flex;
     flex-direction: column;
   }
 
-  .media-gallery-controls {
-    height: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: -50%;
-  }
-
   // NB: topcushion seems to be necessary with certain overflows..
   &.topcushion {
     padding-top: 150px;
   }
 }
 
-// .mo-meta-container {
-//   display: flex;
-//   flex-direction: column;
-//   justify-content: center;
-//   box-sizing: border-box;
-//   min-height: 100px;
-//   width: 100%;
-//   // padding: $padding;
-//
-//   .mo-box-title {
-//     display: flex;
-//     flex-direction: row;
-//     justify-content: space-between;
-//     padding: 0 20px;
-//   }
 
-  // .mo-box {
-  //   display: flex;
-  //   flex-direction: row;
-  //   justify-content: space-around;
-  //   max-width: $panel-width;
-  //   width: 100%;
-  //   padding: $padding 0;
-  //   border-top: 1px solid rgb(189,189,189);
-  //   font-family: "Lato", Helvetica, sans-serif;
-  //   font-size: $normal;
-  //
-  //   h4 {
-  //     margin: 0 0 5px 0;
-  //     text-transform: uppercase;
-  //     font-size: $xsmall;
-  //     color: $darkwhite;
-  //     font-weight: 100;
-  //   }
-  //
-  //   p {
-  //     margin-top: 0;
-  //     font-size: $large;
-  //   }
-  //
-  //   .material-icons {
-  //     font-size: $normal;
-  //     color: $darkwhite;
-  //     margin-right: 5px;
-  //   }
-  //
-  //   a {
-  //     font-size: $large;
-  //     color: $darkgrey;
-  //     border-bottom: 1px solid $red;
-  //     &:hover { border-bottom: 1px solid $darkgrey; }
-  //   }
-  // }
-  //
-  // .indent {
-  //   margin-left: 2*$header-inset;
-  // }
-// }
+.mo-footer {
+  position: fixed;
+  height: 250px;
+  background-color: transparent;
+  width: 100%;
+  opacity: 0.9;
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+}
+
+.mo-meta-container {
+  color: $overlay-bg;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  box-sizing: border-box;
+  min-height: 100px;
+
+  .mo-box-title {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding: 0 20px;
+  }
+
+  .mo-box {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    width: $panel-width;
+    padding: $padding 0;
+    border-top: 1px solid rgb(189,189,189);
+    font-family: "Lato", Helvetica, sans-serif;
+    font-size: $normal;
+
+    h4 {
+      margin: 0 0 5px 0;
+      text-transform: uppercase;
+      font-size: $xsmall;
+      color: $darkwhite;
+      font-weight: 100;
+    }
+
+    p {
+      margin-top: 0;
+      font-size: $large;
+    }
+
+    .material-icons {
+      font-size: $normal;
+      color: $darkwhite;
+      margin-right: 5px;
+    }
+
+    a {
+      font-size: $large;
+      color: $yellow;
+      border-bottom: 1px solid $yellow;
+    }
+  }
+
+  .indent {
+    margin-left: 2*$header-inset;
+  }
+}
 
 .mo-controls {
   color: white;
@@ -291,10 +288,11 @@ $overlay-bg: rgba(239,239,239,0.9);
   line-height: 1.5em;
   min-width: 100%;
 
+  color: $overlay-bg;
+
   a {
-    color: $darkgrey;
-    border-bottom: 1px solid $red;
-    &:hover { border-bottom: 1px solid $darkgrey; color: $darkgrey; }
+    color: $yellow;
+    border-bottom: 1px solid $yellow;
   }
 
   .md-container {