diff --git a/tools/droiddoc/templates-sdk-dyn/assets/css/default.css b/tools/droiddoc/templates-sdk-dyn/assets/css/default.css
index 75ac78b..e7ab40f 100644
--- a/tools/droiddoc/templates-sdk-dyn/assets/css/default.css
+++ b/tools/droiddoc/templates-sdk-dyn/assets/css/default.css
@@ -4064,6 +4064,9 @@
 #sticky-header.distribute {
   border-bottom: 1px solid #9C0;
 }
+#sticky-header.about {
+  border-bottom: 1px solid #9933CC;
+}
 #sticky-header > div {
   overflow: hidden;
   *zoom: 1;
@@ -4575,11 +4578,11 @@
 }
 
 #nav-x {
-  padding-top: 14px;
+  padding-top: 13px;
 }
 
 #nav-x .wrap {
-  min-height:34px;
+  min-height:32px;
 }
 
 #nav-x .wrap,
@@ -5158,7 +5161,7 @@
 /* Basic card-styling with shadow */
 .resource-card {
   border-radius: 1px;
-  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
+  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.14);
   background: #fefefe;
 }
 
@@ -5181,7 +5184,7 @@
   height: 100%;
   width: 100%;
   opacity: 1;
-  background: rgba(0, 0, 0, 0.24);
+  background: rgba(0, 0, 0, 0.2);
   -webkit-transition: opacity 0.5s;
   -moz-transition: opacity 0.5s;
   -o-transition: opacity 0.5s;
@@ -5237,25 +5240,23 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  padding-bottom: 4px;
+  padding-bottom: 5px;
   margin-bottom: -2px;
   font-size: 16px;
 }
 .card-info .description {
-  position: relative;
   overflow: hidden;
 }
 .card-info .description .text {
   color: #464646;
   font: 13px/15px Roboto Condensed;
   overflow: hidden;
-  padding-right: 70px;
-  height: 30px;
+  width:100%;
 }
 .card-info .description .util {
   position: absolute;
-  right: 0px;
-  bottom: -3px;
+  right: 5px;
+  bottom: 70px; /*-2px;*/
   opacity: 0;
   -webkit-transition: opacity 0.5s;
   -moz-transition: opacity 0.5s;
@@ -5269,6 +5270,56 @@
 .card-info.empty-desc .description {
   display: none;
 }
+/* Truncate card summaries at bounding box and
+ * and apply ellipsis at lower right */
+.ellipsis {
+  overflow: hidden;
+  float:right;
+  line-height: 15px;
+  width:100%;
+}
+.resource-card-6x6 .card-info .description .teddddddxt {
+ float:left;
+  position:relative;
+  margin-left:0;
+}
+.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;
+  -webkit-box-sizing: content-box;
+  -moz-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: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white);
+  background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 65%, white);
+  background: -ms-linear-gradient(to right, 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;
+}
 
 /* Flow Layout */
 .resource-flow-layout {
@@ -5295,9 +5346,11 @@
 .resource-card:hover .card-bg:after {
   opacity: 0;
 }
+/* disabled to make way for fade/ellipsis truncation,
+   and the plusone moves up. 
 .resource-card:hover .card-info .description .text {
   padding-right: 70px;
-}
+} */
 .resource-card:hover .card-info .description .util {
   opacity: 1;
 }
@@ -5339,6 +5392,10 @@
 .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 {
@@ -6235,7 +6292,13 @@
 .resource-card-3x3 > .card-info .description .util, .resource-card-6x3 > .card-info .description .util, .resource-card-9x3 > .card-info .description .util, .resource-card-12x3 > .card-info .description .util, .resource-card-15x3 > .card-info .description .util, .resource-card-18x3 > .card-info .description .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;
+}
+.resource-card-18x12 > .card-info .description .util {
+  bottom:2px;
+}
 /* Overrides for col-16 6x6 cards linking to local content on landing pages.
    Suppresses "section" and puts the title above a hairline rule. */
 .landing .card-info .section, .resource-flow-layout.col-16.landing .resource-card-9x6 .card-info .section {
@@ -6249,17 +6312,16 @@
   border-bottom: 1px solid #959595;
   padding-bottom: 0px;
 }
-
 .landing .card-info .description {
   font-size: 13px;
   line-height: 15px;
 }
-
 .landing .card-info .description .text {
 height:30px;
-width:auto;
 }
-
+.landing .resource-card-6x6 > .card-info .description .util, .landing .resource-card-9x6 > .card-info .description .util {
+  bottom:2px;
+}
 /*
   Generate a resource stack layout for a 3 column widget spanning 16 grid cols
 */
diff --git a/tools/droiddoc/templates-sdk-dyn/assets/js/docs.js b/tools/droiddoc/templates-sdk-dyn/assets/js/docs.js
index 00a1b2b..9ce7c4b 100644
--- a/tools/droiddoc/templates-sdk-dyn/assets/js/docs.js
+++ b/tools/droiddoc/templates-sdk-dyn/assets/js/docs.js
@@ -216,7 +216,10 @@
     } else if (secondFrag == "googleplay") {
       $("#nav-x li.googleplay a").addClass("selected");
     }
