Index: lams_tool_scribe/web/WEB-INF/tags/Alert.tag
===================================================================
diff -u
--- lams_tool_scribe/web/WEB-INF/tags/Alert.tag	(revision 0)
+++ lams_tool_scribe/web/WEB-INF/tags/Alert.tag	(revision 276c03eb13322c40ee4c9cc63d0e34d8c371c68a)
@@ -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_scribe/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -rfef442a88ab05c91db8a551081c4abc060d4da5e -r276c03eb13322c40ee4c9cc63d0e34d8c371c68a
--- lams_tool_scribe/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision fef442a88ab05c91db8a551081c4abc060d4da5e)
+++ lams_tool_scribe/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 276c03eb13322c40ee4c9cc63d0e34d8c371c68a)
@@ -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_scribe/web/WEB-INF/tags/Page.tag
===================================================================
diff -u
--- lams_tool_scribe/web/WEB-INF/tags/Page.tag	(revision 0)
+++ lams_tool_scribe/web/WEB-INF/tags/Page.tag	(revision 276c03eb13322c40ee4c9cc63d0e34d8c371c68a)
@@ -0,0 +1,34 @@
+<%@ 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="${idName}">
+			<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_scribe/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r5e63656a12c02f7476564e278b43ff4ce86ac930 -r276c03eb13322c40ee4c9cc63d0e34d8c371c68a
--- lams_tool_scribe/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 5e63656a12c02f7476564e278b43ff4ce86ac930)
+++ lams_tool_scribe/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 276c03eb13322c40ee4c9cc63d0e34d8c371c68a)
@@ -432,6 +432,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_scribe/web/common/learnerheader.jsp
===================================================================
diff -u -r00ae80d4791f903bcb3661537fc7e129c72ad195 -r276c03eb13322c40ee4c9cc63d0e34d8c371c68a
--- lams_tool_scribe/web/common/learnerheader.jsp	(.../learnerheader.jsp)	(revision 00ae80d4791f903bcb3661537fc7e129c72ad195)
+++ lams_tool_scribe/web/common/learnerheader.jsp	(.../learnerheader.jsp)	(revision 276c03eb13322c40ee4c9cc63d0e34d8c371c68a)
@@ -15,6 +15,8 @@
 	
 	<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>
 
 	<tiles:insert attribute="headItems" />
 </lams:head>
Index: lams_tool_scribe/web/pages/learning/defineLater.jsp
===================================================================
diff -u -r896248d87ee3eb2da93ba7a9f11ca2de11eb4040 -r276c03eb13322c40ee4c9cc63d0e34d8c371c68a
--- lams_tool_scribe/web/pages/learning/defineLater.jsp	(.../defineLater.jsp)	(revision 896248d87ee3eb2da93ba7a9f11ca2de11eb4040)
+++ lams_tool_scribe/web/pages/learning/defineLater.jsp	(.../defineLater.jsp)	(revision 276c03eb13322c40ee4c9cc63d0e34d8c371c68a)
@@ -1,10 +1,11 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<div id="content">
-	<h1>
-		<fmt:message key="activity.title" />
-	</h1>
+<c:set var="title" scope="request">
+	<fmt:message key="activity.title" />
+</c:set>
+
+<lams:Page type="learner" title="${title}">
 	<lams:DefineLater defineLaterMessageKey="message.defineLaterSet" />
-</div>
+</lams:Page>
 
 
Index: lams_tool_scribe/web/pages/learning/instructions.jsp
===================================================================
diff -u -rd978c625febbd80db0fbfea73f8929e128ebca9e -r276c03eb13322c40ee4c9cc63d0e34d8c371c68a
--- lams_tool_scribe/web/pages/learning/instructions.jsp	(.../instructions.jsp)	(revision d978c625febbd80db0fbfea73f8929e128ebca9e)
+++ lams_tool_scribe/web/pages/learning/instructions.jsp	(.../instructions.jsp)	(revision 276c03eb13322c40ee4c9cc63d0e34d8c371c68a)
@@ -1,42 +1,64 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<div id="content">
-	<h1>
-		<c:out value="${scribeDTO.title}" escapeXml="true" />
-	</h1>
+<lams:Page type="learner" title="${scribeDTO.title}">
 
 	<c:set var="appointedScribe">
