Index: lams_tool_nb/web/WEB-INF/tags/AdvancedAccordian.tag
===================================================================
diff -u
--- lams_tool_nb/web/WEB-INF/tags/AdvancedAccordian.tag	(revision 0)
+++ lams_tool_nb/web/WEB-INF/tags/AdvancedAccordian.tag	(revision 0f43a76093ebdfc8dfde3de70990efbe5cad56ee)
@@ -0,0 +1,53 @@
+<%
+	 /****************************************************************
+	 * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
+	 * =============================================================
+	 * License Information: http://lamsfoundation.org/licensing/lams/2.0/
+	 * 
+	 * This program is free software; you can redistribute it and/or modify
+	 * it under the terms of the GNU General Public License version 2.0
+	 * as published by the Free Software Foundation.
+	 * 
+	 * This program is distributed in the hope that it will be useful,
+	 * but WITHOUT ANY WARRANTY; without even the implied warranty of
+	 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	 * GNU General Public License for more details.
+	 * 
+	 * You should have received a copy of the GNU General Public License
+	 * along with this program; if not, write to the Free Software
+	 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
+	 * USA
+	 * 
+	 * http://www.gnu.org/licenses/gpl.txt
+	 * ****************************************************************
+	 */
+
+	/**
+	 * AdvancedAccordian.tag
+	 *	Author: Fiona Malikoff
+	 *	Description: Creates the show/hide entry for the Advanced Settings in Montoring.
+	 * Wiki: 
+	 */
+%>
+<%@ attribute name="title" required="true" rtexprvalue="true"%>
+
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+
+<div class="panel-group" id="accordionAdvanced" role="tablist" aria-multiselectable="true"> 
+    <div class="panel panel-default" >
+        <div class="panel-heading collapsable-icon-left" id="headingAdvanced">
+        	<h4 class="panel-title">
+	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseAdvanced" aria-expanded="false" aria-controls="collapseAdvanced" >
+          	${title}
+        	</a>
+      		</h4>
+        </div>
+
+        <div id="collapseAdvanced" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingAdvanced">
+		<jsp:doBody />
+		</div>
+	</div>
+</div>
+		
\ No newline at end of file
Index: lams_tool_nb/web/WEB-INF/tags/Arrow.tag
===================================================================
diff -u
--- lams_tool_nb/web/WEB-INF/tags/Arrow.tag	(revision 0)
+++ lams_tool_nb/web/WEB-INF/tags/Arrow.tag	(revision 0f43a76093ebdfc8dfde3de70990efbe5cad56ee)
@@ -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_nb/web/WEB-INF/tags/AuthoringButton.tag
===================================================================
diff -u -r29fac4bd0bdf28bcaaeee7aae4020ccb15b6e520 -r0f43a76093ebdfc8dfde3de70990efbe5cad56ee
--- lams_tool_nb/web/WEB-INF/tags/AuthoringButton.tag	(.../AuthoringButton.tag)	(revision 29fac4bd0bdf28bcaaeee7aae4020ccb15b6e520)
+++ lams_tool_nb/web/WEB-INF/tags/AuthoringButton.tag	(.../AuthoringButton.tag)	(revision 0f43a76093ebdfc8dfde3de70990efbe5cad56ee)
@@ -122,12 +122,12 @@
     	window.close();
     }  				
 </script>	
-<p id="saveCancelButtons" >
-		<html:link href="javascript:;" property="cancel" onclick="javascript:doCancel()" styleClass="button right-buttons space-left">
-			<span class="cancelIcon"><fmt:message key="${cancelButtonLabelKey}" /></span>
-		</html:link>
-		<html:link href="javascript:doSubmit_Form_Only();" property="submit" styleClass="button right-buttons space-left">
+<div id="saveCancelButtons voffset5" >
+		<html:link href="javascript:doSubmit_Form_Only();" property="submit" styleClass="btn btn-primary pull-right">
 			<span class="okIcon"><fmt:message key="${saveButtonLabelKey}" /></span>
 		</html:link>
