Index: lams_tool_scratchie/conf/language/lams/ApplicationResources.properties
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/conf/language/lams/ApplicationResources.properties,v
diff -u -r1.5.2.2 -r1.5.2.3
--- lams_tool_scratchie/conf/language/lams/ApplicationResources.properties	11 May 2016 07:38:01 -0000	1.5.2.2
+++ lams_tool_scratchie/conf/language/lams/ApplicationResources.properties	1 Jun 2016 04:21:36 -0000	1.5.2.3
@@ -163,7 +163,7 @@
 label.median  =Median
 label.avg.mean  =Ave. Mean
 label.score  =Score:
-label.you.ve.got  =You''''ve got {0}
+label.you.ve.got  =You''ve got {0}
 label.your.answer  =Your answer:
 label.other.groups  =Other groups:
 label.all  =All
Index: lams_tool_scratchie/conf/language/lams/ApplicationResources_el_GR.properties
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/conf/language/lams/ApplicationResources_el_GR.properties,v
diff -u -r1.2.2.1 -r1.2.2.2
--- lams_tool_scratchie/conf/language/lams/ApplicationResources_el_GR.properties	11 May 2016 07:38:01 -0000	1.2.2.1
+++ lams_tool_scratchie/conf/language/lams/ApplicationResources_el_GR.properties	1 Jun 2016 04:21:36 -0000	1.2.2.2
@@ -187,6 +187,7 @@
 admin.preset.marks  =\u0395\u03be\u03b1\u03b3\u03c9\u03b3\u03ae \u0392\u03b1\u03b8\u03bc\u03ce\u03bd \u03bc\u03b5 \u03bc\u03bf\u03c1\u03c6\u03ae \u03b4\u03b9\u03b1\u03c7\u03c9\u03c1\u03b9\u03c3\u03bc\u03ad\u03bd\u03c9\u03bd \u03c4\u03b9\u03bc\u03ce\u03bd \u03bc\u03b5 \u03ba\u03cc\u03bc\u03bc\u03b1\u03c4\u03b1
 error.required.fields.missing  =\u039f\u03b9 \u0392\u03b1\u03b8\u03bc\u03bf\u03af \u03b4\u03b5\u03bd \u03bc\u03c0\u03bf\u03c1\u03b5\u03af \u03bd\u03b1 \u03b5\u03af\u03bd\u03b1\u03b9 \u03ba\u03b5\u03bd\u03bf\u03af. \u03a0\u03b1\u03c1\u03b1\u03ba\u03b1\u03bb\u03ce, \u03c0\u03bb\u03b7\u03ba\u03c4\u03c1\u03bf\u03bb\u03bf\u03b3\u03ae\u03c3\u03c4\u03b5 \u03c4\u03bf\u03c5\u03c2 \u03bc\u03b5 \u03bc\u03bf\u03c1\u03c6\u03ae \u03b4\u03b9\u03b1\u03c7\u03c9\u03c1\u03b9\u03c3\u03bc\u03ad\u03bd\u03c9\u03bd \u03c4\u03b9\u03bc\u03ce\u03bd \u03bc\u03b5 \u03ba\u03cc\u03bc\u03bc\u03b1.
 error.entered.marks.not.comma.separates  =\u0397 \u03b5\u03b9\u03c3\u03b1\u03b3\u03c9\u03b3\u03ae \u03c4\u03c9\u03bd \u03b2\u03b1\u03b8\u03bc\u03ce\u03bd \u03b4\u03b5\u03bd \u03b5\u03af\u03bd\u03b1\u03b9 \u03c3\u03c4\u03b7 \u03c3\u03c9\u03c3\u03c4\u03ae \u03bc\u03bf\u03c1\u03c6\u03ae (\u03c4\u03b9\u03bc\u03ad\u03c2 \u03b4\u03b9\u03b1\u03c7\u03c9\u03c1\u03b9\u03c3\u03bc\u03ad\u03bd\u03b5\u03c2 \u03bc\u03b5 \u03ba\u03cc\u03bc\u03bc\u03b1).
+label.authoring.export.qti  =\u0395\u03be\u03b1\u03b3\u03c9\u03b3\u03ae IMS QTI
 
 
-#======= End labels: Exported 181 labels for el GR =====
+#======= End labels: Exported 182 labels for el GR =====
Index: lams_tool_scratchie/conf/language/lams/ApplicationResources_en_AU.properties
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/conf/language/lams/ApplicationResources_en_AU.properties,v
diff -u -r1.27.2.2 -r1.27.2.3
--- lams_tool_scratchie/conf/language/lams/ApplicationResources_en_AU.properties	11 May 2016 07:38:01 -0000	1.27.2.2
+++ lams_tool_scratchie/conf/language/lams/ApplicationResources_en_AU.properties	1 Jun 2016 04:21:35 -0000	1.27.2.3
@@ -164,7 +164,7 @@
 label.median  =Median
 label.avg.mean  =Ave. Mean
 label.score  =Score:
-label.you.ve.got  =You''''ve got {0}
+label.you.ve.got  =You''ve got {0}
 label.your.answer  =Your answer:
 label.other.groups  =Other groups:
 label.all  =All
@@ -193,5 +193,10 @@
 label.continue.burning.questions  =Continue with burning questions
 label.burning.questions  =Burning questions
 label.burning.question  =Burning question
+label.general.burning.question  =General burning question
 
+label.count  =Count
+label.like  =Like
+label.unlike  =Unlike
+
 #======= End labels: Exported 182 labels for en AU =====
Index: lams_tool_scratchie/conf/language/lams/ApplicationResources_no_NO.properties
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/conf/language/lams/ApplicationResources_no_NO.properties,v
diff -u -r1.2.2.1 -r1.2.2.2
--- lams_tool_scratchie/conf/language/lams/ApplicationResources_no_NO.properties	11 May 2016 07:38:01 -0000	1.2.2.1
+++ lams_tool_scratchie/conf/language/lams/ApplicationResources_no_NO.properties	1 Jun 2016 04:21:35 -0000	1.2.2.2
@@ -187,6 +187,7 @@
 admin.preset.marks  =Karakterer med en desimal.
 error.required.fields.missing  =karakterfeltet skal ike v\u00e6re tomt. Gi en karakter med en desimal.
 error.entered.marks.not.comma.separates  =Karakteren er ikke skrevet i riktig format med en desimal.
