Index: lams_tool_scratchie/web/WEB-INF/tags/Alert.tag
===================================================================
diff -u
--- lams_tool_scratchie/web/WEB-INF/tags/Alert.tag	(revision 0)
+++ lams_tool_scratchie/web/WEB-INF/tags/Alert.tag	(revision c9759e81d08842b6202f62bc08a78cc13ca5bcf8)
@@ -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_scratchie/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r60ea4cec0c4eda3f207fdb3ec900a4ba897400a8 -rc9759e81d08842b6202f62bc08a78cc13ca5bcf8
--- lams_tool_scratchie/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 60ea4cec0c4eda3f207fdb3ec900a4ba897400a8)
+++ lams_tool_scratchie/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision c9759e81d08842b6202f62bc08a78cc13ca5bcf8)
@@ -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_scratchie/web/WEB-INF/tags/Page.tag
===================================================================
diff -u
--- lams_tool_scratchie/web/WEB-INF/tags/Page.tag	(revision 0)
+++ lams_tool_scratchie/web/WEB-INF/tags/Page.tag	(revision c9759e81d08842b6202f62bc08a78cc13ca5bcf8)
@@ -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_scratchie/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r5e63656a12c02f7476564e278b43ff4ce86ac930 -rc9759e81d08842b6202f62bc08a78cc13ca5bcf8
--- lams_tool_scratchie/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 5e63656a12c02f7476564e278b43ff4ce86ac930)
+++ lams_tool_scratchie/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision c9759e81d08842b6202f62bc08a78cc13ca5bcf8)
@@ -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_scratchie/web/common/header.jsp
===================================================================
diff -u -r724afbcc75966e8132c8793ccbd17121491e2cc2 -rc9759e81d08842b6202f62bc08a78cc13ca5bcf8
--- lams_tool_scratchie/web/common/header.jsp	(.../header.jsp)	(revision 724afbcc75966e8132c8793ccbd17121491e2cc2)
+++ lams_tool_scratchie/web/common/header.jsp	(.../header.jsp)	(revision c9759e81d08842b6202f62bc08a78cc13ca5bcf8)
@@ -11,5 +11,6 @@
 <script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
 <script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
 <script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>    
-
+<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.timeago.js"></script>
 	
Index: lams_tool_scratchie/web/common/messages.jsp
===================================================================
diff -u -r6aaee4b2fe2caa08b0c63a0de11f05042d5a3e18 -rc9759e81d08842b6202f62bc08a78cc13ca5bcf8
--- lams_tool_scratchie/web/common/messages.jsp	(.../messages.jsp)	(revision 6aaee4b2fe2caa08b0c63a0de11f05042d5a3e18)
+++ lams_tool_scratchie/web/common/messages.jsp	(.../messages.jsp)	(revision c9759e81d08842b6202f62bc08a78cc13ca5bcf8)
@@ -1,8 +1,8 @@
 <%-- Error Messages --%>
 <logic:messagesPresent>
-	<p class="warning">
+	<lams:Alert id="error" type="danger" close="false">
 	        <html:messages id="error">
 	            <c:out value="${error}" escapeXml="false"/><br/>
 	        </html:messages>
-	</p>
+	</lams:Alert>
 </logic:messagesPresent>
Index: lams_tool_scratchie/web/pages/learning/burningQuestions.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -rc9759e81d08842b6202f62bc08a78cc13ca5bcf8
--- lams_tool_scratchie/web/pages/learning/burningQuestions.jsp	(.../burningQuestions.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_scratchie/web/pages/learning/burningQuestions.jsp	(.../burningQuestions.jsp)	(revision c9759e81d08842b6202f62bc08a78cc13ca5bcf8)
@@ -16,85 +16,91 @@
 	<title><fmt:message key="label.learning.title" /></title>
 	<%@ include file="/common/header.jsp"%>
 	<style type="text/css">
-    	#scratches {border-spacing: 0;}
-    	#scratches tr td { padding: 12px 15px; }
-    	#scratches a, #scratches a:hover {border-bottom: none;}
-    	.scartchie-image {border: 0;}
-    </style>
+#scratches {
+	border-spacing: 0;
+}
 
+#scratches tr td {
+	padding: 12px 15px;
+}
+
+#scratches a, #scratches a:hover {
+	border-bottom: none;
+}
+
+.scartchie-image {
+	border: 0;
+}
+</style>
+
 	<script language="JavaScript" type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
 	<script type="text/javascript">
-
 		function disableFinishButton() {
 			document.getElementById("finish-button").disabled = true;
 		}
