Index: lams_tool_laqa/conf/language/lams/ApplicationResources.properties
===================================================================
diff -u -r2f725f8ef2aa09a2663b2335bf67213074426d11 -r84f6a2003265dbadd4de5a08ebf0e158af1e331f
--- lams_tool_laqa/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision 2f725f8ef2aa09a2663b2335bf67213074426d11)
+++ lams_tool_laqa/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision 84f6a2003265dbadd4de5a08ebf0e158af1e331f)
@@ -281,6 +281,6 @@
 label.search  =Search...
 label.posted.by  ={0} on {1}
 label.noredo.enabled  =Note: after answer these questions, no changes are allowed.
+label.allow.review.other.responses =Show other aswers after deadline
 
-
 #======= End labels: Exported 280 labels for en AU =====
Fisheye: Tag 84f6a2003265dbadd4de5a08ebf0e158af1e331f refers to a dead (removed) revision in file `lams_tool_laqa/web/common/footer.jsp'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag 84f6a2003265dbadd4de5a08ebf0e158af1e331f refers to a dead (removed) revision in file `lams_tool_laqa/web/common/header.jsp'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag 84f6a2003265dbadd4de5a08ebf0e158af1e331f refers to a dead (removed) revision in file `lams_tool_laqa/web/common/tabbedheader.jsp'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_tool_laqa/web/monitoring/AdvanceOptions.jsp
===================================================================
diff -u -rc5457cc74f3986b393bc2947604b17168ba54dfb -r84f6a2003265dbadd4de5a08ebf0e158af1e331f
--- lams_tool_laqa/web/monitoring/AdvanceOptions.jsp	(.../AdvanceOptions.jsp)	(revision c5457cc74f3986b393bc2947604b17168ba54dfb)
+++ lams_tool_laqa/web/monitoring/AdvanceOptions.jsp	(.../AdvanceOptions.jsp)	(revision 84f6a2003265dbadd4de5a08ebf0e158af1e331f)
@@ -1,21 +1,14 @@
 <%@ include file="/common/taglibs.jsp"%>
-<br>
-<h1 style="padding: 30px 0 10px;">
-	<img src="<lams:LAMSURL/>/images/tree_closed.gif" id="treeIcon" onclick="javascript:toggleAdvancedOptionsVisibility(document.getElementById('advancedDiv'), document.getElementById('treeIcon'), '<lams:LAMSURL/>');" />
 
-	<a href="javascript:toggleAdvancedOptionsVisibility(document.getElementById('advancedDiv'), document.getElementById('treeIcon'),'<lams:LAMSURL/>');" >
-		<fmt:message key="monitor.summary.th.advancedSettings" />
-	</a>
-</h1>
-<br />
-
-<div class="monitoring-advanced" id="advancedDiv" style="display:none">
-<table class="alternative-color">
-	
+<c:set var="adTitle"><fmt:message key="monitor.summary.th.advancedSettings" /></c:set>
+<lams:AdvancedAccordian title="${adTitle}">
+             
+<table class="table table-striped table-condensed">
 	<tr>
 		<td>
 			<fmt:message key="label.learner.answer" />
 		</td>
+		
 		<td>
 			<c:choose>
 				<c:when test="${content.showOtherAnswers}">
@@ -27,12 +20,13 @@
 			</c:choose>	
 		</td>
 	</tr>
-
+	
 	<tr>
 		<td>
 			<fmt:message key="label.show.names" />
 		</td>
-		<td>	
+		
+		<td>
 			<c:choose>
 				<c:when test="${content.usernameVisible}">
 					<fmt:message key="label.on" />
@@ -43,11 +37,12 @@
 			</c:choose>	
 		</td>
 	</tr>
-	
+
 	<tr>
 		<td>
 			<fmt:message key="label.notify.teachers.on.response.submit" />
 		</td>
+		
 		<td>
 			<c:choose>
 				<c:when test="${content.notifyTeachersOnResponseSubmit}">
@@ -64,6 +59,7 @@
 		<td>
 			<fmt:message key="label.authoring.allow.rate.answers" />
 		</td>
+		
 		<td>
 			<c:choose>
 				<c:when test="${content.allowRateAnswers}">
@@ -79,7 +75,8 @@
 	<tr>
 		<td>
 			<fmt:message key="monitor.summary.td.addNotebook" />
-		</td>	
+		</td>
+		
 		<td>
 			<c:choose>
 				<c:when test="${content.reflect}">
@@ -88,10 +85,10 @@
 				<c:otherwise>
 					<fmt:message key="label.off" />
 				</c:otherwise>
