Index: lams_tool_spreadsheet/web/WEB-INF/tags/Alert.tag
===================================================================
diff -u
--- lams_tool_spreadsheet/web/WEB-INF/tags/Alert.tag	(revision 0)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/Alert.tag	(revision fdaaf5fccaee2cc31539cb367c650e369a2006d2)
@@ -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_spreadsheet/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r7f9f772433a7fd55c4475241d4e3bc0765f474e8 -rfdaaf5fccaee2cc31539cb367c650e369a2006d2
--- lams_tool_spreadsheet/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 7f9f772433a7fd55c4475241d4e3bc0765f474e8)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision fdaaf5fccaee2cc31539cb367c650e369a2006d2)
@@ -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_spreadsheet/web/WEB-INF/tags/Page.tag
===================================================================
diff -u
--- lams_tool_spreadsheet/web/WEB-INF/tags/Page.tag	(revision 0)
+++ lams_tool_spreadsheet/web/WEB-INF/tags/Page.tag	(revision fdaaf5fccaee2cc31539cb367c650e369a2006d2)
@@ -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_spreadsheet/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r5e63656a12c02f7476564e278b43ff4ce86ac930 -rfdaaf5fccaee2cc31539cb367c650e369a2006d2
--- lams_tool_spreadsheet/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 5e63656a12c02f7476564e278b43ff4ce86ac930)
+++ lams_tool_spreadsheet/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision fdaaf5fccaee2cc31539cb367c650e369a2006d2)
@@ -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_spreadsheet/web/pages/learning/definelater.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -rfdaaf5fccaee2cc31539cb367c650e369a2006d2
--- lams_tool_spreadsheet/web/pages/learning/definelater.jsp	(.../definelater.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_spreadsheet/web/pages/learning/definelater.jsp	(.../definelater.jsp)	(revision fdaaf5fccaee2cc31539cb367c650e369a2006d2)
@@ -8,13 +8,11 @@
 	<meta http-equiv="refresh" content="60">
 </lams:head>
 
+<c:set var="title"><fmt:message key="activity.title"/></c:set>
+
 <body class="stripes">
-	<div id="content">
-		<h1>
-			<fmt:message key="activity.title" />
-		</h1>
+	<lams:Page type="learner" title="${title}">
 		<lams:DefineLater />
-	</div>
-	<div id="footer"></div>
+	</lams:Page>
 </body>
 </lams:html>
Index: lams_tool_spreadsheet/web/pages/learning/learning.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -rfdaaf5fccaee2cc31539cb367c650e369a2006d2
--- lams_tool_spreadsheet/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_spreadsheet/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision fdaaf5fccaee2cc31539cb367c650e369a2006d2)
@@ -20,7 +20,8 @@
 	<c:set var="toolSessionID" value="${sessionMap.toolSessionID}" />
 	<c:set var="spreadsheet" value="${sessionMap.spreadsheet}" />
 	<c:set var="finishedLock" value="${sessionMap.finishedLock}" />
-
+	<c:set var="language" value="${pageContext.response.locale.language}" />
+	
 	<script type="text/javascript">
 	<!--
 		function finishSession(){
@@ -50,13 +51,9 @@
 </lams:head>
 <body class="stripes">
 
-	<div id="content">
-		<h1>
-			<c:out value="${spreadsheet.title}" escapeXml="true"/>
-		</h1>
-
+	<lams:Page type="learner" title="${spreadsheet.title}">
 		<p>
-			<c:out value="</c:out> ${spreadsheet.instructions}" escapeXml="false"/>
+			<c:out value="${spreadsheet.instructions}" escapeXml="false"/>
 		</p>
 
 		<c:if test="${sessionMap.lockOnFinish and mode != 'teacher'}">
@@ -121,76 +118,97 @@
 			<br>
 		</c:if>		
 		
-		<iframe
-			id="externalSpreadsheet" name="externalSpreadsheet" src="<html:rewrite page='/includes/javascript/simple_spreadsheet/spreadsheet_offline.html'/>?lang=<%=request.getLocale().getLanguage()%>"
-			style="width:99%;" frameborder="no" height="385px"
-			scrolling="no">
-		</iframe>
-		
-		<c:if test="${(mode != 'teacher') && (spreadsheet.learnerAllowedToSave) && !(sessionMap.lockOnFinish && sessionMap.userFinished)}">
-			<div class="space-bottom-top align-right">
-				<html:button property="SaveButton" onclick="return saveUserSpreadsheet('saveUserSpreadsheet')" styleClass="button">
-					<fmt:message key="label.save" />
-				</html:button>
+		<div class="row no-gutter">
+			<div class="col-xs-12">
+				<div class="panel panel-default">
+					<div class="panel-body">
+					<iframe
+						id="externalSpreadsheet" name="externalSpreadsheet" src="<html:rewrite page='/includes/javascript/simple_spreadsheet/spreadsheet_offline.html'/>?lang=${language}"
+						style="width:99%;" frameborder="no" height="385px"
+						scrolling="no">
+						</iframe>
+				
+					<c:if test="${(mode != 'teacher') && (spreadsheet.learnerAllowedToSave) && !(sessionMap.lockOnFinish && sessionMap.userFinished)}">
+						<div class="space-bottom-top align-right">
+							<html:button property="SaveButton" onclick="return saveUserSpreadsheet('saveUserSpreadsheet')" styleClass="btn btn-primary voffset10 pull-right">
+								<fmt:message key="label.save" />
+							</html:button>
+						</div>
+					</c:if>		
+					</div>
+				</div>
 			</div>
-		</c:if>		
+		</div>
 
+
 		<c:if test="${sessionMap.userFinished and sessionMap.reflectOn}">
-			<div class="small-space-top">
-				<h3><fmt:message key="title.reflection" /></h3>
-				  <p>
-					<strong><lams:out escapeHtml="true" value="${sessionMap.reflectInstructions}"/></strong>
-				  </p>
+			<div class="row no-gutter">
+				<div class="col-xs-12">
+					<div class="panel panel-default">
+						<div class="panel-heading panel-title">
+							<fmt:message key="title.reflection" />
+						</div>
+						<div class="panel-body">
+							<div class="reflectionInstructions">
+								<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true" />
+							</div>
+							<div class="panel">
+								<lams:out value="${QaLearningForm.entryText}" escapeHtml="true" />
+							</div>
 
-				<c:choose>
-					<c:when test="${empty sessionMap.reflectEntry}">
-						<p>
-							<em> <fmt:message key="message.no.reflection.available" />
-							</em>
-						</p>
-					</c:when>
-					<c:otherwise>
-						<p>
-							<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}"/>
-						</p>
-					</c:otherwise>
-				</c:choose>
+							<c:if test="${hasEditRight}">
+								<html:button property="forwardtoReflection" styleClass="btn btn-default pull-left"
+									onclick="submitMethod('forwardtoReflection');">
+									<fmt:message key="label.edit" />
+								</html:button>
+							</c:if>
+							
+							<c:choose>
+								<c:when test="${empty sessionMap.reflectEntry}">
+									<p><em> <fmt:message key="message.no.reflection.available" /></em>	</p>
+								</c:when>
+								<c:otherwise>
+									<p>	<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}"/> </p>
+								</c:otherwise>
+							</c:choose>
 
