Index: lams_central/conf/scss/_lams_variables.scss
===================================================================
diff -u -rb1983f8db0e20486771940d9412fdfadd9e4c684 -rd333f87f1b5deb8fff4c4ee1325ed4d4d36b03cf
--- lams_central/conf/scss/_lams_variables.scss	(.../_lams_variables.scss)	(revision b1983f8db0e20486771940d9412fdfadd9e4c684)
+++ lams_central/conf/scss/_lams_variables.scss	(.../_lams_variables.scss)	(revision d333f87f1b5deb8fff4c4ee1325ed4d4d36b03cf)
@@ -1,9 +1,6 @@
 // Import this file into all LAMS scss files to get the consistent definitions
 // Based on $brand-primary:              $blue-a400 !default;
 @import "material-kit/variables-blue.scss";
-@import "material-kit/bootstrap/scss/mixins/float.scss";
-@import "material-kit/bootstrap/scss/mixins/breakpoints.scss";
-@import "material-kit/bootstrap/scss/mixins/buttons.scss";
 @import "mixins.scss";
 
 // LAMS SASS Global Variables
Index: lams_central/conf/scss/_lams_variables_purple.scss
===================================================================
diff -u -rb1983f8db0e20486771940d9412fdfadd9e4c684 -rd333f87f1b5deb8fff4c4ee1325ed4d4d36b03cf
--- lams_central/conf/scss/_lams_variables_purple.scss	(.../_lams_variables_purple.scss)	(revision b1983f8db0e20486771940d9412fdfadd9e4c684)
+++ lams_central/conf/scss/_lams_variables_purple.scss	(.../_lams_variables_purple.scss)	(revision d333f87f1b5deb8fff4c4ee1325ed4d4d36b03cf)
@@ -2,9 +2,6 @@
 // Default for material kit is brand to be purple so leave it as the as is colours.
 //@import "_material-kit.scss";
 @import "material-kit/variables.scss";
-@import "material-kit/bootstrap/scss/mixins/float.scss";
-@import "material-kit/bootstrap/scss/mixins/breakpoints.scss";
-@import "material-kit/bootstrap/scss/mixins/buttons.scss";
 @import "mixins.scss";
 
 // dialog related
Index: lams_central/conf/scss/_mixins.scss
===================================================================
diff -u -r32670937f259e2c8a712e1dd2cd6bb5731f466c9 -rd333f87f1b5deb8fff4c4ee1325ed4d4d36b03cf
--- lams_central/conf/scss/_mixins.scss	(.../_mixins.scss)	(revision 32670937f259e2c8a712e1dd2cd6bb5731f466c9)
+++ lams_central/conf/scss/_mixins.scss	(.../_mixins.scss)	(revision d333f87f1b5deb8fff4c4ee1325ed4d4d36b03cf)
@@ -1,77 +1,9 @@
-// Button variants
-//
-// Easily pump out default styles, as well as :hover, :focus, :active,
-// and disabled options for all buttons
-// 
-// @mixin button-variant($color, $background, $border) {
-//   color: $color;
-//   background-color: $background;
-//   border-color: $border;
-// 
-//   &:focus,
-//   &.focus {
-//     color: $color;
-//     background-color: darken($background, 10%);
-//         border-color: darken($border, 25%);
-//         outline:0;
-//   }
-//   &:hover {
-//     color: $color;
-//     background-color: darken($background, 10%);
-//         border-color: darken($border, 12%);
-//   }
-//   &:active,
-//   &.active,
-//   .open > &.dropdown-toggle {
-//     color: $color;
-//     background-color: darken($background, 10%);
-//         border-color: darken($border, 12%);
-// 
-//     &:hover,
-//     &:focus,
-//     &.focus {
-//       color: $color;
-//       background-color: darken($background, 17%);
-//           border-color: darken($border, 25%);
-//           outline:0;
-//     }
-//   }
-//   &:active,
-//   &.active,
-//   .open > &.dropdown-toggle {
-//     background-image: none;
-//   }
-//   &.disabled,
-//   &[disabled],
-//   fieldset[disabled] & {
-//     &:hover,
-//     &:focus,
-//     &.focus {
-//       background-color: $background;
-//           border-color: $border;
-//     }
-//   }
-// 
-//   .badge {
-//     color: $background;
-//     background-color: $color;
-//   }
-// }
-// 
-// // Button sizes
-// @mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
-//   padding: $padding-vertical $padding-horizontal;
-//   font-size: $font-size;
-//   line-height: $line-height;
-//   border-radius: $border-radius;
-// }
-// 
-// // Drop shadows
-// @mixin box-shadow($shadow) {
-//   -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
-//           box-shadow: $shadow;
-// }
-@mixin form-control-focus() {
+@import "material-kit/bootstrap/scss/mixins/float.scss";
+@import "material-kit/bootstrap/scss/mixins/breakpoints.scss";
+@import "material-kit/bootstrap/scss/mixins/buttons.scss";
+@import "material-kit/bootstrap/scss/mixins/_box-shadow.scss";
+
+	@mixin form-control-focus() {
   &:focus {
     color: $input-focus-color;
     background-color: $input-focus-bg;
@@ -85,48 +17,6 @@
     }
   }
 }
