Index: lams_tool_spreadsheet/.settings/org.jboss.ide.eclipse.as.core.prefs
===================================================================
diff -u
--- lams_tool_spreadsheet/.settings/org.jboss.ide.eclipse.as.core.prefs	(revision 0)
+++ lams_tool_spreadsheet/.settings/org.jboss.ide.eclipse.as.core.prefs	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -0,0 +1,2 @@
+eclipse.preferences.version=1
+org.jboss.ide.eclipse.as.core.singledeployable.deployableList=
Index: lams_tool_spreadsheet/conf/language/lams/ApplicationResources.properties
===================================================================
diff -u -r2f725f8ef2aa09a2663b2335bf67213074426d11 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision 2f725f8ef2aa09a2663b2335bf67213074426d11)
+++ lams_tool_spreadsheet/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -119,6 +119,6 @@
 label.off  =Off
 label.submit  =Finish
 label.search  =Search...
+label.refresh = Refresh
 
-
 #======= End labels: Exported 114 labels for en AU =====
Index: lams_tool_spreadsheet/conf/language/lams/ApplicationResources_en_AU.properties
===================================================================
diff -u -r2f725f8ef2aa09a2663b2335bf67213074426d11 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision 2f725f8ef2aa09a2663b2335bf67213074426d11)
+++ lams_tool_spreadsheet/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -120,6 +120,6 @@
 label.off  =Off
 label.submit  =Finish
 label.search  =Search...
+label.refresh = Refresh
 
-
 #======= End labels: Exported 114 labels for en AU =====
Index: lams_tool_spreadsheet/src/java/org/lamsfoundation/lams/tool/spreadsheet/model/SpreadsheetUser.java
===================================================================
diff -u -r2f725f8ef2aa09a2663b2335bf67213074426d11 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/src/java/org/lamsfoundation/lams/tool/spreadsheet/model/SpreadsheetUser.java	(.../SpreadsheetUser.java)	(revision 2f725f8ef2aa09a2663b2335bf67213074426d11)
+++ lams_tool_spreadsheet/src/java/org/lamsfoundation/lams/tool/spreadsheet/model/SpreadsheetUser.java	(.../SpreadsheetUser.java)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -251,5 +251,17 @@
     public void setAccessDate(Date accessDate) {
 	this.accessDate = accessDate;
     }
+    
+    /** Username displayed in monitoring */
+    public String getFullUsername() {
+	StringBuilder buf = new StringBuilder();
+	buf.append(getLastName())
+	   .append(" ")
+	   .append(getFirstName())
+	   .append(" (")
+	   .append(getLoginName())
+	   .append(")");
+	return buf.toString();
+    }
 
 }
Index: lams_tool_spreadsheet/src/java/org/lamsfoundation/lams/tool/spreadsheet/web/action/MonitoringAction.java
===================================================================
diff -u -r2f725f8ef2aa09a2663b2335bf67213074426d11 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/src/java/org/lamsfoundation/lams/tool/spreadsheet/web/action/MonitoringAction.java	(.../MonitoringAction.java)	(revision 2f725f8ef2aa09a2663b2335bf67213074426d11)
+++ lams_tool_spreadsheet/src/java/org/lamsfoundation/lams/tool/spreadsheet/web/action/MonitoringAction.java	(.../MonitoringAction.java)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -169,8 +169,7 @@
 
 	    SpreadsheetUser user = (SpreadsheetUser) userAndReflection[0];
 	    responseRow.put(SpreadsheetConstants.ATTR_USER_UID, user.getUid());
-	    responseRow.put(SpreadsheetConstants.ATTR_USER_NAME,
-		    StringEscapeUtils.escapeHtml(user.getLastName() + " " + user.getFirstName()));
+	    responseRow.put(SpreadsheetConstants.ATTR_USER_NAME, StringEscapeUtils.escapeHtml(user.getFullUsername()));
 	    if (user.getUserModifiedSpreadsheet() != null) {
 		responseRow.put("userModifiedSpreadsheet", "true");
 		if (user.getUserModifiedSpreadsheet().getMark() != null) {
@@ -232,7 +231,9 @@
 	List<SpreadsheetUser> userList = service.getUserListBySessionId(sessionId);
 	request.setAttribute(AttributeNames.PARAM_TOOL_SESSION_ID, sessionId);
 	request.setAttribute(SpreadsheetConstants.ATTR_USER_LIST, userList);
-
+	request.setAttribute(SpreadsheetConstants.ATTR_SESSION_MAP_ID, 
+		WebUtil.readStrParam(request, SpreadsheetConstants.ATTR_SESSION_MAP_ID));
+	
 	return mapping.findForward("viewAllMarks");
     }
 
@@ -380,14 +381,23 @@
 	MarkForm markForm = (MarkForm) form;
 	markForm.setSessionMapID(sessionMapID);
 	markForm.setUserUid(user.getUid());
-	if (user.getUserModifiedSpreadsheet().getMark() != null) {
-	    SpreadsheetMark mark = user.getUserModifiedSpreadsheet().getMark();
-	    markForm.setMarks(NumberUtil.formatLocalisedNumber(mark.getMarks(), request.getLocale(),
-		    SpreadsheetConstants.MARK_NUM_DEC_PLACES));
-	    markForm.setComments(mark.getComments());
-	}
+	markForm.setUserName(user.getFullUsername());
 
-	return user == null ? null : mapping.findForward(SpreadsheetConstants.SUCCESS);
+	String code = null;
+	if (user.getUserModifiedSpreadsheet() != null) {
+	    markForm.setCode(user.getUserModifiedSpreadsheet().getUserModifiedSpreadsheet());
+
+	    if (user.getUserModifiedSpreadsheet().getMark() != null) {
+		SpreadsheetMark mark = user.getUserModifiedSpreadsheet().getMark();
+		markForm.setMarks(NumberUtil.formatLocalisedNumber(mark.getMarks(), request.getLocale(),
+			SpreadsheetConstants.MARK_NUM_DEC_PLACES));
+		markForm.setComments(mark.getComments());
+	    }
+
+	}
+	request.setAttribute(SpreadsheetConstants.ATTR_CODE, code);
+	
+	return mapping.findForward(SpreadsheetConstants.SUCCESS);
     }
 
     public ActionForward saveMark(ActionMapping mapping, ActionForm form, HttpServletRequest request,
Index: lams_tool_spreadsheet/src/java/org/lamsfoundation/lams/tool/spreadsheet/web/action/ViewItemAction.java
===================================================================
diff -u -r2f725f8ef2aa09a2663b2335bf67213074426d11 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/src/java/org/lamsfoundation/lams/tool/spreadsheet/web/action/ViewItemAction.java	(.../ViewItemAction.java)	(revision 2f725f8ef2aa09a2663b2335bf67213074426d11)
+++ lams_tool_spreadsheet/src/java/org/lamsfoundation/lams/tool/spreadsheet/web/action/ViewItemAction.java	(.../ViewItemAction.java)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -120,7 +120,7 @@
 
 	Long userId = WebUtil.readLongParam(request, SpreadsheetConstants.ATTR_USER_UID);
 	SpreadsheetUser user = getSpreadsheetService().getUser(userId);
-	request.setAttribute(SpreadsheetConstants.ATTR_USER_NAME, user.getLoginName());
+	request.setAttribute(SpreadsheetConstants.ATTR_USER_NAME, user.getFullUsername());
 	String code = null;
 	if (user.getUserModifiedSpreadsheet() != null) {
 	    code = user.getUserModifiedSpreadsheet().getUserModifiedSpreadsheet();
Index: lams_tool_spreadsheet/src/java/org/lamsfoundation/lams/tool/spreadsheet/web/form/MarkForm.java
===================================================================
diff -u -r2f725f8ef2aa09a2663b2335bf67213074426d11 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/src/java/org/lamsfoundation/lams/tool/spreadsheet/web/form/MarkForm.java	(.../MarkForm.java)	(revision 2f725f8ef2aa09a2663b2335bf67213074426d11)
+++ lams_tool_spreadsheet/src/java/org/lamsfoundation/lams/tool/spreadsheet/web/form/MarkForm.java	(.../MarkForm.java)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -40,6 +40,8 @@
     private Long userUid;
     private String marks;
     private String comments;
+    private String code; // Read only. Needed to reload the screen on error
+    private String userName; // Read only. Needed to reload the screen on error
 
     public String getSessionMapID() {
 	return sessionMapID;
@@ -73,4 +75,20 @@
 	this.comments = comments;
     }
 
+    public String getCode() {
+        return code;
+    }
+
+    public void setCode(String code) {
+        this.code = code;
+    }
+
+    public String getUserName() {
+        return userName;
+    }
+
+    public void setUserName(String userName) {
+        this.userName = userName;
+    }
+
 }
Index: lams_tool_spreadsheet/web/WEB-INF/tags/AdvancedAccordian.tag
===================================================================
diff -u
--- lams_tool_spreadsheet/web/WEB-INF/tags/AdvancedAccordian.tag	(revision 0)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/AdvancedAccordian.tag	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -0,0 +1,53 @@
+<%
+	 /****************************************************************
+	 * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
+	 * =============================================================
+	 * License Information: http://lamsfoundation.org/licensing/lams/2.0/
+	 * 
+	 * This program is free software; you can redistribute it and/or modify
+	 * it under the terms of the GNU General Public License version 2.0
+	 * as published by the Free Software Foundation.
+	 * 
+	 * This program is distributed in the hope that it will be useful,
+	 * but WITHOUT ANY WARRANTY; without even the implied warranty of
+	 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	 * GNU General Public License for more details.
+	 * 
+	 * You should have received a copy of the GNU General Public License
+	 * along with this program; if not, write to the Free Software
+	 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
+	 * USA
+	 * 
+	 * http://www.gnu.org/licenses/gpl.txt
+	 * ****************************************************************
+	 */
+
+	/**
+	 * AdvancedAccordian.tag
+	 *	Author: Fiona Malikoff
+	 *	Description: Creates the show/hide entry for the Advanced Settings in Montoring.
+	 * Wiki: 
+	 */
+%>
+<%@ attribute name="title" required="true" rtexprvalue="true"%>
+
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+
+<div class="panel-group" id="accordionAdvanced" role="tablist" aria-multiselectable="true"> 
+    <div class="panel panel-default" >
+        <div class="panel-heading collapsable-icon-left" id="headingAdvanced">
+        	<span class="panel-title">
+	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseAdvanced" aria-expanded="false" aria-controls="collapseAdvanced" >
+          	${title}
+        	</a>
+      		</span>
+        </div>
+
+        <div id="collapseAdvanced" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingAdvanced">
+		<jsp:doBody />
+		</div>
+	</div>
+</div>
+		
\ No newline at end of file
Index: lams_tool_spreadsheet/web/WEB-INF/tags/Arrow.tag
===================================================================
diff -u
--- lams_tool_spreadsheet/web/WEB-INF/tags/Arrow.tag	(revision 0)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/Arrow.tag	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -0,0 +1,35 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%-- state = up: up arrow;  state = down: down arrow --%>
+<%@ attribute name="state" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="onclick" required="false" rtexprvalue="true"%>
+
+<c:choose>
+	<c:when test="${not empty title}">
+		<c:set var="fullTitle">title="${title}"</c:set>
+	</c:when>
+	<c:otherwise>
+		<c:set var="fullTitle" value=""/>
+	</c:otherwise>
+</c:choose>
+
+<c:choose>
+	<c:when test="${not empty onclick}">
+		<c:set var="fullOnclick">onclick="${onclick}"</c:set>
+	</c:when>
+	<c:otherwise>
+		<c:set var="fullOnclick" value=""/>
+	</c:otherwise>
+</c:choose>
+
+<c:choose>
+	<c:when test="${fn:containsIgnoreCase(state, 'up')}">
+		<i class="fa fa-long-arrow-up fa-pull-left" ${fullTitle} ${fullOnclick}></i>
+	</c:when>
+	<c:otherwise>
+		<i class="fa fa-long-arrow-down fa-pull-right"  ${fullTitle} ${fullOnclick}></i>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_spreadsheet/web/WEB-INF/tags/AuthoringButton.tag
===================================================================
diff -u -r29fac4bd0bdf28bcaaeee7aae4020ccb15b6e520 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/WEB-INF/tags/AuthoringButton.tag	(.../AuthoringButton.tag)	(revision 29fac4bd0bdf28bcaaeee7aae4020ccb15b6e520)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/AuthoringButton.tag	(.../AuthoringButton.tag)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -122,12 +122,12 @@
     	window.close();
     }  				
 </script>	
-<p id="saveCancelButtons" >
-		<html:link href="javascript:;" property="cancel" onclick="javascript:doCancel()" styleClass="button right-buttons space-left">
-			<span class="cancelIcon"><fmt:message key="${cancelButtonLabelKey}" /></span>
-		</html:link>
-		<html:link href="javascript:doSubmit_Form_Only();" property="submit" styleClass="button right-buttons space-left">
+<div id="saveCancelButtons" >
+		<html:link href="javascript:doSubmit_Form_Only();" property="submit" styleClass="btn btn-primary pull-right">
 			<span class="okIcon"><fmt:message key="${saveButtonLabelKey}" /></span>
 		</html:link>
-</p>
+		<html:link href="javascript:;" property="cancel" onclick="javascript:doCancel()" styleClass="btn btn-default roffset5 pull-right">
+			<span class="cancelIcon"><fmt:message key="${cancelButtonLabelKey}" /></span>
+		</html:link>
+</div>
 <!-- end tab content -->
