Index: lams_tool_chat/web/WEB-INF/tags/Alert.tag
===================================================================
diff -u
--- lams_tool_chat/web/WEB-INF/tags/Alert.tag	(revision 0)
+++ lams_tool_chat/web/WEB-INF/tags/Alert.tag	(revision ef13258732b950074ce269abe8f51fbc00762eca)
@@ -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_chat/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r99032f0bf19ad1cbaefe947f9ef1f8c91d89ade8 -ref13258732b950074ce269abe8f51fbc00762eca
--- lams_tool_chat/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 99032f0bf19ad1cbaefe947f9ef1f8c91d89ade8)
+++ lams_tool_chat/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision ef13258732b950074ce269abe8f51fbc00762eca)
@@ -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_chat/web/WEB-INF/tags/Page.tag
===================================================================
diff -u
--- lams_tool_chat/web/WEB-INF/tags/Page.tag	(revision 0)
+++ lams_tool_chat/web/WEB-INF/tags/Page.tag	(revision ef13258732b950074ce269abe8f51fbc00762eca)
@@ -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_chat/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r86a2855c49422f236ac31c35df38fa3c66220dcc -ref13258732b950074ce269abe8f51fbc00762eca
--- lams_tool_chat/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 86a2855c49422f236ac31c35df38fa3c66220dcc)
+++ lams_tool_chat/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision ef13258732b950074ce269abe8f51fbc00762eca)
@@ -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_chat/web/common/learnerheader.jsp
===================================================================
diff -u -r18e5e690d2e1a7c3d918759f7a2827c8205feaac -ref13258732b950074ce269abe8f51fbc00762eca
--- lams_tool_chat/web/common/learnerheader.jsp	(.../learnerheader.jsp)	(revision 18e5e690d2e1a7c3d918759f7a2827c8205feaac)
+++ lams_tool_chat/web/common/learnerheader.jsp	(.../learnerheader.jsp)	(revision ef13258732b950074ce269abe8f51fbc00762eca)
@@ -19,6 +19,8 @@
 			<link href="${tool}includes/css/chat_rtl.css" rel="stylesheet" type="text/css">
 		</c:otherwise>
 	</c:choose>
-	<lams:css/>	
+	<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>
 	<tiles:insert attribute="headItems" />
 </lams:head>
Index: lams_tool_chat/web/common/messages.jsp
===================================================================
diff -u -rcd0d0b28a7c27711a74ce2b41821f3ccf5c80df9 -ref13258732b950074ce269abe8f51fbc00762eca
--- lams_tool_chat/web/common/messages.jsp	(.../messages.jsp)	(revision cd0d0b28a7c27711a74ce2b41821f3ccf5c80df9)
+++ lams_tool_chat/web/common/messages.jsp	(.../messages.jsp)	(revision ef13258732b950074ce269abe8f51fbc00762eca)
@@ -1,20 +1,17 @@
 <%-- Error Messages --%>
 <logic:messagesPresent>
-    <div class="error" id="errorMessages">
+		<lams:Alert id="errorMessages" type="danger" close="false">
         <html:messages id="error">
-            &nbsp&nbsp <html:img page="/images/iconWarning.gif" 
-               styleClass="icon"/>
-            &nbsp&nbsp <c:out value="${error}" escapeXml="false"/><br/>
+            <c:out value="${error}" escapeXml="false"/>
         </html:messages>
-    </div>
+    </lams:Alert>
 </logic:messagesPresent>
 
 <%-- Success Messages --%>
 <logic:messagesPresent message="true">
-    <div class="message" id="successMessages">
+    <lams:Alert id="message" type="info" close="true">
         <html:messages id="message" message="true">
-            &nbsp&nbsp <html:img page="/images/iconInformation.gif" styleClass="icon"/>
-            &nbsp&nbsp <c:out value="${message}" escapeXml="false"/><br/>
+             <c:out value="${message}" escapeXml="false"/>
         </html:messages>
-    </div>
+    </lams:Alert>
 </logic:messagesPresent>
\ No newline at end of file
Index: lams_tool_chat/web/includes/css/chat.css
===================================================================
diff -u -recb763befc0380d0810f5794203bfcdf9ca0bfe7 -ref13258732b950074ce269abe8f51fbc00762eca
--- lams_tool_chat/web/includes/css/chat.css	(.../chat.css)	(revision ecb763befc0380d0810f5794203bfcdf9ca0bfe7)
+++ lams_tool_chat/web/includes/css/chat.css	(.../chat.css)	(revision ef13258732b950074ce269abe8f51fbc00762eca)
@@ -1,5 +1,6 @@
 /* ==================== COMMON ==================== */
 .message {
+	font-size: 12px;
 	padding-bottom: 4px;
 }
 