-</p>
+		<html:link href="javascript:;" property="cancel" onclick="javascript:doCancel()" styleClass="btn btn-default roffset5 pull-right">
+			<span class="cancelIcon"><fmt:message key="${cancelButtonLabelKey}" /></span>
+		</html:link>
+</div>
 <!-- end tab content -->
\ No newline at end of file
Index: lams_tool_nb/web/WEB-INF/tags/CommentsAuthor.tag
===================================================================
diff -u -rd3c9d3f03c16e8f7025d7b2bfe84e68af4fc0746 -r0f43a76093ebdfc8dfde3de70990efbe5cad56ee
--- lams_tool_nb/web/WEB-INF/tags/CommentsAuthor.tag	(.../CommentsAuthor.tag)	(revision d3c9d3f03c16e8f7025d7b2bfe84e68af4fc0746)
+++ lams_tool_nb/web/WEB-INF/tags/CommentsAuthor.tag	(.../CommentsAuthor.tag)	(revision 0f43a76093ebdfc8dfde3de70990efbe5cad56ee)
@@ -24,16 +24,16 @@
 	<c:set var="likeDislikeLabelKey" value="advanced.comments.like.and.dislike" />
 </c:if>
 
-<p class="small-space-top">
+<p class="voffset5">
 	<html:checkbox property="${allowCommentsVariableName}" value="1"
 		styleClass="noBorder" styleId="${allowCommentsVariableName}">
 		&nbsp;<fmt:message key="${allowCommentLabelKey}" />
 	</html:checkbox>
 </p>
 	<div style="padding-left: 20px" id="likedislike">
 	<p>
-		<html:radio property="${likeDislikeVariableName}" value="false" /><fmt:message key="${likeOnlyCommentLabelKey}" /> &nbsp;
-		<html:radio property="${likeDislikeVariableName}" value="true" /><fmt:message key="${likeDislikeLabelKey}" /> 
+		<html:radio property="${likeDislikeVariableName}" value="false" />&nbsp;<fmt:message key="${likeOnlyCommentLabelKey}" /> &nbsp;
+		<html:radio property="${likeDislikeVariableName}" value="true" />&nbsp;<fmt:message key="${likeDislikeLabelKey}" /> 
 	</p>
 	</div>
 