\ No newline at end of file
Index: lams_tool_spreadsheet/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdc884b8e6274ebbc664d1ee940e565803445bb26 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dc884b8e6274ebbc664d1ee940e565803445bb26)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -10,7 +10,12 @@
 <%@ attribute name="contentFolderID" required="false" rtexprvalue="true"%>
 <%@ attribute name="displayExpanded" required="false" rtexprvalue="true"%>
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
+<%@ attribute name="method" required="false" rtexprvalue="true"%>
 
+<c:if test="${empty method}">
+	<c:set var="method" value="inline" />
+</c:if>
+
 <c:set var="language">
 	<lams:user property="fckLanguageMapping" />
 </c:set>
@@ -19,6 +24,10 @@
 	<c:set var="toolbarSet" value="Default" />
 </c:if>
 
+<c:if test="${fn:containsIgnoreCase(method,'Inline')}">
+	<c:set var="toolbarSet">${toolbarSet}Inline</c:set>
+</c:if>
+
 <c:if test="${empty displayExpanded}">
 	<c:set var="displayExpanded" value="true" />
 </c:if>
@@ -33,10 +42,10 @@
 <c:set var="fixedValue" value="${fn:replace(value,'&lt','&amp;lt')}"/>
 <c:set var="fixedValue" value="${fn:replace(fixedValue,'&gt','&amp;gt')}"/>
 
-<textarea id="${id}" name="${id}" style="display: none; visibility: hidden; height: 0px;">${fixedValue}</textarea>
+<textarea id="${id}" name="${id}" style="display: none; visibility: hidden; height: 0px;" placeholder="${placeholder}">${fixedValue}</textarea>
 
 <c:if test="${empty ckEditorBasePath}">
-	<c:set scope="request" var="ckEditorBasePath"><lams:LAMSURL/>ckeditor/</c:set>
+	<c:set scope="request" var="ckEditorBasePath">/lams/ckeditor/</c:set>
 	<script type="text/javascript" src="${ckEditorBasePath}ckeditor.js"></script>
 </c:if>
 
@@ -59,10 +68,9 @@
 	    var editor = CKEDITOR.instances["${id}"];
 	    if (editor) { editor.destroy(true); }
 	    
-		var instance = CKEDITOR.replace( "${id}", {
+		var instance = CKEDITOR.${method}( "${id}", {
 				width                         : "${width}",
 				height                        : "${height}",
-				autoGrow_minHeight            : "${height}".replace("px", ""),
 				toolbar                       : "${toolbarSet}",
 				language                      : "${language}",
 				defaultLangugage              : "en",
Index: lams_tool_spreadsheet/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u
--- lams_tool_spreadsheet/web/WEB-INF/tags/Comments.tag	(revision 0)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/Comments.tag	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -0,0 +1,47 @@
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="toolSessionId" required="true" rtexprvalue="true"%>
+<%@ attribute name="toolSignature" required="true" rtexprvalue="true"%>
+<%@ attribute name="height" required="false" rtexprvalue="true"%>
+<%@ attribute name="width" required="false" rtexprvalue="true"%>
+<%@ attribute name="mode" required="false" rtexprvalue="true"%>
+<%@ attribute name="likeAndDislike" required="false" rtexprvalue="true"%>
+<%@ attribute name="readOnly" required="false" rtexprvalue="true"%>
+<%@ attribute name="pageSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty width}">
+	<c:set var="width" value="100%" />
+</c:if>
+
+<c:if test="${empty height}">
+	<c:set var="height" value="auto" />
+</c:if>
+
+<c:set var="modeStr" value=""/>
+<c:if test="${!empty mode}">
+	<c:set var="modeStr">&mode=${mode}</c:set>
+</c:if>
+
+<c:if test="${empty likeAndDislike}">
+	<c:set var="likeAndDislike" value="false" />
+</c:if>
+
+<c:if test="${empty readOnly}">
+	<c:set var="readOnly" value="false" />
+</c:if>
+
+<c:if test="${empty sortBy}">
+	<c:set var="sortBy" value="0" /> <!-- 0: date, 1: likes -->
+</c:if>
+
+<div id="commentFrame" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
+<script>
+$(document).ready(function(){
+	var url='<lams:LAMSURL/>comments/comments.do?externalID=${toolSessionId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}';
+	$('#commentFrame').load(url);
+});
+</script>
\ No newline at end of file
Index: lams_tool_spreadsheet/web/WEB-INF/tags/CommentsAuthor.tag
===================================================================
diff -u
--- lams_tool_spreadsheet/web/WEB-INF/tags/CommentsAuthor.tag	(revision 0)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/CommentsAuthor.tag	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -0,0 +1,51 @@
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-html" prefix="html"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+
+<%@ attribute name="allowCommentsVariableName" required="false" rtexprvalue="true"%>
+<%@ attribute name="allowCommentLabelKey" required="false" rtexprvalue="true"%>
+<%@ attribute name="likeDislikeVariableName" required="false" rtexprvalue="true"%>
+<%@ attribute name="likeOnlyCommentLabelKey" required="false" rtexprvalue="true"%>
+<%@ attribute name="likeDislikeLabelKey" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty allowCommentsVariableName}">
+	<c:set var="allowCommentsVariableName" value="allowComments" />
+</c:if>
+<c:if test="${empty allowCommentLabelKey}">
+	<c:set var="allowCommentLabelKey" value="advanced.allow.comments" />
+</c:if>
+<c:if test="${empty likeDislikeVariableName}">
+	<c:set var="likeDislikeVariableName" value="commentsLikeAndDislike" />
+</c:if>
+<c:if test="${empty likeOnlyCommentLabelKey}">
+	<c:set var="likeOnlyCommentLabelKey" value="advanced.comments.like.only" />
+</c:if>
+<c:if test="${empty likeDislikeLabelKey}">
+	<c:set var="likeDislikeLabelKey" value="advanced.comments.like.and.dislike" />
+</c:if>
+
+<div class="checkbox">
+	<label>
+	<html:checkbox property="${allowCommentsVariableName}" value="1"
+		styleId="${allowCommentsVariableName}">
+	</html:checkbox>
+	<fmt:message key="${allowCommentLabelKey}"/>
+	</label>
+</div>
+<div class="loffset20" id="likedislike">
+		<html:radio property="${likeDislikeVariableName}" value="false" />&nbsp;<fmt:message key="${likeOnlyCommentLabelKey}" /> &nbsp;
+		<html:radio property="${likeDislikeVariableName}" value="true" />&nbsp;<fmt:message key="${likeDislikeLabelKey}" /> 
+</div>
+
+<script>
+jQuery( document ).ready(function( $ ) {
+	if (! $("#${allowCommentsVariableName}").is(':checked')) {
+		$("#likedislike").hide();
+	}
+	$("#${allowCommentsVariableName}").click(function() {
+		$("#likedislike").toggle('slow');
+	});
+});
+</script>
+
+
Index: lams_tool_spreadsheet/web/WEB-INF/tags/ImgButtonWrapper.tag
===================================================================
diff -u -r7f9f772433a7fd55c4475241d4e3bc0765f474e8 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/WEB-INF/tags/ImgButtonWrapper.tag	(.../ImgButtonWrapper.tag)	(revision 7f9f772433a7fd55c4475241d4e3bc0765f474e8)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/ImgButtonWrapper.tag	(.../ImgButtonWrapper.tag)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -1,37 +1,37 @@
-<% 
-/****************************************************************
- * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
- * =============================================================
- * License Information: http://lamsfoundation.org/licensing/lams/2.0/
- * 
- * This program is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License version 2.0
- * as published by the Free Software Foundation.
- * 
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- * 
- * You should have received a copy of the GNU General Public License
- * along with this program; if not, write to the Free Software
- * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
- * USA
- * 
- * http://www.gnu.org/licenses/gpl.txt
- * ****************************************************************
- */
- 
- /**
-  * ImgButtonWrapper.tag
-  *	Author: Mitchell Seaton
-  *	Description: Simple wrapper that will display buttons correctly when RTL page rendering is used.
-  */
- 
- %>
-<%@ tag body-content="scriptless" %>
-<div id="button-table" class="space-bottom-top">
-	<div id="button-row">
-		<jsp:doBody />
-	</div>
-</div>
+<% 
+/****************************************************************
+ * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
+ * =============================================================
+ * License Information: http://lamsfoundation.org/licensing/lams/2.0/
+ * 
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 2.0
+ * as published by the Free Software Foundation.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
+ * USA
+ * 
+ * http://www.gnu.org/licenses/gpl.txt
+ * ****************************************************************
+ */
+ 
+ /**
+  * ImgButtonWrapper.tag
+  *	Author: Mitchell Seaton
+  *	Description: Simple wrapper that will display buttons correctly when RTL page rendering is used.
+  */
+ 
+ %>
+<%@ tag body-content="scriptless" %>
+<div id="button-table" class="space-bottom-top">
+	<div id="button-row">
+		<jsp:doBody />
+	</div>
+</div>
Index: lams_tool_spreadsheet/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r0a141270feef0d18c3d156b6549d379c4ac45148 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 0a141270feef0d18c3d156b6549d379c4ac45148)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -12,25 +12,38 @@
 <div class="row no-gutter">
 	<div class="col-xs-12">
 		<div class="container" id="content">
+		
+		<c:choose>
+		<c:when test='${type == "navbar"}'>
+			<jsp:doBody />
+		</c:when> 
+		<c:otherwise>
 			<div class="panel panel-default panel-${type}-page">
-				<div class="panel-heading">
-					<c:if test="${not empty title}">
+				<c:if test="${not empty title}">
+					<div class="panel-heading">
 						<div class="panel-title panel-${type}-title">
 							<c:out value="${title}" escapeXml="true" />
 							<c:if test="${not empty titleHelpURL}">
 								<a style="float: right" href="${titleHelpURL}" target="_new"><span class="help" style="margin: 0px"></span></a>
 							</c:if>
 						</div>
-					</c:if>
-					<c:if test="${not empty headingContent}">
-						<c:out value="${headingContent}" escapeXml="true" />
-					</c:if>
-				</div>
+						<c:if test="${not empty headingContent}">
+							<c:out value="${headingContent}" escapeXml="true" />
+						</c:if>
+					</div>
+				</c:if>
 				<div class="panel-body panel-${type}-body">
 					<jsp:doBody />
 				</div>
 			</div>
+		</c:otherwise>
+		</c:choose>
+			
 		</div>
 		<!-- End content container -->
 	</div>
 </div>
+
+
+		
+			
Index: lams_tool_spreadsheet/web/WEB-INF/tags/RestrictedUsageAccordian.tag
===================================================================
diff -u
--- lams_tool_spreadsheet/web/WEB-INF/tags/RestrictedUsageAccordian.tag	(revision 0)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/RestrictedUsageAccordian.tag	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -0,0 +1,54 @@
+<%
+	 /****************************************************************
+	 * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
+	 * =============================================================
+	 * License Information: http://lamsfoundation.org/licensing/lams/2.0/
+	 * 
+	 * This program is free software; you can redistribute it and/or modify
+	 * it under the terms of the GNU General Public License version 2.0
+	 * as published by the Free Software Foundation.
+	 * 
+	 * This program is distributed in the hope that it will be useful,
+	 * but WITHOUT ANY WARRANTY; without even the implied warranty of
+	 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	 * GNU General Public License for more details.
+	 * 
+	 * You should have received a copy of the GNU General Public License
+	 * along with this program; if not, write to the Free Software
+	 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
+	 * USA
+	 * 
+	 * http://www.gnu.org/licenses/gpl.txt
+	 * ****************************************************************
+	 */
+
+	/**
+	 * AdvancedAccordian.tag
+	 *	Author: Fiona Malikoff
+	 *	Description: Creates the show/hide entry for the Restricted Usage Settings in Monitoring.
+	 * Wiki: 
+	 */
+%>
+<%@ attribute name="title" required="true" rtexprvalue="true"%>
+
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+
+<div class="panel-group" id="accordionRestrictUsageDiv" role="tablist" aria-multiselectable="true"> 
+    <div class="panel panel-default" >
+        <div class="panel-heading collapsable-icon-left" id="headingRestrictedUsageDiv">
+        	<span class="panel-title">
+	    	<a class="collapsed" role="button" data-toggle="collapse" href="#restrictUsageDiv" aria-expanded="false" aria-controls="restrictUsageDiv" >
+          	${title}
+        	</a>
+      		</span>
+        </div>
+
+
+		<div id="restrictUsageDiv" class="panel-body panel-collapse collapse" role="tabpanel" aria-labelledby="headingRestrictedUsageDiv">
+		<jsp:doBody />
+		</div>
+	</div>
+</div>
+		
\ No newline at end of file
Index: lams_tool_spreadsheet/web/WEB-INF/tags/TSTable.tag
===================================================================
diff -u
--- lams_tool_spreadsheet/web/WEB-INF/tags/TSTable.tag	(revision 0)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/TSTable.tag	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} form-horizontal">
+	        <button type="button" class="btn btn-xs first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-xs prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-xs next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-xs last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_spreadsheet/web/WEB-INF/tags/Tab.tag
===================================================================
diff -u -r7f9f772433a7fd55c4475241d4e3bc0765f474e8 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/WEB-INF/tags/Tab.tag	(.../Tab.tag)	(revision 7f9f772433a7fd55c4475241d4e3bc0765f474e8)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/Tab.tag	(.../Tab.tag)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -24,8 +24,8 @@
 
 	/**
 	 * Tab.tag
-	 *	Author: Mitchell Seaton
-	 *	Description: Creates a tab element.
+	 *	Author: Fiona Malikoff
+	 *	Description: Creates a tab element within the Hybrid Tab Header.
 	 * Wiki: 
 	 */
 %>
@@ -54,6 +54,9 @@
 <%--
 	Usually methodCall is selectTab, but the calling code can override methodCall if desired.
 	this is handy if the page needs different logic on initialisation and user switching tabs
+	
+	-- 			onclick="${methodCall}(${id});return false;">
+	
 --%>
 
 <c:if test="${methodCall == null}">
@@ -73,13 +76,14 @@
 	</c:set>
 </c:if>
 
-<div class="nav-box">
-	<div class="tab-left" id="tab-left-${id}"></div>
-	<div class="tab-middle" id="tab-middle-${id}">
-		<a class="tab-middle-link" id="tab-middle-link-${id}" href="#"
-			onclick="${methodCall}(${id});return false;">
-			${tabTitle}
-		</a>
-	</div>
-	<div class="tab-right" id="tab-right-${id}"></div>
-</div>
+<c:set var="class" value=""/>
+<c:if test="${id == 1}">
+	<c:set var="class">class="active"</c:set>
+</c:if>
+	
+<c:set var="disabled" value=""/>
+<c:if test="${inactive}">
+	<c:set var="class">class="disabled"</c:set>
+</c:if>
+
+<li role="presentation" ${class}><a href="#t${id}" aria-controls="t${id}" role="tab" onclick="${methodCall}(${id});return false;">${tabTitle}</a></li>
Index: lams_tool_spreadsheet/web/WEB-INF/tags/TabBody.tag
===================================================================
diff -u -r7f9f772433a7fd55c4475241d4e3bc0765f474e8 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/WEB-INF/tags/TabBody.tag	(.../TabBody.tag)	(revision 7f9f772433a7fd55c4475241d4e3bc0765f474e8)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/TabBody.tag	(.../TabBody.tag)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -28,25 +28,17 @@
  * Wiki: 
  */
 
-		%>
-<%@ tag body-content="scriptless"%>
+%>
 <%@ attribute name="id" required="true" rtexprvalue="true"%>
 <%@ attribute name="tabTitle" required="false" rtexprvalue="true"%>
 <%@ attribute name="titleKey" required="false" rtexprvalue="true"%>
 <%@ attribute name="page" required="false" rtexprvalue="true"%>
 <%@ taglib uri="tags-core" prefix="c"%>
 <%@ taglib uri="tags-bean" prefix="bean"%>
 
-<!-- begin tab content -->
-<div class="box" id="tabbody${id}">
-	<c:choose>
-		<c:when test="${page != null}">
-			<jsp:include page="${page}" />
-		</c:when>
-		<c:otherwise>
-			<jsp:doBody />
-		</c:otherwise>
-	</c:choose>
+<c:set var="class" value=""/>
+<c:if test="${id == 1}">
+	<c:set var="class">active</c:set>
+</c:if>
 
-</div>
-<!-- end tab content -->
+<div role="tabpanel" class="tab-pane ${class}" id="t${id}"><jsp:include page="${page}"/></div>
Index: lams_tool_spreadsheet/web/WEB-INF/tags/TabBodyArea.tag
===================================================================
diff -u
--- lams_tool_spreadsheet/web/WEB-INF/tags/TabBodyArea.tag	(revision 0)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/TabBodyArea.tag	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -0,0 +1,39 @@
+<%/****************************************************************
+ * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
+ * =============================================================
+ * License Information: http://lamsfoundation.org/licensing/lams/2.0/
+ * 
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 2.0
+ * as published by the Free Software Foundation.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
+ * USA
+ * 
+ * http://www.gnu.org/licenses/gpl.txt
+ * ****************************************************************
+ */
+
+/**
+ * TabBodyArea.tag
+ *	Author: Fiona Malikoff
+ *	Description: Creates the panel body area for a nav bar screen
+ * Wiki: 
+ */
+
+%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-bean" prefix="bean"%>
+
+<div class="panel-body panel-monitor-body">
+	 <jsp:doBody />
+</div>
+
+</div> <!--  close tab opened in TabHeader -->
\ No newline at end of file
Index: lams_tool_spreadsheet/web/WEB-INF/tags/TabBodys.tag
===================================================================
diff -u
--- lams_tool_spreadsheet/web/WEB-INF/tags/TabBodys.tag	(revision 0)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/TabBodys.tag	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -0,0 +1,37 @@
+<%/****************************************************************
+ * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
+ * =============================================================
+ * License Information: http://lamsfoundation.org/licensing/lams/2.0/
+ * 
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 2.0
+ * as published by the Free Software Foundation.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
+ * USA
+ * 
+ * http://www.gnu.org/licenses/gpl.txt
+ * ****************************************************************
+ */
+
+/**
+ * TabBodys.tag
+ *	Author: Fiona Malikoff
+ *	Description: Create a tabbody list from nested TabBody tags.
+ * Wiki: 
+ */
+
+		%>
+<%@ tag body-content="scriptless"%>
+
+<!-- tab body holder table -->
+<div class="tab-content">
+	<jsp:doBody />
+</div>
Index: lams_tool_spreadsheet/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -r7f9f772433a7fd55c4475241d4e3bc0765f474e8 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision 7f9f772433a7fd55c4475241d4e3bc0765f474e8)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -23,47 +23,70 @@
 
 /**
  * Tabs.tag
- *	Author: Mitchell Seaton
- *	Description: Create a tab list from a input collection or nested Tab tags.
- * Wiki: 
+ *	Author: Fiona Malikoff
+ *	Description: Create a hybrid panel header that contains a nav bar that acts like tabs.
  */
 
