Index: lams_tool_pixlr/web/WEB-INF/tags/Alert.tag
===================================================================
diff -u
--- lams_tool_pixlr/web/WEB-INF/tags/Alert.tag	(revision 0)
+++ lams_tool_pixlr/web/WEB-INF/tags/Alert.tag	(revision 47cbd6e6676ba330de8e1256da0ae1f840c11d25)
@@ -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_pixlr/web/WEB-INF/tags/AuthoringRatingCriteria.tag
===================================================================
diff -u
--- lams_tool_pixlr/web/WEB-INF/tags/AuthoringRatingCriteria.tag	(revision 0)
+++ lams_tool_pixlr/web/WEB-INF/tags/AuthoringRatingCriteria.tag	(revision 47cbd6e6676ba330de8e1256da0ae1f840c11d25)
@@ -0,0 +1,352 @@
+<% 
+ /**
+  * AuthoringRatingCriteria.tag
+  *	Author: Andrey Balan
+  *	Description: Creates list of rating criterias for authoring page
+  */
+ %>
+<%@ tag body-content="scriptless" %>
+<%@ taglib uri="tags-core" prefix="c" %>
+<%@ taglib uri="tags-fmt" prefix="fmt" %>
+<%@ taglib uri="tags-html" prefix="html" %>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+<c:set var="lams"><lams:LAMSURL/></c:set>
+
+<%@ attribute name="criterias" required="true" rtexprvalue="true" type="java.util.Collection" %>
+
+<%-- Optional attribute --%>
+<%@ attribute name="hasRatingLimits" required="false" rtexprvalue="true" %>
+<%@ attribute name="formContentPrefix" required="false" rtexprvalue="true" %>
+<%@ attribute name="headerLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="addLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="deleteLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="upLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="downLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="minimumLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="maximumLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="noMinimumLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="noMaximumLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="jsWarningLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="allowCommentsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+
+<%-- Default value for message key --%>
+<c:if test="${empty hasRatingLimits}">
+	<c:set var="hasRatingLimits" value="false" scope="request"/>
+</c:if>
+<c:if test="${not empty formContentPrefix}">
+	<c:set var="formContentPrefix" value="${formContentPrefix}."/>
+</c:if>
+<c:if test="${empty headerLabel}">
+	<c:set var="headerLabel" value="label.rating.criterias" scope="request"/>
+</c:if>
+<c:if test="${empty addLabel}">
+	<c:set var="addLabel" value="label.add.criteria" scope="request"/>
+</c:if>
+<c:if test="${empty deleteLabel}">
+	<c:set var="deleteLabel" value="label.delete" scope="request"/>
+</c:if>
+<c:if test="${empty upLabel}">
+	<c:set var="upLabel" value="label.move.up" scope="request"/>
+</c:if>
+<c:if test="${empty downLabel}">
+	<c:set var="downLabel" value="label.move.down" scope="request"/>
+</c:if>
+<c:if test="${empty minimumLabel}">
+	<c:set var="minimumLabel" value="label.minimum" scope="request"/>
+</c:if>
+<c:if test="${empty maximumLabel}">
+	<c:set var="maximumLabel" value="label.maximum" scope="request"/>
+</c:if>
+<c:if test="${empty noMinimumLabel}">
+	<c:set var="noMinimumLabel" value="label.no.minimum" scope="request"/>
+</c:if>
+<c:if test="${empty noMaximumLabel}">
+	<c:set var="noMaximumLabel" value="label.no.maximum" scope="request"/>
+</c:if>
+<c:if test="${empty jsWarningLabel}">
+	<c:set var="jsWarningLabel" value="js.warning.max.min.limit" scope="request"/>
+</c:if>
+<c:if test="${empty allowCommentsLabel}">
+	<c:set var="allowCommentsLabel" value="label.allow.comments" scope="request"/>
+</c:if>
+<c:if test="${empty minNumberWordsLabel}">
+	<c:set var="minNumberWordsLabel" value="label.minimum.number.words" scope="request"/>
+</c:if>
+
+<!-- calculate whether isCommentsAllowed is true -->
+<c:set var="isCommentsEnabled" value="false"/>
+<c:set var="commentsMinWordsLimit" value="0"/>
+<c:forEach var="criteria" items="${criterias}" varStatus="status">
+	<c:if test="${criteria.commentsEnabled}">
+		<c:set var="isCommentsEnabled" value="true"/>
+		<c:set var="commentsMinWordsLimit" value="${criteria.commentsMinWordsLimit}"/>
+	</c:if>
+</c:forEach>
+
+<!-- begin tab content -->
+<script type="text/javascript">
+$(document).ready(function() { 
+	
+	// find max orderId
+	<c:set var="maxOrderId" value="0"/>
+	<c:forEach var="criteria" items="${criterias}" varStatus="status">
+		<c:if test="${criteria.orderId > maxOrderId}">
+			<c:set var="maxOrderId" value="${criteria.orderId}"/>
+		</c:if>
+	</c:forEach>
+	var maxOrderId = ${maxOrderId};
+	
+	function addCriteria() {
+		//increase maxOrderId by 1
+		maxOrderId++;
+		$("#criteria-max-order-id").val(maxOrderId);
+		
+		jQuery('<tr/>').append(jQuery('<td/>', {
+			'class': 'criteria-info',
+		    html: '<input type="hidden" name="criteriaOrderId' + maxOrderId + '" value="' + maxOrderId + '">' + 
+		    		'<input type="text" name="criteriaTitle' + maxOrderId + '" value="">'
+		    		
+		})).append(jQuery('<td/>', {
+			width: '40px',
+			html: '<div class="up-arrow" title="<fmt:message key="${upLabel}"/>" />' + 
+		    		'<div class="down-arrow-disabled" title="<fmt:message key="${downLabel}"/>" />'
+		    		
+		})).append(jQuery('<td/>', {
+			width: '20px',
+			html: '<div class="delete-arrow" title="<fmt:message key="${deleteLabel}"/>" />'
+		})).appendTo('#criterias-table');
+		
+		reactivateArrows();
+	}
+	<c:if test="${empty criterias}">
+		addCriteria(); 
+		addCriteria();
+	</c:if>
+	
+	function reactivateArrows() {
+		$('#criterias-table tr').each(function() {
+
+		    $this = $(this); // cache $(this)
+		    
+		    if ($this.is(':first-child')) {
+		    	$(".up-arrow", $this).addClass("up-arrow-disabled").removeClass("up-arrow");
+		        
+		    } else {
+		    	$(".up-arrow-disabled", $this).addClass("up-arrow").removeClass("up-arrow-disabled");
+		    }
+		    
+		    if ($this.is(':last-child')) {
+		    	$(".down-arrow", $this).addClass("down-arrow-disabled").removeClass("down-arrow");
+		    	
+		    } else {
+		    	$(".down-arrow-disabled", $this).addClass("down-arrow").removeClass("down-arrow-disabled");
+		    }
+		});
+	}
+	
+	//upCriteria
+	 $( "body" ).on( "click", ".up-arrow", function() {
+		var currentRow = $(this).closest('tr');
+		var currentCriteriaTd = $( ".criteria-info", currentRow);
+		var currentOrderId = $( "input[name^='criteriaOrderId']", currentCriteriaTd);
+		//var textEl1 = $( "input[id^='criteria-title-']", currentRow);
+		var prevRow = currentRow.prev();
+		var prevCriteriaTd = $( ".criteria-info", prevRow);
+		var prevOrderId = $( "input[name^='criteriaOrderId']", prevCriteriaTd);
+		//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+		
+		//swap orderIds
+		var temp = currentOrderId.val();
+		currentOrderId.val(prevOrderId.val());
+		prevOrderId.val(temp);
+		
+		//swap elements
+		currentCriteriaTd.detach().prependTo(prevRow);
+		prevCriteriaTd.detach().prependTo(currentRow);
+		
+		reactivateArrows();
+	 } );
+	 
+	//downCriteria
+	 $( "body" ).on( "click", ".down-arrow", function() {
+		var currentRow = $(this).closest('tr');
+		var currentCriteriaTd = $( ".criteria-info", currentRow);
+		var currentOrderId = $( "input[name^='criteriaOrderId']", currentCriteriaTd);
+		//var textEl1 = $( "input[id^='criteria-title-']", currentRow);
+		var nextRow = currentRow.next();
+		var nextCriteriaTd = $( ".criteria-info", nextRow);
+		var nextOrderId = $( "input[name^='criteriaOrderId']", nextCriteriaTd);
+		//var textEl2 = $( "input[id^='criteria-title-']", currentRow);
+		
+		//swap orderIds
+		var temp = currentOrderId.val();
+		currentOrderId.val(nextOrderId.val());
+		nextOrderId.val(temp);
+		
+		//swap elements
+		currentCriteriaTd.detach().prependTo(nextRow);
+		nextCriteriaTd.detach().prependTo(currentRow);
+		
+		reactivateArrows();
+	 });
+	 
+	 //deleteCriteria
+	 $( "body" ).on( "click", ".delete-arrow", function() {
+		var currentRow = $(this).closest('tr');
+		currentRow.remove();
+		
+		reactivateArrows();
+	});
+	 
+	 //addCriteria
+	 $( "body" ).on( "click", "#add-criteria", function() {
+		 addCriteria();
+	});
+	 
+ 	//spinner
+ 	var minimumWordsSpinner = $("#comments-min-words-limit").spinner({ 
+ 		min: 0,
+ 		disabled: ${!isCommentsEnabled}
+ 	});
+ 	$("#enable-comments").click(function() {
+ 		if ( minimumWordsSpinner.spinner( "option", "disabled" ) ) {
+ 			minimumWordsSpinner.spinner( "enable" );
+ 			$("#comments-min-words-limit-label").removeClass("gray-color");
+ 		} else {
+ 			minimumWordsSpinner.spinner( "disable" );
+ 			$("#comments-min-words-limit-label").addClass("gray-color");
+ 		}
+     });
+	 
+})
+
+	//check minimum is not bigger than maximum
+	function validateRatingLimits(isMinimum) {
+		var minRateDropDown = document.getElementById("minimum-rates");
+		var minLimit = parseInt(minRateDropDown.options[minRateDropDown.selectedIndex].value);
+		var maxRateDropDown = document.getElementById("maximum-rates");
+		var maxLimit = parseInt(maxRateDropDown.options[maxRateDropDown.selectedIndex].value);
+
+		if ((minLimit > maxLimit) && !(maxLimit == 0)) {
+			if (isMinimum) {
+				minRateDropDown.selectedIndex = maxRateDropDown.selectedIndex;
+			} else {
+				maxRateDropDown.selectedIndex = minRateDropDown.selectedIndex;
+			}
+
+			alert('<fmt:message key="js.warning.max.min.limit"/>');
+		}
+	}
+</script>
+
+<div class="rating-criteria-tag">
+	<h2>
+		<fmt:message key="${headerLabel}" />
+	</h2>
+	<input type="hidden" name="criteriaMaxOrderId" id="criteria-max-order-id" value="${maxOrderId}">
+
+	<table class="alternative-color" cellspacing="0" id="criterias-table">
+
+		<c:forEach var="criteria" items="${criterias}" varStatus="status">
+			<c:if test="${!criteria.commentsEnabled}">
+				<tr>
+					
+					<td class="criteria-info">
+						<input type="hidden" name="criteriaOrderId${criteria.orderId}" value="${criteria.orderId}">
+						<input type="text" name="criteriaTitle${criteria.orderId}" value="${criteria.title}">
+					</td>
+					
+					<td width="40px">
+						<c:if test="${not status.first}">
+							<div class="up-arrow" title="<fmt:message key="${upLabel}"/>"></div>
+							<c:if test="${status.last}">
+								<div class="down-arrow-disabled" title="<fmt:message key="${downLabel}"/>"></div>
+							</c:if>
+						</c:if>
+	
+						<c:if test="${not status.last}">
+							<c:if test="${status.first}">
+								<div class="up-arrow-disabled" title="<fmt:message key="${upLabel}"/>"></div>
+							</c:if>
+	
+							<div class="down-arrow" title="<fmt:message key="${downLabel}"/>"></div>
+						</c:if>
+					</td>
+	                
+					<td width="20px">
+						<div class="delete-arrow" title="<fmt:message key="${deleteLabel}"/>" ></div>
+					</td>
+				</tr>
+			</c:if>
+		</c:forEach>
+	</table>
+	
+	<div style="height: 30px;">
+		<a href="#nogo" class="button-add-item float-right" id="add-criteria">
+			<fmt:message key="${addLabel}" /> 
+		</a>
+	</div>
+	
+	<c:if test="${hasRatingLimits}">
+		<div>
+			<fmt:message key="${minimumLabel}" />
+			<html:select property="${formContentPrefix}minimumRates" styleId="minimum-rates" onmouseup="validateRatingLimits(true);">
+				<html:option value="0">
+					<fmt:message key="${noMinimumLabel}" />
+				</html:option>
+				<html:option value="1">1</html:option>
+				<html:option value="2">2</html:option>
+				<html:option value="3">3</html:option>
+				<html:option value="4">4</html:option>
+				<html:option value="5">5</html:option>
+				<html:option value="6">6</html:option>
+				<html:option value="7">7</html:option>
+				<html:option value="8">8</html:option>
+				<html:option value="9">9</html:option>
+				<html:option value="10">10</html:option>
+			</html:select>
+		
+			<fmt:message key="${maximumLabel}" />
+			<html:select property="${formContentPrefix}maximumRates" styleId="maximum-rates" onmouseup="validateRatingLimits(false);">
+				<html:option value="0">
+					<fmt:message key="${noMaximumLabel}" />
+				</html:option>
+				<html:option value="1">1</html:option>
+				<html:option value="2">2</html:option>
+				<html:option value="3">3</html:option>
+				<html:option value="4">4</html:option>
+				<html:option value="5">5</html:option>
+				<html:option value="6">6</html:option>
+				<html:option value="7">7</html:option>
+				<html:option value="8">8</html:option>
+				<html:option value="9">9</html:option>
+				<html:option value="10">10</html:option>
+			</html:select>
+		</div>
+	</c:if>
+	
+	<div class="space-top">
+		<input type="checkbox" name="isCommentsEnabled" value="true" class="noBorder" id="enable-comments"
+			<c:if test="${isCommentsEnabled}">checked="checked"</c:if>
+		/>
+		<label for="enable-comments">
+			<fmt:message key="${allowCommentsLabel}" />
+		</label>
+		
+		<div class="small-space-top" >
+			<label for="comments-min-words-limit" id="comments-min-words-limit-label"
+				<c:if test="${!isCommentsEnabled}">class="gray-color"</c:if>
+			>
+				<fmt:message key="${minNumberWordsLabel}" >
+					<fmt:param> </fmt:param>
+				</fmt:message>
+			</label>
+			<input type="text" name="commentsMinWordsLimit" id="comments-min-words-limit" value="${commentsMinWordsLimit}"/>
+		</div>
+		
+	</div>
+	
+</div>
+<!-- end tab content -->
\ No newline at end of file
Index: lams_tool_pixlr/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -rb703d43cf69269e0afcc716321fd5ef42c249a43 -r47cbd6e6676ba330de8e1256da0ae1f840c11d25
--- lams_tool_pixlr/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision b703d43cf69269e0afcc716321fd5ef42c249a43)
+++ lams_tool_pixlr/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 47cbd6e6676ba330de8e1256da0ae1f840c11d25)
@@ -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_pixlr/web/WEB-INF/tags/Page.tag
===================================================================
diff -u
--- lams_tool_pixlr/web/WEB-INF/tags/Page.tag	(revision 0)
+++ lams_tool_pixlr/web/WEB-INF/tags/Page.tag	(revision 47cbd6e6676ba330de8e1256da0ae1f840c11d25)
@@ -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_pixlr/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u
--- lams_tool_pixlr/web/WEB-INF/tags/Rating.tag	(revision 0)
+++ lams_tool_pixlr/web/WEB-INF/tags/Rating.tag	(revision 47cbd6e6676ba330de8e1256da0ae1f840c11d25)
@@ -0,0 +1,194 @@
+<% 
+ /**
+  * Rating.tag
+  *	Author: Andrey Balan
+  *	Description: Shows rating stars widget
+  */
+ %>
+<%@ tag body-content="scriptless" %>
+<%@ taglib uri="tags-core" prefix="c" %>
+<%@ taglib uri="tags-fmt" prefix="fmt" %>
+<%@ taglib uri="tags-html" prefix="html" %>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+<c:set var="lams"><lams:LAMSURL/></c:set>
+
+<%@ attribute name="itemRatingDto" required="true" rtexprvalue="true" type="org.lamsfoundation.lams.rating.dto.ItemRatingDTO" %>
+
+<%-- Optional attribute --%>
+<%@ attribute name="disabled" required="false" rtexprvalue="true" %>
+<%@ attribute name="isItemAuthoredByUser" required="false" rtexprvalue="true" %>
+<%@ attribute name="maxRates" required="false" rtexprvalue="true" %>
+<%@ attribute name="countRatedItems" required="false" rtexprvalue="true" %>
+<%@ attribute name="yourRatingLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="averageRatingLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="minNumberWordsLabel" required="false" rtexprvalue="true" %>
+<%@ attribute name="showComments" required="false" rtexprvalue="true" %>
+
+<%-- Default value for message key --%>
+<c:if test="${empty disabled}">
+	<c:set var="disabled" value="false" scope="request"/>
+</c:if>
+<c:if test="${empty isItemAuthoredByUser}">
+	<c:set var="isItemAuthoredByUser" value="false" scope="request"/>
+</c:if>
+<c:if test="${empty maxRates}">
+	<c:set var="maxRates" value="0" scope="request"/>
+</c:if>
+<c:if test="${empty countRatedItems}">
+	<c:set var="countRatedItems" value="0" scope="request"/>
+</c:if>
+<c:if test="${empty yourRatingLabel}">
+	<c:set var="yourRatingLabel" value="label.your.rating" scope="request"/>
+</c:if>
+<c:if test="${empty averageRatingLabel}">
+	<c:set var="averageRatingLabel" value="label.average.rating" scope="request"/>
+</c:if>
+<c:if test="${empty minNumberWordsLabel}">
+	<c:set var="minNumberWordsLabel" value="label.comment.minimum.number.words" scope="request"/>
+</c:if>
+<c:if test="${empty showComments}">
+	<c:set var="showComments" value="true" scope="request"/>
+</c:if>
+<c:set var="isCommentsEnabled" value="${itemRatingDto.commentsEnabled && showComments}"/>
+
+<c:if test="${isCommentsEnabled}">
+	<c:set var="userId"><lams:user property="userID" /></c:set>
+	<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
+		<c:if test="${comment.userId == userId}">
+			<c:set var="commentLeftByUser" value="${comment}"/>
+		</c:if>
+	</c:forEach>
+</c:if>
+
+<%--Rating stars area---------------------------------------%>
+
+<div class="extra-controls-inner">
+<div class="rating-stars-holder text-center center-block">
+
+	<c:set var="hasStartedRating" value="false"/>
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}">
+		<c:set var="hasStartedRating" value='${hasStartedRating || criteriaDto.userRating != ""}'/>
+	</c:forEach>
+	<c:set var="hasStartedRating" value='${hasStartedRating || not empty commentLeftByUser}'/>
+	
+	<c:forEach var="criteriaDto" items="${itemRatingDto.criteriaDtos}" varStatus="status">
+		<c:set var="objectId" value="${criteriaDto.ratingCriteria.ratingCriteriaId}-${itemRatingDto.itemId}"/>
+		<c:set var="isCriteriaNotRatedByUser" value='${criteriaDto.userRating == ""}'/>
+	
+		<c:choose>
+			<c:when test='${disabled || isItemAuthoredByUser || (maxRates > 0) && (countRatedItems >= maxRates)  && !hasStartedRating || !isCriteriaNotRatedByUser}'>
+				<c:set var="ratingStarsClass" value="rating-stars-disabled"/>
+			</c:when>
+			<c:otherwise>
+				<c:set var="ratingStarsClass" value="rating-stars"/>
+			</c:otherwise>
+		</c:choose>
+			
+		<strong>
+			${criteriaDto.ratingCriteria.title}
+		</strong>
+			
+		<c:choose>
+			<c:when test='${isItemAuthoredByUser || not isCriteriaNotRatedByUser}'>
+				<c:set var="ratingDataAverage" value="${criteriaDto.averageRating}"/>
+			</c:when>
+			<c:otherwise>
+				<c:set var="ratingDataAverage" value="0"/>
+			</c:otherwise>
+		</c:choose>
+		
+		<div class="${ratingStarsClass} rating-stars-new" data-average="${ratingDataAverage}" data-id="${objectId}">
+		</div>
+			
+		<c:choose>
+			<c:when test="${isItemAuthoredByUser}">
+				<div class="rating-stars-caption">
+					<fmt:message key="${averageRatingLabel}" >
+						<fmt:param>
+							<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+						</fmt:param>
+						<fmt:param>
+							${criteriaDto.numberOfVotes}
+						</fmt:param>
+					</fmt:message>
+				</div>
+			</c:when>
+				
+			<c:otherwise>
+				<div class="rating-stars-caption" id="rating-stars-caption-${objectId}"
+					<c:if test="${isCriteriaNotRatedByUser}">style="visibility: hidden;"</c:if>
+				>
+					<fmt:message key="${yourRatingLabel}" >
+						<fmt:param>
+							<span id="user-rating-${objectId}">
+								<fmt:formatNumber value="${criteriaDto.userRating}" type="number" maxFractionDigits="1" />
+							</span>
+						</fmt:param>			
+						<fmt:param>
+							<span id="average-rating-${objectId}">
+								<fmt:formatNumber value="${criteriaDto.averageRating}" type="number" maxFractionDigits="1" />
+							</span>
+						</fmt:param>
+						<fmt:param>
+							<span id="number-of-votes-${objectId}">${criteriaDto.numberOfVotes}</span>
+						</fmt:param>
+					</fmt:message>
+				</div>
+				
+			</c:otherwise>
+		</c:choose>
+			
+	</c:forEach>
+
+</div>
+
+</div>
+
+<%--Comments area---------------------------------------%>
+<c:if test="${isCommentsEnabled}">
+	<div id="comments-area-${itemRatingDto.itemId}">
+	
+		<c:choose>
+			<c:when test='${isItemAuthoredByUser}'>
+				<c:forEach var="comment" items="${itemRatingDto.commentDtos}">
+					<div class="rating-comment">
+						<c:out value="${comment.comment}" escapeXml="false" />
+					</div>
+				</c:forEach>
+			</c:when>
+			
+			<c:when test='${not empty commentLeftByUser}'>
+				<div class="rating-comment">
+					<c:out value="${commentLeftByUser.comment}" escapeXml="false" />
+				</div>
+			</c:when>
+			
+			<c:when test='${not ( disabled || (maxRates > 0) && (countRatedItems >= maxRates) && !hasStartedRating )}'>
+				<div id="add-comment-area-${itemRatingDto.itemId}">
+			
+					<!-- Comment min words limit -->
+					<c:if test="${itemRatingDto.commentsMinWordsLimit ne 0}">
+					
+						<lams:Alert type="info" id="comment-limit-${itemRatingDto.itemId}" close="false">
+							<fmt:message key="${minNumberWordsLabel}">
+								: <fmt:param value="${itemRatingDto.commentsMinWordsLimit}"/>
+							</fmt:message>
+						</lams:Alert>
+					</c:if>		
+				
+					<div class="no-gutter">
+						<div class="col-xs-12 col-sm-11 ">
+						<textarea name="comment" rows="2" id="comment-textarea-${itemRatingDto.itemId}" onfocus="if(this.value==this.defaultValue)this.value='';" 
+								onblur="if(this.value=='')this.value=this.defaultValue;" 
+								class="form-control"><fmt:message key="label.comment.textarea.tip"/></textarea>
+						</div>
+						<div class="button add-comment add-comment-new col-xs-12 col-sm-1 " data-item-id="${itemRatingDto.itemId}" data-comment-criteria-id="${itemRatingDto.commentsCriteriaId}">
+						</div>
+					</div>		
+				</div>			
+			</c:when>
+		</c:choose>
+			
+	</div>	
+</c:if>
\ No newline at end of file
Index: lams_tool_pixlr/web/WEB-INF/tags/TSTable.tag
===================================================================
diff -u
--- lams_tool_pixlr/web/WEB-INF/tags/TSTable.tag	(revision 0)
+++ lams_tool_pixlr/web/WEB-INF/tags/TSTable.tag	(revision 47cbd6e6676ba330de8e1256da0ae1f840c11d25)
@@ -0,0 +1,53 @@
+<%-- Tablesorter Table and Pager --%>
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+
+<%@ attribute name="numColumns" required="true" rtexprvalue="true"%>
+<%@ attribute name="dataId" required="false" rtexprvalue="true"%>
+<%@ attribute name="tableClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="pagerClass" required="false" rtexprvalue="true"%>
+<%@ attribute name="test" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty tableClass}">
+	<c:set var="tableClass" value="tablesorter" />
+</c:if>
+
+<c:if test="${empty pagerClass}">
+	<c:set var="pagerClass" value="ts-pager" />
+</c:if>
+
+<c:if test="${empty dataId}">
+	<c:set var="dataId" value="" />
+</c:if>
+
+<table class="${tableClass}" ${dataId}>
+	<thead>
+		<tr>
+			<jsp:doBody />
+		</tr>
+	</thead>
+	<tfoot>
+		<tr>
+	    	<th colspan="${numColumns}" class="${pagerClass} form-horizontal">
+	        <button type="button" class="btn first"><i class="fa fa-step-backward"></i></button>
+	        <button type="button" class="btn prev"><i class="fa fa-backward"></i></button>
+	        <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
+	        <button type="button" class="btn next"><i class="fa fa-forward"></i></button>
+	        <button type="button" class="btn last"><i class="fa fa-step-forward"></i></button>
+	        <select class="pagesize input-mini" title="Select page size">
+	      		<c:if test="${not empty test}"><option value="2">2</option></c:if>
+	      		<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>
+	      </th>
+	    </tr>
+	</tfoot>
+	<tbody>
+	</tbody>
+</table>
+
+	
\ No newline at end of file
Index: lams_tool_pixlr/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r5e63656a12c02f7476564e278b43ff4ce86ac930 -r47cbd6e6676ba330de8e1256da0ae1f840c11d25
--- lams_tool_pixlr/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 5e63656a12c02f7476564e278b43ff4ce86ac930)
+++ lams_tool_pixlr/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 47cbd6e6676ba330de8e1256da0ae1f840c11d25)
@@ -418,6 +418,14 @@
    	<tag-file>
        <name>AuthoringButton</name>
        <path>/WEB-INF/tags/AuthoringButton.tag</path>