Index: lams_tool_nb/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r410594202dbd779f040835dbeec3b2881079f30f -r0f43a76093ebdfc8dfde3de70990efbe5cad56ee
--- lams_tool_nb/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 410594202dbd779f040835dbeec3b2881079f30f)
+++ lams_tool_nb/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 0f43a76093ebdfc8dfde3de70990efbe5cad56ee)
@@ -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_nb/web/WEB-INF/tags/TSTable.tag
===================================================================
diff -u
--- lams_tool_nb/web/WEB-INF/tags/TSTable.tag	(revision 0)
+++ lams_tool_nb/web/WEB-INF/tags/TSTable.tag	(revision 0f43a76093ebdfc8dfde3de70990efbe5cad56ee)
@@ -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_nb/web/WEB-INF/tags/Tab.tag
===================================================================
diff -u -rac6c077d83ef253fa3f07a515edc49077317029a -r0f43a76093ebdfc8dfde3de70990efbe5cad56ee
--- lams_tool_nb/web/WEB-INF/tags/Tab.tag	(.../Tab.tag)	(revision ac6c077d83ef253fa3f07a515edc49077317029a)
+++ lams_tool_nb/web/WEB-INF/tags/Tab.tag	(.../Tab.tag)	(revision 0f43a76093ebdfc8dfde3de70990efbe5cad56ee)
@@ -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_nb/web/WEB-INF/tags/TabBody.tag
===================================================================
diff -u -r9481bb9c6f8c0e4d6fbed6b230a41c77feda64c6 -r0f43a76093ebdfc8dfde3de70990efbe5cad56ee
--- lams_tool_nb/web/WEB-INF/tags/TabBody.tag	(.../TabBody.tag)	(revision 9481bb9c6f8c0e4d6fbed6b230a41c77feda64c6)
+++ lams_tool_nb/web/WEB-INF/tags/TabBody.tag	(.../TabBody.tag)	(revision 0f43a76093ebdfc8dfde3de70990efbe5cad56ee)
@@ -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_nb/web/WEB-INF/tags/TabBodyArea.tag
===================================================================
diff -u
--- lams_tool_nb/web/WEB-INF/tags/TabBodyArea.tag	(revision 0)
+++ lams_tool_nb/web/WEB-INF/tags/TabBodyArea.tag	(revision 0f43a76093ebdfc8dfde3de70990efbe5cad56ee)
@@ -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_nb/web/WEB-INF/tags/TabBodys.tag
===================================================================
diff -u
--- lams_tool_nb/web/WEB-INF/tags/TabBodys.tag	(revision 0)
+++ lams_tool_nb/web/WEB-INF/tags/TabBodys.tag	(revision 0f43a76093ebdfc8dfde3de70990efbe5cad56ee)
@@ -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_nb/web/WEB-INF/tags/TabName.tag
===================================================================
diff -u -r7329c82c5388fbb86b6a0a2b27a71151ee8f116e -r0f43a76093ebdfc8dfde3de70990efbe5cad56ee
--- lams_tool_nb/web/WEB-INF/tags/TabName.tag	(.../TabName.tag)	(revision 7329c82c5388fbb86b6a0a2b27a71151ee8f116e)
+++ lams_tool_nb/web/WEB-INF/tags/TabName.tag	(.../TabName.tag)	(revision 0f43a76093ebdfc8dfde3de70990efbe5cad56ee)
@@ -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_nb/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -r9481bb9c6f8c0e4d6fbed6b230a41c77feda64c6 -r0f43a76093ebdfc8dfde3de70990efbe5cad56ee
--- lams_tool_nb/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision 9481bb9c6f8c0e4d6fbed6b230a41c77feda64c6)
+++ lams_tool_nb/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision 0f43a76093ebdfc8dfde3de70990efbe5cad56ee)
@@ -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_nb/web/WEB-INF/tags/headItems.tag
===================================================================
diff -u -r613f0d0d76eb497ed58d7e6836eda34a245425a9 -r0f43a76093ebdfc8dfde3de70990efbe5cad56ee
--- lams_tool_nb/web/WEB-INF/tags/headItems.tag	(.../headItems.tag)	(revision 613f0d0d76eb497ed58d7e6836eda34a245425a9)
+++ lams_tool_nb/web/WEB-INF/tags/headItems.tag	(.../headItems.tag)	(revision 0f43a76093ebdfc8dfde3de70990efbe5cad56ee)
@@ -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_nb/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r5e63656a12c02f7476564e278b43ff4ce86ac930 -r0f43a76093ebdfc8dfde3de70990efbe5cad56ee
--- lams_tool_nb/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 5e63656a12c02f7476564e278b43ff4ce86ac930)
+++ lams_tool_nb/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 0f43a76093ebdfc8dfde3de70990efbe5cad56ee)
@@ -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>
@@ -434,12 +442,24 @@
    	<tag-file>
 	    <name>Alert</name>
 		<path>/WEB-INF/tags/Alert.tag</path>
-   	</tag-file> 
+   	</tag-file>  
    	<tag-file>
 	    <name>Page</name>
 		<path>/WEB-INF/tags/Page.tag</path>
-   	</tag-file> 
+   	</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>ImgButtonWrapper</name>
 		<path>/WEB-INF/tags/ImgButtonWrapper.tag</path>
    	</tag-file>