-		%>
-<%@ tag body-content="scriptless"%>
-<%@ attribute name="collection" type="java.util.Collection" required="false" rtexprvalue="true"%>
+%>
 <%@ attribute name="control" required="false" rtexprvalue="true"%>
-<%@ attribute name="useKey" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refreshOnClickAction" required="false" rtexprvalue="true"%>
+<%@ attribute name="helpToolSignature" required="false" rtexprvalue="true"%>
+<%@ attribute name="helpModule" required="false" rtexprvalue="true"%>
+<%@ attribute name="extraControl" required="false" rtexprvalue="true"%>
+
 <%@ taglib uri="tags-core" prefix="c"%>
 <%@ taglib uri="tags-lams" prefix="lams"%>
+
+<c:set var="useActions" value="false" scope="request" />
+<c:if test="${not empty helpToolSignature or not empty helpModule or not empty refreshOnClickAction or not empty extraControl}">
+	<c:set var="useActions" value="true" scope="request" />
+</c:if>
+
 <c:set var="dControl" value="false" scope="request" />
 <c:if test="${control}">
 	<c:set var="dControl" value="${control}" scope="request" />
 </c:if>
 
-<c:set var="dUseKey" value="false" scope="request" />
-<c:if test="${useKey}">
-	<c:set var="dUseKey" value="${useKey}" scope="request" />
-</c:if>
+<!-- navbar combined with tabs -->
+<div class="panel panel-default panel-monitor-page">
+<div class="panel-heading navbar-heading">
 
-<!-- tab holder table -->
-<div id="nav">
-	<c:choose>
-		<c:when test="${collection != null}">
-			<c:set var="count" value="0" />
-			<c:forEach var="tab" begin="0" items="${collection}">
-				<c:set var="count" value="${count+1}" />
-				<c:choose>
-					<c:when test="${dUseKey}">
-						<lams:Tab id="${count}" key="${tab}" />
-					</c:when>
-					<c:otherwise>
-						<lams:Tab id="${count}" value="${tab}" />
-					</c:otherwise>
-				</c:choose>
-			</c:forEach>
-		</c:when>
-		<c:otherwise>
-			<jsp:doBody />
-		</c:otherwise>
-	</c:choose>
+ 	<nav class="navbar navbar-default navbar-heading">
+	<div class="container-fluid">
+    	<!-- Brand and toggle get grouped for better mobile display -->
+		<div class="navbar-header">
+	      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
+	        <span class="sr-only">Toggle navigation</span>
+	        <span class="icon-bar"></span>
+	        <span class="icon-bar"></span>
+	        <span class="icon-bar"></span>
+	      </button>
+	      <span class="navbar-brand">${title}</span>
+		</div>
+		<div class="collapse navbar-collapse" id="navbar-collapse-1" role="navigation">
+         <ul class="nav navbar-nav" id="page-tabs">
+	         <li role="separator" class="divider"></li>
+	          <jsp:doBody />
+         </ul>
+         <c:if test="${useActions}">
+         <ul class="nav navbar-nav navbar-right" id="page-actions">
+		     <li role="separator" class="divider"></li>
+		     <c:if test="${not empty refreshOnClickAction}">
+             <li class="navbar-text" ><span onclick="${refreshOnClickAction}"><i class="fa fa-refresh"></i></span></li>
+             </c:if>
+             <c:if test="${not empty helpToolSignature or not empty helpModule}">
+             <li class="navbar-text" ><lams:help toolSignature="${helpToolSignature}" module="${helpModule}" style="small"/></li>
+             </c:if>
+             <c:if test="${not empty extraControl}">
+             <li class="navbar-text" >${extraControl}</li>
+             </c:if>
+         </ul>
+         </c:if>
+ 	    
+ 		</div>
+	 </div>
+     </nav>
+     <!-- /top nav -->
 </div>
+<!-- panel div closed by TabBodyArea -->
\ No newline at end of file
Index: lams_tool_spreadsheet/web/WEB-INF/tags/headItems.tag
===================================================================
diff -u -r613f0d0d76eb497ed58d7e6836eda34a245425a9 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/WEB-INF/tags/headItems.tag	(.../headItems.tag)	(revision 613f0d0d76eb497ed58d7e6836eda34a245425a9)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/headItems.tag	(.../headItems.tag)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -41,7 +41,9 @@
 	<lams:WebAppURL />
 </c:set>
 
-<lams:css style="main"/>
+<lams:css/>
 
 <script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
-<script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/bootstrap.tabcontroller.js"></script>
Index: lams_tool_spreadsheet/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rfdaaf5fccaee2cc31539cb367c650e369a2006d2 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision fdaaf5fccaee2cc31539cb367c650e369a2006d2)
+++ lams_tool_spreadsheet/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -178,7 +178,7 @@
       <name>css</name>
       <tag-class>org.lamsfoundation.lams.web.tag.CssTag</tag-class>
       <body-content>empty</body-content>
-
+      
       <attribute>
          <description>Output stylesheet based on the user preferences.</description>
          <name>style</name>
@@ -408,10 +408,18 @@
        <path>/WEB-INF/tags/TabBody.tag</path>
    	</tag-file>
    	<tag-file>
+       <name>TabBodys</name>
+       <path>/WEB-INF/tags/TabBodys.tag</path>
+   	</tag-file>
+   	<tag-file>
        <name>TabName</name>
        <path>/WEB-INF/tags/TabName.tag</path>
    	</tag-file>
    	<tag-file>
+       <name>TabBodyArea</name>
+       <path>/WEB-INF/tags/TabBodyArea.tag</path>
+   	</tag-file>
+   	<tag-file>
        <name>CKEditor</name>
        <path>/WEB-INF/tags/CKEditor.tag</path>
    	</tag-file>
@@ -438,8 +446,24 @@
    	<tag-file>
 	    <name>Page</name>
 		<path>/WEB-INF/tags/Page.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable</name>
+		<path>/WEB-INF/tags/TSTable.tag</path>
+   	</tag-file>    
+  	<tag-file>
+	    <name>Arrow</name>
+		<path>/WEB-INF/tags/Arrow.tag</path>
+   	</tag-file>
+   	<tag-file>
+       <name>AdvancedAccordian</name>
+       <path>/WEB-INF/tags/AdvancedAccordian.tag</path>
    	</tag-file>  
    	<tag-file>
+   		<name>RestrictedUsageAccordian</name>
+   		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
+   	</tag-file>
+   	<tag-file>
 	    <name>ImgButtonWrapper</name>
 		<path>/WEB-INF/tags/ImgButtonWrapper.tag</path>
    	</tag-file>
@@ -481,5 +505,13 @@
 		<name>head</name>
 	    <path>/WEB-INF/tags/Head.tag</path>
 	</tag-file>
+   	<tag-file>
+       <name>Comments</name>
+       <path>/WEB-INF/tags/Comments.tag</path>
+   	</tag-file>
+   	<tag-file>
+       <name>CommentsAuthor</name>
+       <path>/WEB-INF/tags/CommentsAuthor.tag</path>
+   	</tag-file>
 
 </taglib>
Index: lams_tool_spreadsheet/web/common/header.jsp
===================================================================
diff -u -rfb099c65e1987ef8ff8f8aa4a0d987fd77247750 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/common/header.jsp	(.../header.jsp)	(revision fb099c65e1987ef8ff8f8aa4a0d987fd77247750)
+++ lams_tool_spreadsheet/web/common/header.jsp	(.../header.jsp)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -2,6 +2,7 @@
 <c:set var="lams"><lams:LAMSURL/></c:set>
 <c:set var="tool"><lams:WebAppURL/></c:set>
 <c:set var="ctxPath" value="${pageContext.request.contextPath}" scope="request"/>