-		<c:out value="${scribeSessionDTO.appointedScribe}" escapeXml="true"/>
+		<c:out value="${scribeSessionDTO.appointedScribe}" escapeXml="true" />
 	</c:set>
 
 	<c:if test="${role == 'scribe'}">
-		<p>
-			<fmt:message key="message.scribeInstructions">
-				<fmt:param value="${appointedScribe}"></fmt:param>
-			</fmt:message>
-		</p>
+		<div class="panel">
+			<p>
+				<fmt:message key="message.scribeInstructions">
+					<fmt:param value="<strong><mark>${appointedScribe}</mark></strong>"></fmt:param>
+				</fmt:message>
+			</p>
+
+			<p>
+				<fmt:message key="message.scribeInstructions2" />
+			</p>
+
+			<p>
+				<fmt:message key="message.scribeInstructions3" />
+			</p>
+
+			<p>
+				<fmt:message key="message.scribeInstructions4" />
+			</p>
+		</div>
 	</c:if>
 
 	<c:if test="${role == 'learner'}">
-		<p>
-			<fmt:message key="message.learnerInstructions">
-				<fmt:param value="${appointedScribe}"></fmt:param>
-			</fmt:message>
-		</p>
+		<div class="panel">
+			<p>
+				<fmt:message key="message.learnerInstructions"/>
+			</p>
+			<p>
+				<fmt:message key="message.learnerInstructions2">
+					<fmt:param value="<strong><mark>${appointedScribe}</mark></strong>"></fmt:param>
+				</fmt:message>
+			</p>
+			<p>
+				<fmt:message key="message.learnerInstructions3" />
+			</p>
+			<p>
+				<fmt:message key="message.learnerInstructions4" />
+			</p>
+		</div>
+
+
+
 	</c:if>
 
 	<html:form action="/learning.do">
-		<p>
-			<html:hidden property="dispatch" value="startActivity" />
-			<html:hidden property="toolSessionID" />
-			<html:hidden property="mode" value="${MODE}" />
-			<html:submit styleClass="button right-buttons">
-				<fmt:message key="button.continue" />
-			</html:submit>
-		</p>
+		<html:hidden property="dispatch" value="startActivity" />
+		<html:hidden property="toolSessionID" />
+		<html:hidden property="mode" value="${MODE}" />
+		<html:submit styleClass="btn btn-primary voffset10 pull-right">
+			<fmt:message key="button.continue" />
+		</html:submit>
 	</html:form>
-	
-	<div class="space-bottom"> </div>
-</div>
 
+</lams:Page>
 
+
Index: lams_tool_scribe/web/pages/learning/learning.jsp
===================================================================
diff -u -r2c5b4d48beb07aaf5f39402b8ed8efc5f04033cd -r276c03eb13322c40ee4c9cc63d0e34d8c371c68a
--- lams_tool_scribe/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 2c5b4d48beb07aaf5f39402b8ed8efc5f04033cd)
+++ lams_tool_scribe/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 276c03eb13322c40ee4c9cc63d0e34d8c371c68a)
@@ -4,68 +4,78 @@
 	<lams:WebAppURL />
 </c:set>
 
+<c:set var="appointedScribe">
+	<c:out value="${scribeSessionDTO.appointedScribe}" escapeXml="true" />
+</c:set>
+
+
 <script type="text/javascript">
-	var t=setTimeout("refreshPage()",5000)
+	var t = setTimeout("refreshPage()", 10000)
 
 	function refreshPage() {
-		window.location.href='${tool}learning.do?toolSessionID=${scribeSessionDTO.sessionID}&mode=${MODE}'
+		window.location.href = '${tool}learning.do?toolSessionID=${scribeSessionDTO.sessionID}&mode=${MODE}'
 	}
 </script>
 
-<div id="content">
+<lams:Page type="learner" title="${scribeDTO.title}">
 
-	<h1>
-		<c:out value="${scribeDTO.title}" escapeXml="true" />
-	</h1>
+	<div class="panel">
+		<c:out value="${scribeDTO.instructions}" escapeXml="false" />
+	</div>
 
-	<p>
-		<c:out value="${scribeDTO.instructions}" escapeXml="false"/>
-	</p>
-
 	<%@include file="/pages/parts/voteDisplay.jsp"%>
 