-			</c:choose>
+			</c:choose>	
 		</td>
 	</tr>
-	 		
+	
 	<c:choose>
 		<c:when test="${content.reflect}">
 			<tr>
@@ -174,4 +171,4 @@
 	</tr>
 
 </table>
-</div>
+</lams:AdvancedAccordian>
\ No newline at end of file
Index: lams_tool_laqa/web/monitoring/Edit.jsp
===================================================================
diff -u -ra7661f206a3f21114f1c05f9a29f56e20f5e35f0 -r84f6a2003265dbadd4de5a08ebf0e158af1e331f
--- lams_tool_laqa/web/monitoring/Edit.jsp	(.../Edit.jsp)	(revision a7661f206a3f21114f1c05f9a29f56e20f5e35f0)
+++ lams_tool_laqa/web/monitoring/Edit.jsp	(.../Edit.jsp)	(revision 84f6a2003265dbadd4de5a08ebf0e158af1e331f)
@@ -1,37 +1,32 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<c:set var="ctxPath" value="${pageContext.request.contextPath}" scope="request"/>
 <c:set var="formBean" value="<%= request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY) %>" />
 
-<table>
+<table class="table table-condensed">
 	<tr>
-		<td width="10%" nowrap valign="top" class="field-name">
-			<fmt:message key="label.authoring.title"/>:
+		<td class="field-name" width="10%" valign="top">
+			<fmt:message key="label.authoring.title" />
 		</td>
 		<td>
-			<c:out value="${content.title}" escapeXml="true"/>
+			<c:out value="${content.title}" escapeXml="true" />
 		</td>
 	</tr>
+
 	<tr>
-		<td width="10%" nowrap valign="top" class="field-name">
-			<fmt:message key="label.authoring.instructions"/>:
+		<td class="field-name" width="10%" valign="top" NOWRAP>
+			<fmt:message key="label.authoring.instructions" />
 		</td>
 		<td>
-			<c:out value="${content.instructions}" escapeXml="false"/>
+			<c:out value="${content.instructions}" escapeXml="false" />
 		</td>
 	</tr>
-	
-	<tr>
-		<td colspan=2 class="align-right">
-			<c:url  var="authoringUrl" value="/authoringStarter.do">
-				<c:param name="toolContentID" value="${formBean.toolContentID}" />
-				<c:param name="contentFolderID" value="${formBean.contentFolderID}" />
-				<c:param name="mode" value="teacher" />
-			</c:url>
-			<html:link href="javascript:;" onclick="launchPopup('${authoringUrl}','definelater')" styleClass="button">
-				<fmt:message key="label.edit"/>
-			</html:link>
-		</td>
-	</tr>		 
-</table>																								
-		
\ No newline at end of file
+</table>
+
+<c:url value="/authoringStarter.do" var="authoringUrl">
+	<c:param name="mode" value="teacher" />
+	<c:param name="toolContentID" value="${formBean.toolContentID}" />
+	<c:param name="contentFolderID" value="${formBean.contentFolderID}" />
+</c:url>
+<html:link href="javascript:;" onclick="launchPopup('${authoringUrl}','definelater')" styleClass="btn btn-default">
+	<fmt:message key="label.edit" />
+</html:link>
\ No newline at end of file
Index: lams_tool_laqa/web/monitoring/MonitoringMaincontent.jsp
===================================================================
diff -u -re3e91d2a405148a23913ef90471db94b92d8f610 -r84f6a2003265dbadd4de5a08ebf0e158af1e331f
--- lams_tool_laqa/web/monitoring/MonitoringMaincontent.jsp	(.../MonitoringMaincontent.jsp)	(revision e3e91d2a405148a23913ef90471db94b92d8f610)
+++ lams_tool_laqa/web/monitoring/MonitoringMaincontent.jsp	(.../MonitoringMaincontent.jsp)	(revision 84f6a2003265dbadd4de5a08ebf0e158af1e331f)
@@ -1,58 +1,33 @@
 <!DOCTYPE html>
 
 <%@ include file="/common/taglibs.jsp"%>
-
-<%@ page import="java.util.LinkedHashSet" %>
-<%@ page import="java.util.Set" %>
 <%@ page import="org.lamsfoundation.lams.tool.qa.QaAppConstants"%>
 
 <c:set var="sessionMap" value="${sessionScope[generalLearnerFlowDTO.httpSessionID]}" />
 <c:set var="qaContent" value="${content}" />
+<c:set var="lams">
+	<lams:LAMSURL />
+</c:set>
+<c:set var="tool">
+	<lams:WebAppURL />
+</c:set>
 
