From: stekkel <stekkel@7612ce4b-ef26-0410-bec9-ea0150e637f0>
Date: Sat, 28 Jan 2006 16:08:48 +0000 (+0000)
Subject: Merge of Steve Brown's patch
X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=e3812cb291b353059283c0f321a8f6151e50c976;p=squirrelmail.git

Merge of Steve Brown's patch


git-svn-id: https://svn.code.sf.net/p/squirrelmail/code/trunk/squirrelmail@10584 7612ce4b-ef26-0410-bec9-ea0150e637f0
---

diff --git a/templates/default/footer.tpl b/templates/default/footer.tpl
index 5d1f83f2..a5b41539 100644
--- a/templates/default/footer.tpl
+++ b/templates/default/footer.tpl
@@ -18,6 +18,6 @@
 extract($t);
 $this->display('error_message.tpl');
 ?>
-
+<B> footer </B>
 </body>
 </html>
\ No newline at end of file
diff --git a/templates/default/js/default.js b/templates/default/js/default.js
index 39db2683..1b540556 100644
--- a/templates/default/js/default.js
+++ b/templates/default/js/default.js
@@ -8,7 +8,6 @@
 var marked_row = new Array;
 var orig_row_colors = new Array();
 
-
 /*
  * (un)Checks checkbox for the row that the current table cell is in
  * when it gets clicked.
@@ -25,21 +24,49 @@ function row_click(chkboxName) {
         chkbox.checked = (chkbox.checked ? false : true);
     }
 }
+
+/*
+ * Gets the current class of the requested row.  This is a browser specific function.
+ * Code shamelessly ripped from setPointer() below.
+ */
+function getCSSClass (theRow)
+{
+	// 3.1 ... with DOM compatible browsers except Opera that does not return
+	//         valid values with "getAttribute"
+	if (typeof(window.opera) == 'undefined'
+		&& typeof(theRow.getAttribute) != 'undefined'
+		&& theRow.getAttribute('className') ) {
+		rowClass = theRow.getAttribute('className');
+	}
+	// 3.2 ... with other browsers
+	else {
+		rowClass = theRow.className;
+	}
+	
+	return rowClass;
+}
+
 /*
  * This function is used to initialize the orig_row_color array so we do not
  * need to predefine the entire array
  */
