Index: lams_tool_forum/src/java/org/lamsfoundation/lams/tool/forum/web/actions/LearningAction.java
===================================================================
diff -u -r5773f84ed608838de3521ecde87c52f3c72d478c -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/src/java/org/lamsfoundation/lams/tool/forum/web/actions/LearningAction.java	(.../LearningAction.java)	(revision 5773f84ed608838de3521ecde87c52f3c72d478c)
+++ lams_tool_forum/src/java/org/lamsfoundation/lams/tool/forum/web/actions/LearningAction.java	(.../LearningAction.java)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -498,7 +498,18 @@
 	sessionMap.put(ForumConstants.ATTR_ROOT_TOPIC_UID, rootTopicId);
 
 	// get forum user and forum
-	ForumUser forumUser = getCurrentUser(request, (Long) sessionMap.get(AttributeNames.PARAM_TOOL_SESSION_ID));
+	// if coming from topic list, the toolSessionId is in the SessionMap.
+	// if coming from the monitoring statistics window, it is passed in as a parameter.
+	Long toolSessionId = WebUtil.readLongParam(request, AttributeNames.PARAM_TOOL_SESSION_ID, true);
+	if ( toolSessionId != null ) {
+	    sessionMap.put(AttributeNames.PARAM_TOOL_SESSION_ID, toolSessionId);
+	    String mode = WebUtil.readStrParam(request, AttributeNames.PARAM_MODE, true);
+	    if ( mode != null )
+		sessionMap.put(AttributeNames.PARAM_MODE, mode);
+	} else {
+	    toolSessionId = (Long) sessionMap.get(AttributeNames.PARAM_TOOL_SESSION_ID);
+	}
+	ForumUser forumUser = getCurrentUser(request, toolSessionId);
 	Forum forum = forumUser.getSession().getForum();
 
 	Long lastMsgSeqId = WebUtil.readLongParam(request, ForumConstants.PAGE_LAST_ID, true);
Index: lams_tool_forum/src/java/org/lamsfoundation/lams/tool/forum/web/actions/MonitoringAction.java
===================================================================
diff -u -r5773f84ed608838de3521ecde87c52f3c72d478c -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/src/java/org/lamsfoundation/lams/tool/forum/web/actions/MonitoringAction.java	(.../MonitoringAction.java)	(revision 5773f84ed608838de3521ecde87c52f3c72d478c)
+++ lams_tool_forum/src/java/org/lamsfoundation/lams/tool/forum/web/actions/MonitoringAction.java	(.../MonitoringAction.java)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -573,6 +573,7 @@
 	request.setAttribute("topicList", sessionTopicsMap);
 	request.setAttribute("markAverage", sessionAvaMarkMap);
 	request.setAttribute("totalMessage", sessionTotalMsgMap);
+	request.setAttribute(ForumConstants.ATTR_SESSION_MAP_ID, WebUtil.readStrParam(request, ForumConstants.ATTR_SESSION_MAP_ID));
     }
 
     /**
Index: lams_tool_forum/web/WEB-INF/tags/AdvancedAccordian.tag
===================================================================
diff -u
--- lams_tool_forum/web/WEB-INF/tags/AdvancedAccordian.tag	(revision 0)
+++ lams_tool_forum/web/WEB-INF/tags/AdvancedAccordian.tag	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -0,0 +1,53 @@
+<%
+	 /****************************************************************
+	 * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
+	 * =============================================================
+	 * License Information: http://lamsfoundation.org/licensing/lams/2.0/
+	 * 
+	 * This program is free software; you can redistribute it and/or modify
+	 * it under the terms of the GNU General Public License version 2.0
+	 * as published by the Free Software Foundation.
+	 * 
+	 * This program is distributed in the hope that it will be useful,
+	 * but WITHOUT ANY WARRANTY; without even the implied warranty of
+	 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	 * GNU General Public License for more details.
+	 * 
+	 * You should have received a copy of the GNU General Public License
+	 * along with this program; if not, write to the Free Software
+	 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
+	 * USA
+	 * 
+	 * http://www.gnu.org/licenses/gpl.txt
+	 * ****************************************************************
+	 */
+
+	/**
+	 * AdvancedAccordian.tag
+	 *	Author: Fiona Malikoff
+	 *	Description: Creates the show/hide entry for the Advanced Settings in Montoring.
+	 * Wiki: 
+	 */
+%>
+<%@ attribute name="title" required="true" rtexprvalue="true"%>
+
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+
+<div class="panel-group" id="accordionAdvanced" role="tablist" aria-multiselectable="true"> 
+    <div class="panel panel-default" >
+        <div class="panel-heading collapsable-icon-left" id="headingAdvanced">
+        	<span class="panel-title">
+	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseAdvanced" aria-expanded="false" aria-controls="collapseAdvanced" >
+          	${title}
+        	</a>
+      		</span>
+        </div>
+
+        <div id="collapseAdvanced" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingAdvanced">
+		<jsp:doBody />
+		</div>
+	</div>
+</div>
+		
\ No newline at end of file
Index: lams_tool_forum/web/WEB-INF/tags/Arrow.tag
===================================================================
diff -u
--- lams_tool_forum/web/WEB-INF/tags/Arrow.tag	(revision 0)
+++ lams_tool_forum/web/WEB-INF/tags/Arrow.tag	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -0,0 +1,35 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%-- state = up: up arrow;  state = down: down arrow --%>
+<%@ attribute name="state" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="onclick" required="false" rtexprvalue="true"%>
+
+<c:choose>
+	<c:when test="${not empty title}">
+		<c:set var="fullTitle">title="${title}"</c:set>
+	</c:when>
+	<c:otherwise>
+		<c:set var="fullTitle" value=""/>
+	</c:otherwise>
+</c:choose>
+
+<c:choose>
+	<c:when test="${not empty onclick}">
+		<c:set var="fullOnclick">onclick="${onclick}"</c:set>
+	</c:when>
+	<c:otherwise>
+		<c:set var="fullOnclick" value=""/>
+	</c:otherwise>
+</c:choose>
+
+<c:choose>
+	<c:when test="${fn:containsIgnoreCase(state, 'up')}">
+		<i class="fa fa-long-arrow-up fa-pull-left" ${fullTitle} ${fullOnclick}></i>
+	</c:when>
+	<c:otherwise>
+		<i class="fa fa-long-arrow-down fa-pull-right"  ${fullTitle} ${fullOnclick}></i>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_forum/web/WEB-INF/tags/AuthoringButton.tag
===================================================================
diff -u -r271d1969c71c45a7e00e068f0b31d610fee8e9c0 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/WEB-INF/tags/AuthoringButton.tag	(.../AuthoringButton.tag)	(revision 271d1969c71c45a7e00e068f0b31d610fee8e9c0)
+++ lams_tool_forum/web/WEB-INF/tags/AuthoringButton.tag	(.../AuthoringButton.tag)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -122,12 +122,12 @@
     	window.close();
     }  				
 </script>	
-<p id="saveCancelButtons" >
-		<html:link href="javascript:doSubmit_Form_Only();" property="submit" styleClass="button right-buttons space-left">
+<div id="saveCancelButtons" >
+		<html:link href="javascript:doSubmit_Form_Only();" property="submit" styleClass="btn btn-primary pull-right">
 			<span class="okIcon"><fmt:message key="${saveButtonLabelKey}" /></span>
 		</html:link>
-		<html:link href="javascript:;" property="cancel" onclick="javascript:doCancel()" styleClass="button right-buttons space-left">
+		<html:link href="javascript:;" property="cancel" onclick="javascript:doCancel()" styleClass="btn btn-default roffset5 pull-right">
 			<span class="cancelIcon"><fmt:message key="${cancelButtonLabelKey}" /></span>
 		</html:link>
-</p>
-<!-- end tab content -->
+</div>
+<!-- end tab content -->
\ No newline at end of file
Index: lams_tool_forum/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdc884b8e6274ebbc664d1ee940e565803445bb26 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dc884b8e6274ebbc664d1ee940e565803445bb26)
+++ lams_tool_forum/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -10,7 +10,12 @@
 <%@ attribute name="contentFolderID" required="false" rtexprvalue="true"%>
 <%@ attribute name="displayExpanded" required="false" rtexprvalue="true"%>
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
+<%@ attribute name="method" required="false" rtexprvalue="true"%>
 
+<c:if test="${empty method}">
+	<c:set var="method" value="inline" />
+</c:if>
+
 <c:set var="language">
 	<lams:user property="fckLanguageMapping" />
 </c:set>
@@ -19,6 +24,10 @@
 	<c:set var="toolbarSet" value="Default" />
 </c:if>
 
+<c:if test="${fn:containsIgnoreCase(method,'replace')}">
+	<c:set var="toolbarSet">${toolbarSet}Replace</c:set>
+</c:if>
+
 <c:if test="${empty displayExpanded}">
 	<c:set var="displayExpanded" value="true" />
 </c:if>
@@ -33,10 +42,10 @@
 <c:set var="fixedValue" value="${fn:replace(value,'&lt','&amp;lt')}"/>
 <c:set var="fixedValue" value="${fn:replace(fixedValue,'&gt','&amp;gt')}"/>
 
-<textarea id="${id}" name="${id}" style="display: none; visibility: hidden; height: 0px;">${fixedValue}</textarea>
+<textarea id="${id}" name="${id}" style="display: none; visibility: hidden; height: 0px;" placeholder="${placeholder}">${fixedValue}</textarea>
 
 <c:if test="${empty ckEditorBasePath}">
-	<c:set scope="request" var="ckEditorBasePath"><lams:LAMSURL/>ckeditor/</c:set>
+	<c:set scope="request" var="ckEditorBasePath">/lams/ckeditor/</c:set>
 	<script type="text/javascript" src="${ckEditorBasePath}ckeditor.js"></script>
 </c:if>
 
@@ -59,10 +68,9 @@
 	    var editor = CKEDITOR.instances["${id}"];
 	    if (editor) { editor.destroy(true); }
 	    