-	    function submitForm(){
-	    	var f = document.getElementById('burning-questions');
-	        f.submit();
-	    }
-		
-    </script>
+		function submitForm() {
+			var f = document.getElementById('burning-questions');
+			f.submit();
+		}
+	</script>
 </lams:head>
 <body class="stripes">
 
-	<div id="content">
-		<h1>
-			<c:out value="${scratchie.title}" escapeXml="true"/>
-		</h1>
-		
-		<form id="burning-questions" name="burning-questions" method="post" action="<c:url value='/learning/saveBurningQuestions.do?sessionMapID=${sessionMapID}'/>" onsubmit="disableFinishButton();">
-		
-		<c:forEach var="item" items="${sessionMap.itemList}" varStatus="j">
-			<h3><c:out value="${item.title}" escapeXml="true"/></h3>
-			<div><c:out value="${item.description}" escapeXml="false"/></div>
-			
-			<table id="scratches" class="alternative-color">
-				<c:forEach var="answer" items="${item.answers}" varStatus="status">
-					<tr>
-						<td style="width: 40px;">
-							<c:choose>
-								<c:when test="${answer.scratched && answer.correct}">
-									<img src="<html:rewrite page='/includes/images/scratchie-correct.png'/>" class="scartchie-image">
-								</c:when>
-								<c:when test="${answer.scratched && !answer.correct}">
-									<img src="<html:rewrite page='/includes/images/scratchie-wrong.png'/>" class="scartchie-image">
-								</c:when>
-								<c:otherwise>
-									<img src="<html:rewrite page='/includes/images/answer-${status.index + 1}.png'/>" class="scartchie-image">
-								</c:otherwise>
-							</c:choose>
-						</td>
-								
-						<td style="vertical-align: middle;">
-							${answer.description} 
-						</td>
-					</tr>
-				</c:forEach>
-			</table>
-			
-			<h4><fmt:message key="label.burning.question" /></h4>
-			<input type="hidden" name="itemUid${j.index}" value="${item.uid}" />
-			<textarea cols="55" rows="5" name="burningQuestion${j.index}" class="text-area" >${item.burningQuestion}</textarea>
-			<br><br><br>		
-		</c:forEach>
-		
-		<!-- general burning Question -->
-		<h4><fmt:message key="label.general.burning.question" /></h4>
-		<textarea cols="55" rows="5" name="generalBurningQuestion" class="text-area" >${sessionMap.generalBurningQuestion}</textarea>
-		<br><br><br>		
-		
-		<div class="space-bottom-top align-right">
-			<html:button property="finish-button" styleId="finish-button" onclick="submitForm()" styleClass="button">
-				<fmt:message key="label.submit" />
-			</html:button>
-		</div>
+	<lams:Page type="learner" title="${scratchie.title}">
 
-	</div>
-	<!--closes content-->
+		<form id="burning-questions" name="burning-questions" method="post"
+			action="<c:url value='/learning/saveBurningQuestions.do?sessionMapID=${sessionMapID}'/>"
+			onsubmit="disableFinishButton();">
 
-	<div id="footer">
-	</div>
-	<!--closes footer-->
+			<c:forEach var="item" items="${sessionMap.itemList}" varStatus="j">
+				<div class="lead">
+					<c:out value="${item.title}" escapeXml="true" />
+				</div>
+				<div class="panel">
+					<c:out value="${item.description}" escapeXml="false" />
+				</div>
 
+				<table id="scratches" class="alternative-color">
+					<c:forEach var="answer" items="${item.answers}" varStatus="status">
+						<tr>
+							<td style="width: 40px;"><c:choose>
+									<c:when test="${answer.scratched && answer.correct}">
+										<img src="<html:rewrite page='/includes/images/scratchie-correct.png'/>" class="scartchie-image">
+									</c:when>
+									<c:when test="${answer.scratched && !answer.correct}">
+										<img src="<html:rewrite page='/includes/images/scratchie-wrong.png'/>" class="scartchie-image">
+									</c:when>
+									<c:otherwise>
+										<img src="<html:rewrite page='/includes/images/answer-${status.index + 1}.png'/>" class="scartchie-image">
+									</c:otherwise>
+								</c:choose></td>
+
+							<td style="vertical-align: middle;">${answer.description}</td>
+						</tr>
+					</c:forEach>
+				</table>
+
+				<div class="form-group voffset5">
+					<label for="burningQuestion${j.index}"><fmt:message key="label.burning.question" /></label> <input type="hidden"
+						name="itemUid${j.index}" value="${item.uid}" />
+					<textarea rows="5" id="burningQuestion${j.index}" name="burningQuestion${j.index}" class="form-control">${item.burningQuestion}</textarea>
+				</div>
+			</c:forEach>
+
+			<!-- general burning Question -->
+			<div class="form-group voffset5">
+				<label for=""><fmt:message key="label.general.burning.question" /></label>
+				<textarea rows="5" id="generalBurningQuestion" name="generalBurningQuestion" class="form-control">${sessionMap.generalBurningQuestion}</textarea>
+			</div>
+			<div class="voffset10 pull-right">
+				<html:button property="finish-button" styleId="finish-button" onclick="submitForm()" styleClass="btn btn-default na">
+					<fmt:message key="label.submit" />
+				</html:button>
+			</div>
+
+
+			<div id="footer"></div>
+			<!--closes footer-->
+	</lams:Page>
 </body>
 </lams:html>