+   	</tag-file>
+   	<tag-file>
+       <name>AuthoringRatingCriteria</name>
+       <path>/WEB-INF/tags/AuthoringRatingCriteria.tag</path>
+   	</tag-file>
+   	<tag-file>
+       <name>Rating</name>
+       <path>/WEB-INF/tags/Rating.tag</path>
    	</tag-file>   	
    	<tag-file>
        <name>headItems</name>
@@ -432,6 +440,18 @@
 		<path>/WEB-INF/tags/DefineLater.tag</path>
    	</tag-file>  
    	<tag-file>
+	    <name>TSTable</name>
+		<path>/WEB-INF/tags/TSTable.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_pixlr/web/common/learnerheader.jsp
===================================================================
diff -u -r00ae80d4791f903bcb3661537fc7e129c72ad195 -r47cbd6e6676ba330de8e1256da0ae1f840c11d25
--- lams_tool_pixlr/web/common/learnerheader.jsp	(.../learnerheader.jsp)	(revision 00ae80d4791f903bcb3661537fc7e129c72ad195)
+++ lams_tool_pixlr/web/common/learnerheader.jsp	(.../learnerheader.jsp)	(revision 47cbd6e6676ba330de8e1256da0ae1f840c11d25)
@@ -13,7 +13,8 @@
 	</title>
 	<lams:css/>
 