-		var instance = CKEDITOR.replace( "${id}", {
+		var instance = CKEDITOR.${method}( "${id}", {
 				width                         : "${width}",
 				height                        : "${height}",
-				autoGrow_minHeight            : "${height}".replace("px", ""),
 				toolbar                       : "${toolbarSet}",
 				language                      : "${language}",
 				defaultLangugage              : "en",
Index: lams_tool_forum/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u
--- lams_tool_forum/web/WEB-INF/tags/Comments.tag	(revision 0)
+++ lams_tool_forum/web/WEB-INF/tags/Comments.tag	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -0,0 +1,47 @@
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="toolSessionId" required="true" rtexprvalue="true"%>
+<%@ attribute name="toolSignature" required="true" rtexprvalue="true"%>
+<%@ attribute name="height" required="false" rtexprvalue="true"%>
+<%@ attribute name="width" required="false" rtexprvalue="true"%>
+<%@ attribute name="mode" required="false" rtexprvalue="true"%>
+<%@ attribute name="likeAndDislike" required="false" rtexprvalue="true"%>
+<%@ attribute name="readOnly" required="false" rtexprvalue="true"%>
+<%@ attribute name="pageSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty width}">
+	<c:set var="width" value="100%" />
+</c:if>
+
+<c:if test="${empty height}">
+	<c:set var="height" value="auto" />
+</c:if>
+
+<c:set var="modeStr" value=""/>
+<c:if test="${!empty mode}">
+	<c:set var="modeStr">&mode=${mode}</c:set>
+</c:if>
+
+<c:if test="${empty likeAndDislike}">
+	<c:set var="likeAndDislike" value="false" />
+</c:if>
+
+<c:if test="${empty readOnly}">
+	<c:set var="readOnly" value="false" />
+</c:if>
+
+<c:if test="${empty sortBy}">
+	<c:set var="sortBy" value="0" /> <!-- 0: date, 1: likes -->
+</c:if>
+
+<div id="commentFrame" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
+<script>
+$(document).ready(function(){
+	var url='<lams:LAMSURL/>comments/comments.do?externalID=${toolSessionId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}';
+	$('#commentFrame').load(url);
+});
+</script>
\ No newline at end of file
Index: lams_tool_forum/web/WEB-INF/tags/CommentsAuthor.tag
===================================================================
diff -u
--- lams_tool_forum/web/WEB-INF/tags/CommentsAuthor.tag	(revision 0)
+++ lams_tool_forum/web/WEB-INF/tags/CommentsAuthor.tag	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -0,0 +1,51 @@
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-html" prefix="html"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+
+<%@ attribute name="allowCommentsVariableName" required="false" rtexprvalue="true"%>
+<%@ attribute name="allowCommentLabelKey" required="false" rtexprvalue="true"%>
+<%@ attribute name="likeDislikeVariableName" required="false" rtexprvalue="true"%>
+<%@ attribute name="likeOnlyCommentLabelKey" required="false" rtexprvalue="true"%>
+<%@ attribute name="likeDislikeLabelKey" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty allowCommentsVariableName}">
+	<c:set var="allowCommentsVariableName" value="allowComments" />
+</c:if>
+<c:if test="${empty allowCommentLabelKey}">
+	<c:set var="allowCommentLabelKey" value="advanced.allow.comments" />
+</c:if>
+<c:if test="${empty likeDislikeVariableName}">
+	<c:set var="likeDislikeVariableName" value="commentsLikeAndDislike" />
+</c:if>
+<c:if test="${empty likeOnlyCommentLabelKey}">
+	<c:set var="likeOnlyCommentLabelKey" value="advanced.comments.like.only" />
+</c:if>
+<c:if test="${empty likeDislikeLabelKey}">
+	<c:set var="likeDislikeLabelKey" value="advanced.comments.like.and.dislike" />
+</c:if>
+
+<div class="checkbox">
+	<label>
+	<html:checkbox property="${allowCommentsVariableName}" value="1"
+		styleId="${allowCommentsVariableName}">
+	</html:checkbox>
+	<fmt:message key="${allowCommentLabelKey}"/>
+	</label>
+</div>
+<div class="loffset20" id="likedislike">
+		<html:radio property="${likeDislikeVariableName}" value="false" />&nbsp;<fmt:message key="${likeOnlyCommentLabelKey}" /> &nbsp;
+		<html:radio property="${likeDislikeVariableName}" value="true" />&nbsp;<fmt:message key="${likeDislikeLabelKey}" /> 
+</div>
+
+<script>
+jQuery( document ).ready(function( $ ) {
+	if (! $("#${allowCommentsVariableName}").is(':checked')) {
+		$("#likedislike").hide();
+	}
+	$("#${allowCommentsVariableName}").click(function() {
+		$("#likedislike").toggle('slow');
+	});
+});
+</script>
+
+
Index: lams_tool_forum/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -rf7f47f902db6eae297429b67c683540199704f13 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision f7f47f902db6eae297429b67c683540199704f13)
+++ lams_tool_forum/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -12,25 +12,38 @@
 <div class="row no-gutter">
 	<div class="col-xs-12">
 		<div class="container" id="content">
+		
+		<c:choose>
+		<c:when test='${type == "navbar"}'>
+			<jsp:doBody />
+		</c:when> 
+		<c:otherwise>
 			<div class="panel panel-default panel-${type}-page">
-				<div class="panel-heading">
-					<c:if test="${not empty title}">
+				<c:if test="${not empty title}">
+					<div class="panel-heading">
 						<div class="panel-title panel-${type}-title">
 							<c:out value="${title}" escapeXml="true" />
 							<c:if test="${not empty titleHelpURL}">
 								<a style="float: right" href="${titleHelpURL}" target="_new"><span class="help" style="margin: 0px"></span></a>
 							</c:if>
 						</div>
-					</c:if>
-					<c:if test="${not empty headingContent}">
-						<c:out value="${headingContent}" escapeXml="true" />
-					</c:if>
-				</div>
+						<c:if test="${not empty headingContent}">
+							<c:out value="${headingContent}" escapeXml="true" />
+						</c:if>
+					</div>
+				</c:if>
 				<div class="panel-body panel-${type}-body">
 					<jsp:doBody />
 				</div>
 			</div>
+		</c:otherwise>
+		</c:choose>
+			
 		</div>
 		<!-- End content container -->
 	</div>
 </div>
+
+
+		
+			
Index: lams_tool_forum/web/WEB-INF/tags/ProgressBar.tag
===================================================================
diff -u
--- lams_tool_forum/web/WEB-INF/tags/ProgressBar.tag	(revision 0)
+++ lams_tool_forum/web/WEB-INF/tags/ProgressBar.tag	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -0,0 +1,91 @@
+<% 
+/****************************************************************
+ * 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
+ * ****************************************************************
+ */
+ 
+ /**
+  * ProgressBar.tag
+  *	Author: Marcin Cieslak
+  *	Description: Creates a the progress bar widget.
+  */
+ 
+ %>
+<%@ tag body-content="scriptless" %>
+<%@ taglib uri="tags-core" prefix="c" %>
+<%@ taglib uri="tags-fmt" prefix="fmt" %>
+<%@ taglib uri="tags-html" prefix="html" %>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+
+<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+
+<script type="text/javascript">
+	$('head').append('<link rel="stylesheet" href=""<lams:LAMSURL />css/progressBar.css" type="text/css" />');
+	
+	var LAMS_URL = '<lams:LAMSURL/>',
+	APP_URL = LAMS_URL + 'learning/',
+	
+	LABELS = {
+		<fmt:message key="label.learner.progress.activity.current.tooltip" var="CURRENT_ACTIVITY_VAR"/>
+		CURRENT_ACTIVITY : '<c:out value="${CURRENT_ACTIVITY_VAR}" />',
+		<fmt:message key="label.learner.progress.activity.completed.tooltip" var="COMPLETED_ACTIVITY_VAR"/>
+		COMPLETED_ACTIVITY : '<c:out value="${COMPLETED_ACTIVITY_VAR}" />',
+		<fmt:message key="label.learner.progress.activity.attempted.tooltip" var="ATTEMPTED_ACTIVITY_VAR"/>
+		ATTEMPTED_ACTIVITY : '<c:out value="${ATTEMPTED_ACTIVITY_VAR}" />',
+		<fmt:message key="label.learner.progress.activity.tostart.tooltip" var="TOSTART_ACTIVITY_VAR"/>
+		TOSTART_ACTIVITY : '<c:out value="${TOSTART_ACTIVITY_VAR}" />',
+		<fmt:message key="label.learner.progress.activity.support.tooltip" var="SUPPORT_ACTIVITY_VAR"/>
+		SUPPORT_ACTIVITY : '<c:out value="${SUPPORT_ACTIVITY_VAR}" />'
+	},
+	
+	parentURL = "${notifyCloseURL}",
+	lessonId = '1',
+	progressPanelEnabled = true,
+	
+	// settings for progress bar
+	presenceEnabled = false,
+	isHorizontalBar = false,
+	hasContentFrame = false,
+	hasDialog = false,
+	
+	bars = {
+		'learnerMainBar' : {
+			'containerId' : 'progressBarDiv'
+		}
+	};
+
+	$(document).ready(function() {
+		fillProgressBar('learnerMainBar');
+		
+		$('#progressBarButton').click(function(){
+			var bar = $('#progressBarDiv');
+			if (bar.is(':visible')){
+				bar.hide(1000);
+			} else {
+				bar.show(1000);
+			}
+		});
+	});
+</script>
+<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/progressBar.js"></script>
+
+<div id="progressBarDiv" style="float: left; border: thin black solid; display: none; z-index:1000; position: absolute; background-color: rgb(219,230,252); top: 65px"></div>
+<i id="progressBarButton" class="fa fa-bars"></i>&nbsp;
\ No newline at end of file
Index: lams_tool_forum/web/WEB-INF/tags/RestrictedUsageAccordian.tag
===================================================================
diff -u
--- lams_tool_forum/web/WEB-INF/tags/RestrictedUsageAccordian.tag	(revision 0)
+++ lams_tool_forum/web/WEB-INF/tags/RestrictedUsageAccordian.tag	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -0,0 +1,54 @@
+<%
+	 /****************************************************************
+	 * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
+	 * =============================================================
+	 * License Information: http://lamsfoundation.org/licensing/lams/2.0/
+	 * 
+	 * This program is free software; you can redistribute it and/or modify
+	 * it under the terms of the GNU General Public License version 2.0
+	 * as published by the Free Software Foundation.
+	 * 
+	 * This program is distributed in the hope that it will be useful,
+	 * but WITHOUT ANY WARRANTY; without even the implied warranty of
+	 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	 * GNU General Public License for more details.
+	 * 
+	 * You should have received a copy of the GNU General Public License
+	 * along with this program; if not, write to the Free Software
+	 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
+	 * USA
+	 * 
+	 * http://www.gnu.org/licenses/gpl.txt
+	 * ****************************************************************
+	 */
+
+	/**
+	 * AdvancedAccordian.tag
+	 *	Author: Fiona Malikoff
+	 *	Description: Creates the show/hide entry for the Restricted Usage Settings in Monitoring.
+	 * Wiki: 
+	 */
+%>
+<%@ attribute name="title" required="true" rtexprvalue="true"%>
+
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+
+<div class="panel-group" id="accordionRestrictUsageDiv" role="tablist" aria-multiselectable="true"> 
+    <div class="panel panel-default" >
+        <div class="panel-heading collapsable-icon-left" id="headingRestrictedUsageDiv">
+        	<span class="panel-title">
+	    	<a class="collapsed" role="button" data-toggle="collapse" href="#restrictUsageDiv" aria-expanded="false" aria-controls="restrictUsageDiv" >
+          	${title}
+        	</a>
+      		</span>
+        </div>
+
+
+		<div id="restrictUsageDiv" class="panel-body panel-collapse collapse" role="tabpanel" aria-labelledby="headingRestrictedUsageDiv">
+		<jsp:doBody />
+		</div>
+	</div>
+</div>
+		
\ No newline at end of file
Index: lams_tool_forum/web/WEB-INF/tags/TSTable.tag
===================================================================
diff -u
--- lams_tool_forum/web/WEB-INF/tags/TSTable.tag	(revision 0)
+++ lams_tool_forum/web/WEB-INF/tags/TSTable.tag	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} form-horizontal">
+	        <button type="button" class="btn btn-xs first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn btn-xs prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn btn-xs next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn btn-xs last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<option selected="selected" value="10">10</option>
+	      		<option value="20">20</option>
+	      		<option value="30">30</option>
+	      		<option value="40">40</option>
+	      		<option value="50">50</option>
+	      		<option value="100">100</option>
+	        </select>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_forum/web/WEB-INF/tags/Tab.tag
===================================================================
diff -u -rb5c9ab3d41689d5418b146ccd178c39a82a78fcc -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/WEB-INF/tags/Tab.tag	(.../Tab.tag)	(revision b5c9ab3d41689d5418b146ccd178c39a82a78fcc)
+++ lams_tool_forum/web/WEB-INF/tags/Tab.tag	(.../Tab.tag)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -1,85 +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: Mitchell Seaton
-	 *	Description: Creates a tab element.
-	 * 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
---%>
-
-<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>
-
-<div class="nav-box">
-	<div class="tab-left" id="tab-left-${id}"></div>
-	<div class="tab-middle" id="tab-middle-${id}">
-		<a class="tab-middle-link" id="tab-middle-link-${id}" href="#"
-			onclick="${methodCall}(${id});return false;">
-			${tabTitle}
-		</a>
-	</div>
-	<div class="tab-right" id="tab-right-${id}"></div>
-</div>
+<%
+	 /****************************************************************
+	 * 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_forum/web/WEB-INF/tags/TabBody.tag
===================================================================
diff -u -rca73a51b45e6071a6a9edd5da8b0d61bf3a39929 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/WEB-INF/tags/TabBody.tag	(.../TabBody.tag)	(revision ca73a51b45e6071a6a9edd5da8b0d61bf3a39929)
+++ lams_tool_forum/web/WEB-INF/tags/TabBody.tag	(.../TabBody.tag)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -1,52 +1,44 @@
-<%/****************************************************************
- * 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
- * ****************************************************************
- */
-
-/**
- * TabBody.tag
- *	Author: Mitchell Seaton
- *	Description: Creates the body container for a tab element
- * Wiki: 
- */
-
-		%>
-<%@ tag body-content="scriptless"%>
-<%@ attribute name="id" required="true" rtexprvalue="true"%>
-<%@ attribute name="tabTitle" required="false" rtexprvalue="true"%>
-<%@ attribute name="titleKey" required="false" rtexprvalue="true"%>
-<%@ attribute name="page" required="false" rtexprvalue="true"%>
-<%@ taglib uri="tags-core" prefix="c"%>
-<%@ taglib uri="tags-bean" prefix="bean"%>
-
-<!-- begin tab content -->
-<div class="box" id="tabbody${id}">
-	<c:choose>
-		<c:when test="${page != null}">
-			<jsp:include page="${page}" />
-		</c:when>
-		<c:otherwise>
-			<jsp:doBody />
-		</c:otherwise>
-	</c:choose>
-
-</div>
-<!-- end tab content -->
+<%/****************************************************************
+ * 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
+ * ****************************************************************
+ */
+
+/**
+ * TabBody.tag
+ *	Author: Mitchell Seaton
+ *	Description: Creates the body container for a tab element
+ * Wiki: 
+ */
+
+%>
+<%@ attribute name="id" required="true" rtexprvalue="true"%>
+<%@ attribute name="tabTitle" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleKey" required="false" rtexprvalue="true"%>
+<%@ attribute name="page" required="false" rtexprvalue="true"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-bean" prefix="bean"%>
+
+<c:set var="class" value=""/>
+<c:if test="${id == 1}">
+	<c:set var="class">active</c:set>
+</c:if>
+
+<div role="tabpanel" class="tab-pane ${class}" id="t${id}"><jsp:include page="${page}"/></div>
Index: lams_tool_forum/web/WEB-INF/tags/TabBodyArea.tag
===================================================================
diff -u
--- lams_tool_forum/web/WEB-INF/tags/TabBodyArea.tag	(revision 0)
+++ lams_tool_forum/web/WEB-INF/tags/TabBodyArea.tag	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -0,0 +1,39 @@
+<%/****************************************************************
+ * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
+ * =============================================================
+ * License Information: http://lamsfoundation.org/licensing/lams/2.0/
+ * 
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 2.0
+ * as published by the Free Software Foundation.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
+ * USA
+ * 
+ * http://www.gnu.org/licenses/gpl.txt
+ * ****************************************************************
+ */
+
+/**
+ * TabBodyArea.tag
+ *	Author: Fiona Malikoff
+ *	Description: Creates the panel body area for a nav bar screen
+ * Wiki: 
+ */
+
+%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-bean" prefix="bean"%>
+
+<div class="panel-body panel-monitor-body">
+	 <jsp:doBody />
+</div>
+
+</div> <!--  close tab opened in TabHeader -->
\ No newline at end of file
Index: lams_tool_forum/web/WEB-INF/tags/TabBodys.tag
===================================================================
diff -u
--- lams_tool_forum/web/WEB-INF/tags/TabBodys.tag	(revision 0)
+++ lams_tool_forum/web/WEB-INF/tags/TabBodys.tag	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -0,0 +1,37 @@
+<%/****************************************************************
+ * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
+ * =============================================================
+ * License Information: http://lamsfoundation.org/licensing/lams/2.0/
+ * 
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 2.0
+ * as published by the Free Software Foundation.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
+ * USA
+ * 
+ * http://www.gnu.org/licenses/gpl.txt
+ * ****************************************************************
+ */
+
+/**
+ * TabBodys.tag
+ *	Author: Fiona Malikoff
+ *	Description: Create a tabbody list from nested TabBody tags.
+ * Wiki: 
+ */
+
+		%>
+<%@ tag body-content="scriptless"%>
+
+<!-- tab body holder table -->
+<div class="tab-content">
+	<jsp:doBody />
+</div>
Index: lams_tool_forum/web/WEB-INF/tags/TabName.tag
===================================================================
diff -u -r7329c82c5388fbb86b6a0a2b27a71151ee8f116e -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/WEB-INF/tags/TabName.tag	(.../TabName.tag)	(revision 7329c82c5388fbb86b6a0a2b27a71151ee8f116e)
+++ lams_tool_forum/web/WEB-INF/tags/TabName.tag	(.../TabName.tag)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -1,59 +1,59 @@
-<%/****************************************************************
- * 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
- * ****************************************************************
- */
-
-/**
- * TabName Tag
- *	Author: Mitchell Seaton
- *	Description: Shortens name that are too long to fit inside a tab
- */
-
-		%>
-<%@ tag body-content="scriptless" %>
-
-<%@ attribute name="url" required="true" rtexprvalue="true"%>
-<%@ attribute name="highlight" required="false" rtexprvalue="true" %>
-
-<%@ taglib uri="tags-core" prefix="c"%>
-<%@ taglib uri="tags-function" prefix="fn"%>
-
-<c:set var="limit">12</c:set>
-<c:set var="fullname"><jsp:doBody/></c:set>
-<c:set var="titleValue" value=""/>
-
-<c:choose>
-	<c:when test="${fn:length(fullname) > limit}">
-			<c:set var="titleValue" value="${fullname}"/>
-			<c:set var="tabname" value="${fn:substring(fullname, 0, limit-2)}..."/>
-	</c:when>
-	<c:otherwise>
-		<c:set var="tabname" value="${fullname}"/>
-	</c:otherwise>
-</c:choose>
-
-<c:if test="${highlight eq true}">
-	<c:set var="classVar" value="tab-link-highlight" />
-</c:if>
-
-<a class="tab-middle-link ${classVar}" href="<c:out value='${url}' />" title="<c:out value='${titleValue}'/>" style="border:0;">
-	<c:out value="${tabname}" escapeXml="false"/>	
+<%/****************************************************************
+ * 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
+ * ****************************************************************
+ */
+
+/**
+ * TabName Tag
+ *	Author: Mitchell Seaton
+ *	Description: Shortens name that are too long to fit inside a tab
+ */
+
+		%>
+<%@ tag body-content="scriptless" %>
+
+<%@ attribute name="url" required="true" rtexprvalue="true"%>
+<%@ attribute name="highlight" required="false" rtexprvalue="true" %>
+
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-function" prefix="fn"%>
+
+<c:set var="limit">12</c:set>
+<c:set var="fullname"><jsp:doBody/></c:set>
+<c:set var="titleValue" value=""/>
+
+<c:choose>
+	<c:when test="${fn:length(fullname) > limit}">
+			<c:set var="titleValue" value="${fullname}"/>
+			<c:set var="tabname" value="${fn:substring(fullname, 0, limit-2)}..."/>
+	</c:when>
+	<c:otherwise>
+		<c:set var="tabname" value="${fullname}"/>
+	</c:otherwise>
+</c:choose>
+
+<c:if test="${highlight eq true}">
+	<c:set var="classVar" value="tab-link-highlight" />
+</c:if>
+
+<a class="tab-middle-link ${classVar}" href="<c:out value='${url}' />" title="<c:out value='${titleValue}'/>" style="border:0;">
+	<c:out value="${tabname}" escapeXml="false"/>	
 </a>
\ No newline at end of file
Index: lams_tool_forum/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -rca73a51b45e6071a6a9edd5da8b0d61bf3a39929 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision ca73a51b45e6071a6a9edd5da8b0d61bf3a39929)
+++ lams_tool_forum/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -1,69 +1,92 @@
-<%/****************************************************************
- * 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
- * ****************************************************************
- */
-
-/**
- * Tabs.tag
- *	Author: Mitchell Seaton
- *	Description: Create a tab list from a input collection or nested Tab tags.
- * Wiki: 
- */
-
-		%>
-<%@ tag body-content="scriptless"%>
-<%@ attribute name="collection" type="java.util.Collection" required="false" rtexprvalue="true"%>
-<%@ attribute name="control" required="false" rtexprvalue="true"%>
-<%@ attribute name="useKey" required="false" rtexprvalue="true"%>
-<%@ taglib uri="tags-core" prefix="c"%>
-<%@ taglib uri="tags-lams" prefix="lams"%>
-<c:set var="dControl" value="false" scope="request" />
-<c:if test="${control}">
-	<c:set var="dControl" value="${control}" scope="request" />
-</c:if>
-
-<c:set var="dUseKey" value="false" scope="request" />
-<c:if test="${useKey}">
-	<c:set var="dUseKey" value="${useKey}" scope="request" />
-</c:if>
-
-<!-- tab holder table -->
-<div id="nav">
-	<c:choose>
-		<c:when test="${collection != null}">
-			<c:set var="count" value="0" />
-			<c:forEach var="tab" begin="0" items="${collection}">
-				<c:set var="count" value="${count+1}" />
-				<c:choose>
-					<c:when test="${dUseKey}">
-						<lams:Tab id="${count}" key="${tab}" />
-					</c:when>
-					<c:otherwise>
-						<lams:Tab id="${count}" value="${tab}" />
-					</c:otherwise>
-				</c:choose>
-			</c:forEach>
-		</c:when>
-		<c:otherwise>
-			<jsp:doBody />
-		</c:otherwise>
-	</c:choose>
-</div>
+<%/****************************************************************
+ * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
+ * =============================================================
+ * License Information: http://lamsfoundation.org/licensing/lams/2.0/
+ * 
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 2.0
+ * as published by the Free Software Foundation.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
+ * USA
+ * 
+ * http://www.gnu.org/licenses/gpl.txt
+ * ****************************************************************
+ */
+
+/**
+ * Tabs.tag
+ *	Author: Fiona Malikoff
+ *	Description: Create a hybrid panel header that contains a nav bar that acts like tabs.
+ */
+
+%>
+<%@ 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"%>
+<%@ attribute name="extraControl" required="false" rtexprvalue="true"%>
+
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+
+<c:set var="useActions" value="false" scope="request" />
+<c:if test="${not empty helpToolSignature or not empty helpModule or not empty refreshOnClickAction or not empty extraControl}">
+	<c:set var="useActions" value="true" scope="request" />
+</c:if>
+
+<c:set var="dControl" value="false" scope="request" />
+<c:if test="${control}">
+	<c:set var="dControl" value="${control}" scope="request" />
+</c:if>
+
+<!-- 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>
+             <c:if test="${not empty extraControl}">
+             <li class="navbar-text" >${extraControl}</li>
+             </c:if>
+         </ul>
+         </c:if>
+ 	    
+ 		</div>
+	 </div>
+     </nav>
+     <!-- /top nav -->
+</div>
+<!-- panel div closed by TabBodyArea -->
\ No newline at end of file
Index: lams_tool_forum/web/WEB-INF/tags/headItems.tag
===================================================================
diff -u -r613f0d0d76eb497ed58d7e6836eda34a245425a9 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/WEB-INF/tags/headItems.tag	(.../headItems.tag)	(revision 613f0d0d76eb497ed58d7e6836eda34a245425a9)
+++ lams_tool_forum/web/WEB-INF/tags/headItems.tag	(.../headItems.tag)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -41,7 +41,9 @@
 	<lams:WebAppURL />
 </c:set>
 