+<c:set var="spreadsheetURL"><html:rewrite page="/includes/javascript/simple_spreadsheet/spreadsheet_offline.html"/>?lang=${pageContext.response.locale.language}</c:set>
 
 <!-- ********************  CSS ********************** -->
 <link href="<html:rewrite page='/includes/css/spreadsheet.css'/>" rel="stylesheet" type="text/css">
@@ -10,6 +11,9 @@
 <!-- ********************  javascript ********************** -->
 <script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
 <script type="text/javascript" src="<html:rewrite page='/includes/javascript/spreadsheetcommon.js'/>"></script>
-<script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>    
+<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/bootstrap.tabcontroller.js"></script>
+	
 
 	
Index: lams_tool_spreadsheet/web/common/tabbedheader.jsp
===================================================================
diff -u -r613f0d0d76eb497ed58d7e6836eda34a245425a9 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/common/tabbedheader.jsp	(.../tabbedheader.jsp)	(revision 613f0d0d76eb497ed58d7e6836eda34a245425a9)
+++ lams_tool_spreadsheet/web/common/tabbedheader.jsp	(.../tabbedheader.jsp)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -5,12 +5,16 @@
 
  <!-- ********************  CSS ********************** -->
 <link href="<html:rewrite page='/includes/css/spreadsheet.css'/>" rel="stylesheet" type="text/css">
-<lams:css style="main"/>
+<lams:css/>
 
 <!-- ********************  javascript ********************** -->
 <script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
-<script type="text/javascript" src="${lams}includes/javascript/prototype.js"></script>
 <script type="text/javascript" src="<html:rewrite page='/includes/javascript/spreadsheetcommon.js'/>"></script>
-<script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>    
+<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-widgets.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-pager.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/bootstrap.tabcontroller.js"></script>
 
-	
+<title><fmt:message key="activity.title" /></title>	
Index: lams_tool_spreadsheet/web/includes/images/cross.gif
===================================================================
diff -u -r7f9f772433a7fd55c4475241d4e3bc0765f474e8 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
Binary files differ
Index: lams_tool_spreadsheet/web/includes/images/downarrow.gif
===================================================================
diff -u -r7f9f772433a7fd55c4475241d4e3bc0765f474e8 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
Binary files differ
Index: lams_tool_spreadsheet/web/includes/images/downarrow_disabled.gif
===================================================================
diff -u -r7f9f772433a7fd55c4475241d4e3bc0765f474e8 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
Binary files differ
Index: lams_tool_spreadsheet/web/includes/images/edit.gif
===================================================================
diff -u -r7f9f772433a7fd55c4475241d4e3bc0765f474e8 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
Binary files differ
Index: lams_tool_spreadsheet/web/includes/images/spacer.gif
===================================================================
diff -u -r7f9f772433a7fd55c4475241d4e3bc0765f474e8 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
Binary files differ
Index: lams_tool_spreadsheet/web/includes/images/tick.gif
===================================================================
diff -u -r7f9f772433a7fd55c4475241d4e3bc0765f474e8 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
Binary files differ
Index: lams_tool_spreadsheet/web/includes/images/uparrow.gif
===================================================================
diff -u -r7f9f772433a7fd55c4475241d4e3bc0765f474e8 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
Binary files differ
Index: lams_tool_spreadsheet/web/includes/images/uparrow_disabled.gif
===================================================================
diff -u -r7f9f772433a7fd55c4475241d4e3bc0765f474e8 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
Binary files differ
Index: lams_tool_spreadsheet/web/includes/javascript/simple_spreadsheet/spreadsheet.js
===================================================================
diff -u -rb2c791aa57046b592c437a5ff9e4498d95dfab95 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/includes/javascript/simple_spreadsheet/spreadsheet.js	(.../spreadsheet.js)	(revision b2c791aa57046b592c437a5ff9e4498d95dfab95)
+++ lams_tool_spreadsheet/web/includes/javascript/simple_spreadsheet/spreadsheet.js	(.../spreadsheet.js)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -36,7 +36,7 @@
 
 var init_data = "";
 var auto_recalc = true;
-var cols = 7;
+var cols = 9;
 var rows = 17;
 var row0 = 0;
 var col0 = 0;
Index: lams_tool_spreadsheet/web/includes/javascript/spreadsheetcommon.js
===================================================================
diff -u -rfb099c65e1987ef8ff8f8aa4a0d987fd77247750 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/includes/javascript/spreadsheetcommon.js	(.../spreadsheetcommon.js)	(revision fb099c65e1987ef8ff8f8aa4a0d987fd77247750)
+++ lams_tool_spreadsheet/web/includes/javascript/spreadsheetcommon.js	(.../spreadsheetcommon.js)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -1,10 +1,10 @@
 function showBusy(targetDiv){
 	if($(targetDiv+"_Busy") != null){
-		Element.show(targetDiv+"_Busy");
+		$(targetDiv+"_Busy").show();
 	}
 }
 function hideBusy(targetDiv){
 	if($(targetDiv+"_Busy") != null){
-		Element.hide(targetDiv+"_Busy");
+		$(targetDiv+"_Busy").hide();
 	}				
 }
Index: lams_tool_spreadsheet/web/pages/authoring/advance.jsp
===================================================================
diff -u -r7f9f772433a7fd55c4475241d4e3bc0765f474e8 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/pages/authoring/advance.jsp	(.../advance.jsp)	(revision 7f9f772433a7fd55c4475241d4e3bc0765f474e8)
+++ lams_tool_spreadsheet/web/pages/authoring/advance.jsp	(.../advance.jsp)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -3,58 +3,50 @@
 
 <!-- Advance Tab Content -->
 
-<p class="small-space-top">
-	<html:checkbox property="spreadsheet.lockWhenFinished"
-		styleClass="noBorder" styleId="lockWhenFinished">
-	</html:checkbox>
+<div class="checkbox">
+	<label for="lockWhenFinished"><html:checkbox property="spreadsheet.lockWhenFinished" styleId="lockWhenFinished" />
+	<fmt:message key="label.authoring.advance.lock.on.finished" /></label>
+</div>
 
-	<label for="lockWhenFinished">
-		<fmt:message key="label.authoring.advance.lock.on.finished" />
-	</label>
-</p>
-
-<p class="small-space-top">
+<div class="radio">
+	<label for="learnerNotAllowedToSave">
 	<input type="radio" name="spreadsheet.learnerAllowedToSave" value="${false}" styleId="learnerNotAllowedToSave"
 		<c:if test="${not formBean.spreadsheet.learnerAllowedToSave}">checked="checked"</c:if> 
 		onclick="document.spreadsheetForm.isMarkingEnabled.disabled = true;
 				 document.spreadsheetForm.isMarkingEnabled.checked = false;"
 	/>
-	<label for="learnerNotAllowedToSave">
 		<fmt:message key="label.authoring.advanced.play.only" />
 	</label>
-	<br><br>
+</div>
 
+<div class="radio">
+	<label for="learnerAllowedToSave">
 	<input type="radio" name="spreadsheet.learnerAllowedToSave" value="${true}" styleId="learnerAllowedToSave"
 		<c:if test="${formBean.spreadsheet.learnerAllowedToSave}">checked="checked"</c:if> 
 		onclick="document.spreadsheetForm.isMarkingEnabled.disabled = false;"
 	/>
-	<label for="learnerAllowedToSave">
 		<fmt:message key="label.authoring.advanced.learners.are.allowed.to.save" />
 	</label>
-	<br><br>
+</div>
 
-	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-	<html:checkbox property="spreadsheet.markingEnabled" styleClass="noBorder" styleId="isMarkingEnabled"
+<div class="checkbox loffset10">
+	<label for="isMarkingEnabled">
+	<html:checkbox property="spreadsheet.markingEnabled" styleId="isMarkingEnabled"
 		disabled="${not formBean.spreadsheet.learnerAllowedToSave}" >
 	</html:checkbox>
-	<label for="isMarkingEnabled">
-		<fmt:message key="label.authoring.advanced.enable.spreadsheet.marking" />
+	<fmt:message key="label.authoring.advanced.enable.spreadsheet.marking" />
 	</label>
-</p>
+</div>
 
-<p>
-	<html:checkbox property="spreadsheet.reflectOnActivity"
-		styleClass="noBorder" styleId="reflectOn">
-	</html:checkbox>
-	<label for="reflectOn">
-		<fmt:message key="label.authoring.advanced.reflectOnActivity" />
-	</label>
-</p>
+<div class="checkbox">
+	<label for="reflectOn"><html:checkbox property="spreadsheet.reflectOnActivity" styleId="reflectOn"/>
+	<fmt:message key="label.authoring.advanced.reflectOnActivity" /></label>
+	</div>
+	<div class="form-group">
+	<html:textarea property="spreadsheet.reflectInstructions" styleId="reflectInstructions"  styleClass="form-control" rows="3"
+		onkeyup="javascript:turnOnReflect()"/>
+</div>
 
-<p>
-	<html:textarea property="spreadsheet.reflectInstructions" styleId="reflectInstructions" cols="30" rows="3" />
-</p>
-
 <script type="text/javascript">
 <!--
 	//automatically turn on refect option if there are text input in refect instruction area
