Index: lams_tool_larsrc/web/WEB-INF/tags/AuthoringButton.tag
===================================================================
diff -u -r29fac4bd0bdf28bcaaeee7aae4020ccb15b6e520 -rb3fe40cd67fc779a6eee8320fadc3a489565a557
--- lams_tool_larsrc/web/WEB-INF/tags/AuthoringButton.tag	(.../AuthoringButton.tag)	(revision 29fac4bd0bdf28bcaaeee7aae4020ccb15b6e520)
+++ lams_tool_larsrc/web/WEB-INF/tags/AuthoringButton.tag	(.../AuthoringButton.tag)	(revision b3fe40cd67fc779a6eee8320fadc3a489565a557)
@@ -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_larsrc/web/WEB-INF/tags/CKEditor.tag
===================================================================
diff -u -rdc884b8e6274ebbc664d1ee940e565803445bb26 -rb3fe40cd67fc779a6eee8320fadc3a489565a557
--- lams_tool_larsrc/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision dc884b8e6274ebbc664d1ee940e565803445bb26)
+++ lams_tool_larsrc/web/WEB-INF/tags/CKEditor.tag	(.../CKEditor.tag)	(revision b3fe40cd67fc779a6eee8320fadc3a489565a557)
@@ -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,'Inline')}">
+	<c:set var="toolbarSet">${toolbarSet}Inline</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_larsrc/web/WEB-INF/tags/DefineLater.tag
===================================================================
diff -u -rfef442a88ab05c91db8a551081c4abc060d4da5e -rb3fe40cd67fc779a6eee8320fadc3a489565a557
--- lams_tool_larsrc/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision fef442a88ab05c91db8a551081c4abc060d4da5e)
+++ lams_tool_larsrc/web/WEB-INF/tags/DefineLater.tag	(.../DefineLater.tag)	(revision b3fe40cd67fc779a6eee8320fadc3a489565a557)
@@ -1,6 +1,6 @@
 
 <%
-	 /****************************************************************
+	/****************************************************************
 	 * Copyright (C) 2005 LAMS Foundation (http://lamsfoundation.org)
 	 * =============================================================
 	 * License Information: http://lamsfoundation.org/licensing/lams/2.0/
@@ -49,10 +49,18 @@
 	<c:set var="buttonTryAgainKey" value="button.try.again" />
 </c:if>
 
-<p>
-	<fmt:message key="${defineLaterMessageKey}" />
-</p>
-<div align="right" class="space-bottom-top">
-	<a href="javascript:location.reload(true);" class="button"><fmt:message
-			key="${buttonTryAgainKey}" /> </a>
+<div class="row no-gutter">
+	<div
+		class="col-xs-12 col-sm-offset-1 col-sm-10 col-lg-offset-2 col-lg-8">
+		<div class="alert alert-info">
+			<fmt:message key="${defineLaterMessageKey}" />
+		</div>
+	</div>
 </div>
+<div class="row no-gutter">
+	<div class="col-xs-12">
+		<a href="javascript:location.reload(true);"
+			class="btn btn-primary pull-right voffset5"><fmt:message
+				key="${buttonTryAgainKey}" /></a>
+	</div>
+</div>
\ No newline at end of file
Index: lams_tool_larsrc/web/WEB-INF/tags/Page.tag
===================================================================
diff -u -r48be6456edafa05b5486a6b3fc37f33d926d3c58 -rb3fe40cd67fc779a6eee8320fadc3a489565a557
--- lams_tool_larsrc/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision 48be6456edafa05b5486a6b3fc37f33d926d3c58)
+++ lams_tool_larsrc/web/WEB-INF/tags/Page.tag	(.../Page.tag)	(revision b3fe40cd67fc779a6eee8320fadc3a489565a557)
@@ -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_larsrc/web/WEB-INF/tags/Tab.tag
===================================================================
diff -u -rac6c077d83ef253fa3f07a515edc49077317029a -rb3fe40cd67fc779a6eee8320fadc3a489565a557
--- lams_tool_larsrc/web/WEB-INF/tags/Tab.tag	(.../Tab.tag)	(revision ac6c077d83ef253fa3f07a515edc49077317029a)
+++ lams_tool_larsrc/web/WEB-INF/tags/Tab.tag	(.../Tab.tag)	(revision b3fe40cd67fc779a6eee8320fadc3a489565a557)
@@ -1,85 +1,89 @@
-<%
-	 /****************************************************************
-	 * 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
-	 * ****************************************************************
-	 */
-
-	/**
-	 * Tab.tag
-	 *	Author: Mitchell Seaton
-	 *	Description: Creates a tab element.
-	 * Wiki: 
-	 */
-%>
-<%@ tag body-content="empty"%>
-<%@ attribute name="id" required="true" rtexprvalue="true"%>
-<%@ attribute name="value" required="false" rtexprvalue="true"%>
-<%@ attribute name="key" required="false" rtexprvalue="true"%>
-<%@ attribute name="inactive" required="false" rtexprvalue="true"%>
-<%@ attribute name="methodCall" required="false" rtexprvalue="true"%>
-
-<%@ taglib uri="tags-core" prefix="c"%>
-<%@ taglib uri="tags-fmt" prefix="fmt"%>
-<%@ taglib uri="tags-lams" prefix="lams"%>
-
-<%-- Check if  bundle is set --%>
-<c:if test="${not empty bundle}">
-	<fmt:setBundle basename="${bundle}"/>
-</c:if>
-
-<c:set var="lams">
-	<lams:LAMSURL />
-</c:set>
-
-<c:set var="tabTitle" value="${value}" />
-
-<%--
-	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
---%>
-
-<c:if test="${methodCall == null}">
-	<c:choose>
-		<c:when test="${dControl}">
-			<c:set var="methodCall" value="doSelectTab" />
-		</c:when>
-		<c:otherwise>
-			<c:set var="methodCall" value="selectTab" />
-		</c:otherwise>
-	</c:choose>
-</c:if>
-
-<c:if test="${key != null && value == null}">
-	<c:set var="tabTitle">
-		<fmt:message key="${key}" />
-	</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>
+<%
+	 /****************************************************************
+	 * 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
+	 * ****************************************************************
+	 */
+
+	/**
+	 * Tab.tag
+	 *	Author: Fiona Malikoff
+	 *	Description: Creates a tab element within the Hybrid Tab Header.
+	 * Wiki: 
+	 */
+%>
+<%@ tag body-content="empty"%>
+<%@ attribute name="id" required="true" rtexprvalue="true"%>
+<%@ attribute name="value" required="false" rtexprvalue="true"%>
+<%@ attribute name="key" required="false" rtexprvalue="true"%>
+<%@ attribute name="inactive" required="false" rtexprvalue="true"%>
+<%@ attribute name="methodCall" required="false" rtexprvalue="true"%>
+
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-fmt" prefix="fmt"%>
+<%@ taglib uri="tags-lams" prefix="lams"%>
+
+<%-- Check if  bundle is set --%>
+<c:if test="${not empty bundle}">
+	<fmt:setBundle basename="${bundle}"/>
+</c:if>
+
+<c:set var="lams">
+	<lams:LAMSURL />
+</c:set>
+
+<c:set var="tabTitle" value="${value}" />
+
+<%--
+	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}">
+	<c:choose>
+		<c:when test="${dControl}">
+			<c:set var="methodCall" value="doSelectTab" />
+		</c:when>
+		<c:otherwise>
+			<c:set var="methodCall" value="selectTab" />
+		</c:otherwise>
+	</c:choose>
+</c:if>
+
+<c:if test="${key != null && value == null}">
+	<c:set var="tabTitle">
+		<fmt:message key="${key}" />
+	</c:set>
+</c:if>
+
+<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_larsrc/web/WEB-INF/tags/TabBody.tag
===================================================================
diff -u -r9481bb9c6f8c0e4d6fbed6b230a41c77feda64c6 -rb3fe40cd67fc779a6eee8320fadc3a489565a557
--- lams_tool_larsrc/web/WEB-INF/tags/TabBody.tag	(.../TabBody.tag)	(revision 9481bb9c6f8c0e4d6fbed6b230a41c77feda64c6)
+++ lams_tool_larsrc/web/WEB-INF/tags/TabBody.tag	(.../TabBody.tag)	(revision b3fe40cd67fc779a6eee8320fadc3a489565a557)
@@ -1,52 +1,44 @@
-<%/****************************************************************
- * 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
- * ****************************************************************
- */
-
-/**
- * TabBody.tag
- *	Author: Mitchell Seaton
- *	Description: Creates the body container for a tab element
- * 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>
-
-</div>
-<!-- end tab content -->
+<%/****************************************************************
+ * 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
+ * ****************************************************************
+ */
+
+/**
+ * TabBody.tag
+ *	Author: Mitchell Seaton
+ *	Description: Creates the body container for a tab element
+ * Wiki: 
+ */
+
+%>
+<%@ 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"%>
+
+<c:set var="class" value=""/>
+<c:if test="${id == 1}">
+	<c:set var="class">active</c:set>
+</c:if>
+
+<div role="tabpanel" class="tab-pane ${class}" id="t${id}"><jsp:include page="${page}"/></div>
Index: lams_tool_larsrc/web/WEB-INF/tags/TabName.tag
===================================================================
diff -u -r7329c82c5388fbb86b6a0a2b27a71151ee8f116e -rb3fe40cd67fc779a6eee8320fadc3a489565a557
--- lams_tool_larsrc/web/WEB-INF/tags/TabName.tag	(.../TabName.tag)	(revision 7329c82c5388fbb86b6a0a2b27a71151ee8f116e)
+++ lams_tool_larsrc/web/WEB-INF/tags/TabName.tag	(.../TabName.tag)	(revision b3fe40cd67fc779a6eee8320fadc3a489565a557)
@@ -1,59 +1,59 @@
-<%/****************************************************************
- * 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
- * ****************************************************************
- */
-
-/**
- * TabName Tag
- *	Author: Mitchell Seaton
- *	Description: Shortens name that are too long to fit inside a tab
- */
-
-		%>
-<%@ tag body-content="scriptless" %>
-
-<%@ attribute name="url" required="true" rtexprvalue="true"%>
-<%@ attribute name="highlight" required="false" rtexprvalue="true" %>
-
-<%@ taglib uri="tags-core" prefix="c"%>
-<%@ taglib uri="tags-function" prefix="fn"%>
-
-<c:set var="limit">12</c:set>
-<c:set var="fullname"><jsp:doBody/></c:set>
-<c:set var="titleValue" value=""/>
-
-<c:choose>
-	<c:when test="${fn:length(fullname) > limit}">
-			<c:set var="titleValue" value="${fullname}"/>
-			<c:set var="tabname" value="${fn:substring(fullname, 0, limit-2)}..."/>
-	</c:when>
-	<c:otherwise>
-		<c:set var="tabname" value="${fullname}"/>
-	</c:otherwise>
-</c:choose>
-
-<c:if test="${highlight eq true}">
-	<c:set var="classVar" value="tab-link-highlight" />
-</c:if>
-
-<a class="tab-middle-link ${classVar}" href="<c:out value='${url}' />" title="<c:out value='${titleValue}'/>" style="border:0;">
-	<c:out value="${tabname}" escapeXml="false"/>	
+<%/****************************************************************
+ * 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
+ * ****************************************************************
+ */
+
+/**
+ * TabName Tag
+ *	Author: Mitchell Seaton
+ *	Description: Shortens name that are too long to fit inside a tab
+ */
+
+		%>
+<%@ tag body-content="scriptless" %>
+
+<%@ attribute name="url" required="true" rtexprvalue="true"%>
+<%@ attribute name="highlight" required="false" rtexprvalue="true" %>
+
+<%@ taglib uri="tags-core" prefix="c"%>
+<%@ taglib uri="tags-function" prefix="fn"%>
+
+<c:set var="limit">12</c:set>
+<c:set var="fullname"><jsp:doBody/></c:set>
+<c:set var="titleValue" value=""/>
+
+<c:choose>
+	<c:when test="${fn:length(fullname) > limit}">
+			<c:set var="titleValue" value="${fullname}"/>
+			<c:set var="tabname" value="${fn:substring(fullname, 0, limit-2)}..."/>
+	</c:when>
+	<c:otherwise>
+		<c:set var="tabname" value="${fullname}"/>
+	</c:otherwise>
+</c:choose>
+
+<c:if test="${highlight eq true}">
+	<c:set var="classVar" value="tab-link-highlight" />
+</c:if>
+
+<a class="tab-middle-link ${classVar}" href="<c:out value='${url}' />" title="<c:out value='${titleValue}'/>" style="border:0;">
+	<c:out value="${tabname}" escapeXml="false"/>	
 </a>
