diff --git a/config/alfresco/templates/webscripts/org/alfresco/office/documentDetails.get.html.ftl b/config/alfresco/templates/webscripts/org/alfresco/office/documentDetails.get.html.ftl
index 48e84d22e6..f18f40b74f 100644
--- a/config/alfresco/templates/webscripts/org/alfresco/office/documentDetails.get.html.ftl
+++ b/config/alfresco/templates/webscripts/org/alfresco/office/documentDetails.get.html.ftl
@@ -105,7 +105,7 @@
       <#assign versionRow=versionRow+1>
       <tr class="${(versionRow % 2 = 0)?string("odd", "even")}">
          <td valign="top">
-            <a title="Open ${record.versionLabel}" href="$(url.context}${d.url}"><img src="${url.context}/images/office/document.gif" alt="Open ${record.versionLabel}" /></a>
+            <a title="Open ${record.versionLabel}" href="${url.context}${d.url}"><img src="${url.context}/images/office/document.gif" alt="Open ${record.versionLabel}" /></a>
          </td>
          <td>
             <a title="Open ${record.versionLabel}" href="#"><span style="font-weight:bold;">${record.versionLabel}</span></a><br />
@@ -114,7 +114,7 @@
          <#if record.description?exists>
             Notes: ${record.description}<br/>
          </#if>
-<!--                       <a href="#" onclick="window.external.compareDocument('/alfresco${d.url}')" title="Compare with current">Compare with current</a><br/> -->
+            <a class="bold" href="#" onclick="window.external.compareDocument('${d.url}')" title="Compare with current">Compare with current</a><br />
          </td>
       </tr>
    </#list>
diff --git a/config/alfresco/templates/webscripts/org/alfresco/office/myAlfresco.get.html.ftl b/config/alfresco/templates/webscripts/org/alfresco/office/myAlfresco.get.html.ftl
index 27ba987a67..7adbbefa69 100644
--- a/config/alfresco/templates/webscripts/org/alfresco/office/myAlfresco.get.html.ftl
+++ b/config/alfresco/templates/webscripts/org/alfresco/office/myAlfresco.get.html.ftl
@@ -30,7 +30,7 @@
 <div id="tabBar">
    <ul>
       <li id="current"><a title="My Alfresco" href="${url.serviceContext}/office/myAlfresco?p=${path?url}"><span><img src="${url.context}/images/office/my_alfresco.gif" alt="My Alfresco" /></span></a></li>
-      <li><a title="Browse Spaces and Documents" href="${url.serviceContext}/office/navigation?p=${path?url}&amp;n=${d.id}"><span><img src="${url.context}/images/office/navigator.gif" alt="Browse Spaces and Documents" /></span></a></li>
+      <li><a title="Browse Spaces and Documents" href="${url.serviceContext}/office/navigation?p=${path?url}"><span><img src="${url.context}/images/office/navigator.gif" alt="Browse Spaces and Documents" /></span></a></li>
       <li><a title="Search Alfresco" href="${url.serviceContext}/office/search?p=${path?url}"><span><img src="${url.context}/images/office/search.gif" alt="Search Alfresco" /></span></a></li>
       <li><a title="View Details" href="${url.serviceContext}/office/documentDetails?p=${path?url}"><span><img src="${url.context}/images/office/document_details.gif" alt="View Details" /></span></a></li>
       <li><a title="My Tasks" href="${url.serviceContext}/office/myTasks?p=${path?url}"><span><img src="${url.context}/images/office/my_tasks.gif" alt="My Tasks" /></span></a></li>
@@ -40,25 +40,26 @@
 <div class="header">My Checked Out Documents<span class="headerExtra"><span class="toggle">&nbsp;</span></span></div>
 
 <div id="checkedoutList" class="containerMedium togglePanel">
-   <table width="265">
 <#assign rowNum=0>
 <#assign query="@cm\\:workingCopyOwner:${person.properties.userName}">
    <#list companyhome.childrenByLuceneSearch[query] as child>
       <#if child.isDocument>
       <#assign rowNum=rowNum+1>
-      <tr class="checkedoutItem ${(rowNum % 2 = 0)?string("odd", "even")}">
-         <td valign="top">
+      <div class="documentItem ${(rowNum % 2 = 0)?string("odd", "even")}">
+         <span class="documentItemIcon">
             <img src="${url.context}${child.icon32}" alt="${child.name}" />