-	<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/bootstrap.min.js"></script>
 	<script type="text/javascript" src="${tool}includes/javascript/common.js"></script>
 	<script type="text/javascript" src="${tool}includes/javascript/learning.js"></script>
 </lams:head>
Index: lams_tool_pixlr/web/common/messages.jsp
===================================================================
diff -u -rb703d43cf69269e0afcc716321fd5ef42c249a43 -r47cbd6e6676ba330de8e1256da0ae1f840c11d25
--- lams_tool_pixlr/web/common/messages.jsp	(.../messages.jsp)	(revision b703d43cf69269e0afcc716321fd5ef42c249a43)
+++ lams_tool_pixlr/web/common/messages.jsp	(.../messages.jsp)	(revision 47cbd6e6676ba330de8e1256da0ae1f840c11d25)
@@ -1,20 +1,20 @@
 <%-- Error Messages --%>
 <logic:messagesPresent>
-    <div class="error" id="errorMessages">
+    <lams:Alert id="errorMessages" type="danger" close="false">
         <html:messages id="error">
             &nbsp&nbsp <html:img page="/images/iconWarning.gif" 
                styleClass="icon"/>
             &nbsp&nbsp <c:out value="${error}" escapeXml="false"/><br/>
         </html:messages>
-    </div>
+    </lams:Alert>
 </logic:messagesPresent>
 
 <%-- Success Messages --%>
 <logic:messagesPresent message="true">
