Index: lams_gradebook/conf/language/lams/ApplicationResources.properties
===================================================================
diff -u -r51fb2a37254f24bb2a805d4ffd54482c779f43fa -r7d364252379e9c254844c9b39788519bea03de24
--- lams_gradebook/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision 51fb2a37254f24bb2a805d4ffd54482c779f43fa)
+++ lams_gradebook/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision 7d364252379e9c254844c9b39788519bea03de24)
@@ -97,6 +97,8 @@
 label.actuals  =Actuals
 label.max  =Max
 label.overall.totals  =Overall totals
+button.help  =Help
+button.help.tooltip  =Open help page
 
 
 #======= End labels: Exported 91 labels for en AU =====
Index: lams_gradebook/conf/language/lams/ApplicationResources_en_AU.properties
===================================================================
diff -u -r51fb2a37254f24bb2a805d4ffd54482c779f43fa -r7d364252379e9c254844c9b39788519bea03de24
--- lams_gradebook/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision 51fb2a37254f24bb2a805d4ffd54482c779f43fa)
+++ lams_gradebook/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision 7d364252379e9c254844c9b39788519bea03de24)
@@ -97,6 +97,8 @@
 label.actuals  =Actuals
 label.max  =Max
 label.overall.totals  =Overall totals
+button.help  =Help
+button.help.tooltip  =Open help page
 
 
 #======= End labels: Exported 91 labels for en AU =====
Index: lams_gradebook/web/gradebookCourseLearner.jsp
===================================================================
diff -u -r506e82d55455419723f11c0a8f99270b39f04055 -r7d364252379e9c254844c9b39788519bea03de24
--- lams_gradebook/web/gradebookCourseLearner.jsp	(.../gradebookCourseLearner.jsp)	(revision 506e82d55455419723f11c0a8f99270b39f04055)
+++ lams_gradebook/web/gradebookCourseLearner.jsp	(.../gradebookCourseLearner.jsp)	(revision 7d364252379e9c254844c9b39788519bea03de24)
@@ -13,23 +13,20 @@
 	<lams:css />
 	<link type="text/css" href="includes/css/gradebook.css" rel="stylesheet" />
 	
-	<style>
-		#content {width:680px; }
-	</style>
-
 	<jsp:include page="includes/jsp/jqGridIncludes.jsp"></jsp:include>
 
 	<script type="text/javascript">
-
 		
 		jQuery(document).ready(function(){
   
+			// for the ipad, we seem to need to force the grid to a sensible size to start
 			jQuery("#organisationGrid").jqGrid({
 				caption: "${organisationName}",
 			    datatype: "xml",
 			    url: "<lams:LAMSURL />/gradebook/gradebook.do?dispatch=getCourseGridData&view=lrnCourse&organisationID=${organisationID}",
-			    height: "100%",
-			    width: 600,
+				height: 'auto',
+				width: $(window).width() - 100,
+				shrinkToFit: false,
 			    sortorder: "asc", 
 			    sortname: "id", 
 			    pager: 'organisationGridPager',
@@ -52,7 +49,7 @@
 			      {name:'rowName',index:'rowName', sortable:true, editable:false},
 			      {name:'subGroup',index:'subGroup', sortable:false, editable:false, search:false},
 			      {name:'status',index:'status', sortable:false, editable:false, search:false, width:50, align:"center"},
-			      {name:'feedback',index:'feedback', sortable:false, editable:false, search:false, width:200},
+			      {name:'feedback',index:'feedback', sortable:false, editable:false, search:false, width:200}, 
 			      {name:'startDate',index:'startDate', sortable:false, editable:false, hidden:true, search:false},
 			      {name:'finishDate',index:'finishDate', sortable:false, editable:false, hidden:true, search:false},
 			      {name:'medianTimeTaken',index:'medianTimeTaken', sortable:true, hidden:true, editable:false, search:false, width:80, align:"center"},
@@ -139,37 +136,56 @@
 				onClickButton: function(){
 					jQuery("#organisationGrid").setColumns();
 				}
-			});	
+			});
+			
+	        //jqgrid autowidth (http://stackoverflow.com/a/1610197)
+	        $(window).bind('resize', function() {
+	            resizeJqgrid(jQuery(".ui-jqgrid-btable:visible"));
+	        });
+
+	        //resize jqGrid on openning of bootstrap collapsible
+	        $('div[id^="collapse"]').on('shown.bs.collapse', function () {
+	            resizeJqgrid(jQuery(".ui-jqgrid-btable:visible", this));
+	        })
+
+	        function resizeJqgrid(jqgrids) {
+	            jqgrids.each(function(index) {
+	                var gridId = $(this).attr('id');
+	                var gridParentWidth = jQuery('#gbox_' + gridId).parent().width();
+	                jQuery('#' + gridId).setGridWidth(gridParentWidth, true);
+	            });
+	        };
+	        setTimeout(function(){ window.dispatchEvent(new Event('resize')); }, 300);
+
 		});
 	</script>
 
 </lams:head>
 
