Index: lams_learning/web/WEB-INF/tags/Alert.tag
===================================================================
diff -u
--- lams_learning/web/WEB-INF/tags/Alert.tag	(revision 0)
+++ lams_learning/web/WEB-INF/tags/Alert.tag	(revision 5d896b9c108705c770d5294510f60ae9aa027f6d)
@@ -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_learning/web/WEB-INF/tags/Page.tag
===================================================================
diff -u
--- lams_learning/web/WEB-INF/tags/Page.tag	(revision 0)
+++ lams_learning/web/WEB-INF/tags/Page.tag	(revision 5d896b9c108705c770d5294510f60ae9aa027f6d)
@@ -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">
+				<c:if test="${not empty title}">
+					<div class="panel-heading">
+						<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 test="${not empty headingContent}">
+							<c:out value="${headingContent}" escapeXml="true" />
+						</c:if>
+					</div>
+				</c:if>
+				<div class="panel-body panel-${type}-body">
+					<jsp:doBody />
+				</div>
+			</div>
+		</div>
+		<!-- End content container -->
+	</div>
+</div>
Index: lams_learning/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r5e63656a12c02f7476564e278b43ff4ce86ac930 -r5d896b9c108705c770d5294510f60ae9aa027f6d
--- lams_learning/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 5e63656a12c02f7476564e278b43ff4ce86ac930)
+++ lams_learning/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 5d896b9c108705c770d5294510f60ae9aa027f6d)
@@ -432,6 +432,14 @@
 		<path>/WEB-INF/tags/DefineLater.tag</path>
    	</tag-file>  
    	<tag-file>
+	    <name>Alert</name>
+		<path>/WEB-INF/tags/Alert.tag</path>
+   	</tag-file>  
+   	<tag-file>
+	    <name>Page</name>
+		<path>/WEB-INF/tags/Page.tag</path>
+   	</tag-file>  
+   	<tag-file>
 	    <name>ImgButtonWrapper</name>
 		<path>/WEB-INF/tags/ImgButtonWrapper.tag</path>
    	</tag-file>
