Index: lams_central/src/java/org/lamsfoundation/lams/web/tag/HelpTag.java
===================================================================
diff -u -r7ef5e822f74a830aa1bdddbdf05f67c84b27d3d8 -rbe37ea9b52fd18c106254805e3cc45a6581bdd87
--- lams_central/src/java/org/lamsfoundation/lams/web/tag/HelpTag.java	(.../HelpTag.java)	(revision 7ef5e822f74a830aa1bdddbdf05f67c84b27d3d8)
+++ lams_central/src/java/org/lamsfoundation/lams/web/tag/HelpTag.java	(.../HelpTag.java)	(revision be37ea9b52fd18c106254805e3cc45a6581bdd87)
@@ -37,9 +37,9 @@
 import org.lamsfoundation.lams.authoring.web.AuthoringConstants;
 import org.lamsfoundation.lams.tool.IToolVO;
 import org.lamsfoundation.lams.tool.service.ILamsToolService;
-import org.lamsfoundation.lams.util.Configuration;
-import org.lamsfoundation.lams.util.ConfigurationKeys;
+import org.lamsfoundation.lams.util.CentralConstants;
 import org.lamsfoundation.lams.util.HelpUtil;
+import org.lamsfoundation.lams.util.MessageService;
 import org.lamsfoundation.lams.web.filter.LocaleFilter;
 import org.springframework.web.context.WebApplicationContext;
 import org.springframework.web.context.support.WebApplicationContextUtils;