-<lams:css style="main"/>
+<lams:css/>
 
 <script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
-<script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/bootstrap.tabcontroller.js"></script>
Index: lams_tool_forum/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd5fee901f5527e516add11b0ec872521de171133 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d5fee901f5527e516add11b0ec872521de171133)
+++ lams_tool_forum/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -178,7 +178,7 @@
       <name>css</name>
       <tag-class>org.lamsfoundation.lams.web.tag.CssTag</tag-class>
       <body-content>empty</body-content>
-
+      
       <attribute>
          <description>Output stylesheet based on the user preferences.</description>
          <name>style</name>
@@ -408,10 +408,18 @@
        <path>/WEB-INF/tags/TabBody.tag</path>
    	</tag-file>
    	<tag-file>
+       <name>TabBodys</name>
+       <path>/WEB-INF/tags/TabBodys.tag</path>
+   	</tag-file>
+   	<tag-file>
        <name>TabName</name>
        <path>/WEB-INF/tags/TabName.tag</path>
    	</tag-file>
    	<tag-file>
+       <name>TabBodyArea</name>
+       <path>/WEB-INF/tags/TabBodyArea.tag</path>
+   	</tag-file>
+   	<tag-file>
        <name>CKEditor</name>
        <path>/WEB-INF/tags/CKEditor.tag</path>
    	</tag-file>
@@ -438,7 +446,31 @@
    	<tag-file>
 	    <name>Page</name>
 		<path>/WEB-INF/tags/Page.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TSTable</name>
+		<path>/WEB-INF/tags/TSTable.tag</path>
+   	</tag-file>    
+  	<tag-file>
+	    <name>Arrow</name>
+		<path>/WEB-INF/tags/Arrow.tag</path>
+   	</tag-file>
+   	<tag-file>
+       <name>AdvancedAccordian</name>
+       <path>/WEB-INF/tags/AdvancedAccordian.tag</path>
    	</tag-file>  
+   	<tag-file>
+   		<name>RestrictedUsageAccordian</name>
+   		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>ImgButtonWrapper</name>
+		<path>/WEB-INF/tags/ImgButtonWrapper.tag</path>
+   	</tag-file>
+   	<tag-file>
+	    <name>TextSearch</name>
+		<path>/WEB-INF/tags/TextSearch.tag</path>
+   	</tag-file>  
    	<tag>
     <name>textarea</name>
     <tag-class>org.lamsfoundation.lams.web.tag.LAMSMultiLinesTextareaTag</tag-class>
@@ -473,5 +505,13 @@
 		<name>head</name>
 	    <path>/WEB-INF/tags/Head.tag</path>
 	</tag-file>
+   	<tag-file>
+       <name>Comments</name>
+       <path>/WEB-INF/tags/Comments.tag</path>
+   	</tag-file>
+   	<tag-file>
+       <name>CommentsAuthor</name>
+       <path>/WEB-INF/tags/CommentsAuthor.tag</path>
+   	</tag-file>
 
 </taglib>
Index: lams_tool_forum/web/common/header.jsp
===================================================================
diff -u -rd3a9876dc1ffb96feebcd861473dd3339e83966e -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/common/header.jsp	(.../header.jsp)	(revision d3a9876dc1ffb96feebcd861473dd3339e83966e)
+++ lams_tool_forum/web/common/header.jsp	(.../header.jsp)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -7,13 +7,12 @@
 </c:set>
 <c:set var="ctxPath" value="${pageContext.request.contextPath}" scope="request" />
 
-<lams:css />
+<lams:css/>
 
 <!-- ********************  javascript ********************** -->
 <script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
-<script type="text/javascript" src="${lams}includes/javascript/prototype.js"></script>
-<script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>
-<script type="text/javascript" src="${tool}includes/javascript/message.js"></script>
 <script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
-<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script> 
-<script type="text/javascript" src="${lams}includes/javascript/jquery.timeago.js"></script>
\ No newline at end of file
+<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/bootstrap.tabcontroller.js"></script>
+<script type="text/javascript" src="${tool}includes/javascript/message.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.timeago.js"></script>
Index: lams_tool_forum/web/common/messages.jsp
===================================================================
diff -u -rd5fee901f5527e516add11b0ec872521de171133 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/common/messages.jsp	(.../messages.jsp)	(revision d5fee901f5527e516add11b0ec872521de171133)
+++ lams_tool_forum/web/common/messages.jsp	(.../messages.jsp)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -1,6 +1,6 @@
 <%-- Error Messages --%>
 <logic:messagesPresent>
-		<lams:Alert id="errorMessages" type="danger" close="false">
+	<lams:Alert id="errorMessages" type="danger" close="false">
         <html:messages id="error">
             <c:out value="${error}" escapeXml="false"/>
         </html:messages>
Index: lams_tool_forum/web/common/tabbedheader.jsp
===================================================================
diff -u -r5e63656a12c02f7476564e278b43ff4ce86ac930 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/common/tabbedheader.jsp	(.../tabbedheader.jsp)	(revision 5e63656a12c02f7476564e278b43ff4ce86ac930)
+++ lams_tool_forum/web/common/tabbedheader.jsp	(.../tabbedheader.jsp)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -16,10 +16,18 @@
 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
-<lams:css style="main"/>
+<lams:css/>
 
 <!-- ********************  javascript ********************** -->
 <script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
-<script type="text/javascript" src="${lams}includes/javascript/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/jquery.tablesorter.js"></script> 
+<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-widgets.js"></script> 
+<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-pager.js"></script> 
+<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/bootstrap.tabcontroller.js"></script>
 <script type="text/javascript" src="${tool}includes/javascript/message.js"></script>
 
Index: lams_tool_forum/web/includes/javascript/message.js
===================================================================
diff -u -rb732d53d7176e05258acb291c209dfeb1e6e6704 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/includes/javascript/message.js	(.../message.js)	(revision b732d53d7176e05258acb291c209dfeb1e6e6704)
+++ lams_tool_forum/web/includes/javascript/message.js	(.../message.js)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -11,31 +11,32 @@
 	    var reqIDVar = new Date();
 	    var param = "reqID="+reqIDVar.getTime();
 	    removeItemAttachmentLoading();
-	    var myAjax = new Ajax.Updater(
-		    	itemAttachmentTargetDiv,
-		    	url,
-		    	{
-		    		method:'get',
-		    		parameters:param,
-		    		onComplete:removeItemAttachmentComplete,
-		    		evalScripts:true
-		    	}
-	    );
+	    
+		$.ajax({
+            type: 'get',
+            url: url,
+            data: param,
+            success: function(data) {
+            	$("#"+itemAttachmentTargetDiv).html(data);
+            	removeItemAttachmentComplete();
+            }
+        });
 	}
 	function removeItemAttachmentLoading(){
 		showBusy(itemAttachmentTargetDiv);
 	}
 	function removeItemAttachmentComplete(){
 		hideBusy(itemAttachmentTargetDiv);
 	}
+
 	function showBusy(targetDiv){
 		if($(targetDiv+"_Busy") != null){
-			Element.show(targetDiv+"_Busy");
+			$(targetDiv+"_Busy").show();
 		}
 	}
 	function hideBusy(targetDiv){
 		if($(targetDiv+"_Busy") != null){
-			Element.hide(targetDiv+"_Busy");
+			$(targetDiv+"_Busy").hide();
 		}				
 	}
 	