\ No newline at end of file
Index: lams_tool_larsrc/web/WEB-INF/tags/Tabs.tag
===================================================================
diff -u -r9481bb9c6f8c0e4d6fbed6b230a41c77feda64c6 -rb3fe40cd67fc779a6eee8320fadc3a489565a557
--- lams_tool_larsrc/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision 9481bb9c6f8c0e4d6fbed6b230a41c77feda64c6)
+++ lams_tool_larsrc/web/WEB-INF/tags/Tabs.tag	(.../Tabs.tag)	(revision b3fe40cd67fc779a6eee8320fadc3a489565a557)
@@ -1,69 +1,92 @@
-<%/****************************************************************
- * 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
- * ****************************************************************
- */
-
-/**
- * Tabs.tag
- *	Author: Mitchell Seaton
- *	Description: Create a tab list from a input collection or nested Tab tags.
- * Wiki: 
- */
-
-		%>
-<%@ 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"%>
-<%@ taglib uri="tags-core" prefix="c"%>
-<%@ taglib uri="tags-lams" prefix="lams"%>
-<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>
-
-<!-- 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>
-</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
+ * ****************************************************************
+ */
+
+/**
+ * Tabs.tag
+ *	Author: Fiona Malikoff
+ *	Description: Create a hybrid panel header that contains a nav bar that acts like tabs.
+ */
+
+%>
+<%@ attribute name="control" 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>
+
+<!-- navbar combined with tabs -->
+<div class="panel panel-default panel-monitor-page">
+<div class="panel-heading navbar-heading">
+
+ 	<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_larsrc/web/WEB-INF/tags/headItems.tag
===================================================================
diff -u -r613f0d0d76eb497ed58d7e6836eda34a245425a9 -rb3fe40cd67fc779a6eee8320fadc3a489565a557
--- lams_tool_larsrc/web/WEB-INF/tags/headItems.tag	(.../headItems.tag)	(revision 613f0d0d76eb497ed58d7e6836eda34a245425a9)
+++ lams_tool_larsrc/web/WEB-INF/tags/headItems.tag	(.../headItems.tag)	(revision b3fe40cd67fc779a6eee8320fadc3a489565a557)
@@ -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_larsrc/web/common/header.jsp
===================================================================
diff -u -re9e2a6b00397afa86d303bfbc6ca3649744a982e -rb3fe40cd67fc779a6eee8320fadc3a489565a557
--- lams_tool_larsrc/web/common/header.jsp	(.../header.jsp)	(revision e9e2a6b00397afa86d303bfbc6ca3649744a982e)
+++ lams_tool_larsrc/web/common/header.jsp	(.../header.jsp)	(revision b3fe40cd67fc779a6eee8320fadc3a489565a557)
@@ -12,6 +12,10 @@
 	<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="<html:rewrite page='/includes/javascript/rsrccommon.js'/>"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>    
+<%-- <script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter.js"></script> 
+<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-widgets.js"></script> 
+<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-pager.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>
 
 	
\ No newline at end of file
Index: lams_tool_larsrc/web/common/tabbedheader.jsp
===================================================================
diff -u -r613f0d0d76eb497ed58d7e6836eda34a245425a9 -rb3fe40cd67fc779a6eee8320fadc3a489565a557
--- lams_tool_larsrc/web/common/tabbedheader.jsp	(.../tabbedheader.jsp)	(revision 613f0d0d76eb497ed58d7e6836eda34a245425a9)
+++ lams_tool_larsrc/web/common/tabbedheader.jsp	(.../tabbedheader.jsp)	(revision b3fe40cd67fc779a6eee8320fadc3a489565a557)
@@ -5,12 +5,16 @@
 
  	<!-- ********************  CSS ********************** -->
 	<link href="<html:rewrite page='/includes/css/rsrc.css'/>" rel="stylesheet" type="text/css">
-	<lams:css style="main"/>
+	<lams:css/>
 
  	<!-- ********************  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="<html:rewrite page='/includes/javascript/rsrccommon.js'/>"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>    
-
+	<script type="text/javascript" src="<html:rewrite page='/includes/javascript/rsrcresourceitem.js'/>"></script>
+<%-- <script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter.js"></script> 
+<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-widgets.js"></script> 
+<script type="text/javascript" src="${lams}includes/javascript/jquery.tablesorter-pager.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>
 	
\ No newline at end of file
Index: lams_tool_larsrc/web/includes/javascript/rsrccommon.js
===================================================================
diff -u -r529adc13063b7d012d49a4c7ed47a27716c76a94 -rb3fe40cd67fc779a6eee8320fadc3a489565a557
--- lams_tool_larsrc/web/includes/javascript/rsrccommon.js	(.../rsrccommon.js)	(revision 529adc13063b7d012d49a4c7ed47a27716c76a94)
+++ lams_tool_larsrc/web/includes/javascript/rsrccommon.js	(.../rsrccommon.js)	(revision b3fe40cd67fc779a6eee8320fadc3a489565a557)
@@ -1,10 +1,12 @@
 	function showBusy(targetDiv){
-		if($(targetDiv+"_Busy") != null){
+		var div = document.getElementById(targetDiv+"_Busy");
+		if(div != null){
 			document.getElementById(targetDiv+"_Busy").style.display = '';
 		}
 	}
 	function hideBusy(targetDiv){
-		if($(targetDiv+"_Busy") != null){
+		var div = document.getElementById(targetDiv+"_Busy");
+		if(div != null){
 			document.getElementById(targetDiv+"_Busy").style.display = 'none';
 		}				
 	}
\ No newline at end of file
Index: lams_tool_larsrc/web/includes/javascript/rsrcresourceitem.js
===================================================================
diff -u -re9e2a6b00397afa86d303bfbc6ca3649744a982e -rb3fe40cd67fc779a6eee8320fadc3a489565a557
--- lams_tool_larsrc/web/includes/javascript/rsrcresourceitem.js	(.../rsrcresourceitem.js)	(revision e9e2a6b00397afa86d303bfbc6ca3649744a982e)
+++ lams_tool_larsrc/web/includes/javascript/rsrcresourceitem.js	(.../rsrcresourceitem.js)	(revision b3fe40cd67fc779a6eee8320fadc3a489565a557)
@@ -4,7 +4,7 @@
 	var instructionTargetDiv = "instructionArea";
     var itemAttachmentTargetDiv = "itemAttachmentArea";
     var singleInstructionHeight = 74;
-    
+	
 	function removeInstruction(idx){
 		//prepare lams_textarea value to Ajax submit
 		$('textarea').trigger('change');
@@ -27,7 +27,8 @@
 			removeItemAttachmentUrl,
 			{
 				reqID: new Date()
-			}
+			},
+			removeItemAttachmentComplete
 		);	    
 	}
 	