Index: lams_tool_scratchie/web/pages/learning/definelater.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -rc9759e81d08842b6202f62bc08a78cc13ca5bcf8
--- lams_tool_scratchie/web/pages/learning/definelater.jsp	(.../definelater.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_scratchie/web/pages/learning/definelater.jsp	(.../definelater.jsp)	(revision c9759e81d08842b6202f62bc08a78cc13ca5bcf8)
@@ -3,18 +3,20 @@
 <%@include file="/common/taglibs.jsp"%>
 
 <lams:html>
-	<lams:head>
-		<%@ include file="/common/header.jsp"%>
-		<meta http-equiv="refresh" content="60">
-	</lams:head>
-	
-	<body class="stripes">
-		<div id="content">
-			<h1>
-				<fmt:message key="activity.title" />
-			</h1>
-			<lams:DefineLater />
+<lams:head>
+	<%@ include file="/common/header.jsp"%>
+	<meta http-equiv="refresh" content="60">
+</lams:head>
+
+<c:set var="title">
+	<fmt:message key="activity.title" />
+</c:set>
+
+<body class="stripes">
+	<lams:Page type="learner" title="${title}">
+		<lams:DefineLater />
 		</div>
 		<div id="footer"></div>
-	</body>
+	</lams:Page>
+</body>
 </lams:html>
Index: lams_tool_scratchie/web/pages/learning/learning.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -rc9759e81d08842b6202f62bc08a78cc13ca5bcf8
--- lams_tool_scratchie/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_scratchie/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision c9759e81d08842b6202f62bc08a78cc13ca5bcf8)
@@ -1,28 +1,40 @@
 <!DOCTYPE html>
 
 <%@ include file="/common/taglibs.jsp"%>
-	<%-- param has higher level for request attribute --%>
-	<c:if test="${not empty param.sessionMapID}">
-		<c:set var="sessionMapID" value="${param.sessionMapID}" />
-	</c:if>
-	<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
+<%-- param has higher level for request attribute --%>
+<c:if test="${not empty param.sessionMapID}">
+	<c:set var="sessionMapID" value="${param.sessionMapID}" />
+</c:if>
+<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 
-	<c:set var="mode" value="${sessionMap.mode}" />
-	<c:set var="toolSessionID" value="${sessionMap.toolSessionID}" />
-	<c:set var="scratchie" value="${sessionMap.scratchie}" />
-	<c:set var="isUserLeader" value="${sessionMap.isUserLeader}" />
+<c:set var="mode" value="${sessionMap.mode}" />
+<c:set var="toolSessionID" value="${sessionMap.toolSessionID}" />
+<c:set var="scratchie" value="${sessionMap.scratchie}" />
+<c:set var="isUserLeader" value="${sessionMap.isUserLeader}" />
 
 <lams:html>
 <lams:head>
 	<title><fmt:message key="label.learning.title" /></title>
 	<%@ include file="/common/header.jsp"%>
 	<style type="text/css">
-    	#scratches {margin: 40px 0px; border-spacing: 0;}
-    	#scratches tr td { padding: 12px 15px; }
-    	#scratches a, #scratches a:hover {border-bottom: none;}
-    	.scartchie-image {border: 0;}
-    </style>
+#scratches {
+	margin: 40px 0px;
+	border-spacing: 0;
+}
 
+#scratches tr td {
+	padding: 12px 15px;
+}
+
+#scratches a, #scratches a:hover {
+	border-bottom: none;
+}
+
+.scartchie-image {
+	border: 0;
+}
+</style>
+
 	<script language="JavaScript" type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
 	<script type="text/javascript">
 
@@ -95,27 +107,28 @@
 </lams:head>
 <body class="stripes">
 
-	<div id="content">
-		<h1>
-			<c:out value="${scratchie.title}" escapeXml="true"/>
-		</h1>
-		
+	<lams:Page type="learner" title="${scratchie.title}">
+
 		<h4>
