code refactoring and GUI improvement

UI/WebServerResources/UIxMailSearch.css

@@ -1,29 +1,33 @@
 
 /*************** Table adjustment *****************/
 
-TABLE#searchMailHeader, TABLE#searchFiltersList, TABLE#searchMailFooter
+TABLE#searchMailHeader
 { width: 100%; }
 
 TABLE#searchFiltersList, TABLE#searchMailFooter
 {
   border: 1px solid #909090;
-  margin-top: 1em;
   padding:2px;
   border-radius: 3px;
 }
 
 TABLE#searchFiltersList
 {
-  display:block;
-  max-height:100px;
+  display:inline-block;
+  max-height:105px;
+  height:105px;
   overflow:auto;
-  width:672px;
+  width:674px;
+  margin-top: 1em;
 }
 
 TABLE#searchMailFooter
 {
-   height:141px;
-   min-height: 110px;
+   position:absolute;
+   left:10px;
+   width:680px;
+   top:240px;
+   height:194px;
 }
 
 .buttonsCell
@@ -36,17 +40,18 @@ TABLE#searchMailFooter
   width:45%;
 }
 
-.filterRow
-{
-  cellspacing=0;
-}
-
 .scrollbar 
 {
   overflow-y:auto;
-  height:106px;
-  width:676px;
+  height:171px;
   position:absolute;
+  top:21px;
+  left:0;
+  right:0;
+}
+
+#td_table_1, #td_table_2, #td_table_3, #td_table_4 {
+ width:25%;
 }
 
 /*************** Table adjustment : search results *****************/
@@ -54,6 +59,37 @@ TABLE#searchMailFooter
   cursor:pointer;
 }
 
+.td_header {
+  border: solid #909090 1px;
+  position:absolute;
+  top:-1px;
+  width:157px;
+  cursor:pointer;
+  background: -webkit-linear-gradient(left top, #f0f1f0 , #e6e7e6); /* For Safari 5.1 to 6.0 */
+  background: -o-linear-gradient(bottom right, #f0f1f0, #e6e7e6); /* For Opera 11.1 to 12.0 */
+  background: -moz-linear-gradient(bottom right, #f0f1f0, #e6e7e6); /* For Firefox 3.6 to 15 */
+  background: linear-gradient(to bottom right, #f0f1f0 , #e6e7e6); /* Standard syntax */
+}
+
+.td_header:hover
+{text-decoration: underline; }
+
+#subjectHeader {
+  left:-1px;
+  border-top-left-radius: 3px;
+}
+#fromHeader {
+  left:166px;
+}
+#toHeader {
+  left:333px;
+}
+#dateHeader {
+  left:500px;
+  width:168px;
+  border-top-right-radius: 3px;
+}
+
 /*************** Button adjustment *****************/
 
 #headerButtons
@@ -72,7 +108,10 @@ TABLE#searchMailFooter
 }
 
 DIV#optionsButtons
-{ float:left; }
+{ 
+  position:absolute;
+  bottom:10px;
+}
 
 .button
 {
@@ -82,14 +121,84 @@ DIV#optionsButtons
 #changeHeader
 { width:15px}
 
-DIV.bottomToolbar {
-  margin:0;
-  position:relative;
-  border-radius:5px;
+#resizeFrame
+{
+  text-align: -webkit-right;
+  margin-top:1em;
+}
+
+#resizeButton
+{
+  display:inline-block;
+  text-align: -webkit-center;
+}
+
+
+#resultsFound {
+  position:absolute;
+  bottom:25px;
+  right:10px;
+}
+
+
+#imgPosition
+{ position: absolute;
+  right: 17px;
+  top: 233px;
+  z-index: 1;
+}
+
+#listCollapse
+{ position: absolute;
+  top: .2em;
+  right: 0;
+  margin: 0.5em 1em; }
+
+#listCollapse img
+{ position: absolute; }
+
+#listCollapse img.collapse
+{ clip: rect(0 18px 18px 0);
+  left: 0;
+  top: 0; }
+
+#listCollapse img.collapse:hover
+{ clip: rect(0 36px 18px 18px);
+  left: -18px; }
+
+#listCollapse img.rise
+{ clip: rect(18px 18px 36px 0);
+  left: 0;
+  top: -18px; }
+
+#listCollapse img.rise:hover
+{ clip: rect(18px 36px 36px 18px);
+  left: -18px; }
+  
+#filterButtons 
+{
   width:40px;
+  cursor:pointer;
+}
+
+/* Glow */
+.glow {
+  display: inline-block;
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+  -webkit-transition-property: box-shadow;
+  transition-property: box-shadow;
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+}
+.glow:hover, .glow:focus, .glow:active {
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
 }
 
 /*************** Lists *****************/
 .hidden 
 { display:none; }
 
+
+