-    <div class="message" id="successMessages">
+	<lams:Alert id="successMessages" type="info" close="false">
         <html:messages id="message" message="true">
             &nbsp&nbsp <html:img page="/images/iconInformation.gif" styleClass="icon"/>
             &nbsp&nbsp <c:out value="${message}" escapeXml="false"/><br/>
         </html:messages>
-    </div>
+	</lams:Alert>
 </logic:messagesPresent>
Index: lams_tool_pixlr/web/pages/learning/defineLater.jsp
===================================================================
diff -u -rb703d43cf69269e0afcc716321fd5ef42c249a43 -r47cbd6e6676ba330de8e1256da0ae1f840c11d25
--- lams_tool_pixlr/web/pages/learning/defineLater.jsp	(.../defineLater.jsp)	(revision b703d43cf69269e0afcc716321fd5ef42c249a43)
+++ lams_tool_pixlr/web/pages/learning/defineLater.jsp	(.../defineLater.jsp)	(revision 47cbd6e6676ba330de8e1256da0ae1f840c11d25)
@@ -1,11 +1,11 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<div id="content">
-	<h1>
-		<fmt:message key="activity.title" />
-	</h1>
+<c:set scope="request" var="title">
+	<fmt:message key="activity.title" />
+</c:set>
+<lams:Page type="learner" title="${title}">
 	<lams:DefineLater defineLaterMessageKey="message.defineLaterSet" />
