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/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/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/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/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/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/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/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/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;
 }