@@ -42,24 +43,13 @@
 	    	addInstructionUrl, 
 	    	param, 
 	    	function(xml) {
-	    		addInstructionComplete();
-	    		document.getElementById("instructionArea").innerHTML = xml;
+               $('#instructionArea').html(xml);
 	    	}
 	    );
 	    
 	    return false;
 	}
 	
-	function adjustInstructionsDisplayAreaHeight(adjustAmount){
-		var obj = window.document.getElementById('reourceInputArea');
-		if (!obj && window.parent) {
-			 obj = window.parent.document.getElementById('reourceInputArea');
-		}  
-		if (!obj) {
-			obj = window.top.document.getElementById('reourceInputArea');
-		}
-		obj.style.height=obj.contentWindow.document.body.scrollHeight+adjustAmount+'px';
-	}
 	function upItem(itemIdx){
 		//prepare lams_textarea value to Ajax submit
 		$('textarea').trigger('change');
@@ -90,7 +80,6 @@
 	}
 	function removeInstructionComplete(){
 		hideBusy(instructionTargetDiv);
-		adjustInstructionsDisplayAreaHeight(-singleInstructionHeight);
 	}
 	function removeItemAttachmentLoading(){
 		showBusy(itemAttachmentTargetDiv);
@@ -103,26 +92,25 @@
 	}
 	function addInstructionComplete(){
 		hideBusy(instructionTargetDiv);
-		adjustInstructionsDisplayAreaHeight(singleInstructionHeight);
 	}
 	
 	function submitResourceItem(){
-		//prepare lams_textarea value to Ajax submit
+		//prepare lams_textarea value to Ajax submit and add instructions to form
 		$('textarea').trigger('change');
-		
 		document.getElementById("instructionList").value = $("#instructionForm").serialize();
-		$("#resourceItemForm").submit();
+		var formData = new FormData(document.getElementById("resourceItemForm"));
+
 		// after submit, it direct to itemlist.jsp, 
-		// then refresh "basic tab" resourcelist and close this window.
-	}
-	function cancelResourceItem(){ 
-		var win = null;
-		if (window.hideMessage) { 
-			win = window;
-		} else if (window.parent && window.parent.hideMessage) {
-			win = window.parent;
-		} else {
-			win = window.top;
-		}
-		win.hideMessage();
-	}
+		// then refresh "basic tab" resource list and close this window.
+	    $.ajax({ // create an AJAX call...
+			data: formData, 
+	        processData: false, // tell jQuery not to process the data
+	        contentType: false, // tell jQuery not to set contentType
+           	type: $("#resourceItemForm").attr('method'),
+			url: $("#resourceItemForm").attr('action'),
+			success: function(data) {
+               $('#resourceInputArea').html(data);
+			}
+	    });
+	    
+	}
\ No newline at end of file
Index: lams_tool_larsrc/web/pages/authoring/advance.jsp
===================================================================
diff -u -r94ed30ec071e295e4a2d469f02778c25f401ca41 -rb3fe40cd67fc779a6eee8320fadc3a489565a557
--- lams_tool_larsrc/web/pages/authoring/advance.jsp	(.../advance.jsp)	(revision 94ed30ec071e295e4a2d469f02778c25f401ca41)
+++ lams_tool_larsrc/web/pages/authoring/advance.jsp	(.../advance.jsp)	(revision b3fe40cd67fc779a6eee8320fadc3a489565a557)
@@ -1,99 +1,76 @@
 <%@ include file="/common/taglibs.jsp"%>
-<c:set var="formBean"
-	value="<%=request
-									.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
+<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
 
 <!-- Advance Tab Content -->
 
-<p class="small-space-top">
-	<html:checkbox property="resource.lockWhenFinished"
-		styleClass="noBorder" styleId="lockWhenFinished">
-	</html:checkbox>
+<div class="checkbox">
+<label for="lockWhenFinished"><html:checkbox property="resource.lockWhenFinished" styleId="lockWhenFinished" />
+<fmt:message key="label.authoring.advance.lock.on.finished" /></label>
+</div>
 
-	<label for="lockWhenFinished">
-		<fmt:message key="label.authoring.advance.lock.on.finished" />
-	</label>
-</p>
+<div class="checkbox">
+<label for="runAuto"><html:checkbox property="resource.runAuto" styleId="runAuto" />
+<fmt:message key="label.authoring.advance.run.content.auto" /></label>
+</div>
 
-<p>
-	<html:checkbox property="resource.runAuto" styleClass="noBorder" styleId="runAuto">
-	</html:checkbox>
-	<label for="runAuto">
-		<fmt:message key="label.authoring.advance.run.content.auto" />
-	</label>
-</p>
+<div class="form-group">
+<html:select property="resource.miniViewResourceNumber" styleClass="form-control form-control-inline input-sm"
+	styleId="viewNumList" style="width:100px">
+	<c:forEach begin="1" end="${fn:length(resourceList)}"
+		varStatus="status">
+		<c:choose>
+			<c:when
+				test="${formBean.resource.miniViewResourceNumber == status.index}">
+				<option value="${status.index}" selected="true">
+					${status.index}
+				</option>
+			</c:when>
+			<c:otherwise>
+				<option value="${status.index}">
+					${status.index}
+				</option>
+			</c:otherwise>
+		</c:choose>
+	</c:forEach>
+</html:select>
+<label for="miniViewResourceNumber">&nbsp;<fmt:message key="label.authoring.advance.mini.number.resources.view" /></label>
+</div>
 
-<p>
-	<html:select property="resource.miniViewResourceNumber"
-		styleId="viewNumList" style="width:50px">
-		<c:forEach begin="1" end="${fn:length(resourceList)}"
-			varStatus="status">
-			<c:choose>
-				<c:when
-					test="${formBean.resource.miniViewResourceNumber == status.index}">
-					<option value="${status.index}" selected="true">
-						${status.index}
-					</option>
-				</c:when>
-				<c:otherwise>
-					<option value="${status.index}">
-						${status.index}
-					</option>
-				</c:otherwise>
-			</c:choose>
-		</c:forEach>
-	</html:select>
+<div class="checkbox">
+<label for="allowAddUrls"><html:checkbox property="resource.allowAddUrls" styleId="allowAddUrls"/>
+<fmt:message key="label.authoring.advance.allow.learner.add.urls" />
+</label>
+</div>
 
-	<fmt:message key="label.authoring.advance.mini.number.resources.view" />
-</p>
+<div class="checkbox">
+<label for="allowAddFiles"><html:checkbox property="resource.allowAddFiles" styleId="allowAddFiles"/>
+<fmt:message key="label.authoring.advance.allow.learner.add.files" />
+</label>
+</div>
 
-<p>
-	<html:checkbox property="resource.allowAddUrls" styleClass="noBorder" styleId="allowAddUrls">
-	</html:checkbox>
-	<label for="allowAddUrls">
-		<fmt:message key="label.authoring.advance.allow.learner.add.urls" />
-	</label>
-</p>
+<div class="checkbox">
+<label for="notifyTeachersOnAssigmentSumbit">
+<html:checkbox property="resource.notifyTeachersOnAssigmentSumbit" styleId="notifyTeachersOnAssigmentSumbit"/>
+<fmt:message key="label.authoring.advanced.notify.onassigmentsubmit" />
+</label>
+</div>
 
-<p>
-	<html:checkbox property="resource.allowAddFiles" styleClass="noBorder" styleId="allowAddFiles">
-	</html:checkbox>
-	<label for="allowAddFiles">
-		<fmt:message key="label.authoring.advance.allow.learner.add.files" />
-	</label>
-</p>
+<div class="checkbox">
+<label for="notifyTeachersOnFileUpload">
+<html:checkbox property="resource.notifyTeachersOnFileUpload" styleId="notifyTeachersOnFileUpload"/>
+<fmt:message key="label.authoring.advanced.notify.onfileupload" />
+</label>
+</div>
 
-<p>
-	<html:checkbox property="resource.notifyTeachersOnAssigmentSumbit"
-		styleClass="noBorder" styleId="notifyTeachersOnAssigmentSumbit">
-	</html:checkbox>
-	<label for="notifyTeachersOnAssigmentSumbit">
-		<fmt:message key="label.authoring.advanced.notify.onassigmentsubmit" />
-	</label>
-</p>
+<div class="checkbox">
+<label for="reflectOn"><html:checkbox property="resource.reflectOnActivity" styleId="reflectOn"/>
+<fmt:message key="label.authoring.advanced.reflectOnActivity" />
+</label>
+</div>
 
-<p>
-	<html:checkbox property="resource.notifyTeachersOnFileUpload"
-		styleClass="noBorder" styleId="notifyTeachersOnFileUpload">
-	</html:checkbox>
-	<label for="notifyTeachersOnFileUpload">
-		<fmt:message key="label.authoring.advanced.notify.onfileupload" />
-	</label>
-</p>
-
-<p>
-	<html:checkbox property="resource.reflectOnActivity"
-		styleClass="noBorder" styleId="reflectOn">
-	</html:checkbox>
-	<label for="reflectOn">
-		<fmt:message key="label.authoring.advanced.reflectOnActivity" />
-	</label>
-</p>
-
-<p>
-	<html:textarea property="resource.reflectInstructions"
-		styleId="reflectInstructions" cols="30" rows="3" />
-</p>
+<div class="form-group">
+<html:textarea property="resource.reflectInstructions" styleClass="form-control" styleId="reflectInstructions" rows="3" />
+</div>
 <script type="text/javascript">
 <!--
 //automatically turn on refect option if there are text input in refect instruction area