-    <% 
-		Set tabs = new LinkedHashSet();
-		tabs.add("label.summary");
-		tabs.add("label.editActivity");
-		tabs.add("label.stats");
-		pageContext.setAttribute("tabs", tabs);
-	%>
-
-	<lams:html>
+<lams:html>
 	<lams:head>
 	<title><fmt:message key="activity.title" /></title>
-	<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" />
-		
-	<lams:css  style="main"/>
 
-	<link type="text/css" href="${lams}/css/jquery-ui-smoothness-theme.css" rel="stylesheet">
-	<link type="text/css" href="${lams}/css/jquery-ui.timepicker.css" rel="stylesheet">
+	<lams:css />
+	<link type="text/css" href="${lams}css/jquery-ui-smoothness-theme.css" rel="stylesheet">
+	<link type="text/css" href="${lams}css/jquery-ui.timepicker.css" rel="stylesheet">
 	<link type="text/css" href="${lams}css/jquery.jRating.css" rel="stylesheet"/>
-	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme-blue.css">
-	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.pager.css">
-	<link rel="stylesheet" href="<html:rewrite page='/includes/qalearning.css'/>">
+	<link rel="stylesheet" type="text/css" href="${lams}css/jquery.tablesorter.theme.bootstrap.css">
+	<link rel="stylesheet" type="text/css" href="${lams}css/jquery.tablesorter.pager.css"> 
+	<link type="text/css" rel="stylesheet" href="<html:rewrite page='/includes/qalearning.css'/>">
+	
 	<style media="screen,projection" type="text/css">
-		.tablesorter-blue {
-			margin: 5px 0 5px;
-		}
-		.question-title {
-			font-weight: bold;
-		}
-		.tablesorter-container {
-			width: 94%;
-			margin: 20px 20px 0;
-		}
 		.rating-stars-div {
 			padding-top: 12px;
 		}
-		.instructions {
-			padding-left: 20px;
-		}
 		#reflections {
 			padding: 70px 0 0px;
 		}
@@ -70,27 +45,11 @@
 			border-bottom: none !important;
 		}
 		
-		.tablesorter tbody > tr:nth-child(odd) > td, .tablesorter tbody > tr:nth-child(odd) > th {
-		    background-color: #EBF2FA;
-		}
-		.tablesorter tbody > tr:nth-child(odd):hover > td, .tablesorter tbody > tr:nth-child(odd):hover > th {
-		    background-color: #bfbfbf;
-		}
 		tr:nth-child(odd):hover .jStar {background-image: url(${lams}images/css/jquery.jRating-stars-grey.png)!important;}
 		tr:nth-child(even):hover .jStar {background-image: url(${lams}images/css/jquery.jRating-stars-light-grey.png)!important;}
 		tr:nth-child(odd) .jStar {background-image: url(${lams}images/css/jquery.jRating-stars-light-blue.png)!important;}
-		
-		h4 {
-			color:#0087e5; 
-			font-size:11px;
-			margin-top:10px;
-			margin-bottom:10px;
-			padding:0;
-		}
-		
 	</style>
 	
-	<!-- ********************  javascript ********************** -->
 	<script type="text/javascript"> 
 		//pass settings to monitorToolSummaryAdvanced.js
 		var submissionDeadlineSettings = {
@@ -118,23 +77,23 @@
 		COMMENT_TEXTAREA_TIP_LABEL = '<fmt:message key="label.comment.textarea.tip"/>',
 		WARN_COMMENTS_IS_BLANK_LABEL = '<fmt:message key="${warnCommentIsBlankLabel}"/>',
 		WARN_MIN_NUMBER_WORDS_LABEL = '<fmt:message key="${warnMinNumberWordsLabel}"><fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/></fmt:message>';
-
 	</script>
 	<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/jquery-ui.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.timepicker.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.blockUI.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/monitorToolSummaryAdvanced.js" ></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.jRating.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-pager.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-widgets.js"></script> 
 	<script type="text/javascript" src="${lams}includes/javascript/rating.js"></script> 
-
+	<script type="text/javascript" src="${lams}includes/javascript/monitorToolSummaryAdvanced.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>
+	
  	<!-- ******************** FCK Editor related javascript & HTML ********************** -->
-	<script language="JavaScript" type="text/JavaScript">
+	<script type="text/javascript">
 	
 		var POSTED_BY_LABEL = '<fmt:message key="label.posted.by"><fmt:param>{0}</fmt:param><fmt:param>{1}</fmt:param></fmt:message>';
 	
@@ -391,58 +350,41 @@
 			submitMethod(actionMethod);
 		}
 