-// 
-// // Alerts
-// @mixin alert-variant($background, $border, $text-color) {
-//   background-color: $background;
-//   border-color: $border;
-//   color: $text-color;
-// 
-//   hr {
-//     border-top-color: darken($border, 5%);
-//   }
-//   .alert-link {
-//     color: darken($text-color, 10%);
-//   }
-// }
-// 
-// // Contextual backgrounds
-// 
-// // [converter] $parent hack
-// @mixin bg-variant($parent, $color) {
-//   #{$parent} {
-//     background-color: $color;
-//   }
-//   a#{$parent}:hover,
-//   a#{$parent}:focus {
-//     background-color: darken($color, 10%);
-//   }
-// }
-// 
-// // Typography
-// 
-// // [converter] $parent hack
-// @mixin text-emphasis-variant($parent, $color) {
-//   #{$parent} {
-//     color: $color;
-//   }
-//   a#{$parent}:hover,
-//   a#{$parent}:focus {
-//     color: darken($color, 10%);
-//   }
-// }
-
-// Generic avatars used in place of profile pictures
 @mixin portrait($size) {
 	width: $size;
 	height: $size;
Index: lams_central/web/css/_learner_base.scss
===================================================================
diff -u -r6e5015d036550bcae770b2125000995c79c3dea2 -rd333f87f1b5deb8fff4c4ee1325ed4d4d36b03cf
--- lams_central/web/css/_learner_base.scss	(.../_learner_base.scss)	(revision 6e5015d036550bcae770b2125000995c79c3dea2)
+++ lams_central/web/css/_learner_base.scss	(.../_learner_base.scss)	(revision d333f87f1b5deb8fff4c4ee1325ed4d4d36b03cf)
@@ -142,6 +142,7 @@
 }
 .card-plain {
 	background: $white;
+	@include box-shadow($bmd-shadow-2dp);
   	.card-header:not(.card-avatar) {
     	margin-top: 0px; 
     	padding: .4rem 10px;
@@ -156,20 +157,56 @@
   margin-bottom: 15px;
 }
 
-.card-accordian .card-collapse, .card-statistics .card-collapse {
-  margin-top: 15px;
+.card.card-no-border .card-body {
+	padding: 0; 
 }
 
+// Collapsable cards/accordians - margins made bigger to support the large header.
+// Show a bit of the card when collapsed or it looks out of proportion with the header.
+// Icons to show panel is collapsed
+.card.card-accordian, .card.card-statistics {
+	padding-bottom: 15px;
+	.collapse {
+		margin-top: 15px;
+	}
+}
+
+div.accordian .card {
+	margin-top: 45px; 
+}
+
+.collapsable-icon-right a:after {
+    font-family: FontAwesome;
+    content:"\f078";
+    float: right;
+    color: $gray-light;
+	margin-right: 5px;
+}
+.collapsable-icon-right a.collapsed:after {
+    content:"\f054";
+}
+.collapsable-icon-left a:after {
+    font-family: FontAwesome;
+    content:"\f078";
+    float: left;
+    color: $gray-light;
+	margin-right: 5px;
+}
+.collapsable-icon-left a.collapsed:after {
+    content:"\f054";
+}
+
 // Reduce the gap between the nav bar and the content for authoring and monitoring.
 // The gap is designed for a large panel header but we are not using that on the popup
 // dialogs.
 .card-monitor-page .navbar {
 	margin-bottom: 10px;
 }
-.card-monitor-body {
-	margin-top: 0px;
-}
 
+.card-body.card-body-monitor {
+	padding: 0;
+}
+	
 /* Comments/Forum classes */
 .msg .panel-heading {
   padding: 3px 5px 3px 5px;
@@ -511,11 +548,6 @@
 	font-size: medium;
 }
 
-// offset 30px margin on top of card header
-div.accordian .card {
-	margin-top: 45px; 
-}
-
 // Tooltips used for learner progress and gradebook (large version)
 // .tooltip {
 // 	position: absolute;
Index: lams_central/web/css/purple_learner.scss
===================================================================
diff -u -rf0dd067cb016bd5669a5d1316fca29cf70464cda -rd333f87f1b5deb8fff4c4ee1325ed4d4d36b03cf
--- lams_central/web/css/purple_learner.scss	(.../purple_learner.scss)	(revision f0dd067cb016bd5669a5d1316fca29cf70464cda)
+++ lams_central/web/css/purple_learner.scss	(.../purple_learner.scss)	(revision d333f87f1b5deb8fff4c4ee1325ed4d4d36b03cf)
@@ -1,6 +1,5 @@
 // Standard LAMS Skin. If you need to add anything add it to _main_base.scss and it will go in all skins.
 @import "_lams_variables_purple.scss";
-//@import "_lams_variables_purple.scss";
 // Stylesheet Imports
 @import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons");
 @import url("https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css");
Index: lams_tool_scratchie/web/pages/monitoring/summary.jsp
===================================================================
diff -u -ra9f5e7f17f2c4ca78ee68eb398817a79735c148f -rd333f87f1b5deb8fff4c4ee1325ed4d4d36b03cf
--- lams_tool_scratchie/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision a9f5e7f17f2c4ca78ee68eb398817a79735c148f)
+++ lams_tool_scratchie/web/pages/monitoring/summary.jsp	(.../summary.jsp)	(revision d333f87f1b5deb8fff4c4ee1325ed4d4d36b03cf)
@@ -249,14 +249,14 @@
 </script>
 <script type="text/javascript" src="<lams:LAMSURL/>/includes/javascript/monitorToolSummaryAdvanced.js" ></script>
 
-	<c:if test="${not empty summaryList}">
-		<button onclick="return exportExcel();" class="btn btn-default btn-sm btn-disable-on-submit pull-right">
-			<i class="fa fa-download" aria-hidden="true"></i> 
-			<fmt:message key="label.export.excel" />
-		</button>
-	</c:if>
-
-	<div class="card card-no-border">
+	<div class="card card-no-border"><div class="card-body">
+		<c:if test="${not empty summaryList}">
+			<button onclick="return exportExcel();" class="btn btn-default btn-sm btn-disable-on-submit pull-right">
+				<i class="fa fa-download" aria-hidden="true"></i> 
+				<fmt:message key="label.export.excel" />
+			</button>
+		</c:if>
+	
 		<h4>
 		    <c:out value="${scratchie.title}" escapeXml="true"/>
 		</h4>
@@ -273,29 +273,27 @@
 		<lams:WaitingSpinner id="messageArea_Busy"></lams:WaitingSpinner>
 		<div class="voffset5 help-block" id="messageArea"></div>
 	
-	</div>
-
 	<div class="form-group">
 		<!-- Dropdown menu for choosing scratchie item -->
-		<label for="item-uid"><h4><fmt:message key="label.monitoring.summary.report.by.scratchie" /></h4></label>
-		<select id="item-uid" class="form-control">
+		<label for="item-uid"><fmt:message key="label.monitoring.summary.report.by.scratchie" /></label>
+		<select id="item-uid" class="form-control form-control-inline voffset10">
 			<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">
+		<label class="voffset10" for="userid-dropdown"><fmt:message key="label.monitoring.summary.report.by.user" /></label>
+		<select id="userid-dropdown" class="form-control form-control-inline voffset10">
 			<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>
+	</div></div>
 
 	<c:set var="summaryTitle"><fmt:message key="label.monitoring.summary.summary" /></c:set>
 	<c:if test="${sessionMap.isGroupedActivity}">
@@ -319,7 +317,7 @@
 			</span>
         </div>
         
-        <div id="collapse${summary.sessionId}" class="card-collapse collapse ${status.first ? 'in' : ''}" role="tabcard" aria-labelledby="heading${summary.sessionId}">
+        <div id="collapse${summary.sessionId}" class="card-collapse collapse ${status.first ? 'show' : ''}" role="tabcard" aria-labelledby="heading${summary.sessionId}">
 
 		<table id="list${summary.sessionId}" class="scroll" cellpadding="0" cellspacing="0"></table>
 		
@@ -340,7 +338,7 @@
 		      		</span>
 		        </div>
 		
-		        <div id="collapseBurning" class="card-collapse collapse in" role="tabcard" aria-labelledby="headingBurning">
+		        <div id="collapseBurning" class="card-collapse collapse show" role="tabcard" 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>