Index: lams_tool_task/web/WEB-INF/tags/Alert.tag
===================================================================
diff -u
--- lams_tool_task/web/WEB-INF/tags/Alert.tag	(revision 0)
+++ lams_tool_task/web/WEB-INF/tags/Alert.tag	(revision bfb35f4f0e90063d8ea06eea71a7f6768ee0f1dc)
@@ -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_task/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r875f56cb6917d1a52bed0545f2933c3b55497a02 -rbfb35f4f0e90063d8ea06eea71a7f6768ee0f1dc
--- lams_tool_task/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 875f56cb6917d1a52bed0545f2933c3b55497a02)
+++ lams_tool_task/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision bfb35f4f0e90063d8ea06eea71a7f6768ee0f1dc)
@@ -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_task/web/WEB-INF/tags/Page.tag
===================================================================
diff -u
--- lams_tool_task/web/WEB-INF/tags/Page.tag	(revision 0)
+++ lams_tool_task/web/WEB-INF/tags/Page.tag	(revision bfb35f4f0e90063d8ea06eea71a7f6768ee0f1dc)
@@ -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_task/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r5e63656a12c02f7476564e278b43ff4ce86ac930 -rbfb35f4f0e90063d8ea06eea71a7f6768ee0f1dc
--- lams_tool_task/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 5e63656a12c02f7476564e278b43ff4ce86ac930)
+++ lams_tool_task/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision bfb35f4f0e90063d8ea06eea71a7f6768ee0f1dc)
@@ -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_task/web/common/header.jsp
===================================================================
diff -u -rc142236c124ecebfa9f29ea91c71759c579e1c61 -rbfb35f4f0e90063d8ea06eea71a7f6768ee0f1dc
--- lams_tool_task/web/common/header.jsp	(.../header.jsp)	(revision c142236c124ecebfa9f29ea91c71759c579e1c61)
+++ lams_tool_task/web/common/header.jsp	(.../header.jsp)	(revision bfb35f4f0e90063d8ea06eea71a7f6768ee0f1dc)
@@ -11,6 +11,9 @@
  	<!-- ********************  javascript ********************** -->
 	<script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
 	<script type="text/javascript" src="<html:rewrite page='/includes/javascript/taskListcommon.js'/>"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/tabcontroller.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>   
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.timeago.js"></script>    
 
 	
Index: lams_tool_task/web/common/messages.jsp
===================================================================
diff -u -r875f56cb6917d1a52bed0545f2933c3b55497a02 -rbfb35f4f0e90063d8ea06eea71a7f6768ee0f1dc
--- lams_tool_task/web/common/messages.jsp	(.../messages.jsp)	(revision 875f56cb6917d1a52bed0545f2933c3b55497a02)
+++ lams_tool_task/web/common/messages.jsp	(.../messages.jsp)	(revision bfb35f4f0e90063d8ea06eea71a7f6768ee0f1dc)
@@ -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_task/web/pages/learning/definelater.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -rbfb35f4f0e90063d8ea06eea71a7f6768ee0f1dc
--- lams_tool_task/web/pages/learning/definelater.jsp	(.../definelater.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_task/web/pages/learning/definelater.jsp	(.../definelater.jsp)	(revision bfb35f4f0e90063d8ea06eea71a7f6768ee0f1dc)
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
-        
 
+
 <%@include file="/common/taglibs.jsp"%>
 
 <lams:html>
@@ -9,13 +9,15 @@
 	<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>
+
+		<div id="footer"></div>
+	</lams:Page>
 </body>
 </lams:html>
Index: lams_tool_task/web/pages/learning/learning.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -rbfb35f4f0e90063d8ea06eea71a7f6768ee0f1dc
--- lams_tool_task/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_task/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision bfb35f4f0e90063d8ea06eea71a7f6768ee0f1dc)
@@ -1,12 +1,10 @@
 <!DOCTYPE html>
-        
 
+
 <%@ include file="/common/taglibs.jsp"%>
 <lams:html>
 <lams:head>
-	<title>
-		<fmt:message key="label.learning.title" />
-	</title>
+	<title><fmt:message key="label.learning.title" /></title>
 	<%@ include file="/common/header.jsp"%>
 
 	<%-- param has higher level for request attribute --%>
@@ -23,165 +21,184 @@
 
 	<script type="text/javascript">
 	<!--