@@ -32,6 +33,7 @@
 	height: 260px;
 	overflow: auto;
 	border: 1px solid #999;
+	font-size: 12px;
 	font-weight: bold;
 	padding: 2px;
 }
Index: lams_tool_chat/web/layouts/learningLayout.jsp
===================================================================
diff -u -rfc79bbd0ac6d17b167882ca736c30ee3bdb4984d -ref13258732b950074ce269abe8f51fbc00762eca
--- lams_tool_chat/web/layouts/learningLayout.jsp	(.../learningLayout.jsp)	(revision fc79bbd0ac6d17b167882ca736c30ee3bdb4984d)
+++ lams_tool_chat/web/layouts/learningLayout.jsp	(.../learningLayout.jsp)	(revision ef13258732b950074ce269abe8f51fbc00762eca)
@@ -1,5 +1,4 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
-	"http://www.w3.org/TR/html4/loose.dtd">
+<!DOCTYPE html>
 
 <%@ include file="/common/taglibs.jsp"%>
 
Index: lams_tool_chat/web/pages/learning/defineLater.jsp
===================================================================
diff -u -r896248d87ee3eb2da93ba7a9f11ca2de11eb4040 -ref13258732b950074ce269abe8f51fbc00762eca
--- lams_tool_chat/web/pages/learning/defineLater.jsp	(.../defineLater.jsp)	(revision 896248d87ee3eb2da93ba7a9f11ca2de11eb4040)
+++ lams_tool_chat/web/pages/learning/defineLater.jsp	(.../defineLater.jsp)	(revision ef13258732b950074ce269abe8f51fbc00762eca)
@@ -1,10 +1,12 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<div id="content">
-	<h1>
+
+<c:set var="title" scope="request">
 		<fmt:message key="activity.title" />
-	</h1>
+</c:set>		
+
+<lams:Page type="learner" title="${title}">
 	<lams:DefineLater defineLaterMessageKey="message.defineLaterSet" />
-</div>
+</lams:Page>
 
 
Index: lams_tool_chat/web/pages/learning/learning.jsp
===================================================================
diff -u -rab2b6923490ce38dc647ea66d6768966fbc40cfd -ref13258732b950074ce269abe8f51fbc00762eca
--- lams_tool_chat/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision ab2b6923490ce38dc647ea66d6768966fbc40cfd)
+++ lams_tool_chat/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision ef13258732b950074ce269abe8f51fbc00762eca)
@@ -2,75 +2,83 @@
 
 <script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
 <script type="text/javascript">
-	var MODE = "${MODE}",
-		TOOL_SESSION_ID = '${param.toolSessionID}',
-		APP_URL = '<lams:WebAppURL />',
-		LEARNING_ACTION = "<c:url value='/learning.do'/>";
+	var MODE = "${MODE}", TOOL_SESSION_ID = '${param.toolSessionID}', APP_URL = '<lams:WebAppURL />', LEARNING_ACTION = "<c:url value='/learning.do'/>";
 </script>
-<script type="text/javascript" src="includes/javascript/learning.js"></script>	
+<script type="text/javascript" src="includes/javascript/learning.js"></script>
 
-<div id="content">
-	<h1>
-		<c:out value="${chatDTO.title}" escapeXml="true" />
-	</h1>
 
-	<p>
+<lams:Page type="learner" title="${chatDTO.title}">
+	<div class="panel">
 		<c:out value="${chatDTO.instructions}" escapeXml="false" />
-	</p>
+	</div>
 
-   <c:if test="${MODE == 'learner' || MODE == 'author'}">
-	<c:if test="${chatDTO.lockOnFinish}"> 
-		<div class="info">
-			<c:choose>
-				<c:when test="${chatUserDTO.finishedActivity}">
-					<fmt:message key="message.activityLocked"/> 
-				</c:when>
-				<c:otherwise>
-					<fmt:message key="message.warnLockOnFinish" />
-				</c:otherwise>
-			</c:choose>
-		</div>
-	</c:if>
-	<c:if test="${not empty submissionDeadline}">
-		<div class="info">
-			<fmt:message key="authoring.info.teacher.set.restriction" >
-				<fmt:param><lams:Date value="${submissionDeadline}" /></fmt:param>
-			</fmt:message>	
-		</div>
-	</c:if>	
-   </c:if>
+	<c:if test="${MODE == 'learner' || MODE == 'author'}">
 
