Index: lams_gradebook/web/gradebookCourseMonitor.jsp
===================================================================
diff -u -r93b041b5d566cc683b2e0a268c63556879b1222f -rc81f6bc91f57ba94de5f9631d889176668abc5af
--- lams_gradebook/web/gradebookCourseMonitor.jsp	(.../gradebookCourseMonitor.jsp)	(revision 93b041b5d566cc683b2e0a268c63556879b1222f)
+++ lams_gradebook/web/gradebookCourseMonitor.jsp	(.../gradebookCourseMonitor.jsp)	(revision c81f6bc91f57ba94de5f9631d889176668abc5af)
@@ -452,24 +452,34 @@
 		</a>
 
 		<div id="datesNotShown">
-			<a class="${btnclass} pull-right btn-primary" href="javascript:toggleLessonDates()"><fmt:message key="gradebook.monitor.show.dates" /></a>
+			<a class="${btnclass} pull-right btn-primary" href="javascript:toggleLessonDates()" title="<fmt:message key="gradebook.monitor.show.dates" />">
+				<i class="fa fa-calendar-check-o"></i> <span class="hidden-xs">
+				<fmt:message key="gradebook.monitor.show.dates" /></span>
+			</a>
 		</div>
 
 		<div id="datesShown" style="display:none">
-			<a class="${btnclass} pull-right btn-primary" href="javascript:toggleLessonDates()"><fmt:message key="gradebook.monitor.hide.dates" /></a>
+			<a class="${btnclass} pull-right btn-primary" href="javascript:toggleLessonDates()" title="<fmt:message key="gradebook.monitor.hide.dates" />">
+				<i class="fa fa-calendar-check-o"></i> <span class="hidden-xs">
+				<fmt:message key="gradebook.monitor.hide.dates" /></span>
+			</a>
 		</div>			
 				
 
 		<div id="export-link-area" class="gbTopButtonsContainer">
 		<div>
-			<a href="#nogo" id="export-course-button" class="${btnclass}">
+			<a href="#nogo" id="export-course-button" class="${btnclass}" title="<fmt:message key="gradebook.export.excel" />">
+				<i class="fa fa-download"></i><span class="hidden-xs">
 				<fmt:message key="gradebook.export.excel" />
+				</span>
 			</a>
 		</div>
 		
 		<div>
-			<a class="${btnclass}" href="#nogo" onclick="return openSelectLessonsArea();" >
+			<a class="${btnclass}" href="#nogo" onclick="return openSelectLessonsArea();" title="<fmt:message key="label.select.lessons.to.export" />" >
+				<i class="fa fa-square-o"></i><span class="hidden-xs">
 				<fmt:message key="label.select.lessons.to.export" />
+				</span>
 			</a>
 		</div>
 		</div>
Index: lams_gradebook/web/gradebookMonitor.jsp
===================================================================
diff -u -rb67f087068e5b478fc4e3205dc308b470195fe42 -rc81f6bc91f57ba94de5f9631d889176668abc5af
--- lams_gradebook/web/gradebookMonitor.jsp	(.../gradebookMonitor.jsp)	(revision b67f087068e5b478fc4e3205dc308b470195fe42)
+++ lams_gradebook/web/gradebookMonitor.jsp	(.../gradebookMonitor.jsp)	(revision c81f6bc91f57ba94de5f9631d889176668abc5af)
@@ -88,9 +88,13 @@
 			if (marksReleased) {
 				document.getElementById("marksReleased").style.display="inline";
 				document.getElementById("marksNotReleased").style.display="none";
+				document.getElementById("padlockUnlocked").style.display="inline";
+				document.getElementById("padlockLocked").style.display="none";
 			} else {
 				document.getElementById("marksReleased").style.display="none";
 				document.getElementById("marksNotReleased").style.display="inline";
+				document.getElementById("padlockUnlocked").style.display="none";
+				document.getElementById("padlockLocked").style.display="inline";
 			}
 		}
 		