-</div>
+</lams:Page>
 
 
 
Fisheye: Tag 47cbd6e6676ba330de8e1256da0ae1f840c11d25 refers to a dead (removed) revision in file `lams_tool_pixlr/web/pages/learning/headItems.jsp'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_tool_pixlr/web/pages/learning/image.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -r47cbd6e6676ba330de8e1256da0ae1f840c11d25
--- lams_tool_pixlr/web/pages/learning/image.jsp	(.../image.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_pixlr/web/pages/learning/image.jsp	(.../image.jsp)	(revision 47cbd6e6676ba330de8e1256da0ae1f840c11d25)
@@ -1,5 +1,4 @@
-<!DOCTYPE html>
-        
+<!DOCTYPE html>  
 <%@ include file="/common/taglibs.jsp"%>
 
 <%
@@ -8,17 +7,14 @@
 
 <html>
 	<head>
-	
 		<script type="text/javascript">
-		<!--
-			function resize() 
-			{
+			function resize() {
 				var image = document.getElementById("image");
 				window.resizeTo(image.width, image.height); 
 			}
-		-->
 		</script>
 	</head>
+	
 	<body onload="resize();">
 		<img id="image" src='<%= imageURL %>' />
 	</body>
Index: lams_tool_pixlr/web/pages/learning/notebook.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -r47cbd6e6676ba330de8e1256da0ae1f840c11d25
--- lams_tool_pixlr/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_pixlr/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision 47cbd6e6676ba330de8e1256da0ae1f840c11d25)
@@ -9,65 +9,58 @@
 </c:set>
 
 <lams:html>
-
-	<lams:head>  
-	
+	<lams:head>
 		<title>
-			<fmt:message>pageTitle.monitoring.notebook</fmt:message>
+			<fmt:message key="pageTitle.monitoring.notebook"/>
 		</title>
+		<%@ include file="/common/learnerheader.jsp"%>
 		
-		<lams:css/>
-		<script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
-		
-	</lams:head>
-	
-	<script type="text/javascript">
+		<script type="text/javascript">
 			function disableFinishButton() {
 				document.getElementById("finishButton").disabled = true;
 			}
-		         function submitForm(methodName){
-		                var f = document.getElementById('messageForm');
-		                f.submit();
-		        }
-	</script>
+			
+			function submitForm(methodName){
+				var f = document.getElementById('messageForm');
+				f.submit();
+			}
+
+			$(document).ready(function() {
+				document.getElementById("focused").focus();
+			});
+		</script>
+	</lams:head>
 	
 	<body class="stripes">
-	
-			<div id="content">
-			
-			<h1>
-				<c:out value="${pixlrDTO.title}" escapeXml="true"/>
-			</h1>
+		<lams:Page type="learner" title="${pixlrDTO.title}">
 		
 			<html:form action="/learning" method="post" onsubmit="disableFinishButton();" styleId="messageForm">
 				<html:hidden property="toolSessionID" styleId="toolSessionID"/>
 				<html:hidden property="mode" value="${mode}" />
 				
-				<p class="small-space-top">
+				<div class="panel">
 					<lams:out value="${pixlrDTO.reflectInstructions}" escapeHtml="true"/>
-				</p>
+				</div>
 		
-				<html:textarea cols="60" rows="8" property="entryText"
-					styleClass="text-area"></html:textarea>
+				<html:textarea styleId="focused" rows="5" property="entryText" styleClass="form-control"/>
 		
-				<div class="space-bottom-top align-right">
-					<html:hidden property="dispatch" value="submitReflection" />
-					<html:link href="#nogo" styleClass="button" styleId="finishButton" onclick="submitForm('finish')">
-						<span class="nextActivity">
-							<c:choose>
-								<c:when test="${activityPosition.last}">
-									<fmt:message key="button.submit" />
-								</c:when>
-								<c:otherwise>
-									<fmt:message key="button.finish" />
-								</c:otherwise>
-							</c:choose>
-						</span>
-					</html:link>
-				</div>
+				<html:hidden property="dispatch" value="submitReflection" />
+				<html:link href="#nogo" styleClass="btn btn-primary voffset10 pull-right" styleId="finishButton" onclick="submitForm('finish')">
+					<span class="na">
+						<c:choose>
+							<c:when test="${activityPosition.last}">
+								<fmt:message key="button.submit" />
+							</c:when>
+							<c:otherwise>
+								<fmt:message key="button.finish" />
+							</c:otherwise>
+						</c:choose>
+					</span>
+				</html:link>
 			</html:form>
-				
-			</div>
+		
 			<div class="footer"></div>
+				
+		</lams:Page>
 	</body>
 </lams:html>
Fisheye: Tag 47cbd6e6676ba330de8e1256da0ae1f840c11d25 refers to a dead (removed) revision in file `lams_tool_pixlr/web/pages/learning/parts/finishButton.jsp'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_tool_pixlr/web/pages/learning/pixlr.jsp
===================================================================
diff -u -r63ab4413a66861635ecc8d57de6256e4aefed77b -r47cbd6e6676ba330de8e1256da0ae1f840c11d25
--- lams_tool_pixlr/web/pages/learning/pixlr.jsp	(.../pixlr.jsp)	(revision 63ab4413a66861635ecc8d57de6256e4aefed77b)
+++ lams_tool_pixlr/web/pages/learning/pixlr.jsp	(.../pixlr.jsp)	(revision 47cbd6e6676ba330de8e1256da0ae1f840c11d25)
@@ -1,42 +1,41 @@
 <%@ include file="/common/taglibs.jsp"%>
 
 <script type="text/javascript">
