#592018 by mverbaar, Jacine, et al: Re-organize styles across stylesheets from system.module and separate presentational and behavior-supporting styles.

12 files changed, 459 insertions, 470 deletions

diff --git a/includes/theme.maintenance.inc b/includes/theme.maintenance.inc
index 7b48b7f39..daccdb13d 100644
--- a/includes/theme.maintenance.inc
+++ b/includes/theme.maintenance.inc
@@ -70,8 +70,8 @@ function _drupal_maintenance_theme() {
 
   // These are usually added from system_init() -except maintenance.css.
   // When the database is inactive it's not called so we add it here.
-  drupal_add_css(drupal_get_path('module', 'system') . '/defaults.css');
   drupal_add_css(drupal_get_path('module', 'system') . '/system.css');
+  drupal_add_css(drupal_get_path('module', 'system') . '/system-behavior.css');
   drupal_add_css(drupal_get_path('module', 'system') . '/system-menus.css');
   drupal_add_css(drupal_get_path('module', 'system') . '/maintenance.css');
   drupal_add_css(drupal_get_path('module', 'system') . '/admin.css');
diff --git a/modules/node/node.css b/modules/node/node.css
index 177c574e1..173d2e52e 100644
--- a/modules/node/node.css
+++ b/modules/node/node.css
@@ -6,7 +6,7 @@
 .preview .node {
   background-color: #ffffea;
 }
-/* Override the default multiselect layout in system.css. */
+/* Override the default multiselect layout in system-behavior.css. */
 #node-admin-content dl.multiselect dd, dl.multiselect dd .form-item {
   width: 20em; /* 6em label + 14em select */
 }
diff --git a/modules/simpletest/tests/common.test b/modules/simpletest/tests/common.test
index 35a2a7f87..c44d2947e 100644
--- a/modules/simpletest/tests/common.test
+++ b/modules/simpletest/tests/common.test
@@ -618,13 +618,13 @@ class CascadingStylesheetsTestCase extends DrupalWebTestCase {
     drupal_add_css(drupal_get_path('module', 'simpletest') . '/simpletest.css');
     // A few system CSS files, ordered in a strange way.
     $system_path = drupal_get_path('module', 'system');
-    drupal_add_css($system_path . '/defaults.css', array('weight' => CSS_SYSTEM));
+    drupal_add_css($system_path . '/system-behavior.css', array('weight' => CSS_SYSTEM));
     drupal_add_css($system_path . '/system.css', array('weight' => CSS_SYSTEM - 10));
     drupal_add_css($system_path . '/system-menus.css', array('weight' => CSS_SYSTEM));
 
     $expected = array(
       $system_path . '/system.css',
-      $system_path . '/defaults.css',
+      $system_path . '/system-behavior.css',
       $system_path . '/system-menus.css',
       drupal_get_path('module', 'simpletest') . '/simpletest.css',
     );
diff --git a/modules/system/defaults-rtl.css b/modules/system/defaults-rtl.css
deleted file mode 100644
index fc50f7bb5..000000000
--- a/modules/system/defaults-rtl.css
+++ /dev/null
@@ -1,7 +0,0 @@
-/* $Id$ */
-
-th {
-  text-align: right;
-  padding-right: 0;
-  padding-left: 1em;
-}
diff --git a/modules/system/defaults.css b/modules/system/defaults.css
deleted file mode 100644
index a23131d50..000000000
--- a/modules/system/defaults.css
+++ /dev/null
@@ -1,53 +0,0 @@
-/* $Id$ */
-
-/*
-** HTML elements
-*/
-fieldset {
-  margin-bottom: 1em;
-  padding: .5em;
-}
-form {
-  margin: 0;
-  padding: 0;
-}
-hr {
-  height: 1px;
-  border: 1px solid gray;
-}
-img {
-  border: 0;
-}
-table {
-  border-collapse: collapse;
-}
-th {
-  text-align: left; /* LTR */
-  padding-right: 1em; /* LTR */
-  border-bottom: 3px solid #ccc;
-}
-
-/*
-** Markup free clearing
-** Details: http://www.positioniseverything.net/easyclearing.html
-*/
-.clearfix:after {
-  content: ".";
-  display: block;
-  height: 0;
-  clear: both;
-  visibility: hidden;
-}
-
-.clearfix {
-  display: inline-block;
-}
-
-/* Hides from IE-mac \*/
-* html .clearfix {
-  height: 1%;
-}
-.clearfix {
-  display: block;
-}
-/* End hide from IE-mac */
diff --git a/modules/system/maintenance.css b/modules/system/maintenance.css
index f273ce769..acd2917a2 100644
--- a/modules/system/maintenance.css
+++ b/modules/system/maintenance.css
@@ -36,3 +36,17 @@
 #edit-connection-settings-change-connection-type {
   margin: 2.6em 0.5em 0em 1em;
 }
