From 3f7c59294fa97636d8825b60dfbef5e4a35e2cc8 Mon Sep 17 00:00:00 2001
From: Tom Kirkpatrick <tom@systemseed.com>
Date: Sat, 25 Aug 2012 00:43:08 +0200
Subject: [PATCH 17/17] Updated form style

---
 core/themes/seven/ie.css                  |   19 +-
 core/themes/seven/images/icon-twistie.png |  Bin 0 -> 1274 bytes
 core/themes/seven/style-rtl.css           |   34 +-
 core/themes/seven/style.css               |  655 ++++++++++++++++++++---------
 4 files changed, 478 insertions(+), 230 deletions(-)
 create mode 100644 core/themes/seven/images/icon-twistie.png

diff --git a/core/themes/seven/ie.css b/core/themes/seven/ie.css
index d1a71ce..a806b99 100644
--- a/core/themes/seven/ie.css
+++ b/core/themes/seven/ie.css
@@ -1,12 +1,9 @@
-/* IE renders absolute positioned legend where fieldset content starts. */
-fieldset .fieldset-legend {
-  left: 0;
-  top: 0;
-}
-
-/* IE renders monospace font too big. */
-code,
-pre,
-kbd {
-  font-size: 1em;
+/* Fake the top borders of fieldsets in IE8. */
+fieldset legend {
+  border-left: 1px solid #ccc;
+  border-right: 1px solid #ccc;
+  border-top: 1px solid #ccc;
+  margin-left: -1px;
+  margin-right: -1px;
+  margin-top: -1px;
 }
diff --git a/core/themes/seven/images/icon-twistie.png b/core/themes/seven/images/icon-twistie.png
new file mode 100644
index 0000000000000000000000000000000000000000..5533d3447b171cf9d1be3ad379927da7a31677c2
GIT binary patch
literal 1274
zcmeAS@N?(olHy`uVBq!ia0vp^JV30%!3HGvcHQ0sq$EpRBT9nv(@M${i&7aJQ}UBi
z6+Ckj(^G>|6H_V+Po~;1FfeCihD4M^`1)8S=jZArg4F0$<Q4#RGcefLR}>^BXQ!4Z
zB&DWj=GiK}-@RW+Av48RDcsc8z_-9TH6zobswg$M$}c3jDm&RSMakYy!KT6rXh3di
zNuokUZcbjYRfVk**jy_h8zii+qySb@l5ML5aa4qFfP!;=QL2Kep0RGSfuW&-nVFuU
ziK&^Hp^k!)fuWJU0T7w#8k$&{npqi{D?ot~(6*wKG^-#NH>h1eo~=?wNlAf~zJ7Um
zxn8-kUVc%!zM-Y1CCCgTBVC{h-Qvo;lEez#ykcdT2`;I{$wiq3C7Jno3Lp~`lk!VT
zY?Xj6g?J&iz}FXUa9%MqpnyT9Uy)d#Z>VRWpPLKv7g%+1Nl+@n8CX>phg24%>IbD3
z=a&{G1LGr28KxN+cK9s<DFnL4%D*TR7%7Q4F8Rr&xv6<2o-VdZKpDN1%oHm(3v)L^
zLvs@Yb0Y&Y3qwN-XG0Sw7e_O5R|_*kHzyaE8QAnX8JSs_nwc9oJDa*18oC-<I=dLS
zIU1X}nHZZp892iAdgc|EB<3Zj!tBii+6&QZ=7v|Vm2**QVo82cNPd0}ECmE)<d@_Z
zXXF<sI0u_4X!s^3XXb$fG(iyr@vlp2QD#|cid#{Bt^zoOtunE=z|E47&mnqK$O$!l
zpkwqw$pb05z=VKl5X6Khejo>)eNyv)d8P=MIm}hE^%)o#H9TD$Ln>}1{rUgjp4mu4
zLnDDXXurgT11+4w2TX*S)ow5yvEi{`Fyme4P{Y&lwBsrR(=LY^p^md4mXJdYLx(Mh
zH7CISslaMR<_!W9{_`CvblB4-!K>eJL%zdbF!^w*!Z*f8?nhcKIVzMLSSB%@H}A$I
zHXegT%T=8ko+K>Y%O;lb>ptHRKb9-+n3Md~GCEis56@%t-_vmAPm|?KWs^m5$$@{Q
zw7v`8<?ml0bpPTdA+Mgr)lyUPlp22Mi?|C+o@Ul~ib)}@ZPQDc%Q_xU1<fkW5-PuR
zM@UyJ_&IZhjuw098t)$YGYe8D=^4)Z)-cUg=txTt-xbL@Ca3v>7kECj)-+qwI88#|
zqfkg=<IKmW<ahk}z>#&?G05gGUzFQIh6V;^hF=$)UnQGq<%3EiPgg&ebxsLQ0Q7pL
A5C8xG

literal 0
HcmV?d00001

diff --git a/core/themes/seven/style-rtl.css b/core/themes/seven/style-rtl.css
index 7070720..89efd74 100644
--- a/core/themes/seven/style-rtl.css
+++ b/core/themes/seven/style-rtl.css
@@ -29,13 +29,6 @@ ol {
 }
 
 /**
- * Branding.
- */
-#branding {
-  padding: 20px 20px 0 20px;
-}
-
-/**
  * Help.
  */
 #help div.more-help-link {
@@ -45,7 +38,7 @@ ol {
 /**
  * Page title.
  */
-#branding h1.page-title {
+#branding .page-title {
   float: right;
 }
 
@@ -71,11 +64,6 @@ ul.primary {
 /**
  * Page layout.
  */
-#page {
-  padding: 20px 0 40px 0;
-  margin-left: 40px;
-  margin-right: 40px;
-}
 ul.links li,
 ul.inline li {
   padding-left: 1em;
@@ -127,9 +115,6 @@ fieldset .fieldset-legend {
   padding-right: 15px;
   right: 0;
 }
-fieldset .fieldset-wrapper {
-  padding: 0 15px 13px 13px;
-}
 
 /* Filter */
 .filter-wrapper .form-item,
@@ -137,9 +122,6 @@ fieldset .fieldset-wrapper {
 .filter-wrapper .filter-help {
   padding: 2px 0 0 0;
 }
-ul.tips li {
-  margin: 0.25em 1.5em 0.25em 0;
-}
 body div.form-type-radio div.description,
 body div.form-type-checkbox div.description {
   margin-left: 0;
@@ -150,11 +132,14 @@ a.button {
   margin-left: 1em;
   margin-right: 0;
 }
-ul.action-links li {
+.action-links {
+  padding-right: 0;
+}
+.action-links > li {
   float: right;
   margin: 0 0 0 1em;
 }
-ul.action-links a {
+.action-links a {
   padding-left: 0;
   padding-right: 15px;
   background-position: right center;
@@ -189,6 +174,13 @@ ol.task-list li.active {
 }
 
 /* Overlay theming */
+@media screen and (min-width: 900px) {
+  #overlay {
+    padding-left: 48px;
+    padding-right: 36px;
+  }
+}
+
 .overlay #branding .breadcrumb {
   float: right;
 }
diff --git a/core/themes/seven/style.css b/core/themes/seven/style.css
index c7ac615..81ecdc3 100644
--- a/core/themes/seven/style.css
+++ b/core/themes/seven/style.css
@@ -21,9 +21,6 @@ hr {
   height: 1px;
   background: #cccccc;
 }
-legend {
-  font-weight: bold;
-}
 h1,
 h2,
 h3,
@@ -91,9 +88,6 @@ sup {
   font-size: smaller;
   line-height: normal;
 }
-nobr {
-  white-space: nowrap;
-}
 abbr,
 acronym {
   border-bottom: dotted 1px;
@@ -135,11 +129,6 @@ quote,
 code {
   margin: .5em 0;
 }
-code,
-pre,
-kbd {
-  font-size: 1.231em;
-}
 pre {
   margin: 0.5em 0;
   white-space: pre-wrap;
@@ -178,8 +167,9 @@ pre {
  * Branding.
  */
 #branding {
+  background-color: #e0e0d8;
   overflow: hidden;
-  padding: 20px 20px 0 20px; /* LTR */
+  padding: 20px 4% 0;
   position: relative;
   background-color: #e0e0d8;
 }
@@ -222,7 +212,7 @@ pre {
  * Console.
  */
 #console {
-  margin: 9px 0 10px;
+  margin: .5em 0;
 }
 
 /**
@@ -252,6 +242,7 @@ ul.primary li.active a {
   float: left; /* LTR */
   height: 2.60em;
   line-height: 2.60em;
+  margin: 0;
   padding: 0 18px 8px;
   background-color: #a6a7a2;
   color: #000;
@@ -279,6 +270,7 @@ ul.primary li.active a:hover {
   clear: both;
 }
 ul.secondary {
+  border: 0;
   float: right; /* LTR */
   font-size: 0.923em;
   padding: 0 3px 5px;
@@ -288,7 +280,9 @@ ul.secondary {
 }
 ul.secondary li {
   margin: 0 5px;
+  border: 0;
   float: none; /* LTR */
+  padding: 0 10px 0 0; /* LTR */
 }
 ul.secondary li a {
   background-color: #ddd;
@@ -302,6 +296,7 @@ ul.secondary li.active a.active {
   padding: 2px 10px;
   -moz-border-radius: 7px;
   border-radius: 7px;
+  border: 0;
 }
 ul.secondary li a:hover,
 ul.secondary li.active a,
@@ -312,14 +307,11 @@ ul.secondary li.active a.active {
 #content {
   clear: left;
 }
-
 /**
  * Page layout.
  */
 #page {
-  padding: 20px 0 40px 0; /* LTR */
-  margin-right: 40px; /* LTR */
-  margin-left: 40px; /* LTR */
+  padding: 0 4% 15px;
   background: #fff;
   position: relative;
   color: #333;
@@ -478,107 +470,174 @@ tr td:last-child {
   border-right: 1px solid #bebfb9; /* LTR */
 }
 
-
 /**
- * Fieldsets.
- *
- * Fieldset legends are displayed like containers in Seven. However, several
- * browsers do not support styling of LEGEND elements. To achieve the desired
- * styling:
- * - All fieldsets use 'position: relative'.
- * - All legend labels are wrapped in a single span.fieldset-legend that uses
- *   'position: absolute', which means that the LEGEND element itself is not
- *   rendered by browsers.
- * - Due to using 'position: absolute', collapsed fieldsets do not have a
- *   height; the fieldset requires a 'padding-top' to make the absolute
- *   positioned .fieldset-legend appear as though it would have a height.
- * - Various browsers are positioning the legend differently if there is a
- *   'padding-left'/'padding-right' applied on a fieldset and inherit the
- *   positioning even to absolute positioned elements within; we therefore have
- *   to apply all padding to the inner .fieldset-wrapper instead.
+ * Forms
  */
-fieldset {
-  border: 1px solid #ccc;
-  padding: 2.5em 0 0 0; /* LTR */
-  position: relative;
-  margin: 1em 0;
+input,
+textarea,
+select {
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+}
+select[multiple] {
+  display: block;
 }
-fieldset .fieldset-legend {
-  margin-top: 0.5em;
-  padding-left: 15px; /* LTR */
-  position: absolute;
-  text-transform: uppercase;
+#diff-inline-form select,
+div.filter-options select {
+  padding: 0;
 }
-fieldset .fieldset-wrapper {
-  padding: 0 13px 13px 15px; /* LTR */
+.form-autocomplete,
+.form-text,
+.form-tel,
+.form-email,
+.form-url,
+.form-search,
+.form-number,
+.form-color,
+.form-file,
+.form-textarea {
+  background: #f7f7f7;
+  -moz-border-radius: 0;
+  border-radius: 0;
+  border: 1px solid #bbb;
+  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
+  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .2);
+  color: #333;
+  padding: .5em;
+  -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
+  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+  transition: border linear 0.2s, box-shadow linear 0.2s;
 }
-fieldset.collapsed {
-  background-color: transparent;
+td .form-autocomplete,
+td .form-text,
+td .form-tel,
+td .form-email,
+td .form-url,
+td .form-search,
+td .form-number,
+td .form-color {
+  padding-bottom: .25em;
+  padding-top: .25em;
+}
+.form-autocomplete,
+.form-text,
+.form-tel,
+.form-email,
+.form-url,
+.form-search,
+.form-number,
+.form-color,
+textarea {
+  max-width: 100%;
+}
+.form-text:focus,
+.form-tel:focus,
+.form-email:focus,
+.form-url:focus,
+.form-search:focus,
+.form-number:focus,
+.form-color:focus,
+.form-file:focus,
+textarea:focus {
+  background-color: #f9f9f9;
 }
-.js fieldset.collapsed {
-  border-width: 1px;
-  height: auto;
+.form-disabled input.form-autocomplete,
+.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 {
+  background-color: #eee;
+  color: #777;
 }
-fieldset fieldset {
-  background-color: #fff;
+.image-widget-data {
+  float: none;
 }
-fieldset fieldset fieldset {
-  background-color: #f8f8f8;
+.form-file {
+  max-width: 60%;
+}
+.js input.form-autocomplete {
+  background-position: 100% 8px;
+}
+.js input.throbbing {
+  background-position: 100% -12px;
 }
 
 /**
- * Form elements.
+ * Form items
  */
-.form-item {
-  padding: 9px 0;
-  margin: 0 0 10px;
+.form-item,
+[class*="field-name-field-"] {
+  margin: 0 0 8px 0;
+  padding-bottom: 8px;
+  padding-top: 8px;
+}
+.form-item:last-child {
+  margin-bottom: 0;
+}
+.text-format-wrapper .form-item {
+  padding-bottom: 0;
 }
 .filter-wrapper .form-item,
 div.teaser-checkbox .form-item,
 .form-item .form-item {
-  padding: 5px 0;
-  margin: 0;
   border: 0;
+  margin: 0;
+  padding: 3px 0;
 }
-.form-type-checkbox {
-  padding: 0;
-}
-.text-format-wrapper .form-item {
+tr .form-item {
   padding-bottom: 0;
+  padding-top: 0;
 }
-.form-item label {
-  margin: 0;
-  padding: 0;
+.form-type-checkbox  *[style] {
+  margin-top: 1em;
 }
-.form-item label.option {
+
+/**
+ * Labels
+ */
+label {
+  font-size: 1.077em;
+  margin-bottom: .4em;
+}
+label[for] {
+  cursor: pointer; /* Labels with explicit associations are clickable. */
+}
+label[for="edit-filters-order"] {
+  float: left;
+}
+label.option {
   font-size: 0.923em;
   text-transform: none;
 }
-.form-item label.option input {
+label.option input {
   vertical-align: middle;
 }
-.form-disabled input.form-autocomplete,
-.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 {
-  background-color: #eee;
-  color: #777;
+
+/**
+ * Checkboxes and Radios
+ */
+.form-type-checkbox {
+  margin: 8px 0;
+  padding: 0;
+}
+input.form-checkbox,
+input.form-radio {
+  vertical-align: baseline;
 }
 
 /* Filter */
 .filter-wrapper {
   border-top: 0;
-  padding: 10px 2px;
-}
-.filter-wrapper .fieldset-wrapper {
-  padding: 0 6px;
+  padding: 0;
+  overflow: hidden;
 }
 .filter-wrapper .form-item,
 .filter-wrapper .filter-guidelines,
@@ -586,13 +645,15 @@ div.teaser-checkbox .form-item,
   font-size: 0.923em;
   padding: 2px 0 0 0; /* LTR */
 }
-ul.tips,
-div.description,
-.form-item div.description {
-  margin: 5px 0;
-  line-height: 1.231em;
-  font-size: 0.923em;
+.tips,
+.description,
+.form-item .description {
   color: #666;
+  font-size: 12px;
+  font-weight: 300;
+  line-height: 1.4em;
+  margin: 5px 0;
+  text-shadow: none;
 }
 ul.tips li {
   margin: 0.25em 0 0.25em 1.5em; /* LTR */
@@ -601,107 +662,281 @@ body div.form-type-radio div.description,
 body div.form-type-checkbox div.description {
   margin-left: 1.5em; /* LTR */
 }
-input.form-submit,
+
+
+/**
+ * Fieldsets
+ */
+fieldset {
+  border: 1px solid #ccc;
+  margin: 1em 0;
+  padding: 0; /* LTR */
+}
+fieldset fieldset {
+  background-color: #fff;
+}
+fieldset fieldset fieldset {
+  background-color: #f8f8f8;
+}
+fieldset .fieldset-wrapper {
+  clear: both;
+  margin-bottom: 13px;
+  margin-top: 13px;
+  padding: 0 13px;
+}
+
+/**
+ * Fieldset Legends
+ * 1. Emulate display: block in modern browsers
+ */
+legend {
+  float: left; /* 1. */
+  font-size: 1.077em;
+  font-weight: bold;
+  margin: .75em 0 .5em 0;
+  padding: 0;
+  width: 100%; /* 1. */
+}
+fieldset .fieldset-legend {
+  line-height: 1.25em;
+  padding-left: 13px; /* LTR; @todo */
+  text-transform: uppercase;
+}
+
+/**
+ * Collapsible fieldsets
+ */
+fieldset.collapsed {
+  background-color: transparent;
+}
+.js fieldset.collapsed {
+  border-width: 1px;
+  height: auto;
+}
+.js fieldset.collapsible > legend {
+  font-size: 13px;
+  margin-bottom: 0;
+  margin-top: 0;
+  padding: 0;
+}
+/* 1. Override standard menu-expanded/collapsed bg images */
+.js fieldset.collapsible > legend .fieldset-legend {
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+.js fieldset.collapsible > legend .fieldset-legend a {
+  background-image: none;
+  padding-left: 25px;
+}
+/* Reduce spacing and smooth animation for contents */
+/* @todo find a better solution */
+.collapsible .form-item {
+  margin: 0;
+}
+.collapsible .form-type-checkbox {
+  padding: 4px 0;
+}
+/* Fieldset toggle <a> */
+.collapsible .fieldset-title {
+  display: block;
+  outline: 0;
+  padding: 1em 13px 1em 26px;
+  text-decoration: none;
+}
+/* New expanded/collapsed icons are their own elements, so background overflow
+* with sprites is no longer an issue. */
+.js .collapsible .fieldset-title:before {
+  background: transparent url(images/icon-twistie.png) no-repeat 0 -12px;
+  content: '';
+  display: block;
+  height: 12px;
+  left: 10px;
+  overflow: hidden;
+  position: absolute;
+  top: 1.15em;
+  width: 12px;
+}
+.js .collapsed .fieldset-title:before {
+  background-position: 0 0; /* LTR; @todo RTL */
+}
+.js .fieldset-title:hover .fieldset-title-text {
+  text-decoration: underline;
+}
+.fieldset-legend span.summary {
+  display: none;
+}
+/* body class to re-enable summaries */
+.show-collapsible-summaries .fieldset-legend span.summary {
+  display: inline;
+  font-size: .95em;
+  font-weight: normal;
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+  text-shadow: none;
+  text-transform: none;
+}
+
+/**
+ * Buttons
+ *
+ * 1. Font metrics matter for vertical centering of button text. Choose a single
+ *    consistent typeface.
+ * 2. Image file gradient fallback
+ */
+.form-submit,
 .form-button {
+  background: #f9f9f9 url(images/buttons.png) repeat-x left top; /* 2 */
+  background: #f9f9f9 -moz-linear-gradient(top, transparent, rgba(0, 0, 0, .12));
+  background: #f9f9f9 -ms-linear-gradient(top, transparent, rgba(0, 0, 0, .12));
+  background: #f9f9f9 -o-linear-gradient(top, transparent, rgba(0, 0, 0, .12));
+  background: #f9f9f9 -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, .12));
+  background: #f9f9f9 linear-gradient(top, transparent, rgba(0, 0, 0, .12));
+  border: 1px solid #999;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .4);
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .4);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(255, 255, 255, .4);
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: #222;
   cursor: pointer;
-  padding: 4px 17px;
-  margin-bottom: 1em;
-  margin-right: 1em; /* LTR */
-  color: #5a5a5a;
+  display: inline-block;
+  font-family: Arial, sans-serif; /* 1 */
+  line-height: 1em;
+  padding: 8px 2.5em;
   text-align: center;
-  font-weight: normal;
-  font-size: 1.077em;
-  font-family: "Lucida Grande", Verdana, sans-serif;
-  border: 1px solid #e4e4e4;
-  border-bottom: 1px solid #b4b4b4;
-  border-left-color: #d2d2d2;
-  border-right-color: #d2d2d2;
-  background: url(images/buttons.png) 0 0 repeat-x;
-  -moz-border-radius: 20px;
-  border-radius: 20px;
-}
-.form-button:link,
-.form-button:visited,
-.form-button:hover,
-.form-button:active {
   text-decoration: none;
-  color: #5a5a5a;
+  text-shadow: 0 1px rgba(255, 255, 255, .85);
 }
-.form-button-primary {
-  border: 1px solid #8eB7cd;
-  border-left-color: #8eB7cd;
-  border-right-color: #8eB7cd;
-  border-bottom-color: #7691a2;
-  background: url(images/buttons.png) 0 -40px repeat-x;
-  color: #133B54;
-}
-input.form-submit:active {
-  background: #666;
-  color: #fff;
-  border-color: #555;
-  text-shadow: #222 0 -1px 0;
+.form-button:focus,
+.form-button:hover {
+  background: white -moz-linear-gradient(top, transparent, rgba(0, 0, 0, .09));
+  background: white -ms-linear-gradient(top, transparent, rgba(0, 0, 0, .09));
+  background: white -o-linear-gradient(top, transparent, rgba(0, 0, 0, .09));
+  background: white -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, .09));
+  background: white linear-gradient(top, transparent, rgba(0, 0, 0, .09));
 }
-input.form-button-disabled,
-input.form-button-disabled:active {
-  background: #eee none;
-  border-color: #eee;
-  text-shadow: none;
-  color: #999;
-}
-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,
-select.form-select {
-  padding: 2px;
-  border: 1px solid #ccc;
-  border-top-color: #999;
-  background: #fff;
-  color: #333;
-  -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-button:active {
+  background: #f9f9f9 url(images/buttons.png) repeat-x left bottom;
+  background: #f9f9f9 -moz-linear-gradient(bottom, rgba(0, 0, 0, .05), rgba(0, 0, 0, .15));
+  background: #f9f9f9 -ms-linear-gradient(bottom, rgba(0, 0, 0, .05), rgba(0, 0, 0, .15));
+  background: #f9f9f9 -o-linear-gradient(bottom, rgba(0, 0, 0, .05), rgba(0, 0, 0, .15));
+  background: #f9f9f9 -webkit-linear-gradient(bottom, rgba(0, 0, 0, .05), rgba(0, 0, 0, .15));
+  background: #f9f9f9 linear-gradient(bottom, rgba(0, 0, 0, .05), rgba(0, 0, 0, .15));
+  border-color: #999;
+  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25);
+  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25);
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .25);
+}
+.form-file .form-button,
+.form-item-operation .form-button {
+  margin-left: .5em;
+}
+td .form-button {
+  height: auto;
+  padding-bottom: .4em;
+  padding-top: .4em;
 }
-input.form-text:focus,
-input.form-tel:focus,
-input.form-email:focus,
-input.form-url:focus,
-input.form-search:focus,
-input.form-number:focus,
-input.form-color:focus,
-input.form-file:focus,
-textarea.form-textarea:focus,
-select.form-select:focus {
-  color: #000;
-  border-color: rgba(0, 116, 189, 0.8);
-  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(220, 220, 220, 0.4);
-  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(220, 220, 220, 0.4);
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(220, 220, 220, 0.4);
-  outline-color: rgba(0, 116, 189, 0.5);
+/**
+ * Reversed-color buttons (white text on dark)
+ *
+ * 1. prevent over-bold letterforms in webkit
+ */
+.form-button-primary,
+.form-button-delete {
+  color: white;
+  font-weight: bolder;
+  -webkit-font-smoothing: antialiased; /* 1 */
+  text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
 }
-.js input.form-autocomplete {
-  background-position: 100% 4px;
+/* Primary button */
+.form-button-primary {
+  background-color: #4f9fea;
+  background-image: -moz-linear-gradient(top, rgba(68, 129, 220, 0), rgba(68, 129, 220, 1));
+  background-image: -ms-linear-gradient(top, rgba(68, 129, 220, 0), rgba(68, 129, 220, 1));
+  background-image: -o-linear-gradient(top, rgba(68, 129, 220, 0), rgba(68, 129, 220, 1));
+  background-image: -webkit-linear-gradient(top, rgba(68, 129, 220, 0), rgba(68, 129, 220, 1));
+  background-image: linear-gradient(top, rgba(68, 129, 220, 0), rgba(68, 129, 220, 1));
+  border-color: #3974ae;
+}
+.form-button-primary:focus,
+.form-button-primary:hover {
+  background-color: #55adff;
+  background-image: -moz-linear-gradient(top, rgba(68, 129, 220, 0), rgba(68, 129, 220, .4));
+  background-image: -ms-linear-gradient(top, rgba(68, 129, 220, 0), rgba(68, 129, 220, .4));
+  background-image: -o-linear-gradient(top, rgba(68, 129, 220, 0), rgba(68, 129, 220, .4));
+  background-image: -webkit-linear-gradient(top, rgba(68, 129, 220, 0), rgba(68, 129, 220, .4));
+  background-image: linear-gradient(top, rgba(68, 129, 220, 0), rgba(68, 129, 220, .4));
+
 }
-.js input.throbbing {
-  background-position: 100% -16px;
+.form-button-primary:active {
+  background-color: #4f9fea;
+  background-image: -moz-linear-gradient(bottom, rgba(68, 129, 220, 0), rgba(68, 129, 220, 1));
+  background-image: -ms-linear-gradient(bottom, rgba(68, 129, 220, 0), rgba(68, 129, 220, 1));
+  background-image: -o-linear-gradient(bottom, rgba(68, 129, 220, 0), rgba(68, 129, 220, 1));
+  background-image: -webkit-linear-gradient(bottom, rgba(68, 129, 220, 0), rgba(68, 129, 220, 1));
+  background-image: linear-gradient(bottom, rgba(68, 129, 220, 0), rgba(68, 129, 220, 1));
+  border-color: #3974ae;
 }
-ul.action-links {
+/* Delete button */
+.form-button-delete {
+  background-color: #ed522f;
+  background-image: -moz-linear-gradient(top, rgba(200, 61, 29, 0), rgba(200, 61, 29, 1));
+  background-image: -ms-linear-gradient(top, rgba(200, 61, 29, 0), rgba(200, 61, 29, 1));
+  background-image: -o-linear-gradient(top, rgba(200, 61, 29, 0), rgba(200, 61, 29, 1));
+  background-image: -webkit-linear-gradient(top, rgba(200, 61, 29, 0), rgba(200, 61, 29, 1));
+  background-image: linear-gradient(top, rgba(200, 61, 29, 0), rgba(200, 61, 29, 1));
+  border-color: #91311c;
+}
+.form-button-delete:focus,
+.form-button-delete:hover {
+  background-color: #ff6541;
+  background-image: -moz-linear-gradient(top, rgba(200, 61, 29, 0), rgba(200, 61, 29, .4));
+  background-image: -ms-linear-gradient(top, rgba(200, 61, 29, 0), rgba(200, 61, 29, .4));
+  background-image: -o-linear-gradient(top, rgba(200, 61, 29, 0), rgba(200, 61, 29, .4));
+  background-image: -webkit-linear-gradient(top, rgba(200, 61, 29, 0), rgba(200, 61, 29, .4));
+  background-image: linear-gradient(top, rgba(200, 61, 29, 0), rgba(200, 61, 29, .4));
+}
+.form-button-delete:active {
+  background-color: #ed522f;
+  background-image: -moz-linear-gradient(bottom, rgba(200, 61, 29, 0), rgba(200, 61, 29, 1));
+  background-image: -ms-linear-gradient(bottom, rgba(200, 61, 29, 0), rgba(200, 61, 29, 1));
+  background-image: -o-linear-gradient(bottom, rgba(200, 61, 29, 0), rgba(200, 61, 29, 1));
+  background-image: -webkit-linear-gradient(bottom, rgba(200, 61, 29, 0), rgba(200, 61, 29, 1));
+  background-image: linear-gradient(bottom, rgba(200, 61, 29, 0), rgba(200, 61, 29, 1));
+  border-color: #91311c;
+}
+/* Disabled buttons */
+.form-submit[disabled],
+.form-button.form-button[disabled],
+.form-button.form-button-disabled {
+  background: #eee;
+  border-color: #aaa;
+  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
+  color: #777;
+  cursor: not-allowed;
+  opacity: .65;
+  text-shadow: none;
+}
+
+/* Action links */
+.action-links {
   margin: 1em 0;
-  padding: 0 20px 0 20px; /* LTR */
+  padding-left: 0; /* LTR */
   list-style-type: none;
   overflow: hidden;
 }
-ul.action-links li {
+.action-links li {
   float: left; /* LTR */
   margin: 0 1em 0 0; /* LTR */
 }
-ul.action-links a {
+.action-links a {
   padding-left: 15px; /* LTR */
   background: transparent url(images/add.png) no-repeat 0 center;
   line-height: 30px;
@@ -736,10 +971,18 @@ div.filter-options select {
 /* Form actions group */
 .form-action-group {
   background-color: #eee;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
   border: 1px solid #ccc;
+  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15);
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15);
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
   display: inline-block;
   margin-top: -4px;
-  width: 240px;
+  padding: 3px 6px 3px 3px; /* LTR; @todo RTL */
 }
 .form-action-group * {
   margin: 5px 2px
@@ -888,11 +1131,44 @@ ol.task-list li.done {
 }
 
 /* Overlay theming */
+#overlay {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  min-width: 0;
+  overflow-x: hidden; /* prevent unnecessary scrollbars; @todo: more testing */
+  padding-left: 36px;
+  padding-right: 36px;
+  padding-top: 0;
+  width: 100%;
+}
+@media screen and (min-width: 900px) {
+  #overlay {
+    padding-right: 48px; /* LTR */
+  }
+}
+#overlay-tabs {
+  bottom: -1px;
+  font-size: 1.54em;
+  line-height: 1.54em;
+  margin: 0;
+}
+#overlay-tabs li {
+  margin: 0 -2px;
+}
+#overlay-content {
+  padding: 0 0 1em 0;
+}
 .overlay #branding {
   background-color: #fff;
+  padding-left: 20px;
+  padding-right: 20px;
   padding-top: 15px;
 }
-.overlay #branding h1.page-title,
+.overlay .breadcrumb {
+  padding-bottom: 0;
+}
+.overlay .page-title,
 .overlay #left,
 .overlay #footer {
   display: none;
@@ -901,20 +1177,6 @@ ol.task-list li.done {
   margin: 0;
   padding: 0 20px;
 }
-.overlay #branding .breadcrumb {
-  float: left; /* LTR */
-  position: relative;
-  z-index: 10;
-}
-#overlay-tabs {
-  bottom: -1px;
-  font-size: 1.54em;
-  line-height: 1.54em;
-  margin: 0;
-}
-#overlay-tabs li {
-  margin: 0 -2px;
-}
 .overlay ul.secondary {
   background: transparent none;
   margin: -1.4em 0 0.3em 0; /* LTR */
@@ -923,9 +1185,6 @@ ol.task-list li.done {
 .overlay #content {
   padding: 0;
 }
-h1#overlay-title {
-  font-weight: normal;
-}
 
 /* Shortcut theming */
 div.add-or-remove-shortcuts {
@@ -935,7 +1194,6 @@ div.add-or-remove-shortcuts {
 }
 
 /* Field UI */
-
 #field-display-overview input.field-formatter-settings-edit {
   margin: 0;
   padding: 1px 8px;
@@ -958,7 +1216,8 @@ div.add-or-remove-shortcuts {
 
 /* Recent content block */
 #block-node-recent table,
-#block-node-recent tr {
+#block-node-recent tr,
+#block-node-recent td:last-child {
   border: none;
 }
 #block-node-recent .more-link {
-- 
1.7.9.6 (Apple Git-31.1)