-        function init(){
-            var tag = document.getElementById("currentTab");
-	    	if(tag.value != "")
-	    		selectTab(tag.value);
-            else
-                selectTab(1); //select the default tab;
-        }     
         
         function doSelectTab(tabId) {
-        	// start optional tab controller stuff
-        	var tag = document.getElementById("currentTab");
-	    	tag.value = tabId;
-	    	// end optional tab controller stuff
 	    	selectTab(tabId);
         } 
-        
-        function doSubmit(method) {
-        	document.QaMonitoringForm.dispatch.value=method;
-        	document.QaMonitoringForm.submit();
-        }
-	
 	</script>
 	
 </lams:head>
-<body class="stripes" onLoad="init();">
+<body class="stripes">
 
-<div id="page">
-	<h1> 
-		<fmt:message key="label.monitoring"/> 
-	</h1>
-
-	<div id="header">
-		<lams:Tabs collection="${tabs}" useKey="true" control="true"/>	
-	</div>	
+<html:form action="/monitoring?validate=false" method="POST" enctype="multipart/form-data" >
+	<c:set var="title"><fmt:message key="activity.title" /></c:set>
 	
-	<div id="content">		
-	    <html:form  action="/monitoring?validate=false" enctype="multipart/form-data" method="POST" target="_self">		
-		<html:hidden property="dispatch"/>
-		<html:hidden property="currentUid"/>
-		<html:hidden property="toolContentID"/>
-		<html:hidden property="currentTab" styleId="currentTab" />
-		<html:hidden property="httpSessionID"/>					
-		<html:hidden property="contentFolderID"/>						
-		
-		<lams:help toolSignature="<%= QaAppConstants.MY_SIGNATURE %>" module="monitoring"/>
-
-		<lams:TabBody id="1" titleKey="label.summary" page="SummaryContent.jsp"/>
-		<lams:TabBody id="2" titleKey="label.editActivity" page="Edit.jsp" />
-		<lams:TabBody id="3" titleKey="label.stats" page="Stats.jsp" />
-		</html:form>
-	</div>
+	<html:hidden property="dispatch"/>
+	<html:hidden property="currentUid"/>
+	<html:hidden property="toolContentID"/>
+	<html:hidden property="httpSessionID"/>					
+	<html:hidden property="contentFolderID"/>	
 	
+<lams:Page title="${title}" type="navbar">
+
+	<lams:Tabs title="${title}" control="true" helpToolSignature="<%= QaAppConstants.MY_SIGNATURE %>" helpModule="monitoring">
+		<lams:Tab id="1" key="label.summary" />
+		<lams:Tab id="2" key="label.editActivity" />
+		<lams:Tab id="3" key="label.stats" />
+	</lams:Tabs>
+
+
+	<lams:TabBodyArea>
+		<lams:TabBodys>
+			<lams:TabBody id="1" titleKey="label.summary" page="SummaryContent.jsp" />
+			<lams:TabBody id="2" titleKey="label.editActivity" page="Edit.jsp" />
+			<lams:TabBody id="3" titleKey="label.stats" page="Stats.jsp" />
+		</lams:TabBodys>
+	</lams:TabBodyArea>
+		
 	<div id="footer"></div>
 	
 	<div id="edit-response-dialog" title="<fmt:message key='label.modify.users.response' />" class="dialog">
@@ -459,8 +401,7 @@
 			</c:otherwise>
 		</c:choose>
 	</div>
-
-	</div>
-	
+</lams:Page>
+</html:form>
 </body>
-</lams:html>
+</lams:html>
\ No newline at end of file
Index: lams_tool_laqa/web/monitoring/Reflections.jsp
===================================================================
diff -u -r154d89ad4f8062f0f04705c56c8d232e7d855c7a -r84f6a2003265dbadd4de5a08ebf0e158af1e331f
--- lams_tool_laqa/web/monitoring/Reflections.jsp	(.../Reflections.jsp)	(revision 154d89ad4f8062f0f04705c56c8d232e7d855c7a)
+++ lams_tool_laqa/web/monitoring/Reflections.jsp	(.../Reflections.jsp)	(revision 84f6a2003265dbadd4de5a08ebf0e158af1e331f)
@@ -1,134 +1,110 @@
 <!DOCTYPE html>
+
 <%@ include file="/common/taglibs.jsp"%>
-<lams:html>
+<c:set var="lams">
+	<lams:LAMSURL />
+</c:set>
+<c:set var="tool">
+	<lams:WebAppURL />
+</c:set>
 
+<lams:html>
 	<lams:head>
-		<%@ include file="/common/header.jsp"%>
-
 		<title> <fmt:message key="label.view.reflection"/> </title>