@@ -70,24 +70,27 @@
     public int doStartTag() throws JspException {
 	try {
 
-	    int imgHeight = 25;
-	    boolean div = true;
+	    boolean div = false;
+	    String helpWord = "";
 
 	    JspWriter writer = pageContext.getOut();
 	    if (StringUtils.equals(style, "no-tabs")) {
 		writer.println("<div class='help-no-tabs'>");
-	    } else if (StringUtils.equals(style, "small")) {
-		imgHeight = 18;
-		div = false;
-	    } else {
-		writer.println("<div class='help-tabs'>");
+		div = true;
 	    }
+	    
+	    if (! StringUtils.equals(style, "small")) {
+		MessageService msgService = (MessageService) getContext().getBean(
+			    CentralConstants.CENTRAL_MESSAGE_SERVICE_BEAN_NAME);
+		helpWord = msgService.getMessage("label.help");
+	    } 
+	    
 	    try {
 
 		HttpSession session = ((HttpServletRequest) this.pageContext.getRequest()).getSession();
 		Locale locale = (Locale) session.getAttribute(LocaleFilter.PREFERRED_LOCALE_KEY);
 		String languageCode = locale != null ? locale.getLanguage() : "";
-
+		
 		if ((toolSignature != null) && (module != null)) {
 
 		    // retrieve help URL for tool
@@ -101,15 +104,17 @@
 			return Tag.SKIP_BODY;
 		    }
 
-		    writer.println("<i class=\"fa fa-question-circle\" "
-			+" onclick=\"window.open('" + fullURL + "', 'help')\" id=\"help-tag\"></i>");
+		    writer.println("<span onclick=\"window.open('" + fullURL +"', 'help')\" id=\"help-tag\">"
+		    	+ "<i class=\"fa fa-question-circle\" ></i> " + helpWord
+		    	+ "</span>");
 
 		} else if (page != null) {
 
 		    String fullURL = HelpUtil.constructPageURL(page, languageCode);
 
-		    writer.println("<i class=\"fa fa-question-circle\" "
-			+" onclick=\"window.open('" + fullURL + "', 'help')\" id=\"help-tag\"></i>");
+		    writer.println("<span onclick=\"window.open('" + fullURL +"', 'help')\" id=\"help-tag\">"
+			    	+ "<i class=\"fa fa-question-circle\" ></i> " + helpWord
+			    	+ "</span>");
 
 		} else {
 		    HelpTag.log.error("HelpTag unable to write out due to unspecified values.");
@@ -161,7 +166,7 @@
 		.getServletContext());
 	return ctx;
     }
-
+    
     /**
      * @return
      * 
Index: lams_central/web/css/defaultHTML_learner.css
===================================================================
diff -u -r7ef5e822f74a830aa1bdddbdf05f67c84b27d3d8 -rbe37ea9b52fd18c106254805e3cc45a6581bdd87
--- lams_central/web/css/defaultHTML_learner.css	(.../defaultHTML_learner.css)	(revision 7ef5e822f74a830aa1bdddbdf05f67c84b27d3d8)
+++ lams_central/web/css/defaultHTML_learner.css	(.../defaultHTML_learner.css)	(revision be37ea9b52fd18c106254805e3cc45a6581bdd87)
@@ -93,6 +93,10 @@
   border-radius: 0px;
   box-shadow: 0 1px 1px rgba(8, 8, 8, 0.88);
 }
+.panel-monitor-page {
+  border-radius: 0px;
+  box-shadow: 0 1px 1px rgba(8, 8, 8, 0.88);
+}
 .panel-learner-page-title,
 .panel-admin-page-title {
   -moz-border-bottom-colors: none;
@@ -185,4 +189,62 @@
 td.arrows{
 	width:35px;
 	text-align: center;
-}
\ No newline at end of file
+}
+/* Tabs are a cross between pills (colouring) and tab outlines. */
+.nav-tabs > li.active > a{
+	color:#fff !important;
+	background-color:#337ab7 !important;
+}
+.nav-tabs > li > a{
+  border:1px solid #ddd
+}
+/* Icons to show panel is collapsed */
+.collapsable-icon-right a:after {
+    font-family: FontAwesome;
+    content:"\f078";
+    float: right;
+    color: grey;
+	margin-right: 5px;
+}
+.collapsable-icon-right a.collapsed:after {
+    content:"\f054";
+}
+.collapsable-icon-left a:after {
+    font-family: FontAwesome;
+    content:"\f078";
+    float: left;
+    color: grey;
+	margin-right: 5px;
+}
+.collapsable-icon-left a.collapsed:after {
+    content:"\f054";
+}
+
+div.navbar-heading {
+	padding:0;
+}
+
+nav.navbar-heading {
+	border: 0; 
+	margin: 0;
+	color: inherit;
+}
+
+.navbar-heading .divider {
+	height: 50px;
+	margin-left: 5px;
+	margin-right: 5px;
+	border-left: 1px solid #dddddd;
+}
+
+.navbar-heading .in .divider {
+	height: 1px;
+	margin-left: 5px;
+	margin-right: 5px;
+	margin-bottom: 5px;
+	border-top: 1px solid #dddddd;
+}
+
+.navbar-heading .in .navbar-text {
+	padding-left: 15px;
+}
Index: lams_tool_daco/web/WEB-INF/tags/AdvancedAccordian.tag
===================================================================
diff -u
--- lams_tool_daco/web/WEB-INF/tags/AdvancedAccordian.tag	(revision 0)
+++ lams_tool_daco/web/WEB-INF/tags/AdvancedAccordian.tag	(revision be37ea9b52fd18c106254805e3cc45a6581bdd87)
@@ -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">
+        	<h4 class="panel-title">
+	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseAdvanced" aria-expanded="false" aria-controls="collapseAdvanced" >
+          	${title}
+        	</a>
+      		</h4>
+        </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_daco/web/WEB-INF/tags/HybridTab.tag
===================================================================
diff -u
--- lams_tool_daco/web/WEB-INF/tags/HybridTab.tag	(revision 0)
+++ lams_tool_daco/web/WEB-INF/tags/HybridTab.tag	(revision be37ea9b52fd18c106254805e3cc45a6581bdd87)
@@ -0,0 +1,89 @@
+<%
+	 /****************************************************************
+	 * 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
+	 * ****************************************************************
+	 */
+
+	/**
+	 * Tab.tag
+	 *	Author: Fiona Malikoff
+	 *	Description: Creates a tab element within the Hybrid Tab Header.
+	 * Wiki: 
+	 */
+%>
+<%@ tag body-content="empty"%>
+<%@ attribute name="id" required="true" rtexprvalue="true"%>
+<%@ attribute name="value" required="false" rtexprvalue="true"%>
+<%@ attribute name="key" required="false" rtexprvalue="true"%>
+<%@ attribute name="inactive" required="false" rtexprvalue="true"%>
+<%@ attribute name="methodCall" required="false" rtexprvalue="true"%>
+
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+
+<%-- Check if  bundle is set --%>
+<c:if test="${not empty bundle}">
+	<fmt:setBundle basename="${bundle}"/>
+</c:if>
+
+<c:set var="lams">
+	<lams:LAMSURL />
+</c:set>
+
+<c:set var="tabTitle" value="${value}" />
+
+<%--
+	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}">
+	<c:choose>
+		<c:when test="${dControl}">
+			<c:set var="methodCall" value="doSelectTab" />
+		</c:when>
+		<c:otherwise>
+			<c:set var="methodCall" value="selectTab" />
+		</c:otherwise>
+	</c:choose>
+</c:if>
+
+<c:if test="${key != null && value == null}">
+	<c:set var="tabTitle">
+		<fmt:message key="${key}" />
+	</c:set>
+</c:if>
+
+<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_daco/web/WEB-INF/tags/HybridTabAction.tag
===================================================================
diff -u
--- lams_tool_daco/web/WEB-INF/tags/HybridTabAction.tag	(revision 0)
+++ lams_tool_daco/web/WEB-INF/tags/HybridTabAction.tag	(revision be37ea9b52fd18c106254805e3cc45a6581bdd87)
@@ -0,0 +1,89 @@
+<%
+	 /****************************************************************
+	 * 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
+	 * ****************************************************************
+	 */
+
+	/**
+	 * Tab.tag
+	 *	Author: Fiona Malikoff
+	 *	Description: Creates a tab element within the Hybrid Tab Header.
+	 * Wiki: 
+	 */
+%>
+<%@ tag body-content="empty"%>
+<%@ attribute name="id" required="true" rtexprvalue="true"%>
+<%@ attribute name="value" required="false" rtexprvalue="true"%>
+<%@ attribute name="key" required="false" rtexprvalue="true"%>
+<%@ attribute name="inactive" required="false" rtexprvalue="true"%>
+<%-- <%@ attribute name="methodCall" required="false" rtexprvalue="true"%>
+ --%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+
+<%-- Check if  bundle is set --%>
+<c:if test="${not empty bundle}">
+	<fmt:setBundle basename="${bundle}"/>
+</c:if>
+
+<c:set var="lams">
+	<lams:LAMSURL />
+</c:set>
+
+<c:set var="tabTitle" value="${value}" />
+
+<%--
+	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}">
+	<c:choose>
+		<c:when test="${dControl}">
+			<c:set var="methodCall" value="doSelectTab" />
+		</c:when>
+		<c:otherwise>
+			<c:set var="methodCall" value="selectTab" />
+		</c:otherwise>
+	</c:choose>
+</c:if>
+ --%>
+<c:if test="${key != null && value == null}">
+	<c:set var="tabTitle">
+		<fmt:message key="${key}" />
+	</c:set>
+</c:if>
+
+<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" data-toggle="tab">${tabTitle}</a></li>
Index: lams_tool_daco/web/WEB-INF/tags/HybridTabBody.tag
===================================================================
diff -u
--- lams_tool_daco/web/WEB-INF/tags/HybridTabBody.tag	(revision 0)
+++ lams_tool_daco/web/WEB-INF/tags/HybridTabBody.tag	(revision be37ea9b52fd18c106254805e3cc45a6581bdd87)
@@ -0,0 +1,40 @@
+<%/****************************************************************
+ * 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
+ * ****************************************************************
+ */
+
+/**
+ * HybridTabBody.tag
+ *	Author: Fiona Malikoff
+ *	Description: Creates the body container for a tab element
+ * Wiki: 
+ */
+
+%>
+<%@ tag body-content="scriptless"%>
+<%@ 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 HybridTabHeader -->
\ No newline at end of file
Index: lams_tool_daco/web/WEB-INF/tags/HybridTabHeader.tag
===================================================================
diff -u
--- lams_tool_daco/web/WEB-INF/tags/HybridTabHeader.tag	(revision 0)
+++ lams_tool_daco/web/WEB-INF/tags/HybridTabHeader.tag	(revision be37ea9b52fd18c106254805e3cc45a6581bdd87)
@@ -0,0 +1,89 @@
+<%/****************************************************************
+ * 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
+ * ****************************************************************
+ */
+
+/**
+ * HybridTabHeader.tag
+ *	Author: Fiona Malikoff
+ *	Description: Create a hybrid panel header that contains a nav bar that acts like tabs.
+ */
+
+		%>
+<%@ tag body-content="scriptless"%>
+<%@ attribute name="control" 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"%>
+
+<%@ 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}">
+	<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>
+
+<!-- navbar combined with tabs -->
+<div class="panel panel-default panel-monitor-page">
+<div class="panel-heading navbar-heading">
+
+ 	<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>
+         </ul>
+         </c:if>
+ 	    
+ 		</div>
+	 </div>
+     </nav>
+     <!-- /top nav -->
+</div>
+<!-- panel div closed by HybridTabBody -->
\ No newline at end of file
Index: lams_tool_daco/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r303ad8a12ec300c1a2a56a9a7ebbf7629dc8c19f -rbe37ea9b52fd18c106254805e3cc45a6581bdd87
--- lams_tool_daco/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 303ad8a12ec300c1a2a56a9a7ebbf7629dc8c19f)
+++ lams_tool_daco/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision be37ea9b52fd18c106254805e3cc45a6581bdd87)
@@ -12,6 +12,12 @@
 <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">
 				<c:if test="${not empty title}">
 					<div class="panel-heading">
@@ -30,7 +36,14 @@
 					<jsp:doBody />
 				</div>
 			</div>