-         </td>
-         <td style="line-height:16px;">
+         </span>
+         <span class="documentItemDetails">
          <#if child.name?ends_with(".doc")>
             <#assign webdavPath = (child.displayPath?substring(13) + '/' + child.name)?url('ISO-8859-1')?replace('%2F', '/')?replace('\'', '\\\'') />
             <a href="#" onclick="window.external.openDocument('${webdavPath}')" title="Open ${child.name}" style="font-weight: bold;">${child.name}</a><br/>
          <#else>
-            <a href="${url.context}${child.url}?ticket=${session.ticket}" title="Open ${child.name}" style="font-weight: bold;">${child.name}</a><br/>
+            <a href="${url.context}${child.url}?ticket=${session.ticket}" target="_blank" title="Open ${child.name}" style="font-weight: bold;">${child.name}</a><br/>
          </#if>
          <#if child.properties.description?exists>
-            ${child.properties.description}<br/>
+            <#if (child.properties.description?length > 0)>
+               ${child.properties.description}<br />
+            </#if>
          </#if>
             Modified: ${child.properties.modified?datetime} (${(child.size / 1024)?int}Kb)<br/>
             <a href="#" onclick="OfficeAddin.runAction('${doc_actions}','checkin','${child.id}', '');"><img src="${url.context}/images/office/checkin.gif" style="padding:3px 6px 2px 0px;" alt="Check In" title="Check In" /></a>
@@ -66,57 +67,56 @@
          <#if !child.name?ends_with(".pdf")>
             <a href="#" onclick="OfficeAddin.runAction('${doc_actions}','makepdf','${child.id}', '');"><img src="${url.context}/images/office/makepdf.gif" style="padding:3px 6px 2px 0px;" alt="Make PDF..." title="Make PDF" /></a>
          </#if>
-         </td>
-      </tr>
+         </span>
+      </div>
       </#if>
    </#list>
    <#if rowNum = 0>
-      <tr>
-         <td class="noItems">(No documents)</td>
-      </tr>
+      <div>
+         <span class="noItems">(No documents)</span>
+      </div>
    </#if>
-   </table>
 </div>
 
 <div class="header">My Tasks<span class="headerExtra"><span class="taskKey"><img src="${url.context}/images/office/task_overdue.gif" alt="overdue" />=overdue, <img src="${url.context}/images/office/task_today.gif" alt="due today" />=due today</span><span class="toggle">&nbsp;</span></span></div>
 
 <div id="taskList" class="containerMedium togglePanel">
-   <table width="265">
 <#assign taskNum=0>
 <#list workflow.assignedTasks?sort_by('startDate') as t>
    <#assign taskNum=taskNum+1>
-      <tr id="${t.id?replace("$", ".")}" class="taskItem ${(taskNum % 2 = 0)?string("odd", "even")}">
-         <td>
    <#assign hasDue=t.properties["bpm:dueDate"]?exists>
    <#if hasDue>
       <#assign due=t.properties["bpm:dueDate"]>
+   </#if>
+   <div id="${t.id?replace("$", ".")}" class="taskItem" rel="<#if hasDue>${due?date?string("yyyyMMddHHmmss")}<#else>99999999999999</#if>">
+      <span class="taskIndicator">
+   <#if hasDue>
       <#-- items due today? -->
       <#if (dateCompare(date?date, due?date, 0, "==") == 1)>
-            <img src="${url.context}/images/office/task_today.gif" alt="due today" />
+         <img src="${url.context}/images/office/task_today.gif" alt="due today" />
       <#-- items overdue? -->
       <#elseif (dateCompare(date?date, due?date) == 1)>
-            <img src="${url.context}/images/office/task_overdue.gif" alt="overdue" />
+         <img src="${url.context}/images/office/task_overdue.gif" alt="overdue" />
       </#if>
    <#else>
-            &nbsp;
+         &nbsp;
    </#if>
-         </td>
-         <td>
-            <span style="font-weight: bold;">${t.description?html}</span> (${t.type?html})
+      </span>
+      <span class="taskItemDetails">
+         <span style="font-weight: bold;">${t.description?html}</span> (${t.type?html})
    <#if hasDue>
