DOMUI Prefs: Add a close button to sub-pages

chrome/browser/resources/options/options_page.css

 body {
   -webkit-user-select: none;
   cursor: default;
   font-size: 100%;
 }
 
 #settings-title {
   -webkit-padding-end: 24px;
   color: #53637d;
   font-size: 200%;
@@ skipping 20 matching lines @@
   background: rgba(0, 0, 0, .2);
   top: 0;
   bottom: 0;
   z-index: 10;
   padding: 20px;
   display: -webkit-box;
   -webkit-box-align: center;
   -webkit-box-pack: center;
 }
 
-#close-overlay {
+.close-subpage {
+  /* TODO(stuartmorgan): Replace with real images once they are available. */
+  background-image: url("../../../app/theme/close_bar.png");
   position: relative;
-  top: -20px;
-  width: 20px;
-  height: 20px;
+  top: 12px;
+  height: 16px;
+  width: 16px;
 }
 
-html[dir='ltr'] #close-overlay {
-  float: right;
-  right: -20px;
+.close-subpage:hover {
+  background-image: url("../../../app/theme/close_bar_h.png");
 }
 
-html[dir='rtl'] #close-overlay {
+.close-subpage:active {
+  background-image: url("../../../app/theme/close_bar_p.png");
+}
+
+html[dir='ltr'] .close-subpage {
+  float: right;
+  right: 0;
+}
+
+html[dir='rtl'] .close-subpage {
   float: left;
-  left: -20px;
+  left: 0;
 }
 
 .action-area {
   -webkit-box-orient: horizontal;
   -webkit-box-align: center;
   padding: 12px;
   position: absolute;
   right: 0px;
   bottom: 0px;
   display: -webkit-box;
@@ skipping 390 matching lines @@
 label.radio > span,
 .suboption {
   -webkit-margin-start: 16px;
   display: block;
 }
 
 html[os=mac] label.checkbox > input,
 html[os=mac] label.radio > input {
   margin-top: 2px;
 }