Index: lams_tool_nb/web/authoring/advance.jsp
===================================================================
diff -u -rd3c9d3f03c16e8f7025d7b2bfe84e68af4fc0746 -r0f43a76093ebdfc8dfde3de70990efbe5cad56ee
--- lams_tool_nb/web/authoring/advance.jsp	(.../advance.jsp)	(revision d3c9d3f03c16e8f7025d7b2bfe84e68af4fc0746)
+++ lams_tool_nb/web/authoring/advance.jsp	(.../advance.jsp)	(revision 0f43a76093ebdfc8dfde3de70990efbe5cad56ee)
@@ -4,19 +4,16 @@
 
 <lams:CommentsAuthor/>
 
-<p class="small-space-top">
-	<html:checkbox property="reflectOnActivity" value="1"
+<div class="form-group">
+    <html:checkbox property="reflectOnActivity" value="1"
 		styleClass="noBorder" styleId="reflectOnActivity"></html:checkbox>
-	<label for="reflectOnActivity">
+	<label for="reflectOnActivity">&nbsp;
 		<fmt:message key="advanced.reflectOnActivity" />
 	</label>
+	<BR/>
+	<html:textarea property="reflectInstructions" cols="60" rows="3"  styleId="reflectInstructions"/>
+</div>
 
-</p>
-
-<p>
-	<html:textarea property="reflectInstructions" cols="30" rows="3"  styleId="reflectInstructions"/>
-</p>
-
 <script type="text/javascript">
 <!--
 //automatically turn on refect option if there are text input in refect instruction area