+		</c:otherwise>
+		</c:choose>
+			
 		</div>
 		<!-- End content container -->
 	</div>
 </div>
+
+
+		
+			
Index: lams_tool_daco/web/WEB-INF/tags/Tab.tag
===================================================================
diff -u -rfdaea6cb56bd4856ee1c9061927927c617d1b3fd -rbe37ea9b52fd18c106254805e3cc45a6581bdd87
--- lams_tool_daco/web/WEB-INF/tags/Tab.tag	(.../Tab.tag)	(revision fdaea6cb56bd4856ee1c9061927927c617d1b3fd)
+++ lams_tool_daco/web/WEB-INF/tags/Tab.tag	(.../Tab.tag)	(revision be37ea9b52fd18c106254805e3cc45a6581bdd87)
@@ -34,7 +34,7 @@
 <%@ attribute name="value" required="false" rtexprvalue="true"%>
 <%@ attribute name="key" required="false" rtexprvalue="true"%>
 <%@ attribute name="inactive" required="false" rtexprvalue="true"%>
-<%@ attribute name="methodCall" required="false" rtexprvalue="true"%>
+<%@ attribute name="methodCall" required="false" rtexprvalue="true"%> 
 
 <%@ taglib uri="tags-core" prefix="c"%>
 <%@ taglib uri="tags-fmt" prefix="fmt"%>
@@ -86,4 +86,4 @@
 	<c:set var="class">class="disabled"</c:set>
 </c:if>
 
-<li role="presentation" ${class}><a href="#t${id}" aria-controls="t${id}" role="tab" data-toggle="tab">${tabTitle}</a></li>
+<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_daco/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -redecb0e80071dd9703ae3ac2a153c48c9defc0c3 -rbe37ea9b52fd18c106254805e3cc45a6581bdd87
--- lams_tool_daco/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision edecb0e80071dd9703ae3ac2a153c48c9defc0c3)
+++ lams_tool_daco/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision be37ea9b52fd18c106254805e3cc45a6581bdd87)
@@ -52,4 +52,23 @@
 <!-- tab holder table -->
 <ul id="page-tabs" class="nav ${dFormat}" role="tablist">
 	<jsp:doBody />
-</ul>
\ No newline at end of file
+</ul>
+
+<%--
+	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}">
+	<c:choose>
+		<c:when test="${dControl}">
+			<c:set var="methodCall" value="doSelectTab" />
+		</c:when>
+		<c:otherwise>
+			<c:set var="methodCall" value="selectTab" />
+		</c:otherwise>
+	</c:choose>
+</c:if>
Index: lams_tool_daco/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rbd0aaad21ddeedcda73061dbc3a36ac694df2ae9 -rbe37ea9b52fd18c106254805e3cc45a6581bdd87
--- lams_tool_daco/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision bd0aaad21ddeedcda73061dbc3a36ac694df2ae9)
+++ lams_tool_daco/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision be37ea9b52fd18c106254805e3cc45a6581bdd87)
@@ -446,8 +446,24 @@
    	<tag-file>
 	    <name>TSTable</name>
 		<path>/WEB-INF/tags/TSTable.tag</path>
+   	</tag-file>
+   	<tag-file>
+       <name>HybridTab</name>
+       <path>/WEB-INF/tags/HybridTab.tag</path>
+   	</tag-file>
+   	<tag-file>
+       <name>HybridTabHeader</name>
+       <path>/WEB-INF/tags/HybridTabHeader.tag</path>
    	</tag-file>    
    	<tag-file>
+       <name>HybridTabBody</name>
+       <path>/WEB-INF/tags/HybridTabBody.tag</path>
+   	</tag-file>
+   	<tag-file>
+       <name>AdvancedAccordian</name>
+       <path>/WEB-INF/tags/AdvancedAccordian.tag</path>
+   	</tag-file>
+   	<tag-file>
 	    <name>ImgButtonWrapper</name>
 		<path>/WEB-INF/tags/ImgButtonWrapper.tag</path>
    	</tag-file>
Index: lams_tool_daco/web/common/jqueryheader.jsp
===================================================================
diff -u -r613f0d0d76eb497ed58d7e6836eda34a245425a9 -rbe37ea9b52fd18c106254805e3cc45a6581bdd87
--- lams_tool_daco/web/common/jqueryheader.jsp	(.../jqueryheader.jsp)	(revision 613f0d0d76eb497ed58d7e6836eda34a245425a9)
+++ lams_tool_daco/web/common/jqueryheader.jsp	(.../jqueryheader.jsp)	(revision be37ea9b52fd18c106254805e3cc45a6581bdd87)
@@ -5,18 +5,21 @@
 
  	<!-- ********************  CSS ********************** -->
 	<link href="<c:url value='/includes/css/daco.css'/>" rel="stylesheet" type="text/css">
-	<lams:css style="main"/>
-	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme-blue.css"> 
+<%-- 	<lams:css style="main"/>
+ --%>	<lams:css/>
+	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme.bootstrap.css">
 	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.pager.css"> 
 
  	<!-- ********************  javascript ********************** -->
 	<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.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.tabcontroller.js"></script>    
+	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>		
 	
 	<script type="text/javascript" src="<html:rewrite page='/includes/javascript/dacoCommon.js'/>"></script>
 	
\ No newline at end of file
Index: lams_tool_daco/web/common/tabbedheader.jsp
===================================================================
diff -u -rbd0aaad21ddeedcda73061dbc3a36ac694df2ae9 -rbe37ea9b52fd18c106254805e3cc45a6581bdd87
--- lams_tool_daco/web/common/tabbedheader.jsp	(.../tabbedheader.jsp)	(revision bd0aaad21ddeedcda73061dbc3a36ac694df2ae9)
+++ lams_tool_daco/web/common/tabbedheader.jsp	(.../tabbedheader.jsp)	(revision be37ea9b52fd18c106254805e3cc45a6581bdd87)
@@ -5,13 +5,16 @@
 
  	<!-- ********************  CSS ********************** -->
 	<link href="<c:url value='/includes/css/daco.css'/>" rel="stylesheet" type="text/css">
-	<lams:css style="main"/>
+	<lams:css />
+<%-- 	<lams:css style="main"/>
+ --%>
 
-
  	<!-- ********************  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/dacoCommon.js'/>"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.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>		
 
 	
Index: lams_tool_daco/web/includes/javascript/dacoMonitoring.js
===================================================================
diff -u -r102a93686f5779e8caf5a693f388edda2e01f05d -rbe37ea9b52fd18c106254805e3cc45a6581bdd87
--- lams_tool_daco/web/includes/javascript/dacoMonitoring.js	(.../dacoMonitoring.js)	(revision 102a93686f5779e8caf5a693f388edda2e01f05d)
+++ lams_tool_daco/web/includes/javascript/dacoMonitoring.js	(.../dacoMonitoring.js)	(revision be37ea9b52fd18c106254805e3cc45a6581bdd87)
@@ -20,4 +20,18 @@
 		var url = gStatisticsUrl+"&reqID="+(new Date()).getTime();
 		$("#statisticArea").load(url);
 	} 
