diff --git a/core/modules/system/src/Tests/Menu/MenuRouterTest.php b/core/modules/system/src/Tests/Menu/MenuRouterTest.php
index dc3e385..d655dd8 100644
--- a/core/modules/system/src/Tests/Menu/MenuRouterTest.php
+++ b/core/modules/system/src/Tests/Menu/MenuRouterTest.php
@@ -266,7 +266,7 @@ public function testThemeIntegration() {
   protected function doTestThemeCallbackAdministrative() {
     $this->drupalGet('menu-test/theme-callback/use-admin-theme');
     $this->assertText('Active theme: seven. Actual theme: seven.', 'The administrative theme can be correctly set in a theme negotiation.');
-    $this->assertRaw('seven/css/style.css', "The administrative theme's CSS appears on the page.");
+    $this->assertRaw('seven/css/base/elements.css', "The administrative theme's CSS appears on the page.");
   }
 
   /**
@@ -285,7 +285,7 @@ protected function doTestThemeCallbackMaintenanceMode() {
     $this->drupalLogin($admin_user);
     $this->drupalGet('menu-test/theme-callback/use-admin-theme');
     $this->assertText('Active theme: seven. Actual theme: seven.', 'The theme negotiation system is correctly triggered for an administrator when the site is in maintenance mode.');
-    $this->assertRaw('seven/css/style.css', "The administrative theme's CSS appears on the page.");
+    $this->assertRaw('seven/css/base/elements.css', "The administrative theme's CSS appears on the page.");
 
     $this->container->get('state')->set('system.maintenance_mode', FALSE);
   }
diff --git a/core/modules/taxonomy/src/Tests/ThemeTest.php b/core/modules/taxonomy/src/Tests/ThemeTest.php
index bdf9008..7a4386e 100644
--- a/core/modules/taxonomy/src/Tests/ThemeTest.php
+++ b/core/modules/taxonomy/src/Tests/ThemeTest.php
@@ -39,7 +39,7 @@ function testTaxonomyTermThemes() {
     // should use the administrative theme.
     $vocabulary = $this->createVocabulary();
     $this->drupalGet('admin/structure/taxonomy/manage/' . $vocabulary->id() . '/add');
-    $this->assertRaw('seven/css/style.css', t("The administrative theme's CSS appears on the page for adding a taxonomy term."));
+    $this->assertRaw('seven/css/base/elements.css', t("The administrative theme's CSS appears on the page for adding a taxonomy term."));
 
     // Viewing a taxonomy term should use the default theme.
     $term = $this->createTerm($vocabulary);
@@ -48,6 +48,6 @@ function testTaxonomyTermThemes() {
 
     // Editing a taxonomy term should use the same theme as adding one.
     $this->drupalGet('taxonomy/term/' . $term->id() . '/edit');
-    $this->assertRaw('seven/css/style.css', t("The administrative theme's CSS appears on the page for editing a taxonomy term."));
+    $this->assertRaw('seven/css/base/elements.css', t("The administrative theme's CSS appears on the page for editing a taxonomy term."));
   }
 }
diff --git a/core/tests/Drupal/Tests/Core/Extension/ThemeHandlerTest.php b/core/tests/Drupal/Tests/Core/Extension/ThemeHandlerTest.php
index 5daac3f..782cbca 100644
--- a/core/tests/Drupal/Tests/Core/Extension/ThemeHandlerTest.php
+++ b/core/tests/Drupal/Tests/Core/Extension/ThemeHandlerTest.php
@@ -166,13 +166,36 @@ public function testRebuildThemeData() {
     // Ensure that the css paths are set with the proper prefix.
     $this->assertEquals(array(
       'screen' => array(
-        'css/seven.base.css' => DRUPAL_ROOT . '/core/themes/seven/css/seven.base.css',
-        'css/style.css' => DRUPAL_ROOT . '/core/themes/seven/css/style.css',
-        'css/layout.css' => DRUPAL_ROOT . '/core/themes/seven/css/layout.css',
+        'css/base/elements.css' => DRUPAL_ROOT . '/core/themes/seven/css/base/elements.css',
+        'css/components/admin-list.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/admin-list.css',
+        'css/components/admin-options.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/admin-options.css',
+        'css/components/admin-panel.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/admin-panel.css',
+        'css/components/block-recent-content.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/block-recent-content.css',
+        'css/components/branding.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/branding.css',
+        'css/components/breadcrumb.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/breadcrumb.css',
         'css/components/buttons.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/buttons.css',
         'css/components/buttons.theme.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/buttons.theme.css',
+        'css/components/comments.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/comments.css',
+        'css/components/console.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/console.css',
         'css/components/dropbutton.component.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/dropbutton.component.css',
+        'css/components/entity-meta.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/entity-meta.css',
+        'css/components/field-ui.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/field-ui.css',
+        'css/components/form.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/form.css',
+        'css/components/help.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/help.css',
+        'css/components/menus-and-lists.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/menus-and-lists.css',
+        'css/components/modules-page.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/modules-page.css',
+        'css/components/node.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/node.css',
+        'css/components/page-title.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/page-title.css',
+        'css/components/pager.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/pager.css',
+        'css/components/skip-link.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/skip-link.css',
+        'css/components/tables.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/tables.css',
+        'css/components/tabs.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/tabs.css',
         'css/components/tour.theme.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/tour.theme.css',
+        'css/components/update-status.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/update-status.css',
+        'css/components/views-ui.css' => DRUPAL_ROOT . '/core/themes/seven/css/components/views-ui.css',
+        'css/layout/layout.css' => DRUPAL_ROOT . '/core/themes/seven/css/layout/layout.css',
+        'css/layout/node-add.css' => DRUPAL_ROOT . '/core/themes/seven/css/layout/node-add.css',
+        'css/theme/appearance-page.css' => DRUPAL_ROOT . '/core/themes/seven/css/theme/appearance-page.css',
       ),
     ), $info->info['stylesheets']);
     $this->assertEquals(DRUPAL_ROOT . '/core/themes/seven/screenshot.png', $info->info['screenshot']);
diff --git a/core/themes/seven/css/seven.base.css b/core/themes/seven/css/base/elements.css
similarity index 94%
rename from core/themes/seven/css/seven.base.css
rename to core/themes/seven/css/base/elements.css
index bff4d6a..4039693 100644
--- a/core/themes/seven/css/seven.base.css
+++ b/core/themes/seven/css/base/elements.css
@@ -134,3 +134,10 @@ pre {
   margin: 0.5em 0;
   white-space: pre-wrap;
 }
+details {
+  line-height: 1.295em;
+}
+details summary {
+  padding-top: 0.5em;
+  padding-bottom: 0.5em;
+}
diff --git a/core/themes/seven/css/components/admin-list.css b/core/themes/seven/css/components/admin-list.css
new file mode 100644
index 0000000..5d0b63d
--- /dev/null
+++ b/core/themes/seven/css/components/admin-list.css
@@ -0,0 +1,46 @@
+/**
+ * Admin lists.
+ */
+ul.admin-list {
+  margin: 0;
+  padding: 0;
+}
+.admin-list li {
+  position: relative;
+  border-top: 1px solid #bfbfbf;
+  margin: 0;
+  list-style-type: none;
+  list-style-image: none;
+  padding: 0;
+}
+.admin-list.compact li {
+  border: none;
+}
+.admin-list li a {
+  background: url(../../../../misc/icons/bebebe/chevron-disc-right.svg) no-repeat 1px 16px; /* LTR */
+  display: block;
+  padding: 14px 15px 14px 25px; /* LTR */
+  min-height: 0;
+}
+[dir="rtl"] .admin-list li a {
+  background: url(../../../../misc/icons/bebebe/chevron-disc-left.svg) no-repeat right 16px;
+  padding-right: 25px;
+  padding-left: 15px;
+}
+.admin-list.compact li a {
+  background-image:  none;
+  padding: 2px 0;
+}
+.admin-list li a:hover,
+.admin-list li a:focus,
+.admin-list li a:active {
+  text-decoration: none;
+}
+.admin-list li a .label {
+  font-size: 1.0769em;
+}
+.admin-list li a:hover .label,
+.admin-list li a:focus .label,
+.admin-list li a:active .label {
+  text-decoration: underline;
+}
diff --git a/core/themes/seven/css/components/admin-options.css b/core/themes/seven/css/components/admin-options.css
new file mode 100644
index 0000000..75719634
--- /dev/null
+++ b/core/themes/seven/css/components/admin-options.css
@@ -0,0 +1,28 @@
+/* Update options. */
+div.admin-options {
+  background: #f8f8f8;
+  line-height: 30px;
+  height: 30px;
+  padding: 9px;
+  border: 1px solid #ccc;
+  margin: 0 0 10px;
+}
+div.admin-options label {
+  text-transform: uppercase;
+  font: 0.846em/1.875em "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", "Lucida Sans", sans-serif;
+}
+div.admin-options label,
+div.admin-options div.form-item {
+  margin-right: 10px; /* LTR */
+  float: left; /* LTR */
+}
+[dir="rtl"] div.admin-options label,
+[dir="rtl"] div.admin-options div.form-item {
+  margin-left: 10px;
+  margin-right: 0;
+  float: right;
+}
+div.admin-options div.form-item {
+  padding: 0;
+  border: 0;
+}
diff --git a/core/themes/seven/css/components/admin-panel.css b/core/themes/seven/css/components/admin-panel.css
new file mode 100644
index 0000000..fea149a
--- /dev/null
+++ b/core/themes/seven/css/components/admin-panel.css
@@ -0,0 +1,27 @@
+/**
+ * Admin panel.
+ */
+@media screen and (min-width: 40em) {
+  div.admin .right,
+  div.admin .left {
+    width: 49%;
+    margin: 0;
+  }
+}
+div.admin-panel,
+div.admin-panel .body {
+  padding: 0;
+  clear: left;
+}
+div.admin-panel {
+  margin: 0 0 20px;
+  padding: 9px;
+  background: #f8f8f8;
+  border: 1px solid #ccc;
+}
+div.admin-panel h3 {
+  font-size: 0.923em;
+  text-transform: uppercase;
+  margin: 0;
+  padding-bottom: 9px;
+}
diff --git a/core/themes/seven/css/components/block-recent-content.css b/core/themes/seven/css/components/block-recent-content.css
new file mode 100644
index 0000000..b2e6bea
--- /dev/null
+++ b/core/themes/seven/css/components/block-recent-content.css
@@ -0,0 +1,13 @@
+/**
+ * Recent content block.
+ */
+#block-node-recent table,
+#block-node-recent tr {
+  border: none;
+}
+#block-node-recent .more-link {
+  padding: 0 5px 5px 0; /* LTR */
+}
+[dir="rtl"] #block-node-recent .more-link {
+  padding: 0 0 5px 5px;
+}
diff --git a/core/themes/seven/css/components/branding.css b/core/themes/seven/css/components/branding.css
new file mode 100644
index 0000000..544e144
--- /dev/null
+++ b/core/themes/seven/css/components/branding.css
@@ -0,0 +1,11 @@
+/**
+ * Branding.
+ */
+#branding {
+  overflow: hidden;
+  background-color: #e0e0d8;
+  padding: 24px 0 0;
+}
+[dir="rtl"] #branding {
+  padding: 20px 20px 0 20px;
+}
diff --git a/core/themes/seven/css/components/breadcrumb.css b/core/themes/seven/css/components/breadcrumb.css
new file mode 100644
index 0000000..b55b027
--- /dev/null
+++ b/core/themes/seven/css/components/breadcrumb.css
@@ -0,0 +1,8 @@
+/**
+ * Breadcrumbs.
+ */
+.breadcrumb {
+  font-size: 0.846em;
+  line-height: 1em;
+  padding: 20px 0 10px 0;
+}
diff --git a/core/themes/seven/css/components/comments.css b/core/themes/seven/css/components/comments.css
new file mode 100644
index 0000000..63a8007
--- /dev/null
+++ b/core/themes/seven/css/components/comments.css
@@ -0,0 +1,3 @@
+div.submitted {
+  color: #898989;
+}
diff --git a/core/themes/seven/css/components/console.css b/core/themes/seven/css/components/console.css
new file mode 100644
index 0000000..f469a09
--- /dev/null
+++ b/core/themes/seven/css/components/console.css
@@ -0,0 +1,6 @@
+/**
+ * Console.
+ */
+#console {
+  margin: 9px 0 10px;
+}
diff --git a/core/themes/seven/css/dialog.theme.css b/core/themes/seven/css/components/dialog.theme.css
similarity index 93%
rename from core/themes/seven/css/dialog.theme.css
rename to core/themes/seven/css/components/dialog.theme.css
index c3d766c..e717906 100644
--- a/core/themes/seven/css/dialog.theme.css
+++ b/core/themes/seven/css/components/dialog.theme.css
@@ -34,7 +34,7 @@
   position: absolute;
 }
 .ui-dialog .ui-icon.ui-icon-closethick {
-  background: url(../../../misc/icons/ffffff/ex.svg) 0 0 no-repeat;
+  background: url(../../../../misc/icons/ffffff/ex.svg) 0 0 no-repeat;
   margin-top: -12px;
 }
 .ui-dialog .ui-widget-content.ui-dialog-content {
@@ -77,7 +77,7 @@
   top: 48.5%;
   z-index: 1000;
   background-color: #232323;
-  background-image: url(../../../misc/loading-small.gif);
+  background-image: url(../../../../misc/loading-small.gif);
   background-position: center center;
   background-repeat: no-repeat;
   border-radius: 7px;
diff --git a/core/themes/seven/css/components/entity-meta.css b/core/themes/seven/css/components/entity-meta.css
new file mode 100644
index 0000000..f218638
--- /dev/null
+++ b/core/themes/seven/css/components/entity-meta.css
@@ -0,0 +1,63 @@
+/**
+ * Entity meta settings.
+ */
+.entity-meta {
+  background-color: #ececec;
+  border-bottom: 0;
+  border-left: 1px solid #bfbfbf;
+  border-right: 1px solid #bfbfbf;
+  border-top: 0;
+  box-shadow: inset 0 0 5px rgba(0, 0, 0, .15);
+  margin-top: 0;
+  padding-top: 0;
+}
+.entity-meta-header,
+.entity-meta details {
+  background-color: #f7f7f7;
+  border-top: 1px solid #bfbfbf;
+  border-bottom: 1px solid #bfbfbf;
+}
+.entity-meta-header {
+  padding: 1em 1.5em;
+}
+.entity-meta-header .form-item {
+  margin: .25em 0;
+}
+.entity-meta-header .published {
+  font-size: 1.231em;
+  font-weight: bold;
+  text-shadow: 0 1px 0 #fff;
+}
+.entity-meta-header .changed {
+  font-style: italic; /* As-designed, but really: why is this italic? */
+}
+.entity-meta details {
+  border-left: 0;
+  border-right: 0;
+  border-top: 1px solid #ffffff;
+  margin: 0;
+}
+.entity-meta details[open] {
+  background-color: transparent;
+  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .125), transparent 4px);
+  background-image:    -moz-linear-gradient(top, rgba(0, 0, 0, .125), transparent 4px);
+  background-image:      -o-linear-gradient(top, rgba(0, 0, 0, .125), transparent 4px);
+  background-image:         linear-gradient(to bottom, rgba(0, 0, 0, .125), transparent 4px);
+  border-top-width: 0;
+  padding-top: 1px;
+}
+.entity-meta details[open] + [open] {
+  background-image: none;
+  border-top-width: 1px;
+  padding-top: 0;
+}
+.entity-meta details > .details-wrapper {
+  padding-top: 0;
+}
+.entity-meta details > summary {
+  padding: 0.85em 1.25em;
+  text-shadow: 0 1px 0 white;
+}
+.entity-meta details .summary {
+ display: none; /* Hide JS summaries. @todo Rethink summaries. */
+}
diff --git a/core/themes/seven/css/components/field-ui.css b/core/themes/seven/css/components/field-ui.css
new file mode 100644
index 0000000..e03f0ad
--- /dev/null
+++ b/core/themes/seven/css/components/field-ui.css
@@ -0,0 +1,20 @@
+/* Field UI */
+#field-display-overview input.field-plugin-settings-edit {
+  margin: 0;
+  padding: 1px 8px;
+}
+#field-display-overview tr.field-plugin-settings-changed {
+  background: #ffffbb;
+}
+#field-display-overview tr.drag {
+  background: #ffee77;
+}
+#field-display-overview tr.field-plugin-settings-editing {
+  background: #d5e9f2;
+}
+#field-display-overview .field-plugin-settings-edit-form .form-item {
+  margin: 10px 0;
+}
+#field-display-overview .field-plugin-settings-edit-form .form-submit {
+  margin-bottom: 0;
+}
diff --git a/core/themes/seven/css/components/form.css b/core/themes/seven/css/components/form.css
new file mode 100644
index 0000000..fe9af0b
--- /dev/null
+++ b/core/themes/seven/css/components/form.css
@@ -0,0 +1,306 @@
+/**
+ * Form elements.
+ */
+form {
+  margin: 0;
+  padding: 0;
+}
+fieldset {
+  margin: 1em 0;
+}
+.fieldgroup {
+  min-width: 0;
+}
+@-moz-document url-prefix() {
+  .fieldgroup {
+    display: table-cell;
+  }
+}
+.form-item {
+  margin: 0.75em 0;
+}
+.form-type-checkbox {
+  padding: 0;
+}
+label {
+  display: table;
+  margin: 0 0 0 0.2em; /* LTR */
+  padding: 0;
+  font-weight: bold;
+}
+[dir="rtl"] label {
+  margin: 0 0.2em 0 0;
+}
+label.error {
+  color: #a51b00;
+}
+label[for] {
+  cursor: pointer;
+}
+.form-item label.option {
+  text-transform: none;
+}
+.form-item label.option input {
+  vertical-align: middle;
+}
+.form-disabled label {
+  color: #737373;
+}
+
+.form-disabled input.form-text,
+.form-disabled input.form-tel,
+.form-disabled input.form-email,
+.form-disabled input.form-url,
+.form-disabled input.form-search,
+.form-disabled input.form-number,
+.form-disabled input.form-color,
+.form-disabled input.form-file,
+.form-disabled textarea.form-textarea,
+.form-disabled select.form-select {
+  border-color: #d4d4d4;
+  background-color: hsla(0, 0%, 0%, .08);
+  box-shadow: none;
+}
+
+.form-item input.error,
+.form-item textarea.error,
+.form-item select.error {
+  border-width: 2px;
+  border-color: #e62600;
+  background-color: hsla(15, 75%, 97%, 1);
+  box-shadow: inset 0 5px 5px -5px #b8b8b8;
+  color: #a51b00;
+}
+.form-item input.error:focus,
+.form-item textarea.error:focus,
+.form-item select.error:focus {
+  border-color: #e62600;
+  outline: 0;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 0 8px 1px #e62600;
+  background-color: #fcf4f2;
+}
+.form-required:after {
+  font-weight: bold;
+  color: #e62600;
+  font-size: 1.1em;
+  padding-left: 2px;
+}
+
+
+/* Filter */
+.filter-wrapper {
+  font-size: 0.923em;
+}
+ul.tips,
+div.description,
+.form-item .description {
+  margin: 0.2em 0 0 0;
+  color: #595959;
+  font-size: 0.9em;
+}
+.form-item .description.error {
+  color: #a51b00;
+}
+
+ul.tips li {
+  margin: 0.25em 0 0.25em 1.5em; /* LTR */
+}
+[dir="rtl"] ul.tips li {
+  margin: 0.25em 1.5em 0.25em 0;
+}
+.form-type-radio .description,
+.form-type-checkbox .description {
+  margin-left: 1.5em; /* LTR */
+}
+[dir="rtl"] .form-type-radio .description,
+[dir="rtl"] .form-type-checkbox .description {
+  margin-left: 0;
+  margin-right: 1.5em;
+}
+.form-text,
+.form-textarea {
+  border-radius: 2px;
+  font-size: 1em;
+  line-height: normal;
+}
+
+input.form-autocomplete,
+input.form-text,
+input.form-tel,
+input.form-email,
+input.form-url,
+input.form-search,
+input.form-number,
+input.form-color,
+input.form-file,
+input.form-date,
+input.form-time,
+textarea.form-textarea {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing:    border-box;
+  box-sizing:         border-box;
+  padding: .3em .4em .3em .5em;
+  max-width: 100%;
+  border: 1px solid #b8b8b8;
+  border-top-color: #999;
+  background: #fff;
+  color: #333;
+  border-radius: 2px;
+  background: #fcfcfa;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .125);
+  font-size: 1em;
+  color: #595959;
+  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+  -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
+  transition: border linear 0.2s, box-shadow linear 0.2s;
+}
+.form-text:focus,
+.form-tel:focus,
+.form-email:focus,
+.form-url:focus,
+.form-search:focus,
+.form-number:focus,
+.form-color:focus,
+.form-file:focus,
+.form-textarea:focus,
+.form-date:focus,
+.form-time:focus {
+  border-color: #40b6ff;
+  outline: 0;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 0 8px #40b6ff;
+  background-color: #fff;
+}
+
+.confirm-parent,
+.password-parent {
+  overflow: visible;
+  width: auto;
+}
+
+.form-item .password-suggestions {
+  float: left; /* LTR */
+  clear: left;
+  width: 100%;
+}
+[dir="rtl"] .form-item .password-suggestions {
+  float: right;
+}
+.form-item-pass .description {
+  clear: both;
+}
+
+
+/**
+ * Select elements - Webkit only
+ */
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  select {
+    cursor: pointer;
+    -webkit-appearance: none;
+    padding: 1px 1.571em 1px 0.5em; /* LTR */
+    border: 1px solid #a6a6a6;
+    border-radius: 0.143em;
+    background:
+      url(../../../../misc/icons/333333/caret-down.svg) no-repeat 99% 63%,
+      -webkit-linear-gradient(top, #f6f6f3, #e7e7df); /* LTR */
+    text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
+    font-size: 0.875rem;
+    transition: all 0.1s;
+    -webkit-font-smoothing: antialiased;
+  }
+  [dir="rtl"] select {
+    padding: 1px 0.714em 1px 1.571em;
+    background-position: 1% 63%, 0 0;
+  }
+  select:focus,
+  select:hover {
+    background-image: url(../../../../misc/icons/333333/caret-down.svg"),
+    -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
+    color: #1a1a1a;
+  }
+  select:hover {
+    box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
+  }
+}
+
+/**
+ * Improve spacing of cancel link.
+ */
+#edit-cancel {
+  margin-left: 10px; /* LTR */
+}
+[dir="rtl"] #edit-cancel {
+  margin-left: 0;
+  margin-right: 10px;
+}
+
+/**
+ * Improve form element usability on narrow devices.
+ */
+@media screen and (max-width: 600px) {
+  input.form-autocomplete,
+  input.form-text,
+  input.form-tel,
+  input.form-email,
+  input.form-url,
+  input.form-search,
+  input.form-number,
+  input.form-color,
+  input.form-file,
+  textarea.form-textarea {
+    width: 100%;
+    font-size: 1.2em;
+    line-height: 1.2em;
+  }
+  input.form-number {
+    width: auto;
+  }
+  .form-actions input,
+  .form-wrapper input[type="submit"] {
+    float: none;
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 10px;
+    padding-bottom: 6px;
+    width: 100%;
+  }
+  .form-actions input:first-child,
+  .form-wrapper input[type="submit"]:first-child {
+    margin-top: 0;
+  }
+  .exposed-filters .filters,
+  .exposed-filters .form-item label,
+  .exposed-filters .form-select {
+    float: none;
+    margin-bottom: 2px;
+    width: 100%;
+  }
+  details summary {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+  }
+  .password-strength {
+    width: 100%;
+  }
+  div.form-item div.password-suggestions {
+    float: none;
+  }
+  #dblog-filter-form .form-actions {
+    float: none;
+    padding: 0;
+  }
+  #edit-cancel {
+    display: block;
+    margin: 10px 0 0 0;
+  }
+}
+
+/* Exceptions */
+#diff-inline-form select,
+div.filter-options select {
+  padding: 0;
+}
diff --git a/core/themes/seven/css/components/help.css b/core/themes/seven/css/components/help.css
new file mode 100644
index 0000000..b07b59f
--- /dev/null
+++ b/core/themes/seven/css/components/help.css
@@ -0,0 +1,15 @@
+/**
+ * Help.
+ */
+#help {
+  font-size: 0.923em;
+}
+#help p {
+  margin: 0 0 10px;
+}
+#help div.more-help-link {
+  text-align: right; /* LTR */
+}
+[dir="rtl"] #help div.more-help-link {
+  text-align: left;
+}
diff --git a/core/themes/seven/css/jquery.ui.theme.css b/core/themes/seven/css/components/jquery.ui.theme.css
similarity index 96%
rename from core/themes/seven/css/jquery.ui.theme.css
rename to core/themes/seven/css/components/jquery.ui.theme.css
index 89089d8..46760ba 100644
--- a/core/themes/seven/css/jquery.ui.theme.css
+++ b/core/themes/seven/css/components/jquery.ui.theme.css
@@ -65,26 +65,26 @@
   height: 16px;
   overflow: hidden;
   background-repeat: no-repeat;
