diff --git a/core/modules/contextual/contextual-rtl.css b/core/modules/contextual/contextual-rtl.css
deleted file mode 100644
index dfb6dda2d857599fc118b67e517ab3f970c682e8..0000000000000000000000000000000000000000
--- a/core/modules/contextual/contextual-rtl.css
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * @file
- * Stylesheet specific to right-to-left languages.
- */
-
-div.contextual-links-wrapper {
-  left: 5px;
-  right: auto;
-}
-div.contextual-links-wrapper ul.contextual-links {
-  -moz-border-radius: 0 4px 4px 4px;
-  border-radius: 0 4px 4px 4px;
-  left: 0;
-  right: auto;
-}
-a.contextual-links-trigger {
-  text-indent: -90px;
-}
diff --git a/core/modules/contextual/contextual.base-rtl.css b/core/modules/contextual/contextual.base-rtl.css
new file mode 100644
index 0000000000000000000000000000000000000000..147a5670709445bfb41d0d18f5d6483091494b04
--- /dev/null
+++ b/core/modules/contextual/contextual.base-rtl.css
@@ -0,0 +1,9 @@
+
+/**
+ * @file
+ * RTL base styles for the Contextual module.
+ */
+
+.contextual .trigger {
+  text-align: left;
+}
diff --git a/core/modules/contextual/contextual.base.css b/core/modules/contextual/contextual.base.css
new file mode 100644
index 0000000000000000000000000000000000000000..0b59ebaecc4b5921bd7190358fe1652f7aedc02a
--- /dev/null
+++ b/core/modules/contextual/contextual.base.css
@@ -0,0 +1,37 @@
+
+/**
+ * @file
+ * Generic base styles for contextual module.
+ */
+
+/**
+ * Contextual links behavior.
+ */
+.contextual,
+.contextual .contextual-links,
+.contextual .trigger {
+  display: none;
+}
+.contextual-region:hover .contextual,
+.contextual-region:hover .trigger,
+.contextual-active .trigger,
+.contextual-active .contextual-links {
+  display: block;
+}
+
+/**
+ * Contextual links structure.
+ */
+.contextual-region {
+  position: relative;
+}
+.contextual {
+  position: absolute;
+  z-index: 999;
+}
+.contextual .trigger {
+  overflow: hidden;
+  position: relative;
+  text-align: right; /* LTR */
+  z-index: 1;
+}
diff --git a/core/modules/contextual/contextual.css b/core/modules/contextual/contextual.css
deleted file mode 100644
index a48932beb380191490ef8cf8dea1c1034bd0a69d..0000000000000000000000000000000000000000
--- a/core/modules/contextual/contextual.css
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * @file
- * Stylesheet for the Contextual module.
- */
-
-/**
- * Contextual links regions.
- */
-.contextual-links-region {
-  outline: none;
-  position: relative;
-}
-.contextual-links-region-active {
-  outline: #999 dashed 1px;
-}
-
-/**
- * Contextual links.
- */
-div.contextual-links-wrapper {
-  display: none;
-  font-size: 90%;
-  position: absolute;
-  right: 5px; /* LTR */
-  top: 2px;
-  z-index: 999;
-}
-.js div.contextual-links-wrapper {
-  display: block;
-}
-a.contextual-links-trigger {
-  background: transparent url(images/gear-select.png) no-repeat 2px 0;
-  border: 1px solid transparent;
-  display: none;
-  height: 18px;
-  margin: 0;
-  padding: 0 2px;
-  outline: none;
-  text-indent: 34px; /* LTR */
-  width: 28px;
-  overflow: hidden;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
-}
-a.contextual-links-trigger:hover,
-div.contextual-links-active a.contextual-links-trigger {
-  background-position: 2px -18px;
-}
-div.contextual-links-active a.contextual-links-trigger {
-  background-color: #fff;
-  border-color: #ccc;
-  border-bottom: none;
-  position: relative;
-  z-index: 1;
-  -moz-border-radius: 4px 4px 0 0;
-  border-radius: 4px 4px 0 0;
-}
-div.contextual-links-wrapper ul.contextual-links {
-  background-color: #fff;
-  border: 1px solid #ccc;
-  display: none;
-  margin: 0;
-  padding: 0.25em 0;
-  position: absolute;
-  right: 0;
-  text-align: left;
-  top: 18px;
-  white-space: nowrap;
-  -moz-border-radius: 4px 0 4px 4px; /* LTR */
-  border-radius: 4px 0 4px 4px; /* LTR */
-}
-.contextual-links-region:hover a.contextual-links-trigger,
-div.contextual-links-active a.contextual-links-trigger,
-div.contextual-links-active ul.contextual-links {
-  display: block;
-}
-ul.contextual-links li {
-  line-height: 100%;
-  list-style: none;
-  list-style-image: none;
-  margin: 0;
-  padding: 0;
-}
-div.contextual-links-wrapper a {
-  text-decoration: none;
-}
-ul.contextual-links li a {
-  color: #333 !important;
-  display: block;
-  margin: 0.25em 0;
-  padding: 0.25em 1em 0.25em 0.5em;
-}
-ul.contextual-links li a:hover {
-  background-color: #bfdcee;
-}
diff --git a/core/modules/contextual/contextual.js b/core/modules/contextual/contextual.js
index ebe509137617b9f329ca38810a30aaff63554cf7..2744acbe1361e5fa1c902b1ec3cc9005f5597d7f 100644
--- a/core/modules/contextual/contextual.js
+++ b/core/modules/contextual/contextual.js
@@ -12,23 +12,23 @@ Drupal.contextualLinks = Drupal.contextualLinks || {};
  */
 Drupal.behaviors.contextualLinks = {
   attach: function (context) {
-    $('div.contextual-links-wrapper', context).once('contextual-links', function () {
+    $('div.contextual', context).once('contextual-links', function () {
       var $wrapper = $(this);
-      var $region = $wrapper.closest('.contextual-links-region');
-      var $links = $wrapper.find('ul.contextual-links');
-      var $trigger = $('<a class="contextual-links-trigger" href="#" />').text(Drupal.t('Configure')).click(
+      var $region = $wrapper.closest('.contextual-region');
+      var $links = $wrapper.find('ul');
+      var $trigger = $('<a class="trigger" href="#" />').text(Drupal.t('Configure')).click(
         function () {
           $links.stop(true, true).slideToggle(100);
-          $wrapper.toggleClass('contextual-links-active');
+          $wrapper.toggleClass('contextual-active');
           return false;
         }
       );
       // Attach hover behavior to trigger and ul.contextual-links.
       $trigger.add($links).hover(
-        function () { $region.addClass('contextual-links-region-active'); },
-        function () { $region.removeClass('contextual-links-region-active'); }
+        function () { $region.addClass('contextual-region-active'); },
+        function () { $region.removeClass('contextual-region-active'); }
       );
-      // Hide the contextual links when user clicks a link or rolls out of the .contextual-links-region.
+      // Hide the contextual links when user clicks a link or rolls out of the .contextual-region.
       $region.bind('mouseleave click', Drupal.contextualLinks.mouseleave);
       // Prepend the trigger.
       $wrapper.prepend($trigger);
@@ -41,8 +41,8 @@ Drupal.behaviors.contextualLinks = {
  */
 Drupal.contextualLinks.mouseleave = function () {
   $(this)
-    .find('.contextual-links-active').removeClass('contextual-links-active')
-    .find('ul.contextual-links').hide();
+    .find('.contextual-active').removeClass('contextual-active')
+    .find('.contextual-links').hide();
 };
 
 })(jQuery);
diff --git a/core/modules/contextual/contextual.module b/core/modules/contextual/contextual.module
index fc93466c537a4ce5df9b7d0a03bafda1e855116a..1fb7e4008bdac7d317f64a82654ed303b6c7b0d0 100644
--- a/core/modules/contextual/contextual.module
+++ b/core/modules/contextual/contextual.module
@@ -48,7 +48,8 @@ function contextual_library_info() {
       $path . '/contextual.js' => array(),
     ),
     'css' => array(
-      $path . '/contextual.css' => array(),
+      $path . '/contextual.base.css' => array(),
+      $path . '/contextual.theme.css' => array(),
     ),
   );
   return $libraries;
@@ -62,11 +63,9 @@ function contextual_element_info() {
     '#pre_render' => array('contextual_pre_render_links'),
     '#theme' => 'links__contextual',
     '#links' => array(),
-    '#prefix' => '<div class="contextual-links-wrapper">',
+    '#prefix' => '<div class="contextual">',
     '#suffix' => '</div>',
-    '#attributes' => array(
-      'class' => array('contextual-links'),
-    ),
+    '#attributes' => array('class' => array('contextual-links')),
     '#attached' => array(
       'library' => array(
         array('contextual', 'contextual-links'),
@@ -109,7 +108,7 @@ function contextual_preprocess(&$variables, $hook) {
       '#element' => $element,
     );
     // Mark this element as potentially having contextual links attached to it.
-    $variables['classes_array'][] = 'contextual-links-region';
+    $variables['classes_array'][] = 'contextual-region';
   }
 }
 
diff --git a/core/modules/contextual/contextual.theme-rtl.css b/core/modules/contextual/contextual.theme-rtl.css
new file mode 100644
index 0000000000000000000000000000000000000000..59694e12f6b1f5566728fcd0d9a1941539570343
--- /dev/null
+++ b/core/modules/contextual/contextual.theme-rtl.css
@@ -0,0 +1,21 @@
+
+/**
+ * @file
+ * RTL styling for contextual module.
+ */
+
+.contextual {
+  left: 5px;
+  right: auto;
+}
+.contextual .contextual-links {
+  -moz-border-radius: 0 4px 4px 4px; /* FF3.6 */
+  border-radius: 0 4px 4px 4px;
+  left: 0;
+  right: auto;
+}
+
+.contextual-region .contextual .contextual-links a {
+ text-align: right;
+ padding: 0.4em 0.6em 0.4em 0.8em;
+}
diff --git a/core/modules/contextual/contextual.theme.css b/core/modules/contextual/contextual.theme.css
new file mode 100644
index 0000000000000000000000000000000000000000..48d8e8336a1f080b83d2fe7e0fe6779b37034090
--- /dev/null
+++ b/core/modules/contextual/contextual.theme.css
@@ -0,0 +1,90 @@
+
+/**
+ * @file
+ * Styling for contextual module.
+ */
+
+/**
+ * Contextual links wrappers.
+ */
+.contextual-region-active {
+  outline: 1px dashed #d6d6d6;
+  outline-offset: 1px;
+}
+.contextual {
+  right: 2px; /* LTR */
+  top: 2px;
+}
+
+/**
+ * Contextual trigger.
+ */
+.contextual .trigger {
+  background: transparent url(images/gear-select.png) no-repeat 2px 0;
+  border: 1px solid transparent;
+  height: 18px;
+  margin: 0;
+  outline: none;
+  overflow: hidden;
+  padding: 0 2px;
+  text-indent: 34px;
+  width: 28px;
+}
+.contextual .trigger:hover,
+.contextual-active .trigger {
+  background-position: 2px -18px;
+}
+.contextual-active .trigger {
+  background-color: #ffffff;
+  border-bottom: none;
+  border-color: #d6d6d6;
+  -moz-border-radius: 4px 4px 0 0; /* FF3.6 */
+  border-radius: 4px 4px 0 0;
+  position: relative;
+  z-index: 1;
+}
+
+/**
+ * Contextual links.
+ */
+.contextual .contextual-links {
+  background-color: #fff;
+  border: 1px solid #d6d6d6;
+  -moz-border-radius: 4px 0 4px 4px; /* FF3.6 */
+  border-radius: 4px 0 4px 4px; /* LTR */
+  margin: 0;
+  padding: 0.25em 0;
+  position: absolute;
+  right: 0; /* LTR */
+  text-align: left;
+  top: 18px;
+  white-space: nowrap;
+}
+/* Reset the li to prevent accidential overrides by a theme. */
+.contextual-region .contextual .contextual-links li {
+  background-color: #fff;
+  border: none;
+  list-style: none;
+  list-style-image: none;
+  margin: 0;
+  padding: 0;
+}
+.contextual-region .contextual .contextual-links a {
+  display: block;
+  font-family: sans-serif;
+  font-size: small;
+  line-height: 0.8em;
+  margin: 0.25em 0;
+  padding: 0.4em 0.8em 0.4em 0.6em; /* LTR */
+}
+.contextual-region .contextual .contextual-links a,
+.contextual-region .contextual .contextual-links a:hover,
+.contextual-region .contextual .contextual-links a:active,
+.contextual-region .contextual .contextual-links a:focus {
+  background-color: #fff;
+  color: #333;
+  text-decoration: none;
+}
+.contextual-region .contextual .contextual-links li a:hover {
+  background-color: #bfdcee;
+}
diff --git a/core/themes/bartik/css/style.css b/core/themes/bartik/css/style.css
index 739ae81ae46e2908d1314b571ba5a4a0a7b68689..ef60abec4a691265d739b78d2829b763931a0c02 100644
--- a/core/themes/bartik/css/style.css
+++ b/core/themes/bartik/css/style.css
@@ -229,13 +229,8 @@ table ul.links li {
   margin: 0;
   padding: 0 0 0.25em 1em; /* LTR */
 }
-.contextual-links-wrapper {
-  font-size: small !important;
-}
-ul.contextual-links {
+.contextual-region .contextual .contextual-links a {
   font-size: 0.923em;
-}
-.contextual-links-wrapper a {
   text-shadow: 0 0 0 !important;
 }
 .item-list .pager {