-  }
+  } else if ($("body").hasClass("about")) {
+    $("#sticky-header").addClass("about");
+  } 
+
   // set global variable so we can highlight the sidenav a bit later (such as for google reference)
   // and highlight the sidenav
   mPagePath = pagePath;
@@ -3339,15 +3342,20 @@
       initResourceWidget(this);
     });
 
-    // Might remove this, but adds ellipsis to card descriptions rather
-    // than just cutting them off, not sure if it performs well
-    $('.card-info .text').ellipsis();
+    /* Pass the line height to ellipsisfade() to adjust the height of the
+    text container to show the max number of lines possible, without
+    showing lines that are cut off. This works with the css ellipsis
+    classes to fade last text line and apply an ellipsis char. */
+
+    //card text currently uses 15px line height. 
+    var lineHeight = 15;
+    $('.card-info .text').ellipsisfade(lineHeight);
   });
 
   /*
     Three types of resource layouts:
     Flow - Uses a fixed row-height flow using float left style.
-    Carousel - Single card slideshow all same dimension absoute.
+    Carousel - Single card slideshow all same dimension absolute.
     Stack - Uses fixed columns and flexible element height.
   */
   function initResourceWidget(widget) {
@@ -3391,6 +3399,7 @@
   /* Initializes a Resource Carousel Widget */
   function drawResourcesCarouselWidget($widget, opts, resources) {
     $widget.empty();
+    var plusone = true; //always show plusone on carousel
 
     $widget.addClass('resource-card slideshow-container')
       .append($('<a>').addClass('slideshow-prev').text('Prev'))
@@ -3406,7 +3415,7 @@
       var urlPrefix = resources[i].url.indexOf("//") > -1 ? "" : toRoot;
       var $card = $('<a>')
         .attr('href', urlPrefix + resources[i].url)
-        .decorateResourceCard(resources[i]);
+        .decorateResourceCard(resources[i],plusone);
 
       $('<li>').css(css)
           .append($card)
@@ -3428,7 +3437,7 @@
   function drawResourcesStackWidget($widget, opts, resources, sections) {
     // Don't empty widget, grab all items inside since they will be the first
     // items stacked, followed by the resource query
-
+    var plusone = true; //by default show plusone on section cards
     var cards = $widget.find('.resource-card').detach().toArray();
     var numStacks = opts.numStacks || 1;
     var $stacks = [];
@@ -3452,14 +3461,14 @@
           $('<a>')
             .addClass('resource-card section-card')
             .attr('href', urlPrefix + sections[i].resource.url)
-            .decorateResourceCard(sections[i].resource)[0]
+            .decorateResourceCard(sections[i].resource,plusone)[0]
         );
 
       } else {
         cards.push(
           $('<div>')
             .addClass('resource-card section-card-menu')
-            .decorateResourceSection(sections[i])[0]
+            .decorateResourceSection(sections[i],plusone)[0]
         );
       }
     }