-<body class="stripes" style="text-align: center">
-	<div id="page">
-	
-		<div id="header-no-tabs"></div>
-		
-		<div id="content">
-			<lams:help module="gradebook" page="My+Grades" style="no-tabs"/>
-			<h1 class="no-tabs-below">
-				<fmt:message key="gradebook.title.myGradebook">
-					<fmt:param>
-						<c:out value="${fullName}" escapeXml="true"/>
-					</fmt:param>
-				</fmt:message>
-			</h1>
-			<br />
-			<div style="width: 600px; margin-left: 20px; margin-right: 20px">
-				<table id="organisationGrid" class="scroll"></table>
-				<div id="organisationGridPager" class="scroll"></div>
-				
-				<div class="tooltip" id="tooltip"></div>
-			</div>
-		</div> <!-- Closes content -->
-		
-		<div id="footer">
+<body class="stripes">
+
+	<lams:Page type="admin">
+
+		<a target="_blank" class="btn btn-sm btn-default pull-right" title="<fmt:message key='button.help.tooltip'/>"
+		   href="http://wiki.lamsfoundation.org/display/lamsdocs/My+Grades">
+		<i class="fa fa-question-circle"></i> <span class="hidden-xs"><fmt:message key="button.help"/></span></a>
+
+		<h4><fmt:message key="gradebook.title.myGradebook">
+				<fmt:param>
+					<c:out value="${fullName}" escapeXml="true"/>
+				</fmt:param>
+			</fmt:message>
+		</h4>
+
+ 		<div>
+ 			<table id="organisationGrid" class="scroll"></table>
+			<div id="organisationGridPager" class="scroll"></div>
+ 			<div class="tooltip" id="tooltip"></div>
+		</div>
+ 		<div id="footer">
 		</div> <!--Closes footer-->
-	</div> <!-- Closes page -->
+		
+	</lams:Page>
+
 </body>
 </lams:html>
Index: lams_gradebook/web/gradebookCourseMonitor.jsp
===================================================================
diff -u -r506e82d55455419723f11c0a8f99270b39f04055 -r7d364252379e9c254844c9b39788519bea03de24
--- lams_gradebook/web/gradebookCourseMonitor.jsp	(.../gradebookCourseMonitor.jsp)	(revision 506e82d55455419723f11c0a8f99270b39f04055)
+++ lams_gradebook/web/gradebookCourseMonitor.jsp	(.../gradebookCourseMonitor.jsp)	(revision 7d364252379e9c254844c9b39788519bea03de24)
@@ -22,13 +22,16 @@
 	
 		jQuery(document).ready(function(){
 
+			var jqgridWidth = $(window).width() - 100;
+			
 			// Create the lesson view grid with sub grid for users	
 			jQuery("#organisationGrid").jqGrid({
 				caption: "<fmt:message key="gradebook.gridtitle.lesson.view"/>",
 			    datatype: "xml",
 			    url: "<lams:LAMSURL />/gradebook/gradebook.do?dispatch=getCourseGridData&view=monCourse&organisationID=${organisationID}",
 			    height: "100%",
-			    width: 660,
+			    width: jqgridWidth,
+				shrinkToFit: false,
 			    sortorder: "asc", 
 			    sortname: "id", 
 			    pager: 'organisationGridPager',
@@ -174,7 +177,8 @@
 			    datatype: "xml",
 			    url: "<lams:LAMSURL />/gradebook/gradebook.do?dispatch=getUserGridData&view=listView&organisationID=${organisationID}",
 			    height: "100%",
-			    width: 660,
+			    width: jqgridWidth,
+			    shrinkToFit: false,
 			    sortorder: "asc", 
 			    sortname: "rowName", 
 			    pager: 'userViewPager',
@@ -383,32 +387,52 @@
 				return false;
 			});
 			
+	        //jqgrid autowidth (http://stackoverflow.com/a/1610197)
+	        $(window).bind('resize', function() {
+	            resizeJqgrid(jQuery(".ui-jqgrid-btable:visible"));
+	        });
+
+	        //resize jqGrid on openning of bootstrap collapsible
+	        $('div[id^="collapse"]').on('shown.bs.collapse', function () {
+	            resizeJqgrid(jQuery(".ui-jqgrid-btable:visible", this));
+	        })
+
+	        function resizeJqgrid(jqgrids) {
+	            jqgrids.each(function(index) {
+	                var gridId = $(this).attr('id');
+	                var gridParentWidth = jQuery('#gbox_' + gridId).parent().width();
+	                jQuery('#' + gridId).setGridWidth(gridParentWidth, true);
+	            });
+	        };
+	        setTimeout(function(){ window.dispatchEvent(new Event('resize')); }, 300);
+
+			
 		});
 		
 		function openSelectLessonsArea() {
 			$("#select-lessons-area").toggle("slow");
 			return false;
 		}
 
