started moving some inline styles into css classes
authorsenator <lebbeous@esilibrary.com>
Fri, 4 Feb 2011 01:24:28 +0000 (20:24 -0500)
committersenator <lebbeous@esilibrary.com>
Fri, 4 Feb 2011 01:24:28 +0000 (20:24 -0500)
Here's the deal so far: all the inline styles are covered by one class
in semiauto.css, but those were created programatically and reflect no
understanding of the relationship between the purpose of any given
element that's styled and what its style is.  These auto-generated
styles also are kind of redundant, since with many of them, instead of
using the style with a long definition, you could use a combination of
smaller styles.

The existing markup uses many slightly different style attributes, so
there's plenty of stuff like "width: 12", "width: 13", "width: 14", etc,
so there's no way to map a lot of this to semantically meaningful names.
some of these classes are just going to end up with names like
"wide-fourteen" that are no better than inline styles.

But others, as we find them manually, can be grouped and renamed into
something meaningful, and sometimes style can be put into prexisting id
and class definitions. Should be a couple more hours work.

semiauto.css reflects progress with the generated classes.

changes to style.css reflect early places where style could be moved
into pre-existing classes.

18 files changed:
Open-ILS/web/opac/skin/kcls-wire/css/semiauto.css [new file with mode: 0644]
Open-ILS/web/opac/skin/kcls-wire/css/style.css
Open-ILS/web/templates/default/kcls-wire/advanced.tt2
Open-ILS/web/templates/default/kcls-wire/home.tt2
Open-ILS/web/templates/default/kcls-wire/login.tt2
Open-ILS/web/templates/default/kcls-wire/myopac/circs.tt2
Open-ILS/web/templates/default/kcls-wire/myopac/holds.tt2
Open-ILS/web/templates/default/kcls-wire/myopac/lists.tt2
Open-ILS/web/templates/default/kcls-wire/myopac/main.tt2
Open-ILS/web/templates/default/kcls-wire/myopac/prefs.tt2
Open-ILS/web/templates/default/kcls-wire/parts/homesearch.tt2
Open-ILS/web/templates/default/kcls-wire/parts/login/form.tt2
Open-ILS/web/templates/default/kcls-wire/parts/myopac/base.tt2
Open-ILS/web/templates/default/kcls-wire/parts/record/body.tt2
Open-ILS/web/templates/default/kcls-wire/parts/searchbar.tt2
Open-ILS/web/templates/default/kcls-wire/parts/topnav.tt2
Open-ILS/web/templates/default/kcls-wire/record.tt2
Open-ILS/web/templates/default/kcls-wire/results.tt2

