Index: lams_central/web/css/jquery.jRating.css
===================================================================
diff -u -r1c42119baf51e12d0ef19919cb5a266a186d4b7d -r099554309e1f77769667c041fb6d0fa91a89ea03
--- lams_central/web/css/jquery.jRating.css	(.../jquery.jRating.css)	(revision 1c42119baf51e12d0ef19919cb5a266a186d4b7d)
+++ lams_central/web/css/jquery.jRating.css	(.../jquery.jRating.css)	(revision 099554309e1f77769667c041fb6d0fa91a89ea03)
@@ -53,8 +53,8 @@
 	height: 0; 
 	clear: both;
 }
-.rating-stars-holder {width: 150px; text-align: center; float: right;}
-.rating-stars-caption {padding-top: 6px;}
+.rating-stars-holder {text-align: center;}
+.rating-stars-caption {padding-top: 6px; font-size: 12px}
 .rating-stars, .rating-stars-disabled {margin: 0px auto; min-height: 20px;}
 .add-comment {
 	background-image: url('../images/tick.png');
Index: lams_tool_laqa/src/java/org/lamsfoundation/lams/tool/qa/dto/QaQuestionDTO.java
===================================================================
diff -u -r55645d4b796f36715b66a70fce66406a986ee647 -r099554309e1f77769667c041fb6d0fa91a89ea03
--- lams_tool_laqa/src/java/org/lamsfoundation/lams/tool/qa/dto/QaQuestionDTO.java	(.../QaQuestionDTO.java)	(revision 55645d4b796f36715b66a70fce66406a986ee647)
+++ lams_tool_laqa/src/java/org/lamsfoundation/lams/tool/qa/dto/QaQuestionDTO.java	(.../QaQuestionDTO.java)	(revision 099554309e1f77769667c041fb6d0fa91a89ea03)
@@ -41,7 +41,7 @@
     public QaQuestionDTO(QaQueContent que) {
 	this.question = que.getQuestion();
 	this.displayOrder = new Integer(que.getDisplayOrder()).toString();
-	this.feedback = que.getFeedback() != null ? que.getFeedback() : " ";
+	this.feedback = que.getFeedback() != null ? que.getFeedback() : "";
 	this.required = que.isRequired();
 	this.minWordsLimit = que.getMinWordsLimit();
 	this.uid = que.getUid();
Index: lams_tool_laqa/web/WEB-INF/tags/Alert.tag
===================================================================
diff -u
--- lams_tool_laqa/web/WEB-INF/tags/Alert.tag	(revision 0)
+++ lams_tool_laqa/web/WEB-INF/tags/Alert.tag	(revision 099554309e1f77769667c041fb6d0fa91a89ea03)
@@ -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_laqa/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -rfef442a88ab05c91db8a551081c4abc060d4da5e -r099554309e1f77769667c041fb6d0fa91a89ea03
--- lams_tool_laqa/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision fef442a88ab05c91db8a551081c4abc060d4da5e)
+++ lams_tool_laqa/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 099554309e1f77769667c041fb6d0fa91a89ea03)
@@ -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_laqa/web/WEB-INF/tags/Page.tag
===================================================================
diff -u
--- lams_tool_laqa/web/WEB-INF/tags/Page.tag	(revision 0)
+++ lams_tool_laqa/web/WEB-INF/tags/Page.tag	(revision 099554309e1f77769667c041fb6d0fa91a89ea03)
@@ -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_laqa/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u -rad572fe631188a44a1b0976295ee33af9919ed78 -r099554309e1f77769667c041fb6d0fa91a89ea03
--- lams_tool_laqa/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision ad572fe631188a44a1b0976295ee33af9919ed78)
+++ lams_tool_laqa/web/WEB-INF/tags/Rating.tag	(.../Rating.tag)	(revision 099554309e1f77769667c041fb6d0fa91a89ea03)
@@ -64,7 +64,7 @@
 <%--Rating stars area---------------------------------------%>
 
 <div class="extra-controls-inner">
-<div class="rating-stars-holder">
+<div class="rating-stars-holder text-center center-block">
 
 	<c:set var="hasStartedRating" value="false"/>
 	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
@@ -85,9 +85,9 @@
 			</c:otherwise>
 		</c:choose>
 			
-		<h4>
+		<strong>
 			${criteriaDto.ratingCriteria.title}
-		</h4>
+		</strong>
 			
 		<c:choose>
 			<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
Index: lams_tool_laqa/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r55645d4b796f36715b66a70fce66406a986ee647 -r099554309e1f77769667c041fb6d0fa91a89ea03
--- lams_tool_laqa/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 55645d4b796f36715b66a70fce66406a986ee647)
+++ lams_tool_laqa/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 099554309e1f77769667c041fb6d0fa91a89ea03)
@@ -448,7 +448,15 @@
 		<path>/WEB-INF/tags/DefineLater.tag</path>
    	</tag-file>  
    	<tag-file>
-	    <name>ImgButtonWrapper</name>
+	    <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>
    	<tag-file>