-	
\ No newline at end of file
+	
+	function refreshPage() {
+		var tabID = getCurrentTabID();
+		if ( ! tabID ) {
+			tabID = currentTab;
+		}
+		var param = {"reqID":((new Date()).getTime())};
+		$( "#body" ).load( 
+				gRefreshUrl, 
+				param, 
+				function() {
+					doSelectTab(tabID);
+					currentTab = tabID;
+				});			
+	}
Index: lams_tool_daco/web/pages/authoring/authoring.jsp
===================================================================
diff -u -rbd0aaad21ddeedcda73061dbc3a36ac694df2ae9 -rbe37ea9b52fd18c106254805e3cc45a6581bdd87
--- lams_tool_daco/web/pages/authoring/authoring.jsp	(.../authoring.jsp)	(revision bd0aaad21ddeedcda73061dbc3a36ac694df2ae9)
+++ lams_tool_daco/web/pages/authoring/authoring.jsp	(.../authoring.jsp)	(revision be37ea9b52fd18c106254805e3cc45a6581bdd87)
@@ -36,60 +36,57 @@
  
 </lams:head>
 <body class="stripes" onLoad="init()">
-<div id="page">
-		<h1>
-			<fmt:message key="label.author.title" />
-		</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.advanced" />
-		</lams:Tabs></div>
-		<!-- start tabs -->
-<div id="content">
-		<!-- end tab buttons -->
-		
-		<%@ include file="/common/messages.jsp"%>
+<c:set var="title"><fmt:message key="label.author.title" /></c:set>
+<lams:Page type="learner" title="${title}">
 
-		<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="daco.contentId" />
-		<html:hidden property="sessionMapID" />
-		<html:hidden property="contentFolderID" />
-		<html:hidden property="currentTab" styleId="currentTab" />
-
 		<span class="pull-right voffset5">
 		<lams:help toolSignature="<%= DacoConstants.TOOL_SIGNATURE %>" module="authoring"/>
 		</span>
 		
+		<!-- start tabs -->
+		<lams:Tabs useKey="true" control="true">
+			<lams:Tab id="1" key="label.authoring.heading.basic" />
+			<lams:Tab id="2" key="label.authoring.heading.advanced" />
+		</lams:Tabs></div>
+		
 		<lams:TabBodys>
 			<!-- tab content 1 (Basic) -->
-			<lams:TabBody id="1" titleKey="label.authoring.heading.basic.description" page="basic.jsp" />
+			<lams:TabBody id="1" titleKey="label.authoring.heading.basic.description" /> <!--  page="basic.jsp" -->
 			<!-- end of content (Basic) -->
 
 			<!-- tab content 2 (Advanced) -->
-			<lams:TabBody id="2" titleKey="label.authoring.heading.advanced.description" page="advanced.jsp" />
+			<lams:TabBody id="2" titleKey="label.authoring.heading.advanced.description" page="advanced.jsp"  /> <!--  -->
 			<!-- end of content (Advanced) -->
 		</lams:TabBodys>
+		<!--  end tabs -->
 
+ 		<%@ include file="/common/messages.jsp"%>
+
+ 		<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="daco.contentId" />
+			<html:hidden property="sessionMapID" />
+			<html:hidden property="contentFolderID" />
+			<html:hidden property="currentTab" styleId="currentTab" />  
+
 			<!-- Button Row -->
 			<%--  Default value 
 				cancelButtonLabelKey="label.common.cancel"
 				saveButtonLabelKey="label.authoring.save.button"
 				cancelConfirmMsgKey="message.authoring.cancel.save"
 				accessMode="author"
 			--%>
-			<lams:AuthoringButton formID="authoringForm" clearSessionActionUrl="/clearsession.do" 
+ 			<lams:AuthoringButton formID="authoringForm" clearSessionActionUrl="/clearsession.do" 
 				toolSignature="<%=DacoConstants.TOOL_SIGNATURE%>" toolContentID="${formBean.daco.contentId}" 
 				 customiseSessionID="${formBean.sessionMapID}"
 				 contentFolderID="${formBean.contentFolderID}"
 				 cancelConfirmMsgKey="message.authoring.cancel.save" />
-	</html:form>
+	</html:form>  
 
-</div>
-
 <div id="footer"></div>
 <!-- end page div -->
-</div>
+</lams:Page>
 </body>
 </lams:html>
\ No newline at end of file
Index: lams_tool_daco/web/pages/learning/learning.jsp
===================================================================
diff -u -redecb0e80071dd9703ae3ac2a153c48c9defc0c3 -rbe37ea9b52fd18c106254805e3cc45a6581bdd87
--- lams_tool_daco/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision edecb0e80071dd9703ae3ac2a153c48c9defc0c3)
+++ lams_tool_daco/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision be37ea9b52fd18c106254805e3cc45a6581bdd87)
@@ -48,16 +48,16 @@
 <lams:Page type="learner" title="${daco.title}">
 
 <span class="pull-right voffset5">
-<lams:help toolSignature="<%= DacoConstants.TOOL_SIGNATURE %>" module="learning" />
+<lams:help toolSignature="<%= DacoConstants.TOOL_SIGNATURE %>" module="learning" style="small"/>
 
 <%-- To switch between the vertical/horizontal view --%>
 <c:choose>
 	<c:when test="${sessionMap.learningView=='horizontal'}">
-	<i class="fa fa-ellipsis-h" title="<fmt:message key="label.common.view.change" />"
+	<i class="fa fa-ellipsis-h loffset10" title="<fmt:message key="label.common.view.change" />"
 	 onclick="javascript:changeView('${sessionMapID}',${displayedRecordNumber})" id="ellipsis"></i>
 	</c:when>
 	<c:otherwise>
-	<i class="fa fa-ellipsis-v" title="<fmt:message key="label.common.view.change" />"
+	<i class="fa fa-ellipsis-v loffset10" title="<fmt:message key="label.common.view.change" />"
 	 onclick="javascript:changeView('${sessionMapID}',${displayedRecordNumber})" id="ellipsis"></i>
 	</c:otherwise>
 </c:choose>
Index: lams_tool_daco/web/pages/learning/listRecords.jsp
===================================================================
diff -u -r303ad8a12ec300c1a2a56a9a7ebbf7629dc8c19f -rbe37ea9b52fd18c106254805e3cc45a6581bdd87
--- lams_tool_daco/web/pages/learning/listRecords.jsp	(.../listRecords.jsp)	(revision 303ad8a12ec300c1a2a56a9a7ebbf7629dc8c19f)
+++ lams_tool_daco/web/pages/learning/listRecords.jsp	(.../listRecords.jsp)	(revision be37ea9b52fd18c106254805e3cc45a6581bdd87)
@@ -90,9 +90,9 @@
 						<fmt:message key="label.learning.heading.recordnumber" />&nbsp;${recordStatus.index+1}
 						<c:if test='${includeMode=="learning" and not finishedLock}'>
 						<%-- If the record can be edited, display these links. --%>