-			<fmt:message key="label.group.leader" >
-				<fmt:param><c:out value="${sessionMap.groupLeaderName}" escapeXml="true"/></fmt:param>
+			<fmt:message key="label.group.leader">
+				<fmt:param>
+					<mark><c:out value="${sessionMap.groupLeaderName}" escapeXml="true" /></mark>
+				</fmt:param>
 			</fmt:message>
 		</h4>
 
-		<p style="font-style: italic;">
-			<c:out value="${scratchie.instructions}" escapeXml="false"/>
-		</p>
-		
+		<div class="panel">
+			<c:out value="${scratchie.instructions}" escapeXml="false" />
+		</div>
+
 		<c:if test="${not empty sessionMap.submissionDeadline}">
-			<div class="info">
-				<fmt:message key="authoring.info.teacher.set.restriction" >
-					<fmt:param><lams:Date value="${sessionMap.submissionDeadline}" /></fmt:param>
+			<lams:Alert id="submissionDeadline" close="true" type="info">
+				<fmt:message key="authoring.info.teacher.set.restriction">
+					<fmt:param>
+						<lams:Date value="${sessionMap.submissionDeadline}" />
+					</fmt:param>
 				</fmt:message>
-			</div>
+			</lams:Alert>
 		</c:if>
 
 		<%@ include file="/common/messages.jsp"%>
@@ -124,12 +137,9 @@
 			<%@ include file="questionlist.jsp"%>
 		</div>
 
-	</div>
-	<!--closes content-->
 
-	<div id="footer">
-	</div>
-	<!--closes footer-->
-
+		<div id="footer"></div>
+		<!--closes footer-->
+	</lams:Page>
 </body>
 </lams:html>
Index: lams_tool_scratchie/web/pages/learning/notebook.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -rc9759e81d08842b6202f62bc08a78cc13ca5bcf8
--- lams_tool_scratchie/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_scratchie/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision c9759e81d08842b6202f62bc08a78cc13ca5bcf8)
@@ -1,55 +1,60 @@
 <%@ include file="/common/taglibs.jsp"%>
 <!DOCTYPE html>
-        
 
+
 <lams:html>
 <lams:head>
 	<title><fmt:message key="label.learning.title" /></title>
 	<%@ include file="/common/header.jsp"%>
-	
+
 	<script type="text/javascript">
 		function disableFinishButton() {
 			document.getElementById("finishButton").disabled = true;
 		}
-	    function submitForm(){
-        	var f = document.getElementById('reflectionForm');
-	        f.submit();
-	    }
+		function submitForm() {
+			var f = document.getElementById('reflectionForm');
+			f.submit();
+		}
 	</script>
 </lams:head>
 <body class="stripes">
 
 	<c:set var="sessionMapID" value="${param.sessionMapID}" />
 	<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
-	
+
 	<html:form action="/learning/submitReflection" method="post" onsubmit="disableFinishButton();" styleId="reflectionForm">
 		<html:hidden property="userID" />
 		<html:hidden property="sessionMapID" />
 
-		<div id="content">
-			<h1>
-				<c:out value="${sessionMap.title}" escapeXml="true"/>
-			</h1>
+		<lams:Page type="learner" title="${sessionMap.title}">
 
+
+
 			<%@ include file="/common/messages.jsp"%>
 
-			<p>
-				<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true"/>
-			</p>
+			<div class="panel">
+				<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true" />
+			</div>
 
-			<html:textarea cols="60" rows="8" property="entryText" styleClass="text-area" />
+			<html:textarea rows="8" property="entryText" styleId="focused" styleClass="form-control" />
 
-			<div class="space-bottom-top align-right">
-				<html:button property="finishButton" styleId="finishButton" onclick="submitForm()" styleClass="button">
+			<div class="voffset10 pull-right">
+				<html:button property="finishButton" styleId="finishButton" onclick="submitForm()"
+					styleClass="btn btn-sm btn-default">
 					<fmt:message key="label.submit" />
 				</html:button>
 			</div>
-		</div>
-	</html:form>
 
-	<div id="footer">
-	</div>
-	<!--closes footer-->
 
+			<div id="footer"></div>
+			<!--closes footer-->
+		</lams:Page>
+	</html:form>
+	<script type="text/javascript">
+		window.onload = function() {
+			document.getElementById("focused").focus();
+		}
+	</script>
+
 </body>
 </lams:html>