Index: lams_tool_laqa/web/learning/AnswersContent.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -r099554309e1f77769667c041fb6d0fa91a89ea03
--- lams_tool_laqa/web/learning/AnswersContent.jsp	(.../AnswersContent.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_laqa/web/learning/AnswersContent.jsp	(.../AnswersContent.jsp)	(revision 099554309e1f77769667c041fb6d0fa91a89ea03)
@@ -1,36 +1,41 @@
 <!DOCTYPE html>
-
 <%@ include file="/common/taglibs.jsp"%>
 
 <c:set var="lams">
 	<lams:LAMSURL />
 </c:set>
-<c:set var="tool">
-	<lams:WebAppURL />
-</c:set>
-<c:set var="sessionMap" value="${sessionScope[generalLearnerFlowDTO.httpSessionID]}" scope="request"/>
-<c:set var="isUserLeader" value="${sessionMap.isUserLeader}" scope="request"/>
-<c:set var="mode" value="${sessionMap.mode}" scope="request"/>
-<c:set var="isLeadershipEnabled" value="${sessionMap.content.useSelectLeaderToolOuput}" scope="request"/>
-<c:set var="hasEditRight" value="${!isLeadershipEnabled || isLeadershipEnabled && isUserLeader}" scope="request"/>
+<c:set var="sessionMap" value="${sessionScope[generalLearnerFlowDTO.httpSessionID]}" scope="request" />
+<c:set var="isUserLeader" value="${sessionMap.isUserLeader}" scope="request" />
+<c:set var="mode" value="${sessionMap.mode}" scope="request" />
+<c:set var="isLeadershipEnabled" value="${sessionMap.content.useSelectLeaderToolOuput}" scope="request" />
+<c:set var="hasEditRight" value="${!isLeadershipEnabled || isLeadershipEnabled && isUserLeader}" scope="request" />
 
 <lams:html>
 <lams:head>
 	<html:base />
 	<title><fmt:message key="activity.title" /></title>
-	
 	<lams:css />
 	<style media="screen,projection" type="text/css">
-		div.growlUI { background: url(check48.png) no-repeat 10px 10px }
-		div.growlUI h1, div.growlUI h2 {
-			color: white; padding: 5px 5px 5px 0px; text-align: center;
-		}
-	</style>
-	
+div.growlUI {
+	background: url(check48.png) no-repeat 10px 10px
+}
+
+div.growlUI h1, div.growlUI h2 {
+	color: white;
+	padding: 5px 5px 5px 0px;
+	text-align: center;
+	font-size: 20px;
+}
+</style>
+
 	<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/jquery.form.js"></script>
- 	<script type="text/javascript" src="${lams}includes/javascript/jquery.blockUI.js"></script>	
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.form.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.blockUI.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.timeago.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
+
+
 	<script language="JavaScript" type="text/JavaScript">
 
 		var minWordsLimitLabel = '<fmt:message key="label.minimum.number.words" ><fmt:param>{0}</fmt:param></fmt:message>';
@@ -138,72 +143,83 @@
 </lams:head>
 
 <body class="stripes">
+	<lams:Page type="learner" title="${generalLearnerFlowDTO.activityTitle}">
 
-	<div id="content">
-		<h1>
-			<c:out value="${generalLearnerFlowDTO.activityTitle}" escapeXml="true" />
-		</h1>
+		<!-- Advanced settings and notices -->
 
+		<c:if test="${generalLearnerFlowDTO.noReeditAllowed}">
+			<lams:Alert type="danger" id="noRedosAllowed" close="false">
+				<fmt:message key="label.noredo.enabled" />
+			</lams:Alert>
+		</c:if>
+
 		<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 type="danger" id="submission-deadline" close="false">
+				<fmt:message key="authoring.info.teacher.set.restriction">
+					<fmt:param>
+						<lams:Date value="${sessionMap.submissionDeadline}" />
+					</fmt:param>
 				</fmt:message>
-			</div>
-		</c:if>	
-		
+			</lams:Alert>
+		</c:if>
+
 		<c:if test="${isLeadershipEnabled}">
-			<h4>
-				<fmt:message key="label.group.leader" >
+			<lams:Alert type="info" id="leader-enabled" close="false">
+				<fmt:message key="label.group.leader">
 					<fmt:param>${sessionMap.groupLeader.fullname}</fmt:param>
 				</fmt:message>
-			</h4>
+			</lams:Alert>
 		</c:if>
 
-		<html:form action="/learning?validate=false" enctype="multipart/form-data" method="POST" target="_self" styleId="learningForm">
+		<!-- End advanced settings and notices -->
+
+		<!-- Form -->
+		<html:form action="/learning?validate=false" enctype="multipart/form-data" method="POST" target="_self"
+			styleId="learningForm">
 			<c:choose>
 				<c:when test="${generalLearnerFlowDTO.questionListingMode == 'questionListingModeSequential'}">
-					<html:hidden property="method" value="getNextQuestion"/>
+					<html:hidden property="method" value="getNextQuestion" />
 				</c:when>
 				<c:otherwise>
-					<html:hidden property="method" value="submitAnswersContent"/>
+					<html:hidden property="method" value="submitAnswersContent" />
 				</c:otherwise>
 			</c:choose>
-				
-			<html:hidden property="toolSessionID" styleId="tool-session-id"/>
+
+			<html:hidden property="toolSessionID" styleId="tool-session-id" />
 			<html:hidden property="userID" />
 			<html:hidden property="httpSessionID" />
 			<html:hidden property="questionIndex" />
 			<html:hidden property="totalQuestionCount" />
 
 			<logic:messagesPresent>
 				<p class="warning">
-				  	<html:messages id="error" message="false"> 
-            			<c:out value="${error}" escapeXml="false"/><BR> 
-         			</html:messages> 
+					<html:messages id="error" message="false">
+						<c:out value="${error}" escapeXml="false" />
+						<BR>
+					</html:messages>
 				</p>
 			</logic:messagesPresent>
 
-			<p>
+			<div class="panel">
 				<c:out value="${generalLearnerFlowDTO.activityInstructions}" escapeXml="false" />
-			</p>
-				
+			</div>
+
 			<c:choose>
 				<c:when test="${(generalLearnerFlowDTO.questionListingMode == 'questionListingModeSequential') && hasEditRight}">
 
 					<c:if test="${generalLearnerFlowDTO.totalQuestionCount != 1}">
 						<c:if test="${generalLearnerFlowDTO.initialScreen == 'true'}">
-							<p><fmt:message key="label.feedback.seq" />
-									
-								<c:out value="${generalLearnerFlowDTO.remainingQuestionCount}" />
-									
-								<fmt:message key="label.questions.simple" /></p>
+							<p>
+								<fmt:message key="label.feedback.seq" />&nbsp;
+								<c:out value="${generalLearnerFlowDTO.remainingQuestionCount}" />&nbsp;
+								<fmt:message key="label.questions.simple" />
+							</p>
 						</c:if>
 					</c:if>
-					
+
 					<c:if test="${generalLearnerFlowDTO.initialScreen != 'true'}">
 						<p>
-							<fmt:message key="label.questions.remaining" />
+							<fmt:message key="label.questions.remaining" />&nbsp;
 							<c:out value="${generalLearnerFlowDTO.remainingQuestionCount}" />
 						</p>
 					</c:if>
@@ -217,16 +233,17 @@
 						<fmt:message key="label.feedback.combined" /> &nbsp <c:out
 							value="${generalLearnerFlowDTO.remainingQuestionCount}" />
 						<fmt:message key="label.questions.simple" />
-					</c:if>						
+					</c:if>
 
 					<jsp:include page="/learning/CombinedAnswersContent.jsp" />
 				</c:otherwise>
 			</c:choose>
 
 		</html:form>
-	</div>
 
-	<div id="footer"></div>
+		<div id="footer"></div>
 
+	</lams:Page>
+
 </body>
 </lams:html>
Index: lams_tool_laqa/web/learning/CombinedAnswersContent.jsp
===================================================================
diff -u -r55645d4b796f36715b66a70fce66406a986ee647 -r099554309e1f77769667c041fb6d0fa91a89ea03
--- lams_tool_laqa/web/learning/CombinedAnswersContent.jsp	(.../CombinedAnswersContent.jsp)	(revision 55645d4b796f36715b66a70fce66406a986ee647)
+++ lams_tool_laqa/web/learning/CombinedAnswersContent.jsp	(.../CombinedAnswersContent.jsp)	(revision 099554309e1f77769667c041fb6d0fa91a89ea03)
@@ -5,76 +5,96 @@
 <%@ taglib uri="tags-fmt" prefix="fmt"%>
 <%@ taglib uri="tags-lams" prefix="lams"%>
 
-<c:set var="lams">
-	<lams:LAMSURL />
-</c:set>
-<c:set var="tool">
-	<lams:WebAppURL />
-</c:set>
+<c:forEach var="questionEntry"
+	items="${generalLearnerFlowDTO.mapQuestionContentLearner}">
+	<c:forEach var="answerEntry"
+		items="${generalLearnerFlowDTO.mapAnswers}">
 
-<c:forEach var="questionEntry" items="${generalLearnerFlowDTO.mapQuestionContentLearner}">
-	<c:forEach var="answerEntry" items="${generalLearnerFlowDTO.mapAnswers}">
-	
 		<c:if test="${questionEntry.key == answerEntry.key}">
-		
-			<div class="shading-bg">
-				<p>
-			 		<strong>
-			 			<fmt:message key="label.question" /> 
-			 			<c:out value="${questionEntry.key}" />:
-			 		</strong>
-					<c:if test="${questionEntry.value.required}">
-						<fmt:message key="label.required" />
-					</c:if>
-					<c:if test="${questionEntry.value.minWordsLimit != 0}">
-						<fmt:message key="label.minimum.number.words" >
-							<fmt:param>&nbsp;${questionEntry.value.minWordsLimit}</fmt:param>
-						</fmt:message>
-					</c:if>	
-					<c:out value="${questionEntry.value.question}" escapeXml="false" />
-				</p>
-								 
-				<p>
-					<strong><fmt:message key="label.answer" /></strong>
-				</p>
-				
-				<c:choose>
-					<c:when test="${hasEditRight}">
-					
-						<div data-sequence-id="${questionEntry.key}" data-is-ckeditor="${generalLearnerFlowDTO.allowRichEditor}"
-							 data-min-words-limit="${questionEntry.value.minWordsLimit}"
-							<c:if test="${questionEntry.value.minWordsLimit != 0}">class="min-words-limit-enabled"</c:if>
-						>
+			<div class="row no-gutter">
+				<div class="col-xs-12">
+					<div class="panel panel-default">
+						<div class="panel-heading">
+							<div class="panel-title">
+								<strong> <fmt:message key="label.question" /> <c:out
+										value="${questionEntry.key}" /> 
+								</strong>
+							</div>
+						</div>
+						<div class="panel-body">
+							<div class="panel"><c:out value="${questionEntry.value.question}" escapeXml="false" /></div>
+						
+							<div class="answer-req">
+							<fmt:message key="label.learning.yourAnswer" /> 
+							<c:if
+									test="${questionEntry.value.required}">
+									<small><mark>
+											<fmt:message key="label.required" />
+										</mark></small>
+								</c:if> <c:if test="${questionEntry.value.minWordsLimit != 0}">
+									<br/><small><em>- <fmt:message key="label.minimum.number.words">
+											<fmt:param>&nbsp;${questionEntry.value.minWordsLimit}</fmt:param>
+										</fmt:message>
+									</em></small>
+								</c:if>
+								</div>
+
 							<c:choose>
-								<c:when test="${generalLearnerFlowDTO.allowRichEditor}">
-									<lams:CKEditor id="answer${questionEntry.key}" value="${answerEntry.value}"
-										contentFolderID="${sessionMap.learnerContentFolder}" toolbarSet="DefaultLearner">
-									</lams:CKEditor>
+								<c:when test="${hasEditRight}">
+
+									<div data-sequence-id="${questionEntry.key}"
+										data-is-ckeditor="${generalLearnerFlowDTO.allowRichEditor}"
+										data-min-words-limit="${questionEntry.value.minWordsLimit}"
+										<c:if test="${questionEntry.value.minWordsLimit != 0}">class="min-words-limit-enabled"</c:if>>
+										<c:choose>
+											<c:when test="${generalLearnerFlowDTO.allowRichEditor}">
+												<lams:CKEditor id="answer${questionEntry.key}"
+													value="${answerEntry.value}"
+													contentFolderID="${sessionMap.learnerContentFolder}"
+													toolbarSet="DefaultLearner">
+												</lams:CKEditor>
+											</c:when>
+
+											<c:otherwise>
+												<lams:textarea name="answer${questionEntry.key}"
+													id="answer${questionEntry.key}" rows="5"
+													class="form-control"><c:out value='${answerEntry.value}' escapeXml='false' /></lams:textarea>
+											</c:otherwise>
+										</c:choose>
+									</div>
+
 								</c:when>
-						
+
 								<c:otherwise>
-									<lams:textarea name="answer${questionEntry.key}" id="answer${questionEntry.key}" rows="5" cols="60" class="text-area"><c:out value='${answerEntry.value}' escapeXml='false' /></lams:textarea>
+									<lams:textarea name="answer${questionEntry.key}" rows="5"
+										class="form-control" disabled="disabled">
+										<c:out value='${answerEntry.value}' escapeXml='false' />
+									</lams:textarea>
 								</c:otherwise>
 							</c:choose>
 						</div>
-						
-					</c:when>
-					
-					<c:otherwise>
-						<lams:textarea name="answer${questionEntry.key}" rows="5" cols="60" class="text-area" disabled="disabled"><c:out value='${answerEntry.value}' escapeXml='false' /></lams:textarea>
-					</c:otherwise>
-				</c:choose>
+					</div>
+				</div>
 			</div>
-		
 		</c:if>
-	
+
 	</c:forEach>
 </c:forEach>
 
 <c:if test="${hasEditRight}">
-	<div class="space-bottom-top align-right">
-		<html:button property="btnCombined" onclick="javascript:submitMethod('submitAnswersContent');"	styleClass="button">
+	<div class="right-buttons">
+		<html:button property="btnCombined"
+			onclick="javascript:submitMethod('submitAnswersContent');"
+			styleClass="btn btn-primary pull-right voffset5">
 			<fmt:message key="button.submitAllContent" />
 		</html:button>
 	</div>
-</c:if>
\ No newline at end of file
+</c:if>
+
+
+<script type="text/javascript">
+	window.onload = function() {
+		document.getElementById("answer1").focus();
+	}
+</script>
+
Index: lams_tool_laqa/web/learning/IndividualLearnerResults.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -r099554309e1f77769667c041fb6d0fa91a89ea03
--- lams_tool_laqa/web/learning/IndividualLearnerResults.jsp	(.../IndividualLearnerResults.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_laqa/web/learning/IndividualLearnerResults.jsp	(.../IndividualLearnerResults.jsp)	(revision 099554309e1f77769667c041fb6d0fa91a89ea03)
@@ -1,9 +1,6 @@
 <!DOCTYPE html>
-
 <%@ include file="/common/taglibs.jsp"%>
 
-<c:set var="lams"><lams:LAMSURL /></c:set>
-<c:set var="tool"><lams:WebAppURL /></c:set>
 <c:set var="sessionMap" value="${sessionScope[generalLearnerFlowDTO.httpSessionID]}" />
 
 <lams:html>
@@ -17,134 +14,166 @@
 			if (actionMethod == 'endLearning') {
 				document.getElementById("finishButton").disabled = true;
 			}
-			document.QaLearningForm.method.value=actionMethod; 
+			document.QaLearningForm.method.value = actionMethod;
 			document.QaLearningForm.submit();
 		}
-		
+
 		function submitMethod(actionMethod) {
 			submitLearningMethod(actionMethod);
 		}
 	</script>
 </lams:head>
 
 <body class="stripes">
-	<div id="content">
-		<h1>
-			<c:out value="${generalLearnerFlowDTO.activityTitle}" escapeXml="true" />
-		</h1>
-		
+
+	<lams:Page type="learner" title="${generalLearnerFlowDTO.activityTitle}">
+
+		<!--  Announcements and advanced settings -->
+
+		<c:if test="${generalLearnerFlowDTO.noReeditAllowed}">
+			<lams:Alert type="danger" id="noRedosAllowed" close="false">
+				<fmt:message key="label.noredo.enabled" />
+			</lams:Alert>
+		</c:if>
+
+		<c:if test="${generalLearnerFlowDTO.lockWhenFinished && not generalLearnerFlowDTO.noReeditAllowed}">
+			<lams:Alert type="danger" id="lockWhenFinished" close="false">
+				<fmt:message key="label.responses.locked" />
+			</lams:Alert>
+		</c:if>
+
 		<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 type="danger" id="submissionDeadline" close="false">
+				<fmt:message key="authoring.info.teacher.set.restriction">
+					<fmt:param>
+						<lams:Date value="${sessionMap.submissionDeadline}" />
+					</fmt:param>
 				</fmt:message>
-			</div>
-		</c:if>			
-
-		<c:if test="${(generalLearnerFlowDTO.lockWhenFinished == 'true') && !generalLearnerFlowDTO.noReeditAllowed && (generalLearnerFlowDTO.showOtherAnswers == 'true') }">
-			<div class="info space-bottom">
-				<fmt:message key="label.responses.locked" />								
-			</div>
+			</lams:Alert>
 		</c:if>
+		<!-- End announcements -->
 
+		<!-- form -->
 		<html:form action="/learning?validate=false" enctype="multipart/form-data" method="POST" target="_self">
-			<html:hidden property="method" value="storeAllResults"/>
+			<html:hidden property="method" value="storeAllResults" />
 			<html:hidden property="toolSessionID" />
 			<html:hidden property="userID" />
 			<html:hidden property="httpSessionID" />
 			<html:hidden property="totalQuestionCount" />
 
 			<c:forEach var="questionEntry" items="${generalLearnerFlowDTO.mapQuestionContentLearner}">
 
-				<div class="shading-bg">
-					<p>
-						<strong>
-							<fmt:message key="label.question" /> <c:out value="${questionEntry.key}" escapeXml="false"/>:
-						</strong>
-						<br>
-						<c:out value="${questionEntry.value.question}" escapeXml="false" />
-					</p>
+				<div class="row no-gutter">
+					<div class="col-xs-12">
+						<div class="panel panel-default">
+							<div class="panel-heading panel-title">
+								<strong> <fmt:message key="label.question" /> <c:out value="${questionEntry.key}" escapeXml="false" />:
+								</strong> <br>
+								<c:out value="${questionEntry.value.question}" escapeXml="false" />
+							</div>
+							<div class="panel-body">
 
-					<c:forEach var="answerEntry" items="${generalLearnerFlowDTO.mapAnswersPresentable}">
-						<c:if test="${answerEntry.key == questionEntry.key}">
+								<c:forEach var="answerEntry" items="${generalLearnerFlowDTO.mapAnswersPresentable}">
+									<c:if test="${answerEntry.key == questionEntry.key}">
 
-							<p class="user-answer">
-								<strong> 
-									<fmt:message key="label.learning.yourAnswer" />
-								</strong>
+										<h5>
+											<fmt:message key="label.learning.yourAnswer" />
+										</h5>
 
-								<br>
-								<c:out value="${answerEntry.value}" escapeXml="false" />
-							</p>
+										<div class="panel" id="answer${questionEntry.key}">
+											<c:out value="${answerEntry.value}" escapeXml="false" />
+										</div>
 
-						</c:if>
-					</c:forEach>
 
-					<c:if test="${(questionEntry.value.feedback != '') && (questionEntry.value.feedback != null) }">
-						<span class="field-name"> 
-							<fmt:message key="label.feedback" />: 
-						</span>
-						<c:out value="${questionEntry.value.feedback}" escapeXml="false" />
-					</c:if>
+									</c:if>
+								</c:forEach>
 
+								<c:if test="${(questionEntry.value.feedback != '') && (questionEntry.value.feedback != null) }">
+									<!-- Feedback -->
+
+									<div class="row no-gutter">
+										<div class="col-xs-12">
+											<div class="panel panel-default voffset5" id="feedback${questionEntry.key}">
+												<div class="panel-heading panel-heading-sm panel-title">
+													<fmt:message key="label.feedback" />
+												</div>
+												<div class="panel-body panel-body-sm">
+													<c:out value="${questionEntry.value.feedback}" escapeXml="false" />
+												</div>
+											</div>
+										</div>
+									</div>
+
+									<!-- End feedback -->
+								</c:if>
+
+
+
+							</div>
+							<!-- End panel body -->
+						</div>
+					</div>
 				</div>
+				<div class="shading-bg">
+					<p></p>
 
-			</c:forEach>
 
-			<div class="last-item">
 
-			</div>
+				</div>
 
-			<div class="space-bottom-top small-space-top">
+			</c:forEach>
+
+			<hr class="msg-hr" />
+
+			<div class="voffset10">
 				<c:if test="${!generalLearnerFlowDTO.noReeditAllowed}">
-					<html:button property="redoQuestions" styleClass="button"
-							onclick="submitMethod('redoQuestions');">
+					<html:button property="redoQuestions" styleClass="btn btn-primary pull-left"
+						onclick="submitMethod('redoQuestions');">
 						<fmt:message key="label.redo" />
 					</html:button>
 				</c:if>
 
 				<c:if test="${generalLearnerFlowDTO.showOtherAnswers == 'true'}">
-					<html:button property="viewAllResults"
-						onclick="submitMethod('storeAllResults');" styleClass="button">
+					<html:button property="viewAllResults" onclick="submitMethod('storeAllResults');"
+						styleClass="btn btn-primary pull-right">
 						<fmt:message key="label.allResponses" />
 					</html:button>
-				</c:if>				
+				</c:if>
 
 				<c:if test="${generalLearnerFlowDTO.showOtherAnswers != 'true'}">
 					<c:if test="${generalLearnerFlowDTO.reflection != 'true'}">
-					    <div class="space-bottom-top align-right">
-						<html:link href="#nogo" property="endLearning" styleId="finishButton"
-							onclick="javascript:submitMethod('storeAllResults');return false"
-							styleClass="button">
-							<span class="nextActivity">
+						<div class="space-bottom-top align-right">
+							<html:link href="#nogo" property="endLearning" styleId="finishButton"
+								onclick="javascript:submitMethod('storeAllResults');return false" styleClass="btn btn-primary pull-right na">
 								<c:choose>
-				 					<c:when test="${sessionMap.activityPosition.last}">
-				 						<fmt:message key="button.submit" />
-				 					</c:when>
-				 					<c:otherwise>
-				 		 				<fmt:message key="button.endLearning" />
-				 					</c:otherwise>
-				 				</c:choose>
-				 			</span>
-						</html:link>
-					    </div>
+									<c:when test="${sessionMap.activityPosition.last}">
+										<fmt:message key="button.submit" />
+									</c:when>
+									<c:otherwise>
+										<fmt:message key="button.endLearning" />
+									</c:otherwise>
+								</c:choose>
+
+							</html:link>
+						</div>
 					</c:if>
 
 					<c:if test="${generalLearnerFlowDTO.reflection == 'true'}">
-						<html:button property="forwardtoReflection"
-							onclick="javascript:submitMethod('storeAllResults');"
-							styleClass="button">
+						<html:button property="forwardtoReflection" onclick="javascript:submitMethod('storeAllResults');"
+							styleClass="btn btn-primary pull-right">
 							<fmt:message key="label.continue" />
 						</html:button>
 					</c:if>
 				</c:if>
-			
+
 			</div>
 
 		</html:form>
-	</div>
+		<!-- end form -->
 
-	<div id="footer"></div>
+		<div id="footer"></div>
 
+	</lams:Page>
+
 </body>
 </lams:html>
Index: lams_tool_laqa/web/learning/LearnerRep.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -r099554309e1f77769667c041fb6d0fa91a89ea03
--- lams_tool_laqa/web/learning/LearnerRep.jsp	(.../LearnerRep.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_laqa/web/learning/LearnerRep.jsp	(.../LearnerRep.jsp)	(revision 099554309e1f77769667c041fb6d0fa91a89ea03)
@@ -1,13 +1,9 @@
 <!DOCTYPE html>
-
 <%@ include file="/common/taglibs.jsp"%>
 
 <c:set var="lams">
 	<lams:LAMSURL />
 </c:set>
-<c:set var="tool">
-	<lams:WebAppURL />
-</c:set>
 <c:set var="sessionMap" value="${sessionScope[generalLearnerFlowDTO.httpSessionID]}" />
 <c:set var="isUserLeader" value="${sessionMap.isUserLeader}" />
 <c:set var="mode" value="${sessionMap.mode}" />
@@ -20,13 +16,12 @@
 <lams:head>
 	<html:base />
 	<title><fmt:message key="activity.title" /></title>
-	
-	<lams:css />
-	<link type="text/css" href="${lams}css/jquery.jRating.css" rel="stylesheet"/>
+	<link type="text/css" href="${lams}css/jquery.jRating.css" rel="stylesheet" />
 	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme-blue.css">
 	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.pager.css">
 	<link rel="stylesheet" href="<html:rewrite page='/includes/qalearning.css'/>">
-	
+	<lams:css />
+
 	<script type="text/javascript">
 		//var for jquery.jRating.js
 		var pathToImageFolder = "${lams}images/css/";
@@ -45,15 +40,20 @@
 	<script src="${lams}includes/javascript/jquery.jRating.js" type="text/javascript"></script>
 	<script src="${lams}includes/javascript/jquery.tablesorter.js" type="text/javascript"></script>
 	<script src="${lams}includes/javascript/jquery.tablesorter-pager.js" type="text/javascript"></script>
+	<script src="${lams}includes/javascript/jquery.timeago.js" type="text/javascript"></script>
 	<script src="${lams}includes/javascript/common.js" type="text/javascript"></script>
-	<script src="${lams}includes/javascript/rating.js" type="text/javascript" ></script> 
+	<script src="${lams}includes/javascript/rating.js" type="text/javascript"></script>
+	<script src="${lams}includes/javascript/bootstrap.min.js" type="text/javascript"></script>
+
 	<script type="text/javascript">
 		var AVG_RATING_LABEL = '<fmt:message key="label.average.rating"><fmt:param>@1@</fmt:param><fmt:param>@2@</fmt:param></fmt:message>',
 		YOUR_RATING_LABEL = '<fmt:message key="label.your.rating"><fmt:param>@1@</fmt:param><fmt:param>@2@</fmt:param><fmt:param>@3@</fmt:param></fmt:message>',
 		IS_DISABLED =  ${sessionMap.isDisabled};
 		
 		$(document).ready(function(){
 			
+			jQuery("time.timeago").timeago();
+			
 			$(".tablesorter").tablesorter({
 				theme: 'blue',
 			    widthFixed: true,
@@ -91,11 +91,11 @@
 								rows += '<td>';
 								
 								if (${generalLearnerFlowDTO.userNameVisible == 'true'}) {
-									rows += '<div>';
-									rows += 	'<span class="field-name">';
+									rows += '<div class="sbox-heading bg-warning">';
+									rows += 	'<div class="user">';
 									rows += 		userData["userName"];
-									rows += 	'</span> ';
-									rows += 	userData["attemptTime"];
+									rows += 	'</div> - ';
+									rows += 	userData['attemptTime'];
 									rows += '</div>';
 								}
 								
@@ -138,9 +138,9 @@
 											var averageRatingDisplayed = (isItemAuthoredByUser || !isCriteriaNotRatedByUser) ? averageRating : 0;
 											var ratingStarsClass = (IS_DISABLED || isItemAuthoredByUser || (MAX_RATES > 0) && (countRatedItems >= MAX_RATES)  && (!hasStartedRating) || !isCriteriaNotRatedByUser) ? "rating-stars-disabled" : "rating-stars";
 								
-											rows += '<h4>';
+											rows += '<strong>';
 											rows += 	 criteriaDto.title;
-											rows += '</h4>';
+											rows += '</strong>';
 											
 											rows += '<div class="'+ ratingStarsClass +' rating-stars-new" data-average="'+ averageRatingDisplayed +'" data-id="'+ objectId +'">';
 											rows += '</div>';
@@ -194,7 +194,7 @@
 										//show comments textarea and a submit button
 										} else if (! (IS_DISABLED || usesRatings && MAX_RATES>0 && countRatedItems >= MAX_RATES && !hasStartedRating)) {
 											rows += '<div id="add-comment-area-' + itemId + '">';											
-											rows +=		'<textarea name="comment" rows="4" id="comment-textarea-'+ itemId +'" onfocus="if(this.value==this.defaultValue)this.value=\'\';" onblur="if(this.value==\'\')this.value=this.defaultValue;"><fmt:message key="label.comment.textarea.tip"/></textarea>';
+											rows +=		'<textarea class="form-control" name="comment" rows="4" id="comment-textarea-'+ itemId +'" onfocus="if(this.value==this.defaultValue)this.value=\'\';" onblur="if(this.value==\'\')this.value=this.defaultValue;"><fmt:message key="label.comment.textarea.tip"/></textarea>';
 											
 											rows += 	'<div class="button add-comment add-comment-new" data-item-id="'+ itemId +'" data-comment-criteria-id="'+ commentsCriteriaId +'">';
 											rows += 	'</div>';
@@ -252,228 +252,258 @@
 
 <body class="stripes">
 
-	<div id="content">
-		<h1>
-			<c:out value="${generalLearnerFlowDTO.activityTitle}" escapeXml="true" />
-		</h1>
-		
+
+	<lams:Page type="learner" title="${qaContent.title}">
+
+		<!-- Announcements and advanced settings -->
+
 		<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="submission-deadline" 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>
-		
+
 		<!-- Rating limits info -->
 		<c:if test="${qaContent.allowRateAnswers && (qaContent.minimumRates ne 0 || qaContent.maximumRates ne 0)}">
-		
-			<div class="info">
+
+			<lams:Alert id="rating-info" type="info" close="true">
 				<c:choose>
 					<c:when test="${qaContent.minimumRates ne 0 and qaContent.maximumRates ne 0}">
 						<fmt:message key="label.rate.limits.reminder">
-							<fmt:param value="${qaContent.minimumRates}"/>
-							<fmt:param value="${qaContent.maximumRates}"/>
+							<fmt:param value="${qaContent.minimumRates}" />
+							<fmt:param value="${qaContent.maximumRates}" />
 						</fmt:message>
 					</c:when>
-					
+
 					<c:when test="${qaContent.minimumRates ne 0 and qaContent.maximumRates eq 0}">
 						<fmt:message key="label.rate.limits.reminder.min">
-							<fmt:param value="${qaContent.minimumRates}"/>
+							<fmt:param value="${qaContent.minimumRates}" />
 						</fmt:message>
 					</c:when>
-					
+
 					<c:when test="${qaContent.minimumRates eq 0 and qaContent.maximumRates ne 0}">
 						<fmt:message key="label.rate.limits.reminder.max">
-							<fmt:param value="${qaContent.maximumRates}"/>
+							<fmt:param value="${qaContent.maximumRates}" />
 						</fmt:message>
 					</c:when>
 				</c:choose>
 				<br>
-						
+
 				<fmt:message key="label.rate.limits.topic.reminder">
-					<fmt:param value="<span id='count-rated-items'>${sessionMap.countRatedItems}</span>"/>
+					<fmt:param value="<span id='count-rated-items'>${sessionMap.countRatedItems}</span>" />
 				</fmt:message>
-			</div>
-			
+			</lams:Alert>
 		</c:if>
-		
+		<!-- End Announcements and advanced settings -->
+
 		<c:if test="${isLeadershipEnabled}">
 			<c:set var="fullName">
-				<c:out value="${sessionMap.groupLeader.fullname}" escapeXml="true"/>
+				<c:out value="${sessionMap.groupLeader.fullname}" escapeXml="true" />
 			</c:set>
 			<h4>
-				<fmt:message key="label.group.leader" >
-					<fmt:param>${fullName}</fmt:param> 
+				<fmt:message key="label.group.leader">
+					<fmt:param>${fullName}</fmt:param>
 				</fmt:message>
 			</h4>
 		</c:if>
 
-		<h2>
+		<h4>
 			<fmt:message key="label.learnerReport" />
-		</h2>
+		</h4>
 
+		<!-- Questions and answers -->
 		<c:forEach var="userResponse" items="${generalLearnerFlowDTO.userResponses}" varStatus="status">
-			<div class="shading-bg">
-			
-				<p>
-					<strong> <fmt:message key="label.question" /> ${status.count}: </strong>
-					<c:out value="${userResponse.qaQuestion.question}" escapeXml="false" />
-				</p>
-	
-				<p>
-					<span class="field-name"> 
-						<c:out value="${userResponse.qaQueUser.fullname}" /> 
-					</span> 
-					-
-					<lams:Date value="${userResponse.attemptTime}" />
-				</p>
-				<div class="user-answer">
-					<c:out value="${userResponse.answer}" escapeXml="false" />
+			<div class="row no-gutter">
+				<div class="col-xs-12">
+					<div class="panel panel-default">
+						<div class="panel-heading panel-title">
+							<fmt:message key="label.question" />
+							${status.count}:
+						</div>
+						<div class="panel-body">
+							<div class="panel">
+								<c:out value="${userResponse.qaQuestion.question}" escapeXml="false" />
+							</div>
+
+							<div class="row no-gutter">
+								<!-- split if ratings are on -->
+								<c:set var="splitRow" value="col-xs-12" />
+								<c:if test="${qaContent.allowRateAnswers}">
+									<c:set var="splitRow" value="col-xs-12 col-sm-9 col-md-10 col-lg-10" />
+								</c:if>
+								<div class="${splitRow}">
+									<div class="sbox">
+										<div class="sbox-heading bg-warning">
+											<div class="user">
+												<c:out value="${userResponse.qaQueUser.fullname}" />
+											</div>
+											-
+											<time class="timeago"
+												datetime="<fmt:formatDate value='${userResponse.attemptTime}' pattern="yyyy-MM-dd'T'HH:mm:ss.S'Z'"/>">
+												<lams:Date value="${userResponse.attemptTime}" />
+											</time>
+										</div>
+										<div class="sbox-body">
+											<c:out value="${userResponse.answer}" escapeXml="false" />
+										</div>
+									</div>
+
+								</div>
+								<%--Rating area---------------------------------------%>
+								<c:if test="${qaContent.allowRateAnswers}">
+									<div class="col-xs-12 col-sm-3 col-md-2 col-lg-2">
+									<h4 class="text-center"><fmt:message key="label.learning.rating" /></h4>
+										<lams:Rating itemRatingDto="${userResponse.itemRatingDto}" disabled="true" isItemAuthoredByUser="true"
+											maxRates="${qaContent.maximumRates}" />
+									</div>
+								</c:if>
+							</div>
+						</div>
+					</div>
 				</div>
-				
-				<%--Rating area---------------------------------------%>
-				<c:if test="${qaContent.allowRateAnswers}">
-					<lams:Rating itemRatingDto="${userResponse.itemRatingDto}" disabled="true" isItemAuthoredByUser="true"
-							maxRates="${qaContent.maximumRates}"/>
-					<br>
-				</c:if>
-				
 			</div>
 		</c:forEach>
-				
-		<c:if test="${generalLearnerFlowDTO.existMultipleUserResponses == 'true'}">				
-			<h2>
+		<!-- End questions and answers -->
+
+		<!-- Others questions -->
+
+		<c:if test="${generalLearnerFlowDTO.existMultipleUserResponses == 'true'}">
+			<h4>
 				<fmt:message key="label.other.answers" />
-			</h2>
-	
-			<c:forEach var="question" items="${generalLearnerFlowDTO.questions}" varStatus="status">			
+			</h4>
+
+			<c:forEach var="question" items="${generalLearnerFlowDTO.questions}" varStatus="status">
 				<p>
-					<strong> <fmt:message key="label.question" /> ${status.count}: </strong>
+					<strong> <fmt:message key="label.question" /> ${status.count}:
+					</strong>
 					<c:out value="${question.question}" escapeXml="false" />
 				</p>
-				
+
 				<c:if test="${isCommentsEnabled && sessionMap.commentsMinWordsLimit != 0}">
-					<div class="info rating-info">
+					<lams:Alert id="rating-info" type="info" close="false">
 						<fmt:message key="label.comment.minimum.number.words">
 							<fmt:param>: ${sessionMap.commentsMinWordsLimit}</fmt:param>
 						</fmt:message>
-					</div>
+					</lams:Alert>
 				</c:if>
-				
+
 				<table class="tablesorter" data-question-uid="${question.uid}">
 					<thead>
 						<tr>
-							<th title="<fmt:message key='label.sort.by.answer'/>" >
-								<fmt:message key="label.learning.answer" />
-							</th>
+							<th title="<fmt:message key='label.sort.by.answer'/>"><fmt:message key="label.learning.answer" /></th>
 							<c:if test="${generalLearnerFlowDTO.allowRateAnswers == 'true'}">
-								<th title="<fmt:message key='label.sort.by.rating'/>">
-									<fmt:message key="label.learning.rating" />
-								</th>
+								<th title="<fmt:message key='label.sort.by.rating'/>"><fmt:message key="label.learning.rating" /></th>
 							</c:if>
 							<c:if test="${isCommentsEnabled}">
-								<th>
-									<fmt:message key="label.comment" />
-								</th>
+								<th><fmt:message key="label.comment" /></th>
 							</c:if>
 						</tr>
 					</thead>
 					<tbody>
 
 					</tbody>
 				</table>
-					
+
 				<!-- pager -->
 				<div class="pager">
 					<form>
-					   	<img class="tablesorter-first"/>
-				    	<img class="tablesorter-prev"/>
-				    	<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
-				   		<img class="tablesorter-next"/>
-				    	<img class="tablesorter-last"/>
-				    	<select class="pagesize">
-				      		<option selected="selected" value="10">10</option>
-				      		<option value="20">20</option>
-				      		<option value="30">30</option>
-				      		<option value="40">40</option>
-				      		<option value="50">50</option>
-				      		<option value="100">100</option>
-				    	</select>
-				  </form>
-				</div>	
-										
+						<img class="tablesorter-first" /> <img class="tablesorter-prev" /> <span class="pagedisplay"></span>
+						<!-- this can be any element, including an input -->
+						<img class="tablesorter-next" /> <img class="tablesorter-last" /> <select class="pagesize">
+							<option selected="selected" value="10">10</option>
+							<option value="20">20</option>
+							<option value="30">30</option>
+							<option value="40">40</option>
+							<option value="50">50</option>
+							<option value="100">100</option>
+						</select>
+					</form>
+				</div>
+
 			</c:forEach>
-		</c:if>	
-			
+		</c:if>
+
+		<!-- End of others questions -->
+
+		<!-- buttons -->
 		<html:form action="/learning?validate=false" enctype="multipart/form-data" method="POST" target="_self">
-			<html:hidden property="toolSessionID" styleId="toolSessionID"/>
-			<html:hidden property="userID" styleId="userID"/>
+			<html:hidden property="toolSessionID" styleId="toolSessionID" />
+			<html:hidden property="userID" styleId="userID" />
 			<html:hidden property="httpSessionID" />
 			<html:hidden property="totalQuestionCount" />
-				
+
 			<c:choose>
 				<c:when test="${generalLearnerFlowDTO.requestLearningReportProgress != 'true'}">
 					<c:choose>
 						<c:when test="${(generalLearnerFlowDTO.reflection != 'true') || !hasEditRight}">
-							<html:hidden property="method" value="endLearning"/>
+							<html:hidden property="method" value="endLearning" />
 						</c:when>
 						<c:otherwise>
-							<html:hidden property="method" value="forwardtoReflection"/>
+							<html:hidden property="method" value="forwardtoReflection" />
 						</c:otherwise>
-					</c:choose>	
+					</c:choose>
 				</c:when>
-					
+
 				<c:otherwise>
 					<html:hidden property="method" />
 				</c:otherwise>
-			</c:choose>	
-				
+			</c:choose>
+
 			<c:if test="${generalLearnerFlowDTO.requestLearningReportViewOnly != 'true' }">
 				<c:if test="${generalLearnerFlowDTO.teacherViewOnly != 'true' }">
 
-					<html:button property="refreshAnswers" styleClass="button" onclick="submitMethod('refreshAllResults');">
+					<html:button property="refreshAnswers" styleClass="btn btn-default voffset5 roffset5 pull-left"
+						onclick="submitMethod('refreshAllResults');">
 						<fmt:message key="label.refresh" />
 					</html:button>
 
 					<c:if test="${(generalLearnerFlowDTO.lockWhenFinished != 'true') && hasEditRight}">
-						<html:button property="redoQuestions" styleClass="button" onclick="submitMethod('redoQuestions');">
+						<html:button property="redoQuestions" styleClass="btn btn-primary voffset5  pull-left"
+							onclick="submitMethod('redoQuestions');">
 							<fmt:message key="label.redo" />
 						</html:button>
-					</c:if>	
-						
-					<div class="space-bottom-top" align="right" id="learner-submit">
+					</c:if>
+
+					<div class="right-buttons voffset5" align="right" id="learner-submit">
 						<c:if test="${(generalLearnerFlowDTO.reflection != 'true') || !hasEditRight}">
 							<html:link href="#nogo" property="endLearning" styleId="finishButton"
-								onclick="javascript:submitMethod('endLearning'); return false;"
-								styleClass="button">
-								<span class="nextActivity">
+								onclick="javascript:submitMethod('endLearning'); return false;" styleClass="btn btn-primary pull-right">
+								<div class="na">
 									<c:choose>
-					 					<c:when test="${sessionMap.activityPosition.last}">
-					 						<fmt:message key="button.submit" />
-					 					</c:when>
-					 					<c:otherwise>
-					 		 				<fmt:message key="button.endLearning" />
-					 					</c:otherwise>
-					 				</c:choose>
-					 			</span>
+										<c:when test="${sessionMap.activityPosition.last}">
+											<fmt:message key="button.submit" />
+										</c:when>
+										<c:otherwise>
+											<fmt:message key="button.endLearning" />
+										</c:otherwise>
+									</c:choose>
+								</div>
 							</html:link>
 						</c:if>
 
 						<c:if test="${(generalLearnerFlowDTO.reflection == 'true') && hasEditRight}">
-							<html:button property="forwardtoReflection"
-								onclick="javascript:submitMethod('forwardtoReflection');"
-								styleClass="button">
+							<html:button property="forwardtoReflection" onclick="javascript:submitMethod('forwardtoReflection');"
+								styleClass="btn btn-primary">
 								<fmt:message key="label.continue" />
 							</html:button>
 						</c:if>
 					</div>
 				</c:if>
 			</c:if>
-		
+
 		</html:form>
-	
-	</div>
-	<div id="footer"></div>
+		<!-- End buttons -->
+
+
+		<div id="footer"></div>
+
+		
+
+	</lams:Page>
+
 </body>
 </lams:html>
Index: lams_tool_laqa/web/learning/Notebook.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -r099554309e1f77769667c041fb6d0fa91a89ea03
--- lams_tool_laqa/web/learning/Notebook.jsp	(.../Notebook.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_laqa/web/learning/Notebook.jsp	(.../Notebook.jsp)	(revision 099554309e1f77769667c041fb6d0fa91a89ea03)
@@ -1,14 +1,5 @@
 <!DOCTYPE html>
-
 <%@ include file="/common/taglibs.jsp"%>
-
-<c:set var="lams">
-	<lams:LAMSURL />
-</c:set>
-<c:set var="tool">
-	<lams:WebAppURL />
-</c:set>
-
 <lams:html>
 <lams:head>
 	<html:base />
@@ -32,29 +23,27 @@
 </lams:head>
 
 <body class="stripes">
+
+<lams:Page type="learner" title="${generalLearnerFlowDTO.activityTitle}">
+
 	<html:form action="/learning?validate=false" styleId="reflectionForm">
 		<html:hidden property="method" value="submitReflection"/>
 		<html:hidden property="toolSessionID" />
 		<html:hidden property="userID" />
 		<html:hidden property="httpSessionID" />
 		<html:hidden property="totalQuestionCount" />
 
-		<div id="content">
 
-			<h1>
-				<lams:out value="${generalLearnerFlowDTO.activityTitle}" escapeHtml="true" />
-			</h1>
-
 			<p>
 				<lams:out value="${generalLearnerFlowDTO.reflectionSubject}" escapeHtml="true" />
 			</p>
 
-			<html:textarea cols="60" rows="8" property="entryText" styleClass="text-area"></html:textarea>
+			<html:textarea styleId="focused" rows="5" property="entryText" styleClass="form-control"></html:textarea>
 
-			<div class="space-bottom-top align-right">
+			
 				<html:link href="#nogo" property="submitReflection" styleId="finishButton"
-					onclick="javascript:submitMethod('submitReflection');return false" styleClass="button">
-					<span class="nextActivity">					
+					onclick="javascript:submitMethod('submitReflection');return false" styleClass="btn btn-primary voffset5 pull-right">
+					<div class="na">					
 						<c:choose>
 		 					<c:when test="${sessionMap.activityPosition.last}">
 		 						<fmt:message key="button.submit" />
@@ -63,13 +52,20 @@
 		 		 				<fmt:message key="button.endLearning" />
 		 					</c:otherwise>
 		 				</c:choose>
-		 			</span>
+		 			</div>
 				</html:link>
-			</div>
+		
 		</div>
 	</html:form>
 
 	<div id="footer"></div>
+</lams:Page>
 
+<script type="text/javascript">
+	window.onload = function() {
+		document.getElementById("focused").focus();
+	}
+</script>
+
 </body>
 </lams:html>
Index: lams_tool_laqa/web/learning/RevisitedLearnerRep.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -r099554309e1f77769667c041fb6d0fa91a89ea03
--- lams_tool_laqa/web/learning/RevisitedLearnerRep.jsp	(.../RevisitedLearnerRep.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_laqa/web/learning/RevisitedLearnerRep.jsp	(.../RevisitedLearnerRep.jsp)	(revision 099554309e1f77769667c041fb6d0fa91a89ea03)
@@ -1,32 +1,27 @@
 <!DOCTYPE html>
-
 <%@ include file="/common/taglibs.jsp"%>
 
 <c:set var="lams">
 	<lams:LAMSURL />
 </c:set>
-<c:set var="tool">
-	<lams:WebAppURL />
-</c:set>
 <c:set var="sessionMap" value="${sessionScope[generalLearnerFlowDTO.httpSessionID]}" />
 <c:set var="isUserLeader" value="${sessionMap.isUserLeader}" />
 <c:set var="mode" value="${sessionMap.mode}" />
 <c:set var="qaContent" value="${sessionMap.content}" />
 <c:set var="isLeadershipEnabled" value="${qaContent.useSelectLeaderToolOuput}" />
 <c:set var="isCommentsEnabled" value="${sessionMap.isCommentsEnabled}" />
 <c:set var="hasEditRight" value="${!isLeadershipEnabled || isLeadershipEnabled && isUserLeader}" />
-
 <lams:html>
 <lams:head>
 	<html:base />
 	<title><fmt:message key="activity.title" /></title>
-	
-	<lams:css />
-	<link rel="stylesheet" href="${lams}css/jquery.jRating.css"/>
+	<link rel="stylesheet" href="${lams}css/jquery.jRating.css" />
 	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.theme-blue.css">
 	<link rel="stylesheet" href="${lams}css/jquery.tablesorter.pager.css">
 	<link rel="stylesheet" href="<html:rewrite page='/includes/qalearning.css'/>">
+	<lams:css />
 
+	<script src="${lams}includes/javascript/jquery.timeago.js" type="text/javascript"></script>
 	<script type="text/javascript">
 		//var for jquery.jRating.js
 		var pathToImageFolder = "${lams}images/css/";
@@ -45,8 +40,9 @@
 	<script src="${lams}includes/javascript/jquery.jRating.js" type="text/javascript"></script>
 	<script src="${lams}includes/javascript/jquery.tablesorter.js" type="text/javascript"></script>
 	<script src="${lams}includes/javascript/jquery.tablesorter-pager.js" type="text/javascript"></script>
+	<script src="${lams}includes/javascript/jquery.timeago.js" type="text/javascript"></script>
 	<script src="${lams}includes/javascript/common.js" type="text/javascript"></script>
-	<script src="${lams}includes/javascript/rating.js" type="text/javascript" ></script> 
+	<script src="${lams}includes/javascript/rating.js" type="text/javascript"></script>
 	<script type="text/javascript">
 	
 		var AVG_RATING_LABEL = '<fmt:message key="label.average.rating"><fmt:param>@1@</fmt:param><fmt:param>@2@</fmt:param></fmt:message>',
@@ -55,6 +51,8 @@
 	
 	  	$(document).ready(function(){
 	  		
+	  		jQuery("time.timeago").timeago();
+	  		
 			$(".tablesorter").tablesorter({
 				theme: 'blue',
 			    widthFixed: true,
@@ -94,10 +92,10 @@
 								rows += '<td>';
 								
 								if (${generalLearnerFlowDTO.userNameVisible == 'true'}) {
-									rows += '<div>';
-									rows += 	'<span class="field-name">';
+									rows += '<div class="sbox-heading bg-warning">';
+									rows += 	'<div class="user">';
 									rows += 		userData["userName"];
-									rows += 	'</span> ';
+									rows += 	'</div> - ';
 									rows += 	userData["attemptTime"];
 									rows += '</div>';
 								}
@@ -142,9 +140,9 @@
 											var averageRatingDisplayed = (isItemAuthoredByUser || !isCriteriaNotRatedByUser) ? averageRating : 0;
 											var ratingStarsClass = (IS_DISABLED ||isItemAuthoredByUser || (MAX_RATES > 0) && (countRatedItems >= MAX_RATES) && ! hasStartedRating || !isCriteriaNotRatedByUser) ? "rating-stars-disabled" : "rating-stars";
 								
-											rows += '<h4>';
+											rows += '<strong>';
 											rows += 	 criteriaDto.title;
-											rows += '</h4>';
+											rows += '</strong>';
 											
 											rows += '<div class="'+ ratingStarsClass +' rating-stars-new" data-average="'+ averageRatingDisplayed +'" data-id="'+ objectId +'">';
 											rows += '</div>';
@@ -256,212 +254,243 @@
 
 <body class="stripes">
 
-	<div id="content">
-		<h1>
-			<c:out value="${generalLearnerFlowDTO.activityTitle}" escapeXml="true" />
-		</h1>
-		
+	<lams:Page type="learner" title="${generalLearnerFlowDTO.activityTitle}">
+
+		<!--  Announcements -->
 		<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="submission-deadline" 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>
 			</div>
 		</c:if>
-		
+
 		<!-- Rating limits info -->
 		<c:if test="${qaContent.allowRateAnswers && (qaContent.minimumRates ne 0 || qaContent.maximumRates ne 0)}">
-		
-			<div class="info">
+
+			<lams:Alert id="ratings-info" type="info" close="true">
 				<c:choose>
 					<c:when test="${qaContent.minimumRates ne 0 and qaContent.maximumRates ne 0}">
 						<fmt:message key="label.rate.limits.reminder">
-							<fmt:param value="${qaContent.minimumRates}"/>
-							<fmt:param value="${qaContent.maximumRates}"/>
+							<fmt:param value="${qaContent.minimumRates}" />
+							<fmt:param value="${qaContent.maximumRates}" />
 						</fmt:message>
 					</c:when>
-					
+
 					<c:when test="${qaContent.minimumRates ne 0 and qaContent.maximumRates eq 0}">
 						<fmt:message key="label.rate.limits.reminder.min">
-							<fmt:param value="${qaContent.minimumRates}"/>
+							<fmt:param value="${qaContent.minimumRates}" />
 						</fmt:message>
 					</c:when>
-					
+
 					<c:when test="${qaContent.minimumRates eq 0 and qaContent.maximumRates ne 0}">
 						<fmt:message key="label.rate.limits.reminder.max">
-							<fmt:param value="${qaContent.maximumRates}"/>
+							<fmt:param value="${qaContent.maximumRates}" />
 						</fmt:message>
 					</c:when>
 				</c:choose>
 				<br>
-						
+
 				<fmt:message key="label.rate.limits.topic.reminder">
-					<fmt:param value="<span id='count-rated-items'>${sessionMap.countRatedItems}</span>"/>
+					<fmt:param value="<span id='count-rated-items'>${sessionMap.countRatedItems}</span>" />
 				</fmt:message>
-			</div>
-			
+			</lams:Alert>
+
 		</c:if>
-		
+
 		<c:if test="${isLeadershipEnabled}">
-			<h4>
-				<fmt:message key="label.group.leader" >
+			<lams:Alert id="ratings-info" type="info" close="true">
+				<fmt:message key="label.group.leader">
 					<fmt:param>${sessionMap.groupLeader.fullname}</fmt:param>
 				</fmt:message>
-			</h4>
-		</c:if>		
 
-		<h2>
+			</lams:Alert>
+		</c:if>
+
+		<h4>
 			<fmt:message key="label.learnerReport" />
-		</h2>
+		</h4>
 
 		<c:forEach var="userResponse" items="${generalLearnerFlowDTO.userResponses}" varStatus="status">
-			<div class="shading-bg">
-			
-				<p>
-					<strong> <fmt:message key="label.question" /> ${status.count}: </strong>
-					<c:out value="${userResponse.qaQuestion.question}" escapeXml="false" />
-				</p>
-	
-				<p>
-					<span class="field-name"> 
-						<c:out value="${userResponse.qaQueUser.username}" /> 
-					</span> 
-					-
-					<lams:Date value="${userResponse.attemptTime}" />
-				</p>
-				<div class="user-answer">
-					<c:out value="${userResponse.answer}" escapeXml="false" />
+			<div class="row no-gutter">
+				<div class="col-xs-12">
+					<div class="panel panel-default">
+						<div class="panel-heading panel-title">
+							<fmt:message key="label.question" />
+							${status.count}:
+						</div>
+						<div class="panel-body">
+							<div class="panel">
+								<c:out value="${userResponse.qaQuestion.question}" escapeXml="false" />
+							</div>
+
+							<div class="row no-gutter">
+								<!-- split if ratings are on -->
+								<c:set var="splitRow" value="col-xs-12" />
+								<c:if test="${qaContent.allowRateAnswers}">
+									<c:set var="splitRow" value="col-xs-12 col-sm-9 col-md-9 col-lg-10" />
+								</c:if>
+								<div class="${splitRow}">
+									<div class="sbox">
+										<div class="sbox-heading bg-warning">
+											<div class="user">
+												<c:out value="${userResponse.qaQueUser.fullname}" />
+											</div>
+											-
+											<time class="timeago"
+												datetime="<fmt:formatDate value='${userResponse.attemptTime}' pattern="yyyy-MM-dd'T'HH:mm:ss.S'Z'"/>">
+												<lams:Date value="${userResponse.attemptTime}" />
+											</time>
+										</div>
+										<div class="sbox-body">
+											<c:out value="${userResponse.answer}" escapeXml="false" />
+										</div>
+									</div>
+								</div>
+
+
+								<%--Rating area---------------------------------------%>
+								<c:if test="${qaContent.allowRateAnswers}">
+									<div class="col-xs-12 col-sm-3 col-md-3 col-lg-2">
+										<h4 class="text-center">
+											<fmt:message key="label.learning.rating" />
+										</h4>
+										<lams:Rating itemRatingDto="${userResponse.itemRatingDto}" disabled="true" isItemAuthoredByUser="true"
+											maxRates="${qaContent.maximumRates}" />
+									</div>
+								</c:if>
+							</div>
+						</div>
+
+						<!--  end panel-body -->
+					</div>
 				</div>
-				
-				<%--Rating area---------------------------------------%>
-				<c:if test="${qaContent.allowRateAnswers}">
-					<lams:Rating itemRatingDto="${userResponse.itemRatingDto}" disabled="true" isItemAuthoredByUser="true"
-							maxRates="${qaContent.maximumRates}"/>
-					<br>
-				</c:if>
-				
 			</div>
 		</c:forEach>
-				
+
+
 		<c:if test="${generalLearnerFlowDTO.teacherViewOnly != 'true' }">
 			<c:if test="${(generalLearnerFlowDTO.lockWhenFinished != 'true') && hasEditRight}">
-				<br>
-				<html:button property="redoQuestions" styleClass="button" onclick="submitMethod('redoQuestions');">
+				<html:button property="redoQuestions" styleClass="btn btn-default pull-right voffset5"
+					onclick="submitMethod('redoQuestions');">
 					<fmt:message key="label.redo" />
 				</html:button>
-			</c:if>						
+			</c:if>
 		</c:if>
-				
-		<c:if test="${generalLearnerFlowDTO.existMultipleUserResponses == 'true'}">				
-			<h2>
+
+		<!-- Others questions -->
+
+		<c:if test="${generalLearnerFlowDTO.existMultipleUserResponses == 'true'}">
+			<h4>
 				<fmt:message key="label.other.answers" />
-			</h2>
-	
+			</h4>
+
 			<c:forEach var="question" items="${generalLearnerFlowDTO.questions}" varStatus="status">
-			
+
 				<p>
-					<strong> <fmt:message key="label.question" /> ${status.count}: </strong>
+					<strong> <fmt:message key="label.question" /> ${status.count}:
+					</strong>
 					<c:out value="${question.question}" escapeXml="false" />
 				</p>
-				
+
 				<c:if test="${isCommentsEnabled && sessionMap.commentsMinWordsLimit != 0}">
 					<div class="info rating-info">
 						<fmt:message key="label.comment.minimum.number.words">
 							<fmt:param>: ${sessionMap.commentsMinWordsLimit}</fmt:param>
 						</fmt:message>
 					</div>
 				</c:if>
-						
+
 				<table class="tablesorter" data-question-uid="${question.uid}">
 					<thead>
 						<tr>
-							<th title="<fmt:message key='label.sort.by.answer'/>" >
-								<fmt:message key="label.learning.answer" />
-							</th>
+							<th title="<fmt:message key='label.sort.by.answer'/>"><fmt:message key="label.learning.answer" /></th>
 							<c:if test="${generalLearnerFlowDTO.allowRateAnswers == 'true'}">
-								<th title="<fmt:message key='label.sort.by.rating'/>">
-									<fmt:message key="label.learning.rating" />
-								</th>
+								<th title="<fmt:message key='label.sort.by.rating'/>"><fmt:message key="label.learning.rating" /></th>
 							</c:if>
 							<c:if test="${isCommentsEnabled}">
-								<th>
-									<fmt:message key="label.comment" />
-								</th>
+								<th><fmt:message key="label.comment" /></th>
 							</c:if>
 						</tr>
 					</thead>
 					<tbody>
 					</tbody>
 				</table>
-				
+
 				<!-- pager -->
 				<div class="pager">
 					<form>
-					   	<img class="tablesorter-first"/>
-				    	<img class="tablesorter-prev"/>
-				    	<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
-				   		<img class="tablesorter-next"/>
-				    	<img class="tablesorter-last"/>
-				    	<select class="pagesize">
-				      		<option selected="selected" value="10">10</option>
-				      		<option value="20">20</option>
-				      		<option value="30">30</option>
-				      		<option value="40">40</option>
-				      		<option value="50">50</option>
-				      		<option value="100">100</option>
-				    	</select>
-				  </form>
+						<img class="tablesorter-first" /> <img class="tablesorter-prev" /> <span class="pagedisplay"></span>
+						<!-- this can be any element, including an input -->
+						<img class="tablesorter-next" /> <img class="tablesorter-last" /> <select class="pagesize">
+							<option selected="selected" value="10">10</option>
+							<option value="20">20</option>
+							<option value="30">30</option>
+							<option value="40">40</option>
+							<option value="50">50</option>
+							<option value="100">100</option>
+						</select>
+					</form>
 				</div>
-				
+
 			</c:forEach>
 		</c:if>
 
-		<c:if test="${generalLearnerFlowDTO.reflection == 'true' }">					
-			<h2><fmt:message key="label.reflection"/></h2>
-			<table class="alternative-color">
-			    <tr>
-				<td>
-				  <strong><lams:out value="${generalLearnerFlowDTO.reflectionSubject}" escapeHtml="true" /></strong>
-				</td>
-			    </tr>
-			    <tr>
-				<td>
-				  <lams:out value="${QaLearningForm.entryText}" escapeHtml="true" />
-				</td>
-			    </tr>
-			</table>
-			
-			<c:if test="${hasEditRight}">
-				<html:button property="forwardtoReflection" styleClass="button" onclick="submitMethod('forwardtoReflection');"> 
-					<fmt:message key="label.edit" />
-				</html:button>
-			</c:if>
-		</c:if>													
-				
-		<c:if test="${generalLearnerFlowDTO.teacherViewOnly != 'true' }">
-			<div class="space-bottom-top align-right">
-				<html:button property="endLearning" styleId="finishButton" onclick="javascript:submitMethod('endLearning');" styleClass="button">
-					<c:choose>
-	 					<c:when test="${sessionMap.activityPosition.last}">
-	 						<fmt:message key="button.submit" />
-	 					</c:when>
-	 					<c:otherwise>
-	 		 				<fmt:message key="button.endLearning" />
-	 					</c:otherwise>
-	 				</c:choose>
-				</html:button>
+		<c:if test="${generalLearnerFlowDTO.reflection == 'true' }">
+			<div class="row no-gutter">
+				<div class="col-xs-12">
+					<div class="panel panel-default">
+						<div class="panel-heading panel-title">
+							<fmt:message key="label.reflection" />
+						</div>
+						<div class="panel-body">
+							<div class="reflectionInstructions">
+								<lams:out value="${generalLearnerFlowDTO.reflectionSubject}" escapeHtml="true" />
+							</div>
+							<div class="panel">
+								<lams:out value="${QaLearningForm.entryText}" escapeHtml="true" />
+							</div>
+
+							<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>
+						</div>
+					</div>
+				</div>
 			</div>
 		</c:if>
-			
+
+
+		<c:if test="${generalLearnerFlowDTO.teacherViewOnly != 'true' }">
+			<html:button property="endLearning" styleId="finishButton" onclick="javascript:submitMethod('endLearning');"
+				styleClass="btn btn-primary pull-right na">
+				<c:choose>
+					<c:when test="${sessionMap.activityPosition.last}">
+						<fmt:message key="button.submit" />
+					</c:when>
+					<c:otherwise>
+						<fmt:message key="button.endLearning" />
+					</c:otherwise>
+				</c:choose>
+			</html:button>
+		</c:if>
+
 		<html:form action="/learning?validate=false" enctype="multipart/form-data" method="POST" target="_self">
 			<html:hidden property="method" />
-			<html:hidden property="toolSessionID" styleId="toolSessionID"/>
-			<html:hidden property="userID" styleId="userID"/>
+			<html:hidden property="toolSessionID" styleId="toolSessionID" />
+			<html:hidden property="userID" styleId="userID" />
 			<html:hidden property="httpSessionID" />
-			<html:hidden property="totalQuestionCount" />						
+			<html:hidden property="totalQuestionCount" />
 		</html:form>
-		
-	</div>
-	<div id="footer"></div>
+
+
+		<div id="footer"></div>
+	</lams:Page>
 </body>
 </lams:html>
Index: lams_tool_laqa/web/learning/SequentialAnswersContent.jsp
===================================================================
diff -u -r25a7a499068e69269ac293b43893da584f2c6dc0 -r099554309e1f77769667c041fb6d0fa91a89ea03
--- lams_tool_laqa/web/learning/SequentialAnswersContent.jsp	(.../SequentialAnswersContent.jsp)	(revision 25a7a499068e69269ac293b43893da584f2c6dc0)
+++ lams_tool_laqa/web/learning/SequentialAnswersContent.jsp	(.../SequentialAnswersContent.jsp)	(revision 099554309e1f77769667c041fb6d0fa91a89ea03)
@@ -5,111 +5,129 @@
 <%@ taglib uri="tags-fmt" prefix="fmt"%>
 <%@ taglib uri="tags-lams" prefix="lams"%>
 
-<c:set var="lams">
-	<lams:LAMSURL />
-</c:set>
-<c:set var="tool">
-	<lams:WebAppURL />
-</c:set>
-
 <!--question content goes here-->
+<c:forEach var="questionEntry" items="${generalLearnerFlowDTO.mapQuestionContentLearner}">
 
-<div class="shading-bg">
-	<c:forEach var="questionEntry" items="${generalLearnerFlowDTO.mapQuestionContentLearner}">
+	<c:if test="${questionEntry.key == generalLearnerFlowDTO.currentQuestionIndex}">
 
-		<c:if test="${questionEntry.key == generalLearnerFlowDTO.currentQuestionIndex}">
+		<div class="row no-gutter">
+			<div class="col-xs-12">
+				<div class="panel panel-default">
+					<div class="panel-heading">
+						<div class="panel-title">
+							<strong> <fmt:message key="label.question" /> <c:out value="${questionEntry.key}" />
+							</strong>
+						</div>
+					</div>
+					<div class="panel-body">
+						<div class="panel">
+							<c:out value="${questionEntry.value.question}" escapeXml="false" />
+						</div>
+						<div class="answer-req">
+							<fmt:message key="label.learning.yourAnswer" />
+							<c:if test="${questionEntry.value.required}">
+								<small><mark>
+										<fmt:message key="label.required" />
+									</mark></small>
+							</c:if>
+							<c:if test="${questionEntry.value.minWordsLimit != 0}">
+								<br />
+								<small><em>- <fmt:message key="label.minimum.number.words">
+											<fmt:param>&nbsp;${questionEntry.value.minWordsLimit}</fmt:param>
+										</fmt:message>
+								</em></small>
+							</c:if>
+						</div>
 
-			<p>
-				<strong>
-					<fmt:message key="label.question" /> 
-					<c:out value="${questionEntry.key}" />:
-				</strong>
-				<c:if test="${questionEntry.value.required}">
-					<fmt:message key="label.required" />
-				</c:if>
-				<c:if test="${questionEntry.value.minWordsLimit != 0}">
-					<fmt:message key="label.minimum.number.words" >
-						<fmt:param>&nbsp;${questionEntry.value.minWordsLimit}</fmt:param>
-					</fmt:message>
-				</c:if>
-			<br>
-				<c:out value="${questionEntry.value.question}" escapeXml="false" />
-			</p>
+						<div data-sequence-id="${questionEntry.key}" data-is-ckeditor="${generalLearnerFlowDTO.allowRichEditor}"
+							data-min-words-limit="${questionEntry.value.minWordsLimit}"
+							<c:if test="${questionEntry.value.minWordsLimit != 0}">class="min-words-limit-enabled"</c:if>>
+							<c:choose>
+								<c:when test="${generalLearnerFlowDTO.allowRichEditor}">
+									<lams:CKEditor id="answer" value="${generalLearnerFlowDTO.currentAnswer}"
+										contentFolderID="${sessionMap.learnerContentFolder}" toolbarSet="DefaultLearner">
+									</lams:CKEditor>
+								</c:when>
 
-			<p>
-				<strong><fmt:message key="label.answer" /> </strong>
-			</p>
+								<c:otherwise>
+									<lams:textarea name="answer" id="answer" rows="5" class="form-control">
+										<c:out value='${generalLearnerFlowDTO.currentAnswer}' escapeXml='false' />
+									</lams:textarea>
+								</c:otherwise>
+							</c:choose>
+						</div>
 
-			<div data-sequence-id="${questionEntry.key}" data-is-ckeditor="${generalLearnerFlowDTO.allowRichEditor}"
-				 data-min-words-limit="${questionEntry.value.minWordsLimit}"
-				<c:if test="${questionEntry.value.minWordsLimit != 0}">class="min-words-limit-enabled"</c:if>
-			>
-				<c:choose>
-					<c:when test="${generalLearnerFlowDTO.allowRichEditor}">
-						<lams:CKEditor id="answer" value="${generalLearnerFlowDTO.currentAnswer}"
-							contentFolderID="${sessionMap.learnerContentFolder}" toolbarSet="DefaultLearner">
-						</lams:CKEditor>
-					</c:when>
-		
-					<c:otherwise>
-						<lams:textarea  name="answer" id="answer" rows="5" cols="60" class="text-area" ><c:out value='${generalLearnerFlowDTO.currentAnswer}' escapeXml='false' /></lams:textarea>
-					</c:otherwise>
-				</c:choose>
-			</div>
-			
-			<html:hidden property="currentQuestionIndex"value="${questionEntry.key}" />
+						<html:hidden property="currentQuestionIndex" value="${questionEntry.key}" />
+	</c:if>
+</c:forEach>
 
-		</c:if>
-	</c:forEach>
-</div>
 
-<div class="space-bottom">
+<div class="">
 	<!--question content ends here-->
 	<c:choose>
-		<c:when test="${(generalLearnerFlowDTO.currentQuestionIndex == generalLearnerFlowDTO.totalQuestionCount) && 
+		<c:when
+			test="${(generalLearnerFlowDTO.currentQuestionIndex == generalLearnerFlowDTO.totalQuestionCount) && 
 				  				  (generalLearnerFlowDTO.totalQuestionCount != 1) }">
 
-			<html:button property="btnGetPrevious" onclick="javascript:submitMethod('getPreviousQuestion');" styleClass="button">
+			<button id="btnGetPrevious" onclick="javascript:submitMethod('getPreviousQuestion');"
+				class="btn btn-sm btn-default voffset10">
+				<i class="fa fa-arrow-left"></i>
 				<fmt:message key="button.getPreviousQuestion" />
-			</html:button>
+			</button>
 
-			<div align="right">
-				<html:button property="btnDone" onclick="javascript:submitMethod('submitAnswersContent');" styleClass="button">
+			<div align="right-buttons">
+				<button id="btnDone" onclick="javascript:submitMethod('submitAnswersContent');"
+					class="btn btn-primary voffset10 pull-right">
 					<fmt:message key="button.done" />
-				</html:button>
+				</button>
 			</div>
 
 		</c:when>
 
-		<c:when test="${(generalLearnerFlowDTO.currentQuestionIndex == generalLearnerFlowDTO.totalQuestionCount) && 
+		<c:when
+			test="${(generalLearnerFlowDTO.currentQuestionIndex == generalLearnerFlowDTO.totalQuestionCount) && 
 				  				  (generalLearnerFlowDTO.totalQuestionCount == 1) }">
-			<div align="right">
-				<html:button property="btnDone" onclick="javascript:submitMethod('submitAnswersContent');" styleClass="button">
+			<div align="right-buttons">
+				<button id="btnDone" onclick="javascript:submitMethod('submitAnswersContent');"
+					class="btn btn-primary pull-right voffset10">
 					<fmt:message key="button.done" />
-				</html:button>
+				</button>
 			</div>
 
 		</c:when>
 
-		<c:when test="${generalLearnerFlowDTO.currentQuestionIndex != generalLearnerFlowDTO.totalQuestionCount && 
+		<c:when
+			test="${generalLearnerFlowDTO.currentQuestionIndex != generalLearnerFlowDTO.totalQuestionCount && 
 				 				  generalLearnerFlowDTO.currentQuestionIndex > 1}">
 
-			<html:button property="btnGetPrevious" onclick="javascript:submitMethod('getPreviousQuestion');" styleClass="button">
+			<button id="btnGetPrevious" onclick="javascript:submitMethod('getPreviousQuestion');"
+				class="btn btn-sm btn-default voffset10">
+				<i class="fa fa-arrow-left"></i>&nbsp;
 				<fmt:message key="button.getPreviousQuestion" />
-			</html:button>
-			<html:button property="btnGetNext"
-				onclick="javascript:submitMethod('getNextQuestion');"
-				styleClass="button">
+			</button>
+			<button id="btnGetNext" onclick="javascript:submitMethod('getNextQuestion');"
+				class="btn btn-sm btn-default voffset10 pull-right">
 				<fmt:message key="button.getNextQuestion" />
-			</html:button>
+				&nbsp; <i class="fa fa-arrow-right"></i>
+			</button>
 
 		</c:when>
 
 		<c:otherwise>
-			<html:button property="btnGetNext" onclick="javascript:submitMethod('getNextQuestion');" styleClass="button">
+			<button id="btnGetNext" onclick="javascript:submitMethod('getNextQuestion');"
+				class="btn btn-sm btn-default voffset10 pull-right">
 				<fmt:message key="button.getNextQuestion" />
-			</html:button>
+				&nbsp; <i class="fa fa-arrow-right"></i>
+			</button>
 		</c:otherwise>
 	</c:choose>
 
 </div>
+<!-- End pane body -->
+
+
+<script type="text/javascript">
+	window.onload = function() {
+		document.getElementById("answer").focus();
+	}
+</script>
Index: lams_tool_laqa/web/learning/WaitForLeader.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -r099554309e1f77769667c041fb6d0fa91a89ea03
--- lams_tool_laqa/web/learning/WaitForLeader.jsp	(.../WaitForLeader.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_laqa/web/learning/WaitForLeader.jsp	(.../WaitForLeader.jsp)	(revision 099554309e1f77769667c041fb6d0fa91a89ea03)
@@ -1,56 +1,48 @@
 <!DOCTYPE html>
-
 <%@ include file="/common/taglibs.jsp"%>
 
 <lams:html>
 <lams:head>
 	<html:base />
 	<title><fmt:message key="activity.title" /></title>
-
 	<lams:css />
-
 	<script type="text/javascript">
 		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="${content.title}" escapeXml="true"/>
-		</h1>
-		
-		<h2>
+	<lams:Page type="learner" title="${content.title}">
+
+		<h4>
 			<fmt:message key="label.waiting.for.leader" />
-		</h2>
+		</h4>
 
 		<div>
 			<fmt:message key="label.users.from.group" />
 		</div>
-		
-		<div>
+
+		<ul>
 			<c:forEach var="user" items="${groupUsers}" varStatus="status">
-				<div>
-					<c:out value="${user.fullname}" escapeXml="true"/>
-				</div>
+				<li><span class="user"> <c:out value="${user.fullname}" escapeXml="true" />
+				</span></li>
 			</c:forEach>
-		</div>
-		
-		<div class="space-bottom-top align-right">
-			<html:button property="refreshButton" onclick="refresh();" styleClass="button">
+		</ul>
+
+		<div class="right-buttons">
+			<html:button property="refreshButton" onclick="refresh();" styleClass="btn btn-default voffset5">
 				<fmt:message key="label.refresh" />
 			</html:button>
 		</div>
 
-	</div>
 
-	<div id="footer">
-	</div>
+		<div id="footer">
+	</lams:Page>
 
 </body>
 </lams:html>
Index: lams_tool_laqa/web/learning/defineLater.jsp
===================================================================
diff -u -r1a02559e19419af9991eaeb9363f809355b39bc7 -r099554309e1f77769667c041fb6d0fa91a89ea03
--- lams_tool_laqa/web/learning/defineLater.jsp	(.../defineLater.jsp)	(revision 1a02559e19419af9991eaeb9363f809355b39bc7)
+++ lams_tool_laqa/web/learning/defineLater.jsp	(.../defineLater.jsp)	(revision 099554309e1f77769667c041fb6d0fa91a89ea03)
@@ -1,35 +1,22 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
-        "http://www.w3.org/TR/html4/strict.dtd">
-
+<!DOCTYPE html>
 <%@ include file="/common/taglibs.jsp"%>
-
-<c:set scope="request" var="lams">
-	<lams:LAMSURL />
-</c:set>
-<c:set scope="request" var="tool">
-	<lams:WebAppURL />
-</c:set>
-
 <lams:html>
 <lams:head>
 	<html:base />
 	<lams:css />
-	<title><fmt:message key="activity.title" />
-	</title>
+	<title><fmt:message key="activity.title" /></title>
 </lams:head>
-
 <body class="stripes">
+	<c:set scope="request" var="title">
+		<fmt:message key="activity.title" />
+	</c:set>
 
-	<div id="content">
+	<lams:Page type="learner" title="${title}">
+
 		<lams:DefineLater defineLaterMessageKey="error.defineLater" />
-	</div>
 
 	<div id="footer"></div>
-
+	</lams:Page>
+	
 </body>
-</lams:html>
-
-
-
-
-
+</lams:html>
\ No newline at end of file
Index: lams_tool_laqa/web/learning/submissionDeadline.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -r099554309e1f77769667c041fb6d0fa91a89ea03
--- lams_tool_laqa/web/learning/submissionDeadline.jsp	(.../submissionDeadline.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_laqa/web/learning/submissionDeadline.jsp	(.../submissionDeadline.jsp)	(revision 099554309e1f77769667c041fb6d0fa91a89ea03)
@@ -1,89 +1,82 @@
 <!DOCTYPE html>
-
 <%@ include file="/common/taglibs.jsp"%>
 <c:set var="sessionMap" value="${sessionScope[generalLearnerFlowDTO.httpSessionID]}" />
-
 <c:set var="lams">
 	<lams:LAMSURL />
 </c:set>
-<c:set var="tool">
-	<lams:WebAppURL />
-</c:set>
-
 <lams:html>
 <lams:head>
 	<html:base />
 	<lams:css />
-	<title><fmt:message key="activity.title" />
-	</title>
 
+	<title><fmt:message key="activity.title" /></title>
+
 	<script language="JavaScript" type="text/JavaScript">
 		function submitLearningMethod(actionMethod) {
 			if (actionMethod == 'endLearning') {
 				document.getElementById("finishButton").disabled = true;
 			}
-			document.QaLearningForm.method.value=actionMethod; 
+			document.QaLearningForm.method.value = actionMethod;
 			document.QaLearningForm.submit();
 		}
-		
+
 		function submitMethod(actionMethod) {
 			submitLearningMethod(actionMethod);
 		}
 	</script>
 </lams:head>
 
 <body class="stripes">
+	<c:set scope="request" var="title">
+		<fmt:message key="activity.title" />
+	</c:set>
 
-	<html:form action="/learning?validate=false"
-		method="POST" styleId="form">
-		<html:hidden property="method" />
-		<html:hidden property="toolSessionID" />
-		<html:hidden property="userID" />
-		<html:hidden property="httpSessionID" />
-		<html:hidden property="totalQuestionCount" />
+	<lams:Page type="learner" title="${generalLearnerFlowDTO.activityTitle}">
 
-		<div id="content">
+		<html:form action="/learning?validate=false" method="POST" styleId="form">
+			<html:hidden property="method" />
+			<html:hidden property="toolSessionID" />
+			<html:hidden property="userID" />
+			<html:hidden property="httpSessionID" />
+			<html:hidden property="totalQuestionCount" />
 
-			<h1>
-				<fmt:message key="activity.title" />
-			</h1>
-			
-			<div class="warning">
-				<fmt:message key="authoring.info.teacher.set.restriction" >
-					<fmt:param><lams:Date value="${sessionMap.submissionDeadline}" /></fmt:param>
+
+			<lams:Alert type="danger" id="submission-deadline" close="false">
+				<fmt:message key="authoring.info.teacher.set.restriction">
+					<fmt:param>
+						<lams:Date value="${sessionMap.submissionDeadline}" />
+					</fmt:param>
 				</fmt:message>
-			</div>
+			</lams:Alert>
 
-			<div class="space-bottom-top align-right">
+			<div class="right-buttons">
 
 				<c:if test="${generalLearnerFlowDTO.reflection != 'true'}">
 					<html:link href="#nogo" property="endLearning" styleId="finishButton"
-						onclick="javascript:submitMethod('endLearning');return false"
-						styleClass="button">
-						<span class="nextActivity">
-							<c:choose>
-			 					<c:when test="${sessionMap.activityPosition.last}">
-			 						<fmt:message key="button.submit" />
-			 					</c:when>
-			 					<c:otherwise>
-			 		 				<fmt:message key="button.endLearning" />
-			 					</c:otherwise>
-			 				</c:choose>
-			 			</span>
+						onclick="javascript:submitMethod('endLearning');return false" styleClass="btn btn-primary pull-right">
+						<span class="na"> <c:choose>
+								<c:when test="${sessionMap.activityPosition.last}">
+									<fmt:message key="button.submit" />
+								</c:when>
+								<c:otherwise>
+									<fmt:message key="button.endLearning" />
+								</c:otherwise>
+							</c:choose>
+						</span>
 					</html:link>
 				</c:if>
 
 				<c:if test="${generalLearnerFlowDTO.reflection == 'true'}">
-					<html:button property="forwardtoReflection"
-						onclick="javascript:submitMethod('forwardtoReflection');"
-						styleClass="button">
+					<html:button property="forwardtoReflection" onclick="javascript:submitMethod('forwardtoReflection');"
+						styleClass="btn btn-primary pull-right">
 						<fmt:message key="label.continue" />
 					</html:button>
 				</c:if>
 
 			</div>
-		</div>
-	</html:form>
-	<div id="footer"></div>
+		</html:form>
+
+		<div id="footer"></div>
+	</lams:Page>
 </body>
 </lams:html>