Index: lams_tool_forum/web/includes/layout.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/includes/layout.jsp	(.../layout.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_forum/web/includes/layout.jsp	(.../layout.jsp)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -10,21 +10,22 @@
 		<%@ include file="/common/header.jsp"%>
 	</lams:head>
 	<body class="stripes">
+			
+			<c:set var="title">
+			<tiles:useAttribute name="pageTitleKey" scope="request" />
+			<bean:define name="pageTitleKey" id="pTitleKey" type="String" />
+			<logic:notEmpty name="pTitleKey">
+					<fmt:message key="<%=pTitleKey %>" />
+			</logic:notEmpty>
+			</c:set>
 
-			<div id="content">
-				<tiles:useAttribute name="pageTitleKey" scope="request" />
-				<bean:define name="pageTitleKey" id="pTitleKey" type="String" />
-				<logic:notEmpty name="pTitleKey">
-					<h1>
-						<fmt:message key="<%=pTitleKey %>" />
-					</h1>
-				</logic:notEmpty>
+			<lams:Page type="learner" title="${title}">
 
-				<tiles:insert attribute="body" />
-			</div>
+			<tiles:insert attribute="body" />
 
 			<div id="footer">
 			</div>
 
+			</lams:Page>
 	</body>
 </lams:html>
Index: lams_tool_forum/web/includes/tablayout.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/includes/tablayout.jsp	(.../tablayout.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_forum/web/includes/tablayout.jsp	(.../tablayout.jsp)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -13,19 +13,8 @@
 	</lams:head>
 
 	<body class="stripes" onLoad="init()">
-		<div id="page">
 	
-				<tiles:useAttribute name="pageTitleKey" scope="request" />
-				<bean:define name="pageTitleKey" id="pTitleKey" type="String" />
-				<logic:notEmpty name="pTitleKey">
-					<h1>
-						<fmt:message key="<%=pTitleKey %>" />
-					</h1>
-				</logic:notEmpty>
-
-				<tiles:insert attribute="body" />
-
-			<div id="footer"></div>
-		</div>
+		<tiles:insert attribute="body" />
+		
 	</body>
 </lams:html>
Index: lams_tool_forum/web/jsps/authoring/addCondition.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/jsps/authoring/addCondition.jsp	(.../addCondition.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_forum/web/jsps/authoring/addCondition.jsp	(.../addCondition.jsp)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -5,43 +5,52 @@
 <lams:html>
 	<lams:head>
 		<%@ include file="/common/header.jsp"%>
-		<lams:css style="main" />
+		<lams:css/>
 
 	</lams:head>
 	<body class="tabpart">
+	
+	<div class="panel panel-default">
+	<div class="panel-heading">
+		<div class="panel-title"><fmt:message key="label.authoring.conditions.add.condition" /></div>
+	</div>
+
+	<div class="panel-body">	
+	
 		<!-- Basic Info Form-->
 		<%@ include file="/common/messages.jsp"%>
 		<html:form action="/authoring/saveOrUpdateCondition" method="post" styleId="forumConditionForm" focus="displayName" >
 			<html:hidden property="orderId" />
-			<h2 class="no-space-left">
-				<fmt:message key="label.authoring.conditions.add.condition" />
-			</h2>
-
-			<div class="field-name">
-            	<fmt:message key="label.authoring.conditions.condition.name" />
+			
+			<div class="form-group">
+			    <label for="displayName"><fmt:message key="label.authoring.conditions.condition.name" /> *</label>
+			    <html:text tabindex="1" property="displayName" size="51" styleClass="form-control"/>
 			</div>
 
-			<div class="small-space-bottom">
-         		<html:text property="displayName" size="51"/>
-			</div>
 			<%-- Text search form fields are being included --%>
 			<lams:TextSearch wrapInFormTag="false" sessionMapID="${sessionMapID}"  />
-			<h4 class="no-space-left"><fmt:message key="textsearch.topics" /></h4>
+						
+			<h4><fmt:message key="textsearch.topics" /></h4>
+			<div class="checkbox">
 			<logic:iterate name="forumConditionForm" id="itemE" property="possibleItems">
-			  	<html:multibox property="selectedItems">
+				<div class="checkbox">
+				<label>
+			  	<html:multibox property="selectedItems" >
 			    	<bean:write name="itemE" property="value" />
 			  	</html:multibox>
-			    <bean:write name="itemE" property="label" />
-			    <br />
+			    <bean:write name="itemE" property="label"/>
+			    </label>
+			    </div>
 			</logic:iterate>
-
+			
 		</html:form>
 
-		<lams:ImgButtonWrapper>
-			<a href="javascript:;" onclick="javascript:forumConditionForm.submit();" class="button-add-item"><fmt:message
-					key="label.save" /> </a>
-			<a href="javascript:;" onclick="javascript:window.parent.hideConditionMessage();"
-				class="button space-left"><fmt:message key="button.cancel" /> </a>
-		</lams:ImgButtonWrapper>
+		<div class="voffset5">
+			<a href="#" onclick="submitCondition();" class="btn btn-default btn-xs"><fmt:message key="label.save" /> </a>
+			<a href="#" onclick="hideConditionMessage();" class="btn btn-default btn-xs"><fmt:message key="button.cancel" /> </a>
+		</div>
+		
+	</div>
+	</div>
 	</body>
 </lams:html>
Index: lams_tool_forum/web/jsps/authoring/advance.jsp
===================================================================
diff -u -r526771dc8db698cc6e2afd8e23d8d40d996b785a -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/jsps/authoring/advance.jsp	(.../advance.jsp)	(revision 526771dc8db698cc6e2afd8e23d8d40d996b785a)
+++ lams_tool_forum/web/jsps/authoring/advance.jsp	(.../advance.jsp)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -1,33 +1,26 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<%-- If you change this file, remember to update the copy made for CNG-12 --%>
-
 <!--   Advance Tab Content    -->
 
-<p class="small-space-top">
-	<html:checkbox property="forum.lockWhenFinished" styleClass="noBorder" styleId="lockWhenFinished"/>
-	<label for="lockWhenFinished">
-		<fmt:message key="label.authoring.advance.lock.on.finished" />
-	</label>
-</p>
+<div class="checkbox">
+<label for="lockWhenFinished"><html:checkbox property="forum.lockWhenFinished" styleId="lockWhenFinished" />
+<fmt:message key="label.authoring.advance.lock.on.finished" /></label>
+</div>
 
-<p>
-	<html:checkbox property="forum.allowEdit" styleClass="noBorder" styleId="allowEdit"/>
-	<label for="allowEdit">
-		<fmt:message key="label.authoring.advance.allow.edit" />
-	</label>
-</p>
+<div class="checkbox">
+<label for="allowEdit"><html:checkbox property="forum.allowEdit" styleId="allowEdit" />
+<fmt:message key="label.authoring.advance.allow.edit" /></label>
+</div>
 
-<p>
-	<html:checkbox property="forum.allowRateMessages" styleClass="noBorder" styleId="allowRateMessages" onclick="checkRating()" />
-	<label for="allowRateMessages">
-		<fmt:message key="label.authoring.advance.allow.rate.postings" />
-	</label>
-</p>
+<div class="checkbox">
+<label for="allowRateMessages"><html:checkbox property="forum.allowRateMessages" styleId="allowRateMessages"  onclick="checkRating()"/>
+<fmt:message key="label.authoring.advance.allow.rate.postings" /></label>
+</div>
 
-<p style="margin-left:60px;">
-	<fmt:message key="label.authoring.advance.minimum.reply" />
-	<html:select property="forum.minimumRate" styleId="minimumRate"  onmouseup="validateRatings(true);">
+<div class="form-inline loffset20">
+	<div class="form-group">
+	<label for="minimumRate"><fmt:message key="label.authoring.advance.minimum.reply" /></label>
+	<html:select property="forum.minimumRate" styleId="minimumRate"  onmouseup="validateRatings(true);" styleClass="form-control input-sm">
 		<html:option value="0">
 			<fmt:message key="label.authoring.advance.no.minimum" />
 		</html:option>
@@ -42,9 +35,10 @@
 		<html:option value="9">9</html:option>
 		<html:option value="10">10</html:option>
 	</html:select>
-
-	<fmt:message key="label.authoring.advance.maximum.reply" />
-	<html:select property="forum.maximumRate" styleId="maximumRate"   onmouseup="validateRatings(false);">
+	</div>
+	<div class="form-group">
+	<label for="maximumRate"><fmt:message key="label.authoring.advance.maximum.reply" /></label>
+	<html:select property="forum.maximumRate" styleId="maximumRate"   onmouseup="validateRatings(false);"  styleClass="form-control input-sm">
 		<html:option value="0">
 			<fmt:message key="label.authoring.advance.no.maximum" />
 		</html:option>
@@ -59,73 +53,60 @@
 		<html:option value="9">9</html:option>
 		<html:option value="10">10</html:option>
 	</html:select>
-</p>
+	</div>
+</div>
 
-<p>
-	<html:checkbox property="forum.allowUpload" styleId="allow-upload" styleClass="noBorder"/>
-	<label for="allow-upload">
-		<fmt:message key="label.authoring.advance.allow.upload" />
-	</label>
-</p>
+<div class="checkbox">
+<label for="allow-upload"><html:checkbox property="forum.allowUpload" styleId="allow-upload"/>
+<fmt:message key="label.authoring.advance.allow.upload" /></label>
+</div>
 
-<p>
-	<html:checkbox property="forum.allowRichEditor" styleId="rich-editor" styleClass="noBorder"/>
-	<label for="rich-editor">
-		<fmt:message key="label.authoring.advance.use.richeditor" />
-	</label>
-</p>
+<div class="checkbox">
+<label for="rich-editor"><html:checkbox property="forum.allowRichEditor" styleId="rich-editor"/>
+<fmt:message key="label.authoring.advance.use.richeditor" /></label>
+</div>
 
-<p>
-	<html:checkbox property="forum.limitedMinCharacters" styleId="limited-min-characters" styleClass="noBorder"/>
-	<label for="limited-min-characters">
-		<fmt:message key="label.authoring.advance.min.limited.input" />
-	</label>
+<div class="checkbox">
+<label for="limited-min-characters"><html:checkbox property="forum.limitedMinCharacters" styleId="limited-min-characters"/>
+<fmt:message key="label.authoring.advance.min.limited.input" />
+</label>
+<html:text property="forum.minCharacters" styleId="min-characters"  styleClass="form-control form-control-inline input-sm"/>
+</div>
 
-	<html:text property="forum.minCharacters" styleId="min-characters" />
-</p>
+<div class="checkbox">
+<label for="limited-max-characters"><html:checkbox property="forum.limitedMaxCharacters" styleId="limited-max-characters"/>
+<fmt:message key="label.authoring.advance.limited.input" /></label>
+<html:text property="forum.maxCharacters" styleId="max-characters"  styleClass="form-control form-control-inline input-sm"/>
+</div>
 
-<p>
-	<html:checkbox property="forum.limitedMaxCharacters" styleId="limited-max-characters" styleClass="noBorder"/>
-	<label for="limited-max-characters">
-		<fmt:message key="label.authoring.advance.limited.input" />
-	</label>
+<div class="form-group">
+<label><fmt:message key="label.authoring.advanced.send.emails.to" /></label>
+<div class="form-inline">
+	<div class="checkbox loffset20">
+	<label for="notifyLearnersOnForumPosting"><html:checkbox property="forum.notifyLearnersOnForumPosting" styleId="notifyLearnersOnForumPosting"/>&nbsp;
+	<fmt:message key="label.authoring.advanced.learners" /></label>
+	</div>
+	<div class="checkbox loffset10">
+	<label for="notifyTeachersOnForumPosting"><html:checkbox property="forum.notifyTeachersOnForumPosting" styleId="notifyTeachersOnForumPosting"/>&nbsp;
+	<fmt:message key="label.authoring.advanced.teachers" /></label>
+	</div>
+</div>
+</div>
 
-	<html:text property="forum.maxCharacters" styleId="max-characters" />
-</p>
+<div class="checkbox">
+<label for="notifyLearnersOnMarkRelease"><html:checkbox property="forum.notifyLearnersOnMarkRelease" styleId="notifyLearnersOnMarkRelease"/>
+<fmt:message key="label.authoring.advanced.notify.mark.release" /></label>
+</div>
 
-<p style="margin-bottom: 15px;"><fmt:message key="label.authoring.advanced.send.emails.to" /> </p>
-<p style="margin-left: 60px; ">
-	<html:checkbox property="forum.notifyLearnersOnForumPosting" styleId="notifyLearnersOnForumPosting" styleClass="noBorder"/>
-	<label for="notifyLearnersOnForumPosting">
-		<fmt:message key="label.authoring.advanced.learners" />
-	</label>
-</p>
-<p style="margin-left: 60px;">
-	<html:checkbox property="forum.notifyTeachersOnForumPosting" styleId="notifyTeachersOnForumPosting" styleClass="noBorder"/>
-	<label for="notifyTeachersOnForumPosting">
-		<fmt:message key="label.authoring.advanced.teachers" />
-	</label>
-</p>
+<div class="checkbox">
+<label for="reflectOn"><html:checkbox property="forum.reflectOnActivity"	styleId="reflectOn"/>
+<fmt:message key="advanced.reflectOnActivity" /></label>
+</div>
+<div class="form-group">
+<html:textarea property="forum.reflectInstructions" styleId="reflectInstructions"  styleClass="form-control" rows="3"
+	onkeyup="javascript:turnOnReflect()"/>
+</div>
 
-<p>
-	<html:checkbox property="forum.notifyLearnersOnMarkRelease" styleId="notifyLearnersOnMarkRelease" styleClass="noBorder"/>
-	<label for="notifyLearnersOnMarkRelease">
-		<fmt:message key="label.authoring.advanced.notify.mark.release" />
-	</label>
-</p>
-
-<p>
-	<html:checkbox property="forum.reflectOnActivity" styleClass="noBorder"	styleId="reflectOn"/>
-	<label for="reflectOn">
-		<fmt:message key="advanced.reflectOnActivity" />
-	</label>
-</p>
-
-<p>
-	<span class="space-left"> 
-		<html:textarea property="forum.reflectInstructions" styleId="reflectInstructions" cols="30" rows="3" /> 
-	</span>
-</p>
 <script type="text/javascript">
 	//automatically turn on refect option if there are text input in refect instruction area
 	var ra = document.getElementById("reflectInstructions");
@@ -143,29 +124,28 @@
 	ra.onkeyup = turnOnRefect;
 </script>
 
-<h2>
+<h4>
 	<fmt:message key="message.posting.limiting" />
-</h2>
+</h4>
 
-<p>
-	<html:radio property="forum.allowNewTopic" value="true"
-		onclick="allowNewTopic()" styleId="allowNewTopic1" styleClass="noBorder"/>
-	<label for="allowNewTopic1">
-		<fmt:message key="label.authoring.advance.allow.new.topics" />
-	</label>
-</p>
+<div class="radio">
+<label for="allowNewTopic1">
+<html:radio property="forum.allowNewTopic" value="true"	onclick="allowNewTopic()" styleId="allowNewTopic1"/>
+<fmt:message key="label.authoring.advance.allow.new.topics" />
+</label>
+</div>
 
-<p>
-	<html:radio property="forum.allowNewTopic" value="false"
-		onclick="allowNewTopic()" styleId="allowNewTopic2" styleClass="noBorder"/>
-	<label for="allowNewTopic2">
-		<fmt:message key="label.authoring.advance.number.reply" />
-	</label>
-</p>
+<div class="radio">
+<label for="allowNewTopic2">
+<html:radio property="forum.allowNewTopic" value="false" onclick="allowNewTopic()" styleId="allowNewTopic2"/>
+<fmt:message key="label.authoring.advance.number.reply" />
+</label>
+</div>
 
-<p>
-	<fmt:message key="label.authoring.advance.minimum.reply" />
-	<html:select property="forum.minimumReply" styleId="minimumReply">
+<div class="form-inline loffset20">
+	<div class="form-group">
+	<label for="minimumReply"><fmt:message key="label.authoring.advance.minimum.reply" /></label>
+	<html:select property="forum.minimumReply" styleId="minimumReply" styleClass="form-control input-sm">
 		<html:option value="0">
 			<fmt:message key="label.authoring.advance.no.minimum" />
 		</html:option>
@@ -180,9 +160,11 @@
 		<html:option value="9">9</html:option>
 		<html:option value="10">10</html:option>
 	</html:select>
-
+	</div>
+	<div class="form-group">
+	<label for="maximumReply"><fmt:message key="label.authoring.advance.maximum.reply" /></label>
 	<fmt:message key="label.authoring.advance.maximum.reply" />
-	<html:select property="forum.maximumReply" styleId="maximumReply">
+	<html:select property="forum.maximumReply" styleId="maximumReply" styleClass="form-control input-sm">
 		<html:option value="0">
 			<fmt:message key="label.authoring.advance.no.maximum" />
 		</html:option>
@@ -197,9 +179,9 @@
 		<html:option value="9">9</html:option>
 		<html:option value="10">10</html:option>
 	</html:select>
+	</div>
+</div>
 
-</p>
-
 <script type="text/javascript">
 
 	var limitedMinCharacters = document.getElementById("limited-min-characters");
@@ -303,3 +285,4 @@
 		}
 	}
 </script>
+
Index: lams_tool_forum/web/jsps/authoring/authoring.jsp
===================================================================
diff -u -r281244f5d518e88719ffc871ac71bb03136cb03e -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/jsps/authoring/authoring.jsp	(.../authoring.jsp)	(revision 281244f5d518e88719ffc871ac71bb03136cb03e)
+++ lams_tool_forum/web/jsps/authoring/authoring.jsp	(.../authoring.jsp)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -19,36 +19,42 @@
 
 <html:form action="authoring/update" method="post"
 	styleId="authoringForm" enctype="multipart/form-data" onsubmit="return verifyAllowRateMessagesCheckbox();">
+	<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
 	<html:hidden property="toolContentID" />
 	<html:hidden property="sessionMapID" />
 	<html:hidden property="contentFolderID" />
 	<html:hidden property="currentTab" styleId="currentTab" />
 	<input type="hidden" name="mode" value="author">
+	
+<c:set var="title"><fmt:message key="activity.title" /></c:set>
+<lams:Page title="${title}" type="navbar">
+	
+	<lams:Tabs control="true" title="${title}" helpToolSignature="<%= ForumConstants.TOOL_SIGNATURE %>" helpModule="authoring">
+		<lams:Tab id="1" key="authoring.tab.basic" />
+		<lams:Tab id="2" key="authoring.tab.advanced" />
+		<lams:Tab id="3" key="authoring.tab.conditions" />
+	</lams:Tabs>    
 
-	<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
-	<div id="header">
-		<lams:Tabs useKey="true" control="true">
-			<lams:Tab id="1" key="authoring.tab.basic" />
-			<lams:Tab id="2" key="authoring.tab.advanced" />
-			<lams:Tab id="3" key="authoring.tab.conditions" />
-		</lams:Tabs>
-	</div>
-	<div id="content">
-
+	<lams:TabBodyArea>
 		<%@ include file="/common/messages.jsp"%>
-		
-		<lams:help toolSignature="<%= ForumConstants.TOOL_SIGNATURE %>" module="authoring"/>
-
-		<lams:TabBody id="1" titleKey="authoring.tab.basic" page="basic.jsp" />
-		<lams:TabBody id="2" titleKey="authoring.tab.advanced" page="advance.jsp" />
-		<lams:TabBody id="3" titleKey="authoring.tab.conditions" page="conditions.jsp" />
-		
+	   
+	    <!--  Set up tabs  -->
+	     <lams:TabBodys>
+			<lams:TabBody id="1" titleKey="authoring.tab.basic" page="basic.jsp" />
+			<lams:TabBody id="2" titleKey="authoring.tab.advanced" page="advance.jsp" />
+			<lams:TabBody id="3" titleKey="authoring.tab.conditions" page="conditions.jsp" />
+	    </lams:TabBodys>
+	
 		<!-- Button Row -->
 		<lams:AuthoringButton formID="authoringForm"
 			clearSessionActionUrl="/clearsession.do"
 			toolSignature="<%=ForumConstants.TOOL_SIGNATURE%>"
 			toolContentID="${formBean.toolContentID}"
 			customiseSessionID="${formBean.sessionMapID}"
 			contentFolderID="${formBean.contentFolderID}" />
-	</div>
+	</lams:TabBodyArea>
+           		
+    <div id="footer"></div>
+    
+</lams:Page>
 </html:form>
Index: lams_tool_forum/web/jsps/authoring/basic.jsp
===================================================================
diff -u -r271d1969c71c45a7e00e068f0b31d610fee8e9c0 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/jsps/authoring/basic.jsp	(.../basic.jsp)	(revision 271d1969c71c45a7e00e068f0b31d610fee8e9c0)
+++ lams_tool_forum/web/jsps/authoring/basic.jsp	(.../basic.jsp)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -9,19 +9,21 @@
 	 * Launches the popup window for the instruction files
 	 */
 	function showMessage(url) {
-		var area=document.getElementById("messageArea");
-		if(area != null){
-			area.style.width="100%";
-			area.src=url;
-			area.style.display="block";
-		}
+		$("#messageArea").load(url, function() {
+			var area=document.getElementById("messageArea");
+			if(area != null){
+				area.style.width="100%";
+				area.style.height="100%";
+				area.style.display="block";
+			}
+			
+			var elem = document.getElementById("saveCancelButtons");
+			if (elem != null) {
+				elem.style.display="none";
+			}
 		
-		var elem = document.getElementById("saveCancelButtons");
-		if (elem != null) {
-			elem.style.display="none";
-		}
-		
-		location.hash = "messageArea";
+			location.hash = "messageArea";
+		});
 	}
 	function hideMessage(){
 		var area=document.getElementById("messageArea");
@@ -45,23 +47,23 @@
 	//The panel of taskList list panel
 	var topicListTargetDiv = "messageListArea";
 	function deleteTopic(topicIndex, sessionMapID){
+
 		var	deletionConfirmed = confirm("<fmt:message key='label.authoring.basic.do.you.want.to.delete'></fmt:message>");
 		
 		if (deletionConfirmed) {
 			var url = "<c:url value="/authoring/deleteTopic.do"/>";
 		    var reqIDVar = new Date();
 			var param = "topicIndex=" + topicIndex +"&reqID="+reqIDVar.getTime()+"&sessionMapID="+sessionMapID;;
 			deleteItemLoading();
-		    var myAjax = new Ajax.Updater(
-		    		topicListTargetDiv,
-			    	url,
-			    	{
-			    		method:'get',
-			    		parameters:param,
-			    		onComplete:deleteItemComplete,
-			    		evalScripts:true
-			    	}
-		    );
+			$.ajax({
+	            type: 'get', 
+	            url: url,
+	            data: param,
+	            success: function(data) {
+	            	$("#messageListArea").html(data);
+	            	deleteItemComplete();
+	            }
+	        });
  		}
 		
 	}
@@ -77,81 +79,74 @@
 	    var reqIDVar = new Date();
 		var param = "topicIndex=" + topicIndex +"&reqID="+reqIDVar.getTime()+"&sessionMapID="+sessionMapID;;
 		deleteItemLoading();
-	    var myAjax = new Ajax.Updater(
-	    		topicListTargetDiv,
-		    	url,
-		    	{
-		    		method:'get',
-		    		parameters:param,
-		    		onComplete:deleteItemComplete,
-		    		evalScripts:true
-		    	}
-	    );
+		$.ajax({
+            type: 'get',
+            url: url,
+            data: param,
+            success: function(data) {
+            	$("#messageListArea").html(data);
+            	deleteItemComplete();
+            }
+        });
 	}
 	function downTopic(topicIndex, sessionMapID){
 		var url = "<c:url value="/authoring/downTopic.do"/>";
 	    var reqIDVar = new Date();
 		var param = "topicIndex=" + topicIndex +"&reqID="+reqIDVar.getTime()+"&sessionMapID="+sessionMapID;;
 		deleteItemLoading();
-	    var myAjax = new Ajax.Updater(
-	    		topicListTargetDiv,
-		    	url,
-		    	{
-		    		method:'get',
-		    		parameters:param,
-		    		onComplete:deleteItemComplete,
-		    		evalScripts:true
-		    	}
-	    );
+		$.ajax({
+            type: 'get',
+            url: url,
+            data: param,
+            success: function(data) {
+            	$("#messageListArea").html(data);
+            	deleteItemComplete();
+            }
+        });
 	}	
 
-	function resizeOnMessageFrameLoad(){
-            	var messageAreaFrame = document.getElementById("messageArea");
-        	messageAreaFrame.style.height=messageAreaFrame.contentWindow.document.body.scrollHeight+'px';
- 	}
+	//Packs additional elements and submits the question form
+	function submitMessage(){
+	
+		if ( typeof CKEDITOR !== 'undefined' ) {
+			for ( instance in CKEDITOR.instances )
+				CKEDITOR.instances[instance].updateElement();
+		}
 
+		var formData = new FormData(document.getElementById("topicFormId"));
+		
+	    $.ajax({ // create an AJAX call...
+			data: formData, 
+	        processData: false, // tell jQuery not to process the data
+	        contentType: false, // tell jQuery not to set contentType
+           	type: $("#topicFormId").attr('method'),
+			url: $("#topicFormId").attr('action'),
+			success: function(data) {
+               $('#messageArea').html(data);
+			}
+	    });
+	}   
 </script>
 
-<table>
-	<tr>
-		<td colspan="2">
-			<div class="field-name">
-				<fmt:message key="label.authoring.basic.title"></fmt:message>
-			</div>
-			<html:text property="forum.title" style="width: 99%;"></html:text>
-		</td>
-	</tr>
-	<tr>
-		<td colspan="2">
-			<div class="field-name">
-				<fmt:message key="label.authoring.basic.instruction"></fmt:message>
-			</div>
-			<lams:CKEditor id="forum.instructions"
-				value="${formBean.forum.instructions}"
-				contentFolderID="${formBean.contentFolderID}"></lams:CKEditor>
-		</td>
-	</tr>
-</table>
+<div class="form-group">
+    <label for="forum.title"><fmt:message key="label.authoring.basic.title"/></label>
+    <html:text property="forum.title" styleClass="form-control"></html:text>
+</div>
+<div class="form-group">
+    <label for="forum.instructions"><fmt:message key="label.authoring.basic.instruction" /></label>
+    <lams:CKEditor id="forum.instructions" value="${formBean.forum.instructions}" contentFolderID="${formBean.contentFolderID}"></lams:CKEditor>
+</div>
 
 <!-- Topics List Row -->
 <div id="messageListArea">
 	<c:set var="sessionMapID" value="${formBean.sessionMapID}" />
 	<%@ include file="/jsps/authoring/message/topiclist.jsp"%>
 </div>
 
-<p class="small-space-bottom">
-	<a
-		href="javascript:showMessage('<html:rewrite page="/authoring/newTopic.do?sessionMapID=${formBean.sessionMapID}"/>');" id="addTopic" 
-		class="button-add-item"> <fmt:message
-			key="label.authoring.create.new.topic" /> 
-	</a>
-</p>
+<div class="form-inline">
+<a href="javascript:showMessage('<html:rewrite page="/authoring/newTopic.do?sessionMapID=${formBean.sessionMapID}"/>');" id="addTopic" 
+		class="btn btn-default btn-sm"><i class="fa fa-plus"></i>&nbsp;<fmt:message key="label.authoring.create.new.topic" /> 
+</a>
+</div>
 
-<p>
-	<iframe
-		onload="javascript:resizeOnMessageFrameLoad();"
-		id="messageArea" name="messageArea"
-		style="width:0px;height:0px;border:0px;display:none" frameborder="no"
-		scrolling="no">
-	</iframe>
-</p>
+<div id="messageArea" name="messageArea" class="voffset10"></div>
Index: lams_tool_forum/web/jsps/authoring/conditionList.jsp
===================================================================
diff -u -r21ce4d0194e8b81e613f4f6e14eb4e8bf53bdf59 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/jsps/authoring/conditionList.jsp	(.../conditionList.jsp)	(revision 21ce4d0194e8b81e613f4f6e14eb4e8bf53bdf59)
+++ lams_tool_forum/web/jsps/authoring/conditionList.jsp	(.../conditionList.jsp)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -3,12 +3,11 @@
 
 
 <div id="conditionList">
-	<h2 class="spacer-left">
-		<fmt:message key="label.authoring.conditions.list.title" />
+	<div>
 		<img src="<html:rewrite page='/images/indicator.gif' />" style="display:none" id="conditionListArea_Busy" />
-	</h2>
+	</div>	
 	
-	<table class="alternative-color" id="conditionTable" cellspacing="0">
+	<table class="table table-striped table-condensed" id="conditionTable" >
 		<tr>
 			<th width="14%" align="left">
 				<fmt:message key="label.authoring.conditions.order" />
@@ -36,62 +35,31 @@
 					${condition.displayName}
 				</td>
 
-				<td width="40px" align="center">
+				<td class="arrows" style="width:5%">
+					<!-- Don't display up icon if first line -->
 					<c:if test="${not status.first}">
-						<img src="<html:rewrite page='/images/uparrow.gif' />"
-							border="0" title="<fmt:message key="label.authoring.up"/>"
-							onclick="upCondition(${status.index},'${sessionMapID}')">
-						<c:if test="${status.last}">
-							<img
-								src="<html:rewrite page='/images/downarrow_disabled.gif' />"
-								border="0" title="<fmt:message key="label.authoring.down"/>">
-						</c:if>
-					</c:if>
-
+		 				<lams:Arrow state="up" title="<fmt:message key='label.authoring.up'/>" onclick="upCondition(${status.index},'${sessionMapID}')"/>
+		 			</c:if>
+					<!-- Don't display down icon if last line -->
 					<c:if test="${not status.last}">
-						<c:if test="${status.first}">
-							<img
-								src="<html:rewrite page='/images/uparrow_disabled.gif' />"
-								border="0" title="<fmt:message key="label.authoring.up"/>">
-						</c:if>
-
-						<img src="<html:rewrite page='/images/downarrow.gif' />"
-							border="0" title="<fmt:message key="label.authoring.down"/>"
-							onclick="downCondition(${status.index},'${sessionMapID}')">
-					</c:if>
+						<lams:Arrow state="down" title="<fmt:message key='label.authoring.down'/>" onclick="downCondition(${status.index},'${sessionMapID}')"/>
+		 			</c:if>
 				</td>
 				
-				<td width="20px">
-					<img src="<html:rewrite page='/images/edit.gif' />"
-						title="<fmt:message key="label.edit" />"
-						onclick="editCondition(${status.index},'${sessionMapID}')" />
-                </td>
-                
-				<td width="20px">
-					<img src="<html:rewrite page='/images/delete.gif' />"
-						title="<fmt:message key="label.delete" />"
-						onclick="deleteCondition(${status.index},'${sessionMapID}')" />
-				</td>
+				<td align="center" style="width:5%"><i class="fa fa-pencil"	title="<fmt:message key="label.edit" />"
+					onclick="editCondition(${status.index},'${sessionMapID}')"></i></td>
+					
+				<td  align="center" style="width:5%"><i class="fa fa-times"	title="<fmt:message key="label.delete" />" 
+					onclick="deleteCondition(${status.index},'${sessionMapID}')"></i></td>
+
 			</tr>
 		</c:forEach>
 	</table>
 </div>
 
-<%-- This script will works when a new resoruce Condition submit in order to refresh "TaskList List" panel. --%>
+<%-- This script will works when a new Condition submit in order to refresh "Condition List" panel. --%>
 <script type="text/javascript">
-	var win = null;
-	try {
-		if (window.parent && window.parent.hideConditionMessage) {
-			win = window.parent;
-		} else if (window.top && window.top.hideConditionMessage) {
-			win = window.top;
-		}
-	} catch(err) {
-		// mute cross-domain iframe access errors
-	}
-	if (win) {
-		win.hideConditionMessage();
-		var obj = win.document.getElementById('conditionsArea');
-		obj.innerHTML= document.getElementById("conditionList").innerHTML;
-	}
+	hideConditionMessage();
+	var obj = document.getElementById('conditionsArea');
+	obj.innerHTML= document.getElementById("conditionList").innerHTML;
 </script>
Index: lams_tool_forum/web/jsps/authoring/conditions.jsp
===================================================================
diff -u -rc081e2b0c9c82fc97d2d39fb7109c9c2f10ff224 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/jsps/authoring/conditions.jsp	(.../conditions.jsp)	(revision c081e2b0c9c82fc97d2d39fb7109c9c2f10ff224)
+++ lams_tool_forum/web/jsps/authoring/conditions.jsp	(.../conditions.jsp)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -8,18 +8,19 @@
 	 * Launches the popup window for the instruction files
 	 */
 	function showConditionMessage(url) {
-		var area=document.getElementById("conditionInputArea");
-		if(area != null){
-			area.style.width="650px";
-			area.style.height="100%";
-			area.src=url;
-			area.style.display="block";
-		}
-		var elem = document.getElementById("saveCancelButtons");
-		if (elem != null) {
-			elem.style.display="none";
-		}
-		location.hash = "conditionInputArea";
+		$("#conditionInputArea").load(url, function() {
+			var area=document.getElementById("conditionInputArea");
+			if(area != null){
+				area.style.width="100%";
+				area.style.height="100%";
+				area.style.display="block";
+			}
+			var elem = document.getElementById("saveCancelButtons");
+			if (elem != null) {
+				elem.style.display="none";
+			}
+			location.hash = "conditionInputArea";
+		});
 	}
 	function hideConditionMessage(){
 		var area=document.getElementById("conditionInputArea");
@@ -44,46 +45,56 @@
 	function deleteCondition(orderId,sessionMapID){
 		var url = "<c:url value="/authoring/removeCondition.do"/>";
 	    var reqIDVar = new Date();
-		var param = "orderId=" + orderId +"&sessionMapID="+sessionMapID;;
-	    var myAjax = new Ajax.Updater(
-		    	conditionListTargetDiv,
-		    	url,
-		    	{
-		    		method:'get',
-		    		parameters:param,
-		    		evalScripts:true
-		    	}
-	    );
+		var param = "orderId=" + orderId +"&sessionMapID="+sessionMapID;
+		$.ajax({
+            type: 'get', 
+            url: url,
+            data: param,
+            success: function(data) {
+            	$("#"+conditionListTargetDiv).html(data);
+            }
+        });
 	}
 	
 	function upCondition(orderId,sessionMapID){
 		var url = "<c:url value="/authoring/upCondition.do"/>";
 	    var reqIDVar = new Date();
 		var param = "orderId=" + orderId + "&sessionMapID="+sessionMapID;;
-	    var myAjax = new Ajax.Updater(
-		    	conditionListTargetDiv,
-		    	url,
-		    	{
-		    		method:'get',
-		    		parameters:param,
-		    		evalScripts:true
-		    	}
-	    );
+		$.ajax({
+            type: 'get', 
+            url: url,
+            data: param,
+            success: function(data) {
+            	$("#"+conditionListTargetDiv).html(data);
+            }
+        });
 	}
 	function downCondition(orderId,sessionMapID){
 		var url = "<c:url value="/authoring/downCondition.do"/>";
 	    var reqIDVar = new Date();
 		var param = "orderId=" + orderId + "&sessionMapID="+sessionMapID;;
-	    var myAjax = new Ajax.Updater(
-		    	conditionListTargetDiv,
-		    	url,
-		    	{
-		    		method:'get',
-		    		parameters:param,
-		    		evalScripts:true
-		    	}
-	    );
+		$.ajax({
+            type: 'get', 
+            url: url,
+            data: param,
+            success: function(data) {
+            	$("#"+conditionListTargetDiv).html(data);
+            }
+        });
 	}
+	
+	//Packs additional elements and submits the question form
+	function submitCondition(){
+	
+	    $.ajax({ // create an AJAX call...
+           	type: $("#forumConditionForm").attr('method'),
+			url: $("#forumConditionForm").attr('action'),
+			data: $("#forumConditionForm").serialize(), 
+			success: function(data) {
+               $('#forumConditionForm').html(data);
+			}
+	    });
+	}   
 
 </script>
 
@@ -93,18 +104,10 @@
 	<c:set var="sessionMapID" value="${formBean.sessionMapID}" />
 	<%@ include file="/jsps/authoring/conditionList.jsp"%>
 </div>
+ 
+ <div class="form-inline">
+	<a href="javascript:showConditionMessage('<html:rewrite page="/authoring/newConditionInit.do?sessionMapID=${formBean.sessionMapID}"/>');" 
+		class="btn btn-default btn-sm"><i class="fa fa-plus"></i>&nbsp;<fmt:message key="label.authoring.conditions.add.condition" /></a> 
+</div>
 
-<p class="small-space-bottom">
-	<a href="javascript:showConditionMessage('<html:rewrite page="/authoring/newConditionInit.do?sessionMapID=${formBean.sessionMapID}"/>');" class="button-add-item">
-	<fmt:message key="label.authoring.conditions.add.condition" /></a> 
-</p>
-
-
-<p>
-	<iframe
-		onload="javascript:this.style.height=this.contentWindow.document.body.scrollHeight+'px'"
-		id="conditionInputArea" name="conditionInputArea"
-		style="width:0px;height:0px;border:0px;display:none" frameborder="no"
-		scrolling="no">
-	</iframe>
-</p>
+<div id="conditionInputArea" name="conditionInputArea" class="voffset10"></div>
Index: lams_tool_forum/web/jsps/authoring/definelater.jsp
===================================================================
diff -u -r3a8e994950328828669db522e276e9181fc37d05 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/jsps/authoring/definelater.jsp	(.../definelater.jsp)	(revision 3a8e994950328828669db522e276e9181fc37d05)
+++ lams_tool_forum/web/jsps/authoring/definelater.jsp	(.../definelater.jsp)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -5,32 +5,36 @@
 
 <script type="text/javascript" src="${tool}includes/javascript/message.js"></script>
 
-<%Set tabs = new HashSet();
-			tabs.add("authoring.tab.basic");
-			pageContext.setAttribute("tabs", tabs);
-
-			%>
 <html:form action="authoring/update" method="post" styleId="authoringForm">
 	<c:set var="formBean" value="<%= request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY) %>" />
 	<html:hidden property="toolContentID" />
 	<html:hidden property="sessionMapID"/>
 	<html:hidden property="mode" value="teacher" />
 	<html:hidden property="contentFolderID" />
 	
-	<div id="header">
-		<lams:Tabs collection="${tabs}" useKey="true" control="true" />
-	</div>
+<lams:Page title="${title}" type="navbar">
 	
-	<div id="content">
+	<lams:Tabs control="true" title="${title}" helpToolSignature="<%= ForumConstants.TOOL_SIGNATURE %>" helpModule="authoring">
+		<lams:Tab id="1" key="authoring.tab.basic" />
+	</lams:Tabs>    
 
+	<lams:TabBodyArea>
 		<%@ include file="/common/messages.jsp"%>
-		
-		<lams:help toolSignature="<%= ForumConstants.TOOL_SIGNATURE %>" module="authoring"/>
-		<lams:TabBody id="1" titleKey="authoring.tab.basic" page="basic.jsp" />
-
+	   
+	    <!--  Set up tabs  -->
+	     <lams:TabBodys>
+			<lams:TabBody id="1" titleKey="authoring.tab.basic" page="basic.jsp" />
+	    </lams:TabBodys>
+	
 		<!-- Button Row -->
 		<lams:AuthoringButton formID="authoringForm" clearSessionActionUrl="/clearsession.do" 
 			toolSignature="<%=ForumConstants.TOOL_SIGNATURE%>" toolContentID="${formBean.toolContentID}" 
 			accessMode="teacher" defineLater="yes" customiseSessionID="${formBean.sessionMapID}"  contentFolderID="${formBean.contentFolderID}"/>
-	</div>
+
+	</lams:TabBodyArea>
+           		
+    <div id="footer"></div>
+    
+</lams:Page>
+
 </html:form>
Index: lams_tool_forum/web/jsps/authoring/header.jsp
===================================================================
diff -u -race8b408295af831e2715b2013d64a000aa09549 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/jsps/authoring/header.jsp	(.../header.jsp)	(revision ace8b408295af831e2715b2013d64a000aa09549)
+++ lams_tool_forum/web/jsps/authoring/header.jsp	(.../header.jsp)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -5,7 +5,6 @@
 <c:set var="tool">
 	<lams:WebAppURL />
 </c:set>
-	<script type="text/javascript" src="${lams}includes/javascript/prototype.js"></script>
 
 <script type="text/javascript">
      //<![CDATA[
Index: lams_tool_forum/web/jsps/authoring/message/create.jsp
===================================================================
diff -u -r613f0d0d76eb497ed58d7e6836eda34a245425a9 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/jsps/authoring/message/create.jsp	(.../create.jsp)	(revision 613f0d0d76eb497ed58d7e6836eda34a245425a9)
+++ lams_tool_forum/web/jsps/authoring/message/create.jsp	(.../create.jsp)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -4,23 +4,13 @@
 <lams:html>
 	<lams:head>
 		<%@ include file="/common/header.jsp"%>
-		<lams:css style="main" />
-		
-		<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/jquery.js"></script>
-		<script type="text/javascript">			
-			$(function() {
-				//change size of an iframe on ckeditor's autogrow 
-				CKEDITOR.instances["message.body"].on("instanceReady", function(e) {
-				    e.editor.on('resize', function(reEvent){
-				    	var iframe = window.parent.document.getElementById("messageArea");
-				    	iframe.style.height = eval(iframe.contentWindow.document.body.scrollHeight) + 'px';
-				    });
-				});
-			});
-		</script>
+		<lams:css />
 	</lams:head>
 	
 	<body>
+		<div class="panel panel-default">
+		<div class="panel-body">
+	
 		<!-- Basic Info Form-->
 		<%@ include file="/common/messages.jsp"%>
 
@@ -29,48 +19,33 @@
 			<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
 			<c:set var="sessionMap" value="${sessionScope[formBean.sessionMapID]}" />
 
-			<div class="field-name">
-				<fmt:message key="message.label.subject" />
-				*
+			<div class="form-group">
+		    <label for="message.subject"><fmt:message key="message.label.subject" /> *</label>
+		    <html:text size="30" tabindex="1" property="message.subject" maxlength="60" styleClass="form-control"/>
+			<html:errors property="message.subject" />
 			</div>
-			<div class="small-space-bottom">
-				<html:text size="30" tabindex="1" property="message.subject" maxlength="60" />
-				<html:errors property="message.subject" />
+			
+			<div class="form-group">
+		    <label for="forum.instructions"><fmt:message key="message.label.body" /> *</label>
+			<c:set var="body" value=""/>
+			<c:if test="${not empty formBean.message}">
+				<c:set var="body" value="${formBean.message.body}"/>
+			</c:if>
+			<lams:CKEditor id="message.body" value="${body}" contentFolderID="${sessionMap.contentFolderID}"/>
+			<html:errors property="message.body" />
 			</div>
 
-			<div class="field-name">
-				<fmt:message key="message.label.body" />
-				*
+			<div class="form-group">
+				<label for="attachmentFile"><fmt:message key="message.label.attachment" /></label>
+				<html:file tabindex="3" property="attachmentFile" styleClass="form-control"/><BR>
+				<html:errors property="message.attachment" />
 			</div>
 
-			<div class="small-space-bottom">
-				<c:set var="body" value=""/>
-				<c:if test="${not empty formBean.message}">
-					<c:set var="body" value="${formBean.message.body}"/>
-				</c:if>
-				<lams:CKEditor id="message.body" value="${body}" width="99%" 
-					contentFolderID="${sessionMap.contentFolderID}" resizeParentFrameName="messageArea"/>
-				<html:errors property="message.body" />
+			<div class="voffset5">
+				<a href="#" onclick="hideMessage()" class="btn btn-default btn-xs"> <fmt:message key="button.cancel" /></a>
+				<a href="#" onclick="submitMessage()" class="btn btn-default btn-xs loffset5"> <fmt:message key="button.add" /> </a>
 			</div>
 
-			<div class="field-name">
-				<fmt:message key="message.label.attachment" />
-			</div>
-
-			<div class="small-space-bottom">
-				<html:file tabindex="3" property="attachmentFile" /><BR>
-				<html:errors property="message.attachment" />
-			</div>
-
-			<lams:ImgButtonWrapper>
-				<a href="#" onclick="javascript:window.parent.hideMessage()"
-					class="button space-left"> <fmt:message key="button.cancel" />
-				</a>
-				&nbsp;
-				<a href="#" onclick="getElementById('topicFormId').submit();"
-					class="button-add-item"> <fmt:message key="button.add" /> </a>
-			</lams:ImgButtonWrapper>
-
 		</html:form>
 	</body>
 </lams:html>
Index: lams_tool_forum/web/jsps/authoring/message/edit.jsp
===================================================================
diff -u -r613f0d0d76eb497ed58d7e6836eda34a245425a9 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/jsps/authoring/message/edit.jsp	(.../edit.jsp)	(revision 613f0d0d76eb497ed58d7e6836eda34a245425a9)
+++ lams_tool_forum/web/jsps/authoring/message/edit.jsp	(.../edit.jsp)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -4,28 +4,16 @@
 <lams:html>
 	<lams:head>
 		<%@ include file="/common/header.jsp"%>
-		<lams:css style="main" />
+		<lams:css/>
 		<script type="text/javascript">
 			var removeItemAttachmentUrl = "<c:url value="/authoring/deleteAttachment.do"/>";
 		</script>
-
-		<script type="text/javascript" src="${tool}includes/javascript/message.js"></script>
-		<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/jquery.js"></script>
-		<script type="text/javascript">			
-			$(function() {
-				//change size of an iframe on ckeditor's autogrow 
-				CKEDITOR.instances["message.body"].on("instanceReady", function(e) {
-				    e.editor.on('resize', function(reEvent){
-				    	var iframe = window.parent.document.getElementById("messageArea");
-				    	iframe.style.height = eval(iframe.contentWindow.document.body.scrollHeight) + 'px';
-				    });
-				});
-			});
-		</script>
-
 	</lams:head>
 	<body>
 
+		<div class="panel panel-default">
+		<div class="panel-body">
+	
 		<!-- Basic Info Form-->
 		<%@ include file="/common/messages.jsp"%>
 		<html:form action="/authoring/updateTopic.do" focus="message.subject" enctype="multipart/form-data" styleId="topicFormId">
@@ -34,46 +22,40 @@
 			<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
 			<c:set var="sessionMap" value="${sessionScope[formBean.sessionMapID]}" />
 
-			<div class="field-name">
-				<fmt:message key="message.label.subject" />
-				*
+			<div class="form-group">
+		    <label for="message.subject"><fmt:message key="message.label.subject" /> *</label>
+		    <html:text size="30" tabindex="1" property="message.subject" maxlength="60" styleClass="form-control"/>
+			<html:errors property="message.subject" />
 			</div>
-			<div class="small-space-bottom">
-				<html:text size="30" tabindex="1" property="message.subject" maxlength="60" />
-				<html:errors property="message.subject" />
-			</div>
-
-			<div class="field-name">
-				<fmt:message key="message.label.body" />
-				*
-			</div>
-			<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
-
-			<div class="small-space-bottom">
-				<lams:CKEditor id="message.body" value="${formBean.message.body}" width="99%"
-					contentFolderID="${sessionMap.contentFolderID}" resizeParentFrameName="messageArea" />
-				<html:errors property="message.body" />
-			</div>
 			
-			<div class="field-name">
-				<fmt:message key="message.label.attachment" />
+			<div class="form-group">
+		    <label for="forum.instructions"><fmt:message key="message.label.body" /> *</label>
+			<c:set var="body" value=""/>
+			<c:if test="${not empty formBean.message}">
+				<c:set var="body" value="${formBean.message.body}"/>
+			</c:if>
+			<lams:CKEditor id="message.body" value="${body}" contentFolderID="${sessionMap.contentFolderID}" />
+			<html:errors property="message.body" />
 			</div>
+
 			<c:set var="itemAttachment"
 				value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
-										
-			<div id="itemAttachmentArea" class="small-space-bottom">
-				<%@ include file="/jsps/authoring/parts/msgattachment.jsp"%>
+			<div class="form-group">
+				<label for="attachmentFile"><fmt:message key="message.label.attachment" /></label>
+				<div id="itemAttachmentArea" class="small-space-bottom">
+					<%@ include file="/jsps/authoring/parts/msgattachment.jsp"%>
+				</div>
 			</div>
 
-			<lams:ImgButtonWrapper>
-				<a href="#" onclick="javascript:window.parent.hideMessage()"
-					class="button space-left"> <fmt:message key="button.cancel" />
-				</a>
-				&nbsp;
-				<a href="#" onclick="getElementById('topicFormId').submit();"
-					class="button-add-item"> <fmt:message key="button.add" /> </a>
-					
-			</lams:ImgButtonWrapper>
+			<div class="voffset5">
+				<a href="#" onclick="hideMessage()" class="btn btn-default btn-xs"> <fmt:message key="button.cancel" /></a>
+				<a href="#" onclick="submitMessage()" class="btn btn-default btn-xs loffset5"> <fmt:message key="button.add" /> </a>
+			</div>
+
 		</html:form>
+
+		</div>
+		</div>
+
 	</body>
 </lams:html>
Index: lams_tool_forum/web/jsps/authoring/message/topiclist.jsp
===================================================================
diff -u -r21ce4d0194e8b81e613f4f6e14eb4e8bf53bdf59 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/jsps/authoring/message/topiclist.jsp	(.../topiclist.jsp)	(revision 21ce4d0194e8b81e613f4f6e14eb4e8bf53bdf59)
+++ lams_tool_forum/web/jsps/authoring/message/topiclist.jsp	(.../topiclist.jsp)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -3,7 +3,7 @@
 	<lams:WebAppURL />
 </c:set>
 <div id="topiclist">
-	<table class="alternative-color" cellspacing="0">
+	<table class="table table-striped table-condensed">
 		<tr>
 			<th colspan="4"><fmt:message key="lable.topic.title.subject"/></th>
 		</tr>
@@ -21,62 +21,31 @@
 						<img src="<html:rewrite page="/images/paperclip.gif" />">
 					</c:if>
 				</td>
-				
-				<td width="40px" align="center">
+			
+				<td class="arrows" style="width:5%">
+					<!-- Don't display up icon if first line -->
 					<c:if test="${not status.first}">
-						<img src="<html:rewrite page='/images/uparrow.gif'/>"
-							border="0" title="<fmt:message key="label.authoring.up"/>"
-							onclick="upTopic(${status.index},'${sessionMapID}')">
-						<c:if test="${status.last}">
-							<img
-								src="<html:rewrite page='/images/downarrow_disabled.gif'/>"
-								border="0" title="<fmt:message key="label.authoring.down"/>">
-						</c:if>
-					</c:if>
-
+		 				<lams:Arrow state="up" title="<fmt:message key='label.authoring.up'/>" onclick="upTopic(${status.index},'${sessionMapID}')"/>
+		 			</c:if>
+					<!-- Don't display down icon if last line -->
 					<c:if test="${not status.last}">
-						<c:if test="${status.first}">
-							<img
-								src="<html:rewrite page='/images/uparrow_disabled.gif'/>"
-								border="0" title="<fmt:message key="label.authoring.up"/>">
-						</c:if>
-
-						<img src="<html:rewrite page='/images/downarrow.gif'/>"
-							border="0" title="<fmt:message key="label.authoring.down"/>"
-							onclick="downTopic(${status.index},'${sessionMapID}')">
-					</c:if>
+						<lams:Arrow state="down" title="<fmt:message key='label.authoring.down'/>" onclick="downTopic(${status.index},'${sessionMapID}')"/>
+		 			</c:if>
 				</td>
 				
-				<td width="20px">
-					<img src="${tool}images/edit.gif"
-						title="<fmt:message key="label.edit" />" id="edit${status.index}" 
-						onclick="editTopic(${status.index},'${sessionMapID}')" />
-                </td>
-                
-				<td width="20px">
-					<img src="${tool}images/delete.gif"
-						title="<fmt:message key="label.delete" />" id="delete${status.index}" 
-						onclick="deleteTopic(${status.index},'${sessionMapID}')" />
-				</td>				
+				<td align="center" style="width:5%"><i class="fa fa-pencil"	title="<fmt:message key="label.edit" />" id="edit${status.index}"
+					onclick="editTopic(${status.index},'${sessionMapID}')"></i></td>
+					
+				<td  align="center" style="width:5%"><i class="fa fa-times"	title="<fmt:message key="label.delete" />" id="delete${status.index}" 
+					onclick="deleteTopic(${status.index},'${sessionMapID}')"></i></td>
+				
 			</tr>
 		</c:forEach>
 	</table>
 </div>
-<%-- This script will works when a new resoruce item submit in order to refresh "Resource List" panel. --%>
-<script lang="javascript">
-	var win = null;
-	try {
-		if (window.parent && window.parent.hideMessage) {
-			win = window.parent;
-		} else if (window.top && window.top.hideMessage) {
-			win = window.top;
-		}
-	} catch(err) {
-		// mute cross-domain iframe access errors
-	}
-	if (win) {
-		win.hideMessage();
-		var obj = win.document.getElementById('messageListArea');
-		obj.innerHTML= document.getElementById("topiclist").innerHTML;
-	}
+<%-- This script will works when a new topic is submitted in order to refresh "Topic List" panel. --%>
+<script type="text/javascript">
+	hideMessage();
+	var obj = document.getElementById('messageListArea');
+	obj.innerHTML= document.getElementById("topiclist").innerHTML;
 </script>
Index: lams_tool_forum/web/jsps/authoring/parts/msgattachment.jsp
===================================================================
diff -u -r2dbea686e81e6a5843328d8c0bd814b63e64d36f -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/jsps/authoring/parts/msgattachment.jsp	(.../msgattachment.jsp)	(revision 2dbea686e81e6a5843328d8c0bd814b63e64d36f)
+++ lams_tool_forum/web/jsps/authoring/parts/msgattachment.jsp	(.../msgattachment.jsp)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -14,7 +14,7 @@
 					</a>
 				</c:forEach>	
 				
-				<a href="#" onclick="removeItemAttachment()" class="space-left"> 
+				<a href="#" onclick="removeItemAttachment()" class="btn btn-default btn-xs"> 
 					<fmt:message key="label.delete" /> 
 				</a>
 				
@@ -25,6 +25,6 @@
 
 	</c:when>
 	<c:otherwise>
-		<input type="file" name="attachmentFile" />
+		<input type="file" name="attachmentFile" class="form-control" />
 	</c:otherwise>
 </c:choose>
Index: lams_tool_forum/web/jsps/monitoring/editactivity.jsp
===================================================================
diff -u -rac65e701de5276fc14c0dfeccb2fa8c3a9237bf3 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/jsps/monitoring/editactivity.jsp	(.../editactivity.jsp)	(revision ac65e701de5276fc14c0dfeccb2fa8c3a9237bf3)
+++ lams_tool_forum/web/jsps/monitoring/editactivity.jsp	(.../editactivity.jsp)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -1,10 +1,17 @@
 <%@ include file="/common/taglibs.jsp"%>
 <html:errors />
-<table cellpadding="0">
+
+<c:if test="${!isPageEditable}">
+	<lams:Alert type="warn" id="no-edit" close="false">
+		<fmt:message key="message.monitoring.edit.activity.not.editable" />
+	</lams:Alert>
+</c:if>
+
+
+<table class="table table-condensed">
 	<tr>
 		<td class="field-name" width="10%" valign="top">
 			<fmt:message key="label.authoring.basic.title" />
-			:
 		</td>
 		<td>
 			<c:out value="${title}" escapeXml="true" />
@@ -14,33 +21,20 @@
 	<tr>
 		<td class="field-name" width="10%" valign="top" NOWRAP>
 			<fmt:message key="label.authoring.basic.instruction" />
-			:
 		</td>
 		<td>
 			<c:out value="${instruction}" escapeXml="false" />
 		</td>
 	</tr>
-
-	<tr>
-		<td colspan="2">
-			<c:set var="isPageEditable" value="${isPageEditable}" />
-			<c:choose>
-				<c:when test='${isPageEditable == "true"}'>
-					<c:url value="/defineLater.do" var="authoringUrl">
-						<c:param name="contentFolderID" value="${contentFolderID}" />
-						<c:param name="toolContentID" value="${toolContentID}" />
-					</c:url>
-					<html:link href="javascript:;" onclick="launchPopup('${authoringUrl}','definelater')" styleClass="button">
-						<fmt:message key="label.monitoring.edit.activity.edit" />
-					</html:link>
-				</c:when>
-				<c:otherwise>
-					<div align="center">
-						<B><fmt:message key="message.monitoring.edit.activity.not.editable" /></B>
-					</div>
-				</c:otherwise>
-			</c:choose>
-		</td>
-	</tr>
 </table>
 
+<c:if test='${isPageEditable}'>
+	<c:url value="/defineLater.do" var="authoringUrl">
+		<c:param name="contentFolderID" value="${contentFolderID}" />
+		<c:param name="toolContentID" value="${toolContentID}" />
+	</c:url>
+	<html:link href="javascript:;" onclick="launchPopup('${authoringUrl}','definelater')" styleClass="btn btn-default">
+		<fmt:message key="label.monitoring.edit.activity.edit" />
+	</html:link>
+</c:if>
+
Index: lams_tool_forum/web/jsps/monitoring/header.jsp
===================================================================
diff -u -r2b4141f8f15fe552ea1ba29d0b302544943cb6b0 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/jsps/monitoring/header.jsp	(.../header.jsp)	(revision 2b4141f8f15fe552ea1ba29d0b302544943cb6b0)
+++ lams_tool_forum/web/jsps/monitoring/header.jsp	(.../header.jsp)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -29,7 +29,7 @@
 	}
 	
 	function doStatistic(){
-		var url = "<c:url value="/monitoring/statistic.do"/>";
+		var url = "<c:url value="/monitoring/statistic.do?sessionMapID=${sessionMapID}"/>";
 		
 		$("#statisticArea_Busy").show();
 		$("#statisticArea").load(
Fisheye: Tag 26a0240d04a160036cc15d1adca267cd1e9c42e5 refers to a dead (removed) revision in file `lams_tool_forum/web/jsps/monitoring/message/viewtopic.jsp'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag 26a0240d04a160036cc15d1adca267cd1e9c42e5 refers to a dead (removed) revision in file `lams_tool_forum/web/jsps/monitoring/message/viewtopictree.jsp'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_tool_forum/web/jsps/monitoring/monitoring.jsp
===================================================================
diff -u -r2b4141f8f15fe552ea1ba29d0b302544943cb6b0 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/jsps/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 2b4141f8f15fe552ea1ba29d0b302544943cb6b0)
+++ lams_tool_forum/web/jsps/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -4,19 +4,25 @@
 <c:set var="lams"><lams:LAMSURL /></c:set>
 
 <input type="hidden" name="currentTab" id="currentTab" />
-<div id="header">
 
-	<lams:Tabs control="true">
+<c:set var="title"><fmt:message key="activity.title" /></c:set>
+<lams:Page title="${title}" type="navbar">
+
+	<lams:Tabs title="${title}" control="true" helpToolSignature="<%= ForumConstants.TOOL_SIGNATURE %>" helpModule="monitoring">
 		<lams:Tab id="1" key="monitoring.tab.summary" />
 		<lams:Tab id="2" key="monitoring.tab.edit.activity" />
 		<lams:Tab id="3" key="monitoring.tab.statistics" />
 	</lams:Tabs>
-</div>
-
-<div id="content">
-	<lams:help toolSignature="<%= ForumConstants.TOOL_SIGNATURE %>" module="monitoring"/>
-
+	
+	<lams:TabBodyArea>
+	<lams:TabBodys>
 	<lams:TabBody id="1" titleKey="monitoring.tab.summary" page="summary.jsp" />
 	<lams:TabBody id="2" titleKey="monitoring.tab.edit.activity" page="editactivity.jsp" />
 	<lams:TabBody id="3" titleKey="monitoring.tab.statistics" page="statistic.jsp" />
-</div>
+	</lams:TabBodys>
+	</lams:TabBodyArea>
+	
+	<div id="footer" />
+	
+</lams:Page>
+
Index: lams_tool_forum/web/jsps/monitoring/parts/advanceOptions.jsp
===================================================================
diff -u -r2b4141f8f15fe552ea1ba29d0b302544943cb6b0 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/jsps/monitoring/parts/advanceOptions.jsp	(.../advanceOptions.jsp)	(revision 2b4141f8f15fe552ea1ba29d0b302544943cb6b0)
+++ lams_tool_forum/web/jsps/monitoring/parts/advanceOptions.jsp	(.../advanceOptions.jsp)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -1,15 +1,8 @@
-<h1 class="collapsed-headers">
-	<img src="<lams:LAMSURL/>/images/tree_closed.gif" id="treeIcon" onclick="javascript:toggleAdvancedOptionsVisibility(document.getElementById('advancedDiv'), document.getElementById('treeIcon'), '<lams:LAMSURL/>');" />
+<c:set var="adTitle"><fmt:message key="monitor.summary.th.advancedSettings" /></c:set>
+<lams:AdvancedAccordian title="${adTitle}">
+             
+<table class="table table-striped table-condensed">
 
-	<a href="javascript:toggleAdvancedOptionsVisibility(document.getElementById('advancedDiv'), document.getElementById('treeIcon'),'<lams:LAMSURL/>');" >
-		<fmt:message key="monitor.summary.th.advancedSettings" />
-	</a>
-</h1>
-
-<div class="monitoring-advanced" id="advancedDiv" style="display:none">
-
-	<table class="alternative-color">	
-	
 		<tr>
 			<td>
 				<fmt:message key="label.authoring.advance.lock.on.finished" />
@@ -291,5 +284,5 @@
 			</c:when>
 		</c:choose>
 		
-	</table>
-</div>
\ No newline at end of file
+</table>
+</lams:AdvancedAccordian>
Index: lams_tool_forum/web/jsps/monitoring/parts/daterestriction.jsp
===================================================================
diff -u -r2b4141f8f15fe552ea1ba29d0b302544943cb6b0 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/jsps/monitoring/parts/daterestriction.jsp	(.../daterestriction.jsp)	(revision 2b4141f8f15fe552ea1ba29d0b302544943cb6b0)
+++ lams_tool_forum/web/jsps/monitoring/parts/daterestriction.jsp	(.../daterestriction.jsp)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -1,42 +1,29 @@
 <%@include file="/common/taglibs.jsp"%>
 
-<h1 class="collapsed-headers">
-	<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>
-
-<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 forum.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: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:setSubmissionDeadline();" styleClass="btn btn-default">
 			<fmt:message key="monitor.summary.set.restriction" />
 		</html:link>
+		</div>
 	</div>
 
 	<div id="dateInfoDiv" <c:if test='${empty forum.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:removeSubmissionDeadline();" styleClass="button">
+		</label>
+		<html:link	href="javascript:removeSubmissionDeadline();" styleClass="btn btn-default">
 			<fmt:message key="monitor.summary.unset.restriction" />
 		</html:link>
 	</div>
 
-</div>
\ No newline at end of file
+</lams:RestrictedUsageAccordian>
\ No newline at end of file
Index: lams_tool_forum/web/jsps/monitoring/statisticpart.jsp
===================================================================
diff -u -r2b4141f8f15fe552ea1ba29d0b302544943cb6b0 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/jsps/monitoring/statisticpart.jsp	(.../statisticpart.jsp)	(revision 2b4141f8f15fe552ea1ba29d0b302544943cb6b0)
+++ lams_tool_forum/web/jsps/monitoring/statisticpart.jsp	(.../statisticpart.jsp)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -1,7 +1,16 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<%-- If you change this file, remember to update the copy made for CNG-12 --%>
+<c:if test="${not empty param.sessionMapID}">
+	<c:set var="sessionMapID" value="${param.sessionMapID}" />
+</c:if>
+<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 
+<c:if test="${empty topicList}">
+	<lams:Alert type="info" id="no-session-summary" close="false">
+		<fmt:message key="message.monitoring.summary.no.session" />
+	</lams:Alert>
+</c:if>
+	
 <c:forEach var="element" items="${topicList}">
 	<c:set var="toolSessionDto" value="${element.key}" />
 	<c:set var="sessionTopicList" value="${element.value}" />
@@ -16,12 +25,41 @@
 		</c:if>
 	</c:forEach>
 
-	<h2>
-		<fmt:message key="message.session.name" />: <c:out value="${toolSessionDto.sessionName}" />
-	</h2>
-	
-	<table cellpadding="0" class="alternative-color">
+	<c:if test="${sessionMap.isGroupedActivity}">	
+	    <div class="panel panel-default" >
+        <div class="panel-heading" id="heading${toolSessionDto.sessionID}">
+			<span class="panel-title">
+				<fmt:message key="message.session.name" />: <c:out value="${toolSessionDto.sessionName}" />
+			</span>
+        </div>
+
+        <div class="panel-body">
+	</c:if>
+
+	<h4><fmt:message key="monitoring.tab.summary"/></h4>
+	<table class="table table-condensed table-no-border">
 		<tr>
+			<td class="field-name" width="30%">
+				<fmt:message key="lable.monitoring.statistic.total.message" />
+			</td>
+			<td>
+				<c:out value="${sessionTotalMessage}" />
+			</td>
+			
+		</tr>
+		<tr>
+			<td class="field-name" width="30%">
+				<fmt:message key="label.monitoring.statistic.average.mark" />
+			</td>
+			
+			<td>
+				<fmt:formatNumber value="${sessionMarkAverage}"  maxFractionDigits="2"/>
+			</td>
+		</tr>
+	</table>
+
+	<table class="table table-condensed table-striped">
+		<tr>
 			<th scope="col" width="50%">
 				<fmt:message key="lable.topic.title.subject" />
 			</th>
@@ -36,7 +74,7 @@
 			<tr>
 				<td valign="MIDDLE" width="48%">
 					<c:set var="viewtopic">
-						<html:rewrite page="/monitoring/viewTopicTree.do?topicID=${topic.message.uid}&create=${topic.message.created.time}" />
+						<html:rewrite page="/learning/viewTopic.do?sessionMapID=${sessionMapID}&toolSessionID=${toolSessionDto.sessionID}&topicID=${topic.message.uid}&mode=teacher&hideReflection=true&pageLastId=0" />
 					</c:set>
 					<html:link href="javascript:launchPopup('${viewtopic}');">
 						<c:out value="${topic.message.subject}" />
@@ -52,24 +90,10 @@
 		</c:forEach>
 	</table>
 
-	<table cellpadding="0" style="padding-left: 20px;">
-		<tr>
-			<td class="field-name" width="30%">
-				<fmt:message key="lable.monitoring.statistic.total.message" />
-			</td>
-			<td>
-				<c:out value="${sessionTotalMessage}" />
-			</td>
-			
-		</tr>
-		<tr>
-			<td class="field-name" width="30%">
-				<fmt:message key="label.monitoring.statistic.average.mark" />
-			</td>
-			
-			<td>
-				<fmt:formatNumber value="${sessionMarkAverage}"  maxFractionDigits="2"/>
-			</td>
-		</tr>
-	</table>
+	<c:if test="${sessionMap.isGroupedActivity}">	
+		</div>
+		</div>
+	</c:if>
+
 </c:forEach>
+
Index: lams_tool_forum/web/jsps/monitoring/summary.jsp
===================================================================
diff -u -r3e9e058a240c59fb1ff5cab55b5f42ed481b1b8d -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/jsps/monitoring/summary.jsp	(.../summary.jsp)	(revision 3e9e058a240c59fb1ff5cab55b5f42ed481b1b8d)
+++ lams_tool_forum/web/jsps/monitoring/summary.jsp	(.../summary.jsp)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -7,42 +7,11 @@
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 <c:set var="forum" value="${sessionMap.forum}" />
 
-<%-- If you change this file, remember to update the copy made for CNG-12 --%>
-
 <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.tablesorter.theme-blue.css" rel="stylesheet">
+<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme.bootstrap.css">
 <link type="text/css" href="${lams}css/jquery.tablesorter.pager.css" rel="stylesheet">
-
-<style media="screen,projection" type="text/css">
-	#message-area {
-		margin-bottom: 20px;
-		display: none;
-	}
 	
-	.collapsed-headers {
-		padding-bottom: 20px;
-	}
-	
-	#buttons {
-		margin-bottom: 80px;
-		margin-top: 20px;
-	}
-	
-	.tablesorter-holder {
-		padding-right: 20px;
-	}
-	
-	.tablesorter, .pager {
-		margin-left: 10px;
-	}
-	
-	.box {
-		display: block;
-	}
-	
-</style>
-
 <script type="text/javascript">
 	//pass settings to monitorToolSummaryAdvanced.js
 	var submissionDeadlineSettings = {
@@ -55,15 +24,7 @@
 		messageRestrictionRemoved: '<fmt:message key="monitor.summary.date.restriction.removed" />'
 	};
 </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.tablesorter.js"></script>