+		
 	</script>
 
 </lams:head>
 
-<body class="stripes" style="text-align: center">
-	<div id="page">
-	
-		<div id="header-no-tabs"></div>
-		
-		<div id="content">
-			<lams:help module="gradebook" page="Gradebook+Course+Monitor" style="no-tabs"/>
-			<h1 class="no-tabs-below">
-				<fmt:message key="gradebook.title.courseMonitor">
+<body class="stripes">
+
+	<lams:Page type="admin">
+
+		<a target="_blank" class="btn btn-sm btn-default pull-right" title="<fmt:message key='button.help.tooltip'/>"
+		   href="http://wiki.lamsfoundation.org/display/lamsdocs/Gradebook+Course+Monitor">
+		<i class="fa fa-question-circle"></i> <span class="hidden-xs"><fmt:message key="button.help"/></span></a>
+
+		<h4><fmt:message key="gradebook.title.courseMonitor">
 					<fmt:param>
 						<c:out value="${organisationName}" escapeXml="true"/>
 					</fmt:param>
 				</fmt:message>
-			</h1>
-			<br />
+			</h4>
 			
 			<div id="export-link-area">
 				<a href="#nogo" id="export-course-button">
@@ -442,10 +466,9 @@
 				
 				<div class="tooltip" id="tooltip"></div>
 			</div>
-		</div> <!-- Closes content -->
 		
 		<div id="footer">
 		</div> <!--Closes footer-->
-	</div> <!-- Closes page -->
+	</lams:Page> <!-- Closes page -->
 </body>
 </lams:html>
Index: lams_gradebook/web/gradebookMonitor.jsp
===================================================================
diff -u -r2ef18e4c87e2e7929950dbeb990c6715ef16c0c2 -r7d364252379e9c254844c9b39788519bea03de24
--- lams_gradebook/web/gradebookMonitor.jsp	(.../gradebookMonitor.jsp)	(revision 2ef18e4c87e2e7929950dbeb990c6715ef16c0c2)
+++ lams_gradebook/web/gradebookMonitor.jsp	(.../gradebookMonitor.jsp)	(revision 7d364252379e9c254844c9b39788519bea03de24)
@@ -62,6 +62,7 @@
 		
 		jQuery(document).ready(function(){
   
+			var jqgridWidth = $(window).width() - 100;
 			displayReleaseOption();
 			
 			// Create the user view grid with sub grid for activities	
@@ -70,7 +71,8 @@
 			    datatype: "xml",
 			    url: "<lams:LAMSURL />/gradebook/gradebook.do?dispatch=getUserGridData&view=monUserView&lessonID=${lessonDetails.lessonID}",
 			    height: "100%",
-			    width: 670,
+			    width: jqgridWidth,
+				shrinkToFit: false,
 			    cellEdit: true,
 			    viewrecords: true,
 			    sortorder: "asc", 
@@ -253,7 +255,8 @@
 				    datatype: "xml",
 				    url: "<lams:LAMSURL />/gradebook/gradebook.do?dispatch=getActivityGridData&view=monActivityView&lessonID=${lessonDetails.lessonID}",
 				    height: "100%",
-				    width: 670,
+				    width: jqgridWidth,
+				    shrinkToFit: false,
 				    cellEdit: true,
 				    pager: "activityViewPager",
 				    rowList:[5,10,20,30],
@@ -436,34 +439,51 @@
 					
 					return false;
 				});
+				
+		        //jqgrid autowidth (http://stackoverflow.com/a/1610197)
+		        $(window).bind('resize', function() {
+		            resizeJqgrid(jQuery(".ui-jqgrid-btable:visible"));
+		        });
+
+		        //resize jqGrid on openning of bootstrap collapsible
+		        $('div[id^="collapse"]').on('shown.bs.collapse', function () {
+		            resizeJqgrid(jQuery(".ui-jqgrid-btable:visible", this));
+		        })
+
+		        function resizeJqgrid(jqgrids) {
+		            jqgrids.each(function(index) {
+		                var gridId = $(this).attr('id');
+		                var gridParentWidth = jQuery('#gbox_' + gridId).parent().width();
+		                jQuery('#' + gridId).setGridWidth(gridParentWidth, true);
+		            });
+		        };
+		        setTimeout(function(){ window.dispatchEvent(new Event('resize')); }, 300);
+
 		});
 	</script>
 	
 </lams:head>
 