+
+/**
+ * Installation task list
+ */
+ol.task-list li.active {
+  font-weight: bold;
+}
+
+/**
+ * Installation clean URLs
+ */
+#clean-url.install {
+  display: none;
+}
diff --git a/modules/system/system-behavior-rtl.css b/modules/system/system-behavior-rtl.css
new file mode 100644
index 000000000..7238a341c
--- /dev/null
+++ b/modules/system/system-behavior-rtl.css
@@ -0,0 +1,84 @@
+/* $Id$ */
+
+/**
+ * Autocomplete
+ */
+ /* Animated throbber */
+html.js input.form-autocomplete {
+  background-position: 0% 2px;
+}
+html.js input.throbbing {
+  background-position: 0% -18px;
+}
+
+/**
+ * Collapsing fieldsets
+ */
+html.js fieldset.collapsible legend a {
+  padding-left: 0;
+  padding-right: 15px;
+  background-position: 98% 75%;
+}
+html.js fieldset.collapsed legend a {
+  background-image: url(../../misc/menu-collapsed-rtl.png);
+  background-position: 98% 50%;
+}
+
+/**
+ * Progress bar
+ */
+.progress .percentage {
+  float: left;
+}
+.progress-disabled {
+  float: right;
+}
+.ajax-progress {
+  float: right;
+}
+.ajax-progress .throbber {
+  float: right;
+}
+
+/**
+ * Password strength indicator
+ */
+input.password-field {
+  margin-left: 10px;
+  margin-right: 0;
+}
+input.password-confirm {
+  margin-left: 10px;
+  margin-right: 0;
+}
+.password-strength-title {
+  float: right;
+}
+.password-parent {
+  float: right;
+}
+
+/**
+ * Table drag and drop
+ */
+.draggable a.tabledrag-handle {
+  float: right;
+  margin: -0.4em -0.5em -0.4em 0;
+  padding: 0.42em 0.5em 0.42em 1.5em;
+}
+div.indentation {
+  margin: -0.4em -0.4em -0.4em 0.2em;
+  padding: 0.42em 0.6em 0.42em 0;
+  float: right;
+}
+div.tree-child, div.tree-child-last {
+  background-position: -65px center;
+}
+
+/**
+ * Multiselect form
+ */
+dl.multiselect dt, dl.multiselect dd {
+  float: right;
+  margin: 0 0 0 1em;
+}
diff --git a/modules/system/system-behavior.css b/modules/system/system-behavior.css
new file mode 100644
index 000000000..6d386b857
--- /dev/null
+++ b/modules/system/system-behavior.css
@@ -0,0 +1,311 @@
+/* $Id$ */
+
+/**
+ * Autocomplete
+ */
+/* Suggestion list */
+#autocomplete {
+  position: absolute;
+  border: 1px solid;
+  overflow: hidden;
+  z-index: 100;
+}
+#autocomplete ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  list-style-image: none;
+}
+#autocomplete li {
+  background: #fff;
+  color: #000;
+  white-space: pre;
+  cursor: default;
+}
+#autocomplete li.selected {
+  background: #0072b9;
+  color: #fff;
+}
+/* Animated throbber */
+html.js input.form-autocomplete {
+  background-image: url(../../misc/throbber.gif);
+  background-repeat: no-repeat;
+  background-position: 100% 2px; /* LTR */
+}
+html.js input.throbbing {
+  background-position: 100% -18px; /* LTR */
+}
+
+/**
+ * Collapsing fieldsets
+ */
+html.js fieldset.collapsed {
+  border-bottom-width: 0;
+  border-left-width: 0;
+  border-right-width: 0;
+  margin-bottom: 0;
+  height: 1em;
+}
+html.js fieldset.collapsed * {
+  display: none;
+}
+html.js fieldset.collapsed legend, html.js fieldset.collapsed legend a span.element-invisible {
+  display: block;
+  overflow: hidden;
+}
+html.js fieldset.collapsible legend a {
+  display: inline;
+  padding-left: 15px; /* LTR */
+  background: url(../../misc/menu-expanded.png) 5px 75% no-repeat; /* LTR */
+}
+html.js fieldset.collapsible legend span.summary {
+  display: inline;
+  font-size: 0.9em;
+  color: #999;
+  margin-left: 0.5em;
+}
+html.js fieldset.collapsed legend a {
+  background-image: url(../../misc/menu-collapsed.png); /* LTR */
+  background-position: 5px 50%; /* LTR */
+}
+/* Note: IE-only fix due to '* html' (breaks Konqueror otherwise). */
+* html.js fieldset.collapsed legend,
+* html.js fieldset.collapsed legend *,
+* html.js fieldset.collapsed table * {
+  display: inline;
+}
+/* For Safari 2 to prevent collapsible fieldsets containing tables from dissapearing due to tableheader.js. */
+html.js fieldset.collapsible {
+  position: relative;
+}
+/* Avoid jumping around due to margins collapsing into collapsible fieldset border */
+html.js fieldset.collapsible .fieldset-wrapper {
+  overflow: auto;
+}
+
+/**
+ * Resizable textareas
+ */
+.resizable-textarea {
+  width: 95%;
+}
+.resizable-textarea .grippie {
+  height: 9px;
+  overflow: hidden;
+  background: #eee url(../../misc/grippie.png) no-repeat center 2px;
+  border: 1px solid #ddd;
+  border-top-width: 0;
+  cursor: s-resize;
+}
+html.js .resizable-textarea textarea {
+  margin-bottom: 0;
+  width: 100%;
+  display: block;
+}
+
+/**
+ * Table drag and drop
+ */
+body.drag {
+  cursor: move;
+}
+.draggable a.tabledrag-handle {
+  cursor: move;
+  float: left; /* LTR */
+  height: 1.7em;
+  margin: -0.4em 0 -0.4em -0.5em; /* LTR */
+  padding: 0.42em 1.5em 0.42em 0.5em; /* LTR */
+  text-decoration: none;
+}
+a.tabledrag-handle:hover {
+  text-decoration: none;
+}
+a.tabledrag-handle .handle {
+  margin-top: 4px;
+  height: 13px;
+  width: 13px;
+  background: url(../../misc/draggable.png) no-repeat 0 0;
+}
+a.tabledrag-handle-hover .handle {
+  background-position: 0 -20px;
+}
+div.indentation {
+  width: 20px;
+  height: 1.7em;
+  margin: -0.4em 0.2em -0.4em -0.4em; /* LTR */
+  padding: 0.42em 0 0.42em 0.6em; /* LTR */
+  float: left; /* LTR */
+}
+div.tree-child {
+  background: url(../../misc/tree.png) no-repeat 11px center; /* LTR */
+}
+div.tree-child-last {
+  background: url(../../misc/tree-bottom.png) no-repeat 11px center; /* LTR */
+}
+div.tree-child-horizontal {
+  background: url(../../misc/tree.png) no-repeat -11px center;
+}
+
+/**
+ * Progress bar
+ */
+.progress {
+  font-weight: bold;
+}
+.progress .bar {
+  border-radius: 3px;
+  -moz-border-radius: 3px;
+  -webkit-border-radius: 3px;
+  background: #ccc;
+  border: 1px solid #666;
+  margin: 0 0.2em;
+}
+.progress .filled {
+  background: #0072b9 url(../../misc/progress.gif);
+  height: 1.5em;
+  width: 0%;
+}
+.progress .percentage {
+  float: right; /* LTR */
+}
+.progress-disabled {
+  float: left; /* LTR */
+}
+.ajax-progress {
+  float: left; /* LTR */
+}
+.ajax-progress .throbber {
+  width: 15px;
+  height: 15px;
+  margin: 2px;
+  background: transparent url(../../misc/throbber.gif) no-repeat 0px -18px;
+  float: left; /* LTR */
+}
+tr .ajax-progress .throbber {
+  margin: 0 2px;
+}
+.ajax-progress-bar {
+  width: 16em;
+}
+
+/**
+ * Multiselect form
+ */
+dl.multiselect dd, dl.multiselect dd .form-item, dl.multiselect dd select {
+  font-family: inherit;
+  font-size: inherit;
+  width: 14em;
+}
+dl.multiselect dt, dl.multiselect dd {
+  float: left; /* LTR */
+  line-height: 1.75em;
+  padding: 0;
+  margin: 0 1em 0 0; /* LTR */
+}
+dl.multiselect .form-item {
+  height: 1.75em;
+  margin: 0;
+}
+
+/**
+ * Password strength indicator
+ */
+#password-strength {
+  width: 17em;
+  float: right;  /* LTR */
+  margin-top: 1.4em;
+}
+.password-strength-title {
+  display: inline;
+}
+#password-strength-text {
+  float: right; /* LTR */
+  font-weight: bold;
+}
+#password-indicator {
+  background-color: #C4C4C4;
+  height: 0.3em;
+  width: 100%;
+}
+#password-indicator div {
+  height: 100%;
+  width: 0%;
+  background-color: #47C965;
+}
+input.password-confirm, input.password-field {
+  width: 16em;
+  margin-bottom: 0.4em;
+}
+div.password-confirm {
+  display: inline;
+  padding-left: 1em;
+}
+div.password-suggestions {
+  padding: 0.2em 0.5em;
+  margin: 0.7em 0;
+  width: 38.5em;
+  border: 1px solid #B4B4B4;
+}
+div.password-suggestions ul {
+  margin-bottom: 0;
+}
+.password-parent {
+  margin: 0;
+  width: 34.3em;
+}
+
+/**
+ * Password confirmation checker
+ */
+.confirm-parent {
+  margin: 0;
+}
+div.password-confirm {
+  visibility: hidden;
+}
+
+/**
+ * Inline items (need to override above)
+ */
+.container-inline div, .container-inline label {
+  display: inline;
+}
+
+.nowrap {
+  white-space: nowrap;
+}
+
+/**
+ * For anything you want to hide on page load when JS is enabled, so
+ * that you can use the JS to control visibility and avoid flicker.
+ */
+html.js .js-hide {
+  display: none;
+}
+
+/**
+ * Hide elements from all users.
+ *
+ * Used for elements which should not be immediately displayed to any user. An
+ * example would be a collapsible fieldset that will be expanded with a click
+ * from a user. The effect of this class can be toggled with the jQuery show()
+ * and hide() functions.
+ */
+.element-hidden {
+  display: none;
+}
+
+/**
+ * Hide elements visually, but keep them available for screen-readers.
+ *
+ * Used for information required for screen-reader users to understand and use
+ * the site where visual display is undesirable. Information provided in this
+ * manner should be kept concise, to avoid unnecessary burden on the user. Must
+ * not be used for focusable elements (such as links and form elements) as this
+ * causes issues for keyboard only or voice recognition users.
+ */
+.element-invisible {
+  height: 0;
+  overflow: hidden;
+  position: absolute;
+}
diff --git a/modules/system/system-rtl.css b/modules/system/system-rtl.css
index 4c4b0601b..88c4072a2 100644
--- a/modules/system/system-rtl.css
+++ b/modules/system/system-rtl.css
@@ -1,5 +1,11 @@
 /* $Id$ */
 