-
-
-		<link type="text/css" href="${lams}/css/jquery-ui-smoothness-theme.css" rel="stylesheet"/>
-		<link type="text/css" href="${lams}/css/jquery-ui.timepicker.css" rel="stylesheet"/>
+		
+		<lams:css />
+		<link type="text/css" href="${lams}css/jquery-ui-smoothness-theme.css" rel="stylesheet">
+		<link type="text/css" href="${lams}css/jquery-ui.timepicker.css" rel="stylesheet">
 		<link type="text/css" href="${lams}css/jquery.jRating.css" rel="stylesheet"/>
-		<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme-blue.css"/>
-		<link rel="stylesheet" href="${lams}css/jquery.tablesorter.pager.css"/>
-
+		<link rel="stylesheet" type="text/css" href="${lams}css/jquery.tablesorter.theme.bootstrap.css">
+		<link rel="stylesheet" type="text/css" href="${lams}css/jquery.tablesorter.pager.css">
+		 
+		<script type="text/javascript" src="${lams}includes/javascript/common.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-pager.js"></script>
 		<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-widgets.js"></script> 
-		
+		<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
 	
 		<script type="text/javascript">
 	
 			$(document).ready(function(){
-	    
-			$(".tablesorter").tablesorter({
-				theme: 'blue',
-			    sortInitialOrder: 'desc',
-	            sortList: [[0]],
-	            widgets: [ "resizable", "filter" ],
-	            headers: { 1: { filter: false, sorter: false} }, 
-	            widgetOptions: {
-	            	resizable: true,
-	            	// include column filters 
-	                filter_columnFilters: true, 
-	                filter_placeholder: { search : '<fmt:message key="label.search"/>' }, 
-	                filter_searchDelay: 700 
-	            }
-			});
+				$(".tablesorter").tablesorter({
+					theme: 'blue',
+				    sortInitialOrder: 'desc',
+		            sortList: [[0]],
+		            widgets: [ "resizable", "filter" ],
+		            headers: { 1: { filter: false, sorter: false} }, 
+		            widgetOptions: {
+		            	resizable: true,
+		            	// include column filters 
+		                filter_columnFilters: true, 
+		                filter_placeholder: { search : '<fmt:message key="label.search"/>' }, 
+		                filter_searchDelay: 700 
+		            }
+				});
+			
+				$(".tablesorter").each(function() {
+					$(this).tablesorterPager({
+						savePages: false,
+						ajaxUrl : "<lams:WebAppURL/>monitoring.do?dispatch=getReflectionsJSON&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 = [],
+					            json = {};
+					    		
+								for (i = 0; i < data.rows.length; i++){
+									var userData = data.rows[i];
 		
-		$(".tablesorter").each(function() {
-			$(this).tablesorterPager({
-				savePages: false,
-				ajaxUrl : "<lams:WebAppURL/>monitoring.do?dispatch=getReflectionsJSON&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 = [],
-			            json = {};
-			    		
-						for (i = 0; i < data.rows.length; i++){
-							var userData = data.rows[i];
-
-							rows += '<tr>';
-							rows += '<td>';
-							rows += userData["username"];
-							rows += '</td>';
-
-							rows += '<td>';
-							if ( userData["notebook"] ) {
-								rows += userData["notebook"];
-							} else {
-								rows += '-';
-							}
-							rows += '</td>';
-
-							rows += '</tr>';
-						}
-			            
-						json.total = data.total_rows;
-						json.rows = $(rows);
-						return json;
-			            
-			    	}
-				},					
-			    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
-			})
-		});
-  	})
-</script>	
+									rows += '<tr>';
+									rows += '<td>';
+									rows += userData["username"];
+									rows += '</td>';
+		
+									rows += '<td>';
+									if ( userData["notebook"] ) {
+										rows += userData["notebook"];
+									} else {
+										rows += '-';
+									}
+									rows += '</td>';
+		
+									rows += '</tr>';
+								}
+					            
+								json.total = data.total_rows;
+								json.rows = $(rows);
+								return json;
+					            
+					    	}
+						},					
+					    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
+					})
+				});
+		  	});
+		</script>	
 	</lams:head>
 <body class="stripes">
 
-	<div id="content">
-	
-		<h1><fmt:message key="label.notebook.entries" /></h1>
+	<c:set var="title"><fmt:message key="label.notebook.entries" /></c:set>
+	<lams:Page title="${title}" type="learner">
+		<lams:TSTable numColumns="2" dataId="data-session-id='${param.toolSessionID}'">
+			<th><fmt:message key="label.user"/></th>
+			<th><fmt:message key="label.reflection" /></th>
+		</lams:TSTable>
+		<div id="footer"></div>
+	</lams:Page>
 