-				<c:if test="${mode != 'teacher'}">
-					<html:button property="FinishButton" onclick="return continueReflect()" styleClass="button">
-						<fmt:message key="label.edit" />
-					</html:button>
-				</c:if>
+							<c:if test="${mode != 'teacher'}">
+								<html:button property="FinishButton" onclick="return continueReflect()" styleClass="btn btn-default voffset10 pull-left">
+								<fmt:message key="label.edit" />
+								</html:button>
+							</c:if>
+							
+						</div>
+					</div>
+				</div>
 			</div>
 		</c:if>
 
 		<c:if test="${mode != 'teacher'}">
 			<div class="space-bottom-top align-right">
 				<c:choose>
-					<c:when	test="${sessionMap.reflectOn && (not sessionMap.userFinished)}">
-						<html:button property="FinishButton" onclick="return continueReflect()" styleClass="button">
+					<c:when	test="${sessionMap.reflectOn && (not sessionMap.userFinished)}">				
+						<html:button property="FinishButton" onclick="return continueReflect()" styleClass="btn btn-primary pull-right">
 							<fmt:message key="label.continue" />
 						</html:button>
 					</c:when>
 					<c:otherwise>
-						<html:link href="#nogo" property="FinishButton" styleId="finishButton"	onclick="return finishSession()" styleClass="button">
-							<span class="nextActivity">
-								<c:choose>
-				 					<c:when test="${sessionMap.activityPosition.last}">
-				 						<fmt:message key="label.submit" />
-				 					</c:when>
-				 					<c:otherwise>
-				 		 				<fmt:message key="label.finished" />
-				 					</c:otherwise>
-				 				</c:choose>
-				 			</span>
+						<html:link href="#nogo" styleClass="btn btn-primary pull-right na" styleId="finishButton" onclick="return finishSession()">
+							<c:choose>
+			 					<c:when test="${sessionMap.activityPosition.last}">
+			 						<fmt:message key="label.submit" />
+			 					</c:when>
+			 					<c:otherwise>
+			 		 				<fmt:message key="label.finished" />
+			 					</c:otherwise>
+			 				</c:choose>
 						</html:link>
 					</c:otherwise>
 				</c:choose>
 			</div>
 		</c:if>
 
-	</div>
+	</lams:Page>
 	<!--closes content-->
 
 	<div id="footer">
Index: lams_tool_spreadsheet/web/pages/learning/notebook.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -rfdaaf5fccaee2cc31539cb367c650e369a2006d2
--- lams_tool_spreadsheet/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_spreadsheet/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision fdaaf5fccaee2cc31539cb367c650e369a2006d2)
@@ -21,16 +21,13 @@
 
 	<c:set var="sessionMapID" value="${param.sessionMapID}" />
 	<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
+
+	<lams:Page type="learner" title="${sessionMap.title}">
 	
 	<html:form action="/learning/submitReflection" method="post" onsubmit="disableFinishButton();" styleId="messageForm">
 		<html:hidden property="userID" />
 		<html:hidden property="sessionMapID" />
 
-		<div id="content">
-			<h1>
-				<c:out value="${sessionMap.title}" escapeXml="true"/>
-			</h1>
-
 			<%@ include file="/common/messages.jsp"%>
 
 			<p>
@@ -41,8 +38,7 @@
 				styleClass="text-area" />
 
 			<div class="space-bottom-top align-right">
-				<html:link href="#nogo" styleClass="button" styleId="finishButton" onclick="submitForm('finish')">
-					<span class="nextActivity">
+				<html:link href="#nogo" styleClass="btn btn-primary pull-right na" styleId="finishButton" onclick="submitForm('finish')">
 						<c:choose>
 							<c:when test="${sessionMap.activityPosition.last}">
 								<fmt:message key="label.submit" />
@@ -51,11 +47,10 @@
 								<fmt:message key="label.finished" />
 							</c:otherwise>
 						</c:choose>
-					</span>
 				</html:link>
 			</div>
-		</div>
 	</html:form>
+	</lams:Page>
 
 	<div id="footer">
 	</div>