From cbe032f87a2fc2b2f954d3be9057d6e4cc845d92 Mon Sep 17 00:00:00 2001
From: Dirk Dougherty <ddougherty@google.com>
Date: Fri, 22 May 2015 11:41:40 -0700
Subject: Sync style changes from external (sync3).

Change-Id: I590557ccc3bde1172e80f5a9bc0a2be2f30e23b8
---
 .../droiddoc/templates-sdk/assets/css/default.css  | 2754 ++++++++++----------
 .../templates-sdk/assets/images/android_logo.png   |  Bin 1214 -> 1278 bytes
 .../assets/images/android_logo@2x.png              |  Bin 794 -> 1516 bytes
 .../assets/images/android_logo_ndk.png             |  Bin 4712 -> 4424 bytes
 .../assets/images/android_logo_ndk@2x.png          |  Bin 18596 -> 17444 bytes
 .../templates-sdk/assets/images/sprite-2x.png      |  Bin 6125 -> 7283 bytes
 .../templates-sdk/assets/images/sprite.png         |  Bin 2553 -> 3121 bytes
 tools/droiddoc/templates-sdk/assets/js/docs.js     |  228 +-
 .../droiddoc/templates-sdk/components/masthead.cs  |    4 +-
 tools/droiddoc/templates-sdk/customizations.cs     |    2 +-
 tools/droiddoc/templates-sdk/footer.cs             |  178 +-
 11 files changed, 1705 insertions(+), 1461 deletions(-)

(limited to 'tools/droiddoc')