-               <br />Due date: ${due?date}
+            <br />Due date: ${due?date}
    <#else>
-               <br />(No due date)
+            <br />(No due date)
    </#if>
-         </td>
-      </tr>
+      </span>
+   </div>
 </#list>
 <#if taskNum = 0>
-      <tr>
-         <td class="noItems">(No tasks)</td>
-      </tr>
+   <div>
+      <span class="noItems">(No tasks)</span>
+   </div>
 </#if>
-   </table>
 </div>
 
 <div class="header">Actions</div>
diff --git a/config/alfresco/templates/webscripts/org/alfresco/office/myTasks.get.html.ftl b/config/alfresco/templates/webscripts/org/alfresco/office/myTasks.get.html.ftl
index 33fb3775d1..ece4792c89 100644
--- a/config/alfresco/templates/webscripts/org/alfresco/office/myTasks.get.html.ftl
+++ b/config/alfresco/templates/webscripts/org/alfresco/office/myTasks.get.html.ftl
@@ -35,7 +35,7 @@
 <div id="tabBar">
    <ul>
       <li><a title="My Alfresco" href="${url.serviceContext}/office/myAlfresco?p=${path?url}"><span><img src="${url.context}/images/office/my_alfresco.gif" alt="My Alfresco" /></span></a></li>
-      <li><a title="Browse Spaces and Documents" href="${url.serviceContext}/office/navigation?p=${path?url}&amp;n=${d.id}"><span><img src="${url.context}/images/office/navigator.gif" alt="Browse Spaces and Documents" /></span></a></li>
+      <li><a title="Browse Spaces and Documents" href="${url.serviceContext}/office/navigation?p=${path?url}"><span><img src="${url.context}/images/office/navigator.gif" alt="Browse Spaces and Documents" /></span></a></li>
       <li><a title="Search Alfresco" href="${url.serviceContext}/office/search?p=${path?url}"><span><img src="${url.context}/images/office/search.gif" alt="Search Alfresco" /></span></a></li>
       <li><a title="View Details" href="${url.serviceContext}/office/documentDetails?p=${path?url}"><span><img src="${url.context}/images/office/document_details.gif" alt="View Details" /></span></a></li>
       <li id="current"><a title="My Tasks" href="${url.serviceContext}/office/myTasks?p=${path?url}"><span><img src="${url.context}/images/office/my_tasks.gif" alt="My Tasks" /></span></a></li>
@@ -45,42 +45,42 @@
 <div class="header">My Tasks<span class="headerExtra"><span class="taskKey"><img src="${url.context}/images/office/task_overdue.gif" alt="overdue" />=overdue, <img src="${url.context}/images/office/task_today.gif" alt="due today" />=due today</span></span></div>
 
 <div id="taskList" class="containerMedium">
-   <table width="265">
 <#assign taskNum=0>
 <#list workflow.assignedTasks?sort_by('startDate') as t>
    <#assign taskNum=taskNum+1>
-      <tr id="${t.id?replace("$", ".")}" class="taskItem ${(taskNum % 2 = 0)?string("odd", "even")}">
-         <td>
    <#assign hasDue=t.properties["bpm:dueDate"]?exists>
    <#if hasDue>
       <#assign due=t.properties["bpm:dueDate"]>
+   </#if>
+   <div id="${t.id?replace("$", ".")}" class="taskItem" rel="<#if hasDue>${due?date?string("yyyyMMddHHmmss")}<#else>99999999999999</#if>">
+      <span class="taskIndicator">
+   <#if hasDue>
       <#-- items due today? -->
       <#if (dateCompare(date?date, due?date, 0, "==") == 1)>
-            <img src="${url.context}/images/office/task_today.gif" alt="due today" />
+         <img src="${url.context}/images/office/task_today.gif" alt="due today" />
       <#-- items overdue? -->
       <#elseif (dateCompare(date?date, due?date) == 1)>
-            <img src="${url.context}/images/office/task_overdue.gif" alt="overdue" />
+         <img src="${url.context}/images/office/task_overdue.gif" alt="overdue" />
       </#if>
    <#else>
-            &nbsp;
+         &nbsp;
    </#if>