@@ -483,11 +487,11 @@
 				}).navGrid("#activityViewPager", {edit:false,add:false,del:false,search:false}); // enable refresh button
 				
 				$("#export-grades-button").click(function() {
-					
 					var areaToBlock = "export-link-area";
 					var exportExcelUrl = "<lams:WebAppURL/>/gradebookMonitoring.do?dispatch=exportExcelLessonGradebook&lessonID=${lessonDetails.lessonID}";
 					var languageLabelWait = "<fmt:message key='gradebook.coursemonitor.wait'/>";
-					blockExportButton(areaToBlock, exportExcelUrl, languageLabelWait);
+					// if exportSpan is hidden then icon only mode, use small font.
+					blockExportButton(areaToBlock, exportExcelUrl, languageLabelWait, $("#exportSpan:hidden").length > 0);
 					
 					return false;
 				});
@@ -511,8 +515,75 @@
 
 <body class="stripes">
 
+	<!--  The buttons are formatted and dispayed differently in the pop up vs monitoring version. Popup matches Course Gradebook, 
+	-- Monitoring matches monitoring. So various button settings and the button codes are setup in advance and included where needed later.  -->
+	
 	<c:choose>
 	<c:when test="${!isInTabs}">
+		<c:set var="btnclass" value="btn btn-xs btn-default"/>
+	</c:when>
+	<c:otherwise>
+		<c:set var="btnclass" value="btn btn-sm btn-default"/>
+	</c:otherwise>
+	</c:choose>
+		
+	<c:set var="tourDatesCode">
+		<div id="tour-dates">
+ 		<div id="datesNotShown">
+ 			<a class="${btnclass}" href="javascript:toggleLessonDates()" title="<fmt:message key="gradebook.monitor.show.dates"/>" >
+ 			<i class="fa fa-calendar-check-o"></i> <span class="hidden-xs">
+			<fmt:message key="gradebook.monitor.show.dates" /></a>
+			</span>
+		</div>
+		<div id="datesShown" style="display:none">
+			<a class="${btnclass}" href="javascript:toggleLessonDates()" title="<fmt:message key="gradebook.monitor.hide.dates"/>" >
+ 			<i class="fa fa-calendar-check-o"></i> <span class="hidden-xs">
+			<fmt:message key="gradebook.monitor.hide.dates" /></a>
+			</span>
+		</div>
+		</div>
+	</c:set>
+		
+	<c:set var="lockLabelClass">${isInTabs?"lockLabel":""}</c:set>
+	<c:set var="padlockCode">
+		<div class="visible-xs-inline">
+		<div id="padlockLocked" style="display:none">
+			<span class="${lockLabelClass}">
+			<i class="fa fa-lock"></i>
+			<fmt:message key="label.marks"/>
+			</span>
+		</div>
+		<div id="padlockUnlocked" style="display:none">
+			<span class="${lockLabelClass}">
+			<i class="fa fa-unlock"></i>
+			<fmt:message key="label.marks"/>
+			</span>
+		</div>
+		</div>
+	</c:set>
+			
+			
+	<c:set var="chartButtonCode">
+		<div id="tour-mark-chart-button">
+			<div id="markChartShown" style="display:none">
+			<a href="javascript:toggleMarkChart()" class="${btnclass}" title="<fmt:message key='label.hide.marks.chart'/>" >
+				<i class="fa fa-bar-chart"></i> <span class="hidden-xs">
+				<fmt:message key="label.hide.marks.chart"/>
+				</span>
+			</a> 
+		</div>
+		<div id="markChartHidden">
+			<a href="javascript:toggleMarkChart()" class="${btnclass}" title="<fmt:message key='label.show.marks.chart'/>" >
+				<i class="fa fa-bar-chart"></i> <span class="hidden-xs">
+				<fmt:message key="label.show.marks.chart"/>
+				</span>
+			</a> 
+		</div>
+		</div>
+	</c:set>
+	
+	<c:choose>
+	<c:when test="${!isInTabs}">
 		<%-- replacement for Page type admin --%>
 		<div class="row no-gutter no-margin">
 		<div class="col-xs-12">
@@ -527,77 +598,63 @@
 					</fmt:param>
 				</fmt:message></h4>
 