Index: lams_tool_scratchie/web/pages/learning/questionlist.jsp
===================================================================
diff -u -r48254dfc21feff77f6873023998798430649b7a5 -rc9759e81d08842b6202f62bc08a78cc13ca5bcf8
--- lams_tool_scratchie/web/pages/learning/questionlist.jsp	(.../questionlist.jsp)	(revision 48254dfc21feff77f6873023998798430649b7a5)
+++ lams_tool_scratchie/web/pages/learning/questionlist.jsp	(.../questionlist.jsp)	(revision c9759e81d08842b6202f62bc08a78cc13ca5bcf8)
@@ -56,87 +56,94 @@
 </script>
 
 <c:forEach var="item" items="${sessionMap.itemList}" varStatus="status">
-	<h3><c:out value="${item.title}" escapeXml="true"/></h3>
-	<div><c:out value="${item.description}" escapeXml="false"/></div>
-	
-	<table id="scratches" class="alternative-color">
+	<div class="lead">
+		<c:out value="${item.title}" escapeXml="true" />
+	</div>
+	<div class="panel-body-sm">
+		<c:out value="${item.description}" escapeXml="false" />
+	</div>
+
+	<table id="scratches" class="table table-hover">
 		<c:forEach var="answer" items="${item.answers}" varStatus="status">
 			<tr id="tr${answer.uid}">
-				<td style="width: 40px;">
-					<c:choose>
+				<td style="width: 40px;"><c:choose>
 						<c:when test="${answer.scratched && answer.correct}">
 							<img src="<html:rewrite page='/includes/images/scratchie-correct.png'/>" class="scartchie-image">
 						</c:when>
 						<c:when test="${answer.scratched && !answer.correct}">
-							<img src="<html:rewrite page='/includes/images/scratchie-wrong.png'/>" id="image-${item.uid}-${answer.uid}" class="scartchie-image">
+							<img src="<html:rewrite page='/includes/images/scratchie-wrong.png'/>" id="image-${item.uid}-${answer.uid}"
+								class="scartchie-image">
 						</c:when>
 						<c:when test="${sessionMap.userFinished || item.unraveled || !isUserLeader || (mode == 'teacher')}">
 							<img src="<html:rewrite page='/includes/images/answer-${status.index + 1}.png'/>" class="scartchie-image">
 						</c:when>
 						<c:otherwise>
-							<a href="#nogo" onclick="scratchItem(${item.uid}, ${answer.uid}); return false;" id="imageLink-${item.uid}-${answer.uid}">
-								<img src="<html:rewrite page='/includes/images/answer-${status.index + 1}.png'/>" class="scartchie-image" id="image-${item.uid}-${answer.uid}" />
+							<a href="#nogo" onclick="scratchItem(${item.uid}, ${answer.uid}); return false;"
+								id="imageLink-${item.uid}-${answer.uid}"> <img
+								src="<html:rewrite page='/includes/images/answer-${status.index + 1}.png'/>" class="scartchie-image"
+								id="image-${item.uid}-${answer.uid}" />
 							</a>
 						</c:otherwise>
-					</c:choose>
-							
-					<c:if test="${(mode == 'teacher') && (answer.attemptOrder != -1)}">
+					</c:choose> <c:if test="${(mode == 'teacher') && (answer.attemptOrder != -1)}">
 						<div style="text-align: center; margin-top: 2px;">
-							<fmt:message key="label.choice.number" >
+							<fmt:message key="label.choice.number">
 								<fmt:param>${answer.attemptOrder}</fmt:param>
 							</fmt:message>
 						</div>
-					</c:if>
-				</td>
-						
-				<td style="vertical-align: middle;">
-					${answer.description} 
-				</td>
+					</c:if></td>
+
+				<td style="vertical-align: middle;"><c:out value="${answer.description}" escapeXml="false" /></td>
 			</tr>
 		</c:forEach>
 	</table>
-					
+
 </c:forEach>
 
 <%-- show reflection (only for teacher) --%>
 <c:if test="${sessionMap.userFinished and sessionMap.reflectOn and (mode == 'teacher')}">
-	<div class="small-space-top">
-		<h3><fmt:message key="monitor.summary.td.notebookInstructions"/></h3>
-		<p>
-			<strong><lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true"/></strong>
-		</p>
-
-		<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>
+	<div class="voffset5">
+		<div class="panel panel-default">
+			<div class="panel-heading-sm panel-title">
+				<fmt:message key="monitor.summary.td.notebookInstructions" />
+			</div>
+			<div class="panel-body-sm">
+				<div class="panel">
+					<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true" />
+				</div>
+				<c:choose>
+					<c:when test="${empty sessionMap.reflectEntry}">
+							<fmt:message key="message.no.reflection.available" />
+					</c:when>
+					<c:otherwise>
+						<p>
+							<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}" />
+						</p>
+					</c:otherwise>
+				</c:choose>
+			</div>
+		</div>
 	</div>
 </c:if>
 
 <c:if test="${mode != 'teacher'}">