-<body class="stripes" style="text-align:center">
-	<div id="page">
-		
-		<div id="header-no-tabs"></div> <!--closes footer-->
-		<div id="content" >
-			<lams:help module="gradebook" page="Gradebook+Lesson+Marking" style="no-tabs"/>
-			<h1 class="no-tabs-below">
-				<fmt:message key="gradebook.title.lessonGradebook">
+<body class="stripes">
+
+	<lams:Page type="admin">
+
+		<a target="_blank" class="btn btn-sm btn-default pull-right" 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>
+
+		<h4><fmt:message key="gradebook.title.lessonGradebook">
 					<fmt:param>
 						<c:out value="${lessonDetails.lessonName}" escapeXml="true"/>
 					</fmt:param>
-				</fmt:message>
-			</h1> 
-			<br />
+				</fmt:message></h4>
 			
 			<div id="marksNotReleased" style="display:none">
 				<a href="javascript:toggleRelease()"><fmt:message key="gradebook.monitor.releasemarks.1" /></a> <fmt:message key="gradebook.monitor.releasemarks.3" /><br />
-				<br />
 			</div>
 			
 			<div id="marksReleased" style="display:none">
 				<a href="javascript:toggleRelease()"><fmt:message key="gradebook.monitor.releasemarks.2" /></a> <fmt:message key="gradebook.monitor.releasemarks.3" /><br />
-				<br />
 			</div>
 			
 			<div id="export-link-area">
@@ -489,6 +509,6 @@
 		</div> <!-- Closes content -->
 	
 		<div id="footer"></div><!--closes footer-->
-	</div> <!-- Closes page -->
+	</lams:Page> <!-- Closes page -->
 </body>
 </lams:html>
Index: lams_gradebook/web/includes/css/gradebook.css
===================================================================
diff -u -rfc2765358dd2ee073be452d5c1e265a3b7e404a1 -r7d364252379e9c254844c9b39788519bea03de24
--- lams_gradebook/web/includes/css/gradebook.css	(.../gradebook.css)	(revision fc2765358dd2ee073be452d5c1e265a3b7e404a1)
+++ lams_gradebook/web/includes/css/gradebook.css	(.../gradebook.css)	(revision 7d364252379e9c254844c9b39788519bea03de24)
@@ -1,15 +1,3 @@
-#content {
-	margin-top:20px;
-	margin-left:auto;
-	margin-right:auto;
-	margin-bottom:30px; 
-	width:707px; 
-	height:100%; 
-	border:1px solid #d4d8da;
-	background-color:#fff;
-	padding:20px 25px;
-}
-		
 #export-link-area {
 	padding-bottom: 20px;
 }
@@ -24,13 +12,6 @@
 	margin-bottom: 10px;
 }
 
-.grid-holder {
-	width: 700px; 
-	margin-left: 10px; 
-	margin-right: 10px; 
-	margin-top: 20px;
-}
-
 #gbox_lessons-jqgrid {
     margin: 15px auto 25px auto;
 }
\ No newline at end of file
Index: lams_gradebook/web/includes/jsp/jqGridIncludes.jsp
===================================================================
diff -u -rfc2765358dd2ee073be452d5c1e265a3b7e404a1 -r7d364252379e9c254844c9b39788519bea03de24
--- lams_gradebook/web/includes/jsp/jqGridIncludes.jsp	(.../jqGridIncludes.jsp)	(revision fc2765358dd2ee073be452d5c1e265a3b7e404a1)
+++ lams_gradebook/web/includes/jsp/jqGridIncludes.jsp	(.../jqGridIncludes.jsp)	(revision 7d364252379e9c254844c9b39788519bea03de24)
@@ -4,7 +4,7 @@
 <!-- 
 Include this jsp in your jqGrid page head to get some jqGrid functionaility
  -->
-<link type="text/css" href="<lams:LAMSURL />css/jquery-ui-redmond-theme.css" rel="stylesheet">
+<link type="text/css" href="<lams:LAMSURL/>css/jquery-ui-smoothness-theme.css" rel="stylesheet">
 <link type="text/css" href="<lams:LAMSURL />css/jquery.jqGrid.css" rel="stylesheet" />
 
 <script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>