-		<div class="tablesorter-holder">
-		<table class="tablesorter" data-session-id="${param.toolSessionID}">
-			<thead>
-				<tr>
-					<th><fmt:message key="label.user"/></th>
-					<th><fmt:message key="label.reflection" /></th>
-				</tr>
-			</thead>
-			<tbody>
-			</tbody>
-		</table>
-		
-		<!-- 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>
-				
-	</div>
-	<div id="footer"></div>
 </body>
-</lams:html>
+</lams:html>
\ No newline at end of file
Index: lams_tool_laqa/web/monitoring/Stats.jsp
===================================================================
diff -u -r1ee1717d34cafe922d727dd9cd95b796db90eea4 -r84f6a2003265dbadd4de5a08ebf0e158af1e331f
--- lams_tool_laqa/web/monitoring/Stats.jsp	(.../Stats.jsp)	(revision 1ee1717d34cafe922d727dd9cd95b796db90eea4)
+++ lams_tool_laqa/web/monitoring/Stats.jsp	(.../Stats.jsp)	(revision 84f6a2003265dbadd4de5a08ebf0e158af1e331f)
@@ -1,21 +1,22 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<table class="alternative-color">
-	<tr> 
-		<td class="field-name">
-			<b> <fmt:message key="count.total.user" /> </b>
+<table class="table table-condensed table-no-border">
+	<tr>
+		<td class="field-name" width="30%">
+			<fmt:message key="count.total.user" />
 		</td>
-		<td align="right">
-			<c:out value="${qaStatsDTO.countAllUsers}"/>
-		</td> 
+		<td>
+			<c:out value="${qaStatsDTO.countAllUsers}" />
+		</td>
+		
 	</tr>
-						
-	<tr> 
-		<td class="field-name">
-			<b>  <fmt:message key="count.finished.session" /> </b>
+	<tr>
+		<td class="field-name" width="30%">
+			<fmt:message key="count.finished.session" />
 		</td>
-		<td align="right">
-			<c:out value="${qaStatsDTO.countSessionComplete}"/>
-		</td> 
+		
+		<td>
+			<c:out value="${qaStatsDTO.countSessionComplete}" />
+		</td>
 	</tr>
-</table>
+</table>
\ No newline at end of file
Index: lams_tool_laqa/web/monitoring/SummaryContent.jsp
===================================================================
diff -u -r154d89ad4f8062f0f04705c56c8d232e7d855c7a -r84f6a2003265dbadd4de5a08ebf0e158af1e331f
--- lams_tool_laqa/web/monitoring/SummaryContent.jsp	(.../SummaryContent.jsp)	(revision 154d89ad4f8062f0f04705c56c8d232e7d855c7a)
+++ lams_tool_laqa/web/monitoring/SummaryContent.jsp	(.../SummaryContent.jsp)	(revision 84f6a2003265dbadd4de5a08ebf0e158af1e331f)
@@ -1,97 +1,87 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<h1><c:out value="${content.title}" escapeXml="true"/></h1>
-
-<div class="instructions space-top">
-	<c:out value="${content.instructions}" escapeXml="false"/>
+<div class="panel">
+	<h4>
+	    <c:out value="${content.title}" escapeXml="true"/>
+	</h4>
+	<div class="instructions voffset5">
+	    <c:out value="${content.instructions}" escapeXml="false"/>
+	</div>
+	
+	<c:if test="${empty listAllGroupsDTO}">
+		<lams:Alert type="info" close="false">
+			<fmt:message key="error.noLearnerActivity" />
+		</lams:Alert>
+	</c:if>
+	
+	<c:if test="${content.useSelectLeaderToolOuput && not empty listAllGroupsDTO}">
+		<lams:Alert type="info" id="no-session-summary" close="false">
+			<fmt:message key="label.info.use.select.leader.outputs" />
+		</lams:Alert>
+	</c:if>
 </div>
 
-<c:if test="${empty listAllGroupsDTO}">
-	<div align="center">
-		<b> <fmt:message key="error.noLearnerActivity"/> </b>
-	</div>
-</c:if>
 
-<c:if test="${content.useSelectLeaderToolOuput && not empty listAllGroupsDTO}">
-	<div class="info">
-		<fmt:message key="label.info.use.select.leader.outputs" />
-	</div>
-</c:if>
 