-	<div class="space-bottom-top align-right">
+	<div class="voffset10 pull-right">
 		<c:choose>
 			<c:when test="${isUserLeader && sessionMap.isBurningQuestionsEnabled}">
-				<html:button property="finishButton" styleId="finishButton" onclick="return finish('showBurningQuestions')" styleClass="button">
+				<html:button property="finishButton" styleId="finishButton" onclick="return finish('showBurningQuestions')"
+					styleClass="btn btn-sm btn-default">
 					<fmt:message key="label.continue.burning.questions" />
 				</html:button>
 			</c:when>
 			<c:when test="${isUserLeader && sessionMap.reflectOn}">
-				<html:button property="finishButton" styleId="finishButton" onclick="return finish('newReflection')" styleClass="button">
+				<html:button property="finishButton" styleId="finishButton" onclick="return finish('newReflection')"
+					styleClass="btn btn-default">
 					<fmt:message key="label.continue" />
 				</html:button>
 			</c:when>
-			<c:when test="${isUserLeader && (!sessionMap.isBurningQuestionsEnabled || !sessionMap.reflectOn) || !isUserLeader && isScratchingFinished}">
-				<html:button property="finishButton" styleId="finishButton" onclick="return finish('showResults')" styleClass="button">
+			<c:when
+				test="${isUserLeader && (!sessionMap.isBurningQuestionsEnabled || !sessionMap.reflectOn) || !isUserLeader && isScratchingFinished}">
+				<html:button property="finishButton" styleId="finishButton" onclick="return finish('showResults')"
+					styleClass="btn btn-default">
 					<fmt:message key="label.submit" />
 				</html:button>
 			</c:when>
Index: lams_tool_scratchie/web/pages/learning/results.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -rc9759e81d08842b6202f62bc08a78cc13ca5bcf8
--- lams_tool_scratchie/web/pages/learning/results.jsp	(.../results.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_scratchie/web/pages/learning/results.jsp	(.../results.jsp)	(revision c9759e81d08842b6202f62bc08a78cc13ca5bcf8)
@@ -1,7 +1,9 @@
 <!DOCTYPE html>
 
 <%@ include file="/common/taglibs.jsp"%>
-<c:set var="lams"><lams:LAMSURL /></c:set>
+<c:set var="lams">
+	<lams:LAMSURL />
+</c:set>
 <%-- param has higher level for request attribute --%>
 <c:if test="${not empty param.sessionMapID}">
 	<c:set var="sessionMapID" value="${param.sessionMapID}" />
@@ -16,26 +18,28 @@
 <lams:head>
 	<title><fmt:message key="label.learning.title" /></title>
 	<%@ include file="/common/header.jsp"%>
-	
+
 	<link type="text/css" href="${lams}css/jquery-ui-redmond-theme.css" rel="stylesheet">
 	<link type="text/css" href="${lams}css/jquery.jqGrid.css" rel="stylesheet" />
 	<style media="screen,projection" type="text/css">
-		#reflections-div {
-			padding: 10px 0 20px;
-		}
-		.burning-question-dto {
-			padding-bottom: 5px; 
-		}
-		.ui-jqgrid tr.jqgrow td {
-		    white-space: normal !important;
-		    height:auto;
-		    vertical-align:text-top;
-		    padding-top:2px;
-		}
-	</style>
+#reflections-div {
+	padding: 10px 0 20px;
+}
 
