Index: lams_learning/web/optionsActivity.jsp
===================================================================
diff -u -r606581007abbdaee5483777096f32ffac1c3e3eb -r02e61ba9a9752984ac1296ac635e4d61c7ce5d2c
--- lams_learning/web/optionsActivity.jsp	(.../optionsActivity.jsp)	(revision 606581007abbdaee5483777096f32ffac1c3e3eb)
+++ lams_learning/web/optionsActivity.jsp	(.../optionsActivity.jsp)	(revision 02e61ba9a9752984ac1296ac635e4d61c7ce5d2c)
@@ -6,10 +6,11 @@
 	}
 %>
 
-<script language="JavaScript" type="text/JavaScript"><!--
+<script language="JavaScript" type="text/JavaScript">
+<!--
 	function validate() {
 		var validated = false;
-		
+
 		var form = document.forms[0];
 		var elements = form.elements;
 		for (var i = 0; i < elements.length; i++) {
@@ -23,111 +24,97 @@
 		if (!validated) {
 			alert("<fmt:message key="message.activity.options.noActivitySelected" />");
 			return false;
-		}
-		else {
+		} else {
 			return true;
 		}
 	}
-         function submitForm(methodName){
-                var f = document.getElementById('messageForm');
-                f.submit();
-        }
-
-	//-->
+	function submitForm(methodName) {
+		var f = document.getElementById('messageForm');
+		f.submit();
+	}
+//-->
 </script>
 
-<div id="content">
-	<h1>
-		<c:out value="${optionsActivityForm.title}" />
-	</h1>
+<lams:Page type="learner" title="${optionsActivityForm.title}">
 
 	<c:if test="${not empty optionsActivityForm.description}">
-		<p>
+		<div class="panel">
 			<c:out value="${optionsActivityForm.description}" />
-		</p>
+		</div>
 	</c:if>
 
 	<div class="group-box">
 
+		<html:form action="/ChooseActivity" method="post" onsubmit="return validate();">
+			<input type="hidden" name="lams_token" value="<c:out value='${lams_token}' />">
 
-		<html:form action="/ChooseActivity" method="post"
-			onsubmit="return validate();">
-			<input type="hidden" name="lams_token"
-				value="<c:out value='${lams_token}' />" >
+			<div class="options">
 
-			<table class="alternative-color" cellspacing="0">
-				<c:forEach items="${optionsActivityForm.activityURLs}"
-					var="activityURL" varStatus="loop">
+				<c:if test="${optionsActivityForm.maximum != numActivities or optionsActivityForm.minimum != 0}">
+					<lams:Alert id="options" close="false" type="danger">
+						<c:choose>
+							<c:when test="${isOptionsWithSequencesActivity}">
+								<fmt:message key="message.activity.set.options.activityCount">
+									<fmt:param value="${optionsActivityForm.minimum}" />
+									<fmt:param value="${optionsActivityForm.maximum}" />
+								</fmt:message>
+							</c:when>
+							<c:otherwise>
+								<fmt:message key="message.activity.options.activityCount">
+									<fmt:param value="${optionsActivityForm.minimum}" />
+									<fmt:param value="${optionsActivityForm.maximum}" />
+								</fmt:message>
+							</c:otherwise>
+						</c:choose>
+					</lams:Alert>
+				</c:if>
+
+				<c:forEach items="${optionsActivityForm.activityURLs}" var="activityURL" varStatus="loop">
 					<c:set var="numActivities" value="${loop.count}" />
-					<tr>
-						<td width="2%">
-							<c:choose>
-								<c:when test="${not activityURL.complete and not optionsActivityForm.maxActivitiesReached}">
-									<input type="radio" name="activityID" class="noBorder"
-										id="activityID-${activityURL.activityId}"
-										value="${activityURL.activityId}">
-								
-								
-								</c:when>
-								<c:when test="${activityURL.complete}">
-									<img src="<lams:LAMSURL/>/images/tick.gif" />
-								</c:when>
-							</c:choose>
-						</td>
-						<td>
-							<c:choose>
-								<c:when test="${not activityURL.complete}">
-									<label for="activityID-${activityURL.activityId}">
+					<div class="form-group">
+						<div class="radio">
+							<label> <c:choose>
+									<c:when test="${not activityURL.complete and not optionsActivityForm.maxActivitiesReached}">
+										<input type="radio" name="activityID" class="noBorder" id="activityID-${activityURL.activityId}"
+											value="${activityURL.activityId}">
+									</c:when>
+									<c:when test="${activityURL.complete}">
+										<i class="fa fa-lg fa-check text-success"></i>
+									</c:when>
+								</c:choose> <c:choose>
+									<c:when test="${not activityURL.complete}">
 										<c:out value="${activityURL.title}" />
-									</label>
-								</c:when>
-								<c:otherwise>
-									<c:out value="${activityURL.title}" />
-								</c:otherwise>
-							</c:choose>
-						</td>
-					</tr>
+
+									</c:when>
+									<c:otherwise>
+										<c:out value="${activityURL.title}" />
+									</c:otherwise>
+								</c:choose>
+							</label>
+						</div>
+					</div>
 				</c:forEach>
-			</table>
+			</div>
 
-	    <c:if test="${optionsActivityForm.maximum != numActivities or optionsActivityForm.minimum != 0}">
-		<p class="error">
-			<c:choose>
-				<c:when test="${isOptionsWithSequencesActivity}">
-					<fmt:message key="message.activity.set.options.activityCount">
-						<fmt:param value="${optionsActivityForm.minimum}" />
-						<fmt:param value="${optionsActivityForm.maximum}" />
-					</fmt:message>
-				</c:when>
-				<c:otherwise>
-					<fmt:message key="message.activity.options.activityCount">
-						<fmt:param value="${optionsActivityForm.minimum}" />
-						<fmt:param value="${optionsActivityForm.maximum}" />
-					</fmt:message>
-				</c:otherwise>
-			</c:choose>
-		</p>
-	    </c:if>
-			<div align="center" class="small-space-bottom">
-				
+			<div align="center" class="voffset10">
 				<c:choose>
 					<c:when test="${optionsActivityForm.maxActivitiesReached}">
 						<c:choose>
 							<c:when test="${isOptionsWithSequencesActivity}">
-								<p class="warning">
-									<fmt:message key="label.optional.maxSequencesReached" /> 
-								</p>
+								<lams:Alert id="limits" type="info" close="false">
+									<fmt:message key="label.optional.maxSequencesReached" />
+								</lams:Alert>
 							</c:when>
 							<c:otherwise>
-								<p class="warning">
-									<fmt:message key="label.optional.maxActivitiesReached" /> 
-								</p>
+								<lams:Alert id="maxReached" type="danger" close="false">
+									<fmt:message key="label.optional.maxActivitiesReached" />
+								</lams:Alert>
 							</c:otherwise>
 						</c:choose>
-						
+
 					</c:when>
 					<c:otherwise>
-						<html:submit styleClass="button">
+						<html:submit styleClass="btn btn-default">
 							<fmt:message key="label.activity.options.choose" />
 						</html:submit>
 					</c:otherwise>
@@ -137,73 +124,71 @@
 		</html:form>
 	</div>
 
-	<p class="info">
-		<c:choose>
-			<c:when test="${optionsActivityForm.maximum gt 0 and optionsActivityForm.maximum lt numActivities}">
+
+
+	<c:if test="${optionsActivityForm.finished}">
+		<script language="JavaScript" type="text/JavaScript">
+		<!--
+			function submitForm(methodName) {
+				var f = document.getElementById('messageForm');
+				f.submit();
+			}
+		//-->
+		</script>
+
+		<html:form action="/CompleteActivity" method="post" styleId="messageForm">
+			<input type="hidden" name="lams_token" value="<c:out value='${lams_token}' />">
+			<input type="hidden" name="activityID" value="<c:out value='${optionsActivityForm.activityID}' />">
+			<input type="hidden" name="lessonID" value="<c:out value='${optionsActivityForm.lessonID}' />">
+			<input type="hidden" name="progressID" value="<c:out value='${optionsActivityForm.progressID}' />">
+
+
+			<p class="voffset10 help-text">
 				<c:choose>
-					<c:when test="${isOptionsWithSequencesActivity}">
-						<fmt:message key="message.activity.set.options.note.maximum">
-							<fmt:param value="${optionsActivityForm.maximum}" />
-						</fmt:message>
+					<c:when test="${optionsActivityForm.maximum gt 0 and optionsActivityForm.maximum lt numActivities}">
+						<c:choose>
+							<c:when test="${isOptionsWithSequencesActivity}">
+								<fmt:message key="message.activity.set.options.note.maximum">
+									<fmt:param value="${optionsActivityForm.maximum}" />
+								</fmt:message>
+							</c:when>
+							<c:otherwise>
+								<fmt:message key="message.activity.options.note.maximum">
+									<fmt:param value="${optionsActivityForm.maximum}" />
+								</fmt:message>
+							</c:otherwise>
+						</c:choose>
 					</c:when>
 					<c:otherwise>
-						<fmt:message key="message.activity.options.note.maximum">
-							<fmt:param value="${optionsActivityForm.maximum}" />
-						</fmt:message>
+						<c:choose>
+							<c:when test="${isOptionsWithSequencesActivity}">
+								<fmt:message key="message.activity.set.options.note" />
+							</c:when>
+							<c:otherwise>
+								<fmt:message key="message.activity.options.note" />
+							</c:otherwise>
+						</c:choose>
 					</c:otherwise>
 				</c:choose>
-			</c:when>
-			<c:otherwise>
-				<c:choose>
-					<c:when test="${isOptionsWithSequencesActivity}">
-						<fmt:message key="message.activity.set.options.note" />
-					</c:when>
-					<c:otherwise>
-						<fmt:message key="message.activity.options.note" />
-					</c:otherwise>
-				</c:choose>
-			</c:otherwise>
-		</c:choose>
-	</p>
+			</p>
 
-	<c:if test="${optionsActivityForm.finished}">
-	      <script language="JavaScript" type="text/JavaScript"><!--
-	           function submitForm(methodName){
-              	       var f = document.getElementById('messageForm');
-                       f.submit();
-        	   }
-		//-->
-	      </script>
 
-		<html:form action="/CompleteActivity" method="post" styleId="messageForm">
-			<input type="hidden" name="lams_token"
-				value="<c:out value='${lams_token}' />">
-			<input type="hidden" name="activityID"
-				value="<c:out value='${optionsActivityForm.activityID}' />">
-			<input type="hidden" name="lessonID"
-				value="<c:out value='${optionsActivityForm.lessonID}' />">
-			<input type="hidden" name="progressID"
-				value="<c:out value='${optionsActivityForm.progressID}' />">
+			<hr class="msg-hr">
 
-			<div class="align-right space-bottom-top">
-                               <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 class="voffset10">
+				<html:link href="javascript:;" styleClass="btn btn-primary pull-right na" styleId="finishButton"
+					onclick="submitForm('finish')">
+					<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>
+				</html:link>
 			</div>
 
 		</html:form>
 	</c:if>
-
-</div>
-<!--closes content-->
-
-<div id="footer"></div>
+</lams:Page>
\ No newline at end of file