-<c:forEach var="groupDto" items="${listAllGroupsDTO}">
-			  	 		
-	<c:if test="${isGroupedActivity}">
-		<h1 class="group-name-title">
-			<fmt:message key="group.label" />: <c:out value="${groupDto.sessionName}"/>
-		</h1>
-	</c:if>
 
+<c:forEach var="groupDto" items="${listAllGroupsDTO}" varStatus="status">
+			  
+	<c:if test="${isGroupedActivity}">	
+	    <div class="panel panel-default" >
+        <div class="panel-heading" id="heading${sessionDto.sessionID}">
+        	<span class="panel-title collapsable-icon-left">
+        	<a class="${status.first ? '' : 'collapsed'}" role="button" data-toggle="collapse" href="#collapse${groupDto.sessionId}" 
+					aria-expanded="${status.first ? 'false' : 'true'}" aria-controls="collapse${groupDto.sessionId}" >
+			<fmt:message key="group.label" />:	<c:out value="${groupDto.sessionName}" /></a>
+			</span>
+        </div>
+        
+        <div id="collapse${groupDto.sessionId}" class="panel-collapse collapse ${status.first ? 'in' : ''}" role="tabpanel"
+        	 aria-labelledby="heading${groupDto.sessionId}">
+	</c:if>	 
+	
 	<c:if test="${content.reflect}"> 			
-		<p class="float-right">
-		<c:set var="viewReflectionsURL"><lams:WebAppURL/>/monitoring/Reflections.jsp?toolSessionID=${groupDto.sessionId}</c:set>
-		<html:link href="javascript:launchPopup('${viewReflectionsURL}')" styleClass="button">
-			<fmt:message key="label.notebook.entries" />
-		</html:link>
-		</p>
+		<div style="margin-bottom: 20px">
+			<c:set var="viewReflectionsURL"><lams:WebAppURL/>/monitoring/Reflections.jsp?toolSessionID=${groupDto.sessionId}</c:set>
+			<html:button property="viewAllMarks" onclick="javascript:launchPopup('${viewReflectionsURL}')"
+						 styleClass="btn btn-default loffset5 voffset10" >
+				<fmt:message key="label.notebook.entries" />
+			</html:button>
+		</div>
 	</c:if>
-			  	
+				  	
 	<c:forEach var="question" items="${questionDTOs}">
-		
-		<div class="tablesorter-container">
-		<div class="question-title">
-			<c:out value="${question.question}" escapeXml="false"/>
-		</div>	
-		
-		<table class="tablesorter" data-question-uid="${question.uid}" data-session-id="${groupDto.sessionId}">
-		
-			<thead>
-				<tr>
-					<th title="<fmt:message key='label.sort.by.answer'/>" >
-						<fmt:message key="label.learning.answer" />
-					</th>
-					
-					<c:if test="${content.allowRateAnswers}">
-						<th title="<fmt:message key='label.sort.by.rating'/>" width="130px">
-							<fmt:message key="label.learning.rating" />
-						</th>
-					</c:if>
-					
-					<c:if test="${isCommentsEnabled}">
-						<th>
-							<fmt:message key="label.comment" />
-						</th>
-					</c:if>
-				</tr>
-			</thead>
-			
-			<tbody>
-			</tbody>
-		</table>
-		
-		<!-- 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 class="panel panel-default"">
+			<div class="panel-heading">
+				<c:out value="${question.question}" escapeXml="false"/>
+			</div>
+			<div class="loffset5">
+				<lams:TSTable numColumns="${content.allowRateAnswers ? (isCommentsEnabled ? 3 : 2) : (isCommentsEnabled ? 2 : 1)}"
+							  dataId="data-session-id='${groupDto.sessionId}' data-question-uid='${question.uid}'">
+						<th title="<fmt:message key='label.sort.by.answer'/>"><fmt:message key="label.learning.answer"/></th>
+						<c:if test="${content.allowRateAnswers}">
+							<th title="<fmt:message key='label.sort.by.rating'/>" width="130px">
+								<fmt:message key="label.learning.rating" />
+							</th>
+						</c:if>
+						<c:if test="${isCommentsEnabled}">
+							<th>
+								<fmt:message key="label.comment" />
+							</th>
+						</c:if>
+				</lams:TSTable>
+			</div>
 		</div>
-		</div>
-		
 	</c:forEach>
 	
+	<c:if test="${isGroupedActivity}">
+		</div> <!-- end collapse area  -->
+		</div> <!-- end collapse panel  -->
+	</c:if>
+	${ !isGroupedActivity || ! status.last ? '<div class="voffset5">&nbsp;</div>' :  ''}
+		
 </c:forEach>
 		
 <%@include file="AdvanceOptions.jsp"%>
 
