Index: lams_tool_kaltura/web/WEB-INF/tags/Alert.tag
===================================================================
diff -u
--- lams_tool_kaltura/web/WEB-INF/tags/Alert.tag	(revision 0)
+++ lams_tool_kaltura/web/WEB-INF/tags/Alert.tag	(revision ef2f3057445dd3f802b958ab67a77abe6dbc54c0)
@@ -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_kaltura/web/WEB-INF/tags/AuthoringRatingCriteria.tag
===================================================================
diff -u
--- lams_tool_kaltura/web/WEB-INF/tags/AuthoringRatingCriteria.tag	(revision 0)
+++ lams_tool_kaltura/web/WEB-INF/tags/AuthoringRatingCriteria.tag	(revision ef2f3057445dd3f802b958ab67a77abe6dbc54c0)
@@ -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_kaltura/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -r3c70edad796dc3f28a98331c4ace4ddf252042ac -ref2f3057445dd3f802b958ab67a77abe6dbc54c0
--- lams_tool_kaltura/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision 3c70edad796dc3f28a98331c4ace4ddf252042ac)
+++ lams_tool_kaltura/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision ef2f3057445dd3f802b958ab67a77abe6dbc54c0)
@@ -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_kaltura/web/WEB-INF/tags/Page.tag
===================================================================
diff -u
--- lams_tool_kaltura/web/WEB-INF/tags/Page.tag	(revision 0)
+++ lams_tool_kaltura/web/WEB-INF/tags/Page.tag	(revision ef2f3057445dd3f802b958ab67a77abe6dbc54c0)
@@ -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_kaltura/web/WEB-INF/tags/Rating.tag
===================================================================
diff -u
--- lams_tool_kaltura/web/WEB-INF/tags/Rating.tag	(revision 0)
+++ lams_tool_kaltura/web/WEB-INF/tags/Rating.tag	(revision ef2f3057445dd3f802b958ab67a77abe6dbc54c0)
@@ -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_kaltura/web/WEB-INF/tags/TSTable.tag
===================================================================
diff -u
--- lams_tool_kaltura/web/WEB-INF/tags/TSTable.tag	(revision 0)
+++ lams_tool_kaltura/web/WEB-INF/tags/TSTable.tag	(revision ef2f3057445dd3f802b958ab67a77abe6dbc54c0)
@@ -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_kaltura/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r5e63656a12c02f7476564e278b43ff4ce86ac930 -ref2f3057445dd3f802b958ab67a77abe6dbc54c0
--- lams_tool_kaltura/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 5e63656a12c02f7476564e278b43ff4ce86ac930)
+++ lams_tool_kaltura/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision ef2f3057445dd3f802b958ab67a77abe6dbc54c0)
@@ -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_kaltura/web/common/learnerheader.jsp
===================================================================
diff -u -r5cc196ca4ae3e17a6af1a633059f740562377cee -ref2f3057445dd3f802b958ab67a77abe6dbc54c0
--- lams_tool_kaltura/web/common/learnerheader.jsp	(.../learnerheader.jsp)	(revision 5cc196ca4ae3e17a6af1a633059f740562377cee)
+++ lams_tool_kaltura/web/common/learnerheader.jsp	(.../learnerheader.jsp)	(revision ef2f3057445dd3f802b958ab67a77abe6dbc54c0)
@@ -12,6 +12,8 @@
 		<fmt:message key="activity.title" />
 	</title>
 	<lams:css/>
-
+	
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
 </lams:head>
Index: lams_tool_kaltura/web/common/message.jsp
===================================================================
diff -u -r5fd453ea4cb0fa72cb94a5706e75f68a319de46b -ref2f3057445dd3f802b958ab67a77abe6dbc54c0
--- lams_tool_kaltura/web/common/message.jsp	(.../message.jsp)	(revision 5fd453ea4cb0fa72cb94a5706e75f68a319de46b)
+++ lams_tool_kaltura/web/common/message.jsp	(.../message.jsp)	(revision ef2f3057445dd3f802b958ab67a77abe6dbc54c0)
@@ -1,5 +1,5 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<p>
+<lams:Alert id="errorMessages" type="danger" close="false">
 	${requestScope.message};