-<!--
 	var mode = "${mode}";
 	
-	
-	function openPixlr(url)
-	{
+	function openPixlr(url)	{
 		alert("<fmt:message key="message.learner.saveWhenFinished" />");
 		
 		url += "&target=" + escape("${returnURL}");
 		url += "&image=" + escape("${currentImageURL}");
 		openPopup(url, 570, 796);
 	}
 
-	function refresh()
-	{
+	function refresh() {
 		window.location.href = "<lams:WebAppURL/>/learning.do?mode=${mode}&toolSessionID=${toolSessionID}&redoQuestion=true";
 	}
-	
-	
 
-//-->
+	function disableFinishButton() {
+		var finishButton = document.getElementById("finishButton");
+		if (finishButton != null) {
+			finishButton.disabled = true;
+		}
+	}
+	
+	function submitForm(methodName){
+		var f = document.getElementById('learningForm');
+		f.submit();
+	}
 </script>
 
+<lams:Page type="learner" title="${pixlrDTO.title}">
 
-
-<div id="content">
-	<h1>
-		<c:out value="${pixlrDTO.title}" escapeXml="true"/>
-	</h1>
-
-	<p>
+	<div class="panel">
 		<c:out value="${pixlrDTO.instructions}" escapeXml="false"/>
-	</p>
+	</div>
 
 	<c:if test="${pixlrDTO.lockOnFinish and mode == 'learner'}">
-		<div class="info">
+		<lams:Alert type="danger" id="lock-on-finish" close="false">
 			<c:choose>
 				<c:when test="${finishedActivity}">
 					<fmt:message key="message.activityLocked" />
@@ -52,39 +51,102 @@
 					</c:choose>
 				</c:otherwise>
 			</c:choose>
-		</div>
-		<br />
+		</lams:Alert>
 	</c:if>
 
-	&nbsp;
-
-	<c:set var="lrnForm"
-		value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
-
-	<br />
 	<div style="text-align:center;">
-		<img id="image" border="1" title="<fmt:message key="tooltip.openfullsize" />" onclick="openImage('${currentImageURL}')" src="${currentImageURL}" />
+		<img id="image" border="1" title="<fmt:message key="tooltip.openfullsize" />" 
+				onclick="openImage('${currentImageURL}')" src="${currentImageURL}" />
 		
 		<br />
 		<br />
 		<c:choose>
 			<c:when test="${contentEditable}">
-				<a class="button" href="javascript:openPixlr('${pixlrURL}');"><fmt:message key="learner.edit.image" /></a>
+				<a class="btn btn-default" href="javascript:openPixlr('${pixlrURL}');">
+					<fmt:message key="learner.edit.image" />
+				</a>
 			</c:when>
 		</c:choose>
 	</div>
 	
 	<c:if test="${mode == 'learner' || mode == 'author'}">
-		<%@ include file="parts/finishButton.jsp"%>
+		<%--Reflection--------------------------------------------------%>
+
+		<c:if test="${pixlrUserDTO.finishedActivity and pixlrDTO.reflectOnActivity and pixlrUserDTO.finishedReflection}">
+			<html:form action="/learning" method="post" styleId="reflectEditForm">
+				<html:hidden property="dispatch" value="openNotebook" />
+				<html:hidden property="mode" value="${mode}" />	
+				<html:hidden property="toolSessionID" styleId="toolSessionID"/>
+				
+				<div class="panel panel-default voffset10">
+					<div class="panel-heading panel-title">
+						${pixlrDTO.reflectInstructions}
+					</div>
+			
+					<div class="panel-body">
+						<c:choose>
+							<c:when test="${not empty pixlrUserDTO.notebookEntry}">
+								<lams:out escapeHtml="true" value="${pixlrUserDTO.notebookEntry}" />
+							</c:when>
+			
+							<c:otherwise>
+								<em><fmt:message key="message.no.reflection.available" /> </em>
+							</c:otherwise>
+						</c:choose>
+									
+						<html:submit styleClass="btn btn-default pull-left" >
+							<fmt:message key="button.edit" />
+						</html:submit>
+					</div>
+			
+				</div>
+					
+			</html:form>
+		</c:if>
+		
+		<%--Finish buttons--------------------------------------------------%>
+		
+		<html:form action="/learning" method="post" onsubmit="disableFinishButton();" styleId="learningForm">
+			<html:hidden property="dispatch" styleId = "dispatch" value="finishActivity" />
+			<html:hidden property="toolSessionID" styleId="toolSessionID"/>
+			<html:hidden property="mode" value="${mode}" />	
+			<div class="voffset10 pull-right">
+				
+				<c:choose>
+					<c:when test="${pixlrDTO.allowViewOthersImages}">
+						<html:submit styleClass="btn btn-primary" onclick="javascript:document.getElementById('dispatch').value = 'viewAllImages';">
+							<fmt:message key="button.viewAll" />
+						</html:submit>
+					</c:when>
+					
+					<c:otherwise>
+						<c:choose>
+							<c:when test="${!pixlrUserDTO.finishedActivity and pixlrDTO.reflectOnActivity}">
+								<html:submit styleClass="btn btn-primary" onclick="javascript:document.getElementById('dispatch').value = 'openNotebook';">
+									<fmt:message key="button.continue" />
+								</html:submit>
+							</c:when>
+							
+							<c:otherwise>
+								<html:hidden property="dispatch" value="finishActivity" />
+								<html:link href="#nogo" styleClass="btn btn-primary" styleId="finishButton" onclick="submitForm('finished');">
+									<span class="na">
+										<c:choose>
+											<c:when test="${activityPosition.last}">
+												<fmt:message key="button.submit" />
+											</c:when>
+											<c:otherwise>
+												<fmt:message key="button.finish" />
+											</c:otherwise>
+										</c:choose>
+									</span>
+								</html:link>
+							</c:otherwise>
+						</c:choose>
+					</c:otherwise>
+				</c:choose>
+			</div>
+		</html:form>
 	</c:if>
 
-
-</div>
-
-<script type="text/javascript">
-<!--
-	
-	
-	
-//-->
-</script>
+</lams:Page>
Index: lams_tool_pixlr/web/pages/learning/success.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -r47cbd6e6676ba330de8e1256da0ae1f840c11d25
--- lams_tool_pixlr/web/pages/learning/success.jsp	(.../success.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_pixlr/web/pages/learning/success.jsp	(.../success.jsp)	(revision 47cbd6e6676ba330de8e1256da0ae1f840c11d25)
@@ -2,10 +2,8 @@
 <%@ include file="/common/taglibs.jsp"%>
 
 <script type="text/javascript">
-<!--
 	window.resizeTo(550,300)
 	window.opener.refresh();
--->
 </script>
 
 <lams:html>
@@ -16,27 +14,24 @@
 	
 	<body class="stripes">
 	
-		<div id="content" align="center">
-
-			<c:choose>
-				<c:when test="${success}">
-					<p class="info">
-						<fmt:message key="message.imageEdited" />
-					<p>
-				</c:when>
-				<c:otherwise>
-					<p class="warning">
-						<fmt:message key="error.retreiving.image" />
-					</p>
-				</c:otherwise>
-			</c:choose>
-			<div class="space-bottom-top">
-			<html:submit styleClass="button" onclick="javascript:window.close();">
-					<fmt:message key="button.close" />
+		<c:choose>
+			<c:when test="${success}">
+				<c:set var="title"><fmt:message key="message.imageEdited" /></c:set>
+			</c:when>
+			<c:otherwise>
+				<c:set var="title"><fmt:message key="error.retreiving.image" /></c:set>
+			</c:otherwise>
+		</c:choose>
+	
+		<lams:Page type="learner" title="${title}">
+			
+			<html:submit styleClass="btn btn-primary pull-right" onclick="javascript:window.close();">
+				<fmt:message key="button.close" />
 			</html:submit>
-			</div>
-		</div>
-		<div class="footer"></div>
+			
+			<div class="footer"></div>
+			
+		</lams:Page>
 	</body>
 </lams:html>
 
Index: lams_tool_pixlr/web/pages/learning/viewAll.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -r47cbd6e6676ba330de8e1256da0ae1f840c11d25
--- lams_tool_pixlr/web/pages/learning/viewAll.jsp	(.../viewAll.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_pixlr/web/pages/learning/viewAll.jsp	(.../viewAll.jsp)	(revision 47cbd6e6676ba330de8e1256da0ae1f840c11d25)
@@ -1,5 +1,4 @@
-<!DOCTYPE html>
-            
+<!DOCTYPE html>        
 <%@ include file="/common/taglibs.jsp"%>
 <c:set var="lams">
 	<lams:LAMSURL />
@@ -11,56 +10,47 @@
 <lams:html>
 
 	<lams:head>  
-	
 		<title>
 			<fmt:message>learner.title.viewAll</fmt:message>
 		</title>
-		
-		<lams:css/>
-		
-	</lams:head>
+		<%@ include file="/common/learnerheader.jsp"%>
 	
-	<script type="text/javascript">
-		var popupWindow = null;
-		function openPopup(url, height, width)
-		{	
-			if(popupWindow && popupWindow.open && !popupWindow.closed){
-				popupWindow.close();
+		<script type="text/javascript">
+			var popupWindow = null;
+			function openPopup(url, height, width) {	
+				if(popupWindow && popupWindow.open && !popupWindow.closed){
+					popupWindow.close();
+				}
+				
+				popupWindow = window.open(url,'popupWindow','resizable,width=' +width+ ',height=' +height+ ',scrollbars');
 			}
-			popupWindow = window.open(url,'popupWindow','resizable,width=' +width+ ',height=' +height+ ',scrollbars');
-		}
-	         function submitForm(methodName){
-	                var f = document.getElementById('messageForm');
-	                f.submit();
-	        }
-	</script>
+
+		    function submitForm(methodName) {
+				var f = document.getElementById('messageForm');
+				f.submit();
+			}
+		</script>
+	</lams:head>
 	
 	<body class="stripes">
-	
-			<div id="content">
-			
-			<h1>
-				<c:out value="${pixlrDTO.title}" escapeXml="true"/>
-			</h1>
-		
+		<lams:Page type="learner" title="${pixlrDTO.title}">
 			<html:form action="/learning" method="post" styleId="messageForm">
 				<html:hidden property="toolSessionID" styleId="toolSessionID"/>
 				<html:hidden property="mode" value="${mode}" />
 				<html:hidden property="dispatch" styleId = "dispatch" value="finishActivity" />
 				<html:hidden property="redoQuestion" value="true" />
-					<c:choose>
-						<c:when test="${!empty learnerDTOs}">
-							<br />
-							<hr />
-							<br />
-							<c:forEach var="learner" items="${learnerDTOs}">
-								<table >
+				
+				<c:choose>
+					<c:when test="${!empty learnerDTOs}">
+						<c:forEach var="learner" items="${learnerDTOs}">
+							<table >
 								<tr>
 									<td width="30%">
 										<a href="javascript:openPopup('${pixlrImageFolderURL}/${learner.imageFileName}', ${learner.imageHeight}, ${learner.imageWidth})">
-										<c:out value="${learner.firstName} ${learner.lastName}" escapeXml="true"/>
+											<c:out value="${learner.firstName} ${learner.lastName}" escapeXml="true"/>
 										</a>
 									</td>
+									
 									<td>
 										<c:choose>
 											<c:when test="${!learner.imageHidden}">
@@ -76,60 +66,63 @@
 											</c:otherwise>
 										</c:choose>
 									</td>
-									
 								</tr>
-								</table>
+							</table>
 								
-								<br />
-								<hr />
-							</c:forEach>
 							<br />
-						</c:when>
-						<c:otherwise>
-							<p>
+							<hr />
+						</c:forEach>
+						<br />
+					</c:when>
+						
+					<c:otherwise>
+						<p>
 							<i><fmt:message key="message.imageListEmpty" /></i>
-							</p>
-						</c:otherwise>
-					</c:choose>
+						</p>
+					</c:otherwise>
+				</c:choose>
 					
-				<br />
-				
-				
-				<html:submit styleClass="button" onclick="javascript:document.getElementById('dispatch').value = 'viewAllImages';">
+				<%--Bottom buttons--------------------------------------------------%>
+				<html:submit styleClass="btn btn-default" onclick="javascript:document.getElementById('dispatch').value = 'viewAllImages';">
 					<fmt:message key="button.refresh" />
 				</html:submit>
-				&nbsp;
+					
 				<c:if test="${!pixlrDTO.lockOnFinish}">
-					<html:submit styleClass="button" onclick="javascript:document.getElementById('dispatch').value = 'unspecified';">
+					<html:submit styleClass="btn btn-default" onclick="javascript:document.getElementById('dispatch').value = 'unspecified';">
 						<fmt:message key="button.redo" />
 					</html:submit>
-					&nbsp;
 				</c:if>
-				<c:choose>
-					<c:when test="${pixlrDTO.reflectOnActivity}">
-						<html:submit styleClass="button" onclick="javascript:document.getElementById('dispatch').value = 'openNotebook';">
-							<fmt:message key="button.continue" />
-						</html:submit>
-					</c:when>
-					<c:otherwise>
-						<html:link href="#nogo" styleClass="button" styleId="finishButton" onclick="submitForm('finished');return false">
-							<span class="nextActivity">
-								<c:choose>
-									<c:when test="${activityPosition.last}">
-										<fmt:message key="button.submit" />
-									</c:when>
-									<c:otherwise>
-										<fmt:message key="button.finish" />
-									</c:otherwise>
-								</c:choose>
-							</span>
-						</html:link>
-					</c:otherwise>
-				</c:choose>
+									
+				<div class="voffset10 pull-right">
+					<c:choose>
+						<c:when test="${pixlrDTO.reflectOnActivity}">
+							<html:submit styleClass="btn btn-primary" onclick="javascript:document.getElementById('dispatch').value = 'openNotebook';">
+								<fmt:message key="button.continue" />
+							</html:submit>
+						</c:when>
+						
+						<c:otherwise>
+							<html:link href="#nogo" styleClass="btn btn-primary" styleId="finishButton" onclick="submitForm('finished');return false">
+								<span class="na">
+									<c:choose>
+										<c:when test="${activityPosition.last}">
+											<fmt:message key="button.submit" />
+										</c:when>
+										
+										<c:otherwise>
+											<fmt:message key="button.finish" />
+										</c:otherwise>
+									</c:choose>
+								</span>
+							</html:link>
+						</c:otherwise>
+					</c:choose>
+				</div>
 				
 			</html:form>
 				
-			</div>
 			<div class="footer"></div>
+			
+		</lams:Page>
 	</body>
 </lams:html>