Index: lams_learning/web/css/nprogress.css
===================================================================
diff -u
--- lams_learning/web/css/nprogress.css	(revision 0)
+++ lams_learning/web/css/nprogress.css	(revision 5d896b9c108705c770d5294510f60ae9aa027f6d)
@@ -0,0 +1,74 @@
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: #337ab7;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px #337ab7, 0 0 5px #337ab7;
+  opacity: 1.0;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+      -ms-transform: rotate(3deg) translate(0px, -4px);
+          transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 15px;
+  right: 15px;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: #337ab7;
+  border-left-color: #337ab7;
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+          animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0%   { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+@keyframes nprogress-spinner {
+  0%   { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
Index: lams_learning/web/gate/conditionGateContent.jsp
===================================================================
diff -u -r849974951204f4b6aae6c21564e3a815fec12162 -r5d896b9c108705c770d5294510f60ae9aa027f6d
--- lams_learning/web/gate/conditionGateContent.jsp	(.../conditionGateContent.jsp)	(revision 849974951204f4b6aae6c21564e3a815fec12162)
+++ lams_learning/web/gate/conditionGateContent.jsp	(.../conditionGateContent.jsp)	(revision 5d896b9c108705c770d5294510f60ae9aa027f6d)
@@ -1,4 +1,5 @@
-	<%-- 
+
+<%-- 
 	Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
 	License Information: http://lamsfoundation.org/licensing/lams/2.0/
 
@@ -19,9 +20,11 @@
 	  http://www.gnu.org/licenses/gpl.txt
 	--%>
 
-	<%@ taglib uri="tags-fmt" prefix="fmt" %>
-	<%@ taglib uri="tags-lams" prefix="lams" %>
-	
-	<lams:out value="${GateForm.map.gate.description}" escapeHtml="true"/>
-	
-	<p><fmt:message key="label.condition.gate.close.message"/></p>
\ No newline at end of file
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<div class="panel">
+	<lams:out value="${GateForm.map.gate.description}" escapeHtml="true" />
+</div>
+<div class="voffset">
+	<fmt:message key="label.condition.gate.close.message" />
+</div>
\ No newline at end of file
Index: lams_learning/web/gate/gateNext.jsp
===================================================================
diff -u -r8386a3fecd9c7baf6ed69d499016dedd8a83eac6 -r5d896b9c108705c770d5294510f60ae9aa027f6d
--- lams_learning/web/gate/gateNext.jsp	(.../gateNext.jsp)	(revision 8386a3fecd9c7baf6ed69d499016dedd8a83eac6)
+++ lams_learning/web/gate/gateNext.jsp	(.../gateNext.jsp)	(revision 5d896b9c108705c770d5294510f60ae9aa027f6d)
@@ -1,18 +1,23 @@
-<c:set var="formAction" value="/gate?method=knockGate&activityID=${GateForm.map.activityID}&lessonID=${GateForm.map.lessonID }"/>
+<c:set var="formAction"
+	value="/gate?method=knockGate&activityID=${GateForm.map.activityID}&lessonID=${GateForm.map.lessonID }" />
 <c:if test="${GateForm.map.monitorCanOpenGate}">
-	<p><fmt:message key="label.gate.refresh.message"/></p>
+	<div class="voffset5">
+		<fmt:message key="label.gate.refresh.message" />
+	</div>
 </c:if>
 
 <c:if test="${GateForm.map.previewLesson == true}">
-	<p>&nbsp;</p>
-	<c:set var="formAction"><c:out value="${formAction}"/>&force=true</c:set>
-	<p><em><fmt:message key="label.gate.preview.message"/></em></p>
-	<p>&nbsp;<p>
+	<div class="voffset5">
+		<c:set var="formAction">
+			<c:out value="${formAction}" />&force=true</c:set>
+		<em><fmt:message key="label.gate.preview.message" /></em>
+	</div>
 </c:if>
 
 <html:form action="${formAction}" target="_self">
-<div class="space-bottom-top align-right">
-	<html:submit styleClass="button"><fmt:message key="label.next.button"/></html:submit>
-</div>
+	<div class="voffset10 pull-right">
+		<html:submit styleClass="btn btn-default">
+			<fmt:message key="label.next.button" />
+		</html:submit>
+	</div>
 </html:form>
-	
\ No newline at end of file
Index: lams_learning/web/gate/permissionGateContent.jsp
===================================================================
diff -u -r849974951204f4b6aae6c21564e3a815fec12162 -r5d896b9c108705c770d5294510f60ae9aa027f6d
--- lams_learning/web/gate/permissionGateContent.jsp	(.../permissionGateContent.jsp)	(revision 849974951204f4b6aae6c21564e3a815fec12162)
+++ lams_learning/web/gate/permissionGateContent.jsp	(.../permissionGateContent.jsp)	(revision 5d896b9c108705c770d5294510f60ae9aa027f6d)
@@ -1,4 +1,5 @@
-	<%-- 
+
+<%-- 
 	Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
 	License Information: http://lamsfoundation.org/licensing/lams/2.0/
 
@@ -19,10 +20,12 @@
 	  http://www.gnu.org/licenses/gpl.txt
 	--%>
 
-	<%@ taglib uri="tags-fmt" prefix="fmt" %>
-	<%@ taglib uri="tags-lams" prefix="lams" %>
-	
-	<lams:out value="${GateForm.map.gate.description}" escapeHtml="true"/>
-	
-	<p><fmt:message key="label.permission.gate.message"/></p>
-	
\ No newline at end of file
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+
+<div class="panel">
+	<lams:out value="${GateForm.map.gate.description}" escapeHtml="true" />
+</div>
+<div class="voffset5">
+	<fmt:message key="label.permission.gate.message" />
+</div>
Index: lams_learning/web/gate/scheduleGateContent.jsp
===================================================================
diff -u -r849974951204f4b6aae6c21564e3a815fec12162 -r5d896b9c108705c770d5294510f60ae9aa027f6d
--- lams_learning/web/gate/scheduleGateContent.jsp	(.../scheduleGateContent.jsp)	(revision 849974951204f4b6aae6c21564e3a815fec12162)
+++ lams_learning/web/gate/scheduleGateContent.jsp	(.../scheduleGateContent.jsp)	(revision 5d896b9c108705c770d5294510f60ae9aa027f6d)
@@ -19,81 +19,50 @@
   http://www.gnu.org/licenses/gpl.txt
 --%>
 
-<%@ taglib uri="tags-html" prefix="html" %>
-<%@ taglib uri="tags-bean" prefix="bean" %>
-<%@ taglib uri="tags-logic" prefix="logic" %>
-<%@ taglib uri="tags-core" prefix="c" %>		
-<%@ taglib uri="tags-fmt" prefix="fmt" %>
-<%@ taglib uri="tags-lams" prefix="lams" %>
+<%@ taglib uri="tags-html" prefix="html"%>
+<%@ taglib uri="tags-bean" prefix="bean"%>
+<%@ taglib uri="tags-logic" prefix="logic"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
 
-<lams:out value="${GateForm.map.gate.description}" escapeHtml="true"/>
+<div class="panel">
+	<lams:out value="${GateForm.map.gate.description}" escapeHtml="true" />
+</div>
 
+<lams:Alert type="info" close="false" id="whenOpens">
+<fmt:message key="label.schedule.gate.open.remaining" />&nbsp;<strong><time class="timeago" datetime="<fmt:formatDate value='${GateForm.map.startingTime}' pattern="yyyy-MM-dd'T'HH:mm:ss.S"/>"></time></strong>
+</lams:Alert>
+
 <c:choose>
 	<c:when test="${not empty GateForm.map.reachDate}">
-		<p><fmt:message key="label.schedule.gate.reach"/> <lams:Date value="${GateForm.map.reachDate}"/><br />
-		   <fmt:message key="label.schedule.gate.offset.1"/> <span id="offset"></span> <fmt:message key="label.schedule.gate.offset.2"/>
+		<p>
+			<fmt:message key="label.schedule.gate.reach" />
+			<strong><lams:Date value="${GateForm.map.reachDate}" /></strong>
+			<br />
+			<fmt:message key="label.schedule.gate.offset.1" />
+			<span id="offset"></span>
+			<fmt:message key="label.schedule.gate.offset.2" />
 		</p>
 	</c:when>
 	<c:otherwise>
 		<c:if test="${GateForm.map.startingTime!=null}">
-			<p><fmt:message key="label.schedule.gate.open.message"/> <lams:Date value="${GateForm.map.startingTime}"/></p>
+			<p>
+				<fmt:message key="label.schedule.gate.open.message" />&nbsp;<strong><lams:Date value="${GateForm.map.startingTime}" /></strong>
+			</p>
 		</c:if>
 		<c:if test="${GateForm.map.endingTime!=null}">
-			<p><fmt:message key="label.schedule.gate.close.message"/> <lams:Date value="${GateForm.map.endingTime}"/></p>
+			<p>
+				<fmt:message key="label.schedule.gate.close.message" />
+				<lams:Date value="${GateForm.map.endingTime}" />
+			</p>
 		</c:if>
 	</c:otherwise>
 </c:choose>
 
-<fmt:message key="label.schedule.gate.open.remaining"/> <span id="remaining"></span>
-
-<script type="text/javascript">
-	function buildDateString(offset, longFormat) {
-		var result = "",
-			day = 24*60*60,
-			offsetDay = Math.floor(offset/day);
-		offset -= offsetDay * day;
-		var offsetHour = Math.floor(offset/(60*60));
-		offset -= offsetHour * 60 * 60;
-		var offsetMinute =  Math.floor(offset/60);
-		
-		if (offsetDay > 0) {
-			result = offsetDay + " " + dayLabel + " ";
-		}
-		if (offsetHour > 0) {
-			result += offsetHour + " " + hourLabel + " ";
-		}
-		if (offsetMinute > 0) {
-			result += offsetMinute + " " + minuteLabel + " ";
-		}
-		if (longFormat) {
-			var offsetSecond = offset - offsetMinute * 60;
-			result += offsetSecond + " " + secondLabel;
-		}
-		return result;
-	}
-
-	var dayLabel = '<fmt:message key="label.days"/>',
-		hourLabel = '<fmt:message key="label.hours"/>',
-		minuteLabel = '<fmt:message key="label.minutes"/>',
-		secondLabel = '<fmt:message key="label.seconds"/>',
-		offsetField = document.getElementById('offset'),
-		remainingField = document.getElementById('remaining'),
-		remainTime = ${GateForm.map.remainTime};
-
-	setInterval(function(){
-		remainTime--;
-		if (remainTime <= 0) {
-			document.location.reload();
-		} else {
-			var remainingFieldText = buildDateString(remainTime, true);
-			remainingField.innerHTML = remainingFieldText;
-		}
-	}, 1000);
-		
-	if (offsetField != null) {
-		var offset = '${GateForm.map.startOffset}',
-			offsetFieldText = buildDateString(+offset, false);
-		offsetField.innerHTML = offsetFieldText;
-	}
-
-</script>
\ No newline at end of file
+  <script type="text/javascript">
+    jQuery(document).ready(function() {
+    	jQuery.timeago.settings.allowFuture = true;
+      jQuery("time.timeago").timeago();
+    });
+  </script>
\ No newline at end of file
Index: lams_learning/web/gate/synchGateContent.jsp
===================================================================
diff -u -r849974951204f4b6aae6c21564e3a815fec12162 -r5d896b9c108705c770d5294510f60ae9aa027f6d
--- lams_learning/web/gate/synchGateContent.jsp	(.../synchGateContent.jsp)	(revision 849974951204f4b6aae6c21564e3a815fec12162)
+++ lams_learning/web/gate/synchGateContent.jsp	(.../synchGateContent.jsp)	(revision 5d896b9c108705c770d5294510f60ae9aa027f6d)
@@ -19,18 +19,26 @@
   http://www.gnu.org/licenses/gpl.txt
 --%>
 
-<%@ taglib uri="tags-html" prefix="html" %>
-<%@ taglib uri="tags-bean" prefix="bean" %>
-<%@ taglib uri="tags-logic" prefix="logic" %>
-<%@ taglib uri="tags-core" prefix="c" %>		
-<%@ taglib uri="tags-fmt" prefix="fmt" %>
-<%@ taglib uri="tags-lams" prefix="lams" %>
+<%@ taglib uri="tags-html" prefix="html"%>
+<%@ taglib uri="tags-bean" prefix="bean"%>
+<%@ taglib uri="tags-logic" prefix="logic"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
 
-<lams:out value="${GateForm.map.gate.description}" escapeHtml="true"/>
+<div class="panel">
+	<lams:out value="${GateForm.map.gate.description}" escapeHtml="true" />
+</div>
 
-<p><fmt:message key="label.synch.gate.message"/></p> 
-<p><fmt:message key="label.gate.waiting.learners">  
-		<fmt:param value="${GateForm.map.waitingLearners}"/>
-		<fmt:param value="${GateForm.map.totalLearners}"/>
-	</fmt:message></p>
+<lams:Alert type="info" close="false" id="waitingAtTheGate">
+	<fmt:message key="label.gate.waiting.learners">
+		<fmt:param value="${GateForm.map.waitingLearners}" />
+		<fmt:param value="${GateForm.map.totalLearners}" />
+	</fmt:message>
+</lams:Alert>
 
+
+<div class="voffset5">
+	<fmt:message key="label.synch.gate.message" />
+</div>
+
Index: lams_learning/web/grouping/choose.jsp
===================================================================
diff -u -rfb44371b6225fdfe2cba7781170998ef034126ce -r5d896b9c108705c770d5294510f60ae9aa027f6d
--- lams_learning/web/grouping/choose.jsp	(.../choose.jsp)	(revision fb44371b6225fdfe2cba7781170998ef034126ce)
+++ lams_learning/web/grouping/choose.jsp	(.../choose.jsp)	(revision 5d896b9c108705c770d5294510f60ae9aa027f6d)
@@ -19,64 +19,56 @@
   http://www.gnu.org/licenses/gpl.txt
 --%>
 
-<%@ taglib uri="tags-html" prefix="html" %>
-<%@ taglib uri="tags-bean" prefix="bean" %>
-<%@ taglib uri="tags-logic" prefix="logic" %>
-<%@ taglib uri="tags-core" prefix="c" %>		
-<%@ taglib uri="tags-fmt" prefix="fmt" %>
-<%@ taglib uri="tags-function" prefix="fn" %>
-	
+<%@ taglib uri="tags-html" prefix="html"%>
+<%@ taglib uri="tags-bean" prefix="bean"%>
+<%@ taglib uri="tags-logic" prefix="logic"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-function" prefix="fn"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
 
-	<div id="content">
-		<h1><c:out value="${title}"/></h1>
-		<p>&nbsp;</p>
-		<p><fmt:message key="label.learner.choice.group.message"/></p>
-		
-		<table class="alternative-color" cellspacing="0">
+
+<lams:Page type="learner" title="${title}">
+
+	<div class="panel">
+		<fmt:message key="label.learner.choice.group.message" />
+	</div>
+
+	<div class="table-responsive">
+		<table class="table table-condensed table-hover">
 			<tr>
-				<th width="25%" class="first">
-					<fmt:message key="label.view.groups.title"/>
-				</th>
-				<th>
-					<c:if test="${viewStudentsBeforeSelection}">
-						<fmt:message key="label.view.groups.learners"/>
-					</c:if>
-				</th>
-				<th>
-				</th>
+				<th width="25%" class="first"><fmt:message key="label.view.groups.title" /></th>
+				<th><c:if test="${viewStudentsBeforeSelection}">
+						<fmt:message key="label.view.groups.learners" />
+					</c:if></th>
+				<th></th>
 			</tr>
-			<logic:iterate id="group" name="groups"> 
-			<tr>
-				<td width="25%" class="first">
-					<c:out value="${group.groupName}"/>
-				</td>
-				<td width="60%">
-					<c:if test="${viewStudentsBeforeSelection}">
-						<c:forEach items="${group.users}" var="user">
-							<c:out value="${user.firstName}"/> <c:out value="${user.lastName}"/><BR>
-						</c:forEach>
+			<logic:iterate id="group" name="groups">
+				<tr>
+					<td width="25%" class="first"><strong><c:out value="${group.groupName}" /></strong></td>
+					<td width="60%"><c:if test="${viewStudentsBeforeSelection}">
+							<c:forEach items="${group.users}" var="user">
+								<i class="fa fa-sm fa-user"></i>&nbsp;<c:out value="${user.firstName}" />&nbsp;<c:out value="${user.lastName}" />
+								<BR>
+							</c:forEach>
 						&nbsp;
-					</c:if>
-				</td>
-				<td>
-				<c:choose>
-					<c:when test="${not empty maxLearnersPerGroup and fn:length(group.users)>=maxLearnersPerGroup}">
-						<fmt:message key="label.learner.choice.group.full"/>
-					</c:when>
-					<c:otherwise>
-						<html:form action="/grouping.do?method=learnerChooseGroup&userId=${user.userID}&activityID=${activityID}&groupId=${group.groupId}" target="_self">
-							<html:submit styleClass="button"><fmt:message key="label.choose.group.button"/></html:submit>
-						</html:form>
-					</c:otherwise>
-				</c:choose>
-				</td>
-			</tr>
+					</c:if></td>
+					<td><c:choose>
+							<c:when test="${not empty maxLearnersPerGroup and fn:length(group.users)>=maxLearnersPerGroup}">
+								<fmt:message key="label.learner.choice.group.full" />
+							</c:when>
+							<c:otherwise>
+								<html:form
+									action="/grouping.do?method=learnerChooseGroup&userId=${user.userID}&activityID=${activityID}&groupId=${group.groupId}"
+									target="_self">
+									<html:submit styleClass="btn btn-sm btn-default">
+										<fmt:message key="label.choose.group.button" />
+									</html:submit>
+								</html:form>
+							</c:otherwise>
+						</c:choose></td>
+				</tr>
 			</logic:iterate>
 		</table>
-
-	</div>  <!--closes content-->
-
-	<div id="footer">
-	</div><!--closes footer-->
-
-</div>
\ No newline at end of file
+	</div>
+</lams:Page>
Index: lams_learning/web/grouping/show.jsp
===================================================================
diff -u -rfb44371b6225fdfe2cba7781170998ef034126ce -r5d896b9c108705c770d5294510f60ae9aa027f6d
--- lams_learning/web/grouping/show.jsp	(.../show.jsp)	(revision fb44371b6225fdfe2cba7781170998ef034126ce)
+++ lams_learning/web/grouping/show.jsp	(.../show.jsp)	(revision 5d896b9c108705c770d5294510f60ae9aa027f6d)
@@ -19,71 +19,97 @@
   http://www.gnu.org/licenses/gpl.txt
 --%>
 
-<%@ taglib uri="tags-html" prefix="html" %>
-<%@ taglib uri="tags-bean" prefix="bean" %>
-<%@ taglib uri="tags-logic" prefix="logic" %>
-<%@ taglib uri="tags-core" prefix="c" %>		
-<%@ taglib uri="tags-fmt" prefix="fmt" %>
+<%@ taglib uri="tags-html" prefix="html"%>
+<%@ taglib uri="tags-bean" prefix="bean"%>
+<%@ taglib uri="tags-logic" prefix="logic"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<style type="text/css">
+.user-container {
+	padding: 2px;
+}
 
-	<html:form action="/grouping.do?method=completeActivity&userId=${user.userID}&lessonId=${lesson.lessonId}&activityID=${activityID}" target="_self" styleId="messageForm">
+.you {
+	font-weight: bolder;
+}
+</style>
+<lams:Page type="learner" title="${title}">
 
-	<div id="content">
+	<html:form
+		action="/grouping.do?method=completeActivity&userId=${user.userID}&lessonId=${lesson.lessonId}&activityID=${activityID}"
+		target="_self" styleId="messageForm">
 
-		<h1><c:out value="${title}"/></h1>
+		<c:set var="userId" value="${user.userID}" />
 
-		<table class="alternative-color" cellspacing="0">
-			<tr>
-				<th width="25%" class="first">
-					<fmt:message key="label.view.groups.title"/>
-				</th>
-				<th>
-					<fmt:message key="label.view.groups.learners"/>
-				</th>
-			</tr>
-			<logic:iterate id="group" name="groups"> 
-			<tr>
-				<td width="25%" class="first">
-					<c:out value="${group.groupName}"/>
-				</td>
-				<td>
-					<c:forEach items="${group.users}" var="user">
-						<c:out value="${user.firstName}"/> <c:out value="${user.lastName}"/><BR>
-					</c:forEach>
-					&nbsp;
-				</td>
-			</tr>
-			</logic:iterate>
-		</table>
+		<div class="panel panel-default">
+			<div class="panel-heading panel-title">
+				<i class="fa fa-sm fa-users text-primary"></i>&nbsp;
+				<fmt:message key="label.view.groups.title" />
+			</div>
+			<div class="panel-body">
 
-	<c:if test="${finishedButton}">
-	      <script type="text/javascript">
-	        function submitForm(methodName){
-                	 var f = document.getElementById('messageForm');
-                	 f.submit();
-		}
-	      </script>
+				<div class="table-responsive">
+					<table class="table table-condensed table-hover" cellspacing="0">
+						<logic:iterate id="group" name="groups">
+							<tr>
+								<td width="15%"><strong><c:out value="${group.groupName}" /></strong></td>
+								<td><c:forEach items="${group.users}" var="user">
+										<div name="u-${user.userId}" class="user-container">
+											<i name="ui-${user.userId}" class="fa fa-xs fa-user"></i>&nbsp;<c:out value="${user.firstName}" />&nbsp<c:out value="${user.lastName}" />
+										</div>
+									</c:forEach></td>
+							</tr>
+						</logic:iterate>
+					</table>
+				</div>
 
-			<table><tr><td><div id="right" class="right-buttons">
-					<html:link href="javascript:;" styleClass="button" styleId="finishButton" onclick="submitForm('finish')">
-					  <span class="nextActivity">
-	                    <c:choose>
-		 					<c:when test="${activityPosition.last}">
-		 						<fmt:message key="label.submit.button" />
-		 					</c:when>
-		 					<c:otherwise>
-		 		 				<fmt:message key="label.finish.button" />
-		 					</c:otherwise>
-		 				</c:choose>
-		 			 </span>
-					 </html:link>
-			</div></td></tr></table>
-	</c:if>
+			</div>
+		</div>
 
-	</div>  <!--closes content-->
+		<c:if test="${finishedButton}">
+			<script type="text/javascript">
+				function submitForm(methodName) {
+					var f = document.getElementById('messageForm');
+					f.submit();
+				}
+			</script>
 
-	<div id="footer">
-	</div><!--closes footer-->
+			<div class="row no-gutter">
+				<div class="col-xs-12">
+					<div id="right-buttons" class="pull-right voffset10">
+						<html:link href="javascript:;" styleClass="btn btn btn-primary na" styleId="finishButton"
+							onclick="submitForm('finish')">
+							<span class="nextActivity"> <c:choose>
+									<c:when test="${activityPosition.last}">
+										<fmt:message key="label.submit.button" />
+									</c:when>
+									<c:otherwise>
+										<fmt:message key="label.finish.button" />
+									</c:otherwise>
+								</c:choose>
+							</span>
+						</html:link>
+					</div>
 
-	</html:form>
+				</div>
+			</div>
+		</c:if>
 
-</div>
\ No newline at end of file
+
+		<div id="footer"></div>
+		<!--closes footer-->
+		<script type="text/javascript">
+			function codeAddress() {
+				var youUser = document.getElementsByName('u-${userId}');
+				if (youUser) {
+					youUser[0].className += ' alert-success you';
+					document.getElementsByName('ui-${userId}')[0].className = 'fa fa-sm fa-star';
+				}
+			}
+			window.onload = codeAddress;
+		</script>
+
+
+	</html:form>
+</lams:Page>
\ No newline at end of file
Index: lams_learning/web/grouping/wait.jsp
===================================================================
diff -u -rca73a51b45e6071a6a9edd5da8b0d61bf3a39929 -r5d896b9c108705c770d5294510f60ae9aa027f6d
--- lams_learning/web/grouping/wait.jsp	(.../wait.jsp)	(revision ca73a51b45e6071a6a9edd5da8b0d61bf3a39929)
+++ lams_learning/web/grouping/wait.jsp	(.../wait.jsp)	(revision 5d896b9c108705c770d5294510f60ae9aa027f6d)
@@ -19,41 +19,39 @@
   http://www.gnu.org/licenses/gpl.txt
 --%>
 
-<%@ taglib uri="tags-html" prefix="html" %>
-<%@ taglib uri="tags-bean" prefix="bean" %>
-<%@ taglib uri="tags-logic" prefix="logic" %>
-<%@ taglib uri="tags-core" prefix="c" %>		
-<%@ taglib uri="tags-fmt" prefix="fmt" %>
-<%@ taglib uri="tags-lams" prefix="lams" %>
+<%@ taglib uri="tags-html" prefix="html"%>
+<%@ taglib uri="tags-bean" prefix="bean"%>
+<%@ taglib uri="tags-logic" prefix="logic"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
 
-	<c:set var="formAction">/grouping.do?method=performGrouping&activityID=${activity.activityId}</c:set>
-	<c:if test="${GroupingForm.map.previewLesson == true}">
-		<c:set var="formAction"><c:out value="${formAction}"/>&force=true</c:set>
-	</c:if>
+<c:set var="formAction">/grouping.do?method=performGrouping&activityID=${activity.activityId}</c:set>
+<c:if test="${GroupingForm.map.previewLesson == true}">
+	<c:set var="formAction">
+		<c:out value="${formAction}" />&force=true</c:set>
+</c:if>
 
+<lams:Page type="learner" title="${GroupingForm.map.title}">
 	<html:form action="${formAction}" target="_self">
 
+		<lams:Alert id="waitingGroups" close="false" type="info">
+			<fmt:message key="label.view.view.groups.wait.message" />
+		</lams:Alert>
 
-		<div id="content">
-		
-			<h1><c:out value="${GroupingForm.map.title}"/></h1>
-			
-			<p>&nbsp;</p>
+		<c:if test="${GroupingForm.map.previewLesson == true}">
+			<c:set var="formAction">
+				<c:out value="${formAction}" />&force=true</c:set>
+			<div class="voffset10">
+				<em><fmt:message key="label.grouping.preview.message" /></em>
+			</div>
+		</c:if>
 
-			<p><fmt:message key="label.view.view.groups.wait.message"/></p>
+		<div class="right-buttons">
+			<html:submit styleClass="btn btn-primary pull-right">
+				<fmt:message key="label.next.button" />
+			</html:submit>
+		</div>
 
-			<c:if test="${GroupingForm.map.previewLesson == true}">
-				<c:set var="formAction"><c:out value="${formAction}"/>&force=true</c:set>
-				<p><em><fmt:message key="label.grouping.preview.message"/></em></p>
-			</c:if>
-
-			<table><tr><td><div class="right-buttons">
-					<html:submit styleClass="button"><fmt:message key="label.next.button"/></html:submit>
-			</div></td></tr></table>
-
-		</div>  <!--closes content-->
-
-		<div id="footer">
-		</div><!--closes footer-->
-
 	</html:form>
+</lams:Page>
\ No newline at end of file
Index: lams_learning/web/includes/javascript/nprogress.js
===================================================================
diff -u
--- lams_learning/web/includes/javascript/nprogress.js	(revision 0)
+++ lams_learning/web/includes/javascript/nprogress.js	(revision 5d896b9c108705c770d5294510f60ae9aa027f6d)
@@ -0,0 +1 @@
+!function(n,e){"function"==typeof define&&define.amd?define(e):"object"==typeof exports?module.exports=e():n.NProgress=e()}(this,function(){function n(n,e,t){return e>n?e:n>t?t:n}function e(n){return 100*(-1+n)}function t(n,t,r){var i;return i="translate3d"===c.positionUsing?{transform:"translate3d("+e(n)+"%,0,0)"}:"translate"===c.positionUsing?{transform:"translate("+e(n)+"%,0)"}:{"margin-left":e(n)+"%"},i.transition="all "+t+"ms "+r,i}function r(n,e){var t="string"==typeof n?n:o(n);return t.indexOf(" "+e+" ")>=0}function i(n,e){var t=o(n),i=t+e;r(t,e)||(n.className=i.substring(1))}function s(n,e){var t,i=o(n);r(n,e)&&(t=i.replace(" "+e+" "," "),n.className=t.substring(1,t.length-1))}function o(n){return(" "+(n.className||"")+" ").replace(/\s+/gi," ")}function a(n){n&&n.parentNode&&n.parentNode.removeChild(n)}var u={};u.version="0.2.0";var c=u.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'<div class="bar" role="bar"><div class="peg"></div></div><div class="spinner" role="spinner"><div class="spinner-icon"></div></div>'};u.configure=function(n){var e,t;for(e in n)t=n[e],void 0!==t&&n.hasOwnProperty(e)&&(c[e]=t);return this},u.status=null,u.set=function(e){var r=u.isStarted();e=n(e,c.minimum,1),u.status=1===e?null:e;var i=u.render(!r),s=i.querySelector(c.barSelector),o=c.speed,a=c.easing;return i.offsetWidth,l(function(n){""===c.positionUsing&&(c.positionUsing=u.getPositioningCSS()),f(s,t(e,o,a)),1===e?(f(i,{transition:"none",opacity:1}),i.offsetWidth,setTimeout(function(){f(i,{transition:"all "+o+"ms linear",opacity:0}),setTimeout(function(){u.remove(),n()},o)},o)):setTimeout(n,o)}),this},u.isStarted=function(){return"number"==typeof u.status},u.start=function(){u.status||u.set(0);var n=function(){setTimeout(function(){u.status&&(u.trickle(),n())},c.trickleSpeed)};return c.trickle&&n(),this},u.done=function(n){return n||u.status?u.inc(.3+.5*Math.random()).set(1):this},u.inc=function(e){var t=u.status;return t?("number"!=typeof e&&(e=(1-t)*n(Math.random()*t,.1,.95)),t=n(t+e,0,.994),u.set(t)):u.start()},u.trickle=function(){return u.inc(Math.random()*c.trickleRate)},function(){var n=0,e=0;u.promise=function(t){return t&&"resolved"!==t.state()?(0===e&&u.start(),n++,e++,t.always(function(){e--,0===e?(n=0,u.done()):u.set((n-e)/n)}),this):this}}(),u.render=function(n){if(u.isRendered())return document.getElementById("nprogress");i(document.documentElement,"nprogress-busy");var t=document.createElement("div");t.id="nprogress",t.innerHTML=c.template;var r,s=t.querySelector(c.barSelector),o=n?"-100":e(u.status||0),l=document.querySelector(c.parent);return f(s,{transition:"all 0 linear",transform:"translate3d("+o+"%,0,0)"}),c.showSpinner||(r=t.querySelector(c.spinnerSelector),r&&a(r)),l!=document.body&&i(l,"nprogress-custom-parent"),l.appendChild(t),t},u.remove=function(){s(document.documentElement,"nprogress-busy"),s(document.querySelector(c.parent),"nprogress-custom-parent");var n=document.getElementById("nprogress");n&&a(n)},u.isRendered=function(){return!!document.getElementById("nprogress")},u.getPositioningCSS=function(){var n=document.body.style,e="WebkitTransform"in n?"Webkit":"MozTransform"in n?"Moz":"msTransform"in n?"ms":"OTransform"in n?"O":"";return e+"Perspective"in n?"translate3d":e+"Transform"in n?"translate":"margin"};var l=function(){function n(){var t=e.shift();t&&t(n)}var e=[];return function(t){e.push(t),1==e.length&&n()}}(),f=function(){function n(n){return n.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,function(n,e){return e.toUpperCase()})}function e(n){var e=document.body.style;if(n in e)return n;for(var t,r=i.length,s=n.charAt(0).toUpperCase()+n.slice(1);r--;)if(t=i[r]+s,t in e)return t;return n}function t(t){return t=n(t),s[t]||(s[t]=e(t))}function r(n,e,r){e=t(e),n.style[e]=r}var i=["Webkit","O","Moz","ms"],s={};return function(n,e){var t,i,s=arguments;if(2==s.length)for(t in e)i=e[t],void 0!==i&&e.hasOwnProperty(t)&&r(n,t,i);else r(n,s[1],s[2])}}();return u});
\ No newline at end of file
Index: lams_learning/web/layout/gateLayout.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -r5d896b9c108705c770d5294510f60ae9aa027f6d
--- lams_learning/web/layout/gateLayout.jsp	(.../gateLayout.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_learning/web/layout/gateLayout.jsp	(.../gateLayout.jsp)	(revision 5d896b9c108705c770d5294510f60ae9aa027f6d)
@@ -21,31 +21,34 @@
 
 <%@ include file="/common/taglibs.jsp"%>
 
+<c:set var="lams">
+	<lams:LAMSURL />
+</c:set>
+
 <!DOCTYPE html>
 <lams:html xhtml="true">
 
-	<lams:head>
-		<title><c:out value="${GateForm.map.gate.title}"/></title>
-		<lams:css/>
-		<META HTTP-EQUIV="Refresh" CONTENT="60;URL=<lams:WebAppURL/>/gate.do?method=knockGate&activityID=${GateForm.map.activityID}&lessonID=${GateForm.map.lessonID }">
-	  </lams:head>
-
-	<body class="stripes">
+<lams:head>
+	<title><c:out value="${GateForm.map.gate.title}" /></title>
+	<lams:css />
+	<META HTTP-EQUIV="Refresh"
+		CONTENT="60;URL=<lams:WebAppURL/>/gate.do?method=knockGate&activityID=${GateForm.map.activityID}&lessonID=${GateForm.map.lessonID }">
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.timeago.js"></script>
 		
+		
+</lams:head>
 
-			<div id="content">
+<body class="stripes">
 
-				<h1><c:out value="${GateForm.map.gate.title}"/></h1>
 
-				<tiles:insert attribute="body" />
-				<%@ include file="../gate/gateNext.jsp" %>			  
+	<lams:Page type="learner" title="${GateForm.map.gate.title}">
 
-			</div>  <!--closes content-->
+		<tiles:insert attribute="body" />
+		<%@ include file="../gate/gateNext.jsp"%>
 
 
-			<div id="footer">
-			</div><!--closes footer-->
+	</lams:Page>
+</body>
 
-	</body>
-
 </lams:html>
Index: lams_learning/web/layout/layout.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -r5d896b9c108705c770d5294510f60ae9aa027f6d
--- lams_learning/web/layout/layout.jsp	(.../layout.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_learning/web/layout/layout.jsp	(.../layout.jsp)	(revision 5d896b9c108705c770d5294510f60ae9aa027f6d)
@@ -32,6 +32,8 @@
 <tiles:useAttribute name="includeBodyTag" ignore="true" />
 
 
+	
+
 <lams:head>
 	<title><fmt:message key="${pageTitleKey}" />
 	</title>
@@ -42,6 +44,7 @@
 	</c:set>
 	<script src="${lams}includes/javascript/AC_RunActiveContent.js"
 		type="text/javascript"></script>
+		
 	<script type="text/javascript"
 		src="${lams}includes/javascript/common.js"></script>
 </lams:head>
Index: lams_learning/web/loadToolActivity.jsp
===================================================================
diff -u -rb33e717f9a734d318eefab07a17234f07c770c92 -r5d896b9c108705c770d5294510f60ae9aa027f6d
--- lams_learning/web/loadToolActivity.jsp	(.../loadToolActivity.jsp)	(revision b33e717f9a734d318eefab07a17234f07c770c92)
+++ lams_learning/web/loadToolActivity.jsp	(.../loadToolActivity.jsp)	(revision 5d896b9c108705c770d5294510f60ae9aa027f6d)
@@ -18,46 +18,64 @@
 
   http://www.gnu.org/licenses/gpl.txt
 --%>
-
 <!-- Load Tool Activity (comment needed for the test harness) -->
 
-<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=utf-8" %>
-<%@ taglib uri="tags-bean" prefix="bean"%> 
+<%@ page language="java" pageEncoding="UTF-8" contentType="text/html;charset=utf-8"%>
+<%@ taglib uri="tags-bean" prefix="bean"%>
 <%@ taglib uri="tags-html" prefix="html"%>
 <%@ taglib uri="tags-core" prefix="c"%>
-<%@ taglib uri="tags-fmt" prefix="fmt" %>
-<%@ taglib uri="tags-lams" prefix="lams" %>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<c:set var="learnerAppUrl">
+	<lams:WebAppURL />
+</c:set>
+<link href="${learnerAppUrl}css/nprogress.css" rel="stylesheet" type="text/css" />
+<script type="text/javascript" src="${learnerAppUrl}includes/javascript/nprogress.js"></script>
 
-<div id="content">
-	<c:if test="${!empty activityForm.activityURLs}">
-		
-		<script  type="text/javascript">
-			function redirectPage() {
-				setTimeout("doRedirect()", 1000);
-			}
-			
-			function doRedirect() {
-				var url = "<c:out value='${activityForm.activityURLs[0].url}' escapeXml="false" />";
-				if ( url.substring(0,4)!="http" ) {
-					if ( url.substring(0,1)=="/" ) {
-						url = "<lams:WebAppURL/>.."+url;
-					} else {
-						url = "<lams:WebAppURL/>../"+url;
-					}
+
+
+<c:if test="${!empty activityForm.activityURLs}">
+
+	<script type="text/javascript">
+		function redirectPage() {
+			NProgress.configure({
+				easing : 'ease',
+				speed : 30
+			});
+			NProgress.configure({
+				trickleRate : 0.2,
+				trickleSpeed : 110
+			});
+			NProgress.start();
+			setTimeout("doRedirect()", 1000);
+
+		}
+
+		function doRedirect() {
+			var url = "<c:out value='${activityForm.activityURLs[0].url}' escapeXml="false" />";
+			if (url.substring(0, 4) != "http") {
+				if (url.substring(0, 1) == "/") {
+					url = "${learnerAppUrl}.." + url;
+				} else {
+					url = "${learnerAppUrl}../" + url;
 				}
-				window.location.href = url;
 			}
-		</script>
+			window.location.href = url;
+		}
+	</script>
 
-		<script language="JavaScript" type="text/JavaScript">
-			window.onload = redirectPage;
-		</script>
-		
-		<p><fmt:message key="message.activity.loading"/></p>
-	</c:if>
+	<script language="JavaScript" type="text/JavaScript">
+		window.onload = redirectPage;
+	</script>
 
-</div>  <!--closes content-->
+	<lams:Page type="admin">
+		<div class="text-center" style="margin-top: 10px; margin-bottom: 15px;">
+			<i class="fa fa-2x fa-refresh fa-spin text-primary"></i>
+			<p class="voffset5">
+				<fmt:message key="message.activity.loading" />
+			</p>
+		</div>
+	</lams:Page>
+	 
 
-
-<div id="footer">
-</div><!--closes footer-->
+</c:if>