diff --git a/core/misc/icons/0074bd/chevron-left.png b/core/misc/icons/0074bd/chevron-left.png
new file mode 100644
index 0000000..e42435d
--- /dev/null
+++ b/core/misc/icons/0074bd/chevron-left.png
@@ -0,0 +1,3 @@
+PNG
+
+   IHDR         a   EIDATxݓ	  ɑ28d |5p#鑔'A,ɂ,pnr/?zG    IENDB`
\ No newline at end of file
diff --git a/core/misc/icons/0074bd/chevron-left.svg b/core/misc/icons/0074bd/chevron-left.svg
new file mode 100644
index 0000000..122e1c0
--- /dev/null
+++ b/core/misc/icons/0074bd/chevron-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#0074bd" d="M7.951 7.645c-.193.196-.193.516 0 .71l3.258 3.29c.193.193.191.519-.002.709l-1.371 1.371c-.193.192-.512.191-.707 0l-5.335-5.371c-.194-.194-.194-.514 0-.708l5.335-5.369c.195-.195.514-.195.707-.001l1.371 1.371c.193.194.195.513.002.709l-3.258 3.289z"/></svg>
diff --git a/core/misc/icons/0074bd/chevron-right.png b/core/misc/icons/0074bd/chevron-right.png
new file mode 100644
index 0000000..e2ff9a9
--- /dev/null
+++ b/core/misc/icons/0074bd/chevron-right.png
@@ -0,0 +1,3 @@
+PNG
+
+   IHDR         a   FIDATxݓ	  C;#eqh~P<H#V>Ni1vtGB-#)@`;^zG    IENDB`
\ No newline at end of file
diff --git a/core/misc/icons/0074bd/chevron-right.svg b/core/misc/icons/0074bd/chevron-right.svg
new file mode 100644
index 0000000..b16a8ce
--- /dev/null
+++ b/core/misc/icons/0074bd/chevron-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#0074bd" d="M8.053 8.355c.193-.195.193-.517 0-.711l-3.26-3.289c-.193-.195-.192-.514.002-.709l1.371-1.371c.194-.194.512-.193.706.001l5.335 5.369c.195.195.195.515 0 .708l-5.335 5.37c-.194.192-.512.193-.706.002l-1.371-1.371c-.194-.195-.195-.514-.002-.709l3.26-3.29z"/></svg>
diff --git a/core/misc/jquery.collapse.js b/core/misc/jquery.collapse.js
new file mode 100644
index 0000000..5a21a66
--- /dev/null
+++ b/core/misc/jquery.collapse.js
@@ -0,0 +1,98 @@
+/**
+ * @file
+ */
+
+;( function( $, window, document, undefined ) {
+  'use strict';
+
+  var pluginName = 'collapse';
+  var defaults = {
+    target: false,
+    trigger: false,
+    initState: 'closed'
+  };
+
+  function Collapse( element, options ) {
+    this.options = $.extend( {}, defaults, options );
+    this.element = element;
+    this.$element = $(element);
+    this.$target = null;
+    this.$trigger = null;
+
+    this._defaults = defaults;
+    this._name = pluginName;
+
+    this.init();
+  }
+
+  Collapse.prototype.init = function() {
+    var self = this;
+    var opts = self.options;
+
+    if (opts.target) {
+      if ( opts.target.jquery ) {
+        this.$target = opts.target;
+      } else {
+        this.$target = this.$element.withinOrUnique(opts.target);
+      }
+    }
+
+    if (opts.trigger) {
+      if ( opts.trigger.jquery ) {
+        this.$trigger = opts.trigger;
+      } else {
+        this.$trigger = this.$element.withinOrUnique(opts.trigger);
+      }
+    } else {
+      this.$trigger = this.$element;
+    }
+
+    this.refresh();
+
+    if (this.options.initState !== 'closed') {
+      this.$target.addClass('is-open');
+    }
+
+    this.$trigger.on('click', function(event) {
+      self.toggle(event);
+    });
+
+    this.$element.on('transitionend webkitTransitionEnd', function() {
+      if ( self.$target.hasClass('is-closing') ) {
+        self.$target.removeClass('is-closing is-open');
+        self.$target[0].style.removeProperty('max-height');
+      }
+    });
+  };
+
+  Collapse.prototype.refresh = function() {
+    this.$target.data( 'intrinsicHeight', this.$target.intrinsic('height') + 'px' );
+  };
+
+  Collapse.prototype.toggle = function(event) {
+    event.preventDefault();
+
+    if ( this.$target.hasClass('is-open') ) {
+      if ( Modernizr.csstransitions ) {
+        this.$target.css('max-height', '0').addClass('is-closing');
+      }
+      else {
+        this.$target.removeClass('is-open');
+      }
+    } else {
+      if ( Modernizr.csstransitions ) {
+        this.$target.css( 'max-height', this.$target.data('intrinsicHeight') );
+      }
+      this.$target.addClass('is-open');
+    }
+  };
+
+  $.fn[pluginName] = function( options ) {
+    return this.each( function() {
+      if ( ! $.data(this, 'plugin_' + pluginName) ) {
+        $.data( this, 'plugin_' + pluginName, new Collapse(this, options) );
+      }
+    });
+  };
+
+})( jQuery, window, document );
diff --git a/core/misc/jquery.dom-utils.js b/core/misc/jquery.dom-utils.js
new file mode 100644
index 0000000..641006b
--- /dev/null
+++ b/core/misc/jquery.dom-utils.js
@@ -0,0 +1,59 @@
+/**
+ * @file
+ * Lowish-level DOM utilities for UI components
+ */
+;( function( $, w, undefined ) {
+  'use strict';
+
+  // Find a given selector only within the current scope, except ids, which
+  // are found anywhere.
+  $.fn.withinOrUnique = function(selector) {
+    if ( selector.charAt(0) === '#' ) {
+      return $(selector);
+    } else {
+      return this.find(selector);
+    }
+  };
+
+  $.extend({
+    kebabCase: function(string) {
+      return string.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+    },
+
+    safeTrim: function(object) {
+      if (typeof object === 'string') {
+        return $.trim(object);
+      }
+      return object;
+    }
+  });
+
+  // Parse options passed via data-attribute component initialization and
+  // turn them into an object.
+  $.fn.dataOptions = function(pluginName, namespace) {
+    var options = {};
+    var optPair;
+    var key;
+    var value;
+    var dataPrefix = 'data-' + ( typeof namespace === 'string' ? namespace + '-' : '' );
+    var optionsArray = ($(this).attr(dataPrefix + $.kebabCase(pluginName)) || ':').split(';');
+
+    // parse options
+    for (var i = optionsArray.length - 1; i >= 0; i--) {
+      optPair = optionsArray[i].split(':');
+      key = optPair[0];
+      value = optPair[1];
+
+      if (/true/i.test(value)) { value = true; }
+      if (/false/i.test(value)) { value = false; }
+      if ($.isNumeric(value)) { value = parseFloat(value); }
+
+      if (optPair.length === 2 && key.length > 0) {
+        options[$.safeTrim(key)] = $.safeTrim(value);
+      }
+    }
+
+    return options;
+  };
+
+})( jQuery, window );
diff --git a/core/misc/jquery.intrinsic.js b/core/misc/jquery.intrinsic.js
new file mode 100644
index 0000000..e05beaf
--- /dev/null
+++ b/core/misc/jquery.intrinsic.js
@@ -0,0 +1,51 @@
+/**
+ * @file
+ * Measure an element’s intrinsic width or height when neither constrained by
+ * a container nor forced full width as in 'display: block'.
+ */
+(function ($) {
+  'use strict';
+
+  // Style block applied momentarily in order to measure the element.
+  //
+  // 1. Shrink-wrap the element. Block display would give us the width of the
+  //    container, not the element’s intrinsic width.
+  // 2. Preventative measure. The styles should be reverted before the browser’s
+  //    UI thread updates.
+  //
+  // We avoid 'position: absolute' because this causes the element to wrap if
+  // it’s wider than the viewport, regardless of the width of <body> and <html>.
+  //
+  var tempElementCSS = {
+    display: 'table', /* 1 */
+    visibility: 'hidden', /* 2 */
+    width: 'auto',
+    height: 'auto',
+    maxWidth: 'none',
+    maxHeight: 'none'
+  };
+
+  // Style block applied momentarily to the body in order to ensure the
+  // element’s layout area isn’t constrained.
+  //
+  var tempBodyCSS = {
+    width: '999em',
+    height: '999em'
+  };
+
+  $.fn.intrinsic = function (dimension) {
+    // The measured element may be a plain object or jQuery.
+    var element = this instanceof jQuery ? this[0] : this;
+    var measurement;
+
+    // Use jQuery’s internal swap() method to temporarily apply the styles, then
+    // measure the element’s width() or height().
+    $.swap(document.body, tempBodyCSS, function () {
+      $.swap(element, tempElementCSS, function () {
+        measurement = $(element)[dimension]();
+      });
+    });
+
+    return measurement;
+  };
+})(jQuery);
diff --git a/core/misc/jquery.nav-tabs.js b/core/misc/jquery.nav-tabs.js
new file mode 100644
index 0000000..9d0f21d
--- /dev/null
+++ b/core/misc/jquery.nav-tabs.js
@@ -0,0 +1,70 @@
+/**
+ * @file
+ */
+
+;( function( $, window, document, undefined ) {
+  'use strict';
+
+  var pluginName = 'navTabs';
+  var defaults = {
+    target: '.js-nav-tabs__target',
+    trigger: '.js-nav-tabs__trigger',
+    collapsible: false
+  };
+
+  function NavTabs( element, dataOptions, options ) {
+    this.options = $.extend( {}, defaults, dataOptions, options );
+    this.element = element;
+    this.$element = $(element);
+
+    this._defaults = defaults;
+    this._name = pluginName;
+
+    this.init();
+  }
+
+  NavTabs.prototype.init = function() {
+
+    if (this.options.collapsible) {
+      this.$element.collapse({
+        target: this.options.target,
+        trigger: this.options.trigger
+      });
+      this.$element.addClass('is-collapse-enabled');
+    }
+
+    $(window).on('resize.navTabs', $.proxy(this, 'refresh'));
+
+    this.$element.addClass('position-container is-horizontal-enabled');
+    this.refreshAll();
+  };
+
+  NavTabs.prototype.refreshAll = function() {
+    this.intrinsicWidth = this.$element.addClass('is-horizontal').intrinsic('width');
+    this.$element.removeClass('is-horizontal');
+    this.refresh();
+  };
+
+  NavTabs.prototype.refresh = function() {
+    if ( this.$element.parent().width() > this.intrinsicWidth ) {
+      this.$element.addClass('is-horizontal');
+    } else {
+      this.$element.removeClass('is-horizontal');
+    }
+  };
+
+  NavTabs.prototype.destroy = function() {
+    window.off('resize.navTabs');
+    this.removeData('plugin_' + pluginName);
+  };
+
+  $.fn[pluginName] = function( options ) {
+    return this.each( function() {
+      if ( ! $.data(this, 'plugin_' + pluginName) ) {
+        var dataOptions = $(this).dataOptions(pluginName, 'drupal');
+        $.data( this, 'plugin_' + pluginName, new NavTabs(this, dataOptions, options) );
+      }
+    });
+  };
+
+})( jQuery, window, document );
diff --git a/core/modules/shortcut/css/shortcut.icons.css b/core/modules/shortcut/css/shortcut.icons.css
index d7f5970..a3d4ce2 100644
--- a/core/modules/shortcut/css/shortcut.icons.css
+++ b/core/modules/shortcut/css/shortcut.icons.css
@@ -25,44 +25,23 @@
  * Add/remove links.
  */
 .add-or-remove-shortcuts .icon {
-  background: transparent url("../images/shortcut-add.png") no-repeat;
-  height: 12px;
-  margin-left: 8px; /* LTR */
-  overflow: hidden;
-  text-indent: 12px;
-  width: 12px;
+  background: transparent url('../images/favstar.svg') no-repeat left top;
+  width: 20px;
+  height: 20px;
+  vertical-align: 3px;
+  text-indent: -999em;
 }
 .no-svg .add-or-remove-shortcuts .icon {
-  background: transparent url("../images/shortcut-add.png") no-repeat;
+  background-image: url('../images/favstar.png');
 }