+th {
+  text-align: right;
+  padding-right: 0;
+  padding-left: 1em;
+}
+
 thead th {
   text-align: right;
   padding-left: 1em;
@@ -27,11 +33,6 @@ thead th {
   background-position: 100% 50%;
 }
 
-dl.multiselect dt, dl.multiselect dd {
-  float: right;
-  margin: 0 0 0 1em;
-}
-
 .block ul {
   padding: 0 1em 0.25em 0;
 }
@@ -49,47 +50,6 @@ ul.secondary li {
   border-right: none;
   border-left: 1px solid #ccc;
 }
-html.js input.form-autocomplete {
-  background-position: 0% 2px;
-}
-html.js input.throbbing {
-  background-position: 0% -18px;
-}
-
-html.js fieldset.collapsible legend a {
-  padding-left: 0;
-  padding-right: 15px;
-  background-position: 98% 75%;
-}
-html.js fieldset.collapsed legend a {
-  background-image: url(../../misc/menu-collapsed-rtl.png);
-  background-position: 98% 50%;
-}
-
-.teaser-checkbox div.form-item {
-  float: left;
-  margin: 0 0 0 5%;
-}
-.progress .percentage {
-  float: left;
-}
-.progress-disabled {
-  float: right;
-}
-.ajax-progress {
-  float: right;
-}
-.ajax-progress .throbber {
-  float: right;
-}
-input.password-field {
-  margin-left: 10px;
-  margin-right: 0;
-}
-input.password-confirm {
-  margin-left: 10px;
-  margin-right: 0;
-}
 
 .system-themes-list-enabled .theme-selector .screenshot,
 .system-themes-list-enabled .theme-selector .no-screenshot {
@@ -112,24 +72,3 @@ input.password-confirm {
 .theme-selector .operations li.first {
   padding: 0 0 0 0.7em;
 }
-
-.password-strength-title {
-  float: right;
-}
-.password-parent {
-  float: right;
-}
-
-.draggable a.tabledrag-handle {
-  float: right;
-  margin: -0.4em -0.5em -0.4em 0;
-  padding: 0.42em 0.5em 0.42em 1.5em;
-}
-div.indentation {
-  margin: -0.4em -0.4em -0.4em 0.2em;
-  padding: 0.42em 0.6em 0.42em 0;
-  float: right;
-}
-div.tree-child, div.tree-child-last {
-  background-position: -65px center;
-}
diff --git a/modules/system/system.css b/modules/system/system.css
index 695f80c65..33ba6720f 100644
--- a/modules/system/system.css
+++ b/modules/system/system.css
@@ -3,8 +3,28 @@
 /*
 ** HTML elements
 */
-body.drag {
-  cursor: move;
+fieldset {
+  margin-bottom: 1em;
+  padding: .5em;
+}
+form {
+  margin: 0;
+  padding: 0;
+}
+hr {
+  height: 1px;
+  border: 1px solid gray;
+}
+img {
+  border: 0;
+}
+table {
+  border-collapse: collapse;
+}
+th {
+  text-align: left; /* LTR */
+  padding-right: 1em; /* LTR */
+  border-bottom: 3px solid #ccc;
 }
 th.active img {
   display: inline;
@@ -44,22 +64,6 @@ thead th {
 .breadcrumb {
   padding-bottom: .5em
 }
-div.indentation {
-  width: 20px;
-  height: 1.7em;
-  margin: -0.4em 0.2em -0.4em -0.4em; /* LTR */
-  padding: 0.42em 0 0.42em 0.6em; /* LTR */
-  float: left; /* LTR */
-}
-div.tree-child {
-  background: url(../../misc/tree.png) no-repeat 11px center; /* LTR */
-}
-div.tree-child-last {
-  background: url(../../misc/tree-bottom.png) no-repeat 11px center; /* LTR */
-}
-div.tree-child-horizontal {
-  background: url(../../misc/tree.png) no-repeat -11px center;
-}
 .error {
   color: #e55;
 }
@@ -111,9 +115,6 @@ div.ok, tr.ok {
   padding: 0;
   list-style: disc;
 }
-ol.task-list li.active {
-  font-weight: bold;
-}
 .form-item {
   margin-top: 1em;
   margin-bottom: 1em;
@@ -182,9 +183,6 @@ a.module-link-configure {
   margin-left: 1em; /* LTR */
   float: right; /* LTR */
 }
-.nowrap {
-  white-space: nowrap;
-}
 .item-list .pager {
   clear: both;
   text-align: center;
@@ -205,33 +203,11 @@ a.module-link-configure {
   padding-bottom: 0;
   font-size: 0.9em;
 }
-dl.multiselect dd, dl.multiselect dd .form-item, dl.multiselect dd select {
-  font-family: inherit;
-  font-size: inherit;
-  width: 14em;
-}
-dl.multiselect dt, dl.multiselect dd {
-  float: left; /* LTR */
-  line-height: 1.75em;
-  padding: 0;
-  margin: 0 1em 0 0; /* LTR */
-}
-dl.multiselect .form-item {
-  height: 1.75em;
-  margin: 0;
-}
 .compact-link {
   margin: 0 0 0.5em 0;
 }
 
 /*
-** Inline items (need to override above)
-*/
-.container-inline div, .container-inline label {
-  display: inline;
-}
-
-/*
 ** Tab navigation
 */
 ul.primary {
@@ -286,207 +262,6 @@ ul.secondary a.active {
 }
 
 /*
-** Autocomplete styles
-*/
-/* Suggestion list */
-#autocomplete {
-  position: absolute;
-  border: 1px solid;
-  overflow: hidden;
-  z-index: 100;
-}
-#autocomplete ul {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  list-style-image: none;
-}
-#autocomplete li {
-  background: #fff;
-  color: #000;
-  white-space: pre;
-  cursor: default;
-}
-#autocomplete li.selected {
-  background: #0072b9;
-  color: #fff;
-}
-/* Animated throbber */
-html.js input.form-autocomplete {
-  background-image: url(../../misc/throbber.gif);
-  background-repeat: no-repeat;
-  background-position: 100% 2px; /* LTR */
-}
-html.js input.throbbing {
-  background-position: 100% -18px; /* LTR */
-}
-
-/*
-** Collapsing fieldsets
-*/
-html.js fieldset.collapsed {
-  border-bottom-width: 0;
-  border-left-width: 0;
-  border-right-width: 0;
-  margin-bottom: 0;
-  height: 1em;
-}
-html.js fieldset.collapsed * {
-  display: none;
-}
-html.js fieldset.collapsed legend, html.js fieldset.collapsed legend a span.element-invisible {
-  display: block;
-  overflow: hidden;
-}
-html.js fieldset.collapsible legend a {
-  display: inline;
-  padding-left: 15px; /* LTR */
-  background: url(../../misc/menu-expanded.png) 5px 75% no-repeat; /* LTR */
-}
-html.js fieldset.collapsible legend span.summary {
-  display: inline;
-  font-size: 0.9em;
-  color: #999;
-  margin-left: 0.5em;
-}
-html.js fieldset.collapsed legend a {
-  background-image: url(../../misc/menu-collapsed.png); /* LTR */
-  background-position: 5px 50%; /* LTR */
-}
-/* Note: IE-only fix due to '* html' (breaks Konqueror otherwise). */
-* html.js fieldset.collapsed legend,
-* html.js fieldset.collapsed legend *,
-* html.js fieldset.collapsed table * {
-  display: inline;
-}
-/* For Safari 2 to prevent collapsible fieldsets containing tables from dissapearing due to tableheader.js. */
-html.js fieldset.collapsible {
-  position: relative;
-}
-/* Avoid jumping around due to margins collapsing into collapsible fieldset border */
-html.js fieldset.collapsible .fieldset-wrapper {
-  overflow: auto;
-}
-
-/*
-** Resizable text areas
-*/
-.resizable-textarea {
-  width: 95%;
-}
-.resizable-textarea .grippie {
-  height: 9px;
-  overflow: hidden;
-  background: #eee url(../../misc/grippie.png) no-repeat center 2px;
-  border: 1px solid #ddd;
-  border-top-width: 0;
-  cursor: s-resize;
-}
-html.js .resizable-textarea textarea {
-  margin-bottom: 0;
-  width: 100%;
-  display: block;
-}
-
-/*
-** Table drag and drop.
-*/
-.draggable a.tabledrag-handle {
-  cursor: move;
-  float: left; /* LTR */
-  height: 1.7em;
-  margin: -0.4em 0 -0.4em -0.5em; /* LTR */
-  padding: 0.42em 1.5em 0.42em 0.5em; /* LTR */
-  text-decoration: none;
-}
-a.tabledrag-handle:hover {
-  text-decoration: none;
-}
-a.tabledrag-handle .handle {
-  margin-top: 4px;
-  height: 13px;
-  width: 13px;
-  background: url(../../misc/draggable.png) no-repeat 0 0;
-}
-a.tabledrag-handle-hover .handle {
-  background-position: 0 -20px;
-}
-
-/*
-** Teaser splitter
-*/
-.joined + .grippie {
-  height: 5px;
-  background-position: center 1px;
-  margin-bottom: -2px;
-}
-/* Keeps inner content contained in Opera 9. */
-.teaser-checkbox {
-  padding-top: 1px;
-}
-.teaser-checkbox div.form-item {
-  float: right; /* LTR */
-  margin: 0 5% 0 0; /* LTR */
-  padding: 0;
-}
-textarea.teaser {
-  display: none;
-}
-html.js .no-js {
-  display: none;
-}
-
-/*
-** Progressbar styles
-*/
-.progress {
-  font-weight: bold;
-}
-.progress .bar {
-  border-radius: 3px;
-  -moz-border-radius: 3px;
-  -webkit-border-radius: 3px;
-  background: #ccc;
-  border: 1px solid #666;
-  margin: 0 0.2em;
-}
-.progress .filled {
-  background: #0072b9 url(../../misc/progress.gif);
-  height: 1.5em;
-  width: 0%;
-}
-.progress .percentage {
-  float: right; /* LTR */
-}
-.progress-disabled {
-  float: left; /* LTR */
-}
-.ajax-progress {
-  float: left; /* LTR */
-}
-.ajax-progress .throbber {
-  width: 15px;
-  height: 15px;
-  margin: 2px;
-  background: transparent url(../../misc/throbber.gif) no-repeat 0px -18px;
-  float: left; /* LTR */
-}
-tr .ajax-progress .throbber {
-  margin: 0 2px;
-}
-.ajax-progress-bar {
-  width: 16em;
-}
-
-/*
-** Formatting for welcome page
-*/
-#first-time strong {
-  display: block;
-  padding: 1.5em 0 .5em;
-}
-
-/*
 ** To be used with tableselect.js
 */
 tr.selected td {
@@ -502,21 +277,6 @@ table.sticky-header {
 }
 
 /*
-** Installation clean URLs
-*/
-#clean-url.install {
-  display: none;
-}
-
-/*
-** For anything you want to hide on page load when JS is enabled, so
-** that you can use the JS to control visibility and avoid flicker.
-*/
-html.js .js-hide {
-  display: none;
-}
-
-/*
 ** Styles for the system modules page (admin/modules)
 */
 #system-modules div.incompatible {
@@ -610,85 +370,26 @@ html.js .js-hide {
 }
 
 /*
-** Password strength indicator
-*/
-#password-strength {
-  width: 17em;
-  float: right;  /* LTR */
-  margin-top: 1.4em;
-}
-.password-strength-title {
-  display: inline;
-}
-#password-strength-text {
-  float: right; /* LTR */
-  font-weight: bold;
-}
-#password-indicator {
-  background-color: #C4C4C4;
-  height: 0.3em;
-  width: 100%;
-}
-#password-indicator div {
-  height: 100%;
-  width: 0%;
-  background-color: #47C965;
-}
-input.password-confirm, input.password-field {
-  width: 16em;
-  margin-bottom: 0.4em;
-}
-div.password-confirm {
-  display: inline;
-  padding-left: 1em;
-}
-div.password-suggestions {
-  padding: 0.2em 0.5em;
-  margin: 0.7em 0;
-  width: 38.5em;
-  border: 1px solid #B4B4B4;
-}
-div.password-suggestions ul {
-  margin-bottom: 0;
-}
-.password-parent {
-  margin: 0;
-  width: 34.3em;
-}
-
-/*
-** Password confirmation checker
+** Markup free clearing
+** Details: http://www.positioniseverything.net/easyclearing.html
 */