-	<table id="chatContent">
-		<tr>
-			<td style="width: 75%"><div id="messages"> </div></td>
-			<td><div id="roster"> </div></td>
-		</tr>
-		
-		<c:if test="${MODE == 'teacher'}">
-			<tr>
-				<td colspan="2" />
-					<div class="field-name">
-						<fmt:message key="label.sendMessageTo" />
-						<span id="sendToEveryone"><fmt:message key="label.everyone" /></span>
-						<span id="sendToUser" style="display: none"></span>
-					</div>
-				</td>
-			</tr>
+		<!-- Announcements and advanced settings -->
+		<c:if test="${chatDTO.lockOnFinish}">
+			<lams:Alert id="lockWhenFinished" type="info" close="true">
+				<c:choose>
+					<c:when test="${chatUserDTO.finishedActivity}">
+						<fmt:message key="message.activityLocked" />
+					</c:when>
+					<c:otherwise>
+						<fmt:message key="message.warnLockOnFinish" />
+					</c:otherwise>
+				</c:choose>
+			</lams:Alert>
 		</c:if>
-		
-		<c:if test="${MODE != 'learner' || !chatDTO.lockOnFinish || !chatUserDTO.finishedActivity}">
-			<tr>
-				<td><textarea id="sendMessageArea" rows="3"></textarea></td>
-				<td id="sendMessageButtonCell"><input id="sendMessageButton" class="button" type="button"
-						   onclick="javascript:sendMessage()"
-						   value='<fmt:message key="button.send"/>' />
-				</td>
-			</tr>
+
+		<c:if test="${not empty submissionDeadline}">
+
+			<lams:Alert id="submissionDeadline" type="info" close="true">
+				<fmt:message key="authoring.info.teacher.set.restriction">
+					<fmt:param>
+						<lams:Date value="${submissionDeadline}" />
+					</fmt:param>
+				</fmt:message>
+			</lams:Alert>
 		</c:if>
-		
-	</table>
+	</c:if>
+	<!-- End announcements and advanced settings -->
 
+	<!-- chat UI -->
+	<div class="row">
+		<div class="col-xs-12 col-sm-9 col-md-10 col-lg-10">
+			<div id="messages"></div>
+		</div>
+		<div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
+			<div id="roster" class="hidden-xs"></div>
+		</div>
+	</div>
+	<c:if test="${MODE == 'teacher'}">
+		<div class="row">
+			<div class="col-xs-12 voffset5">
+				<div id="sentTo">
+					<fmt:message key="label.sendMessageTo" />
+					&nbsp;<span id="sendToEveryone"><fmt:message key="label.everyone" /></span> <span id="sendToUser"
+						style="display: none"></span>
+				</div>
+			</div>
+		</div>
+	</c:if>
+
+	<c:if test="${MODE != 'learner' || !chatDTO.lockOnFinish || !chatUserDTO.finishedActivity}">
+		<div class="row">
+			<div class="col-xs-12 col-sm-9 col-md-10 col-lg-10">
+				<div id="textArea" class="voffset5">
+					<textarea id="sendMessageArea" rows="2" class="form-control"></textarea>
+				</div>
+			</div>
+			<div class="col-xs-12 col-sm-3 col-md-2 col-lg-2 ">
+				<div id="sendMessageButtonCell" class="voffset5">
+					<input id="sendMessageButton" class="btn btn-sm btn-default" type="button" onclick="javascript:sendMessage()"
+						value='<fmt:message key="button.send"/>' />
+				</div>
+			</div>
+		</div>
+	</c:if>
+
 	<c:if test="${MODE == 'learner' || MODE == 'author'}">
 		<%@ include file="parts/finishButton.jsp"%>
 	</c:if>
-</div>
+</lams:Page>
Index: lams_tool_chat/web/pages/learning/notebook.jsp
===================================================================
diff -u -r98424ecde9e3fa1c56c4477b6a555bdfe0a310d2 -ref13258732b950074ce269abe8f51fbc00762eca
--- lams_tool_chat/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision 98424ecde9e3fa1c56c4477b6a555bdfe0a310d2)
+++ lams_tool_chat/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision ef13258732b950074ce269abe8f51fbc00762eca)
@@ -4,42 +4,43 @@
 	function disableFinishButton() {
 		document.getElementById("finishButton").disabled = true;
 	}
-         function submitForm(methodName){
-                var f = document.getElementById('messageForm');
-                f.submit();
-        }       
+	function submitForm(methodName) {
+		var f = document.getElementById('messageForm');
+		f.submit();
+	}
 </script>
 