-							<i class="fa fa-pencil pull-right" title="<fmt:message key="label.common.edit" />"
+							<i class="fa fa-pencil pull-right roffset10" title="<fmt:message key="label.common.edit" />"
 										onclick="javascript:editRecord('${sessionMapID}',${recordStatus.index+1})"></i>
-							<i class="fa fa-times  pull-right" title="<fmt:message key="label.common.delete" />"
+							<i class="fa fa-times  pull-right roffset10" title="<fmt:message key="label.common.delete" />"
 										onclick="javascript:removeRecord('${sessionMapID}',${recordStatus.index+1})"></i>
 						</c:if>
 					</div>
Index: lams_tool_daco/web/pages/learning/listRecordsHorizontalPart.jsp
===================================================================
diff -u -r303ad8a12ec300c1a2a56a9a7ebbf7629dc8c19f -rbe37ea9b52fd18c106254805e3cc45a6581bdd87
--- lams_tool_daco/web/pages/learning/listRecordsHorizontalPart.jsp	(.../listRecordsHorizontalPart.jsp)	(revision 303ad8a12ec300c1a2a56a9a7ebbf7629dc8c19f)
+++ lams_tool_daco/web/pages/learning/listRecordsHorizontalPart.jsp	(.../listRecordsHorizontalPart.jsp)	(revision be37ea9b52fd18c106254805e3cc45a6581bdd87)
@@ -64,9 +64,9 @@
 					<c:if test='${includeMode=="learning" and not finishedLock}'>
 						<div >
 						<%-- If the record can be edited, display these links. --%>
-						<i class="fa fa-pencil pull-right" title="<fmt:message key="label.common.edit" />"
+						<i class="fa fa-pencil pull-right roffset10" title="<fmt:message key="label.common.edit" />"
 									onclick="javascript:editRecord('${sessionMapID}',${recordStatus.index+1})"></i>
-						<i class="fa fa-times  pull-right" title="<fmt:message key="label.common.delete" />"
+						<i class="fa fa-times  pull-right roffset10" title="<fmt:message key="label.common.delete" />"
 									onclick="javascript:removeRecord('${sessionMapID}',${recordStatus.index+1})"></i>
 						</div>
 					</c:if>
Index: lams_tool_daco/web/pages/monitoring/editactivity.jsp
===================================================================
diff -u -r5f04c097777c026e7c64234c5f2f7ca65c6be8c6 -rbe37ea9b52fd18c106254805e3cc45a6581bdd87
--- lams_tool_daco/web/pages/monitoring/editactivity.jsp	(.../editactivity.jsp)	(revision 5f04c097777c026e7c64234c5f2f7ca65c6be8c6)
+++ lams_tool_daco/web/pages/monitoring/editactivity.jsp	(.../editactivity.jsp)	(revision be37ea9b52fd18c106254805e3cc45a6581bdd87)
@@ -2,13 +2,15 @@
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
 <c:set var="daco" value="${sessionMap.daco}"/>
 
+<div class="voffset10">
+
 <c:if test="${!sessionMap.isPageEditable}">
-	<p class="warning">
+	<lams:Alert type="warn" id="no-edit" close="false">
 		<fmt:message key="message.learning.alertContentEdit" />
-	</p>
+	</lams:Alert>
 </c:if>
 
-<table cellpadding="0">
+<table class="table table-condensed">
 	<tr>
 		<td width="10%" nowrap>
 			<fmt:message key="label.authoring.basic.title" />
@@ -42,3 +44,5 @@
 		</tr>
 	</c:if>
 </table>
+
+</div>
\ No newline at end of file
Index: lams_tool_daco/web/pages/monitoring/monitoring.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -rbe37ea9b52fd18c106254805e3cc45a6581bdd87
--- lams_tool_daco/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_daco/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision be37ea9b52fd18c106254805e3cc45a6581bdd87)
@@ -4,40 +4,85 @@
 <%@ include file="/common/taglibs.jsp"%>
 <%@ page import="org.lamsfoundation.lams.tool.daco.DacoConstants"%>
 
+<c:url var="refreshSummaryUrl" value="/monitoring/summary.do?sessionMapID=${sessionMapID}"/>
+<c:url var="statisticsUrl" value="/monitoring/statistic.do?sessionMapID=${sessionMapID}"/>
+
 <lams:html>
 	<lams:head>
 		<%@ include file="/common/jqueryheader.jsp" %>
 		
 		<script>
 			var currentTab = "${monitoringCurrentTab}";
+			var gStatisticsUrl = "${statisticsUrl}"; // used by the tab functions
+			var gRefreshUrl = "${refreshSummaryUrl}"; // used by the tab functions
 		</script>
 		<script type="text/javascript" src="<html:rewrite page='/includes/javascript/dacoMonitoring.js'/>"></script> 
 		
 		<title><fmt:message key="title.monitoring" /></title>
-		
+
 	</lams:head>
 	<body id="body" class="stripes" onLoad="init()">
-	<div id="page">
-		<h1>
-			<fmt:message key="label.common.heading" />
-		</h1>
-	<div id="header">
-		<lams:Tabs control="true">
-			<lams:Tab id="1" key="label.common.summary" />
-			<lams:Tab id="2" key="tab.monitoring.edit.activity" />			
-			<lams:Tab id="3" key="tab.monitoring.statistics" />
-		</lams:Tabs>
-	</div>
-	<div id="content">
-			<lams:help toolSignature="<%= DacoConstants.TOOL_SIGNATURE %>" module="monitoring"/>
+	<c:set var="title"><fmt:message key="label.common.heading" /></c:set>
+ 	<lams:Page type="navbar" title="${title}"> 
+
+		<lams:HybridTabHeader control="true" title="${title}" helpToolSignature="<%= DacoConstants.TOOL_SIGNATURE %>" helpModule="monitoring" refreshOnClickAction="javascript:refreshPage()">
+			<lams:HybridTab id="1" key="label.common.summary"/>
+			<lams:HybridTab id="2" key="tab.monitoring.edit.activity"/>
+			<lams:HybridTab id="3" key="tab.monitoring.statistics"/>
+		</lams:HybridTabHeader>	
+
+<%-- 			<div class="panel panel-default panel-monitor-page">
+			<div class="panel-heading navbar-heading">
 			