-		
-		<a target="_blank" class="btn btn-xs btn-default pull-right loffset5" title="<fmt:message key='button.help.tooltip'/>"
-			   href="http://wiki.lamsfoundation.org/display/lamsdocs/Gradebook+Lesson+Marking">
-		<i class="fa fa-question-circle"></i> <span class="hidden-xs"><fmt:message key="button.help"/></span></a>
+		<div class="gbTopButtonsContainer pull-right">
+			${chartButtonCode}
+			${tourDatesCode}
+			<a target="_blank" class="${btnclass}" title="<fmt:message key='button.help.tooltip'/>"
+				   href="http://wiki.lamsfoundation.org/display/lamsdocs/Gradebook+Lesson+Marking">
+			<i class="fa fa-question-circle"></i> <span class="hidden-xs"><fmt:message key="button.help"/></span></a>
+		</div>
 
-		<c:set var="btnclass" value="btn btn-xs btn-default"/>
-		<div class="gbTopButtonsContainer" id="export-link-area" >
+		<div class="gbTopButtonsContainer pull-left" id="export-link-area">
+			${padlockCode}
+		
 	</c:when>
+	
 	<c:otherwise>
-		<c:set var="btnclass" value="btn btn-sm btn-default"/>
-	 	<div class="gbTopButtonsContainerInTab" id="export-link-area" >
+	 	
+		<div class="gbTopButtonsContainer pull-left">
+			${padlockCode}
+		</div>
+		
+		<div class="gbTopButtonsContainer pull-right" id="export-link-area">
+	 	
 	</c:otherwise>
 	</c:choose>
 
 			<div>
-				<a href="#nogo" id="export-grades-button" class="${btnclass}">
+				<a href="#nogo" id="export-grades-button" class="${btnclass}" title="<fmt:message key='gradebook.export.excel'/>" >
+					<i class="fa fa-download"></i><span id="exportSpan" class="hidden-xs">
 					<fmt:message key="gradebook.export.excel" />
+					</span>
 				</a> 
 			</div>
 	 
 	 		<div id="tour-release-marks">
 			<div id="marksNotReleased" style="display:none">
-				<a href="javascript:toggleRelease()" class="${btnclass}">
+				<a href="javascript:toggleRelease()" class="${btnclass}" 
+					title="<fmt:message key="gradebook.monitor.releasemarks.1" />&nbsp;<fmt:message key="gradebook.monitor.releasemarks.3" />" >
+					<i class="fa fa-share-alt "></i> <span class="hidden-xs">
 					<fmt:message key="gradebook.monitor.releasemarks.1" />&nbsp;<fmt:message key="gradebook.monitor.releasemarks.3" />
+					</span>
 				</a>
 			</div>
 			<div id="marksReleased" style="display:none" class="tour-release-marks">
-				<a href="javascript:toggleRelease()" class="${btnclass}">
-					<fmt:message key="gradebook.monitor.releasemarks.2" />&nbsp;<fmt:message key="gradebook.monitor.releasemarks.3" />
+				<a href="javascript:toggleRelease()" class="${btnclass}" 
+					title="<fmt:message key="gradebook.monitor.releasemarks.2" />&nbsp;<fmt:message key="gradebook.monitor.releasemarks.3" />" >
+					<i class="fa fa-share-alt "></i> <span class="hidden-xs">
+					<fmt:message key="gradebook.monitor.releasemarks.2" />&nbsp;<fmt:message key="gradebook.monitor.releasemarks.3" /></span>
 				</a> 
 			</div>
 			</div>
-	 	
- 			<div id="tour-mark-chart-button">
- 			<div id="markChartShown" style="display:none">
-				<a href="javascript:toggleMarkChart()" class="${btnclass}">
-					<fmt:message key="label.hide.marks.chart"/>
-				</a> 
-			</div>
-			<div id="markChartHidden">
-				<a href="javascript:toggleMarkChart()" class="${btnclass}">
-					<fmt:message key="label.show.marks.chart"/>
-				</a> 
-			</div>
-			</div>
-			
+
 		<c:if test="${isInTabs}">
-			<div id="tour-dates">
-	 		<div id="datesNotShown">
-				<a class="${btnclass}" href="javascript:toggleLessonDates()"><fmt:message key="gradebook.monitor.show.dates" /></a>
-			</div>
-			<div id="datesShown" style="display:none">
-				<a class="${btnclass}" href="javascript:toggleLessonDates()"><fmt:message key="gradebook.monitor.hide.dates" /></a>
-			</div>
-			</div>
+	 		${chartButtonCode}
+			${tourDatesCode}
 		</c:if>
 		
 		</div> <!-- Closes buttons -->