- 	<script type="text/javascript" src="${lams}includes/javascript/jquery.jqGrid.locale-en.js"></script>
- 	<script type="text/javascript" src="${lams}includes/javascript/jquery.jqGrid.js"></script>
+.burning-question-dto {
+	padding-bottom: 5px;
+}
+
+.ui-jqgrid tr.jqgrow td {
+	white-space: normal !important;
+	height: auto;
+	vertical-align: text-top;
+	padding-top: 2px;
+}
+</style>
+
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.jqGrid.locale-en.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.jqGrid.js"></script>
 	<script type="text/javascript">
 		$(document).ready(function(){
 			
@@ -128,117 +132,116 @@
 
 <body class="stripes">
 
-	<div id="content">
-		<h1>
-			<c:out value="${scratchie.title}"/>
-		</h1>
-		
+	<c:set var="title">
+	${scratchie.title} / <fmt:message key='label.score' />
+	</c:set>
+
+	<lams:Page type="learner" title="${title}">
+
 		<c:if test="${not empty sessionMap.submissionDeadline}">
-			<div class="info">
-				<fmt:message key="authoring.info.teacher.set.restriction" >
-					<fmt:param><lams:Date value="${sessionMap.submissionDeadline}" /></fmt:param>
+			<lams:Alert id="submissionDeadline">
+				<fmt:message key="authoring.info.teacher.set.restriction">
+					<fmt:param>
+						<lams:Date value="${sessionMap.submissionDeadline}" />
+					</fmt:param>
 				</fmt:message>
-			</div>
+			</lams:Alert>
 		</c:if>
 
 		<%@ include file="/common/messages.jsp"%>
 
-		<h3>
-			<fmt:message key="label.score" />
-		</h3>
-		
-		<h3>
-			<fmt:message key="label.you.ve.got" >
-				<fmt:param>${score}%</fmt:param>
+		<lams:Alert id="score" type="info" close="false">
+			<fmt:message key="label.you.ve.got">
+				<strong><fmt:param>${score}%</fmt:param></strong>
 			</fmt:message>
-		</h3>
-		
+		</lams:Alert>
+
 		<!-- Display burningQuestionDtos -->
 
 		<c:if test="${sessionMap.isBurningQuestionsEnabled}">
-			<div class="small-space-top">
-				<h3><fmt:message key="label.burning.questions" /></h3>
-				
+			<div class="voffset5">
+				<div class="lead">
+					<fmt:message key="label.burning.questions" />
+				</div>
+
 				<c:forEach var="burningQuestionDto" items="${burningQuestionDtos}" varStatus="i">
 					<div class="burning-question-dto">
 						<table id="burningQuestions${burningQuestionDto.item.uid}" class="scroll" cellpadding="0" cellspacing="0"></table>
 					</div>
 				</c:forEach>
-				
+
 				<!-- General burning question's table -->
 				<div class="burning-question-dto">
 					<table id="burningQuestions0" class="scroll" cellpadding="0" cellspacing="0"></table>
 				</div>
-				
+
 				<c:if test="${(mode != 'teacher') && isUserLeader}">
-					<html:button property="finishButton" onclick="return editBurningQuestions()" styleClass="button">
+					<html:button property="finishButton" onclick="return editBurningQuestions()" styleClass="btn btn-sm btn-default">
 						<fmt:message key="label.edit" />
 					</html:button>
 				</c:if>
 			</div>
 		</c:if>
 
 		<c:if test="${sessionMap.reflectOn}">
-			<div class="small-space-top">
-				<h3><fmt:message key="monitor.summary.td.notebookInstructions" /></h3>
-				<p>
-					<strong><lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true"/></strong>
-				</p>
+			<div class="voffset10">
+				<div class="panel panel-default">
+					<div class="panel-heading-sm  bg-success">
+						<fmt:message key="monitor.summary.td.notebookInstructions" />
+					</div>
+					<div class="panel-body-sm">
+						<div class="panel">
+							<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true" />
+						</div>
+						<c:choose>
+							<c:when test="${empty sessionMap.reflectEntry}">
+								<p>
+									<fmt:message key="message.no.reflection.available" />
+								</p>
+							</c:when>
+							<c:otherwise>
+								<div class="panel-body-sm bg-warning">
+									<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}" />
+								</div>
+							</c:otherwise>
+						</c:choose>
+						<c:if test="${(mode != 'teacher') && isUserLeader}">
+							<div class="voffset5">
+								<html:button property="finishButton" onclick="return continueReflect()" styleClass="btn btn-sm btn-default">
+									<fmt:message key="label.edit" />
+								</html:button>
+							</div>
+						</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>
-							<fmt:message key="label.your.answer" />
-						</p>
-						<p>
-							<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}" />
-						</p>
-					</c:otherwise>
-				</c:choose>
+					</div>
+				</div>
 
-				<c:if test="${(mode != 'teacher') && isUserLeader}">
-					<html:button property="finishButton" onclick="return continueReflect()" styleClass="button">
-						<fmt:message key="label.edit" />
-					</html:button>
-				</c:if>
-				
 				<c:if test="${fn:length(reflections) > 0}">
 					<div id="reflections-div">
 						<table id="reflections" class="scroll" cellpadding="0" cellspacing="0"></table>
 					</div>
-		        </c:if>
+				</c:if>
 			</div>
 		</c:if>
 
 		<c:if test="${mode != 'teacher'}">
-			<div class="space-bottom-top align-right">
-				<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>
+			<div class="voffset10 pull-right">
+				<html:link href="#nogo" property="finishButton" styleId="finishButton" onclick="return finishSession()"
+					styleClass="btn btn-primary na">
+					<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>
 			</div>
 		</c:if>
 
-	</div>
-	<!--closes content-->
-
-	<div id="footer">
-	</div>
-	<!--closes footer-->
-
+		<div id="footer"></div>
+		<!--closes footer-->
+	</lams:Page>
 </body>
 </lams:html>