-  background-image: url(../images/ui-icons-222222-256x240.png);
+  background-image: url(../../images/ui-icons-222222-256x240.png);
 }
 .ui-widget-content .ui-icon,
 .ui-widget-header .ui-icon {
-  background-image: url(../images/ui-icons-222222-256x240.png);
+  background-image: url(../../images/ui-icons-222222-256x240.png);
 }
 .ui-state-default .ui-icon {
-  background-image: url(../images/ui-icons-888888-256x240.png);
+  background-image: url(../../images/ui-icons-888888-256x240.png);
 }
 .ui-state-hover .ui-icon,
 .ui-state-focus .ui-icon,
 .ui-state-active .ui-icon {
-  background-image: url(../images/ui-icons-454545-256x240.png);
+  background-image: url(../../images/ui-icons-454545-256x240.png);
 }
 .ui-state-highlight .ui-icon {
-  background-image: url(../images/ui-icons-800000-256x240.png);
+  background-image: url(../../images/ui-icons-800000-256x240.png);
 }
 .ui-state-error .ui-icon,
 .ui-state-error-text .ui-icon {
-  background-image: url(../images/ui-icons-ffffff-256x240.png);
+  background-image: url(../../images/ui-icons-ffffff-256x240.png);
 }
 .ui-widget p .ui-icon {
   margin: 2px 3px 0 0;
@@ -364,7 +364,7 @@
   height: 1.4em;
 }
 .ui-progressbar .ui-progressbar-value {
-  background: #0072b9 url(../../../misc/progress.gif);
+  background: #0072b9 url(../../../../misc/progress.gif);
   height: 1.5em;
 }
 
