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>