Index: lams_tool_scratchie/web/pages/learning/submissionDeadline.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -rc9759e81d08842b6202f62bc08a78cc13ca5bcf8
--- lams_tool_scratchie/web/pages/learning/submissionDeadline.jsp	(.../submissionDeadline.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_scratchie/web/pages/learning/submissionDeadline.jsp	(.../submissionDeadline.jsp)	(revision c9759e81d08842b6202f62bc08a78cc13ca5bcf8)
@@ -22,17 +22,14 @@
 </lams:head>
 
 <body class="stripes">
-	<div id="content">
-		<h1>
-			${sessionMap.title}
-		</h1>
+	<lams:Page type="learner" title="${sessionMap.title}">
 
-		<div class="warning">
+		<lams:Alert id="deadline" type="danger" close="false">
 			<fmt:message key="label.sorry.the.deadline.has.passed" />
-		</div>
+		</lams:Alert>
 
 		<c:if test="${sessionMap.userFinished and sessionMap.reflectOn and empty sessionMap.submissionDeadline}">
-			<div class="small-space-top">
+			<div class="voffset10">
 				<h2>
 					${sessionMap.reflectInstructions}
 				</h2>
@@ -58,16 +55,15 @@
 			</div>
 		</c:if>
 
-		<div class="space-bottom-top align-right">
+		<div class="voffset10 pull-right">
 			<c:choose>
 				<c:when test="${sessionMap.reflectOn && (not sessionMap.userFinished) && empty sessionMap.submissionDeadline}">
 					<html:button property="FinishButton" onclick="return continueReflect()" styleClass="button">
 						<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">
+					<html:link href="#nogo" property="FinishButton" styleId="finishButton"	onclick="return finishSession()" styleClass="btn btn-primary na">
 							<c:choose>
 								<c:when test="${sessionMap.activityPosition.last}">
 									<fmt:message key="label.submit" />
@@ -76,15 +72,13 @@
 									<fmt:message key="label.finished" />
 								</c:otherwise>
 							</c:choose>
-						</span>
 					</html:link>
 				</c:otherwise>
 			</c:choose>
 		</div>
-	</div>
 	<div id="footer">
 	</div>
 	<!--closes footer-->
-
+</lams:Page>
 </body>
 </lams:html>
Index: lams_tool_scratchie/web/pages/learning/waitforleader.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -rc9759e81d08842b6202f62bc08a78cc13ca5bcf8
--- lams_tool_scratchie/web/pages/learning/waitforleader.jsp	(.../waitforleader.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_scratchie/web/pages/learning/waitforleader.jsp	(.../waitforleader.jsp)	(revision c9759e81d08842b6202f62bc08a78cc13ca5bcf8)
@@ -11,44 +11,42 @@
 		function refresh() {
 			location.reload();
 		}
-		
+
 		//refresh page every 30 sec
-		setTimeout("refresh();",30000);
-    </script>
+		setTimeout("refresh();", 30000);
+	</script>
 </lams:head>
 <body class="stripes">
 
-	<div id="content">
-		<h1>
-			<c:out value="${scratchie.title}" escapeXml="true"/>
-		</h1>
-		
-		<h2>
+	<lams:Page type="learner" title="${scratchie.title}">
+
+		<lams:Alert id="waitingForLeader" type="info" close="false">
 			<fmt:message key="label.waiting.for.leader" />
-		</h2>
+		</lams:Alert>
 
-		<div>
+		<div class="voffset5">
 			<fmt:message key="label.users.from.group" />
 		</div>
+
+		<div class="voffset5">
 		
-		<div>
-			<c:forEach var="user" items="${groupUsers}" varStatus="status">
-				<div>
-					<c:out value="${user.firstName} ${user.lastName}" escapeXml="true"/>
+			<div class="roffset10">
+				<c:forEach var="user" items="${groupUsers}" varStatus="status">
+					<div class="user">
+						<c:out value="${user.firstName} ${user.lastName}" escapeXml="true" />
+					</div>
+				</c:forEach>
 				</div>
-			</c:forEach>
 		</div>
-		
-		<div class="space-bottom-top align-right">
-			<html:button property="refreshButton" onclick="refresh();" styleClass="button">
+
+		<div class="voffset10">
+			<html:button property="refreshButton" onclick="refresh();" styleClass="btn btn-sm btn-default pull-right">
 				<fmt:message key="label.refresh" />
 			</html:button>
 		</div>
 
-	</div>
 
-	<div id="footer">
-	</div>
-
+		<div id="footer"></div>
+	</lams:Page>
 </body>
 </lams:html>