-
-		<!-- not in tabs? go next to the help button -->
-		<c:if test="${!isInTabs}">
-			<div class="tour-dates">
-	 		<div id="datesNotShown" class="tour-dates">
-				<a class="${btnclass} pull-right btn-primary" href="javascript:toggleLessonDates()"><fmt:message key="gradebook.monitor.show.dates" /></a>
-			</div>
-			<div id="datesShown" style="display:none" class="tour-dates">
-				<a class="${btnclass} pull-right btn-primary" href="javascript:toggleLessonDates()"><fmt:message key="gradebook.monitor.hide.dates" /></a>
-			</div>
-			</div>
-		</c:if>
-					
+		
 			<div class="row">
 				 <div class="col-xs-12">
 				 <lams:WaitingSpinner id="markChartBusy"/>
Index: lams_gradebook/web/includes/css/gradebook.css
===================================================================
diff -u -r93b041b5d566cc683b2e0a268c63556879b1222f -rc81f6bc91f57ba94de5f9631d889176668abc5af
--- lams_gradebook/web/includes/css/gradebook.css	(.../gradebook.css)	(revision 93b041b5d566cc683b2e0a268c63556879b1222f)
+++ lams_gradebook/web/includes/css/gradebook.css	(.../gradebook.css)	(revision c81f6bc91f57ba94de5f9631d889176668abc5af)
@@ -20,7 +20,6 @@
 .gbTopButtonsContainer {
 	height: 30px;
 	padding: 0px !important;
-	float: left;
 }
 
 .gbTopButtonsContainer div {
@@ -35,24 +34,11 @@
 	margin: 5px 5px 5px 0;
 }
 
-.gbTopButtonsContainerInTab {
-	height: 30px;
-	padding: 0px !important;
-	float: right;
+.lockLabel {
+	margin: 10px 5px 5px 0;
+	display: block;
 }
 
-.gbTopButtonsContainerInTab div {
-	display: inline;
-}
-
-.gbTopButtonsContainerInTab a {
-	margin: 5px 5px 5px 0;
-}
-
-.gbTopButtonsContainerInTab button {
-	margin: 5px 5px 5px 0;
-}
-
 .markChartDiv {
 	margin-top: 10px;
 	margin-left: 10px;
Index: lams_gradebook/web/includes/javascript/blockexportbutton.js
===================================================================
diff -u -r2fc9dd8b82fc3c3a2363cbc13e60eaba86e6a476 -rc81f6bc91f57ba94de5f9631d889176668abc5af
--- lams_gradebook/web/includes/javascript/blockexportbutton.js	(.../blockexportbutton.js)	(revision 2fc9dd8b82fc3c3a2363cbc13e60eaba86e6a476)
+++ lams_gradebook/web/includes/javascript/blockexportbutton.js	(.../blockexportbutton.js)	(revision c81f6bc91f57ba94de5f9631d889176668abc5af)
@@ -2,19 +2,20 @@
 //http://geekswithblogs.net/GruffCode/archive/2010/10/28/detecting-the-file-download-dialog-in-the-browser.aspx
 var fileDownloadCheckTimer;
 
-function blockExportButton(areaToBlock, exportExcelUrl, labelWait) {
+function blockExportButton(areaToBlock, exportExcelUrl, labelWait, smallVersion) {
 	var token = new Date().getTime(); //use the current timestamp as the token value
-		    
+	var fontSize = smallVersion ? '12px' : "16px";
+
 	$('#' + areaToBlock).block({
-		message: '<span style="font-size: 18px;color:#fff";>' + labelWait + '</span>',
+		message: '<span style="font-size: '+fontSize+';color:#fff";>' + labelWait + '</span>',
 		baseZ: 1000000,
 		fadeIn:  0, 
 		css: { 
 			border: 'none', 
-		    padding: '10px', 
+		    padding: '5px', 
 		    backgroundColor: '#000', 
-		    '-webkit-border-radius': '10px', 
-		    '-moz-border-radius': '10px', 
+		    '-webkit-border-radius': '5px', 
+		    '-moz-border-radius': '5px', 
 		    opacity: .98 
 		},
 		overlayCSS: {