diff --git a/tools/droiddoc/templates-sdk/assets/css/default.css b/tools/droiddoc/templates-sdk/assets/css/default.css
index 8513843..041b465 100644
--- a/tools/droiddoc/templates-sdk/assets/css/default.css
+++ b/tools/droiddoc/templates-sdk/assets/css/default.css
@@ -204,10 +204,11 @@ h1.short {
   }
 }
 h2 {
+  clear: left;
   font-size: 28px;
+  font-weight: 400;
   line-height: 32px;
   margin: 24px 0 16px;
-  font-weight: 400;
 }
 h3 {
   font-size: 24px;
@@ -298,7 +299,8 @@ a, .link-color {
   color: #039BE5;
   text-decoration: none;
 }
-a:focus, a:hover, a:active {
+a:focus, a:hover {
+  color: rgba(3, 155, 229, .7);
   text-decoration: none;
 }
 a.white {
@@ -306,7 +308,7 @@ a.white {
   text-decoration:underline;
 }
 a.white:hover, a.white:active {
-  color: #ccc !important;
+  color: #ccc;
 }
 strong, b {
   font-weight: bold;
@@ -1053,46 +1055,6 @@ li.no-bullet *{
   .design li.with-icon.use:before {
     background-image: url(../images/styles/ico_use.png); }
 
-/* figures and callouts */
-.figure {
-  position: relative; }
-  .figure.pad-below {
-    margin-bottom: 20px; }
-  .figure .figure-callout {
-    position: absolute;
-    color: #fff;
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 23px;
-    text-align: center;
-    background: transparent url(../images/styles/callout.png) no-repeat scroll 50% 50%;
-    padding-right: 2px;
-    width: 30px;
-    height: 29px;
-    z-index: 1000; }
-    .figure .figure-callout.top {
-      top: -9px; }
-    .figure .figure-callout.right {
-      right: -5px; }
-
-.figure-caption {
-  margin: 0 10px 20px 0;
-  font-size: 14px;
-  line-height: 20px;
-  font-style: italic; }
-
-/* rows of figures */
-.figure-row {
-  font-size: 0;
-  line-height: 0;
-  /* to prevent space between figures */ }
-  .figure-row .figure {
-    display: inline-block;
-    vertical-align: top; }
-  .figure-row .figure + .figure {
-    margin-left: 10px;
-    /* reintroduce space between figures */ }
-
 /* video  containers */
 .framed-galaxynexus-land-span-13 {
   background: transparent url(../images/styles/device_galaxynexus_blank_land_span13.png) no-repeat
@@ -2490,13 +2452,88 @@ p.img-caption {
   font-size: 13px;
 }
 
-div.figure-center {
+/* figures and callouts */
+.figure {
+  position: relative;
+}
+
+.figure.pad-below {
+  margin-bottom: 20px;
+}
+
+.figure .figure-callout {
+  position: absolute;
+  color: #fff;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 23px;
+  text-align: center;
+  background: transparent url(../images/styles/callout.png) no-repeat scroll 50% 50%;
+  padding-right: 2px;
+  width: 30px;
+  height: 29px;
+  z-index: 1000;
+}
+
+.figure .figure-callout.top {
+  top: -9px;
+}
+
+.figure .figure-callout.right {
+  right: -5px;
+}
+
+.figure-caption {
+  margin: 0 10px 20px 0;
+  font-size: 14px;
+  line-height: 20px;
+  font-style: italic;
+}
+
+/* rows of figures */
+.figure-row {
+  font-size: 0;
+  line-height: 0;
+  /* to prevent space between figures */
+}
+
+.figure-row .figure {
+  display: inline-block;
+  vertical-align: top;
+}
+
+.figure-row .figure + .figure {
+  margin-left: 10px;
+  /* reintroduce space between figures */
+}
+
+.border-img {
+  border: 1px solid #CCC;
+}
+
+.center-img {
+  margin: auto;
+  text-align: center;
+}
+.center-img img {
+  margin-bottom: 15px;
+}
+
+.figure img,
+.figure-right img,
+.figure-left img,
+.figure-center img,
+.border-img {
+  margin-bottom: 15px;
+}
+
+.figure-center {
   margin: 32px auto 24px;
   max-width: 100%;
 }
 
-div.figure,
-div.figure-right {
+.figure,
+.figure-right {
   clear: right;
   float: right;
   margin: 10px 0 0 0;
@@ -2505,7 +2542,7 @@ div.figure-right {
   /* width must be defined w/ an inline style matching the image width */
 }
 
-div.figure-left {
+.figure-left {
   clear: left;
   float: left;
   margin: 10px 0 0 0;
@@ -2516,9 +2553,9 @@ div.figure-left {
 
 @media (max-width: 719px) {
   /* Collapse on mobile. */
-  div.figure,
-  div.figure-right,
-  div.figure-left {
+  .figure,
+  .figure-right,
+  .figure-left {
     float: none;
     clear: none;
     padding: 0;
@@ -3371,7 +3408,6 @@ table.jd-tagtable th {
   position:relative;
   width:170px;
   min-height:90px;
-  padding:5px;
   border: solid 1px #C5C5C5;
   background: white;
   margin-right:-5px;
@@ -3385,15 +3421,15 @@ table.jd-tagtable th {
 }
 .suggest-card.develop {
   z-index:997;
-  border-top: solid 4px #F80;
+  border-top: solid 4px #ff7043;
 }
 .suggest-card.design {
   z-index:996;
-  border-top: solid 4px #33b5e5;
+  border-top: solid 4px #00bcd4;
 }
 .suggest-card.distribute {
   z-index:995;
-  border-top: solid 4px #9C0;
+  border-top: solid 4px #afb42b;
 }
 .child-card {
   width:100%;
@@ -3411,7 +3447,7 @@ table.jd-tagtable th {
 ul.search_filtered {
   min-width:100%;
   list-style: none;
-  margin: 0 0 5px;
+  margin: 5px 0;
   padding: 0;
 }
 .search_filtered .jd-selected {
@@ -3430,13 +3466,13 @@ ul.search_filtered {
 .search_filtered li.jd-autocomplete {
   font-size: 0.81em;
   border: none;
-  margin: 0 0 2px;
+  margin: 0;
   padding: 0;
   line-height:1.5em;
 }
 
 .search_filtered li a {
-  padding:0 5px;
+  padding: 2px 10px;
   color:#222 !important;
   display:inline-block;
   line-height:12px;
@@ -3446,8 +3482,8 @@ ul.search_filtered {
   font-weight:bold;
   color:#444;
   border: none;
-  margin: 8px 0 2px;
-  padding:1px 5px;
+  margin: 0;
+  padding: 2px 10px;
   line-height:1.5em;
 }
 .search_filtered li.header.small {
@@ -3464,6 +3500,51 @@ ul.search_filtered {
   margin: 0 0 2px;
 }
 
+@media (max-width: 719px) {
+  .search_filtered_wrapper {
+    left: 24px;
+    right: 24px;
+    top: 44px;
+  }
+
+  .suggest-card {
+    box-shadow: 0 2px 1px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.1);
+    float: none;
+    margin-right: 0;
+    min-height: 0;
+    max-height: 204px;
+    overflow: hidden;
+  }
+
+  .suggest-card.develop,
+  .suggest-card.design,
+  .suggest-card.distribute {
+    display: none !important;
+  }
+
+  ul.search_filtered {
+    margin: 0;
+  }
+
+  .search_filtered li.jd-autocomplete {
+    border-top: solid 1px #C5C5C5;
+    font-size: inherit;
+    text-align: left;
+  }
+
+  .search_filtered li.jd-autocomplete:first-child {
+    border-top: 0;
+  }
+
+  .search_filtered li a {
+    display: block;
+    overflow: hidden;
+    padding: 14px 10px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
 .show-item {
   display: table-row;
 }
@@ -3569,10 +3650,10 @@ td.gsc-search-button {
 }
 
 #searchResults .gsc-tabsArea {
-  position:relative;
-  white-space:nowrap;
-  float:left;
-  width:200px;
+  position: relative;
+  white-space: nowrap;
+  float: left;
+  width: 25%;
 }
 
 #searchResults .gsc-above-wrapper-area {
@@ -3580,12 +3661,26 @@ td.gsc-search-button {
 }
 
 #searchResults .gsc-resultsbox-visible {
-  float:left;
-  width:720px;
-  margin-left:20px;
+  box-sizing: border-box;
+  float: left;
+  padding-left:20px;
+  width: 75%;
+}
+
+@media (max-width: 719px) {
+  #searchResults .gsc-tabsArea {
+    display: none;
+  }
+
+  #searchResults .gsc-resultsbox-visible {
+    float: none;
+    padding-left: 0;
+    width: auto;
+  }
 }
 
 #searchResults .gsc-tabHeader {
+  margin-top: 4px;
   padding: 3px 6px;
   position:relative;
   width:auto;
@@ -3642,41 +3737,18 @@ td.gsc-search-button {
 
 #searchResults .gsc-tabHeader.gsc-tabhInactive,
 #searchResults .gsc-cursor-page {
-  text-decoration:none;
-  color:#039BE5;
-  border: solid 1px #DADADA;
-}
-
-#searchResults .gsc-tabHeader.gsc-tabhInactive:hover,
-#searchResults .gsc-cursor-page:hover {
-  border-color: #DBDBDB;
-  background-color: #F3F3F3;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#F9F9F9), to(#ECECEC));
-  background-image: -webkit-linear-gradient(top, #F9F9F9, #ECECEC);
-  background-image: -moz-linear-gradient(top, #F9F9F9, #ECECEC);
-  background-image: -ms-linear-gradient(top, #F9F9F9, #ECECEC);
-  background-image: -o-linear-gradient(top, #F9F9F9, #ECECEC);
-  background-image: linear-gradient(top, #F9F9F9, #ECECEC);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9f9f9', 
-EndColorStr='#ececec');
-  color: #33B5E5;
+  background: #F0F0F0;
+  border: 0;
+  color: #039BE5;
 }
 
 #searchResults .gsc-tabHeader.gsc-tabhActive,
 #searchResults .gsc-tabHeader.gsc-tabhActive:hover,
 #searchResults .gsc-cursor-page.gsc-cursor-current-page,
 #searchResults .gsc-cursor-page.gsc-cursor-current-page:hover {
-  color:#fff;
-  background-color: #09C;
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#2FADDB), to(#09C));
-  background-image: -webkit-linear-gradient(top, #2FADDB, #09C);
-  background-image: -moz-linear-gradient(top, #2FADDB, #09C);
-  background-image: -ms-linear-gradient(top, #2FADDB, #09C);
-  background-image: -o-linear-gradient(top, #2FADDB, #09C);
-  background-image: linear-gradient(top, #2FADDB, #09C);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#2faddb', EndColorStr='#09c');
-  border: 1px solid #3990AB;
-  z-index:100;
+  background-color: #039BE5;
+  border: 0;
+  color: #fff;
 }
 
 
@@ -4600,23 +4672,6 @@ a.download-sdk {
   clear: both;
 }
 
-.border-img {
-  border: 1px solid #CCC;
-}
-
-.center-img {
-  margin: auto;
-  text-align: center;
-}
-.center-img img {
-  margin-bottom: 15px;
-}
-
-.figure img, .border-img {
-  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
-  margin-bottom: 15px;
-}
-
 
 /**
  * UTILITIES
@@ -5255,7 +5310,6 @@ Styles for d.a.c/index:
 
 .actions-bar .actions {
   padding: 24px 0;
-  text-align: justify;
   font-size: 0.1px;
   line-height: 0.1px;
 }
@@ -5268,29 +5322,34 @@ Styles for d.a.c/index:
 
 .actions-bar .actions > div {
   display: inline-block;
+  margin: 0 16px;
 }
 
 .actions-bar .actions a {
-  font-size: 24px;
-  line-height: 50px;
   color: #fff;
+  font-size: 24px;
   font-weight: 300;
+  line-height: 50px;
+  -webkit-transition: opacity .3s;
+  transition: opacity .3s;
 }
 
-.actions-bar .actions .dac-sprite {
-  margin: 0 -6px 0 -12px;
-  -webkit-transition: all 190ms ease-out;
-  transition: all 190ms ease-out;
+.actions-bar .actions a:hover {
+  opacity: .54;
 }
 
-.actions-bar .actions a:hover .dac-sprite {
-
-  transform: translateX(5px);
+.actions-bar .actions .dac-sprite {
+  margin: 0 -8px 0 -12px;
 }
 
 @media (max-width: 719px) {
+  .actions-bar {
+    text-align: left;
+  }
+
   .actions-bar .actions > div {
     display: block;
+    margin: 0;
   }
 }
 
@@ -5519,6 +5578,80 @@ a.home-new-cta-btn:hover,
   position: relative !important;
 }
 
+/**
+ * Break strings when their length exceeds the width of their container.
+ */
+.dac-text-break {
+  word-wrap: break-word !important;
+}
+
+/**
+ * Horizontal text alignment
+ */
+.dac-text-center {
+  text-align: center !important;
+}
+
+.dac-text-left {
+  text-align: left !important;
+}
+
+.dac-text-right {
+  text-align: right !important;
+}
+
+/**
+ * Prevent whitespace wrapping
+ */
+.dac-text-no-wrap {
+  white-space: nowrap !important;
+}
+
+/**
+ * Prevent text from wrapping onto multiple lines, instead truncate with an ellipsis.
+ */
+.dac-text-truncate {
+  max-width: 100%;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+  word-wrap: normal !important;
+}
+
+/**
+ * Floats
+ */
+.dac-float-left {
+  float: left !important;
+}
+
+.dac-float-right {
+  float: right !important;
+}
+
+/**
+ * New block formatting context
+ *
+ * This affords some useful properties to the element. It won't wrap under
+ * floats. Will also contain any floated children.
+ * N.B. This will clip overflow. Use the alternative method below if this is
+ * problematic.
+ */
+.dac-nbfc {
+  overflow: hidden !important; }
+
+/**
+ * New block formatting context (alternative)
+ *
+ * Alternative method when overflow must not be clipped.
+ *
+ * N.B. This breaks down in some browsers when elements within this element
+ * exceed its width.
+ */
+.dac-nbfc-alt {
+  display: table-cell !important;
+  width: 10000px !important; }
+
 /* New CSS */
 /************ RESOURCE CARDS ******************/
 /* Basic card-styling with shadow */
@@ -5526,8 +5659,29 @@ a.home-new-cta-btn:hover,
   background: #fff;
   box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.21);
   display: block;
-  position: relative;
-}
+  position: relative; }
+
+/* Play button is only visible on 6by6 cards */
+.play-button {
+  background-color: #000;
+  border-radius: 50%;
+  box-sizing: border-box;
+  display: none;
+  height: 70px;
+  left: 50%;
+  margin-left: -35px;
+  line-height: 65px;
+  padding-left: 4px;
+  position: absolute;
+  opacity: .6;
+  text-align: center;
+  -webkit-transition: opacity .5s;
+          transition: opacity .5s;
+  top: 50px;
+  width: 70px;
+  z-index: 1; }
+  .resource-card-6x6 .play-button {
+    display: block; }
 
 /* Styling for background image including tinting and section icons in stacks */
 .card-bg {
@@ -5541,51 +5695,40 @@ a.home-new-cta-btn:hover,
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
-  background-image: url(../images/resource-card-default-android.jpg);
-}
-
-.card-bg:after {
-  content: "";
-  display: block;
-  height: 100%;
-  width: 100%;
-  opacity: 1;
-  background: rgba(0, 0, 0, 0.05);
-  -webkit-transition: opacity 0.5s;
-  transition: opacity 0.5s;
-}
-
-.static .card-bg:after {
-  display: none;
-}
-
-.card-bg .card-section-icon {
-  position: absolute;
-  top: 50%;
-  width: 100%;
-  margin-top: -35px;
-  text-align: center;
-  padding-top: 65px;
-  z-index: 100;
-}
-
-.card-bg .card-section-icon .icon {
-  position: absolute;
-  left: 50%;
-  margin-left: -28px;
-  top: 0px;
-  width: 56px;
-  height: 56px;
-  background-repeat: no-repeat;
-  background-position: 50% 50%;
-  background-image: url(../images/stack-icon.png);
-}
-
-.card-bg .card-section-icon .section {
-  text-transform: uppercase;
-  color: white;
-  font-size: 14px;
-}
+  background-image: url(../images/resource-card-default-android.jpg); }
+  .card-bg:after {
+    content: "";
+    display: block;
+    height: 100%;
+    width: 100%;
+    opacity: 1;
+    background: rgba(0, 0, 0, 0.05);
+    -webkit-transition: opacity 0.5s;
+            transition: opacity 0.5s; }
+  .static .card-bg:after {
+    display: none; }
+  .card-bg .card-section-icon {
+    position: absolute;
+    top: 50%;
+    width: 100%;
+    margin-top: -35px;
+    text-align: center;
+    padding-top: 65px;
+    z-index: 100; }
+    .card-bg .card-section-icon .icon {
+      position: absolute;
+      left: 50%;
+      margin-left: -28px;
+      top: 0px;
+      width: 56px;
+      height: 56px;
+      background-repeat: no-repeat;
+      background-position: 50% 50%;
+      background-image: url(../images/stack-icon.png); }
+    .card-bg .card-section-icon .section {
+      text-transform: uppercase;
+      color: white;
+      font-size: 14px; }
 
 .card-info {
   position: absolute;
@@ -5596,61 +5739,46 @@ a.home-new-cta-btn:hover,
   left: 0;
   overflow: hidden;
   background: #fefefe;
-  padding: 6px 12px;
-}
-
-.card-info .section {
-  color: #898989;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: .3px;
-  line-height: 20px;
-  text-transform: uppercase;
-}
-
-.card-info .title {
-  color: #333;
-  font-size: 18px;
-  font-weight: 500;
-  line-height: 24px;
-  margin-bottom: 2px;
-  max-height: 48px;
-  overflow: hidden;
-  padding-bottom: 5px;
-  text-overflow: ellipsis;
-  white-space: normal;
-}
-
-.card-info .description {
-  overflow: hidden;
-}
-
-.card-info .description .text {
-  color: #666;
-  font-size: 14px;
-  height: 60px;
-  line-height: 20px;
-  overflow: hidden;
-  width: 100%;
-}
-
-.card-info .description .util {
-  position: absolute;
-  right: 5px;
-  bottom: 70px;
-  opacity: 0;
-  -webkit-transition: opacity 0.5s;
-  transition: opacity 0.5s;
-}
-
-.card-info.empty-desc .title {
-  white-space: normal;
-  overflow: visible;
-}
-
-.card-info.empty-desc .description {
-  display: none;
-}
+  padding: 6px 12px; }
+  .card-info .section {
+    color: #898989;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: .3px;
+    line-height: 20px;
+    text-transform: uppercase; }
+  .card-info .title {
+    color: #333;
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 24px;
+    margin-bottom: 2px;
+    max-height: 48px;
+    overflow: hidden;
+    padding-bottom: 5px;
+    text-overflow: ellipsis;
+    white-space: normal; }
+  .card-info .description {
+    overflow: hidden; }
+    .card-info .description .text {
+      color: #666;
+      font-size: 14px;
+      height: 60px;
+      line-height: 20px;
+      overflow: hidden;
+      width: 100%; }
+    .card-info .description .util {
+      position: absolute;
+      right: 5px;
+      bottom: 70px;
+      opacity: 0;
+      -webkit-transition: opacity 0.5s;
+              transition: opacity 0.5s; }
+  .card-info.empty-desc .title {
+    white-space: normal;
+    overflow: visible; }
+  .card-info.empty-desc .description {
+    display: none; }
 
 /* Truncate card summaries at bounding box and
  * and apply ellipsis at lower right */
@@ -5658,61 +5786,47 @@ a.home-new-cta-btn:hover,
   overflow: hidden;
   float: right;
   line-height: 15px;
-  width: 100%;
-}
-
-.ellipsis:before {
-  content: "";
-  float: left;
-  width: 5px;
-  height: 100%;
-}
-
-.ellipsis > *:first-child.text {
-  float: right;
-  width: 100% !important;
-  margin-left: -5px;
-}
-
-.ellipsis:after {
-  content: "\02026";
-  height: 17px;
-  padding-bottom: 4px;
-  box-sizing: content-box;
-  float: right;
-  position: relative;
-  top: -16px;
-  left: 100%;
-  width: 4em;
-  margin-left: -4em;
-  padding-right: 5px;
-  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(65%, white));
-  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), white 65%, white);
-  background: linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white);
-}
-
-.ellipsis:after {
-  font-style: normal;
-  color: #aaa;
-  font-size: 13px;
-  text-align: right;
-}
+  width: 100%; }
+  .ellipsis:before {
+    content: "";
+    float: left;
+    width: 5px;
+    height: 100%; }
+  .ellipsis > *:first-child.text {
+    float: right;
+    width: 100% !important;
+    margin-left: -5px; }
+  .ellipsis:after {
+    content: "\02026";
+    height: 17px;
+    padding-bottom: 4px;
+    box-sizing: content-box;
+    float: right;
+    position: relative;
+    top: -16px;
+    left: 100%;
+    width: 4em;
+    margin-left: -4em;
+    padding-right: 5px;
+    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(65%, white));
+    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0), white 65%, white);
+    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white); }
+  .ellipsis:after {
+    font-style: normal;
+    color: #aaa;
+    font-size: 13px;
+    text-align: right; }
 
 .resource-card:hover {
-  cursor: pointer;
-}
-
-.static .resource-card:hover {
-  cursor: auto;
-}
-
-.resource-card:hover .card-bg:after {
-  opacity: 0;
-}
-
-.resource-card:hover .card-info .description .util {
-  opacity: 1;
-}
+  cursor: pointer; }
+  .static .resource-card:hover {
+    cursor: auto; }
+  .resource-card:hover .card-bg:after {
+    opacity: 0; }
+  .resource-card:hover .play-button {
+    opacity: .3; }
+  .resource-card:hover .card-info .description .util {
+    opacity: 1; }
 
 /* Carousel Layout */
 /* Carousel styles for landing page */
@@ -5721,465 +5835,336 @@ a.home-new-cta-btn:hover,
   margin: 20px 0 20px 0;
   padding: 0 !important;
   position: relative;
-  overflow: hidden;
-}
-
-.resource-carousel-layout .slideshow-prev, .resource-carousel-layout .slideshow-next {
-  display: none;
-}
-
-.resource-carousel-layout .pagination {
-  bottom: 97px;
-  left: auto;
-  padding-right: 10px;
-  right: 0;
-  text-align: right;
-  width: 16.66666667%;
-}
-
-.resource-carousel-layout .pagination ul li {
-  text-indent: 8000px;
-}
-
-.resource-carousel-layout .frame li {
-  position: relative;
-}
-
-.resource-carousel-layout .frame li .card-bg {
-  bottom: 131px;
-}
-
-.resource-carousel-layout .frame li .card-info {
-  height: 131px;
-  padding: 6px 12px;
-  top: auto;
-}
-
-.resource-carousel-layout .frame li .card-info .title {
-  font-size: 28px;
-  font-weight: 400;
-  line-height: 32px;
-}
-
-.resource-carousel-layout .frame li .card-info .description .text {
-  height: 40px;
-}
-
-.resource-carousel-layout .frame li .card-info .description .util {
-  bottom: 97px;
-  right: 4px;
-}
+  overflow: hidden; }
+  .resource-carousel-layout .slideshow-prev, .resource-carousel-layout .slideshow-next {
+    display: none; }
+  .resource-carousel-layout .pagination {
+    bottom: 97px;
+    left: auto;
+    padding-right: 10px;
+    right: 0;
+    text-align: right;
+    width: 16.66666667%; }
+    .resource-carousel-layout .pagination ul li {
+      text-indent: 8000px; }
+  .resource-carousel-layout .frame li {
+    position: relative; }
+    .resource-carousel-layout .frame li .card-bg {
+      bottom: 131px; }
+    .resource-carousel-layout .frame li .card-info {
+      height: 131px;
+      padding: 6px 12px;
+      top: auto; }
+      .resource-carousel-layout .frame li .card-info .title {
+        font-size: 28px;
+        font-weight: 400;
+        line-height: 32px; }
+      .resource-carousel-layout .frame li .card-info .description .text {
+        height: 40px; }
+      .resource-carousel-layout .frame li .card-info .description .util {
+        bottom: 97px;
+        right: 4px; }
 
 /* Stack Layout */
 .resource-stack-layout {
   display: inline-block;
-  padding: 0;
-}
-
-.resource-stack-layout .section-card-menu > .card-info .section, .resource-stack-layout .section-card > .card-info .title {
+  padding: 0; }
+  .resource-stack-layout .section-card-menu > .card-info .section, .resource-stack-layout .section-card > .card-info .title {
     /*text-transform: uppercase;*/
-  color: #898989;
-  font-size: 17px;
-  line-height: 24px;
-  margin-bottom: 6px;
-}
-
-.resource-stack-layout .section-card {
-  height: 284px;
-}
-
-.resource-stack-layout .section-card > .card-bg {
-  height: 192px;
-}
-
-.resource-stack-layout .section-card > .card-info {
-  padding: 4px 12px 6px 12px;
-  top: 192px;
-}
-
-.resource-stack-layout .section-card > .card-info .section {
-  display: none;
-}
-
-.resource-stack-layout .section-card > .card-info .title {
-  font-size: 17px;
-  border-bottom: 1px solid #959595;
-  padding-bottom: 0px;
-}
-
-.resource-stack-layout .section-card > .card-info .description {
-  font-size: 13px;
-  line-height: 15px;
-}
-
-.resource-stack-layout .section-card > .card-info .description .text {
-  height: 30px;
-}
-
-.resource-stack-layout .related-card {
-  height: 90px;
-}
-
-.resource-stack-layout .related-card > .card-bg {
-  left: 0;
-  top: 0;
-  width: 90px;
-  height: 100%;
-  position: absolute;
-  display: block;
-}
-
-.resource-stack-layout .related-card > .card-info {
-  left: 90px;
-  padding: 4px 12px 4px 12px;
-}
-
-.resource-stack-layout .related-card > .card-info .section {
-  font-size: 12px;
-  margin-bottom: 1px;
-  display: none;
-}
-
-.resource-stack-layout .related-card > .card-info .title {
-  font-size: 16px;
-  margin-bottom: -2px;
-  white-space: normal;
-  overflow: visible;
-  text-overflow: ellipsis;
-}
-
-.resource-stack-layout .related-card > .card-info .title:after {
-  content: url(../images/link-out.png);
-  display: block;
-}
-
-.resource-stack-layout .related-card > .card-info .description {
-  display: none;
-}
-
-.resource-stack-layout .section-card-menu {
+    color: #898989;
+    font-size: 17px;
+    line-height: 24px;
+    margin-bottom: 6px; }
+  .resource-stack-layout .section-card {
+    height: 284px; }
+    .resource-stack-layout .section-card > .card-bg {
+      height: 192px; }
+    .resource-stack-layout .section-card > .card-info {
+      padding: 4px 12px 6px 12px;
+      top: 192px; }
+      .resource-stack-layout .section-card > .card-info .section {
+        display: none; }
+      .resource-stack-layout .section-card > .card-info .title {
+        font-size: 17px;
+        border-bottom: 1px solid #959595;
+        padding-bottom: 0px; }
+      .resource-stack-layout .section-card > .card-info .description {
+        font-size: 13px;
+        line-height: 15px; }
+        .resource-stack-layout .section-card > .card-info .description .text {
+          height: 30px; }
+  .resource-stack-layout .related-card {
+    height: 90px; }
+    .resource-stack-layout .related-card > .card-bg {
+      left: 0;
+      top: 0;
+      width: 90px;
+      height: 100%;
+      position: absolute;
+      display: block; }
+    .resource-stack-layout .related-card > .card-info {
+      left: 90px;
+      padding: 4px 12px 4px 12px; }
+      .resource-stack-layout .related-card > .card-info .section {
+        font-size: 12px;
+        margin-bottom: 1px;
+        display: none; }
+      .resource-stack-layout .related-card > .card-info .title {
+        font-size: 16px;
+        margin-bottom: -2px;
+        white-space: normal;
+        overflow: visible;
+        text-overflow: ellipsis; }
+        .resource-stack-layout .related-card > .card-info .title:after {
+          content: url(../images/link-out.png);
+          display: block; }
+      .resource-stack-layout .related-card > .card-info .description {
+        display: none; }
+  .resource-stack-layout .section-card-menu {
     /* Flexible height */
-  display: block;
-  height: auto;
-  width: auto;
-}
-
-.resource-stack-layout .section-card-menu .card-bg {
-  height: 155px;
+    display: block;
+    height: auto;
+    width: auto; }
+    .resource-stack-layout .section-card-menu .card-bg {
+      height: 155px;
       /* Flexible height */
-  position: relative;
-  display: inline-block;
-  vertical-align: top;
-}
-
-.resource-stack-layout .section-card-menu .card-info {
-  padding: 4px 12px 0px 12px;
+      position: relative;
+      display: inline-block;
+      vertical-align: top; }
+    .resource-stack-layout .section-card-menu .card-info {
+      padding: 4px 12px 0px 12px;
       /* Flexible height */
-  position: relative;
-  left: auto;
-  top: auto;
-  right: auto;
-  bottom: auto;
-}
-
-.resource-stack-layout .section-card-menu .card-info ul {
-  list-style: none;
-  margin: 0;
-}
-
-.resource-stack-layout .section-card-menu .card-info ul li {
-  list-style: none;
-  margin: 0;
-  padding: 15px 0;
-  border-top-width: 1px;
-  border-top-style: solid;
-  border-top-color: #959595;
-}
-
-.resource-stack-layout .section-card-menu .card-info ul li a, .resource-stack-layout .section-card-menu .card-info ul li a:focus, .resource-stack-layout .section-card-menu .card-info ul li a:link, .resource-stack-layout .section-card-menu .card-info ul li a:visited, .resource-stack-layout .section-card-menu .card-info ul li a:active, .resource-stack-layout .section-card-menu .card-info ul li a:hover {
-  color: #333 !important;
-}
-
-.resource-stack-layout .section-card-menu .card-info ul li:first-child {
-  border-top: none;
-}
-
-.resource-stack-layout .section-card-menu .card-info ul li:hover .title:after {
-  opacity: 1;
-  -webkit-transition: opacity 0.5s;
-  transition: opacity 0.5s;
-}
-
-.resource-stack-layout .section-card-menu .card-info ul li:hover .description {
-  max-height: 30px;
-  opacity: 1;
-  -webkit-transition: max-height 0.5s, opacity 1s;
-  transition: max-height 0.5s, opacity 1s;
-}
-
-.resource-stack-layout .section-card-menu .card-info .title {
-  font-size: 16px;
-  margin-bottom: -2px;
-  position: relative;
-}
-
-.resource-stack-layout .section-card-menu .card-info .title:after {
-  background: url(../images/stack-arrow-right.png);
-  content: '';
-  opacity: 0;
-  -webkit-transition: opacity 0.25s;
-  transition: opacity 0.25s;
-  position: absolute;
-  right: 0px;
-  top: 3px;
-  width: 10px;
-  height: 15px;
-}
-
-.resource-stack-layout .section-card-menu .card-info .title.more {
-  text-transform: uppercase;
-  color: #898989;
-  display: inline-block;
-}
-
-.resource-stack-layout .section-card-menu .card-info .title.more:after {
-  background: url(../images/stack-arrow-right.png);
-  content: '';
-  display: block;
-  position: absolute;
-  right: -20px;
-  top: 3px;
-  width: 10px;
-  height: 15px;
-}
-
-.resource-stack-layout .section-card-menu .card-info .description {
-  max-height: 0px;
-  opacity: 0;
-  overflow: hidden;
-  font-size: 13px;
-  line-height: 15px;
+      position: relative;
+      left: auto;
+      top: auto;
+      right: auto;
+      bottom: auto; }
+      .resource-stack-layout .section-card-menu .card-info ul {
+        list-style: none;
+        margin: 0; }
+        .resource-stack-layout .section-card-menu .card-info ul li {
+          list-style: none;
+          margin: 0;
+          padding: 15px 0;
+          border-top-width: 1px;
+          border-top-style: solid;
+          border-top-color: #959595; }
+          .resource-stack-layout .section-card-menu .card-info ul li a, .resource-stack-layout .section-card-menu .card-info ul li a:focus, .resource-stack-layout .section-card-menu .card-info ul li a:hover {
+            color: #333 !important; }
+          .resource-stack-layout .section-card-menu .card-info ul li:first-child {
+            border-top: none; }
+          .resource-stack-layout .section-card-menu .card-info ul li:hover .title:after {
+            opacity: 1;
+            -webkit-transition: opacity 0.5s;
+                    transition: opacity 0.5s; }
+          .resource-stack-layout .section-card-menu .card-info ul li:hover .description {
+            max-height: 30px;
+            opacity: 1;
+            -webkit-transition: max-height 0.5s, opacity 1s;
+                    transition: max-height 0.5s, opacity 1s; }
+      .resource-stack-layout .section-card-menu .card-info .title {
+        font-size: 16px;
+        margin-bottom: -2px;
+        position: relative; }
+        .resource-stack-layout .section-card-menu .card-info .title:after {
+          background: url(../images/stack-arrow-right.png);
+          content: '';
+          opacity: 0;
+          -webkit-transition: opacity 0.25s;
+                  transition: opacity 0.25s;
+          position: absolute;
+          right: 0px;
+          top: 3px;
+          width: 10px;
+          height: 15px; }
+      .resource-stack-layout .section-card-menu .card-info .title.more {
+        text-transform: uppercase;
+        color: #898989;
+        display: inline-block; }
+        .resource-stack-layout .section-card-menu .card-info .title.more:after {
+          background: url(../images/stack-arrow-right.png);
+          content: '';
+          display: block;
+          position: absolute;
+          right: -20px;
+          top: 3px;
+          width: 10px;
+          height: 15px; }
+      .resource-stack-layout .section-card-menu .card-info .description {
+        max-height: 0px;
+        opacity: 0;
+        overflow: hidden;
+        font-size: 13px;
+        line-height: 15px;
         /* Hover off */
-  -webkit-transition: max-height 0.5s, opacity 0.5s;
-  transition: max-height 0.5s, opacity 0.5s;
-}
-
-.resource-stack-layout .section-card-menu .card-info .description .text {
-  height: 30px;
-}
-
-.resource-stack-layout:after {
-  content: ".";
-  display: block;
-  height: 0;
-  clear: both;
-  visibility: hidden;
-}
+        -webkit-transition: max-height 0.5s, opacity 0.5s;
+                transition: max-height 0.5s, opacity 0.5s; }
+        .resource-stack-layout .section-card-menu .card-info .description .text {
+          height: 30px; }
+  .resource-stack-layout:after {
+    content: ".";
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden; }
 
 .resource-card, .resource-card-stack {
-  margin-bottom: 20px;
-}
+  margin-bottom: 20px; }
 
 .resource-card-row-stack-last {
-  margin-bottom: 0px !important;
-}
+  margin-bottom: 0px !important; }
 
 .resource-card-col-stack-last {
-  margin-bottom: 0px !important;
-}
+  margin-bottom: 0px !important; }
 
 .resource-card-3x6 {
-  height: 300px;
-}
+  height: 300px; }
 
 .resource-card-3x12 {
-  height: 620px;
-}
+  height: 620px; }
 
 .resource-card-3x18 {
-  height: 940px;
-}
+  height: 940px; }
 
 .resource-card-6x6 {
-  height: 300px;
-}
+  height: 300px; }
 
 .resource-card-6x12 {
-  height: 620px;
-}
+  height: 620px; }
 
 .resource-card-6x18 {
-  height: 940px;
-}
+  height: 940px; }
 
 .resource-card-9x6 {
-  height: 300px;
-}
+  height: 300px; }
 
 .resource-card-9x12 {
-  height: 620px;
-}
+  height: 620px; }
 
 .resource-card-9x18 {
-  height: 940px;
-}
+  height: 940px; }
 
 .resource-card-12x6 {
-  height: 300px;
-}
+  height: 300px; }
 
 .resource-card-12x12 {
-  height: 620px;
-}
+  height: 620px; }
 
 .resource-card-12x18 {
-  height: 940px;
-}
+  height: 940px; }
 
 .resource-card-15x6 {
-  height: 300px;
-}
+  height: 300px; }
 
 .resource-card-15x12 {
-  height: 620px;
-}
+  height: 620px; }
 
 .resource-card-15x18 {
-  height: 940px;
-}
+  height: 940px; }
 
 .resource-card-18x6 {
-  height: 300px;
-}
+  height: 300px; }
 
 .resource-card-18x12 {
-  height: 620px;
-}
+  height: 620px; }
 
 .resource-card-18x18 {
-  height: 940px;
-}
+  height: 940px; }
 
 .resource-card-3x2 {
-  height: 100px;
-}
+  height: 100px; }
 
 .resource-card-3x2x3 {
   height: 90px;
-  margin-bottom: 15px;
-}
+  margin-bottom: 15px; }
 
 .resource-card-3x3 {
-  height: 150px;
-}
+  height: 150px; }
 
 .resource-card-3x3x2 {
   height: 142px;
-  margin-bottom: 16px;
-}
+  margin-bottom: 16px; }
 
 .resource-card-6x2 {
-  height: 100px;
-}
+  height: 100px; }
 
 .resource-card-6x2x3 {
   height: 90px;
-  margin-bottom: 15px;
-}
+  margin-bottom: 15px; }
 
 .resource-card-6x3 {
-  height: 150px;
-}
+  height: 150px; }
 
 .resource-card-6x3x2 {
   height: 142px;
-  margin-bottom: 16px;
-}
+  margin-bottom: 16px; }
 
 .resource-card-9x2 {
-  height: 100px;
-}
+  height: 100px; }
 
 .resource-card-9x2x3 {
   height: 90px;
-  margin-bottom: 15px;
-}
+  margin-bottom: 15px; }
 
 .resource-card-9x3 {
-  height: 150px;
-}
+  height: 150px; }
 
 .resource-card-9x3x2 {
   height: 142px;
-  margin-bottom: 16px;
-}
+  margin-bottom: 16px; }
 
 .resource-card-12x2 {
-  height: 100px;
-}
+  height: 100px; }
 
 .resource-card-12x2x3 {
   height: 90px;
-  margin-bottom: 15px;
-}
+  margin-bottom: 15px; }
 
 .resource-card-12x3 {
-  height: 150px;
-}
+  height: 150px; }
 
 .resource-card-12x3x2 {
   height: 142px;
-  margin-bottom: 16px;
-}
+  margin-bottom: 16px; }
 
 .resource-card-15x2 {
-  height: 100px;
-}
+  height: 100px; }
 
 .resource-card-15x2x3 {
   height: 90px;
-  margin-bottom: 15px;
-}
+  margin-bottom: 15px; }
 
 .resource-card-15x3 {
-  height: 150px;
-}
+  height: 150px; }
 
 .resource-card-15x3x2 {
   height: 142px;
-  margin-bottom: 16px;
-}
+  margin-bottom: 16px; }
 
 .resource-card-18x2 {
-  height: 100px;
-}
+  height: 100px; }
 
 .resource-card-18x2x3 {
   height: 90px;
-  margin-bottom: 15px;
-}
+  margin-bottom: 15px; }
 
 .resource-card-18x3 {
-  height: 150px;
-}
+  height: 150px; }
 
 .resource-card-18x3x2 {
   height: 142px;
-  margin-bottom: 16px;
-}
+  margin-bottom: 16px; }
 
 /*
   The following are styles for cards in the flowlayout above, styled by the number of rows they span
 */
 /* Single row, 2 column items. */
 .resource-card-9x6 {
-  height: 390px;
-}
+  height: 390px; }
 
 /* Double row, 1 column items. Eg full width video thumbnails. */
 .resource-card-18x12 {
-  height: 558px;
-}
+  height: 558px; }
 
 /* 1/3 row items */
 .resource-card-3x2 > .card-bg, .resource-card-6x2 > .card-bg, .resource-card-9x2 > .card-bg, .resource-card-12x2 > .card-bg, .resource-card-15x2 > .card-bg, .resource-card-18x2 > .card-bg {
@@ -6188,124 +6173,89 @@ a.home-new-cta-btn:hover,
   width: 90px;
   height: 100%;
   position: absolute;
-  display: block;
-}
-
+  display: block; }
 .resource-card-3x2 > .card-info, .resource-card-6x2 > .card-info, .resource-card-9x2 > .card-info, .resource-card-12x2 > .card-info, .resource-card-15x2 > .card-info, .resource-card-18x2 > .card-info {
   height: 100%;
   left: 90px;
   padding: 6px 12px;
-  overflow: hidden;
-}
-
-.resource-card-3x2 > .card-info .title, .resource-card-6x2 > .card-info .title, .resource-card-9x2 > .card-info .title, .resource-card-12x2 > .card-info .title, .resource-card-15x2 > .card-info .title, .resource-card-18x2 > .card-info .title {
-  max-height: 48px;
-  white-space: normal;
-}
-
-.resource-card-3x2 > .card-info .description, .resource-card-6x2 > .card-info .description, .resource-card-9x2 > .card-info .description, .resource-card-12x2 > .card-info .description, .resource-card-15x2 > .card-info .description, .resource-card-18x2 > .card-info .description {
-  display: none;
-}
-
-.resource-card-3x2 > .card-info .text, .resource-card-6x2 > .card-info .text, .resource-card-9x2 > .card-info .text, .resource-card-12x2 > .card-info .text, .resource-card-15x2 > .card-info .text, .resource-card-18x2 > .card-info .text {
-  height: auto;
-}
+  overflow: hidden; }
+  .resource-card-3x2 > .card-info .title, .resource-card-6x2 > .card-info .title, .resource-card-9x2 > .card-info .title, .resource-card-12x2 > .card-info .title, .resource-card-15x2 > .card-info .title, .resource-card-18x2 > .card-info .title {
+    max-height: 48px;
+    white-space: normal; }
+  .resource-card-3x2 > .card-info .description, .resource-card-6x2 > .card-info .description, .resource-card-9x2 > .card-info .description, .resource-card-12x2 > .card-info .description, .resource-card-15x2 > .card-info .description, .resource-card-18x2 > .card-info .description {
+    display: none; }
+  .resource-card-3x2 > .card-info .text, .resource-card-6x2 > .card-info .text, .resource-card-9x2 > .card-info .text, .resource-card-12x2 > .card-info .text, .resource-card-15x2 > .card-info .text, .resource-card-18x2 > .card-info .text {
+    height: auto; }
 
 /* Override to show the description instead of the content section */
 .no-section .resource-card-3x2 > .card-info .section, .no-section .resource-card-6x2 > .card-info .section {
-  display: none;
-}
+  display: none; }
 
 .no-section .resource-card-3x2 > .card-info .description, .no-section .resource-card-6x2 > .card-info .description {
-  display: block;
-}
+  display: block; }
 
 /* 1/2 row items */
 .resource-card-3x3, .resource-card-6x3, .resource-card-9x3, .resource-card-12x3, .resource-card-15x3, .resource-card-18x3 {
-  height: 160px;
-}
-
-.resource-card-3x3 > .card-bg, .resource-card-6x3 > .card-bg, .resource-card-9x3 > .card-bg, .resource-card-12x3 > .card-bg, .resource-card-15x3 > .card-bg, .resource-card-18x3 > .card-bg {
-  left: 0;
-  top: 0;
-  width: 90px;
-  height: 100%;
-  position: absolute;
-  display: block;
-}
-
-.resource-card-3x3 > .card-info, .resource-card-6x3 > .card-info, .resource-card-9x3 > .card-info, .resource-card-12x3 > .card-info, .resource-card-15x3 > .card-info, .resource-card-18x3 > .card-info {
-  height: 100%;
-  left: 90px;
-  padding: 6px 12px;
-}
-
-.resource-card-3x3 > .card-info .section, .resource-card-6x3 > .card-info .section, .resource-card-9x3 > .card-info .section, .resource-card-12x3 > .card-info .section, .resource-card-15x3 > .card-info .section, .resource-card-18x3 > .card-info .section {
-  display: none;
-}
-
-.resource-card-3x3 > .card-info .title, .resource-card-6x3 > .card-info .title, .resource-card-9x3 > .card-info .title, .resource-card-12x3 > .card-info .title, .resource-card-15x3 > .card-info .title, .resource-card-18x3 > .card-info .title {
-  max-height: 96px;
-  white-space: normal;
-}
-
-.resource-card-3x3 > .card-info .text, .resource-card-6x3 > .card-info .text, .resource-card-9x3 > .card-info .text, .resource-card-12x3 > .card-info .text, .resource-card-15x3 > .card-info .text, .resource-card-18x3 > .card-info .text {
-  height: auto;
-}
-
-.resource-card-3x3 > .card-info .util, .resource-card-6x3 > .card-info .util, .resource-card-9x3 > .card-info .util, .resource-card-12x3 > .card-info .util, .resource-card-15x3 > .card-info .util, .resource-card-18x3 > .card-info .util {
-  display: none;
-}
+  height: 160px; }
+  .resource-card-3x3 > .card-bg, .resource-card-6x3 > .card-bg, .resource-card-9x3 > .card-bg, .resource-card-12x3 > .card-bg, .resource-card-15x3 > .card-bg, .resource-card-18x3 > .card-bg {
+    left: 0;
+    top: 0;
+    width: 90px;
+    height: 100%;
+    position: absolute;
+    display: block; }
+  .resource-card-3x3 > .card-info, .resource-card-6x3 > .card-info, .resource-card-9x3 > .card-info, .resource-card-12x3 > .card-info, .resource-card-15x3 > .card-info, .resource-card-18x3 > .card-info {
+    height: 100%;
+    left: 90px;
+    padding: 6px 12px; }
+    .resource-card-3x3 > .card-info .section, .resource-card-6x3 > .card-info .section, .resource-card-9x3 > .card-info .section, .resource-card-12x3 > .card-info .section, .resource-card-15x3 > .card-info .section, .resource-card-18x3 > .card-info .section {
+      display: none; }
+    .resource-card-3x3 > .card-info .title, .resource-card-6x3 > .card-info .title, .resource-card-9x3 > .card-info .title, .resource-card-12x3 > .card-info .title, .resource-card-15x3 > .card-info .title, .resource-card-18x3 > .card-info .title {
+      max-height: 96px;
+      white-space: normal; }
+    .resource-card-3x3 > .card-info .text, .resource-card-6x3 > .card-info .text, .resource-card-9x3 > .card-info .text, .resource-card-12x3 > .card-info .text, .resource-card-15x3 > .card-info .text, .resource-card-18x3 > .card-info .text {
+      height: auto; }
+    .resource-card-3x3 > .card-info .util, .resource-card-6x3 > .card-info .util, .resource-card-9x3 > .card-info .util, .resource-card-12x3 > .card-info .util, .resource-card-15x3 > .card-info .util, .resource-card-18x3 > .card-info .util {
+      display: none; }
 
 /* placement of plusone */
 .resource-card-6x12 > .card-info .description .util, .resource-card-9x12 > .card-info .description .util, .resource-card-12x12 > .card-info .description .util, .resource-card-15x12 > .card-info .description .util {
-  bottom: 2px;
-}
+  bottom: 2px; }
 
 .resource-card-18x12 > .card-info .description .util {
-  bottom: 2px;
-}
+  bottom: 2px; }
 
 /* Overrides for col-16 6x6 cards linking to local content on landing pages.
    Suppresses "section". */
 .landing .card-info .section {
-  display: none;
-}
+  display: none; }
 
 /*
   Generate a resource stack layout for a 3 column widget spanning 16 grid cols
 */
 .resource-stack-layout.col-16 {
   margin: 0 -14px 0 0;
-  width: 954px;
-}
-
-.resource-stack-layout.col-16 .resource-card-stack {
-  margin: 0 14px 0 0;
-  width: 304px;
-}
+  width: 954px; }
+  .resource-stack-layout.col-16 .resource-card-stack {
+    margin: 0 14px 0 0;
+    width: 304px; }
 
 /* Example of card menu tinting */
 .resource-widget[data-section=distribute\/tools] .section-card-menu .card-bg:after {
-  background: rgba(126, 55, 148, 0.4) !important;
-}
-
+  background: rgba(126, 55, 148, 0.4) !important; }
 .resource-widget[data-section=distribute\/tools] .section-card-menu .card-section-icon .icon {
-  background-color: #7e3794 !important;
-}
-
+  background-color: #7e3794 !important; }
 .resource-widget[data-section=distribute\/tools] .section-card-menu .card-info ul li {
-  border-top-color: #7e3794 !important;
-}
+  border-top-color: #7e3794 !important; }
 
 /* tinting for stacks */
 div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-menu .card-info ul li {
-  border-top-color: #7e3794 !important;
-}
+  border-top-color: #7e3794 !important; }
 
 .dac-fab, .button, .landing-button, .dac-button {
   background: transparent;
   border: 0;
+  border-radius: 3px;
   box-sizing: border-box;
   color: currentColor;
   cursor: pointer;
@@ -6326,190 +6276,142 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
   text-decoration: none;
   text-transform: uppercase;
   -webkit-transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-  transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+          transition: box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
   -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  white-space: nowrap;
-}
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  white-space: nowrap; }
 
 .button, .landing-button, .dac-button.dac-raised {
   background-color: #FAFAFA;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
-}
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26); }
 
 .dac-button.dac-raised.dac-primary, .landing-secondary, .button {
-  background-color: #039bef;
-}
-
-.dac-button.dac-raised.dac-primary:hover, .landing-secondary:hover, .button:hover {
-  background-color: #0288d1;
-}
-
-.dac-button.dac-raised.dac-primary:active, .landing-secondary:active, .button:active {
-  background-color: #0277bd;
-}
+  background-color: #039bef; }
+  .dac-button.dac-raised.dac-primary:hover, .landing-secondary:hover, .button:hover {
+    background-color: #0288d1; }
+  .dac-button.dac-raised.dac-primary:active, .landing-secondary:active, .button:active {
+    background-color: #0277bd; }
 
 .dac-button.dac-raised.dac-red, .landing-primary {
-  background-color: #bf3722;
-}
-
-.dac-button.dac-raised.dac-red:hover, .landing-primary:hover {
-  background-color: #9c2d1c;
-}
-
-.dac-button.dac-raised.dac-red:active, .landing-primary:active {
-  background-color: #822517;
-}
+  background-color: #bf3722; }
+  .dac-button.dac-raised.dac-red:hover, .landing-primary:hover {
+    background-color: #9c2d1c; }
+  .dac-button.dac-raised.dac-red:active, .landing-primary:active {
+    background-color: #822517; }
 
 .dac-button.dac-raised.dac-green, .landing-button.green {
-  background-color: #90C653;
-}
+  background-color: #90C653; }
 
 .dac-button.dac-raised.dac-primary, .landing-secondary, .button, .dac-button.dac-raised.dac-red, .landing-primary, .dac-button.dac-raised.dac-green, .landing-button.green {
-  color: #fff;
-}
+  color: #fff; }
 
 .dac-button.dac-large, .landing-button {
-  padding: 12px 24px;
-}
+  padding: 12px 24px; }
 
 .dac-fab {
   background: #fff;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
-  border-radius: 50%;
-  font-size: 0;
-  height: 36px;
-  line-height: 36px;
-  min-width: 0;
-  overflow: hidden;
-  padding: 0;
-  vertical-align: middle;
-  width: 36px;
-}
-
-.dac-fab:hover, a:hover > .dac-fab {
-  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.26);
-}
-
-.dac-fab.dac-primary {
-  background: #00c7a0;
-}
-
-.dac-fab.dac-large {
-  height: 54px;
-  line-height: 54px;
-  width: 54px;
-}
-
-.dac-scroll-button {
-  height: 54px;
-  line-height: 54px;
-  margin: 0;
-  position: absolute;
-  right: 0;
-  top: -27px;
-  width: 54px;
-  z-index: 1;
-}
-
-@media (max-width: 719px) {
-  .dac-scroll-button {
-    display: none;
-  }
-}
-
-/* Footer component */
-.dac-footer {
-  background-color: #fff;
-  border-top: 1px solid #f9f9f9;
-  clear: both;
-  color: #999;
-  font-size: 12px;
-  margin-top: 40px;
-  padding-bottom: 20px;
-  position: relative;
-}
-
-.dac-footer a {
-  color: #999;
-}
-
-.dac-footer p {
-  margin: 7px 0 0;
-}
-
-.dac-footer-main {
-  padding: 30px 0;
-}
-
-.dac-footer-reachout {
-  text-align: right;
-}
-
-.dac-footer-contact, .dac-footer-social {
-  display: inline-block;
-}
-
-.dac-footer a.dac-footer-getnews, .dac-footer a.dac-footer-contact-link {
-  color: #000;
-  cursor: pointer;
-  font-size: 20px;
-  font-weight: 300;
-  margin: 0 8px;
-  vertical-align: middle;
-}
-
-.dac-footer-getnews > .dac-fab {
-  margin-left: 4px;
-}
-
-.dac-footer-separator {
-  background: #f9f9f9;
-  margin: 0 0 12px;
-}
-
-.dac-footer-links a + a:before {
-  content: '|';
-  cursor: default;
-  margin: 0 10px 0 8px;
-}
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.26);
+  border-radius: 50%;
+  font-size: 0;
+  height: 36px;
+  line-height: 36px;
+  min-width: 0;
+  overflow: hidden;
+  padding: 0;
+  vertical-align: middle;
+  width: 36px; }
+  .dac-fab:hover, a:hover > .dac-fab {
+    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.26); }
+  .dac-fab.dac-primary {
+    background: #00c7a0; }
+  .dac-fab.dac-large {
+    height: 54px;
+    line-height: 54px;
+    width: 54px; }
 
-.dac-footer .locales {
-  float: right;
+.dac-scroll-button {
+  height: 54px;
+  line-height: 54px;
   margin: 0;
-}
+  position: absolute;
+  right: 0;
+  top: -27px;
+  width: 54px;
+  z-index: 1; }
+  @media (max-width: 719px) {
+    .dac-scroll-button {
+      display: none; } }
 
-.dac-footer .locales select {
-  background-color: #f9f9f9;
-  border-radius: 0;
+/* Footer component */
+.dac-footer {
+  background-color: #fff;
+  border-top: 1px solid #f0f0f0;
+  clear: both;
+  color: #999;
   font-size: 12px;
-  height: auto;
-  margin-top: -2px;
-  padding: 8px 12px;
-}
-
-@media (max-width: 719px) {
+  margin-top: 96px;
+  padding-bottom: 20px;
+  position: relative;
+  /* Modifier for landing pages, to snuggle closer to sections. */ }
+  .dac-footer a {
+    color: #999; }
+  .dac-footer p {
+    margin: 7px 0 0; }
+  .dac-footer-main {
+    padding: 30px 0; }
   .dac-footer-reachout {
-    text-align: left;
-  }
-
-  .dac-footer-social {
-    display: block;
-  }
-
-  .dac-footer-social-link, .dac-footer-contact-link {
-    display: inline-block;
-    margin-top: 20px;
-  }
-
+    text-align: right; }
+  .dac-footer-contact, .dac-footer-social {
+    display: inline-block; }
+  .dac-footer .dac-footer-getnews, .dac-footer .dac-footer-contact-link {
+    color: #000;
+    cursor: pointer;
+    font-size: 20px;
+    font-weight: 300;
+    margin: 8px 0;
+    vertical-align: middle; }
+  .dac-footer .dac-footer-contact-link, .dac-footer .dac-footer-social-link {
+    margin-left: 16px;
+    margin-right: 0; }
+  .dac-footer-getnews > .dac-fab {
+    margin-left: 4px; }
+  .dac-footer-separator {
+    background: #f0f0f0;
+    margin: 0 0 12px; }
+  .dac-footer-links a + a:before {
+    content: '|';
+    cursor: default;
+    margin: 0 10px 0 8px; }
   .dac-footer .locales {
-    display: block;
-    float: none;
-    margin-top: 15px;
-  }
-}
+    float: right;
+    margin: 0; }
+    .dac-footer .locales select {
+      background-color: #f0f0f0;
+      border-radius: 3px;
+      font-size: 12px;
+      height: auto;
+      margin-top: -2px;
+      padding: 8px 12px;
+      width: 146px; }
+  .dac-footer.dac-landing {
+    margin-top: 0;
+    border-top: 0; }
+  @media (max-width: 719px) {
+    .dac-footer-reachout {
+      text-align: left; }
+    .dac-footer-social {
+      display: block; }
+    .dac-footer-social-link, .dac-footer-contact-link {
+      display: inline-block; }
+    .dac-footer .dac-footer-contact-link, .dac-footer .dac-footer-social-link {
+      margin-left: 0;
+      margin-right: 16px; }
+    .dac-footer .locales {
+      display: block;
+      float: none;
+      margin-top: 15px; } }
 
 /* =============================================================================
    Columns
@@ -6517,8 +6419,7 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
 .wrap {
   margin: 0 auto;
   max-width: 940px;
-  clear: both;
-}
+  clear: both; }
 
 .cols {
   margin-left: -10px;
@@ -6531,19 +6432,14 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
    *    that are clearfixed.
    * 2. The use of `table` rather than `block` is only necessary if using
    *    `:before` to contain the top-margins of child elements.
-   */
-}
-
-.cols:before, .cols:after {
-  content: ' ';
+   */ }
+  .cols:before, .cols:after {
+    content: ' ';
     /* 1 */
-  display: table;
-    /* 2 */
-}
-
-.cols:after {
-  clear: both;
-}
+    display: table;
+    /* 2 */ }
+  .cols:after {
+    clear: both; }
 
 [class*=col-] {
   box-sizing: border-box;
@@ -6551,698 +6447,623 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
   min-height: 1px;
   padding-left: 10px;
   padding-right: 10px;
-  position: relative;
-}
+  position: relative; }
 
 .col-1 {
-  width: 6.25%;
-}
+  width: 6.25%; }
 
 .col-2 {
-  width: 12.5%;
-}
+  width: 12.5%; }
 
 .col-3 {
-  width: 18.75%;
-}
+  width: 18.75%; }
 
 .col-4 {
-  width: 25%;
-}
+  width: 25%; }
 
 .col-5 {
-  width: 31.25%;
-}
+  width: 31.25%; }
 
 .col-6 {
-  width: 37.5%;
-}
+  width: 37.5%; }
 
 .col-7 {
-  width: 43.75%;
-}
+  width: 43.75%; }
 
 .col-8 {
-  width: 50%;
-}
+  width: 50%; }
 
 .col-9 {
-  width: 56.25%;
-}
+  width: 56.25%; }
 
 .col-10 {
-  width: 62.5%;
-}
+  width: 62.5%; }
 
 .col-11 {
-  width: 68.75%;
-}
+  width: 68.75%; }
 
 .col-12 {
-  width: 75%;
-}
+  width: 75%; }
 
 .col-13 {
-  width: 81.25%;
-}
+  width: 81.25%; }
 
 .col-14 {
-  width: 87.5%;
-}
+  width: 87.5%; }
 
 .col-15 {
-  width: 93.75%;
-}
+  width: 93.75%; }
 
 .col-16 {
-  width: 100%;
-}
+  width: 100%; }
 
 .col-13 .col-1 {
-  width: 7.69230769%;
-}
+  width: 7.69230769%; }
 
 .col-13 .col-2 {
-  width: 15.38461538%;
-}
+  width: 15.38461538%; }
 
 .col-13 .col-3 {
-  width: 23.07692308%;
-}
+  width: 23.07692308%; }
 
 .col-13 .col-4 {
-  width: 30.76923077%;
-}
+  width: 30.76923077%; }
 
 .col-13 .col-5 {
-  width: 38.46153846%;
-}
+  width: 38.46153846%; }
 
 .col-13 .col-6 {
-  width: 46.15384615%;
-}
+  width: 46.15384615%; }
 
 .col-13 .col-7 {
-  width: 53.84615385%;
-}
+  width: 53.84615385%; }
 
 .col-13 .col-8 {
-  width: 61.53846154%;
-}
+  width: 61.53846154%; }
 
 .col-13 .col-9 {
-  width: 69.23076923%;
-}
+  width: 69.23076923%; }
 
 .col-13 .col-10 {
-  width: 76.92307692%;
-}
+  width: 76.92307692%; }
 
 .col-13 .col-11 {
-  width: 84.61538462%;
-}
+  width: 84.61538462%; }
 
 .col-13 .col-12 {
-  width: 92.30769231%;
-}
+  width: 92.30769231%; }
 
 .col-13 .col-13 {
-  width: 100%;
-}
+  width: 100%; }
 
 .col-12 .col-1 {
-  width: 8.33333333%;
-}
+  width: 8.33333333%; }
 
 .col-12 .col-2 {
-  width: 16.66666667%;
-}
+  width: 16.66666667%; }
 
 .col-12 .col-3 {
-  width: 25%;
-}
+  width: 25%; }
 
 .col-12 .col-4 {
-  width: 33.33333333%;
-}
+  width: 33.33333333%; }
 
 .col-12 .col-5 {
-  width: 41.66666667%;
-}
+  width: 41.66666667%; }
 
 .col-12 .col-6 {
-  width: 50%;
-}
+  width: 50%; }
 
 .col-12 .col-7 {
-  width: 58.33333333%;
-}
+  width: 58.33333333%; }
 
 .col-12 .col-8 {
-  width: 66.66666667%;
-}
+  width: 66.66666667%; }
 
 .col-12 .col-9 {
-  width: 75%;
-}
+  width: 75%; }
 
 .col-12 .col-10 {
-  width: 83.33333333%;
-}
+  width: 83.33333333%; }
 
 .col-12 .col-11 {
-  width: 91.66666667%;
-}
+  width: 91.66666667%; }
 
 .col-12 .col-12 {
-  width: 100%;
-}
+  width: 100%; }
 
 .col-1of1, .col-2of2, .col-3of3, .col-4of4, .col-5of5, .col-6of6, .col-8of8, .col-10of10, .col-12of12, .col-16of16 {
-  width: 100%;
-}
+  width: 100%; }
 
 .col-1of2, .col-2of4, .col-3of6, .col-4of8, .col-5of10, .col-6of12, .col-8of16 {
-  width: 50%;
-}
+  width: 50%; }
 
 .col-1of3, .col-2of6, .col-4of12 {
-  width: 33.33333333%;
-}
+  width: 33.33333333%; }
 
 .col-2of3, .col-4of6, .col-8of12 {
-  width: 66.66666667%;
-}
+  width: 66.66666667%; }
 
 .col-1of4, .col-2of8, .col-3of12, .col-4of16 {
-  width: 25%;
-}
+  width: 25%; }
 
 .col-3of4, .col-6of8, .col-9of12, .col-12of16 {
-  width: 75%;
-}
+  width: 75%; }
 
 .col-1of5, .col-2of10 {
-  width: 20%;
-}
+  width: 20%; }
 
 .col-2of5, .col-4of10 {
-  width: 40%;
-}
+  width: 40%; }
 
 .col-3of5, .col-6of10 {
-  width: 60%;
-}
+  width: 60%; }
 
 .col-4of5, .col-8of10 {
-  width: 80%;
-}
+  width: 80%; }
 
 .col-1of6, .col-2of12 {
-  width: 16.66666667%;
-}
+  width: 16.66666667%; }
 
 .col-5of6, .col-10of12 {
-  width: 83.33333333%;
-}
+  width: 83.33333333%; }
 
 .col-1of8, .col-2of16 {
-  width: 12.5%;
-}
+  width: 12.5%; }
 
 .col-3of8, .col-6of16 {
-  width: 37.5%;
-}
+  width: 37.5%; }
 
 .col-5of8, .col-10of16 {
-  width: 62.5%;
-}
+  width: 62.5%; }
 
 .col-7of8, .col-14of16 {
-  width: 87.5%;
-}
+  width: 87.5%; }
 
 .col-1of10 {
-  width: 10%;
-}
+  width: 10%; }
 
 .col-3of10 {
-  width: 30%;
-}
+  width: 30%; }
 
 .col-7of10 {
-  width: 70%;
-}
+  width: 70%; }
 
 .col-9of10 {
-  width: 90%;
-}
+  width: 90%; }
 
 .col-1of12 {
-  width: 8.33333333%;
-}
+  width: 8.33333333%; }
 
 .col-5of12 {
-  width: 41.66666667%;
-}
+  width: 41.66666667%; }
 
 .col-7of12 {
-  width: 58.33333333%;
-}
+  width: 58.33333333%; }
 
 .col-11of12 {
-  width: 91.66666667%;
-}
+  width: 91.66666667%; }
 
 .col-1of16 {
-  width: 6.25%;
-}
+  width: 6.25%; }
 
 .col-3of16 {
-  width: 18.75%;
-}
+  width: 18.75%; }
 
 .col-5of16 {
-  width: 31.25%;
-}
+  width: 31.25%; }
 
 .col-7of16 {
-  width: 43.75%;
-}
+  width: 43.75%; }
 
 .col-9of16 {
-  width: 56.25%;
-}
+  width: 56.25%; }
 
 .col-11of16 {
-  width: 68.75%;
-}
+  width: 68.75%; }
 
 .col-13of16 {
-  width: 81.25%;
-}
+  width: 81.25%; }
 
 .col-15of16 {
-  width: 93.75%;
-}
+  width: 93.75%; }
 
 .col-pull-1of1, .col-pull-2of2, .col-pull-3of3, .col-pull-4of4, .col-pull-5of5, .col-pull-6of6, .col-pull-8of8, .col-pull-10of10, .col-pull-12of12, .col-pull-16of16 {
-  left: -100%;
-}
+  left: -100%; }
 
 .col-pull-1of2, .col-pull-2of4, .col-pull-3of6, .col-pull-4of8, .col-pull-5of10, .col-pull-6of12, .col-pull-8of16 {
-  left: -50%;
-}
+  left: -50%; }
 
 .col-pull-1of3, .col-pull-2of6, .col-pull-4of12 {
-  left: -33.33333333%;
-}
+  left: -33.33333333%; }
 
 .col-pull-2of3, .col-pull-4of6, .col-pull-8of12 {
-  left: -66.66666667%;
-}
+  left: -66.66666667%; }
 
 .col-pull-1of4, .col-pull-2of8, .col-pull-3of12, .col-pull-4of16 {
-  left: -25%;
-}
+  left: -25%; }
 
 .col-pull-3of4, .col-pull-6of8, .col-pull-9of12, .col-pull-12of16 {
-  left: -75%;
-}
+  left: -75%; }
 
 .col-pull-1of5, .col-pull-2of10 {
-  left: -20%;
-}
+  left: -20%; }
 
 .col-pull-2of5, .col-pull-4of10 {
-  left: -40%;
-}
+  left: -40%; }
 
 .col-pull-3of5, .col-pull-6of10 {
-  left: -60%;
-}
+  left: -60%; }
 
 .col-pull-4of5, .col-pull-8of10 {
-  left: -80%;
-}
+  left: -80%; }
 
 .col-pull-1of6, .col-pull-2of12 {
-  left: -16.66666667%;
-}
+  left: -16.66666667%; }
 
 .col-pull-5of6, .col-pull-10of12 {
-  left: -83.33333333%;
-}
+  left: -83.33333333%; }
 
 .col-pull-1of8, .col-pull-2of16 {
-  left: -12.5%;
-}
+  left: -12.5%; }
 
 .col-pull-3of8, .col-pull-6of16 {
-  left: -37.5%;
-}
+  left: -37.5%; }
 
 .col-pull-5of8, .col-pull-10of16 {
-  left: -62.5%;
-}
+  left: -62.5%; }
 
 .col-pull-7of8, .col-pull-14of16 {
-  left: -87.5%;
-}
+  left: -87.5%; }
 
 .col-pull-1of10 {
-  left: -10%;
-}
+  left: -10%; }
 
 .col-pull-3of10 {
-  left: -30%;
-}
+  left: -30%; }
 
 .col-pull-7of10 {
-  left: -70%;
-}
+  left: -70%; }
 
 .col-pull-9of10 {
-  left: -90%;
-}
+  left: -90%; }
 
 .col-pull-1of12 {
-  left: -8.33333333%;
-}
+  left: -8.33333333%; }
 
 .col-pull-5of12 {
-  left: -41.66666667%;
-}
+  left: -41.66666667%; }
 
 .col-pull-7of12 {
-  left: -58.33333333%;
-}
+  left: -58.33333333%; }
 
 .col-pull-11of12 {
-  left: -91.66666667%;
-}
+  left: -91.66666667%; }
 
 .col-pull-1of16 {
-  left: -6.25%;
-}
+  left: -6.25%; }
 
 .col-pull-3of16 {
-  left: -18.75%;
-}
+  left: -18.75%; }
 
 .col-pull-5of16 {
-  left: -31.25%;
-}
+  left: -31.25%; }
 
 .col-pull-7of16 {
-  left: -43.75%;
-}
+  left: -43.75%; }
 
 .col-pull-9of16 {
-  left: -56.25%;
-}
+  left: -56.25%; }
 
 .col-pull-11of16 {
-  left: -68.75%;
-}
+  left: -68.75%; }
 
 .col-pull-13of16 {
-  left: -81.25%;
-}
+  left: -81.25%; }
 
 .col-pull-15of16 {
-  left: -93.75%;
-}
+  left: -93.75%; }
 
 .col-push-1of1, .col-push-2of2, .col-push-3of3, .col-push-4of4, .col-push-5of5, .col-push-6of6, .col-push-8of8, .col-push-10of10, .col-push-12of12, .col-push-16of16 {
-  left: 100%;
-}
+  left: 100%; }
 
 .col-push-1of2, .col-push-2of4, .col-push-3of6, .col-push-4of8, .col-push-5of10, .col-push-6of12, .col-push-8of16 {
-  left: 50%;
-}
+  left: 50%; }
 
 .col-push-1of3, .col-push-2of6, .col-push-4of12 {
-  left: 33.33333333%;
-}
+  left: 33.33333333%; }
 
 .col-push-2of3, .col-push-4of6, .col-push-8of12 {
-  left: 66.66666667%;
-}
+  left: 66.66666667%; }
 
 .col-push-1of4, .col-push-2of8, .col-push-3of12, .col-push-4of16 {
-  left: 25%;
-}
+  left: 25%; }
 
 .col-push-3of4, .col-push-6of8, .col-push-9of12, .col-push-12of16 {
-  left: 75%;
-}
+  left: 75%; }
 
 .col-push-1of5, .col-push-2of10 {
-  left: 20%;
-}
+  left: 20%; }
 
 .col-push-2of5, .col-push-4of10 {
-  left: 40%;
-}
+  left: 40%; }
 
 .col-push-3of5, .col-push-6of10 {
-  left: 60%;
-}
+  left: 60%; }
 
 .col-push-4of5, .col-push-8of10 {
-  left: 80%;
-}
+  left: 80%; }
 
 .col-push-1of6, .col-push-2of12 {
-  left: 16.66666667%;
-}
+  left: 16.66666667%; }
 
 .col-push-5of6, .col-push-10of12 {
-  left: 83.33333333%;
-}
+  left: 83.33333333%; }
 
 .col-push-1of8, .col-push-2of16 {
-  left: 12.5%;
-}
+  left: 12.5%; }
 
 .col-push-3of8, .col-push-6of16 {
-  left: 37.5%;
-}
+  left: 37.5%; }
 
 .col-push-5of8, .col-push-10of16 {
-  left: 62.5%;
-}
+  left: 62.5%; }
 
 .col-push-7of8, .col-push-14of16 {
-  left: 87.5%;
-}
+  left: 87.5%; }
 
 .col-push-1of10 {
-  left: 10%;
-}
+  left: 10%; }
 
 .col-push-3of10 {
-  left: 30%;
-}
+  left: 30%; }
 
 .col-push-7of10 {
-  left: 70%;
-}
+  left: 70%; }
 
 .col-push-9of10 {
-  left: 90%;
-}
+  left: 90%; }
 
 .col-push-1of12 {
-  left: 8.33333333%;
-}
+  left: 8.33333333%; }
 
 .col-push-5of12 {
-  left: 41.66666667%;
-}
+  left: 41.66666667%; }
 
 .col-push-7of12 {
-  left: 58.33333333%;
-}
+  left: 58.33333333%; }
 
 .col-push-11of12 {
-  left: 91.66666667%;
-}
+  left: 91.66666667%; }
 
 .col-push-1of16 {
-  left: 6.25%;
-}
+  left: 6.25%; }
 
 .col-push-3of16 {
-  left: 18.75%;
-}
+  left: 18.75%; }
 
 .col-push-5of16 {
-  left: 31.25%;
-}
+  left: 31.25%; }
 
 .col-push-7of16 {
-  left: 43.75%;
-}
+  left: 43.75%; }
 
 .col-push-9of16 {
-  left: 56.25%;
-}
+  left: 56.25%; }
 
 .col-push-11of16 {
-  left: 68.75%;
-}
+  left: 68.75%; }
 
 .col-push-13of16 {
-  left: 81.25%;
-}
+  left: 81.25%; }
 
 .col-push-15of16 {
-  left: 93.75%;
-}
+  left: 93.75%; }
 
 @media (max-width: 960px) and (min-width: 720px) {
   .col-tablet-1of1, .col-tablet-2of2, .col-tablet-3of3, .col-tablet-4of4, .col-tablet-5of5, .col-tablet-6of6, .col-tablet-8of8, .col-tablet-10of10, .col-tablet-12of12, .col-tablet-16of16 {
-    width: 100%;
-  }
-
+    width: 100%; }
   .col-tablet-1of2, .col-tablet-2of4, .col-tablet-3of6, .col-tablet-4of8, .col-tablet-5of10, .col-tablet-6of12, .col-tablet-8of16 {
-    width: 50%;
-  }
-
+    width: 50%; }
   .col-tablet-1of3, .col-tablet-2of6, .col-tablet-4of12 {
-    width: 33.33333333%;
-  }
-
+    width: 33.33333333%; }
   .col-tablet-2of3, .col-tablet-4of6, .col-tablet-8of12 {
-    width: 66.66666667%;
-  }
-
+    width: 66.66666667%; }
   .col-tablet-1of4, .col-tablet-2of8, .col-tablet-3of12, .col-tablet-4of16 {
-    width: 25%;
-  }
-
+    width: 25%; }
   .col-tablet-3of4, .col-tablet-6of8, .col-tablet-9of12, .col-tablet-12of16 {
-    width: 75%;
-  }
-
+    width: 75%; }
   .col-tablet-1of5, .col-tablet-2of10 {
-    width: 20%;
-  }
-
+    width: 20%; }
   .col-tablet-2of5, .col-tablet-4of10 {
-    width: 40%;
-  }
-
+    width: 40%; }
   .col-tablet-3of5, .col-tablet-6of10 {
-    width: 60%;
-  }
-
+    width: 60%; }
   .col-tablet-4of5, .col-tablet-8of10 {
-    width: 80%;
-  }
-
+    width: 80%; }
   .col-tablet-1of6, .col-tablet-2of12 {
-    width: 16.66666667%;
-  }
-
+    width: 16.66666667%; }
   .col-tablet-5of6, .col-tablet-10of12 {
-    width: 83.33333333%;
-  }
-
+    width: 83.33333333%; }
   .col-tablet-1of8, .col-tablet-2of16 {
-    width: 12.5%;
-  }
-
+    width: 12.5%; }
   .col-tablet-3of8, .col-tablet-6of16 {
-    width: 37.5%;
-  }
-
+    width: 37.5%; }
   .col-tablet-5of8, .col-tablet-10of16 {
-    width: 62.5%;
-  }
-
+    width: 62.5%; }
   .col-tablet-7of8, .col-tablet-14of16 {
-    width: 87.5%;
-  }
-
+    width: 87.5%; }
   .col-tablet-1of10 {
-    width: 10%;
-  }
-
+    width: 10%; }
   .col-tablet-3of10 {
-    width: 30%;
-  }
-
-  .col-tablet-7of10 {
-    width: 70%;
-  }
-
+    width: 30%; }
+  .col-tablet-7of10 {
+    width: 70%; }
   .col-tablet-9of10 {
-    width: 90%;
-  }
-
+    width: 90%; }
   .col-tablet-1of12 {
-    width: 8.33333333%;
-  }
-
+    width: 8.33333333%; }
   .col-tablet-5of12 {
-    width: 41.66666667%;
-  }
-
+    width: 41.66666667%; }
   .col-tablet-7of12 {
-    width: 58.33333333%;
-  }
-
+    width: 58.33333333%; }
   .col-tablet-11of12 {
-    width: 91.66666667%;
-  }
-
+    width: 91.66666667%; }
   .col-tablet-1of16 {
-    width: 6.25%;
-  }
-
+    width: 6.25%; }
   .col-tablet-3of16 {
-    width: 18.75%;
-  }
-
+    width: 18.75%; }
   .col-tablet-5of16 {
-    width: 31.25%;
-  }
-
+    width: 31.25%; }
   .col-tablet-7of16 {
-    width: 43.75%;
-  }
-
+    width: 43.75%; }
   .col-tablet-9of16 {
-    width: 56.25%;
-  }
-
+    width: 56.25%; }
   .col-tablet-11of16 {
-    width: 68.75%;
-  }
-
+    width: 68.75%; }
   .col-tablet-13of16 {
-    width: 81.25%;
-  }
-
+    width: 81.25%; }
   .col-tablet-15of16 {
-    width: 93.75%;
-  }
-}
+    width: 93.75%; }
+  .col-tablet-pull-1of1, .col-tablet-pull-2of2, .col-tablet-pull-3of3, .col-tablet-pull-4of4, .col-tablet-pull-5of5, .col-tablet-pull-6of6, .col-tablet-pull-8of8, .col-tablet-pull-10of10, .col-tablet-pull-12of12, .col-tablet-pull-16of16 {
+    left: -100%; }
+  .col-tablet-pull-1of2, .col-tablet-pull-2of4, .col-tablet-pull-3of6, .col-tablet-pull-4of8, .col-tablet-pull-5of10, .col-tablet-pull-6of12, .col-tablet-pull-8of16 {
+    left: -50%; }
+  .col-tablet-pull-1of3, .col-tablet-pull-2of6, .col-tablet-pull-4of12 {
+    left: -33.33333333%; }
+  .col-tablet-pull-2of3, .col-tablet-pull-4of6, .col-tablet-pull-8of12 {
+    left: -66.66666667%; }
+  .col-tablet-pull-1of4, .col-tablet-pull-2of8, .col-tablet-pull-3of12, .col-tablet-pull-4of16 {
+    left: -25%; }
+  .col-tablet-pull-3of4, .col-tablet-pull-6of8, .col-tablet-pull-9of12, .col-tablet-pull-12of16 {
+    left: -75%; }
+  .col-tablet-pull-1of5, .col-tablet-pull-2of10 {
+    left: -20%; }
+  .col-tablet-pull-2of5, .col-tablet-pull-4of10 {
+    left: -40%; }
+  .col-tablet-pull-3of5, .col-tablet-pull-6of10 {
+    left: -60%; }
+  .col-tablet-pull-4of5, .col-tablet-pull-8of10 {
+    left: -80%; }
+  .col-tablet-pull-1of6, .col-tablet-pull-2of12 {
+    left: -16.66666667%; }
+  .col-tablet-pull-5of6, .col-tablet-pull-10of12 {
+    left: -83.33333333%; }
+  .col-tablet-pull-1of8, .col-tablet-pull-2of16 {
+    left: -12.5%; }
+  .col-tablet-pull-3of8, .col-tablet-pull-6of16 {
+    left: -37.5%; }
+  .col-tablet-pull-5of8, .col-tablet-pull-10of16 {
+    left: -62.5%; }
+  .col-tablet-pull-7of8, .col-tablet-pull-14of16 {
+    left: -87.5%; }
+  .col-tablet-pull-1of10 {
+    left: -10%; }
+  .col-tablet-pull-3of10 {
+    left: -30%; }
+  .col-tablet-pull-7of10 {
+    left: -70%; }
+  .col-tablet-pull-9of10 {
+    left: -90%; }
+  .col-tablet-pull-1of12 {
+    left: -8.33333333%; }
+  .col-tablet-pull-5of12 {
+    left: -41.66666667%; }
+  .col-tablet-pull-7of12 {
+    left: -58.33333333%; }
+  .col-tablet-pull-11of12 {
+    left: -91.66666667%; }
+  .col-tablet-pull-1of16 {
+    left: -6.25%; }
+  .col-tablet-pull-3of16 {
+    left: -18.75%; }
+  .col-tablet-pull-5of16 {
+    left: -31.25%; }
+  .col-tablet-pull-7of16 {
+    left: -43.75%; }
+  .col-tablet-pull-9of16 {
+    left: -56.25%; }
+  .col-tablet-pull-11of16 {
+    left: -68.75%; }
+  .col-tablet-pull-13of16 {
+    left: -81.25%; }
+  .col-tablet-pull-15of16 {
+    left: -93.75%; }
+  .col-tablet-push-1of1, .col-tablet-push-2of2, .col-tablet-push-3of3, .col-tablet-push-4of4, .col-tablet-push-5of5, .col-tablet-push-6of6, .col-tablet-push-8of8, .col-tablet-push-10of10, .col-tablet-push-12of12, .col-tablet-push-16of16 {
+    left: 100%; }
+  .col-tablet-push-1of2, .col-tablet-push-2of4, .col-tablet-push-3of6, .col-tablet-push-4of8, .col-tablet-push-5of10, .col-tablet-push-6of12, .col-tablet-push-8of16 {
+    left: 50%; }
+  .col-tablet-push-1of3, .col-tablet-push-2of6, .col-tablet-push-4of12 {
+    left: 33.33333333%; }
+  .col-tablet-push-2of3, .col-tablet-push-4of6, .col-tablet-push-8of12 {
+    left: 66.66666667%; }
+  .col-tablet-push-1of4, .col-tablet-push-2of8, .col-tablet-push-3of12, .col-tablet-push-4of16 {
+    left: 25%; }
+  .col-tablet-push-3of4, .col-tablet-push-6of8, .col-tablet-push-9of12, .col-tablet-push-12of16 {
+    left: 75%; }
+  .col-tablet-push-1of5, .col-tablet-push-2of10 {
+    left: 20%; }
+  .col-tablet-push-2of5, .col-tablet-push-4of10 {
+    left: 40%; }
+  .col-tablet-push-3of5, .col-tablet-push-6of10 {
+    left: 60%; }
+  .col-tablet-push-4of5, .col-tablet-push-8of10 {
+    left: 80%; }
+  .col-tablet-push-1of6, .col-tablet-push-2of12 {
+    left: 16.66666667%; }
+  .col-tablet-push-5of6, .col-tablet-push-10of12 {
+    left: 83.33333333%; }
+  .col-tablet-push-1of8, .col-tablet-push-2of16 {
+    left: 12.5%; }
+  .col-tablet-push-3of8, .col-tablet-push-6of16 {
+    left: 37.5%; }
+  .col-tablet-push-5of8, .col-tablet-push-10of16 {
+    left: 62.5%; }
+  .col-tablet-push-7of8, .col-tablet-push-14of16 {
+    left: 87.5%; }
+  .col-tablet-push-1of10 {
+    left: 10%; }
+  .col-tablet-push-3of10 {
+    left: 30%; }
+  .col-tablet-push-7of10 {
+    left: 70%; }
+  .col-tablet-push-9of10 {
+    left: 90%; }
+  .col-tablet-push-1of12 {
+    left: 8.33333333%; }
+  .col-tablet-push-5of12 {
+    left: 41.66666667%; }
+  .col-tablet-push-7of12 {
+    left: 58.33333333%; }
+  .col-tablet-push-11of12 {
+    left: 91.66666667%; }
+  .col-tablet-push-1of16 {
+    left: 6.25%; }
+  .col-tablet-push-3of16 {
+    left: 18.75%; }
+  .col-tablet-push-5of16 {
+    left: 31.25%; }
+  .col-tablet-push-7of16 {
+    left: 43.75%; }
+  .col-tablet-push-9of16 {
+    left: 56.25%; }
+  .col-tablet-push-11of16 {
+    left: 68.75%; }
+  .col-tablet-push-13of16 {
+    left: 81.25%; }
+  .col-tablet-push-15of16 {
+    left: 93.75%; } }
 
 .col-3-wide {
-  width: 33.33333333%;
-}
+  width: 33.33333333%; }
 
 @media (max-width: 719px) {
-  [class*=col-] {
-    float: none;
-    left: 0;
-    width: auto;
-  }
-}
+  /* Remove .col-12 and .col-13 backward compatibility support as soon as it's been removed. */
+[class*=col-], .col-12 [class*=col-], .col-13 [class*=col-] {
+  float: none;
+  left: 0;
+  width: auto;
+} }
 
 /* Header component */
 .dac-header {
@@ -7295,7 +7116,7 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
   padding: 14px 24px 14px;
 }
 