-	<div class="field-name">
+	<h4>
+		<abbr class="pull-right hidden-xs"
+			title="<fmt:message key="message.learnerInstructions2" ><fmt:param value="${appointedScribe}"/></fmt:message>&nbsp;<fmt:message key="message.learnerInstructions3" />"><i
+			class="fa fa-question-circle text-info"></i></abbr>
 		<fmt:message key="heading.report" />
-	</div>
+	</h4>
+	<p class="help-block" style="font-size: 12px"><fmt:message key="activity.title"/>: ${appointedScribe}</p>
 	<html:form action="learning">
 		<html:hidden property="dispatch" value="submitApproval"></html:hidden>
 		<html:hidden property="toolSessionID"></html:hidden>
 		<html:hidden property="mode"></html:hidden>
 
 		<c:forEach var="reportDTO" items="${scribeSessionDTO.reportDTOs}">
 
-			<div class="shading-bg">
-				<p>
-					<c:out value="${reportDTO.headingDTO.headingText}" escapeXml="false"/> 
-				</p>
+			<div class="row">
+				<div class="col-xs-12">
+					<div class="panel panel-default">
+						<div class="panel-heading panel-title">
+							<c:out value="${reportDTO.headingDTO.headingText}" escapeXml="false" />
+						</div>
+						<div class="panel-body">
+							<c:if test="${not empty reportDTO.entryText}">
+								<abbr class="pull-right hidden-xs" title="<fmt:message key="label.scribe.posted" />"><i
+									class="fa fa-xs fa-question-circle text-info"></i></abbr>
 
-				<c:if test="${not empty reportDTO.entryText}">
-					<ul>
-						<li>
-							<p>
 								<c:set var="entry">
-									<lams:out value="${reportDTO.entryText}" escapeHtml="true"/>
+									<lams:out value="${reportDTO.entryText}" escapeHtml="true" />
 								</c:set>
-								<c:out value="${entry}" escapeXml="false"/> 
-							</p>
-						</li>
-					</ul>
-				</c:if>
+								<c:out value="${entry}" escapeXml="false" />
+
+							</c:if>
+						</div>
+					</div>
+				</div>
 			</div>
 
 		</c:forEach>
 
-		<p>
-			<c:if
-				test="${scribeSessionDTO.reportSubmitted and (not scribeUserDTO.reportApproved)}">
-				<html:submit styleClass="button">
-					<fmt:message key="button.agree" />
-				</html:submit>
-			</c:if>
-		</p>
+		<c:if test="${scribeSessionDTO.reportSubmitted and (not scribeUserDTO.reportApproved)}">
+			<div class="row">
+				<div class="col-xs-12" id="agreeButton">
+					<html:submit styleClass="btn btn-success pull-left">
+						<fmt:message key="button.agree" />
+					</html:submit>
+				</div>
+			</div>
+		</c:if>
 
 	</html:form>
 
-</div>
 
-<div id="footer"></div>
+	<div id="footer"></div>
+
+</lams:Page>
Index: lams_tool_scribe/web/pages/learning/notebook.jsp
===================================================================
diff -u -r2c5b4d48beb07aaf5f39402b8ed8efc5f04033cd -r276c03eb13322c40ee4c9cc63d0e34d8c371c68a
--- lams_tool_scribe/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision 2c5b4d48beb07aaf5f39402b8ed8efc5f04033cd)
+++ lams_tool_scribe/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision 276c03eb13322c40ee4c9cc63d0e34d8c371c68a)
@@ -10,25 +10,21 @@
         }
 </script>
 
-<div id="content">
+<lams:Page type="learner" title="${scribeDTO.title}">
 
-	<h1>
-		<c:out value="${scribeDTO.title}" escapeXml="true"/>
-	</h1>
-
 	<html:form action="/learning" method="post" onsubmit="disableFinishButton();" styleId="messageForm">
 		<html:hidden property="dispatch" value="submitReflection" />
 		<html:hidden property="scribeUserUID" />
 
-		<p>
+		<div class="panel">
 			<lams:out value="${scribeDTO.reflectInstructions}" escapeHtml="true"/>
-		</p>
+		</div>
 
-		<html:textarea cols="60" rows="8" property="entryText"
-			styleClass="text-area"></html:textarea>
+		<html:textarea rows="5" styleId="focused" property="entryText"
+			styleClass="form-control"></html:textarea>
 