-         </td>
-         <td>
-            <span style="font-weight: bold;">${t.description?html}</span> (${t.type?html})
+      </span>
+      <span class="taskItemDetails">
+         <span style="font-weight: bold;">${t.description?html}</span> (${t.type?html})
    <#if hasDue>
-               <br />Due date: ${due?date}
+            <br />Due date: ${due?date}
    <#else>
-               <br />(No due date)
+            <br />(No due date)
    </#if>
-         </td>
-      </tr>
+      </span>
+   </div>
 </#list>
 <#if taskNum = 0>
-      <tr>
-         <td class="noItems">(No tasks)</td>
-      </tr>
+   <div>
+      <span class="noItems">(No tasks)</span>
+   </div>
 </#if>
-   </table>
 </div>
 
 <div class="header">Workflow</div>
diff --git a/config/alfresco/templates/webscripts/org/alfresco/office/navigation.get.html.ftl b/config/alfresco/templates/webscripts/org/alfresco/office/navigation.get.html.ftl
index 8b4f665bd9..aad789cc5e 100644
--- a/config/alfresco/templates/webscripts/org/alfresco/office/navigation.get.html.ftl
+++ b/config/alfresco/templates/webscripts/org/alfresco/office/navigation.get.html.ftl
@@ -17,10 +17,11 @@
 	<script type="text/javascript" src="${url.context}/scripts/office/navigation.js"></script>
 </head>
 <body>
+<div id="overlayPanel"></div>
 <div id="tabBar">
    <ul>
       <li><a title="My Alfresco" href="${url.serviceContext}/office/myAlfresco?p=${path?url}"><span><img src="${url.context}/images/office/my_alfresco.gif" alt="My Alfresco" /></span></a></li>
-      <li id="current"><a title="Browse Spaces and Documents" href="${url.serviceContext}/office/navigation?p=${path?url}&amp;n=${node.id}"><span><img src="${url.context}/images/office/navigator.gif" alt="Browse Spaces and Documents" /></span></a></li>
+      <li id="current"><a title="Browse Spaces and Documents" href="${url.serviceContext}/office/navigation?p=${path?url}"><span><img src="${url.context}/images/office/navigator.gif" alt="Browse Spaces and Documents" /></span></a></li>
       <li><a title="Search Alfresco" href="${url.serviceContext}/office/search?p=${path?url}"><span><img src="${url.context}/images/office/search.gif" alt="Search Alfresco" /></span></a></li>
       <li><a title="View Details" href="${url.serviceContext}/office/documentDetails?p=${path?url}"><span><img src="${url.context}/images/office/document_details.gif" alt="View Details" /></span></a></li>
       <li><a title="My Tasks" href="${url.serviceContext}/office/myTasks?p=${path?url}"><span><img src="${url.context}/images/office/my_tasks.gif" alt="My Tasks" /></span></a></li>
@@ -100,7 +101,7 @@
       </div>
    </div>
 <#assign spacesFound = 0>
-<#list thisSpace.children as child>
+<#list thisSpace.children?sort_by('name') as child>
    <#if child.isContainer>
       <#assign spacesFound = spacesFound + 1>
       <div class="spaceItem ${(spacesFound % 2 = 0)?string("even", "odd")}">
@@ -127,19 +128,19 @@
 
 <div id="documentList" class="containerMedium togglePanel">
 <#assign documentsFound = 0>
-<#list thisSpace.children as child>
+<#list thisSpace.children?sort_by('name') as child>
    <#if child.isDocument>
       <#assign documentsFound = documentsFound + 1>
       <#assign webdavPath = (child.displayPath?substring(13) + '/' + child.name)?url('ISO-8859-1')?replace('%2F', '/')?replace('\'', '\\\'') />
       <div class="documentItem ${(documentsFound % 2 = 0)?string("even", "odd")}">
-         <span style="float: left; width: 36px;">
+         <span class="documentItemIcon">
       <#if child.name?ends_with(".doc")>
             <a href="#" onclick="window.external.openDocument('${webdavPath}')"><img src="${url.context}${child.icon32}" alt="Open ${child.name}" /></a>
       <#else>
             <a href="${url.context}${child.url}?ticket=${session.ticket}" rel="_blank"><img src="${url.context}${child.icon32}" alt="Open ${child.name}" /></a>
       </#if>
          </span>