-.dac-header-logo:link, .dac-header-logo:visited, .dac-header-logo:hover, .dac-header-logo:active {
+.dac-header-logo, .dac-header-logo:hover, .dac-header-logo:focus {
   color: #444;
 }
 
@@ -7304,9 +7125,9 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
   vertical-align: top;
 }
 
-.dac-header-consoleBtn {
+.dac-header-console-btn {
   border: 1px solid #c5c5c5;
-  border-radius: 4px;
+  border-radius: 3px;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.11);
   background: #fff;
   float: right;
@@ -7318,15 +7139,15 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
   z-index: 52;
 }
 
-.dac-header-consoleBtn > .dac-sprite {
+.dac-header-console-btn > .dac-sprite {
   margin-right: 5px;
 }
 
-.dac-header-consoleBtn:link, .dac-header-consoleBtn:visited, .dac-header-consoleBtn:hover, .dac-header-consoleBtn:active {
+.dac-header-console-btn, .dac-header-console-btn:hover, .dac-header-console-btn:focus {
   color: #666;
 }
 
-.dac-header-consoleBtn:focus {
+.dac-header-console-btn:focus {
   background: rgba(63, 81, 181, 0.1);
   outline: 0;
 }
@@ -7352,7 +7173,7 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
     display: none;
   }
 
-  .dac-header-consoleBtn {
+  .dac-header-console-btn {
     display: none;
   }
 }
@@ -7415,6 +7236,7 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
 }
 
 .dac-header-crumbs-link {
+  color: #444;
   display: block;
   font-size: 16px;
   font-weight: 300;
@@ -7424,8 +7246,8 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
   transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1);
 }
 