Index: lams_tool_larsrc/web/pages/authoring/authoring.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -rb3fe40cd67fc779a6eee8320fadc3a489565a557
--- lams_tool_larsrc/web/pages/authoring/authoring.jsp	(.../authoring.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_larsrc/web/pages/authoring/authoring.jsp	(.../authoring.jsp)	(revision b3fe40cd67fc779a6eee8320fadc3a489565a557)
@@ -72,58 +72,56 @@
  
 </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>
-		<!-- start tabs -->
-<div id="content">
-		<!-- end tab buttons -->
-		
-		<%@ include file="/common/messages.jsp"%>
 
-		<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="resource.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="resource.contentId" />
+	<html:hidden property="sessionMapID" />
+	<html:hidden property="contentFolderID" />
+	<html:hidden property="currentTab" styleId="currentTab" />
 
-		<lams:help toolSignature="<%= ResourceConstants.TOOL_SIGNATURE %>" module="authoring"/>
 
+	<c:set var="title"><fmt:message key="activity.title" /></c:set>
+	<lams:Page title="${title}" type="navbar">
+	
+		<lams:Tabs control="true" title="${title}" helpToolSignature="<%= ResourceConstants.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:TabBodyArea>
+		<%@ include file="/common/messages.jsp"%>
+	   
+	    <!--  Set up tabs  -->
+	    <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) -->
+		</lams:TabBodys>
+			
+		<!-- Button Row -->
+		<%--  Default value 
+			cancelButtonLabelKey="label.authoring.cancel.button"
+			saveButtonLabelKey="label.authoring.save.button"
+			cancelConfirmMsgKey="authoring.msg.cancel.save"
+			accessMode="author"
+		--%>
+		<lams:AuthoringButton formID="authoringForm" clearSessionActionUrl="/clearsession.do" 
+			toolSignature="<%=ResourceConstants.TOOL_SIGNATURE%>" toolContentID="${formBean.resource.contentId}" 
+			 customiseSessionID="${formBean.sessionMapID}"
+			 contentFolderID="${formBean.contentFolderID}" />
+	</lams:TabBodyArea>
 
+	<div id="footer"></div>
 
-			<!-- Button Row -->
-			<%--  Default value 
-				cancelButtonLabelKey="label.authoring.cancel.button"
-				saveButtonLabelKey="label.authoring.save.button"
-				cancelConfirmMsgKey="authoring.msg.cancel.save"
-				accessMode="author"
-			--%>
-			<lams:AuthoringButton formID="authoringForm" clearSessionActionUrl="/clearsession.do" 
-				toolSignature="<%=ResourceConstants.TOOL_SIGNATURE%>" toolContentID="${formBean.resource.contentId}" 
-				 customiseSessionID="${formBean.sessionMapID}"
-				 contentFolderID="${formBean.contentFolderID}" />
+	</lams:Page>
+		
 	</html:form>
 
-</div>
-
-<div id="footer"></div>
-<!-- end page div -->
-</div>
-
 <script type="text/javascript">
 	changeViewNum(${formBean.resource.miniViewResourceNumber});
 </script>
Index: lams_tool_larsrc/web/pages/authoring/basic.jsp
===================================================================
diff -u -rfb9d13eb115f5281b03ab1624ec10a22ba3b81b7 -rb3fe40cd67fc779a6eee8320fadc3a489565a557
--- lams_tool_larsrc/web/pages/authoring/basic.jsp	(.../basic.jsp)	(revision fb9d13eb115f5281b03ab1624ec10a22ba3b81b7)
+++ lams_tool_larsrc/web/pages/authoring/basic.jsp	(.../basic.jsp)	(revision b3fe40cd67fc779a6eee8320fadc3a489565a557)
@@ -4,35 +4,17 @@
 
 <c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
 <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="90%";
-			area.src=url;
-			area.style.display="block";
-		}
-		var elem = document.getElementById("saveCancelButtons");
-		if (elem != null) {
-			elem.style.display="none";
-		}
-		location.hash = "reourceInputArea";
+
+	function showResourceItem(url) {
+		$("#resourceInputArea").load(url, function() {
+			$(this).show();
+			$("#saveCancelButtons").hide();
+		});
 	}
-	function hideMessage(){
-		var area=document.getElementById("reourceInputArea");
-		if(area != null){
-			area.style.width="0px";
-			area.style.height="0px";
-			area.style.display="none";
-		}
-		var elem = document.getElementById("saveCancelButtons");
-		if (elem != null) {
-			elem.style.display="block";
-		}
+	function hideResourceItem(){
+		$("#resourceInputArea").hide();
+		$("#saveCancelButtons").show();
 	}
 
 	function previewItem(type,idx,sessionMapID){
@@ -43,9 +25,9 @@
 	}
 	
 	function editItem(idx,sessionMapID){
-		 var reqIDVar = new Date();
+		var reqIDVar = new Date();
 		var url = "<c:url value="/authoring/editItemInit.do?itemIndex="/>" + idx +"&reqID="+reqIDVar.getTime()+"&sessionMapID="+sessionMapID;;
-		showMessage(url);
+		showResourceItem(url);
 	}
 	//The panel of resource list panel
 	var resourceListTargetDiv = "resourceListArea";
@@ -94,54 +76,31 @@
 	}
 
 </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="resource.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="resource.instructions"
-				value="${formBean.resource.instructions}"
-				contentFolderID="${formBean.contentFolderID}"></lams:CKEditor>
-		</td>
-	</tr>
+<div class="form-group">
+    <label for="forum.title"><fmt:message key="label.authoring.basic.title"/></label>
+    <html:text property="resource.title" styleClass="form-control"></html:text>
+</div>
+<div class="form-group">
+    <label for="resource.instructions"><fmt:message key="label.authoring.basic.instruction" /></label>
+    <lams:CKEditor id="resource.instructions" value="${formBean.resource.instructions}" contentFolderID="${formBean.contentFolderID}"></lams:CKEditor>
+</div>
 
-</table>
-
 <div id="resourceListArea">
 	<c:set var="sessionMapID" value="${formBean.sessionMapID}" />
-	<%@ include file="/pages/authoring/parts/itemlist.jsp"%>
+ 	<%@ include file="/pages/authoring/parts/itemlist.jsp"%>
 </div>
 
-<p align="center">
-			<a
-				href="javascript:showMessage('<html:rewrite page="/authoring/newItemInit.do?sessionMapID=${formBean.sessionMapID}&itemType=1"/>');">
-				<fmt:message key="label.authoring.basic.add.url" /></a> 
-				 <a
-				href="javascript:showMessage('<html:rewrite page="/authoring/newItemInit.do?sessionMapID=${formBean.sessionMapID}&itemType=2"/>');"  class="space-left">
-				<fmt:message key="label.authoring.basic.add.file" /></a>
-				 <a
-				href="javascript:showMessage('<html:rewrite page="/authoring/newItemInit.do?sessionMapID=${formBean.sessionMapID}&itemType=3"/>');" class="space-left">
-				<fmt:message key="label.authoring.basic.add.website" /></a>
-				<a
-				href="javascript:showMessage('<html:rewrite page="/authoring/newItemInit.do?sessionMapID=${formBean.sessionMapID}&itemType=4"/>');" class="space-left">
-				<fmt:message key="label.authoring.basic.add.learning.object" /> </a>
-</p>
+<div class="form-inline">
+	<a href="javascript:showResourceItem('<html:rewrite page="/authoring/newItemInit.do?sessionMapID=${formBean.sessionMapID}&itemType=1"/>');" class="btn btn-default btn-sm">
+		<i class="fa fa-plus"></i>&nbsp;<fmt:message key="label.authoring.basic.add.url" /></a> 
+	<a href="javascript:showResourceItem('<html:rewrite page="/authoring/newItemInit.do?sessionMapID=${formBean.sessionMapID}&itemType=2"/>');"  class="btn btn-default btn-sm loffset5">
+		<i class="fa fa-plus"></i>&nbsp;<fmt:message key="label.authoring.basic.add.file" /></a>
+	<a href="javascript:showResourceItem('<html:rewrite page="/authoring/newItemInit.do?sessionMapID=${formBean.sessionMapID}&itemType=3"/>');" class="btn btn-default btn-sm loffset5">
+		<i class="fa fa-plus"></i>&nbsp;<fmt:message key="label.authoring.basic.add.website" /></a>
+	<a href="javascript:showResourceItem('<html:rewrite page="/authoring/newItemInit.do?sessionMapID=${formBean.sessionMapID}&itemType=4"/>');" class="btn btn-default btn-sm loffset5">
+		<i class="fa fa-plus"></i>&nbsp;<fmt:message key="label.authoring.basic.add.learning.object" /> </a>
+</div>
 
