Merge branch 'funnel-to-courses'

diff --cc docs/assets/scss/docs.scss
index a715eaf9f4986d32a778645a8063f08b00d63459,7a23bfd1df47e4526e537ca9e56a47e47a6f6ec2..0a21d135f3b3a64286281d05d0b71a063974db31
--- 1/docs/assets/scss/docs.scss
--- 2/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@@ -31,43 -29,53 +31,91 @@@ $topbar-hover-color: lighten($topbar-ba
  
  .marketing-topbar,
  .title-bar {
 -  background: #2c3840;
 +  background: $topbar-background;
 +
 +  .dropdown.menu a {
 +    background: $topbar-background;
 +  }
 +
 +  .title {
 +    background: $topbar-background;
 +  }
 +}
 +
 +.dropdown.menu a.button {
 +  background: $primary-color;
 +
 +  &:hover {
 +    background: darken($primary-color, 10%);
 +  }
 +}
 +
 +.is-dropdown-submenu-item a {
 +  &:hover {
 +    background: $topbar-hover-color;
 +  }
 +}
 +
- .marketing-topbar .menu a:hover:not(.button), 
++.marketing-topbar .menu a:hover:not(.button),
 +.marketing-topbar .menu a:focus {
 +  background: $topbar-hover-color;
 +}
 +
 +.marketing-topbar .menu .topbar-title a {
-   &:hover, 
++  &:hover,
 +  &:focus {
 +    background: $topbar-background;
 +  }
 +}
 +
 +.zurb-footer-bottom {
 +  background: $topbar-background;
- }
+ }
+ 
+ .ad-unit {
+   max-width: 250px;
+   padding: .5rem;
+   background: #074E68;
+   border-radius: 4px;
+ }
+ 
+ .ad-unit-title {
+   padding: 10px 16px 5px 16px;
+   text-align: center;
+   color: #fff;
+   font-size: 23px;
+   font-weight: bold;
+   font-family: 'proxima nova', helvetica, arial;
+   animation:  ad-title-anim 1.5s 1 ease;
+   animation-fill-mode: backwards;
+ }
+ 
+ .ad-unit-text {
+   color: #fff;
+   font-size: 13px;
+   text-align: center;
+   padding: 0 15px 10px 15px;
+   animation:  ad-text-anim 1s 1 ease;
+   animation-delay: 1s;
+   animation-fill-mode: backwards;
+ }
+ 
+ .ad-unit-button {
+   margin-bottom: 0;
+   width: 100%;
+   box-shadow: 0 -2px 0 rgba(0,0,0,0.2) inset;
+   border: 0;
+   border-radius: 3px;
+   font-weight: bold;
+ }
+ 
+ 
+ @keyframes ad-title-anim {
+   0%   { opacity: 0; transform: translateY(50%); }
+   100% { opacity: 1; }
+ }
+ 
+ @keyframes ad-text-anim {
+   0%   { opacity: 0; transform: scale(.7, .7); }
+   100% { opacity: 1; transform: scale(1, 1);}
+ }