-			<lams:TabBody id="1" titleKey="label.common.summary" page="summary.jsp" />
-			<lams:TabBody id="2" titleKey="tab.monitoring.edit.activity" page="editactivity.jsp" />			
-			<lams:TabBody id="3" titleKey="tab.monitoring.statistics" page="statistics.jsp" />
-	</div>
+ 			 	<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>
+						 <li class="active"><a href="#t1"  data-toggle="tab"><i class="fa fa-th-list"></i> <fmt:message key="label.common.summary" /></a></li>
+			             <li><a href="#t2"  data-toggle="tab"><i class="fa fa-pencil"></i> <fmt:message key="tab.monitoring.edit.activity" /></a></li>
+			             <li><a href="#t3"  data-toggle="tab"><i class="fa fa-area-chart"></i> <fmt:message key="tab.monitoring.statistics" /></a></li>
+			         </ul>
+			         <ul class="nav navbar-nav navbar-right" id="page-controls">
+	 			         <li role="separator" class="divider"></li>
+			             <li class="navbar-text" ><span onclick="javascript:refreshPage()"><i class="fa fa-refresh"></i> 	<fmt:message key="label.common.summary.refresh" /></span></li>
+ 			             <li class="navbar-text" ><lams:help toolSignature="<%= DacoConstants.TOOL_SIGNATURE %>" module="monitoring" /></li>
+			         </ul>
+			 	    </div>
+				 </div>
+			     </nav>
+			     <!-- /top nav -->
+			</div>
+			
+ --%>
+ 
+  		<lams:HybridTabBody>
+			<lams:TabBodys>			
+					<lams:TabBody id="1" titleKey="label.common.summary" page="summary.jsp"/>
+					<lams:TabBody id="2" titleKey="tab.monitoring.edit.activity" page="editactivity.jsp"/>	
+					<lams:TabBody id="3" titleKey="tab.monitoring.statistics" page="statistics.jsp"/>
+			</lams:TabBodys> 
+		</lams:HybridTabBody> 
+				
+<!-- 			<div class="panel-body panel-monitor-body">
+ -->
+<%-- 	<lams:Tabs control="true">
+		<lams:Tab id="1" key="label.common.summary" />
+		<lams:Tab id="2" key="tab.monitoring.edit.activity" />			
+		<lams:Tab id="3" key="tab.monitoring.statistics" />
+	</lams:Tabs> --%>
+
 	<div id="footer"></div>
-	
-	</div>
-</div>
+	</lams:Page>
 </body>
 </lams:html>
Index: lams_tool_daco/web/pages/monitoring/statisticsarea.jsp
===================================================================
diff -u -r102a93686f5779e8caf5a693f388edda2e01f05d -rbe37ea9b52fd18c106254805e3cc45a6581bdd87
--- lams_tool_daco/web/pages/monitoring/statisticsarea.jsp	(.../statisticsarea.jsp)	(revision 102a93686f5779e8caf5a693f388edda2e01f05d)
+++ lams_tool_daco/web/pages/monitoring/statisticsarea.jsp	(.../statisticsarea.jsp)	(revision be37ea9b52fd18c106254805e3cc45a6581bdd87)
@@ -1,13 +1,16 @@
 <%@ include file="/common/taglibs.jsp"%>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 
+<div class="voffset10">
 <c:choose>
 	<c:when test="${empty sessionSummaries}">
-		<fmt:message key="message.monitoring.summary.no.session" />
+		<lams:Alert type="info" id="no-session-stats" close="false">
+			<fmt:message key="message.monitoring.summary.no.session" />
+		</lams:Alert>
 	</c:when>
 
 	<c:otherwise>
-	<table cellpadding="0" class="alternative-color">
+	<table class="table table-striped table-condensed">
 		<tr>
 			<c:if test="${sessionMap.isGroupedActivity}">
 			<th scope="col" width="36%">
@@ -37,5 +40,5 @@
 	</table>
 	</c:otherwise>
 </c:choose>
+</div>
 
-
Index: lams_tool_daco/web/pages/monitoring/summary.jsp
===================================================================
diff -u -r102a93686f5779e8caf5a693f388edda2e01f05d -rbe37ea9b52fd18c106254805e3cc45a6581bdd87
--- lams_tool_daco/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision 102a93686f5779e8caf5a693f388edda2e01f05d)
+++ lams_tool_daco/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision be37ea9b52fd18c106254805e3cc45a6581bdd87)
@@ -1,26 +1,23 @@
-<%@ include file="/common/taglibs.jsp"%>
+ <%@ include file="/common/taglibs.jsp"%>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 <c:set var="monitoringSummary" value="${sessionMap.monitoringSummary}" />
-<c:set var="anyRecordsAvailable" value="false" />
-<c:url var="refreshSummaryUrl" value="/monitoring/summary.do?sessionMapID=${sessionMapID}"/>
-<c:url var="statisticsUrl" value="/monitoring/statistic.do?sessionMapID=${sessionMapID}"/>
+<c:set var="anyRecordsAvailable" value="false" />	
 <c:set var="daco" value="${sessionMap.daco}"/>
 				
 <script type="text/javascript" src="<lams:LAMSURL/>/includes/javascript/monitorToolSummaryAdvanced.js"></script>
 <script type="text/javascript">
-	var gStatisticsUrl = "${statisticsUrl}"; // used by the tab functions
-	
 	function exportSummary(){
 		location.href = "<c:url value='/monitoring/exportToSpreadsheet.do'/>?sessionMapID=${sessionMapID}&reqID=" + (new Date()).getTime();
 	};
 	
   	$(document).ready(function(){
 	    
 		$(".tablesorter").tablesorter({
-			theme: 'blue',
+			theme: 'bootstrap',
+			headerTemplate : '{content} {icon}',
 		    sortInitialOrder: 'desc',
             sortList: [[0]],
-            widgets: [ "resizable", "filter" ],
+            widgets: [ "uitheme", "resizable", "filter" ],
             headers: { 1: { filter: false}, 2: { filter: false, sorter: false }, 3: { filter: false, sorter: false }, 4: { filter: false, sorter: false }  }, 
             widgetOptions: {
             	resizable: true,
@@ -30,10 +27,15 @@
                 filter_searchDelay: 700 
             }
 		});
-	
+		
 		$(".tablesorter").each(function() {
 			$(this).tablesorterPager({
 				savePages: false,
+                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}&page={page}&size={size}&{sortList:column}&{filterList:fcol}&toolSessionID=" + $(this).attr('data-session-id'),
 				ajaxProcessing: function (data, table) {
 			    	if (data && data.hasOwnProperty('rows')) {
@@ -56,11 +58,11 @@
 							if ( userData["recordCount"] > 0) {
 								var url = '<c:url value="/monitoring/listRecords.do"/>?sessionMapID=${sessionMapID}&toolSessionID='+$(table).attr('data-session-id')+'&sort=1&userId='+userData["userId"];
 								var popUpTitle = '<fmt:message key="title.monitoring.recordlist" />';
-								rows +=	'&nbsp;&nbsp;<a href="#" onclick="javascript:launchPopup(\''+url+'\',\''+popUpTitle+'\');">';
+								rows +=	'&nbsp;&nbsp;<a href="#" onclick="javascript:launchPopup(\''+url+'\',\''+popUpTitle+'\');" class="btn btn-default btn-xs">';
 								rows += 'View Records'
 								url = '<c:url value="/monitoring/getQuestionSummaries.do"/>?sessionMapID=${sessionMapID}&toolSessionID='+$(table).attr('data-session-id')+'&userId='+userData["userId"];
 								popUpTitle = '<fmt:message key="tab.monitoring.statistics" />';
-								rows += '</a>&nbsp;&nbsp;<a href="#" onclick="javascript:launchPopup(\''+url+'\',\''+popUpTitle+'\');">';
+								rows += '</a>&nbsp;&nbsp;<a href="#" onclick="javascript:launchPopup(\''+url+'\',\''+popUpTitle+'\');" class="btn btn-default btn-xs">';
 								rows += 'View Summary'
 								rows += '</a>';
 							} 
@@ -80,224 +82,201 @@
 						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
-			})
+			    	}				
+				}})
+			// bind to pager events
+            .bind('pagerInitialized pagerComplete', function(event, options){
+                initializeJRating();
+            });
 		});
   	})
 </script>