-</p>
+</lams:Alert>
Index: lams_tool_kaltura/web/layouts/defaultLayout.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -ref2f3057445dd3f802b958ab67a77abe6dbc54c0
--- lams_tool_kaltura/web/layouts/defaultLayout.jsp	(.../defaultLayout.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_kaltura/web/layouts/defaultLayout.jsp	(.../defaultLayout.jsp)	(revision ef2f3057445dd3f802b958ab67a77abe6dbc54c0)
@@ -1,6 +1,4 @@
 <!DOCTYPE html>
-            
-
 <%@ include file="/common/taglibs.jsp"%>
 
 <lams:html>
Index: lams_tool_kaltura/web/layouts/learningLayout.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -ref2f3057445dd3f802b958ab67a77abe6dbc54c0
--- lams_tool_kaltura/web/layouts/learningLayout.jsp	(.../learningLayout.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_kaltura/web/layouts/learningLayout.jsp	(.../learningLayout.jsp)	(revision ef2f3057445dd3f802b958ab67a77abe6dbc54c0)
@@ -1,13 +1,9 @@
 <!DOCTYPE html>
-            
-
 <%@ include file="/common/taglibs.jsp"%>
 
 <lams:html>
 	<tiles:insert attribute="header" />
 	<body class="stripes">
-		<tiles:insert attribute="body" />
-		<div class="footer">
-		</div>					
+		<tiles:insert attribute="body" />		
 	</body>
 </lams:html>
Index: lams_tool_kaltura/web/layouts/mobileLearningLayout.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -ref2f3057445dd3f802b958ab67a77abe6dbc54c0
--- lams_tool_kaltura/web/layouts/mobileLearningLayout.jsp	(.../mobileLearningLayout.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_kaltura/web/layouts/mobileLearningLayout.jsp	(.../mobileLearningLayout.jsp)	(revision ef2f3057445dd3f802b958ab67a77abe6dbc54c0)
@@ -1,6 +1,4 @@
 <!DOCTYPE html>
-            
-
 <%@ include file="/common/taglibs.jsp"%>
 
 <lams:html>
Index: lams_tool_kaltura/web/layouts/tabLayout.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -ref2f3057445dd3f802b958ab67a77abe6dbc54c0
--- lams_tool_kaltura/web/layouts/tabLayout.jsp	(.../tabLayout.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_kaltura/web/layouts/tabLayout.jsp	(.../tabLayout.jsp)	(revision ef2f3057445dd3f802b958ab67a77abe6dbc54c0)
@@ -1,5 +1,4 @@
 <!DOCTYPE html>
-
 <%@ include file="/common/taglibs.jsp"%>
 
 <lams:html>
Index: lams_tool_kaltura/web/pages/authoring/advanced.jsp
===================================================================
diff -u -r2b131780286761d29c3fabc7d9fad88225034343 -ref2f3057445dd3f802b958ab67a77abe6dbc54c0
--- lams_tool_kaltura/web/pages/authoring/advanced.jsp	(.../advanced.jsp)	(revision 2b131780286761d29c3fabc7d9fad88225034343)
+++ lams_tool_kaltura/web/pages/authoring/advanced.jsp	(.../advanced.jsp)	(revision ef2f3057445dd3f802b958ab67a77abe6dbc54c0)
@@ -1,5 +1,4 @@
 <%@ include file="/common/taglibs.jsp"%>
-
 <c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
 
 <script lang="javascript">
@@ -21,10 +20,8 @@
 			$("#learnerContributionLimit").prop("disabled", true);
 		</c:if>
 	});
-
 </script>
 
-
 <!-- ========== Advanced Tab ========== -->
 
 <p class="small-space-top">
Index: lams_tool_kaltura/web/pages/authoring/authoring.jsp
===================================================================
diff -u -rbe07c35c372d904a65581d98660e73f3b13b69db -ref2f3057445dd3f802b958ab67a77abe6dbc54c0
--- lams_tool_kaltura/web/pages/authoring/authoring.jsp	(.../authoring.jsp)	(revision be07c35c372d904a65581d98660e73f3b13b69db)
+++ lams_tool_kaltura/web/pages/authoring/authoring.jsp	(.../authoring.jsp)	(revision ef2f3057445dd3f802b958ab67a77abe6dbc54c0)
@@ -1,5 +1,4 @@
 <%@ include file="/common/taglibs.jsp"%>
-
 <%@ page import="org.lamsfoundation.lams.tool.kaltura.util.KalturaConstants"%>
 
 <html:form action="/authoring" styleId="authoringForm" method="post" enctype="multipart/form-data">
Index: lams_tool_kaltura/web/pages/authoring/basic.jsp
===================================================================
diff -u -re80818aae7410906f018e124a1a18517b51b9bbf -ref2f3057445dd3f802b958ab67a77abe6dbc54c0
--- lams_tool_kaltura/web/pages/authoring/basic.jsp	(.../basic.jsp)	(revision e80818aae7410906f018e124a1a18517b51b9bbf)
+++ lams_tool_kaltura/web/pages/authoring/basic.jsp	(.../basic.jsp)	(revision ef2f3057445dd3f802b958ab67a77abe6dbc54c0)
@@ -1,5 +1,4 @@
 <%@ include file="/common/taglibs.jsp"%>
-
 <%@ page import="org.lamsfoundation.lams.util.Configuration" %>
 <%@ page import="org.lamsfoundation.lams.util.ConfigurationKeys" %>
 
Index: lams_tool_kaltura/web/pages/authoring/pedagogicalPlannerForm.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -ref2f3057445dd3f802b958ab67a77abe6dbc54c0
--- lams_tool_kaltura/web/pages/authoring/pedagogicalPlannerForm.jsp	(.../pedagogicalPlannerForm.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_kaltura/web/pages/authoring/pedagogicalPlannerForm.jsp	(.../pedagogicalPlannerForm.jsp)	(revision ef2f3057445dd3f802b958ab67a77abe6dbc54c0)
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
-		
-
 <%@ include file="/common/taglibs.jsp"%>
+
 <lams:html>
 <lams:head>
 	<lams:css style="core" />
Index: lams_tool_kaltura/web/pages/authoring/preview.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -ref2f3057445dd3f802b958ab67a77abe6dbc54c0
--- lams_tool_kaltura/web/pages/authoring/preview.jsp	(.../preview.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_kaltura/web/pages/authoring/preview.jsp	(.../preview.jsp)	(revision ef2f3057445dd3f802b958ab67a77abe6dbc54c0)
@@ -1,27 +1,23 @@
 <!DOCTYPE html>
-
 <%@ include file="/common/taglibs.jsp"%>
 <%@ page import="org.lamsfoundation.lams.util.Configuration" %>
 <%@ page import="org.lamsfoundation.lams.util.ConfigurationKeys" %>
 
-		<c:set var="KALTURA_SERVER"><%=Configuration.get(ConfigurationKeys.KALTURA_SERVER)%></c:set>
-		<c:set var="PARTNER_ID"><%=Configuration.get(ConfigurationKeys.KALTURA_PARTNER_ID)%></c:set>
-		<c:set var="SUB_PARTNER_ID"><%=Configuration.get(ConfigurationKeys.KALTURA_SUB_PARTNER_ID)%></c:set>
-		<c:set var="USER_SECRET"><%=Configuration.get(ConfigurationKeys.KALTURA_USER_SECRET)%></c:set>
-		<c:set var="KCW_UI_CONF_ID"><%=Configuration.get(ConfigurationKeys.KALTURA_KCW_UI_CONF_ID)%></c:set>
-		<c:set var="KDP_UI_CONF_ID"><%=Configuration.get(ConfigurationKeys.KALTURA_KDP_UI_CONF_ID)%></c:set>
+<c:set var="KALTURA_SERVER"><%=Configuration.get(ConfigurationKeys.KALTURA_SERVER)%></c:set>
+<c:set var="PARTNER_ID"><%=Configuration.get(ConfigurationKeys.KALTURA_PARTNER_ID)%></c:set>
+<c:set var="SUB_PARTNER_ID"><%=Configuration.get(ConfigurationKeys.KALTURA_SUB_PARTNER_ID)%></c:set>
+<c:set var="USER_SECRET"><%=Configuration.get(ConfigurationKeys.KALTURA_USER_SECRET)%></c:set>
+<c:set var="KCW_UI_CONF_ID"><%=Configuration.get(ConfigurationKeys.KALTURA_KCW_UI_CONF_ID)%></c:set>
+<c:set var="KDP_UI_CONF_ID"><%=Configuration.get(ConfigurationKeys.KALTURA_KDP_UI_CONF_ID)%></c:set>
 
 <lams:html>
 	<lams:head>
 		<lams:css />
-	
-
 		
 		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/swfobject.js"></script>
 		<script type="text/javascript" src="http://cdnbakmi.kaltura.com/html5/html5lib/v1.6.10.4/mwEmbedLoader.php"></script>
-		
 		<script type="text/javascript">
-			<!--
+		
 			//Kaltura settings
 			//kaltura server 
 			var KALTURA_SERVER = "${KALTURA_SERVER}";
@@ -56,37 +52,26 @@
 				entryId:  "${item.entryId}"
 			};	
 			swfobject.embedSWF(KALTURA_SERVER + '/kwidget/wid/_' + PARTNER_ID + '/uiconf_id/' + KDP_UI_CONF_ID, "kplayer", "400", "360", "9.0.0", "includes/expressInstall.swf", flashVars, params);
-		
-			-->
+
 		</script>
 	</lams:head>
 
 	<body class="stripes" onload="parent.resizeIframe();">
-		<div id="content">
-			<h1>
-				<c:out value="${item.title}" escapeXml="true"/>
-			</h1>
+		<lams:Page type="learner" title="${item.title}">
 			
-			<br>
-			
 			<div id="kplayer">
 				<object height="400" width="360">
 					<embed height="400" type="application/x-shockwave-flash" width="360" src="#"></embed>
 				</object>
 			</div>
 			
-			<br>
-			
 			<lams:ImgButtonWrapper>
-				<a href="#" onclick="self.parent.tb_remove();" onmousedown="self.focus();" class="button space-left float-right">
+				<a href="#" onclick="self.parent.tb_remove();" onmousedown="self.focus();" class="btn btn-sm btn-primary pull-right voffset10">
 					<fmt:message key="label.close" /> 
 				</a>
 			</lams:ImgButtonWrapper>
 			
-		</div>
+		</lams:Page>
 		
-		<div id="footer">
-		</div>
-		
 	</body>
 </lams:html>
Index: lams_tool_kaltura/web/pages/learning/commentlist.jsp
===================================================================
diff -u -re2c6d899777bf13b87998825aebf300fc2885eaa -ref2f3057445dd3f802b958ab67a77abe6dbc54c0
--- lams_tool_kaltura/web/pages/learning/commentlist.jsp	(.../commentlist.jsp)	(revision e2c6d899777bf13b87998825aebf300fc2885eaa)
+++ lams_tool_kaltura/web/pages/learning/commentlist.jsp	(.../commentlist.jsp)	(revision ef2f3057445dd3f802b958ab67a77abe6dbc54c0)
@@ -9,61 +9,68 @@
 
 <%@ include file="/common/messages.jsp"%>
 
-<c:if test="${not empty comments}">
-	<div class="field-name">
-		<fmt:message key="label.learning.comments" />
-	</div>
-</c:if>
-
-<table cellspacing="0" class="alternative-color" id="comments-table">
-	<c:forEach var="comment" items="${comments}">
+<div class="table-responsive">
+	<table id="comments-table" class="table table-hover table-condensed">
+		<c:if test="${not empty comments}">
+			<thead>
+				<tr>
+					<th>
+						<fmt:message key="label.learning.comments" />
+					</th>
+				</tr>
+			</thead>
+		</c:if>
 		
-			<tr>
-				<td id="comment${comment.uid}" <c:if test="${comment.hidden}"> class="item-hidden" </c:if>>
-					<c:out value="${comment.comment}" escapeXml="false" />
-					
-					<div class="comment-by">
-						<fmt:message key="label.learning.by" />
-						<c:out value="${comment.createBy.firstName} ${comment.createBy.lastName}" escapeXml="true"/> 
-								-				
-						<lams:Date value="${comment.createDate}" />
-					
-					</div>
-					
-					<c:if test="${isGroupMonitoring}">
-						<div class="float-right comment-hide-management">
-							
-							<c:choose>
-								<c:when test="${comment.hidden}">
-									<span class="comment-by-text">
-										<fmt:message key="label.comment.is.hidden" />
-									</span>
-											
-									<a href="#nogo" onclick="return hideComment(${comment.uid}, false);">
-								       	<fmt:message key="label.unhide" />
-							    	</a>
-								</c:when>
-								<c:otherwise>
-									<a href="#nogo" onclick="return hideComment(${comment.uid}, true);">
-								       	<fmt:message key="label.hide" />
-								   	</a>
-								</c:otherwise>
-							</c:choose>
+		<tbody>
+			<c:forEach var="comment" items="${comments}">
+			
+				<tr>
+					<td id="comment${comment.uid}" <c:if test="${comment.hidden}"> class="item-hidden" </c:if>>
+						<c:out value="${comment.comment}" escapeXml="false" />
 						
+						<div class="comment-by">
+							<fmt:message key="label.learning.by" />
+							<c:out value="${comment.createBy.firstName} ${comment.createBy.lastName}" escapeXml="true"/> 
+									-				
+							<lams:Date value="${comment.createDate}" />
 						</div>
-					</c:if>
-				</td>
-			</tr>
-		
-	</c:forEach>
-</table>
+						
+						<c:if test="${isGroupMonitoring}">
+							<div class="pull-right comment-hide-management">
+								
+								<c:choose>
+									<c:when test="${comment.hidden}">
+										<span class="comment-by-text">
+											<fmt:message key="label.comment.is.hidden" />
+										</span>
+												
+										<a href="#nogo" onclick="return hideComment(${comment.uid}, false);">
+									       	<fmt:message key="label.unhide" />
+								    	</a>
+									</c:when>
+									<c:otherwise>
+										<a href="#nogo" onclick="return hideComment(${comment.uid}, true);">
+									       	<fmt:message key="label.hide" />
+									   	</a>
+									</c:otherwise>
+								</c:choose>
+							
+							</div>
+						</c:if>
+					</td>
+				</tr>
+			
+			</c:forEach>
+		</tbody>
+	</table>
+</div>
 
 <c:if test="${isGroupMonitoring || (mode != 'teacher') && !finishedLock}">
 	<div id="comment-textarea">
-		<lams:STRUTS-textarea property="comment" rows="3" value=""/>		
+		<lams:STRUTS-textarea property="comment" rows="3" value="" styleClass="form-control"/>		
 		
-		<div class="float-right">
-			<html:button property="commentButton" onclick="javascript:addNewComment(document.getElementById('comment__lamshidden').value);" styleClass="button" style="vertical-align:bottom;">
+		<div class="pull-right">
+			<html:button property="commentButton" onclick="javascript:addNewComment(document.getElementById('comment__lamshidden').value);" styleClass="btn btn-default" style="vertical-align:bottom;">
 				<fmt:message key="label.learning.post.comment" />
 			</html:button>
 		</div>
Index: lams_tool_kaltura/web/pages/learning/defineLater.jsp
===================================================================
diff -u -r5fd453ea4cb0fa72cb94a5706e75f68a319de46b -ref2f3057445dd3f802b958ab67a77abe6dbc54c0
--- lams_tool_kaltura/web/pages/learning/defineLater.jsp	(.../defineLater.jsp)	(revision 5fd453ea4cb0fa72cb94a5706e75f68a319de46b)
+++ lams_tool_kaltura/web/pages/learning/defineLater.jsp	(.../defineLater.jsp)	(revision ef2f3057445dd3f802b958ab67a77abe6dbc54c0)
@@ -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>
 
 
 
Index: lams_tool_kaltura/web/pages/learning/finish.jsp
===================================================================
diff -u -r5fd453ea4cb0fa72cb94a5706e75f68a319de46b -ref2f3057445dd3f802b958ab67a77abe6dbc54c0
--- lams_tool_kaltura/web/pages/learning/finish.jsp	(.../finish.jsp)	(revision 5fd453ea4cb0fa72cb94a5706e75f68a319de46b)
+++ lams_tool_kaltura/web/pages/learning/finish.jsp	(.../finish.jsp)	(revision ef2f3057445dd3f802b958ab67a77abe6dbc54c0)
@@ -1,5 +1,3 @@
 <script type="text/javascript">
-	<!--
 	document.location.href = "${nextActivityUrl}";
-	-->
 </script>
Index: lams_tool_kaltura/web/pages/learning/learning.jsp
===================================================================
diff -u -r12828aa790dcb1a83dd741b43922b01d8f95898c -ref2f3057445dd3f802b958ab67a77abe6dbc54c0
--- lams_tool_kaltura/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision 12828aa790dcb1a83dd741b43922b01d8f95898c)
+++ lams_tool_kaltura/web/pages/learning/learning.jsp	(.../learning.jsp)	(revision ef2f3057445dd3f802b958ab67a77abe6dbc54c0)
@@ -23,18 +23,16 @@
 <link href="<lams:LAMSURL/>css/thickbox.css" rel="stylesheet" type="text/css" media="screen">
 
 <style media="screen,projection" type="text/css">
-	#content {min-width: 600px;}
 	
 	#container{width: 100%; position: relative; display: inline-block; margin-top: 25px;}
 	#player-block {  clear: both; position: absolute; top: 0; bottom: 0; left: 0; right: 0;}
-	#dummy {padding-top: 52%; /* aspect ratio */}
+	#dummy {padding-top: 82%; /* aspect ratio */}
 	#player-wrap {width: 60%; height: 100%; clear: both; margin-bottom: 20px; background: black;}
-	#player-bottombar {height:50px; width: 60%; margin-top: 15px; margin-bottom: 10px;}
+	#player-bottombar {height:50px; margin-top: 15px; margin-bottom: 10px;}
 	
-	#comments-area { padding: 5px 0 20px; min-width: 431px; width: 60%;}
-	#comments-table {border-spacing: 3px; margin-top: 0; padding-right: 3px;}
-	#comment-textarea textarea {width: 99%;}
-	#comment-textarea input {margin-top: 2px;}
+	#comment-textarea textarea {
+		margin-bottom: 4px;
+	}
 	.rating-stars-div {min-height: 50px; padding-right: 0;}
 	.rating-stars-caption { text-align: left; padding-left: 30px; }
 	.rating-stars-disabled-small {padding: 2px 5px;}
@@ -43,7 +41,7 @@
 	.comment-by-text {color: #8E8E8E;}
 	.item-hidden {background: #FFB3B3!important;}
 
-	#player-sidebar {position: absolute; top: 0; right: 0; width: 40%; height: 100%;}
+	#player-sidebar { height: 100%; margin-top: 25px;}
 	#player-sidebar ul {overflow: auto; clear: both; position: relative; list-style: none outside none; margin-left: 15px; margin-right: 0; min-width: 242px; height: 100%;}
 	#player-sidebar ul li:hover {background-color:#D0D0D0;cursor:pointer}
 	#player-sidebar ul li:hover .jRatingColor, #player-sidebar ul li:hover .jStar, .item-hidden .jRatingColor, .item-hidden .jStar {opacity: 0.3;}
@@ -56,7 +54,6 @@
 	.thumb-text {color: #666;}
 </style>	
 
-<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
 <script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.form.js"></script>
 <script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/instantedit.js"></script>
 <script type="text/javascript">
@@ -129,7 +126,7 @@
 			function(data) {
 				
 				//replace item-hide span
-				var itemHideText = '<span class="float-right align-right item-hide-management">';
+				var itemHideText = '<span class="pull-right text-right item-hide-management">';
 				if (toHide) {
 					$("#previewItem" + itemUid).addClass("item-hidden");
 					itemHideText += '<div class="thumb-text"><fmt:message key="label.video.is.hidden" /></div>' +
@@ -211,25 +208,22 @@
 
 </script>
 
-<div id="content">
-	<h1>
-		<c:out value="${kaltura.title}" escapeXml="true"/>
-	</h1>
+<lams:Page type="learner" title="${kaltura.title}">
 
-	<p>
+	<div class="panel">
 		<c:out value="${kaltura.instructions}" escapeXml="false"/>
-	</p>
+	</div>
 
 	<c:if test="${not empty sessionMap.submissionDeadline}">
-		 <div class="info">
+		<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>
-		 </div>
+		</lams:Alert>
 	</c:if>
 
 	<c:if test="${kaltura.lockOnFinished and mode == 'learner'}">
-		<div class="info">
+		<lams:Alert type="danger" id="lock-on-finish" close="false">
 			<c:choose>
 				<c:when test="${sessionMap.userFinished}">
 					<fmt:message key="message.activityLocked" />
@@ -238,15 +232,15 @@
 					<fmt:message key="message.warnLockOnFinish" />
 				</c:otherwise>
 			</c:choose>
-		</div>
+		</lams:Alert>
 	</c:if>
 	
-	<div id="container">
-		<div id="dummy"></div>
-	
-		<div id="player-block">
+	<div class="col-xs-12 col-sm-7">
 			
-			<div id="player-wrap">
+		<div id="container">	
+			<div id="dummy"></div>
+	
+			<div id="player-block" >
 			    
 				<div id="kplayer">
 					<object height="100%" width="100%">
@@ -255,172 +249,172 @@
 				</div>
 					
 			</div>
+		</div>
+			
+		<div id="player-bottombar">
+			
+			<%--"Check for new" and "Add new image" buttons---------------%>
+		
+			<div id="add-new-item">
+				<c:if test="${sessionMap.isAllowUpload && (not finishedLock)}">
+					<a href="<c:url value='/pages/learning/uploaditem.jsp'/>?sessionMapID=${sessionMapID}&KeepThis=true&TB_iframe=true&height=570&width=740&modal=true" class="btn btn-sm btn-default thickbox">  
+						<fmt:message key="label.learning.add.new.image" />
+					</a>
+				</c:if>
+				
+				<c:if test="${sessionMap.isGroupMonitoring}">
+					<fmt:message key="label.mark" />
+					 
+					<c:choose>
+						<c:when test="${item.mark == null}">
+							<c:set var="itemMark" value="0"/>	
+						</c:when>
+						<c:otherwise>
+							<c:set var="itemMark" value="${item.mark}"/>			
+						</c:otherwise>
+					</c:choose>
+					<span id="itemMark">${itemMark}</span>
+					
+					<sup><a href="javascript:;" id="editItemMark"><fmt:message key="label.mark.edit" /></a></sup>
+				</c:if>
+			</div>
+		
+			<!--  Rating stars -->
+		
+			<c:if test="${kaltura.allowRatings && (item.uid != -1)}">
+				<%@ include file="/pages/learning/ratingStars.jsp"%>
+			</c:if>
+		</div>
+	    	
+	    <%--Comments area----------------------------------------------%>	
+	    	
+	    <c:if test="${kaltura.allowComments && (item.uid != -1)}">
+		    <div id="comments-area" class="clearfix">
+		    	<%@ include file="/pages/learning/commentlist.jsp"%>
+		    </div>
+	    </c:if>
 			    
-			<div id="player-sidebar">
-			    <ul>
-			    	<c:forEach var="previewItem" items="${sessionMap.items}" varStatus="status">
-			    		<li id="previewItem${previewItem.uid}" <c:if test="${previewItem.hidden}"> class="item-hidden" </c:if>>
-			    			<a href="<c:url value='/learning.do'/>?dispatch=viewItem&sessionMapID=${sessionMapID}&itemUid=${previewItem.uid}" class="review-item-link">
-			    				<span class="thumb-wrap">
-							        <img src="http://cdnbakmi.kaltura.com/p/${PARTNER_ID}/sp/${SUB_PARTNER_ID}/thumbnail/entry_id/${previewItem.entryId}/width/100!/height/68!" height="68" width="100" alt="Video">
-							        <em></em>
-							        <span class="duration">
-							        	<fmt:formatDate value="${previewItem.durationDate}" pattern="m:ss" />
-									</span>
-							    </span>
-							    <span class="thumb-title"><c:out value="${previewItem.title}" escapeXml="true"/></span>
+	</div>
+		
+	<div id="player-sidebar" class="col-xs-12 col-sm-5">
+		<ul>
+			<c:forEach var="previewItem" items="${sessionMap.items}" varStatus="status">
+				<li id="previewItem${previewItem.uid}" <c:if test="${previewItem.hidden}"> class="item-hidden" </c:if>>
+					<a href="<c:url value='/learning.do'/>?dispatch=viewItem&sessionMapID=${sessionMapID}&itemUid=${previewItem.uid}" class="review-item-link">
+						<span class="thumb-wrap">
+							<img src="http://cdnbakmi.kaltura.com/p/${PARTNER_ID}/sp/${SUB_PARTNER_ID}/thumbnail/entry_id/${previewItem.entryId}/width/100!/height/68!" height="68" width="100" alt="Video">
+							<em></em>
+							<span class="duration">
+								<fmt:formatDate value="${previewItem.durationDate}" pattern="m:ss" />
+							</span>
+						</span>
+						<span class="thumb-title"><c:out value="${previewItem.title}" escapeXml="true"/></span>
 							    
-							    <span class="thumb-stat">
-							    	<c:choose>
-										<c:when test="${empty previewItem.createdBy}">
-											<c:set var="videoAuthor" >
-												<fmt:message key="label.uploaded.by.instructor" />
-											</c:set>
-										</c:when>
-										<c:otherwise>
-											<c:set var="videoAuthor" >
-												<c:out value="${previewItem.createdBy.firstName} ${previewItem.createdBy.lastName}" escapeXml="true"/>
-											</c:set>
-										</c:otherwise>
-									</c:choose>
+						<span class="thumb-stat">
+						   	<c:choose>
+								<c:when test="${empty previewItem.createdBy}">
+									<c:set var="videoAuthor" >
+										<fmt:message key="label.uploaded.by.instructor" />
+									</c:set>
+								</c:when>
+								<c:otherwise>
+									<c:set var="videoAuthor" >
+										<c:out value="${previewItem.createdBy.firstName} ${previewItem.createdBy.lastName}" escapeXml="true"/>
+									</c:set>
+								</c:otherwise>
+							</c:choose>
 									
-							        <fmt:message key="label.uploaded.by" >
-							        	<fmt:param><c:out value="${videoAuthor}" escapeXml="true"/></fmt:param>
-							        </fmt:message>
-							    </span>
+							<fmt:message key="label.uploaded.by" >
+						    	<fmt:param><c:out value="${videoAuthor}" escapeXml="true"/></fmt:param>
+						    </fmt:message>
+						</span>
 							    
-							    <c:if test="${kaltura.allowRatings}">
-								    <span class="thumb-stat">
-								    	<span class="float-left"><fmt:message key="label.rating" /></span>
-								        <div class="rating-stars-disabled-small" data-average="${previewItem.averageRatingDto.rating}" data-id="${previewItem.uid}"></div>
-									</span>
-								</c:if>
+						<c:if test="${kaltura.allowRatings}">
+						    <span class="thumb-stat">
+						    	<span class="pull-left"><fmt:message key="label.rating" /></span>
+						        <div class="rating-stars-disabled-small" data-average="${previewItem.averageRatingDto.rating}" data-id="${previewItem.uid}"></div>
+							</span>
+						</c:if>
 							    
-							    <c:if test="${kaltura.allowComments && (not empty previewItem.groupComments)}">
-								    <span class="thumb-stat">
-								        <fmt:message key="label.number.of.comments" >
-								        	<fmt:param>${fn:length(previewItem.groupComments)}</fmt:param>
-								    	</fmt:message>
-									</span>
-								</c:if>
-							</a>
+						<c:if test="${kaltura.allowComments && (not empty previewItem.groupComments)}">
+							<span class="thumb-stat">
+								<fmt:message key="label.number.of.comments" >
+									<fmt:param>${fn:length(previewItem.groupComments)}</fmt:param>
+								</fmt:message>
+							</span>
+						</c:if>
+					</a>
 							
-							<c:if test="${sessionMap.isGroupMonitoring}">
-							    <span class="float-right align-right item-hide-management">
-								   	<c:choose>
-										<c:when test="${previewItem.hidden}">
-											<div class="thumb-text">
-												<fmt:message key="label.video.is.hidden" />
-											</div>
+					<c:if test="${sessionMap.isGroupMonitoring}">
+					    <span class="pull-right text-right item-hide-management">
+						   	<c:choose>
+								<c:when test="${previewItem.hidden}">
+									<div class="thumb-text">
+										<fmt:message key="label.video.is.hidden" />
+									</div>
 											
-											<a href="#nogo" onclick="return hideItem(${previewItem.uid}, false);">
-								       			<fmt:message key="label.unhide" />
-							    			</a>
-										</c:when>
-										<c:otherwise>
-											<a href="#nogo" onclick="return hideItem(${previewItem.uid}, true);">
-								       			<fmt:message key="label.hide" />
-								   			</a>
-										</c:otherwise>
-									</c:choose>
-								</span>							
-							</c:if>
+									<a href="#nogo" onclick="return hideItem(${previewItem.uid}, false);">
+						       			<fmt:message key="label.unhide" />
+					    			</a>
+								</c:when>
+								<c:otherwise>
+									<a href="#nogo" onclick="return hideItem(${previewItem.uid}, true);">
+						       			<fmt:message key="label.hide" />
+						   			</a>
+								</c:otherwise>
+							</c:choose>
+						</span>							
+					</c:if>
 							
-			    		</li>
-			    	</c:forEach>
-				</ul>
-			</div>
-		</div>
-		
-	</div>
-	
-	<div id="player-bottombar">
-		
-		<%--"Check for new" and "Add new image" buttons---------------%>
-	
-		<div id="add-new-item">
-			<c:if test="${sessionMap.isAllowUpload && (not finishedLock)}">
-				<a href="<c:url value='/pages/learning/uploaditem.jsp'/>?sessionMapID=${sessionMapID}&KeepThis=true&TB_iframe=true&height=570&width=740&modal=true" class="button-add-item thickbox">  
-					<fmt:message key="label.learning.add.new.image" />
-				</a>
-			</c:if>
-			
-			<c:if test="${sessionMap.isGroupMonitoring}">
-				<fmt:message key="label.mark" />
-				 
-				<c:choose>
-					<c:when test="${item.mark == null}">
-						<c:set var="itemMark" value="0"/>	
-					</c:when>
-					<c:otherwise>
-						<c:set var="itemMark" value="${item.mark}"/>			
-					</c:otherwise>
-				</c:choose>
-				<span id="itemMark">${itemMark}</span>
-				
-				<sup><a href="javascript:;" id="editItemMark"><fmt:message key="label.mark.edit" /></a></sup>
-			</c:if>
-		</div>
-	
-		<!--  Rating stars -->
-	
-		<c:if test="${kaltura.allowRatings && (item.uid != -1)}">
-			<%@ include file="/pages/learning/ratingStars.jsp"%>
-		</c:if>
-	</div>
-	    	
-    <%--Comments area----------------------------------------------%>	
-    	
-    <c:if test="${kaltura.allowComments && (item.uid != -1)}">
-	    <div id="comments-area">
-	    	<%@ include file="/pages/learning/commentlist.jsp"%>
-	    </div>
-    </c:if>
+			   	</li>
+		 	</c:forEach>
+		</ul>
+	</div>	
 
 	<%--Reflection--------------------------------------------------%>
 
 	<c:if test="${sessionMap.userFinished && sessionMap.reflectOn && !sessionMap.isGroupMonitoring}">
-		<div class="small-space-top">
-			<h2>
-				<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true"/>
-			</h2>
-
-			<c:choose>
-				<c:when test="${empty sessionMap.reflectEntry}">
-					<p>
-						<em> 
-							<fmt:message key="message.no.reflection.available" />
-						</em>
-					</p>
-				</c:when>
-				<c:otherwise>
-					<p>
-						<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}" />
-					</p>
-				</c:otherwise>
-			</c:choose>
-
-			<c:if test="${mode != 'teacher'}">
-				<html:button property="FinishButton" onclick="return continueReflect()" styleClass="button">
-					<fmt:message key="label.edit" />
-				</html:button>
-			</c:if>
+		<div class="col-xs-12 col-sm-12 ">
+			<div class="panel panel-default voffset10">
+				<div class="panel-heading panel-title">
+					<lams:out value="${sessionMap.reflectInstructions}" escapeHtml="true"/>
+				</div>
+	
+				<div class="panel-body">
+					<c:choose>
+						<c:when test="${empty sessionMap.reflectEntry}">
+							<em> 
+								<fmt:message key="message.no.reflection.available" />
+							</em>
+						</c:when>
+						<c:otherwise>
+							<lams:out escapeHtml="true" value="${sessionMap.reflectEntry}" />
+						</c:otherwise>
+					</c:choose>
+				</div>
+	
+				<c:if test="${mode != 'teacher'}">
+					<html:button property="FinishButton" onclick="return continueReflect()" styleClass="btn btn-default pull-left">
+						<fmt:message key="label.edit" />
+					</html:button>
+				</c:if>
+			</div>
 		</div>
 	</c:if>
 	
 	<%--Bottom buttons-------------------------------------------%>
 
 	<c:if test="${mode != 'teacher'}">
-		<div class="space-bottom-top align-right" >
+		<div class="voffset10 pull-right" style="clear:both;">
 			<c:choose>
 				<c:when	test="${sessionMap.reflectOn && (not sessionMap.userFinished)}">
-					<html:button property="FinishButton" onclick="return continueReflect()" styleClass="button" >
+					<html:button property="FinishButton" onclick="return continueReflect()" styleClass="btn btn-primary" >
 						<fmt:message key="label.continue" />
 					</html:button>
 				</c:when>
 				<c:otherwise>
-					<html:link href="#nogo" property="FinishButton" styleId="finishButton"	onclick="return finishActivity()" styleClass="button" >
-						<span class="nextActivity">
+					<html:link href="#nogo" property="FinishButton" styleId="finishButton"	onclick="return finishActivity()" styleClass="btn btn-primary pull-right" >
+						<span class="na">
 							<c:choose>
 			 					<c:when test="${sessionMap.activityPosition.last}">
 			 						<fmt:message key="button.submit" />
@@ -436,4 +430,4 @@
 		</div>
 	</c:if>
 	
-</div>
+</lams:Page>
Index: lams_tool_kaltura/web/pages/learning/notebook.jsp
===================================================================
diff -u -r9580d50f573c7a5aa3e1cd3cde1c83a517135878 -ref2f3057445dd3f802b958ab67a77abe6dbc54c0
--- lams_tool_kaltura/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision 9580d50f573c7a5aa3e1cd3cde1c83a517135878)
+++ lams_tool_kaltura/web/pages/learning/notebook.jsp	(.../notebook.jsp)	(revision ef2f3057445dd3f802b958ab67a77abe6dbc54c0)
@@ -8,43 +8,42 @@
 	function disableFinishButton() {
 		document.getElementById("finishButton").disabled = true;
 	}
-	function submitForm(methodName){
+	function submitForm(methodName) {
 		var f = document.getElementById('messageForm');
 		f.submit();
 	}
+	$(document).ready(function() {
+		document.getElementById("focused").focus();
+	});
 </script>
 	
 <html:form action="/learning.do?dispatch=submitReflection" method="post" onsubmit="disableFinishButton();" styleId="messageForm">
 	<html:hidden property="userID" />
 	<html:hidden property="sessionMapID" />
 
-	<div id="content">
-		<h1>
-			<c:out value="${kaltura.title}" escapeXml="true"/>
-		</h1>
+	<lams:Page type="learner" title="${kaltura.title}">
 
 		<%@ include file="/common/messages.jsp"%>
 
-		<p>
+		<div class="panel">
 			<lams:out value="${kaltura.reflectInstructions}" escapeHtml="true"/>
-		</p>
+		</div>
 
-		<html:textarea cols="60" rows="8" property="entryText" styleClass="text-area" />
+		<html:textarea styleId="focused" rows="5" property="entryText" styleClass="form-control" />
 
-		<div class="space-bottom-top align-right">
-			<html:link href="#nogo" styleClass="button" styleId="finishButton" onclick="submitForm('finish')">
-				<span class="nextActivity">
-					<c:choose>
-	 					<c:when test="${sessionMap.activityPosition.last}">
-	 						<fmt:message key="button.submit" />
-	 					</c:when>
-	 					<c:otherwise>
-	 		 				<fmt:message key="button.finish" />
-	 					</c:otherwise>
-	 				</c:choose>
-	 			</span>
-			</html:link>
-		</div>
-	</div>
+		<html:link href="#nogo" styleClass="btn btn-primary voffset10 pull-right" styleId="finishButton" onclick="submitForm('finish')">
+			<span class="na">
+				<c:choose>
+	 				<c:when test="${sessionMap.activityPosition.last}">
+	 					<fmt:message key="button.submit" />
+	 				</c:when>
+	 				<c:otherwise>
+	 	 				<fmt:message key="button.finish" />
+	 				</c:otherwise>
+	 			</c:choose>
+	 		</span>
+		</html:link>
+		
+	</lams:Page>
 </html:form>
 	
Index: lams_tool_kaltura/web/pages/learning/submissionDeadline.jsp
===================================================================
diff -u -r9580d50f573c7a5aa3e1cd3cde1c83a517135878 -ref2f3057445dd3f802b958ab67a77abe6dbc54c0
--- lams_tool_kaltura/web/pages/learning/submissionDeadline.jsp	(.../submissionDeadline.jsp)	(revision 9580d50f573c7a5aa3e1cd3cde1c83a517135878)
+++ lams_tool_kaltura/web/pages/learning/submissionDeadline.jsp	(.../submissionDeadline.jsp)	(revision ef2f3057445dd3f802b958ab67a77abe6dbc54c0)
@@ -12,43 +12,38 @@
 	function disableFinishButton() {
 		document.getElementById("finishButton").disabled = true;
 	}
-    function submitForm(methodName){
+    function submitForm(methodName) {
     	var f = document.getElementById('messageForm');
     	f.submit();
     }
 </script>
 
-<div id="content">
-	<h1>
-		<c:out value="${kaltura.title}" escapeXml="true"/>
-	</h1>
+<lams:Page type="learner" title="${kaltura.title}">
 
-	<div class="warning">
+	<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 test="${mode == 'learner' || mode == 'author'}">
 		<html:form action="/learning" method="post" onsubmit="disableFinishButton();" styleId="messageForm">
 			<html:hidden property="dispatch" value="finishActivity" />
 			<html:hidden property="sessionMapID" value="${sessionMapID}"/>
 
-			<div align="right" class="space-bottom-top">
-				<html:link href="#nogo" styleClass="button" styleId="finishButton" onclick="submitForm('finish')">
-					<span class="nextActivity">
-						<c:choose>
-		 					<c:when test="${sessionMap.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:link href="#nogo" styleClass="btn btn-primary voffset10 pull-right" styleId="finishButton" onclick="submitForm('finish')">
+				<span class="na">
+					<c:choose>
+		 				<c:when test="${sessionMap.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>
 	</c:if>
-</div>
+</lams:Page>
 
Index: lams_tool_kaltura/web/pages/learning/uploaditem.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -ref2f3057445dd3f802b958ab67a77abe6dbc54c0
--- lams_tool_kaltura/web/pages/learning/uploaditem.jsp	(.../uploaditem.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_kaltura/web/pages/learning/uploaditem.jsp	(.../uploaditem.jsp)	(revision ef2f3057445dd3f802b958ab67a77abe6dbc54c0)
@@ -19,7 +19,6 @@
 		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/kaltura.min.js"></script>
 		<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/swfobject.js"></script>
 		<script type="text/javascript">
-			<!--
 			//Specify Kaltura settings
 			//kaltura server 
 			var KALTURA_SERVER = "${KALTURA_SERVER}";
@@ -158,32 +157,23 @@
 				}
 			}
 		
-			// -->
 		</script>
 	</lams:head>
 
+	<c:set scope="request" var="title">
+		<fmt:message key="label.authoring.basic.video"/>
+	</c:set>
 	<body class="stripes">
-		<div id="content">
-
-			<div class="field-name">
-				<fmt:message key="label.authoring.basic.video"/>
-			</div>
+		<lams:Page type="learner" title="${title}">
 						
-			<div id="kcwHolder" style="margin-left: -20px;">		
+			<div id="kcwHolder">	
 				<div id="kcw"></div>
 			</div>
 			
-			<div  style="margin-top: 40px">
-				<lams:ImgButtonWrapper>
-					<a href="#nogo" onclick="return closeThickbox();" onmousedown="self.focus();" class="button space-left float-right" name="goback">
-						<fmt:message key="label.close" /> 
-					</a>
-				</lams:ImgButtonWrapper>
-			</div>
-		</div>
+			<a href="#nogo" onclick="return closeThickbox();" onmousedown="self.focus();" class="btn btn-sm btn-default voffset10 pull-right">
+				<fmt:message key="label.close" /> 
+			</a>
+		</lams:Page>
 		
-		<div id="footer">
-		</div>
-		
 	</body>
 </lams:html>