@@ -3472,7 +3481,7 @@
       var $card = $('<a>')
           .addClass('resource-card related-card')
           .attr('href', urlPrefix + resources[i].url)
-          .decorateResourceCard(resources[i]);
+          .decorateResourceCard(resources[i],plusone);
 
       cards.push($card[0]);
     }
@@ -3501,10 +3510,17 @@
     $widget.empty();
     var cardSizes = opts.cardSizes || ['6x6'];
     var i = 0, j = 0;
+    var plusone = true; // by default show plusone on resource cards
 
     while (i < resources.length) {
       var cardSize = cardSizes[j++ % cardSizes.length];
       cardSize = cardSize.replace(/^\s+|\s+$/,'');
+      console.log("cardsize is " + cardSize);
+      // Some card sizes do not get a plusone button, such as where space is constrained
+      // or for cards commonly embedded in docs (to improve overall page speed).
+      plusone = !((cardSize == "6x2") || (cardSize == "6x3") ||
+                  (cardSize == "9x2") || (cardSize == "9x3") ||
+                  (cardSize == "12x2") || (cardSize == "12x3"));
 
       // A stack has a third dimension which is the number of stacked items
       var isStack = cardSize.match(/(\d+)x(\d+)x(\d+)/);
@@ -3537,7 +3553,7 @@
           stackCount = 0;
         }
 
-        $card.decorateResourceCard(resource)
+        $card.decorateResourceCard(resource,plusone)
           .appendTo($stackDiv || $widget);
 
       } while (++i < resources.length && stackCount > 0);