-<%@include file="dateRestriction.jsp"%>
+<%@include file="dateRestriction.jsp"%>
\ No newline at end of file
Index: lams_tool_laqa/web/monitoring/dateRestriction.jsp
===================================================================
diff -u -r2292ee3006fe9629cf292f4c2480e4afa7cd2db6 -r84f6a2003265dbadd4de5a08ebf0e158af1e331f
--- lams_tool_laqa/web/monitoring/dateRestriction.jsp	(.../dateRestriction.jsp)	(revision 2292ee3006fe9629cf292f4c2480e4afa7cd2db6)
+++ lams_tool_laqa/web/monitoring/dateRestriction.jsp	(.../dateRestriction.jsp)	(revision 84f6a2003265dbadd4de5a08ebf0e158af1e331f)
@@ -39,54 +39,40 @@
 
 </script>
 
-<h1>
-	<img src="<lams:LAMSURL/>/images/tree_closed.gif" id="restrictUsageTreeIcon" onclick="javascript:toggleAdvancedOptionsVisibility(document.getElementById('restrictUsageDiv'), document.getElementById('restrictUsageTreeIcon'), '<lams:LAMSURL/>');" />
+<c:set var="ddTitle"><fmt:message key="monitor.summary.date.restriction" /></c:set>
+<lams:RestrictedUsageAccordian title="${ddTitle}">
 
-	<a href="javascript:toggleAdvancedOptionsVisibility(document.getElementById('restrictUsageDiv'), document.getElementById('restrictUsageTreeIcon'),'<lams:LAMSURL/>');" >
-		<fmt:message key="monitor.summary.date.restriction" />
-	</a>
-</h1>
-<br />
-
-<div class="monitoring-advanced" id="restrictUsageDiv" style="display:none; ">
-
-	<div>
-		<fmt:message key="monitor.summary.when.date.restriction.is.set" />
-	</div>
+	<p><fmt:message key="monitor.summary.when.date.restriction.is.set" /></p>
 		
 	<div id="datetimeDiv" <c:if test='${not empty submissionDeadline}'> style="display: none;" </c:if>>
-		<span>
-			<fmt:message key="monitor.summary.after.date" />
-		</span>
-		
-		<input type="text" name="datetime" id="datetime" value=""/>
-				
-		<html:link	href="javascript:storeShowOtherAnswersAfterDeadline(); setSubmissionDeadline();" styleClass="button">
+		<div class="form-group">
+		<label for="datetime"><fmt:message key="monitor.summary.after.date" />&nbsp;
+		<input type="text" name="datetime" id="datetime" value="" class="form-control form-control-inline"/>
+		</label>							
+		<html:link	href="javascript:storeShowOtherAnswersAfterDeadline(); setSubmissionDeadline();" styleClass="btn btn-default">
 			<fmt:message key="monitor.summary.set.restriction" />
 		</html:link>
+		</div>
 	</div>
 
 	<div id="dateInfoDiv" <c:if test='${empty submissionDeadline}'> style="display: none;" </c:if>>
-		<span>
-			<fmt:message key="monitor.summary.after.date" />
-		</span>
-		
+		<label><fmt:message key="monitor.summary.after.date" /></span>
 		<span id="dateInfo">
 		</span>
-				
-		<html:link	href="javascript:$('#show-other-answers-after-deadline').prop('checked', false); removeSubmissionDeadline();" styleClass="button">
+		</label>
+		<html:link	href="javascript:$('#show-other-answers-after-deadline').prop('checked', false); removeSubmissionDeadline();" styleClass="btn btn-default">
 			<fmt:message key="monitor.summary.unset.restriction" />
 		</html:link>
 	</div>
 	
-	<div class="small-space-top">
-		<input type="checkbox" name="showOtherAnswersAfterDeadline" value="1" id="show-other-answers-after-deadline" class="noBorder"
-			<c:if test="${empty submissionDeadline}">disabled="disabled"</c:if>
-			<c:if test="${content.showOtherAnswersAfterDeadline}">checked="checked"</c:if>
-		/>
+	<div class="checkbox">
 		<label for="show-other-answers-after-deadline">
+			<input type="checkbox" name="showOtherAnswersAfterDeadline" id="show-other-answers-after-deadline" value="1" 
+				<c:if test="${empty submissionDeadline}">disabled="disabled"</c:if>
+				<c:if test="${content.showOtherAnswersAfterDeadline}">checked="checked"</c:if>
+			></input>
 			<fmt:message key="label.allow.review.other.responses" />
 		</label>
 	</div>
-
-</div>
+	
+</lams:RestrictedUsageAccordian>
\ No newline at end of file