-		<div class="space-bottom-top align-right">
-			<html:link href="#nogo" styleClass="button" styleId="finishButton" onclick="submitForm('finish')">
+		
+			<html:link href="#nogo" styleClass="btn btn-primary voffset10 pull-right na" styleId="finishButton" onclick="submitForm('finish')">
 				<span class="nextActivity">
 					<c:choose>
 	 					<c:when test="${activityPosition.last}">
@@ -40,8 +36,14 @@
 	 				</c:choose>
 	 			</span>
 			</html:link>
-		</div>
 
 	</html:form>
-</div>
+</lams:Page>
 
+
+<script type="text/javascript">
+	window.onload = function() {
+		document.getElementById("focused").focus();
+	}
+</script>
+
Index: lams_tool_scribe/web/pages/learning/parts/finishButton.jsp
===================================================================
diff -u -r8aded0b18a5a7712622ae56f38923fa297449977 -r276c03eb13322c40ee4c9cc63d0e34d8c371c68a
--- lams_tool_scribe/web/pages/learning/parts/finishButton.jsp	(.../finishButton.jsp)	(revision 8aded0b18a5a7712622ae56f38923fa297449977)
+++ lams_tool_scribe/web/pages/learning/parts/finishButton.jsp	(.../finishButton.jsp)	(revision 276c03eb13322c40ee4c9cc63d0e34d8c371c68a)
@@ -13,22 +13,22 @@
         }
 </script>
 
-<div class="space-bottom">
+<div class="voffset10">
 	<html:form action="/learning" method="post" onsubmit="disableFinishButton()" styleId="messageForm">
 		<html:hidden property="scribeUserUID" value="${scribeUserDTO.uid}" />
 		<c:choose>
 			<c:when
 				test="${!scribeUserDTO.finishedActivity and scribeDTO.reflectOnActivity}">
 				<html:hidden property="dispatch" value="openNotebook" />
 
-				<html:submit styleClass="button right-buttons">
+				<html:submit styleClass="btn btn-primary pull-right">
 					<fmt:message key="button.continue" />
 				</html:submit>
 
 			</c:when>
 			<c:otherwise>
 				<html:hidden property="dispatch" value="finishActivity" />
-				<html:link href="#nogo" styleClass="button right-buttons" styleId="finishButton" onclick="submitForm('finish')">
+				<html:link href="#nogo" styleClass="btn btn-primary pull-right na" styleId="finishButton" onclick="submitForm('finish')">
 					<span class="nextActivity">
 						<c:choose>
 		 					<c:when test="${activityPosition.last}">
Index: lams_tool_scribe/web/pages/learning/parts/reportBody.jsp
===================================================================
diff -u -r2353a5dcfd4b3ad6d21b3f0cda3d7833fc97c6b9 -r276c03eb13322c40ee4c9cc63d0e34d8c371c68a
--- lams_tool_scribe/web/pages/learning/parts/reportBody.jsp	(.../reportBody.jsp)	(revision 2353a5dcfd4b3ad6d21b3f0cda3d7833fc97c6b9)
+++ lams_tool_scribe/web/pages/learning/parts/reportBody.jsp	(.../reportBody.jsp)	(revision 276c03eb13322c40ee4c9cc63d0e34d8c371c68a)
@@ -1,86 +1,99 @@
-	<%@ include file="/common/taglibs.jsp"%>
-	
-	<h1>
-		<c:out value="${scribeDTO.title}" escapeXml="true" />
-	</h1>
 
-	<div class="space-left space-right">
+<%@ include file="/common/taglibs.jsp"%>
 
-		<p>
-			<c:out value="${scribeDTO.instructions}" escapeXml="false"/>
-		</p>
-	
-		<%@include file="/pages/parts/voteDisplay.jsp"%>
-	
-		<div class="field-name">
-			<fmt:message key="heading.report" />
-		</div>
-		<c:forEach var="reportDTO" items="${scribeSessionDTO.reportDTOs}">
-	
-			<div class="shading-bg">
-				<p>
-					<c:out value="${reportDTO.headingDTO.headingText}" escapeXml="false"/>
-				</p>
-	
-				<c:if test="${not empty reportDTO.entryText}">
-					<ul>
-						<li>
-							<p>
-								<c:set var="entry">
-									<lams:out value="${reportDTO.entryText}" escapeHtml="true"/>
-								</c:set>
-								<c:out value="${entry}" escapeXml="false"/>
-							</p>
-						</li>
-					</ul>
-				</c:if>
+<div class="panel">
+	<c:out value="${scribeDTO.instructions}" escapeXml="false" />
+</div>
+
+<%@include file="/pages/parts/voteDisplay.jsp"%>
+
+<h4>
+	<fmt:message key="heading.report" />
+</h4>
+
+<c:forEach var="reportDTO" items="${scribeSessionDTO.reportDTOs}">
+
+	<div class="row">
+		<div class="col-xs-12">
+			<div class="panel panel-default">
+				<div class="panel-heading panel-title">
+					<c:out value="${reportDTO.headingDTO.headingText}" escapeXml="false" />
+				</div>
+				<div class="panel-body">
+					<c:if test="${not empty reportDTO.entryText}">
+						<c:set var="entry">
+							<lams:out value="${reportDTO.entryText}" escapeHtml="true" />
+						</c:set>
+						<c:out value="${entry}" escapeXml="false" />
+					</c:if>
+				</div>
 			</div>