Index: lams_tool_nb/web/authoring/authoring.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -r0f43a76093ebdfc8dfde3de70990efbe5cad56ee
--- lams_tool_nb/web/authoring/authoring.jsp	(.../authoring.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_nb/web/authoring/authoring.jsp	(.../authoring.jsp)	(revision 0f43a76093ebdfc8dfde3de70990efbe5cad56ee)
@@ -10,13 +10,13 @@
 
 <lams:html>
 <lams:head>
+  	<link href="${lams}css/jquery-ui-redmond-theme.css" rel="stylesheet" type="text/css" />
+ 	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.js"></script>
+
 	<lams:headItems />
 	<title><fmt:message key="activity.title" />
 	</title>
-	<link href="${lams}css/jquery-ui-redmond-theme.css" rel="stylesheet" type="text/css" >
-	<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">
 		function init(){
 			var showBasicContent = "${requestScope.showBasicContent}";
@@ -55,46 +55,37 @@
 
 <body class="stripes" onLoad="init()">
 
-	<div id="page">
-		<html:form action="/authoring" styleId="authoringForm" target="_self"
-			enctype="multipart/form-data">
+<html:form action="/authoring" styleId="authoringForm" target="_self" enctype="multipart/form-data">
+<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
+
+<c:set var="title"><fmt:message key="activity.title" /></c:set>
+<lams:Page title="${title}" type="navbar">
+
 			<html:hidden property="toolContentID" />
 			<html:hidden property="contentFolderID" />
 			<html:hidden property="currentTab" styleId="currentTab" />
 			<html:hidden property="defineLater" />
-
-			<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
-			
-			<h1>
-				<fmt:message key="activity.title" />
-			</h1>
-			<div id="header">
-				<!-- start tabs -->
-				<lams:Tabs control="true">
-					<lams:Tab id="1" key="label.authoring.heading.basic" />
-					<lams:Tab id="2" key="label.authoring.heading.advanced" />
-				</lams:Tabs>
-				<!-- end tab buttons -->
-			</div>
-
-			<div id="content">
-				<!-- show any error messages here -->
-				<logic:messagesPresent>
-					<p class="warning">
-					        <html:messages id="error">
-					            <c:out value="${error}" escapeXml="false"/><br/>
-					        </html:messages>
-					</p>
+		
+		 	<lams:Tabs control="true" title="${title}" helpToolSignature="<%= NoticeboardConstants.TOOL_SIGNATURE %>" helpModule="authoring">
+				<lams:Tab id="1" key="label.authoring.heading.basic" />
+				<lams:Tab id="2" key="label.authoring.heading.advanced" />
+			</lams:Tabs>	
+		
+		 	<lams:TabBodyArea>
+		 		<logic:messagesPresent>
+				<lams:Alert id="errorMessages" type="danger" close="false">
+			        <html:messages id="error">
+        			    <c:out value="${error}" escapeXml="false"/><BR/>
+   				     </html:messages>
+ 			    </lams:Alert>
 				</logic:messagesPresent>
-								
-				<lams:help toolSignature="<%=NoticeboardConstants.TOOL_SIGNATURE%>"
-					module="authoring" />
+		 		
 				<!--  Set up tabs  -->
-				<lams:TabBody id="1" titleKey="label.authoring.heading.basic"
-					page="basic.jsp" />
-				<lams:TabBody id="2" titleKey="label.authoring.heading.advanced"
-						page="advance.jsp" />
-
+		 		<lams:TabBodys>
+   					<lams:TabBody id="1" titleKey="label.authoring.heading.basic" page="basic.jsp" />
+ 					<lams:TabBody id="2" titleKey="label.authoring.heading.advanced" page="advance.jsp" />
+  				</lams:TabBodys>
+		
 				<!-- Button Row -->
 				<html:hidden property="method" value="save" />
 				<c:set var="accessMode">
@@ -107,7 +98,6 @@
 						</c:otherwise>
 					</c:choose>
 				</c:set>
-
 				<lams:AuthoringButton formID="authoringForm"
 					clearSessionActionUrl="/clearsession.do" toolSignature="lanb11"
 					toolContentID="${formBean.toolContentID}"
@@ -116,9 +106,13 @@
 					accessMode="${accessMode}"
 					defineLater="${formBean.defineLater}"
 					contentFolderID="${NbAuthoringForm.contentFolderID}" />
-			</div>
-			<div id="footer" />
-		</html:form>
-	</div>
+			</lams:TabBodyArea>
+
+<div id="footer"></div>
+<!-- end page div -->
+</lams:Page>
+
+</html:form>
+
 </body>
 </lams:html>
Index: lams_tool_nb/web/authoring/basic.jsp
===================================================================
diff -u -r0405e4902c13aa54bb97fef09824830fcf6ed06e -r0f43a76093ebdfc8dfde3de70990efbe5cad56ee
--- lams_tool_nb/web/authoring/basic.jsp	(.../basic.jsp)	(revision 0405e4902c13aa54bb97fef09824830fcf6ed06e)
+++ lams_tool_nb/web/authoring/basic.jsp	(.../basic.jsp)	(revision 0f43a76093ebdfc8dfde3de70990efbe5cad56ee)
@@ -1,21 +1,12 @@
 <%@ include file="/includes/taglibs.jsp"%>
 <!-- Basic Tab Content  -->
-<table cellpadding="0">
-	<tr>
-		<td>
-			<div class="field-name">
-				<fmt:message key="basic.title"></fmt:message>
-			</div>
-			<html:text property="title" style="width: 99%;"></html:text>
-		</td>
-	</tr>
-	<tr>
-		<td>
-			<div class="field-name">
-				<fmt:message key="basic.content"></fmt:message>
-			</div>
-			<lams:CKEditor id="basicContent" value="${NbAuthoringForm.basicContent}"
-				contentFolderID="${NbAuthoringForm.contentFolderID}" height="400"></lams:CKEditor>
-		</td>
-	</tr>
-</table>
+<div class="form-group">
+    <label for="title"><fmt:message key="basic.title"/></label>
+    <html:text property="title" style="width: 99%;"/>
+</div>
+
+<div class="form-group">
+    <label for="title"><fmt:message key="basic.content"/></label>
+	<lams:CKEditor id="basicContent" value="${NbAuthoringForm.basicContent}"
+			contentFolderID="${NbAuthoringForm.contentFolderID}" height="400"></lams:CKEditor>
+</div>
Index: lams_tool_nb/web/monitoring/m_EditActivity.jsp
===================================================================
diff -u -rcdb76dbb596251251a6b98f692775396ecc675f3 -r0f43a76093ebdfc8dfde3de70990efbe5cad56ee
--- lams_tool_nb/web/monitoring/m_EditActivity.jsp	(.../m_EditActivity.jsp)	(revision cdb76dbb596251251a6b98f692775396ecc675f3)
+++ lams_tool_nb/web/monitoring/m_EditActivity.jsp	(.../m_EditActivity.jsp)	(revision 0f43a76093ebdfc8dfde3de70990efbe5cad56ee)
@@ -1,12 +1,14 @@
 <%@ include file="/includes/taglibs.jsp"%>
 
+<div class="voffset10">
+
 <c:if test="${formBean.totalLearners >= 1}">
-	<p class="warning">
+	<lams:Alert type="warn" id="no-edit" close="false">
 		<fmt:message key="message.alertContentEdit" />
-	</p>
+	</lams:Alert>
 </c:if>
 
-<table width="100%" border="0" cellspacing="0" cellpadding="0">
+<table class="table table-condensed">
 			<tr>
 				<td class="field-name">
 					<fmt:message key="basic.title" />
@@ -26,8 +28,10 @@
 </table>
 
 <p class="align-right">
-	<html:link forward="forwardToAuthorPage" name="NbMonitoringForm" property="parametersToAppend" styleClass="button" target="_blank">
+	<html:link forward="forwardToAuthorPage" name="NbMonitoringForm" property="parametersToAppend" styleClass="btn btn-default" target="_blank">
 		<fmt:message key="button.edit" />
 	</html:link>
 </p>
 
+</div>
+
Index: lams_tool_nb/web/monitoring/m_Statistics.jsp
===================================================================
diff -u -rd3c9d3f03c16e8f7025d7b2bfe84e68af4fc0746 -r0f43a76093ebdfc8dfde3de70990efbe5cad56ee
--- lams_tool_nb/web/monitoring/m_Statistics.jsp	(.../m_Statistics.jsp)	(revision d3c9d3f03c16e8f7025d7b2bfe84e68af4fc0746)
+++ lams_tool_nb/web/monitoring/m_Statistics.jsp	(.../m_Statistics.jsp)	(revision 0f43a76093ebdfc8dfde3de70990efbe5cad56ee)
@@ -1,9 +1,13 @@
 <%@ include file="/includes/taglibs.jsp"%>
+<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 
-<c:if test="${isGroupedActivity}">
-	<table>
-		<tr><td colspan="2"><h4><fmt:message key="heading.totalLearnersInGroup" /></h4></td></tr>
+<div class="voffset10">
+
 	
+ <c:if test="${isGroupedActivity}">
+	<table class="table table-striped table-condensed">
+		<tr><td colspan="${allowComments ? 3 : 2}"><fmt:message key="heading.totalLearnersInGroup" /></td></tr>
+	
 		<c:forEach var="group" items="${formBean.groupStatsMap}">
 			<tr><td width="40%"><c:out value="${group.key}" /></td> 
 				<td><c:out value="${group.value}" /></td>
@@ -20,9 +24,9 @@
 	</table>
 </c:if>
 
-<table>
+<table class="table table-striped table-condensed">
 	<tr>
-		<td width="40%"><h4><fmt:message key="heading.totalLearners" /></h4></td>
+		<td width="40%"><fmt:message key="heading.totalLearners" /></td>
 		<td><c:out value="${formBean.totalLearners}" /></td>
 		<c:if test="${allowComments && !isGroupedActivity}">
 			<c:forEach var="group" items="${formBean.sessionIdMap}">
@@ -35,5 +39,5 @@
 		</c:if>
 	</tr>
 </table>
-
-</table>
+ 
+</div>
Index: lams_tool_nb/web/monitoring/m_Summary.jsp
===================================================================
diff -u -rd3c9d3f03c16e8f7025d7b2bfe84e68af4fc0746 -r0f43a76093ebdfc8dfde3de70990efbe5cad56ee
--- lams_tool_nb/web/monitoring/m_Summary.jsp	(.../m_Summary.jsp)	(revision d3c9d3f03c16e8f7025d7b2bfe84e68af4fc0746)
+++ lams_tool_nb/web/monitoring/m_Summary.jsp	(.../m_Summary.jsp)	(revision 0f43a76093ebdfc8dfde3de70990efbe5cad56ee)
@@ -1,15 +1,17 @@
 <%@ include file="/includes/taglibs.jsp"%>
 <script type="text/javascript" src="<lams:LAMSURL/>/includes/javascript/monitorToolSummaryAdvanced.js" ></script>
 	
-	<H2><c:out value="${formBean.title}" escapeXml="true" /></H2>
-	<div class="space-top"><c:out value="${formBean.basicContent}" escapeXml="false" /></div>
+	<div class="panel">
+	<h4><c:out value="${formBean.title}" escapeXml="true" /></h4>
+	<div class="voffset5"><c:out value="${formBean.basicContent}" escapeXml="false" /></div>
+	</div>
 
-	<H2><fmt:message key="titleHeading.statistics"/></H2>
+	<H4><fmt:message key="titleHeading.statistics"/></H2>
 	<%@ include file="m_Statistics.jsp"%>
 
 	<c:if test="${reflectOnActivity}" >
-		<H2><fmt:message key="titleHeading.reflections"/></H2>
-		<table class="alternative-color">
+		<H4><fmt:message key="titleHeading.reflections"/></H4>
+		<table class="table table-striped">
 		<c:forEach var="reflection" items="${reflections}">
 			<logic:empty name="reflections">
 				<tr>
@@ -19,7 +21,7 @@
 				</tr>
 			</logic:empty>
 			<tr>
-				<td>
+				<td width="40%">
 					<c:out value="${reflection.username}" />
 				</td>
 				<c:url value="monitoring.do" var="viewReflection">
@@ -37,17 +39,10 @@
 		
 	</c:if>
 	
-<h1>
-	<img src="<lams:LAMSURL/>/images/tree_closed.gif" id="treeIcon" onclick="javascript:toggleAdvancedOptionsVisibility(document.getElementById('advancedDiv'), document.getElementById('treeIcon'), '<lams:LAMSURL/>');" />
-
-	<a href="javascript:toggleAdvancedOptionsVisibility(document.getElementById('advancedDiv'), document.getElementById('treeIcon'),'<lams:LAMSURL/>');" >
-		<fmt:message key="monitor.summary.th.advancedSettings" />
-	</a>
-</h1>
-<br />
-
-<div class="monitoring-advanced" id="advancedDiv" style="display:none">
-<table class="alternative-color">
+<c:set var="adTitle"><fmt:message key="monitor.summary.th.advancedSettings" /></c:set>
+<lams:AdvancedAccordian title="${adTitle}">
+          	
+<table class="table table-striped table-condensed">
 	
 	<tr>
 		<td>
@@ -94,4 +89,4 @@
 		</tr>
 	</c:if>
 </table>
-</div>	
+</lams:AdvancedAccordian>
Index: lams_tool_nb/web/monitoring/monitoring.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -r0f43a76093ebdfc8dfde3de70990efbe5cad56ee
--- lams_tool_nb/web/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_nb/web/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 0f43a76093ebdfc8dfde3de70990efbe5cad56ee)
@@ -15,8 +15,10 @@
 
 <lams:html>
 <lams:head>
-	<lams:css style="main"/>
-	<script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>
+	<lams:css/>
+	<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>
 	<script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
 	<title><fmt:message key="activity.title" /></title>
 
@@ -37,8 +39,6 @@
 
 <body class="stripes" onLoad='init()'>
 
-	<div id="page">
-	
 		<html:form action="/monitoring" target="_self">
 
 			<c:set var="formBean" value="<%= request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY) %>" scope="request"/>
@@ -49,32 +49,28 @@
 				<html:rewrite page="/monitoring.do" />
 			</c:set>
 			
+			<c:set var="title"><fmt:message key="activity.title" /></c:set>
+			<lams:Page title="${title}" type="navbar">
 
-			<h1>
-				<fmt:message key="activity.title" />
-			</h1>
-			
-			<div id="header">
-			
-				<lams:Tabs>
-					<lams:Tab id="<%=NbMonitoringAction.SUMMARY_TABID%>" key="titleHeading.summary" />
-					<lams:Tab id="<%=NbMonitoringAction.EDITACTIVITY_TABID%>" key="titleHeading.editActivity" />
-					<lams:Tab id="<%=NbMonitoringAction.STATISTICS_TABID%>" key="titleHeading.statistics" />
-				</lams:Tabs>
-			</div>
+		 	<lams:Tabs title="${title}" helpToolSignature="<%= NoticeboardConstants.TOOL_SIGNATURE %>" helpModule="monitoring">
+				<lams:Tab id="1" key="titleHeading.summary" />
+				<lams:Tab id="2" key="titleHeading.editActivity" />
+				<lams:Tab id="3" key="titleHeading.statistics" />
+			</lams:Tabs>
 		
-			<div id="content">
-				<lams:help toolSignature="<%= NoticeboardConstants.TOOL_SIGNATURE %>" module="monitoring"/>
-				
+			<lams:TabBodyArea>
+			<lams:TabBodys>
 				<lams:TabBody id="1" titleKey="titleHeading.summary" page="m_Summary.jsp" /> 
 				<lams:TabBody id="2" titleKey="titleHeading.editActivity" page="m_EditActivity.jsp" />
-				<lams:TabBody id="3" titleKey="titleHeading.statistics" page="m_Statistics.jsp" />
-			</div>
+  				<lams:TabBody id="3" titleKey="titleHeading.statistics" page="m_Statistics.jsp" />
+ 			</lams:TabBodys>
+			</lams:TabBodyArea>
 			
 			<div id="footer" />
+			
+			</lams:Page>
 
 		</html:form>
-	</div>
 
 </body>
 
Index: lams_tool_nb/web/monitoring/reflection.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -r0f43a76093ebdfc8dfde3de70990efbe5cad56ee
--- lams_tool_nb/web/monitoring/reflection.jsp	(.../reflection.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_nb/web/monitoring/reflection.jsp	(.../reflection.jsp)	(revision 0f43a76093ebdfc8dfde3de70990efbe5cad56ee)
@@ -13,36 +13,27 @@
 <lams:html>
 <lams:head>
 	<lams:css />
-	<title><fmt:message key="activity.title"/></title>
+	<title><fmt:message key="activity.title" /> <fmt:message key="activity.title"/></title>
 </lams:head>
 
 <body class="stripes">
 
-	<div id="content">
+	<c:set var="title"><fmt:message key="activity.title" />&nbsp;<fmt:message key="titleHeading.reflection" /></c:set>
+	<lams:Page title="${title}" type="learner">
 
-		<h1>
-			<fmt:message key="titleHeading.reflection" />
-		</h1>
-		
-		<!-- if nbEntry is empty, display 'has not reflected' message -->
-		<table class="alternative-color">
+		<table class=table table-striped">
 			<tr>
 				<th>
-					<b>
 						<c:out value="${name}" />
-					</b>
 				</th>
 			</tr>
 			<tr>
 				<td>
-					<p>
 						<lams:out value="${nbEntry}" escapeHtml="true" />
-					</p>
 				</td>
 			</tr>
 		</table>
+	</lams:Page>
 	
-	</div>
-	
 </lams:html>