-         <span>
+         <span class="documentItemDetails">
       <#if child.name?ends_with(".doc")>
             <a href="#" onclick="window.external.openDocument('${webdavPath}')"><span class="bold">${child.name}</span></a>
       <#else>
@@ -147,7 +148,9 @@
       </#if>
             <br />
       <#if child.properties.description?exists>
+         <#if (child.properties.description?length > 0)>
 		      ${child.properties.description}<br />
+		   </#if>
       </#if>
             Modified: ${child.properties.modified?datetime}, Size: ${(child.size / 1024)?int}Kb<br/>
       <#if child.isLocked >
@@ -174,13 +177,19 @@
 <div class="header">Actions</div>
 
 <#assign currentPath = thisSpace.displayPath  + '/' + thisSpace.name />
-<#assign webdavPath = currentPath?substring(13)?url('ISO-8859-1')?replace('%2F', '/')?replace('\'', '\\\'') />
+<#assign currentPath = currentPath?substring(13)?url('ISO-8859-1')?replace('%2F', '/')?replace('\'', '\\\'') />
 <div id="documentActionsNavigation">
+   <div id="saveDetailsPanel">
+      Document filename:<br />
+      <input class="saveDetailsItem" type="text" id="saveFilename" style="height: 18px; width: 168px;" />
+      <a class="spaceAction" href="#" onclick="OfficeNavigation.saveOK(this);">OK</a>
+      <a class="spaceAction" href="#" onclick="OfficeNavigation.saveCancel();">Cancel</a>
+   </div>
    <div id="nonStatusText">
       <ul>
 <#if !node.isDocument>
          <li>
-            <a href="#" onclick="window.external.saveToAlfresco('${webdavPath}')">
+            <a href="#" onclick="OfficeNavigation.saveToAlfresco('${currentPath}')">
                <img src="${url.context}/images/office/save_to_alfresco.gif" alt="Save to Alfresco" />
                Save to Alfresco
             </a>
diff --git a/config/alfresco/templates/webscripts/org/alfresco/office/navigation.get.js b/config/alfresco/templates/webscripts/org/alfresco/office/navigation.get.js
index 9e0cbf99dd..6bfc490cd7 100644
--- a/config/alfresco/templates/webscripts/org/alfresco/office/navigation.get.js
+++ b/config/alfresco/templates/webscripts/org/alfresco/office/navigation.get.js
@@ -3,6 +3,26 @@ if ((args.n) && (args.n != ""))
 {
    model.node = search.findNode("workspace://SpacesStore/" + args.n);
 }
