4 files changed, 20 insertions, 25 deletions

diff --git a/install/ui/arrow_collapsed.png b/install/ui/arrow_collapsed.png
new file mode 100755
index 000000000..61c2dafc4
--- /dev/null
+++ b/install/ui/arrow_collapsed.png
diff --git a/install/ui/arrow_expanded.png b/install/ui/arrow_expanded.png
new file mode 100755
index 000000000..4f2a9d6d6
--- /dev/null
+++ b/install/ui/arrow_expanded.png
diff --git a/install/ui/details.js b/install/ui/details.js
index 4c70530e5..4f01cd34c 100644
--- a/install/ui/details.js
+++ b/install/ui/details.js
@@ -26,8 +26,8 @@
 
 /* REQUIRES: ipa.js */
 
-IPA.expand_icon = 'ui-icon-minus';
-IPA.collapse_icon = 'ui-icon-plus';
+IPA.expanded_icon = 'ui-icon-expanded';
+IPA.collapsed_icon = 'ui-icon-collapsed';
 
 IPA.details_section = function(spec) {
 
@@ -440,7 +440,7 @@ IPA.details_facet = function(spec) {
 
             var icon = $('<span/>', {
                 name: 'icon',
-                'class': 'ui-icon section-expand '+IPA.expand_icon
+                'class': 'ui-icon section-expand '+IPA.expanded_icon
             }).appendTo(header);
 
             header.append(' ');
@@ -497,8 +497,8 @@ IPA.details_facet = function(spec) {
         var header = $('h2[name='+section.name+']', that.container);
 
         var icon = $('span[name=icon]', header);
-        icon.toggleClass(IPA.expand_icon, visible);
-        icon.toggleClass(IPA.collapse_icon, !visible);
+        icon.toggleClass(IPA.expanded_icon, visible);
+        icon.toggleClass(IPA.collapsed_icon, !visible);
 
         var div = section.container;
 
diff --git a/install/ui/ipa.css b/install/ui/ipa.css
index 26e000fc1..38b5a9118 100644
--- a/install/ui/ipa.css
+++ b/install/ui/ipa.css
@@ -721,15 +721,6 @@ h3 {
 }
 
 .section-expand{
-    float:left;
-    -moz-border-radius: 0.3em;
-        -webkit-border-radius: 0.3em;
-    background-color: -moz-linear-gradient(top,  #959595,  #5e5e5e);
-        background: -webkit-gradient(linear, left top, left bottom, from(#959595), to(#5e5e5e));
-    border: 1px solid #b8b8b8;
-    color: #fff;
-    margin-right: 0.5em;
-    margin-top: -0.2em;
 }
 
 hr {
@@ -909,28 +900,32 @@ span.attrhint {
     padding:0;
 }
 
-#the positions for these are in the large icon image,
-#and need to be specified in pixels.
+/*
+ the positions for these are in the large icon image,
+ and need to be specified in pixels.
+*/
+.ui-icon {
+    /* background-image: url("ui-icons_222222_256x240.png"); */
+    background-color: #e2e2e2;
+    display: inline-block;
+}
 
+.ui-icon-expanded {
+    background: url(arrow_expanded.png);
+}
 
-.ui-icon-minus {
-    background-position: -48px -129px;
+.ui-icon-collapsed {
+    background: url(arrow_collapsed.png);
 }
 
 .ui-icon-plus {
-        background-position: -16px -129px;
+    background-position: -16px -129px;
 }
 
 .ui-icon-trash {
     background-position: -176px -97px;
 }
 
-.ui-icon {
-    /* background-image: url("ui-icons_222222_256x240.png"); */
-    background-color: #e2e2e2;
-    display: inline-block;
-}
-
 .ui-widget-content {
 }