-.dac-header-crumbs-link:link, .dac-header-crumbs-link:visited, .dac-header-crumbs-link:hover, .dac-header-crumbs-link:active {
-  color: #444;
+.dac-header-crumbs-link:hover, .dac-header-crumbs-link:focus {
+  color: rgba(68, 68, 68, 0.7);
 }
 
 .dac-header-crumbs-link:focus {
@@ -7473,14 +7295,10 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
 }
 
 .dac-header-search-btn {
-  background: url(../images/icon_search.png) 50% 0 no-repeat;
-  height: 28px;
+  left: 20px;
   position: absolute;
-  width: 64px;
-}
-
-.dac-header-search:hover .dac-header-search-btn {
-  background-position: 50% -28px;
+  top: 20px;
+  opacity: .54;
 }
 
 .dac-header-search-form {
@@ -7501,6 +7319,7 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
   background-color: transparent;
   border: none;
   border-bottom: 1px solid #CCC;
+  border-radius: 0;
   box-sizing: border-box;
   color: #2f2f2f;
   font-size: 14px;
@@ -7511,10 +7330,6 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
   z-index: 1500;
 }
 
-.dac-header-search:hover .dac-header-search-input {
-  border-bottom: 1px solid #33b5e5;
-}
-
 .dac-header-search-input:focus {
   color: #222;
   font-weight: bold;
@@ -7609,6 +7424,7 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
 }
 
 .dac-nav-link {
+  color: #444;
   display: block;
   font-size: 16px;
   font-weight: 300;
@@ -7619,8 +7435,8 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
   transition: background-color 0.35s cubic-bezier(0.35, 0, 0.25, 1);
 }
 
-.dac-nav-link:link, .dac-nav-link:visited, .dac-nav-link:hover, .dac-nav-link:active {
-  color: #444;
+.dac-nav-link:hover, .dac-nav-link:focus {
+  color: rgba(68, 68, 68, 0.7);
 }
 
 .dac-nav-link:focus {
@@ -7654,11 +7470,12 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
 }
 
 .dac-nav-secondary .dac-nav-link {
+  color: #666;
   padding: 17px 16px 15px;
 }
 
-.dac-nav-secondary .dac-nav-link:link, .dac-nav-secondary .dac-nav-link:visited, .dac-nav-secondary .dac-nav-link:hover, .dac-nav-secondary .dac-nav-link:active {
-  color: #666;
+.dac-nav-secondary .dac-nav-link:hover, .dac-nav-secondary .dac-nav-link:focus {
+  color: rgba(102, 102, 102, 0.7);
 }
 
 @media (min-width: 720px) and (max-width: 979px) {
@@ -7709,7 +7526,8 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
     bottom: 0;
     left: auto;
     max-width: 280px;
-    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    overflow-y: scroll;
     padding: 0 0 20px 0;
     position: fixed;
     right: 100%;
@@ -7778,46 +7596,11 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
     padding: 14px 24px;
   }
 
-  .dac-nav-logo:link, .dac-nav-logo:visited, .dac-nav-logo:hover, .dac-nav-logo:active {
+  .dac-nav-logo, .dac-nav-logo:hover, .dac-nav-logo:focus {
     color: #444;
   }
 }
 
-.dac-light.dac-hero, .dac-light.dac-section {
-  background-color: #eceff1;
-}
-
-.dac-gray.dac-hero, .dac-gray.dac-section {
-  background-color: #b0bec5;
-}
-
-.dac-dark.dac-hero, .dac-dark.dac-section {
-  background-color: #37474f;
-}
-
-.dac-red.dac-hero, .dac-red.dac-section {
-  background-color: #dc4d38;
-}
-
-.dac-hero-cta:link, .dac-hero-cta:visited, .dac-section-title, .dac-section-links {
-  color: #212121;
-  color: rgba(0, 0, 0, 0.87);
-}
-
-.dac-invert .dac-hero-cta:link, .dac-invert .dac-hero-cta:visited, .dac-invert .dac-section-title, .dac-invert .dac-section-links {
-  color: white;
-}
-
-.dac-hero-tag, .dac-hero-description, .dac-section-subtitle {
-  color: #757575;
-  color: rgba(0, 0, 0, 0.54);
-}
-
-.dac-invert .dac-hero-tag, .dac-invert .dac-hero-description, .dac-invert .dac-section-subtitle {
-  color: #b2b2b2;
-  color: rgba(255, 255, 255, 0.7);
-}
-
 /* Hero carousel */
 .dac-hero {
   background-color: #fff;
@@ -7829,7 +7612,7 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
   padding-top: 88px;
 }
 
-.dac-hero.dac-darken:before {
+.dac-hero.dac-darken::before {
   background: rgba(0, 0, 0, 0.3);
   bottom: 0;
   content: '';
@@ -7840,6 +7623,13 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
   top: 0;
 }
 
+@media (max-width: 719px) {
+  .dac-hero.dac-darken::before {
+    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9) 80%);
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.9) 80%);
+  }
+}
+
 .dac-hero.dac-darken .dac-hero-content {
   position: relative;
 }