-		</c:forEach>
-	
-		<c:if
-			test="${scribeUserDTO.finishedActivity and scribeDTO.reflectOnActivity}">
-			<div>
-				<h4>
-				  <fmt:message key="heading.reflection" />
-				</h4>
-				
-				<strong><lams:out value="${scribeDTO.reflectInstructions}" escapeHtml="true"/></strong>
-				<p>
-					<lams:out value="${scribeUserDTO.notebookEntry}" escapeHtml="true"/>
-				</p>
-			</div>
-		</c:if>
-	
-	
-		<c:if test="${not empty otherScribeSessions}">
-			<h2>
-				<fmt:message key="heading.other.group.reports" />
-			</h2>
-		
-			<c:forEach var="scribeSessionDTO" items="${otherScribeSessions}">
-				<div class="field-name">
-					${scribeSessionDTO.sessionName}
+		</div>
+	</div>
+</c:forEach>
+
+<c:if test="${scribeUserDTO.finishedActivity and scribeDTO.reflectOnActivity}">
+	<div class="row">
+		<div class="col-xs-12">
+			<div class="panel panel-default">
+				<div class="panel-heading panel-title">
+					<fmt:message key="heading.reflection" />
 				</div>
-				<c:forEach var="reportDTO" items="${scribeSessionDTO.reportDTOs}">
-					<div class="shading-bg">
-						<p>
-							<c:out value="${reportDTO.headingDTO.headingText}" escapeXml="false"/>
-						</p>
-			
-						<c:if test="${not empty reportDTO.entryText}">
-							<ul>
-								<li>
-									<p>
+				<div class="panel-body">
+					<div class="panel">
+						<lams:out value="${scribeDTO.reflectInstructions}" escapeHtml="true" />
+					</div>
+
+					<div class="panel-body bg-warning voffset10">
+						<lams:out value="${scribeUserDTO.notebookEntry}" escapeHtml="true" />
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</c:if>
+
+
+<c:if test="${not empty otherScribeSessions}">
+	<h4>
+		<fmt:message key="heading.other.group.reports" />
+	</h4>
+
+	<c:set var="sessNumber" value="0"/>
+	<c:forEach var="scribeSessionDTO" items="${otherScribeSessions}">
+		<c:set var="sessNumber" value="${sessNumber +1 }"/>
+		<div class="row">
+			<div class="col-xs-12">
+				<div class="panel panel-default">
+					<div class="panel-heading panel-title">
+					<a data-toggle="collapse" data-target="#panel-${sessNumber}" href="#panel-${sessNumber}">${scribeSessionDTO.sessionName}</a>
+					</div>
+					<div id="panel-${sessNumber}" class="panel-body panel-collapse collapse in">
+
+						<c:forEach var="reportDTO" items="${scribeSessionDTO.reportDTOs}">
+							<div class="panel panel-info">
+								<div class="panel-heading panel-title">
+									<c:out value="${reportDTO.headingDTO.headingText}" escapeXml="false" />
+								</div>
+								<div class="panel-body">
+									<c:if test="${not empty reportDTO.entryText}">
 										<c:set var="entry">
-											<lams:out value="${reportDTO.entryText}" escapeHtml="true"/> 
+											<lams:out value="${reportDTO.entryText}" escapeHtml="true" />
 										</c:set>
-										<c:out value="${entry}" escapeXml="false"/>
-									</p>
-								</li>
-							</ul>
-						</c:if>
+										<c:out value="${entry}" escapeXml="false" />
+									</c:if>
+								</div>
+							</div>
+
+						</c:forEach>
+
+
 					</div>