diff --git a/core/themes/seven/css/components/menus-and-lists.css b/core/themes/seven/css/components/menus-and-lists.css
new file mode 100644
index 0000000..bd2d908
--- /dev/null
+++ b/core/themes/seven/css/components/menus-and-lists.css
@@ -0,0 +1,41 @@
+/**
+ * Menus and lists.
+ */
+.item-list ul {
+  list-style-type: disc;
+  list-style-image: none;
+  margin: 0.25em 0 0.25em 1.5em; /* LTR */
+}
+[dir="rtl"] .item-list ul {
+  margin: 0.25em 1.5em 0.25em 0;
+}
+.item-list ul li,
+li.leaf,
+ul.menu li {
+  list-style-type: disc;
+  list-style-image: none;
+}
+ul.menu li {
+  margin: 0;
+}
+.item-list ul li.collapsed,
+ul.menu li.collapsed {
+  list-style-image: url(../../../../misc/menu-collapsed.png);
+  list-style-type: disc;
+}
+.item-list ul li.expanded,
+ul.menu li.expanded {
+  list-style-image: url(../../../../misc/menu-expanded.png);
+  list-style-type: circle;
+}
+ul.links li,
+ul.inline li {
+  padding-right: 1em; /* LTR */
+}
+[dir="rtl"] ul.links li,
+[dir="rtl"] ul.inline li {
+  padding-left: 1em;
+}
+ul.inline li {
+  display: inline;
+}
diff --git a/core/themes/seven/css/components/modules-page.css b/core/themes/seven/css/components/modules-page.css
new file mode 100644
index 0000000..f05a916
--- /dev/null
+++ b/core/themes/seven/css/components/modules-page.css
@@ -0,0 +1,47 @@
+/* Modules page */
+#system-modules fieldset {
+  border: 0;
+  border-top: 1px solid #ccc;
+}
+#system-modules details {
+  border: 0;
+  margin: 0;
+  padding: 0;
+}
+#system-modules summary {
+  border-bottom: 1px solid #ccc;
+}
+#system-modules [open] summary {
+  border-bottom: none;
+}
+#system-modules .details-wrapper {
+  padding: 0 0 0.5em 0;
+}
+#system-modules .fieldset-wrapper {
+  padding: 0;
+}
+#system-modules table,
+#locale-translation-status-form table {
+  border: 0;
+}
+#system-modules tr.even,
+#system-modules tr.odd,
+#locale-translation-status-form tr.even,
+#locale-translation-status-form tr.odd {
+  background: #f3f4ee;
+  border: 0;
+  border-bottom: 10px solid #fff;
+}
+#system-modules tr td:last-child,
+#locale-translation-status-form tr td:last-child {
+  border: 0;
+}
+#system-modules table th,
+#locale-translation-status-form table th {
+  border: 0;
+  border-bottom: 10px solid #fff;
+}
+#system-modules .sticky-header th,
+#locale-translation-status-form .sticky-header th {
+  border: 0;
+}
diff --git a/core/themes/seven/css/components/node.css b/core/themes/seven/css/components/node.css
new file mode 100644
index 0000000..037d0e0
--- /dev/null
+++ b/core/themes/seven/css/components/node.css
@@ -0,0 +1,3 @@
+.node__submitted {
+  margin: 1em 0;
+}
diff --git a/core/themes/seven/css/components/page-title.css b/core/themes/seven/css/components/page-title.css
new file mode 100644
index 0000000..4f2c1cf
--- /dev/null
+++ b/core/themes/seven/css/components/page-title.css
@@ -0,0 +1,18 @@
+/**
+ * Page title.
+ */
+#page-title {
+  padding-top: 20px;
+}
+#branding .page-title {
+  color: #333;
+  display: inline-block;
+  margin: 0;
+  font-size: 1.625em;
+  line-height: 1.875em;
+  font-weight: 600;
+  -webkit-font-smoothing: antialiased;
+}
+[dir="rtl"] #branding h1.page-title {
+  float: right;
+}
diff --git a/core/themes/seven/css/components/pager.css b/core/themes/seven/css/components/pager.css
new file mode 100644
index 0000000..a28e76e
--- /dev/null
+++ b/core/themes/seven/css/components/pager.css
@@ -0,0 +1,47 @@
+/**
+ * Pagination.
+ * The item-list CSS uses quite strong selectors, we have to match them here to
+ * override.
+ */
+.item-list .pager li {
+  display: inline-block;
+  color: #8c8c8c;
+  font-size: 1.08em;
+  padding: 0 0.6em;
+  margin: 0;
+}
+.item-list .pager a,
+.item-list .pager .pager-current {
+  border-bottom: 2px solid transparent;
+  line-height: 1.55em;
+  padding: 0 5px;
+  text-decoration: none;
+  -webkit-transition: border-bottom-color 0.2s;
+  -moz-transition: border-bottom-color 0.2s;
+  transition: border-bottom-color 0.2s;
+  font-weight: 600;
+  -webkit-font-smoothing: antialiased;
+}
+.item-list .pager a {
+  padding-bottom: 3px;
+}
+.item-list .pager .pager-current {
+  border-bottom-width: 3px;
+  border-bottom-color: #2a678c;
+  color: #2a678c;
+  margin: 0 5px;
+  font-weight: 700;
+}
+.item-list .pager a:focus,
+.item-list .pager a:hover {
+  border-bottom-color: #3395d2;
+  color: #3395d2;
+}
+.item-list .pager-next a,
+.item-list .pager-last a,
+.item-list .pager-first a,
+.item-list .pager-previous a {
+  border-bottom-width: 0;
+  color: #2a678c;
+  font-weight: 600;
+}
diff --git a/core/themes/seven/css/quickedit.css b/core/themes/seven/css/components/quickedit.css
similarity index 100%
rename from core/themes/seven/css/quickedit.css
rename to core/themes/seven/css/components/quickedit.css
diff --git a/core/themes/seven/css/components/skip-link.css b/core/themes/seven/css/components/skip-link.css
new file mode 100644
index 0000000..ce0793c
--- /dev/null
+++ b/core/themes/seven/css/components/skip-link.css
@@ -0,0 +1,42 @@
+/**
+ * Skip link.
+ */
+.skip-link {
+  margin-top: 0;
+  position: absolute;
+  left: 50%; /* LTR */
+  margin-left: -5.25em; /* LTR */
+  width: auto;
+  z-index: 50;
+}
+[dir="rtl"] .skip-link {
+  right: 50%;
+  margin-right: -5.25em;
+}
+.skip-link,
+.skip-link:link,
+.skip-link:visited {
+  display: inline-block;
+  background: #444;
+  color: #fff;
+  font-size: 0.94em;
+  padding: 1px 10px 2px 10px; /* LTR */
+  text-decoration: none;
+  border-radius: 0 0 10px 10px;
+}
+[dir="rtl"] .skip-link,
+[dir="rtl"] .skip-link:link,
+[dir="rtl"] .skip-link:visited {
+  padding: 1px 10px 2px 10px;
+}
+.skip-link:hover,
+.skip-link:focus,
+.skip-link:active {
+  outline: 0;
+}
+.skip-link.visually-hidden.focusable:active,
+.skip-link.visually-hidden.focusable:focus,
+.skip-link.visually-hidden.focusable:hover
+{
+  position: absolute !important;
+}
diff --git a/core/themes/seven/css/components/tables.css b/core/themes/seven/css/components/tables.css
new file mode 100644
index 0000000..7ad41eb
--- /dev/null
+++ b/core/themes/seven/css/components/tables.css
@@ -0,0 +1,159 @@
+/**
+ * Tables.
+ */
+table {
+  width: 100%;
+  margin: 0 0 10px;
+  font-size: 0.923em;
+}
+caption {
+  text-align: left; /* LTR */
+}
+[dir="rtl"] caption {
+  text-align: right;
+}
+th {
+  text-align: left; /* LTR */
+  padding: 10px 12px;
+}
+[dir="rtl"] th {
+  text-align: right;
+}
+thead th {
+  background: #f5f5f2;
+  border: solid #bfbfba;
+  border-width: 1px 0;
+  color: #333;
+  text-transform: uppercase;
+}
+tr {
+  border-bottom: 1px solid #e6e4df;
+  padding: 0.1em 0.6em;
+}
+thead > tr {
+  border-bottom: 1px solid #000;
+}
+tbody tr:hover {
+  background: #f7fcff;
+}
+td,
+th {
+  vertical-align: top;
+}
+td {
+  padding: 10px 12px;
+  text-align: left; /* LTR */
+}
+[dir="rtl"] td {
+  text-align: right;
+}
+th > a {
+  position: relative;
+  display: block;
+}
+
+/* 1. Must match negative bottom padding of the parent <th> */
+th > a:after {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: -10px; /* 1. */
+  left: 0;
+  right: 0;
+  border-bottom: 2px solid transparent;
+  transition: all 0.1s;
+}
+th.active > a {
+  color: #004875;
+}
+th.active img {
+  position: absolute;
+  right: 0; /* LTR */
+  top: 50%;
+}
+[dir="rtl"] th.active img {
+  right: auto;
+  left: 0;
+}
+th.active > a:after {
+  border-bottom-color: #004875;
+}
+th > a:focus,
+th > a:hover,
+th.active > a:focus,
+th.active > a:hover {
+  color: #008ee6;
+  text-decoration: none;
+}
+th > a:focus:after,
+th > a:hover:after,
+th.active > a:focus:after,
+th.active > a:hover:after {
+  border-bottom-color: #008ee6;
+}
+td .item-list ul {
+  margin: 0;
+}
+td.active {
+  background: none;
+}
+
+/* Force browsers to calculate the width of a 'select all' TH element. */
+th.select-all {
+  width: 1px;
+}
+
+/**
+ * Captions.
+ */
+.caption {
+  margin-bottom: 1.2em;
+}
+
+/**
+ * Status report table.
+ */
+table.system-status-report tr {
+  border-top: 1px solid #ccc;
+  border-left: 1px solid #bebfb9;
+  border-right: 1px solid #bebfb9;
+  border-bottom: inherit;
+}
+table.system-status-report tr:first-child {
+  border-top: 1px solid #bebfb9;
+}
+table.system-status-report tr:last-child {
+  border-bottom: 1px solid #bebfb9;
+}
+
+table.system-status-report tr.ok {
+  color: #255b1e;
+  background-color: #e5ffe2;
+}
+table.system-status-report tr.warning {
+  color: #840;
+  background-color: #fffce5;
+}
+table.system-status-report tr.error {
+  color: #8c2e0b;
+  background-color: #fef5f1;
+}
+
+/**
+ * Responsive tables.
+ */
+@media screen and (max-width: 37.5em) { /* 600px */
+  th.priority-low,
+  td.priority-low,
+  th.priority-medium,
+  td.priority-medium {
+    display: none;
+  }
+}
+@media screen and (max-width: 60em) { /* 920px */
+  th.priority-low,
+  td.priority-low {
+    display: none;
+  }
+}
diff --git a/core/themes/seven/css/components/tabs.css b/core/themes/seven/css/components/tabs.css
new file mode 100644
index 0000000..db5cced
--- /dev/null
+++ b/core/themes/seven/css/components/tabs.css
@@ -0,0 +1,283 @@
+/**
+ * Tabs.
+ */
+.is-collapse-enabled  .tabs,
+.is-horizontal .tabs {
+  position: relative;
+}
+.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;
+}
+
+/* Span the full width of the viewport */
+#branding .is-horizontal .tabs:before,
+#branding .is-collapse-enabled .tabs:before {
+  left: -2.5em;
+  right: -2.5em;
+}
+
+/**
+ * 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;
+  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;
+}
+.tabs__tab:hover {
+  color: #008ee6;
+  background-color: #fafaf7;
+}
+li.tabs__tab {
+  padding: 0;
+}
+li.tabs__tab a {
+  padding: 9px 2em 7px 1em;
+}
+.tabs a:hover,
+.tabs a:focus {
+  text-decoration: none;
+}
+
+/* Primary tabs */
+.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;
+}
+.tabs.primary a {
+  background: none;
+}
+.tabs.primary a:focus {
+  color: #008ee6;
+  background-color: #fafaf7;
+  text-decoration: underline;
+}
+.tabs.primary .active a:focus {
+  background: none;
+  text-decoration: underline;
+}
+
+/* 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;
+  }
+  [dir="rtl"] .tabs.primary a {
+    background: url(../../../../misc/icons/0074bd/chevron-left.svg) 1% center no-repeat;
+  }
+  .tabs.primary .tabs__tab.active a {
+    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"] .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;
+}
+.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;
+}
+[dir="rtl"] .is-horizontal .tabs__tab {
+  float: right;
+}
+.is-horizontal .tabs__tab + .tabs__tab {
+  margin-left: -1px;
+}
+.is-horizontal .tabs.primary .tabs__tab:first-child {
+  border-radius: 4px 0 0 0;
+}
+[dir="rtl"] .is-horizontal .tabs.primary .tabs__tab:first-child {
+  border-radius: 0 4px 0 0;
+}
+.is-horizontal .tabs.primary .tabs__tab:last-child {
+  border-radius: 0 4px 0 0;
+}
+[dir="rtl"] .is-horizontal .tabs.primary .tabs__tab:last-child {
+  border-radius: 4px 0 0 0;
+}
+
+/* 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;
+}
+
+/* Secondary tabs */
+.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;
+  -webkit-transition: border-color 0.2s, background-color 0.2s;
+  -moz-transition: border-color 0.2s, background-color 0.2s;
+  transition: border-color 0.2s, background-color 0.2s;
+}
+.tabs.secondary .tabs__tab + .tabs__tab {
+  border-top: 1px solid #d9d8d4;
+}
+.tabs.secondary .tabs__tab.active {
+  color: #004f80;
+  border-left: 2px solid #004f80;
+  padding-left: 15px;
+}
+.tabs.secondary .tabs__tab:hover {
+  color: #008ee6;
+  border-left: 2px solid #008ee6;
+  padding-left: 15px;
+}
+.tabs.secondary a {
+  background-color: transparent;
+  padding: 7px 13px 5px;
+  text-decoration: none;
+}
+.tabs.secondary .active a {
+  color: #004f80;
+}
+.tabs.secondary a:focus {
+  text-decoration: underline;
+}
+
+/* Styles for the horizontal state */
+.is-horizontal .tabs.secondary .tabs__tab {
+  background: none;
+  float: left;
+  position: relative;
+  top: 0;
+  z-index: 15;
+  margin-left: 1em;
+  margin-right: 1em;
+  border-bottom: 2px solid transparent;
+  border-left: 1px solid 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:hover {
+  border-bottom-color: #008ee6;
+}
diff --git a/core/themes/seven/css/components/update-status.css b/core/themes/seven/css/components/update-status.css
new file mode 100644
index 0000000..e02012a
--- /dev/null
+++ b/core/themes/seven/css/components/update-status.css
@@ -0,0 +1,4 @@
+/* Update status */
+.versions table.version {
+  border: none;
+}
diff --git a/core/themes/seven/css/vertical-tabs.css b/core/themes/seven/css/components/vertical-tabs.css
similarity index 100%
rename from core/themes/seven/css/vertical-tabs.css
rename to core/themes/seven/css/components/vertical-tabs.css
diff --git a/core/themes/seven/css/components/views-ui.css b/core/themes/seven/css/components/views-ui.css
new file mode 100644
index 0000000..ed33366
--- /dev/null
+++ b/core/themes/seven/css/components/views-ui.css
@@ -0,0 +1,302 @@
+/**
+ * Views styling
+ */
+
+/* @group Forms */
+
+/**
+ * Seven positions the summary absolutely, but does not have a way to ignore
+ * details without a summary so we make one up.
+ *
+ * @todo Neither a fieldset without legend nor a details without summary is
+ *   valid HTML markup in any way. Refactor Views UI to not produce such invalid
+ *   markup.
+ */
+details.fieldset-no-legend {
+  padding-top: 0;
+}
+
+/**
+ * Being extra safe here and scoping this to the add view wizard form (where
+ * a layout problem occurs for the Display format details if we don't fix its
+ * padding), but it's probably safe to just let it apply everywhere.
+ */
+#views-ui-add-form details details .details-wrapper {
+  padding-left: 0;
+  padding-right: 0;
+}
+
+.views-display-tab details.box-padding .details-wrapper {
+  padding: 0;
+}
+
+.views-admin .form-item label.option,
+#views-ui-preview-form .form-item label.option {
+  font-size: 1em;
+}
+
+.views-admin input.form-submit,
+.views-ui-dialog input.form-submit,
+.views-admin a.button,
+.views-ui-dialog a.button {
+  margin-bottom: 0;
+  margin-right: 0; /* LTR */
+  margin-top: 0;
+}
+[dir="rtl"] .views-admin input.form-submit,
+[dir="rtl"] .views-ui-dialog input.form-submit,
+[dir="rtl"] .views-admin a.button,
+[dir="rtl"] .views-ui-dialog a.button {
+  margin-left: 0;
+}
+
+/* Override for a button on the edit display screen */
+#edit-displays-preview-controls .form-submit {
+  display: inline-block;
+  margin-right: 1em;
+}
+
+.form-radios > .form-item {
+  margin-top: 3px;
+}
+
+/* @group Dependent options
+ */
+
+/* This is necessary to supercede the Seven .form-item
+ * reset declaration that sets the margin to zero.
+ */
+.form-item-options-expose-required,
+.form-item-options-expose-label,
+.form-item-options-expose-description {
+  margin-left: 1.5em;
+}
+
+.views-admin-dependent .form-item .form-item,
+.views-admin-dependent .form-type-checkboxes,
+.views-admin-dependent .form-type-radios,
+.views-admin-dependent .form-item .form-item,
+.form-item-options-expose-required,
+.form-item-options-expose-label,
+.form-item-options-expose-description {
+  margin-bottom: 6px;
+  margin-top: 6px;
+}
+
+.views-admin-dependent .form-type-radio,
+.views-admin-dependent .form-radios .form-item {
+  margin-bottom: 2px;
+  margin-top: 2px;
+}
+
+/* @end */
+
+/* @group Lists */
+
+.views-admin ul.secondary,
+.views-admin .item-list ul {
+  margin: 0;
+  padding: 0;
+}
+
+.views-displays ul.secondary li a,
+.views-displays ul.secondary li.active a,
+.views-displays ul.secondary li.active a.active {
+  padding: 2px 7px 3px;
+}
+
+.views-displays ul.secondary li a {
+  color: #0074bd;
+}
+
+.views-displays ul.secondary li.active a,
+.views-displays ul.secondary li.active a.active {
+  border: 1px solid transparent;
+}
+
+.views-admin .links li {
+  padding-right: 0; /* LTR */
+}
+[dir="rtl"] .views-admin .links li {
+  padding-left: 0;
+}
+
+.views-admin .button .links li {
+  padding-right: 12px; /* LTR */
+}
+[dir="rtl"] .views-admin .button .links li {
+  padding-left: 12px;
+}
+
+.views-display-top ul.secondary {
+  background-color: transparent;
+  float: left
+}
+
+.views-display-top .secondary .action-list li {
+  float: none;
+  margin: 0;
+}
+
+/* @end */
+
+/* @group Tables */
+
+.views-ui-rearrange-filter-form table td,
+.views-ui-rearrange-filter-form table th {
+  vertical-align: top;
+}
+
+/* @end */
+
+/* @group Attachment details */
+
+#edit-display-settings-title {
+  color: #008BCB;
+}
+
+/* @end */
+
+/* @group Attachment details tabs
+ *
+ * The tabs that switch between sections
+ */
+
+.views-displays .secondary {
+ text-align: left; /* LTR */
+}
+[dir="rtl"] .views-displays .secondary {
+  text-align: right;
+}
+
+.views-admin .icon.add {
+  background-position: center 3px;
+}
+
+.views-displays .secondary a:hover > .icon.add {
+  background-position: center -25px;
+}
+
+.views-displays .secondary .open > a {
+  border-radius: 7px 7px 0 0;
+}
+
+.views-displays .secondary .open > a:hover {
+  background-color: #f1f1f1;
+  color: #008BCB;
+}
+
+.views-displays .secondary .action-list  li:first-child {
+  border-radius: 0 7px 0 0;
+}
+
+.views-displays .secondary .action-list  li:last-child {
+  border-radius: 0 0 7px 7px;
+}
+
+.views-displays .secondary .action-list input.form-submit {
+  color: #008bcb;
+}
+
+/* @end */
+
+/* @group Attachment buckets
+ *
+ * These are the individual "buckets," or boxes, inside the display settings area
+ */
+
+.views-ui-display-tab-bucket h3 {
+  font-size: 12px;
+  text-transform: uppercase;
+}
+
+.views-ui-display-tab-bucket .links {
+  padding: 2px 6px 4px;
+}
+
+.views-ui-display-tab-bucket .links li + li {
+  margin-left: 3px;
+}
+
+/* @end */
+
+/* @group Rearrange filter criteria */
+
+#views-ui-rearrange-filter-form .action-links {
+  margin: 0;
+  padding: 0;
+}
+
+#views-ui-rearrange-filter-form table {
+  border: medium none;
+}
+
+#views-ui-rearrange-filter-form [id^="views-row"] {
+  border: medium none;
+}
+
+#views-ui-rearrange-filter-form tr td:last-child {
+  border-right: medium none;
+}
+
+#views-ui-rearrange-filter-form .filter-group-operator-row {
+  border-left: 1px solid transparent !important;
+  border-right: 1px solid transparent !important;
+}
+
+#views-ui-rearrange-filter-form tr.drag td {
+  background-color: #FFEE77 !important;
+}
+
+#views-ui-rearrange-filter-form tr.drag-previous td {
+  background-color: #FFFFBB !important;
+}
+
+/* @end */
+
+/* @group Live preview elements */
+
+.views-query-info pre {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+/* @group Query info table */
+
+.views-query-info table {
+  border-radius: 7px;
+  -webkit-border-horizontal-spacing: 1px;
+  -webkit-border-vertical-spacing: 1px;
+}
+
+.views-query-info table tr td:last-child {
+  /* Fixes a Seven style that bleeds down into this table unnecessarily */
+  border-right: 0 none;
+}
+
+/* @end */
+
+/* @end */
+
+/* @group Add view */
+
+.form-item-page-create,
+.form-item-block-create {
+  margin-top: 13px;
+}
+
+/* @end */
+
+/* @group Modal dialog box
+ *
+ * The contents of the popup dialog on the views edit form.
+ */
+
+.filterable-option .form-item.form-type-checkbox {
+  /* This selector is aggressive because Seven's reset for .form-items is aggressive. */
+  padding-bottom: 4px;
+  padding-left: 4px;
+  padding-top: 4px;
+}
+
+/* @end */
diff --git a/core/themes/seven/css/layout.css b/core/themes/seven/css/layout/layout.css
similarity index 100%
rename from core/themes/seven/css/layout.css
rename to core/themes/seven/css/layout/layout.css
diff --git a/core/themes/seven/css/layout/node-add.css b/core/themes/seven/css/layout/node-add.css
new file mode 100644
index 0000000..6bbe892
--- /dev/null
+++ b/core/themes/seven/css/layout/node-add.css
@@ -0,0 +1,33 @@
+/**
+ * Widescreen
+ *
+ * Both of the following media queries must *exactly* match what is in
+ * node.module.css. This is rather crazy.
+ *
+ * @todo Figure out how to reduce media query duplication across files
+ *       and modules. Layout styles only allowed in themes?
+ */
+@media
+  screen and (min-width: 780px),
+  (orientation: landscape) and (min-device-height: 780px) {
+
+  [class*="page-node-add-"] .messages,
+  .page-node-edit .messages {
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+}
+@media
+  screen and (max-width: 1020px),
+  (orientation: landscape) and (max-device-height: 1020px) {
+
+  .toolbar-vertical .block-list-secondary,
+  .toolbar-vertical .layout-region-node-secondary {
+    margin-bottom: 0;
+    padding-bottom: 0;
+    display: block;
+  }
+  .toolbar-vertical .layout-node-form:after {
+    display: none;
+  }
+}
diff --git a/core/themes/seven/css/style.css b/core/themes/seven/css/style.css
deleted file mode 100644
index aa78e66..0000000
--- a/core/themes/seven/css/style.css
+++ /dev/null
@@ -1,1583 +0,0 @@
-/**
- * Menus and lists.
- */
-.item-list ul {
-  list-style-type: disc;
-  list-style-image: none;
-  margin: 0.25em 0 0.25em 1.5em; /* LTR */
-}
-[dir="rtl"] .item-list ul {
-  margin: 0.25em 1.5em 0.25em 0;
-}
-.item-list ul li,
-li.leaf,
-ul.menu li {
-  list-style-type: disc;
-  list-style-image: none;
-}
-ul.menu li {
-  margin: 0;
-}
-.item-list ul li.collapsed,
-ul.menu li.collapsed {
-  list-style-image: url(../../../misc/menu-collapsed.png);
-  list-style-type: disc;
-}
-.item-list ul li.expanded,
-ul.menu li.expanded {
-  list-style-image: url(../../../misc/menu-expanded.png);
-  list-style-type: circle;
-}
-/**
- * Skip link.
- */
-.skip-link {
-  margin-top: 0;
-  position: absolute;
-  left: 50%; /* LTR */
-  margin-left: -5.25em; /* LTR */
-  width: auto;
-  z-index: 50;
-}
-[dir="rtl"] .skip-link {
-  right: 50%;
-  margin-right: -5.25em;
-}
-.skip-link,
-.skip-link:link,
-.skip-link:visited {
-  display: inline-block;
-  background: #444;
-  color: #fff;
-  font-size: 0.94em;
-  padding: 1px 10px 2px 10px; /* LTR */
-  text-decoration: none;
-  border-radius: 0 0 10px 10px;
-}
-[dir="rtl"] .skip-link,
-[dir="rtl"] .skip-link:link,
-[dir="rtl"] .skip-link:visited {
-  padding: 1px 10px 2px 10px;
-}
-.skip-link:hover,
-.skip-link:focus,
-.skip-link:active {
-  outline: 0;
-}
-.skip-link.visually-hidden.focusable:active,
-.skip-link.visually-hidden.focusable:focus,
-.skip-link.visually-hidden.focusable:hover
-{
-  position: absolute !important;
-}
-
-/**
- * Branding.
- */
-#branding {
-  overflow: hidden;
-  background-color: #e0e0d8;
-  padding: 24px 0 0;
-}
-[dir="rtl"] #branding {
-  padding: 20px 20px 0 20px;
-}
-.breadcrumb {
-  font-size: 0.846em;
-  line-height: 1em;
-  padding: 20px 0 10px 0;
-}
-
-/**
- * Help.
- */
-#help {
-  font-size: 0.923em;
-}
-#help p {
-  margin: 0 0 10px;
-}
-#help div.more-help-link {
-  text-align: right; /* LTR */
-}
-[dir="rtl"] #help div.more-help-link {
-  text-align: left;
-}
-
-/**
- * Page title.
- */
-#page-title {
-  padding-top: 20px;
-}
-#branding .page-title {
-  color: #333;
-  display: inline-block;
-  margin: 0;
-  font-size: 1.625em;
-  line-height: 1.875em;
-  font-weight: 600;
-  -webkit-font-smoothing: antialiased;
-}
-[dir="rtl"] #branding h1.page-title {
-  float: right;
-}
-
-/**
- * Console.
- */
-#console {
-  margin: 9px 0 10px;
-}
-
-/**
- * Tabs.
- */
-.is-collapse-enabled  .tabs,
-.is-horizontal .tabs {
-  position: relative;
-}
-.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;
-}
-
-/* Span the full width of the viewport */
-#branding .is-horizontal .tabs:before,
-#branding .is-collapse-enabled .tabs:before {
-  left: -2.5em;
-  right: -2.5em;
-}
-
-/**
- * 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;
-  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;
-}
-.tabs__tab:hover {
-  color: #008ee6;
-  background-color: #fafaf7;
-}
-li.tabs__tab {
-  padding: 0;
-}
-li.tabs__tab a {
-  padding: 9px 2em 7px 1em;
-}
-.tabs a:hover,
-.tabs a:focus {
-  text-decoration: none;
-}
-
-/* Primary tabs */
-.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;
-}
-.tabs.primary a {
-  background: none;
-}
-.tabs.primary a:focus {
-  color: #008ee6;
-  background-color: #fafaf7;
-  text-decoration: underline;
-}
-.tabs.primary .active a:focus {
-  background: none;
-  text-decoration: underline;
-}
-
-/* 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;
-  }
-  [dir="rtl"] .tabs.primary a {
-    background: url(../../../misc/icons/0074bd/chevron-left.svg) 1% center no-repeat;
-  }
-  .tabs.primary .tabs__tab.active a {
-    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"] .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;
-}
-.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;
-}
-[dir="rtl"] .is-horizontal .tabs__tab {
-  float: right;
-}
-.is-horizontal .tabs__tab + .tabs__tab {
-  margin-left: -1px;
-}
-.is-horizontal .tabs.primary .tabs__tab:first-child {
-  border-radius: 4px 0 0 0;
-}
-[dir="rtl"] .is-horizontal .tabs.primary .tabs__tab:first-child {
-  border-radius: 0 4px 0 0;
-}
-.is-horizontal .tabs.primary .tabs__tab:last-child {
-  border-radius: 0 4px 0 0;
-}
-[dir="rtl"] .is-horizontal .tabs.primary .tabs__tab:last-child {
-  border-radius: 4px 0 0 0;
-}
-
-/* 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;
-}
-
-/* Secondary tabs */
-.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;
-  -webkit-transition: border-color 0.2s, background-color 0.2s;
-  -moz-transition: border-color 0.2s, background-color 0.2s;
-  transition: border-color 0.2s, background-color 0.2s;
-}
-.tabs.secondary .tabs__tab + .tabs__tab {
-  border-top: 1px solid #d9d8d4;
-}
-.tabs.secondary .tabs__tab.active {
-  color: #004f80;
-  border-left: 2px solid #004f80;
-  padding-left: 15px;
-}
-.tabs.secondary .tabs__tab:hover {
-  color: #008ee6;
-  border-left: 2px solid #008ee6;
-  padding-left: 15px;
-}
-.tabs.secondary a {
-  background-color: transparent;
-  padding: 7px 13px 5px;
-  text-decoration: none;
-}
-.tabs.secondary .active a {
-  color: #004f80;
-}
-.tabs.secondary a:focus {
-  text-decoration: underline;
-}
-
-/* Styles for the horizontal state */
-.is-horizontal .tabs.secondary .tabs__tab {
-  background: none;
-  float: left;
-  position: relative;
-  top: 0;
-  z-index: 15;
-  margin-left: 1em;
-  margin-right: 1em;
-  border-bottom: 2px solid transparent;
-  border-left: 1px solid 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:hover {
-  border-bottom-color: #008ee6;
-}
-
-ul.links li,
-ul.inline li {
-  padding-right: 1em; /* LTR */
-}
-[dir="rtl"] ul.links li,
-[dir="rtl"] ul.inline li {
-  padding-left: 1em;
-}
-ul.inline li {
-  display: inline;
-}
-ul.admin-list {
-  margin: 0;
-  padding: 0;
-}
-.admin-list li {
-  position: relative;
-  border-top: 1px solid #bfbfbf;
-  margin: 0;
-  list-style-type: none;
-  list-style-image: none;
-  padding: 0;
-}
-.admin-list.compact li {
-  border: none;
-}
-.admin-list li a {
-  background: url(../../../misc/icons/bebebe/chevron-disc-right.svg) no-repeat 1px 16px; /* LTR */
-  display: block;
-  padding: 14px 15px 14px 25px; /* LTR */
-  min-height: 0;
-}
-[dir="rtl"] .admin-list li a {
-  background: url(../../../misc/icons/bebebe/chevron-disc-left.svg) no-repeat right 16px;
-  padding-right: 25px;
-  padding-left: 15px;
-}
-.admin-list.compact li a {
-  background-image:  none;
-  padding: 2px 0;
-}
-.admin-list li a:hover,
-.admin-list li a:focus,
-.admin-list li a:active {
-  text-decoration: none;
-}
-.admin-list li a .label {
-  font-size: 1.0769em;
-}
-.admin-list li a:hover .label,
-.admin-list li a:focus .label,
-.admin-list li a:active .label {
-  text-decoration: underline;
-}
-div.submitted {
-  color: #898989;
-}
-.node__submitted {
-  margin: 1em 0;
-}
-
-/**
- * Pagination.
- * The item-list CSS uses quite strong selectors, we have to match them here to
- * override.
- */
-.item-list .pager li {
-  display: inline-block;
-  color: #8c8c8c;
-  font-size: 1.08em;
-  padding: 0 0.6em;
-  margin: 0;
-}
-.item-list .pager a,
-.item-list .pager .pager-current {
-  border-bottom: 2px solid transparent;
-  line-height: 1.55em;
-  padding: 0 5px;
-  text-decoration: none;
-  -webkit-transition: border-bottom-color 0.2s;
-  -moz-transition: border-bottom-color 0.2s;
-  transition: border-bottom-color 0.2s;
-  font-weight: 600;
-  -webkit-font-smoothing: antialiased;
-}
-.item-list .pager a {
-  padding-bottom: 3px;
-}
-.item-list .pager .pager-current {
-  border-bottom-width: 3px;
-  border-bottom-color: #2a678c;
-  color: #2a678c;
-  margin: 0 5px;
-  font-weight: 700;
-}
-.item-list .pager a:focus,
-.item-list .pager a:hover {
-  border-bottom-color: #3395d2;
-  color: #3395d2;
-}
-.item-list .pager-next a,
-.item-list .pager-last a,
-.item-list .pager-first a,
-.item-list .pager-previous a {
-  border-bottom-width: 0;
-  color: #2a678c;
-  font-weight: 600;
-}
-
-/**
- * Tables.
- */
-table {
-  width: 100%;
-  margin: 0 0 10px;
-  font-size: 0.923em;
-}
-caption {
-  text-align: left; /* LTR */
-}
-[dir="rtl"] caption {
-  text-align: right;
-}
-th {
-  text-align: left; /* LTR */
-  padding: 10px 12px;
-}
-[dir="rtl"] th {
-  text-align: right;
-}
-thead th {
-  background: #f5f5f2;
-  border: solid #bfbfba;
-  border-width: 1px 0;
-  color: #333;
-  text-transform: uppercase;
-}
-tr {
-  border-bottom: 1px solid #e6e4df;
-  padding: 0.1em 0.6em;
-}
-thead > tr {
-  border-bottom: 1px solid #000;
-}
-tbody tr:hover {
-  background: #f7fcff;
-}
-td,
-th {
-  vertical-align: top;
-}
-td {
-  padding: 10px 12px;
-  text-align: left; /* LTR */
-}
-[dir="rtl"] td {
-  text-align: right;
-}
-th > a {
-  position: relative;
-  display: block;
-}
-
-/* 1. Must match negative bottom padding of the parent <th> */
-th > a:after {
-  content: '';
-  display: block;
-  position: absolute;
-  top: 0;
-  bottom: -10px; /* 1. */
-  left: 0;
-  right: 0;
-  border-bottom: 2px solid transparent;
-  transition: all 0.1s;
-}
-th.active > a {
-  color: #004875;
-}
-th.active img {
-  position: absolute;
-  right: 0; /* LTR */
-  top: 50%;
-}
-[dir="rtl"] th.active img {
-  right: auto;
-  left: 0;
-}
-th.active > a:after {
-  border-bottom-color: #004875;
-}
-th > a:focus,
-th > a:hover,
-th.active > a:focus,
-th.active > a:hover {
-  color: #008ee6;
-  text-decoration: none;
-}
-th > a:focus:after,
-th > a:hover:after,
-th.active > a:focus:after,
-th.active > a:hover:after {
-  border-bottom-color: #008ee6;
-}
-td .item-list ul {
-  margin: 0;
-}
-td.active {
-  background: none;
-}
-
-/* Force browsers to calculate the width of a 'select all' TH element. */
-th.select-all {
-  width: 1px;
-}
-
-/**
- * Captions.
- */
-.caption {
-  margin-bottom: 1.2em;
-}
-
-/**
- * Status report table.
- */
-table.system-status-report tr {
-  border-top: 1px solid #ccc;
-  border-left: 1px solid #bebfb9;
-  border-right: 1px solid #bebfb9;
-  border-bottom: inherit;
-}
-table.system-status-report tr:first-child {
-  border-top: 1px solid #bebfb9;
-}
-table.system-status-report tr:last-child {
-  border-bottom: 1px solid #bebfb9;
-}
-
-table.system-status-report tr.ok {
-  color: #255b1e;
-  background-color: #e5ffe2;
-}
-table.system-status-report tr.warning {
-  color: #840;
-  background-color: #fffce5;
-}
-table.system-status-report tr.error {
-  color: #8c2e0b;
-  background-color: #fef5f1;
-}
-
-/**
- * Responsive tables.
- */
-@media screen and (max-width: 37.5em) { /* 600px */
-  th.priority-low,
-  td.priority-low,
-  th.priority-medium,
-  td.priority-medium {
-    display: none;
-  }
-}
-@media screen and (max-width: 60em) { /* 920px */
-  th.priority-low,
-  td.priority-low {
-    display: none;
-  }
-}
-
-/**
- * Collapsible details.
- */
-details {
-  line-height: 1.295em;
-}
-details summary {
-  padding-top: 0.5em;
-  padding-bottom: 0.5em;
-}
-
-/**
- * Form elements.
- */
-form {
-  margin: 0;
-  padding: 0;
-}
-fieldset {
-  margin: 1em 0;
-}
-.fieldgroup {
-  min-width: 0;
-}
-@-moz-document url-prefix() {
-  .fieldgroup {
-    display: table-cell;
-  }
-}
-.form-item {
-  margin: 0.75em 0;
-}
-.form-type-checkbox {
-  padding: 0;
-}
-label {
-  display: table;
-  margin: 0 0 0 0.2em; /* LTR */
-  padding: 0;
-  font-weight: bold;
-}
-[dir="rtl"] label {
-  margin: 0 0.2em 0 0;
-}
-label.error {
-  color: #a51b00;
-}
-label[for] {
-  cursor: pointer;
-}
-.form-item label.option {
-  text-transform: none;
-}
-.form-item label.option input {
-  vertical-align: middle;
-}
-.form-disabled label {
-  color: #737373;
-}
-
-.form-disabled input.form-text,
-.form-disabled input.form-tel,
-.form-disabled input.form-email,
-.form-disabled input.form-url,
-.form-disabled input.form-search,
-.form-disabled input.form-number,
-.form-disabled input.form-color,
-.form-disabled input.form-file,
-.form-disabled textarea.form-textarea,
-.form-disabled select.form-select {
-  border-color: #d4d4d4;
-  background-color: hsla(0, 0%, 0%, .08);
-  box-shadow: none;
-}
-
-.form-item input.error,
-.form-item textarea.error,
-.form-item select.error {
-  border-width: 2px;
-  border-color: #e62600;
-  background-color: hsla(15, 75%, 97%, 1);
-  box-shadow: inset 0 5px 5px -5px #b8b8b8;
-  color: #a51b00;
-}
-.form-item input.error:focus,
-.form-item textarea.error:focus,
-.form-item select.error:focus {
-  border-color: #e62600;
-  outline: 0;
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 0 8px 1px #e62600;
-  background-color: #fcf4f2;
-}
-.form-required:after {
-  font-weight: bold;
-  color: #e62600;
-  font-size: 1.1em;
-  padding-left: 2px;
-}
-
-
-/* Filter */
-.filter-wrapper {
-  font-size: 0.923em;
-}
-ul.tips,
-div.description,
-.form-item .description {
-  margin: 0.2em 0 0 0;
-  color: #595959;
-  font-size: 0.9em;
-}
-.form-item .description.error {
-  color: #a51b00;
-}
-
-ul.tips li {
-  margin: 0.25em 0 0.25em 1.5em; /* LTR */
-}
-[dir="rtl"] ul.tips li {
-  margin: 0.25em 1.5em 0.25em 0;
-}
-.form-type-radio .description,
-.form-type-checkbox .description {
-  margin-left: 1.5em; /* LTR */
-}
-[dir="rtl"] .form-type-radio .description,
-[dir="rtl"] .form-type-checkbox .description {
-  margin-left: 0;
-  margin-right: 1.5em;
-}
-.form-text,
-.form-textarea {
-  border-radius: 2px;
-  font-size: 1em;
-  line-height: normal;
-}
-
-input.form-autocomplete,
-input.form-text,
-input.form-tel,
-input.form-email,
-input.form-url,
-input.form-search,
-input.form-number,
-input.form-color,
-input.form-file,
-input.form-date,
-input.form-time,
-textarea.form-textarea {
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing:    border-box;
-  box-sizing:         border-box;
-  padding: .3em .4em .3em .5em;
-  max-width: 100%;
-  border: 1px solid #b8b8b8;
-  border-top-color: #999;
-  background: #fff;
-  color: #333;
-  border-radius: 2px;
-  background: #fcfcfa;
-  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .125);
-  font-size: 1em;
-  color: #595959;
-  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-  -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-  transition: border linear 0.2s, box-shadow linear 0.2s;
-}
-.form-text:focus,
-.form-tel:focus,
-.form-email:focus,
-.form-url:focus,
-.form-search:focus,
-.form-number:focus,
-.form-color:focus,
-.form-file:focus,
-.form-textarea:focus,
-.form-date:focus,
-.form-time:focus {
-  border-color: #40b6ff;
-  outline: 0;
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 0 8px #40b6ff;
-  background-color: #fff;
-}
-
-.confirm-parent,
-.password-parent {
-  overflow: visible;
-  width: auto;
-}
-
-.form-item .password-suggestions {
-  float: left; /* LTR */
-  clear: left;
-  width: 100%;
-}
-[dir="rtl"] .form-item .password-suggestions {
-  float: right;
-}
-.form-item-pass .description {
-  clear: both;
-}
-
-
-/**
- * Select elements - Webkit only
- */
-@media screen and (-webkit-min-device-pixel-ratio: 0) {
-  select {
-    cursor: pointer;
-    -webkit-appearance: none;
-    padding: 1px 1.571em 1px 0.5em; /* LTR */
-    border: 1px solid #a6a6a6;
-    border-radius: 0.143em;
-    background:
-      url("../../../misc/icons/333333/caret-down.svg") no-repeat 99% 63%,
-      -webkit-linear-gradient(top, #f6f6f3, #e7e7df); /* LTR */
-    text-shadow: 0 1px hsla(0, 0%, 100%, 0.6);
-    font-size: 0.875rem;
-    transition: all 0.1s;
-    -webkit-font-smoothing: antialiased;
-  }
-  [dir="rtl"] select {
-    padding: 1px 0.714em 1px 1.571em;
-    background-position: 1% 63%, 0 0;
-  }
-  select:focus,
-  select:hover {
-    background-image: url("../../../misc/icons/333333/caret-down.svg"),
-    -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
-    color: #1a1a1a;
-  }
-  select:hover {
-    box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125);
-  }
-}
-
-/**
- * Improve spacing of cancel link.
- */
-#edit-cancel {
-  margin-left: 10px; /* LTR */
-}
-[dir="rtl"] #edit-cancel {
-  margin-left: 0;
-  margin-right: 10px;
-}
-
-/**
- * Improve form element usability on narrow devices.
- */
-@media screen and (max-width: 600px) {
-  input.form-autocomplete,
-  input.form-text,
-  input.form-tel,
-  input.form-email,
-  input.form-url,
-  input.form-search,
-  input.form-number,
-  input.form-color,
-  input.form-file,
-  textarea.form-textarea {
-    width: 100%;
-    font-size: 1.2em;
-    line-height: 1.2em;
-  }
-  input.form-number {
-    width: auto;
-  }
-  .form-actions input,
-  .form-wrapper input[type="submit"] {
-    float: none;
-    margin-left: 0;
-    margin-right: 0;
-    margin-top: 10px;
-    padding-bottom: 6px;
-    width: 100%;
-  }
-  .form-actions input:first-child,
-  .form-wrapper input[type="submit"]:first-child {
-    margin-top: 0;
-  }
-  .exposed-filters .filters,
-  .exposed-filters .form-item label,
-  .exposed-filters .form-select {
-    float: none;
-    margin-bottom: 2px;
-    width: 100%;
-  }
-  details summary {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    -webkit-box-sizing: border-box;
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-  }
-  .password-strength {
-    width: 100%;
-  }
-  div.form-item div.password-suggestions {
-    float: none;
-  }
-  #dblog-filter-form .form-actions {
-    float: none;
-    padding: 0;
-  }
-  #edit-cancel {
-    display: block;
-    margin: 10px 0 0 0;
-  }
-}
-
-/* Exceptions */
-#diff-inline-form select,
-div.filter-options select {
-  padding: 0;
-}
-
-/**
- * System.
- */
-@media screen and (min-width: 40em) {
-  div.admin .right,
-  div.admin .left {
-    width: 49%;
-    margin: 0;
-  }
-}
-div.admin-panel,
-div.admin-panel .body {
-  padding: 0;
-  clear: left;
-}
-div.admin-panel {
-  margin: 0 0 20px;
-  padding: 9px;
-  background: #f8f8f8;
-  border: 1px solid #ccc;
-}
-div.admin-panel h3 {
-  font-size: 0.923em;
-  text-transform: uppercase;
-  margin: 0;
-  padding-bottom: 9px;
-}
-
-/* admin/appearance */
-#system-themes-page h2 {
-  font-weight: normal;
-  text-transform: uppercase;
-}
-.theme-selector h3 {
-  font-weight: normal;
-}
-.theme-default h3 {
-  font-weight: bold;
-}
-
-/* Update options. */
-div.admin-options {
-  background: #f8f8f8;
-  line-height: 30px;
-  height: 30px;
-  padding: 9px;
-  border: 1px solid #ccc;
-  margin: 0 0 10px;
-}
-div.admin-options label {
-  text-transform: uppercase;
-  font: 0.846em/1.875em "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", "Lucida Sans", sans-serif;
-}
-div.admin-options label,
-div.admin-options div.form-item {
-  margin-right: 10px; /* LTR */
-  float: left; /* LTR */
-}
-[dir="rtl"] div.admin-options label,
-[dir="rtl"] div.admin-options div.form-item {
-  margin-left: 10px;
-  margin-right: 0;
-  float: right;
-}
-div.admin-options div.form-item {
-  padding: 0;
-  border: 0;
-}
-
-/* Update status */
-.versions table.version {
-  border: none;
-}
-
-/* Field UI */
-
-#field-display-overview input.field-plugin-settings-edit {
-  margin: 0;
-  padding: 1px 8px;
-}
-#field-display-overview tr.field-plugin-settings-changed {
-  background: #ffffbb;
-}
-#field-display-overview tr.drag {
-  background: #ffee77;
-}
-#field-display-overview tr.field-plugin-settings-editing {
-  background: #d5e9f2;
-}
-#field-display-overview .field-plugin-settings-edit-form .form-item {
-  margin: 10px 0;
-}
-#field-display-overview .field-plugin-settings-edit-form .form-submit {
-  margin-bottom: 0;
-}
-
-/* Modules page */
-#system-modules fieldset {
-  border: 0;
-  border-top: 1px solid #ccc;
-}
-#system-modules details {
-  border: 0;
-  margin: 0;
-  padding: 0;
-}
-#system-modules summary {
-  border-bottom: 1px solid #ccc;
-}
-#system-modules [open] summary {
-  border-bottom: none;
-}
-#system-modules .details-wrapper {
-  padding: 0 0 0.5em 0;
-}
-#system-modules .fieldset-wrapper {
-  padding: 0;
-}
-#system-modules table,
-#locale-translation-status-form table {
-  border: 0;
-}
-#system-modules tr.even,
-#system-modules tr.odd,
-#locale-translation-status-form tr.even,
-#locale-translation-status-form tr.odd {
-  background: #f3f4ee;
-  border: 0;
-  border-bottom: 10px solid #fff;
-}
-#system-modules tr td:last-child,
-#locale-translation-status-form tr td:last-child {
-  border: 0;
-}
-#system-modules table th,
-#locale-translation-status-form table th {
-  border: 0;
-  border-bottom: 10px solid #fff;
-}
-#system-modules .sticky-header th,
-#locale-translation-status-form .sticky-header th {
-  border: 0;
-}
-/* Recent content block */
-#block-node-recent table,
-#block-node-recent tr {
-  border: none;
-}
-#block-node-recent .more-link {
-  padding: 0 5px 5px 0; /* LTR */
-}
-[dir="rtl"] #block-node-recent .more-link {
-  padding: 0 0 5px 5px;
-}
-
-/**
- * Views styling
- */
-
-/* @group Forms */
-
-/**
- * Seven positions the summary absolutely, but does not have a way to ignore
- * details without a summary so we make one up.
- *
- * @todo Neither a fieldset without legend nor a details without summary is
- *   valid HTML markup in any way. Refactor Views UI to not produce such invalid
- *   markup.
- */
-details.fieldset-no-legend {
-  padding-top: 0;
-}
-
-/**
- * Being extra safe here and scoping this to the add view wizard form (where
- * a layout problem occurs for the Display format details if we don't fix its
- * padding), but it's probably safe to just let it apply everywhere.
- */
-#views-ui-add-form details details .details-wrapper {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.views-display-tab details.box-padding .details-wrapper {
-  padding: 0;
-}
-
-.views-admin .form-item label.option,
-#views-ui-preview-form .form-item label.option {
-  font-size: 1em;
-}
-
-.views-admin input.form-submit,
-.views-ui-dialog input.form-submit,
-.views-admin a.button,
-.views-ui-dialog a.button {
-  margin-bottom: 0;
-  margin-right: 0; /* LTR */
-  margin-top: 0;
-}
-[dir="rtl"] .views-admin input.form-submit,
-[dir="rtl"] .views-ui-dialog input.form-submit,
-[dir="rtl"] .views-admin a.button,
-[dir="rtl"] .views-ui-dialog a.button {
-  margin-left: 0;
-}
-
-/* Override for a button on the edit display screen */
-#edit-displays-preview-controls .form-submit {
-  display: inline-block;
-  margin-right: 1em;
-}
-
-.form-radios > .form-item {
-  margin-top: 3px;
-}
-
-/* @group Dependent options
- */
-
-/* This is necessary to supercede the Seven .form-item
- * reset declaration that sets the margin to zero.
- */
-.form-item-options-expose-required,
-.form-item-options-expose-label,
-.form-item-options-expose-description {
-  margin-left: 1.5em;
-}
-
-.views-admin-dependent .form-item .form-item,
-.views-admin-dependent .form-type-checkboxes,
-.views-admin-dependent .form-type-radios,
-.views-admin-dependent .form-item .form-item,
-.form-item-options-expose-required,
-.form-item-options-expose-label,
-.form-item-options-expose-description {
-  margin-bottom: 6px;
-  margin-top: 6px;
-}
-
-.views-admin-dependent .form-type-radio,
-.views-admin-dependent .form-radios .form-item {
-  margin-bottom: 2px;
-  margin-top: 2px;
-}
-
-/* @end */
-
-/* @group Lists */
-
-.views-admin ul.secondary,
-.views-admin .item-list ul {
-  margin: 0;
-  padding: 0;
-}
-
-.views-displays ul.secondary li a,
-.views-displays ul.secondary li.active a,
-.views-displays ul.secondary li.active a.active {
-  padding: 2px 7px 3px;
-}
-
-.views-displays ul.secondary li a {
-  color: #0074bd;
-}
-
-.views-displays ul.secondary li.active a,
-.views-displays ul.secondary li.active a.active {
-  border: 1px solid transparent;
-}
-
-.views-admin .links li {
-  padding-right: 0; /* LTR */
-}
-[dir="rtl"] .views-admin .links li {
-  padding-left: 0;
-}
-
-.views-admin .button .links li {
-  padding-right: 12px; /* LTR */
-}
-[dir="rtl"] .views-admin .button .links li {
-  padding-left: 12px;
-}
-
-.views-display-top ul.secondary {
-  background-color: transparent;
-  float: left
-}
-
-.views-display-top .secondary .action-list li {
-  float: none;
-  margin: 0;
-}
-
-/* @end */
-
-/* @group Tables */
-
-.views-ui-rearrange-filter-form table td,
-.views-ui-rearrange-filter-form table th {
-  vertical-align: top;
-}
-
-/* @end */
-
-/* @group Attachment details */
-
-#edit-display-settings-title {
-  color: #008BCB;
-}
-
-/* @end */
-
-/* @group Attachment details tabs
- *
- * The tabs that switch between sections
- */
-
-.views-displays .secondary {
- text-align: left; /* LTR */
-}
-[dir="rtl"] .views-displays .secondary {
-  text-align: right;
-}
-
-.views-admin .icon.add {
-  background-position: center 3px;
-}
-
-.views-displays .secondary a:hover > .icon.add {
-  background-position: center -25px;
-}
-
-.views-displays .secondary .open > a {
-  border-radius: 7px 7px 0 0;
-}
-
-.views-displays .secondary .open > a:hover {
-  background-color: #f1f1f1;
-  color: #008BCB;
-}
-
-.views-displays .secondary .action-list  li:first-child {
-  border-radius: 0 7px 0 0;
-}
-
-.views-displays .secondary .action-list  li:last-child {
-  border-radius: 0 0 7px 7px;
-}
-
-.views-displays .secondary .action-list input.form-submit {
-  color: #008bcb;
-}
-
-/* @end */
-
-/* @group Attachment buckets
- *
- * These are the individual "buckets," or boxes, inside the display settings area
- */
-
-.views-ui-display-tab-bucket h3 {
-  font-size: 12px;
-  text-transform: uppercase;
-}
-
-.views-ui-display-tab-bucket .links {
-  padding: 2px 6px 4px;
-}
-
-.views-ui-display-tab-bucket .links li + li {
-  margin-left: 3px;
-}
-
-/* @end */
-
-/* @group Rearrange filter criteria */
-
-#views-ui-rearrange-filter-form .action-links {
-  margin: 0;
-  padding: 0;
-}
-
-#views-ui-rearrange-filter-form table {
-  border: medium none;
-}
-
-#views-ui-rearrange-filter-form [id^="views-row"] {
-  border: medium none;
-}
-
-#views-ui-rearrange-filter-form tr td:last-child {
-  border-right: medium none;
-}
-
-#views-ui-rearrange-filter-form .filter-group-operator-row {
-  border-left: 1px solid transparent !important;
-  border-right: 1px solid transparent !important;
-}
-
-#views-ui-rearrange-filter-form tr.drag td {
-  background-color: #FFEE77 !important;
-}
-
-#views-ui-rearrange-filter-form tr.drag-previous td {
-  background-color: #FFFFBB !important;
-}
-
-/* @end */
-
-/* @group Live preview elements */
-
-.views-query-info pre {
-  margin-bottom: 0;
-  margin-top: 0;
-}
-
-/* @group Query info table */
-
-.views-query-info table {
-  border-radius: 7px;
-  -webkit-border-horizontal-spacing: 1px;
-  -webkit-border-vertical-spacing: 1px;
-}
-
-.views-query-info table tr td:last-child {
-  /* Fixes a Seven style that bleeds down into this table unnecessarily */
-  border-right: 0 none;
-}
-
-/* @end */
-
-/* @end */
-
-/* @group Add view */
-
-.form-item-page-create,
-.form-item-block-create {
-  margin-top: 13px;
-}
-
-/* @end */
-
-/* @group Modal dialog box
- *
- * The contents of the popup dialog on the views edit form.
- */
-
-.filterable-option .form-item.form-type-checkbox {
-  /* This selector is aggressive because Seven's reset for .form-items is aggressive. */
-  padding-bottom: 4px;
-  padding-left: 4px;
-  padding-top: 4px;
-}
-
-/* @end */
-
-/**
- * Entity meta settings.
- */
-.entity-meta {
-  background-color: #ececec;
-  border-bottom: 0;
-  border-left: 1px solid #bfbfbf;
-  border-right: 1px solid #bfbfbf;
-  border-top: 0;
-  box-shadow: inset 0 0 5px rgba(0, 0, 0, .15);
-  margin-top: 0;
-  padding-top: 0;
-}
-.entity-meta-header,
-.entity-meta details {
-  background-color: #f7f7f7;
-  border-top: 1px solid #bfbfbf;
-  border-bottom: 1px solid #bfbfbf;
-}
-.entity-meta-header {
-  padding: 1em 1.5em;
-}
-.entity-meta-header .form-item {
-  margin: .25em 0;
-}
-.entity-meta-header .published {
-  font-size: 1.231em;
-  font-weight: bold;
-  text-shadow: 0 1px 0 #fff;
-}
-.entity-meta-header .changed {
-  font-style: italic; /* As-designed, but really: why is this italic? */
-}
-.entity-meta details {
-  border-left: 0;
-  border-right: 0;
-  border-top: 1px solid #ffffff;
-  margin: 0;
-}
-.entity-meta details[open] {
-  background-color: transparent;
-  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, .125), transparent 4px);
-  background-image:    -moz-linear-gradient(top, rgba(0, 0, 0, .125), transparent 4px);
-  background-image:      -o-linear-gradient(top, rgba(0, 0, 0, .125), transparent 4px);
-  background-image:         linear-gradient(to bottom, rgba(0, 0, 0, .125), transparent 4px);
-  border-top-width: 0;
-  padding-top: 1px;
-}
-.entity-meta details[open] + [open] {
-  background-image: none;
-  border-top-width: 1px;
-  padding-top: 0;
-}
-.entity-meta details > .details-wrapper {
-  padding-top: 0;
-}
-.entity-meta details > summary {
-  padding: 0.85em 1.25em;
-  text-shadow: 0 1px 0 white;
-}
-.entity-meta details .summary {
- display: none; /* Hide JS summaries. @todo Rethink summaries. */
-}
-
-/**
- * Widescreen
- *
- * Both of the following media queries must *exactly* match what is in
- * node.module.css. This is rather crazy.
- *
- * @todo Figure out how to reduce media query duplication across files
- *       and modules. Layout styles only allowed in themes?
- */
-@media
-  screen and (min-width: 780px),
-  (orientation: landscape) and (min-device-height: 780px) {
-
-  [class*="page-node-add-"] .messages,
-  .page-node-edit .messages {
-    margin-top: 1em;
-    margin-bottom: 1em;
-  }
-}
-@media
-  screen and (max-width: 1020px),
-  (orientation: landscape) and (max-device-height: 1020px) {
-
-  .toolbar-vertical .block-list-secondary,
-  .toolbar-vertical .layout-region-node-secondary {
-    margin-bottom: 0;
-    padding-bottom: 0;
-    display: block;
-  }
-  .toolbar-vertical .layout-node-form:after {
-    display: none;
-  }
-}
-
-/* Delete button */
-.form-actions .button-danger {
-  color: #c72100;
-  background: none;
-  border: none;
-  float: right;
-  margin-right: 0;
-  margin-left: 0;
-  padding-right: 0;
-  padding-left: 0;
-}
-.form-actions .button-danger:hover,
-.form-actions .button-danger:focus {
-  color: #ff2a00;
-  background: none;
-  border: none;
-  text-decoration: underline;
-}
-.form-actions .button-danger:active {
-  color: #ff2a00;
-  background: none;
-  border: none;
-  text-decoration: underline;
-}
diff --git a/core/themes/seven/css/theme/appearance-page.css b/core/themes/seven/css/theme/appearance-page.css
new file mode 100644
index 0000000..0b6f364
--- /dev/null
+++ b/core/themes/seven/css/theme/appearance-page.css
@@ -0,0 +1,13 @@
+/**
+ * Apearance page.
+ */
+#system-themes-page h2 {
+  font-weight: normal;
+  text-transform: uppercase;
+}
+.theme-selector h3 {
+  font-weight: normal;
+}
+.theme-default h3 {
+  font-weight: bold;
+}
diff --git a/core/themes/seven/css/install-page.css b/core/themes/seven/css/theme/install-page.css
similarity index 89%
rename from core/themes/seven/css/install-page.css
rename to core/themes/seven/css/theme/install-page.css
index bb16549..5898d10 100644
--- a/core/themes/seven/css/install-page.css
+++ b/core/themes/seven/css/theme/install-page.css
@@ -8,16 +8,16 @@
 .install-background {
   background-color: #1275b2;
   background-image:
-    url(../images/noise-low.png),
+    url(../../images/noise-low.png),
     -webkit-radial-gradient(hsl(203, 80%, 45%), hsl(203, 80%, 32%));
   background-image:
-    url(../images/noise-low.png),
+    url(../../images/noise-low.png),
     -moz-radial-gradient(hsl(203, 80%, 45%), hsl(203, 80%, 32%));
   background-image:
-    url(../images/noise-low.png),
+    url(../../images/noise-low.png),
     -o-radial-gradient(hsl(203, 80%, 45%), hsl(203, 80%, 32%));
   background-image:
-    url(../images/noise-low.png),
+    url(../../images/noise-low.png),
     radial-gradient(hsl(203, 80%, 45%), hsl(203, 80%, 32%));
   background-repeat: repeat;
   background-position: left top, 50% 50%;
diff --git a/core/themes/seven/css/maintenance-page.css b/core/themes/seven/css/theme/maintenance-page.css
similarity index 100%
rename from core/themes/seven/css/maintenance-page.css
rename to core/themes/seven/css/theme/maintenance-page.css
diff --git a/core/themes/seven/seven.info.yml b/core/themes/seven/seven.info.yml
index 9cf238f..e8cb9dc 100644
--- a/core/themes/seven/seven.info.yml
+++ b/core/themes/seven/seven.info.yml
@@ -8,21 +8,44 @@ version: VERSION
 core: 8.x
 stylesheets:
   screen:
-    - css/seven.base.css
-    - css/style.css
-    - css/layout.css
+    - css/base/elements.css
+    - css/components/admin-list.css
+    - css/components/admin-options.css
+    - css/components/admin-panel.css
+    - css/components/block-recent-content.css
+    - css/components/branding.css
+    - css/components/breadcrumb.css
     - css/components/buttons.css
     - css/components/buttons.theme.css
+    - css/components/comments.css
+    - css/components/console.css
     - css/components/dropbutton.component.css
+    - css/components/entity-meta.css
+    - css/components/field-ui.css
+    - css/components/form.css
+    - css/components/help.css
+    - css/components/menus-and-lists.css
+    - css/components/modules-page.css
+    - css/components/node.css
+    - css/components/page-title.css
+    - css/components/pager.css
+    - css/components/skip-link.css
+    - css/components/tables.css
+    - css/components/tabs.css
     - css/components/tour.theme.css
+    - css/components/update-status.css
+    - css/components/views-ui.css
+    - css/layout/layout.css
+    - css/layout/node-add.css
+    - css/theme/appearance-page.css
 stylesheets-override:
-  - css/vertical-tabs.css
-  - css/jquery.ui.theme.css
-  - css/dialog.theme.css
+  - css/components/vertical-tabs.css
+  - css/components/jquery.ui.theme.css
+  - css/components/dialog.theme.css
 stylesheets-remove:
   - jquery.ui.dialog.css
 quickedit_stylesheets:
-  - css/quickedit.css
+  - css/components/quickedit.css
 regions:
   content: Content
   help: Help
diff --git a/core/themes/seven/seven.libraries.yml b/core/themes/seven/seven.libraries.yml
index cc4efee..d7a9495 100644
--- a/core/themes/seven/seven.libraries.yml
+++ b/core/themes/seven/seven.libraries.yml
@@ -4,7 +4,7 @@ maintenance-page:
     js/mobile.install.js: {}
   css:
     theme:
-      css/maintenance-page.css: {}
+      css/theme/maintenance-page.css: {}
   dependencies:
     - system/maintenance
 
@@ -14,7 +14,7 @@ install-page:
     js/mobile.install.js: {}
   css:
     theme:
-      css/install-page.css: {}
+      css/theme/install-page.css: {}
   dependencies:
     - system/maintenance