diff --git a/Open-ILS/web/opac/skin/kcls-wire/css/semiauto.css b/Open-ILS/web/opac/skin/kcls-wire/css/semiauto.css
new file mode 100644 (file)
index 0000000..a5fdc08
--- /dev/null
@@ -0,0 +1,183 @@
+.opac-auto-001 { background: #2bb0fd; }
+.opac-auto-002 { background: #54987f; }
+.opac-auto-003 { background: #decc92; }
+.opac-auto-004 { background: #E0F0E0; }
+.opac-auto-005 { background: #ffc331; }
+.gray-back { background: gray; }
+.pink-back { background: pink; }
+.white-back { background: white; }
+.opac-auto-009 { border: 3px solid #E0E0E0; }
+.opac-auto-010 { border-bottom: 1px dotted #ccc; padding-top: 10px; }
+.opac-auto-011 { border-bottom: 1px dotted #ccc; padding-top: 6px; }
+.opac-auto-012 { border-bottom: none; }
+.opac-auto-013 { border-bottom: none; *height: 0px; }
+.opac-auto-014 { border-collapse: collapse; }
+.opac-auto-015 { border-left: 1px solid #e9ebf3; padding-right: 27px; }
+.opac-auto-016 { border: none; }
+.opac-auto-017 { border: none; width: 100%; }
+.opac-auto-018 { border-top: 1px dotted #ccc; padding-top: 17px; }
+.opac-auto-019 { border-top: none; }
+.clear-both { clear: both; }
+.common-no-pad { clear: both; height: 0px; margin: 0px; padding: 0px; }
+.common-full-pad { clear: both; height: 15px; }
+.opac-auto-029 { color: #333; font-weight: bold; font-size: 13px; }
+.opac-auto-030 { color: #545454; }
+.opac-auto-031 { color: #9999FF; padding-left: 10px; font-size: 7pt; font-weight: 300; }
+.red { color: red; }
+.bold-red { color: red; font-weight: bold }
+.pointer { cursor: pointer; }
+.no-display { display: none }
+.float-left { float: left; }
+.opac-auto-039 { float: left; font-weight: bold; padding-top: 5px; }
+.opac-auto-040 { float: left; padding: 5px 0px 0px 10px; }
+.opac-auto-042 { float: left; width: 163px; height: 30px; background: url('/opac/skin/kcls/graphics/utils-corner-mid.png') repeat-x top; }
+.opac-auto-043 { float: left; width: 300px; margin-top: 20px; }
+.float-right { float: right; }
+.opac-auto-045 { float: right; margin-right: 17px; }
+.opac-auto-046 { float: right; width: 214px; }
+.opac-auto-047 { float: right; width: 353px; background: #ccc; padding: 10px; margin-top: 7px; }
+.opac-auto-048 { float: right; width: 65px; }
+.opac-auto-049 { float: right; width: 675px; height: 213px; color: green; overflow: hidden; }
+.opac-auto-050 { float: right; width: 85px; }
+.ten-px { font-size: 10px; }
+.eleven-px { font-size: 11px; }
+.eight-pt { font-size: 8pt; }
+.opac-auto-054 { font-size: 8pt; padding-left: 20px; }
+.bold { font-weight: bold; }
+.opac-auto-057 { font-weight: bold; padding: 5px; margin: 5px; width: 100%; }
+.opac-auto-058 { font-weight: bold; padding-left: 10px; }
+.opac-auto-059 { font-weight: bold; padding-right: 10px; }
+.opac-auto-060 { font-weight: normal; }
+.opac-auto-061 { height: 0px; border-top: 1px solid #b7b7b7; border-bottom: 1px solid #d4d4d4; margin: 15px 0px; }
+.small-height { height: 10px; }
+.normal-height { height: 15px; }
+.big-height { height: 20px; }
+.very-big-height { height: 30px; }
+.opac-auto-066 { height: 24px; background: #252525; }
+.opac-auto-067 { margin: 3px; width: 100%; }
+.opac-auto-068 { margin: auto; width: 974px; height: 0px; }
+.opac-auto-069 { margin-bottom: 10px; }
+.opac-auto-070 { margin-bottom: 20px; }
+.opac-auto-071 { margin-bottom: 5px; }
+.opac-auto-072 { margin-left: 20px; }
+.opac-auto-073 { margin-left: 5px; margin-top: 5px; }
+.opac-auto-074 { margin-left: 6px; }
+.opac-auto-075 { margin-right: 20px; }
+.opac-auto-076 { margin-right: 3px; }
+.opac-auto-077 { margin-right: 4px; position: relative; top: -10px; }
+.opac-auto-078 { margin-right: 7px; }
+.opac-auto-079 { margin-top: 10px; }
+.opac-auto-080 { margin-top: 10px; margin-bottom: 10px; }
+.opac-auto-081 { margin-top: 13px; }
+.opac-auto-082 { margin-top: 29px; }
+.opac-auto-083 { margin-top: 2px; }
+.opac-auto-084 { margin-top: 5px; }
+.opac-auto-085 { margin-top: 6px; margin-left: 20px; width: 250px; padding: 5px; }
+.opac-auto-086 { margin-top: 8px; }
+.opac-auto-087 { max-width: 11em; }
+.opac-auto-088 { padding: 0px; }
+.opac-auto-089 { padding: 0px 10px; }
+.opac-auto-090 { padding: 10px; }
+.opac-auto-091 { padding: 10px 0px; }
+.opac-auto-092 { padding: 4px; text-align: center; }
+.pad-bottom-five { padding: 5px; }
+.opac-auto-094 { padding: 5px 7px 0px 0px; }
+.opac-auto-095 { padding: 5px 7px 0px 0px; white-space: nowrap; }
+.opac-auto-096 { padding: 6px }
+.opac-auto-097 { padding: 8px 0px 6px 0px; }
+.opac-auto-098 { padding-bottom: 10px; }
+.opac-auto-099 { padding-bottom: 12px; color: #666; }
+.opac-auto-100 { padding-bottom: 16px; }
+.opac-auto-101 { padding-bottom: 1px; }
+.opac-auto-102 { padding-bottom: 7px; }
+.opac-auto-103 { padding-left: 10px; }
+.opac-auto-104 { padding-left: 11px; padding-right: 11px; }
+.opac-auto-105 { padding-left: 11px; padding-right: 13px; }
+.opac-auto-106 { padding-left: 15px; }
+.opac-auto-107 { padding-left: 15px; padding-bottom: 10px; }
+.opac-auto-108 { padding-left: 5px; }
+.opac-auto-109 { padding-left: 5px; padding-bottom: 10px; }
+.opac-auto-110 { padding-left: 6px; }
+.opac-auto-111 { padding-left: 8px; }
+.opac-auto-112 { padding-left: 9px; }
+.opac-auto-113 { padding-right: 10px; }
+.opac-auto-114 { padding-right: 15px; padding-left: 15px; }
+.opac-auto-115 { padding-right: 20px; }
+.opac-auto-116 { padding-right: 5px; }
+.opac-auto-117 { padding-right: 7px; }
+.pad-top-ten { padding-top: 10px; }
+.opac-auto-119 { padding-top: 14px; }
+.opac-auto-120 { padding-top: 5px; }
+.opac-auto-121 { padding-top: 6px; }
+.opac-auto-122 { padding-top: 7px; }
+.opac-auto-123 { padding-top: 8px; }
+.opac-auto-124 { position: absolute }
+.opac-auto-125 { position: absolute; }
+.opac-auto-126 { position: absolute; z-index: 101; }
+.opac-auto-127 { position: relative; }
+.opac-auto-128 { position: relative; left: -10px; }
+.opac-auto-129 { position: relative; left: -19px; }
+.opac-auto-130 { position: relative; left: 80px; }
+.opac-auto-131 { position: relative; top: 0px; left: 55px; }
+.opac-auto-132 { position: relative; top: 13px; }
+.opac-auto-133 { position: relative; top: -13px; left: 2px; font-size: 10px; }
+.opac-auto-134 { position: relative; top: -15px; left: 172px; }
+.opac-auto-135 { position: relative; top: -15px; left: -23px; }
+.opac-auto-136 { position: relative; top: 161px; left: 172px; }
+.opac-auto-137 { position: relative; top: 161px; left: -23px; }
+.opac-auto-138 { position: relative; top: -1px; left: 10px; }
+.opac-auto-139 { position: relative; top: 1px; left: 10px; }
+.opac-auto-140 { position: relative; top: -2px; }
+.opac-auto-141 { position: relative; top: 2px; left: 40px; }
+.opac-auto-142 { position: relative; top: 2px; left: 50px; }
+.opac-auto-143 { position: relative; top: -3px; }
+.opac-auto-144 { position: relative; top: 3px; left: 20px; }
+.opac-auto-145 { position: relative; top: -3px; left: 3px; }
+.opac-auto-146 { position: relative; top: -3px; left: -5px; }
+.opac-auto-147 { position: relative; top: -5px; }
+.opac-auto-148 { position: relative; top: 5px; }
+.opac-auto-149 { position: relative; top: 5px; left: 25px; }
+.opac-auto-150 { position: relative; top: 5px; left: 30px; }
+.opac-auto-151 { position: relative; top: 75px; }
+.opac-auto-152 { position: relative; top: -9px; }
+.opac-auto-153 { position: relative; z-index: 100; }
+.text-center { text-align: center; }
+.opac-auto-156 { text-align: center; font-weight: bold; }
+.opac-auto-157 { text-align: center; margin-top: 20px; width: 400px; }
+.opac-auto-158 { text-align: center; margin-top: 6px; margin-bottom: 6px }
+.opac-auto-159 { text-align: center; padding: 20px; width: 100% }
+.opac-auto-160 { text-align: center; padding-bottom: 8px; }
+.opac-auto-161 { text-align: right; padding-right: 7px; }
+.opac-auto-162 { vertical-align: top; }
+.nowrap { white-space: nowrap; }
+.opac-auto-164 { white-space: nowrap; padding-left: 5px; }
+.full-width { width: 100%; }
+.opac-auto-167 { width: 100%; border: 1px solid black; padding: 6px; margin-top: 5px; }
+.opac-auto-168 { width: 100%; border: 2px solid #E0F0E0; margin-bottom: 20px; }
+.opac-auto-169 { width: 100%; height: 100%; }
+.opac-auto-170 { width: 100%; margin-top: 20px; border-top: 1px dotted #ccc; padding-top: 8px; }
+.opac-auto-171 { width: 100%; text-align: center; font-weight: 700; margin-top: 10px; }
+.opac-auto-172 { width: 100%; text-align: center; padding-bottom: 5px; }
+.opac-auto-173 { width: 10px; }
+.opac-auto-174 { width: 111px; height: 25px; }
+.opac-auto-175 { width: 125px; height: 21px; }
+.opac-auto-176 { width: 129px; }
+.opac-auto-177 { width: 162px; }
+.opac-auto-178 { width: 174px; }
+.opac-auto-179 { width: 175px; margin-right: 11px; }
+.opac-auto-180 { width: 182px; color: black; padding: 5px 25px; }
+.opac-auto-181 { width: 195px; }
+.opac-auto-182 { width: 230px; text-align: left; margin-top: 3px; }
+.opac-auto-183 { width: 250px; text-align: left; }
+.opac-auto-184 { width: 26px; height: 23px; margin-top: 6px; margin-bottom: 6px; }
+.opac-auto-185 { width: 324px; }
+.opac-auto-186 { width: 400px; margin-top: 20px; }
+.opac-auto-187 { width: 662px; }
+.opac-auto-188 { width: 700px; height: 30px; border: 1px solid red; }
+.opac-auto-189 { width: 742px; float: left; }
+.opac-auto-190 { width: 88px; }
+.opac-auto-191 { width: 90px; }
+.opac-auto-192 { width: 90%; text-align: center; margin: 10px; }
+.opac-auto-193 { width: 91px; }
+.opac-auto-194 { width: 95%; text-align: center; padding: 15px; }
+.opac-auto-195 { width: 99%; text-align: center }
index 9c300f3..b673f75 100644 (file)
@@ -587,6 +587,8 @@ div.select-wrapper:hover {
        margin-right: 6px;
 }
 
+.cached_list_div { width: 111px; height: 25px; }
+
 .results_header_div {
        float: left;
        width: 0px;
@@ -607,6 +609,7 @@ div.select-wrapper:hover {
 }
 
 .results_header_sel {
+    width: 88px;
        float:left;
        position: relative;
        top: 2px;
@@ -869,3 +872,16 @@ div.select-wrapper:hover {
        font-weight: bold;
        font-size: 10px;
 }
+
+.advanced_div { padding-top: 15px; }
+#adv_global_search select { width: 13em; }
+#adv_global_input_table select { width: 7em; }
+.adv_adv_link { font-size: 8pt; color: red; }
+#acct_prefs_header { float: left; }
+#limit_to_available {
+    float: left; position: relative; top: 2px;
+    left: -2px; margin-right: 4px;
+}
+#rdetail_copy_info_table { font-size: 8pt; }
+#rdetail_copy_info_table td { padding: 3px; }
+
index 46d3a98..3cd4ced 100644 (file)
@@ -1,13 +1,6 @@
 [%  WRAPPER "default/kcls-wire/parts/base.tt2";
     INCLUDE "default/kcls-wire/parts/topnav.tt2";
     ctx.page_title = "Advanced Search" %]
-[% BLOCK html_head -%]
-<style type='text/css'>
-    .advanced_div { padding-top: 15px; }
-    #adv_global_search select { width: 13em; }
-    #adv_global_input_table select { width: 7em; }
-    .adv_adv_link { font-size: 8pt; color: red; }
-</style>
 [% END -%]
     <div id="search-wrapper">
         [% INCLUDE "default/kcls-wire/parts/utils.tt2" %]
@@ -30,7 +23,7 @@
             <div class="advanced_div">
             [% INCLUDE "default/kcls-wire/parts/advanced/search.tt2" %]
             </div>
-            <div style="clear:both;height:15px;"></div>        
+            <div class="common-full-pad"></div>        
         </div>
     </div>
 [% END %]
index 952422c..88c748f 100644 (file)
@@ -10,9 +10,9 @@
     </div>
     <div id="content-wrapper">
         <div id="main-content">
-            <div style="height:15px;clear:both;"></div>
+            <div class="common-full-pad"></div>
             [% INCLUDE "default/kcls-wire/parts/homesearch.tt2" %]
-            <div style="clear:both;height:15px;"></div>        
+            <div class="common-full-pad"></div>        
         </div>
     </div>
 [% END %]
index 0cf55a5..d45c4db 100644 (file)
@@ -11,7 +11,7 @@
     <div id="content-wrapper">
         <div id="main-content">
             [% INCLUDE "default/kcls-wire/parts/login/form.tt2" %]
-            <div style="clear:both;height:30px;"></div>        
+            <div class="clear-both very-big-height"></div>     
         </div>
     </div>
 [% END %]
index c793642..8d5546f 100644 (file)
@@ -19,7 +19,7 @@
         <div class="align selected hide_me" id="checked_hist_label">
             <img src="/opac/skin/kcls/graphics/sub_checked_hist_on.jpg" />
         </div>    
-        <div style="clear:both;"></div>
+        <div class="clear-both"></div>
     </div>
     
     <div class="header_middle">
@@ -30,7 +30,7 @@
             <a class="hide_me" href="javascript:;">Export List</a>
         </span>
     </div>
-    <div style="clear:both;"></div>
+    <div class="clear-both"></div>
     <div id='checked_main'>
         <table cellpadding='0' cellspacing='0' border='0'
             style="padding:8px 0px 6px 0px;">
index 3ad5082..b176867 100644 (file)
@@ -19,7 +19,7 @@
         <div class="align selected hide_me" id="holds_hist_label">
             <img src="/opac/skin/kcls/graphics/sub_holds_hist_on.jpg" />
         </div> 
-        <div style="clear:both;"></div>
+        <div class="clear-both"></div>
     </div>
     <div class="header_middle">
         <span id="acct_holds_header" style="float:left;">
@@ -29,7 +29,7 @@
             <a class="hide_me" href="javascript:;">Export List</a>
         </span>
     </div>
-    <div style="clear:both;"></div>
+    <div class="clear-both"></div>
     <div id='holds_main'>
         <table cellpadding='0' cellspacing='0' border='0'
             style="padding:8px 0px 6px 0px;">
index b48e704..b044715 100644 (file)
@@ -58,7 +58,7 @@
             </div>
         </div>
     </div>
-    <div style="clear:both;padding-top:10px;">
+    <div style="clear-both pad-top-ten">
         <a href="javascript:;"
             onclick="hideMe($('myopac_bookbag_div'));unHideMe($('mylist_div'));">+ Add new list</a>
     </div>
@@ -78,8 +78,8 @@
                         </td>
                     </tr>
                 </table>
-                <div style="float:right;"></div>
-                <div style="clear:both;padding-bottom:5px;"></div>
+                <div class="float-right"></div>
+                <div style="clear-both pad-bottom-five"></div>
             </div>
     
             <table id="acct_list_header_anon" cellpadding='0' cellspacing='0' border='0'>
                     <div style="float:left;padding:5px 0px 0px 10px;">
                         <a href="javascript:;" name="remove_list">Remove</a>
                     </div>
-                    <div style="clear:both;padding-bottom:5px;"></div>
+                    <div class="clear-both pad-bottom-five"></div>
                 </div>
                 <table id="acct_list_header" cellpadding='0' cellspacing='0'
                     border='0'>
index 9e1e95e..cc659e5 100644 (file)
@@ -98,7 +98,7 @@
                 </div>
             </div>
         </div>
-        <div style="clear:both;"></div>
+        <div class="clear-both"></div>
         <div id='myopac_fines_div'>
             <table width='100%' class='data_grid data_grid_center'>
                 <thead class='color_3'>
index d884d70..2be5383 100644 (file)
                 </div>
             </div>
 
-            <div style="clear:both;"></div>
+            <div class="clear-both"></div>
         </div>
 
         <div class="header_middle">
-            <span id="acct_prefs_header"
-                 style="float:left;">Account Information and Preferences</span>
-                 <span style="float:right;"><a class="hide_me"
-               href="javascript:;"
-               onclick="fadeOut(this);">Export List</a></span>
+            <span id="acct_prefs_header">
+                Account Information and Preferences
+            </span>
+            <span class="float-right">
+                <a class="hide_me"
+                    href="javascript:;"
+                    onclick="fadeOut(this);">Export List</a>
+            </span>
         </div>
 
-        <div style="clear:both;height:10px;"></div>
+        <div class="clear-both normal-height"></div>
 
-        <table width='100%'
-               class="hide_me"
-               id="acct_search_main">
+        <table class="hide_me full-width" id="acct_search_main">
             <tbody id='myopac_prefs_tbody'>
                 <tr id='myopac_prefs_loading'>
                     <td colspan='3'><b>&myopac.loading;</b></td>
index 77a50ca..acb738e 100644 (file)
@@ -108,8 +108,8 @@ autorotate: [true, 3000] //pause time (in milliseconds)
       </table>
     </div>
   </div>
-  <div style="float:left;"><img src="/opac/skin/kcls/graphics/hp-links-right.jpg" /></div>
-  <div style="float:right;"><a href="http://www.kcls.org/locations"><img alt="Locations" src="/opac/skin/kcls/graphics/locations.jpg" /></a></div>
-  <div style="clear:both;"></div>
+  <div class="float-left"><img src="/opac/skin/kcls/graphics/hp-links-right.jpg" /></div>
+  <div class="float-right"><a href="http://www.kcls.org/locations"><img alt="Locations" src="/opac/skin/kcls/graphics/locations.jpg" /></a></div>
+  <div class="clear-both"></div>
 </div>
 <!-- ****************** end: homesearch.xml ***************************** -->
index 3d00bf1..5beabf5 100644 (file)
             </tr>
         </table>
     </form>
-    <div style="clear:both"></div>
+    <div class="clear-both"></div>
 </div>
 <!-- ****************** end: login.xml ***************************** -->
index fbae83e..ce26a21 100644 (file)
@@ -28,8 +28,8 @@
             </div>
         </div>
         <div id="main-content">
-            <div style="height:15px;clear:both;"></div>
+            <div class="common-full-pad"></div>
             [% content %]
-            <div style="clear:both;"></div>
+            <div style="clear-both"></div>
         </div>
     </div>
index d016b3c..f6ffc6f 100644 (file)
@@ -27,7 +27,7 @@
                     id='np_end' href='javascript:rdetailEnd();'
                     title="&rdetail.page.last;">&rdetail.end;</a></span>
         </div>
-        <div style="clear:both;"></div>
+        <div class="clear-both"></div>
     </div>
 
     <table width='100%' id='np_table' border='0' class="hide_me">
index 9a4950a..6dade98 100644 (file)
@@ -55,5 +55,5 @@
       <div id="breadcrumb">
           <a href="[% skin_root %]home">Catalog Home</a> &gt;
       </div>
-    <div style="clear:both"></div>
+    <div class="clear-both"></div>
 </div>
index 16d8819..215a38c 100644 (file)
@@ -13,7 +13,7 @@
 
 
     </div>
-    <div style="clear:both;height:0px;margin:0px;padding:0px;"></div>
+    <div class="common-no-pad"></div>
 </div>
 <div style="height:24px;background:#252525;">
     <div id="gold-links">
index eba9017..59d2ef8 100644 (file)
@@ -1,12 +1,6 @@
 [%  WRAPPER "default/kcls-wire/parts/base.tt2";
     INCLUDE "default/kcls-wire/parts/topnav.tt2";
     ctx.page_title = "Record Detail" %]
-[% BLOCK html_head %]
-<style type="text/css">
-    #rdetail_copy_info_table { font-size: 8pt; }
-    #rdetail_copy_info_table td { padding: 3px; }
-</style>
-[% END %]
     <div id="search-wrapper">
         [% INCLUDE "default/kcls-wire/parts/utils.tt2" %]
         [% INCLUDE "default/kcls-wire/parts/searchbar.tt2" %]
@@ -14,7 +8,7 @@
     <div id="content-wrapper">
         <div id="main-content">
             [% INCLUDE "default/kcls-wire/parts/record/body.tt2" %]
-            <div style="clear:both;height:15px;"></div>        
+            <div class="common-full-pad"></div>        
         </div>
     </div>
 [% END %]
index 2e2811b..38396ee 100644 (file)
@@ -20,7 +20,7 @@
                         onmouseover="this.src='/opac/skin/kcls/graphics/adv_search_hover.png';"
                         onmouseout="this.src='/opac/skin/kcls/graphics/adv_search.png';" /></a>
                 </div>
-                <div class="results_header_btns" style="width:111px;height:25px;">
+                <div class="results_header_btns cached_list_div">
                     <a href="javascript:;" class="hide_me" id="cacheListLink"
                         onclick="showCachedList();"><img
                         alt="View My List"
         <!--#endif -->
                 <div class="results_header_div"></div>
                 <div class="results_header_lbl">View</div>
-                <select class="results_header_sel" style="width:88px;"
+                <select class="results_header_sel"
                     onchange="showDetailedResults(Boolean(this.selectedIndex));">
                     <option>Simple</option>
                     <option>Detailed</option>
                 </select>
                 <div class="results_header_div"></div>
-                <input type="checkbox" id="opac.result.limit2avai2"
-                onclick='searchBarSubmit(true, this);'
-                style="float:left;position:relative;top:2px;left:-2px;margin-right:4px;" />
-                <label for="opac.result.limit2avai2" class="results_header_lbl">
+                <input type="checkbox" id="limit_to_available"
+                    onclick='searchBarSubmit(true, this);' />
+                <label for="limit_to_available" class="results_header_lbl">
                     Limit to available items
                 </label>
-                <div style="clear:both;"></div>
+                <div class="clear-both"></div>
             </div>
         </div>
         <div id="main-content">
@@ -58,7 +57,7 @@
                     [% INCLUDE "default/kcls-wire/parts/result/lowhits.tt2" %]
                 </div>
             </div>
-            <div style="clear:both;height:15px;"></div>    
+            <div class="common-full-pad"></div>    
         </div>
     </div>
 [% END %]