-<p>
-	<iframe
-		onload="javascript:this.style.height=this.contentWindow.document.body.scrollHeight+'px'"
-		id="reourceInputArea" name="reourceInputArea"
-		style="width:0px;height:0px;border:0px;display:none" frameborder="no"
-		scrolling="no">
-	</iframe>
-</p>
+<div id="resourceInputArea" name="resourceInputArea" class="voffset10"></div>
\ No newline at end of file
Index: lams_tool_larsrc/web/pages/authoring/definelater.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -rb3fe40cd67fc779a6eee8320fadc3a489565a557
--- lams_tool_larsrc/web/pages/authoring/definelater.jsp	(.../definelater.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_larsrc/web/pages/authoring/definelater.jsp	(.../definelater.jsp)	(revision b3fe40cd67fc779a6eee8320fadc3a489565a557)
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
         
+<c:set var="title"><fmt:message key="activity.title" /></c:set>
 
 <%@ include file="/common/taglibs.jsp"%>
 <%@ page import="java.util.HashSet"%>
@@ -21,11 +22,6 @@
         function init(){
             selectTab(1); //select the default tab;
             
-            initEditor("Title");
-            initEditor("Instructions");
-            initEditor("OnlineInstruction");
-            initEditor("OfflineInstruction");
-            
         }     
         
         function doSelectTab(tabId) {
@@ -43,43 +39,38 @@
 
 </lams:head>
 <body class="stripes" onLoad="init()">
-<div id="page">
 	<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="resource.contentId" />
 		<html:hidden property="mode" value="teacher"/>
 		<html:hidden property="contentFolderID" />
 		<html:hidden property="sessionMapID" />
 		
-		<h1>
-			<fmt:message key="label.authoring.heading" />
-		</h1>
-<div id="header">
-		<!-- start tabs -->
-		<lams:Tabs collection="${tabs}" useKey="true" control="true" />
-</div>
-<div id="content">
-		<%@ include file="/common/messages.jsp"%>
-		
-		<lams:help toolSignature="<%= ResourceConstants.TOOL_SIGNATURE %>" module="authoring"/>
-		<!-- end tab buttons -->
-		<div class="tabbody">
-			<!-- tab content 1 (Basic) -->
-			<lams:TabBody id="1" titleKey="label.authoring.heading.basic.desc" page="basic.jsp" />
-			<!-- end of content (Basic) -->
+	<lams:Page title="${title}" type="navbar">
 
-
+		<lams:Tabs control="true" title="${title}" helpToolSignature="<%= ResourceConstants.TOOL_SIGNATURE %>" helpModule="authoring">
+			<lams:Tab id="1" key="authoring.tab.basic" />
+		</lams:Tabs>    
+	
+		<lams:TabBodyArea>
+			<%@ include file="/common/messages.jsp"%>
+		   
+		    <!--  Set up tabs  -->
+		     <lams:TabBodys>
+				<lams:TabBody id="1" titleKey="authoring.tab.basic" page="basic.jsp" />
+		    </lams:TabBodys>
+	
 			<!-- Button Row -->
 			<lams:AuthoringButton formID="authoringForm" clearSessionActionUrl="/clearsession.do" toolSignature="<%=ResourceConstants.TOOL_SIGNATURE%>" 
 				toolContentID="${formBean.resource.contentId}"  accessMode="teacher" defineLater="yes"  
 				customiseSessionID="${formBean.sessionMapID}" contentFolderID="${formBean.contentFolderID}"/>
-		</div>
 
+		</lams:TabBodyArea>
 
+		<div id="footer"></div>
+
+	</lams:Page>
+
 	</html:form>
-	
-</div>
-<div id="footer"></div>
-</div>
 </body>
 </lams:html>
Index: lams_tool_larsrc/web/pages/authoring/definelaterforbid.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -rb3fe40cd67fc779a6eee8320fadc3a489565a557
--- lams_tool_larsrc/web/pages/authoring/definelaterforbid.jsp	(.../definelaterforbid.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_larsrc/web/pages/authoring/definelaterforbid.jsp	(.../definelaterforbid.jsp)	(revision b3fe40cd67fc779a6eee8320fadc3a489565a557)
@@ -8,14 +8,12 @@
 	<%@ include file="/common/header.jsp"%>
 </lams:head>
 <body class="stripes">
-	<div id="content">
-	<div align="center">
-		<h1>
-			<fmt:message key="label.authoring.heading" />
-		</h1>
 
-		<B><fmt:message key="message.monitoring.edit.activity.not.editable" /></B>
-	</div>
-	</div>
+	<c:set var="title"><fmt:message key="activity.title" /></c:set>
+	<lams:Page title="${title}" type="learner">
+		<lams:Alert id="errorMessages" type="danger" close="false">
+			<fmt:message key="message.monitoring.edit.activity.not.editable" />
+		</lams:Alert>
+	</lams:Page>
 </body>
 </html:html>
Index: lams_tool_larsrc/web/pages/authoring/parts/addfile.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -rb3fe40cd67fc779a6eee8320fadc3a489565a557
--- lams_tool_larsrc/web/pages/authoring/parts/addfile.jsp	(.../addfile.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_larsrc/web/pages/authoring/parts/addfile.jsp	(.../addfile.jsp)	(revision b3fe40cd67fc779a6eee8320fadc3a489565a557)
@@ -5,7 +5,7 @@
 <lams:html>
 	<lams:head>
 		<%@ include file="/common/header.jsp"%>
-		<lams:css style="main"/>
+		<lams:css/>
 
 		<script type="text/javascript">
 		   <%-- user for  rsrcresourceitem.js --%>
@@ -17,51 +17,49 @@
 	</lams:head>
 	<body>
 
-		<!-- Basic Info Form-->
-
-		<%@ include file="/common/messages.jsp"%>
-		<html:form action="/authoring/saveOrUpdateItem" method="post" styleId="resourceItemForm" enctype="multipart/form-data">
-			<input type="hidden" name="instructionList" id="instructionList" />
-			<html:hidden property="sessionMapID" />
-			<input type="hidden" name="itemType" id="itemType" value="2" />
-			<html:hidden property="itemIndex" />
-
-			<h2 class="no-space-left">
+		<div class="panel panel-default add-file">
+			<div class="panel-heading panel-title">
 				<fmt:message key="label.authoring.basic.add.file" />
-			</h2>
-
-			<div class="field-name">
-				<fmt:message key="label.authoring.basic.resource.title.input" />
 			</div>
+			
+			<div class="panel-body">
 
-			<html:text property="title" size="55" tabindex="1" />
+			<%@ include file="/common/messages.jsp"%>
 
-			<div class="field-name space-top">
-				<fmt:message key="label.authoring.basic.resource.file.input" />
-			</div>
-			<c:set var="itemAttachment" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
-			<div id="itemAttachmentArea">
-				<%@ include file="/pages/authoring/parts/itemattachment.jsp"%>
-			</div>
+			<html:form action="/authoring/saveOrUpdateItem" method="post" styleId="resourceItemForm" enctype="multipart/form-data">
+				<input type="hidden" name="instructionList" id="instructionList" />
+				<html:hidden property="sessionMapID" />
+				<input type="hidden" name="itemType" id="itemType" value="2" />
+				<html:hidden property="itemIndex" />
+	
+				<div class="form-group">
+				   	<label for="title"><fmt:message key="label.authoring.basic.resource.title.input" /></label>
+					<html:text property="title" size="55" styleClass="form-control form-control-inline" />
+			  	</div>	
+			  
+
+				<div class="form-group">
+					<label for="file"><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)%>" />
+					<span id="itemAttachmentArea">
+					<%@ include file="/pages/authoring/parts/itemattachment.jsp"%>
+					</span>
+					<i class="fa fa-spinner" style="display:none" id="itemAttachmentArea_Busy"></i>
+				</div>
+	
+			</html:form>
+	
+			<!-- Instructions -->
+			<%@ include file="instructions.jsp"%>
 			
-			<div class="space-top">
-				<html:checkbox property="openUrlNewWindow" styleId="open-file-in-new-window" styleClass="noBorder" />
-				<label for="open-file-in-new-window">
-					<fmt:message key="open.file.in.new.window" />
-				</label>
+			<div class="voffset5">
+				<a href="#" onclick="submitResourceItem()" class="btn btn-default btn-sm">
+					<i class="fa fa-plus"></i>&nbsp;<fmt:message key="label.authoring.basic.add.file" /> </a>
+				<a href="javascript:;" onclick="hideResourceItem()" class="btn btn-default btn-sm">
+					<fmt:message key="label.cancel" /> </a>
 			</div>
-
-		</html:form>
-
-		<!-- Instructions -->
-		<%@ include file="instructions.jsp"%>
-		
-		<lams:ImgButtonWrapper>
-			<a href="#" onclick="submitResourceItem()" class="button-add-item"><fmt:message
-					key="label.authoring.basic.add.file" /> </a>
-			<a href="javascript:;" onclick="cancelResourceItem()" class="button space-left"><fmt:message
-					key="label.cancel" /> </a>
-		</lams:ImgButtonWrapper>
-		<br />
+						
+			</div>
+		</div>
 	</body>
 </lams:html>
Index: lams_tool_larsrc/web/pages/authoring/parts/addlearningobject.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -rb3fe40cd67fc779a6eee8320fadc3a489565a557
--- lams_tool_larsrc/web/pages/authoring/parts/addlearningobject.jsp	(.../addlearningobject.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_larsrc/web/pages/authoring/parts/addlearningobject.jsp	(.../addlearningobject.jsp)	(revision b3fe40cd67fc779a6eee8320fadc3a489565a557)
@@ -5,7 +5,7 @@
 <lams:html>
 	<lams:head>
 		<%@ include file="/common/header.jsp"%>
-		<lams:css style="main" />
+		<lams:css/>
 		<script type="text/javascript">
 		   <%-- user for  rsrcresourceitem.js --%>
 		   var removeInstructionUrl = "<c:url value='/authoring/removeInstruction.do'/>";
@@ -15,48 +15,52 @@
 		<script type="text/javascript" src="<html:rewrite page='/includes/javascript/rsrcresourceitem.js'/>"></script>
 
 	</lams:head>
-	<body class="tabpart">
+	<body>
 
-		<!-- Basic Info Form-->
-		<%@ include file="/common/messages.jsp"%>
-		<html:form action="/authoring/saveOrUpdateItem" method="post" styleId="resourceItemForm" enctype="multipart/form-data">
-			<html:hidden property="sessionMapID" />
-			<input type="hidden" name="instructionList" id="instructionList" />
-			<input type="hidden" name="itemType" id="itemType" value="4" />
-			<html:hidden property="itemIndex" />
-
-			<h2 class="no-space-left">
+		<div class="panel panel-default add-file">
+			<div class="panel-heading panel-title">
 				<fmt:message key="label.authoring.basic.add.learning.object" />
-			</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.zip.file.input" />
-			</div>
+			<div class="panel-body">
 
-			<c:set var="itemAttachment"
-				value="<%=request
-										.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
-			<div id="itemAttachmentArea">
-				<%@ include file="/pages/authoring/parts/itemattachment.jsp"%>
-			</div>
+			<%@ include file="/common/messages.jsp"%>
 
-		</html:form>
+			<html:form action="/authoring/saveOrUpdateItem" method="post" styleId="resourceItemForm" enctype="multipart/form-data">
+				<input type="hidden" name="instructionList" id="instructionList" />
+				<html:hidden property="sessionMapID" />
+				<input type="hidden" name="itemType" id="itemType" value="4" />
+				<html:hidden property="itemIndex" />
+	
+				<div class="form-group">
+				   	<label for="title"><fmt:message key="label.authoring.basic.resource.title.input" /></label>
+					<html:text property="title" size="55" styleClass="form-control form-control-inline" />
+			  	</div>	
+			  
+
+				<div class="form-group">
+					<label for="file"><fmt:message key="label.authoring.basic.resource.zip.file.input" /></label>
+					<c:set var="itemAttachment" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
+					<span id="itemAttachmentArea">
+					<%@ include file="/pages/authoring/parts/itemattachment.jsp"%>
+					</span>
+					<i class="fa fa-spinner" style="display:none" id="itemAttachmentArea_Busy"></i>
+				</div>
+	
+			</html:form>
+
+			<!-- Instructions -->
+			<%@ include file="instructions.jsp"%>
 		
-		<!-- Instructions -->
-		<%@ include file="instructions.jsp"%>
-		
-		<lams:ImgButtonWrapper>
-			<a href="#" onclick="submitResourceItem()" class="button-add-item"><fmt:message
-					key="label.authoring.basic.add.learning.object" /> </a>
-			<a href="javascript:;" onclick="cancelResourceItem()"
-				class="button space-left"><fmt:message key="label.cancel" /> </a>
-		</lams:ImgButtonWrapper>
-		<br />
+			<div class="voffset5">
+				<a href="#" onclick="submitResourceItem()" class="btn btn-default btn-sm">
+					<i class="fa fa-plus"></i>&nbsp;<fmt:message key="label.authoring.basic.add.learning.object" /> </a>
+				<a href="javascript:;" onclick="hideResourceItem()"	class="btn btn-default btn-sm">
+					<fmt:message key="label.cancel" /> </a>
+			</div>
+			
+			</div>
+		</div>
+
 	</body>
 </lams:html>
Index: lams_tool_larsrc/web/pages/authoring/parts/addurl.jsp
===================================================================
diff -u -r48be6456edafa05b5486a6b3fc37f33d926d3c58 -rb3fe40cd67fc779a6eee8320fadc3a489565a557
--- lams_tool_larsrc/web/pages/authoring/parts/addurl.jsp	(.../addurl.jsp)	(revision 48be6456edafa05b5486a6b3fc37f33d926d3c58)
+++ lams_tool_larsrc/web/pages/authoring/parts/addurl.jsp	(.../addurl.jsp)	(revision b3fe40cd67fc779a6eee8320fadc3a489565a557)
@@ -5,7 +5,7 @@
 <lams:html>
 	<lams:head>
 		<%@ include file="/common/header.jsp"%>
-		<lams:css style="main" />
+		<lams:css/>
 		<%-- user for  rsrcresourceitem.js --%>
 		<script type="text/javascript">
 			var removeInstructionUrl = "<c:url value='/authoring/removeInstruction.do'/>";
@@ -15,17 +15,15 @@
 	</lams:head>
 	<body>
 
-		<%@ include file="/common/messages.jsp"%>
-
 		<!-- Basic Info Form-->
 		<div class="panel panel-default add-file">
 			<div class="panel-heading panel-title">
 				<fmt:message key="label.authoring.basic.add.url" />
 			</div>
 			<div class="panel-body">
-			<div class="form-group">
 
-			<form>
+			<%@ include file="/common/messages.jsp"%>
+	
 			<html:form action="/authoring/saveOrUpdateItem" method="post" styleId="resourceItemForm">
 				<html:hidden property="sessionMapID" />
 				<input type="hidden" name="instructionList" id="instructionList" />
@@ -34,34 +32,30 @@
 
 				<div class="form-group">
 			    	<label for="title"><fmt:message key="label.authoring.basic.resource.title.input" /></label>
-					<html:text property="title" size="55" />
+					<html:text property="title" size="55" styleClass="form-control form-control-inline" />
 			  	</div>	
 			  
 
-			<div class="field-name space-top">
-				<fmt:message key="label.authoring.basic.resource.url.input" />
-			</div>
-			<html:text property="url" size="55" />
+				<div class="form-group">
+					<label for="url"><fmt:message key="label.authoring.basic.resource.url.input" /></label>
+					<html:text property="url" size="55" styleClass="form-control form-control-inline"/>
+					&nbsp;<html:checkbox property="openUrlNewWindow" styleId="openUrlNewWindow" styleClass="loffset5"/>
+					&nbsp;<label for="openUrlNewWindow"><fmt:message key="open.in.new.window" /></label>
+				</div>
 
-			<div class="space-top">
-				<html:checkbox property="openUrlNewWindow" styleId="openUrlNewWindow" styleClass="noBorder" />
-				<label for="openUrlNewWindow">
-					<fmt:message key="open.in.new.window" />
-				</label>
-			</div>
+			</html:form>
 
-		</html:form>
+			<!-- Instructions -->
+			<%@ include file="instructions.jsp"%>
 
-		<!-- Instructions -->
-		<%@ include file="instructions.jsp"%>
-		</form>
-
-		<lams:ImgButtonWrapper>
-			<a href="#" onclick="submitResourceItem()" class="button-add-item"><fmt:message
-					key="label.authoring.basic.add.url" /> </a>
-			<a href="javascript:;" onclick="cancelResourceItem()"
-				class="button space-left"><fmt:message key="label.cancel" /> </a>
-		</lams:ImgButtonWrapper>
-		<br />
+			<div class="voffset5">
+				<a href="#" onclick="submitResourceItem()" class="btn btn-default btn-sm">
+					<i class="fa fa-plus"></i>&nbsp;<fmt:message key="label.authoring.basic.add.url" /> </a>
+				<a href="javascript:;" onclick="hideResourceItem()" class="btn btn-default btn-sm">
+					<fmt:message key="label.cancel" /> </a>
+			</div>
+			
+			</div>
+		</div>
 	</body>
 </lams:html>
Index: lams_tool_larsrc/web/pages/authoring/parts/addwebsite.jsp
===================================================================
diff -u -re48fc0e1f6819e257b87efa36c3baec3c1c488f0 -rb3fe40cd67fc779a6eee8320fadc3a489565a557
--- lams_tool_larsrc/web/pages/authoring/parts/addwebsite.jsp	(.../addwebsite.jsp)	(revision e48fc0e1f6819e257b87efa36c3baec3c1c488f0)
+++ lams_tool_larsrc/web/pages/authoring/parts/addwebsite.jsp	(.../addwebsite.jsp)	(revision b3fe40cd67fc779a6eee8320fadc3a489565a557)
@@ -5,7 +5,7 @@
 <lams:html>
 	<lams:head>
 		<%@ include file="/common/header.jsp"%>
-		<lams:css style="main" />
+		<lams:css/>
 		<script type="text/javascript">
 		   <%-- user for  rsrcresourceitem.js --%>
 		   var removeInstructionUrl = "<c:url value='/authoring/removeInstruction.do'/>";
@@ -15,50 +15,50 @@
 		<script type="text/javascript" src="<html:rewrite page='/includes/javascript/rsrcresourceitem.js'/>"></script>
 
 	</lams:head>
-	<body class="tabpart">
+	<body>
 
-		<!-- Basic Info Form-->
-
-		<%@ include file="/common/messages.jsp"%>
-		<html:form action="/authoring/saveOrUpdateItem" method="post"
-			styleId="resourceItemForm" enctype="multipart/form-data">
-			<html:hidden property="sessionMapID" />
-			<input type="hidden" name="instructionList" id="instructionList" />
-			<input type="hidden" name="itemType" id="itemType" value="3" />
-			<html:hidden property="itemIndex" />
-
-			<h2 class="no-space-left">
+		<div class="panel panel-default add-file">
+			<div class="panel-heading panel-title">
 				<fmt:message key="label.authoring.basic.add.website" />
-			</h2>
-
-			<div class="field-name">
-				<fmt:message key="label.authoring.basic.resource.title.input" />
 			</div>
+			
+			<div class="panel-body">
 
-			<html:text property="title" size="55" tabindex="1" />
+			<%@ include file="/common/messages.jsp"%>
+			
+			<html:form action="/authoring/saveOrUpdateItem" method="post"
+				styleId="resourceItemForm" enctype="multipart/form-data">
+				<html:hidden property="sessionMapID" />
+				<input type="hidden" name="instructionList" id="instructionList" />
+				<input type="hidden" name="itemType" id="itemType" value="3" />
+				<html:hidden property="itemIndex" />
+	
+				<div class="form-group">
+				   	<label for="title"><fmt:message key="label.authoring.basic.resource.title.input" /></label>
+					<html:text property="title" size="55" styleClass="form-control form-control-inline" />
+			  	</div>	
+			  
 
-			<div class="field-name space-top">
-				<fmt:message key="label.authoring.basic.resource.zip.file.input" />
-			</div>
-
-			<c:set var="itemAttachment"
-				value="<%=request
-										.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
-			<div id="itemAttachmentArea">
-				<%@ include file="/pages/authoring/parts/itemattachment.jsp"%>
-			</div>
-
-		</html:form>
+				<div class="form-group">
+					<label for="file"><fmt:message key="label.authoring.basic.resource.zip.file.input" /></label>
+					<c:set var="itemAttachment" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
+					<span id="itemAttachmentArea">
+					<%@ include file="/pages/authoring/parts/itemattachment.jsp"%>
+					</span>
+					<i class="fa fa-spinner" style="display:none" id="itemAttachmentArea_Busy"></i>
+				</div>
+	
+			</html:form>
 		
-		<!-- Instructions -->
-		<%@ include file="instructions.jsp"%>
-
-		<lams:ImgButtonWrapper>
-			<a href="#" onclick="submitResourceItem()" class="button-add-item"><fmt:message
-					key="label.authoring.basic.add.website" /> </a>
-			<a href="javascript:;" onclick="cancelResourceItem()" class="button space-left"><fmt:message
-					key="label.cancel" /> </a>
-		</lams:ImgButtonWrapper>
+			<!-- Instructions -->
+			<%@ include file="instructions.jsp"%>
+			
+			<div class="voffset5">
+				<a href="#" onclick="submitResourceItem()" class="btn btn-default btn-sm">
+					<i class="fa fa-plus"></i>&nbsp;<fmt:message key="label.authoring.basic.add.website" /> </a>
+				<a href="javascript:;" onclick="hideResourceItem()" class="btn btn-default btn-sm">
+					<fmt:message key="label.cancel" /> </a>
+			</div>
 		<br />
 
 
Index: lams_tool_larsrc/web/pages/authoring/parts/instructions.jsp
===================================================================
diff -u -re9e2a6b00397afa86d303bfbc6ca3649744a982e -rb3fe40cd67fc779a6eee8320fadc3a489565a557
--- lams_tool_larsrc/web/pages/authoring/parts/instructions.jsp	(.../instructions.jsp)	(revision e9e2a6b00397afa86d303bfbc6ca3649744a982e)
+++ lams_tool_larsrc/web/pages/authoring/parts/instructions.jsp	(.../instructions.jsp)	(revision b3fe40cd67fc779a6eee8320fadc3a489565a557)
@@ -1,83 +1,46 @@
 <%@ include file="/common/taglibs.jsp"%>
-<c:set var="ctxPath" value="${pageContext.request.contextPath}" scope="request" />
 <c:set var="listSize" value="${fn:length(instructionList)}" />
 
 <div id="instructionArea">
+	<script></script> <!--  Do not remove empty scripts. They are stopping the form tags from being stripped by the AddInstruction call. http://forum.jquery.com/topic/is-jquery-stripping-form-tags -->
 	<form id="instructionForm">
-		<input type="hidden" name="instructionCount" id="instructionCount" value="${listSize}">
+		<input type="hidden" name="instructionCount" id="instructionCount" value="${listSize}" class="form-control"/>
 
-		<div class="field-name space-top">
-			<fmt:message key="label.authoring.basic.resource.instructions" />
-		</div>
+		<label><fmt:message key="label.authoring.basic.resource.instructions" /></label>
 
-		<img src="${ctxPath}/includes/images/indicator.gif" style="display:none" id="instructionArea_Busy" />
+		<i class="fa fa-spinner" style="display: none" id="instructionArea_Busy"></i>
 
-		<table>
+		<table class="table table-condensed table-no-border">
 			<c:forEach var="item" items="${instructionList}" varStatus="status">
 				<tr id="instructionItem${status.index}">
 					<td width="10px">
 						${status.index+1}
 					</td>
 					<td>
-						<lams:STRUTS-textarea property="instructionItemDesc${status.index}" 
+						<lams:STRUTS-textarea property="instructionItemDesc${status.index}" styleClass="form-control"
 							styleId="instructionItemDesc${status.index}" rows="3" cols="82" value="${item}" />
 					</td>
 
-					<td style="width: 20px; vertical-align: middle;">
-						<%-- Don't display down icon if last line --%>
-						<c:choose>
-							<c:when test="${0 != status.index}">
-								<img src="<html:rewrite page='/includes/images/uparrow.gif'/>"
-									border="0" title="<fmt:message key="label.up"/>"
-									onclick="upItem('${status.index}')">
-							</c:when>
-							<c:otherwise>
-								<img src="<html:rewrite page='/includes/images/uparrow_disabled.gif'/>"
-									border="0" title="<fmt:message key="label.up"/>">
-							</c:otherwise>
-						</c:choose>
-
-						<c:choose>
-							<c:when test="${listSize != status.count}">
-								<img src="<html:rewrite page='/includes/images/downarrow.gif'/>"
-									border="0" title="<fmt:message key="label.down"/>"
-									onclick="downItem('${status.index}','${listSize}')">
-							</c:when>
-
-							<c:otherwise>
-								<img src="<html:rewrite page='/includes/images/downarrow_disabled.gif'/>"
-									border="0" title="<fmt:message key="label.down"/>">
-							</c:otherwise>
-
-						</c:choose>
-
-						<%-- Don't display down icon if last line --%>
+					<td class="arrows" style="width:5%">
+						<!-- Don't display up icon if first line -->
+						<c:if test="${not status.first}">
+		 					<lams:Arrow state="up" title="<fmt:message key='label.up'/>" onclick="upItem('${status.index}')"/>
+		 				</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.down'/>" onclick="downItem('${status.index}','${listSize}')"/>
+		 				</c:if>
 					</td>
-					<td style="width: 20px; vertical-align: middle;">
-						<img src="<html:rewrite page='/includes/images/cross.gif'/>"
-							border="0" title="<fmt:message key="label.delete"/>"
-							onclick="removeInstruction('${status.index}')">
+					<td  align="center" style="width:5%"><i class="fa fa-times"	title="<fmt:message key="label.delete" />"  
+						onclick="removeInstruction('${status.index}')"></i>
 					</td>
 				</tr>
 			</c:forEach>
 		</table>
 
-		<a href="#nogo" onclick="javascript:addInstruction();" class="button-add-item float-right">
-			<fmt:message key="label.authoring.basic.resource.add.instruction" /> 
+		<a href="#nogo" onclick="javascript:addInstruction();" class="btn btn-default btn-sm">
+			<i class="fa fa-plus"></i>&nbsp;<fmt:message key="label.authoring.basic.resource.add.instruction" /> 
 		</a>
 
 	</form>
 </div>
-<br>
-
-<%-- This script will adjust resource item input area height according to the new instruction item amount. --%>
-<script type="text/javascript">
-	var obj = window.document.getElementById('reourceInputArea');
-	if (!obj && window.parent) {
-		 obj = window.parent.document.getElementById('reourceInputArea');
-	}  
-	if (!obj) {
-		obj = window.top.document.getElementById('reourceInputArea');
-	}
-	obj.style.height=obj.contentWindow.document.body.scrollHeight+'px';
-</script>
\ No newline at end of file
Index: lams_tool_larsrc/web/pages/authoring/parts/itemattachment.jsp
===================================================================
diff -u -r7011368b3f7cc34d52ce8f8640b64a9add794dd6 -rb3fe40cd67fc779a6eee8320fadc3a489565a557
--- lams_tool_larsrc/web/pages/authoring/parts/itemattachment.jsp	(.../itemattachment.jsp)	(revision 7011368b3f7cc34d52ce8f8640b64a9add794dd6)
+++ lams_tool_larsrc/web/pages/authoring/parts/itemattachment.jsp	(.../itemattachment.jsp)	(revision b3fe40cd67fc779a6eee8320fadc3a489565a557)
@@ -1,27 +1,11 @@
 <%@ include file="/common/taglibs.jsp"%>
-<c:set var="ctxPath" value="${pageContext.request.contextPath}"
-	scope="request" />
-<input type="hidden" name="hasFile" value="${itemAttachment.hasFile}" />
 <c:choose>
 	<c:when test="${itemAttachment.hasFile}">
-		<table border="0" style="align:left;width:400px">
-			<tr>
-				<td>
-					<c:out value="${itemAttachment.fileName}" />
-				</td>
-				<td>
-					<a href="#"
-						onclick="removeItemAttachment(${itemAttachment.itemIndex})"
-						class="button"> <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:out value="${itemAttachment.fileName}" /> &nbsp;
+		<a href="#" onclick="removeItemAttachment(${itemAttachment.itemIndex})" class="btn btn-default btn-sm"> <fmt:message key="label.delete" /> </a>
 	</c:when>
 	<c:otherwise>
-		<input type="file" name="file" />
+		<input type="file" name="file" class="form-control form-control-inline" style="display:inline"/>
 	</c:otherwise>
 </c:choose>
+<input type="hidden" name="hasFile" value="${itemAttachment.hasFile}" />
Index: lams_tool_larsrc/web/pages/authoring/parts/itemlist.jsp
===================================================================
diff -u -ra0bce7961a19548c58f5b0025160f124785f9951 -rb3fe40cd67fc779a6eee8320fadc3a489565a557
--- lams_tool_larsrc/web/pages/authoring/parts/itemlist.jsp	(.../itemlist.jsp)	(revision a0bce7961a19548c58f5b0025160f124785f9951)
+++ lams_tool_larsrc/web/pages/authoring/parts/itemlist.jsp	(.../itemlist.jsp)	(revision b3fe40cd67fc779a6eee8320fadc3a489565a557)
@@ -1,19 +1,14 @@
 <%@ include file="/common/taglibs.jsp"%>
-<c:set var="ctxPath" value="${pageContext.request.contextPath}"
-	scope="request" />
 
-<c:set var="tool">
-	<lams:WebAppURL />
-</c:set>
-
 <div id="itemList">
-	<h2 class="spacer-left">
-		<fmt:message key="label.authoring.basic.resource.list.title" />
-		<img src="${ctxPath}/includes/images/indicator.gif"
-			style="display:none" id="resourceListArea_Busy" />
-	</h2>
-	
-	<table class="alternative-color" id="itemTable" cellspacing="0">
+
+<div class="panel panel-default voffset5">
+	<div class="panel-heading panel-title">
+		<fmt:message key="label.authoring.basic.resource.list.title" /> 
+		<i class="fa fa-spinner" style="display: none" id="resourceListArea_Busy"></i>
+	</div>
+
+	<table class="table table-striped table-condensed" id="itemTable">
 		<c:set var="sessionMap" value="${sessionScope[sessionMapID]}" />
 		<c:set var="listSize" value="${fn:length(sessionMap.resourceList)}" />
 		<c:forEach var="resource" items="${sessionMap.resourceList}"
@@ -31,49 +26,6 @@
 							onclick="previewItem(1,${status.index},'${sessionMapID}')"> <fmt:message
 								key="label.authoring.basic.resource.verify.url" /> </a>
 					</td>
-					<td width="10%">
-						<%-- Don't display down icon if last line --%>
-						<c:choose>
-							<c:when test="${0 != status.index}">
-								<img src="<html:rewrite page='/includes/images/uparrow.gif'/>"
-									border="0" title="<fmt:message key="label.up"/>"
-									onclick="switchItem(${status.index}, ${status.index - 1}, '${sessionMapID}')">
-							</c:when>
-							<c:otherwise>
-								<img
-									src="<html:rewrite page='/includes/images/uparrow_disabled.gif'/>"
-									border="0" title="<fmt:message key="label.up"/>">
-							</c:otherwise>
-						</c:choose>
-
-						<c:choose>
-							<c:when test="${listSize != status.count}">
-								<img src="<html:rewrite page='/includes/images/downarrow.gif'/>"
-									border="0" title="<fmt:message key="label.down"/>"
-									onclick="switchItem(${status.index}, ${status.index + 1}, '${sessionMapID}')">
-							</c:when>
-
-							<c:otherwise>
-								<img
-									src="<html:rewrite page='/includes/images/downarrow_disabled.gif'/>"
-									border="0" title="<fmt:message key="label.down"/>">
-							</c:otherwise>
-
-						</c:choose>
-
-						<%-- Don't display down icon if last line --%>
-					</td>
-					<td width="5%">
-						<img src="${tool}includes/images/edit.gif"
-							title="<fmt:message key="label.authoring.basic.resource.edit" />"
-							onclick="editItem(${status.index},'${sessionMapID}')" />
-
-					</td>
-					<td width="5%">
-						<img src="${tool}includes/images/cross.gif"
-							title="<fmt:message key="label.authoring.basic.resource.delete" />"
-							onclick="deleteItem(${status.index},'${sessionMapID}')" />
-					</td>
 				</c:if>
 
 				<c:if test="${resource.type == 2}">
@@ -87,49 +39,6 @@
 							onclick="previewItem(2,${status.index},'${sessionMapID}')"> <fmt:message
 								key="label.authoring.basic.resource.preview" /> </a>
 					</td>
-					<td width="10%">
-						<%-- Don't display down icon if last line --%>
-						<c:choose>
-							<c:when test="${0 != status.index}">
-								<img src="<html:rewrite page='/includes/images/uparrow.gif'/>"
-									border="0" title="<fmt:message key="label.up"/>"
-									onclick="switchItem(${status.index}, ${status.index - 1}, '${sessionMapID}')">
-							</c:when>
-							<c:otherwise>
-								<img
-									src="<html:rewrite page='/includes/images/uparrow_disabled.gif'/>"
-									border="0" title="<fmt:message key="label.up"/>">
-							</c:otherwise>
-						</c:choose>
-
-						<c:choose>
-							<c:when test="${listSize != status.count}">
-								<img src="<html:rewrite page='/includes/images/downarrow.gif'/>"
-									border="0" title="<fmt:message key="label.down"/>"
-									onclick="switchItem(${status.index}, ${status.index + 1}, '${sessionMapID}')">
-							</c:when>
-
-							<c:otherwise>
-								<img
-									src="<html:rewrite page='/includes/images/downarrow_disabled.gif'/>"
-									border="0" title="<fmt:message key="label.down"/>">
-							</c:otherwise>
-
-						</c:choose>
-
-						<%-- Don't display down icon if last line --%>
-					</td>
-					<td>
-						<img src="${tool}includes/images/edit.gif"
-							title="<fmt:message key="label.authoring.basic.resource.edit" />"
-							onclick="editItem(${status.index},'${sessionMapID}')" />
-
-					</td>
-					<td>
-						<img src="${tool}includes/images/cross.gif"
-							title="<fmt:message key="label.authoring.basic.resource.delete" />"
-							onclick="deleteItem(${status.index},'${sessionMapID}')" />
-					</td>
 				</c:if>
 
 				<c:if test="${resource.type == 3}">
@@ -143,48 +52,6 @@
 							onclick="previewItem(3,${status.index},'${sessionMapID}')"> <fmt:message
 								key="label.authoring.basic.resource.preview" /> </a>
 					</td>
-					<td width="10%">
-						<%-- Don't display down icon if last line --%>
-						<c:choose>
-							<c:when test="${0 != status.index}">
-								<img src="<html:rewrite page='/includes/images/uparrow.gif'/>"
-									border="0" title="<fmt:message key="label.up"/>"
-									onclick="switchItem(${status.index}, ${status.index - 1}, '${sessionMapID}')">
-							</c:when>
-							<c:otherwise>
-								<img
-									src="<html:rewrite page='/includes/images/uparrow_disabled.gif'/>"
-									border="0" title="<fmt:message key="label.up"/>">
-							</c:otherwise>
-						</c:choose>
-
-						<c:choose>
-							<c:when test="${listSize != status.count}">
-								<img src="<html:rewrite page='/includes/images/downarrow.gif'/>"
-									border="0" title="<fmt:message key="label.down"/>"
-									onclick="switchItem(${status.index}, ${status.index + 1}, '${sessionMapID}')">
-							</c:when>
-
-							<c:otherwise>
-								<img
-									src="<html:rewrite page='/includes/images/downarrow_disabled.gif'/>"
-									border="0" title="<fmt:message key="label.down"/>">
-							</c:otherwise>
-
-						</c:choose>
-
-						<%-- Don't display down icon if last line --%>
-					</td>
-					<td>
-						<img src="${tool}includes/images/edit.gif"
-							title="<fmt:message key="label.authoring.basic.resource.edit" />"
-							onclick="editItem(${status.index},'${sessionMapID}')" />
-					</td>
-					<td>
-						<img src="${tool}includes/images/cross.gif"
-							title="<fmt:message key="label.authoring.basic.resource.delete" />"
-							onclick="deleteItem(${status.index},'${sessionMapID}')" />
-					</td>
 				</c:if>
 
 				<c:if test="${resource.type == 4}">
@@ -198,69 +65,32 @@
 							onclick="previewItem(4,${status.index},'${sessionMapID}')"> <fmt:message
 								key="label.authoring.basic.resource.preview" /> </a>
 					</td>
-					<td width="10%">
-						<%-- Don't display down icon if last line --%>
-						<c:choose>
-							<c:when test="${0 != status.index}">
-								<img src="<html:rewrite page='/includes/images/uparrow.gif'/>"
-									border="0" title="<fmt:message key="label.up"/>"
-									onclick="switchItem(${status.index}, ${status.index - 1}, '${sessionMapID}')">
-							</c:when>
-							<c:otherwise>
-								<img
-									src="<html:rewrite page='/includes/images/uparrow_disabled.gif'/>"
-									border="0" title="<fmt:message key="label.up"/>">
-							</c:otherwise>
-						</c:choose>
-
-						<c:choose>
-							<c:when test="${listSize != status.count}">
-								<img src="<html:rewrite page='/includes/images/downarrow.gif'/>"
-									border="0" title="<fmt:message key="label.down"/>"
-									onclick="switchItem(${status.index}, ${status.index + 1}, '${sessionMapID}')">
-							</c:when>
-
-							<c:otherwise>
-								<img
-									src="<html:rewrite page='/includes/images/downarrow_disabled.gif'/>"
-									border="0" title="<fmt:message key="label.down"/>">
-							</c:otherwise>
-
-						</c:choose>
-
-						<%-- Don't display down icon if last line --%>
-					</td>
-					<td>
-						<img src="${tool}includes/images/edit.gif"
-							title="<fmt:message key="label.authoring.basic.resource.edit" />"
-							onclick="editItem(${status.index},'${sessionMapID}')" />
-					</td>
-					<td>
-						<img src="${tool}includes/images/cross.gif"
-							title="<fmt:message key="label.authoring.basic.resource.delete" />"
-							onclick="deleteItem(${status.index},'${sessionMapID}')" />
-					</td>
 				</c:if>
+				
+					<td class="arrows" style="width:5%">
+						<!-- Don't display up icon if first line -->
+						<c:if test="${not status.first}">
+		 					<lams:Arrow state="up" title="<fmt:message key='label.up'/>" onclick="switchItem(${status.index}, ${status.index - 1}, '${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.down'/>" onclick="switchItem(${status.index}, ${status.index + 1}, '${sessionMapID}')"/>
+		 				</c:if>
+					</td>
+					<td align="center" style="width:5%"><i class="fa fa-pencil"	title="<fmt:message key="label.edit" />" id="edit${status.index}"
+						onclick="editItem(${status.index},'${sessionMapID}')"></i></td>
+					<td  align="center" style="width:5%"><i class="fa fa-times"	title="<fmt:message key="label.delete" />" id="delete${status.index}" 
+						onclick="deleteItem(${status.index},'${sessionMapID}')"></i></td>
+				
 			</tr>
 		</c:forEach>
 	</table>
 </div>
+</div>
 
-<%-- This script will works when a new resoruce item submit in order to refresh "Resource List" panel. --%>
+<%-- This script will works when a new resource item submit in order to refresh "Resource 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('resourceListArea');
-		obj.innerHTML= document.getElementById("itemList").innerHTML;
-	}
+	hideResourceItem();
+	var obj = document.getElementById('resourceListArea');
+	obj.innerHTML= document.getElementById("itemList").innerHTML;
 </script>