@@ -7863,10 +7653,23 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
   margin: 0 0 14px;
 }
 
+@media (max-width: 719px) {
+  .dac-hero-title {
+    font-size: 28px;
+    line-height: 35px;
+  }
+}
+
 .dac-hero-description {
   margin-bottom: 16px;
 }
 
+@media (max-width: 719px) {
+  .dac-hero-description {
+    font-size: 14px;
+  }
+}
+
 .dac-hero-cta {
   display: inline-block;
   line-height: 40px;
@@ -7884,10 +7687,27 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
   margin-left: -8px;
 }
 
+@media (max-width: 719px) {
+  .dac-hero-cta {
+    line-height: 28px;
+  }
+}
+
 .dac-hero-figure {
   text-align: center;
 }
 
+@media (max-width: 719px) {
+  .dac-hero-figure {
+    height: 150px;
+    margin: 15px 0;
+  }
+
+  .dac-hero-figure img {
+    max-height: 150px;
+  }
+}
+
 .dac-hero-carousel {
   height: 550px;
   position: relative;
@@ -7899,6 +7719,7 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
   position: absolute;
   right: 0;
   top: 0;
+  will-change: opacity;
 }
 
 .dac-hero-carousel > .dac-hero, .dac-hero-carousel > .dac-hero .wrap {
@@ -7924,39 +7745,61 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
   opacity: 0;
 }
 