-function rowOver(chkboxName, overColor, clickedColor) {
+function rowOver(chkboxName) {
     chkbox = document.getElementById(chkboxName);
     if (chkbox) {
         if (!orig_row_colors[chkboxName]) {
-            bgColor = chkbox.parentNode.getAttribute('bgcolor');
-            orig_row_colors[chkboxName] = bgColor;
+			rowClass = getCSSClass(chkbox.parentNode.parentNode);
+            orig_row_colors[chkboxName] = rowClass;
         } else {
-            bgColor = orig_row_colors[chkboxName];
+            rowClass = orig_row_colors[chkboxName];
         }
         j = chkbox.name.length - 1
-        setPointer(chkbox.parentNode.parentNode, j,'over' , bgColor, overColor, clickedColor);
+
+/*
+ * The mouseover and clicked CSS classes are always the same name!
+ */        
+        overClass = 'mouse_over';
+        clickedClass = 'clicked';
+        setPointer(chkbox.parentNode.parentNode, j,'over' , rowClass, overClass, clickedClass);
     }
 }
 
@@ -51,7 +78,7 @@ function rowOver(chkboxName, overColor, clickedColor) {
  * @param   boolean  use fancy row coloring when a checkbox is checked
  * @param   string   new color of the checked rows
  */
-function toggle_all(formname, fancy, clickedColor) {
+function toggle_all(formname, fancy) {
      TargetForm = document.getElementById(formname);
      j = 0;
      for (var i = 0; i < TargetForm.elements.length; i++) {
@@ -61,11 +88,13 @@ function toggle_all(formname, fancy, clickedColor) {
                 if (TargetForm.elements[i].checked == false) {
                     // initialize orig_row_color if not defined already
                     if (!orig_row_colors[array_key]) {
-                        orig_row_colors[array_key] = TargetForm.elements[i].parentNode.getAttribute('bgcolor');
+						rowClass = getCSSClass(TargetForm.elements[i].parentNode.parentNode);
+            			orig_row_colors[array_key] = rowClass;
                     }
                 }
-                origColor = orig_row_colors[array_key];
-                setPointer(TargetForm.elements[i].parentNode.parentNode, j,'click' , origColor, origColor, clickedColor);
+                origClass = orig_row_colors[array_key];
+		        clickedClass = 'clicked';
+                setPointer(TargetForm.elements[i].parentNode.parentNode, j,'click' , origClass, origClass, clickedClass);
                 j++
             }
             TargetForm.elements[i].checked = !(TargetForm.elements[i].checked);
@@ -79,76 +108,59 @@ function toggle_all(formname, fancy, clickedColor) {
  * @param   object    the table row
  * @param   integer  the row number
  * @param   string    the action calling this script (over, out or click)
- * @param   string    the default background color
- * @param   string    the color to use for mouseover
- * @param   string    the color to use for marking a row
+ * @param   string    the default background CSS class
+ * @param   string    the CSS class to use for mouseover
+ * @param   string    the CSS class to use for marking a row
  *
  * @return  boolean  whether pointer is set or not
  */
-function setPointer(theRow, theRowNum, theAction, theDefaultColor, thePointerColor, theMarkColor)
+function setPointer(theRow, theRowNum, theAction, theDefaultClass, thePointerClass, theMarkClass)
 {
-    var theCells = null;
-
     // 1. Pointer and mark feature are disabled or the browser can't get the
     //    row -> exits
-    if ((thePointerColor == '' && theMarkColor == '')
-        || typeof(theRow.style) == 'undefined') {
+    if ((thePointerClass == '' && theMarkClass == '')
+        || typeof(theRow.className) == 'undefined') {
         return false;
     }
 
-    // 2. Gets the current row and exits if the browser can't get it
+    // 2. Verify we can get the current row or exit
     if (typeof(document.getElementsByTagName) != 'undefined') {
-        theCells = theRow.getElementsByTagName('td');
+		// We are ok
     }
-    else if (typeof(theRow.cells) != 'undefined') {
-        theCells = theRow.cells;
+    else if (typeof(theRow) != 'undefined') {
+    	// We are ok
     }
     else {
         return false;
     }
 
-    // 3. Gets the current color...
-    var rowCellsCnt  = theCells.length;
+    // 3. Gets the current CSS class...
     var domDetect    = null;
-    var currentColor = null;
-    var newColor     = null;
+    var newClass     = null;
+    var currentClass = getCSSClass(theRow);
+    
+    // domDetect is needed later...
     // 3.1 ... with DOM compatible browsers except Opera that does not return
     //         valid values with "getAttribute"
     if (typeof(window.opera) == 'undefined'
-        && typeof(theCells[0].getAttribute) != 'undefined') {
-        currentColor = theCells[0].getAttribute('bgcolor');
+        && typeof(theRow.getAttribute) != 'undefined'
+        && theRow.getAttribute('className') ) {
         domDetect    = true;
     }
     // 3.2 ... with other browsers
     else {
-        currentColor = theCells[0].style.backgroundColor;
         domDetect    = false;
     } // end 3
 
-    // 3.3 ... Opera changes colors set via HTML to rgb(r,g,b) format so fix it
-    if (currentColor.indexOf("rgb") >= 0)
-    {
-        var rgbStr = currentColor.slice(currentColor.indexOf('(') + 1,
-                                     currentColor.indexOf(')'));
-        var rgbValues = rgbStr.split(",");
-        currentColor = "#";
-        var hexChars = "0123456789ABCDEF";
-        for (var i = 0; i < 3; i++)
-        {
-            var v = rgbValues[i].valueOf();
-            currentColor += hexChars.charAt(v/16) + hexChars.charAt(v%16);
+    // 4. Defines the new class
+    // 4.1 Current class is the default one
+    if (currentClass == ''
+        || currentClass.toLowerCase() == theDefaultClass.toLowerCase()) {
+        if (theAction == 'over' && thePointerClass != '') {
+            newClass = thePointerClass;
         }
-    }
-
-    // 4. Defines the new color
-    // 4.1 Current color is the default one
-    if (currentColor == ''
-        || currentColor.toLowerCase() == theDefaultColor.toLowerCase()) {
-        if (theAction == 'over' && thePointerColor != '') {
-            newColor              = thePointerColor;
-        }
-        else if (theAction == 'click' && theMarkColor != '') {
-            newColor              = theMarkColor;
+        else if (theAction == 'click' && theMarkClass != '') {
+            newClass = theMarkClass;
             marked_row[theRowNum] = true;
             // deactivated onclick marking of the checkbox because it's also executed
             // when an action (clicking on the checkbox itself) on a single item is
@@ -158,24 +170,24 @@ function setPointer(theRow, theRowNum, theAction, theDefaultColor, thePointerCol
             //document.getElementById('msg[' + theRowNum + ']').checked = true;
         }
     }
-    // 4.1.2 Current color is the pointer one
-    else if (currentColor.toLowerCase() == thePointerColor.toLowerCase()
+    // 4.1.2 Current class is the pointer one
+    else if (currentClass.toLowerCase() == thePointerClass.toLowerCase()
              && (typeof(marked_row[theRowNum]) == 'undefined' || !marked_row[theRowNum])) {
         if (theAction == 'out') {
-            newColor              = theDefaultColor;
+            newClass = theDefaultClass;
         }
-        else if (theAction == 'click' && theMarkColor != '') {
-            newColor              = theMarkColor;
+        else if (theAction == 'click' && theMarkClass != '') {
+            newClass = theMarkClass;
             marked_row[theRowNum] = true;
             //document.getElementById('msg[' + theRowNum + ']').checked = true;
         }
     }
     // 4.1.3 Current color is the marker one
-    else if (currentColor.toLowerCase() == theMarkColor.toLowerCase()) {
+    else if (currentClass.toLowerCase() == theMarkClass.toLowerCase()) {
         if (theAction == 'click') {
-            newColor              = (thePointerColor != '')
-                                  ? thePointerColor
-                                  : theDefaultColor;
+            newClass              = (thePointerClass != '')
+                                  ? thePointerClass
+                                  : theDefaultClass;
             marked_row[theRowNum] = (typeof(marked_row[theRowNum]) == 'undefined' || !marked_row[theRowNum])
                                   ? true
                                   : null;
@@ -184,19 +196,14 @@ function setPointer(theRow, theRowNum, theAction, theDefaultColor, thePointerCol
     } // end 4
 
     // 5. Sets the new color...
-    if (newColor) {
-        var c = null;
+    if (newClass) {
         // 5.1 ... with DOM compatible browsers except Opera
         if (domDetect) {
-            for (c = 0; c < rowCellsCnt; c++) {
-                theCells[c].setAttribute('bgcolor', newColor, 0);
-            } // end for
+        	theRow.setAttribute('className', newClass, 0);
         }
         // 5.2 ... with other browsers
         else {
-            for (c = 0; c < rowCellsCnt; c++) {
-                theCells[c].style.backgroundColor = newColor;
-            }
+        	theRow.className = newClass;
         }
     } // end 5
 
diff --git a/templates/default/message_list.tpl b/templates/default/message_list.tpl
index 85b4646a..9badaa59 100644
--- a/templates/default/message_list.tpl
+++ b/templates/default/message_list.tpl
@@ -26,9 +26,9 @@ do_hook('mailbox_index_before');
 $msg_cnt_str = '';
 if ($pageOffset < $end_msg) {
     $msg_cnt_str = sprintf(_("Viewing Messages: %s to %s (%s total)"),
-                    '<b>'.$pageOffset.'</b>', '<b>'.$end_msg.'</b>', $iNumberOfMessages);
+                    '<em>'.$pageOffset.'</em>', '<em>'.$end_msg.'</em>', $iNumberOfMessages);
 } else if ($pageOffset == $end_msg) {
-    $msg_cnt_str = sprintf(_("Viewing Message: %s (%s total)"), '<b>'.$pageOffset.'</b>', $iNumberOfMessages);
+    $msg_cnt_str = sprintf(_("Viewing Message: %s (%s total)"), '<em>'.$pageOffset.'</em>', $iNumberOfMessages);
 }
 
 
@@ -93,19 +93,19 @@ if ($bIcons) {
 //
 //$clickedColor = '';
 $clickedColor = (empty($color[16])) ? $color[2] : $color[16];
-
+	
 ?>
+<div id="message_list">
 <form id="<?php echo $form_id;?>" name="<?php echo $form_name;?>" method="post" action="<?php echo $php_self;?>">
-<table border="0" width="100%" cellpadding="0" cellspacing="0">
+<table class="table_empty" cellspacing="0">
   <tr>
-    <td>
-    <table width="100%" cellpadding="1"  cellspacing="0" style="border: 1px solid <?php echo $color[0]; ?>;">
+   <td>
+    <table class="table_standard" cellspacing="0">
       <tr>
         <td>
-          <table bgcolor="<?php echo $color[4]; ?>" border="0" width="100%" cellpadding="1"  cellspacing="0">
+          <table class="table_empty" cellspacing="0">
             <tr>
-              <td align="<?php echo $align['left']; ?>">
-                <small>
+              <td class="links_paginator">
 <!-- paginator and thread link string -->
                   <?php
                       /**
@@ -114,10 +114,9 @@ $clickedColor = (empty($color[16])) ? $color[2] : $color[16];
                       $paginator_str = $this->fetch('paginator.tpl');
                       echo $paginator_str . $thread_link_str ."\n"; ?>
 <!-- end paginator and thread link string -->
-                </small>
               </td>
 <!-- message count string -->
-              <td align="right"><small><?php echo $msg_cnt_str; ?></small></td>
+              <td class="message_count"><?php echo $msg_cnt_str; ?></td>
 <!-- end message count string -->
             </tr>
           </table>
@@ -127,12 +126,11 @@ $clickedColor = (empty($color[16])) ? $color[2] : $color[16];
     if (count($aFormElements)) {
 ?>
 <!-- start message list form control -->
-      <tr bgcolor="<?php echo $color[0]; ?>">
+      <tr class="message_list_controls" cellspacing="0">
         <td>
-          <table border="0" width="100%" cellpadding="1"  cellspacing="0">
+          <table class="table_empty" cellspacing="0">
             <tr>
-              <td align="<?php echo $align['left']; ?>">
-                <small>
+              <td class="message_control_buttons" cellspacing="0">
 
 <?php
         foreach ($aFormElements as $key => $value) {
@@ -140,7 +138,7 @@ $clickedColor = (empty($color[16])) ? $color[2] : $color[16];
             case 'submit':
                 if ($key != 'moveButton' && $key != 'delete' && $key != 'undeleteButton') { // add move in a different table cell
 ?>
-                  <input type="submit" name="<?php echo $key; ?>" value="<?php echo $value[0]; ?>" style="padding: 0px; margin: 0px;" />&nbsp;
+                  <input type="submit" name="<?php echo $key; ?>" value="<?php echo $value[0]; ?>" class="message_control_button" />&nbsp;
 <?php
                 }
                 break;
@@ -158,17 +156,14 @@ $clickedColor = (empty($color[16])) ? $color[2] : $color[16];
             }
         }
 ?>
-                </small>
               </td>
-              <td align="<?php echo $align['right']; ?>">
+              <td class="message_control_delete">
 
 
 <?php
         if (isset($aFormElements['delete'])) {
 ?>
-              <td align="<?php echo $align['right']; ?>">
-                <small>
-                  <input type="submit" name="delete" value="<?php echo $aFormElements['delete'][0]; ?>" style="padding: 0px; margin: 0px;" />&nbsp;
+                  <input type="submit" name="delete" value="<?php echo $aFormElements['delete'][0]; ?>" class="message_control_button" />&nbsp;
  <?php
             if (isset($aFormElements['bypass_trash'])) {
 ?>
@@ -177,25 +172,20 @@ $clickedColor = (empty($color[16])) ? $color[2] : $color[16];
             }
             if (isset($aFormElements['undeleteButton'])) {
 ?>
-                  <input type="submit" name="undeleteButton" value="<?php echo $aFormElements['undeleteButton'][0]; ?>" style="padding: 0px; margin: 0px;" />&nbsp;
+                  <input type="submit" name="undeleteButton" value="<?php echo $aFormElements['undeleteButton'][0]; ?>" class="message_control_button" />&nbsp;
 <?php
             }
 ?>
-               </small>
               </td>
 <?php
         } // if (isset($aFormElements['delete']))
         if (isset($aFormElements['moveButton'])) {
 ?>
-              <td align="<?php echo $align['right']; ?>">
-                <small>&nbsp;
-                  <tt>
+              <td class="message_control_move">
                     <select name="targetMailbox">
                        <?php echo $aFormElements['targetMailbox'][0];?>
                     </select>
-                  </tt>
-                  <input type="submit" name="moveButton" value="<?php echo $aFormElements['moveButton'][0]; ?>" style="padding: 0px; margin: 0px;" />
-                </small>
+                  <input type="submit" name="moveButton" value="<?php echo $aFormElements['moveButton'][0]; ?>" class="message_control_button" />
               </td>
 
 <?php
@@ -215,29 +205,32 @@ $clickedColor = (empty($color[16])) ? $color[2] : $color[16];
 ?>
     </td>
   </tr>
-  <tr><td height="5" bgcolor="<?php echo $color[4]; ?>"></td></tr>
+  <tr><td class="spacer"></td></tr>
   <tr>
     <td>
-      <table width="100%" cellpadding="1" cellspacing="0" align="center" border="0" bgcolor="<?php echo $color[9]; ?>">
+      <table class="table_messageListWrapper" cellspacing="0">
         <tr>
           <td>
-            <table width="100%" cellpadding="1" cellspacing="0" align="center" border="0" bgcolor="<?php echo $color[5]; ?>">
-              <tr>
-                <td>
+            <table class="table_messageList" cellspacing="0">
 <!-- table header start -->
-                  <tr>
+<?php
+/*
+ * As an FYI, Firefox on Windows seems to have an issue w/ putting wierd breaks while
+ * rendering this table if we use THEAD and TH tags.  No other browser or platform has 
+ * this issue.  We will use TR/TD w/ another CSS class to work around this.
+ */
+?>
+              <tr class="headerRow">
 <?php
     $aWidth = calcMessageListColumnWidth($aOrder);
     foreach($aOrder as $iCol) {
-
 ?>
-                    <td align="<?php echo $align['left']; ?>" width="<?php echo $aWidth[$iCol]; ?>%" style="white-space: nowrap;">
-                        <b>
+                    <td style="width:<?php echo $aWidth[$iCol]; ?>%">
 <?php
         switch ($iCol) {
           case SQM_COL_CHECK:
               if ($javascript_on) {
-                  echo '<input type="checkbox" name="toggleAll" title="'._("Toggle All").'" onclick="toggle_all(\''.$form_id."',".$fancy_index_highlite.",'".$clickedColor.'\');" />';
+                  echo '<input type="checkbox" name="toggleAll" title="'._("Toggle All").'" onclick="toggle_all(\''.$form_id."',".$fancy_index_highlite.')" />'."\n";
               } else {
                   $link = $baseurl . "&amp;startMessage=$pageOffset&amp;&amp;checkall=";
                   if (sqgetGlobalVar('checkall',$checkall,SQ_GET)) {
@@ -248,35 +241,35 @@ $clickedColor = (empty($color[16])) ? $color[2] : $color[16];
                   echo "<a href=\"$link\">"._("All").'</a>';
               }
               break;
-          case SQM_COL_FROM:       echo _("From");     break;
-          case SQM_COL_DATE:       echo _("Date");     break;
-          case SQM_COL_SUBJ:       echo _("Subject");  break;
+          case SQM_COL_FROM:       echo _("From")."\n";     break;
+          case SQM_COL_DATE:       echo _("Date")."\n";     break;
+          case SQM_COL_SUBJ:       echo _("Subject")."\n";  break;
           case SQM_COL_FLAGS:
                if ($bIcons) {
-                  echo '<img src="' . $sImageLocation. 'msg_new.png" border="0" height="12" width="18" alt="!" title="'. _("Message Flags") . '" />';
+                  echo '<img src="' . $sImageLocation. 'msg_new.png" border="0" height="12" width="18" alt="!" title="'. _("Message Flags") . '" />'."\n";
                } else {
-                  echo  '&nbsp;';
+                  echo  '&nbsp;'."\n";
                }
                break;
-          case SQM_COL_SIZE:       echo  _("Size");    break;
+          case SQM_COL_SIZE:       echo  _("Size")."\n";    break;
           case SQM_COL_PRIO:
                if ($bIcons) {
-                  echo '<img src="' . $sImageLocation. 'prio_high.png" border="0" height="10" width="5" alt="!" title="'. _("Priority") . '" />';
+                  echo '<img src="' . $sImageLocation. 'prio_high.png" border="0" height="10" width="5" alt="!" title="'. _("Priority") . '" />'."\n";
                } else {
-                  echo  '!';
+                  echo  '!'."\n";
                }
                break;
           case SQM_COL_ATTACHMENT:
                if ($bIcons) {
-                  echo '<img src="' . $sImageLocation. 'attach.png" border="0" height="10" width="6" alt="+" title="' . _("Attachment") . '"/>';
+                  echo '<img src="' . $sImageLocation. 'attach.png" border="0" height="10" width="6" alt="+" title="' . _("Attachment") . '"/>'."\n";
                } else {
-                  echo  '+';
+                  echo  '+'."\n";
                }
                break;
-          case SQM_COL_INT_DATE:   echo _("Received"); break;
-          case SQM_COL_TO:         echo _("To");       break;
-          case SQM_COL_CC:         echo _("Cc");       break;
-          case SQM_COL_BCC:        echo _("Bcc");      break;
+          case SQM_COL_INT_DATE:   echo _("Received")."\n"; break;
+          case SQM_COL_TO:         echo _("To")."\n";       break;
+          case SQM_COL_CC:         echo _("Cc")."\n";       break;
+          case SQM_COL_BCC:        echo _("Bcc")."\n";      break;
           default: break;
         }
         // add the sort buttons
@@ -295,15 +288,15 @@ $clickedColor = (empty($color[16])) ? $color[2] : $color[16];
             echo " <a href=\"$baseurl&amp;startMessage=1&amp;srt=$newsort\">";
             echo '<img src="../images/' . $img
                 . '" border="0" width="12" height="10" alt="sort" title="'
-                . _("Click here to change the sorting of the message list") .'" /></a>';
+                . _("Click here to change the sorting of the message list") .'" /></a>'."\n";
         }
 ?>
-                      </b>
                     </td>
 <?php
     }
 ?>
-                  </tr>
+              </tr>
+<!-- end table header -->
 
 <!-- Message headers start -->
 <?php
@@ -369,9 +362,9 @@ $clickedColor = (empty($color[16])) ? $color[2] : $color[16];
             $sValue = '';
             switch ($aColumns[SQM_COL_PRIO]['value']) {
                 case 1:
-                case 2: $sValue .= "<font color=\"$color[1]\">!</font>"; break;
+                case 2: $sValue .= '<span class="high_priority">!</span>'; break;
         // use downwards arrow for low priority emails
-                case 5: $sValue .= "<font color=\"$color[8]\">&#8595;</font>"; break;
+                case 5: $sValue .= '<span class="low_priority">&#8595;</span>'; break;
                 default: break;
             }
         }
@@ -394,30 +387,29 @@ $clickedColor = (empty($color[16])) ? $color[2] : $color[16];
         $aColumns[SQM_COL_ATTACHMENT]['value'] = $sValue;
     }
 
-
-    $bgcolor = $color[4];
-
+	$class = 'even';
     /**
-     * If alternating row colors is set, adapt the bgcolor
+     * If alternating row colors is set, adapt the CSS class
      */
     if (isset($alt_index_colors) && $alt_index_colors) {
         if (!($i % 2)) {
-            if (!isset($color[12])) {
-                $color[12] = '#EAEAEA';
-            }
-            $bgcolor = $color[12];
+        	$class = 'odd';
         }
 
     }
-    $bgcolor = (isset($aMsg['row']['color'])) ? $aMsg['row']['color']: $bgcolor;
-    $class = 'msg_row';
+    if (isset($aMsg['row']['color']))
+    {
+    	$bgcolor = $aMsg['row']['color'];
+    	$class = 'misc'.$i;
+    }
+    else $bgcolor = '';
 
     $row_extra = '';
 
     // this stuff does the auto row highlighting on mouseover
     //
     if ($javascript_on && $fancy_index_highlite) {
-        $row_extra .= ' onmouseover="rowOver(\''.$form_id . "_msg$i','". $mouseoverColor . '\', \'' . $clickedColor . '\');" onmouseout="setPointer(this, ' . $i . ', \'out\', \'' . $bgcolor . '\', \'' . $mouseoverColor . '\', \'' . $clickedColor . '\');" onmousedown="setPointer(this, ' . $i . ', \'click\', \'' . $bgcolor . '\', \'' . $mouseoverColor . '\', \'' . $clickedColor . '\');"';
+        $row_extra .= ' onmouseover="rowOver(\''.$form_id . '_msg' . $i.'\');" onmouseout="setPointer(this, ' . $i . ', \'out\', \'' . $class . '\', \'mouse_over\', \'clicked\');" onmousedown="setPointer(this, ' . $i . ', \'click\', \'' . $class . '\', \'mouse_over\', \'clicked\');"';
     }
     // this does the auto-checking of the checkbox no matter
     // where on the row you click
@@ -428,22 +420,37 @@ $clickedColor = (empty($color[16])) ? $color[2] : $color[16];
         $javascript_auto_click = " onMouseDown=\"row_click('$form_id"."_msg$i')\"";
     }
 
+/*
+ * Message Highlighting requires a unique CSS class declaration for proper
+ * mouseover functionality.  There is no harm in doing this when the mouseover
+ * functionality is disabled
+ */
+if ($class != 'even' && $class != 'odd')
+{
+?>
+<style type="text/css">
+<!--
+.table_messageList	tr.<?php echo $class; ?>	{ background:<?php echo $bgcolor; ?> }
+-->
+</style>
+<?
+}
 ?>
-<tr class="<?php echo $class;?>" valign="top" bgcolor="<?php echo $bgcolor; ?>"<?php echo $row_extra;?>>
+<tr <?php echo (empty($class) ? '' : 'class="'.$class.'" ');  echo $row_extra;?>>
 <?php
     // flag style mumbo jumbo
     $sPre = $sEnd = '';
     if (isset($aColumns[SQM_COL_FLAGS])) {
         if (!in_array('seen',$aFlags)) {
-            $sPre = '<b>'; $sEnd = '</b>';
+            $sPre = '<span class="unread">'; $sEnd = '</span>';
         }
         if (in_array('deleted',$aFlags) && $aFlags['deleted']) {
-            $sPre = "<font color=\"$color[9]\">" . $sPre;
-            $sEnd .= '</font>';
+            $sPre = '<span class="deleted">' . $sPre;
+            $sEnd .= '</span>';
         } else {
             if (in_array('flagged',$aFlags) && $aFlags['flagged']) {
-                $sPre = "<font color=\"$color[2]\">" . $sPre;
-                $sEnd .= '</font>';
+                $sPre = '<span class="flagged">' . $sPre;
+                $sEnd .= '</span>';
             }
         }
     }
@@ -474,13 +481,13 @@ $clickedColor = (empty($color[16])) ? $color[2] : $color[16];
 
         switch ($iCol) {
           case SQM_COL_CHECK:
-            echo '<td align="' .$align['left'] .'"'. $javascript_auto_click. ' bgcolor="'.$bgcolor.'" style="white-space: nowrap;">' ?>
+            echo '<td class="col_check"'. $javascript_auto_click. '>' ?>
             <input type="checkbox" name="<?php echo "msg[$i]";?>" id="<?php echo $form_id."_msg$i";?>" value="<?php echo $iUid;?>" <?php echo $checkbox_javascript;?> /></td>
             <?php
             break;
           case SQM_COL_SUBJ:
             $indent = $aCol['indent'];
-            $sText = "    <td class=\"col_subject\" align=\"$align[left]\" $javascript_auto_click bgcolor=\"$bgcolor\">";
+            $sText = "    <td class=\"col_subject\" $javascript_auto_click>";
             if ($align['left'] == 'left') {
                 $sText .= str_repeat('&nbsp;&nbsp;',$indent);
             }
@@ -491,7 +498,7 @@ $clickedColor = (empty($color[16])) ? $color[2] : $color[16];
             if ($link_extra) { $sText .= " $link_extra";          }
             if ($javascript_on && $fancy_index_highlite) {
                   $sText .= " onmousedown=\"row_click('$form_id"."_msg$i'); setPointer(this." . (empty($bold) ? '' : 'parentNode.') .
-                            'parentNode.parentNode, ' . $i . ', \'click\', \'' . $bgcolor . '\', \'' . $mouseoverColor . '\', \'' .
+                            'parentNode.parentNode, ' . $i . ', \'click\', \''. $class. '\', \'mouse_over\', \'' .
                              $clickedColor .'\');"';
             }
             $sText .= ">";
@@ -503,18 +510,18 @@ $clickedColor = (empty($color[16])) ? $color[2] : $color[16];
             break;
           case SQM_COL_SIZE:
           case SQM_COL_FLAGS:
-            $sText = "    <td class=\"col_flags\" align=\"$align[left]\" $javascript_auto_click bgcolor=\"$bgcolor\" style=\"white-space: nowrap;\">";
-            $sText .= "<small>$value</small></td>\n";
+            $sText = "    <td class=\"col_flags\" $javascript_auto_click>";
+            $sText .= "$value</td>\n";
             echo $sText;
             break;
           case SQM_COL_INT_DATE:
           case SQM_COL_DATE:
-            $sText = "    <td class=\"col_date\" align=\"center\" $javascript_auto_click  bgcolor=\"$bgcolor\" style=\"white-space: nowrap;\">";
+            $sText = "    <td class=\"col_date\" $javascript_auto_click>";
             $sText .= $value. "</td>\n";
             echo $sText;
             break;
           default:
-            $sText = "    <td class=\"col_text\" align=\"$align[left]\" style=\"white-space: nowrap;\" $javascript_auto_click bgcolor=\"$bgcolor\"";
+            $sText = "    <td class=\"col_text\" $javascript_auto_click";
             if ($link) {
                 $sText .= "><a href=\"$link\"";
                 if ($target) { $sText .= " target=\"$target\"";}
@@ -533,7 +540,7 @@ $clickedColor = (empty($color[16])) ? $color[2] : $color[16];
 ?>
                   </tr>
 <?php
-            $sLine = "<tr><td colspan=\"$iColCnt\" height=\"1\" bgcolor=\"$color[0]\"></td></tr>";
+            $sLine = "<tr><td colspan=\"$iColCnt\" class=\"spacer\"></td></tr>\n";
             ++$i;
 
 /*
@@ -549,16 +556,16 @@ $clickedColor = (empty($color[16])) ? $color[2] : $color[16];
           </table>
         </td>
       </tr>
-      <tr><td height="5" bgcolor="<?php echo $color[4]; ?>" colspan="1"></td></tr>
+      <tr><td class="spacer"></td></tr>
       <tr>
         <td>
-          <table width="100%" cellpadding="1"  cellspacing="0" style="border: 1px solid <?php echo $color[0]; ?>;">
+          <table class="table_standard" cellspacing="0">
             <tr>
               <td>
-                <table bgcolor="<?php echo $color[4]; ?>" border="0" width="100%" cellpadding="1"  cellspacing="0">
+                <table class="table_empty" cellspacing="0">
                   <tr>
-                    <td align="left"><small><?php echo $paginator_str; ?></small></td>
-                    <td align="right"><small><?php echo $msg_cnt_str; ?></small></td>
+                    <td class="links_paginator"><?php echo $paginator_str; ?></td>
+                    <td class="message_count"><?php echo $msg_cnt_str; ?></td>
                   </tr>
                 </table>
               </td>
@@ -573,3 +580,4 @@ $clickedColor = (empty($color[16])) ? $color[2] : $color[16];
       </tr>
     </table>
 </form>
+</div>
diff --git a/templates/default/page_header.tpl b/templates/default/page_header.tpl
new file mode 100644
index 00000000..438667e0
--- /dev/null
+++ b/templates/default/page_header.tpl
@@ -0,0 +1,91 @@
+<?php
+
+/**
+ * page_header.tpl
+ *
+ * Template to create the header for each page.
+ *
+ * @copyright &copy; 1999-2006 The SquirrelMail Project Team
+ * @license http://opensource.org/licenses/gpl-license.php GNU Public License
+ * @version $Id$
+ * @package squirrelmail
+ * @subpackage templates
+ */
+
+/* retrieve the template vars */
+extract($t);
+
+
+$current_folder_str = '';
+if ( $shortBoxName <> '' && strtolower( $shortBoxName ) <> 'none' ) {
+    $current_folder_str .= _("Current Folder") . ": <em>$shortBoxName&nbsp;</em>\n";
+} else {
+    $current_folder_str .= '&nbsp;';
+}
+
+// Define our default link text.
+$signout_link_default = _('Sign Out');
+$compose_link_default = _('Compose');
+$address_link_default = _('Addresses');
+$folders_link_default = _('Folders');
+$options_link_default = _('Options');
+$search_link_default = _('Search');
+$help_link_default = _('Help');
+
+/*
+ * Create strings to use for links.  If tempalte authors
+ * wish to use images instead, they may change the values
+ * below to img tags.
+
+ * Example w/ image:
+ * $compose_str = '<img src="compose.png" border="0" ' .
+ *				  'alt="'.$compose_link_default.'" ' .
+ *				  'title="'.$compose_link_default.'" />';
+ */
+
+$signout_str = $signout_link_default;
+$compose_str = $compose_link_default;
+$address_str = $address_link_default;
+$folders_str = $folders_link_default;
+$options_str = $options_link_default;
+$search_str = $search_link_default;
+$help_str = $help_link_default;
+
+$compose_link	= makeComposeLink ('src/compose.php?mailbox='.$urlMailbox.'&amp;startMessage='.$startMessage, $compose_str);
+$signout_link	= makeInternalLink ('src/signout.php', $signout_str, $frame_top);
+$address_link	= makeInternalLink ('src/addressbook.php', $address_str);
+$folders_link	= makeInternalLink ('src/folders.php', $folders_str);
+$search_link	= makeInternalLink ('src/search.php?mailbox='.$urlMailbox, $search_str);
+$options_link	= makeInternalLink ('src/options.php', $options_str);
+$help_link		= makeInternalLink ('src/help.php', $help_str);
+
+?>
+<body <?php echo $body_tag_js; ?>>
+<div id="page_header">
+<a name="pagetop"></a>
+<!-- Begin Header Navigation Table -->
+<table class="table_empty" cellspacing="0">
+ <tr>
+  <td class="sqm_currentFolder">
+   <?php echo $current_folder_str; ?>
+  </td>
+  <td class="sqm_headerSignout">
+   <?php echo $signout_link; ?>
+  </td>
+ </tr>
+ <tr>
+  <td class="sqm_topNavigation"<?php echo ($hide_sm_attributions ? ' colspan="2"' : ''); ?>>
+   <?php echo $compose_link; ?>&nbsp;&nbsp;
+   <?php echo $address_link; ?>&nbsp;&nbsp;
+   <?php echo $folders_link; ?>&nbsp;&nbsp;
+   <?php echo $options_link; ?>&nbsp;&nbsp;
+   <?php echo $search_link; ?>&nbsp;&nbsp;
+   <?php echo $help_link; ?>&nbsp;&nbsp;
+   <?php do_hook('menuline'); ?>
+  </td>
+  <?php echo $sm_attribute_str."\n"; ?>
+ </tr>
+</table>
+</div>
+<br />
+<!-- End Header Navigation Table -->
diff --git a/templates/default/stylesheet.tpl b/templates/default/stylesheet.tpl
index a4f92609..b43ecf8e 100644
--- a/templates/default/stylesheet.tpl
+++ b/templates/default/stylesheet.tpl
@@ -2,9 +2,9 @@
 /**
  * SquirrelMail CSS template
  *
- * Template is used by style.php script to generate css file used by 
+ * Template is used by style.php script to generate css file used by
  * SquirrelMail scripts.
- * 
+ *
  * Available constants
  *
  * Color codes used by selected theme:
@@ -40,23 +40,23 @@ extract($t);
 /* older css template */
 body, td, th, dd, dt, h1, h2, h3, h4, h5, h6, p, ol, ul, li {
 <?php
-  if($fontfamily) echo '  font-family: '.$fontfamily.";\n";
+if($fontfamily) echo '  font-family: '.$fontfamily.";\n";
 ?>
 }
 body, small {
 <?php
-  if($fontsize) echo '  font-size: '.($fontsize-2)."pt;\n";
+if($fontsize) echo '  font-size: '.($fontsize-2)."pt;\n";
 ?>
 }
 td, th {
 <?php
-  if($fontsize) echo '  font-size: '.$fontsize."pt;\n";
+if($fontsize) echo '  font-size: '.$fontsize."pt;\n";
 ?>
 }
 textarea, pre {
-  font-family: monospace;
+font-family: monospace;
 <?php
-  if($fontsize) echo '  font-size: '.($fontsize-1)."pt;\n";
+if($fontsize) echo '  font-size: '.($fontsize-1)."pt;\n";
 ?>
 }
 
@@ -146,3 +146,178 @@ input.sqmresetfield {
 }
 input.sqmtextarea {
 }
+
+/* basic definitions */
+.table_empty {
+    width:100%;
+    border:0;
+    margin:0;
+    padding:0;
+    border-spacing:0;
+}
+
+.table_standard {
+    width:100%;
+    border:1px solid <?php echo $color[0]; ?>;
+    padding:0;
+    margin:0;
+    border-spacing:0;
+}
+
+em		{
+    font-weight:bold;
+    font-style:normal;
+}
+
+small	{
+    font-size:80%;
+}
+
+/* page_header.tpl definitions */
+.sqm_currentFolder	{
+    background: <?php echo $color[9]; ?>;
+    padding:2px;
+    text-align: <?php echo SQM_ALIGN_LEFT; ?>;
+}
+.sqm_headerSignout	{
+    background: <?php echo $color[9]; ?>;
+    padding:2px;
+    text-align: <?php echo SQM_ALIGN_RIGHT; ?>;
+    font-weight:bold;
+}
+.sqm_topNavigation	{
+    padding:2px;
+    text-align: <?php echo SQM_ALIGN_LEFT; ?>;
+}
+.sqm_providerInfo	{
+    padding:2px;
+    text-align: <?php echo SQM_ALIGN_RIGHT; ?>;
+}
+
+/* message_list.tpl definitions */
+.table_messageListWrapper	{
+    width:100%;
+    padding:0;
+    border-spacing:0;
+    border:0;
+    text-align:center;
+    margin-left:auto;
+    margin-right:auto;
+    background: <?php echo $color[9]; ?>;
+}
+
+.table_messageList	{
+    width:100%;
+    padding:0;
+    border-spacing:0;
+    border:0;
+    text-align:center;
+    margin-left:auto;
+    margin-right:auto;
+    background: <?php echo $color[5]; ?>;
+}
+
+.table_messageList	a	{
+    white-space:nowrap;
+}
+
+.table_messageList	tr.headerRow	{
+    text-align: <?php echo SQM_ALIGN_LEFT; ?>;
+    white-space:nowrap;
+    font-weight:bold;
+}
+.table_messageList td.spacer {
+    height:1px;
+    background: <?php echo $color[0]; ?>;
+}
+
+.table_messageList	tr		{
+    vertical-align:top;
+}
+.table_messageList	tr.even	{
+    background: <?php echo $color[12]; ?>;
+}
+.table_messageList	tr.odd	{
+    background: <?php echo $color[4]; ?>;
+}
+.table_messageList	tr.mouse_over	{
+    background: <?php echo $color[5]; ?>;
+}
+.table_messageList	tr.clicked	{
+    background: <?php echo (!empty($color[16])) ? $color[16] : $color[2]; ?>;
+}
+
+.table_messageList	td	{
+    white-space:nowrap;
+}
+.table_messageList	td.col_check	{
+    text-align: <?php echo SQM_ALIGN_LEFT; ?>;
+}
+.table_messageList	td.col_subject	{
+    text-align: <?php echo SQM_ALIGN_LEFT; ?>;
+}
+.table_messageList	td.col_flags	{
+    text-align: <?php echo SQM_ALIGN_LEFT; ?>;
+}
+.table_messageList	td.col_date	{
+    text-align:center;
+}
+.table_messageList	td.col_text	{
+    text-align: <?php echo SQM_ALIGN_LEFT; ?>;
+}
+
+.unread		{
+    font-weight:bold;
+}
+.deleted	{
+    color: <?php echo $color[9]; ?>;
+}
+.flagged	{
+    color: <?php echo $color[2]; ?>;
+}
+.high_priority	{
+    color: <?php echo $color[1]; ?>;
+}
+.low_priority	{
+    color: <?php echo $color[8]; ?>;
+}
+
+.col_checked	{
+}
+
+.links_paginator			{
+    text-align: <?php echo SQM_ALIGN_LEFT; ?>;
+}
+
+.message_count				{
+    text-align:right;
+    font-size:8pt;
+}
+
+.message_list_controls {
+    background: <? echo $color[0]; ?>;
+}
+
+.message_control_button {
+    padding:0px;
+    margin:0px;
+}
+.message_control_buttons {
+    text-align: <?php echo SQM_ALIGN_LEFT; ?>;
+    font-size:10px;		/* replaces <small> tags to allow greater control of fonts w/ using an id. */
+}
+.message_control_delete {
+    text-align: <?php echo SQM_ALIGN_RIGHT; ?>;
+    font-size:10px;		/* replaces <small> tags to allow greater control of fonts w/ using an id. */
+}
+.message_control_move {
+    text-align: <?php echo SQM_ALIGN_RIGHT; ?>;
+    font-size:10px;		/* replaces <small> tags to allow greater control of fonts w/ using an id. */
+}
+
+.spacer	{
+    height:5px;
+    background: <?php echo $color[4]; ?>;
+}
+
+