-		function checkNew(){
+
+		function checkNew() {
 			document.location.href = "<c:url value="/learning/start.do"/>?mode=${mode}&toolSessionID=${toolSessionID}";
- 		    return false;
+			return false;
 		}
-		
-		function completeItem(itemUid){
-			document.location.href = "<c:url value="/learning/completeItem.do"/>?sessionMapID=${sessionMapID}&mode=${mode}&itemUid=" + itemUid;
+
+		function completeItem(itemUid) {
+			document.location.href = "<c:url value="/learning/completeItem.do"/>?sessionMapID=${sessionMapID}&mode=${mode}&itemUid="
+					+ itemUid;
 			return false;
 		}
-		
-		function finishSession(){
+
+		function finishSession() {
 			document.getElementById("finishButton").disabled = true;
-			document.location.href ='<c:url value="/learning/finish.do?sessionMapID=${sessionMapID}&mode=${mode}&toolSessionID=${toolSessionID}"/>';
+			document.location.href = '<c:url value="/learning/finish.do?sessionMapID=${sessionMapID}&mode=${mode}&toolSessionID=${toolSessionID}"/>';
 			return false;
 		}
-		
-		function continueReflect(){
-			document.location.href='<c:url value="/learning/newReflection.do?sessionMapID=${sessionMapID}"/>';
+
+		function continueReflect() {
+			document.location.href = '<c:url value="/learning/newReflection.do?sessionMapID=${sessionMapID}"/>';
 		}
-		
+
 		function showMessage(url) {
-			var area=document.getElementById("reourceInputArea");
-			if(area != null){
-				area.style.width="100%";
-				area.src=url;
-				area.style.display="block";
+			var area = document.getElementById("reourceInputArea");
+			if (area != null) {
+				area.style.width = "100%";
+				area.src = url;
+				area.style.display = "block";
 			}
 			var elem = document.getElementById("saveCancelButtons");
 			if (elem != null) {
-				elem.style.display="none";
+				elem.style.display = "none";
 			}
 			location.hash = "resourceInputArea";
 		}
-		
-		function hideMessage(){
-			var area=document.getElementById("reourceInputArea");
-			if(area != null){
-				area.style.width="0px";
-				area.style.height="0px";
-				area.style.display="none";
+
+		function hideMessage() {
+			var area = document.getElementById("reourceInputArea");
+			if (area != null) {
+				area.style.width = "0px";
+				area.style.height = "0px";
+				area.style.display = "none";
 			}
 			var elem = document.getElementById("saveCancelButtons");
 			if (elem != null) {
-				elem.style.display="block";
+				elem.style.display = "block";
 			}
 		}
-		
-	-->        
-    </script>
+
+		-->
+	</script>
+	<script type="text/javascript" src="/lams/includes/javascript/jquery.timeago.js"></script>
 </lams:head>
 <body class="stripes">
 
-	<div id="content">
-	
+	<lams:Page type="learner" title="${taskList.title}">
+
 		<!--Task Information-->
-	
-		<h1>
-			<c:out value="${taskList.title}" escapeXml="true"/>
-		</h1>
-		
- 	   	<%@ include file="/common/messages.jsp"%>
 
+		<%@ include file="/common/messages.jsp"%>
+
 		<c:if test="${not empty taskList.submissionDeadline}">
-			 <div class="info">
-			 	<fmt:message key="authoring.info.teacher.set.restriction" >
-			 		<fmt:param><lams:Date value="${sessionMap.submissionDeadline}" /></fmt:param>
-			 	</fmt:message>
-			 </div>
+			<lams:Alert id="submissionDeadline" type="info" close="true">
+				<fmt:message key="authoring.info.teacher.set.restriction">
+					<fmt:param>
+						<lams:Date value="${sessionMap.submissionDeadline}" />
+					</fmt:param>
+				</fmt:message>
+			</lams:Alert>
 		</c:if>
-		
 
-		<p>
-			<c:out value="${taskList.instructions}" escapeXml="false"/>
-		</p>
-		
+
+		<div class="panel" id="instructions">
+			<c:out value="${taskList.instructions}" escapeXml="false" />
+		</div>
+
 		<c:if test="${(mode != 'teacher') && taskList.lockWhenFinished}">
-	    	<div class="info space-bottom">
-		   		<c:choose>
-			    	<c:when test = "${finishedLock}">
-						<fmt:message key="label.learning.responses.locked.reminder" />								
-				    </c:when>
-				    <c:otherwise>
-						<fmt:message key="label.learning.responses.locked" />								
-				    </c:otherwise>
-			   </c:choose>
-			</div>
-	   </c:if>
-	   
-	   	<c:if test="${(mode != 'teacher') && taskList.sequentialOrder}">
-	    	<div class="info space-bottom">
-				<fmt:message key="label.learning.info.sequential.order" />								
-			</div>
-	   </c:if>
-		
+			<lams:Alert id="lockWhenFinished" type="info" close="true">
+				<c:choose>
+					<c:when test="${finishedLock}">
+						<fmt:message key="label.learning.responses.locked.reminder" />
+					</c:when>
+					<c:otherwise>
+						<fmt:message key="label.learning.responses.locked" />
+					</c:otherwise>
+				</c:choose>
+			</lams:Alert>
+		</c:if>
+
+		<c:if test="${(mode != 'teacher') && taskList.sequentialOrder}">
+			<lams:Alert id="sequentialOrder" type="info" close="true">
+				<fmt:message key="label.learning.info.sequential.order" />
+			</lams:Alert>
+		</c:if>
+
 		<!--TaskListItems table-->
-		
+
 		<%@ include file="/pages/learning/parts/itemlist.jsp"%>
-		
+
 		<!--"Check for new" button-->
-		
-		* - <fmt:message key="label.learning.required.tasks" />
-		<br><br>
 
+		<p class="help-block">
+			* -
+			<fmt:message key="label.learning.required.tasks" />
+		</p>
+
 		<c:if test="${mode != 'teacher'}">
 			<p>
-				<a href="#" onclick="return checkNew()" class="button"> 
-					<fmt:message key="label.learning.check.for.new" /> 
+				<a href="#" onclick="return checkNew()" class="btn btn-sm btn-default"> <fmt:message
+						key="label.learning.check.for.new" />
 				</a>
 			</p>
-			<br><br>
 		</c:if>
-		
+
 		<!--"Add new task" Area-->
 
 		<c:if test="${mode != 'teacher' && (not finishedLock)}">
 			<c:if test="${taskList.allowContributeTasks}">
-		
+
 				<p>
-					<a href="javascript:showMessage('<html:rewrite page="/learning/addtask.do?sessionMapID=${sessionMapID}&mode=${mode}"/>');" class="button-add-item">
-						<fmt:message key="label.authoring.basic.add.task" />
-					</a> 
+					<a
+						href="javascript:showMessage('<html:rewrite page="/learning/addtask.do?sessionMapID=${sessionMapID}&mode=${mode}"/>');"
+						class="btn btn-sm btn-default"><i class="fa fa-sm fa-plus-circle"></i>&nbsp;<fmt:message
+							key="label.authoring.basic.add.task" /> </a>
 				<p>
 
-				<iframe
-					onload="javascript:this.style.height=this.contentWindow.document.body.scrollHeight+'px'"
-					id="reourceInputArea" name="reourceInputArea"
-					style="width:0px;height:0px;border:0px;display:none"
-					frameborder="no" scrolling="no">
-				</iframe>
-				
+					<iframe onload="javascript:this.style.height=this.contentWindow.document.body.scrollHeight+'px'"
+						id="reourceInputArea" name="reourceInputArea" style="width: 0px; height: 0px; border: 0px; display: none"
+						frameborder="no" scrolling="no"> </iframe>
 			</c:if>
 		</c:if>
-		
+
 		<!--Reflection-->
-		
+
 		<c:if test="${sessionMap.userFinished and sessionMap.reflectOn}">
-			<div class="small-space-top">
-				<h3><fmt:message key="label.monitoring.summary.title.reflection" /></h3>
-				<strong><lams:out escapeHtml="true" value="${sessionMap.reflectInstructions}"/></strong>
-			
-				<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>
+			<div class="voffset10">
+				<div class="row">
+					<div class="col-xs12">
+						<div class="panel panel-default">
+							<div class="panel-heading panel-title">
+								<fmt:message key="label.monitoring.summary.title.reflection" />
+							</div>
+							<div class="panel-body">
+								<div class="panel">
+									<lams:out escapeHtml="true" value="${sessionMap.reflectInstructions}" />
+								</div>
+
+								<div class="form-group">
+
+									<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="btn btn-sm btn-default pull-left voffset10">
+											<fmt:message key="label.edit" />
+										</html:button>
+									</c:if>
+
+
+								</div>
+
+							</div>
+						</div>
+					</div>
+				</div>
+
 			</div>
 		</c:if>
 
@@ -198,21 +215,21 @@
 			<div class="space-bottom-top align-right">
 
 				<c:choose>
-					<c:when	test="${taskList.monitorVerificationRequired && !sessionMap.userVerifiedByMonitor && (mode != 'author')}">
+					<c:when test="${taskList.monitorVerificationRequired && !sessionMap.userVerifiedByMonitor && (mode != 'author')}">
 						<fmt:message key="label.learning.wait.for.monitor.verification" />
 					</c:when>
-				
-					<c:when	test="${sessionMap.reflectOn && (not sessionMap.userFinished)}">
-						<html:button property="FinishButton" onclick="return continueReflect()" styleClass="button">
-							<fmt:message key="label.continue" />							
+
+					<c:when test="${sessionMap.reflectOn && (not sessionMap.userFinished)}">
+						<html:button property="FinishButton" onclick="return continueReflect()"
+							styleClass="btn btn-primary voffset10 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>
+						<html:link href="#nogo" property="FinishButton" styleId="finishButton" onclick="return finishSession()"
+							styleClass="btn btn-primary voffset10 pull-right na">
+							<span class="nextActivity"> <c:choose>
 									<c:when test="${sessionMap.activityPosition.last}">
 										<fmt:message key="label.submit" />
 									</c:when>
@@ -227,12 +244,6 @@
 			</div>
 		</c:if>
 
-	</div>
-	<!--closes content-->
-
-	<div id="footer">
-	</div>
-	<!--closes footer-->
-
+	</lams:Page>
 </body>
 </lams:html>
Index: lams_tool_task/web/pages/learning/parts/addtask.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -rbfb35f4f0e90063d8ea06eea71a7f6768ee0f1dc
--- lams_tool_task/web/pages/learning/parts/addtask.jsp	(.../addtask.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_task/web/pages/learning/parts/addtask.jsp	(.../addtask.jsp)	(revision bfb35f4f0e90063d8ea06eea71a7f6768ee0f1dc)
@@ -4,44 +4,40 @@
 <%@ include file="/common/taglibs.jsp"%>
 
 <lams:html>
-	<lams:head>
-		<%@ include file="/common/header.jsp"%>
-	</lams:head>
-	<body>
+<lams:head>
+	<%@ include file="/common/header.jsp"%>
+</lams:head>
+<body>
 
 
-		<html:form action="/learning/saveNewTask" method="post" styleId="taskListItemForm">
-			<html:hidden property="mode"/>
-			<html:hidden property="sessionMapID"/>
+	<html:form action="/learning/saveNewTask" method="post" styleId="taskListItemForm">
+		<html:hidden property="mode" />
+		<html:hidden property="sessionMapID" />
 
-			<div class="field-name-alternative-color space-top">
-				<fmt:message key="label.learning.new.task.details" />
-			</div>
-			<%@ include file="/common/messages.jsp"%>
+		<h5>
+			<fmt:message key="label.learning.new.task.details" />
+		</h5>
+		<%@ include file="/common/messages.jsp"%>
 
-			<div class="field-name space-top">
-				<fmt:message key="label.authoring.basic.resource.title.input" />
-			</div>
+		<div class="form-group">
+			<label for="taskTitle"><fmt:message key="label.authoring.basic.resource.title.input" /></label>
+			<html:text styleId="taskTitle" property="title" styleClass="form-control" tabindex="1" />
+		</div>
+		<div class="form-group">
+			<label for="description"><fmt:message key="label.learning.comment.or.instruction" /></label>
+			<lams:STRUTS-textarea rows="5" tabindex="2" styleId="description" styleClass="form-control" property="description" />
+		</div>
+	</html:form>
 
-			<html:text property="title" size="40" tabindex="1" />
-
-			<div class="field-name space-top">
-				<fmt:message key="label.learning.comment.or.instruction" />
-			</div>
-
-			<lams:STRUTS-textarea rows="5" cols="20" tabindex="4" styleClass="text-area"
-				property="description" />
-				
-		</html:form>
-		
+	<div class="form-group">
 		<lams:ImgButtonWrapper>
-			<a href="#" onclick="taskListItemForm.submit();" class="button-add-item">
-				<fmt:message key="button.add" /> 
+			<a href="javascript:;" onclick="window.parent.hideMessage();" class="btn btn-sm btn-default"> <fmt:message
+					key="label.cancel" />
 			</a>
-			<a href="javascript:;" onclick="window.parent.hideMessage();" class="button space-left">
-				<fmt:message key="label.cancel" />
+			<a href="#" onclick="taskListItemForm.submit();" class="btn btn-sm btn-default"> <fmt:message key="button.add" />
 			</a>
 		</lams:ImgButtonWrapper>
-		
-	</body>
+	</div>
+
+</body>
 </lams:html>
Index: lams_tool_task/web/pages/learning/parts/commentlist.jsp
===================================================================
diff -u -r9160b34eb0b4725a21c894d886c89f418868888a -rbfb35f4f0e90063d8ea06eea71a7f6768ee0f1dc
--- lams_tool_task/web/pages/learning/parts/commentlist.jsp	(.../commentlist.jsp)	(revision 9160b34eb0b4725a21c894d886c89f418868888a)
+++ lams_tool_task/web/pages/learning/parts/commentlist.jsp	(.../commentlist.jsp)	(revision bfb35f4f0e90063d8ea06eea71a7f6768ee0f1dc)
@@ -1,43 +1,48 @@
+
+<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.timeago.js"></script>
+
 <c:set var="commentList" value="${itemDTO.comments}" />
 <c:if test="${not empty commentList}">
-	<div class="field-name">
+	<h5>
 		<fmt:message key="label.preview.comments" />
-	</div>
+	</h5>
 </c:if>
 
 <c:forEach var="comment" items="${commentList}">
 
-	<c:if test="${item.showCommentsToAll || (sessionMap.userLogin == comment.createBy.loginName) || (sessionMap.mode == 'teacher') || (sessionMap.mode == 'author')}">
-		<div>
-			<table cellspacing="0" class="forum">
-				<tr>
-					<th >
-						<fmt:message key="lable.preview.by" />
+	<c:if
+		test="${item.showCommentsToAll || (sessionMap.userLogin == comment.createBy.loginName) || (sessionMap.mode == 'teacher') || (sessionMap.mode == 'author')}">
+		<div class="row voffset5">
+			<div class="col-xs-12">
+				<div class="panel panel-default">
+					<div class="panel-heading-sm panel-title bg-warning">
 						<c:set var="author" value="${comment.createBy.firstName} ${comment.createBy.lastName}" />
 						<c:if test="${empty author}">
 							<c:set var="author">
 								<fmt:message key="label.default.user.name" />
 							</c:set>
 						</c:if>
-						<c:out value="${author}" escapeXml="true"/>
-								-				
-						<lams:Date value="${comment.createDate}" />
-					</th>
-				</tr>
-				
-				<tr>
-					<td class="posted-by">
-					</td>
-				</tr>
-	
-				<tr>
-					<td>
+						<div class="user">
+							<c:out value="${author}" escapeXml="true" />
+						</div>
+						-
+						<time class="timeago"
+							datetime="<fmt:formatDate value='${comment.createDate}' pattern="yyyy-MM-dd'T'HH:mm:ss.S'Z'"/>">
+							<lams:Date value="${comment.createDate}" />
+						</time>
+
+					</div>
+					<div class="panel-body-sm">
 						<c:out value="${comment.comment}" escapeXml="false" />
-					</td>
-				</tr>
-				
-			</table>
+					</div>
+				</div>
+			</div>
 		</div>
-		
+
 	</c:if>
 </c:forEach>
+<script type="text/javascript">
+	$(document).ready(function() {
+		$("time.timeago").timeago();
+	});
+</script>
Index: lams_tool_task/web/pages/learning/parts/filelist.jsp
===================================================================
diff -u -r9160b34eb0b4725a21c894d886c89f418868888a -rbfb35f4f0e90063d8ea06eea71a7f6768ee0f1dc
--- lams_tool_task/web/pages/learning/parts/filelist.jsp	(.../filelist.jsp)	(revision 9160b34eb0b4725a21c894d886c89f418868888a)
+++ lams_tool_task/web/pages/learning/parts/filelist.jsp	(.../filelist.jsp)	(revision bfb35f4f0e90063d8ea06eea71a7f6768ee0f1dc)
@@ -1,34 +1,27 @@
 <div>
 	<c:set var="fileList" value="${itemDTO.attachments}" />
-	
+
 	<c:if test="${not empty fileList}">
 		<div class="field-name">
 			<fmt:message key="label.preview.filelist" />
 		</div>
+
+		<%-- Display target file type --%>
+		<ul>
+			<c:forEach var="file" items="${fileList}">
+				<c:if
+					test="${item.showCommentsToAll || (sessionMap.userLogin == file.createBy.loginName) || (sessionMap.mode == 'teacher') || (sessionMap.mode == 'author')}">
+
+					<li><c:out value="${file.fileName}" escapeXml="true" /> <c:if test="${file.createBy != null}">
+						[<c:out value="${file.createBy.firstName} ${file.createBy.lastName}" escapeXml="true" />]
+					</c:if> <c:set var="downloadURL">
+							<html:rewrite page="/download/?uuid=${file.fileUuid}&versionID=${file.fileVersionId}&preferDownload=true" />
+						</c:set> <html:link href="${downloadURL}">
+							<fmt:message key="label.download" />
+						</html:link></li>
+				</c:if>
+			</c:forEach>
+		</ul>
 	</c:if>
-							
-	<%-- Display target file type --%>
-	<ul>
-		<c:forEach var="file" items="${fileList}">
-			<c:if test="${item.showCommentsToAll || (sessionMap.userLogin == file.createBy.loginName) || (sessionMap.mode == 'teacher') || (sessionMap.mode == 'author')}">
-			
-				<li>
-					<c:out value="${file.fileName}" escapeXml="true"/>
-												
-					<c:if test="${file.createBy != null}">
-						[<c:out value="${file.createBy.firstName} ${file.createBy.lastName}" escapeXml="true"/>]
-					</c:if>
-													
-					<c:set var="downloadURL">
-						<html:rewrite page="/download/?uuid=${file.fileUuid}&versionID=${file.fileVersionId}&preferDownload=true" />
-					</c:set>
-					<html:link href="${downloadURL}">
-						<fmt:message key="label.download" />
-					</html:link>
-												
-				</li>
-			</c:if>
-		</c:forEach>
-	</ul>
-	<br/>
+
 </div>
Index: lams_tool_task/web/pages/learning/parts/itemdetails.jsp
===================================================================
diff -u -r883c4cc054a636dc8017da1b244b89bdaf0ff974 -rbfb35f4f0e90063d8ea06eea71a7f6768ee0f1dc
--- lams_tool_task/web/pages/learning/parts/itemdetails.jsp	(.../itemdetails.jsp)	(revision 883c4cc054a636dc8017da1b244b89bdaf0ff974)
+++ lams_tool_task/web/pages/learning/parts/itemdetails.jsp	(.../itemdetails.jsp)	(revision bfb35f4f0e90063d8ea06eea71a7f6768ee0f1dc)
@@ -1,87 +1,65 @@
+<div class="row">
+	<div class="col-xs-12">
+		<div class="panel-body">${item.description}</div>
 
+		<c:if test="${item.commentsFilesAllowed}">
+			<hr class="msg-hr">
+			<!-- Comments Part -->
+			<c:if test="${item.commentsAllowed}">
+				<html:form action="/learning/addNewComment.do?sessionMapID=${sessionMapID}&mode=${mode}&itemUid=${item.uid}"
+					method="post" enctype="multipart/form-data">
 
-	<p>${item.description}</p>
-<!-- 	
-					<c:if test="${mode != 'teacher' && (!itemDTO.commentRequirementsMet || !itemDTO.attachmentRequirementsMet)}">
-						<div class="info space-bottom">
-							<c:choose>
-								<c:when test="${!itemDTO.commentRequirementsMet && !itemDTO.attachmentRequirementsMet}">
-									<fmt:message key="label.learning.info.comment.and.attachment.required" />		
-								</c:when>
-								<c:when test="${!itemDTO.commentRequirementsMet}">
-									<fmt:message key="label.learning.info.add.comment.required" />		
-								</c:when>							
-								<c:when test="${!itemDTO.attachmentRequirementsMet}">
-									<fmt:message key="label.learning.info.upload.file.required" />	
-								</c:when>							
-							</c:choose>
+					<%@ include file="commentlist.jsp"%>
+
+					<c:if test="${mode != 'teacher'}">
+
+						<div class="form-group voffset5">
+							<label for="comment"><fmt:message key="label.preview.add.comment" /></label>
+							<lams:STRUTS-textarea property="comment" rows="2" styleId="comment" styleClass="form-control" index="${item.uid}" />
+							<c:if test="${(mode != 'teacher') && !itemDTO.commentRequirementsMet}">
+								<div class="help-block">
+									<fmt:message key="label.learning.info.add.comment.required" />
+								</div>
+							</c:if>
+
+							<input type="submit" name="commentButton" value='<fmt:message key="label.preview.post" />'
+								class="btn btn-sm btn-default voffset5" />
 						</div>
+
 					</c:if>
- -->
-	<c:if test="${item.commentsFilesAllowed}">
-		
-		<!-- Comments Part -->
-		<c:if test="${item.commentsAllowed}">
-			<html:form action="/learning/addNewComment.do?sessionMapID=${sessionMapID}&mode=${mode}&itemUid=${item.uid}"
-					   method="post" enctype="multipart/form-data">
-				<c:choose>
-					<c:when test="${(mode != 'teacher') && !itemDTO.commentRequirementsMet}">
-						<div class="info space-bottom">
-							<fmt:message key="label.learning.info.add.comment.required" />
-						</div>
-					</c:when>
-					<c:otherwise>
-						<br/>
+				</html:form>
+			</c:if>
+
+			<!-- Uploaded Attachments -->
+			<c:if test="${item.filesAllowed}">
+				<html:form action="/learning/uploadFile.do?sessionMapID=${sessionMapID}&mode=${mode}&itemUid=${item.uid}"
+					method="post" enctype="multipart/form-data">
+					<c:choose>
+						<c:when test="${(mode != 'teacher') && !itemDTO.attachmentRequirementsMet}">
+							<lams:Alert id="fileRequired" close="true" type="info">
+								<fmt:message key="label.learning.info.upload.file.required" />
+							</lams:Alert>
+						</c:when>
+						<c:otherwise>
 					</c:otherwise>
-				</c:choose>
-						
-				<%@ include file="commentlist.jsp"%>
-					
-				<c:if test="${mode != 'teacher'}">
-					<div class="field-name">
-						<fmt:message key="label.preview.add.comment" />
-					</div>
-					
-					<div >
-	 					<!-- <html:textarea property="comment" rows="2" style="width: 65%;" />  -->
-						<lams:STRUTS-textarea property="comment" rows="2" style="width: 65%;" index="${item.uid}"/>
-						
-						<input type="submit" name="commentButton" value='<fmt:message key="label.preview.post" />'
-							   class="button"style="position:relative; left:40px; top:-35px;" />
-					</div>
-		
-				</c:if>
-			</html:form>
+					</c:choose>
+
+					<%@ include file="filelist.jsp"%>
+
+					<c:if test="${sessionMap.mode != 'teacher'}">
+						<h5>
+							<fmt:message key="label.preview.upload.file" />
+						</h5>
+						<html:file property="uploadedFile" styleId="uploadButton" styleClass="form-control">
+							<fmt:message key="label.authoring.choosefile.button" />
+						</html:file>
+
+						<input type="submit" name="uploadedFileButton" value='<fmt:message key="label.preview.upload.button" />'
+							class="btn btn-sm btn-default voffset5" />
+					</c:if>
+				</html:form>
+			</c:if>
 		</c:if>
-			
-		<!-- Uploaded Attachments -->	
-		<c:if test="${item.filesAllowed}">
-			<html:form action="/learning/uploadFile.do?sessionMapID=${sessionMapID}&mode=${mode}&itemUid=${item.uid}"
-					   method="post" enctype="multipart/form-data">
-				<c:choose>
-					<c:when test="${(mode != 'teacher') && !itemDTO.attachmentRequirementsMet}">
-						<div class="info space-bottom">
-							<fmt:message key="label.learning.info.upload.file.required" />
-						</div>
-					</c:when>
-					<c:otherwise>
-						<br/>
-					</c:otherwise>
-				</c:choose>
-			
-				<%@ include file="filelist.jsp"%>
-							
-				<c:if test="${sessionMap.mode != 'teacher'}">
-					<div class="field-name">
-						<fmt:message key="label.preview.upload.file" />
-					</div>
-					<html:file property="uploadedFile">
-						<fmt:message key="label.authoring.choosefile.button" />
-					</html:file>
-										 
-					<input type="submit" name="uploadedFileButton" value='<fmt:message key="label.preview.upload.button" />'
-						   class="button" />										
-				</c:if>
-			</html:form>
-		</c:if>
-	</c:if>
\ No newline at end of file
+
+	</div>
+</div>
\ No newline at end of file
Index: lams_tool_task/web/pages/learning/parts/itemlist.jsp
===================================================================
diff -u -r9160b34eb0b4725a21c894d886c89f418868888a -rbfb35f4f0e90063d8ea06eea71a7f6768ee0f1dc
--- lams_tool_task/web/pages/learning/parts/itemlist.jsp	(.../itemlist.jsp)	(revision 9160b34eb0b4725a21c894d886c89f418868888a)
+++ lams_tool_task/web/pages/learning/parts/itemlist.jsp	(.../itemlist.jsp)	(revision bfb35f4f0e90063d8ea06eea71a7f6768ee0f1dc)
@@ -1,132 +1,76 @@
 <%@ include file="/common/taglibs.jsp"%>
 
 <script language="JavaScript" type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
- 
+<script language="JavaScript" type="text/javascript" src="<lams:LAMSURL/>includes/javascript/bootstrap.min.js"></script>
+
 <script language="JavaScript" type="text/JavaScript">
 	<!--
-		$(document).ready(function() {
-
-			$("a.toggling-link").click(function() {
-				executeToggling(this.id);
-			});
-				
-			$("span.toggling-icon").click(function() {
-				var id = this.id.substring(4,this.id.length);
-				executeToggling(id);
-			});
-			
-			$("a.toggling-link").each(function() {
-				var id = this.id;
-				var display = $("div#div" + id).css("display");
-				if (display == "block") {
-					var imagePath = "<html:rewrite page='/includes/images/tree_open.gif'/>";
-					jQuery("span.toggling-icon#icon" + id).html("<img src='" + imagePath + "'/>");
-				} else if (display == "none") {
-					var imagePath = "<html:rewrite page='/includes/images/tree_closed.gif'/>";
-					jQuery("span.toggling-icon#icon" + id).html("<img src='" + imagePath + "'/>");
-				} else {
-				}
-			});
-		});
-		
-		function executeToggling(id) {
-			var display = $("div#div" + id).css("display");
-			if (display == "none") {
-				var imagePath = "<html:rewrite page='/includes/images/tree_open.gif'/>";
-				jQuery("span.toggling-icon#icon" + id).html("<img src='" + imagePath + "'/>");
-			} else if (display == "block") {
-				var imagePath = "<html:rewrite page='/includes/images/tree_closed.gif'/>";
-				jQuery("span.toggling-icon#icon" + id).html("<img src='" + imagePath + "'/>");
-			} else {
-			}
-			
-			$("div#div" + id).toggle("slow");
-		}
-			
-
 	-->		
 </script>
 
-<table cellspacing="0" class="alternative-color">
-	<tr>
-		<th width="70%">
-			<fmt:message key="label.learning.tasks.to.do" />
-		</th>
-		<th align="center">
-			<fmt:message key="label.completed" />
-		</th>
-	</tr>
-		
+<h4>
+	<fmt:message key="label.learning.tasks.to.do" />
+</h4>
+
+<div class="panel-group" id="accordion">
+
+
 	<c:forEach var="itemDTO" items="${sessionMap.itemDTOs}" varStatus="status">
 		<c:set var="item" value="${itemDTO.taskListItem}" />
-				
+
 		<c:if test="${itemDTO.allowedByParent}">
-			<tr>
-				<td>
-					<span id="icon${status.index}" class="toggling-icon" style="vertical-align:middle;"> </span>&nbsp;
-					
-					<c:choose>
-						<c:when test="${taskList.sequentialOrder && !itemDTO.previousTaskCompleted}">
-							<a class="toggling-link" id="${status.index}" href="#" style="color:#AAAAAA; font-style:italic">
-						</c:when>
-						<c:otherwise>
-							<a class="toggling-link" id="${status.index}" href="#">
-						</c:otherwise>
-					</c:choose>
-										
-						<c:out value="${item.title}" escapeXml="true"/>
+
+			<div class="panel panel-default">
+				<div class="panel-heading clearfix">
+					<div class="panel-title pull-left" data-toggle="collapse" data-target="#collapse${item.uid}">
+						<c:out value="${item.title}" escapeXml="true" /> 
 						<c:if test="${!item.createByAuthor && item.createBy != null}">
-								[<c:out value="${item.createBy.firstName} ${item.createBy.lastName}" escapeXml="true"/>]
+								[<c:out value="${item.createBy.firstName} ${item.createBy.lastName}" escapeXml="true" />]
 						</c:if>
 						<c:if test="${item.required}">
 							*
 						</c:if>
-					</a>
-					
-					<c:choose>
-						<c:when test="${itemDTO.displayedOpen}">
-							<c:set var="displayStyle" value="block" />
-						</c:when>
-						<c:otherwise>
-							<c:set var="displayStyle" value="none" /> 
-						</c:otherwise>
-					</c:choose>
-					
-					<div id="div${status.index}" class="toggling-div" style="display:${displayStyle};">
-						<%@ include file="/pages/learning/parts/itemdetails.jsp"%>
+						</a>
 					</div>
-					
-				</td>
+					<div class="pull-right">
+						<c:choose>
+							<c:when test="${item.complete}">
+								<i title="<fmt:message key='label.completed' />" class="fa fa-lg fa-check text-success"></i>
+							</c:when>
 
-				<td align="center">
-					<c:choose>
-						<c:when test="${item.complete}">
-							<img src="<html:rewrite page='/includes/images/tick.gif'/>"	border="0">
-						</c:when>
-
-						<c:when	test="${(mode != 'teacher') && (not finishedLock) && (not taskList.sequentialOrder || itemDTO.previousTaskCompleted) 
+							<c:when
+								test="${(mode != 'teacher') && (not finishedLock) && (not taskList.sequentialOrder || itemDTO.previousTaskCompleted) 
 									&& itemDTO.commentRequirementsMet && itemDTO.attachmentRequirementsMet}">
-							<a href="javascript:;" onclick="return completeItem(${item.uid})">
-								<img src="<html:rewrite page='/includes/images/empty_checkbox.jpeg'/>" title="<fmt:message key='label.completed' />" border="0" > 
-							</a>
-						</c:when>
-								
-						<c:otherwise>
-							<%--<img src="<html:rewrite page='/includes/images/cross.gif'/>" border="0"> --%>
-							<img src="<html:rewrite page='/includes/images/dash.gif'/>" border="0">
-						</c:otherwise>
-					</c:choose>
-				</td>
-			</tr>
+								<a href="javascript:;" onclick="return completeItem(${item.uid})"> <i class="fa fa-lg fa-square-o"></i>
+
+								</a>
+							</c:when>
+
+							<c:otherwise>
+								<i class="fa fa-lg fa-minus"></i>
+							</c:otherwise>
+						</c:choose>
+					</div>
+				</div>
+				
+				<div id="collapse${item.uid}" class="panel-collapse collapse <c:if test="${not item.complete}">in</c:if>">
+					<div class="panel-body">
+						<!-- tasks details -->
+							<%@ include file="/pages/learning/parts/itemdetails.jsp"%>
+						<!-- end task details -->
+					</div>
+				</div>
+			</div>
 		</c:if>
-		
 	</c:forEach>
-	
+
+
+
+
 	<c:if test="${fn:length(taskList.minimumNumberTasksErrorStr) > 0}">
-		<tr>
-			<td colspan="3" align="left">
-				<b>${taskList.minimumNumberTasksErrorStr}</b>
-			</td>
-		</tr>
+		<p class="help-block">
+			<c:out value="${taskList.minimumNumberTasksErrorStr}" />
+		</p>
 	</c:if>
-</table>
+
+</div>
\ No newline at end of file
Index: lams_tool_task/web/pages/learning/parts/notebook.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -rbfb35f4f0e90063d8ea06eea71a7f6768ee0f1dc
--- lams_tool_task/web/pages/learning/parts/notebook.jsp	(.../notebook.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_task/web/pages/learning/parts/notebook.jsp	(.../notebook.jsp)	(revision bfb35f4f0e90063d8ea06eea71a7f6768ee0f1dc)
@@ -1,50 +1,45 @@
 <%@ include file="/common/taglibs.jsp"%>
 <!DOCTYPE html>
-        
 
+
 <lams:html>
 <lams:head>
-	<title><fmt:message key="label.learning.title" />
-	</title>
+	<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(methodName){
-	                var f = document.getElementById('messageForm');
-	                f.submit();
-	        }
+		function submitForm(methodName) {
+			var f = document.getElementById('messageForm');
+			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="messageForm">
 		<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"/>
+				<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true" />
 			</p>
 
-			<html:textarea cols="60" rows="8" property="entryText"
-				styleClass="text-area" />
+			<html:textarea cols="60" styleId="notebookEntry" property="entryText" styleClass="form-control" />
 
-			<div class="space-bottom-top align-right">
-				<html:link href="#nogo" styleClass="button" styleId="finishButton" onclick="submitForm('finish')">
-					<span class="nextActivity">
-						<c:choose>
+			<div class="voffset10">
+				<html:link href="#nogo" styleClass="btn btn-primary pull-right na" styleId="finishButton"
+					onclick="submitForm('finish')">
+					<span class="nextActivity"> <c:choose>
 							<c:when test="${sessionMap.activityPosition.last}">
 								<fmt:message key="label.submit" />
 							</c:when>
@@ -55,12 +50,10 @@
 					</span>
 				</html:link>
 			</div>
-		</div>
 	</html:form>
 
-	<div id="footer">
-	</div>
+	<div id="footer"></div>
 	<!--closes footer-->
-
+	</lams:Page>
 </body>
 </lams:html>
Index: lams_tool_task/web/pages/learning/submissionDeadline.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -rbfb35f4f0e90063d8ea06eea71a7f6768ee0f1dc
--- lams_tool_task/web/pages/learning/submissionDeadline.jsp	(.../submissionDeadline.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_task/web/pages/learning/submissionDeadline.jsp	(.../submissionDeadline.jsp)	(revision bfb35f4f0e90063d8ea06eea71a7f6768ee0f1dc)
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
-        
 
+
 <%@include file="/common/taglibs.jsp"%>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 <lams:html>
@@ -9,69 +9,74 @@
 
 	<script type="text/javascript">
 	<!--
-		function finishSession(){
+		function finishSession() {
 			document.getElementById("finishButton").disabled = true;
-			document.location.href ='<c:url value="/learning/finish.do?sessionMapID=${sessionMapID}"/>';
+			document.location.href = '<c:url value="/learning/finish.do?sessionMapID=${sessionMapID}"/>';
 			return false;
 		}
-		function continueReflect(){
-			document.location.href='<c:url value="/learning/newReflection.do?sessionMapID=${sessionMapID}"/>';
+		function continueReflect() {
+			document.location.href = '<c:url value="/learning/newReflection.do?sessionMapID=${sessionMapID}"/>';
 		}
-		
-	-->        
-    </script>
+
+		-->
+	</script>
 </lams:head>
 
 <body class="stripes">
-	<div id="content">
-		<h1>
-			<c:out value="${sessionMap.title}"/>
-		</h1>
+	<lams:Page type="learner" title="${sessionMap.title}">
 
-		<div class="warning">
-			<fmt:message key="authoring.info.teacher.set.restriction" >
-				<fmt:param><lams:Date value="${sessionMap.submissionDeadline}" /></fmt:param>
+		<lams:Alert id="submissionDeadline" type="danger" close="false">
+			<fmt:message key="authoring.info.teacher.set.restriction">
+				<fmt:param>
+					<lams:Date value="${sessionMap.submissionDeadline}" />
+				</fmt:param>
 			</fmt:message>
-		</div>	
-		
+		</lams:Alert>
+
 		<c:if test="${sessionMap.userFinished and sessionMap.reflectOn}">
-			<div class="small-space-top">
-				<h2>${sessionMap.reflectInstructions}</h2>
-			
-				<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>
-				
-				<html:button property="FinishButton"
-					onclick="return continueReflect()" styleClass="button">
-					<fmt:message key="label.edit" />
-				</html:button>											
+
+			<div class="row">
+				<div class="col-xs-12">
+					<div class="panel panel-default">
+						<div class="panel-heading-sm">
+							<div class="panel-title">${sessionMap.reflectInstructions}</div>
+						</div>
+						<div class="panel-body">
+							<c:choose>
+								<c:when test="${empty sessionMap.reflectEntry}">
+									<fmt:message key="message.no.reflection.available" />
+								</c:when>
+								<c:otherwise>
+									<div class="panel">
+										<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}" />
+									</div>
+								</c:otherwise>
+							</c:choose>
+
+							<html:button property="FinishButton" onclick="return continueReflect()" styleClass="btn btn-default voffset5">
+								<fmt:message key="label.edit" />
+							</html:button>
+
+
+						</div>
+					</div>
+				</div>
 			</div>
+
 		</c:if>
 
-		<div class="space-bottom-top align-right">
+		<div class="voffset10">
 			<c:choose>
-				<c:when
-					test="${sessionMap.reflectOn && (not sessionMap.userFinished)}">
-					<html:link href="#nogo" property="FinishButton"
-						onclick="return continueReflect()" styleClass="button">
+				<c:when test="${sessionMap.reflectOn && (not sessionMap.userFinished)}">
+					<html:link href="#nogo" property="FinishButton" onclick="return continueReflect()"
+						styleClass="btn btn-primary pull-right ">
 						<fmt:message key="label.continue" />
 					</html:link>
 				</c:when>
 				<c:otherwise>
-					<html:link href="#nogo" property="FinishButton" styleId="finishButton"
-						onclick="return finishSession()" styleClass="button">
-						<span class="nextActivity">
-							<c:choose>
+					<html:link href="#nogo" property="FinishButton" styleId="finishButton" onclick="return finishSession()"
+						styleClass="btn btn-primary pull-right na">
+						<span class="nextActivity"> <c:choose>
 								<c:when test="${sessionMap.activityPosition.last}">
 									<fmt:message key="label.submit" />
 								</c:when>
@@ -84,10 +89,9 @@
 				</c:otherwise>
 			</c:choose>
 		</div>
-	</div>
-	<div id="footer">
-	</div>
-	<!--closes footer-->
 
+		<div id="footer"></div>
+		<!--closes footer-->
+	</lams:Page>
 </body>
 </lams:html>