diff --git a/core/includes/common.inc b/core/includes/common.inc
index 5e8e2d1..8ddb820 100644
--- a/core/includes/common.inc
+++ b/core/includes/common.inc
@@ -1961,9 +1961,9 @@ function l($text, $path, array $options = array()) {
   // The query parameters of an active link are equal to the current parameters.
   && ($variables['options']['query'] == $active['query']);
 
-  // Add the "active" class if appropriate.
+  // Add the "is-active" class if appropriate.
   if ($variables['url_is_active']) {
-    $variables['options']['attributes']['class'][] = 'active';
+    $variables['options']['attributes']['class'][] = 'is-active';
   }
 
   // Remove all HTML and PHP tags from a tooltip, calling expensive strip_tags()
diff --git a/core/includes/menu.inc b/core/includes/menu.inc
index fb11da2..cb6b28e 100644
--- a/core/includes/menu.inc
+++ b/core/includes/menu.inc
@@ -1062,7 +1062,7 @@ function menu_tree_output($tree) {
     // trees, so if the current path is a local task, and this link is its
     // tab root, then we have to set the class manually.
     if ($data['link']['href'] == $router_item['tab_root_href'] && $data['link']['href'] != current_path()) {
-      $data['link']['localized_options']['attributes']['class'][] = 'active';
+      $data['link']['localized_options']['attributes']['class'][] = 'is-active';
     }
 
     // Allow menu-specific theme overrides.
@@ -1645,7 +1645,7 @@ function theme_menu_local_task($variables) {
     $link_text = t('!local-task-title!active', array('!local-task-title' => $link['title'], '!active' => $active));
   }
 
-  return '<li' . (!empty($variables['element']['#active']) ? ' class="active"' : '') . '>' . l($link_text, $link['href'], $link['localized_options']) . '</li>';
+  return '<li' . (!empty($variables['element']['#active']) ? ' class="is-active"' : '') . '>' . l($link_text, $link['href'], $link['localized_options']) . '</li>';
 }
 
 /**
@@ -1845,7 +1845,7 @@ function menu_navigation_links($menu_name, $level = 0) {
       // menu trees, so if the current path is a local task, and this link is
       // its tab root, then we have to set the class manually.
       if ($item['link']['href'] == $router_item['tab_root_href'] && $item['link']['href'] != current_path()) {
-        $l['attributes']['class'][] = 'active';
+        $l['attributes']['class'][] = 'is-active';
       }
       // Keyed with the unique mlid to generate classes in theme_links().
       $links['menu-' . $item['link']['mlid'] . $class] = $l;
@@ -1958,7 +1958,7 @@ function menu_local_tasks($level = 0) {
             // would not be marked as active, since l() only compares the href
             // with current_path().
             if ($link['href'] != current_path()) {
-              $link['localized_options']['attributes']['class'][] = 'active';
+              $link['localized_options']['attributes']['class'][] = 'is-active';
             }
             $tabs_current[$link['href']] = array(
               '#theme' => 'menu_local_task',
@@ -2035,7 +2035,7 @@ function menu_local_tasks($level = 0) {
             // links to its parent, l() will not mark it as active, as it only
             // compares the link's href to current_path().
             if ($link['href'] != current_path()) {
-              $link['localized_options']['attributes']['class'][] = 'active';
+              $link['localized_options']['attributes']['class'][] = 'is-active';
             }
             $tabs_current[$link['href']] = array(
               '#theme' => 'menu_local_task',
diff --git a/core/includes/tablesort.inc b/core/includes/tablesort.inc
index c42b1f4..da0bb46 100644
--- a/core/includes/tablesort.inc
+++ b/core/includes/tablesort.inc
@@ -48,7 +48,7 @@ function tablesort_header($cell, $header, $ts) {
       // http://www.w3.org/TR/wai-aria/states_and_properties#aria-sort
       $cell['aria-sort'] = ($ts['sort'] == 'asc') ? 'ascending' : 'descending';
       $ts['sort'] = (($ts['sort'] == 'asc') ? 'desc' : 'asc');
-      $cell['class'][] = 'active';
+      $cell['class'][] = 'is-active';
       $image = theme('tablesort_indicator', array('style' => $ts['sort']));
     }
     else {
@@ -83,10 +83,10 @@ function tablesort_header($cell, $header, $ts) {
 function tablesort_cell($cell, $header, $ts, $i) {
   if (isset($header[$i]['data']) && $header[$i]['data'] == $ts['name'] && !empty($header[$i]['field'])) {
     if (is_array($cell)) {
-      $cell['class'][] = 'active';
+      $cell['class'][] = 'is-active';
     }
     else {
-      $cell = array('data' => $cell, 'class' => array('active'));
+      $cell = array('data' => $cell, 'class' => array('is-active'));
     }
   }
   return $cell;
diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index 721453a..9aeda05 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -1843,7 +1843,7 @@ function theme_links($variables) {
         $is_current_path = ($link['href'] == current_path() || ($link['href'] == '<front>' && drupal_is_front_page()));
         $is_current_language = (empty($link['language']) || $link['language']->langcode == $language_url->langcode);
         if ($is_current_path && $is_current_language) {
-          $class[] = 'active';
+          $class[] = 'is-active';
         }
         // @todo Reconcile Views usage of 'ajax' as a boolean with the rest of
         //   core's usage of it as an array.
diff --git a/core/includes/theme.maintenance.inc b/core/includes/theme.maintenance.inc
index 9215957..2eab63f 100644
--- a/core/includes/theme.maintenance.inc
+++ b/core/includes/theme.maintenance.inc
@@ -129,7 +129,7 @@ function theme_task_list($variables) {
 
   foreach ($items as $k => $item) {
     if ($active == $k) {
-      $class = 'active';
+      $class = 'is-active';
       $status = '(' . $t('active') . ')';
       $done = FALSE;
     }
diff --git a/core/modules/comment/comment.info.yml b/core/modules/comment/comment.info.yml
index 8fb8482..1eeb792 100644
--- a/core/modules/comment/comment.info.yml
+++ b/core/modules/comment/comment.info.yml
@@ -5,7 +5,6 @@ package: Core
 version: VERSION
 core: 8.x
 dependencies:
-  - datetime
   - node
   - text
 configure: admin/content/comment
diff --git a/core/modules/contextual/contextual.toolbar.css b/core/modules/contextual/contextual.toolbar.css
index 189a07f..bcbf0dd 100644
--- a/core/modules/contextual/contextual.toolbar.css
+++ b/core/modules/contextual/contextual.toolbar.css
@@ -8,7 +8,7 @@
   background-image: url("../../misc/edit.png");
 }
 .icon-edit:active:before,
-.active.icon-edit:before {
+.is-active.icon-edit:before {
   background-image: url("../../misc/edit-active.png");
 }
 
@@ -24,7 +24,7 @@
   text-indent: -9999px;
   line-height: 1em;
 }
-.js .toolbar .bar .contextual-toolbar-tab button.active {
+.js .toolbar .bar .contextual-toolbar-tab button.is-active {
   background-image:-moz-linear-gradient(rgb(78,159,234) 0%,rgb(69,132,221) 100%);
   background-image:-webkit-gradient(linear,color-stop(0, rgb(78,159,234)),color-stop(1, rgb(69,132,221)));
   background-image: -webkit-linear-gradient(top,  rgb(78,159,234) 0%, rgb(69,132,221) 100%);
diff --git a/core/modules/contextual/contextual.toolbar.js b/core/modules/contextual/contextual.toolbar.js
index 0059868..6f916e9 100644
--- a/core/modules/contextual/contextual.toolbar.js
+++ b/core/modules/contextual/contextual.toolbar.js
@@ -150,7 +150,7 @@ Drupal.contextualToolbar = {
       // Render the visibility.
       this.$el.toggleClass('element-hidden', !this.model.get('isVisible'));
       // Render the state.
-      this.$el.find('button').toggleClass('active', !this.model.get('isViewing'));
+      this.$el.find('button').toggleClass('is-active', !this.model.get('isViewing'));
 
       return this;
     },
diff --git a/core/modules/dblog/dblog.css b/core/modules/dblog/dblog.css
index 5494553..4010663 100644
--- a/core/modules/dblog/dblog.css
+++ b/core/modules/dblog/dblog.css
@@ -14,22 +14,22 @@
   padding: 3ex 0 0;
   vertical-align: top;
 }
-.dblog-user.odd .active {
+.dblog-user.odd .is-active {
   background: #ddf;
 }
-.dblog-user.even .active {
+.dblog-user.even .is-active {
   background: #cce;
 }
-.dblog-error.odd .active {
+.dblog-error.odd .is-active {
   background: #ffc9c9;
 }
-.dblog-error.even .active {
+.dblog-error.even .is-active {
   background: #eeb9b9;
 }
-.dblog-warning.odd .active {
+.dblog-warning.odd .is-active {
   background: #fffdca;
 }
-.dblog-warning.even .active {
+.dblog-warning.even .is-active {
   background: #eeedbd;
 }
 .admin-dblog .icon {
diff --git a/core/modules/language/lib/Drupal/language/Tests/LanguageSwitchingTest.php b/core/modules/language/lib/Drupal/language/Tests/LanguageSwitchingTest.php
index 8088f6a..be682d6 100644
--- a/core/modules/language/lib/Drupal/language/Tests/LanguageSwitchingTest.php
+++ b/core/modules/language/lib/Drupal/language/Tests/LanguageSwitchingTest.php
@@ -111,17 +111,17 @@ function testLanguageLinkActiveClass() {
 
     // Language code 'none' link should be active.
     $langcode = 'none';
-    $links = $this->xpath('//a[@id = :id and contains(@class, :class)]', array(':id' => 'no_lang_link', ':class' => 'active'));
+    $links = $this->xpath('//a[@id = :id and contains(@class, :class)]', array(':id' => 'no_lang_link', ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), t('A link generated by :function to the current :language page with langcode :langcode is marked active.', array(':function' => $function_name, ':language' => $current_language, ':langcode' => $langcode)));
 
     // Language code 'en' link should be active.
     $langcode = 'en';
-    $links = $this->xpath('//a[@id = :id and contains(@class, :class)]', array(':id' => 'en_link', ':class' => 'active'));
+    $links = $this->xpath('//a[@id = :id and contains(@class, :class)]', array(':id' => 'en_link', ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), t('A link generated by :function to the current :language page with langcode :langcode is marked active.', array(':function' => $function_name, ':language' => $current_language, ':langcode' => $langcode)));
 
     // Language code 'fr' link should not be active.
     $langcode = 'fr';
-    $links = $this->xpath('//a[@id = :id and not(contains(@class, :class))]', array(':id' => 'fr_link', ':class' => 'active'));
+    $links = $this->xpath('//a[@id = :id and not(contains(@class, :class))]', array(':id' => 'fr_link', ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), t('A link generated by :function to the current :language page with langcode :langcode is NOT marked active.', array(':function' => $function_name, ':language' => $current_language, ':langcode' => $langcode)));
 
     // Test links generated by l() on a French page.
@@ -130,17 +130,17 @@ function testLanguageLinkActiveClass() {
 
     // Language code 'none' link should be active.
     $langcode = 'none';
-    $links = $this->xpath('//a[@id = :id and contains(@class, :class)]', array(':id' => 'no_lang_link', ':class' => 'active'));
+    $links = $this->xpath('//a[@id = :id and contains(@class, :class)]', array(':id' => 'no_lang_link', ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), t('A link generated by :function to the current :language page with langcode :langcode is marked active.', array(':function' => $function_name, ':language' => $current_language, ':langcode' => $langcode)));
 
     // Language code 'en' link should not be active.
     $langcode = 'en';
-    $links = $this->xpath('//a[@id = :id and not(contains(@class, :class))]', array(':id' => 'en_link', ':class' => 'active'));
+    $links = $this->xpath('//a[@id = :id and not(contains(@class, :class))]', array(':id' => 'en_link', ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), t('A link generated by :function to the current :language page with langcode :langcode is NOT marked active.', array(':function' => $function_name, ':language' => $current_language, ':langcode' => $langcode)));
 
     // Language code 'fr' link should be active.
     $langcode = 'fr';
-    $links = $this->xpath('//a[@id = :id and contains(@class, :class)]', array(':id' => 'fr_link', ':class' => 'active'));
+    $links = $this->xpath('//a[@id = :id and contains(@class, :class)]', array(':id' => 'fr_link', ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), t('A link generated by :function to the current :language page with langcode :langcode is marked active.', array(':function' => $function_name, ':language' => $current_language, ':langcode' => $langcode)));
 
     $function_name = "theme('link')";
@@ -151,17 +151,17 @@ function testLanguageLinkActiveClass() {
 
     // Language code 'none' link should be active.
     $langcode = 'none';
-    $links = $this->xpath('//a[@id = :id and contains(@class, :class)]', array(':id' => 'no_lang_link', ':class' => 'active'));
+    $links = $this->xpath('//a[@id = :id and contains(@class, :class)]', array(':id' => 'no_lang_link', ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), t('A link generated by :function to the current :language page with langcode :langcode is marked active.', array(':function' => $function_name, ':language' => $current_language, ':langcode' => $langcode)));
 
     // Language code 'en' link should be active.
     $langcode = 'en';
-    $links = $this->xpath('//a[@id = :id and contains(@class, :class)]', array(':id' => 'en_link', ':class' => 'active'));
+    $links = $this->xpath('//a[@id = :id and contains(@class, :class)]', array(':id' => 'en_link', ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), t('A link generated by :function to the current :language page with langcode :langcode is marked active.', array(':function' => $function_name, ':language' => $current_language, ':langcode' => $langcode)));
 
     // Language code 'fr' link should not be active.
     $langcode = 'fr';
-    $links = $this->xpath('//a[@id = :id and not(contains(@class, :class))]', array(':id' => 'fr_link', ':class' => 'active'));
+    $links = $this->xpath('//a[@id = :id and not(contains(@class, :class))]', array(':id' => 'fr_link', ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), t('A link generated by :function to the current :language page with langcode :langcode is NOT marked active.', array(':function' => $function_name, ':language' => $current_language, ':langcode' => $langcode)));
 
     // Test links generated by theme('link') on a French page.
@@ -170,17 +170,17 @@ function testLanguageLinkActiveClass() {
 
     // Language code 'none' link should be active.
     $langcode = 'none';
-    $links = $this->xpath('//a[@id = :id and contains(@class, :class)]', array(':id' => 'no_lang_link', ':class' => 'active'));
+    $links = $this->xpath('//a[@id = :id and contains(@class, :class)]', array(':id' => 'no_lang_link', ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), t('A link generated by :function to the current :language page with langcode :langcode is marked active.', array(':function' => $function_name, ':language' => $current_language, ':langcode' => $langcode)));
 
     // Language code 'en' link should not be active.
     $langcode = 'en';
-    $links = $this->xpath('//a[@id = :id and not(contains(@class, :class))]', array(':id' => 'en_link', ':class' => 'active'));
+    $links = $this->xpath('//a[@id = :id and not(contains(@class, :class))]', array(':id' => 'en_link', ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), t('A link generated by :function to the current :language page with langcode :langcode is NOT marked active.', array(':function' => $function_name, ':language' => $current_language, ':langcode' => $langcode)));
 
     // Language code 'fr' link should be active.
     $langcode = 'fr';
-    $links = $this->xpath('//a[@id = :id and contains(@class, :class)]', array(':id' => 'fr_link', ':class' => 'active'));
+    $links = $this->xpath('//a[@id = :id and contains(@class, :class)]', array(':id' => 'fr_link', ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), t('A link generated by :function to the current :language page with langcode :langcode is marked active.', array(':function' => $function_name, ':language' => $current_language, ':langcode' => $langcode)));
   }
 
diff --git a/core/modules/overlay/overlay-child.css b/core/modules/overlay/overlay-child.css
index 48ced7f..ded1403 100644
--- a/core/modules/overlay/overlay-child.css
+++ b/core/modules/overlay/overlay-child.css
@@ -105,10 +105,10 @@
   padding: 0 14px;
   text-decoration: none;
 }
-#overlay-tabs li.active a,
-#overlay-tabs li.active a.active,
-#overlay-tabs li.active a:active,
-#overlay-tabs li.active a:visited {
+#overlay-tabs li.is-active a,
+#overlay-tabs li.is-active a.is-active,
+#overlay-tabs li.is-active a:active,
+#overlay-tabs li.is-active a:visited {
   background-color: #fff;
   margin-bottom: 0;
   padding-bottom: 2px;
@@ -117,8 +117,8 @@
 #overlay-tabs li a:hover {
   color: #fff;
 }
-#overlay-tabs li.active a:focus,
-#overlay-tabs li.active a:hover {
+#overlay-tabs li.is-active a:focus,
+#overlay-tabs li.is-active a:hover {
   color: #000;
 }
 
diff --git a/core/modules/overlay/overlay-child.js b/core/modules/overlay/overlay-child.js
index be6df9b..7fd972a 100644
--- a/core/modules/overlay/overlay-child.js
+++ b/core/modules/overlay/overlay-child.js
@@ -157,8 +157,8 @@ Drupal.overlayChild.behaviors.tabs = function (context, settings) {
 
   $('#overlay-tabs > li > a').bind('click.drupal-overlay', function () {
     var active_tab = Drupal.t('(active tab)');
-    $tabsLinks.parent().siblings().removeClass('active').find('element-invisible:contains(' + active_tab + ')').appendTo(this);
-    $(this).parent().addClass('active');
+    $tabsLinks.parent().siblings().removeClass('is-active').find('element-invisible:contains(' + active_tab + ')').appendTo(this);
+    $(this).parent().addClass('is-active');
   });
 };
 
diff --git a/core/modules/overlay/overlay-parent.js b/core/modules/overlay/overlay-parent.js
index 3356580..c70e144 100644
--- a/core/modules/overlay/overlay-parent.js
+++ b/core/modules/overlay/overlay-parent.js
@@ -794,7 +794,7 @@ Drupal.overlay.resetActiveClass = function(activePath) {
   $('#toolbar-administration')
   .find('a[href]')
   // Remove active class from all links in displaced elements.
-  .removeClass('active')
+  .removeClass('is-active')
   // Add active class to links that match activePath.
   .each(function () {
     var linkDomain = this.protocol + this.hostname;
@@ -803,7 +803,7 @@ Drupal.overlay.resetActiveClass = function(activePath) {
     // A link matches if it is part of the active trail of activePath, except
     // for frontpage links.
     if (linkDomain === windowDomain && (activePath + '/').indexOf(linkPath + '/') === 0 && (linkPath !== '' || activePath === '')) {
-      $(this).addClass('active');
+      $(this).addClass('is-active');
     }
   });
 };
diff --git a/core/modules/shortcut/shortcut.theme.css b/core/modules/shortcut/shortcut.theme.css
index 04f7c9f..4a74930 100644
--- a/core/modules/shortcut/shortcut.theme.css
+++ b/core/modules/shortcut/shortcut.theme.css
@@ -10,7 +10,7 @@
   background-image: url("images/shortcut.png");
 }
 .icon-shortcut:active:before,
-.icon-shortcut.active:before {
+.icon-shortcut.is-active:before {
   background-image: url("images/shortcut-active.png");
 }
 .toolbar .tray.horizontal.shortcuts .menu {
diff --git a/core/modules/system/lib/Drupal/system/Tests/Common/UrlTest.php b/core/modules/system/lib/Drupal/system/Tests/Common/UrlTest.php
index a241a31..5bc0c4c 100644
--- a/core/modules/system/lib/Drupal/system/Tests/Common/UrlTest.php
+++ b/core/modules/system/lib/Drupal/system/Tests/Common/UrlTest.php
@@ -71,40 +71,40 @@ function testLinkActiveClass() {
     $path = 'common-test/l-active-class';
 
     $this->drupalGet($path, $options_no_query);
-    $links = $this->xpath('//a[@href = :href and contains(@class, :class)]', array(':href' => url($path, $options_no_query), ':class' => 'active'));
+    $links = $this->xpath('//a[@href = :href and contains(@class, :class)]', array(':href' => url($path, $options_no_query), ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), 'A link generated by l() to the current page is marked active.');
 
-    $links = $this->xpath('//a[@href = :href and not(contains(@class, :class))]', array(':href' => url($path, $options_query), ':class' => 'active'));
+    $links = $this->xpath('//a[@href = :href and not(contains(@class, :class))]', array(':href' => url($path, $options_query), ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), 'A link generated by l() to the current page with a query string when the current page has no query string is not marked active.');
 
     $this->drupalGet($path, $options_query);
-    $links = $this->xpath('//a[@href = :href and contains(@class, :class)]', array(':href' => url($path, $options_query), ':class' => 'active'));
+    $links = $this->xpath('//a[@href = :href and contains(@class, :class)]', array(':href' => url($path, $options_query), ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), 'A link generated by l() to the current page with a query string that matches the current query string is marked active.');
 
-    $links = $this->xpath('//a[@href = :href and contains(@class, :class)]', array(':href' => url($path, $options_query_reverse), ':class' => 'active'));
+    $links = $this->xpath('//a[@href = :href and contains(@class, :class)]', array(':href' => url($path, $options_query_reverse), ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), 'A link generated by l() to the current page with a query string that has matching parameters to the current query string but in a different order is marked active.');
 
-    $links = $this->xpath('//a[@href = :href and not(contains(@class, :class))]', array(':href' => url($path, $options_no_query), ':class' => 'active'));
+    $links = $this->xpath('//a[@href = :href and not(contains(@class, :class))]', array(':href' => url($path, $options_no_query), ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), 'A link generated by l() to the current page without a query string when the current page has a query string is not marked active.');
 
     // Test #theme.
     $path = 'common-test/theme-link-active-class';
 
     $this->drupalGet($path, $options_no_query);
-    $links = $this->xpath('//a[@href = :href and contains(@class, :class)]', array(':href' => url($path, $options_no_query), ':class' => 'active'));
+    $links = $this->xpath('//a[@href = :href and contains(@class, :class)]', array(':href' => url($path, $options_no_query), ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), 'A link generated by #theme to the current page is marked active.');
 
-    $links = $this->xpath('//a[@href = :href and not(contains(@class, :class))]', array(':href' => url($path, $options_query), ':class' => 'active'));
+    $links = $this->xpath('//a[@href = :href and not(contains(@class, :class))]', array(':href' => url($path, $options_query), ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), 'A link generated by #theme to the current page with a query string when the current page has no query string is not marked active.');
 
     $this->drupalGet($path, $options_query);
-    $links = $this->xpath('//a[@href = :href and contains(@class, :class)]', array(':href' => url($path, $options_query), ':class' => 'active'));
+    $links = $this->xpath('//a[@href = :href and contains(@class, :class)]', array(':href' => url($path, $options_query), ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), 'A link generated by #theme to the current page with a query string that matches the current query string is marked active.');
 
-    $links = $this->xpath('//a[@href = :href and contains(@class, :class)]', array(':href' => url($path, $options_query_reverse), ':class' => 'active'));
+    $links = $this->xpath('//a[@href = :href and contains(@class, :class)]', array(':href' => url($path, $options_query_reverse), ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), 'A link generated by #theme to the current page with a query string that has matching parameters to the current query string but in a different order is marked active.');
 
-    $links = $this->xpath('//a[@href = :href and not(contains(@class, :class))]', array(':href' => url($path, $options_no_query), ':class' => 'active'));
+    $links = $this->xpath('//a[@href = :href and not(contains(@class, :class))]', array(':href' => url($path, $options_no_query), ':class' => 'is-active'));
     $this->assertTrue(isset($links[0]), 'A link generated by #theme to the current page without a query string when the current page has a query string is not marked active.');
   }
 
diff --git a/core/modules/system/lib/Drupal/system/Tests/Theme/FunctionsTest.php b/core/modules/system/lib/Drupal/system/Tests/Theme/FunctionsTest.php
index 1faf6d8..eb0503e 100644
--- a/core/modules/system/lib/Drupal/system/Tests/Theme/FunctionsTest.php
+++ b/core/modules/system/lib/Drupal/system/Tests/Theme/FunctionsTest.php
@@ -165,7 +165,7 @@ function testLinks() {
     $expected_links .= '<ul id="somelinks">';
     $expected_links .= '<li class="a-link odd first"><a href="' . url('a/link') . '">' . check_plain('A <link>') . '</a></li>';
     $expected_links .= '<li class="plain-text even">' . check_plain('Plain "text"') . '</li>';
-    $expected_links .= '<li class="front-page odd last active"><a href="' . url('<front>') . '" class="active">' . check_plain('Front page') . '</a></li>';
+    $expected_links .= '<li class="front-page odd last is-active"><a href="' . url('<front>') . '" class="is-active">' . check_plain('Front page') . '</a></li>';
     $expected_links .= '</ul>';
 
     // Verify that passing a string as heading works.
diff --git a/core/modules/system/system.maintenance.css b/core/modules/system/system.maintenance.css
index ae3bc99..fe03233 100644
--- a/core/modules/system/system.maintenance.css
+++ b/core/modules/system/system.maintenance.css
@@ -47,6 +47,6 @@
 /**
  * Installation task list
  */
-.task-list li.active {
+.task-list li.is-active {
   font-weight: bold;
 }
diff --git a/core/modules/system/system.theme.css b/core/modules/system/system.theme.css
index a3c770a..a8a2b37 100644
--- a/core/modules/system/system.theme.css
+++ b/core/modules/system/system.theme.css
@@ -57,10 +57,10 @@ caption {
 /**
  * Markup generated by theme_tablesort_indicator().
  */
-th.active img {
+th.is-active img {
   display: inline;
 }
-td.active {
+td.is-active {
   background-color: #ddd;
 }
 
@@ -327,7 +327,7 @@ ul.menu li {
   padding-top: 0.2em;
   margin: 0;
 }
-ul.menu a.active {
+ul.menu a.is-active {
   color: #000;
 }
 
@@ -389,7 +389,7 @@ ul.tabs {
   padding: 0.2em 1em;
   text-decoration: none;
 }
-.tabs a.active {
+.tabs a.is-active {
   background-color: #eee;
 }
 .tabs a:focus,
diff --git a/core/modules/toolbar/css/toolbar.base-rtl.css b/core/modules/toolbar/css/toolbar.base-rtl.css
index cbeecd9..e076235 100644
--- a/core/modules/toolbar/css/toolbar.base-rtl.css
+++ b/core/modules/toolbar/css/toolbar.base-rtl.css
@@ -44,13 +44,13 @@ html.js .toolbar {
   left: auto;
   right: -100%;
 }
-.toolbar .vertical.active,
-.toolbar .vertical.active > .lining {
+.toolbar .vertical.is-active,
+.toolbar .vertical.is-active > .lining {
   left: auto;
   right: 0;
 }
 @media only screen and (min-width: 16.5em) {
-  .toolbar .vertical.active > .lining:before {
+  .toolbar .vertical.is-active > .lining:before {
     left: auto;
     right: -1px;
   }
diff --git a/core/modules/toolbar/css/toolbar.base.css b/core/modules/toolbar/css/toolbar.base.css
index 64e6468..4a5f427 100644
--- a/core/modules/toolbar/css/toolbar.base.css
+++ b/core/modules/toolbar/css/toolbar.base.css
@@ -139,21 +139,21 @@ html.js .toolbar {
   top: 0;
   z-index: -1;
 }
-.toolbar .tray.active {
+.toolbar .tray.is-active {
   display: block;
 }
-.toolbar .horizontal.active {
+.toolbar .horizontal.is-active {
   height: auto;
 }
-.toolbar .vertical.active,
-.toolbar .vertical.active > .lining {
+.toolbar .vertical.is-active,
+.toolbar .vertical.is-active > .lining {
   bottom: 0;
   left: 0; /* LTR */
   top: 0;
 }
 /* Make vertical toolbar tray scroll with page for touch devices. */
-.touch .toolbar .vertical.active,
-.touch .toolbar .vertical.active > .lining {
+.touch .toolbar .vertical.is-active,
+.touch .toolbar .vertical.is-active > .lining {
   bottom: auto;
   top: auto;
 }
@@ -177,7 +177,7 @@ html.js .toolbar {
     width: 240px;
     width: 15rem;
   }
-  .toolbar .vertical.active > .lining:before {
+  .toolbar .vertical.is-active > .lining:before {
     display: block;
     left: -1px; /* LTR */
   }
diff --git a/core/modules/toolbar/css/toolbar.icons.css b/core/modules/toolbar/css/toolbar.icons.css
index 7fc06bf..3a94096 100644
--- a/core/modules/toolbar/css/toolbar.icons.css
+++ b/core/modules/toolbar/css/toolbar.icons.css
@@ -43,14 +43,14 @@
   background-image: url("../images/icon-home.png");
 }
 .icon-home:active:before,
-.icon-home.active:before {
+.icon-home.is-active:before {
   background-image: url("../images/icon-home-active.png");
 }
 .icon-menu:before {
   background-image: url("../images/icon-menu.png");
 }
 .icon-menu:active:before,
-.icon-menu.active:before {
+.icon-menu.is-active:before {
   background-image: url("../images/icon-menu-active.png");
 }
 
@@ -61,56 +61,56 @@
   background-image: url("../images/icon-content.png");
 }
 .icon-content:active:before,
-.icon-content.active:before {
+.icon-content.is-active:before {
   background-image: url("../images/icon-content-active.png");
 }
 .icon-structure:before {
   background-image: url("../images/icon-structure.png");
 }
 .icon-structure:active:before,
-.icon-structure.active:before {
+.icon-structure.is-active:before {
   background-image: url("../images/icon-structure-active.png");
 }
 .icon-appearance:before {
   background-image: url("../images/icon-appearance.png");
 }
 .icon-appearance:active:before,
-.icon-appearance.active:before {
+.icon-appearance.is-active:before {
   background-image: url("../images/icon-appearance-active.png");
 }
 .icon-people:before {
   background-image: url("../images/icon-people.png");
 }
 .icon-people:active:before,
-.icon-people.active:before {
+.icon-people.is-active:before {
   background-image: url("../images/icon-people-active.png");
 }
 .icon-extend:before {
   background-image: url("../images/icon-extend.png");
 }
 .icon-extend:active:before,
-.icon-extend.active:before {
+.icon-extend.is-active:before {
   background-image: url("../images/icon-extend-active.png");
 }
 .icon-configuration:before {
   background-image: url("../images/icon-configuration.png");
 }
 .icon-configuration:active:before,
-.icon-configuration.active:before {
+.icon-configuration.is-active:before {
   background-image: url("../images/icon-configuration-active.png");
 }
 .icon-reports:before {
   background-image: url("../images/icon-reports.png");
 }
 .icon-reports:active:before,
-.icon-reports.active:before {
+.icon-reports.is-active:before {
   background-image: url("../images/icon-reports-active.png");
 }
 .icon-help:before {
   background-image: url("../images/icon-help.png");
 }
 .icon-help:active:before,
-.icon-help.active:before {
+.icon-help.is-active:before {
   background-image: url("../images/icon-help-active.png");
 }
 
diff --git a/core/modules/toolbar/css/toolbar.menu.css b/core/modules/toolbar/css/toolbar.menu.css
index c77c4c5..853e48e 100644
--- a/core/modules/toolbar/css/toolbar.menu.css
+++ b/core/modules/toolbar/css/toolbar.menu.css
@@ -23,8 +23,8 @@
 .toolbar .vertical .handle + a {
   margin-right: 3em; /* LTR */
 }
-.toolbar .tray .active-trail > .box a,
-.toolbar .tray a.active {
+.toolbar .tray .is-active-trail > .box a,
+.toolbar .tray a.is-active {
   color: #000;
   font-weight: bold;
 }
diff --git a/core/modules/toolbar/css/toolbar.theme.css b/core/modules/toolbar/css/toolbar.theme.css
index 4120135..c6f1b68 100644
--- a/core/modules/toolbar/css/toolbar.theme.css
+++ b/core/modules/toolbar/css/toolbar.theme.css
@@ -42,7 +42,7 @@
   background-image: linear-gradient(rgba(255, 255, 255, 0.125) 20%, transparent 200%);
   text-decoration: none;
 }
-.toolbar .bar .tab > a.active {
+.toolbar .bar .tab > a.is-active {
   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
   background-image: linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
 }
@@ -76,7 +76,7 @@
 }
 .toolbar .tray a:hover,
 .toolbar .tray a:active,
-.toolbar .tray a.active {
+.toolbar .tray a.is-active {
   color: #000;
 }
 .toolbar .horizontal .menu {
diff --git a/core/modules/toolbar/js/toolbar.js b/core/modules/toolbar/js/toolbar.js
index 50c6cdd..e0c4412 100644
--- a/core/modules/toolbar/js/toolbar.js
+++ b/core/modules/toolbar/js/toolbar.js
@@ -133,11 +133,11 @@ Drupal.toolbar.toggleTray = function (event) {
   var $tab = $(event.target);
   var name = $tab.attr('data-toolbar-tray');
   // Activate the selected tab and associated tray.
-  var $activateTray = $toolbar.find('[data-toolbar-tray="' + name + '"].tray').toggleClass('active');
+  var $activateTray = $toolbar.find('[data-toolbar-tray="' + name + '"].tray').toggleClass('is-active');
   if ($activateTray.length) {
     event.preventDefault();
     event.stopPropagation();
-    $tab.toggleClass('active');
+    $tab.toggleClass('is-active');
     // Toggle aria-pressed.
     var value = $tab.prop('aria-pressed');
     $tab.prop('aria-pressed', (value === 'false') ? 'true' : 'false');
@@ -156,10 +156,10 @@ Drupal.toolbar.toggleTray = function (event) {
     // Disable non-selected tabs and trays.
     $toolbar.find('.bar .trigger')
       .not($tab)
-      .removeClass('active')
+      .removeClass('is-active')
       // Set aria-pressed to false.
       .prop('aria-pressed', false);
-    $toolbar.find('.tray').not($activateTray).removeClass('active');
+    $toolbar.find('.tray').not($activateTray).removeClass('is-active');
   }
   // Update the page and toolbar dimension indicators.
   updatePeripherals();
@@ -203,9 +203,9 @@ Drupal.toolbar.setTrayWidth = function () {
   // Remove the left offset from the trays.
   $toolbar.find('.tray').removeAttr('data-offset-' + edge + ' data-offset-top');
   // If an active vertical tray exists, mark it as an offset element.
-  $toolbar.find('.tray.vertical.active').attr('data-offset-' + edge, '');
+  $toolbar.find('.tray.vertical.is-active').attr('data-offset-' + edge, '');
   // If an active horizontal tray exists, mark it as an offset element.
-  $toolbar.find('.tray.horizontal.active').attr('data-offset-top', '');
+  $toolbar.find('.tray.horizontal.is-active').attr('data-offset-top', '');
   // Trigger a recalculation of viewport displacing elements.
   Drupal.displace();
 };
@@ -268,7 +268,7 @@ function changeOrientation (newOrientation, isLock) {
  * Mark up the body tag to reflect the current state of the toolbar.
  */
 function setBodyState () {
-  var $activeTray = $trays.filter('.active');
+  var $activeTray = $trays.filter('.is-active');
   $('body')
     .toggleClass('toolbar-tray-open', !!$activeTray.length)
     .toggleClass('toolbar-vertical', (!!$activeTray.length && orientation === 'vertical'))
diff --git a/core/modules/tour/css/tour.css b/core/modules/tour/css/tour.css
index a732acd..53c48ce 100644
--- a/core/modules/tour/css/tour.css
+++ b/core/modules/tour/css/tour.css
@@ -13,7 +13,7 @@
   color: #fff;
   font-weight: bold;
 }
-.js .toolbar .bar .tour-toolbar-tab button.active {
+.js .toolbar .bar .tour-toolbar-tab button.is-active {
   background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
   background-image: linear-gradient(rgba(255, 255, 255, 0.25) 20%, transparent 200%);
 }
diff --git a/core/modules/tour/js/tour.js b/core/modules/tour/js/tour.js
index 7e87417..4c4d775 100644
--- a/core/modules/tour/js/tour.js
+++ b/core/modules/tour/js/tour.js
@@ -101,7 +101,7 @@ Drupal.tour.views.ToggleTourView = Backbone.View.extend({
     // Render the state.
     var isActive = this.model.get('isActive');
     this.$el.find('button')
-      .toggleClass('active', isActive)
+      .toggleClass('is-active', isActive)
       .prop('aria-pressed', isActive);
     return this;
   },
diff --git a/core/modules/user/user.css b/core/modules/user/user.css
index 2c88121..eefe345 100644
--- a/core/modules/user/user.css
+++ b/core/modules/user/user.css
@@ -97,6 +97,6 @@ div.password-suggestions ul {
   background-image: url("images/icon-user.png");
 }
 .icon-user:active:before,
-.icon-user.active:before {
+.icon-user.is-active:before {
   background-image: url("images/icon-user-active.png");
 }
diff --git a/core/modules/views_ui/config/tour.tour.views-ui.yml b/core/modules/views_ui/config/tour.tour.views-ui.yml
index 6f2ca9d..45137be 100644
--- a/core/modules/views_ui/config/tour.tour.views-ui.yml
+++ b/core/modules/views_ui/config/tour.tour.views-ui.yml
@@ -12,7 +12,7 @@ tips:
     body: This is the active display in the view. When there are multiple displays, one link for each display is shown and you can switch displays simply by clicking on the display link.
     weight: "2"
     attributes:
-      data-class: views-display-top li.active
+      data-class: views-display-top li.is-active
   views-ui-displays:
     id: views-ui-displays
     plugin: text
diff --git a/core/modules/views_ui/css/views-admin.theme.css b/core/modules/views_ui/css/views-admin.theme.css
index 59bed90..d85b7a1 100644
--- a/core/modules/views_ui/css/views-admin.theme.css
+++ b/core/modules/views_ui/css/views-admin.theme.css
@@ -462,7 +462,7 @@ 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 ul.secondary li.is-active a.is-active.error,
 .views-displays .secondary a.error {
   border: 2px solid #ed541d;
   padding: 1px 6px;
@@ -477,8 +477,8 @@ ul#views-display-menu-tabs li.add ul.action-list li{
 }
 
 .views-displays ul.secondary li a:hover,
-.views-displays ul.secondary li.active a,
-.views-displays ul.secondary li.active a.active {
+.views-displays ul.secondary li.is-active a,
+.views-displays ul.secondary li.is-active a.is-active {
   background-color: #555;
   color: #fff;
 }
diff --git a/core/themes/bartik/color/preview.css b/core/themes/bartik/color/preview.css
index 805ce79..4aeb95f 100644
--- a/core/themes/bartik/color/preview.css
+++ b/core/themes/bartik/color/preview.css
@@ -69,7 +69,7 @@
   background: #b3b3b3;
   background: rgba(255, 255, 255, 1);
 }
-#preview-main-menu-links li a.active {
+#preview-main-menu-links li a.is-active {
   border-bottom: none;
 }
 #preview-main-menu-links li {
diff --git a/core/themes/bartik/css/colors.css b/core/themes/bartik/css/colors.css
index 96f3877..0ab991f 100644
--- a/core/themes/bartik/css/colors.css
+++ b/core/themes/bartik/css/colors.css
@@ -9,14 +9,14 @@ body.overlay {
 }
 #page,
 #main-wrapper,
-#main-menu-links li a.active,
-#main-menu-links li.active-trail a {
+#main-menu-links li a.is-active,
+#main-menu-links li.is-active-trail a {
   background: #ffffff;
 }
-.tabs ul.primary li a.active {
+.tabs ul.primary li a.is-active {
   background-color: #ffffff;
 }
-.tabs ul.primary li.active a {
+.tabs ul.primary li.is-active a {
   background-color: #ffffff;
   border-bottom: 1px solid #ffffff;
 }
@@ -53,7 +53,7 @@ a:active,
 }
 .region-header,
 .region-header a,
-.region-header li a.active,
+.region-header li a.is-active,
 #name-and-slogan,
 #name-and-slogan a,
 #secondary-menu-links li a {
diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css
index 89e4fd4..fd2e607 100644
--- a/core/themes/bartik/css/style.css
+++ b/core/themes/bartik/css/style.css
@@ -518,7 +518,7 @@ h1#site-name {
   background: #b3b3b3;
   background: rgba(255, 255, 255, 1);
 }
-#main-menu-links li a.active {
+#main-menu-links li a.is-active {
   border-bottom: none;
 }
 
@@ -995,7 +995,7 @@ div.tabs {
   vertical-align: bottom;
   margin: 0 5px 0 0; /* LTR */
 }
-.tabs ul.primary li.active a {
+.tabs ul.primary li.is-active a {
   border-bottom: 1px solid #ffffff;
 }
 .tabs ul.primary li a {
@@ -1015,7 +1015,7 @@ div.tabs {
   border-top-left-radius: 6px;
   border-top-right-radius: 6px;
 }
-.tabs ul.primary li.active a {
+.tabs ul.primary li.is-active a {
   background-color: #ffffff;
   border: 1px solid #bbb;
   border-bottom: 1px solid #fff;
@@ -1043,7 +1043,7 @@ div.tabs {
   padding: 0.25em 0.5em;
   text-decoration: none;
 }
-.tabs ul.secondary li a.active {
+.tabs ul.secondary li a.is-active {
   background: #f2f2f2;
   border-bottom: none;
   border-radius: 5px;
@@ -1612,7 +1612,7 @@ div.admin-panel .description {
     border-bottom-right-radius: 0;
   }
   .featured #main-menu-links li a:active,
-  .featured #main-menu-links li a.active {
+  .featured #main-menu-links li a.is-active {
   background: #f0f0f0;
   background: rgba(240, 240, 240, 1.0);
   }
diff --git a/core/themes/seven/js/mobile.install.js b/core/themes/seven/js/mobile.install.js
index 6784daa..8b612de 100644
--- a/core/themes/seven/js/mobile.install.js
+++ b/core/themes/seven/js/mobile.install.js
@@ -4,7 +4,7 @@
 
   function findActiveStep (steps) {
     for (var i = 0; i < steps.length; i++) {
-      if (steps[i].className === 'active') {
+      if (steps[i].className === 'is-active') {
         return i + 1;
       }
     }
diff --git a/core/themes/seven/seven.theme b/core/themes/seven/seven.theme
index 61212fe..ca1c1b7 100644
--- a/core/themes/seven/seven.theme
+++ b/core/themes/seven/seven.theme
@@ -112,23 +112,6 @@ function seven_admin_block_content($variables) {
 }
 
 /**
- * Overrides theme_tablesort_indicator().
- *
- * Uses Seven's image versions, so the arrows show up as black and not gray on
- * gray.
- */
-function seven_tablesort_indicator($variables) {
-  $style = $variables['style'];
-  $theme_path = drupal_get_path('theme', 'seven');
-  if ($style == 'asc') {
-    return theme('image', array('uri' => $theme_path . '/images/arrow-asc.png', 'alt' => t('sort ascending'), 'width' => 13, 'height' => 13, 'title' => t('sort ascending')));
-  }
-  else {
-    return theme('image', array('uri' => $theme_path . '/images/arrow-desc.png', 'alt' => t('sort descending'), 'width' => 13, 'height' => 13, 'title' => t('sort descending')));
-  }
-}
-
-/**
  * Implements hook_preprocess_install_page().
  */
 function seven_preprocess_install_page(&$variables) {
diff --git a/core/themes/seven/style-rtl.css b/core/themes/seven/style-rtl.css
index f4097d9..3de1ffe 100644
--- a/core/themes/seven/style-rtl.css
+++ b/core/themes/seven/style-rtl.css
@@ -53,7 +53,7 @@ ol {
  */
 ul.primary li,
 ul.primary li a:link,
-ul.primary li a.active {
+ul.primary li a.is-active {
   float: right;
 }
 ul.primary,
@@ -68,6 +68,13 @@ ul.primary {
 }
 
 /**
+ * List items
+ */
+.item-list ul li {
+  text-align: right;
+}
+
+/**
  * Page layout.
  */
 ul.links li,
@@ -83,13 +90,37 @@ ul.inline li {
 /**
  * Tables.
  */
-table th.active a {
+table th.is-active a {
   padding: 0 0 0 25px;
 }
-table th.active img {
+table th.is-active img {
   left: 3px;
   right: auto;
 }
+
+table tr th {
+  text-align: right;
+}
+
+table tr th.is-active a{
+  padding-right:10px;
+}
+
+table tr td {
+  text-align: right;
+}
+table th.is-active[aria-sort="descending"] {
+  background: url(images/arrow-desc.png) no-repeat 0 0 transparent;
+}
+
+table th.is-active img {
+  display: none;
+}
+
+th.is-active > a:after {
+  bottom:-10px;
+}
+
 /**
  * Exception for webkit bug with the right border of the last cell
  * in some tables, since it's webkit only, we can use :last-child
@@ -132,7 +163,7 @@ ol.task-list {
 ol.task-list li {
   padding: 0.5em 20px 0.5em 1em;
 }
-ol.task-list li.active {
+ol.task-list li.is-active {
   background: transparent url(images/task-item-rtl.png) no-repeat right 50%;
   padding: 0.5em 20px 0.5em 1em;
 }
diff --git a/core/themes/seven/style.css b/core/themes/seven/style.css
index 52db095..cbf7a21 100644
--- a/core/themes/seven/style.css
+++ b/core/themes/seven/style.css
@@ -244,11 +244,11 @@ ul.primary li {
   margin: 0 2px;
 }
 ul.primary li a:link,
-ul.primary li a.active,
+ul.primary li a.is-active,
 ul.primary li a:active,
 ul.primary li a:visited,
 ul.primary li a:hover,
-ul.primary li.active a {
+ul.primary li.is-active a {
   display: block;
   float: left; /* LTR */
   padding: 0.615em 18px;
@@ -260,17 +260,17 @@ ul.primary li.active a {
   border-color: #a6a7a2;
   border-radius: 8px 8px 0 0;
 }
-ul.primary li.active a,
-ul.primary li.active a.active,
-ul.primary li.active a:active,
-ul.primary li.active a:visited {
+ul.primary li.is-active a,
+ul.primary li.is-active a.is-active,
+ul.primary li.is-active a:active,
+ul.primary li.is-active a:visited {
   background-color: #fff;
   border-color: #c9cac4;
 }
 ul.primary li a:hover {
   color: #fff;
 }
-ul.primary li.active a:hover {
+ul.primary li.is-active a:hover {
   color: #000;
 }
 .tabs-secondary {
@@ -295,14 +295,14 @@ ul.secondary li a {
 }
 ul.secondary li a,
 ul.secondary li a:hover,
-ul.secondary li.active a,
-ul.secondary li.active a.active {
+ul.secondary li.is-active a,
+ul.secondary li.is-active a.is-active {
   padding: 2px 10px;
   border-radius: 7px;
 }
 ul.secondary li a:hover,
-ul.secondary li.active a,
-ul.secondary li.active a.active {
+ul.secondary li.is-active a,
+ul.secondary li.is-active a.is-active {
   color: #fff;
   background: #666;
 }
@@ -343,11 +343,11 @@ ul.secondary li.active a.active {
     white-space: nowrap;
   }
   .touch ul.primary li a:link,
-  .touch ul.primary li a.active,
+  .touch ul.primary li a.is-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 {
+  .touch ul.primary li.is-active a {
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
@@ -430,27 +430,36 @@ div.submitted {
  */
 table {
   width: 100%;
-  font-size: 0.923em;
-  margin: 0 0 10px;
-  border-right: 1px solid #bebfb9;
-  border-bottom: 1px solid #bebfb9;
+  font-size: .875rem;
+  line-height: 1.125rem;
+}
+thead {
+  background: #faf5f2;
+  border: solid #bfbfba;
+  border-width: 1px 0;
+}
+th {
+  padding: 0 14px;
+  min-height: 39px;
+  text-align: left;
+  font-size: .9em;
+  vertical-align: center;
+  position: relative;
+  color: #333;
+  text-transform: uppercase;
 }
-table td,
-table th {
-  vertical-align: middle;
-  padding: 8px 10px;
-  border: 0;
-  color: #000;
+thead tr {
+  border-bottom: 1px solid #bfbfba;
 }
-tr.even,
-tr.odd {
-  border-width: 0 1px 0 1px;
-  border-style: solid;
-  border-color: #bebfb9;
-  background: #f3f4ee;
+tbody tr {
+  border-bottom: 1px solid #e6e4df;
 }
-tr.odd {
-  background: #fff;
+tbody tr:hover {
+  background: #f7fcff;
+}
+td {
+  padding: 10px 14px 11px;
+  text-align: left;
 }
 tr.drag {
   background: #fe7;
@@ -458,43 +467,80 @@ tr.drag {
 tr.drag-previous {
   background: #ffb;
 }
-table th {
-  text-transform: uppercase;
-  background: #e1e2dc;
-  font-weight: normal;
-  border-width: 1px;
-  border-style: solid;
-  border-color: #bebfb9;
-  padding: 3px 10px;
-}
-table th.active {
-  background: #bdbeb9;
-}
-table th a {
+
+th > a {
+  color: #008ee6;
   display: block;
+  padding: 11px 16px 9px 0;
+  background: transparent no-repeat right center;
+  text-decoration: none;
   position: relative;
 }
-table th.active a {
-  padding: 0 25px 0 0; /* LTR */
+th > a:after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: -1px;
+  left: 0;
+  right: 0;
+  border-bottom: 2px solid transparent;
+  transition: all 0.1s;
+}
+th.is-active > a {
+  color: #004875;
+  background-color:transparent;
+  background-position: right center;
+  background-repeat: no-repeat;
+}
+th a:hover {
+  background-image: url(images/arrow-asc.png);
+}
+
+[aria-sort="ascending"].is-active > a {
+background-image: url(images/arrow-asc-active.png);
 }
-table th.active img {
+[aria-sort="ascending"].is-active > a:hover {
+background-image: url(images/arrow-asc.png);
+}
+[aria-sort="descending"].is-active > a {
+background-image: url(images/arrow-desc-active.png);
+}
+[aria-sort="descending"].is-active > a:hover {
+background-image: url(images/arrow-desc.png);
+}
+th.is-active > a:after {
+  border-bottom-color: #004875;
+}
+table th.is-active img {
   position: absolute;
-  top: 3px;
-  right: 3px; /* LTR */
+  top: 50%;
+  right: 0; /* LTR */
+  margin-top: -6px; /* 50% height */
 }
+th > a:hover,
+th.is-active > a:hover {
+  color: #008ee6;
+  text-decoration: none;
+}
+th > a:hover:after,
+th.is-active > a:hover:after {
+  border-bottom-color: #008ee6;
+}
+
 /**
  * Force browsers to calculate the width of a 'select all' TH element.
  */
 table th.select-all {
   width: 1px;
 }
-table td.active {
+table td.is-active {
   background: #e9e9dd;
 }
-table tr.odd td.active {
+table tr.odd td.is-active {
   background: #f3f4ee;
 }
-table tr.selected td.active,
+table tr.selected td.is-active,
 table tr.selected td {
   background: #ffc;
   border-color: #eeb;
@@ -968,7 +1014,7 @@ ol.task-list li {
   padding: 0.5em 1em 0.5em 20px; /* LTR */
   color: #adadad;
 }
-ol.task-list li.active {
+ol.task-list li.is-active {
   background: transparent url(images/task-item.png) no-repeat 3px 50%; /* LTR */
   padding: 0.5em 1em 0.5em 20px; /* LTR */
   color: #000;
@@ -1275,8 +1321,8 @@ details.fieldset-no-legend {
 }
 
 .views-displays ul.secondary li a,
-.views-displays ul.secondary li.active a,
-.views-displays ul.secondary li.active a.active {
+.views-displays ul.secondary li.is-active a,
+.views-displays ul.secondary li.is-active a.is-active {
   padding: 2px 7px 3px;
 }
 
@@ -1284,8 +1330,8 @@ details.fieldset-no-legend {
   color: #0074bd;
 }
 
-.views-displays ul.secondary li.active a,
-.views-displays ul.secondary li.active a.active {
+.views-displays ul.secondary li.is-active a,
+.views-displays ul.secondary li.is-active a.is-active {
   border: 1px solid transparent;
 }