-[dir="rtl"] .add-or-remove-shortcuts .icon {
-  margin-left: 0;
-  margin-right: 8px;
-}
-[dir="rtl"] .add-or-remove-shortcuts .text {
-  padding: 0 10px 0 6px;
-}
-[dir="rtl"] .add-or-remove-shortcuts a:focus .text,
-[dir="rtl"] .add-or-remove-shortcuts a:hover .text {
-  border-radius: 5px 0 0 5px;
-}
-.add-shortcut a:focus .icon,
-.add-shortcut a:hover .icon {
-  background-position: 0 -12px; /* LTR */
-}
-[dir="rtl"] .add-shortcut a:focus .icon,
-[dir="rtl"] .add-shortcut a:hover .icon {
-  background-position: 0 -24px;
+.add-shortcut a:hover .icon,
+.add-shortcut a:focus .icon {
+  background-position: -20px top;
 }
 .remove-shortcut .icon {
-  margin-top: 4px;
-  background-position: -12px 0;
+  background-position: -40px top;
 }
 .remove-shortcut a:focus .icon,
 .remove-shortcut a:hover .icon {
-  background-position: -12px -12px; /* LTR */
-}
-[dir="rtl"] .remove-shortcut a:focus .icon,
-[dir="rtl"] .remove-shortcut a:hover .icon {
-  background-position: -12px -24px;
+  background-position: -60px top; /* LTR */
 }
diff --git a/core/modules/shortcut/css/shortcut.module.css b/core/modules/shortcut/css/shortcut.module.css
index 05672e9..9ec5829 100644
--- a/core/modules/shortcut/css/shortcut.module.css
+++ b/core/modules/shortcut/css/shortcut.module.css
@@ -7,13 +7,11 @@
  * Add/remove links.
  */
 .add-or-remove-shortcuts .icon {
-  display: block;
-  float: left; /* LTR */
+  display: inline-block;
   margin-top: 5px;
 }
 .add-or-remove-shortcuts .text {
   display: none;
-  float: left; /* LTR */
   padding-top: 2px;
 }
 [dir="rtl"] .add-or-remove-shortcuts .icon,
diff --git a/core/modules/shortcut/css/shortcut.theme.css b/core/modules/shortcut/css/shortcut.theme.css
index 018f328..3d29110 100644
--- a/core/modules/shortcut/css/shortcut.theme.css
+++ b/core/modules/shortcut/css/shortcut.theme.css
@@ -19,3 +19,12 @@
 [dir="rtl"] .toolbar .toolbar-tray-horizontal .edit-shortcuts {
   float: right;
 }
+
+/**
+ * Add/remove links.
+ */
+.add-or-remove-shortcuts {
+  display: inline-block;
+  margin-left: 0.3em;
+}
+
diff --git a/core/modules/shortcut/images/favstar.png b/core/modules/shortcut/images/favstar.png
new file mode 100755
index 0000000..bd51fde
--- /dev/null
+++ b/core/modules/shortcut/images/favstar.png
@@ -0,0 +1,8 @@
+PNG
+
+   IHDR   P      غ  IDATXGXkPSG{@X"tF?RG೭'QecSZz[!Z:(@m%Gl"vFhA^{{21$&Ow&ݳߞ޴b 㚝(&ܩ<~N#`lZF6AuL$p,nGz88xDTiƆDn##m/   	7L\x*dqV@!@j694orM&O^6.ji#ҧ*dfZ[_JbP34O)y$6'ڲ#M9pOwGg,ndx0*ɍ#'P6{}2U'ӦpaZKlRد
+f5I1U5E6kmk3#Ï>G5?ԜМVPJ(  e18s,JDneU䕱m$S1qg8 /EfGG-6k{ Ww$xP<ZNָq	<_fy(PILU(W		el] EþO`)a#P-bos>{K(c߭ŨwZx96aS߭W'0^pgmkW%&5D T*jٵvլIST%!L8ٽ>E!
+3M͠D[ڳ浊$)# c:D @$<AIR'/sڏK=ǱT`f2.󫖬X"{plH\q}Ĺql46g&'@1&
+`xI3esTfOr zioﲈ.=w|_m"2?08_OOnX=}K#VϥHQ^vfOC
+klU+6dY׿w=r%(pbϿl#ީPmuB(aIq5qP	0غC s+;5Hv$rNU`႘zA1B"{O 	;医xS&l} rf>ؕ5͇ܟ6?|o!E2XdVdҚlv⡜5q՗AA~/ۺGu>I&՗!<7mfVE>scxХSdꃥΏLhƃwU"a^n4 J-y՚LSy@65L4tڒqh{:I@U?]1oW7TQ$vCkc@IM2gIk"mI_x89Ώzirne#Ҧ׮I&O)֖niyzJOK:3qAj6@)RJ]NQoT3aYX	ǂ^h⡄|RpnWo3y	3׸"`<Sg8Iu6Ũ{<
++Xt|\ʵ9*N;^z0GooF>^k_@ppiv;WÓ&5Lf[pyB?    IENDB`
\ No newline at end of file
diff --git a/core/modules/shortcut/images/favstar.svg b/core/modules/shortcut/images/favstar.svg
new file mode 100644
index 0000000..cb50c24
--- /dev/null
+++ b/core/modules/shortcut/images/favstar.svg
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="80px"
+	 height="20px" viewBox="0 0 80 20" enable-background="new 0 0 80 20" xml:space="preserve">
+<g id="checked:hover">
+	<path fill="#FEF6A8" d="M69.729,2.259c0.149-0.385,0.394-0.385,0.543,0l1.959,5.049c0.149,0.385,0.609,0.699,1.021,0.699
+		l1.75,0.169c0.412,0,0.493,0.219,0.18,0.487l-1.31,0.981c-0.313,0.268-0.497,0.816-0.407,1.22l1.472,6.562
+		c0.09,0.403-0.118,0.547-0.463,0.319l-3.848-2.539c-0.345-0.228-0.907-0.228-1.252,0l-3.848,2.539
+		c-0.345,0.228-0.553,0.084-0.463-0.319l1.047-4.707c0.09-0.403-0.094-0.952-0.407-1.22l-3.518-3.006
+		c-0.313-0.268-0.232-0.487,0.18-0.487h4.381c0.412,0,0.872-0.314,1.021-0.699L69.729,2.259z"/>
+	<path display="none" fill="#80722D" d="M75.027,13.229l-0.026-0.026l-0.821,0.821l0.757,3.402c0.061,0.273-0.015,0.428-0.178,0.428
+		c-0.077,0-0.174-0.035-0.285-0.108l-3.848-2.539c-0.173-0.114-0.399-0.171-0.626-0.171s-0.453,0.057-0.626,0.171l-3.848,2.539
+		c-0.111,0.073-0.208,0.108-0.285,0.108c-0.163,0-0.238-0.154-0.178-0.428l1.047-4.707c0.09-0.403-0.094-0.952-0.407-1.22
+		l-3.518-3.006c-0.313-0.268-0.232-0.487,0.18-0.487h4.381c0.412,0,0.872-0.314,1.021-0.699l1.961-5.049
+		C69.803,2.066,69.901,1.97,70,1.97s0.197,0.096,0.271,0.289l0.586,1.511l0.773-0.772l-0.427-1.101C70.87,1.037,70.198,0.97,70,0.97
+		s-0.87,0.067-1.204,0.927l-1.961,5.049c-0.01,0.011-0.075,0.055-0.109,0.062l-4.36-0.001c-0.934,0-1.231,0.61-1.3,0.797
+		c-0.069,0.187-0.239,0.844,0.471,1.451l3.518,3.005c0.039,0.043,0.086,0.186,0.079,0.25l-1.046,4.7
+		c-0.132,0.595,0.052,0.983,0.229,1.205c0.224,0.279,0.561,0.439,0.925,0.439c0.279,0,0.562-0.093,0.836-0.273l3.848-2.539
+		c-0.001,0-0.001,0.001,0.001,0.001c0.006,0,0.035-0.007,0.074-0.007c0.048,0,0.081,0.01,0.089,0.014l3.834,2.531
+		c0.274,0.181,0.556,0.273,0.836,0.273c0.364,0,0.701-0.16,0.925-0.439c0.178-0.222,0.361-0.61,0.229-1.206L75.027,13.229z"/>
+	<polygon fill="#807640" points="77.548,5 75.002,7.547 72.456,5 71.041,6.415 73.587,8.961 71.044,11.505 72.457,12.919
+		75.001,10.375 77.546,12.919 78.96,11.505 76.415,8.96 78.962,6.414 	"/>
+	<path fill="#80722D" d="M75.172,13.897c0,0-0.133-0.516-0.651-0.349c-0.516,0.166-0.302,0.674-0.302,0.674l0.719,3.204
+		c0.061,0.273-0.016,0.428-0.178,0.428c-0.078,0-0.174-0.035-0.285-0.107l-3.848-2.539c-0.174-0.115-0.4-0.172-0.627-0.172
+		s-0.453,0.057-0.625,0.172l-3.848,2.539c-0.111,0.072-0.209,0.107-0.285,0.107c-0.164,0-0.24-0.154-0.178-0.428l1.047-4.707
+		c0.09-0.402-0.094-0.951-0.408-1.219l-3.518-3.007c-0.314-0.269-0.232-0.487,0.18-0.487h4.383c0.412,0,0.871-0.314,1.021-0.699
+		l1.959-5.049C69.803,2.066,69.902,1.971,70,1.971s0.197,0.096,0.271,0.288l0.461,1.158c0,0,0.255,0.409,0.635,0.219
+		c0.44-0.221,0.227-0.66,0.227-0.66l-0.389-1.078C70.869,1.037,70.197,0.971,70,0.971s-0.869,0.066-1.203,0.926l-1.961,5.049
+		c-0.01,0.012-0.074,0.056-0.109,0.062l-4.361-0.001c-0.934,0-1.23,0.609-1.301,0.796c-0.068,0.187-0.238,0.844,0.471,1.451
+		l3.52,3.007c0.037,0.041,0.086,0.186,0.078,0.25l-1.045,4.699c-0.133,0.596,0.051,0.984,0.229,1.205
+		c0.225,0.279,0.561,0.439,0.926,0.439c0.279,0,0.561-0.092,0.836-0.273l3.848-2.539c-0.002,0-0.002,0.002,0,0.002
+		c0.006,0,0.035-0.008,0.074-0.008c0.049,0,0.08,0.01,0.088,0.014l3.836,2.531c0.273,0.182,0.557,0.273,0.836,0.273
+		c0.363,0,0.701-0.16,0.924-0.439c0.178-0.221,0.361-0.609,0.23-1.205L75.172,13.897z"/>
+</g>
+<g id="checked">
+	<path fill="#FEF6A8" d="M54.759,18.355c-0.18,0-0.369-0.064-0.561-0.191l-3.848-2.539c-0.083-0.055-0.215-0.088-0.351-0.088
+		s-0.268,0.033-0.351,0.088l-3.848,2.539c-0.191,0.127-0.381,0.191-0.561,0.191c-0.212,0-0.407-0.092-0.535-0.252
+		c-0.109-0.136-0.22-0.383-0.131-0.784l1.047-4.708c0.05-0.222-0.071-0.584-0.243-0.731L41.86,8.874
+		c-0.451-0.386-0.378-0.756-0.326-0.897c0.053-0.141,0.237-0.47,0.831-0.47h4.381c0.206,0,0.48-0.188,0.556-0.38l1.961-5.049
+		C49.476,1.529,49.85,1.47,50,1.47s0.524,0.059,0.737,0.607l1.959,5.049c0.075,0.191,0.35,0.38,0.556,0.38h4.383
+		c0.594,0,0.778,0.329,0.831,0.47c0.052,0.142,0.125,0.512-0.326,0.897l-3.518,3.006c-0.173,0.147-0.294,0.51-0.244,0.731
+		l1.047,4.708c0.089,0.401-0.021,0.647-0.131,0.784C55.166,18.264,54.971,18.355,54.759,18.355z"/>
+	<path fill="#80722D" d="M50,1.97c0.099,0,0.196,0.096,0.271,0.289l1.959,5.049c0.149,0.385,0.609,0.699,1.021,0.699h4.383
+		c0.412,0,0.493,0.219,0.18,0.487L54.297,11.5c-0.313,0.268-0.497,0.816-0.407,1.22l1.047,4.708
+		c0.061,0.273-0.015,0.428-0.178,0.428c-0.077,0-0.174-0.035-0.285-0.108l-3.848-2.539c-0.173-0.113-0.399-0.171-0.626-0.171
+		s-0.453,0.058-0.626,0.171l-3.848,2.539c-0.111,0.073-0.208,0.108-0.285,0.108c-0.163,0-0.238-0.154-0.178-0.428l1.047-4.708
+		c0.09-0.403-0.094-0.952-0.407-1.22l-3.518-3.006c-0.313-0.268-0.232-0.487,0.18-0.487h4.381c0.412,0,0.872-0.314,1.021-0.699
+		l1.961-5.049C49.804,2.066,49.901,1.97,50,1.97 M50,0.97c-0.198,0-0.87,0.067-1.204,0.927l-1.961,5.049
+		c-0.01,0.011-0.075,0.055-0.109,0.062l-4.36-0.001c-0.934,0-1.231,0.61-1.3,0.797c-0.069,0.187-0.239,0.844,0.471,1.451
+		l3.518,3.005c0.039,0.043,0.086,0.186,0.079,0.25l-1.046,4.701c-0.132,0.595,0.052,0.983,0.229,1.205
+		c0.224,0.279,0.561,0.439,0.925,0.439c0.28,0,0.562-0.093,0.836-0.273l3.848-2.539c-0.001,0-0.001,0.001,0.001,0.001
+		c0.006,0,0.035-0.007,0.074-0.007c0.048,0,0.081,0.01,0.089,0.014l3.834,2.531c0.274,0.181,0.557,0.273,0.836,0.273
+		c0.364,0,0.701-0.16,0.925-0.439c0.178-0.222,0.361-0.61,0.229-1.206l-1.046-4.707c-0.006-0.058,0.041-0.2,0.086-0.248l3.512-3
+		c0.71-0.607,0.54-1.264,0.471-1.451c-0.068-0.187-0.366-0.797-1.3-0.797h-4.383c-0.014-0.006-0.079-0.05-0.098-0.08l-1.95-5.03
+		C50.87,1.037,50.198,0.97,50,0.97L50,0.97z"/>
+</g>
+<g id="unchecked:hover">
+	<path opacity="0.7" fill="#5A563B" d="M35.414,14.96c0,0-0.133-0.516-0.651-0.349c-0.516,0.166-0.302,0.674-0.302,0.674
+		l0.477,2.142c0.061,0.273-0.016,0.428-0.178,0.428c-0.078,0-0.174-0.035-0.285-0.107l-3.848-2.539
+		c-0.174-0.115-0.4-0.172-0.627-0.172s-0.453,0.057-0.625,0.172l-3.848,2.539c-0.111,0.072-0.209,0.107-0.285,0.107
+		c-0.164,0-0.24-0.154-0.178-0.428l1.047-4.707c0.09-0.402-0.094-0.951-0.408-1.219l-3.518-3.007
+		c-0.314-0.269-0.232-0.487,0.18-0.487h4.383c0.412,0,0.871-0.314,1.021-0.699l1.959-5.049C29.803,2.066,29.902,1.971,30,1.971
+		s0.197,0.096,0.271,0.288l1.377,3.538c0,0,0.255,0.409,0.635,0.219c0.44-0.221,0.227-0.66,0.227-0.66l-0.607-1.658l-0.697-1.801
+		C30.869,1.037,30.197,0.971,30,0.971s-0.869,0.066-1.203,0.926l-1.961,5.049c-0.01,0.012-0.074,0.056-0.109,0.062l-4.361-0.001
+		c-0.934,0-1.23,0.609-1.301,0.796c-0.068,0.187-0.238,0.844,0.471,1.451l3.52,3.007c0.037,0.041,0.086,0.186,0.078,0.25
+		l-1.045,4.699c-0.133,0.596,0.051,0.984,0.229,1.205c0.225,0.279,0.561,0.439,0.926,0.439c0.279,0,0.561-0.092,0.836-0.273
+		l3.848-2.539c-0.002,0-0.002,0.002,0,0.002c0.006,0,0.035-0.008,0.074-0.008c0.049,0,0.08,0.01,0.088,0.014l3.836,2.531
+		c0.273,0.182,0.557,0.273,0.836,0.273c0.363,0,0.701-0.16,0.924-0.439c0.178-0.221,0.361-0.609,0.23-1.205L35.414,14.96z"/>
+	<polygon fill="#807640" points="39,7.96 36,7.96 36,4.96 34,4.96 34,7.96 31,7.96 31,9.959 34,9.959 34,12.96 36,12.96 36,9.959
+		39,9.959 	"/>
+</g>
+<g id="unchecked">
+	<path opacity="0.7" fill="#5A563B" d="M10,1.97c0.098,0,0.197,0.096,0.271,0.289l1.959,5.049c0.149,0.385,0.609,0.699,1.021,0.699
+		h4.383c0.412,0,0.493,0.219,0.18,0.487L14.297,11.5c-0.313,0.268-0.497,0.816-0.407,1.22l1.047,4.707
+		c0.061,0.273-0.015,0.428-0.178,0.428c-0.077,0-0.174-0.035-0.285-0.108l-3.848-2.539c-0.172-0.114-0.399-0.171-0.626-0.171
+		s-0.454,0.057-0.626,0.171l-3.848,2.539c-0.111,0.073-0.208,0.108-0.285,0.108c-0.163,0-0.239-0.154-0.178-0.428L6.11,12.72
+		c0.09-0.403-0.094-0.951-0.407-1.22L2.185,8.494c-0.313-0.268-0.233-0.487,0.18-0.487h4.382c0.413,0,0.872-0.314,1.021-0.699
+		l1.96-5.049C9.803,2.066,9.901,1.97,10,1.97 M10,0.97c-0.198,0-0.87,0.067-1.204,0.927l-1.96,5.049
+		c-0.01,0.011-0.075,0.055-0.109,0.062L2.365,7.007c-0.934,0-1.231,0.61-1.3,0.796C0.996,7.99,0.826,8.647,1.535,9.254l3.519,3.007
+		c0.038,0.041,0.086,0.185,0.079,0.249l-1.046,4.7c-0.133,0.595,0.051,0.983,0.229,1.205c0.224,0.279,0.561,0.439,0.925,0.439
+		c0.28,0,0.562-0.093,0.836-0.274l3.848-2.538c-0.001,0-0.001,0.001,0,0.001c0.006,0,0.036-0.007,0.075-0.007
+		c0.048,0,0.081,0.01,0.088,0.014l3.834,2.531c0.274,0.181,0.557,0.273,0.836,0.273c0.364,0,0.701-0.16,0.925-0.439
+		c0.178-0.222,0.361-0.61,0.229-1.206l-1.047-4.706c-0.006-0.058,0.041-0.2,0.086-0.248l3.512-3c0.71-0.607,0.54-1.264,0.471-1.451
+		c-0.068-0.187-0.366-0.797-1.3-0.797h-4.383c-0.014-0.006-0.079-0.05-0.098-0.08l-1.95-5.03C10.87,1.037,10.198,0.97,10,0.97
+		L10,0.97z"/>
+</g>
+</svg>
diff --git a/core/modules/shortcut/images/shortcut-add.png b/core/modules/shortcut/images/shortcut-add.png
deleted file mode 100644
index 2924557..0000000
--- a/core/modules/shortcut/images/shortcut-add.png
+++ /dev/null
@@ -1,5 +0,0 @@
-PNG
-
-   IHDR      $   
-   gAMA  |Q   PLTE   إ~~~NNNlllHHHEEExxxɥpql---cd_KKK_`[   |   tRNS lo6e  -IDAT(]Y0DB&vO7vg,>ЃZOdIAs8~/ͱ>`lL0KfN.)~A3sژFli&8AĭJ*!ub朔{e춦c}T>U4)EV{T52UfjJJd,U
-RtWkpe:v~*s q٢,_B5/2[ddr[̜BҬwyT6VC7B% SV%[d7̹)]w1_M];<<=6a8mڴ[    IENDB`
\ No newline at end of file
diff --git a/core/modules/shortcut/shortcut.module b/core/modules/shortcut/shortcut.module
index d0594b0..c0142e5 100644
--- a/core/modules/shortcut/shortcut.module
+++ b/core/modules/shortcut/shortcut.module
@@ -461,11 +461,14 @@ function shortcut_preprocess_page(&$variables) {
         ),
         '#prefix' => '<div class="add-or-remove-shortcuts ' . $link_mode . '-shortcut">',
         '#type' => 'link',
-        '#title' => '<span class="icon">'. t('Add or remove shortcut') .'</span><span class="text">' . $link_text . '</span>',
+        '#title' => '<span class="icon">'. $link_text .'</span>',
         '#route_name' => $route_name,
         '#route_parameters' => $route_parameters,
         '#options' => array('query' => $query, 'html' => TRUE),
         '#suffix' => '</div>',
+        '#attributes' => array(
+          'title' => $link_text,
+        ),
       );
     }
   }
diff --git a/core/modules/system/css/system.module.css b/core/modules/system/css/system.module.css
index ef4cfae..f951dc1 100644
--- a/core/modules/system/css/system.module.css
+++ b/core/modules/system/css/system.module.css
@@ -349,3 +349,24 @@ tr .ajax-progress-throbber .throbber {
 .align-justify {
   text-align: justify;
 }
+
+/*
+ * Remove browser styles, especially for <buttons> and so on.
+ */
+.reset-appearance {
+  -webkit-appearance: none;
+  -moz-appearance:    none;
+  appearance:         none;
+  border: 0 none;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  line-height: inherit;
+}
+
+/*
+ * Contain positioned elements.
+ */
+.position-container {
+  position: relative;
+}
diff --git a/core/modules/system/css/system.theme.css b/core/modules/system/css/system.theme.css
index 6b34538..0f2b297 100644
--- a/core/modules/system/css/system.theme.css
+++ b/core/modules/system/css/system.theme.css
@@ -438,15 +438,12 @@ ul.inline li {
 /**
  * Markup generated by theme_menu_local_tasks().
  */
-div.tabs {
-  margin: 1em 0;
-}
-ul.tabs {
+.tabs {
   list-style: none;
   margin: 0 0 0.5em;
   padding: 0;
 }
-.tabs > li {
+.tabs__tab {
   display: inline-block;
   margin-right: 0.3em; /* LTR */
 }
diff --git a/core/modules/system/system.module b/core/modules/system/system.module
index ee3466d..715a61f 100644
--- a/core/modules/system/system.module
+++ b/core/modules/system/system.module
@@ -1179,6 +1179,18 @@ function system_library_info() {
     ),
   );
 
+  // jQuery Intrinsic Measurements.
+  $libraries['jquery.intrinsic'] = array(
+    'title' => 'Instric Measurements',
+    'version' => '1.0',
+    'js' => array(
+      'core/misc/jquery.intrinsic.js' => array(),
+    ),
+    'dependencies' => array(
+      array('system', 'jquery'),
+    ),
+  );
+
   // jQuery Form Plugin.
   $libraries['jquery.form'] = array(
     'title' => 'jQuery Form Plugin',
diff --git a/core/modules/views_ui/css/views_ui.admin.theme.css b/core/modules/views_ui/css/views_ui.admin.theme.css
index 9a71196..6968515 100644
--- a/core/modules/views_ui/css/views_ui.admin.theme.css
+++ b/core/modules/views_ui/css/views_ui.admin.theme.css
@@ -448,20 +448,30 @@ td.group-title {
  * The tabs that switch between sections
  */
 
-ul#views-display-menu-tabs {
+.views-displays .tabs.secondary {
   margin-right: 200px;
+  border: 0;
 }
 
-ul#views-display-menu-tabs li {
+.views-displays .tabs.secondary li {
+  background: transparent;
   margin-bottom: 5px;
+  border: 0;
+  padding: 0;
+  width: auto;
 }
 
-ul#views-display-menu-tabs li.add ul.action-list li{
+.views-displays .tabs.secondary li.add ul.action-list li{
   margin: 0;
 }
 
-.views-displays .secondary a {
+.views-displays .tabs.secondary li {
+  margin: 0 5px 0 6px;
+}
+
+.views-displays .tabs.secondary a {
   border: 1px solid #cbcbcb;
+  border-radius: 7px;
   display: inline-block;
   font-size: small;
   line-height: 1.3333;
@@ -471,65 +481,66 @@ ul#views-display-menu-tabs li.add ul.action-list li{
 /**
  * Display a red border if the display doesn't validate.
  */
-.views-displays ul.secondary li.active a.active.error,
-.views-displays .secondary a.error {
+.views-displays .tabs.secondary li.active a.active.error,
+.views-displays .tabs.secondary a.error {
   border: 2px solid #ed541d;
   padding: 1px 6px;
 }
 
-.views-displays .secondary a:focus {
+.views-displays .tabs.secondary a:focus {
   outline: none;
 }
 
-.views-displays ul.secondary li a {
+.views-displays .tabs.secondary li a {
   background-color: #fff;
 }
 
-.views-displays ul.secondary li a:hover,
-.views-displays ul.secondary li.active a,
-.views-displays ul.secondary li.active a.active {
+.views-displays .tabs.secondary li a:hover,
+.views-displays .tabs.secondary li.active a,
+.views-displays .tabs.secondary li.active a.active {
   background-color: #555;
   color: #fff;
 }
 
-.views-displays .secondary .open > a {
+.views-displays .tabs.secondary .open > a {
   background-color: #f1f1f1;
   border-bottom: 1px solid transparent;
   position: relative;
 }
 
-.views-displays .secondary .open > a:hover {
+.views-displays .tabs.secondary .open > a:hover {
   background-color: #f1f1f1;
 }
 
-.views-displays .secondary .action-list  li {
+.views-displays .tabs.secondary .action-list  li {
   background-color: #f1f1f1;
   border-color: #cbcbcb;
   border-style: solid;
   border-width: 0 1px;
   padding: 2px 9px;
+
 }
 
-.views-displays .secondary .action-list  li:first-child {
+.views-displays .tabs.secondary .action-list  li:first-child {
   border-width: 1px 1px 0;
 }
 
-.views-displays .secondary .action-list  li.last {
+.views-displays .tabs.secondary .action-list  li.last {
   border-width: 0 1px 1px;
 }
 
-.views-displays .secondary .action-list  li:last-child {
+.views-displays .tabs.secondary .action-list  li:last-child {
   border-width: 0 1px 1px;
 }
 
-.views-displays .secondary .action-list input.form-submit {
+.views-displays .tabs.secondary .action-list input.form-submit {
   background: none repeat scroll 0 0 transparent;
   border: medium none;
   margin: 0;
   padding: 0;
 }
 
-.views-displays .secondary .action-list li:hover {
+.views-displays .tabs.secondary .action-list li:hover {
   background-color: #ddd;
 }
 
diff --git a/core/themes/seven/install-page.css b/core/themes/seven/install-page.css
index 7533636..b79ebbc 100644
--- a/core/themes/seven/install-page.css
+++ b/core/themes/seven/install-page.css
@@ -46,6 +46,7 @@ body.install-page {
     width: 75%;
     border-radius: 5px;
     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+    padding: 20px 0 40px 0;
   }
   body.install-page #content {
     -webkit-box-sizing: border-box;
diff --git a/core/themes/seven/js/nav-tabs.js b/core/themes/seven/js/nav-tabs.js
new file mode 100644
index 0000000..9d73b37
--- /dev/null
+++ b/core/themes/seven/js/nav-tabs.js
@@ -0,0 +1,50 @@
+/**
+ * @file
+ */
+(function ($, Drupal) {
+
+  "use strict";
+
+  function init (i, tab) {
+    var $tab = $(tab);
+    var $target = $tab.find('[data-drupal-nav-tabs-target]');
+    var isCollapsible = $tab.hasClass('is-collapsible');
+
+    function openMenu (e) {
+      $target.toggleClass('is-open');
+    }
+
+    function handleResize (e) {
+      $tab.addClass('is-horizontal');
+      var isHorizontal = $tab.parent().width() > $tab.intrinsic('width');
+      $tab.toggleClass('is-horizontal', isHorizontal);
+      if(isCollapsible) {
+        $tab.toggleClass('is-collapse-enabled', !isHorizontal);
+      }
+      if (isHorizontal) {
+        $target.removeClass('is-open');
+      }
+    }
+
+    $tab.addClass('position-container is-horizontal-enabled');
+
+    $tab.on('click.tabs', '[data-drupal-nav-tabs-trigger]', openMenu);
+    $(window).on('resize.tabs', Drupal.debounce(handleResize)).trigger('resize.tabs');
+  }
+
+  /**
+   * Initialise the tabs JS.
+   */
+  Drupal.behaviors.navTabs = {
+    attach: function (context, settings) {
+      var $tabs = $(context).find('[data-drupal-nav-tabs]');
+      if ($tabs.length) {
+        var notSmartPhone = window.matchMedia('(min-width: 300px)');
+        if (notSmartPhone.matches) {
+          $tabs.once('nav-tabs').each(init);
+        }
+      }
+    }
+  };
+
+})(jQuery, Drupal);
diff --git a/core/themes/seven/seven.theme b/core/themes/seven/seven.theme
index 7defd49..7718f11 100644
--- a/core/themes/seven/seven.theme
+++ b/core/themes/seven/seven.theme
@@ -6,6 +6,7 @@
  */
 
 use Drupal\Core\Template\RenderWrapper;
+use Drupal\Component\Utility\String;
 
 /**
  * Implements hook_library_info().
@@ -27,6 +28,19 @@ function seven_library_info() {
     ),
   );
 
+  $libraries['drupal.nav-tabs'] = array(
+    'version' => \Drupal::VERSION,
+    'js' => array(
+      drupal_get_path('theme', 'seven') . '/js/nav-tabs.js' => array('group' => JS_THEME),
+    ),
+    'dependencies' => array(
+      array('system', 'jquery'),
+      array('system', 'drupal'),
+      array('system', 'jquery.once'),
+      array('system', 'jquery.intrinsic'),
+    ),
+  );
+
   return $libraries;
 }
 
@@ -48,12 +62,82 @@ function seven_preprocess_html(&$variables) {
  * Implements hook_preprocess_HOOK() for page templates.
  */
 function seven_preprocess_page(&$variables) {
-  $variables['primary_local_tasks'] = $variables['tabs'];
-  unset($variables['primary_local_tasks']['#secondary']);
-  $variables['secondary_local_tasks'] = array(
-    '#theme' => 'menu_local_tasks',
-    '#secondary' => isset($variables['tabs']['#secondary']) ? $variables['tabs']['#secondary'] : '',
+  if (isset($variables['tabs'])) {
+    $variables['primary_local_tasks'] = $variables['tabs'];
+    unset($variables['primary_local_tasks']['#secondary']);
+    $variables['secondary_local_tasks'] = array(
+      '#theme' => 'menu_local_tasks',
+      '#secondary' => isset($variables['tabs']['#secondary']) ? $variables['tabs']['#secondary'] : '',
+    );
+  }
+}
+
+/**
+ * Overrides theme_menu_local_tasks().
+ *
+ * Returns HTML for primary and secondary local tasks.
+ *
+ **/
+function seven_menu_local_tasks(&$variables) {
+  $output = '';
+
+  if (!empty($variables['primary'])) {
+    drupal_add_library('seven', 'drupal.nav-tabs', FALSE);
+    $variables['primary']['#prefix'] = '<h2 class="visually-hidden">' . t('Primary tabs') . '</h2>';
+    $variables['primary']['#prefix'] .= '<nav role="navigation" class="is-horizontal is-collapsible" data-drupal-nav-tabs>';
+    $variables['primary']['#prefix'] .= '<button class="reset-appearance tabs__tab tabs__trigger" data-drupal-nav-tabs-trigger>&bull;&bull;&bull;</button>';
+    $variables['primary']['#prefix'] .= '<ul class="tabs primary clearfix"  data-drupal-nav-tabs-target>';
+    $variables['primary']['#suffix'] = '</ul>';
+    $variables['primary']['#suffix'] .= '</nav>';
+    $output .= drupal_render($variables['primary']);
+  }
+  if (!empty($variables['secondary'])) {
+    drupal_add_library('seven', 'drupal.nav-tabs', FALSE);
+    $variables['secondary']['#prefix'] = '<h2 class="visually-hidden">' . t('Secondary tabs') . '</h2>';
+    $variables['secondary']['#prefix'] .= '<nav role="navigation" class="is-horizontal" data-drupal-nav-tabs>';
+    $variables['secondary']['#prefix'] .= '<ul class="tabs secondary clearfix">';
+    $variables['secondary']['#suffix'] = '</ul>';
+    $variables['secondary']['#suffix'] .= '</nav>';
+    $output .= drupal_render($variables['secondary']);
+  }
+
+  return $output;
+}
+
+/**
+ * Overrides theme_menu_local_task().
+ *
+ * Returns HTML for a local task.
+ *
+ **/
+function seven_menu_local_task($variables) {
+  $link = $variables['element']['#link'];
+  $link += array(
+    'localized_options' => array(),
   );
+  $link_text = $link['title'];
+
+  if (!empty($variables['element']['#active'])) {
+    // Add text to indicate active tab for non-visual users.
+    $active = '<span class="visually-hidden">' . t('(active tab)') . '</span>';
+
+    // If the link does not contain HTML already, String::checkPlain() it now.
+    // After we set 'html'=TRUE the link will not be sanitized by l().
+    if (empty($link['localized_options']['html'])) {
+      $link['title'] = String::checkPlain($link['title']);
+    }
+    $link['localized_options']['html'] = TRUE;
+    $link_text = t('!local-task-title!active', array('!local-task-title' => $link['title'], '!active' => $active));
+  }
+  if (!empty($link['href'])) {
+    // @todo - remove this once all pages are converted to routes.
+    $a_tag = l($link_text, $link['href'], $link['localized_options']);
+  }
+  else {
+    $a_tag = \Drupal::l($link_text, $link['route_name'], $link['route_parameters'], $link['localized_options']);
+  }
+
+  return '<li' . (!empty($variables['element']['#active']) ? ' class="tabs__tab active"' : ' class="tabs__tab"') . '>' . $a_tag . '</li>';
 }
 
 /**
diff --git a/core/themes/seven/style.css b/core/themes/seven/style.css
index 11f9846..81a33dd 100644
--- a/core/themes/seven/style.css
+++ b/core/themes/seven/style.css
@@ -197,9 +197,21 @@ pre {
  */
 #branding {
   overflow: hidden;
-  padding: 20px 20px 0 20px; /* LTR */
-  position: relative;
   background-color: #e0e0d8;
+  padding: 24px 0 0;
+}
+/* This layout styling is a copy of #page.
+ * @TODO: Replace with reuseable layout classes.
+ **/
+.branding__inner {
+  margin-left: 1.25em;
+  margin-right: 1.25em;
+}
+@media screen and (min-width:45em) { /* 720px */
+  .branding__inner {
+    margin-left: 2.5em;
+    margin-right: 2.5em;
+  }
 }
 [dir="rtl"] #branding {
   padding: 20px 20px 0 20px;
@@ -207,7 +219,7 @@ pre {
 .breadcrumb {
   font-size: 0.846em;
   line-height: 1em;
-  padding: 0 0 10px 0;
+  padding: 20px 0 10px 0;
 }
 
 /**
@@ -230,16 +242,16 @@ pre {
  * Page title.
  */
 #page-title {
-  background: #333;
   padding-top: 20px;
 }
-#branding h1.page-title {
-  color: #000;
+#branding .page-title {
+  color: #333;
+  display: inline-block;
   margin: 0;
-  padding-bottom: 10px;
-  font-size: 1.385em;
-  font-weight: normal;
-  float: left; /* LTR */
+  font-size: 1.625em;
+  line-height: 1.875em;
+  font-weight: 600;
+  -webkit-font-smoothing: antialiased;
 }
 [dir="rtl"] #branding h1.page-title {
   float: right;
@@ -255,151 +267,284 @@ pre {
 /**
  * Tabs.
  */
-ul.primary {
-  float: right; /* LTR */
-  border-bottom: none;
-  text-transform: uppercase;
-  font-size: 0.923em;
-  margin: 0;
-  padding-top: 0;
-}
-[dir="rtl"] ul.primary {
-  float: left;
+.is-collapse-enabled  .tabs,
+.is-horizontal .tabs {
+  position: relative;
 }
-ul.primary li {
-  float: left; /* LTR */
-  list-style: none;
-  height: 2.60em;
-  margin: 0 2px;
+.is-collapse-enabled .tabs:before,
+.is-horizontal .tabs:before {
+  content: '';
+  display: block;
+  background-color: #A6A6A6;
+  height: 1px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 10;
+  right: 0;
 }
-[dir="rtl"] ul.primary li {
-  float: right;
+
+/* Span the full width of the viewport */
+.branding__inner .is-horizontal .tabs:before,
+.branding__inner .is-collapse-enabled .tabs:before {
+  left: -2.5em;
+  right: -2.5em;
 }
-ul.primary li a:link,
-ul.primary li a.active,
-ul.primary li a:active,
-ul.primary li a:visited,
-ul.primary li a:hover,
-ul.primary li.active a {
+
+/**
+ * Tab
+ *
+ * 1. Required by some elements such as <button>
+ * 2. Fixed height needed to ensure alignment with absolutely-positioned
+ *    active tab.
+ */
+.tabs__tab {
+  position: relative;
   display: block;
-  float: left; /* LTR */
-  padding: 0.615em 18px;
-  background-color: #a6a7a2;
-  color: #000;
-  font-weight: bold;
-  border-width: 1px 1px 0 1px;
-  border-style: solid;
-  border-color: #a6a7a2;
-  border-radius: 8px 8px 0 0;
-}
-[dir="rtl"] ul.primary li a:link,
-[dir="rtl"] ul.primary li a.active,
-[dir="rtl"] ul.primary li a:active,
-[dir="rtl"] ul.primary li a:visited,
-[dir="rtl"] ul.primary li a:hover,
-[dir="rtl"] ul.primary li.active a {
-  float: right;
+  overflow: hidden;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  margin: -1px 0 0;
+  padding: 9px 2em 7px 1em;
+  width: 100%;  /* 1 */
+  border: 1px solid #bfbfbf;
+  background-color: rgba(242, 242, 240, 0.7);
+  color: #0074bd;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-ul.primary li.active a,
-ul.primary li.active a.active,
-ul.primary li.active a:active,
-ul.primary li.active a:visited {
-  background-color: #fff;
-  border-color: #c9cac4;
+.overlay .tabs__tab {
+  background-color: #f2f2f0;
 }
-ul.primary li a:hover {
-  color: #fff;
+.tabs__tab:hover,
+.tabs__tab:focus {
+  color: #008ee6;
+  background-color: #fafaf7;
 }
-ul.primary li.active a:hover {
-  color: #000;
+
+/* TODO: Move the tabs__tab class to the anchor instead of having to reset the padding. */
+li.tabs__tab {
+  padding: 0;
+}
+li.tabs__tab a {
+  padding: 9px 2em 7px 1em;
 }
-.tabs-secondary {
+.tabs a:hover,
+.tabs a:focus {
+  text-decoration: none;
+}
+.tabs.primary {
   clear: both;
+  margin: 16px 0 0;
+  margin: 1rem 0 0;
+}
+.tabs.primary .tabs__tab.active {
+  z-index: 15;
+  border-color: #a6a6a6;
+  border-radius: 4px 0 0 0;
+  background-color: #ffffff;
+  color: #004f80;
+}
+/* Overidding system.theme.css */
+.tabs.primary a {
+  background: none;
 }
-ul.secondary {
-  float: right; /* LTR */
-  font-size: 0.923em;
-  padding: 0 3px 5px;
-  line-height: 1.385em;
-  overflow: hidden;
-  background-color: #fff;
+
+/* Only add the arrow if there's space */
+@media screen and (min-width:18.75em) { /* 300px */
+  .tabs.primary a {
+    background: url(../../misc/icons/0074bd/chevron-right.svg) 99% center no-repeat;
+  }
+  .no-svg .tabs.primary a {
+    background-image: url(../../misc/icons/0074bd/chevron-right.png);
+  }
+  [dir="rtl"] .tabs.primary a {
+    background: url(../../misc/icons/0074bd/chevron-left.svg) 1% center no-repeat;
+  }
+  [dir="rtl"] .no-svg .tabs.primary a {
+    background-image: url(../../misc/icons/0074bd/chevron-left.png);
+  }
+  .tabs.primary a.active {
+    background-image: none;
+  }
+}
+.tabs__trigger {
+  display: none;
+}
+
+/*
+ * JS dependent styling
+ */
+ .is-collapse-enabled .tabs__trigger {
+  -webkit-box-sizing: content-box;
+  -moz-box-sizing:    content-box;
+  box-sizing:         content-box;
+  display: block;
+  position: absolute;
+  z-index: 10;
+  right: 0;
+  top: 2px;
+  left: auto;
+  width: 25%;
+  padding-right: 4px;
+  padding-left: 4px;
+  border-left: 0;
+  border-radius: 0 4px 0 0;
+  font-family: Arial, sans-serif;
+  font-size: 1.25em;
+  letter-spacing: 0.1em;
+  text-align: center;
+  outline: 0;
 }
-[dir="rtl"] ul.secondary {
+[dir="rtl"] .is-collapse-enabled .tabs__trigger {
+  border-right: 0;
+  border-left: 1px solid #bfbfbf;
+  border-radius: 4px 0 0 0;
+  right: auto;
+  left: 0;
+  top: 11px;
+}
+/* TODO: Make this number less magic */
+.is-collapse-enabled .tabs {
+  padding-top: 38px;
+  max-height: 0;
+}
+.tabs.is-open {
+  max-height: 999em;
+  padding-bottom:16px;
+  padding-bottom: 1rem;
+}
+.is-collapse-enabled .tabs__tab.active {
+  position: absolute;
+  top: 2px;
+  left: 0;
+  width: 75%;
+  border-bottom: 0;
+}
+[dir="rtl"] .is-collapse-enabled .tabs__tab.active {
+  left: auto;
+  right: 0;
+}
+.is-collapse-enabled .tabs.primary a.active:before {
+  content: none;
+}
+.is-open .tabs__tab.active {
+  border-color: #a6a6a6;
+  background-color: #ffffff;
+  color: #004f80;
+  border-bottom: 1px solid #a6a6a6;
+}
+
+/* Styles for the horizontal state always take priority */
+.is-horizontal .tabs {
+  max-height: none !important;
+  padding-top: 0 !important;
+  overflow: visible;
+}
+.is-horizontal .tabs__tab {
   float: left;
+  height: auto;
+  width: auto;
+  margin: 0 0 -1px;
+  text-align: center;
+  border-bottom-color: #a6a6a6;
 }
-ul.secondary li {
-  margin: 0 5px;
-  float: none; /* LTR */
+[dir="rtl"] .is-horizontal .tabs__tab {
+  float: right;
 }
-[dir="rtl"] ul.secondary li {
-  float: none;
+.is-horizontal .tabs__tab + .tabs__tab {
+  margin-left: -1px;
 }
-ul.secondary li a {
-  background-color: #ddd;
-  color: #000;
-  display: inline-block;
+.is-horizontal .tabs.primary .tabs__tab:first-child {
+  border-radius: 4px 0 0 0;
 }
-ul.secondary li a,
-ul.secondary li a:hover,
-ul.secondary li.active a,
-ul.secondary li.active a.active {
-  padding: 2px 10px;
-  border-radius: 7px;
+[dir="rtl"] .is-horizontal .tabs.primary .tabs__tab:first-child {
+  border-radius: 0 4px 0 0;
 }
-ul.secondary li a:hover,
-ul.secondary li.active a,
-ul.secondary li.active a.active {
-  color: #fff;
-  background: #666;
+.is-horizontal .tabs.primary .tabs__tab:last-child {
+  border-radius: 0 4px 0 0;
 }
-#content {
-  clear: left;
+[dir="rtl"] .is-horizontal .tabs.primary .tabs__tab:last-child {
+  border-radius: 4px 0 0 0;
 }
-@media screen and (max-width:56.538em) { /* 735px */
-  .touch #branding {
-    padding-right: 0;
-    position: relative;
-  }
-  .touch ul.primary {
-    clear: both;
-    float: none;
-    margin-bottom: -3px;
-    overflow-x: scroll;
-    -webkit-overflow-scrolling: touch;
-    white-space: nowrap;
-    padding-right: 40px;
-  }
-  .touch #branding:after {
-    background-image: -moz-linear-gradient(360deg, rgba(224, 224, 216, 0), #E0E0D8 80%);
-    background-image: -o-linear-gradient(360deg, rgba(224, 224, 216, 0), #E0E0D8  80%);
-    background-image: -webkit-linear-gradient(360deg, rgba(224, 224, 216, 0), #E0E0D8 80%);
-    background-image: linear-gradient(360deg, rgba(224, 224, 216, 0), #E0E0D8 80%);
-    content: ' ';
-    display: block;
-    float: right;
-    height: 40px;
-    width: 80px;
-    position: relative;
-    right: 0;
-    top: -40px;
-    margin-bottom: -40px;
-  }
-  .touch ul.primary li {
-    float: none;
-    white-space: nowrap;
-  }
-  .touch ul.primary li a:link,
-  .touch ul.primary li a.active,
-  .touch ul.primary li a:active,
-  .touch ul.primary li a:visited,
-  .touch ul.primary li a:hover,
-  .touch ul.primary li.active a {
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    text-align: center;
-    width: 100%;
-  }
+
+/* Override the states above */
+.is-horizontal .tabs__tab.active,
+.is-horizontal .tabs.primary .tabs__tab.active,
+[dir="rtl"] .is-horizontal .tabs.primary .tabs__tab.active {
+  border-radius: 4px 4px 0 0;
+  position: relative;
+  width: auto;
+  top: 0;
+  border-bottom: 0;
+  margin: 0 -4px;
+}
+[dir="rtl"] .is-horizontal .tabs__tab.active {
+  margin: 0 -6px;
+}
+.is-horizontal .tabs.primary a {
+  background-image: none;
+  padding: 7px 2em 7px 2em;
+}
+.is-horizontal .tabs__trigger {
+  display: none;
+}
+
+.tabs.secondary {
+  display: block;
+  margin-top: 16px;
+  margin-top: 1rem;
+}
+.tabs.secondary .tabs__tab {
+  display: block;
+  padding: 5px 15px 5px 16px;
+  margin-left: -1px;
+  color: #0074bd;
+}
+.is-horizontal .tabs.secondary .tabs__tab {
+  border-bottom: 1px solid transparent;
+  border-left: 1px solid transparent;
+}
+.tabs.secondary .tabs__tab + .tabs__tab {
+  border-top: 1px solid #d9d8d4;
+}
+.tabs.secondary .tabs__tab.active {
+  color: #004f80;
+}
+.tabs.secondary .tabs__tab:focus,
+.tabs.secondary .tabs__tab:hover {
+  border-left-color: #008ee6;
+  color: #008ee6;
+}
+.tabs.secondary a {
+  background-color: transparent;
+  padding: 7px 13px 5px;
+  text-decoration: none;
+}
+
+/* Styles for the horizontal state */
+
+.is-horizontal .tabs.secondary .tabs__tab {
+  background: none;
+  border-width: 0 0 2px;
+  float: left;
+  position: relative;
+  top: 0;
+  z-index: 15;
+  margin-left: 1em;
+  margin-right: 1em;
+  border-left-color: transparent;
+  border-right-color: transparent;
+  border-top: 0;
+  padding: 0;
+}
+.is-horizontal .tabs.secondary .tabs__tab.active {
+  border-bottom-color: #004f80;
+}
+.is-horizontal .tabs.secondary .tabs__tab:focus,
+.is-horizontal .tabs.secondary .tabs__tab:hover {
+  border-bottom-color: #008ee6;
 }
 
 /**
@@ -410,7 +555,7 @@ ul.secondary li.active a.active {
   color: #333;
   margin-left: 0.8125em;
   margin-right: 0.8125em;
-  padding: 20px 0 40px 0;
+  padding: 0 0 40px 0;
   position: relative;
 }
 @media screen and (min-width:28.125em) { /* 450px */
@@ -1008,7 +1153,7 @@ body.in-maintenance #page {
   padding-top: 2em;
   width: 90%;
 }
-body.in-maintenance #branding h1 {
+body.in-maintenance .branding__inner {
   max-width: 770px;
   margin: 0 auto;
   float: none;
@@ -1069,10 +1214,7 @@ body.in-maintenance #logo {
 /* Shortcut theming */
 .add-or-remove-shortcuts a:focus span.text,
 .add-or-remove-shortcuts a:hover span.text {
-  color: #fff;
-  background-color: #5f605b;
-  padding: 0 6px;
-  border-radius: 5px;
+  display: none;
 }
 
 /* Field UI */
diff --git a/core/themes/seven/templates/maintenance-page.html.twig b/core/themes/seven/templates/maintenance-page.html.twig
index 9fb5522..b962317 100644
--- a/core/themes/seven/templates/maintenance-page.html.twig
+++ b/core/themes/seven/templates/maintenance-page.html.twig
@@ -24,7 +24,9 @@
   {{ page_top }}
 
   <header id="branding">
-    {% if title %}<h1 class="page-title">{{ title }}</h1>{% endif %}
+    <div class="branding__inner">
+      {% if title %}<h1 class="page-title">{{ title }}</h1>{% endif %}
+    </div>
   </header>
 
   <div id="page">
diff --git a/core/themes/seven/templates/page.html.twig b/core/themes/seven/templates/page.html.twig
index 5a50431..77dde87 100644
--- a/core/themes/seven/templates/page.html.twig
+++ b/core/themes/seven/templates/page.html.twig
@@ -66,15 +66,16 @@
  */
 #}
   <header id="branding" class="clearfix">
-    {{ breadcrumb }}
-    {{ title_prefix }}
-    {% if title %}
-      <h1 class="page-title">{{ title }}</h1>
-    {% endif %}
-    {{ title_suffix }}
-    {% if primary_local_tasks %}
-      {{ primary_local_tasks }}
-    {% endif %}
+    <div class="branding__inner">
+      {{ title_prefix }}
+      {% if title %}
+        <h1 class="page-title">{{ title }}</h1>
+      {% endif %}
+      {{ title_suffix }}
+      {% if primary_local_tasks %}
+        {{ primary_local_tasks }}
+      {% endif %}
+    </div>
   </header>
 
   <div id="page">
@@ -82,6 +83,8 @@
       <div class="tabs-secondary clearfix" role="navigation">{{ secondary_local_tasks }}</div>
     {% endif %}
 
+    {{ breadcrumb }}
+
     <main id="content" class="clearfix" role="main">
       <div class="visually-hidden"><a id="main-content"></a></div>
       {% if messages %}