-<h1>
+
+<div class="panel">
+<div class="pull-right">
+	<c:if test="${not sessionMap.isGroupedActivity }">
+		<c:forEach var="sessionSummary" items="${monitoringSummary}" varStatus="status">
+			<c:url var="viewRecordList" value="/monitoring/listRecords.do?sessionMapID=${sessionMapID}&toolSessionID=${sessionSummary.sessionId}&sort=1" />
+		</c:forEach>	
+		<a href="#nogo" onclick="javascript:launchPopup('${viewRecordList}','RecordList')" class="btn btn-default btn-xs">
+			<fmt:message key="label.monitoring.viewrecords.all" />
+		</a>					
+	</c:if>
+	<a href="javascript:exportSummary();" class="btn btn-default btn-xs"><fmt:message key="button.export" /></a>
+</div>
+
+<h4>
   <c:out value="${daco.title}" escapeXml="true"/>
-</h1>
-<div class="instructions space-bottom-top">
+</h4>
+
+
+<div class="instructions voffset5">
   <c:out value="${daco.instructions}" escapeXml="false"/>
 </div>
 
+</div>
+
 <c:choose>
 	<c:when test="${empty monitoringSummary}">
-		<div align="center" style="font-weight: bold;">
+		<lams:Alert type="info" id="no-session-summary" close="false">
 			<fmt:message key="message.monitoring.summary.no.session" />
-		</div>
+		</lams:Alert>
 	</c:when>
 	<c:otherwise>
-		<c:forEach var="sessionSummary" items="${monitoringSummary}">
+		<c:if test="${sessionMap.isGroupedActivity}">
+			<div class="panel-group" id="accordionSessions" role="tablist" aria-multiselectable="true"> 
+		</c:if>
+
+		<c:forEach var="sessionSummary" items="${monitoringSummary}" varStatus="status">
 			<c:url var="viewRecordList" value="/monitoring/listRecords.do?sessionMapID=${sessionMapID}&toolSessionID=${sessionSummary.sessionId}&sort=1" />
-			<div id="${sessionSummary.sessionId}" class="space-bottom"/>
-			<c:if test="${sessionMap.isGroupedActivity}">
-				<h1 style="display: inline">
-					<fmt:message key="label.learning.tableheader.summary.group" />: <c:out value="${sessionSummary.sessionName}"/>
-				</h1>
-				<a href="#nogo" onclick="javascript:launchPopup('${viewRecordList}','RecordList')" class="button float-right">
-					<fmt:message key="label.monitoring.viewrecords.all" />
-				</a>					
-			</c:if>
+ 		<c:if test="${sessionMap.isGroupedActivity}">
+			    <div class="panel panel-default" >
+			        <div class="panel-heading" id="heading${sessionSummary.sessionId}">
+						<span class="panel-title collapsable-icon-left">
+			        	<a class="${status.first ? '' : 'collapsed'}" role="button" data-toggle="collapse" href="#collapse${sessionSummary.sessionId}" 
+							aria-expanded="${status.first ? 'false' : 'true'}" aria-controls="collapse${sessionSummary.sessionId}" >
+						<fmt:message key="label.learning.tableheader.summary.group" />: <c:out value="${sessionSummary.sessionName}"/></a>
+						</span>
+ 						<a href="#nogo" onclick="javascript:launchPopup('${viewRecordList}','RecordList')" class="btn btn-default btn-xs pull-right">
+						<fmt:message key="label.monitoring.viewrecords.all" />
+						</a>					
+			        </div>
+			        <div id="collapse${sessionSummary.sessionId}" class="panel-collapse collapse ${status.first ? 'in' : ''}" role="tabpanel" aria-labelledby="heading${sessionSummary.sessionId}">
+		</c:if>
 		
-			<div class="tablesorter-holder">
-			<table class="tablesorter" data-session-id="${sessionSummary.sessionId}">
-				<thead>
-					<tr>
+					<!-- Details for the group / whole of class -->
+					<c:set var="numColumns" value="3"/>
+					<c:if test="${daco.reflectOnActivity}">
+						<c:set var="numColumns" value="4"/>
+					</c:if>
+				
+					<lams:TSTable numColumns="${numColumns}" dataId="data-session-id='${sessionSummary.sessionId}'">
 						<th><fmt:message key="label.monitoring.fullname" /></th>
-						<c:choose>
-						<c:when test="${daco.reflectOnActivity}">
 						<th align="center"  width="8%"><fmt:message key="label.monitoring.recordcount" /></th>
 						<th align="center"  width="25%"></th>
-						<th align="center"  width="35%"><fmt:message key="label.monitoring.notebook" /></th>
-						</c:when>
-						<c:otherwise>
-						<th align="center"  width="8%"><fmt:message key="label.monitoring.recordcount" /></th>
-						<th align="center"  width="25%"></th>
-						</c:otherwise>
-						</c:choose>
-					</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>
+						<c:if test="${daco.reflectOnActivity}">
+							<th align="center"  width="35%"><fmt:message key="label.monitoring.notebook" /></th>
+						</c:if>
+					</lams:TSTable>
 
-			</div> <!-- end tablesorter-holder -->
-			</div>
+		<c:if test="${sessionMap.isGroupedActivity}">
+					</div> <!-- end collapse area  -->
+				</div> <!-- end collapse panel  -->
+				${status.last ? '' : '<div class="voffset5">&nbsp;</div>'}
+		</c:if>
 
 		</c:forEach>
+		<c:if test="${sessionMap.isGroupedActivity}">
+			</div> <!-- end panel-group for accordian -->
+		</c:if>
+
 	</c:otherwise>
 </c:choose>
-<p>
-	<a href="#nogo"  class="button" onclick="javascript:document.location.href='${refreshSummaryUrl}';">
-		<fmt:message key="label.common.summary.refresh" />
-	</a>
-	<c:if test="${! empty viewRecordList}">
-		<c:if test="${! sessionMap.isGroupedActivity }">
-		<a href="#nogo" onclick="javascript:launchPopup('${viewRecordList}','RecordList')" class="button space-left">
-			<fmt:message key="label.monitoring.viewrecords.all" />
-		</a>					
-		</c:if>
-	<html:link href="javascript:exportSummary();" styleClass="button space-left">
-		<fmt:message key="button.export" />
-	</html:link>
-	</c:if>
-</p>
 