+else if ((args.p) && (args.p != ""))
+{
+   var path = args.p;
+   if (path == "/Company Home")
+   {
+      model.node = companyhome;
+   }
+   else
+   {
+      var node = companyhome.childByNamePath(path.substring(13));
+      if (node != null)
+      {
+         model.node = node;
+      }
+      else
+      {
+         model.node = companyhome;
+      }
+   }
+}
 else
 {
    model.node = companyhome;
diff --git a/config/alfresco/templates/webscripts/org/alfresco/office/search.get.html.ftl b/config/alfresco/templates/webscripts/org/alfresco/office/search.get.html.ftl
index 3802155245..299c45144f 100644
--- a/config/alfresco/templates/webscripts/org/alfresco/office/search.get.html.ftl
+++ b/config/alfresco/templates/webscripts/org/alfresco/office/search.get.html.ftl
@@ -20,7 +20,7 @@
 <div id="tabBar">
    <ul>
       <li><a title="My Alfresco" href="${url.serviceContext}/office/myAlfresco?p=${path?url}"><span><img src="${url.context}/images/office/my_alfresco.gif" alt="My Alfresco" /></span></a></li>
-      <li><a title="Browse Spaces and Documents" href="${url.serviceContext}/office/navigation?p=${path?url}&amp;n=${node.id}"><span><img src="${url.context}/images/office/navigator.gif" alt="Browse Spaces and Documents" /></span></a></li>
+      <li><a title="Browse Spaces and Documents" href="${url.serviceContext}/office/navigation?p=${path?url}"><span><img src="${url.context}/images/office/navigator.gif" alt="Browse Spaces and Documents" /></span></a></li>
       <li id="current"><a title="Search Alfresco" href="${url.serviceContext}/office/search?p=${path?url}"><span><img src="${url.context}/images/office/search.gif" alt="Search Alfresco" /></span></a></li>
       <li><a title="View Details" href="${url.serviceContext}/office/documentDetails?p=${path?url}"><span><img src="${url.context}/images/office/document_details.gif" alt="View Details" /></span></a></li>
       <li><a title="My Tasks" href="${url.serviceContext}/office/myTasks?p=${path?url}"><span><img src="${url.context}/images/office/my_tasks.gif" alt="My Tasks" /></span></a></li>
diff --git a/config/alfresco/templates/webscripts/org/alfresco/office/searchResults.get.html.ftl b/config/alfresco/templates/webscripts/org/alfresco/office/searchResults.get.html.ftl
index 53a2ca1fec..14cfc251b8 100644
--- a/config/alfresco/templates/webscripts/org/alfresco/office/searchResults.get.html.ftl
+++ b/config/alfresco/templates/webscripts/org/alfresco/office/searchResults.get.html.ftl
@@ -1,8 +1,8 @@
 <#if args.search?exists>
    <#assign searchString = args.search>
    <#if searchString != "">
-      <#-- assign queryString = "(TEXT:\"${searchString}\") OR (@cm\\:name:*${searchString}*)"  -->
-      <#assign queryString = "@\\{http\\://www.alfresco.org/model/content/1.0\\}name:*${searchString}*" >
+      <#assign queryString = "(TEXT:\"${searchString}\") OR (@cm\\:name:*${searchString}*)" >
+      <#-- assign queryString = "@\\{http\\://www.alfresco.org/model/content/1.0\\}name:*${searchString}*" -->
    </#if>
 <#else>
    <#assign searchString = "">
@@ -15,19 +15,16 @@
    <#else>
       <#assign maxresults=10>
    </#if>
-
-   <#assign rescount=0>
-
-   <table>
+   <#assign resCount=0>
    <#assign results = companyhome.childrenByLuceneSearch[queryString] >
    <#if results?size = 0>
-      <tr>
-         <td>(No results found)</td>
-      </tr>
+   <div>
+      <span class="noItems">(No results found)</span>
+   </div>
    <#else>
       <#assign totalResults = results?size>
       <#list results as child>
-         <#assign rescount=rescount + 1>
+         <#assign resCount=resCount + 1>
          <#if child.isDocument>
             <#if child.name?ends_with(".pdf")>
                <#assign openURL = "${url.context}${child.url}">
@@ -41,27 +38,28 @@
             <#assign openURL = "${url.serviceContext}/office/navigation?p=${args.p?url}&amp;n=${child.id}&amp;search=${searchString?url}&amp;maxresults=${maxresults}">
             <#assign hrefExtra = "">
          </#if>
-      <tr>
-         <td style="width: 32px;">
-            <a href="${openURL}" ${hrefExtra}><img src="${url.context}${child.icon32}" alt="Open ${child.name}" /></a>
-         </td>
-         <td>
-            <a href="${openURL}" ${hrefExtra} title="Open ${child.name}">${child.name}</a><br/>
+   <div class="documentItem ${(resCount % 2 = 0)?string("odd", "even")}"">
+      <span class="documentItemIcon">
+         <a href="${openURL}" ${hrefExtra}><img src="${url.context}${child.icon32}" alt="Open ${child.name}" /></a>
+      </span>
+      <span class="documentItemDetails">
+         <a href="${openURL}" ${hrefExtra} title="Open ${child.name}">${child.name}</a><br />
          <#if child.properties.description?exists>
-            ${child.properties.description}<br/>
+            <#if (child.properties.description?length > 0)>
+               ${child.properties.description}<br />
+            </#if>
          </#if>
          <#if child.isDocument>
             Modified: ${child.properties.modified?datetime} (${(child.size / 1024)?int}Kb)<br/>
          </#if>
-         </td>
-      </tr>
-         <#if rescount = maxresults>
+      </span>
+   </div>
+         <#if resCount = maxresults>
             <#break>
          </#if>
       </#list>
    </#if>
-   </table>
 </#if>
 <script type="text/javascript">
-   OfficeSearch.itemsFound(${rescount}, ${totalResults});
+   OfficeSearch.itemsFound(${resCount}, ${totalResults});
 </script>
\ No newline at end of file
diff --git a/source/web/css/office.css b/source/web/css/office.css
index eca49b9b95..f9bf1c1d27 100644
--- a/source/web/css/office.css
+++ b/source/web/css/office.css
@@ -13,6 +13,17 @@ body {
    overflow: hidden;
 }
 
+#overlayPanel
+{
+   background-color: #ffffff;
+   position: absolute;
+   left: 0px;
+   top: 0px;
+   height: 652px;
+   width: 290px;
+   z-index: 1;
+}
+
 a {
    color: #0073e6;
    text-decoration: none;
@@ -278,11 +289,23 @@ input.button {
 }
 
 .documentItem {
+   float: left;
    border-bottom: 1px solid #eee;
    padding: 2px 0px 6px 0px;
    width: 265px;
 }
 
+.documentItemIcon {
+   float: left;
+   width: 36px;
+   padding: 0px 2px 0px 1px;
+}
+
+.documentItemDetails {
+   float: left;
+   width: 226px;
+}
+
 #documentActions {
    clear: both;
    background-color: #ffffcc;
@@ -325,6 +348,30 @@ input.button {
    padding: 0px 3px 0px 0px;
 }
 
+#saveDetailsPanel
+{
+   position: absolute;
+   border: 1px solid #CCD4DB;
+   background-color: #EEF7FB;
+   height: 40px;
+   width: 267px;
+   margin: 8px 0px 0px;
+   padding: 8px;
+   display: none;
+   z-index: 1;
+   -moz-border-radius: 5px;
+}
+
+.saveDetailsItem
+{
+   background-color: #ffffff;
+   border: 1px solid #CCD4DB;
+   color: #0073e6;
+   float: left;
+   font-size: 11px;
+   margin: 0px 4px 4px 4px;
+   padding: 2px;
+}
 
 #nonStatusText {
    height: 100%;
@@ -373,6 +420,22 @@ input.button {
 .taskItem {
    cursor: pointer;
    border-bottom: 1px solid #eee;
+   float: left;
+   padding: 4px 0px;
+}
+
+.taskIndicator {
+   display: block;
+   float: left; 
+   height: 12px;
+   padding: 0px 0px 0px 2px;
+   width: 12px;
+}
+
+.taskItemDetails {
+   display: block;
+   float: left;
+   width: 251px;
 }
 
 .taskItemSelected {
@@ -411,7 +474,7 @@ input.button {
    float: left;
    padding: 4px 4px 0px 0px;
    text-align: right;
-   width: 64px;
+   width: 62px;
 }
 
 .taskValue {
diff --git a/source/web/scripts/office/my_alfresco.js b/source/web/scripts/office/my_alfresco.js
index 62bc8175b3..d0d086f185 100644
--- a/source/web/scripts/office/my_alfresco.js
+++ b/source/web/scripts/office/my_alfresco.js
@@ -9,6 +9,7 @@ var OfficeMyAlfresco =
 
    init: function()
    {
+      OfficeAddin.sortTasks($('taskList'));
       OfficeMyAlfresco.setupTasks();
       OfficeMyAlfresco.setupToggles();
    },
@@ -131,7 +132,7 @@ var OfficeMyAlfresco =
             fxPanel.start(animPanel);
          });
       });
-   }   
+   }
 };
 
 window.addEvent('domready', OfficeMyAlfresco.init);