Index: lams_tool_spreadsheet/web/pages/authoring/authoring.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/pages/authoring/authoring.jsp	(.../authoring.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_spreadsheet/web/pages/authoring/authoring.jsp	(.../authoring.jsp)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -1,9 +1,9 @@
 <!DOCTYPE html>
         
-
 <%@ include file="/common/taglibs.jsp"%>
 <%@ page import="org.lamsfoundation.lams.tool.spreadsheet.SpreadsheetConstants"%>
 
+<c:set var="spreadsheetURL"><html:rewrite page="/includes/javascript/simple_spreadsheet/spreadsheet_offline.html"/>?lang=${pageContext.response.locale.language}</c:set>
 
 <lams:html>
 <lams:head>
@@ -18,8 +18,7 @@
 	    		selectTab(tag.value);
             else
                 selectTab(1); //select the default tab;
-          
-        }     
+          }     
         
         function doSelectTab(tabId) {
         	// start optional tab controller stuff
@@ -31,8 +30,8 @@
         
     	function onSubmitHandler() {
         	var code = window.frames["externalSpreadsheet"].cellsToJS();
-        	document.getElementById("spreadsheet.code").value = code;
-        	return true;
+ 			document.getElementById("spreadsheet.code").value = code;
+         	return true;
     	}
         
     </script>
@@ -41,20 +40,6 @@
  
 </lams:head>
 <body class="stripes" onLoad="init()">
-<div id="page">
-		<h1>
-			<fmt:message key="label.authoring.heading" />
-		</h1>
-<div id="header">
-		<lams:Tabs useKey="true" control="true">
-			<lams:Tab id="1" key="label.authoring.heading.basic" />
-			<lams:Tab id="2" key="label.authoring.heading.advance" />
-		</lams:Tabs></div>
-		<!-- start tabs -->
-<div id="content">
-	<!-- end tab buttons -->
-		
-	<%@ include file="/common/messages.jsp"%>
 
 	<html:form action="authoring/update" method="post" styleId="authoringForm" enctype="multipart/form-data" onsubmit="return onSubmitHandler();">
 		<c:set var="formBean" value="<%= request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY) %>" />
@@ -63,28 +48,38 @@
 		<html:hidden property="contentFolderID" />
 		<html:hidden property="currentTab" styleId="currentTab" />
 
-		<lams:help toolSignature="<%= SpreadsheetConstants.TOOL_SIGNATURE %>" module="authoring"/>
+	<c:set var="title"><fmt:message key="activity.title"/> ${lang}</c:set>
+	<lams:Page title="${title}" type="navbar">
 
-		<!-- tab content 1 (Basic) -->
-		<lams:TabBody id="1" titleKey="label.authoring.heading.basic.desc" page="basic.jsp" />
-		<!-- end of content (Basic) -->
+	 	<lams:Tabs control="true" title="${title}" helpToolSignature="<%= SpreadsheetConstants.TOOL_SIGNATURE %>" helpModule="authoring">
+			<lams:Tab id="1" key="label.authoring.heading.basic" />
+			<lams:Tab id="2" key="label.authoring.heading.advance" />
+	    </lams:Tabs>   
 
-		<!-- tab content 2 (Advanced) -->
-		<lams:TabBody id="2" titleKey="label.authoring.heading.advance.desc" page="advance.jsp" />
-		<!-- end of content (Advanced) -->
+		<lams:TabBodyArea>
+			<%@ include file="/common/messages.jsp"%>
+               
+			<!--  Set up tabs  -->
+			<lams:TabBodys>
+				<!-- tab content 1 (Basic) -->
+				<lams:TabBody id="1" titleKey="label.authoring.heading.basic.desc" page="basic.jsp" />
+				<!-- end of content (Basic) -->
+		
+				<!-- tab content 2 (Advanced) -->
+				<lams:TabBody id="2" titleKey="label.authoring.heading.advance.desc" page="advance.jsp" />
+				<!-- end of content (Advanced) -->
+			</lams:TabBodys>
 
 		<!-- Button Row -->
 		<lams:AuthoringButton formID="authoringForm" clearSessionActionUrl="/clearsession.do" 
 			toolSignature="<%=SpreadsheetConstants.TOOL_SIGNATURE%>" toolContentID="${formBean.spreadsheet.contentId}" 
 			 customiseSessionID="${formBean.sessionMapID}"
 			 contentFolderID="${formBean.contentFolderID}" />
+		</lams:TabBodyArea>
+
+		<div id="footer"></div>
+	</lams:Page>	
 	</html:form>
 
-</div>
-
-<div id="footer"></div>
-<!-- end page div -->
-</div>
-
 </body>
 </lams:html>
Index: lams_tool_spreadsheet/web/pages/authoring/basic.jsp
===================================================================
diff -u -r8179037dc958585c054547eb7de9be14c6aed233 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/pages/authoring/basic.jsp	(.../basic.jsp)	(revision 8179037dc958585c054547eb7de9be14c6aed233)
+++ lams_tool_spreadsheet/web/pages/authoring/basic.jsp	(.../basic.jsp)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -3,43 +3,19 @@
 <html:hidden property="spreadsheet.code" styleId="spreadsheet.code"/>
 		
 <!-- Basic Tab Content -->
-<table>
-	<tr>
-		<td>
-			<div class="field-name">
-				<fmt:message key="label.authoring.basic.title"></fmt:message>
-			</div>
-			<html:text property="spreadsheet.title" style="width: 99%;"></html:text>
-		</td>
-	</tr>
-	
-	<tr>
-		<td>
-			<div class="field-name">
-				<fmt:message key="label.authoring.basic.instruction"></fmt:message>
-			</div>
-			<lams:CKEditor id="spreadsheet.instructions"
-				value="${formBean.spreadsheet.instructions}"
-				contentFolderID="${formBean.contentFolderID}"></lams:CKEditor>
-		</td>
-		
-	</tr>
+<div class="form-group">
+    <label for="spreadsheet.title"><fmt:message key="label.authoring.basic.title"/></label>
+    <html:text property="spreadsheet.title" styleClass="form-control"></html:text>
+</div>
+<div class="form-group">
+    <label for="spreadsheet.instructions"><fmt:message key="label.authoring.basic.instruction" /></label>
+    <lams:CKEditor id="spreadsheet.instructions" value="${formBean.spreadsheet.instructions}" contentFolderID="${formBean.contentFolderID}"></lams:CKEditor>
+</div>
+<div class="form-group">
+    <label for="spreadsheet.title"><fmt:message key="label.authoring.basic.spreadsheet"/></label>
+	<iframe id="externalSpreadsheet" name="externalSpreadsheet" src="<html:rewrite page='/includes/javascript/simple_spreadsheet/spreadsheet_offline.html'/>?lang=<%=request.getLocale().getLanguage()%>"
+		style="width:99%;" frameborder="no" height="385px" scrolling="no">
+	</iframe>
+</div>
 
-	<tr>
-		<td>
-			<div class="field-name">
-				<fmt:message key="label.authoring.basic.spreadsheet"></fmt:message>
-			</div>
 
-			<iframe
-				id="externalSpreadsheet" name="externalSpreadsheet" src="<html:rewrite page='/includes/javascript/simple_spreadsheet/spreadsheet_offline.html'/>?lang=<%=request.getLocale().getLanguage()%>"
-				style="width:99%;" frameborder="no" height="385px"
-				scrolling="no">
-			</iframe>
-		</td>			
-	</tr>	
-	
-</table>
-
-
-
Index: lams_tool_spreadsheet/web/pages/authoring/definelater.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/pages/authoring/definelater.jsp	(.../definelater.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_spreadsheet/web/pages/authoring/definelater.jsp	(.../definelater.jsp)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -5,11 +5,7 @@
 <%@ page import="java.util.HashSet"%>
 <%@ page import="org.lamsfoundation.lams.tool.spreadsheet.SpreadsheetConstants"%>
 <%@ page import="java.util.Set"%>
-<%Set tabs = new HashSet();
-			tabs.add("label.authoring.heading.basic");
-			pageContext.setAttribute("tabs", tabs);
 
-			%>
 <lams:html>
 <lams:head>
 	<title><fmt:message key="label.authoring.title" /></title>
@@ -21,11 +17,8 @@
         function init(){
             selectTab(1); //select the default tab;
             
-            initEditor("Title");
+            initEditor("Title"); // what is this?
             initEditor("Instructions");
-            initEditor("OnlineInstruction");
-            initEditor("OfflineInstruction");
-            
         }     
         
         function doSelectTab(tabId) {
@@ -43,43 +36,40 @@
 
 </lams:head>
 <body class="stripes" onLoad="init()">
-<div id="page">
+
 	<html:form action="authoring/update" method="post" styleId="authoringForm" enctype="multipart/form-data">
 		<c:set var="formBean" value="<%= request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY) %>" />
 		<html:hidden property="spreadsheet.contentId" />
 		<html:hidden property="mode" value="teacher"/>
 		<html:hidden property="contentFolderID" />
 		<html:hidden property="sessionMapID" />
-		
-		<h1>
-			<fmt:message key="label.authoring.heading" />
-		</h1>
-<div id="header">
-		<!-- start tabs -->
-		<lams:Tabs collection="${tabs}" useKey="true" control="true" />
-</div>
-<div id="content">
-		<%@ include file="/common/messages.jsp"%>
-		
-		<lams:help toolSignature="<%= SpreadsheetConstants.TOOL_SIGNATURE %>" module="authoring"/>
-		<!-- end tab buttons -->
-		<div class="tabbody">
-			<!-- tab content 1 (Basic) -->
-			<lams:TabBody id="1" titleKey="label.authoring.heading.basic.desc" page="basic.jsp" />
-			<!-- end of content (Basic) -->
 
+	<c:set var="title"><fmt:message key="activity.title"/></c:set>
+	<lams:Page title="${title}" type="navbar">
 
+	 	<lams:Tabs control="true" title="${title}" helpToolSignature="<%= SpreadsheetConstants.TOOL_SIGNATURE %>" helpModule="authoring">
+			<lams:Tab id="1" key="label.authoring.heading.basic" />
+	    </lams:Tabs>   
+
+		<lams:TabBodyArea>
+			<%@ include file="/common/messages.jsp"%>
+               
+			<!--  Set up tabs  -->
+			<lams:TabBodys>
+				<lams:TabBody id="1" titleKey="label.authoring.heading.basic.desc" page="basic.jsp" />
+			</lams:TabBodys>
+
 			<!-- Button Row -->
 			<lams:AuthoringButton formID="authoringForm" clearSessionActionUrl="/clearsession.do" toolSignature="<%=SpreadsheetConstants.TOOL_SIGNATURE%>" 
 				toolContentID="${formBean.spreadsheet.contentId}"  accessMode="teacher" defineLater="yes"  
 				customiseSessionID="${formBean.sessionMapID}" contentFolderID="${formBean.contentFolderID}"/>
-		</div>
 
+		</lams:TabBodyArea>
 
+		<div id="footer"></div>
+	</lams:Page>	
+			
 	</html:form>
 	
-</div>
-<div id="footer"></div>
-</div>
 </body>
 </lams:html>
Index: lams_tool_spreadsheet/web/pages/authoring/definelaterforbid.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/pages/authoring/definelaterforbid.jsp	(.../definelaterforbid.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_spreadsheet/web/pages/authoring/definelaterforbid.jsp	(.../definelaterforbid.jsp)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -8,14 +8,9 @@
 	<%@ include file="/common/header.jsp"%>
 </lams:head>
 <body class="stripes">
-	<div id="content">
-	<div align="center">
-		<h1>
-			<fmt:message key="label.authoring.heading" />
-		</h1>
-
+	<c:set var="title"><fmt:message key="activity.title"/></c:set>
+	<lams:Page title="${title}" type="learner">
 		<B><fmt:message key="message.monitoring.edit.activity.not.editable" /></B>
-	</div>
-	</div>
+	</lams:Page>
 </body>
 </html:html>
Index: lams_tool_spreadsheet/web/pages/learning/learning.jsp
===================================================================
diff -u -r0305bf13f929848b6a03d3512be0ca25e0678803 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 0305bf13f929848b6a03d3512be0ca25e0678803)
+++ lams_tool_spreadsheet/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -77,46 +77,42 @@
 		<br>
 		
 		<c:if test="${spreadsheet.markingEnabled}">
- 			<div class="shading-bg">		
-				<table width="30%">
-					<tr>
-						<!--First row displaying the comments -->
-						<td class="field-name">
-							<fmt:message key="label.learning.comments" />
-						</td>
-						<td>
-							<c:choose>
-								<c:when test="${mark == null}">
-									<fmt:message key="label.learning.not.available" />
-								</c:when>
-								<c:otherwise>
-									<c:out value="${mark.comments}" escapeXml="false" />
-								</c:otherwise>
-							</c:choose>
-						</td>
-					</tr>
-		
-					<tr>
-						<!--Second row displaying the marks-->
-						<td class="field-name">
-							<fmt:message key="label.learning.marks" />
-						</td>
-						<td>
-							<c:choose>
-								<c:when test="${mark == null}">
-									<fmt:message key="label.learning.not.available" />
-								</c:when>
-								<c:otherwise>
-									<fmt:formatNumber type="number" maxFractionDigits="<%= SpreadsheetConstants.MARK_NUM_DEC_PLACES %>" value="${mark.marks}"/>
-								</c:otherwise>
-							</c:choose>
-						</td>
-					</tr>
-				</table>		
+		<div class="row no-gutter">
+			<div class="col-xs-12">
+			<div class="panel panel-default">
+				<div class="panel-body">
+				<div class="row no-gutter">
+					<div class="col-sm-2"><fmt:message key="label.learning.comments" /></div>
+					<div class="col-sm-10">
+						<c:choose>
+							<c:when test="${mark == null}">
+								<fmt:message key="label.learning.not.available" />
+							</c:when>
+							<c:otherwise>
+								<c:out value="${mark.comments}" escapeXml="false" />
+							</c:otherwise>
+						</c:choose>
+					</div>
+				</div>
+				<div class="row no-gutter">
+				<div class="col-sm-2"><fmt:message key="label.learning.marks" /></div>
+					<div class="col-sm-10">
+						<c:choose>
+							<c:when test="${mark == null}">
+								<fmt:message key="label.learning.not.available" />
+							</c:when>
+							<c:otherwise>
+								<fmt:formatNumber type="number" maxFractionDigits="<%= SpreadsheetConstants.MARK_NUM_DEC_PLACES %>" value="${mark.marks}"/>
+							</c:otherwise>
+						</c:choose>
+					</div>
+				</div>
+				</div>
 			</div>
-			<div class="last-item"></div>
-			<br>
+			</div>
+		</div>
 		</c:if>		
+
 		
 		<div class="row no-gutter">
 			<div class="col-xs-12">
Index: lams_tool_spreadsheet/web/pages/monitoring/editactivity.jsp
===================================================================
diff -u -rd21e7fac21ab19cb876cdf2673297d3204614828 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/pages/monitoring/editactivity.jsp	(.../editactivity.jsp)	(revision d21e7fac21ab19cb876cdf2673297d3204614828)
+++ lams_tool_spreadsheet/web/pages/monitoring/editactivity.jsp	(.../editactivity.jsp)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -3,12 +3,12 @@
 <c:set var="spreadsheet" value="${sessionMap.spreadsheet}"/>
 
 <c:if test="${sessionMap.isPageEditable}">
-	<p class="warning">
+	<lams:Alert type="warn" id="no-edit" close="false">
 		<fmt:message key="message.alertContentEdit" />
-	</p>
+	</lams:Alert>
 </c:if>
 
-<table cellpadding="0">
+<table  class="table table-condensed">
 	<tr>
 		<td>
 			<fmt:message key="label.authoring.basic.title" />
@@ -28,17 +28,13 @@
 			<c:out value="${spreadsheet.instructions}" escapeXml="false" />
 		</td>
 	</tr>
-
-	<tr>
-		<td colspan="2">
-			<c:url  var="authoringUrl" value="/definelater.do">
-				<c:param name="toolContentID" value="${sessionMap.toolContentID}" />
-				<c:param name="contentFolderID" value="${sessionMap.contentFolderID}" />
-			</c:url>
-			<html:link href="javascript:;" onclick="launchPopup('${authoringUrl}','definelater')" styleClass="button">
-				<fmt:message key="label.monitoring.edit.activity.edit" />
-			</html:link>
-		</td>
-	</tr>
 </table>
+
+<c:url  var="authoringUrl" value="/definelater.do">
+	<c:param name="toolContentID" value="${sessionMap.toolContentID}" />
+	<c:param name="contentFolderID" value="${sessionMap.contentFolderID}" />
+</c:url>
+<html:link href="javascript:;" onclick="launchPopup('${authoringUrl}','definelater')" styleClass="btn btn-default">
+	<fmt:message key="label.monitoring.edit.activity.edit" />
+</html:link>
  
\ No newline at end of file
Index: lams_tool_spreadsheet/web/pages/monitoring/monitoring.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_spreadsheet/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -36,26 +36,23 @@
 			    var reqIDVar = new Date();
 				var param = "toolContentID=" + ${param.toolContentID};
 				messageLoading();
-			    var myAjax = new Ajax.Updater(
-				    	statisticTargetDiv,
-				    	url,
-				    	{
-				    		method:'get',
-				    		parameters:param,
-				    		onComplete:messageComplete,
-				    		evalScripts:true
-				    	}
-			    );
+				$("#"+statisticTargetDiv).load(
+						url,
+						param,
+						function(data) {
+							messageComplete();
+						}
+				);
 			}
-		
+							
 			function showBusy(targetDiv){
 				if($(targetDiv+"_Busy") != null){
-					Element.show(targetDiv+"_Busy");
+					$(targetDiv+"_Busy").show();
 				}
 			}
 			function hideBusy(targetDiv){
 				if($(targetDiv+"_Busy") != null){
-					Element.hide(targetDiv+"_Busy");
+					$(targetDiv+"_Busy").hide();
 				}				
 			}
 			function messageLoading(){
@@ -68,26 +65,29 @@
 	    </script>		 
 	</lams:head>
 	<body class="stripes" onLoad="init()">
-	<div id="page">
-		<h1>
-			<fmt:message key="label.authoring.heading" />
-		</h1>
-	<div id="header">
-		<lams:Tabs useKey="true" control="true">
+
+	<c:set var="title"><fmt:message key="activity.title"/> ${lang}</c:set>
+	<lams:Page title="${title}" type="navbar">
+
+	 	<lams:Tabs control="true" title="${title}" helpToolSignature="<%= SpreadsheetConstants.TOOL_SIGNATURE %>" helpModule="monitoring">
 			<lams:Tab id="1" key="monitoring.tab.summary" />
 			<lams:Tab id="2" key="monitoring.tab.edit.activity" />			
 			<lams:Tab id="3" key="monitoring.tab.statistics" />
-		</lams:Tabs>
-	</div>
-	<div id="content">
-			<lams:help toolSignature="<%= SpreadsheetConstants.TOOL_SIGNATURE %>" module="monitoring"/>
-	
+	    </lams:Tabs>   
+
+		<lams:TabBodyArea>
+
+			<!--  Set up tabs  -->
+			<lams:TabBodys>
 			<lams:TabBody id="1" titleKey="monitoring.tab.summary" page="summary.jsp" />
 			<lams:TabBody id="2" titleKey="monitoring.tab.edit.activity" page="editactivity.jsp" />			
 			<lams:TabBody id="3" titleKey="monitoring.tab.statistics" page="statistics.jsp" />
-	</div>
+			</lams:TabBodys>
+			
+		</lams:TabBodyArea>
+
 	<div id="footer"></div>
-	
-	</div>
+	</lams:Page>
+
 	</body>
 </lams:html>
Index: lams_tool_spreadsheet/web/pages/monitoring/parts/advanceoptions.jsp
===================================================================
diff -u -rfb099c65e1987ef8ff8f8aa4a0d987fd77247750 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/pages/monitoring/parts/advanceoptions.jsp	(.../advanceoptions.jsp)	(revision fb099c65e1987ef8ff8f8aa4a0d987fd77247750)
+++ lams_tool_spreadsheet/web/pages/monitoring/parts/advanceoptions.jsp	(.../advanceoptions.jsp)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -1,15 +1,9 @@
-<h1>
-	<img src="<lams:LAMSURL/>/images/tree_closed.gif" id="treeIcon" onclick="javascript:toggleAdvancedOptionsVisibility(document.getElementById('advancedDiv'), document.getElementById('treeIcon'), '<lams:LAMSURL/>');" />
+<c:set var="adTitle"><fmt:message key="label.monitoring.summary.advanced.settings" /></c:set>
+<lams:AdvancedAccordian title="${adTitle}">
 
-	<a href="javascript:toggleAdvancedOptionsVisibility(document.getElementById('advancedDiv'), document.getElementById('treeIcon'),'<lams:LAMSURL/>');" >
-		<fmt:message key="label.monitoring.summary.advanced.settings"/>
-	</a>
-</h1>
-<br />
-
 <%-- Overall TaskList information  --%>
-<div class="monitoring-advanced" id="advancedDiv" style="display:none">
-	<table class="alternative-color">
+             
+<table class="table table-striped table-condensed">
 		<tr>
 			<td>
 				<fmt:message key="label.monitoring.summary.lock.when.finished" />
@@ -88,4 +82,5 @@
 		</tr>
 		</c:if>		
 	</table>
-</div>
+
+</lams:AdvancedAccordian>
\ No newline at end of file
Index: lams_tool_spreadsheet/web/pages/monitoring/parts/editmark.jsp
===================================================================
diff -u -r613f0d0d76eb497ed58d7e6836eda34a245425a9 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/pages/monitoring/parts/editmark.jsp	(.../editmark.jsp)	(revision 613f0d0d76eb497ed58d7e6836eda34a245425a9)
+++ lams_tool_spreadsheet/web/pages/monitoring/parts/editmark.jsp	(.../editmark.jsp)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -4,73 +4,71 @@
 <lams:html>
 	<lams:head>
 		<%@ include file="/common/header.jsp"%>
-		<lams:css style="main" />
-		
+		<lams:css/>
 		<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/jquery.js"></script>
-		<script type="text/javascript"> 
-			function callHideMessage() {
-				try {
-					if (window.parent && window.parent.hideMessage) {
-						window.parent.hideMessage();
-					} else if (window.top && window.top.hideMessage) {
-						window.top.hideMessage();
-					}
-				} catch(err) {
-					// mute cross-domain iframe access errors
-				}
-			}
-			
-			$(function() {
-				//change size of an iframe on ckeditor's autogrow 
-				CKEDITOR.instances.comments.on("instanceReady", function(e) {
-				    e.editor.on('resize',function(reEvent){
-				    	var iframe = window.parent.document.getElementById("marksInputArea");
-				    	iframe.style.height=eval(iframe.contentWindow.document.body.scrollHeight)+'px';
-				    });
-				});
-			});
-		</script>
 	</lams:head>
-	<body class="tabpart">
-		<!-- Basic Info Form-->
-		<%@ include file="/common/messages.jsp"%>
+	<body class="stripes">
+	
+	<c:set var="title"><fmt:message key="label.monitoring.summary.marking.marking" /></c:set>
 
-		<html:form action="/monitoring/saveMark" method="post" styleId="markForm" focus="marks">
-			<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
-			<c:set var="sessionMapID" value="${formBean.sessionMapID}" />				
-			<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
-			<html:hidden property="sessionMapID" />
-			<html:hidden property="userUid" />
-			
-			<h2 class="no-space-left">
-				<fmt:message key="label.monitoring.summary.marking.marking" />
-			</h2>
+	<html:form action="/monitoring/saveMark" method="post" styleId="markForm" focus="marks">
+	<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" /> 
 
-			<div class="field-name">
-            	<fmt:message key="label.monitoring.summary.marking.marks" />
-			</div>
+	<lams:Page type="learner" title="${title}">
+	
+		<!-- Basic Info Form-->
+ 		<%@ include file="/common/messages.jsp"%>
 
-			<div class="small-space-bottom">
-         		<html:text property="marks" size="55"/>
-			</div>
+		<p><fmt:message key="label.reviewitem.spreadsheet.sent.by" />&nbsp;<strong>${formBean.userName}</strong></p>
+		
+		<c:set var="sessionMapID" value="${formBean.sessionMapID}" />				
+		<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
+		<html:hidden property="sessionMapID" />
+		<html:hidden property="userUid" />
+		<html:hidden property="code" />
+		<html:hidden property="userName" />
+		
+		<div class="form-group">
+			<label for="marks"><fmt:message key="label.monitoring.summary.marking.marks" /></label>
+        		<html:text property="marks" size="10" style="form-control form-control-inline"/>
+		</div>
 
-			<div class="field-name">
-            	<fmt:message key="label.monitoring.summary.marking.comments" />
-			</div>
+		<div class="form-group">
+           	<label for="comments"><fmt:message key="label.monitoring.summary.marking.comments" /></label>
+           	<lams:CKEditor id="comments" value="${formBean.comments}" contentFolderID="${sessionMap.contentFolderID}"></lams:CKEditor>
+		</div>
+	
+		<c:choose>
+			<c:when test="${empty formBean.code}">
+				<lams:Alert type="info" id="no-spreadsheet" close="false">
+					<fmt:message key="label.reviewitem.user.hasnot.sent.spreadsheet" />
+				</lams:Alert>
+			</c:when>
+			<c:otherwise>
+			    <html:hidden property="spreadsheet.code" styleId="spreadsheet.code" value="${formBean.code}"/>	
+				<iframe
+					id="externalSpreadsheet" name="externalSpreadsheet" src="${spreadsheetURL}"
+					style="width:99%" frameborder="no" height="385px"
+					scrolling="no">
+				</iframe> 
+			</c:otherwise>
+		</c:choose>	
 
-			<div class="small-space-bottom" >
-				<lams:CKEditor id="comments" value="${formBean.comments}" contentFolderID="${sessionMap.contentFolderID}" width="99%"/>
-			</div>
-			
-		</html:form>
-
-		<lams:ImgButtonWrapper>
-			<a href="#" onclick="markForm.submit();" class="button space-left">
+		<p>
+			<a href="#" onclick="markForm.submit();" class="btn btn-default btn-small loffset5">
 				<fmt:message key="label.monitoring.summary.marking.update.marks" /> 
 			</a>
-			<a href="javascript:;" onclick="javascript:callHideMessage()" class="button space-left">
+			<a href="#" onclick="javascript:window.close()" class="btn btn-default btn-small loffset5">
 				<fmt:message key="label.cancel" /> 
 			</a>
-		</lams:ImgButtonWrapper>
+		</p> 
+		
+		<div id="footer"></div>
+		
+	</lams:Page>
+	
+	</html:form> 
+
+	
 	</body>
 </lams:html>
Index: lams_tool_spreadsheet/web/pages/monitoring/parts/statisticspart.jsp
===================================================================
diff -u -r7bd98bf484806ec5ce961fe49e34c0bd24997d85 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/pages/monitoring/parts/statisticspart.jsp	(.../statisticspart.jsp)	(revision 7bd98bf484806ec5ce961fe49e34c0bd24997d85)
+++ lams_tool_spreadsheet/web/pages/monitoring/parts/statisticspart.jsp	(.../statisticspart.jsp)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -1,37 +1,55 @@
 <%-- This is for AJAX call to refresh statistic page  --%>
 <%@ include file="/common/taglibs.jsp"%>
+
+<c:if test="${empty statisticList}">
+	<lams:Alert type="info" id="no-session-summary" close="false">
+		<fmt:message key="message.monitoring.summary.no.session" />
+	</lams:Alert>
+</c:if>
+	
 <c:forEach var="statistic" items="${statisticList}">
-	<table cellpadding="0">
-		<c:if test="${isGroupedActivity}">
+
+	<c:if test="${isGroupedActivity}">	
+	    <div class="panel panel-default" >
+        <div class="panel-heading" id="heading${toolSessionDto.sessionID}">
+			<span class="panel-title">
+				<fmt:message key="monitoring.label.group" />&nbsp;<c:out value="${statistic.sessionName}" />
+			</span>
+        </div>
+
+        <div class="panel-body">
+	</c:if>
+	
+		<table class="table table-condensed table-striped">
 			<tr>
-				<th colspan="2">
-					<fmt:message key="label.monitoring.statistics.session.name" /> <c:out value="${statistic.sessionName}" />
-				</th>
+				<td>
+					<fmt:message key="label.monitoring.statistics.marked" />
+				</td>
+				<td>
+					<c:out value="${statistic.markedCounter}" />
+				</td>
 			</tr>
-		</c:if>
-		<tr>
-			<td>
-				<fmt:message key="label.monitoring.statistics.marked" />
-			</td>
-			<td>
-				<c:out value="${statistic.markedCounter}" />
-			</td>
-		</tr>
-		<tr>
-			<td>
-				<fmt:message key="label.monitoring.statistics.not.marked" />
-			</td>
-			<td>
-				<c:out value="${statistic.notMarkedCounter}" />
-			</td>
-		</tr>
-		<tr>
-			<td>
-				<fmt:message key="label.monitoring.statistics.total.spreadsheets.sent.by.learners" />
-			</td>
-			<td>
-				<c:out value="${statistic.totalSpreadsheetsSentByLearners}" />
-			</td>
-		</tr>
-	</table>
+			<tr>
+				<td>
+					<fmt:message key="label.monitoring.statistics.not.marked" />
+				</td>
+				<td>
+					<c:out value="${statistic.notMarkedCounter}" />
+				</td>
+			</tr>
+			<tr>
+				<td>
+					<fmt:message key="label.monitoring.statistics.total.spreadsheets.sent.by.learners" />
+				</td>
+				<td>
+					<c:out value="${statistic.totalSpreadsheetsSentByLearners}" />
+				</td>
+			</tr>
+		</table>
+		
+	<c:if test="${isGroupedActivity}">	
+		</div>
+		</div>
+	</c:if>
+	
 </c:forEach>
\ No newline at end of file
Index: lams_tool_spreadsheet/web/pages/monitoring/parts/summarylist.jsp
===================================================================
diff -u -r0d10b0f6afaf65b7d04a5c2fa54688962f4b9379 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/pages/monitoring/parts/summarylist.jsp	(.../summarylist.jsp)	(revision 0d10b0f6afaf65b7d04a5c2fa54688962f4b9379)
+++ lams_tool_spreadsheet/web/pages/monitoring/parts/summarylist.jsp	(.../summarylist.jsp)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -4,24 +4,19 @@
 
 <div id="summaryList2">
 
-<link type="text/css" href="${lams}css/jquery.tablesorter.theme-blue.css" rel="stylesheet">
-<link type="text/css" href="${lams}css/jquery.tablesorter.pager.css" rel="stylesheet">
+<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme.bootstrap.css">
+<link rel="stylesheet" href="${lams}css/jquery.tablesorter.pager.css">
 
-<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter.js"></script>
-<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-widgets.js"></script>
-<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-pager.js"></script>
-
 <script type="text/javascript">
-	// use noConflict() otherwise jQuery conflicts with prototype.js
-	jQuery.noConflict();
-	jQuery(document).ready(function($){
-	    
+
+	$(document).ready(function(){
+
 		$(".tablesorter").tablesorter({
-			theme: 'blue',
+			theme: 'bootstrap',
+			headerTemplate : '{content} {icon}',
 		    sortInitialOrder: 'desc',
             sortList: [[0]],
-            widgets: [ "resizable", "filter" ],
+            widgets: [ "uitheme", "resizable", "filter" ],
             <c:choose>
 			<c:when test="${spreadsheet.markingEnabled}">
             headers: { 1: { filter: false}, 2: { sorter: false, filter: false} }, 
@@ -42,7 +37,12 @@
 		$(".tablesorter").each(function() {
 			$(this).tablesorterPager({
 				savePages: false,
-				ajaxUrl : "<c:url value='/monitoring/getUsers.do'/>?sessionMapID=${sessionMapID}&toolContentID=${param.toolContentID}&page={page}&size={size}&{sortList:column}&{filterList:fcol}&toolSessionID=" + $(this).attr('data-session-id'),
+                container: $(this).find(".ts-pager"),
+                output: '{startRow} to {endRow} ({totalRows})',
+                cssPageDisplay: '.pagedisplay',
+                cssPageSize: '.pagesize',
+                cssDisabled: 'disabled',
+                ajaxUrl : "<c:url value='/monitoring/getUsers.do'/>?sessionMapID=${sessionMapID}&toolContentID=${param.toolContentID}&page={page}&size={size}&{sortList:column}&{filterList:fcol}&toolSessionID=" + $(this).attr('data-session-id'),
 				ajaxProcessing: function (data, table) {
 					if (data && data.hasOwnProperty('rows')) {
 			    		var rows = [],
@@ -55,7 +55,7 @@
 							rows += '<td>';
 							if ( ${spreadsheet.learnerAllowedToSave} ) {
 								var reviewURL = '<c:url value="/reviewItem.do"/>?userUid='+userData["userUid"];
-								rows += '<a href="javascript:launchPopup(\'' + reviewURL + '\')" style="margin-left: 7px;" styleClass="button">' + userData["userName"] + '</a>';
+								rows += '<a href="javascript:launchPopup(\'' + reviewURL + '\')">' + userData["userName"] + '</a>';
 							} else {
 								rows += userData["userName"];
 							}
@@ -70,7 +70,8 @@
 							}
 							rows += '</span>';
 							if ( userData["userModifiedSpreadsheet"] ) {
-								rows += '<a href="javascript:editMark(\''+userData["userUid"]+'\')" style="margin-left: 7px;"><fmt:message key="label.monitoring.summary.mark.button" /></a>';
+								var editUrl = '<c:url value="/monitoring/editMark.do"/>?userUid=' + userData["userUid"] +'&toolContentID=${param.toolContentID}&sessionMapID=${sessionMapID}';
+								rows += '<a href="javascript:launchPopup(\''+ editUrl +'\')" class="btn btn-default btn-xs loffset5"><fmt:message key="label.monitoring.summary.mark.button" /></a>';
 							}
 							rows += '</td>';
 							</c:if>
@@ -94,18 +95,6 @@
 			            
 			    	}
 				},					
-			    container: $(this).next(".pager"),
-			    output: '{startRow} to {endRow} ({totalRows})',
-			    // css class names of pager arrows
-			    cssNext: '.tablesorter-next', // next page arrow
-				cssPrev: '.tablesorter-prev', // previous page arrow
-				cssFirst: '.tablesorter-first', // go to first page arrow
-				cssLast: '.tablesorter-last', // go to last page arrow
-				cssGoto: '.gotoPage', // select dropdown to allow choosing a page
-				cssPageDisplay: '.pagedisplay', // location of where the "output" is displayed
-				cssPageSize: '.pagesize', // page size selector - select dropdown that sets the "size" option
-				// class added to arrows when at the extremes (i.e. prev/first arrows are "disabled" when on the first page)
-				cssDisabled: 'disabled' // Note there is no period "." in front of this class name
 			})
 		});
   	})
@@ -116,79 +105,83 @@
 <c:set var="spreadsheet" value="${sessionMap.spreadsheet}"/>
 
 <c:if test="${empty summaryList}">
-	<div align="center">
-		<b> <fmt:message key="message.monitoring.summary.no.session" /> </b>
-	</div>
+	<lams:Alert type="info" id="no-session-summary" close="false">
+		<fmt:message key="message.monitoring.summary.no.session" />
+	</lams:Alert>
 </c:if>
 
-	<c:forEach var="summary" items="${summaryList}">
+<c:if test="${sessionMap.isGroupedActivity}">
+<div class="panel-group" id="accordionSessions" role="tablist" aria-multiselectable="true"> 
+</c:if>
+
+	<c:forEach var="summary" items="${summaryList}" varStatus="status">
+	
 		<c:if test="${sessionMap.isGroupedActivity}">
-			<h1>
-				<fmt:message key="monitoring.label.group" /> ${summary.sessionName}	
-			</h1>
+			<div class="panel panel-default" >
+	        <div class="panel-heading" id="heading${summary.sessionId}">
+	        	<span class="panel-title collapsable-icon-left">
+	        	<a class="${status.first ? '' : 'collapsed'}" role="button" data-toggle="collapse" href="#collapse${summary.sessionId}" 
+						aria-expanded="${status.first ? 'false' : 'true'}" aria-controls="collapse$${summary.sessionId}" >
+				<fmt:message key="monitoring.label.group" />&nbsp;${summary.sessionName}</a>
+				</span>
+	        </div>
+		        
+		    <div id="collapse${summary.sessionId}" class="panel-collapse collapse ${status.first ? 'in' : ''}" role="tabpanel" aria-labelledby="heading${summary.sessionId}">
 		</c:if>
 		
-		<h2 style="color:black; margin-left: 20px;"><fmt:message key="label.monitoring.summary.overall.summary" />	</h2>
-		
-		<div class="tablesorter-holder">
-		<table class="tablesorter" data-session-id="${summary.sessionId}">
-			<thead>
-				<tr>
-					<th align="left">
-						<fmt:message key="label.monitoring.summary.learner" />
+			<c:set var="numColumns" value="1"/>
+			<c:if test="${spreadsheet.markingEnabled}"><c:set var="numColumns" value="${numColumns+1}"/></c:if>
+			<c:if test="${spreadsheet.reflectOnActivity}"><c:set var="numColumns" value="${numColumns+1}"/></c:if>
+			<lams:TSTable numColumns="${numColumns}" dataId='data-session-id="${summary.sessionId}"' test="fred"> 
+				<th align="left">
+					<fmt:message key="label.monitoring.summary.learner" />
+				</th>
+				<c:if test="${spreadsheet.markingEnabled}">			
+					<th width="20%" align="center">
+						<fmt:message key="label.monitoring.summary.marked" />
 					</th>
-					<c:if test="${spreadsheet.markingEnabled}">			
-						<th width="60px" align="center">
-							<fmt:message key="label.monitoring.summary.marked" />
-						</th>
-					</c:if>
-					<c:if test="${spreadsheet.reflectOnActivity}">			
-						<th width="50%" align="center">
-							<fmt:message key="label.monitoring.summary.reflection" />
-						</th>
-					</c:if>
-				</tr>
-			</thead>
-			<tbody>
-			</tbody>
-		</table>
+				</c:if>
+				<c:if test="${spreadsheet.reflectOnActivity}">			
+					<th width="50%" align="center">
+						<fmt:message key="label.monitoring.summary.reflection" />
+					</th>
+				</c:if>
+			</lams:TSTable>
+			
+			<c:if test="${spreadsheet.markingEnabled}">	
+				<p>
+					<html:link href="javascript:viewAllMarks(${summary.sessionId});"
+						property="viewAllMarks" styleClass="btn btn-default voffset10 loffset5">
+						<fmt:message key="label.monitoring.summary.viewAllMarks.button" />
+					</html:link>
+					<html:link href="javascript:releaseMarks(${summary.sessionId});"
+						property="releaseMarks" styleClass="btn btn-default voffset10 loffset5">
+						<fmt:message key="label.monitoring.summary.releaseMarks.button" />
+					</html:link>
+	 				<html:link href="javascript:downloadMarks(${summary.sessionId});"
+						property="downloadMarks" styleClass="btn btn-default voffset10 loffset5">
+						<fmt:message key="label.monitoring.summary.downloadMarks.button" />
+					</html:link>
+					<c:url value="/monitoring/summary.do" var="refreshMonitoring">
+						<c:param name="contentFolderID" value="${sessionMap.contentFolderID}"/>
+						<c:param name="toolContentID" value="${sessionMap.toolContentID}" />
+					</c:url>
+					<html:link href="${refreshMonitoring}" styleClass="btn btn-default loffset5 voffset10" >
+						<fmt:message key="label.refresh" />
+					</html:link>
+				</p>
+			</c:if>
 		
-		<!-- pager -->
-		<div class="pager">
-			<form>
-				<img class="tablesorter-first"/>
-				<img class="tablesorter-prev"/>
-				<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
-				<img class="tablesorter-next"/>
-				<img class="tablesorter-last"/>
-				<select class="pagesize">
-					<option selected="selected" value="10">10</option>
-					<option value="20">20</option>
-					<option value="30">30</option>
-					<option value="40">40</option>
-					<option value="50">50</option>
-					<option value="100">100</option>
-				</select>
-			</form>
-		</div>
-		</div>
-	
-		
-		<c:if test="${spreadsheet.markingEnabled}">	
-			<div class="space-bottom-top" style="position:relative; left:30px; ">
-				<html:link href="javascript:viewAllMarks(${summary.sessionId});"
-					property="viewAllMarks" styleClass="button">
-					<fmt:message key="label.monitoring.summary.viewAllMarks.button" />
-				</html:link>
-				<html:link href="javascript:releaseMarks(${summary.sessionId});"
-					property="releaseMarks" styleClass="button">
-					<fmt:message key="label.monitoring.summary.releaseMarks.button" />
-				</html:link>
- 				<html:link href="javascript:downloadMarks(${summary.sessionId});"
-					property="downloadMarks" styleClass="button">
-					<fmt:message key="label.monitoring.summary.downloadMarks.button" />
-				</html:link>
-			</div>
+		<c:if test="${sessionMap.isGroupedActivity}">
+			</div> <!-- end collapse area  -->
+			</div> <!-- end collapse panel  -->
 		</c:if>
-	</c:forEach>		
+	${ !sessionMap.isGroupedActivity || ! status.last ? '<div class="voffset5">&nbsp;</div>' :  ''}
+
+</c:forEach>
+
+<c:if test="${sessionMap.isGroupedActivity}">
+	</div> <!--  end panel group -->
+</c:if>
+
 </div>
\ No newline at end of file
Index: lams_tool_spreadsheet/web/pages/monitoring/parts/updatemarkaftersave.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/pages/monitoring/parts/updatemarkaftersave.jsp	(.../updatemarkaftersave.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_spreadsheet/web/pages/monitoring/parts/updatemarkaftersave.jsp	(.../updatemarkaftersave.jsp)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -3,21 +3,10 @@
 
 <lams:html>
 	<lams:head>
-		<%@ include file="/common/header.jsp"%>	
-		<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/jquery.js"></script>
 	</lams:head>
 	<body>
 		<script type="text/javascript"> 
-			if (window.parent && window.parent.hideMessage) {
-				window.parent.hideMessage();
-			} else if (window.top && window.top.hideMessage) {
-				window.top.hideMessage();
-			}
-			if (window.parent && window.parent.updateMarkAfterSaving) {
-				window.parent.updateMarkAfterSaving(${userUid}, ${mark});
-			} else if (window.top && window.top.updateMarkAfterSaving) {
-				window.top.updateMarkAfterSaving(${userUid}, ${mark});
-			}
+			window.close();
 		</script>
 		<p>Mark Updated to ${mark}</p>
 	</body>
Index: lams_tool_spreadsheet/web/pages/monitoring/parts/viewallmarks.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/pages/monitoring/parts/viewallmarks.jsp	(.../viewallmarks.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_spreadsheet/web/pages/monitoring/parts/viewallmarks.jsp	(.../viewallmarks.jsp)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -1,123 +1,89 @@
 <!DOCTYPE html>
-        
-
 <%@include file="/common/taglibs.jsp"%>
 <%@ page import="org.lamsfoundation.lams.tool.spreadsheet.SpreadsheetConstants"%>
 
+<c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
+
 <lams:html>
 <lams:head>
 	<title><fmt:message key="activity.title" /></title>
 	<lams:css/>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/common.js"></script>
-	<script type="text/javascript">
-		function updateMark(userUid){
-			window.opener.editMark(userUid);
-			window.close();
-		}
-		function closeWindow() {
-			window.close();
-		}  				
-	</script>
 </lams:head>
 <body class="stripes">
 
-		<div id="content">
-		<h1>
-			<fmt:message key="label.monitoring.vieawallmarks.heading.marking"/>
-		</h1>
+		<c:set var="title"><fmt:message key="label.monitoring.vieawallmarks.heading.marking"/></c:set>
+		<lams:Page type="learner" title="${title}">
+				<div class="row no-gutter">
+				<div class="col-xs-12">
 
-			<table cellpadding="0">
 				<c:forEach var="user" items="${userList}">
 						
-						
-					<tr>
-						<td class="field-name">
-							<fmt:message key="label.monitoring.vieawallmarks.learner" />
-						</td>
-						<td>
-							<c:out value="${user.loginName}" />
-						</td>
-					</tr>	
-					
-					<tr>
-						<td class="field-name">
-							<fmt:message key="label.monitoring.vieawallmarks.spreadsheet.submitted" />
-						</td>
-						<td>
-							<c:choose>
+					<div class="panel panel-default">
+						<div class="panel-heading panel-title">
+							<c:out value="${user.fullUsername}"/>
+						</div>
+						<div class="panel-body">
+						<div class="row no-gutter">
+							<div class="col-sm-2"><fmt:message key="label.monitoring.vieawallmarks.spreadsheet.submitted" /></div>
+							<div class="col-sm-10">
+								<c:choose>
 								<c:when test="${user.userModifiedSpreadsheet != null}">
 									<fmt:message key="label.monitoring.vieawallmarks.true" />
 								</c:when>
 								<c:otherwise>
 									<fmt:message key="label.monitoring.vieawallmarks.false" />
 								</c:otherwise>
-							</c:choose>
-						</td>
-					</tr>					
-					
-					<tr>
-						<td class="field-name">
-							<fmt:message key="label.monitoring.vieawallmarks.marks" />
-						</td>
-						<td>
-							<c:choose>
-								<c:when test="${(user.userModifiedSpreadsheet != null) && (user.userModifiedSpreadsheet.mark != null)}">
-									<fmt:formatNumber type="number" maxFractionDigits="<%= SpreadsheetConstants.MARK_NUM_DEC_PLACES %>" value="${user.userModifiedSpreadsheet.mark.marks}"/>
-								</c:when>
-								<c:otherwise>
-									<fmt:message key="label.learning.not.available" />
-								</c:otherwise>
-							</c:choose>
-							<c:choose>
-								<c:when test="${user.userModifiedSpreadsheet != null}">
-									<html:link href="javascript:updateMark(${user.uid});" 
-										property="submit" styleClass="button">
+								</c:choose>
+							</div>
+						</div>
+						<div class="row no-gutter">
+							<div class="col-sm-2"><fmt:message key="label.monitoring.vieawallmarks.marks" /></div>
+							<div class="col-sm-10">
+								<c:choose>
+									<c:when test="${(user.userModifiedSpreadsheet != null) && (user.userModifiedSpreadsheet.mark != null)}">
+										<fmt:formatNumber type="number" maxFractionDigits="<%= SpreadsheetConstants.MARK_NUM_DEC_PLACES %>" value="${user.userModifiedSpreadsheet.mark.marks}"/>
+									</c:when>
+									<c:otherwise>
+										<fmt:message key="label.learning.not.available" />
+									</c:otherwise>
+								</c:choose>
+								<c:if test="${user.userModifiedSpreadsheet != null}">
+									<c:set var="editUrl"><c:url value="/monitoring/editMark.do"/>?userUid=${user.uid}&toolContentID=${sessionMap.toolContentID}&sessionMapID=${sessionMapID}</c:set>
+									<html:link href="javascript:launchPopup('${editUrl}');" 
+										property="submit" styleClass="btn btn-default btn-sm loffset5">
 										<fmt:message key="label.monitoring.vieawallmarks.update.marks" />
 									</html:link>
-								</c:when>
-								<c:otherwise>
-										<fmt:message key="label.monitoring.vieawallmarks.update.marks" />
-								</c:otherwise>
-							</c:choose>							
+								</c:if>
+							</div>
+						</div>
+						<div class="row no-gutter">
+							<div class="col-sm-2"><fmt:message key="label.monitoring.vieawallmarks.comments" /></div>
+							<div class="col-sm-10">
+								<c:choose>
+									<c:when test="${(user.userModifiedSpreadsheet != null) && (user.userModifiedSpreadsheet.mark != null)}">
+										<c:out value="${user.userModifiedSpreadsheet.mark.comments}" escapeXml="false" />
+									</c:when>
+									<c:otherwise>
+										<fmt:message key="label.learning.not.available" />
+									</c:otherwise>
+								</c:choose>
+							</div>
+						</div>
+						</div>
+					</div>
 
-						</td>
-					</tr>
-					
-					<tr>
-						<td class="field-name">
-							<fmt:message key="label.monitoring.vieawallmarks.comments" />
-						</td>
-						<td>
-							<c:choose>
-								<c:when test="${(user.userModifiedSpreadsheet != null) && (user.userModifiedSpreadsheet.mark != null)}">
-									<c:out value="${user.userModifiedSpreadsheet.mark.comments}" escapeXml="false" />
-								</c:when>
-								<c:otherwise>
-									<fmt:message key="label.learning.not.available" />
-								</c:otherwise>
-							</c:choose>
-						</td>
-					</tr>
-					
-					
-					<tr>
-						<td colspan="2">
-							<hr size="1" style="width:500px"/>
-						</td>
-					</tr>
-					<br><br>
-						
 				</c:forEach>
-				<tr>
-					<td colspan="2">
-						<html:link href="javascript:closeWindow();" property="submit" styleClass="button">
-							<fmt:message key="button.close" />
-						</html:link>
-					</td>
-				</tr>
-			</table>
-		</div>
+				
+				</div>
+				</div>
+				
+				<html:link href="javascript:window.close();" property="submit" styleClass="btn btn-default">
+						<fmt:message key="button.close" />
+				</html:link>
+
 		<div id="footer"></div>
 
+		</lams:Page>
 </body>
 </lams:html>
\ No newline at end of file
Index: lams_tool_spreadsheet/web/pages/monitoring/statistics.jsp
===================================================================
diff -u -r56d116683b7554e8ad3677cd0e12866ac3feb834 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/pages/monitoring/statistics.jsp	(.../statistics.jsp)	(revision 56d116683b7554e8ad3677cd0e12866ac3feb834)
+++ lams_tool_spreadsheet/web/pages/monitoring/statistics.jsp	(.../statistics.jsp)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -1,5 +1,5 @@
 <%@ include file="/common/taglibs.jsp"%>
-<img src="${tool}/images/indicator.gif" style="display:none" id="statisticArea_Busy" />
+<i class="fa-spinner" style="display:none" id="statisticArea_Busy"></i>
 <div id="statisticArea">
 	<%@ include file="parts/statisticspart.jsp"%>
 </div>
\ No newline at end of file
Index: lams_tool_spreadsheet/web/pages/monitoring/summary.jsp
===================================================================
diff -u -r0d10b0f6afaf65b7d04a5c2fa54688962f4b9379 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision 0d10b0f6afaf65b7d04a5c2fa54688962f4b9379)
+++ lams_tool_spreadsheet/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -6,37 +6,11 @@
 
 <script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/monitorToolSummaryAdvanced.js"></script>
 <script type="text/javascript">
-	function showMessage(url) {
-		var area=document.getElementById("marksInputArea");
-		if(area != null){
-			area.style.width="95%";
-			area.src=url;
-			area.style.display="block";
-		}
-		location.hash = "marksInputArea";
-	}
-	function hideMessage(){
-		var area=document.getElementById("marksInputArea");
-		if(area != null){
-			area.style.width="0px";
-			area.style.height="0px";
-			area.style.display="none";
-		}
-	}
-	
-	function editMark(userUid){
+/* 	function editMark(userUid){
 		var url = "<c:url value="/monitoring/editMark.do?userUid="/>" + userUid +"&toolContentID=" + ${param.toolContentID} + "&sessionMapID=" + "${sessionMapID}";
 		showMessage(url);
 	}
-	
-	function updateMarkAfterSaving(userUid, mark) {
-		var span = document.getElementById('mark'+userUid);
-		while( span.firstChild ) {
-		    span.removeChild( span.firstChild );
-		}
-		span.appendChild( document.createTextNode(mark) );
-	}
-	
+ */	
 	function downloadMarks(sessionId){
 		var url = "<c:url value="/monitoring/downloadMarks.do"/>";
 	    var reqIDVar = new Date();
@@ -50,7 +24,8 @@
 		if(wd && wd.open && !wd.closed){
 			wd.close();
 		}
-		wd = window.open("<c:url value='/monitoring/viewAllMarks.do?toolSessionID='/>" + sessionId, "mark", 'resizable, width=796, height=570, scrollbars');
+		wd = window.open("<c:url value='/monitoring/viewAllMarks.do?toolSessionID='/>" + sessionId + "&sessionMapID=${sessionMapID}", 
+				"mark", 'resizable, width=796, height=570, scrollbars');
 		wd.window.focus();
 	}
 	
@@ -60,36 +35,38 @@
 	    var reqIDVar = new Date();
 		var param = "toolSessionID=" + sessionId +"&reqID="+reqIDVar.getTime();
 		messageLoading();
-	    var myAjax = new Ajax.Updater(
-		    	messageTargetDiv,
-		    	url,
-		    	{
-		    		method:'get',
-		    		parameters:param,
-		    		onComplete:messageComplete,
-		    		evalScripts:true
-		    	}
-	    );
-		
+		$("#"+messageTargetDiv).load(
+				url,
+				param,
+				function() {
+					messageComplete();
+				}
+		);
 	}	
 	function messageLoading(){
 		if($(messageTargetDiv+"_Busy") != null){
-			Element.show(messageTargetDiv+"_Busy");
+			$(messageTargetDiv+"_Busy").show();
 		}		
 	}
 	function messageComplete(){
 		if($(messageTargetDiv+"_Busy") != null){
-			Element.hide(messageTargetDiv+"_Busy");
+			$(messageTargetDiv+"_Busy").hide();
 		}
 	}	
 </script>
 
-<h1>
-	<c:out value="${spreadsheet.title}" escapeXml="true"/>
-</h1>
+<div class="panel">
+	<h4>
+	    <c:out value="${spreadsheet.title}" escapeXml="true"/>
+	</h4>
+	<div class="instructions voffset5">
+	    <c:out value="${spreadsheet.instructions}" escapeXml="false"/>
+	</div>
+	
+	<!--For release marks feature-->
+	<img src="${tool}/images/indicator.gif" style="display:none" id="message-area-busy" />
+	<div id="message-area"></div> 
 
-<div class="instructions space-top">
-	<c:out value="${spreadsheet.instructions}" escapeXml="false"/>
 </div>
 
 <%-- Summary list  --%>
@@ -103,15 +80,4 @@
 	<%@ include file="/pages/monitoring/parts/summarylist.jsp"%>
 </div>
 
-<c:if test="${spreadsheet.markingEnabled}">	
-	<p>
-		<iframe
-			onload="javascript:this.style.height=eval(this.contentWindow.document.body.scrollHeight+220)+'px'"
-			id="marksInputArea" name="marksInputArea"
-			style="width:0px;height:0px;border:0px;display:none" frameborder="no"
-			scrolling="no">
-		</iframe>
-	</p>
-</c:if>
-
 <%@ include file="parts/advanceoptions.jsp"%>
Index: lams_tool_spreadsheet/web/pages/reviewitem/reviewitem.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -r0acc4ca56f472b81307b4936c0cc797b71d5cf85
--- lams_tool_spreadsheet/web/pages/reviewitem/reviewitem.jsp	(.../reviewitem.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_spreadsheet/web/pages/reviewitem/reviewitem.jsp	(.../reviewitem.jsp)	(revision 0acc4ca56f472b81307b4936c0cc797b71d5cf85)
@@ -1,46 +1,42 @@
 <!DOCTYPE html>
 
 <%@ include file="/common/taglibs.jsp"%>
-
 <lams:html>
 	<lams:head>
 		<title>
 			<fmt:message key="label.reviewitem.title" />
 		</title>	
 		<%@ include file="/common/header.jsp"%>
 	</lams:head>
+	
 	<body class="stripes">
 	
-		<div id="content">	
-			<h1><fmt:message key="label.reviewitem.spreadsheet.sent.by" /> ${userName}	</h1><br>
+		<c:set var="title"><fmt:message key="label.reviewitem.title" /></c:set>
+		<lams:Page type="learner" title="${title}">
 			
+			<p><fmt:message key="label.reviewitem.spreadsheet.sent.by" />&nbsp;<strong>${userName}</strong></p>
 			<c:choose>
 				<c:when test="${code == null}">
-					<br>
-					<div>
-						<b> <fmt:message key="label.reviewitem.user.hasnot.sent.spreadsheet" /> </b>
-					</div>
+					<lams:Alert type="info" id="no-spreadsheet" close="false">
+						<fmt:message key="label.reviewitem.user.hasnot.sent.spreadsheet" />
+					</lams:Alert>
 				</c:when>
 				<c:otherwise>
 				    <html:hidden property="spreadsheet.code" styleId="spreadsheet.code" value="${code}"/>	
 					<iframe
-						id="externalSpreadsheet" name="externalSpreadsheet" src="<html:rewrite page='/includes/javascript/simple_spreadsheet/spreadsheet_offline.html'/>?lang=<%=request.getLocale().getLanguage()%>"
-						style="width:635px;" frameborder="no" height="385px"
+						id="externalSpreadsheet" name="externalSpreadsheet" src="${spreadsheetURL}"
+						style="width:99%;" frameborder="no" height="385px"
 						scrolling="no">
-					</iframe>
-					<br><br><br>
-					<table cellpadding="0" style="width:655px;">
-						<tr>
-							<td align="right" >
-								<a href="javascript:window.close();" class="button"><fmt:message key="button.close"/></a>
-							</td>
-						</tr>
-					</table>
+					</iframe> 
+
+					<a href="javascript:window.close();" class="btn btn-default"><fmt:message key="button.close"/></a>
 					
 				</c:otherwise>
 			</c:choose>	
-		</div>
+
 		<div id="footer"></div>
 
+		</lams:Page>
+		
 	</body>
 </lams:html>