+.dac-hero-carousel-action {
+  bottom: 0;
+  display: block;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+}
+
+.dac-hero-carousel .dac-hero-cta {
+  position: relative;
+  z-index: 1;
+}
+
 .dac-hero-carousel-pagination {
   bottom: 33px;
   left: 0;
   position: absolute;
   right: 0;
-  z-index: 51;
 }
 
 @media (max-width: 719px) {
   .dac-hero-carousel-pagination {
-    text-align: right;
+    text-align: center;
     bottom: 20px;
   }
 }
 
+.dac-hero-carousel-pagination .dac-pagination-item {
+  position: relative;
+  z-index: 1;
+}
+
 .dac-pagination {
   list-style: none;
-  margin: 0 -3px;
+  margin: 0 -6px;
 }
 
 .dac-pagination-item {
+  background-clip: content-box;
   background-color: rgba(153, 153, 153, 0.4);
   border-radius: 50%;
   cursor: pointer;
   display: inline-block;
   height: 14px;
-  margin: 0 3px;
   overflow: hidden;
+  padding: 6px;
+  pointer-events: all;
   text-indent: 100%;
   -webkit-transition: background-color .1s ease-in;
   transition: background-color .1s ease-in;
   white-space: nowrap;
   width: 14px;
+  will-change: background-color;
 }
 
 .dac-pagination-item:hover {
@@ -7975,6 +7818,13 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
   background-color: rgba(153, 153, 153, 0.4);
 }
 
+@media (max-width: 719px) {
+  .dac-pagination-item {
+    height: 12px;
+    width: 12px;
+  }
+}
+
 /* Form component */
 .dac-form {
   color: #505050;
@@ -8161,6 +8011,54 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
   width: 100%;
 }
 
+.dac-swap {
+  overflow: hidden;
+  position: relative;
+}
+
+.dac-swap-section {
+  left: 0;
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+  -webkit-transition: opacity 1s, -webkit-transform .5s;
+  transition: opacity 1s, transform .5s;
+}
+
+.dac-swap-section.dac-up {
+  -webkit-transform: translateY(-100%);
+  -ms-transform: translateY(-100%);
+  transform: translateY(-100%);
+}
+
+.dac-swap-section.dac-down {
+  -webkit-transform: translateY(100%);
+  -ms-transform: translateY(100%);
+  transform: translateY(100%);
+}
+
+.dac-swap-section.dac-left {
+  -webkit-transform: translateX(-100%);
+  -ms-transform: translateX(-100%);
+  transform: translateX(-100%);
+}
+
+.dac-swap-section.dac-right {
+  -webkit-transform: translateX(100%);
+  -ms-transform: translateX(100%);
+  transform: translateX(100%);
+}
+
+.dac-swap-section.dac-active {
+  opacity: 1;
+  position: relative;
+  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
+  transform: translate(0, 0);
+  width: auto;
+}
+
 /* Modal component */
 .dac-modal {
   background: rgba(0, 0, 0, 0.8);
@@ -8210,23 +8108,21 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
 
 .dac-modal-window {
   background: #fff;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
+  border-radius: 5px;
   box-sizing: border-box;
-  margin: 20px;
+  margin: 20px auto;
   -webkit-transition: -webkit-transform .3s;
   transition: transform .3s;
   -webkit-transform: translate(0, -30px);
   -ms-transform: translate(0, -30px);
   transform: translate(0, -30px);
-  -webkit-transform: translate3d(0, -30px, 0);
-  transform: translate3d(0, -30px, 0);
   width: 960px;
 }
 
 .dac-modal.dac-active .dac-modal-window {
-  -webkit-transform: translateZ(0);
-  transform: translateZ(0);
+  -webkit-transform: translate(0, 0);
+  -ms-transform: translate(0, 0);
+  transform: translate(0, 0);
 }
 
 .dac-modal-header {
@@ -8266,20 +8162,25 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
 }
 
 .dac-modal-header-subtitle {
-  bottom: 31px;
+  bottom: 0;
   color: #fff;
   display: inline-block;
   font: inherit;
   font-size: 14px;
+  margin: 0;
   opacity: .8;
   position: absolute;
-  right: 35px;
+  right: 0;
 }
 
 .dac-modal-content {
   padding: 12px 35px;
 }
 
+.dac-modal-action {
+  margin: 0;
+}
+
 .dac-modal-footer {
   padding: 24px 35px;
 }
@@ -8336,6 +8237,20 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
   padding-top: 20px;
 }
 