-<h2>
-	<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="label.monitoring.advancedsettings" />
-	</a>
-</h2>
-<br />
-
-<div class="monitoring-advanced" id="advancedDiv" style="display:none">
-	<table class="alternative-color">
+<c:set var="adTitle"><fmt:message key="label.monitoring.advancedsettings" /></c:set>
+<lams:AdvancedAccordian title="${adTitle}">
+          	
+<table class="table table-striped table-condensed">
+	<tr>
+		<td>
+			<fmt:message key="label.common.min" />
+		</td>
+		<td>
+			<c:choose>
+				<c:when test="${daco.minRecords==0}">
+					<fmt:message key="label.authoring.advanced.record.nolimit" />
+				</c:when>
+				<c:otherwise>
+					${daco.minRecords}
+				</c:otherwise>
+			</c:choose>	
+		</td>
+	</tr>
+	<tr>
+		<td>
+			<fmt:message key="label.common.max" />
+		</td>
+		<td>
+			<c:choose>
+				<c:when test="${daco.maxRecords==0}">
+					<fmt:message key="label.authoring.advanced.record.nolimit" />
+				</c:when>
+				<c:otherwise>
+					${daco.maxRecords}
+				</c:otherwise>
+			</c:choose>	
+		</td>
+	</tr>
+	<tr>
+		<td>
+			<fmt:message key="label.authoring.advanced.notify.onlearnerentry" />
+		</td>
+		<td>
+			<c:choose>
+				<c:when test="${daco.notifyTeachersOnLearnerEntry}">
+					<fmt:message key="label.monitoring.advancedsettings.on" />
+				</c:when>
+				<c:otherwise>
+					<fmt:message key="label.monitoring.advancedsettings.off" />
+				</c:otherwise>
+			</c:choose>	
+		</td>
+	</tr>
+	<tr>
+		<td>
+			<fmt:message key="label.authoring.advanced.notify.onrecordsubmit" />
+		</td>
+		<td>
+			<c:choose>
+				<c:when test="${daco.notifyTeachersOnRecordSumbit}">
+					<fmt:message key="label.monitoring.advancedsettings.on" />
+				</c:when>
+				<c:otherwise>
+					<fmt:message key="label.monitoring.advancedsettings.off" />
+				</c:otherwise>
+			</c:choose>	
+		</td>
+	</tr>
+	
+	<tr>
+		<td>
+			<fmt:message key="label.authoring.advanced.lock.on.finished" />
+		</td>
+		<td>
+			<c:choose>
+				<c:when test="${daco.lockOnFinished}">
+					<fmt:message key="label.monitoring.advancedsettings.on" />
+				</c:when>
+				<c:otherwise>
+					<fmt:message key="label.monitoring.advancedsettings.off" />
+				</c:otherwise>
+			</c:choose>	
+		</td>
+	</tr>
+	<tr>
+		<td>
+			<fmt:message key="label.monitoring.advancedsettings.addNotebook" />
+		</td>
+		<td>
+			<c:choose>
+				<c:when test="${daco.reflectOnActivity}">
+					<fmt:message key="label.monitoring.advancedsettings.on" />
+				</c:when>
+				<c:otherwise>
+					<fmt:message key="label.monitoring.advancedsettings.off" />
+				</c:otherwise>
+			</c:choose>	
+		</td>
+	</tr>
+	<c:if test="${daco.reflectOnActivity}">
 		<tr>
 			<td>
-				<fmt:message key="label.common.min" />
+				<fmt:message key="label.monitoring.advancedsettings.notebookinstructions" />
 			</td>
 			<td>
-				<c:choose>
-					<c:when test="${daco.minRecords==0}">
-						<fmt:message key="label.authoring.advanced.record.nolimit" />
-					</c:when>
-					<c:otherwise>
-						${daco.minRecords}
-					</c:otherwise>
-				</c:choose>	
+				<lams:out value="${daco.reflectInstructions}" escapeHtml="true"/>
 			</td>
 		</tr>
-		<tr>
-			<td>
-				<fmt:message key="label.common.max" />
-			</td>
-			<td>
-				<c:choose>
-					<c:when test="${daco.maxRecords==0}">
-						<fmt:message key="label.authoring.advanced.record.nolimit" />
-					</c:when>
-					<c:otherwise>
-						${daco.maxRecords}
-					</c:otherwise>
-				</c:choose>	
-			</td>
-		</tr>
-		<tr>
-			<td>
-				<fmt:message key="label.authoring.advanced.notify.onlearnerentry" />
-			</td>
-			<td>
-				<c:choose>
-					<c:when test="${daco.notifyTeachersOnLearnerEntry}">
-						<fmt:message key="label.monitoring.advancedsettings.on" />
-					</c:when>
-					<c:otherwise>
-						<fmt:message key="label.monitoring.advancedsettings.off" />
-					</c:otherwise>
-				</c:choose>	
-			</td>
-		</tr>
-		<tr>
-			<td>
-				<fmt:message key="label.authoring.advanced.notify.onrecordsubmit" />
-			</td>
-			<td>
-				<c:choose>
-					<c:when test="${daco.notifyTeachersOnRecordSumbit}">
-						<fmt:message key="label.monitoring.advancedsettings.on" />
-					</c:when>
-					<c:otherwise>
-						<fmt:message key="label.monitoring.advancedsettings.off" />
-					</c:otherwise>
-				</c:choose>	
-			</td>
-		</tr>
-		
-		<tr>
-			<td>
-				<fmt:message key="label.authoring.advanced.lock.on.finished" />
-			</td>
-			<td>
-				<c:choose>
-					<c:when test="${daco.lockOnFinished}">
-						<fmt:message key="label.monitoring.advancedsettings.on" />
-					</c:when>
-					<c:otherwise>
-						<fmt:message key="label.monitoring.advancedsettings.off" />
-					</c:otherwise>
-				</c:choose>	
-			</td>
-		</tr>
-		<tr>
-			<td>
-				<fmt:message key="label.monitoring.advancedsettings.addNotebook" />
-			</td>
-			<td>
-				<c:choose>
-					<c:when test="${daco.reflectOnActivity}">
-						<fmt:message key="label.monitoring.advancedsettings.on" />
-					</c:when>
-					<c:otherwise>
-						<fmt:message key="label.monitoring.advancedsettings.off" />
-					</c:otherwise>
-				</c:choose>	
-			</td>
-		</tr>
-		<c:if test="${daco.reflectOnActivity}">
-			<tr>
-				<td>
-					<fmt:message key="label.monitoring.advancedsettings.notebookinstructions" />
-				</td>
-				<td>
-					<lams:out value="${daco.reflectInstructions}" escapeHtml="true"/>
-				</td>
-			</tr>
-		</c:if>
-	</table>
-</div>
+	</c:if>
+</table>
+</lams:AdvancedAccordian>