-<div id="content">
-	<h1>
-		<c:out value="${chatDTO.title}" escapeXml="true"/>
-	</h1>
+<lams:Page type="learner" title="${chatDTO.title}">
 
 	<html:form action="/learning" method="post" onsubmit="disableFinishButton();" styleId="messageForm">
 
-		<p class="small-space-top">
-			<lams:out value="${chatDTO.reflectInstructions}" escapeHtml="true"/>
-		</p>
+		<div class="panel">
+			<lams:out value="${chatDTO.reflectInstructions}" escapeHtml="true" />
+		</div>
 
-		<html:textarea cols="60" rows="8" property="entryText"
-			styleClass="text-area"></html:textarea>
+		<html:textarea rows="5" property="entryText" styleClass="form-control" styleId="focused"></html:textarea>
 
-		<div class="space-bottom-top align-right">
-			<html:hidden property="dispatch" value="submitReflection" />
-			<html:hidden property="chatUserUID" />
-			<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:link>
-		</div>
+		<html:hidden property="dispatch" value="submitReflection" />
+		<html:hidden property="chatUserUID" />
+		<html:link href="#nogo" styleClass="btn btn-primary pull-right voffset10 na" styleId="finishButton"
+			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>
 	</html:form>
-</div>
+</lams:Page>
 
+
+<script type="text/javascript">
+	window.onload = function() {
+		document.getElementById("focused").focus();
+	}
+</script>
+
+
Index: lams_tool_chat/web/pages/learning/parts/finishButton.jsp
===================================================================
diff -u -rb88cfcacfc98572e23f6040a7a4ed4060b58a1fc -ref13258732b950074ce269abe8f51fbc00762eca
--- lams_tool_chat/web/pages/learning/parts/finishButton.jsp	(.../finishButton.jsp)	(revision b88cfcacfc98572e23f6040a7a4ed4060b58a1fc)
+++ lams_tool_chat/web/pages/learning/parts/finishButton.jsp	(.../finishButton.jsp)	(revision ef13258732b950074ce269abe8f51fbc00762eca)
@@ -47,19 +47,19 @@
 <html:form action="/learning" method="post"
 	onsubmit="disableFinishButton();"  styleId="messageForm">
 	<html:hidden property="chatUserUID" value="${chatUserDTO.uid}" />
-	<div class="space-bottom-top align-right">
+
 		<c:choose>
 			<c:when
 				test="${!chatUserDTO.finishedActivity and chatDTO.reflectOnActivity}">
 				<html:hidden property="dispatch" value="openNotebook" />
 
-				<html:submit styleClass="button">
+				<html:submit styleClass="btn btn-primary pull-right voffset10">
 					<fmt:message key="button.continue" />
 				</html:submit>
 			</c:when>
 			<c:otherwise>
 				<html:hidden property="dispatch" value="finishActivity" />
-				<html:link href="#nogo" styleClass="button" styleId="finishButton"  onclick="submitForm('finish')">
+				<html:link href="#nogo" styleClass="btn btn-primary pull-right voffset10 na" styleId="finishButton"  onclick="submitForm('finish')">
 					 <span class="nextActivity">
 						 <c:choose>
 						 	<c:when test="${activityPosition.last}">
Index: lams_tool_chat/web/pages/learning/submissionDeadline.jsp
===================================================================
diff -u -ref851974c4dc3f5468b188fab9997a37b73c0e50 -ref13258732b950074ce269abe8f51fbc00762eca
--- lams_tool_chat/web/pages/learning/submissionDeadline.jsp	(.../submissionDeadline.jsp)	(revision ef851974c4dc3f5468b188fab9997a37b73c0e50)
+++ lams_tool_chat/web/pages/learning/submissionDeadline.jsp	(.../submissionDeadline.jsp)	(revision ef13258732b950074ce269abe8f51fbc00762eca)
@@ -1,18 +1,18 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<div id="content">
-	<h1>
+<c:set var="title" scope="request">
 		<fmt:message key="activity.title" />
-	</h1>
-			
-	<div class="warning">
+</c:set>		
+
+<lams:Page type="learner" title="${title}">
+	<lams:Alert type="danger" close="false" id="submissionDeadline">
 		<fmt:message key="authoring.info.teacher.set.restriction" >
 			<fmt:param><lams:Date value="${submissionDeadline}" /></fmt:param>
 		</fmt:message>							
-	</div>						
+	</lams:Alert>
 	 	
 	<c:if test="${MODE == 'learner' || MODE == 'author'}">
 		<%@ include file="parts/finishButton.jsp"%>
 	</c:if>
-</div>
+</lams:Page>