Index: lams_tool_nb/web/WEB-INF/tags/Alert.tag
===================================================================
diff -u
--- lams_tool_nb/web/WEB-INF/tags/Alert.tag	(revision 0)
+++ lams_tool_nb/web/WEB-INF/tags/Alert.tag	(revision 8b5940710ceac2c67320a1954dea1c58120c78b1)
@@ -0,0 +1,46 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="close" required="false" rtexprvalue="true"%>
+<%@ attribute name="id" required="false" rtexprvalue="true"%>
+<%@ attribute name="type" required="false" rtexprvalue="true"%>
+
+<c:set var="idName" value="alert-${type}" />
+<c:if test="${not empty id}">
+	<c:set var="idName" value="${id}" />
+</c:if>
+
+<c:set var="alertType" value="info" />
+<c:set var="iconType" value="info-circle" />
+<c:choose>
+	<c:when test="${type == 'danger'}">
+		<c:set var="alertType" value="danger" />
+		<c:set var="iconType" value="times-circle" />
+	</c:when>
+	<c:when test="${type == 'success'}">
+		<c:set var="alertType" value="success" />
+		<c:set var="iconType" value="check-circle" />
+	</c:when>
+	<c:when test="${type == 'warning'}">
+		<c:set var="alertType" value="warning" />
+		<c:set var="iconType" value="exclamation-circle" />
+	</c:when>
+</c:choose>
+
+<div class="row no-gutter">
+	<div class="col-xs-12 col-sm-offset-2 col-sm-8">
+		<div id="${idName}" class="alert alert-${alertType}" style="margin-bottom: 10px; padding: 8px">
+			<div class="media">
+				<div class="media-left">
+					<i class="fa fa-lg fa-${iconType} text-muted"></i>
+				</div>
+				<div class="media-body">
+					<c:if test="${close}">
+							<a href="#" class="close pull-right" data-dismiss="alert" aria-label="close">&times;</a>
+					</c:if>
+					<jsp:doBody />
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
Index: lams_tool_nb/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -rfef442a88ab05c91db8a551081c4abc060d4da5e -r8b5940710ceac2c67320a1954dea1c58120c78b1
--- lams_tool_nb/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision fef442a88ab05c91db8a551081c4abc060d4da5e)
+++ lams_tool_nb/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 8b5940710ceac2c67320a1954dea1c58120c78b1)
@@ -1,6 +1,6 @@
 
 <%