-.confirm-parent {
-  margin: 0;
-}
-div.password-confirm {
+.clearfix:after {
+  content: ".";
+  display: block;
+  height: 0;
+  clear: both;
   visibility: hidden;
 }
 
-/**
- * Hide elements from all users.
- *
- * Used for elements which should not be immediately displayed to any user. An
- * example would be a collapsible fieldset that will be expanded with a click
- * from a user. The effect of this class can be toggled with the jQuery show()
- * and hide() functions.
- */
-.element-hidden {
-  display: none;
+.clearfix {
+  display: inline-block;
 }
 
-/**
- * Hide elements visually, but keep them available for screen-readers.
- *
- * Used for information required for screen-reader users to understand and use
- * the site where visual display is undesirable. Information provided in this
- * manner should be kept concise, to avoid unnecessary burden on the user. Must
- * not be used for focusable elements (such as links and form elements) as this
- * causes issues for keyboard only or voice recognition users.
- */
-.element-invisible {
-  height: 0;
-  overflow: hidden;
-  position: absolute;
+/* Hides from IE-mac \*/
+* html .clearfix {
+  height: 1%;
+}
+.clearfix {
+  display: block;
 }
+/* End hide from IE-mac */
diff --git a/modules/system/system.module b/modules/system/system.module
index 067f171c8..e8a6c4fa4 100644
--- a/modules/system/system.module
+++ b/modules/system/system.module
@@ -1741,8 +1741,8 @@ function system_init() {
   if (arg(0) == 'admin' || (variable_get('node_admin_theme', '0') && arg(0) == 'node' && (arg(1) == 'add' || arg(2) == 'edit' || arg(2) == 'delete'))) {
     drupal_add_css(drupal_get_path('module', 'system') . '/admin.css', array('weight' => CSS_SYSTEM));
   }
-  drupal_add_css(drupal_get_path('module', 'system') . '/defaults.css', array('weight' => CSS_SYSTEM));
   drupal_add_css(drupal_get_path('module', 'system') . '/system.css', array('weight' => CSS_SYSTEM));
+  drupal_add_css(drupal_get_path('module', 'system') . '/system-behavior.css', array('weight' => CSS_SYSTEM));
   drupal_add_css(drupal_get_path('module', 'system') . '/system-menus.css', array('weight' => CSS_SYSTEM));
 
 
diff --git a/modules/user/user.css b/modules/user/user.css
index 769ec1ee1..5a1bf5c67 100644
--- a/modules/user/user.css
+++ b/modules/user/user.css
@@ -9,7 +9,7 @@
 #permissions tr.odd .form-item, #permissions tr.even .form-item {
   white-space: normal;
 }
-/* Override the default multiselect layout in system.css. */
+/* Override the default multiselect layout in system-behavior.css. */
 #user-filter-form dl.multiselect dd, dl.multiselect dd .form-item {
   width: 20em; /* 6em label + 14em select */
 }