-				</c:forEach>
-			</c:forEach>
-		</c:if>
-	</div>
+				</div>
+			</div>
+		</div>
+
+
+	</c:forEach>
+</c:if>
+
Index: lams_tool_scribe/web/pages/learning/report.jsp
===================================================================
diff -u -r0edacde89fb315c54ed60643a06ef7d3e7b5bb89 -r276c03eb13322c40ee4c9cc63d0e34d8c371c68a
--- lams_tool_scribe/web/pages/learning/report.jsp	(.../report.jsp)	(revision 0edacde89fb315c54ed60643a06ef7d3e7b5bb89)
+++ lams_tool_scribe/web/pages/learning/report.jsp	(.../report.jsp)	(revision 276c03eb13322c40ee4c9cc63d0e34d8c371c68a)
@@ -1,6 +1,6 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<div id="content">
+<lams:Page type="learner" title="${scribeDTO.title}">
 
 	<%@ include file="parts/reportBody.jsp"%>
 
@@ -11,3 +11,5 @@
 </div>
 
 <div id="footer"></div>
+
+</lams:Page>
\ No newline at end of file
Index: lams_tool_scribe/web/pages/learning/scribe.jsp
===================================================================
diff -u -r2c5b4d48beb07aaf5f39402b8ed8efc5f04033cd -r276c03eb13322c40ee4c9cc63d0e34d8c371c68a
--- lams_tool_scribe/web/pages/learning/scribe.jsp	(.../scribe.jsp)	(revision 2c5b4d48beb07aaf5f39402b8ed8efc5f04033cd)
+++ lams_tool_scribe/web/pages/learning/scribe.jsp	(.../scribe.jsp)	(revision 276c03eb13322c40ee4c9cc63d0e34d8c371c68a)
@@ -7,64 +7,53 @@
 	<lams:WebAppURL />
 </c:set>
 
-<script type="text/javascript"
-	src="${lams}includes/javascript/prototype.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/prototype.js"></script>
 
 <script type="text/javascript">
-	setTimeout("refreshPage()",5000)
+	setTimeout("refreshPage()", 5000)
 
 	function refreshPage() {
-		
+
 		var url = '${tool}learning.do';
 		var params = 'dispatch=getVoteDisplay&toolSessionID=${scribeSessionDTO.sessionID}';
-		
-		var myAjax = new Ajax.Updater(
-			'voteDisplay',
-			url,
-			{
-				method: 'get',
-				parameters: params
-			});
-				
-		setTimeout("refreshPage()",5000)		
+
+		var myAjax = new Ajax.Updater('voteDisplay', url, {
+			method : 'get',
+			parameters : params
+		});
+
+		setTimeout("refreshPage()", 5000)
 	}