-	 /****************************************************************
+	/****************************************************************
 	 * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
 	 * =============================================================
 	 * License Information: http://lamsfoundation.org/licensing/lams/2.0/
@@ -49,10 +49,18 @@
 	<c:set var="buttonTryAgainKey" value="button.try.again" />
 </c:if>
 
-<p>
-	<fmt:message key="${defineLaterMessageKey}" />
-</p>
-<div align="right" class="space-bottom-top">
-	<a href="javascript:location.reload(true);" class="button"><fmt:message
-			key="${buttonTryAgainKey}" /> </a>
+<div class="row no-gutter">
+	<div
+		class="col-xs-12 col-sm-offset-1 col-sm-10 col-lg-offset-2 col-lg-8">
+		<div class="alert alert-info">
+			<fmt:message key="${defineLaterMessageKey}" />
+		</div>
+	</div>
 </div>
+<div class="row no-gutter">
+	<div class="col-xs-12">
+		<a href="javascript:location.reload(true);"
+			class="btn btn-primary pull-right voffset5"><fmt:message
+				key="${buttonTryAgainKey}" /></a>
+	</div>
+</div>
\ No newline at end of file
Index: lams_tool_nb/web/WEB-INF/tags/Page.tag
===================================================================
diff -u
--- lams_tool_nb/web/WEB-INF/tags/Page.tag	(revision 0)
+++ lams_tool_nb/web/WEB-INF/tags/Page.tag	(revision 8b5940710ceac2c67320a1954dea1c58120c78b1)
@@ -0,0 +1,36 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
+
+<%@ attribute name="type" required="true" rtexprvalue="true"%>
+<%@ attribute name="style" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="titleHelpURL" required="false" rtexprvalue="true"%>
+<%@ attribute name="headingContent" required="false" rtexprvalue="true"%>
+
+
+
+<div class="row no-gutter">
+	<div class="col-xs-12">
+		<div class="container" id="content">
+			<div class="panel panel-default panel-${type}-page">
+				<div class="panel-heading">
+					<c:if test="${not empty title}">
+						<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>
+				<div class="panel-body panel-${type}-body">
+					<jsp:doBody />
+				</div>
+			</div>
+		</div>
+		<! -- End content container -->
+	</div>
+</div>
Index: lams_tool_nb/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -rd3c9d3f03c16e8f7025d7b2bfe84e68af4fc0746 -r8b5940710ceac2c67320a1954dea1c58120c78b1
--- lams_tool_nb/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision d3c9d3f03c16e8f7025d7b2bfe84e68af4fc0746)
+++ lams_tool_nb/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 8b5940710ceac2c67320a1954dea1c58120c78b1)
@@ -440,6 +440,14 @@
 		<path>/WEB-INF/tags/DefineLater.tag</path>
    	</tag-file>  
    	<tag-file>
+	    <name>Alert</name>
+		<path>/WEB-INF/tags/Alert.tag</path>
+   	</tag-file> 
+   	<tag-file>
+	    <name>Page</name>
+		<path>/WEB-INF/tags/Page.tag</path>
+   	</tag-file> 
+   	<tag-file>
 	    <name>ImgButtonWrapper</name>
 		<path>/WEB-INF/tags/ImgButtonWrapper.tag</path>
    	</tag-file>
Index: lams_tool_nb/web/defineLater.jsp
===================================================================
diff -u -r896248d87ee3eb2da93ba7a9f11ca2de11eb4040 -r8b5940710ceac2c67320a1954dea1c58120c78b1
--- lams_tool_nb/web/defineLater.jsp	(.../defineLater.jsp)	(revision 896248d87ee3eb2da93ba7a9f11ca2de11eb4040)
+++ lams_tool_nb/web/defineLater.jsp	(.../defineLater.jsp)	(revision 8b5940710ceac2c67320a1954dea1c58120c78b1)
@@ -1,8 +1,7 @@
 <%@ include file="/includes/taglibs.jsp"%>
-
-<div id="content">
-	<h1>
-		<fmt:message key="activity.title" />
-	</h1>
-	<lams:DefineLater defineLaterMessageKey="message.defineLaterSet" />
-</div>
+<c:set var="title" scope="request">
+	<fmt:message key="activity.title" />
+</c:set>
+<lams:Page type="learner" title="${title}">
+					<lams:DefineLater defineLaterMessageKey="message.defineLaterSet" />
+</lams:Page>
\ No newline at end of file
Index: lams_tool_nb/web/error.jsp
===================================================================
diff -u -rf0c2b8f197da1cd58d9df772e6f0ef072d656602 -r8b5940710ceac2c67320a1954dea1c58120c78b1
--- lams_tool_nb/web/error.jsp	(.../error.jsp)	(revision f0c2b8f197da1cd58d9df772e6f0ef072d656602)
+++ lams_tool_nb/web/error.jsp	(.../error.jsp)	(revision 8b5940710ceac2c67320a1954dea1c58120c78b1)
@@ -1,5 +1,4 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
-	"http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE html>
 <html>
 <%@ page language="java" isErrorPage="true" pageEncoding="UTF-8" contentType="text/html;charset=utf-8"%>
 <%@ taglib uri="tags-lams" prefix="lams"%>
@@ -11,7 +10,7 @@
 
 <%-- Catch JSP Servlet Exception --%>
 <%
-if (exception != null) {
+	if (exception != null) {
 %>
 <c:set var="errorMessage">
 	<%=exception.getMessage()%>
@@ -20,7 +19,7 @@
 	<%=exception.getClass().getName()%>
 </c:set>
 <%
-		java.io.ByteArrayOutputStream bos = new java.io.ByteArrayOutputStream();
+	java.io.ByteArrayOutputStream bos = new java.io.ByteArrayOutputStream();
 		java.io.PrintStream os = new java.io.PrintStream(bos);
 		exception.printStackTrace(os);
 		String stack = new String(bos.toByteArray());
@@ -29,41 +28,48 @@
 	<%=stack%>
 </c:set>
 <%
-} else if ((Exception) request.getAttribute("javax.servlet.error.exception") != null) {
+	} else if ((Exception) request
+			.getAttribute("javax.servlet.error.exception") != null) {
 %>
 
 <c:set var="errorMessage">
-	<%=((Exception) request.getAttribute("javax.servlet.error.exception")).getMessage()%>
+	<%=((Exception) request
+							.getAttribute("javax.servlet.error.exception"))
+							.getMessage()%>
 </c:set>
 <c:set var="errorName">
-	<%=((Exception) request.getAttribute("javax.servlet.error.exception")).getMessage()
-									.getClass().getName()%>
+	<%=((Exception) request
+							.getAttribute("javax.servlet.error.exception"))
+							.getMessage().getClass().getName()%>
 </c:set>
 <%
-		java.io.ByteArrayOutputStream bos = new java.io.ByteArrayOutputStream();
+	java.io.ByteArrayOutputStream bos = new java.io.ByteArrayOutputStream();
 		java.io.PrintStream os = new java.io.PrintStream(bos);
-		((Exception) request.getAttribute("javax.servlet.error.exception")).printStackTrace(os);
+		((Exception) request
+				.getAttribute("javax.servlet.error.exception"))
+				.printStackTrace(os);
 		String stack = new String(bos.toByteArray());
 %>
 <c:set var="errorStack">
 	<%=stack%>
 </c:set>
 <%
-}
+	}
 %>
 <body class="stripes">
-<form action="${lams}errorpages/error.jsp" method="post" id="errorForm">
-	<input type="hidden" name="errorName" value="<c:out value='${errorName}' />"/>
-	<input type="hidden" name="errorMessage" value="<c:out value='${errorMessage}' />"/>
-	<input type="hidden" name="errorStack" value="<c:out value='${errorStack}' />"/>
-</form>
 
-<script type="text/javascript">
+	<lams:Page type="learner" title="">
+		<form action="${lams}errorpages/error.jsp" method="post" id="errorForm">
+			<input type="hidden" name="errorName" value="<c:out value='${errorName}' />" /> <input type="hidden"
+				name="errorMessage" value="<c:out value='${errorMessage}' />" /> <input type="hidden" name="errorStack"
+				value="<c:out value='${errorStack}' />" />
+		</form>
 
-if(window.top != null)
-	document.getElementById("errorForm").target = "_parent";
-document.getElementById("errorForm").submit();
-
-</script>
+		<script type="text/javascript">
+			if (window.top != null)
+				document.getElementById("errorForm").target = "_parent";
+			document.getElementById("errorForm").submit();
+		</script>
+	</lams:Page>
 </body>
 </html>
Index: lams_tool_nb/web/learnerContent.jsp
===================================================================
diff -u -rd3c9d3f03c16e8f7025d7b2bfe84e68af4fc0746 -r8b5940710ceac2c67320a1954dea1c58120c78b1
--- lams_tool_nb/web/learnerContent.jsp	(.../learnerContent.jsp)	(revision d3c9d3f03c16e8f7025d7b2bfe84e68af4fc0746)
+++ lams_tool_nb/web/learnerContent.jsp	(.../learnerContent.jsp)	(revision 8b5940710ceac2c67320a1954dea1c58120c78b1)
@@ -9,26 +9,20 @@
 			finishButton.disabled = true;
 		}
 	}
-	function submitForm(methodName){
+	function submitForm(methodName) {
 		var f = document.getElementById('learnerForm');
 		var m = document.getElementById('methodVar');
-		m.value=methodName
+		m.value = methodName
 		f.submit();
 	}
 </script>
 
-<div id="content">
-
-	<h1>
-		<c:out value="${NbLearnerForm.title}" escapeXml="true" />
-	</h1>
-
-	<p>
+<lams:Page type="learner" title="${NbLearnerForm.title}">
+	<div class="panel">
 		<c:out value="${NbLearnerForm.basicContent}" escapeXml="false" />
-	</p>
+	</div>
 
-	<html:form action="/learner" target="_self"
-		onsubmit="disableFinishButton();" styleId="learnerForm">
+	<html:form action="/learner" target="_self" onsubmit="disableFinishButton();" styleId="learnerForm">
 		<html:hidden property="toolSessionID" />
 		<html:hidden property="mode" />
 		<c:choose>
@@ -41,68 +35,61 @@
 		</c:choose>
 
 		<c:if test="${userFinished and reflectOnActivity}">
-			<div class="small-space-top">
-				<h2>
-					<lams:out value="${reflectInstructions}" escapeHtml="true"/>
-				</h2>
+			<div class="panel">
+				<lams:out value="${reflectInstructions}" escapeHtml="true" />
+			</div>
 
+			<div class="bg-warning" id="reflectionEntry">
 				<c:choose>
 					<c:when test="${empty reflectEntry}">
-						<p>
-							<em> <fmt:message key="message.no.reflection.available" />
-							</em>
-						</p>
-
+						<fmt:message key="message.no.reflection.available" />
 					</c:when>
-
 					<c:otherwise>
-						<p>
-							<lams:out escapeHtml="true" value="${reflectEntry}" />
-						</p>
+						<lams:out escapeHtml="true" value="${reflectEntry}" />
 					</c:otherwise>
-
 				</c:choose>
-
 			</div>
 		</c:if>
 
 		<c:if test="${allowComments}">
-			<lams:Comments toolSessionId="${NbLearnerForm.toolSessionID}" toolSignature="<%=NoticeboardConstants.TOOL_SIGNATURE%>" likeAndDislike="${likeAndDislike}" />
+			<lams:Comments toolSessionId="${NbLearnerForm.toolSessionID}"
+				toolSignature="<%=NoticeboardConstants.TOOL_SIGNATURE%>" likeAndDislike="${likeAndDislike}" />
 		</c:if>
 
-		<div class="space-bottom-top align-right">
-			<c:if test="${not NbLearnerForm.readOnly}">
-				<c:choose>
-					<c:when test="${reflectOnActivity}">
-						<html:button property="continueButton" styleClass="button"
-							onclick="submitForm('reflect')">
-							<fmt:message key="button.continue" />
-						</html:button>
-					</c:when>
-					<c:otherwise>
 
+		<c:if test="${not NbLearnerForm.readOnly}">
+			<c:choose>
+				<c:when test="${reflectOnActivity}">
 
-						<html:link href="#nogo" property="finishButton" styleClass="button"
-							styleId="finishButton" onclick="submitForm('finish')">
-							<span class="nextActivity">
-								<c:choose>
-									<c:when test="${activityPosition.last}">
-										<fmt:message key="button.submit" />
-									</c:when>
-									<c:otherwise>
-										<fmt:message key="button.finish" />
-									</c:otherwise>
-								</c:choose>
-							</span>
-						</html:link>
-					</c:otherwise>
-				</c:choose>
-			</c:if>
-		</div>
+					<html:button property="continueButton" styleClass="btn btn-sm btn-primary pull-right"
+						onclick="submitForm('reflect')">
+						<fmt:message key="button.continue" />
+					</html:button>
+				</c:when>
+				<c:otherwise>
+
+
+					<html:link href="#nogo" property="finishButton" styleClass="btn btn-primary pull-right voffset10 na"
+						onclick="submitForm('finish')">
+						<c:choose>
+							<c:when test="${activityPosition.last}">
+								<fmt:message key="button.submit" />
+							</c:when>
+							<c:otherwise>
+								<fmt:message key="button.finish" />
+							</c:otherwise>
+						</c:choose>
+
+					</html:link>
+				</c:otherwise>
+			</c:choose>
+		</c:if>
+
 	</html:form>
-	
-</div>
 
+</lams:Page>
 
 
 
+
+
Index: lams_tool_nb/web/reflect.jsp
===================================================================
diff -u -rd3c9d3f03c16e8f7025d7b2bfe84e68af4fc0746 -r8b5940710ceac2c67320a1954dea1c58120c78b1
--- lams_tool_nb/web/reflect.jsp	(.../reflect.jsp)	(revision d3c9d3f03c16e8f7025d7b2bfe84e68af4fc0746)
+++ lams_tool_nb/web/reflect.jsp	(.../reflect.jsp)	(revision 8b5940710ceac2c67320a1954dea1c58120c78b1)
@@ -5,47 +5,58 @@
 	function disableFinishButton() {
 		document.getElementById("finishButton").disabled = true;
 	}
-	function submitForm(methodName){
+	function submitForm(methodName) {
 		var f = document.getElementById('learnerForm');
 		f.submit();
 	}
-
 </script>
 
-<div id="content">
-<h1>
-	<c:out value="${title}" escapeXml="true" />
-</h1>
+<lams:Page type="learner" title="${title}">
 
 	<html:form action="/learner" method="post" onsubmit="disableFinishButton();" styleId="learnerForm">
-	 
-		<p><lams:out value="${reflectInstructions}" escapeHtml="true"/></p>				
-			 
-		<html:textarea cols="60" rows="8" property="reflectionText" value="${reflectEntry}" styleClass="text-area"></html:textarea>
-		 
-		<div align="right" class="space-bottom-top">
+		<div class="form-group">
+			<div class="panel">
+				<lams:out value="${reflectInstructions}" escapeHtml="true" />
+			</div>
+
+			<html:textarea rows="4" property="reflectionText" value="${reflectEntry}" styleClass="form-control"
+				styleId="focusedInput"></html:textarea>
+
 			<html:hidden property="toolSessionID" />
 			<html:hidden property="mode" />
-			<html:hidden property="method" value="finish"/>
-			<html:link href="#nogo" styleClass="button" styleId="finishButton" onclick="submitForm('finish')">
-				<span class="nextActivity">								
-					<c:choose>
-						<c:when test="${activityPosition.last}">
-							<fmt:message key="button.submit" />
-						</c:when>
-						<c:otherwise>
-							<fmt:message key="button.finish" />
-						</c:otherwise>
-					</c:choose>
-				</span>
+			<html:hidden property="method" value="finish" />
+
+			<html:link href="#nogo" styleClass="btn btn-primary pull-right voffset10" onclick="submitForm('finish')">
+				<c:choose>
+					<c:when test="${activityPosition.last}">
+						<fmt:message key="button.submit" />
+					</c:when>
+					<c:otherwise>
+						<fmt:message key="button.finish" />
+					</c:otherwise>
+				</c:choose>
 			</html:link>
 		</div>
-			 
+
 	</html:form>
-	
-	<c:if test="${allowComments}">
-		<lams:Comments toolSessionId="${NbLearnerForm.toolSessionID}" toolSignature="<%=NoticeboardConstants.TOOL_SIGNATURE%>"  likeAndDislike="${likeAndDislike}" readOnly="true" pageSize="10" sortBy="1"/>
-	</c:if>	
-	
-</div>
 
+	<!-- Comments -->
+	<div class="row no-gutter">
+		<div class="col-xs-12">
+			<c:if test="${allowComments}">
+				<lams:Comments toolSessionId="${NbLearnerForm.toolSessionID}"
+					toolSignature="<%=NoticeboardConstants.TOOL_SIGNATURE%>" likeAndDislike="${likeAndDislike}" readOnly="true"
+					pageSize="10" sortBy="1" />
+			</c:if>
+		</div>
+	</div>
+	<!-- End comments -->
+
+</lams:Page>
+
+<script type="text/javascript">
+	window.onload = function() {
+		document.getElementById("focusedInput").focus();
+	}
+</script>
+
Index: lams_tool_nb/web/template/learnerTemplate.jsp
===================================================================
diff -u -r5297fc67fa56d2984dfa874443ebcf7ddc6a0ca8 -r8b5940710ceac2c67320a1954dea1c58120c78b1
--- lams_tool_nb/web/template/learnerTemplate.jsp	(.../learnerTemplate.jsp)	(revision 5297fc67fa56d2984dfa874443ebcf7ddc6a0ca8)
+++ lams_tool_nb/web/template/learnerTemplate.jsp	(.../learnerTemplate.jsp)	(revision 8b5940710ceac2c67320a1954dea1c58120c78b1)
@@ -1,20 +1,15 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
-	"http://www.w3.org/TR/html4/loose.dtd">
-
+<!DOCTYPE html>
 <%@ include file="/includes/taglibs.jsp"%>
-
 <c:set var="lams">
 	<lams:LAMSURL />
 </c:set>
-<c:set var="tool">
-	<lams:WebAppURL />
-</c:set>
 
 <lams:html>
 <lams:head>
 	<lams:css />
 	<title><fmt:message key="activity.title"/></title>
 	<script src="${lams}includes/javascript/jquery.js"></script>
+	<script src="${lams}includes/javascript/bootstrap.min.js" type="text/javascript"></script>
 </lams:head>
 
 <body class="stripes">