\ No newline at end of file
diff --git a/source/web/scripts/office/my_tasks.js b/source/web/scripts/office/my_tasks.js
index 5aa4e1256b..d63d896d86 100644
--- a/source/web/scripts/office/my_tasks.js
+++ b/source/web/scripts/office/my_tasks.js
@@ -7,6 +7,7 @@ var OfficeMyTasks =
 {
    init: function()
    {
+      OfficeAddin.sortTasks($('taskList'));
       OfficeMyTasks.setupEventHandlers();      
       
       if (window.queryObject.t)
@@ -144,7 +145,10 @@ var OfficeMyTasks =
 
    openTask: function(taskId)
    {
-      $(taskId).fireEvent("click");
+      if ($(taskId))
+      {
+         $(taskId).fireEvent("click");
+      }
    },
    
    transitionTask: function(taskId, commandURL, successMessage)
diff --git a/source/web/scripts/office/navigation.js b/source/web/scripts/office/navigation.js
index 9bc5f98b48..6b6b655757 100644
--- a/source/web/scripts/office/navigation.js
+++ b/source/web/scripts/office/navigation.js
@@ -8,9 +8,12 @@ var OfficeNavigation =
    ANIM_LENGTH: 800,
    CREATE_SPACE_HEIGHT: 108,
    CREATE_SPACE_TEMPLATE: 16,
+   OVERLAY_ANIM_LENGTH: 300,
+   OVERLAY_OPACITY: 0.7,
    
    init: function()
    {
+      $('overlayPanel').setStyle('opacity', 0);
       OfficeNavigation.setupToggles();
       OfficeNavigation.setupCreateSpace();
 
@@ -186,6 +189,82 @@ var OfficeNavigation =
          }
       });
       myAjax.request();