@@ -3726,7 +3742,7 @@
 
 (function($) {
   /* Simple jquery function to create dom for a standard resource card */
-  $.fn.decorateResourceCard = function(resource) {
+  $.fn.decorateResourceCard = function(resource,plusone) {
     var section = resource.group || resource.type;
     var imgUrl;
     if (resource.image) {
@@ -3734,29 +3750,38 @@
       var urlPrefix = resource.image.indexOf("//") > -1 ? "" : toRoot;
       imgUrl = urlPrefix + resource.image;
     }
-
+    //add linkout logic here. check url or type, assign a class, map to css :after
     $('<div>')
         .addClass('card-bg')
         .css('background-image', 'url(' + (imgUrl || toRoot + 'assets/images/resource-card-default-android.jpg') + ')')
       .appendTo(this);
-
-    $('<div>').addClass('card-info' + (!resource.summary ? ' empty-desc' : ''))
+    if (!plusone) {
+      $('<div>').addClass('card-info' + (!resource.summary ? ' empty-desc' : ''))
         .append($('<div>').addClass('section').text(section))
         .append($('<div>').addClass('title').html(resource.title))
-        .append($('<div>').addClass('description')
-          .append($('<div>').addClass('text').html(resource.summary))
+        .append($('<div>').addClass('description ellipsis')
+            .append($('<div>').addClass('text').html(resource.summary))
+          .append($('<div>').addClass('util')))
+          .appendTo(this);
+    } else {
+      $('<div>').addClass('card-info' + (!resource.summary ? ' empty-desc' : ''))
+        .append($('<div>').addClass('section').text(section))
+        .append($('<div>').addClass('title').html(resource.title))
+        .append($('<div>').addClass('description ellipsis')
+            .append($('<div>').addClass('text').html(resource.summary))
           .append($('<div>').addClass('util')
             .append($('<div>').addClass('g-plusone')
               .attr('data-size', 'small')
               .attr('data-align', 'right')
               .attr('data-href', resource.url))))
-      .appendTo(this);
+            .appendTo(this);
+    }
 
     return this;
   };
 
   /* Simple jquery function to create dom for a resource section card (menu) */
-  $.fn.decorateResourceSection = function(section) {
+  $.fn.decorateResourceSection = function(section,plusone) {
     var resource = section.resource;
     //keep url clean for matching and offline mode handling
     var urlPrefix = resource.image.indexOf("//") > -1 ? "" : toRoot;
@@ -3795,17 +3820,27 @@
       for (var i = 0; i < max; ++i) {
 
         var subResource = section.sections[i];
-        $('<li>')
-          .append($('<a>').attr('href', subResource.url)
-            .append($('<div>').addClass('title').html(subResource.title))
-            .append($('<div>').addClass('description')
-              .append($('<div>').addClass('text').html(subResource.summary))
-              .append($('<div>').addClass('util')
-                .append($('<div>').addClass('g-plusone')
-                  .attr('data-size', 'small')
-                  .attr('data-align', 'right')
-                  .attr('data-href', resource.url)))))
-        .appendTo($ul);
+        if (!plusone) {
+          $('<li>')
+            .append($('<a>').attr('href', subResource.url)
+              .append($('<div>').addClass('title').html(subResource.title))
+              .append($('<div>').addClass('description ellipsis')
+                .append($('<div>').addClass('text').html(subResource.summary))
+                .append($('<div>').addClass('util'))))
+          .appendTo($ul);
+        } else {
+          $('<li>')
+            .append($('<a>').attr('href', subResource.url)
+              .append($('<div>').addClass('title').html(subResource.title))
+              .append($('<div>').addClass('description ellipsis')
+                .append($('<div>').addClass('text').html(subResource.summary))
+                .append($('<div>').addClass('util')
+                  .append($('<div>').addClass('g-plusone')
+                    .attr('data-size', 'small')
+                    .attr('data-align', 'right')
+                    .attr('data-href', resource.url)))))
+          .appendTo($ul);
+        }
       }
 
       // Add a more row
@@ -3824,97 +3859,22 @@
     return this;
   };
 })(jQuery);
-
-
+/* Calculate the vertical area remaining */
 (function($) {
-    $.fn.ellipsis = function(options) {
-
-        // default option
-        var defaults = {
-            'row' : 1, // show rows
-            'onlyFullWords': true, // set to true to avoid cutting the text in the middle of a word
-            'char' : '\u2026', // ellipsis
-            'callback': function() {},
-            'position': 'tail' // middle, tail
-        };
-
-        options = $.extend(defaults, options);
-
+    $.fn.ellipsisfade= function(lineHeight) {
         this.each(function() {
             // get element text
             var $this = $(this);
+            var remainingHeight = $this.parent().parent().height();
+            $this.parent().siblings().each(function ()
+            {
+              var h = $(this).height();
+              remainingHeight = remainingHeight - h;
+            });
 
-            var targetHeight = $this.height();
-            $this.css({'height': 'auto'});
-            var text = $this.text();
-            var origText = text;
-            var origLength = origText.length;
-            var origHeight = $this.height();
-
-            if (origHeight <= targetHeight) {
-                $this.text(text);
-                options.callback.call(this);
-                return;
-            }
-
-            var start = 1, length = 0;
-            var end = text.length;
-
-            if(options.position === 'tail') {
-                while (start < end) { // Binary search for max length
-                    length = Math.ceil((start + end) / 2);
-
-                    $this.text(text.slice(0, length) + options['char']);
-
-                    if ($this.height() <= targetHeight) {
-                        start = length;
-                    } else {
-                        end = length - 1;
-                    }
-                }
-
-                text = text.slice(0, start);
-
-                if (options.onlyFullWords) {
-                    // remove fragment of the last word together with possible soft-hyphen chars
-                    text = text.replace(/[\u00AD\w\uac00-\ud7af]+$/, '');
-                }
-                text += options['char'];
-
-            }else if(options.position === 'middle') {
-
-                var sliceLength = 0;
-                while (start < end) { // Binary search for max length
-                    length = Math.ceil((start + end) / 2);
-                    sliceLength = Math.max(origLength - length, 0);
-
-                    $this.text(
-                        origText.slice(0, Math.floor((origLength - sliceLength) / 2)) +
-                               options['char'] +
-                               origText.slice(Math.floor((origLength + sliceLength) / 2), origLength)
-                    );
-
-                    if ($this.height() <= targetHeight) {
-                        start = length;
-                    } else {
-                        end = length - 1;
-                    }
-                }
-
-                sliceLength = Math.max(origLength - start, 0);
-                var head = origText.slice(0, Math.floor((origLength - sliceLength) / 2));
-                var tail = origText.slice(Math.floor((origLength + sliceLength) / 2), origLength);
-
-                if (options.onlyFullWords) {
-                    // remove fragment of the last or first word together with possible soft-hyphen characters
-                    head = head.replace(/[\u00AD\w\uac00-\ud7af]+$/, '');
-                }
-
-                text = head + options['char'] + tail;
-            }
-
-            $this.text(text);
-            options.callback.call(this);
+            adjustedRemainingHeight = ((remainingHeight)/lineHeight>>0)*lineHeight
+            $this.parent().css({'height': adjustedRemainingHeight});
+            $this.css({'height': "auto"});
         });
 
         return this;
diff --git a/tools/droiddoc/templates-sdk-dyn/components/masthead.cs b/tools/droiddoc/templates-sdk-dyn/components/masthead.cs
index b587661..85c3d57 100644
--- a/tools/droiddoc/templates-sdk-dyn/components/masthead.cs
+++ b/tools/droiddoc/templates-sdk-dyn/components/masthead.cs
@@ -204,6 +204,7 @@
               <li><a href="<?cs var:toroot ?>distribute/users/index.html">Get Users</a></li>
               <li><a href="<?cs var:toroot ?>distribute/engage/index.html">Engage &amp; Retain</a></li>
               <li><a href="<?cs var:toroot ?>distribute/monetize/index.html">Monetize</a></li>
+              <li><a href="<?cs var:toroot ?>distribute/tools/index.html">Tools &amp; Reference</a></li>
               <li><a href="<?cs var:toroot ?>distribute/stories/index.html">Developer Stories</a></li>
             </ul>
           </li>
diff --git a/tools/droiddoc/templates-sdk-dyn/docpage.cs b/tools/droiddoc/templates-sdk-dyn/docpage.cs
index fc65b7e..745b19e 100644
--- a/tools/droiddoc/templates-sdk-dyn/docpage.cs
+++ b/tools/droiddoc/templates-sdk-dyn/docpage.cs
@@ -28,7 +28,7 @@
 <div <?cs
   if:fullpage
     ?>class="fullpage"<?cs
-  elif:design||tools||about||sdk||googleplay||essentials||users||monetize||disttools && !nonavpage
+  elif:(design||tools||about||sdk||googleplay||essentials||users||monetize||disttools) && !nonavpage
     ?>class="col-13" id="doc-col"<?cs
   elif:!nonavpage
     ?>class="col-12" id="doc-col"<?cs /if ?> >
@@ -215,7 +215,7 @@
 
 
 <?cs include:"trailer.cs" ?>
-  <script src="http://androiddevdocs-exp.appspot.com/ytblogger_lists_unified.js" type="text/javascript"></script>
+  <script src="https://androiddevdocs-exp.appspot.com/ytblogger_lists_unified.js" type="text/javascript"></script>
   <script src="<?cs var:toroot ?>jd_lists_unified.js" type="text/javascript"></script>
   <script src="<?cs var:toroot ?>jd_extras.js" type="text/javascript"></script>
   <script src="<?cs var:toroot ?>jd_collections.js" type="text/javascript"></script>