+.newsletter-success-message {
+  font-size: 32px;
+  line-height: 1.4;
+  padding: 40px 30px;
+  text-align: center;
+}
+
+@media (max-width: 719px) {
+  .newsletter-success-message {
+    font-size: 16px;
+    padding: 12px 0 0;
+  }
+}
+
 @media (min-width: 720px) {
   .newsletter-checkboxes {
     padding-top: 46px;
@@ -8399,15 +8314,23 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
   background-color: #dc4d38;
 }
 
-.dac-hero-cta:link, .dac-hero-cta:visited, .dac-section-title, .dac-section-links {
+.dac-hero-cta, .dac-section-title, .dac-section-links {
   color: #212121;
   color: rgba(0, 0, 0, 0.87);
 }
 
-.dac-invert .dac-hero-cta:link, .dac-invert .dac-hero-cta:visited, .dac-invert .dac-section-title, .dac-invert .dac-section-links {
+.dac-invert .dac-hero-cta, .dac-invert .dac-section-title, .dac-invert .dac-section-links {
   color: white;
 }
 
+.dac-hero-cta .dac-sprite, .dac-section-title .dac-sprite, .dac-section-links .dac-sprite {
+  opacity: .87;
+}
+
+.dac-invert .dac-hero-cta .dac-sprite, .dac-invert .dac-section-title .dac-sprite, .dac-invert .dac-section-links .dac-sprite {
+  opacity: 1;
+}
+
 .dac-hero-tag, .dac-hero-description, .dac-section-subtitle {
   color: #757575;
   color: rgba(0, 0, 0, 0.54);
@@ -8469,6 +8392,12 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
 .dac-section-link {
   display: inline-block;
   margin: 0 32px;
+  -webkit-transition: opacity .3s;
+  transition: opacity .3s;
+}
+
+.dac-section-link:hover {
+  opacity: .54;
 }
 
 @media (max-width: 719px) {
@@ -8479,18 +8408,9 @@ div.jd-descr > .resource-widget[data-section=distribute\/tools] .section-card-me
 }
 
 .dac-section-link a {
-  -webkit-transition: opacity .3s;
-  transition: opacity .3s;
-}
-
-.dac-section-link a:link, .dac-section-link a:visited {
   color: inherit;
 }
 
-.dac-section-link a:hover {
-  opacity: .54;
-}
-
 /*
 SCSS variables are information about icon's compiled state, stored under its original file name
 
@@ -8514,96 +8434,144 @@ $spritesheet: width height image $spritesheet-sprites;
       background-size: 50% 50%; } }
 
 .dac-sprite.dac-auto-chevron {
-  background-position: -26px -38px;
+  background-position: 0px -196px;
   height: 24px;
   width: 24px;
   vertical-align: -6px; }
   .dac-invert .dac-sprite.dac-auto-chevron {
-    background-position: -76px 0px;
+    background-position: 0px -222px;
     height: 24px;
     width: 24px; }
 .dac-sprite.dac-auto-chevron-large {
-  background-position: 0px 0px;
+  background-position: 0px -404px;
   height: 36px;
   width: 36px;
   vertical-align: -10px; }
   .dac-invert .dac-sprite.dac-auto-chevron-large {
-    background-position: -38px 0px;
+    background-position: 0px -442px;
     height: 36px;
     width: 36px; }
+.dac-sprite.dac-auto-unfold-less {
+  background-position: 0px -352px;
+  height: 24px;
+  width: 24px;
+  vertical-align: -6px; }
+  .dac-invert .dac-sprite.dac-auto-unfold-less {
+    background-position: 0px -326px;
+    height: 24px;
+    width: 24px; }
+.dac-sprite.dac-auto-unfold-more {
+  background-position: 0px -300px;
+  height: 24px;
+  width: 24px;
+  vertical-align: -6px; }
+  .dac-invert .dac-sprite.dac-auto-unfold-more {
+    background-position: 0px -378px;
+    height: 24px;
+    width: 24px; }
 
 .dac-sprite.dac-arrow-down-gray {
-  background-position: -56px -64px;
+  background-position: 0px 0px;
   height: 11px;
   width: 19px; }
 
 .dac-sprite.dac-arrow-right {
-  background-position: -102px 0px;
+  background-position: 0px -128px;
   height: 18px;
   width: 11px; }
 
 .dac-sprite.dac-chevron-large-right-black {
-  background-position: 0px 0px;
+  background-position: 0px -404px;
   height: 36px;
   width: 36px; }
 
 .dac-sprite.dac-chevron-large-right-white {
-  background-position: -38px 0px;
+  background-position: 0px -442px;
   height: 36px;
   width: 36px; }
 
 .dac-sprite.dac-chevron-right-black {
-  background-position: -26px -38px;
+  background-position: 0px -196px;
   height: 24px;
   width: 24px; }
 
 .dac-sprite.dac-chevron-right-white {
-  background-position: -76px 0px;
+  background-position: 0px -222px;
   height: 24px;
   width: 24px; }
 
 .dac-sprite.dac-close {
-  background-position: -34px -83px;
+  background-position: 0px -27px;
   height: 12px;
   width: 12px; }
 
 .dac-sprite.dac-expand-less-black {
-  background-position: 0px -38px;
+  background-position: 0px -248px;
   height: 24px;
   width: 24px; }
 
 .dac-sprite.dac-expand-more-black {
-  background-position: -76px -26px;
+  background-position: 0px -170px;
   height: 24px;
   width: 24px; }
 
 .dac-sprite.dac-google-play {
-  background-position: -52px -38px;
+  background-position: 0px -108px;
   height: 18px;
   width: 16px; }
 
 .dac-sprite.dac-gplus {
-  background-position: 0px -64px;
+  background-position: 0px -89px;
   height: 17px;
   width: 16px; }
 
 .dac-sprite.dac-mail {
-  background-position: -16px -83px;
+  background-position: 0px -13px;
   height: 12px;
   width: 16px; }
 
+.dac-sprite.dac-play-white {
+  background-position: 0px -148px;
+  height: 20px;
+  width: 16px; }
+
 .dac-sprite.dac-rss {
-  background-position: 0px -83px;
+  background-position: 0px -41px;
   height: 14px;
   width: 14px; }
 
+.dac-sprite.dac-search {
+  background-position: 0px -274px;
+  height: 24px;
+  width: 24px; }
+
 .dac-sprite.dac-twitter {
-  background-position: -38px -64px;
+  background-position: 0px -73px;
   height: 14px;
   width: 16px; }
 
+.dac-sprite.dac-unfold-less-white {
+  background-position: 0px -326px;
+  height: 24px;
+  width: 24px; }
+
+.dac-sprite.dac-unfold-less {
+  background-position: 0px -352px;
+  height: 24px;
+  width: 24px; }
+
+.dac-sprite.dac-unfold-more-white {
+  background-position: 0px -378px;
+  height: 24px;
+  width: 24px; }
+
+.dac-sprite.dac-unfold-more {
+  background-position: 0px -300px;
+  height: 24px;
+  width: 24px; }
+
 .dac-sprite.dac-youtube {
-  background-position: -18px -64px;
+  background-position: 0px -57px;
   height: 14px;
   width: 18px; }
 
@@ -8618,6 +8586,7 @@ $spritesheet: width height image $spritesheet-sprites;
 .dac-toggle.is-expanded .dac-toggle-collapse {
   display: inline-block; }
 .dac-toggle-content {
+  clear: left;
   overflow: hidden;
   max-height: 0;
   -webkit-transition: .3s max-height;
@@ -8668,12 +8637,81 @@ $spritesheet: width height image $spritesheet-sprites;
 .dac-offset-parent {
   position: relative !important; }
 
+/**
+ * Break strings when their length exceeds the width of their container.
+ */
+.dac-text-break {
+  word-wrap: break-word !important; }
+
+/**
+ * Horizontal text alignment
+ */
+.dac-text-center {
+  text-align: center !important; }
+
+.dac-text-left {
+  text-align: left !important; }
+
+.dac-text-right {
+  text-align: right !important; }
+
+/**
+ * Prevent whitespace wrapping
+ */
+.dac-text-no-wrap {
+  white-space: nowrap !important; }
+
+/**
+ * Prevent text from wrapping onto multiple lines, instead truncate with an ellipsis.
+ */
+.dac-text-truncate {
+  max-width: 100%;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+  white-space: nowrap !important;
+  word-wrap: normal !important; }
+
+/**
+ * Floats
+ */
+.dac-float-left {
+  float: left !important; }
+
+.dac-float-right {
+  float: right !important; }
+
+/**
+ * New block formatting context
+ *
+ * This affords some useful properties to the element. It won't wrap under
+ * floats. Will also contain any floated children.
+ * N.B. This will clip overflow. Use the alternative method below if this is
+ * problematic.
+ */
+.dac-nbfc {
+  overflow: hidden !important;
+}
+
+/**
+ * New block formatting context (alternative)
+ *
+ * Alternative method when overflow must not be clipped.
+ *
+ * N.B. This breaks down in some browsers when elements within this element
+ * exceed its width.
+ */
+.dac-nbfc-alt {
+  display: table-cell !important;
+  width: 10000px !important;
+}
+
 #tb li:before, #qv li:before {
-  background-position: -26px -38px;
+  background-position: 0px -196px;
   height: 24px;
   width: 24px;
   content: '';
   left: -8px;
   opacity: .7;
   position: absolute;
-  top: -4px; }
+  top: -4px;
+}
diff --git a/tools/droiddoc/templates-sdk/assets/images/android_logo.png b/tools/droiddoc/templates-sdk/assets/images/android_logo.png
index 8fa1b7a..e3b565a 100644
Binary files a/tools/droiddoc/templates-sdk/assets/images/android_logo.png and b/tools/droiddoc/templates-sdk/assets/images/android_logo.png differ
diff --git a/tools/droiddoc/templates-sdk/assets/images/android_logo@2x.png b/tools/droiddoc/templates-sdk/assets/images/android_logo@2x.png
index 1f3e23d..dbb5ca4 100644
Binary files a/tools/droiddoc/templates-sdk/assets/images/android_logo@2x.png and b/tools/droiddoc/templates-sdk/assets/images/android_logo@2x.png differ
diff --git a/tools/droiddoc/templates-sdk/assets/images/android_logo_ndk.png b/tools/droiddoc/templates-sdk/assets/images/android_logo_ndk.png
index 511c200..63d5a40 100644
Binary files a/tools/droiddoc/templates-sdk/assets/images/android_logo_ndk.png and b/tools/droiddoc/templates-sdk/assets/images/android_logo_ndk.png differ
diff --git a/tools/droiddoc/templates-sdk/assets/images/android_logo_ndk@2x.png b/tools/droiddoc/templates-sdk/assets/images/android_logo_ndk@2x.png
index 1d88dfa..d90b9e2 100644
Binary files a/tools/droiddoc/templates-sdk/assets/images/android_logo_ndk@2x.png and b/tools/droiddoc/templates-sdk/assets/images/android_logo_ndk@2x.png differ
diff --git a/tools/droiddoc/templates-sdk/assets/images/sprite-2x.png b/tools/droiddoc/templates-sdk/assets/images/sprite-2x.png
index a1f0683..185b7e8 100644
Binary files a/tools/droiddoc/templates-sdk/assets/images/sprite-2x.png and b/tools/droiddoc/templates-sdk/assets/images/sprite-2x.png differ
diff --git a/tools/droiddoc/templates-sdk/assets/images/sprite.png b/tools/droiddoc/templates-sdk/assets/images/sprite.png
index 3ee611c..7fef43e 100644
Binary files a/tools/droiddoc/templates-sdk/assets/images/sprite.png and b/tools/droiddoc/templates-sdk/assets/images/sprite.png differ
diff --git a/tools/droiddoc/templates-sdk/assets/js/docs.js b/tools/droiddoc/templates-sdk/assets/js/docs.js
index 30a29fc..92511cc 100644
--- a/tools/droiddoc/templates-sdk/assets/js/docs.js
+++ b/tools/droiddoc/templates-sdk/assets/js/docs.js
@@ -76,7 +76,7 @@ $(document).ready(function() {
   }
 
   // set up the search close button
-  $('#search-close').click(function() {
+  $('#search-close').on('click touchend', function() {
     $searchInput = $('#search_autocomplete');
     $searchInput.attr('value', '');
     $(this).addClass("hide");
@@ -91,7 +91,8 @@ $(document).ready(function() {
   $("#search_autocomplete").focus(function() {
     $("#search-container").addClass('active');
   })
-  $("#search-container").mouseover(function() {
+  $("#search-container").on('mouseover touchend', function(e) {
+    if ($(e.target).is('#search-close')) { return; }
     $("#search-container").addClass('active');
     $("#search_autocomplete").focus();
   })
@@ -3581,6 +3582,7 @@ function showSamples() {
     var opts = {
       cardSizes: ($widget.data('cardsizes') || '').split(','),
       maxResults: parseInt($widget.data('maxresults') || '100', 10),
+      initialResults: $widget.data('initialResults'),
       itemsPerPage: $widget.data('itemsperpage'),
       sortOrder: $widget.data('sortorder'),
       query: $widget.data('query'),
@@ -3764,14 +3766,30 @@ function showSamples() {
   function drawResourcesFlowWidget($widget, opts, resources) {
     $widget.empty().addClass('cols');
     var cardSizes = opts.cardSizes || ['6x6'];
+    var initialResults = opts.initialResults || resources.length;
     var i = 0, j = 0;
     var plusone = false; // stop showing plusone buttons on cards
+    var cardParent = $widget;
 
     while (i < resources.length) {
+
+      if (i === initialResults && initialResults < resources.length) {
+        // Toggle remaining cards
+        cardParent = $('<div class="dac-toggle-content clearfix">').appendTo($widget);
+        $widget.addClass('dac-toggle');
+        $('<div class="col-1of1 dac-section-links dac-text-center">')
+          .append(
+            $('<div class="dac-section-link" data-toggle="section">')
+              .append('<span class="dac-toggle-expand">More<i class="dac-sprite dac-auto-unfold-more"></i></span>')
+              .append('<span class="dac-toggle-collapse">Less<i class="dac-sprite dac-auto-unfold-less"></i></span>')
+          )
+          .appendTo($widget)
+      }
+
       var cardSize = cardSizes[j++ % cardSizes.length];
       cardSize = cardSize.replace(/^\s+|\s+$/,'');
       
-      var column = createResponsiveFlowColumn(cardSize).appendTo($widget);
+      var column = createResponsiveFlowColumn(cardSize).appendTo(cardParent);
 
       // A stack has a third dimension which is the number of stacked items
       var isStack = cardSize.match(/(\d+)x(\d+)x(\d+)/);
@@ -4044,6 +4062,12 @@ function showSamples() {
       imgUrl = toRoot + imgUrl;
     }
 
+    if (resource.type === 'youtube') {
+      $('<div>').addClass('play-button')
+        .append($('<i class="dac-sprite dac-play-white">'))
+        .appendTo(this);
+    }
+
     $('<div>').addClass('card-bg')
       .css('background-image', 'url(' + (imgUrl || toRoot +
         'assets/images/resource-card-default-android.jpg') + ')')
@@ -4437,6 +4461,11 @@ function showSamples() {
         anchorMethod = 'prepend';
       }
 
+      // Some h2s are in their own container making it pretty hard to find the end, so skip.
+      if ($contents.length === 0) {
+        return;
+      }
+
       // Remove from DOM before messing with it. DOM is slow!
       $section.detach();
 
@@ -4451,6 +4480,16 @@ function showSamples() {
       $section = $section.wrapAll('<div class="dac-toggle dac-mobile">').parent();
       $contents.wrapAll('<div class="dac-toggle-content"><div>'); // extra div used for max-height calculation.
 
+      // Pre-expand section if requested.
+      if ($title.hasClass('is-expanded')) {
+        $section.addClass('is-expanded');
+      }
+
+      // Pre-expand section if targetted by hash.
+      if (location.hash && $section.find(location.hash).length) {
+        $section.addClass('is-expanded');
+      }
+
       // Add it back to the dom.
       $anchor[anchorMethod].call($anchor, $section);
     });
@@ -4550,6 +4589,9 @@ function showSamples() {
       slide.toggleClass('dac-invert', resource.heroInvert || fullBleed);
       slide.toggleClass('dac-darken', fullBleed);
 
+      // Should be clickable
+      slide.append($('<a class="dac-hero-carousel-action">').attr('href', cleanUrl(resource.url)));
+
       var cols = $('<div class="cols dac-hero-content">');
 
       // inline image column
@@ -4651,6 +4693,7 @@ function showSamples() {
     frameSelector: 'article',
     loop:      true,
     start:     0,
+    swipeThreshold: 160,
     pagination: '[data-carousel-pagination]'
   };
 
@@ -4678,6 +4721,15 @@ function showSamples() {
   DacCarousel.prototype.initEvents = function() {
     var that = this;
 
+    this.touch = {
+      start: {x: 0, y: 0},
+      end:   {x: 0, y: 0}
+    };
+
+    this.el.on('touchstart', this.touchstart_.bind(this));
+    this.el.on('touchend', this.touchend_.bind(this));
+    this.el.on('touchmove', this.touchmove_.bind(this));
+
     this.el.hover(function() {
       that.pauseRotateTimer();
     }, function() {
@@ -4695,6 +4747,30 @@ function showSamples() {
     });
   };
 
+  DacCarousel.prototype.touchstart_ = function(event) {
+    var t = event.originalEvent.touches[0];
+    this.touch.start = {x: t.screenX, y: t.screenY};
+  };
+
+  DacCarousel.prototype.touchend_ = function() {
+    var deltaX = this.touch.end.x - this.touch.start.x;
+    var deltaY = Math.abs(this.touch.end.y - this.touch.start.y);
+    var shouldSwipe = (deltaY < Math.abs(deltaX)) && (Math.abs(deltaX) >= this.options.swipeThreshold);
+
+    if (shouldSwipe) {
+      if (deltaX > 0) {
+        this.prev();
+      } else {
+        this.next();
+      }
+    }
+  };
+
+  DacCarousel.prototype.touchmove_ = function(event) {
+    var t = event.originalEvent.touches[0];
+    this.touch.end = {x: t.screenX, y: t.screenY};
+  };
+
   DacCarousel.prototype.initFrame = function() {
     this.frames.removeClass('active').eq(this.options.start).addClass('active');
   };
@@ -4775,21 +4851,17 @@ function showSamples() {
 
     this.el.on('click', function(event) {
       if (!$.contains($('.dac-modal-window')[0], event.target)) {
-        return this.close_();
+        return this.el.trigger('modal-close');
       }
     }.bind(this));
 
-    this.el.on('open', this.open_.bind(this));
-    this.el.on('close', this.close_.bind(this));
-    this.el.on('toggle', this.toggle_.bind(this));
+    this.el.on('modal-open', this.open_.bind(this));
+    this.el.on('modal-close', this.close_.bind(this));
+    this.el.on('modal-toggle', this.toggle_.bind(this));
   }
 
   Modal.prototype.toggle_ = function() {
-    if (this.isOpen) {
-      this.close_();
-    } else {
-      this.open_();
-    }
+    this.el.trigger('modal-' + (this.isOpen ? 'close' : 'open'));
   };
 
   Modal.prototype.close_ = function() {
@@ -4815,7 +4887,7 @@ function showSamples() {
 
   ToggleModal.prototype.clickHandler_ = function(event) {
     event.preventDefault();
-    this.modal.trigger('toggle');
+    this.modal.trigger('modal-toggle');
   };
 
   /**
@@ -4929,12 +5001,38 @@ function showSamples() {
   }
 
   /**
-   * Close the modal when the form is sent.
+   * Milliseconds until modal has vanished after modal-close is triggered.
+   * @type {number}
    * @private
    */
-  NewsletterForm.prototype.submitHandler_ = function() {
+  NewsletterForm.CLOSE_DELAY_ = 300;
+
+  /**
+   * Switch view to display form after close.
+   * @private
+   */
+  NewsletterForm.prototype.closeHandler_ = function() {
+    setTimeout(function() {
+      this.el.trigger('swap-reset');
+    }.bind(this), NewsletterForm.CLOSE_DELAY_);
+  };
+
+  /**
+   * Reset the modal to initial state.
+   * @private
+   */
+  NewsletterForm.prototype.reset_ = function() {
     this.form.trigger('reset');
-    this.el.trigger('close');
+    this.el.one('modal-close', this.closeHandler_.bind(this));
+  };
+
+  /**
+   * Display a success view on submit.
+   * @private
+   */
+  NewsletterForm.prototype.submitHandler_ = function() {
+    this.el.one('swap-complete', this.reset_.bind(this));
+    this.el.trigger('swap-content');
   };
 
   /**
@@ -5028,6 +5126,97 @@ function showSamples() {
 })(jQuery);
 
 (function($) {
+  'use strict';
+
+  /**
+   * A component that swaps two dynamic height views with an animation.
+   * Listens for the following events:
+   * * swap-content: triggers SwapContent.swap_()
+   * * swap-reset: triggers SwapContent.reset()
+   * @param el
+   * @param options
+   * @constructor
+   */
+  function SwapContent(el, options) {
+    this.el = $(el);
+    this.options = $.extend({}, SwapContent.DEFAULTS_, options);
+    this.containers = this.el.find(this.options.container);
+    this.initiallyActive = this.containers.children('.' + this.options.activeClass).eq(0);
+    this.el.on('swap-content', this.swap.bind(this));
+    this.el.on('swap-reset', this.reset.bind(this));
+  }
+
+  /**
+   * SwapContent's default settings.
+   * @type {{activeClass: string, container: string, transitionSpeed: number}}
+   * @private
+   */
+  SwapContent.DEFAULTS_ = {
+    activeClass: 'dac-active',
+    container: '[data-swap-container]',
+    transitionSpeed: 500
+  };
+
+  /**
+   * Returns container's visible height.
+   * @param container
+   * @returns {number}
+   */
+  SwapContent.prototype.currentHeight = function(container) {
+    return container.children('.' + this.options.activeClass).outerHeight();
+  };
+
+  /**
+   * Reset to show initial content
+   */
+  SwapContent.prototype.reset = function() {
+    if (!this.initiallyActive.hasClass(this.initiallyActive)) {
+      this.containers.children().toggleClass(this.options.activeClass);
+    }
+  };
+
+  /**
+   * Complete the swap.
+   */
+  SwapContent.prototype.complete = function() {
+    this.containers.height('auto');
+    this.containers.trigger('swap-complete');
+  };
+
+  /**
+   * Perform the swap of content.
+   */
+  SwapContent.prototype.swap = function() {
+    console.log(this.containers);
+    this.containers.each(function(index, container) {
+      container = $(container);
+      container.height(this.currentHeight(container)).children().toggleClass(this.options.activeClass);
+      container.animate({height: this.currentHeight(container)}, this.options.transitionSpeed,
+        this.complete.bind(this));
+    }.bind(this));
+  };
+
+  /**
+   * jQuery plugin
+   * @param  {object} options - Override default options.
+   */
+  $.fn.dacSwapContent = function(options) {
+    return this.each(function() {
+      new SwapContent(this, options);
+    });
+  };
+
+  /**
+   * Data Attribute API
+   */
+  $(document).on('ready.aranja', function() {
+    $('[data-swap]').each(function() {
+      $(this).dacSwapContent($(this).data());
+    });
+  });
+})(jQuery);
+
+(function($) {
   function Toggle(el) {
     $(el).on('click.dac.togglesection', this.toggle);
   }
@@ -5054,7 +5243,9 @@ function showSamples() {
 
     var $parent = selector && $(selector);
 
-    return $parent && $parent.length ? $parent : $this.parent();
+    $parent = $parent && $parent.length ? $parent : $this.closest('.dac-toggle');
+
+    return $parent.length ? $parent : $this.parent();
   }
 
   /**
@@ -5063,8 +5254,7 @@ function showSamples() {
    * @param visible
    */
   function transitionMaxHeight($el, visible) {
-    // Only supports 1 child
-    var contentHeight = $el.children().outerHeight();
+    var contentHeight = $el.prop('scrollHeight');
     var targetHeight = visible ? contentHeight : 0;
     var duration = $el.transitionDuration();
 
diff --git a/tools/droiddoc/templates-sdk/components/masthead.cs b/tools/droiddoc/templates-sdk/components/masthead.cs
index d3fe1c3..838ddbe 100644
--- a/tools/droiddoc/templates-sdk/components/masthead.cs
+++ b/tools/droiddoc/templates-sdk/components/masthead.cs
@@ -80,9 +80,9 @@
         <?cs call:header_search_widget() ?>
         <?cs /if ?>
 
-        <?cs if:ndk ?><a class="dac-header-consoleBtn" href="http://developer.android.com">
+        <?cs if:ndk ?><a class="dac-header-console-btn" href="http://developer.android.com">
           <span class="dac-visible-desktop-inline">Back to Android Developers</span>
-        </a><?cs else ?><a class="dac-header-consoleBtn" href="https://play.google.com/apps/publish/">
+        </a><?cs else ?><a class="dac-header-console-btn" href="https://play.google.com/apps/publish/">
           <span class="dac-sprite dac-google-play"></span>
           <span class="dac-visible-desktop-inline">Developer</span>
           Console
diff --git a/tools/droiddoc/templates-sdk/customizations.cs b/tools/droiddoc/templates-sdk/customizations.cs
index c955c87..92e506a 100644
--- a/tools/droiddoc/templates-sdk/customizations.cs
+++ b/tools/droiddoc/templates-sdk/customizations.cs
@@ -482,7 +482,7 @@ elif:samples ?><?cs include:"../../../../frameworks/base/docs/html-ndk/ndk/sampl
 def:header_search_widget() ?>
   <div class="dac-header-search" id="search-container">
     <div class="dac-header-search-inner">
-      <div class="dac-header-search-btn" id="search-btn"></div>
+      <div class="dac-sprite dac-search dac-header-search-btn" id="search-btn"></div>
       <form class="dac-header-search-form" onsubmit="return submit_search()">
         <input id="search_autocomplete" type="text" value="" autocomplete="off" name="q"
           onfocus="search_focus_changed(this, true)" onblur="search_focus_changed(this, false)"
diff --git a/tools/droiddoc/templates-sdk/footer.cs b/tools/droiddoc/templates-sdk/footer.cs
index 005a620..c960953 100644
--- a/tools/droiddoc/templates-sdk/footer.cs
+++ b/tools/droiddoc/templates-sdk/footer.cs
@@ -1,5 +1,5 @@
-<div class="dac-footer dac-expand">
-  <div class="wrap">
+<div class="wrap">
+  <div class="dac-footer<?cs if:fullpage ?> dac-landing<?cs /if ?>">
     <div class="cols dac-footer-main">
       <div class="col-1of2">
         <a class="dac-footer-getnews" data-modal-toggle="newsletter" href="javascript:;">Get news &amp; tips <span
@@ -55,101 +55,117 @@
   </div>
 </div> <!-- end footer -->
 
-<div data-modal="newsletter" data-newsletter class="dac-modal newsletter">
+<div data-modal="newsletter" data-newsletter data-swap class="dac-modal newsletter">
   <div class="dac-modal-container">
     <div class="dac-modal-window">
       <header class="dac-modal-header">
         <button class="dac-modal-header-close" data-modal-toggle><i class="dac-sprite dac-close"></i></button>
-        <h2 class="norule dac-modal-header-title">
-          Get the latest Android developer news and tips that will help you find success on Google Play.
-        </h2>
-        <p class="dac-modal-header-subtitle">&#42; Required Fields</p>
+        <div class="dac-swap" data-swap-container>
+          <section class="dac-swap-section dac-active dac-down">
+            <h2 class="norule dac-modal-header-title">Get the latest Android developer news and tips that will help you find success on Google Play.</h2>
+            <p class="dac-modal-header-subtitle">&#42; Required Fields</p>
+          </section>
+          <section class="dac-swap-section dac-up">
+            <h2 class="norule dac-modal-header-title">Hooray!</h2>
+          </section>
+        </div>
       </header>
-      <form action="https://docs.google.com/forms/d/1QgnkzbEJIDu9lMEea0mxqWrXUJu0oBCLD7ar23V0Yys/formResponse" class="dac-form" method="post" target="dac-newsletter-iframe">
-        <section class="dac-modal-content">
-          <fieldset class="dac-form-fieldset">
-            <div class="cols">
-              <div class="col-1of2 newsletter-leftCol">
-                <div class="dac-form-input-group">
-                  <label for="newsletter-full-name" class="dac-form-floatlabel">Full name</label>
-                  <input type="text" class="dac-form-input" name="entry.1357890476" id="newsletter-full-name" required>
-                  <span class="dac-form-required">*</span>
-                </div>
-                <div class="dac-form-input-group">
-                  <label for="newsletter-email" class="dac-form-floatlabel">Email address</label>
-                  <input type="email" class="dac-form-input" name="entry.472100832" id="newsletter-email" required>
-                  <span class="dac-form-required">*</span>
-                </div>
-              </div>
-              <div class="col-1of2 newsletter-rightCol">
-                <div class="dac-form-input-group">
-                  <label for="newsletter-company" class="dac-form-floatlabel">Company / developer name</label>
-                  <input type="text" class="dac-form-input" name="entry.1664780309" id="newsletter-company">
-                </div>
-                <div class="dac-form-input-group">
-                  <label for="newsletter-play-store" class="dac-form-floatlabel">One of your Play Store app URLs</label>
-                  <input type="url" class="dac-form-input" name="entry.47013838" id="newsletter-play-store" required>
-                  <span class="dac-form-required">*</span>
-                </div>
-              </div>
-            </div>
-          </fieldset>
-          <fieldset class="dac-form-fieldset">
-            <div class="cols">
-              <div class="col-1of2 newsletter-leftCol">
-                <legend class="dac-form-legend">Which best describes your business:<span class="dac-form-required">*</span>
-                </legend>
-                <div class="dac-form-radio-group">
-                  <input type="radio" value="Apps" class="dac-form-radio" name="entry.1796324055" id="newsletter-business-type-app" required>
-                  <label for="newsletter-business-type-app" class="dac-form-radio-button"></label>
-                  <label for="newsletter-business-type-app" class="dac-form-label">Apps</label>
-                </div>
-                <div class="dac-form-radio-group">
-                  <input type="radio" value="Games" class="dac-form-radio" name="entry.1796324055" id="newsletter-business-type-games" required>
-                  <label for="newsletter-business-type-games" class="dac-form-radio-button"></label>
-                  <label for="newsletter-business-type-games" class="dac-form-label">Games</label>
-                </div>
-                <div class="dac-form-radio-group">
-                  <input type="radio" value="Apps and Games" class="dac-form-radio" name="entry.1796324055" id="newsletter-business-type-appsgames" required>
-                  <label for="newsletter-business-type-appsgames" class="dac-form-radio-button"></label>
-                  <label for="newsletter-business-type-appsgames" class="dac-form-label">Apps &amp; Games</label>
-                </div>
-              </div>
-              <div class="col-1of2 newsletter-rightCol newsletter-checkboxes">
-                <div class="dac-form-radio-group">
-                  <div class="dac-media">
-                    <div class="dac-media-figure">
-                      <input type="checkbox" class="dac-form-checkbox" name="entry.732309842" id="newsletter-add" required value="Add me to the mailing list for the monthly newsletter and occasional emails about development and Google Play opportunities.">
-                      <label for="newsletter-add" class="dac-form-checkbox-button"></label>
+      <div class="dac-swap" data-swap-container>
+        <section class="dac-swap-section dac-active dac-left">
+          <form action="https://docs.google.com/forms/d/1QgnkzbEJIDu9lMEea0mxqWrXUJu0oBCLD7ar23V0Yys/formResponse" class="dac-form" method="post" target="dac-newsletter-iframe">
+            <section class="dac-modal-content">
+              <fieldset class="dac-form-fieldset">
+                <div class="cols">
+                  <div class="col-1of2 newsletter-leftCol">
+                    <div class="dac-form-input-group">
+                      <label for="newsletter-full-name" class="dac-form-floatlabel">Full name</label>
+                      <input type="text" class="dac-form-input" name="entry.1357890476" id="newsletter-full-name" required>
+                      <span class="dac-form-required">*</span>
                     </div>
-                    <div class="dac-media-body">
-                      <label for="newsletter-add" class="dac-form-label dac-form-aside">Add me to the mailing list for the monthly newsletter and occasional emails about development and Google Play opportunities.<span class="dac-form-required">*</span></label>
+                    <div class="dac-form-input-group">
+                      <label for="newsletter-email" class="dac-form-floatlabel">Email address</label>
+                      <input type="email" class="dac-form-input" name="entry.472100832" id="newsletter-email" required>
+                      <span class="dac-form-required">*</span>
+                    </div>
+                  </div>
+                  <div class="col-1of2 newsletter-rightCol">
+                    <div class="dac-form-input-group">
+                      <label for="newsletter-company" class="dac-form-floatlabel">Company / developer name</label>
+                      <input type="text" class="dac-form-input" name="entry.1664780309" id="newsletter-company">
+                    </div>
+                    <div class="dac-form-input-group">
+                      <label for="newsletter-play-store" class="dac-form-floatlabel">One of your Play Store app URLs</label>
+                      <input type="url" class="dac-form-input" name="entry.47013838" id="newsletter-play-store" required>
+                      <span class="dac-form-required">*</span>
                     </div>
                   </div>
                 </div>
-                <div class="dac-form-radio-group">
-                  <div class="dac-media">
-                    <div class="dac-media-figure">
-                      <input type="checkbox" class="dac-form-checkbox" name="entry.2045036090" id="newsletter-terms" required value="I acknowledge that the information provided in this form will be subject to Google's privacy policy (https://www.google.com/policies/privacy/).">
-                      <label for="newsletter-terms" class="dac-form-checkbox-button"></label>
+              </fieldset>
+              <fieldset class="dac-form-fieldset">
+                <div class="cols">
+                  <div class="col-1of2 newsletter-leftCol">
+                    <legend class="dac-form-legend">Which best describes your business:<span class="dac-form-required">*</span>
+                    </legend>
+                    <div class="dac-form-radio-group">
+                      <input type="radio" value="Apps" class="dac-form-radio" name="entry.1796324055" id="newsletter-business-type-app" required>
+                      <label for="newsletter-business-type-app" class="dac-form-radio-button"></label>
+                      <label for="newsletter-business-type-app" class="dac-form-label">Apps</label>
+                    </div>
+                    <div class="dac-form-radio-group">
+                      <input type="radio" value="Games" class="dac-form-radio" name="entry.1796324055" id="newsletter-business-type-games" required>
+                      <label for="newsletter-business-type-games" class="dac-form-radio-button"></label>
+                      <label for="newsletter-business-type-games" class="dac-form-label">Games</label>
+                    </div>
+                    <div class="dac-form-radio-group">
+                      <input type="radio" value="Apps and Games" class="dac-form-radio" name="entry.1796324055" id="newsletter-business-type-appsgames" required>
+                      <label for="newsletter-business-type-appsgames" class="dac-form-radio-button"></label>
+                      <label for="newsletter-business-type-appsgames" class="dac-form-label">Apps &amp; Games</label>
                     </div>
-                    <div class="dac-media-body">
-                      <label for="newsletter-terms" class="dac-form-label dac-form-aside">I acknowledge that the information provided in this form will be subject to <a href="https://www.google.com/policies/privacy/">Google's privacy policy</a>.<span class="dac-form-required">*</span></label>
+                  </div>
+                  <div class="col-1of2 newsletter-rightCol newsletter-checkboxes">
+                    <div class="dac-form-radio-group">
+                      <div class="dac-media">
+                        <div class="dac-media-figure">
+                          <input type="checkbox" class="dac-form-checkbox" name="entry.732309842" id="newsletter-add" required value="Add me to the mailing list for the monthly newsletter and occasional emails about development and Google Play opportunities.">
+                          <label for="newsletter-add" class="dac-form-checkbox-button"></label>
+                        </div>
+                        <div class="dac-media-body">
+                          <label for="newsletter-add" class="dac-form-label dac-form-aside">Add me to the mailing list for the monthly newsletter and occasional emails about development and Google Play opportunities.<span class="dac-form-required">*</span></label>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="dac-form-radio-group">
+                      <div class="dac-media">
+                        <div class="dac-media-figure">
+                          <input type="checkbox" class="dac-form-checkbox" name="entry.2045036090" id="newsletter-terms" required value="I acknowledge that the information provided in this form will be subject to Google's privacy policy (https://www.google.com/policies/privacy/).">
+                          <label for="newsletter-terms" class="dac-form-checkbox-button"></label>
+                        </div>
+                        <div class="dac-media-body">
+                          <label for="newsletter-terms" class="dac-form-label dac-form-aside">I acknowledge that the information provided in this form will be subject to <a href="https://www.google.com/policies/privacy/">Google's privacy policy</a>.<span class="dac-form-required">*</span></label>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
+              </fieldset>
+            </section>
+            <footer class="dac-modal-footer">
+              <div class="cols">
+                <div class="col-2of5">
+                </div>
               </div>
-            </div>
-          </fieldset>
+              <button type="submit" value="Submit" class="dac-fab dac-primary dac-large dac-modal-action"><i class="dac-sprite dac-arrow-right"></i></button>
+            </footer>
+          </form>
         </section>
-        <footer class="dac-modal-footer">
-          <div class="cols">
-            <div class="col-2of5">
-            </div>
+        <section class="dac-swap-section dac-right">
+          <div class="dac-modal-content">
+            <p class="newsletter-success-message">
+              You have successfully signed up for the latest Android developer news and tips.
+            </p>
           </div>
-          <button type="submit" value="Submit" class="dac-fab dac-primary dac-large dac-modal-action"><i class="dac-sprite dac-arrow-right"></i></button>
-        </footer>
-      </form>
+        </section>
+      </div>
     </div>
   </div>
 </div> <!-- end footer -->
-- 
cgit v1.1