+label.authoring.export.qti  =Eksporter IMS QTI
 
 
-#======= End labels: Exported 181 labels for no NO =====
+#======= End labels: Exported 182 labels for no NO =====
Fisheye: Tag 1.1 refers to a dead (removed) revision in file `lams_tool_scratchie/web/WEB-INF/tags/AdvancedAccordian.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag 1.1 refers to a dead (removed) revision in file `lams_tool_scratchie/web/WEB-INF/tags/Arrow.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_tool_scratchie/web/WEB-INF/tags/AuthoringButton.tag
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/web/WEB-INF/tags/AuthoringButton.tag,v
diff -u -r1.5 -r1.5.2.1
--- lams_tool_scratchie/web/WEB-INF/tags/AuthoringButton.tag	23 Jul 2013 17:53:49 -0000	1.5
+++ lams_tool_scratchie/web/WEB-INF/tags/AuthoringButton.tag	1 Jun 2016 04:21:35 -0000	1.5.2.1
@@ -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
Fisheye: Tag 1.1 refers to a dead (removed) revision in file `lams_tool_scratchie/web/WEB-INF/tags/AuthoringRatingCriteria.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_tool_scratchie/web/WEB-INF/tags/CKEditor.tag
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/web/WEB-INF/tags/CKEditor.tag,v
diff -u -r1.3.2.1 -r1.3.2.2
--- lams_tool_scratchie/web/WEB-INF/tags/CKEditor.tag	3 Sep 2014 13:19:55 -0000	1.3.2.1
+++ lams_tool_scratchie/web/WEB-INF/tags/CKEditor.tag	1 Jun 2016 04:21:35 -0000	1.3.2.2
@@ -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",
Fisheye: Tag 1.1 refers to a dead (removed) revision in file `lams_tool_scratchie/web/WEB-INF/tags/Comments.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag 1.1 refers to a dead (removed) revision in file `lams_tool_scratchie/web/WEB-INF/tags/CommentsAuthor.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_tool_scratchie/web/WEB-INF/tags/ImgButtonWrapper.tag
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/web/WEB-INF/tags/ImgButtonWrapper.tag,v
diff -u -r1.1 -r1.1.4.1
--- lams_tool_scratchie/web/WEB-INF/tags/ImgButtonWrapper.tag	19 Jul 2012 19:20:10 -0000	1.1
+++ lams_tool_scratchie/web/WEB-INF/tags/ImgButtonWrapper.tag	1 Jun 2016 04:21:35 -0000	1.1.4.1
@@ -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_scratchie/web/WEB-INF/tags/Page.tag
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/web/WEB-INF/tags/Attic/Page.tag,v
diff -u -r1.1.2.1 -r1.1.2.2
--- lams_tool_scratchie/web/WEB-INF/tags/Page.tag	7 Mar 2016 23:22:53 -0000	1.1.2.1
+++ lams_tool_scratchie/web/WEB-INF/tags/Page.tag	1 Jun 2016 04:21:35 -0000	1.1.2.2
@@ -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>
+
+
+		
+			
Fisheye: Tag 1.1 refers to a dead (removed) revision in file `lams_tool_scratchie/web/WEB-INF/tags/Rating.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag 1.1 refers to a dead (removed) revision in file `lams_tool_scratchie/web/WEB-INF/tags/RestrictedUsageAccordian.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag 1.1 refers to a dead (removed) revision in file `lams_tool_scratchie/web/WEB-INF/tags/TSTable.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_tool_scratchie/web/WEB-INF/tags/Tab.tag
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/web/WEB-INF/tags/Tab.tag,v
diff -u -r1.1 -r1.1.4.1
--- lams_tool_scratchie/web/WEB-INF/tags/Tab.tag	19 Jul 2012 19:20:10 -0000	1.1
+++ lams_tool_scratchie/web/WEB-INF/tags/Tab.tag	1 Jun 2016 04:21:35 -0000	1.1.4.1
@@ -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_scratchie/web/WEB-INF/tags/TabBody.tag
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/web/WEB-INF/tags/TabBody.tag,v
diff -u -r1.1 -r1.1.4.1
--- lams_tool_scratchie/web/WEB-INF/tags/TabBody.tag	19 Jul 2012 19:20:10 -0000	1.1
+++ lams_tool_scratchie/web/WEB-INF/tags/TabBody.tag	1 Jun 2016 04:21:35 -0000	1.1.4.1
@@ -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>
Fisheye: Tag 1.1 refers to a dead (removed) revision in file `lams_tool_scratchie/web/WEB-INF/tags/TabBodyArea.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Fisheye: Tag 1.1 refers to a dead (removed) revision in file `lams_tool_scratchie/web/WEB-INF/tags/TabBodys.tag'.
Fisheye: No comparison available.  Pass `N' to diff?
Index: lams_tool_scratchie/web/WEB-INF/tags/Tabs.tag
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/web/WEB-INF/tags/Tabs.tag,v
diff -u -r1.1 -r1.1.4.1
--- lams_tool_scratchie/web/WEB-INF/tags/Tabs.tag	19 Jul 2012 19:20:11 -0000	1.1
+++ lams_tool_scratchie/web/WEB-INF/tags/Tabs.tag	1 Jun 2016 04:21:35 -0000	1.1.4.1
@@ -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_scratchie/web/WEB-INF/tags/headItems.tag
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/web/WEB-INF/tags/headItems.tag,v
diff -u -r1.1.4.1 -r1.1.4.2
--- lams_tool_scratchie/web/WEB-INF/tags/headItems.tag	10 Feb 2016 10:01:24 -0000	1.1.4.1
+++ lams_tool_scratchie/web/WEB-INF/tags/headItems.tag	1 Jun 2016 04:21:35 -0000	1.1.4.2
@@ -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_scratchie/web/WEB-INF/tlds/lams/lams.tld
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/web/WEB-INF/tlds/lams/lams.tld,v
diff -u -r1.5.2.3 -r1.5.2.4
--- lams_tool_scratchie/web/WEB-INF/tlds/lams/lams.tld	7 Mar 2016 23:22:53 -0000	1.5.2.3
+++ lams_tool_scratchie/web/WEB-INF/tlds/lams/lams.tld	1 Jun 2016 04:21:35 -0000	1.5.2.4
@@ -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,18 +408,34 @@
        <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>
    	<tag-file>
        <name>AuthoringButton</name>
        <path>/WEB-INF/tags/AuthoringButton.tag</path>
-   	</tag-file>   	
+   	</tag-file>   
    	<tag-file>
+       <name>AuthoringRatingCriteria</name>
+       <path>/WEB-INF/tags/AuthoringRatingCriteria.tag</path>
+   	</tag-file>
+   	<tag-file>
+       <name>Rating</name>
+       <path>/WEB-INF/tags/Rating.tag</path>
+   	</tag-file>    		
+   	<tag-file>
        <name>headItems</name>
        <path>/WEB-INF/tags/headItems.tag</path>
    	</tag-file>
@@ -438,8 +454,24 @@
    	<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>
    	</tag-file>
@@ -481,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_scratchie/web/common/tabbedheader.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/web/common/tabbedheader.jsp,v
diff -u -r1.1.4.2 -r1.1.4.3
--- lams_tool_scratchie/web/common/tabbedheader.jsp	4 May 2016 09:26:56 -0000	1.1.4.2
+++ lams_tool_scratchie/web/common/tabbedheader.jsp	1 Jun 2016 04:21:35 -0000	1.1.4.3
@@ -3,13 +3,16 @@
 <c:set var="tool"><lams:WebAppURL/></c:set>
 <c:set var="ctxPath" value="${pageContext.request.contextPath}" scope="request"/>
 
- 	<!-- ********************  CSS ********************** -->
-	<link href="<html:rewrite page='/includes/css/scratchie.css'/>" rel="stylesheet" type="text/css">
-	<lams:css style="main"/>
+	<!-- ********************  CSS ********************** -->
+<link href="<html:rewrite page='/includes/css/scratchie.css'/>" rel="stylesheet" type="text/css">
+<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="${lams}includes/javascript/thickbox.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>
 
- 	<!-- ********************  javascript ********************** -->
-	<script type="text/javascript" src="${lams}includes/javascript/common.js"></script>
-	<script type="text/javascript" src="${lams}includes/javascript/tabcontroller.js"></script>    
 
 	
Index: lams_tool_scratchie/web/pages/admin/config.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/web/pages/admin/config.jsp,v
diff -u -r1.1.2.1 -r1.1.2.2
--- lams_tool_scratchie/web/pages/admin/config.jsp	9 Feb 2016 18:53:07 -0000	1.1.2.1
+++ lams_tool_scratchie/web/pages/admin/config.jsp	1 Jun 2016 04:21:35 -0000	1.1.2.2
@@ -9,16 +9,10 @@
 	</lams:head>
 	
 	<body class="stripes">
-		<div id="content">
 
-			<h1>
-				<fmt:message key="admin.page.title" />
-			</h1>
+		<c:set var="title"><fmt:message key="admin.page.title" /></c:set>
+		<lams:Page type="admin" title="${title}">
 			
-			<a href="<lams:LAMSURL/>/admin/sysadminstart.do"><fmt:message key="admin.return" /></a>
-
-			<p>
-
 			<%@ include file="/common/messages.jsp"%>
 		
 			<c:if test="${savedSuccess}">
@@ -28,35 +22,21 @@
 			</c:if>
 			
 			<html:form action="/admin/saveContent" styleId="scratchieAdminForm" method="post" enctype="multipart/form-data">
-				<table class="alternative-color">
-					<tr>
-						<td width="30%">
-							<fmt:message key="admin.extra.mark" />
-						</td>
-						
-						<td width="70%">
-							<html:checkbox property="enabledExtraPointOption"/>
-						</td>
-					</tr>
-					
-					<tr>
-						<td width="30%">
-							<fmt:message key="admin.preset.marks" />
-						</td>
-						
-						<td width="70%">
-							<html:text property="presetMarks" size="50" maxlength="255">
-						</html:text></td>
-					</tr>					
-				</table>
-				<html:submit><fmt:message key="admin.button.save" /></html:submit>
+				<div class="checkbox">
+					<label for="enabledExtraPointOption">
+					<html:checkbox property="enabledExtraPointOption"/>
+					<fmt:message key="admin.extra.mark" /></label>
+				</div>
+				<div class="form-group">
+					<label for="presetMarks"><fmt:message key="admin.preset.marks" /></label>
+					<html:text property="presetMarks" size="50" maxlength="255" styleClass="form-control form-control-inline">
+					</html:text>
+				</div>
+				<a href="<lams:LAMSURL/>/admin/sysadminstart.do" class="btn btn-default"><fmt:message key="admin.return" /></a>
+				<html:submit styleClass="btn btn-primary  pull-right"><fmt:message key="admin.button.save" /></html:submit>
 			</html:form>
 			
-		</div>
-		<!--closes content-->
-
-		<div id="footer">
-		</div>
-		<!--closes footer-->
+		<div id="footer"></div>
+		</lams:Page>
 	</body>
 </head>
\ No newline at end of file
Index: lams_tool_scratchie/web/pages/authoring/advance.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/web/pages/authoring/advance.jsp,v
diff -u -r1.6.2.1 -r1.6.2.2
--- lams_tool_scratchie/web/pages/authoring/advance.jsp	13 Feb 2015 23:51:29 -0000	1.6.2.1
+++ lams_tool_scratchie/web/pages/authoring/advance.jsp	1 Jun 2016 04:21:36 -0000	1.6.2.2
@@ -6,31 +6,31 @@
 <!-- Advance Tab Content -->
 
 <c:if test="${sessionMap.isEnabledExtraPointOption}">
-	<p>
-		<html:checkbox property="scratchie.extraPoint" styleClass="noBorder" styleId="extraPoint"/>
+	<div class="checkbox">
 		<label for="extraPoint">
-			<fmt:message key="label.authoring.advanced.give.extra.point" />
+		<html:checkbox property="scratchie.extraPoint" styleId="extraPoint"/>
+		<fmt:message key="label.authoring.advanced.give.extra.point" />
 		</label>
-	</p>
+	</div>
 </c:if>
 
-<p>
-	<html:checkbox property="scratchie.burningQuestionsEnabled" styleClass="noBorder" styleId="burningQuestionsEnabled"/>
+<div class="checkbox">
 	<label for="burningQuestionsEnabled">
-		<fmt:message key="label.authoring.advanced.burning.questions" />
+	<html:checkbox property="scratchie.burningQuestionsEnabled" styleId="burningQuestionsEnabled"/>
+	<fmt:message key="label.authoring.advanced.burning.questions" />
 	</label>
-</p>
+</div>
 
-<p>
-	<html:checkbox property="scratchie.reflectOnActivity" styleClass="noBorder" styleId="reflectOn"/>
+<div class="checkbox">
 	<label for="reflectOn">
-		<fmt:message key="label.authoring.advanced.reflectOnActivity" />
+	<html:checkbox property="scratchie.reflectOnActivity" styleId="reflectOn"/>
+	<fmt:message key="label.authoring.advanced.reflectOnActivity" />
 	</label>
-</p>
+</div>
 
-<p>
-	<html:textarea property="scratchie.reflectInstructions" styleId="reflectInstructions" cols="30" rows="3" />
-</p>
+<div class="form-group">
+	<html:textarea property="scratchie.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_scratchie/web/pages/authoring/authoring.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/web/pages/authoring/authoring.jsp,v
diff -u -r1.6.2.1 -r1.6.2.2
--- lams_tool_scratchie/web/pages/authoring/authoring.jsp	9 Feb 2016 18:53:07 -0000	1.6.2.1
+++ lams_tool_scratchie/web/pages/authoring/authoring.jsp	1 Jun 2016 04:21:36 -0000	1.6.2.2
@@ -11,9 +11,6 @@
 	<%@ include file="/common/tabbedheader.jsp"%>
 	<link href="<lams:LAMSURL/>css/thickbox.css" rel="stylesheet" type="text/css" media="screen">
 	
-	<script language="JavaScript" type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
-	<script language="JavaScript" type="text/javascript" src="<lams:LAMSURL/>includes/javascript/thickbox.js"></script>
-	
 	<script>
         function init(){
             var tag = document.getElementById("currentTab");
@@ -34,44 +31,38 @@
  
 </lams:head>
 <body class="stripes" onLoad="init()">
-	<div id="page">
-		<h1>
-			<fmt:message key="label.authoring.heading" />
-		</h1>
+			
+	<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="scratchie.contentId" />
+		<html:hidden property="mode" value="${mode}"/>
+		<html:hidden property="sessionMapID" />
+		<html:hidden property="contentFolderID" />
+		<html:hidden property="currentTab" styleId="currentTab" />
+		<input type="hidden" name="itemList" id="itemList" />
+	
+
+		<c:set var="title"><fmt:message key="activity.title" /></c:set>
+		<lams:Page title="${title}" type="navbar">
 		
-		<div id="header">
-			<lams:Tabs useKey="true" control="true">
+			<lams:Tabs control="true" title="${title}" helpToolSignature="<%= ScratchieConstants.TOOL_SIGNATURE %>" helpModule="authoring">
 				<lams:Tab id="1" key="label.authoring.heading.basic" />
 				<lams:Tab id="2" key="label.authoring.heading.advance" />
 			</lams:Tabs>
-		</div>
+	
+			<lams:TabBodyArea>
+				<%@ include file="/common/messages.jsp"%>
 		
-		<!-- start tabs -->
-		<div id="content">
-			<!-- end tab buttons -->
-			
-			<%@ include file="/common/messages.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) -->
+				</lams:TabBodys>	
 	
-			<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="scratchie.contentId" />
-				<html:hidden property="mode" value="${mode}"/>
-				<html:hidden property="sessionMapID" />
-				<html:hidden property="contentFolderID" />
-				<html:hidden property="currentTab" styleId="currentTab" />
-				<input type="hidden" name="itemList" id="itemList" />
-	
-				<lams:help toolSignature="<%= ScratchieConstants.TOOL_SIGNATURE %>" module="authoring"/>
-	
-				<!-- 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"
@@ -82,13 +73,13 @@
 				<lams:AuthoringButton formID="authoringForm" clearSessionActionUrl="/clearsession.do" toolSignature="<%=ScratchieConstants.TOOL_SIGNATURE%>" 
 					toolContentID="${formBean.scratchie.contentId}" accessMode="${mode}" defineLater="${mode=='teacher'}"
 					customiseSessionID="${formBean.sessionMapID}" contentFolderID="${formBean.contentFolderID}" />
-			</html:form>
-	
-		</div>
+			</lams:TabBodyArea>
 
-	<div id="footer"></div>
+			<div id="footer"></div>
 
-</div>
+		</lams:Page>
+		
+	</html:form>
 
 </body>
 </lams:html>
Index: lams_tool_scratchie/web/pages/authoring/basic.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/web/pages/authoring/basic.jsp,v
diff -u -r1.7 -r1.7.2.1
--- lams_tool_scratchie/web/pages/authoring/basic.jsp	27 Mar 2014 07:46:05 -0000	1.7
+++ lams_tool_scratchie/web/pages/authoring/basic.jsp	1 Jun 2016 04:21:36 -0000	1.7.2.1
@@ -62,8 +62,8 @@
 		    	height = document.documentElement.clientHeight;
 		    	// alert("using clientHeight");
 		    }
-			// alert("doc height "+height);
-		    height -= document.getElementById('TB_iframeContent').offsetTop + 60;
+		 	// alert("doc height "+height);
+		    height -= document.getElementById('TB_iframeContent').offsetTop + 260;
 		    document.getElementById('TB_iframeContent').style.height = height +"px";
 	
 			TB_HEIGHT = height + 28;
@@ -108,45 +108,39 @@
     			+ '&title=' + title;
     }
 </script>
+
 <!-- Basic Tab Content -->
-<table class="space-bottom">
-	<tr>
-		<td>
-			<div class="field-name">
-				<fmt:message key="label.authoring.basic.title"/>
-			</div>
-			<html:text property="scratchie.title" style="width: 99%;"/>
-		</td>
-	</tr>
-	<tr>
-		<td>
-			<div class="field-name">
-				<fmt:message key="label.authoring.basic.instruction"/>
-			</div>
-			<lams:CKEditor id="scratchie.instructions" value="${formBean.scratchie.instructions}" contentFolderID="${formBean.contentFolderID}"/>
-		</td>
-	</tr>
+<div class="form-group">
+    <label for="scratchie.title"><fmt:message key="label.authoring.basic.title"/></label>
+    <html:text property="scratchie.title" styleClass="form-control"></html:text>
+</div>
+<div class="form-group">
+    <label for="scratchie.instructions"><fmt:message key="label.authoring.basic.instruction" /></label>
+    <lams:CKEditor id="scratchie.instructions" value="${formBean.scratchie.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"%>
+</div>
+ --%>
 <!-- Items -->
 <div>
 	<div  id="itemArea">
 		<%@ include file="parts/itemlist.jsp"%>
 	</div>
 	
-	<div  style="margin: 0 40px 80px;">
+	<div>
 		<c:set var="addItemUrl" >
 			<c:url value='/authoring/addItem.do'/>?sessionMapID=${sessionMapID}&KeepThis=true&TB_iframe=true&height=540&width=850&modal=true
 		</c:set>
-		<a href="${addItemUrl}" class="button-add-item right-buttons thickbox">
-			<fmt:message key="label.authoring.basic.add.another.scratchie" /> 
+		<a href="${addItemUrl}" class="btn btn-default btn-sm thickbox">
+			<i class="fa fa-plus"></i>&nbsp;<fmt:message key="label.authoring.basic.add.another.scratchie" /> 
 		</a>
-		<a href="#" onClick="javascript:importQTI()" style="margin-right: 30px">
+		<a href="#" onClick="javascript:importQTI()" class="btn btn-default btn-sm loffset5">
 			<fmt:message key="label.authoring.import.qti" /> 
 		</a>
-		<a href="#" onClick="javascript:exportQTI()">
+		<a href="#" onClick="javascript:exportQTI()" class="btn btn-default btn-sm loffset5">
 			<fmt:message key="label.authoring.export.qti" />
 		</a>
 	</div>
Index: lams_tool_scratchie/web/pages/authoring/parts/additem.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/web/pages/authoring/parts/additem.jsp,v
diff -u -r1.3.4.2 -r1.3.4.3
--- lams_tool_scratchie/web/pages/authoring/parts/additem.jsp	26 Feb 2016 07:17:23 -0000	1.3.4.2
+++ lams_tool_scratchie/web/pages/authoring/parts/additem.jsp	1 Jun 2016 04:21:35 -0000	1.3.4.3
@@ -5,17 +5,11 @@
 <lams:html>
 	<lams:head>
 		<%@ include file="/common/header.jsp"%>
-		<style media="screen,projection" type="text/css">
-			label { width: 10em; float: left; }
+		<link href="<lams:WebAppURL/>css/scratchie.css" rel="stylesheet" type="text/css" media="screen">
+ 		<style media="screen,projection" type="text/css">
 			label.error { float: none; color: red; vertical-align: top; font-weight: bold; font-style: italic;}
-			em { font-weight: bold; padding-right: 1em; vertical-align: top; }
-			#content {width: 91%; margin-bottom: 10px;}
-			table.alternative-color td {padding-left: 0;}
-			input[type=text].shortInputText {width:10%;}
-			input[type=text] {width:98%;}
-			textarea {width:98%;}
 		</style>
-		
+ 		
 		<c:set var="ctxPath" value="${pageContext.request.contextPath}"	scope="request" />
 
 		<script language="JavaScript" type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
@@ -213,12 +207,20 @@
 	</lams:head>
 	
 	<body class="stripes" onload="parent.resizeIframe();">
-		<div id="content" >	
+	
+	<div class="row no-gutter">
+		<div class="col-xs-12">
+			<div class="container" id="content">
+			
+			<div class="panel panel-default panel-learner-page">
+				<div class="panel-heading">
+					<div class="panel-title panel-learner-title">
+						<fmt:message key="label.edit.question" />
+					</div>
+				</div>
+			<div class="panel-body panel-${type}-body">
+	
 			<%@ include file="/common/messages.jsp"%>
-		    <div class="error" style="display:none;">
-		      	<img src="${ctxPath}/includes/images/warning.gif" alt="Warning!" width="24" height="24" style="float:left; margin: -5px 10px 0px 0px; " />
-		      	<span></span>.<br clear="all"/>
-		    </div>			
 			
 			<html:form action="/authoring/saveItem" method="post" styleId="scratchieItemForm">
 				<c:set var="formBean" value="<%=request.getAttribute(org.apache.struts.taglib.html.Constants.BEAN_KEY)%>" />
@@ -227,59 +229,49 @@
 				<html:hidden property="itemIndex" />
 				<html:hidden property="contentFolderID" styleId="contentFolderID"/>
 	
-				<h2 class="no-space-left">
-					<fmt:message key="label.edit.question" />
-				</h2>
-	
-				<div class="field-name space-top">
-					<fmt:message key="label.authoring.basic.question.name" />
-					<img title="Required field" alt="Required field" src="${ctxPath}/includes/images/req.gif" />
+				<div class="form-group">
+					<label for="title"><fmt:message key="label.authoring.basic.question.name" /></label>
+					<html:text property="title" styleClass="form-control"/>
 				</div>
-				<html:text property="title" />
-	
-				<div class="field-name space-top">
-					<fmt:message key="label.authoring.basic.question.text" />
+
+				<div class="form-group">
+					<label for="description"><fmt:message key="label.authoring.basic.question.text" /></label>
+					<lams:CKEditor id="description" value="${formBean.description}" contentFolderID="${formBean.contentFolderID}"></lams:CKEditor>
 				</div>
-				<lams:CKEditor id="description" value="${formBean.description}" contentFolderID="${formBean.contentFolderID}" >
-				</lams:CKEditor>
-				<br><br>
-				
-				<input type="text" name="hasAnswerFilled" id="hasAnswerFilled" class="fake-validation-input">
-				
-				<div class="field-name space-top">
-					<fmt:message key="label.authoring.scratchie.answers" />
-				</div>
+
 				<label for="hasAnswerFilled" class="error" style="display: none;"></label>
-				
-				<input type="text" name="hasFilledCorrectAnswer" id="hasFilledCorrectAnswer" class="fake-validation-input">
+				<input type="text" name="hasAnswerFilled" id="hasAnswerFilled" class="fake-validation-input" >
 				<label for="hasFilledCorrectAnswer" class="error" style="display: none;"></label>
-				
+				<input type="text" name="hasFilledCorrectAnswer" id="hasFilledCorrectAnswer" class="fake-validation-input">
+
+				<div class="form-group"><fmt:message key="label.authoring.scratchie.answers" /></div>
+			
 			</html:form>
 			
 			<!-- Answers -->
 			<form id="answerForm" name="answerForm">
-				<%@ include file="answerlist.jsp"%>
-				<a href="javascript:;" onclick="addAnswer();" class="button-add-item right-buttons" style="margin-right: 40px; margin-top:0px">
-					<fmt:message key="label.authoring.add.blank.answer" /> 
+ 				<%@ include file="answerlist.jsp"%>
+ 				<a href="javascript:;" onclick="addAnswer();" class="btn btn-default btn-sm" style="margin-right: 40px; margin-top:0px">
+					<i class="fa fa-plus"></i>&nbsp;<fmt:message key="label.authoring.add.blank.answer" /> 
 				</a>
 			</form>
-			<br><br>
-			
-			<lams:ImgButtonWrapper>
-				<a href="#" onclick="$('#scratchieItemForm').submit();" onmousedown="self.focus();" class="button-add-item">
-					<fmt:message key="label.authoring.save.button" /> 
-				</a>
-				<a href="#" onclick="self.parent.tb_remove();" onmousedown="self.focus();" class="button space-left">
+			<div class="pull-right">
+				<a href="#" onclick="self.parent.tb_remove();" onmousedown="self.focus();" class="btn btn-default btn-sm">
 					<fmt:message key="label.authoring.cancel.button" /> 
 				</a>
-			</lams:ImgButtonWrapper>
+				<a href="#" onclick="$('#scratchieItemForm').submit();" onmousedown="self.focus();" class="btn btn-primary btn-sm">
+					<fmt:message key="label.authoring.save.button" /> 
+				</a>
+			</div>
+			
+			<div id="footer"></div>
 
+			</div>
+			</div>
+
+			</div>
 		</div>
-		<!--closes content-->
-	
-		<div id="footer">
-		</div>
-		<!--closes footer-->		
-		
+	</div>
+					
 	</body>
 </lams:html>
Index: lams_tool_scratchie/web/pages/authoring/parts/answerlist.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/web/pages/authoring/parts/answerlist.jsp,v
diff -u -r1.3 -r1.3.2.1
--- lams_tool_scratchie/web/pages/authoring/parts/answerlist.jsp	6 May 2014 13:26:33 -0000	1.3
+++ lams_tool_scratchie/web/pages/authoring/parts/answerlist.jsp	1 Jun 2016 04:21:35 -0000	1.3.2.1
@@ -3,67 +3,33 @@
 <div id="answerArea">
 	<input type="hidden" name="answerCount" id="answerCount" value="${fn:length(answerList)}">
 	
-	<table class="alternative-color" cellspacing="0">
+	<table class="table table-condensed table-striped">
 		<c:forEach var="answer" items="${answerList}" varStatus="status">
 			<tr>
-				<td style="padding-top:15px; padding-bottom:15px;">
-					<table>
-						<tr>
-							<td style="padding-left:10px; border-bottom:0px; vertical-align:middle; background:none;">
-								<input type="hidden" name="answerOrderId${status.index}" id="answerOrderId${status.index}" value="${answer.orderId}">
-								<input type="hidden" name="answerUid${status.index}" id="answerUid${status.index}" value="${answer.uid}">
-								<span class="field-name">
-									&#${status.index + 65};)
-								</span>
-							</td>
-						</tr>
-						<tr>		
-							<td style="border-bottom:0px; background:none;">	
-								<lams:CKEditor id="answerDescription${status.index}" value="${answer.description}" contentFolderID="${contentFolderID}" />					
-							</td>									
-						</tr>
-						<tr>
-							<td style="border-bottom:0px; vertical-align:top; background:none;" class="right-buttons">
-								<input type="radio" alt="${status.index}" name="answerCorrect" value="${answer.orderId}" <c:if test="${answer.correct == true}">checked="checked"</c:if> >
-								
-								<span class="field-name">
-									<fmt:message key="label.authoring.basic.item.correct" />
-								</span>
-							</td>
-						</tr>	
-					</table>
-
+				<td class="text-center" style="width:5%">
+					<input type="hidden" name="answerOrderId${status.index}" id="answerOrderId${status.index}" value="${answer.orderId}">
+					<input type="hidden" name="answerUid${status.index}" id="answerUid${status.index}" value="${answer.uid}">
+					<span class="field-name">&#${status.index + 65};)</span>
 				</td>
-					
-				<td width="20px" style="padding-left:10px; vertical-align:middle; text-align: center;">
+				<td style="background:none;">	
+					<lams:CKEditor id="answerDescription${status.index}" value="${answer.description}" contentFolderID="${contentFolderID}" />					
+				</td>									
+				<td class="text-right" style="width:15%">
+					<input type="radio" alt="${status.index}" name="answerCorrect" value="${answer.orderId}" <c:if test="${answer.correct == true}">checked="checked"</c:if> >
+					<span class="field-name"><fmt:message key="label.authoring.basic.item.correct" /></span>
+				</td>
+				<td class="arrows" style="width:5%">
 					<c:if test="${not status.first}">
-						<img src="<html:rewrite page='/includes/images/uparrow.gif'/>"
-							border="0" title="<fmt:message key="label.up"/>"
-							onclick="upAnswer(${status.index})">
-						<c:if test="${status.last}">
-							<img
-								src="<html:rewrite page='/includes/images/downarrow_disabled.gif'/>"
-								border="0" title="<fmt:message key="label.down"/>">
-						</c:if>
+						<lams:Arrow state="up" title="<fmt:message key='label.up'/>" onclick="upAnswer(${status.index})"/>
 					</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.up"/>">
-						</c:if>
-	
-						<img src="<html:rewrite page='/includes/images/downarrow.gif'/>"
-							border="0" title="<fmt:message key="label.down"/>"
-							onclick="downAnswer(${status.index})">
+						<lams:Arrow state="down" title="<fmt:message key='label.down'/>" onclick="downAnswer(${status.index})"/>
 					</c:if>
 				</td>
 	                
-				<td width="20px" style="padding-left:10px; vertical-align:middle; text-align: center;">
-					<img src="<html:rewrite page='/includes/images/cross.gif'/>"
-						title="<fmt:message key="label.authoring.online.delete" />"
-						onclick="removeAnswer(${status.index})" />
+				<td  align="center" style="width:5%">
+					<i class="fa fa-times"	title="<fmt:message key='label.authoring.online.delete' />"
+						onclick="removeAnswer(${status.index})"></i>
 				</td>
 			</tr>
 		</c:forEach>
Index: lams_tool_scratchie/web/pages/authoring/parts/itemlist.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/web/pages/authoring/parts/itemlist.jsp,v
diff -u -r1.3 -r1.3.2.1
--- lams_tool_scratchie/web/pages/authoring/parts/itemlist.jsp	1 Apr 2014 02:28:49 -0000	1.3
+++ lams_tool_scratchie/web/pages/authoring/parts/itemlist.jsp	1 Jun 2016 04:21:35 -0000	1.3.2.1
@@ -4,53 +4,34 @@
 
 	<input type="hidden" name="itemCount" id="itemCount" value="${fn:length(sessionMap.itemList)}">
 	
-	<table class="alternative-color" cellspacing="0">
+	<table class="table table-condensed table-striped">
 		<c:forEach var="item" items="${sessionMap.itemList}" varStatus="status">
 			<tr>
 				<td style="padding-top:15px; padding-bottom:15px;">
 					<c:out value="${item.title}" escapeXml="true"/>			
 				</td>
 					
-				<td width="20px" style="padding-left:10px; vertical-align:middle; text-align: center;">
+				<td class="arrows" style="width:5%">
 					<c:if test="${not status.first}">
-						<img src="<html:rewrite page='/includes/images/uparrow.gif'/>"
-							border="0" title="<fmt:message key="label.authoring.basic.up"/>"
-							onclick="upItem(${status.index})">
-						<c:if test="${status.last}">
-							<img
-								src="<html:rewrite page='/includes/images/downarrow_disabled.gif'/>"
-								border="0" title="<fmt:message key="label.authoring.basic.down"/>">
-						</c:if>
+						<lams:Arrow state="up" title="<fmt:message key='label.authoring.basic.up'/>" onclick="upItem(${status.index})"/>
 					</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.basic.up"/>">
-						</c:if>
-	
-						<img src="<html:rewrite page='/includes/images/downarrow.gif'/>"
-							border="0" title="<fmt:message key="label.authoring.basic.down"/>"
-							onclick="downItem(${status.index})">
+						<lams:Arrow state="down" title="<fmt:message key='label.authoring.basic.down'/>" onclick="downItem(${status.index})"/>
 					</c:if>
 				</td>
 				
-				<td width="20px" style="vertical-align:middle;">
+				<td align="center" style="width:5%">
 					<c:set var="editItemUrl" >
 						<c:url value='/authoring/editItem.do'/>?sessionMapID=${sessionMapID}&itemIndex=${status.index}&KeepThis=true&TB_iframe=true&height=540&width=850&modal=true
 					</c:set>		
-					<a href="${editItemUrl}" class="thickbox" style="margin-left: 20px;"> 
-						<img src="<html:rewrite page='/includes/images/edit.gif'/>" 
-							title="<fmt:message key="label.edit" />" style="border-style: none;"/>
+					<a href="${editItemUrl}" class="thickbox"> 
+						<i class="fa fa-pencil"	title="<fmt:message key='label.edit' />"/></i>
 					</a>				
-                </td>
-	                
-				<td width="20px" style="padding-left:10px; vertical-align:middle; text-align: center;">
-					<img src="<html:rewrite page='/includes/images/cross.gif'/>"
-						title="<fmt:message key="label.authoring.online.delete" />"
-						onclick="removeItem(${status.index})" />
-				</td>
+				
+				<td  align="center" style="width:5%"><i class="fa fa-times"	title="<fmt:message key="label.delete" />" id="delete${status.index}" 
+						onclick="removeItem(${status.index})"></i></td>
+						
 			</tr>
 		</c:forEach>
 	</table>
Index: lams_tool_scratchie/web/pages/learning/results.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/web/pages/learning/results.jsp,v
diff -u -r1.13.2.9 -r1.13.2.10
--- lams_tool_scratchie/web/pages/learning/results.jsp	23 Apr 2016 05:57:45 -0000	1.13.2.9
+++ lams_tool_scratchie/web/pages/learning/results.jsp	1 Jun 2016 04:21:35 -0000	1.13.2.10
@@ -19,7 +19,7 @@
 	<title><fmt:message key="label.learning.title" /></title>
 	<%@ include file="/common/header.jsp"%>
 	
-	<link type="text/css" href="${lams}css/jquery-ui-redmond-theme.css" rel="stylesheet">
+	<link type="text/css" href="${lams}css/jquery-ui-smoothness-theme.css" rel="stylesheet">
 	<link type="text/css" href="${lams}css/jquery.jqGrid.css" rel="stylesheet" />
 	<link rel="stylesheet" href="<lams:LAMSURL />/includes/font-awesome/css/font-awesome.min.css">
 	<style media="screen,projection" type="text/css">
Index: lams_tool_scratchie/web/pages/monitoring/editactivity.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/web/pages/monitoring/editactivity.jsp,v
diff -u -r1.5 -r1.5.2.1
--- lams_tool_scratchie/web/pages/monitoring/editactivity.jsp	6 May 2014 13:26:33 -0000	1.5
+++ lams_tool_scratchie/web/pages/monitoring/editactivity.jsp	1 Jun 2016 04:21:36 -0000	1.5.2.1
@@ -2,7 +2,7 @@
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
 <c:set var="scratchie" value="${sessionMap.scratchie}"/>
 
-<table cellpadding="0">
+<table class="table table-condensed">
 	<tr>
 		<td width="10%" nowrap>
 			<fmt:message key="label.authoring.basic.title" />
@@ -22,16 +22,12 @@
 			<c:out value="${scratchie.instructions}" escapeXml="false" />
 		</td>
 	</tr>
-
-	<tr>
-		<td colspan="2">
-			<c:url  var="authoringUrl" value="/definelater.do">
-				<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">
-				<fmt:message key="label.monitoring.edit.activity.edit" />
-			</html:link>
-		</td>
-	</tr>
 </table>
+
+<c:url  var="authoringUrl" value="/definelater.do">
+	<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="btn btn-default">
+	<fmt:message key="label.monitoring.edit.activity.edit" />
+</html:link>
Index: lams_tool_scratchie/web/pages/monitoring/monitoring.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/web/pages/monitoring/monitoring.jsp,v
diff -u -r1.6.2.1 -r1.6.2.2
--- lams_tool_scratchie/web/pages/monitoring/monitoring.jsp	26 Feb 2016 07:17:23 -0000	1.6.2.1
+++ lams_tool_scratchie/web/pages/monitoring/monitoring.jsp	1 Jun 2016 04:21:36 -0000	1.6.2.2
@@ -8,20 +8,25 @@
 
 <lams:html>
 	<lams:head>
-		 <%@ include file="/common/tabbedheader.jsp" %>
-		<link type="text/css" href="${lams}css/jquery-ui-redmond-theme.css" rel="stylesheet">
-		<link type="text/css" href="${lams}css/thickbox.css" rel="stylesheet"  media="screen">
-		<link type="text/css" href="${lams}css/jquery.jqGrid.css" rel="stylesheet" />
-		<link href="${lams}css/jquery-ui.timepicker.css" rel="stylesheet" type="text/css" >
+	
+	<lams:css/>
+	<link type="text/css" href="${lams}css/jquery-ui-smoothness-theme.css" rel="stylesheet">
+	<link type="text/css" href="${lams}css/thickbox.css" rel="stylesheet"  media="screen">
+	<link type="text/css" href="${lams}css/jquery.jqGrid.css" rel="stylesheet" />
+	<link href="${lams}css/jquery-ui.timepicker.css" rel="stylesheet" type="text/css" >
+		
+	<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/jquery-ui.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.timepicker.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.blockUI.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.jqGrid.locale-en.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/jquery.jqGrid.js"></script>
+	<script type="text/javascript" src="${lams}includes/javascript/thickbox.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="${lams}includes/javascript/jquery.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery-ui.timepicker.js"></script>
-		<script type="text/javascript" src="${lams}includes/javascript/jquery.blockUI.js"></script>
- 		<script type="text/javascript" src="${lams}includes/javascript/jquery.jqGrid.locale-en.js"></script>
- 		<script type="text/javascript" src="${lams}includes/javascript/jquery.jqGrid.js"></script>
- 		<script type="text/javascript" src="${lams}includes/javascript/thickbox.js"></script>
-		 
 	 <script>
 			var initialTabId = "${initialTabId}";
 
@@ -40,26 +45,26 @@
 	    </script>		 
 	</lams:head>
 	<body class="stripes" onLoad="init()">
-	<div id="page">
-		<h1>
-			<fmt:message key="label.monitoring.heading" />
-		</h1>
-	<div id="header">
-		<lams:Tabs>
-			<lams:Tab id="1" key="monitoring.tab.summary" />
+
+	<c:set var="title"><fmt:message key="activity.title" /></c:set>
+	<lams:Page title="${title}" type="navbar">
+	
+		<lams:Tabs title="${title}" control="true" helpToolSignature="<%= ScratchieConstants.TOOL_SIGNATURE %>" helpModule="monitoring">
+ 			<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:Tab id="3" key="monitoring.tab.statistics" />
 		</lams:Tabs>
-	</div>
-	<div id="content">
-			<lams:help toolSignature="<%= ScratchieConstants.TOOL_SIGNATURE %>" module="monitoring"/>
-	
-			<lams:TabBody id="1" titleKey="monitoring.tab.summary" page="summary.jsp" />
+		
+		<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" />
-	</div>
-	<div id="footer"></div>
+ 			<lams:TabBody id="3" titleKey="monitoring.tab.statistics" page="statistic.jsp" />
+		</lams:TabBodys>
+		</lams:TabBodyArea>
+		
+		<div id="footer" />
+	</lams:Page>
 	
-	</div>
 	</body>
 </lams:html>
Index: lams_tool_scratchie/web/pages/monitoring/notebook.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/web/pages/monitoring/notebook.jsp,v
diff -u -r1.1.4.1 -r1.1.4.2
--- lams_tool_scratchie/web/pages/monitoring/notebook.jsp	26 Feb 2016 07:17:23 -0000	1.1.4.1
+++ lams_tool_scratchie/web/pages/monitoring/notebook.jsp	1 Jun 2016 04:21:36 -0000	1.1.4.2
@@ -8,41 +8,27 @@
 	<%@ include file="/common/header.jsp"%>
 </lams:head>
 <body class="stripes">
-		
-			<div id="content">
-				<h1>
-					<fmt:message key="page.title.monitoring.view.reflection"/>
-				</h1>
-				${userDTO.fullName}<BR><BR>
-				<table class="alternative-color" cellspacing="0">
-					<tr>
-						<th class="first">
-							<lams:out value="${userDTO.reflectInstrctions}"/>
-						</th>
-					</tr>
-					<tr>
-						<td>
-							<c:choose>
-								<c:when test="${userDTO.finishReflection}">
-									<lams:out value="${userDTO.reflect}"/>
-								</c:when>
-								<c:otherwise>
-									<fmt:message key="message.no.reflection.available" />
-								</c:otherwise>
-							</c:choose>
-						</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>
-		<div id="footer">
-		</div>
-		<!--closes footer-->
+
+	<c:set var="title"><fmt:message key="page.title.monitoring.view.reflection"/></c:set>
+	<lams:Page type="learner" title="${title}">
+
+		<h4>${userDTO.fullName}</h4>
+
+		<p><lams:out value="${userDTO.reflectInstrctions}"/></p>
+
+		<c:choose>
+			<c:when test="${userDTO.finishReflection}">
+				<p><lams:out value="${userDTO.reflect}"/></p>
+			</c:when>
+			<c:otherwise>
+				<p><fmt:message key="message.no.reflection.available" /></p>
+			</c:otherwise>
+		</c:choose>
+
+		<a href="javascript:window.close();" class="btn btn-default"><fmt:message key="button.close"/></a>
+
+		<div id="footer"></div>
+	</lams:Page>
+
 </body>
 </lams:html>
Index: lams_tool_scratchie/web/pages/monitoring/statistic.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/web/pages/monitoring/statistic.jsp,v
diff -u -r1.5 -r1.5.2.1
--- lams_tool_scratchie/web/pages/monitoring/statistic.jsp	8 Apr 2014 01:06:39 -0000	1.5
+++ lams_tool_scratchie/web/pages/monitoring/statistic.jsp	1 Jun 2016 04:21:36 -0000	1.5.2.1
@@ -5,44 +5,56 @@
 
 
 	<c:if test="${empty summaryList}">
-		<div align="center">
-			<b> <fmt:message key="message.monitoring.summary.no.session" /> </b>
-		</div>
+		<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="summary" items="${summaryList}" varStatus="firstGroup">
 
-	<h2><fmt:message key="monitoring.label.group" /> ${summary.sessionName}</h2> 
+		<c:if test="${sessionMap.isGroupedActivity}">	
+		    <div class="panel panel-default" >
+	        <div class="panel-heading" id="heading${summary.sessionId}">
+				<span class="panel-title">
+					<fmt:message key="monitoring.label.group" /> ${summary.sessionName}
+				</span>
+	        </div>
+		</c:if>
 
-	<table cellspacing="3" style="width: 400px; padding-left: 30px;" class="alternative-color">
+		<table class="table table-striped table-condensed">
 		<tr>
-			<th width="20px;" style="text-align: center; padding-left: 0px;">
+			<th class="text-center" width="20px;">
 				#
 			</th>				
-			<th width="150px;" style="padding-left: 0px;">
+			<th width="150px;">
 				<fmt:message key="label.monitoring.summary.user.name" />
 			</th>
-			<th width="80px;" style="padding-left: 0px; text-align: center;'">
+			<th class="text-center" width="80px;" >
 				<fmt:message key="label.monitoring.summary.mark" />
 			</th>					
 		</tr>	
 	
 		<c:forEach var="user" items="${summary.users}" varStatus="status">
 			<tr>
-				<td>
+				<td class="text-center" >
 					${status.index + 1}
 				</td>				
 				<td>
 					<c:out value="${user.firstName} ${user.lastName}" escapeXml="true"/>
 				</td>
-				<td align="center">
+				<td class="text-center" >
 					<c:choose>
 						<c:when test='${summary.totalAttempts == 0}'>-</c:when> 
 						<c:otherwise>${summary.mark}</c:otherwise>
 					</c:choose>
 				</td>
 			</tr>
 		</c:forEach>
+		</table>
+		
+		<c:if test="${sessionMap.isGroupedActivity}">	
+			</div>
+		</c:if>
+	
 	</c:forEach>
-</table>
 
Index: lams_tool_scratchie/web/pages/monitoring/summary.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/web/pages/monitoring/summary.jsp,v
diff -u -r1.14.2.6 -r1.14.2.7
--- lams_tool_scratchie/web/pages/monitoring/summary.jsp	8 Apr 2016 11:30:59 -0000	1.14.2.6
+++ lams_tool_scratchie/web/pages/monitoring/summary.jsp	1 Jun 2016 04:21:36 -0000	1.14.2.7
@@ -5,20 +5,25 @@
 <c:set var="scratchie" value="${sessionMap.scratchie}"/>
 
 <style media="screen,projection" type="text/css">
-	#user-dropdown-div {padding-left: 30px; margin-top: -5px; margin-bottom: 50px;}
-	.bottom-buttons {margin: 20px 20px 0px; padding-bottom: 20px;}
-	.section-header {padding-left: 20px; margin-bottom: 15px; margin-top: 60px;}
+	 .ui-jqgrid {
+		border-left-style: none !important;
+		border-right-style: none !important;
+		border-bottom-style: none !important;
+	}
+	
+	.ui-jqgrid tr {
+		border-left-style: none !important;
+	}
+	
+	.ui-jqgrid td {
+		border-style: none !important;
+	}
 	.ui-jqgrid tr.jqgrow td {
 	    white-space: normal !important;
 	    height:auto;
 	    vertical-align:text-top;
 	    padding-top:2px;
 	}
-	.burning-question-dto {
-		padding-left: 30px; 
-		padding-bottom: 5px; 
-		width:96%;
-	}
 </style>
 
 <script type="text/javascript">
@@ -55,7 +60,7 @@
 			   		{name:'totalAttempts', index:'totalAttempts', width:100, align:"right", sorttype:"int"},
 			   		{name:'mark', index:'mark', width:100, align:"right", sorttype:"int", editable:true, editoptions: {size:4, maxlength: 4}}		
 			   	],
-			   	caption: "${summary.sessionName}",
+			   	// caption: "${summary.sessionName}",
 				cellurl: '<c:url value="/monitoring/saveUserMark.do"/>',
   				cellEdit: true,
   				afterEditCell: function (rowid,name,val,iRow,iCol){
@@ -110,11 +115,11 @@
 				],
 			   	colModel:[
 			   		{name:'id', index:'id', width:0, sorttype:"int", hidden: true},
-			   		{name:'groupName', index:'groupName', width:200},
-			   		{name:'feedback', index:'feedback', width:530},
-			   		{name:'count', index:'count', width:40}
+			   		{name:'groupName', index:'groupName', width:150},
+			   		{name:'feedback', index:'feedback', width:520},
+			   		{name:'count', index:'count', width:70}
 			   	],
-			   	caption: "${scratchieItem.title}"
+			   	// caption: "${scratchieItem.title}"
 			});
 			
 			<c:forEach var="burningQuestionDto" items="${burningQuestionItemDto.burningQuestionDtos}" varStatus="i">
@@ -145,7 +150,7 @@
 		   		{name:'groupName', index:'groupName', width:200},
 		   		{name:'feedback', index:'feedback', width:570}
 		   	],
-		   	caption: "<fmt:message key='label.learners.feedback' />"
+		   	//caption: "<fmt:message key='label.learners.feedback' />"
 		});
 	    <c:forEach var="reflectDTO" items="${sessionMap.reflections}" varStatus="i">
 	    	jQuery("#reflections").addRowData(${i.index + 1}, {
@@ -166,6 +171,7 @@
 		    	});
 		    }
 		});
+		setTimeout(function(){ window.dispatchEvent(new Event('resize')); }, 300);
 
 		$("#item-uid").change(function() {
 			var itemUid = $(this).val();
@@ -240,121 +246,128 @@
 
 </script>
 <script type="text/javascript" src="<lams:LAMSURL/>/includes/javascript/monitorToolSummaryAdvanced.js" ></script>
-<h1><c:out value="${scratchie.title}" escapeXml="true"/></h1>
 
-<div class"instructions space-top space-bottom">
-	<c:out value="${scratchie.instructions }" escapeXml="false" />
-</div>
+	<html:link href="javascript:exportExcel();" styleClass="btn btn-default pull-right">
+		<fmt:message key="label.export.excel" />
+	</html:link>
 
-<c:choose>
-	<c:when test="${empty summaryList}">
-		<div align="center">
-			<b> <fmt:message key="message.monitoring.summary.no.session" /> </b>
-		</div>	
-	</c:when>
-	
-	<c:otherwise>
-	
-		<div style="padding-left: 20px; margin-bottom: 10px; margin-top: 15px;">
-			<H1><fmt:message key="label.monitoring.summary.summary" /></H1>
-		</div>	
-	
-		<div style="padding-left: 30px; font-size: small; margin-bottom: 20px; font-style: italic;">
-			<fmt:message key="label.monitoring.summary.select.student" />
+	<div class="panel">
+		<h4>
+		    <c:out value="${scratchie.title}" escapeXml="true"/>
+		</h4>
+		<div class="instructions voffset5">
+		    <c:out value="${scratchie.instructions}" escapeXml="false"/>
 		</div>
-	
-		<c:forEach var="summary" items="${summaryList}" varStatus="status">
-			<div style="width:96%; padding-left: 30px; <c:if test='${! status.last}'>padding-bottom: 30px;</c:if><c:if test='${ status.last}'>padding-bottom: 15px;</c:if> ">
-				<c:if test="${sessionMap.isGroupedActivity}">
-					<div style="padding-bottom: 5px; font-size: small;">
-						<B><fmt:message key="monitoring.label.group" /></B> ${summary.sessionName}
-					</div>
-				</c:if>
-				
-				<table id="list${summary.sessionId}" class="scroll" cellpadding="0" cellspacing="0"></table>
-			</div>
-		</c:forEach>
 		
+		<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>
+
+	<div class="form-group">
 		<!-- Dropdown menu for choosing scratchie item -->
-		
-		<div style="padding-left: 20px; margin-bottom: 15px; margin-top: 30px;">
-			<H1><fmt:message key="label.monitoring.summary.report.by.scratchie" /></H1>
-		</div>
-		
-		<div style="padding-left: 30px; margin-top: -5px; margin-bottom: 25px;">
-			<select id="item-uid" style="float: left">
-				<option selected="selected" value="-1"><fmt:message key="label.monitoring.summary.choose" /></option>
-    			<c:forEach var="item" items="${scratchie.scratchieItems}">
-					<option value="${item.uid}"><c:out value="${item.title}" escapeXml="true"/></option>
-			   	</c:forEach>
-			</select>
-			
-			<a href="#nogo" class="thickbox" id="item-summary-href" style="display: none;"></a>
-		</div>
-		
+		<label for="item-uid"><h4><fmt:message key="label.monitoring.summary.report.by.scratchie" /></h4></label>
+		<select id="item-uid" class="form-control">
+			<option selected="selected" value="-1"><fmt:message key="label.monitoring.summary.choose" /></option>
+   			<c:forEach var="item" items="${scratchie.scratchieItems}">
+				<option value="${item.uid}"><c:out value="${item.title}" escapeXml="true"/></option>
+		   	</c:forEach>
+		</select>
+		<a href="#nogo" class="thickbox" id="item-summary-href" style="display: none;"></a>
+	</div>
+	<div class="form-group">
 		<!-- Dropdown menu for choosing user -->
+		<label for="userid-dropdown"><h4><fmt:message key="label.monitoring.summary.report.by.user" /></h4></label>
+		<select id="userid-dropdown" class="form-control">
+			<option selected="selected" value="-1"><fmt:message key="label.monitoring.summary.choose" /></option>
+   			<c:forEach var="learner" items="${sessionMap.learners}">
+				<option value="${learner.userId}" alt="${learner.session.sessionId}"><c:out value="${learner.firstName} ${learner.lastName} (${learner.session.sessionName})" escapeXml="true"/></option>
+		   	</c:forEach>
+		</select>
+	</div>
+
+	<c:set var="summaryTitle"><fmt:message key="label.monitoring.summary.summary" /></c:set>
+	<c:if test="${sessionMap.isGroupedActivity}">
+		<H4>${summaryTitle}</H4>
+	</c:if>
+	
+	<fmt:message key="label.monitoring.summary.select.student" />
+
+	<c:forEach var="summary" items="${summaryList}" varStatus="status">
+
+		<c:if test="${sessionMap.isGroupedActivity}">
+			<c:set var="summaryTitle"><fmt:message key="monitoring.label.group" /></B> ${summary.sessionName}</c:set>
+		</c:if>
 		
-		<div class="section-header">
-			<H1><fmt:message key="label.monitoring.summary.report.by.user" /></H1>
-		</div>
+	    <div class="panel panel-default" >
+        <div class="panel-heading" id="heading${summary.sessionId}">
+        	<span class="panel-title collapsable-icon-left">
+        	<a role="button" data-toggle="collapse" href="#collapse${summary.sessionId}" 
+					aria-expanded="false" aria-controls="collapse${summary.sessionId}" >
+				${summaryTitle}</a>
+			</span>
+        </div>
+        
+        <div id="collapse${summary.sessionId}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading${summary.sessionId}">
+
+		<table id="list${summary.sessionId}" class="scroll" cellpadding="0" cellspacing="0"></table>
 		
-		<div id="user-dropdown-div">
+		</div> <!-- end collapse area  -->
+		</div> <!-- end collapse panel  -->
+	
+	</c:forEach>
 
-			<select id="userid-dropdown" class="float-left">
-				<option selected="selected" value="-1"><fmt:message key="label.monitoring.summary.choose" /></option>
-    			<c:forEach var="learner" items="${sessionMap.learners}">
-					<option value="${learner.userId}" alt="${learner.session.sessionId}"><c:out value="${learner.firstName} ${learner.lastName} (${learner.session.sessionName})" escapeXml="true"/></option>
-			   	</c:forEach>
-			</select>
-		</div>
+	<!-- Display burningQuestionItemDtos -->
+	<c:if test="${scratchie.burningQuestionsEnabled}">
+		<div class="panel-group" id="accordionBurning" role="tablist" aria-multiselectable="true"> 
+		    <div class="panel panel-default" >
+		        <div class="panel-heading collapsable-icon-left" id="headingBurning">
+		        	<span class="panel-title">
+			    	<a role="button" data-toggle="collapse" href="#collapseBurning" aria-expanded="false" aria-controls="collapseBurning" >
+		          	<fmt:message key="label.burning.questions" />
+		        	</a>
+		      		</span>
+		        </div>
 		
-		<!-- Display burningQuestionItemDtos -->
-		<c:if test="${scratchie.burningQuestionsEnabled}">
-		
-			<div class="section-header">
-				<H1>
-					<fmt:message key="label.burning.questions" />
-				</H1>
-			</div>
-			
-			<c:forEach var="burningQuestionItemDto" items="${sessionMap.burningQuestionItemDtos}" varStatus="i">
-				<div class="burning-question-dto">
-					<table id="burningQuestions${burningQuestionItemDto.scratchieItem.uid}" class="scroll" cellpadding="0" cellspacing="0"></table>
+		        <div id="collapseBurning" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingBurning">
+					<c:forEach var="burningQuestionItemDto" items="${sessionMap.burningQuestionItemDtos}" varStatus="i">
+						<div class="voffset5"><strong>${burningQuestionItemDto.scratchieItem.title}</strong></div>
+						<table id="burningQuestions${burningQuestionItemDto.scratchieItem.uid}" class="scroll" cellpadding="0" cellspacing="0"></table>
+					</c:forEach>
 				</div>
-			</c:forEach>
-		</c:if>
-		
-		<!-- Display reflection entries -->
-		<c:if test="${sessionMap.reflectOn}">
-		
-			<div class="section-header" style="margin-top: 30px;">
-				<H1>
-					<fmt:message key="label.learners.feedback" />
-					
-					<select id="reflection-group-selector" class="space-left">
+			</div>
+		</div>
+	</c:if>
+	
+	<!-- Display reflection entries -->
+	<c:if test="${sessionMap.reflectOn}">
+
+		<div class="panel-group" id="accordionReflections" role="tablist" aria-multiselectable="true"> 
+		    <div class="panel panel-default" >
+		        <div class="panel-heading collapsable-icon-left" id="headingReflections">
+		        	<span class="panel-title">
+			    	<a role="button" data-toggle="collapse" href="#collapseReflections" aria-expanded="false" aria-controls="collapseReflections" >
+		          	<fmt:message key="label.learners.feedback" />
+		        	</a>
+		        	<select id="reflection-group-selector" class="input-sm pull-right">
 						<option selected="selected" value=""><fmt:message key="label.all" /></option>
 		    			<c:forEach var="reflectDTO" items="${sessionMap.reflections}">
 							<option value="${reflectDTO.groupName}">${reflectDTO.groupName}</option>
 					   	</c:forEach>
 					</select>
-				</H1>
-			</div>
-			
-			<div style="padding-left: 30px; width:96%;">
-				<table id="reflections" class="scroll" cellpadding="0" cellspacing="0"></table>
-			</div>
-		</c:if>
+		      		</span>
+		        </div>
 		
-		<div class="bottom-buttons">
-			<html:link href="javascript:exportExcel();" styleClass="button float-right space-left">
-				<fmt:message key="label.export.excel" />
-			</html:link>
+		        <div id="collapseReflections" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingReflections">
+					<table id="reflections" class="scroll" cellpadding="0" cellspacing="0"></table>
+				</div>
+			</div>
 		</div>
+	</c:if>
 	
-	</c:otherwise>
-</c:choose>
-
-
 <%@ include file="parts/advanceOptions.jsp"%>
 
 <%@ include file="parts/dateRestriction.jsp"%>
Index: lams_tool_scratchie/web/pages/monitoring/parts/advanceOptions.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/web/pages/monitoring/parts/advanceOptions.jsp,v
diff -u -r1.5.2.1 -r1.5.2.2
--- lams_tool_scratchie/web/pages/monitoring/parts/advanceOptions.jsp	13 Feb 2015 23:51:29 -0000	1.5.2.1
+++ lams_tool_scratchie/web/pages/monitoring/parts/advanceOptions.jsp	1 Jun 2016 04:21:36 -0000	1.5.2.2
@@ -1,17 +1,9 @@
 <script type="text/javascript" src="<lams:LAMSURL/>/includes/javascript/monitorToolSummaryAdvanced.js" ></script>
 
-<h1>
-	<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" 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.advanced.give.extra.point" />
@@ -76,4 +68,4 @@
 		</c:when>
 	</c:choose>
 </table>
-</div>
\ No newline at end of file
+</lams:AdvancedAccordian>
\ No newline at end of file
Index: lams_tool_scratchie/web/pages/monitoring/parts/dateRestriction.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/web/pages/monitoring/parts/dateRestriction.jsp,v
diff -u -r1.1 -r1.1.2.1
--- lams_tool_scratchie/web/pages/monitoring/parts/dateRestriction.jsp	8 Oct 2013 11:46:09 -0000	1.1
+++ lams_tool_scratchie/web/pages/monitoring/parts/dateRestriction.jsp	1 Jun 2016 04:21:36 -0000	1.1.2.1
@@ -1,43 +1,29 @@
 <%@include file="/common/taglibs.jsp"%>
 
-<h1>
-	<img src="<lams:LAMSURL/>/images/tree_closed.gif" id="restrictUsageTreeIcon" onclick="javascript:toggleAdvancedOptionsVisibility(document.getElementById('restrictUsageDiv'), document.getElementById('restrictUsageTreeIcon'), '<lams:LAMSURL/>');" />
+<c:set var="ddTitle"><fmt:message key="monitor.summary.date.restriction" /></c:set>
+<lams:RestrictedUsageAccordian title="${ddTitle}">
 
-	<a href="javascript:toggleAdvancedOptionsVisibility(document.getElementById('restrictUsageDiv'), document.getElementById('restrictUsageTreeIcon'),'<lams:LAMSURL/>');" >
-		<fmt:message key="monitor.summary.date.restriction" />
-	</a>
-</h1>
-<br />
-
-<div class="monitoring-advanced" id="restrictUsageDiv" style="display:none; ">
-
-	<div>
-		<fmt:message key="monitor.summary.when.date.restriction.is.set" />
-	</div>
+	<p><fmt:message key="monitor.summary.when.date.restriction.is.set" /></p>
 		
 	<div id="datetimeDiv" <c:if test='${not empty submissionDeadline}'> style="display: none;" </c:if>>
-		<span>
-			<fmt:message key="monitor.summary.after.date" />
-		</span>
-		
-		<input type="text" name="datetime" id="datetime" value=""/>
-				
-		<html:link	href="javascript:setSubmissionDeadline();" styleClass="button">
+		<div class="form-group">
+		<label for="datetime"><fmt:message key="monitor.summary.after.date" />&nbsp;
+		<input type="text" name="datetime" id="datetime" value="" class="form-control form-control-inline"/>
+		</label>							
+		<html:link	href="javascript:setSubmissionDeadline();" styleClass="btn btn-default">
 			<fmt:message key="monitor.summary.set.restriction" />
 		</html:link>
+		</div>
 	</div>
 
 	<div id="dateInfoDiv" <c:if test='${empty submissionDeadline}'> style="display: none;" </c:if>>
-		<span>
-			<fmt:message key="monitor.summary.after.date" />
-		</span>
-		
+		<label><fmt:message key="monitor.summary.after.date" /></span>
 		<span id="dateInfo">
 		</span>
-				
-		<html:link	href="javascript:removeSubmissionDeadline();" styleClass="button">
+		</label>
+		<html:link	href="javascript:removeSubmissionDeadline();" styleClass="btn btn-default">
 			<fmt:message key="monitor.summary.unset.restriction" />
 		</html:link>
 	</div>
 
-</div>
\ No newline at end of file
+</lams:RestrictedUsageAccordian>
Index: lams_tool_scratchie/web/pages/monitoring/parts/itemSummary.jsp
===================================================================
RCS file: /usr/local/cvsroot/lams_tool_scratchie/web/pages/monitoring/parts/itemSummary.jsp,v
diff -u -r1.5.2.2 -r1.5.2.3
--- lams_tool_scratchie/web/pages/monitoring/parts/itemSummary.jsp	26 Feb 2016 07:17:24 -0000	1.5.2.2
+++ lams_tool_scratchie/web/pages/monitoring/parts/itemSummary.jsp	1 Jun 2016 04:21:36 -0000	1.5.2.3
@@ -6,12 +6,26 @@
 <c:set var="lams"><lams:LAMSURL /></c:set>
 <c:set var="sessionMap" value="${sessionScope[sessionMapID]}"/>
 <c:set var="scratchie" value="${sessionMap.scratchie}"/>
-
+<style media="screen,projection" type="text/css">
+	 .ui-jqgrid {
+		border-left-style: none !important;
+		border-right-style: none !important;
+		border-bottom-style: none !important;
+	}
+	
+	.ui-jqgrid tr {
+		border-left-style: none !important;
+	}
+	
+	.ui-jqgrid td {
+		border-style: none !important;
+	}
+</style>
 <lams:html>
 	<lams:head>
 		<%@ include file="/common/header.jsp"%>
 		
-		<link type="text/css" href="${lams}css/jquery-ui-redmond-theme.css" rel="stylesheet">
+		<link type="text/css" href="${lams}css/jquery-ui-smoothness-theme.css" rel="stylesheet">
 		<link type="text/css" href="${lams}css/jquery.jqGrid.css" rel="stylesheet" />
 		
 		<script type="text/javascript" src="${lams}includes/javascript/jquery.js"></script>
@@ -26,7 +40,7 @@
 	  					datatype: "local",
 	  					rowNum: 10000,
 	  					height: 'auto',
-	  					width: 500,
+	  					width: 629,
 	  					shrinkToFit: true,
 	  					
 	  				   	colNames:["<fmt:message key="label.monitoring.summary.answer" />"
@@ -43,7 +57,7 @@
 	  				   	],
 	  				   	
 	  				   	multiselect: false,
-	  				   	caption: "<fmt:message key="label.monitoring.item.summary.group" /> ${summary.sessionName}"
+	  				   	//caption: "<fmt:message key="label.monitoring.item.summary.group" /> ${summary.sessionName}"
 	  				});
 	  				
 	  	   	        <c:forEach var="answer" items="${summary.answers}" varStatus="i">
@@ -68,39 +82,38 @@
 	</lams:head>
 	
 	<body class="stripes" onload="parent.resizeIframe();">
-		<div id="content" >
-		
-			<h1>
-				<fmt:message key="label.monitoring.summary.report.for" >
+	
+		<c:set var="title"><fmt:message key="label.monitoring.summary.report.for" >
 					<fmt:param>${fn:escapeXml(item.title)}</fmt:param>
 				</fmt:message>
-			</h1>
+		</c:set>
+
+		<lams:Page type="learning" title="${title}">
+		
 			<h3>
 				<c:out value="${item.description}" escapeXml="false"/>
 			</h3>	
 			<%@ include file="/common/messages.jsp"%>
-			<br/>
-			<br/>
 			
 			<c:forEach var="summary" items="${summaryList}" varStatus="status">
-				<div style="padding-left: 0px; padding-bottom: 30px;">
-					<table id="session${summary.sessionId}" class="scroll" cellpadding="0" cellspacing="0" ></table>
-				</div>	
+
+				<div class="panel panel-default" >
+	        	<div class="panel-heading">
+				<span class="panel-title">
+					<fmt:message key="label.monitoring.item.summary.group" />&nbsp;${summary.sessionName}
+				</span>
+				</div>
+				<table id="session${summary.sessionId}" class="scroll" cellpadding="0" cellspacing="0" ></table>
+				</div>
 			</c:forEach>	
 
-
-			<lams:ImgButtonWrapper>
-				<a href="#" onclick="refreshSummaryPage();" class="button space-left" style="float:right; margin-right:40px; padding-top:5px;">
-					<fmt:message key="button.close" /> 
-				</a>
-			</lams:ImgButtonWrapper>
-
-		</div>
-		<!--closes content-->
+			<a href="#" onclick="refreshSummaryPage();" class="btn btn-default">
+				<fmt:message key="button.close" /> 
+			</a>
 	
-		<div id="footer">
-		</div>
-		<!--closes footer-->		
-		
+		<div id="footer"></div>
+
+		</lams:Page>
+				
 	</body>
 </lams:html>