+   },
+   
+   saveToAlfresco: function(currentPath)
+   {
+      // Does the current doc have an extension?
+      if (!window.external.docHasExtension())
+      {
+         // No - we need to ask for a filename
+         OfficeNavigation.showSaveFilenamePanel(currentPath);
+      }
+      else
+      {
+         window.external.saveToAlfresco(currentPath);
+      }
+   },
+   
+   showSaveFilenamePanel: function(currentPath)
+   {   
+      this.fxOverlay = $("overlayPanel").effect('opacity',
+      {
+         duration: OfficeNavigation.OVERLAY_ANIM_LENGTH
+      });
+
+      var panel = $("saveDetailsPanel");
+      panel.setStyle("opacity", 0);
+      panel.setStyle("display", "inline");
+            
+      var anim = new Fx.Styles(panel,
+      {
+         duration: OfficeNavigation.ANIM_LENGTH,
+         transition: Fx.Transitions.linear,
+         onComplete: function()
+         {
+            $('saveFilename').addEvent('keydown', function(event)
+            {
+               event = new Event(event);
+               if (event.key == 'enter')
+               {
+                  OfficeNavigation.saveOK();
+               }
+               else if (event.key == 'esc')
+               {
+                  OfficeNavigation.saveCancel();
+               }
+            });
+            $('saveFilename').focus();
+         }
+      }).start({'opacity': 1});
+
+      this.fxOverlay.start(OfficeNavigation.OVERLAY_OPACITY);
+      this.popupPanel = panel;
+      this.popupPanel.currentPath = currentPath;
+   },
+   
+   saveOK: function()
+   {
+      var filename = $('saveFilename').value;
+      var currentPath = this.popupPanel.currentPath;
+      if (filename.length > 0)
+      {
+         window.external.saveToAlfrescoAs(currentPath, filename);
+      }
+      OfficeNavigation.saveCancel();
+   },
+   
+   saveCancel: function()
+   {
+      if (this.popupPanel != null)
+      {
+         this.popupPanel.setStyle("display", "none");
+         this.popupPanel = null;
+      }
+      if (this.fxOverlay)
+      {
+         this.fxOverlay.start(0);
+      }
    }
 };
 
diff --git a/source/web/scripts/office/office_addin.js b/source/web/scripts/office/office_addin.js
index f745d2da42..ad43994ebc 100644
--- a/source/web/scripts/office/office_addin.js
+++ b/source/web/scripts/office/office_addin.js
@@ -157,6 +157,31 @@ var OfficeAddin =
          }
       }
       return url;
+   },
+   
+   sortTasks: function(taskContainer)
+   {
+      var taskArray = new Array();
+      taskContainer.getElementsBySelector('.taskItem').each(function(task, i)
+      {
+         taskArray[i] = {dueDate: task.getProperty('rel'), theTask: task.clone()};
+      });
+
+      taskArray.sort(OfficeAddin.sortByDueDate);
+      taskContainer.empty();
+
+      for(var i = 0; i < taskArray.length; i++)
+      {
+         taskArray[i].theTask.addClass((i % 2  == 0) ? "odd" : "even");
+         taskArray[i].theTask.injectInside(taskContainer);
+      }
+   },
+   
+   sortByDueDate: function(a, b)
+   {
+      var x = a.dueDate;
+      var y = b.dueDate;
+      return ((x < y) ? -1 : ((x > y) ? 1 : 0));
    }
 };