-<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-widgets.js"></script>
-<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-pager.js"></script>
-
 <script type="text/javascript">
 
 	function releaseMarks(sessionId){
@@ -84,12 +45,13 @@
 	}
 	
   	$(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}, 3: { filter: false}, 4: { filter: false} }, 
             widgetOptions: {
             	resizable: true,
@@ -103,6 +65,11 @@
 		$(".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}&sessionId=" + $(this).attr('data-session-id'),
 				ajaxProcessing: function (data, table) {
 			    	if (data && data.hasOwnProperty('rows')) {
@@ -158,141 +125,108 @@
 						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>
 
-<h1>
-    <c:out value="${title}" escapeXml="true"/>
-</h1>
-<div class="instructions space-top">
-    <c:out value="${instruction}" escapeXml="false"/>
-</div>
-<br/>
-
-<c:if test="${empty sessionMap.sessionDtos}">
-	<p>
-		<fmt:message key="message.monitoring.summary.no.session" />
-	</p>
-</c:if>
-
-<c:forEach var="sessionDto" items="${sessionMap.sessionDtos}">
+<div class="panel">
+	<h4>
+	    <c:out value="${title}" escapeXml="true"/>
+	</h4>
+	<div class="instructions voffset5">
+	    <c:out value="${instruction}" escapeXml="false"/>
+	</div>
 	
+	<c:if test="${empty sessionMap.sessionDtos}">
+		<lams:Alert type="info" id="no-session-summary" close="false">
+			<fmt:message key="message.monitoring.summary.no.session" />
+		</lams:Alert>
+	</c:if>
+	
 	<!--For release marks feature-->
 	<img src="${tool}/images/indicator.gif" style="display:none" id="message-area-busy" />
 	<div id="message-area"></div>
 
+</div>
+
+<c:if test="${sessionMap.isGroupedActivity}">
+<div class="panel-group" id="accordionSessions" role="tablist" aria-multiselectable="true"> 
+</c:if>
+
+<c:forEach var="sessionDto" items="${sessionMap.sessionDtos}" varStatus="status">
+
 	<c:if test="${sessionMap.isGroupedActivity}">	
-		<h2>
-			<fmt:message key="message.session.name" />:	<c:out value="${sessionDto.sessionName}" />
-		</h2>
+	    <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${sessionDto.sessionID}" 
+					aria-expanded="${status.first ? 'false' : 'true'}" aria-controls="collapse${sessionDto.sessionID}" >
+			<fmt:message key="message.session.name" />:	<c:out value="${sessionDto.sessionName}" /></a>
+			</span>
+        </div>
+        
+        <div id="collapse${sessionDto.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="${sessionDto.sessionID}">
-		<thead>
-			<tr>
-				<th>
-					<fmt:message key="monitoring.user.fullname"/>
-				</th>
-				<th width="5%" align="center"> 
-					<fmt:message key="label.number.of.posts"/>
-				</th>
-				<c:choose>
-				  <c:when test="${forum.reflectOnActivity}">
-				     <th width="15%" align="center">
-				  </c:when>
-				  <c:otherwise>
-				     <th width="25%" align="center">
-				  </c:otherwise>
-				</c:choose>
-					<fmt:message key="label.latest.posting.date"/>
-				</th>
-				<th width="10%" align="center">
-					<fmt:message key="monitoring.marked.question"/>
-				</th>
+		<c:choose>
+		<c:when test="${forum.reflectOnActivity}">
+			<c:set var="numColumns">5</c:set>
+			<c:set var="postingWidth">15%</c:set>
+		</c:when>
+		<c:otherwise>
+			<c:set var="numColumns">4</c:set>
+			<c:set var="postingWidth">25%</c:set>
+		</c:otherwise>
+		</c:choose>
+		
+		<lams:TSTable numColumns="${numColumns}" dataId="data-session-id='${sessionDto.sessionID}'" test="fred">
+				<th><fmt:message key="monitoring.user.fullname"/></th>
+				<th width="5%" align="center"><fmt:message key="label.number.of.posts"/></th>
+				<th width="${postingWidth}" align="center"><fmt:message key="label.latest.posting.date"/></th>
+				<th width="10%" align="center"><fmt:message key="monitoring.marked.question"/></th>
 				<c:if test="${forum.reflectOnActivity}">
-					<th width="40%" align="center" class="sorter-false">
-						<fmt:message key="monitoring.user.reflection"/>
-					</th>
+					<th width="40%" align="center" class="sorter-false"><fmt:message key="monitoring.user.reflection"/></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>
-	</div>
+		</lams:TSTable>
 
-	<div id="buttons">
-		<div style="float:left;padding:5px;margin-left:5px">
-			<html:form action="/learning/viewForum.do" target="_blank">
-				<html:hidden property="mode" value="teacher"/>
-				<html:hidden property="toolSessionID" value="${sessionDto.sessionID}" />
-				<html:hidden property="hideReflection" value="true"/>
-				<html:submit property="viewForum" styleClass="button">
-					<fmt:message key="label.monitoring.summary.view.forum" />
-				</html:submit>
-			</html:form>
-		</div>
-		<div style="float:left;padding:5px;margin-left:5px">
-			<html:button property="releaseMarks" onclick="releaseMarks(${sessionDto.sessionID})" styleClass="button">
+		<P style="display: inline"> 
+			<c:set var="viewforum">
+				<html:rewrite page="/learning/viewForum.do?toolSessionID=${sessionDto.sessionID}&topicID=${topic.message.uid}&mode=teacher&hideReflection=true" />
+			</c:set>
+			<html:link href="javascript:launchPopup('${viewforum}');" styleClass="btn btn-default loffset5 voffset10">
+				<fmt:message key="label.monitoring.summary.view.forum"/>
+			</html:link>
+			<html:button property="releaseMarks" onclick="releaseMarks(${sessionDto.sessionID})" styleClass="btn btn-default loffset5 voffset10" >
 				<fmt:message key="button.release.mark" />
 			</html:button>
-		</div>
-		<div style="float:left;padding:5px;margin-left:5px">
-			<html:form action="/monitoring/downloadMarks">
+			<html:form action="/monitoring/downloadMarks"  style="display:inline">
 				<html:hidden property="toolSessionID" value="${sessionDto.sessionID}" />
-				<html:submit property="downloadMarks" styleClass="button">
+				<html:submit property="downloadMarks" styleClass="btn btn-default loffset5 voffset10" >
 					<fmt:message key="message.download.marks" />
 				</html:submit>
 			</html:form>
-		</div>
-		<div style="float:left;padding:9px">
 			<c:url value="/monitoring.do" var="refreshMonitoring">
 				<c:param name="contentFolderID" value="${contentFolderID}"/>
 				<c:param name="toolContentID" value="${toolContentID}" />
 			</c:url>
-			<html:link href="${refreshMonitoring}" styleClass="button">
+			<html:link href="${refreshMonitoring}" styleClass="btn btn-default loffset5 voffset10" >
 					<fmt:message key="label.refresh" />
 			</html:link>
-		</div>
-	</div>
+		</P>
+	
+	<c:if test="${sessionMap.isGroupedActivity}">
+		</div> <!-- end collapse area  -->
+		</div> <!-- end collapse panel  -->
+	</c:if>
+	${ !sessionMap.isGroupedActivity || ! status.last ? '<div class="voffset5">&nbsp;</div>' :  ''}
+
 </c:forEach>
 
+<c:if test="${sessionMap.isGroupedActivity}">
+	</div> <!--  end panel group -->
+</c:if>
 <%@include file="parts/advanceOptions.jsp"%>
 
 <%@include file="parts/daterestriction.jsp"%>
Index: lams_tool_forum/web/jsps/monitoring/updatemarks.jsp
===================================================================
diff -u -r2b4141f8f15fe552ea1ba29d0b302544943cb6b0 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/jsps/monitoring/updatemarks.jsp	(.../updatemarks.jsp)	(revision 2b4141f8f15fe552ea1ba29d0b302544943cb6b0)
+++ lams_tool_forum/web/jsps/monitoring/updatemarks.jsp	(.../updatemarks.jsp)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -8,9 +8,9 @@
 	<html:hidden property="hideReflection" value="${sessionMap.hideReflection}"/>
 
 	<p>
-		<fmt:message key="message.assign.mark" />
-		<c:out value="${user.firstName}" />
-		<c:out value="${user.lastName}" />
+		<fmt:message key="message.assign.mark" />&nbsp;
+		<c:out value="${user.firstName}" />&nbsp;
+		<c:out value="${user.lastName}" />&nbsp;
 		(<lams:Date value="${topic.message.updated}"/>):
 	</p>		
 	
@@ -26,49 +26,36 @@
 		</c:if>
 	</p>
 	
-	<table>
-		<tr>
-			<td colspan="2">
-				<%@ include file="/common/messages.jsp"%>
-			</td>
-		</tr>
-		<tr>
-			<td class="field-name" width="100">
-				<fmt:message key="lable.topic.title.mark" />*
-			</td>
-			<td>
-				<html:text property="mark"/>
-			</td>
-		</tr>
-		<tr>
-			<td colspan="2">
-				<c:set var="formBean" value="<%= request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY) %>" />		
-				<span  class="field-name"><fmt:message key="lable.topic.title.comment" /><BR></span>
-				<lams:CKEditor id="comment"
-					value="${formBean.comment}"
-					toolbarSet="DefaultMonitor">
-				</lams:CKEditor>
-			</td>
-		</tr>
-		<tr>
-			<td colspan="2">
-				<div style="float:right; padding: 15px 5px 0;">
-					<input type="submit" value="<fmt:message key="lable.update.mark"/>" class="button" />
+	<%@ include file="/common/messages.jsp"%>
+
+	<div class="form-group">
+		<label for="mark"><fmt:message key="lable.topic.title.mark" />*</label>
+		<html:text property="mark" styleClass="form-control form-control-inline"/>
+	</div>
+	<div class="form-group">
+		<c:set var="formBean" value="<%= request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY) %>" />		
+		<label for="comment"><fmt:message key="lable.topic.title.comment" /></label>
+		<lams:CKEditor id="comment"	value="${formBean.comment}" toolbarSet="DefaultMonitor">
+		</lams:CKEditor>
+	</div>
+
+
+	<div class="pull-right">
+		<input type="submit" value="<fmt:message key="lable.update.mark"/>" class="btn btn-default" />
 					
-					<c:if test="${sessionMap.updateMode == 'listMarks'}">
-						<c:set var="cancelUrl">
-							<c:url value="/monitoring/viewUserMark.do"/>?sessionMapID=${formBean.sessionMapID}&userUid=${user.uid}&toolSessionID=${sessionMap.toolSessionID}
-						</c:set>
-					</c:if>
+		<c:if test="${sessionMap.updateMode == 'listMarks'}">
+			<c:set var="cancelUrl">
+				<c:url value="/monitoring/viewUserMark.do"/>?sessionMapID=${formBean.sessionMapID}&userUid=${user.uid}&toolSessionID=${sessionMap.toolSessionID}
+			</c:set>
+		</c:if>
 					
-					<c:if test="${sessionMap.updateMode == 'viewForum'}">
-						<c:set var="cancelUrl">
-							<c:url value="/learning/viewTopic.do"/>?sessionMapID=${formBean.sessionMapID}&topicID=${sessionMap.rootUid}&hideReflection=${sessionMap.hideReflection}
-						</c:set>
-					</c:if>
-					<input type="button" onclick="location.href='${cancelUrl}';" class="button" value="<fmt:message key="button.cancel"/>">
-				</div>
-			</td>
-		</tr>
-	</table>
+		<c:if test="${sessionMap.updateMode == 'viewForum'}">
+			<c:set var="cancelUrl">
+					<c:url value="/learning/viewTopic.do"/>?sessionMapID=${formBean.sessionMapID}&topicID=${sessionMap.rootUid}&hideReflection=${sessionMap.hideReflection}
+			</c:set>
+		</c:if>
+	
+		<input type="button" onclick="location.href='${cancelUrl}';" class="btn btn-default" value="<fmt:message key="button.cancel"/>">
+	</div>
+
 </html:form>
Index: lams_tool_forum/web/jsps/monitoring/viewmarks.jsp
===================================================================
diff -u -r2b4141f8f15fe552ea1ba29d0b302544943cb6b0 -r26a0240d04a160036cc15d1adca267cd1e9c42e5
--- lams_tool_forum/web/jsps/monitoring/viewmarks.jsp	(.../viewmarks.jsp)	(revision 2b4141f8f15fe552ea1ba29d0b302544943cb6b0)
+++ lams_tool_forum/web/jsps/monitoring/viewmarks.jsp	(.../viewmarks.jsp)	(revision 26a0240d04a160036cc15d1adca267cd1e9c42e5)
@@ -12,96 +12,81 @@
 </script>
 
 <p>
-	<c:out value="${user.lastName}" /> <c:out value="${user.firstName}" />
-						
+	<strong><c:out value="${user.lastName}" />&nbsp;<c:out value="${user.firstName}" /></strong>&nbsp;
 	<fmt:message key="monitoring.user.post.topic" />
 </p>
 
+<c:forEach items="${messages}" var="topic">
 
-<table cellpadding="0">
+<div class="panel panel-default ${highlightClass} msg" >
+	<div class="panel-heading">
+		<h4 class="panel-title">
+			<span style="float: right"> <i class="fa fa-xs fa-user"></i> 
+				<lams:Date value="${topic.message.updated}" />
+			</span>
+			<c:out value="${topic.message.subject}" />
+		</h4>
+	</div>
+
+	<div class="panel-body" >
+
+	<div class="pull-right"><html:form action="/monitoring/editMark" method="post">
+			<html:hidden property="sessionMapID" value="${sessionMapID}"/>
+			<html:hidden property="topicID" value="${topic.message.uid}"/>
+			<input type="submit" value="<fmt:message key="lable.update.mark"/>" class="btn btn-default btn-sm" />
+			</html:form>
+	</div>
+
+		<div class="row">
+  		<div class="col-sm-2"><strong><fmt:message key="label.number.of.replies" /></strong></div>
+		<div class="col-sm-3">${topic.message.replyNumber}</div>
+	</div>
+	<div class="row">
+		<div class="col-sm-2"><strong><fmt:message key="lable.topic.title.mark" /></strong></div>
+		<div class="col-sm-3">
+		<c:choose>
+		<c:when test="${empty topic.message.report.mark}">
+			<fmt:message key="message.not.avaliable" />
+		</c:when>
+		<c:otherwise>
+			<fmt:formatNumber value="${topic.message.report.mark}"  maxFractionDigits="2"/>
+		</c:otherwise>
+		</c:choose>
+		</div>
+	</div>
 	
-	<c:forEach items="${messages}" var="topic">
-		<tr>
-			<td colspan="2">
-				<c:set var="viewtopic">
-					<html:rewrite page="/monitoring/viewTopic.do?topicID=${topic.message.uid}&create=${topic.message.created.time}&hideReflection=${sessionMap.hideReflection}" />
-				</c:set>
-				<html:link href="javascript:launchPopup('${viewtopic}','viewtopic');">
-					<c:out value="${topic.message.subject}" />
-				</html:link>
-					
-				<c:if test="${topic.hasAttachment}">
-					<img src="<html:rewrite page="/images/paperclip.gif"/>">
-				</c:if>
-			</td>
-		</tr>
-		<tr>
-			<td colspan="2">
-				<lams:Date  value="${topic.message.updated}"/>
-			</td>
-		</tr>
-			
-		<tr>
-			<td class="field-name" width="30%">
-				<fmt:message key="label.number.of.replies" />
-				:
-			</td>
-			<td colspan="3">
-				${topic.message.replyNumber}
-			</td>
-		</tr>
+	<div class="row">
+		<div class="col-sm-2"><strong><fmt:message key="lable.topic.title.comment" /></strong></div>
+	  	<div class="col-sm-10">
+		<c:choose>
+		<c:when test="${empty topic.message.report.comment}">
+			<fmt:message key="message.not.avaliable" />
+		</c:when>
+		<c:otherwise>
+			<c:out value="${topic.message.report.comment}" escapeXml="false" />
+		</c:otherwise>
+		</c:choose>
+		</div>
+	</div>
 	
-		<tr>
-			<td class="field-name" width="30%">
-				<fmt:message key="lable.topic.title.mark" />
-				:
-			</td>
-			<td>
-				<c:choose>
-					<c:when test="${empty topic.message.report.mark}">
-						<fmt:message key="message.not.avaliable" />
-					</c:when>
-					<c:otherwise>
-						<fmt:formatNumber value="${topic.message.report.mark}"  maxFractionDigits="2"/>
-					</c:otherwise>
-				</c:choose>
-			</td>
-		</tr>
-			
-		<tr>
-			<td class="field-name" width="30%">
-				<fmt:message key="lable.topic.title.comment" />
-				:
-			</td>
-			<td>
-				<c:choose>
-					<c:when test="${empty topic.message.report.comment}">
-						<fmt:message key="message.not.avaliable" />
-					</c:when>
-					<c:otherwise>
-						<c:out value="${topic.message.report.comment}" escapeXml="false" />
-					</c:otherwise>
-				</c:choose>
-			</td>
-		</tr>
-			
-		<tr>
-			<td>
-			</td>
-			<td style="padding:10px 0px 20px;">
-				<html:form action="/monitoring/editMark" method="post">
-					<html:hidden property="sessionMapID" value="${sessionMapID}"/>
-					<html:hidden property="topicID" value="${topic.message.uid}"/>
-					<input type="submit" value="<fmt:message key="lable.update.mark"/>" class="button" />
-				</html:form>
-			</td>
-		</tr>
-			
+	<hr class="msg-hr">
+	
+	<span><c:out value="${topic.message.body}" escapeXml="false" /></span>
+
+	<c:forEach var="file" items="${topic.message.attachments}">
+		<c:set var="downloadURL">
+			<html:rewrite page="/download/?uuid=${file.fileUuid}&versionID=${file.fileVersionId}&preferDownload=true" />
+		</c:set>
+		<a href="<c:out value='${downloadURL}' escapeXml='false'/>"> <i class="fa fa-paperclip"></i> <c:out value="${file.fileName}" /> </a>
 	</c:forEach>
-</table>
 
+	</div>
+</div>			
+
+</c:forEach>
+
 <div style="padding:0 15px 25px;">
-	<a href="javascript:closeAndRefreshParentMonitoringWindow()" class="button float-right">
+	<a href="javascript:window.close();" class="btn btn-default btn-sm pull-right">
 		<fmt:message key="button.close"/>
 	</a>
 </div>