-	
+
 	function submitApproval() {
 		var url = '${tool}learning.do';
 		var params = 'dispatch=submitApproval&toolSessionID=${scribeSessionDTO.sessionID}';
-		
-		var myAjax = new Ajax.Updater(
-			'voteDisplay',
-			url,
-			{
-				method: 'get',
-				parameters: params
+
+		var myAjax = new Ajax.Updater('voteDisplay', url, {
+			method : 'get',
+			parameters : params
 		});
-		
+
 		// remove the Agree button.
 		document.getElementById("agreeButton").innerHTML = "";
 	}
-	
+
 	function confirmForceComplete() {
 		var message = "<fmt:message key='message.confirmForceComplete'/>";
 		if (confirm(message)) {
-			return true;			
+			return true;
 		} else {
 			return false;
 		}
 	}
 </script>
 
-<div id="content">
+<lams:Page type="learner" title="${scribeDTO.title}">
 
-	<h1>
-		<c:out value="${scribeDTO.title}" escapeXml="true" />
-	</h1>
+	<div class="panel">
+		<c:out value="${scribeDTO.instructions}" escapeXml="false" />		
+	</div>
 
-	<p>
-		<c:out value="${scribeDTO.instructions}" escapeXml="false"/>
-	</p>
-
 	<html:form action="learning">
 		<html:hidden property="dispatch" value="submitReport"></html:hidden>
 		<html:hidden property="toolSessionID"></html:hidden>
@@ -74,65 +63,90 @@
 			<%@include file="/pages/parts/voteDisplay.jsp"%>
 		</div>
 
-		<h2>
+		<h4>
+			<abbr class="pull-right hidden-xs" title="<fmt:message key="message.scribeInstructions2" />&nbsp;<fmt:message key="message.scribeInstructions3" />"><i
+										class="fa fa-question-circle text-info"></i></abbr>
 			<fmt:message key="heading.report" />
-		</h2>
+		</h4>
+		<c:set var="counter" value="0"/>
 		<c:forEach var="reportDTO" items="${scribeSessionDTO.reportDTOs}">
-			<div class="shading-bg">
-				<p>
-					<c:out value="${reportDTO.headingDTO.headingText}" escapeXml="false"/>
-				</p>
+		<c:set var="counter" value="${counter + 1}"/>
+			<div class="row">
+				<div class="col-xs-12">
+					<div class="panel panel-default">
+						<div class="panel-heading panel-title">
+							<c:out value="${reportDTO.headingDTO.headingText}" escapeXml="false" />
+						</div>
+						<div class="panel-body">
 
+							<c:if test="${not empty reportDTO.entryText}">
+								<div class="panel-warning panel-body bg-warning">
+									<abbr class="pull-right hidden-xs" title="<fmt:message key="label.what.others.see" />"><i
+										class="fa fa-xs fa-question-circle text-info"></i></abbr>
 
-				<c:if test="${not empty reportDTO.entryText}">
-					<ul>
-						<li>
-							<p>
-								<c:set var="entry">
-									<lams:out value="${reportDTO.entryText}" escapeHtml="true"/>
-								</c:set>
-								<c:out value="${entry}" escapeXml="false"/>
-							</p>
-						</li>
-					</ul>
-				</c:if>
+									<c:set var="entry">
+										<lams:out value="${reportDTO.entryText}" escapeHtml="true" />
+									</c:set>
+									<c:out value="${entry}" escapeXml="false" />
+								</div>
+							</c:if>
 
-				<c:if test="${not scribeUserDTO.finishedActivity}">
-					<html:textarea property="report(${reportDTO.uid})" rows="7"
-						cols="20" value="${reportDTO.entryText}" style="width: 100%;"></html:textarea>
-				</c:if>
+							<c:if test="${not scribeUserDTO.finishedActivity}">
+								<html:textarea styleId="report-${counter}" property="report(${reportDTO.uid})" rows="6" value="${reportDTO.entryText}"
+									styleClass="form-control voffset5"></html:textarea>
+							</c:if>
+
+
+						</div>
+					</div>
+				</div>
 			</div>
 		</c:forEach>
 
 		<c:if test="${not scribeUserDTO.finishedActivity}">
-			<html:submit styleClass="button small-space-bottom">
-				<fmt:message key="button.submitReport" />
-			</html:submit>
+			<div class="row">
+				<div class="col-xs-12" id="submitReportBtn">
+					<html:submit styleClass="btn btn-sm btn-default pull-right">
+						<fmt:message key="button.submitReport" />
+					</html:submit>
+				</div>
+			</div>
 		</c:if>
 
+
 	</html:form>
 
 	<hr>
 
-	<div class="space-bottom-top">
-		<html:form action="learning" onsubmit="return confirmForceComplete();">
-			<html:hidden property="dispatch" value="forceCompleteActivity" />
-			<html:hidden property="scribeUserUID" value="${scribeUserDTO.uid}" />
-			<html:hidden property="mode" />
 
-			<div class="right-buttons">
-				<html:submit styleClass="button">
-					<fmt:message key="button.forceComplete" />
-				</html:submit>
-			</div>
-		</html:form>
+	<html:form action="learning" onsubmit="return confirmForceComplete();">
+		<html:hidden property="dispatch" value="forceCompleteActivity" />
+		<html:hidden property="scribeUserUID" value="${scribeUserDTO.uid}" />
+		<html:hidden property="mode" />
 
-		<span id="agreeButton"> <c:if
-				test="${scribeSessionDTO.reportSubmitted and (not scribeUserDTO.reportApproved)}">
-				<a id="agreeButton" class="button" onclick="submitApproval();">
-					<fmt:message key="button.agree" /> </a>
-			</c:if> </span>
-	</div>
-</div>
+		<div id="forceCompleteBtn">
+			<html:submit styleClass="btn btn-primary pull-right">
+				<fmt:message key="button.forceComplete" />
+			</html:submit>
+		</div>
+	</html:form>
 
-<div id="footer"></div>
+	<c:if test="${scribeSessionDTO.reportSubmitted and (not scribeUserDTO.reportApproved)}">
+		<div id="agreeButton">
+			<a id="agreeButton" class="btn btn-success pull-left" onclick="submitApproval();"> <fmt:message
+					key="button.agree" />
+			</a>
+		</div>
+	</c:if>
+
+	<div id="footer"></div>
+
+</lams:Page>
+
+
+<script type="text/javascript">
+	window.onload = function() {
+		document.getElementById("report-1").focus();
+	}
+</script>
+
Index: lams_tool_scribe/web/pages/learning/waitForScribe.jsp
===================================================================
diff -u -r1bddf2af8d3cd3191a23d54a718bd3f313cb1aea -r276c03eb13322c40ee4c9cc63d0e34d8c371c68a
--- lams_tool_scribe/web/pages/learning/waitForScribe.jsp	(.../waitForScribe.jsp)	(revision 1bddf2af8d3cd3191a23d54a718bd3f313cb1aea)
+++ lams_tool_scribe/web/pages/learning/waitForScribe.jsp	(.../waitForScribe.jsp)	(revision 276c03eb13322c40ee4c9cc63d0e34d8c371c68a)
@@ -1,15 +1,19 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<div id="content">
-	<h1>
-		<fmt:message key="activity.title" />
-	</h1>
+<c:set var="title" scope="request">
+	<fmt:message key="activity.title" />
+</c:set>
+<c:set var="msg" scope="request">
+	<fmt:message key="message.waitForScribe" />
+</c:set>
+
+<lams:Page type="learner" title="${title}">
 	<p>
-		<fmt:message key="message.waitForScribe" />
+		<c:out value="${msg}"/>
 	</p>
 
-	<div align="right" class="space-bottom-top">
-		<a href="javascript:location.reload(true);" class="button"><fmt:message
-	key="button.try.again" /> </a></div>
-</div>
 
+		<a href="javascript:location.reload(true);" class="btn btn-primary voffset10 pull-right"><fmt:message
+	key="button.try.again" /> </a>
+</lams:Page>
+
Index: lams_tool_scribe/web/pages/parts/voteDisplay.jsp
===================================================================
diff -u -r2353a5dcfd4b3ad6d21b3f0cda3d7833fc97c6b9 -r276c03eb13322c40ee4c9cc63d0e34d8c371c68a
--- lams_tool_scribe/web/pages/parts/voteDisplay.jsp	(.../voteDisplay.jsp)	(revision 2353a5dcfd4b3ad6d21b3f0cda3d7833fc97c6b9)
+++ lams_tool_scribe/web/pages/parts/voteDisplay.jsp	(.../voteDisplay.jsp)	(revision 276c03eb13322c40ee4c9cc63d0e34d8c371c68a)
@@ -1,19 +1,15 @@
 <%@ include file="/common/taglibs.jsp"%>
-
-<c:set var="tool">
-	<lams:WebAppURL />
-</c:set>
-
-<div style="background-color: silver; width: 95%; height: 10px;">	
-	<span>
-		<img src="${tool}images/bar1.gif" width="${scribeSessionDTO.votePercentage}%" height="10" alt="progress bar">
-	</span>
+<div class="progress">
+	<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
+		aria-valuenow="${scribeSessionDTO.votePercentage}" aria-valuemin="0" aria-valuemax="100"
+		style="width: ${scribeSessionDTO.votePercentage}%">
+		<span class="sr-only">${scribeSessionDTO.votePercentage}%</span>
+		<div id="agreementPercentage">
+		<fmt:message key="message.voteStatistics">
+			<fmt:param value="${scribeSessionDTO.numberOfVotes}"></fmt:param>
+			<fmt:param value="${scribeSessionDTO.numberOfLearners}"></fmt:param>
+		</fmt:message>
+		(${scribeSessionDTO.votePercentage}%)
+		</div>
+	</div>
 </div>
-
-<p>	
-	<fmt:message key="message.voteStatistics">
-		<fmt:param value="${scribeSessionDTO.numberOfVotes}"></fmt:param>
-		<fmt:param value="${scribeSessionDTO.numberOfLearners}"></fmt:param>
-	</fmt:message>
-	(${scribeSessionDTO.votePercentage}%)
-</p>