Index: lams_tool_images/src/java/org/lamsfoundation/lams/tool/imageGallery/web/action/AuthoringAction.java
===================================================================
diff -u -r3399163940c61c9132223c758d274486e57ff9b7 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/src/java/org/lamsfoundation/lams/tool/imageGallery/web/action/AuthoringAction.java	(.../AuthoringAction.java)	(revision 3399163940c61c9132223c758d274486e57ff9b7)
+++ lams_tool_images/src/java/org/lamsfoundation/lams/tool/imageGallery/web/action/AuthoringAction.java	(.../AuthoringAction.java)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -953,19 +953,19 @@
     private List<FormFile> createFileListFromMultipleForm(MultipleImagesForm multipleForm) {
 
 	List<FormFile> fileList = new ArrayList<FormFile>();
-	if (!StringUtils.isEmpty(multipleForm.getFile1().getFileName())) {
+	if (multipleForm.getFile1() != null && !StringUtils.isEmpty(multipleForm.getFile1().getFileName())) {
 	    fileList.add(multipleForm.getFile1());
 	}
-	if (!StringUtils.isEmpty(multipleForm.getFile2().getFileName())) {
+	if (multipleForm.getFile2() != null && !StringUtils.isEmpty(multipleForm.getFile2().getFileName())) {
 	    fileList.add(multipleForm.getFile2());
 	}
-	if (!StringUtils.isEmpty(multipleForm.getFile3().getFileName())) {
+	if (multipleForm.getFile3() != null && !StringUtils.isEmpty(multipleForm.getFile3().getFileName())) {
 	    fileList.add(multipleForm.getFile3());
 	}
-	if (!StringUtils.isEmpty(multipleForm.getFile4().getFileName())) {
+	if (multipleForm.getFile4() != null && !StringUtils.isEmpty(multipleForm.getFile4().getFileName())) {
 	    fileList.add(multipleForm.getFile4());
 	}
-	if (!StringUtils.isEmpty(multipleForm.getFile5().getFileName())) {
+	if (multipleForm.getFile5() != null && !StringUtils.isEmpty(multipleForm.getFile5().getFileName())) {
 	    fileList.add(multipleForm.getFile5());
 	}
 
Index: lams_tool_images/web/WEB-INF/struts-config.xml
===================================================================
diff -u -r65efb0abb529cafc1977e284e2c9a4ed33722334 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/WEB-INF/struts-config.xml	(.../struts-config.xml)	(revision 65efb0abb529cafc1977e284e2c9a4ed33722334)
+++ lams_tool_images/web/WEB-INF/struts-config.xml	(.../struts-config.xml)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -300,11 +300,6 @@
 			scope="request" 
 			validate="false">
 			<forward name="success" path="/pages/monitoring/start.jsp" />
-		</action>			
-		<action path="/monitoring/listuser"
-			type="org.lamsfoundation.lams.tool.imageGallery.web.action.MonitoringAction"
-			parameter="listuser" >
-			<forward name="success" path="/pages/monitoring/userlist.jsp" />
 		</action>
 		<action path="/monitoring/hideitem"
 			type="org.lamsfoundation.lams.tool.imageGallery.web.action.MonitoringAction"
Index: lams_tool_images/web/WEB-INF/tags/AdvancedAccordian.tag
===================================================================
diff -u
--- lams_tool_images/web/WEB-INF/tags/AdvancedAccordian.tag	(revision 0)
+++ lams_tool_images/web/WEB-INF/tags/AdvancedAccordian.tag	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -0,0 +1,53 @@
+<%
+	 /****************************************************************
+	 * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
+	 * =============================================================
+	 * License Information: http://lamsfoundation.org/licensing/lams/2.0/
+	 * 
+	 * This program is free software; you can redistribute it and/or modify
+	 * it under the terms of the GNU General Public License version 2.0
+	 * as published by the Free Software Foundation.
+	 * 
+	 * This program is distributed in the hope that it will be useful,
+	 * but WITHOUT ANY WARRANTY; without even the implied warranty of
+	 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	 * GNU General Public License for more details.
+	 * 
+	 * You should have received a copy of the GNU General Public License
+	 * along with this program; if not, write to the Free Software
+	 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
+	 * USA
+	 * 
+	 * http://www.gnu.org/licenses/gpl.txt
+	 * ****************************************************************
+	 */
+
+	/**
+	 * AdvancedAccordian.tag
+	 *	Author: Fiona Malikoff
+	 *	Description: Creates the show/hide entry for the Advanced Settings in Montoring.
+	 * Wiki: 
+	 */
+%>
+<%@ attribute name="title" required="true" rtexprvalue="true"%>
+
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+
+<div class="panel-group" id="accordionAdvanced" role="tablist" aria-multiselectable="true"> 
+    <div class="panel panel-default" >
+        <div class="panel-heading collapsable-icon-left" id="headingAdvanced">
+        	<span class="panel-title">
+	    	<a class="collapsed" role="button" data-toggle="collapse" href="#collapseAdvanced" aria-expanded="false" aria-controls="collapseAdvanced" >
+          	${title}
+        	</a>
+      		</span>
+        </div>
+
+        <div id="collapseAdvanced" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingAdvanced">
+		<jsp:doBody />
+		</div>
+	</div>
+</div>
+		
\ No newline at end of file
Index: lams_tool_images/web/WEB-INF/tags/Arrow.tag
===================================================================
diff -u
--- lams_tool_images/web/WEB-INF/tags/Arrow.tag	(revision 0)
+++ lams_tool_images/web/WEB-INF/tags/Arrow.tag	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -0,0 +1,35 @@
+<%@ tag body-content="scriptless"%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%-- state = up: up arrow;  state = down: down arrow --%>
+<%@ attribute name="state" required="true" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="onclick" required="false" rtexprvalue="true"%>
+
+<c:choose>
+	<c:when test="${not empty title}">
+		<c:set var="fullTitle">title="${title}"</c:set>
+	</c:when>
+	<c:otherwise>
+		<c:set var="fullTitle" value=""/>
+	</c:otherwise>
+</c:choose>
+
+<c:choose>
+	<c:when test="${not empty onclick}">
+		<c:set var="fullOnclick">onclick="${onclick}"</c:set>
+	</c:when>
+	<c:otherwise>
+		<c:set var="fullOnclick" value=""/>
+	</c:otherwise>
+</c:choose>
+
+<c:choose>
+	<c:when test="${fn:containsIgnoreCase(state, 'up')}">
+		<i class="fa fa-long-arrow-up fa-pull-left" ${fullTitle} ${fullOnclick}></i>
+	</c:when>
+	<c:otherwise>
+		<i class="fa fa-long-arrow-down fa-pull-right"  ${fullTitle} ${fullOnclick}></i>
+	</c:otherwise>
+</c:choose>
Index: lams_tool_images/web/WEB-INF/tags/AuthoringButton.tag
===================================================================
diff -u -r29fac4bd0bdf28bcaaeee7aae4020ccb15b6e520 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/WEB-INF/tags/AuthoringButton.tag	(.../AuthoringButton.tag)	(revision 29fac4bd0bdf28bcaaeee7aae4020ccb15b6e520)
+++ lams_tool_images/web/WEB-INF/tags/AuthoringButton.tag	(.../AuthoringButton.tag)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -122,12 +122,12 @@
     	window.close();
     }  				
 </script>	
-<p id="saveCancelButtons" >
-		<html:link href="javascript:;" property="cancel" onclick="javascript:doCancel()" styleClass="button right-buttons space-left">
-			<span class="cancelIcon"><fmt:message key="${cancelButtonLabelKey}" /></span>
-		</html:link>
-		<html:link href="javascript:doSubmit_Form_Only();" property="submit" styleClass="button right-buttons space-left">
+<div id="saveCancelButtons" >
+		<html:link href="javascript:doSubmit_Form_Only();" property="submit" styleClass="btn btn-primary pull-right">
 			<span class="okIcon"><fmt:message key="${saveButtonLabelKey}" /></span>
 		</html:link>
-</p>
+		<html:link href="javascript:;" property="cancel" onclick="javascript:doCancel()" styleClass="btn btn-default roffset5 pull-right">
+			<span class="cancelIcon"><fmt:message key="${cancelButtonLabelKey}" /></span>
+		</html:link>
+</div>
 <!-- end tab content -->
\ No newline at end of file
Index: lams_tool_images/web/WEB-INF/tags/AuthoringRatingCriteria.tag
===================================================================
diff -u -r0ac411e19ec849c9586c506feede55d178f84d56 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/WEB-INF/tags/AuthoringRatingCriteria.tag	(.../AuthoringRatingCriteria.tag)	(revision 0ac411e19ec849c9586c506feede55d178f84d56)
+++ lams_tool_images/web/WEB-INF/tags/AuthoringRatingCriteria.tag	(.../AuthoringRatingCriteria.tag)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -18,6 +18,7 @@
 <%-- Optional attribute --%>
 <%@ attribute name="hasRatingLimits" required="false" rtexprvalue="true" %>
 <%@ attribute name="formContentPrefix" required="false" rtexprvalue="true" %>
+<%@ attribute name="styleId" 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" %>
@@ -106,16 +107,16 @@
 		jQuery('<tr/>').append(jQuery('<td/>', {
 			'class': 'criteria-info',
 		    html: '<input type="hidden" name="criteriaOrderId' + maxOrderId + '" value="' + maxOrderId + '">' + 
-		    		'<input type="text" name="criteriaTitle' + maxOrderId + '" value="">'
+		    		'<input type="text" name="criteriaTitle' + maxOrderId + '" value="" class="form-control">'
 		    		
 		})).append(jQuery('<td/>', {
 			width: '40px',
-			html: '<div class="up-arrow" title="<fmt:message key="${upLabel}"/>" />' + 
+			html: '<div class="fa fa-long-arrow-up fa-pull-left" 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}"/>" />'
+			html: '<i class="fa fa-times" title="<fmt:message key="${deleteLabel}"/>"></i>'
 		})).appendTo('#criterias-table');
 		
 		reactivateArrows();
@@ -124,30 +125,29 @@
 		addCriteria(); 
 		addCriteria();
 	</c:if>
+	reactivateArrows();
 	
 	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");
-		        
+		    	$(".arrow-up", $this).removeClass("fa fa-long-arrow-up fa-pull-left");
 		    } else {
-		    	$(".up-arrow-disabled", $this).addClass("up-arrow").removeClass("up-arrow-disabled");
+		    	$(".arrow-up", $this).addClass("fa fa-long-arrow-up fa-pull-left");
 		    }
 		    
 		    if ($this.is(':last-child')) {
-		    	$(".down-arrow", $this).addClass("down-arrow-disabled").removeClass("down-arrow");
-		    	
+		    	$(".arrow-down", $this).removeClass("fa fa-long-arrow-down fa-pull-right");
 		    } else {
-		    	$(".down-arrow-disabled", $this).addClass("down-arrow").removeClass("down-arrow-disabled");
+		    	$(".arrow-down", $this).addClass("fa fa-long-arrow-down fa-pull-right");
 		    }
 		});
 	}
 	
 	//upCriteria
-	 $( "body" ).on( "click", ".up-arrow", function() {
+	 $( "body" ).on( "click", ".fa-long-arrow-up", function() {
 		var currentRow = $(this).closest('tr');
 		var currentCriteriaTd = $( ".criteria-info", currentRow);
 		var currentOrderId = $( "input[name^='criteriaOrderId']", currentCriteriaTd);
@@ -170,7 +170,7 @@
 	 } );
 	 
 	//downCriteria
-	 $( "body" ).on( "click", ".down-arrow", function() {
+	 $( "body" ).on( "click", ".fa-long-arrow-down", function() {
 		var currentRow = $(this).closest('tr');
 		var currentCriteriaTd = $( ".criteria-info", currentRow);
 		var currentOrderId = $( "input[name^='criteriaOrderId']", currentCriteriaTd);
@@ -193,7 +193,7 @@
 	 });
 	 
 	 //deleteCriteria
-	 $( "body" ).on( "click", ".delete-arrow", function() {
+	 $( "body" ).on( "click", ".fa-times", function() {
 		var currentRow = $(this).closest('tr');
 		currentRow.remove();
 		
@@ -241,112 +241,110 @@
 	}
 </script>
 
-<div class="rating-criteria-tag">
-	<h2>
-		<fmt:message key="${headerLabel}" />
-	</h2>
-	<input type="hidden" name="criteriaMaxOrderId" id="criteria-max-order-id" value="${maxOrderId}">
+<div class="rating-criteria-tag" style="${styleId}">
 
-	<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>
+	<div class="panel panel-default voffset5">
+		<div class="panel-heading panel-title">
+			<label><fmt:message key="${headerLabel}" /></label>
+		</div>
 	
-						<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="form-group roffset10 loffset10">
+			<input type="hidden" name="criteriaMaxOrderId" id="criteria-max-order-id" value="${maxOrderId}">
+			<table class="table table-condensed table-no-border" id="criterias-table">
+		
+				<c:forEach var="criteria" items="${criterias}" varStatus="status">
+					<c:set var="isFirst" value="${criteria.commentsEnabled && (status.index == 1) || !criteria.commentsEnabled && (status.index == 0)}"></c:set>
+					<c:if test="${!criteria.commentsEnabled}">
+						<tr>${ criteria.commentsEnabled }${status.index == 1}${status.last}${  isFirst }
+							
+							<td class="criteria-info">
+								<input type="hidden" name="criteriaOrderId${criteria.orderId}" value="${criteria.orderId}">
+								<input type="text" name="criteriaTitle${criteria.orderId}" value="${criteria.title}" class="form-control">
+							</td>
+							
+							<td width="40px">
+								<div class="arrow-up" title="<fmt:message key="${upLabel}"/>"></div>
+								<div class="arrow-down" title="<fmt:message key="${downLabel}"/>"></div>
+							</td>
+			                
+							<td width="20px">
+								<i class="fa fa-times" title="<fmt:message key="${deleteLabel}" />"></i>
+							</td>
+						</tr>
+					</c:if>
+				</c:forEach>
+			</table>
 	
-							<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>
+			<div style="height: 25px; margin-top: -10px;">
+				<a href="#nogo" class="btn btn-default btn-xs pull-right" id="add-criteria">
+					<i class="fa fa-plus"></i>&nbsp;<fmt:message key="${addLabel}" /> 
+				</a>
+			</div>
+	
+			<c:if test="${hasRatingLimits}">
+				<div>
+					<label for="minimum-rates">
+						<fmt:message key="${minimumLabel}" />
+					</label>
+					<html:select property="${formContentPrefix}minimumRates" styleId="minimum-rates" onmouseup="validateRatingLimits(true);" 
+							styleClass="form-control form-control-inline">
+						<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>
+				
+					<label for="maximum-rates">
+						<fmt:message key="${maximumLabel}" />
+					</label>
+					<html:select property="${formContentPrefix}maximumRates" styleId="maximum-rates" onmouseup="validateRatingLimits(false);" 
+							styleClass="form-control form-control-inline">
+						<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>
-		</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>
+			<div class="checkbox">
+				<label for="enable-comments">
+					<input type="checkbox" name="isCommentsEnabled" value="true" class="noBorder" id="enable-comments"
+						<c:if test="${isCommentsEnabled}">checked="checked"</c:if>
+					/>
+					<fmt:message key="${allowCommentsLabel}" />
+				</label>
+			</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>
+				<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>
-	</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_images/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdc884b8e6274ebbc664d1ee940e565803445bb26 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dc884b8e6274ebbc664d1ee940e565803445bb26)
+++ lams_tool_images/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -10,7 +10,12 @@
 <%@ attribute name="contentFolderID" required="false" rtexprvalue="true"%>
 <%@ attribute name="displayExpanded" required="false" rtexprvalue="true"%>
 <%@ attribute name="resizeParentFrameName" required="false" rtexprvalue="true"%>
+<%@ attribute name="method" required="false" rtexprvalue="true"%>
 
+<c:if test="${empty method}">
+	<c:set var="method" value="inline" />
+</c:if>
+
 <c:set var="language">
 	<lams:user property="fckLanguageMapping" />
 </c:set>
@@ -19,6 +24,10 @@
 	<c:set var="toolbarSet" value="Default" />
 </c:if>
 
+<c:if test="${fn:containsIgnoreCase(method,'replace')}">
+	<c:set var="toolbarSet">${toolbarSet}Replace</c:set>
+</c:if>
+
 <c:if test="${empty displayExpanded}">
 	<c:set var="displayExpanded" value="true" />
 </c:if>
@@ -33,10 +42,10 @@
 <c:set var="fixedValue" value="${fn:replace(value,'&lt','&amp;lt')}"/>
 <c:set var="fixedValue" value="${fn:replace(fixedValue,'&gt','&amp;gt')}"/>
 
-<textarea id="${id}" name="${id}" style="display: none; visibility: hidden; height: 0px;">${fixedValue}</textarea>
+<textarea id="${id}" name="${id}" style="display: none; visibility: hidden; height: 0px;" placeholder="${placeholder}">${fixedValue}</textarea>
 
 <c:if test="${empty ckEditorBasePath}">
-	<c:set scope="request" var="ckEditorBasePath"><lams:LAMSURL/>ckeditor/</c:set>
+	<c:set scope="request" var="ckEditorBasePath">/lams/ckeditor/</c:set>
 	<script type="text/javascript" src="${ckEditorBasePath}ckeditor.js"></script>
 </c:if>
 
@@ -59,10 +68,9 @@
 	    var editor = CKEDITOR.instances["${id}"];
 	    if (editor) { editor.destroy(true); }
 	    
-		var instance = CKEDITOR.replace( "${id}", {
+		var instance = CKEDITOR.${method}( "${id}", {
 				width                         : "${width}",
 				height                        : "${height}",
-				autoGrow_minHeight            : "${height}".replace("px", ""),
 				toolbar                       : "${toolbarSet}",
 				language                      : "${language}",
 				defaultLangugage              : "en",
Index: lams_tool_images/web/WEB-INF/tags/Comments.tag
===================================================================
diff -u
--- lams_tool_images/web/WEB-INF/tags/Comments.tag	(revision 0)
+++ lams_tool_images/web/WEB-INF/tags/Comments.tag	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -0,0 +1,47 @@
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+<%@ taglib uri="tags-function" prefix="fn" %>
+
+<%@ attribute name="toolSessionId" required="true" rtexprvalue="true"%>
+<%@ attribute name="toolSignature" required="true" rtexprvalue="true"%>
+<%@ attribute name="height" required="false" rtexprvalue="true"%>
+<%@ attribute name="width" required="false" rtexprvalue="true"%>
+<%@ attribute name="mode" required="false" rtexprvalue="true"%>
+<%@ attribute name="likeAndDislike" required="false" rtexprvalue="true"%>
+<%@ attribute name="readOnly" required="false" rtexprvalue="true"%>
+<%@ attribute name="pageSize" required="false" rtexprvalue="true"%>
+<%@ attribute name="sortBy" required="false" rtexprvalue="true"%>
+
+
+<c:if test="${empty width}">
+	<c:set var="width" value="100%" />
+</c:if>
+
+<c:if test="${empty height}">
+	<c:set var="height" value="auto" />
+</c:if>
+
+<c:set var="modeStr" value=""/>
+<c:if test="${!empty mode}">
+	<c:set var="modeStr">&mode=${mode}</c:set>
+</c:if>
+
+<c:if test="${empty likeAndDislike}">
+	<c:set var="likeAndDislike" value="false" />
+</c:if>
+
+<c:if test="${empty readOnly}">
+	<c:set var="readOnly" value="false" />
+</c:if>
+
+<c:if test="${empty sortBy}">
+	<c:set var="sortBy" value="0" /> <!-- 0: date, 1: likes -->
+</c:if>
+
+<div id="commentFrame" class="commentFrame"  style="width: ${width}; height: ${height};"></div>
+<script>
+$(document).ready(function(){
+	var url='<lams:LAMSURL/>comments/comments.do?externalID=${toolSessionId}&externalSig=${toolSignature}&externalType=1${modeStr}&likeAndDislike=${likeAndDislike}&readOnly=${readOnly}&pageSize=${pageSize}&sortBy=${sortBy}';
+	$('#commentFrame').load(url);
+});
+</script>
\ No newline at end of file
Index: lams_tool_images/web/WEB-INF/tags/CommentsAuthor.tag
===================================================================
diff -u
--- lams_tool_images/web/WEB-INF/tags/CommentsAuthor.tag	(revision 0)
+++ lams_tool_images/web/WEB-INF/tags/CommentsAuthor.tag	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -0,0 +1,51 @@
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-html" prefix="html"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+
+<%@ attribute name="allowCommentsVariableName" required="false" rtexprvalue="true"%>
+<%@ attribute name="allowCommentLabelKey" required="false" rtexprvalue="true"%>
+<%@ attribute name="likeDislikeVariableName" required="false" rtexprvalue="true"%>
+<%@ attribute name="likeOnlyCommentLabelKey" required="false" rtexprvalue="true"%>
+<%@ attribute name="likeDislikeLabelKey" required="false" rtexprvalue="true"%>
+
+<c:if test="${empty allowCommentsVariableName}">
+	<c:set var="allowCommentsVariableName" value="allowComments" />
+</c:if>
+<c:if test="${empty allowCommentLabelKey}">
+	<c:set var="allowCommentLabelKey" value="advanced.allow.comments" />
+</c:if>
+<c:if test="${empty likeDislikeVariableName}">
+	<c:set var="likeDislikeVariableName" value="commentsLikeAndDislike" />
+</c:if>
+<c:if test="${empty likeOnlyCommentLabelKey}">
+	<c:set var="likeOnlyCommentLabelKey" value="advanced.comments.like.only" />
+</c:if>
+<c:if test="${empty likeDislikeLabelKey}">
+	<c:set var="likeDislikeLabelKey" value="advanced.comments.like.and.dislike" />
+</c:if>
+
+<div class="checkbox">
+	<label>
+	<html:checkbox property="${allowCommentsVariableName}" value="1"
+		styleId="${allowCommentsVariableName}">
+	</html:checkbox>
+	<fmt:message key="${allowCommentLabelKey}"/>
+	</label>
+</div>
+<div class="loffset20" id="likedislike">
+		<html:radio property="${likeDislikeVariableName}" value="false" />&nbsp;<fmt:message key="${likeOnlyCommentLabelKey}" /> &nbsp;
+		<html:radio property="${likeDislikeVariableName}" value="true" />&nbsp;<fmt:message key="${likeDislikeLabelKey}" /> 
+</div>
+
+<script>
+jQuery( document ).ready(function( $ ) {
+	if (! $("#${allowCommentsVariableName}").is(':checked')) {
+		$("#likedislike").hide();
+	}
+	$("#${allowCommentsVariableName}").click(function() {
+		$("#likedislike").toggle('slow');
+	});
+});
+</script>
+
+
Index: lams_tool_images/web/WEB-INF/tags/ImgButtonWrapper.tag
===================================================================
diff -u -r8a7c47632a6a93892f015f068d12adb376c0ae2d -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/WEB-INF/tags/ImgButtonWrapper.tag	(.../ImgButtonWrapper.tag)	(revision 8a7c47632a6a93892f015f068d12adb376c0ae2d)
+++ lams_tool_images/web/WEB-INF/tags/ImgButtonWrapper.tag	(.../ImgButtonWrapper.tag)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -1,37 +1,37 @@
-<% 
-/****************************************************************
- * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
- * =============================================================
- * License Information: http://lamsfoundation.org/licensing/lams/2.0/
- * 
- * This program is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License version 2.0
- * as published by the Free Software Foundation.
- * 
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- * 
- * You should have received a copy of the GNU General Public License
- * along with this program; if not, write to the Free Software
- * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
- * USA
- * 
- * http://www.gnu.org/licenses/gpl.txt
- * ****************************************************************
- */
- 
- /**
-  * ImgButtonWrapper.tag
-  *	Author: Mitchell Seaton
-  *	Description: Simple wrapper that will display buttons correctly when RTL page rendering is used.
-  */
- 
- %>
-<%@ tag body-content="scriptless" %>
-<div id="button-table" class="space-bottom-top">
-	<div id="button-row">
-		<jsp:doBody />
-	</div>
-</div>
+<% 
+/****************************************************************
+ * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
+ * =============================================================
+ * License Information: http://lamsfoundation.org/licensing/lams/2.0/
+ * 
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 2.0
+ * as published by the Free Software Foundation.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
+ * USA
+ * 
+ * http://www.gnu.org/licenses/gpl.txt
+ * ****************************************************************
+ */
+ 
+ /**
+  * ImgButtonWrapper.tag
+  *	Author: Mitchell Seaton
+  *	Description: Simple wrapper that will display buttons correctly when RTL page rendering is used.
+  */
+ 
+ %>
+<%@ tag body-content="scriptless" %>
+<div id="button-table" class="space-bottom-top">
+	<div id="button-row">
+		<jsp:doBody />
+	</div>
+</div>
Index: lams_tool_images/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r0ac411e19ec849c9586c506feede55d178f84d56 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 0ac411e19ec849c9586c506feede55d178f84d56)
+++ lams_tool_images/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -12,25 +12,38 @@
 <div class="row no-gutter">
 	<div class="col-xs-12">
 		<div class="container" id="content">
+		
+		<c:choose>
+		<c:when test='${type == "navbar"}'>
+			<jsp:doBody />
+		</c:when> 
+		<c:otherwise>
 			<div class="panel panel-default panel-${type}-page">
-				<div class="panel-heading">
-					<c:if test="${not empty title}">
+				<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>
-					<c:if test="${not empty headingContent}">
-						<c:out value="${headingContent}" escapeXml="true" />
-					</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>
+		</c:otherwise>
+		</c:choose>
+			
 		</div>
 		<!-- End content container -->
 	</div>
 </div>
+
+
+		
+			
Index: lams_tool_images/web/WEB-INF/tags/RestrictedUsageAccordian.tag
===================================================================
diff -u
--- lams_tool_images/web/WEB-INF/tags/RestrictedUsageAccordian.tag	(revision 0)
+++ lams_tool_images/web/WEB-INF/tags/RestrictedUsageAccordian.tag	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -0,0 +1,54 @@
+<%
+	 /****************************************************************
+	 * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
+	 * =============================================================
+	 * License Information: http://lamsfoundation.org/licensing/lams/2.0/
+	 * 
+	 * This program is free software; you can redistribute it and/or modify
+	 * it under the terms of the GNU General Public License version 2.0
+	 * as published by the Free Software Foundation.
+	 * 
+	 * This program is distributed in the hope that it will be useful,
+	 * but WITHOUT ANY WARRANTY; without even the implied warranty of
+	 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	 * GNU General Public License for more details.
+	 * 
+	 * You should have received a copy of the GNU General Public License
+	 * along with this program; if not, write to the Free Software
+	 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
+	 * USA
+	 * 
+	 * http://www.gnu.org/licenses/gpl.txt
+	 * ****************************************************************
+	 */
+
+	/**
+	 * AdvancedAccordian.tag
+	 *	Author: Fiona Malikoff
+	 *	Description: Creates the show/hide entry for the Restricted Usage Settings in Monitoring.
+	 * Wiki: 
+	 */
+%>
+<%@ attribute name="title" required="true" rtexprvalue="true"%>
+
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+
+<div class="panel-group" id="accordionRestrictUsageDiv" role="tablist" aria-multiselectable="true"> 
+    <div class="panel panel-default" >
+        <div class="panel-heading collapsable-icon-left" id="headingRestrictedUsageDiv">
+        	<span class="panel-title">
+	    	<a class="collapsed" role="button" data-toggle="collapse" href="#restrictUsageDiv" aria-expanded="false" aria-controls="restrictUsageDiv" >
+          	${title}
+        	</a>
+      		</span>
+        </div>
+
+
+		<div id="restrictUsageDiv" class="panel-body panel-collapse collapse" role="tabpanel" aria-labelledby="headingRestrictedUsageDiv">
+		<jsp:doBody />
+		</div>
+	</div>
+</div>
+		
\ No newline at end of file
Index: lams_tool_images/web/WEB-INF/tags/Tab.tag
===================================================================
diff -u -r8a7c47632a6a93892f015f068d12adb376c0ae2d -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/WEB-INF/tags/Tab.tag	(.../Tab.tag)	(revision 8a7c47632a6a93892f015f068d12adb376c0ae2d)
+++ lams_tool_images/web/WEB-INF/tags/Tab.tag	(.../Tab.tag)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -24,8 +24,8 @@
 
 	/**
 	 * Tab.tag
-	 *	Author: Mitchell Seaton
-	 *	Description: Creates a tab element.
+	 *	Author: Fiona Malikoff
+	 *	Description: Creates a tab element within the Hybrid Tab Header.
 	 * Wiki: 
 	 */
 %>
@@ -54,6 +54,9 @@
 <%--
 	Usually methodCall is selectTab, but the calling code can override methodCall if desired.
 	this is handy if the page needs different logic on initialisation and user switching tabs
+	
+	-- 			onclick="${methodCall}(${id});return false;">
+	
 --%>
 
 <c:if test="${methodCall == null}">
@@ -73,13 +76,14 @@
 	</c:set>
 </c:if>
 
-<div class="nav-box">
-	<div class="tab-left" id="tab-left-${id}"></div>
-	<div class="tab-middle" id="tab-middle-${id}">
-		<a class="tab-middle-link" id="tab-middle-link-${id}" href="#"
-			onclick="${methodCall}(${id});return false;">
-			${tabTitle}
-		</a>
-	</div>
-	<div class="tab-right" id="tab-right-${id}"></div>
-</div>
+<c:set var="class" value=""/>
+<c:if test="${id == 1}">
+	<c:set var="class">class="active"</c:set>
+</c:if>
+	
+<c:set var="disabled" value=""/>
+<c:if test="${inactive}">
+	<c:set var="class">class="disabled"</c:set>
+</c:if>
+
+<li role="presentation" ${class}><a href="#t${id}" aria-controls="t${id}" role="tab" onclick="${methodCall}(${id});return false;">${tabTitle}</a></li>
Index: lams_tool_images/web/WEB-INF/tags/TabBody.tag
===================================================================
diff -u -r8a7c47632a6a93892f015f068d12adb376c0ae2d -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/WEB-INF/tags/TabBody.tag	(.../TabBody.tag)	(revision 8a7c47632a6a93892f015f068d12adb376c0ae2d)
+++ lams_tool_images/web/WEB-INF/tags/TabBody.tag	(.../TabBody.tag)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -28,25 +28,17 @@
  * Wiki: 
  */
 
-		%>
-<%@ tag body-content="scriptless"%>
+%>
 <%@ attribute name="id" required="true" rtexprvalue="true"%>
 <%@ attribute name="tabTitle" required="false" rtexprvalue="true"%>
 <%@ attribute name="titleKey" required="false" rtexprvalue="true"%>
 <%@ attribute name="page" required="false" rtexprvalue="true"%>
 <%@ taglib uri="tags-core" prefix="c"%>
 <%@ taglib uri="tags-bean" prefix="bean"%>
 
-<!-- begin tab content -->
-<div class="box" id="tabbody${id}">
-	<c:choose>
-		<c:when test="${page != null}">
-			<jsp:include page="${page}" />
-		</c:when>
-		<c:otherwise>
-			<jsp:doBody />
-		</c:otherwise>
-	</c:choose>
+<c:set var="class" value=""/>
+<c:if test="${id == 1}">
+	<c:set var="class">active</c:set>
+</c:if>
 
-</div>
-<!-- end tab content -->
+<div role="tabpanel" class="tab-pane ${class}" id="t${id}"><jsp:include page="${page}"/></div>
Index: lams_tool_images/web/WEB-INF/tags/TabBodyArea.tag
===================================================================
diff -u
--- lams_tool_images/web/WEB-INF/tags/TabBodyArea.tag	(revision 0)
+++ lams_tool_images/web/WEB-INF/tags/TabBodyArea.tag	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -0,0 +1,39 @@
+<%/****************************************************************
+ * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
+ * =============================================================
+ * License Information: http://lamsfoundation.org/licensing/lams/2.0/
+ * 
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 2.0
+ * as published by the Free Software Foundation.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
+ * USA
+ * 
+ * http://www.gnu.org/licenses/gpl.txt
+ * ****************************************************************
+ */
+
+/**
+ * TabBodyArea.tag
+ *	Author: Fiona Malikoff
+ *	Description: Creates the panel body area for a nav bar screen
+ * Wiki: 
+ */
+
+%>
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-bean" prefix="bean"%>
+
+<div class="panel-body panel-monitor-body">
+	 <jsp:doBody />
+</div>
+
+</div> <!--  close tab opened in TabHeader -->
\ No newline at end of file
Index: lams_tool_images/web/WEB-INF/tags/TabBodys.tag
===================================================================
diff -u
--- lams_tool_images/web/WEB-INF/tags/TabBodys.tag	(revision 0)
+++ lams_tool_images/web/WEB-INF/tags/TabBodys.tag	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -0,0 +1,37 @@
+<%/****************************************************************
+ * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
+ * =============================================================
+ * License Information: http://lamsfoundation.org/licensing/lams/2.0/
+ * 
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 2.0
+ * as published by the Free Software Foundation.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
+ * USA
+ * 
+ * http://www.gnu.org/licenses/gpl.txt
+ * ****************************************************************
+ */
+
+/**
+ * TabBodys.tag
+ *	Author: Fiona Malikoff
+ *	Description: Create a tabbody list from nested TabBody tags.
+ * Wiki: 
+ */
+
+		%>
+<%@ tag body-content="scriptless"%>
+
+<!-- tab body holder table -->
+<div class="tab-content">
+	<jsp:doBody />
+</div>
Index: lams_tool_images/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -r8a7c47632a6a93892f015f068d12adb376c0ae2d -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision 8a7c47632a6a93892f015f068d12adb376c0ae2d)
+++ lams_tool_images/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -23,47 +23,70 @@
 
 /**
  * Tabs.tag
- *	Author: Mitchell Seaton
- *	Description: Create a tab list from a input collection or nested Tab tags.
- * Wiki: 
+ *	Author: Fiona Malikoff
+ *	Description: Create a hybrid panel header that contains a nav bar that acts like tabs.
  */
 
-		%>
-<%@ tag body-content="scriptless"%>
-<%@ attribute name="collection" type="java.util.Collection" required="false" rtexprvalue="true"%>
+%>
 <%@ attribute name="control" required="false" rtexprvalue="true"%>
-<%@ attribute name="useKey" required="false" rtexprvalue="true"%>
+<%@ attribute name="title" required="false" rtexprvalue="true"%>
+<%@ attribute name="refreshOnClickAction" required="false" rtexprvalue="true"%>
+<%@ attribute name="helpToolSignature" required="false" rtexprvalue="true"%>
+<%@ attribute name="helpModule" required="false" rtexprvalue="true"%>
+<%@ attribute name="extraControl" required="false" rtexprvalue="true"%>
+
 <%@ taglib uri="tags-core" prefix="c"%>
 <%@ taglib uri="tags-lams" prefix="lams"%>
+
+<c:set var="useActions" value="false" scope="request" />
+<c:if test="${not empty helpToolSignature or not empty helpModule or not empty refreshOnClickAction or not empty extraControl}">
+	<c:set var="useActions" value="true" scope="request" />
+</c:if>
+
 <c:set var="dControl" value="false" scope="request" />
 <c:if test="${control}">
 	<c:set var="dControl" value="${control}" scope="request" />
 </c:if>
 
-<c:set var="dUseKey" value="false" scope="request" />
-<c:if test="${useKey}">
-	<c:set var="dUseKey" value="${useKey}" scope="request" />
-</c:if>
+<!-- navbar combined with tabs -->
+<div class="panel panel-default panel-monitor-page">
+<div class="panel-heading navbar-heading">
 
-<!-- tab holder table -->
-<div id="nav">
-	<c:choose>
-		<c:when test="${collection != null}">
-			<c:set var="count" value="0" />
-			<c:forEach var="tab" begin="0" items="${collection}">
-				<c:set var="count" value="${count+1}" />
-				<c:choose>
-					<c:when test="${dUseKey}">
-						<lams:Tab id="${count}" key="${tab}" />
-					</c:when>
-					<c:otherwise>
-						<lams:Tab id="${count}" value="${tab}" />
-					</c:otherwise>
-				</c:choose>
-			</c:forEach>
-		</c:when>
-		<c:otherwise>
-			<jsp:doBody />
-		</c:otherwise>
-	</c:choose>
+ 	<nav class="navbar navbar-default navbar-heading">
+	<div class="container-fluid">
+    	<!-- Brand and toggle get grouped for better mobile display -->
+		<div class="navbar-header">
+	      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1" aria-expanded="false">
+	        <span class="sr-only">Toggle navigation</span>
+	        <span class="icon-bar"></span>
+	        <span class="icon-bar"></span>
+	        <span class="icon-bar"></span>
+	      </button>
+	      <span class="navbar-brand">${title}</span>
+		</div>
+		<div class="collapse navbar-collapse" id="navbar-collapse-1" role="navigation">
+         <ul class="nav navbar-nav" id="page-tabs">
+	         <li role="separator" class="divider"></li>
+	          <jsp:doBody />
+         </ul>
+         <c:if test="${useActions}">
+         <ul class="nav navbar-nav navbar-right" id="page-actions">
+		     <li role="separator" class="divider"></li>
+		     <c:if test="${not empty refreshOnClickAction}">
+             <li class="navbar-text" ><span onclick="${refreshOnClickAction}"><i class="fa fa-refresh"></i></span></li>
+             </c:if>
+             <c:if test="${not empty helpToolSignature or not empty helpModule}">
+             <li class="navbar-text" ><lams:help toolSignature="${helpToolSignature}" module="${helpModule}" style="small"/></li>
+             </c:if>
+             <c:if test="${not empty extraControl}">
+             <li class="navbar-text" >${extraControl}</li>
+             </c:if>
+         </ul>
+         </c:if>
+ 	    
+ 		</div>
+	 </div>
+     </nav>
+     <!-- /top nav -->
 </div>
+<!-- panel div closed by TabBodyArea -->
\ No newline at end of file
Index: lams_tool_images/web/WEB-INF/tags/headItems.tag
===================================================================
diff -u -r613f0d0d76eb497ed58d7e6836eda34a245425a9 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/WEB-INF/tags/headItems.tag	(.../headItems.tag)	(revision 613f0d0d76eb497ed58d7e6836eda34a245425a9)
+++ lams_tool_images/web/WEB-INF/tags/headItems.tag	(.../headItems.tag)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -41,7 +41,9 @@
 	<lams:WebAppURL />
 </c:set>
 
-<lams:css style="main"/>
+<lams:css/>
 
 <script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
-<script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/bootstrap.tabcontroller.js"></script>
Index: lams_tool_images/web/WEB-INF/tlds/lams/lams.tld
===================================================================
diff -u -r0ac411e19ec849c9586c506feede55d178f84d56 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 0ac411e19ec849c9586c506feede55d178f84d56)
+++ lams_tool_images/web/WEB-INF/tlds/lams/lams.tld	(.../lams.tld)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -178,7 +178,7 @@
       <name>css</name>
       <tag-class>org.lamsfoundation.lams.web.tag.CssTag</tag-class>
       <body-content>empty</body-content>
-
+      
       <attribute>
          <description>Output stylesheet based on the user preferences.</description>
          <name>style</name>
@@ -408,10 +408,18 @@
        <path>/WEB-INF/tags/TabBody.tag</path>
    	</tag-file>
    	<tag-file>
+       <name>TabBodys</name>
+       <path>/WEB-INF/tags/TabBodys.tag</path>
+   	</tag-file>
+   	<tag-file>
        <name>TabName</name>
        <path>/WEB-INF/tags/TabName.tag</path>
    	</tag-file>
    	<tag-file>
+       <name>TabBodyArea</name>
+       <path>/WEB-INF/tags/TabBodyArea.tag</path>
+   	</tag-file>
+   	<tag-file>
        <name>CKEditor</name>
        <path>/WEB-INF/tags/CKEditor.tag</path>
    	</tag-file>
@@ -440,17 +448,29 @@
 		<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>TSTable</name>
+		<path>/WEB-INF/tags/TSTable.tag</path>
+   	</tag-file>    
+  	<tag-file>
+	    <name>Arrow</name>
+		<path>/WEB-INF/tags/Arrow.tag</path>
+   	</tag-file>
+   	<tag-file>
+       <name>AdvancedAccordian</name>
+       <path>/WEB-INF/tags/AdvancedAccordian.tag</path>
    	</tag-file>  
+   	<tag-file>   		
+   		<name>RestrictedUsageAccordian</name>
+   		<path>/WEB-INF/tags/RestrictedUsageAccordian.tag</path>
+   	</tag-file>
    	<tag-file>
 	    <name>ImgButtonWrapper</name>
 		<path>/WEB-INF/tags/ImgButtonWrapper.tag</path>
@@ -493,5 +513,13 @@
 		<name>head</name>
 	    <path>/WEB-INF/tags/Head.tag</path>
 	</tag-file>
+   	<tag-file>
+       <name>Comments</name>
+       <path>/WEB-INF/tags/Comments.tag</path>
+   	</tag-file>
+   	<tag-file>
+       <name>CommentsAuthor</name>
+       <path>/WEB-INF/tags/CommentsAuthor.tag</path>
+   	</tag-file>
 
 </taglib>
Index: lams_tool_images/web/common/header.jsp
===================================================================
diff -u -r0ac411e19ec849c9586c506feede55d178f84d56 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/common/header.jsp	(.../header.jsp)	(revision 0ac411e19ec849c9586c506feede55d178f84d56)
+++ lams_tool_images/web/common/header.jsp	(.../header.jsp)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -8,10 +8,10 @@
 <lams:css />
 
  <!-- ********************  javascript ********************** -->
-<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
 <script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
 <script type="text/javascript" src="<html:rewrite page='/includes/javascript/imageGallerycommon.js'/>"></script>
-<script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/bootstrap.tabcontroller.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
 <script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
 
 	
Index: lams_tool_images/web/common/messages.jsp
===================================================================
diff -u -r0ac411e19ec849c9586c506feede55d178f84d56 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/common/messages.jsp	(.../messages.jsp)	(revision 0ac411e19ec849c9586c506feede55d178f84d56)
+++ lams_tool_images/web/common/messages.jsp	(.../messages.jsp)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -1,8 +1,8 @@
 <%-- Error Messages --%>
 <logic:messagesPresent>
-	 <lams:Alert id="error" type="danger" close="false">
+	 <lams:Alert id="errorMessages" type="danger" close="false">
 		<html:messages id="error">
 			<c:out value="${error}" escapeXml="false"/><br/>
 		</html:messages>
 	</lams:Alert>
-</logic:messagesPresent>
+</logic:messagesPresent>
\ No newline at end of file
Index: lams_tool_images/web/common/tabbedheader.jsp
===================================================================
diff -u -r613f0d0d76eb497ed58d7e6836eda34a245425a9 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/common/tabbedheader.jsp	(.../tabbedheader.jsp)	(revision 613f0d0d76eb497ed58d7e6836eda34a245425a9)
+++ lams_tool_images/web/common/tabbedheader.jsp	(.../tabbedheader.jsp)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -4,10 +4,12 @@
 <c:set var="ctxPath" value="${pageContext.request.contextPath}" scope="request"/>
 
 <!-- ********************  CSS ********************** -->
+<lams:css/>
 <link href="<html:rewrite page='/includes/css/imageGallery.css'/>" rel="stylesheet" type="text/css">
-<lams:css style="main"/>
 
 <!-- ********************  javascript ********************** -->
 <script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/bootstrap.min.js"></script>
+<script type="text/javascript" src="${lams}includes/javascript/bootstrap.tabcontroller.js"></script>
 <script type="text/javascript" src="<html:rewrite page='/includes/javascript/imageGallerycommon.js'/>"></script>
-<script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>    
Index: lams_tool_images/web/includes/javascript/imageGallerycommon.js
===================================================================
diff -u -rf3be94729c90c7390a6aea11d1886a4b72d96670 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/includes/javascript/imageGallerycommon.js	(.../imageGallerycommon.js)	(revision f3be94729c90c7390a6aea11d1886a4b72d96670)
+++ lams_tool_images/web/includes/javascript/imageGallerycommon.js	(.../imageGallerycommon.js)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -1,8 +1,27 @@
+/**
+ * Launches the popup window for the instruction files
+ */
+function showMessage(url) {
+	$("#reourceInputArea").load(url, function() {
+		var area=document.getElementById("reourceInputArea");
+		if (area != null) {
+			area.style.width="100%";
+			area.style.height="100%";
+			area.style.display="block";
+		}
+		var elem = document.getElementById("saveCancelButtons");
+		if (elem != null) {
+			elem.style.display="none";
+		}
+	});
+}
+	
 function showBusy(targetDiv){
 	if($(targetDiv+"_Busy") != null){
 		document.getElementById(targetDiv+"_Busy").style.display = '';
 	}
 }
+
 function hideBusy(targetDiv){
 	if($(targetDiv+"_Busy") != null){
 		document.getElementById(targetDiv+"_Busy").style.display = 'none';
Index: lams_tool_images/web/includes/javascript/imageGalleryitem.js
===================================================================
diff -u -rf3be94729c90c7390a6aea11d1886a4b72d96670 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/includes/javascript/imageGalleryitem.js	(.../imageGalleryitem.js)	(revision f3be94729c90c7390a6aea11d1886a4b72d96670)
+++ lams_tool_images/web/includes/javascript/imageGalleryitem.js	(.../imageGalleryitem.js)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -1,63 +1,152 @@
-    var itemAttachmentTargetDiv = "itemAttachmentArea";
-	function removeItemAttachment(idx){
-		//var id = "instructionItem" + idx;
-		//Element.remove(id);
- 		var url= removeItemAttachmentUrl;
-	    var reqIDVar = new Date();
-	    var param = "reqID="+reqIDVar.getTime();
-	    removeItemAttachmentLoading();
-	    var myAjax = new Ajax.Updater(
-		    	itemAttachmentTargetDiv,
-		    	url,
-		    	{
-		    		method:'post',
-		    		parameters:param,
-		    		onComplete:removeItemAttachmentComplete,
-		    		evalScripts:true
-		    	}
-	    );
-	}
-	function removeItemAttachmentLoading(){
-		showBusy(itemAttachmentTargetDiv);
-	}
-	function removeItemAttachmentComplete(){
-		hideBusy(itemAttachmentTargetDiv);
-	}
-	
-	function cancelImageGalleryItem(){
-		var win = null;
-		if (window.hideMessage) { 
-			win = window;
-		} else if (window.parent && window.parent.hideMessage) {
-			win = window.parent;
-		} else {
-			win = window.top;
+var itemAttachmentTargetDiv = "itemAttachmentArea";
+function removeItemAttachment(idx){
+    removeItemAttachmentLoading();
+	$("#" + itemAttachmentTargetDiv).load(
+		removeItemAttachmentUrl,
+		{
+			reqID: new Date()
 		}
-		win.hideMessage();
+	);	    
+}
+
+function removeItemAttachmentLoading(){
+	showBusy(itemAttachmentTargetDiv);
+}
+	
+function cancelImageGalleryItem(){
+	var win = null;
+	if (window.hideMessage) { 
+		win = window;
+	} else if (window.parent && window.parent.hideMessage) {
+		win = window.parent;
+	} else {
+		win = window.top;
 	}
-	/**
-	 * Launches the popup window for the instruction files
-	 */
-	function showMessage(url) {
-		var area = window.document.getElementById('reourceInputArea');
-		var elem = window.document.getElementById("saveCancelButtons");
-		if (!area && window.parent) {
-			area = window.parent.document.getElementById('reourceInputArea');
-			elem = window.parent.document.getElementById("saveCancelButtons");
-		}  
-		if (!area) {
-			obj = window.top.document.getElementById('reourceInputArea');
-			elem = window.top.document.getElementById("saveCancelButtons");
+	win.hideMessage();
+}
+
+function submitImageGalleryItem(){
+
+	if ( typeof CKEDITOR !== 'undefined' ) {
+		for ( instance in CKEDITOR.instances ) {
+			CKEDITOR.instances[instance].updateElement();
 		}
+	}
+
+	var formData = new FormData();
+	$.each($('#imageGalleryItemForm').serializeArray(), function(i, field) {
+		formData.append(field.name, field.value);
+	});
+	
+	// validate uploading file if we add it for the first time
+	if (!eval($("#has-file").val())) {
+		var fileSelect = document.getElementById('file-select');
+		// Get the selected files from the input.
+		var files = fileSelect.files;
 		
-		if(area != null){
-			area.style.width="100%";
-			area.src=url;
-			area.style.display="block";
+		if (files.length == 0) {
+			alert(LABEL_ITEM_BLANK);
+			return;
 		}
+		var file = files[0];
 
-		if (elem != null) {
-			elem.style.display="none";
+	    // Check the file type.
+		if (file.name.length < 1) {
+			alert("file.name.length < 1");
+			return;
+		} else if (file.size > UPLOAD_FILE_LARGE_MAX_SIZE) {
+			alert(LABEL_MAX_FILE_SIZE);
+			return;
+		} else if (file.type != 'image/png' && file.type != 'image/jpg' && file.type != 'image/gif' && file.type != 'image/jpeg' ) {
+			alert(LABEL_NOT_ALLOWED_FORMAT);
+			return;
 		}
-		location.hash = "reourceInputArea";
-	}	
+
+		// Add the file to the request.
+		formData.append('file', file, file.name);
+	}
+
+	$.ajax({
+    	type: 'POST',
+    	url: $("#imageGalleryItemForm").attr('action'),
+    	data: formData,
+        processData: false,
+        contentType: false,
+    	success: function(data) {
+    		$('#imageGalleryListArea').html(data);
+    	},
+    	error: function(jqXHR, textStatus, errorMessage) {
+        	alert(errorMessage);
+    	}
+	});
+} 
+
+function submitMultipleImageGalleryItems(){
+	var formData = new FormData();
+	formData.append('sessionMapID', $("#sessionMapID").val());
+	
+	// Get selected files from the inputs
+	var validateFiles = [];
+	if ($('#file1').val()) { 
+		var file = document.getElementById('file1').files[0];
+		validateFiles.push(file);
+		formData.append('file1', file, file.name);
+	}
+	if ($('#file2').val()) { 
+		var file = document.getElementById('file2').files[0];
+		validateFiles.push(file);
+		formData.append('file2', file, file.name);
+	}
+	if ($('#file3').val()) { 
+		var file = document.getElementById('file3').files[0];
+		validateFiles.push(file);
+		formData.append('file3', file, file.name);
+	}
+	if ($('#file4').val()) {
+		var file = document.getElementById('file4').files[0];
+		validateFiles.push(file);
+		formData.append('file4', file, file.name);
+	}
+	if ($('#file5').val()) { 
+		var file = document.getElementById('file5').files[0];
+		validateFiles.push(file);
+		formData.append('file5', file, file.name);
+	}
+		
+	// validate files 
+	if (validateFiles.length == 0) {
+		alert(LABEL_ITEM_BLANK);
+		return;
+	}
+	for (var i = 0; i < validateFiles.length; i++) {
+		  var file = validateFiles[i];
+
+		  // Check the file type.
+		  if(file.name.length < 1) {
+			  alert("file.name.length < 1");
+			  return;
+		  } else if (file.size > UPLOAD_FILE_LARGE_MAX_SIZE) {
+			  alert(LABEL_MAX_FILE_SIZE);
+			  return;
+		  } else if (file.type != 'image/png' && file.type != 'image/jpg' && file.type != 'image/gif' && file.type != 'image/jpeg' ) {
+			  alert(LABEL_NOT_ALLOWED_FORMAT);
+			  return;
+		  }
+
+		  // Add the file to the request.
+	}
+
+	$.ajax({
+    	type: 'POST',
+    	url: saveMultipleImagesUrl,
+    	data: formData,
+        processData: false,
+        contentType: false,
+    	success: function(data) {
+    		$('#imageGalleryListArea').html(data);
+    	},
+    	error: function(jqXHR, textStatus, errorMessage) {
+        	alert(errorMessage);
+    	}
+	});
+} 
Index: lams_tool_images/web/pages/authoring/advance.jsp
===================================================================
diff -u -r434a2aec5c62876edcb6dc8908896939080f1cf2 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/pages/authoring/advance.jsp	(.../advance.jsp)	(revision 434a2aec5c62876edcb6dc8908896939080f1cf2)
+++ lams_tool_images/web/pages/authoring/advance.jsp	(.../advance.jsp)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -3,10 +3,10 @@
 <script lang="javascript">
 	$(document).ready(function() {
 	    $('#allowRank').click(function() {
-	        $("#criterias-holder").show("slow");
+	        $(".rating-criteria-tag").show("slow");
 	    });
 	    $('#allowVote').click(function() {
-	    	$("#criterias-holder").hide("slow");
+	    	$(".rating-criteria-tag").hide("slow");
 	    });//if(!$(this).is(":checked")) {
 	})
 
@@ -21,104 +21,103 @@
 		} else {
 			document.imageGalleryForm.allowVote.checked = false;
 			document.imageGalleryForm.allowRank.checked = false;
-			$("#criterias-holder").hide("slow");
+			$(".rating-criteria-tag").hide("slow");
 		}
 	}
 
 	function uncheckNotifyTeachersOnImageSumbit() {
 		document.imageGalleryForm.notifyTeachersOnImageSumbit.checked = false;
 		document.imageGalleryForm.notifyTeachersOnImageSumbit.disabled = ! eval(document.imageGalleryForm.notifyTeachersOnImageSumbit.disabled);
 	}
-
 </script>
 	
 <c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
 <c:set var="sessionMap"	value="${sessionScope[formBean.sessionMapID]}" />
 
 <!-- Advance Tab Content -->
 
-<p class="small-space-top">
-	<html:checkbox property="imageGallery.lockWhenFinished"	styleClass="noBorder" styleId="lockWhenFinished">
-	</html:checkbox>
-
-	<label for="lockWhenFinished">
+<div class="checkbox">
+	<label for="lock-when-finished">
+		<html:checkbox property="imageGallery.lockWhenFinished" styleId="lock-when-finished"/>
 		<fmt:message key="label.authoring.advance.lock.on.finished" />
 	</label>
-</p>
+</div>
 
-<p>
-	<html:checkbox property="imageGallery.allowShareImages" styleClass="noBorder" styleId="allowShareImages"
-	onclick="uncheckNotifyTeachersOnImageSumbit();">
-	</html:checkbox>
+<div class="checkbox">
 	<label for="allowShareImages">
+		<html:checkbox property="imageGallery.allowShareImages" styleId="allowShareImages"
+				onclick="uncheckNotifyTeachersOnImageSumbit();"/>
 		<fmt:message key="label.authoring.advance.allow.learner.share.images" />
 	</label>
-</p>
+</div>
 
-<p style="margin-left:40px;">
-	<html:checkbox property="imageGallery.notifyTeachersOnImageSumbit" styleClass="noBorder" styleId="notifyTeachersOnImageSumbit"
-			disabled="${not formBean.imageGallery.allowShareImages}" >
-	</html:checkbox>
+<div class="checkbox loffset20">
 	<label for="notifyTeachersOnImageSumbit">
+		<html:checkbox property="imageGallery.notifyTeachersOnImageSumbit" styleId="notifyTeachersOnImageSumbit"
+				disabled="${not formBean.imageGallery.allowShareImages}"/>
 		<fmt:message key="label.authoring.advance.notify.monitoring.teachers" />
 	</label>
-</p>
+</div>
 
-<p>
-	<html:checkbox property="allowRatingsOrVote" styleClass="noBorder" styleId="allowRatingsOrVote"
-		onclick="allowRatingsOrVoteClicked();"
-	>
-	</html:checkbox>
+<div class="checkbox">
 	<label for="allowRatingsOrVote">
+		<html:checkbox property="allowRatingsOrVote" styleId="allowRatingsOrVote"
+				onclick="allowRatingsOrVoteClicked();"/>
 		<fmt:message key="label.authoring.advance.allow.learner.ratings.or.vote" />
 	</label>
+</div>
 	
-	<div style="margin-left:40px;">
-		<input type="radio" name="imageGallery.allowVote" value="${true}" id="allowVote"
-			<c:if test="${formBean.imageGallery.allowVote}">checked="checked"</c:if>
-			<c:if test="${not (formBean.imageGallery.allowVote or formBean.imageGallery.allowRank)}">disabled="disabled"</c:if> 
-		/>
+<div class="loffset20">
+
+	<div class="radio">
 		<label for="allowVote">
+			<input type="radio" name="imageGallery.allowVote" value="${true}" id="allowVote"
+				<c:if test="${formBean.imageGallery.allowVote}">checked="checked"</c:if>
+				<c:if test="${not (formBean.imageGallery.allowVote or formBean.imageGallery.allowRank)}">disabled="disabled"</c:if> 
+			/>
 			<fmt:message key="label.authoring.advance.allow.learner.vote" />
 		</label>
-		<br><br>
+	</div>
 	
-		<input type="radio" name="imageGallery.allowVote" value="${false}" id="allowRank"
-			<c:if test="${formBean.imageGallery.allowRank}">checked="checked"</c:if> 
-			<c:if test="${not (formBean.imageGallery.allowVote or formBean.imageGallery.allowRank)}">disabled="disabled"</c:if>		
-		/>
+	<div class="radio">
 		<label for="allowRank">
+			<input type="radio" name="imageGallery.allowVote" value="${false}" id="allowRank"
+				<c:if test="${formBean.imageGallery.allowRank}">checked="checked"</c:if> 
+				<c:if test="${not (formBean.imageGallery.allowVote or formBean.imageGallery.allowRank)}">disabled="disabled"</c:if>		
+			/>
 			<fmt:message key="label.authoring.advance.allow.learner.rank" />
 		</label>
-		
-		<div id="criterias-holder" <c:if test="${!formBean.imageGallery.allowRank}"> style="display:none;"</c:if> >
-			<lams:AuthoringRatingCriteria criterias="${sessionMap.ratingCriterias}" hasRatingLimits="true"
-				upLabel="label.authoring.up" downLabel="label.authoring.down"
-				allowCommentsLabel="label.authoring.advance.allow.learner.comment.images"
-				formContentPrefix="imageGallery"/>
-		</div>
 	</div>
-</p>
+		
+	<c:if test='${!formBean.imageGallery.allowRank}'><c:set var="styleId">display:none;</c:set></c:if>
+	<lams:AuthoringRatingCriteria criterias="${sessionMap.ratingCriterias}" hasRatingLimits="true"
+		upLabel="label.authoring.up" downLabel="label.authoring.down"
+		allowCommentsLabel="label.authoring.advance.allow.learner.comment.images"
+		formContentPrefix="imageGallery"
+	    styleId="${styleId}"/>
+	
+</div>
 
-<p>
-	<html:checkbox property="imageGallery.reflectOnActivity" styleClass="noBorder" styleId="reflectOn"/>
-	<label for="reflectOn">
+<div class="checkbox">
+	<label for="reflect-on">
+		<html:checkbox property="imageGallery.reflectOnActivity" styleId="reflect-on"/>
 		<fmt:message key="label.authoring.advanced.reflectOnActivity" />
 	</label>
-</p>
+</div>
 
-<p>
-	<html:textarea property="imageGallery.reflectInstructions" styleId="reflectInstructions" cols="30" rows="3" />
-</p>
+<div class="form-group">
+	<html:textarea property="imageGallery.reflectInstructions" cols="60" rows="3" styleId="reflect-instructions" styleClass="form-control"/>
+</div>
+
 <script type="text/javascript">
-//automatically turn on refect option if there are text input in refect instruction area
-	var ra = document.getElementById("reflectInstructions");
-	var rao = document.getElementById("reflectOn");
+	//automatically turn on refect option if there are text input in refect instruction area
+	var ra = document.getElementById("reflect-instructions");
+	var rao = document.getElementById("reflect-on");
 	function turnOnRefect(){
-		if(isEmpty(ra.value)){
+		if (isEmpty(ra.value)) {
 		//turn off	
 			rao.checked = false;
-		}else{
+		} else {
 		//turn on
 			rao.checked = true;		
 		}
Index: lams_tool_images/web/pages/authoring/authoring.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/pages/authoring/authoring.jsp	(.../authoring.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_images/web/pages/authoring/authoring.jsp	(.../authoring.jsp)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -1,7 +1,9 @@
 <!DOCTYPE html>
-
 <%@ include file="/common/taglibs.jsp"%>
 <%@ page import="org.lamsfoundation.lams.tool.imageGallery.ImageGalleryConstants"%>
+<%@ page import="org.lamsfoundation.lams.util.Configuration" %>
+<%@ page import="org.lamsfoundation.lams.util.ConfigurationKeys" %>
+<c:set var="UPLOAD_FILE_LARGE_MAX_SIZE"><%=Configuration.get(ConfigurationKeys.UPLOAD_FILE_LARGE_MAX_SIZE)%></c:set>
 
 <lams:html>
 <lams:head>
@@ -10,8 +12,17 @@
 	<%@ include file="/common/tabbedheader.jsp"%>
 	
 	<link href="${lams}css/jquery-ui-redmond-theme.css" rel="stylesheet" type="text/css" >
-	
-	<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
+
+	<script type="text/javascript">
+		<%-- used for  imageGalleryitem.js --%>
+		var removeItemAttachmentUrl = "<c:url value='/authoring/removeImageFile.do'/>";
+		var saveMultipleImagesUrl = "<c:url value='/authoring/saveMultipleImages.do'/>";
+		var UPLOAD_FILE_LARGE_MAX_SIZE = "${UPLOAD_FILE_LARGE_MAX_SIZE}";
+		var LABEL_ITEM_BLANK = '<fmt:message key="error.resource.item.file.blank"/>';
+		var LABEL_MAX_FILE_SIZE = '<fmt:message key="errors.maxfilesize"/>';
+		var LABEL_NOT_ALLOWED_FORMAT = '<fmt:message key="error.resource.image.not.alowed.format"/>';
+	</script>
+	<script type="text/javascript" src="<html:rewrite page='/includes/javascript/imageGalleryitem.js'/>"></script>
 	<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.js"></script>
 	<script>
         function init(){
@@ -32,60 +43,48 @@
     </script>
  
 </lams:head>
+
 <body class="stripes" onLoad="init();">
-	<div id="page">
-		<h1>
-			<fmt:message key="label.authoring.heading" />
-		</h1>
-		<div id="header">
-			<lams:Tabs useKey="true" control="true">
-				<lams:Tab id="1" key="label.authoring.heading.basic" />
-				<lams:Tab id="2" key="label.authoring.heading.advance" />
-			</lams:Tabs>
-		</div>
+	<html:form action="authoring/update" method="post" styleId="authoringForm" enctype="multipart/form-data">
+		<c:set var="formBean" value="<%= request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY) %>" />
 	
-		<!-- start tabs -->
-		<div id="content">
-			<!-- end tab buttons -->
-			
-			<%@ include file="/common/messages.jsp"%>
+		<c:set var="title"><fmt:message key="label.learning.heading" /></c:set>
+		<lams:Page title="${title}" type="navbar">
+		
+			<html:hidden property="imageGallery.contentId"/>
+			<html:hidden property="sessionMapID" />
+			<html:hidden property="contentFolderID" />
+			<html:hidden property="currentTab" styleId="currentTab" />
 	
-			<html:form action="authoring/update" method="post" styleId="authoringForm" enctype="multipart/form-data">
-				<c:set var="formBean" value="<%= request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY) %>" />
-				<html:hidden property="imageGallery.contentId" />
-				<html:hidden property="sessionMapID" />
-				<html:hidden property="contentFolderID" />
-				<html:hidden property="currentTab" styleId="currentTab" />
+			<lams:Tabs control="true" title="${title}" helpToolSignature="<%= ImageGalleryConstants.TOOL_SIGNATURE %>" helpModule="authoring">
+				<lams:Tab id="1" key="label.authoring.heading.basic" />
+				<lams:Tab id="2" key="label.authoring.heading.advance" />
+			</lams:Tabs>	
 		
-				<lams:help toolSignature="<%= ImageGalleryConstants.TOOL_SIGNATURE %>" module="authoring"/>
+		 	<lams:TabBodyArea>
+		 		<%@ include file="/common/messages.jsp"%>
+		 		
+				<!--  Set up tabs  -->
+		 		<lams:TabBodys>
+   					<lams:TabBody id="1" titleKey="label.authoring.heading.basic.desc" page="basic.jsp" />
+ 					<lams:TabBody id="2" titleKey="label.authoring.heading.advance.desc" page="advance.jsp" />
+  				</lams:TabBodys>
 		
-					<!-- tab content 1 (Basic) -->
-					<lams:TabBody id="1" titleKey="label.authoring.heading.basic.desc" page="basic.jsp" />
-					<!-- end of content (Basic) -->
-		
-					<!-- tab content 2 (Advanced) -->
-					<lams:TabBody id="2" titleKey="label.authoring.heading.advance.desc" page="advance.jsp" />
-					<!-- end of content (Advanced) -->
-		
-					<!-- Button Row -->
-					<%--  Default value 
-						cancelButtonLabelKey="label.authoring.cancel.button"
-						saveButtonLabelKey="label.authoring.save.button"
-						cancelConfirmMsgKey="authoring.msg.cancel.save"
+				<!-- Button Row -->
+				<div id="saveCancelButtons">
+					<lams:AuthoringButton formID="authoringForm"
+						clearSessionActionUrl="/clearsession.do" toolSignature="<%=ImageGalleryConstants.TOOL_SIGNATURE%>"
+						toolContentID="${formBean.imageGallery.contentId}"
 						accessMode="author"
-					--%>
-					<lams:AuthoringButton formID="authoringForm" clearSessionActionUrl="/clearsession.do" 
-						toolSignature="<%=ImageGalleryConstants.TOOL_SIGNATURE%>" toolContentID="${formBean.imageGallery.contentId}" 
-						 customiseSessionID="${formBean.sessionMapID}"
-						 contentFolderID="${formBean.contentFolderID}" />
-			</html:form>
+						contentFolderID="${formBean.contentFolderID}" />
+				</div>
+			</lams:TabBodyArea>
 	
-		</div>
+			<div id="footer"></div>
 	
-		<div id="footer"></div>
-
-	<!-- end page div -->
-	</div>
-
+		<!-- end page div -->
+		</lams:Page>
+	
+	</html:form>
 </body>
 </lams:html>
Index: lams_tool_images/web/pages/authoring/basic.jsp
===================================================================
diff -u -rf3be94729c90c7390a6aea11d1886a4b72d96670 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/pages/authoring/basic.jsp	(.../basic.jsp)	(revision f3be94729c90c7390a6aea11d1886a4b72d96670)
+++ lams_tool_images/web/pages/authoring/basic.jsp	(.../basic.jsp)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -10,22 +10,6 @@
 <script lang="javascript">
 <!-- Common Javascript functions for LAMS -->
 
-	/**
-	 * Launches the popup window for the instruction files
-	 */
-	function showMessage(url) {
-		var area=document.getElementById("reourceInputArea");
-		if(area != null){
-			area.style.width="100%";
-			area.src=url;
-			area.style.display="block";
-		}
-		var elem = document.getElementById("saveCancelButtons");
-		if (elem != null) {
-			elem.style.display="none";
-		}
-		location.hash = "reourceInputArea";
-	}
 	function hideMessage(){
 		var area=document.getElementById("reourceInputArea");
 		if(area != null){
@@ -50,14 +34,12 @@
 		var	deletionConfirmed = confirm("<fmt:message key="warning.msg.authoring.do.you.want.to.delete"></fmt:message>");
 		
 		if (deletionConfirmed) {
-			var url = "<c:url value="/authoring/removeImage.do"/>";
-			var param = "imageIndex=" + idx +"&sessionMapID="+sessionMapID;;
 			deleteItemLoading();
 			$("#" + imageGalleryListTargetDiv).load(
-				url,
+				"<c:url value="/authoring/removeImage.do"/>",
 				{
-					itemIndex: idx,
-					reqID: reqIDVar.getTime(), 
+					imageIndex: idx,
+					reqID: (new Date()).getTime(), 
 					sessionMapID: sessionMapID
 				},
 				function() {
@@ -67,24 +49,6 @@
 		}
 	}
 	
-	function deleteItem(idx,sessionMapID){
-		var url = "<c:url value="/authoring/removeItem.do"/>";
-	    var reqIDVar = new Date();
-		deleteItemLoading();
-	    
-		$("#" + resourceListTargetDiv).load(
-			url,
-			{
-				itemIndex: idx,
-				reqID: reqIDVar.getTime(), 
-				sessionMapID: sessionMapID
-			},
-			function() {
-				deleteItemComplete();
-			}
-		);
-	}
-	
 	function deleteItemLoading(){
 		showBusy(imageGalleryListTargetDiv);
 	}
@@ -94,14 +58,12 @@
 	}
 	
 	function upImage(idx, sessionMapID){
-		var url = "<c:url value="/authoring/upImage.do"/>";
-	    var reqIDVar = new Date();
 		deleteItemLoading();
 		$("#" + imageGalleryListTargetDiv).load(
-			url,
+			"<c:url value="/authoring/upImage.do"/>",
 			{
-				itemIndex: idx,
-				reqID: reqIDVar.getTime(), 
+				imageIndex: idx,
+				reqID: (new Date()).getTime(), 
 				sessionMapID: sessionMapID
 			},
 			function() {
@@ -110,69 +72,51 @@
 		);
 	}
 	function downImage(idx, sessionMapID){
-		var url = "<c:url value="/authoring/downImage.do"/>";
-	    var reqIDVar = new Date();
 		deleteItemLoading();
 		$("#" + imageGalleryListTargetDiv).load(
-			url,
+			"<c:url value="/authoring/downImage.do"/>",
 			{
-				itemIndex: idx,
-				reqID: reqIDVar.getTime(), 
+				imageIndex: idx,
+				reqID: (new Date()).getTime(), 
 				sessionMapID: sessionMapID
 			},
 			function() {
 				deleteItemComplete();
 			}
 		);
 	}
-	
-	function resizeOnMessageFrameLoad(){
-		var messageAreaFrame = document.getElementById("reourceInputArea");
-		messageAreaFrame.style.height=messageAreaFrame.contentWindow.document.body.scrollHeight+'px';
-	}
 
 </script>
+
 <!-- Basic Tab Content -->
-<table>
-	<tr>
-		<td colspan="2">
-			<div class="field-name">
-				<fmt:message key="label.authoring.basic.title"></fmt:message>
-			</div>
-			<html:text property="imageGallery.title" style="width: 99%;"></html:text>
-		</td>
-	</tr>
-	<tr>
-		<td colspan="2">
-			<div class="field-name">
-				<fmt:message key="label.authoring.basic.instruction"></fmt:message>
-			</div>
-			<lams:CKEditor id="imageGallery.instructions"
-				value="${formBean.imageGallery.instructions}"
-				contentFolderID="${formBean.contentFolderID}"
-				width="100%">
-			</lams:CKEditor>
-		</td>
-	</tr>
+<div class="form-group">
+    <label for="imageGallery.title">
+    	<fmt:message key="label.authoring.basic.title"/>
+    </label>
+    <html:text property="imageGallery.title" styleClass="form-control"/>
+</div>
 
-</table>
+<div class="form-group">
+    <label for="imageGallery.instructions">
+    	<fmt:message key="label.authoring.basic.instruction"/>
+    </label>
+	<lams:CKEditor id="imageGallery.instructions" value="${formBean.imageGallery.instructions}"
+			contentFolderID="${formBean.contentFolderID}" height="400">
+	</lams:CKEditor>
+</div>
 
 <div id="imageGalleryListArea">
 	<c:set var="sessionMapID" value="${formBean.sessionMapID}" />
 	<%@ include file="/pages/authoring/parts/itemlist.jsp"%>
 </div>
 
-<p align="small-space-bottom">
-	<a href="javascript:showMessage('<html:rewrite page="/authoring/newImageInit.do?sessionMapID=${formBean.sessionMapID}"/>');"  class="button-add-item">
-		<fmt:message key="label.authoring.basic.add.image" />
-	</a>
-</p>
-
+<c:url var="showMessageURL" value='/authoring/newImageInit.do'>
+	<c:param name="sessionMapID" value="${formBean.sessionMapID}" />
+</c:url>
+<html:link href="#" styleClass="btn btn-default btn-sm" onclick="javascript:showMessage('${showMessageURL}')">
+	<i class="fa fa-plus"></i>&nbsp;<fmt:message key="label.authoring.basic.add.image" />
+</html:link>
 <p>
-	<iframe
-		onload="javascript:resizeOnMessageFrameLoad();"
-		id="reourceInputArea" name="reourceInputArea"
-		style="width:0px;height:0px;border:0px;display:none" frameborder="no"
-		scrolling="no">
-	</iframe>
+	<div onload="javascript:window.location.hash = '#reourceInputArea';" id="reourceInputArea" name="reourceInputArea" style="voffset10"> 
+	</div>
 </p>
Index: lams_tool_images/web/pages/authoring/parts/addimage.jsp
===================================================================
diff -u -r613f0d0d76eb497ed58d7e6836eda34a245425a9 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/pages/authoring/parts/addimage.jsp	(.../addimage.jsp)	(revision 613f0d0d76eb497ed58d7e6836eda34a245425a9)
+++ lams_tool_images/web/pages/authoring/parts/addimage.jsp	(.../addimage.jsp)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -1,88 +1,66 @@
-<!DOCTYPE html>
-		
 <%@ include file="/common/taglibs.jsp"%>
-
-<lams:html>
-	<lams:head>
-		<%@ include file="/common/header.jsp"%>
-		<script type="text/javascript" src="${lams}includes/javascript/prototype.js"></script>
-		<lams:css style="main"/>
-
-		<script type="text/javascript">
-		   <%-- used for  imageGalleryitem.js --%>
-	       var removeItemAttachmentUrl = "<c:url value='/authoring/removeImageFile.do'/>";
-		</script>
-		<script type="text/javascript" src="<html:rewrite page='/includes/javascript/imageGalleryitem.js'/>"></script>
-		<script type="text/javascript" src="<lams:LAMSURL />includes/javascript/jquery.js"></script>
-		<script type="text/javascript">	
-			$.noConflict();
-			jQuery(function() {
-				//change size of an iframe on ckeditor's autogrow 
-				CKEDITOR.instances.description.on("instanceReady", function(e) {
-				    e.editor.on('resize',function(reEvent){
-				    	var iframe = window.parent.document.getElementById("reourceInputArea");
-				    	iframe.style.height = eval(iframe.contentWindow.document.body.scrollHeight) + 'px';
-				    });
-				});
-			});
-		</script>
+	
+<div class="panel panel-default">
+	<div class="panel-heading">
+		<div class="panel-title">
+			<fmt:message key="label.authoring.basic.add.image" />
+		</div>
+	</div>
 		
-	</lams:head>
-	<body>
+	<div class="panel-body">
 
-		<!-- Basic Info Form-->
-
 		<%@ include file="/common/messages.jsp"%>
-		<html:form action="/authoring/saveOrUpdateImage" method="post"
-			styleId="imageGalleryItemForm" enctype="multipart/form-data">
+		<html:form action="/authoring/saveOrUpdateImage" method="post" styleId="imageGalleryItemForm" enctype="multipart/form-data">
+			<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
+			<c:set var="sessionMap"	value="${sessionScope[formBean.sessionMapID]}" />
 			<html:hidden property="sessionMapID" />
 			<html:hidden property="imageIndex" />
-
-
-			<h2 class="no-space-left">
-				<fmt:message key="label.authoring.basic.add.image" />
-			</h2>
-
-			<div class="field-name">
-				<fmt:message key="label.authoring.basic.resource.title.input" />
-			</div>
-			<html:text property="title" size="55" tabindex="1" />
 	
-			<div class="field-name space-top">
-            	<fmt:message key="label.authoring.basic.resource.description.input" />
+			<div class="form-group">
+			    <label for="file-title">
+			    	<fmt:message key="label.authoring.basic.resource.title.input"/>
+			    </label>
+			    <html:text property="title" styleClass="form-control" styleId="file-title" tabindex="1"/>
 			</div>
-			<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
-			<c:set var="sessionMap"	value="${sessionScope[formBean.sessionMapID]}" />
-			<div class="small-space-bottom" >
+		
+			<div class="form-group">
+				<label for="description">
+					<fmt:message key="label.authoring.basic.resource.description.input" />
+				</label>
+	            	
 				<lams:CKEditor id="description" value="${formBean.description}" width="99%" 
-					contentFolderID="${sessionMap.imageGalleryForm.contentFolderID}" resizeParentFrameName="reourceInputArea" />
+					contentFolderID="${sessionMap.imageGalleryForm.contentFolderID}" 
+					resizeParentFrameName="reourceInputArea" />
 			</div>
-
-			<div class="field-name space-top">
-				<fmt:message key="label.authoring.basic.resource.file.input" />
+				
+			<div class="form-group">
+			    <label for="itemAttachmentArea">
+			    	<fmt:message key="label.authoring.basic.resource.file.input"/>
+			    </label>
+				    
+				<c:set var="itemAttachment" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
+				<div id="itemAttachmentArea">
+					<%@ include file="/pages/authoring/parts/imagefile.jsp"%>
+				</div>
 			</div>
-			<c:set var="itemAttachment" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
-			<div id="itemAttachmentArea">
-				<%@ include file="/pages/authoring/parts/imagefile.jsp"%>
-			</div>
-			
+				
 			<c:if test="${empty formBean.imageIndex}">
-				<div style="margin-bottom: 10px; margin-top: 15px;">
-					<a href="javascript:showMessage('<html:rewrite page="/authoring/initMultipleImages.do?sessionMapID=${formBean.sessionMapID}"/>');" >
-						<fmt:message key="label.authoring.basic.upload.multiple.images" />
-					</a>
-				</div>	
+				<a href="javascript:showMessage('<html:rewrite page="/authoring/initMultipleImages.do?sessionMapID=${formBean.sessionMapID}"/>');" 
+						class="btn btn-default btn-xs">
+					<fmt:message key="label.authoring.basic.upload.multiple.images" />
+				</a>
 			</c:if>		
-
+	
 		</html:form>
-
-		<lams:ImgButtonWrapper>
-			<a href="#" onclick="document.imageGalleryItemForm.submit();" class="button-add-item" style="padding-bottom: 40px;">
+	
+		<div class="voffset10 pull-right">
+			<a href="#nogo" onclick="javascript:submitImageGalleryItem()" class="btn btn-sm btn-default button-add-item">
 				<fmt:message key="label.authoring.basic.add.image" /> 
 			</a>
-			<a href="javascript:;" onclick="cancelImageGalleryItem()" class="button space-left">
+			<a href="#nogo" onclick="javascript:cancelImageGalleryItem()" class="btn btn-sm btn-default loffset5">
 				<fmt:message key="label.cancel" /> 
 			</a>
-		</lams:ImgButtonWrapper>
-	</body>
-</lams:html>
+		</div>
+		
+	</div>
+</div>
Index: lams_tool_images/web/pages/authoring/parts/addmultipleimages.jsp
===================================================================
diff -u -r613f0d0d76eb497ed58d7e6836eda34a245425a9 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/pages/authoring/parts/addmultipleimages.jsp	(.../addmultipleimages.jsp)	(revision 613f0d0d76eb497ed58d7e6836eda34a245425a9)
+++ lams_tool_images/web/pages/authoring/parts/addmultipleimages.jsp	(.../addmultipleimages.jsp)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -1,64 +1,56 @@
-<!DOCTYPE html>
-		
 <%@ include file="/common/taglibs.jsp"%>
+	
+<div class="panel panel-default">
+	<div class="panel-heading">
+		<div class="panel-title">
+			<fmt:message key="label.authoring.basic.add.multiple.images" />
+		</div>
+	</div>
+		
+	<div class="panel-body">
 
-<lams:html>
-	<lams:head>
-		<%@ include file="/common/header.jsp"%>
-		<script type="text/javascript" src="${lams}includes/javascript/prototype.js"></script>
-		<lams:css style="main"/>
-
-		<script type="text/javascript">
-		   <%-- user for  imageGalleryitem.js --%>
-	       var removeItemAttachmentUrl = "<c:url value='/authoring/removeItemAttachment.do'/>";
-		</script>
-		<script type="text/javascript" src="<html:rewrite page='/includes/javascript/imageGalleryitem.js'/>"></script>
-	</lams:head>
-	<body>
-
-		<!-- Basic Info Form-->
-
 		<%@ include file="/common/messages.jsp"%>
-		<html:form action="/authoring/saveMultipleImages" method="post" styleId="multipleImagesForm" enctype="multipart/form-data">
-			<html:hidden property="sessionMapID" />
-
-			<h2 class="no-space-left">
-				<fmt:message key="label.authoring.basic.add.multiple.images" />
-			</h2>
-
-			<div class="field-name space-top">
-				<fmt:message key="label.authoring.basic.resource.files.input" />
+		<html:form action="/authoring/saveMultipleImages" method="post" styleId="imageGalleryItemsForm" enctype="multipart/form-data">
+			<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />	
+			<html:hidden property="sessionMapID" styleId="sessionMapID"/>
+	
+			<div class="form-group">
+				<label>
+					<fmt:message key="label.authoring.basic.resource.files.input"/>
+				</label>
+					
+				<div>
+					<input type="file" name="file1" id="file1"/>
+				</div>
+				<div class="voffset5">
+					<input type="file" name="file2" id="file2"/>
+				</div>
+				<div class="voffset5">
+					<input type="file" name="file3" id="file3"/>
+				</div>
+				<div class="voffset5">
+					<input type="file" name="file4" id="file4"/>
+				</div>
+				<div class="voffset5">
+					<input type="file" name="file5" id="file5"/>
+				</div>
 			</div>
-			<div style="margin-left: 15px;">
-				<input type="file" name="file1" />
-			</div>
-			<div style="margin-top: 4px; margin-left: 15px;">
-				<input type="file" name="file2" />
-			</div>
-			<div style="margin-top: 4px; margin-left: 15px;">
-				<input type="file" name="file3" />
-			</div>
-			<div style="margin-top: 4px; margin-left: 15px;">
-				<input type="file" name="file4" />
-			</div>
-			<div style="margin-top: 4px; margin-left: 15px;">
-				<input type="file" name="file5" />
-			</div>
-
-			<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />			
-			<div style="margin-bottom: 10px; margin-top: 15px;">
-				<a href="javascript:showMessage('<html:rewrite page="/authoring/newImageInit.do?sessionMapID=${formBean.sessionMapID}"/>');" >
-					<fmt:message key="label.authoring.basic.upload.single.image" />
-				</a>
-			</div>			
-
+	
+			<a href="javascript:showMessage('<html:rewrite page="/authoring/newImageInit.do?sessionMapID=${formBean.sessionMapID}"/>');" 
+					class="btn btn-default btn-xs">
+				<fmt:message key="label.authoring.basic.upload.single.image" />
+			</a>			
+	
 		</html:form>
-
-		<lams:ImgButtonWrapper>
-			<a href="#" onclick="document.multipleImagesForm.submit();" class="button-add-item"><fmt:message
-					key="label.authoring.basic.add.images" /> </a>
-			<a href="javascript:;" onclick="cancelImageGalleryItem()" class="button space-left"><fmt:message
-					key="label.cancel" /> </a>
-		</lams:ImgButtonWrapper>
-	</body>
-</lams:html>
+			
+		<div class="voffset10 pull-right">
+			<a href="#nogo" onclick="javascript:submitMultipleImageGalleryItems()" class="btn btn-sm btn-default button-add-item">
+				<fmt:message key="label.authoring.basic.add.images" /> 
+			</a>
+			<a href="#nogo" onclick="javascript:cancelImageGalleryItem()" class="btn btn-sm btn-default loffset5">
+				<fmt:message key="label.cancel" /> 
+			</a>
+		</div>
+		
+	</div>
+</div>
Index: lams_tool_images/web/pages/authoring/parts/imagefile.jsp
===================================================================
diff -u -r616336eff87580ecb6f13770899bc9af7eff4fa8 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/pages/authoring/parts/imagefile.jsp	(.../imagefile.jsp)	(revision 616336eff87580ecb6f13770899bc9af7eff4fa8)
+++ lams_tool_images/web/pages/authoring/parts/imagefile.jsp	(.../imagefile.jsp)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -1,45 +1,38 @@
 <%@ include file="/common/taglibs.jsp"%>
 <c:set var="ctxPath" value="${pageContext.request.contextPath}"	scope="request" />
-<input type="hidden" name="hasFile" value="${itemAttachment.hasFile}" />
+<input type="hidden" name="hasFile" value="${itemAttachment.hasFile}" id="has-file"/>
+
 <c:choose>
 	<c:when test="${itemAttachment.hasFile}">
-		<table border="0" style="align:left;width:400px">
+		<table border="0" style="align:left; width:400px">
 			<tr>
 				<td>
 					<c:out value="${itemAttachment.fileName}" />
 				</td>
 				
-			<td width="3%" align="left">
-				<c:set var="viewURL">
-					<html:rewrite page="/download/?uuid=${itemAttachment.fileUuid}&preferDownload=false" />
-				</c:set>
-				<a href="javascript:launchInstructionsPopup('<c:out value='${viewURL}' escapeXml='false'/>')" class="button"> <fmt:message key="label.view" /> </a> &nbsp;
-			</td>
+				<td width="3%" align="left">
+					<c:set var="viewURL">
+						<html:rewrite page="/download/?uuid=${itemAttachment.fileUuid}&preferDownload=false" />
+					</c:set>					
+					<a href="#nogo" onclick="javascript:launchInstructionsPopup('<c:out value='${viewURL}' escapeXml='false'/>')" class="btn btn-default btn-xs">
+						<fmt:message key="label.view" />
+					</a>
+				</td>
 				
-				
 				<td>
-					<a href="#"	onclick="removeItemAttachment(${itemAttachment.imageIndex})" class="button">
-						<fmt:message key="label.delete" /> 
+					<a href="#nogo" onclick="javascript:removeItemAttachment(${itemAttachment.imageIndex})" class="btn btn-default btn-xs loffset5">
+						<fmt:message key="label.delete" />
 					</a>
 				</td>
+				
 				<td>
 					<img src="${ctxPath}/includes/images/indicator.gif"	style="display:none" id="itemAttachmentArea_Busy" />
 				</td>
 			</tr>
 		</table>
 	</c:when>
+	
 	<c:otherwise>
-		<input type="file" name="file" />
+		<input type="file" name="file" id="file-select"/>
 	</c:otherwise>
 </c:choose>
-<!-- 
-<c:choose>
-	<c:when test="${itemAttachment.hasFile}">
-			<iframe
-				id="externalSpreadsheet" name="externalSpreadsheet" src="<html:rewrite page='/download/?uuid=${itemAttachment.fileUuid}&preferDownload=false' />"
-				style="width:99%;" frameborder="no" height="385px"
-				scrolling="no">
-			</iframe>
-	</c:when>
-</c:choose>
--->
Index: lams_tool_images/web/pages/authoring/parts/itemlist.jsp
===================================================================
diff -u -r21ce4d0194e8b81e613f4f6e14eb4e8bf53bdf59 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/pages/authoring/parts/itemlist.jsp	(.../itemlist.jsp)	(revision 21ce4d0194e8b81e613f4f6e14eb4e8bf53bdf59)
+++ lams_tool_images/web/pages/authoring/parts/itemlist.jsp	(.../itemlist.jsp)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -1,102 +1,74 @@
 <%@ include file="/common/taglibs.jsp"%>
-
 <c:set var="ctxPath" value="${pageContext.request.contextPath}" scope="request" />
 <c:set var="tool">
 	<lams:WebAppURL />
 </c:set>
+<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 
 <div id="itemList" >
-	<h2 class="spacer-left">
-		<fmt:message key="label.authoring.basic.image.list" />
-		<img src="${ctxPath}/includes/images/indicator.gif"	style="display:none" id="imageGalleryListArea_Busy" />
-	</h2>
 
-	<table class="alternative-color" id="itemTable" cellspacing="0" > 
-		<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
+	<div class="panel panel-default voffset5">
+		<div class="panel-heading panel-title">
+			<fmt:message key="label.authoring.basic.image.list" />
+			<img src="${ctxPath}/includes/images/indicator.gif"	style="display:none" id="imageGalleryListArea_Busy" />
+		</div>
 
-		<c:forEach var="image" items="${sessionMap.imageGalleryList}" varStatus="status">
-			<tr>
-				<td width="4%" align="center">
-					<c:set var="thumbnailPath">
-					   	<html:rewrite page='/download/?uuid='/>${image.thumbnailFileUuid}&preferDownload=false
-					</c:set>
-				 	<c:set var="mediumImagePath">
-	   					<html:rewrite page='/download/?uuid='/>${image.mediumFileUuid}&preferDownload=false
-					</c:set>					
-					<c:set var="title">
-						<c:out value="${image.title}" escapeXml="true"/>
-					</c:set>
-					<a href="${mediumImagePath}" rel="lyteframe" title="${title}" style="border-style: none;" rev="width: ${image.mediumImageWidth + 20}px; height: ${image.mediumImageHeight + 30}px; scrolling: no;">
-						<img src="${thumbnailPath}" alt="${title}" style="border-style: none;"/>
-					</a>
-				</td>
+		<table class="table table-condensed table-authoring" id="itemTable">
+			<c:forEach var="image" items="${sessionMap.imageGalleryList}" varStatus="status">
+			
+				<tr>
+					<td width="4%" >
+						<c:set var="thumbnailPath">
+						   	<html:rewrite page='/download/?uuid='/>${image.thumbnailFileUuid}&preferDownload=false
+						</c:set>
+					 	<c:set var="mediumImagePath">
+		   					<html:rewrite page='/download/?uuid='/>${image.mediumFileUuid}&preferDownload=false
+						</c:set>					
+						<c:set var="title">
+							<c:out value="${image.title}" escapeXml="true"/>
+						</c:set>
+						<a href="${mediumImagePath}" rel="lyteframe" title="${title}" style="border-style: none;" rev="width: ${image.mediumImageWidth + 20}px; height: ${image.mediumImageHeight + 30}px; scrolling: no;">
+							<img src="${thumbnailPath}" alt="${title}" style="border-style: none;"/>
+						</a>
+					</td>
+					
+					<td>
+						<a href="${mediumImagePath}" rel="lyteframe" title="${title}" rev="width: ${image.mediumImageWidth + 20}px; height: ${image.mediumImageHeight + 30}px; scrolling: auto;">
+							<c:out value="${image.title}" escapeXml="true"/>
+						</a>
+					</td>
+					
+					<td class="arrows">
+						<!-- Don't display up icon if first line -->
+						<c:if test="${not status.first}">
+			 				<lams:Arrow state="up" title="<fmt:message key='label.authoring.up'/>" onclick="javascript:upImage(${status.index},'${sessionMapID}')"/>
+			 			</c:if>
+						<!-- Don't display down icon if last line -->
+						<c:if test="${not status.last}">
+							<lams:Arrow state="down" title="<fmt:message key='label.authoring.down'/>" onclick="javascript:downImage(${status.index},'${sessionMapID}')"/>
+			 			</c:if>
+					</td>			
+					
+					<td width="30px">
+						<i class="fa fa-pencil"	title="<fmt:message key="label.authoring.basic.resource.edit" />"
+							onclick="javascript:editItem(${status.index},'${sessionMapID}')"></i>
+					</td>
+					<td width="30px">
+						<i class="fa fa-times" title="<fmt:message key="label.authoring.basic.resource.delete" />"
+							onclick="javascript:deleteItem(${status.index},'${sessionMapID}')"></i>
+					</td>
+				</tr>
 				
-				<td style="vertical-align:middle;">
-					<a href="${mediumImagePath}" rel="lyteframe" title="${title}" rev="width: ${image.mediumImageWidth + 20}px; height: ${image.mediumImageHeight + 30}px; scrolling: auto;">
-						<c:out value="${image.title}" escapeXml="true"/>
-					</a>
-				</td>
-
-				<td width="40px" style="vertical-align:middle;">
-					<c:if test="${not status.first}">
-						<img src="<html:rewrite page='/includes/images/uparrow.gif'/>"
-							border="0" title="<fmt:message key="label.authoring.up"/>"
-							onclick="upImage(${status.index},'${sessionMapID}')">
-						<c:if test="${status.last}">
-							<img
-								src="<html:rewrite page='/includes/images/downarrow_disabled.gif'/>"
-								border="0" title="<fmt:message key="label.authoring.down"/>">
-						</c:if>
-					</c:if>
-
-					<c:if test="${not status.last}">
-						<c:if test="${status.first}">
-							<img
-								src="<html:rewrite page='/includes/images/uparrow_disabled.gif'/>"
-								border="0" title="<fmt:message key="label.authoring.up"/>">
-						</c:if>
-
-						<img src="<html:rewrite page='/includes/images/downarrow.gif'/>"
-							border="0" title="<fmt:message key="label.authoring.down"/>"
-							onclick="downImage(${status.index},'${sessionMapID}')">
-					</c:if>
-				</td>
-				
-				<td width="20px" style="vertical-align:middle;">
-					<img src="${tool}includes/images/edit.gif"
-						title="<fmt:message key="label.authoring.basic.resource.edit" />"
-						onclick="editItem(${status.index},'${sessionMapID}')" />
-                </td>
-                
-				<td width="20px" style="vertical-align:middle;">
-					<img src="${tool}includes/images/cross.gif"
-						title="<fmt:message key="label.authoring.basic.resource.delete" />"
-						onclick="deleteItem(${status.index},'${sessionMapID}')" />
-				</td>
-			</tr>
-		</c:forEach>
-	</table>
-	
+			</c:forEach>
+		</table>
+		
+	</div>
 </div>
 
 <%-- This script will works when a new resoruce item submit in order to refresh "ImageGallery List" panel. --%>
 <script lang="javascript">
-	var win = null;
-	try {
-		if (window.parent && window.parent.hideMessage) {
-			win = window.parent;
-		} else if (window.top && window.top.hideMessage) {
-			win = window.top;
-		}
-	} catch(err) {
-		// mute cross-domain iframe access errors
-	}
-	if (win) {
-		win.hideMessage();
-		var obj = win.document.getElementById('imageGalleryListArea');
-		obj.innerHTML= document.getElementById("itemList").innerHTML;
-		
-		//call it from parent window as this one was just hidden
-		win.initLytebox();
-	}
+	hideMessage();
+	var obj = document.getElementById('imageGalleryListArea');
+	obj.innerHTML= document.getElementById("itemList").innerHTML;
+	initLytebox();
 </script>
Index: lams_tool_images/web/pages/learning/parts/addimage.jsp
===================================================================
diff -u -r0ac411e19ec849c9586c506feede55d178f84d56 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/pages/learning/parts/addimage.jsp	(.../addimage.jsp)	(revision 0ac411e19ec849c9586c506feede55d178f84d56)
+++ lams_tool_images/web/pages/learning/parts/addimage.jsp	(.../addimage.jsp)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -15,56 +15,59 @@
 		</script>
 	</lams:head>
 	
-	<body class="stripes">
-		<c:set var="title"><fmt:message key="label.authoring.basic.add.image" /></c:set>
-		<lams:Page type="learner" title="${title}">
+<body class="stripes">
+	<div class="panel panel-default">
+		<div class="panel-heading">
+			<div class="panel-title">
+				<fmt:message key="label.authoring.basic.add.image" />
+			</div>
+		</div>
+			
+		<div class="panel-body">
 		
 			<%@ include file="/common/messages.jsp"%>
 			
 			<html:form action="/learning/saveNewImage" method="post" styleId="imageGalleryItemForm" enctype="multipart/form-data">
 				<html:hidden property="sessionMapID" />
 	
-				<div class="field-name">
-					<fmt:message key="label.authoring.basic.resource.title.input" />
+				<div class="form-group">
+				    <label for="image-title">
+				    	<fmt:message key="label.authoring.basic.resource.title.input"/>
+				    </label>
+				    <html:text property="title" styleClass="form-control" styleId="image-title" tabindex="1"/>
 				</div>
-				<html:text property="title" tabindex="1" styleClass="form-control" styleId="image-title"/>
 		
-				<div class="field-name space-top">
-	            	<fmt:message key="label.authoring.basic.resource.description.input" />
-				</div>
-				<div class="small-space-bottom" >
+				<div class="form-group">
+					<label for="description">
+						<fmt:message key="label.authoring.basic.resource.description.input" />
+					</label>
 					<lams:STRUTS-textarea rows="5" tabindex="4" styleClass="text-area form-control" property="description" />
 				</div>
 	
-				<div class="field-name space-top">
-					<fmt:message key="label.authoring.basic.resource.file.input" />
+				<div class="form-group">
+				    <label for="file">
+				    	<fmt:message key="label.authoring.basic.resource.file.input"/>
+				    </label>
+					<input type="file" name="file" />
 				</div>
-				<div id="itemAttachmentArea">
-					<input type="file" name="file" />			
-				</div>
 				
-				<div style="margin-bottom: 0px; margin-top: 15px;">
-					<a href="<html:rewrite page='/learning/initMultipleImages.do?sessionMapID='/>${sessionMapID}&KeepThis=true&TB_iframe=true&height=500&width=480&modal=true" class="thickbox">  
-						<fmt:message key="label.authoring.basic.upload.multiple.images" />
-					</a>				
-				</div>
+				<a href="<html:rewrite page='/learning/initMultipleImages.do?sessionMapID='/>${sessionMapID}&KeepThis=true&TB_iframe=true&height=500&width=480&modal=true" 
+						class="thickbox btn btn-default btn-xs">  
+					<fmt:message key="label.authoring.basic.upload.multiple.images" />
+				</a>
 			</html:form>
-
-			<br><br>
-	
-			<lams:ImgButtonWrapper>
-				<a href="#" onclick="document.imageGalleryItemForm.submit();" class="button-add-item btn btn-primary ">
+			
+			<div class="voffset10 pull-right">
+				<a href="#nogo" onclick="document.imageGalleryItemForm.submit();" class="btn btn-default btn-sm button-add-item">
 					<fmt:message key="label.authoring.basic.add.image" /> 
 				</a>
-				<a href="#" onclick="self.parent.tb_remove();" class="btn btn-primary  space-left" >
+				<a href="#nogo" onclick="javascript:self.parent.tb_remove();" class="btn btn-default btn-sm loffset5">
 					<fmt:message key="label.cancel" /> 
 				</a>
-			</lams:ImgButtonWrapper>
-		
-		</lams:Page>
-		<!--closes content-->
+			</div>
 	
 		<div id="footer"></div>
-		<!--closes footer-->		
-	</body>
+		<!--closes footer-->
+	</div>	
+</body>
 </lams:html>
Index: lams_tool_images/web/pages/learning/parts/addmultipleimages.jsp
===================================================================
diff -u -r0ac411e19ec849c9586c506feede55d178f84d56 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/pages/learning/parts/addmultipleimages.jsp	(.../addmultipleimages.jsp)	(revision 0ac411e19ec849c9586c506feede55d178f84d56)
+++ lams_tool_images/web/pages/learning/parts/addmultipleimages.jsp	(.../addmultipleimages.jsp)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -9,58 +9,62 @@
 		<%@ include file="/common/header.jsp"%>
 	</lams:head>
 	
-	<body class="stripes">
-	
-		<c:set var="title"><fmt:message key="label.authoring.basic.add.multiple.images" /></c:set>
-		<lams:Page type="learner" title="${title}">
+<body class="stripes">
+
+	<div class="panel panel-default">
+		<div class="panel-heading">
+			<div class="panel-title">
+				<fmt:message key="label.authoring.basic.add.multiple.images" />
+			</div>
+		</div>
+			
+		<div class="panel-body">
 		
 			<%@ include file="/common/messages.jsp"%>
 			
 			<html:form action="/learning/saveMultipleImages" method="post" styleId="multipleImagesForm" enctype="multipart/form-data">
 				<html:hidden property="sessionMapID" />
 	
-				<div class="field-name space-top">
-					<fmt:message key="label.authoring.basic.resource.files.input" />
+				<div class="form-group">
+					<label>
+						<fmt:message key="label.authoring.basic.resource.files.input" />
+					</label>
+					
+					<div>
+						<input type="file" name="file1" />
+					</div>
+					<div class="voffset5">
+						<input type="file" name="file2" />
+					</div>
+					<div class="voffset5">
+						<input type="file" name="file3" />
+					</div>
+					<div class="voffset5">
+						<input type="file" name="file4" />
+					</div>
+					<div class="voffset5">
+						<input type="file" name="file5" />
+					</div>
 				</div>
-				<div style="margin-left: 15px;">
-					<input type="file" name="file1" />
-				</div>
-				<div style="margin-top: 4px; margin-left: 15px;">
-					<input type="file" name="file2" />
-				</div>
-				<div style="margin-top: 4px; margin-left: 15px;">
-					<input type="file" name="file3" />
-				</div>
-				<div style="margin-top: 4px; margin-left: 15px;">
-					<input type="file" name="file4" />
-				</div>
-				<div style="margin-top: 4px; margin-left: 15px;">
-					<input type="file" name="file5" />
-				</div>
-							
-				<div style="margin-bottom: 0px; margin-top: 15px;">
-					<a href="<html:rewrite page='/learning/newImageInit.do'/>?sessionMapID=${sessionMapID}&KeepThis=true&TB_iframe=true&height=540&width=480&modal=true" class="thickbox">  
-						<fmt:message key="label.authoring.basic.upload.single.image" />
-					</a>				
-				</div>
 				
+				<a href="<html:rewrite page='/learning/newImageInit.do'/>?sessionMapID=${sessionMapID}&KeepThis=true&TB_iframe=true&height=540&width=480&modal=true" 
+						class="thickbox btn btn-default btn-xs">  
+					<fmt:message key="label.authoring.basic.upload.single.image" />
+				</a>
+				
 			</html:form>
-
-			<br><br>
 	
-			<lams:ImgButtonWrapper>
-				<a href="#" onclick="document.multipleImagesForm.submit();" class="button-add-item btn btn-primary">
+			<div class="voffset10 pull-right">
+				<a href="#nogo" onclick="javascript:document.multipleImagesForm.submit();" class="btn btn-default button-add-item">
 					<fmt:message key="label.authoring.basic.add.images" /> 
 				</a>
-				<a href="#" onclick="self.parent.tb_remove();" class="button btn btn-primary">
+				<a href="#nogo" onclick="javascript:self.parent.tb_remove();" class="btn btn-default loffset5">
 					<fmt:message key="label.cancel" /> 
 				</a>
-			</lams:ImgButtonWrapper>
-		
-		</lams:Page>
-		<!--closes content-->
+			</div>
 	
 		<div id="footer"></div>
-		<!--closes footer-->		
-	</body>
+		<!--closes footer-->
+	</div>		
+</body>
 </lams:html>
Index: lams_tool_images/web/pages/learning/parts/commentsarea.jsp
===================================================================
diff -u -r0ac411e19ec849c9586c506feede55d178f84d56 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/pages/learning/parts/commentsarea.jsp	(.../commentsarea.jsp)	(revision 0ac411e19ec849c9586c506feede55d178f84d56)
+++ lams_tool_images/web/pages/learning/parts/commentsarea.jsp	(.../commentsarea.jsp)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -75,7 +75,7 @@
 					<input type="hidden" name="sessionMapID" value="${sessionMapID}"/>
 					<input type="hidden" name="imageUid" value="${sessionMap.currentImage.uid}"/>
 								
-					<p class="small-space-top" style="margin-right: 0px">
+					<p class="voffset5" style="margin-right: 0px">
 						<input type="checkbox" name="vote" class="noBorder" id="voting-form-checkbox" 
 								<c:if test="${finishedLock}">disabled="disabled"</c:if>	
 								<c:if test="${sessionMap.isVoted}">checked="checked"</c:if>	
@@ -104,7 +104,8 @@
 							
 				<c:if test="${not finishedLock}">
 					<br>
-					<a href="<html:rewrite page='/learning/newImageInit.do?sessionMapID='/>${sessionMapID}&KeepThis=true&TB_iframe=true&height=540&width=480&modal=true" class="btn btn-default voffset10 thickbox" id="add-new-image-button">  
+					<a href="<html:rewrite page='/learning/newImageInit.do?sessionMapID='/>${sessionMapID}&KeepThis=true&TB_iframe=true&height=540&width=480&modal=true" 
+							class="btn btn-default voffset10 thickbox" id="add-new-image-button">  
 						<fmt:message key="label.learning.add.new.image" />
 					</a>
 				</c:if>
Index: lams_tool_images/web/pages/monitoring/editactivity.jsp
===================================================================
diff -u -r4ee829e747865834b56a708e884c3ad3bd1d0492 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/pages/monitoring/editactivity.jsp	(.../editactivity.jsp)	(revision 4ee829e747865834b56a708e884c3ad3bd1d0492)
+++ lams_tool_images/web/pages/monitoring/editactivity.jsp	(.../editactivity.jsp)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -3,16 +3,15 @@
 <c:set var="imageGallery" value="${sessionMap.imageGallery}"/>
 
 <c:if test="${sessionMap.isPageEditable}">
-	<p class="warning">
+	<lams:Alert type="warn" id="no-edit" close="false">
 		<fmt:message key="message.alertContentEdit" />
-	</p>
+	</lams:Alert>
 </c:if>
 
-<table cellpadding="0">
+<table class="table table-condensed">
 	<tr>
 		<td>
 			<fmt:message key="label.authoring.basic.title" />
-			:
 		</td>
 		<td>
 			<c:out value="${imageGallery.title}" escapeXml="true" />
@@ -22,7 +21,6 @@
 	<tr>
 		<td>
 			<fmt:message key="label.authoring.basic.instruction" />
-			:
 		</td>
 		<td>
 			<c:out value="${imageGallery.instructions}" escapeXml="false" />
@@ -35,7 +33,7 @@
 				<c:param name="toolContentID" value="${sessionMap.toolContentID}" />
 				<c:param name="contentFolderID" value="${sessionMap.contentFolderID}" />
 			</c:url>
-			<html:link href="javascript:;" onclick="launchPopup('${authoringUrl}','definelater')" styleClass="button">
+			<html:link href="#nogo" onclick="javascript:launchPopup('${authoringUrl}','definelater');" styleClass="btn btn-default">
 				<fmt:message key="label.monitoring.edit.activity.edit" />
 			</html:link>
 		</td>
Index: lams_tool_images/web/pages/monitoring/imagesummary.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/pages/monitoring/imagesummary.jsp	(.../imagesummary.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_images/web/pages/monitoring/imagesummary.jsp	(.../imagesummary.jsp)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -36,16 +36,21 @@
 		<script type="text/javascript" src="${lams}includes/javascript/jquery.jRating.js"></script>
 	</lams:head>
 	
-	<body class="stripes">
-		<div id="content">
+<body class="stripes">
+	<div class="panel panel-default">
+		<div class="panel-heading">
+			<div class="panel-title">
+				<fmt:message key="label.monitoring.imagesummary.image" />
+			</div>
+		</div>
+			
+		<div class="panel-body">
 
 			<html:form action="/monitoring/updateImage" method="post" styleId="imageGalleryItemForm">
+				<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
 				<html:hidden property="imageUid" />		
 				<html:hidden property="sessionMapID" value="${sessionMapID}"/>
 				
-				<div class="field-name space-top">
-					<fmt:message key="label.monitoring.imagesummary.image" />
-				</div>
 				<c:set var="mediumImagePath">
 			   		<html:rewrite page='/download/?uuid='/>${image.mediumFileUuid}&preferDownload=false
 				</c:set>	
@@ -54,18 +59,21 @@
 				</c:set>
 				<img src="${mediumImagePath}" alt="${title}" title="${title}"/>
 					
-				<div class="field-name space-top">
-					<fmt:message key="label.authoring.basic.resource.title.input" />
+				<div class="form-group voffset10">
+				    <label for="file-title">
+				    	<fmt:message key="label.authoring.basic.resource.title.input"/>
+				    </label>
+				    <html:text property="title" styleClass="form-control" styleId="file-title" tabindex="1"/>
 				</div>
-				<html:text property="title" size="55" tabindex="1" />
 				
-				<div class="field-name space-top">
-	            	<fmt:message key="label.authoring.basic.resource.description.input" />
+				<div class="form-group">
+					<label for="description">
+						<fmt:message key="label.authoring.basic.resource.description.input" />
+					</label>
+		            	
+					<lams:CKEditor id="description" value="${formBean.description}" width="99%" 
+						contentFolderID="${sessionMap.imageGalleryForm.contentFolderID}" />
 				</div>
-				<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
-				<div class="small-space-bottom" >
-					<lams:CKEditor id="description" value="${formBean.description}" contentFolderID="${sessionMap.contentFolderID}" />
-				</div>
 			</html:form>			
 			<br>
 			
@@ -79,16 +87,15 @@
 			<c:if test="${imageGallery.allowVote}">
 			
 				<c:forEach var="groupSummary" items="${imageSummary}">
-					<h1><fmt:message key="monitoring.label.group" /> ${groupSummary[0].sessionName}	</h1>
+					<h4>
+						<fmt:message key="monitoring.label.group" />&nbsp;${groupSummary[0].sessionName}	
+					</h4>
 				
-					<ul>
-						<li>
-							<fmt:message key="label.monitoring.number.votes" />: ${groupSummary[0].numberOfVotesForImage}
-						</li>
-					</ul>
-					<br>
+					<div>
+						<fmt:message key="label.monitoring.number.votes" />: ${groupSummary[0].numberOfVotesForImage}
+					</div>
 				
-					<table cellpadding="0" class="alternative-color" >
+					<table class="table" >
 				
 						<tr>
 							<th width="150px">
@@ -126,20 +133,21 @@
 			</c:if>
 			<br>
 			
-			<lams:ImgButtonWrapper>
-				<a href="#" onclick="self.parent.tb_remove();" class="button right-buttons space-left">
-					<fmt:message key="label.cancel" /> 
-				</a>
-				<a href="#" onclick="document.imageGalleryItemForm.submit();" class="button right-buttons space-left">
+			<div class="voffset10 pull-right">
+				<a href="#nogo" onclick="javascript:document.imageGalleryItemForm.submit();" class="btn btn-default">
 					<fmt:message key="label.monitoring.imagesummary.save" /> 
 				</a>
-			</lams:ImgButtonWrapper>
+				<a href="#nogo" onclick="javascript:self.parent.tb_remove();" class="btn btn-default loffset5">
+					<fmt:message key="label.cancel" /> 
+				</a>
+			</div>
 		</div>
-		<!--closes content-->
 	
 		<div id="footer">
 		</div>
 		<!--closes footer-->
 		
-	</body>
+	</div>
+		
+</body>
 </lams:html>
Index: lams_tool_images/web/pages/monitoring/monitoring.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_images/web/pages/monitoring/monitoring.jsp	(.../monitoring.jsp)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -1,5 +1,4 @@
 <!DOCTYPE html>
-
 <%@ include file="/common/taglibs.jsp"%>
 <%@ page import="org.lamsfoundation.lams.tool.imageGallery.ImageGalleryConstants"%>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
@@ -13,35 +12,16 @@
 		
 		<link href="${lams}css/thickbox.css" rel="stylesheet" type="text/css" media="screen">
 		<link href="${lams}css/jquery.jRating.css" rel="stylesheet"/>
-		<link href="${lams}css/jquery.tablesorter.theme-blue.css" rel="stylesheet" >
+		<link href="${lams}css/jquery.tablesorter.theme.bootstrap.css" rel="stylesheet" >
 		<link rel="stylesheet" href="${lams}css/jquery.tablesorter.pager.css">
 		<style media="screen,projection" type="text/css">
-			.tablesorter {
-				margin: 15px 10px 5px;
-				width: 97%;
+			.tablesorter,.tablesorter tr {
+				border: 1px solid #ddd;
 			}
-			
-			.tablesorter tbody > tr:nth-child(odd) > td, .tablesorter tbody > tr:nth-child(odd) > th {
-			    background-color: #EBF2FA;
-			}
-			.tablesorter tbody > tr:nth-child(odd):hover > td, .tablesorter tbody > tr:nth-child(odd):hover > th {
-			    background-color: #bfbfbf;
-			}
-			.tablesorter tr:nth-child(odd):hover .jStar {background-image: url(${lams}images/css/jquery.jRating-stars-grey.png)!important;}
-			.tablesorter tr:nth-child(even):hover .jStar {background-image: url(${lams}images/css/jquery.jRating-stars-light-grey.png)!important;}
-			.tablesorter tr:nth-child(odd) .jStar {background-image: url(${lams}images/css/jquery.jRating-stars-light-blue.png)!important;}
-			
-			h4 {
-				color:#0087e5; 
-				font-size:11px;
-				margin-top:10px;
-				margin-bottom:10px;
-				padding:0;
-			}
-			.rating-comment-posted-by {
-				color: #47BC23;
-			}
-			
+			.tablesorter td {
+				padding-bottom: 10px;
+				padding-top: 10px;
+			]
 		</style>
 		
 		<script type="text/javascript">
@@ -61,7 +41,6 @@
 			WARN_COMMENTS_IS_BLANK_LABEL = '',
 			WARN_MIN_NUMBER_WORDS_LABEL = '';
 		</script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
  		<script type="text/javascript" src="${lams}includes/javascript/thickbox.js"></script>
 		<script type="text/javascript" src="${lams}includes/javascript/monitorToolSummaryAdvanced.js" ></script>
 		<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter.js"></script>
@@ -95,9 +74,9 @@
 			$(document).ready(function(){
 
 				$(".tablesorter").tablesorter({
-					theme: 'blue',
-				    widthFixed: true,
-				    widgets: ['zebra'],
+					theme: 'bootstrap',
+					headerTemplate : '{content} {icon}',
+				    widgets: ["uitheme", "resizable", "filter"],
 			        headers: {
 			            0: { sorter: false }
 			            <c:if test="${sessionMap.imageGallery.allowRank || sessionMap.imageGallery.allowVote}"> 
@@ -129,26 +108,24 @@
 	</lams:head>
 	
 	<body class="stripes" onLoad="init()">
-		<div id="page">
-			<h1>
-				<fmt:message key="label.authoring.heading" />
-			</h1>
-			<div id="header">
-				<lams:Tabs>
-					<lams:Tab id="1" key="monitoring.tab.summary" />
-					<lams:Tab id="2" key="monitoring.tab.edit.activity" />			
-					<lams:Tab id="3" key="monitoring.tab.statistics" />
-				</lams:Tabs>
-			</div>
-			<div id="content">
-				<lams:help toolSignature="<%= ImageGalleryConstants.TOOL_SIGNATURE %>" module="monitoring"/>
-			
-				<lams:TabBody id="1" titleKey="monitoring.tab.summary" page="summary.jsp" />
-				<lams:TabBody id="2" titleKey="monitoring.tab.edit.activity" page="editactivity.jsp" />			
-				<lams:TabBody id="3" titleKey="monitoring.tab.statistics" page="statistic.jsp" />
-			</div>
+		<c:set var="title"><fmt:message key="label.learning.heading" /></c:set>
+	 	<lams:Page type="navbar" title="${title}"> 
+	
+			<lams:Tabs control="true" title="${title}" helpToolSignature="<%= ImageGalleryConstants.TOOL_SIGNATURE %>" helpModule="monitoring" refreshOnClickAction="javascript:location.reload();">
+				<lams:Tab id="1" key="monitoring.tab.summary"/>
+				<lams:Tab id="2" key="monitoring.tab.edit.activity"/>
+				<lams:Tab id="3" key="monitoring.tab.statistics"/>
+			</lams:Tabs>
+	
+	  		<lams:TabBodyArea>
+				<lams:TabBodys>
+					<lams:TabBody id="1" titleKey="monitoring.tab.summary" page="summary.jsp" />
+					<lams:TabBody id="2" titleKey="monitoring.tab.edit.activity" page="editactivity.jsp" />			
+					<lams:TabBody id="3" titleKey="monitoring.tab.statistics" page="statistic.jsp" />
+				</lams:TabBodys> 
+			</lams:TabBodyArea> 
+	
 			<div id="footer"></div>
-		
-		</div>
-	</body>
+		</lams:Page>
+</body>
 </lams:html>
Index: lams_tool_images/web/pages/monitoring/notebook.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/pages/monitoring/notebook.jsp	(.../notebook.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_images/web/pages/monitoring/notebook.jsp	(.../notebook.jsp)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -7,16 +7,14 @@
 	<%@ include file="/common/header.jsp"%>
 </lams:head>
 <body class="stripes">
+
+	<c:set var="title"><fmt:message key="page.title.monitoring.view.reflection" /></c:set>
+	<lams:Page type="learner" title="${title}">
 		
-	<div id="content">
-		<h1>
-			<fmt:message key="page.title.monitoring.view.reflection"/>
-		</h1>
-		
 		<c:out value="${userDTO.fullName}" escapeXml="true"/><BR><BR>
-		<table class="alternative-color" cellspacing="0">
+		<table class="table">
 			<tr>
-				<th class="first">
+				<th>
 					<lams:out value="${userDTO.reflectInstrctions}" escapeHtml="true"/>
 				</th>
 			</tr>
@@ -33,14 +31,11 @@
 				</td>
 			</tr>
 		</table>
-		<table cellpadding="0">
-			<tr>
-				<td>
-					<a href="javascript:window.close();" class="button"><fmt:message key="button.close"/></a>
-				</td>
-			</tr>
-		</table>
-	</div>
+		
+		<a href="javascript:window.close();" class="btn btn-primary">
+			<fmt:message key="button.close"/>
+		</a>
+	</lams:Page>
 			
 	<div id="footer"></div><!--closes footer-->
 </body>
Index: lams_tool_images/web/pages/monitoring/parts/addimage.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/pages/monitoring/parts/addimage.jsp	(.../addimage.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_images/web/pages/monitoring/parts/addimage.jsp	(.../addimage.jsp)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -1,70 +1,73 @@
 <!DOCTYPE html>
-		
 <%@ include file="/common/taglibs.jsp"%>
 
 <lams:html>
-	<lams:head>
-		<title>
-			<fmt:message key="label.learning.title" />
-		</title>
-		<%@ include file="/common/header.jsp"%>
-	</lams:head>
+<lams:head>
+	<title>
+		<fmt:message key="label.learning.title" />
+	</title>
+	<%@ include file="/common/header.jsp"%>
+</lams:head>
 	
-	<body class="stripes">
-		<div id="content" >
+<body class="stripes">
+
+	<div class="panel panel-default">
+		<div class="panel-heading">
+			<div class="panel-title">
+				<fmt:message key="label.authoring.basic.add.image" />
+			</div>
+		</div>
+			
+		<div class="panel-body">
 			<%@ include file="/common/messages.jsp"%>
 			
 			<html:form action="/monitoring/saveNewImage" method="post" styleId="imageGalleryItemForm" enctype="multipart/form-data">
+				<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
+				<c:set var="sessionMap"	value="${sessionScope[formBean.sessionMapID]}" />
 				<html:hidden property="sessionMapID" />
 	
-				<h2 class="no-space-left">
-					<fmt:message key="label.authoring.basic.add.image" />
-				</h2>
-	
-				<div class="field-name">
-					<fmt:message key="label.authoring.basic.resource.title.input" />
+				<div class="form-group">
+				    <label for="file-title">
+				    	<fmt:message key="label.authoring.basic.resource.title.input"/>
+				    </label>
+				    <html:text property="title" styleClass="form-control" styleId="file-title" tabindex="1"/>
 				</div>
-				<html:text property="title" size="55" tabindex="1" />
 		
-				<div class="field-name space-top">
-	            	<fmt:message key="label.authoring.basic.resource.description.input" />
+				<div class="form-group">
+					<label for="description">
+						<fmt:message key="label.authoring.basic.resource.description.input" />
+					</label>
+					<lams:STRUTS-textarea rows="5" styleClass="text-area form-control" property="description" />
 				</div>
-				<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
-				<c:set var="sessionMap"	value="${sessionScope[formBean.sessionMapID]}" />
-				<div class="small-space-bottom" >
-					<lams:STRUTS-textarea rows="5" cols="20" tabindex="4" styleClass="text-area" property="description" />
+			
+				<div class="form-group">
+				    <label for="file">
+				    	<fmt:message key="label.authoring.basic.resource.file.input"/>
+				    </label>
+					<input type="file" name="file" />
 				</div>
-	
-				<div class="field-name space-top">
-					<fmt:message key="label.authoring.basic.resource.file.input" />
-				</div>
-				<div id="itemAttachmentArea">
-					<input type="file" name="file" />			
-				</div>
 				
-				<div style="margin-bottom: 0px; margin-top: 15px;">
-					<a href="<html:rewrite page='/monitoring/initMultipleImages.do?sessionMapID='/>${formBean.sessionMapID}&KeepThis=true&TB_iframe=true&height=500&width=480&modal=true" class="thickbox">  
+				<a href="<html:rewrite page='/monitoring/initMultipleImages.do?sessionMapID='/>${formBean.sessionMapID}&KeepThis=true&TB_iframe=true&height=500&width=480&modal=true" 
+					class="thickbox btn btn-default btn-xs">  
 						<fmt:message key="label.authoring.basic.upload.multiple.images" />
-					</a>				
-				</div>				
+				</a>				
 			</html:form>
-
-			<br><br>
 	
-			<lams:ImgButtonWrapper>
-				<a href="#" onclick="document.imageGalleryItemForm.submit();" class="button-add-item">
+			<div class="voffset10 pull-right">
+				<a href="#nogo" onclick="document.imageGalleryItemForm.submit();" class="btn btn-default btn-sm button-add-item">
 					<fmt:message key="label.authoring.basic.add.image" /> 
 				</a>
-				<a href="#" onclick="self.parent.tb_remove();" class="button space-left">
+				<a href="#nogo" onclick="javascript:self.parent.tb_remove();" class="btn btn-default btn-sm loffset5">
 					<fmt:message key="label.cancel" /> 
 				</a>
-			</lams:ImgButtonWrapper>
+			</div>
 		
 		</div>
 		<!--closes content-->
 	
 		<div id="footer">
 		</div>
-		<!--closes footer-->		
-	</body>
+		<!--closes footer-->
+	</div>		
+</body>
 </lams:html>
Index: lams_tool_images/web/pages/monitoring/parts/addmultipleimages.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/pages/monitoring/parts/addmultipleimages.jsp	(.../addmultipleimages.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_images/web/pages/monitoring/parts/addmultipleimages.jsp	(.../addmultipleimages.jsp)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -1,72 +1,75 @@
-<!DOCTYPE html>
-		
+<!DOCTYPE html>	
 <%@ include file="/common/taglibs.jsp"%>
 
 <lams:html>
-	<lams:head>
-		<title>
-			<fmt:message key="label.learning.title" />
-		</title>
-		<%@ include file="/common/header.jsp"%>
-	</lams:head>
+<lams:head>
+	<title>
+		<fmt:message key="label.learning.title" />
+	</title>
+	<%@ include file="/common/header.jsp"%>
+</lams:head>
 	
-	<body class="stripes">
+<body class="stripes">
 	
-		<div id="content" >
+	<div class="panel panel-default">
+		<div class="panel-heading">
+			<div class="panel-title">
+				<fmt:message key="label.authoring.basic.add.multiple.images" />
+			</div>
+		</div>
+			
+		<div class="panel-body">
 		
 			<%@ include file="/common/messages.jsp"%>
 			
 			<html:form action="/monitoring/saveMultipleImages" method="post" styleId="multipleImagesForm" enctype="multipart/form-data">
+				<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
 				<html:hidden property="sessionMapID" />
 	
-				<h2 class="no-space-left">
-					<fmt:message key="label.authoring.basic.add.multiple.images" />
-				</h2>
-	
-				<div class="field-name space-top">
-					<fmt:message key="label.authoring.basic.resource.files.input" />
+				<div class="form-group">
+					<label>
+						<fmt:message key="label.authoring.basic.resource.files.input" />
+					</label>
+					
+					<div>
+						<input type="file" name="file1" />
+					</div>
+					<div class="voffset5">
+						<input type="file" name="file2" />
+					</div>
+					<div class="voffset5">
+						<input type="file" name="file3" />
+					</div>
+					<div class="voffset5">
+						<input type="file" name="file4" />
+					</div>
+					<div class="voffset5">
+						<input type="file" name="file5" />
+					</div>
 				</div>
-				<div style="margin-left: 15px;">
-					<input type="file" name="file1" />
-				</div>
-				<div style="margin-top: 4px; margin-left: 15px;">
-					<input type="file" name="file2" />
-				</div>
-				<div style="margin-top: 4px; margin-left: 15px;">
-					<input type="file" name="file3" />
-				</div>
-				<div style="margin-top: 4px; margin-left: 15px;">
-					<input type="file" name="file4" />
-				</div>
-				<div style="margin-top: 4px; margin-left: 15px;">
-					<input type="file" name="file5" />
-				</div>
 				
-				<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />			
-				<div style="margin-bottom: 0px; margin-top: 15px;">
-					<a href="<html:rewrite page='/monitoring/newImageInit.do?sessionMapID='/>${formBean.sessionMapID}&KeepThis=true&TB_iframe=true&height=540&width=480&modal=true" class="thickbox">  
-						<fmt:message key="label.authoring.basic.upload.single.image" />
-					</a>				
-				</div>
+				<a href="<html:rewrite page='/monitoring/newImageInit.do?sessionMapID='/>${formBean.sessionMapID}&KeepThis=true&TB_iframe=true&height=540&width=480&modal=true" 
+						class="thickbox btn btn-default btn-xs">  
+					<fmt:message key="label.authoring.basic.upload.single.image" />
+				</a>
 				
 			</html:form>
 
-			<br><br>
-	
-			<lams:ImgButtonWrapper>
-				<a href="#" onclick="document.multipleImagesForm.submit();" class="button-add-item">
+			<div class="voffset10 pull-right">
+				<a href="#nogo" onclick="javascript:document.multipleImagesForm.submit();" class="btn btn-default button-add-item">
 					<fmt:message key="label.authoring.basic.add.images" /> 
 				</a>
-				<a href="#" onclick="self.parent.tb_remove();" class="button space-left">
+				<a href="#nogo" onclick="javascript:self.parent.tb_remove();" class="btn btn-default loffset5">
 					<fmt:message key="label.cancel" /> 
 				</a>
-			</lams:ImgButtonWrapper>
+			</div>
 		
 		</div>
 		<!--closes content-->
 	
 		<div id="footer">
 		</div>
-		<!--closes footer-->		
-	</body>
+		<!--closes footer-->
+	</div>		
+</body>
 </lams:html>
Index: lams_tool_images/web/pages/monitoring/parts/advanceOptions.jsp
===================================================================
diff -u -r434a2aec5c62876edcb6dc8908896939080f1cf2 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/pages/monitoring/parts/advanceOptions.jsp	(.../advanceOptions.jsp)	(revision 434a2aec5c62876edcb6dc8908896939080f1cf2)
+++ lams_tool_images/web/pages/monitoring/parts/advanceOptions.jsp	(.../advanceOptions.jsp)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -1,19 +1,9 @@
 <%@ include file="/common/taglibs.jsp"%>
 
-<br />
-
-<h1 class="space-top">
-	<img src="<lams:LAMSURL/>/images/tree_closed.gif" id="treeIcon" onclick="javascript:toggleAdvancedOptionsVisibility(document.getElementById('advancedDiv'), document.getElementById('treeIcon'), '<lams:LAMSURL/>');" />
-
-	<a href="javascript:toggleAdvancedOptionsVisibility(document.getElementById('advancedDiv'), document.getElementById('treeIcon'),'<lams:LAMSURL/>');" >
-		<fmt:message key="monitor.summary.th.advancedSettings" />
-	</a>
-</h1>
-
-<br />
-
-<div class="monitoring-advanced space-top" id="advancedDiv" style="display:none">
-	<table class="alternative-color">
+<c:set var="adTitle"><fmt:message key="monitor.summary.th.advancedSettings" /></c:set>
+<lams:AdvancedAccordian title="${adTitle}">
+             
+	<table class="table table-striped table-condensed">
 		<tr>
 			<td>
 				<fmt:message key="label.authoring.advance.lock.on.finished" />
@@ -231,4 +221,4 @@
 			</c:when>
 		</c:choose>
 	</table>
-</div>
+</lams:AdvancedAccordian>
Index: lams_tool_images/web/pages/monitoring/start.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/pages/monitoring/start.jsp	(.../start.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_tool_images/web/pages/monitoring/start.jsp	(.../start.jsp)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -1,5 +1,4 @@
 <!DOCTYPE html>
-
 <%@ include file="/common/taglibs.jsp"%>
 
 <html>
Index: lams_tool_images/web/pages/monitoring/statistic.jsp
===================================================================
diff -u -r434a2aec5c62876edcb6dc8908896939080f1cf2 -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/pages/monitoring/statistic.jsp	(.../statistic.jsp)	(revision 434a2aec5c62876edcb6dc8908896939080f1cf2)
+++ lams_tool_images/web/pages/monitoring/statistic.jsp	(.../statistic.jsp)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -2,45 +2,50 @@
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
 <c:set var="summaryList" value="${sessionMap.summaryList}"/>
 
-	<c:if test="${empty summaryList}">
-		<div align="center">
-			<b> <fmt:message key="message.monitoring.summary.no.session" /> </b>
+<c:if test="${empty summaryList}">
+	<lams:Alert type="info" id="no-session-summary" close="false">
+		<fmt:message key="message.monitoring.summary.no.session" />
+	</lams:Alert>
+</c:if>
+	
+<c:forEach var="group" items="${summaryList}" varStatus="firstGroup">
+
+	<c:if test="${sessionMap.isGroupedActivity}">
+		<div class="panel panel-default" >
+			<div class="panel-heading">
+				<span class="panel-title">
+					<fmt:message key="monitoring.label.group" /> ${group[0].sessionName}
+				</span>
+			</div>
 		</div>
 	</c:if>
 	
-	<c:forEach var="group" items="${summaryList}" varStatus="firstGroup">
-		
-		<c:forEach var="summary" items="${group}" varStatus="status">
-			<%-- display group name on first row--%>
-			<c:if test="${status.index == 0}">
-				<h2>
-					<fmt:message key="monitoring.label.group" /> ${summary.sessionName}
-				</h2> 
-				
-				<table cellspacing="3" class="alternative-color space-top">
-				<tr>
-					<th width="35%">
-						<fmt:message key="monitoring.label.title" />
+	<div class="panel-body">
+	<table class="table table-condensed table-striped">
+		<tr>
+			<th width="35%">
+				<fmt:message key="monitoring.label.title" />
+			</th>
+			<th width="25%" align="center">
+				<fmt:message key="monitoring.label.suggest" />
+			</th>
+			<c:choose>
+				<c:when test="${sessionMap.imageGallery.allowRank}">
+					<th width="85px" style="padding-left:0px; text-align:center;">
+						<fmt:message key="label.monitoring.average.rating" />
 					</th>
-					<th width="25%" align="center">
-						<fmt:message key="monitoring.label.suggest" />
-					</th>
-					<c:choose>
-						<c:when test="${sessionMap.imageGallery.allowRank}">
-							<th width="85px" style="padding-left:0px; text-align:center;">
-								<fmt:message key="label.monitoring.average.rating" />
-							</th>
-						</c:when>
+				</c:when>
 						
-						<c:when test="${sessionMap.imageGallery.allowVote}">
-							<th width="70px" style="padding-left:0px; text-align:center;">
-								<fmt:message key="label.monitoring.number.votes" />
-							</th>
-						</c:when>
-					</c:choose>						
-				</tr>
-			</c:if>
+				<c:when test="${sessionMap.imageGallery.allowVote}">
+					<th width="70px" style="padding-left:0px; text-align:center;">
+						<fmt:message key="label.monitoring.number.votes" />
+					</th>
+				</c:when>
+			</c:choose>						
+		</tr>
 			
+		<c:forEach var="summary" items="${group}" varStatus="status">
+			
 			<c:if test="${summary.itemUid == -1}">
 				<tr>
 					<td colspan="4">
@@ -50,6 +55,7 @@
 					</td>
 				</tr>
 			</c:if>
+			
 			<c:if test="${summary.itemUid != -1}">
 				<tr>
 					<td>
@@ -80,5 +86,6 @@
 				</tr>
 			</c:if>
 		</c:forEach>
-	       </table>
-	</c:forEach>
+	</table>
+	</div>
+</c:forEach>
Index: lams_tool_images/web/pages/monitoring/summary.jsp
===================================================================
diff -u -r56933af863874679087b81d3d6cf444c616d689c -r60ab803bf843562083cfb66764ddfcb3b0a83841
--- lams_tool_images/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision 56933af863874679087b81d3d6cf444c616d689c)
+++ lams_tool_images/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision 60ab803bf843562083cfb66764ddfcb3b0a83841)
@@ -2,48 +2,55 @@
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
 <c:set var="summaryList" value="${sessionMap.summaryList}"/>
 
-<h1>
-  <c:out value="${sessionMap.imageGallery.title}" escapeXml="true"/>
-</h1>
-
-<div class="instructions small-space-top small-space-bottom">
-  <c:out value="${sessionMap.imageGallery.instructions}" escapeXml="false"/>
+<div class="panel">
+	<h4>
+	  <c:out value="${sessionMap.imageGallery.title}" escapeXml="true"/>
+	</h4>
+	
+	<div class="instructions voffset5">
+	  <c:out value="${sessionMap.imageGallery.instructions}" escapeXml="false"/>
+	</div>
+	
+	<c:if test="${empty summaryList}">
+		<lams:Alert type="info" id="no-session-summary" close="false">
+			<fmt:message key="message.monitoring.summary.no.session" />
+		</lams:Alert>
+	</c:if>
 </div>
 
-<c:if test="${empty summaryList}">
-	<div align="center">
-		<b> <fmt:message key="message.monitoring.summary.no.session" /> </b>
-	</div>
+<c:if test="${sessionMap.isGroupedActivity}">
+	<div class="panel-group" id="accordionSessions" role="tablist" aria-multiselectable="true"> 
 </c:if>
 
-<c:forEach var="group" items="${summaryList}">
+<c:forEach var="group" items="${summaryList}" varStatus="status">
 
-	<c:choose>
-		 <c:when test="${sessionMap.isGroupedActivity}">
-			<h1>
-				<fmt:message key="monitoring.label.group" /> ${group[0].sessionName}	
-			</h1>
-		</c:when>
-		
-		<c:otherwise>
-			<h1>
-				<fmt:message key="label.monitoring.summary.overall.summary" />	
-		 	</h1>
-         </c:otherwise>
-	</c:choose>
+	<c:if test="${sessionMap.isGroupedActivity}">	
+	    <div class="panel panel-default" >
+	        <div class="panel-heading" id="heading${group[0].sessionId}">
+	        	<span class="panel-title collapsable-icon-left">
+	        		<a class="${status.first ? '' : 'collapsed'}" role="button" data-toggle="collapse" href="#collapse${group[0].sessionId}" 
+							aria-expanded="${status.first ? 'false' : 'true'}" aria-controls="collapse${group[0].sessionId}" >
+						<fmt:message key="monitoring.label.group" />:	<c:out value="${group[0].sessionName}" />
+					</a>
+				</span>
+	        </div>
+        
+        <div id="collapse${group[0].sessionId}" class="panel-collapse collapse ${status.first ? 'in' : ''}" 
+        		role="tabpanel" aria-labelledby="heading${sessionSummary.sessionId}">
+	</c:if>
 
 	<table class="tablesorter">
 		<thead>
 			<tr>
-				<th width="4%" align="center">
+				<th width="20%" align="center">
 					<!--thumbnail-->
 				</th>
 				<th>
 					<fmt:message key="monitoring.label.title" />
 				</th>
 				<c:choose>
 					<c:when test="${sessionMap.imageGallery.allowRank}">
-						<th width="70px" style="padding-left:0px; text-align:center;">
+						<th width="170px" style="padding-left:0px; text-align:center;">
 							<fmt:message key="label.monitoring.average.rating" />
 						</th>
 						<c:if test="${sessionMap.isCommentsEnabled}">
@@ -58,7 +65,7 @@
 						</th>
 					</c:when>
 				</c:choose>				
-				<th width="75px" >
+				<th width="60px" >
 					<!--hide/show-->
 				</th>
 			</tr>
@@ -87,7 +94,7 @@
 						   	<html:rewrite page='/download/?uuid='/>${image.thumbnailFileUuid}&preferDownload=false
 						</c:set>
 						<c:set var="url" >
-							<c:url value='/monitoring/imageSummary.do'/>?sessionMapID=${sessionMapID}&imageUid=${image.uid}&resizeIframe=true&TB_iframe=true&height=640&width=740
+							<c:url value='/monitoring/imageSummary.do'/>?sessionMapID=${sessionMapID}&imageUid=${image.uid}&KeepThis=true&TB_iframe=true&height=640&width=740&modal=true
 						</c:set>				
 						<a href="${url}" class="thickbox" title="<fmt:message key='label.monitoring.imagesummary.image.summary' />" style="border-style: none;"> 
 							<c:set var="title">
@@ -125,7 +132,10 @@
 											${commentDto.comment}
 											
 											<div class="rating-comment-posted-by">
-												<fmt:message key="label.posted.by"><fmt:param>${commentDto.userFullName}</fmt:param><fmt:param><lams:Date value="${commentDto.postedDate}"/></fmt:param></fmt:message>
+												<fmt:message key="label.posted.by">
+													<fmt:param>${commentDto.userFullName}</fmt:param>
+													<fmt:param><lams:Date value="${commentDto.postedDate}"/></fmt:param>
+												</fmt:message>
 											</div>
 										</div>
 									</c:forEach>								
@@ -144,11 +154,15 @@
 					<td style="vertical-align:middle; padding-left: 0px; text-align: center;">
 						<c:choose>
 							<c:when test="${summary.itemHide}">
-								<a href="<c:url value='/monitoring/showitem.do'/>?sessionMapID=${sessionMapID}&imageUid=${summary.itemUid}" class="button"> <fmt:message key="monitoring.label.show" /> </a>
+								<a href="<c:url value='/monitoring/showitem.do'/>?sessionMapID=${sessionMapID}&imageUid=${summary.itemUid}" class="btn btn-default btn-xs loffset5"> 
+									<fmt:message key="monitoring.label.show" /> 
+								</a>
 							</c:when>
 							
 							<c:otherwise>
-								<a href="<c:url value='/monitoring/hideitem.do'/>?sessionMapID=${sessionMapID}&imageUid=${summary.itemUid}" class="button"> <fmt:message key="monitoring.label.hide" /> </a>
+								<a href="<c:url value='/monitoring/hideitem.do'/>?sessionMapID=${sessionMapID}&imageUid=${summary.itemUid}" class="btn btn-default btn-xs loffset5"> 
+									<fmt:message key="monitoring.label.hide" /> 
+								</a>
 							</c:otherwise>
 						</c:choose>
 					</td>
@@ -164,11 +178,11 @@
 	<%-- Reflection list  --%>
 	<c:if test="${sessionMap.imageGallery.reflectOnActivity && not (empty sessionId)}">	
 	
-		<h2 style="color:black; margin-left: 20px; " >
+		<h5>
 			<fmt:message key="label.monitoring.summary.title.reflection"/>
-		</h2>
+		</h5>
 	
-		<table cellpadding="0" class="alternative-color">			
+		<table class="table table-condensed">			
 		
 			<tr>
 				<th>
@@ -189,21 +203,32 @@
 						<c:set var="viewReflection">
 							<c:url value="/monitoring/viewReflection.do?toolSessionID=${sessionId}&userUid=${user.userUid}"/>
 						</c:set>
-						<html:link href="javascript:launchPopup('${viewReflection}')">
+						<html:link href="javascript:launchPopup('${viewReflection}')" styleClass="btn btn-default btn-xs loffset5">
 							<fmt:message key="label.view" />
 						</html:link>
 					</td>
 				</tr>
 			</c:forEach>
 		</table>
 	</c:if>
+	
+	<c:if test="${sessionMap.isGroupedActivity}">
+		</div> <!-- end collapse area  -->
+		</div> <!-- end collapse panel  -->
+	</c:if>
+	${ !sessionMap.isGroupedActivity || ! status.last ? '<div class="voffset5">&nbsp;</div>' :  ''}
 
 </c:forEach>
 
-<div class="space-top space-left">
-	<a href="<html:rewrite page='/monitoring/newImageInit.do?sessionMapID='/>${sessionMapID}&KeepThis=true&TB_iframe=true&height=540&width=480&modal=true" class="button add_new_image thickbox">  
-		<fmt:message key="label.monitoring.summary.add.new.image" />
+<c:if test="${sessionMap.isGroupedActivity}">
+	</div> <!--  end panel group -->
+</c:if>
+
+<P style=" margin-bottom: 10px;">
+	<a href="<html:rewrite page='/monitoring/newImageInit.do?sessionMapID='/>${sessionMapID}&KeepThis=true&TB_iframe=true&height=540&width=480&modal=true" 
+			class="btn btn-default loffset5 voffset10 thickbox">  
+		<i class="fa fa-plus"></i>&nbsp;<fmt:message key="label.monitoring.summary.add.new.image" />
 	</a>
-</div>
+</P>
 
 <%@ include file="parts/advanceOptions.jsp"%>
Fisheye: Tag 60ab803bf843562083cfb66764ddfcb3b0a83841 refers to a dead (removed) revision in file `lams_tool_images/web/pages/monitoring/userlist.jsp'.
Fisheye: No comparison available.  Pass `N' to diff?