Index: lams_monitoring/web/css/monitorLesson.css
===================================================================
diff -u -rf4621cf27d17389c7437daf00f3c2b833290ca5a -r6712a950e89732a93a16f3a0c0433910284994aa
--- lams_monitoring/web/css/monitorLesson.css	(.../monitorLesson.css)	(revision f4621cf27d17389c7437daf00f3c2b833290ca5a)
+++ lams_monitoring/web/css/monitorLesson.css	(.../monitorLesson.css)	(revision 6712a950e89732a93a16f3a0c0433910284994aa)
@@ -335,4 +335,18 @@
 td.progressBarLabel a {
 	float: right;
 	margin: 6px 5px 4px 0;
+}
+
+
+/********** BOOTSTRAP ADDITIONS **********/
+
+.contributeActivityCell {
+	font-weight: 600;
+	margin-top: 10px;
+}
+
+.contributeEntryCell {
+	height: 25px;
+	margin-left: 25px;
+	
 }
\ No newline at end of file
Index: lams_monitoring/web/includes/javascript/monitorLesson.js
===================================================================
diff -u -rdb235b7a4ae3e3195b6adf5d8d5e8ded076cd44c -r6712a950e89732a93a16f3a0c0433910284994aa
--- lams_monitoring/web/includes/javascript/monitorLesson.js	(.../monitorLesson.js)	(revision db235b7a4ae3e3195b6adf5d8d5e8ded076cd44c)
+++ lams_monitoring/web/includes/javascript/monitorLesson.js	(.../monitorLesson.js)	(revision 6712a950e89732a93a16f3a0c0433910284994aa)
@@ -22,7 +22,7 @@
 	learnerProgressCurrentPageNumber = 1,
 
 //auto refresh all tabs every 30 seconds
-	autoRefreshInterval = 30 * 1000,
+	autoRefreshInterval = 300 * 1000,
 	autoRefreshIntervalObject = null,
 // when user is doing something, do not auto refresh
 	autoRefreshBlocked = false,
@@ -116,12 +116,14 @@
 				
 				if (checked) {
 					$('#imAvailableField').attr('disabled', null);
+					$('#imDiv').css('display','inline');
 					alert(LABELS.LESSON_PRESENCE_ENABLE_ALERT);
 				} else {
 					$('#imAvailableField').attr({
 						'checked'  : null,
 						'disabled' : 'disabled'
 					}).change();
+					$('#imDiv').css('display','none');
 					alert(LABELS.LESSON_PRESENCE_DISABLE_ALERT);
 				}
 			}
@@ -143,9 +145,13 @@
 			success : function() {
 				if (checked) {
 					$('#openImButton').css('display', 'inline');
+					$('#imButton').attr('class','btn btn-xs btn-success voffset10');
+					$('#imDiv').css('display','inline');
 					alert(LABELS.LESSON_IM_ENABLE_ALERT);
 				} else {
 					$('#openImButton').css('display', 'none');
+					$('#imButton').attr('class','btn btn-xs btn-default voffset10');
+					$('#imDiv').css('display','none');
 					alert(LABELS.LESSON_IM_DISABLE_ALERT);
 				}
 			}
@@ -178,6 +184,7 @@
 		             {
 		            	'text'   : LABELS.CANCEL_BUTTON,
 		            	'id'     : 'classDialogCancelButton',
+		            	'class'  : 'btn btn-sm btn-default', 
 		            	'click'  : function() {
 							$(this).dialog('close');
 						} 
@@ -312,7 +319,7 @@
 
 
 /**
- * Updates widgets in lesson tab according to respose sent to refreshMonitor()
+ * Updates widgets in lesson tab according to response sent to refreshMonitor()
  */
 function updateLessonTab(){
 	$.ajax({
@@ -328,30 +335,38 @@
 			// update lesson state label
 			lessonStateId = +response.lessonStateID;
 			var label = null;
+			var labelColour = 'warning';
 			switch (lessonStateId) {
 				case 1:
 					label = LABELS.LESSON_STATE_CREATED;
+					labelColour = 'warning';
 					break;
 				case 2:
 					label = LABELS.LESSON_STATE_SCHEDULED;
+					labelColour = 'warning';
 					break;
 				case 3:
 					label = LABELS.LESSON_STATE_STARTED;
+					labelColour = 'success';
 					break;
 				case 4:
 					label = LABELS.LESSON_STATE_SUSPENDED;
+					labelColour = 'danger';
 					break;
 				case 5:
 					label = LABELS.LESSON_STATE_FINISHED;
+					labelColour = 'danger';
 					break;
 				case 6:
 					label = LABELS.LESSON_STATE_ARCHIVED;
+					labelColour = 'danger';
 					break;
 				case 7:
 					label = LABELS.LESSON_STATE_REMOVED;
+					labelColour = 'danger'; 
 					break;
 			}
-			$('#lessonStateLabel').text(label);
+			$('#lessonStateLabel').attr('class', 'label label-' + labelColour).html(label + ' <i class="fa fa-angle-double-down"></i>');
 			
 			// update available options in change state dropdown menu
 			var selectField = $('#lessonStateField');
@@ -377,20 +392,26 @@
 			}
 			
 			// show/remove widgets for lesson scheduling
-			var scheduleControls = $('#scheduleDatetimeField, #scheduleLessonButton, #startLessonButton');
+			var scheduleControls = $('#scheduleDatetimeField, #scheduleLessonButton, #startLessonButton, #lessonScheduler');
 			var startDateField = $('#lessonStartDateSpan');
+			var lessonStateChanger = $('#lessonStateChanger');
+			var stateLabel = $('#lessonStateLabel');
 			switch (lessonStateId) {
 				 case 1:
 					 scheduleControls.css('display','inline');
 					 startDateField.css('display','none');
+					 lessonStateChanger.css('display','none');
 					 break;
 				 case 2:
 					 scheduleControls.css('display','none');
 					 startDateField.text(response.startDate).add('#startLessonButton').css('display','inline');
+					 lessonStateChanger.css('display','none');
 					 break;
 				default: 			
 					scheduleControls.css('display','none');
-				 	startDateField.text(response.startDate).css('display','inline');
+				 	startDateField.text(response.startDate).css('display','none');
+				 	lessonStateChanger.css('display','inline');
+				 	stateLabel.attr('title',response.startDate);
 				 	break;
 			}
 			
@@ -480,6 +501,8 @@
 function updatePresenceAvailableCount(){
 	var checked = $('#presenceAvailableField').is(':checked'),
 		counter = $('#presenceAvailableCount');
+		presenceButton = $('#presenceButton');
+		presenceCounter = $('#presenceCounter');
 	if (checked) {
 		$.ajax({
 			dataType : 'text',
@@ -491,11 +514,16 @@
 			},
 			success : function(result) {
 				$('span', counter).text(result);
+				presenceCounter.text(result);
+				presenceButton.attr('class', 'btn btn-xs btn-success');
+				presenceCounter.show();
 				counter.show();
 			}
 		});
 
 	} else {
+		presenceCounter.hide();
+		presenceButton.attr('class', 'btn btn-xs btn-default');
 		counter.hide();
 	}
 }
@@ -514,8 +542,8 @@
 	if (contributeActivities) {
 		var row = header;
 		$.each(contributeActivities, function(){
-			var cell = $('<td colspan="2" />').addClass('contributeActivityCell').text(this.title);
-			row = $('<tr />').addClass('contributeRow').insertAfter(row).append(cell);
+			var cell = $('<div />').addClass('contributeActivityCell').text(this.title);
+			row = $('<div />').addClass('contributeRow').insertAfter(row).append(cell);
 			
 			$.each(this.contributeEntries, function(){
 				var entryContent = '';
@@ -525,18 +553,18 @@
 					case 9  : entryContent = LABELS.CONTRIBUTE_BRANCHING; break;
 					case 11 : entryContent = LABELS.CONTRIBUTE_CONTENT_EDITED; break; 
 				}
-				entryContent += '<a href="#" class="button" onClick="javascript:openPopUp(\''
-							 + this.url + '\',\'ContributeActivity\', 600, 800, true)" title="' + LABELS.CONTRIBUTE_TOOLTIP
-							 + '">' + LABELS.CONTRIBUTE_BUTTON + '</a>';
-				cell = $('<td colspan="2" />').addClass('contributeEntryCell').html(entryContent);
-				row = $('<tr />').addClass('contributeRow').insertAfter(row).append(cell);
+				entryContent += '<span class="btn btn-xs btn-primary pull-right" onClick="javascript:openPopUp(\''
+							 + this.url + '\',\'ContributeActivity\', 800, 1280, true)" title="' + LABELS.CONTRIBUTE_TOOLTIP
+							 + '">' + LABELS.CONTRIBUTE_BUTTON + '</span>';
+				cell = $('<div />').addClass('contributeEntryCell').html(entryContent);
+				row = row.append(cell);
 			});
 		});
 	}
 	if ($('.contributeRow').length == 0) {
-		header.hide();
+		$('#requiredTasks').hide();
 	} else {
-		header.show();
+		$('#requiredTasks').show();
 	}
 }
 
@@ -604,7 +632,7 @@
 			             {
 			            	'text'   : LABELS.VIEW_LEARNER_BUTTON,
 			            	'id'     : 'learnerGroupDialogViewButton',
-			            	'class'  : 'learnerGroupDialogSelectableButton',
+			            	'class'  : 'learnerGroupDialogSelectableButton btn btn-sm btn-default',
 			            	'click'  : function() {
 			            		var selectedLearner = $('.dialogList div.dialogListItemSelected', this);
 			            		if (selectedLearner.length == 1) {
@@ -616,7 +644,7 @@
 			             {
 			            	'text'   : LABELS.EMAIL_BUTTON,
 			            	'id'     : 'learnerGroupDialogEmailButton',
-			            	'class'  : 'learnerGroupDialogSelectableButton',
+			            	'class'  : 'learnerGroupDialogSelectableButton btn btn-sm btn-default',
 			            	'click'  : function() {
 			            		var selectedLearner = $('.dialogList div.dialogListItemSelected', this);
 			            		if (selectedLearner.length == 1) {
@@ -627,6 +655,7 @@
 			             {
 			            	'text'   : LABELS.CLOSE_BUTTON,
 			            	'id'     : 'learnerGroupDialogCloseButton',
+			            	'class'  : 'btn btn-sm btn-default',
 			            	'click'  : function() {
 								$(this).dialog('close');
 							} 
@@ -1708,10 +1737,10 @@
 	if (!learnerProgressCellsTemplate) {
 		// fill the placeholder, after all required variables were initialised
 		learnerProgressCellsTemplate =
-		  '<tr><td class="progressBarLabel" id="progressBarLabel;00;"><div>;11;</div>';
+		  '<tr><td class="active" id="progressBarLabel;00;"><strong>;11;</strong>';
 
 		learnerProgressCellsTemplate +=
-			'<a class="button" href="#" onClick="javascript:showEmailDialog(;00;)">'
+			'<a class="btn btn-xs btn-default pull-right" href="#" onClick="javascript:showEmailDialog(;00;)"><i class="fa fa-envelope-o"></i> '
 		+ LABELS.EMAIL_BUTTON
 		+ '</a></td></tr><tr><td class="progressBarCell" id="progressBar;00;"></td></tr>';
 	}
@@ -2088,7 +2117,7 @@
 function colorDialogList(parent) {
 	$('.dialogList div.dialogListItem', parent).each(function(userIndex, userDiv){
 		// every odd learner has different background
-		$(userDiv).css('background-color', userIndex % 2 ? '#dfeffc' : 'inherit');
+		$(userDiv).css('background-color', userIndex % 2 ? '#f5f5f5' : 'inherit');
 	});
 }
 
Index: lams_monitoring/web/monitor.jsp
===================================================================
diff -u -rf4621cf27d17389c7437daf00f3c2b833290ca5a -r6712a950e89732a93a16f3a0c0433910284994aa
--- lams_monitoring/web/monitor.jsp	(.../monitor.jsp)	(revision f4621cf27d17389c7437daf00f3c2b833290ca5a)
+++ lams_monitoring/web/monitor.jsp	(.../monitor.jsp)	(revision 6712a950e89732a93a16f3a0c0433910284994aa)
@@ -10,25 +10,32 @@
 <lams:html>
 <lams:head>
 
-	<lams:css style="main" />
-	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-redmond-theme.css" type="text/css" media="screen" />
+	<!-- <lams:css style="main" /> -->
 	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui.timepicker.css" type="text/css" media="screen" />
+
 	<link rel="stylesheet" href="<lams:LAMSURL/>css/progressBar.css" type="text/css" />
 	<link rel="stylesheet" href="css/monitorLesson.css" type="text/css" media="screen" />
-
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
+	<link href="/lams/css/defaultHTML_learner.css" rel="stylesheet" type="text/css">
+	<link rel="stylesheet" href="<lams:LAMSURL/>css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen">	
+  
+	<script src="<lams:LAMSURL/>includes/javascript/jquery.js"></script>
 	<script type="text/javascript" >
 		$(document).bind("mobileinit", function(){
 		  $.mobile.loadingMessage = false;
 		  $.mobile.ignoreContentEnabled = true;
 		  $('body').attr('data-enhance', 'false');
 		});
 	</script>
-	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery.mobile.js"></script>
+	
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/jquery-ui.timepicker.js"></script>
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/snap.svg.js"></script>
+	<script type="text/javascript" src="/lams/includes/javascript/readmore.min.js"></script>
 	<script type="text/javascript" src="includes/javascript/monitorLesson.js"></script>
+	<script type="text/javascript" src="/lams/includes/javascript/bootstrap.min.js"></script>
+	
+	
+	
 	<script type="text/javascript">
 		var lessonId = ${lesson.lessonID},
 			userId = '<lams:user property="userID"/>',
@@ -164,509 +171,538 @@
 			initSequenceTab();
 			initLearnersTab();
 			refreshMonitor();
+			<c:if test="${not empty lesson.lessonDescription}">
+			$('#description').readmore({
+					  speed: 500,
+					  collapsedHeight: 85
+			});
+			</c:if>
 			
 			// remove "loading..." screen
 			$('#loadingOverlay').remove();
 		});
 	</script>
+	
+	
 	<!-- Some settings need to be done in the script first and only then this file can be included -->
 	<script type="text/javascript" src="<lams:LAMSURL/>includes/javascript/progressBar.js"></script>
 </lams:head>
-<body data-enhance="false">
-
-<%-- "loading..." screen, gets removed on page full load --%>
-<div id="loadingOverlay">
-	<img src="<lams:LAMSURL/>images/ajax-loader-big.gif" />
-</div>
-
-<div id="tabs">
-	<!-- Tab names -->
-	<ul>
-		<li><a id="tabLessonLink" href="#tabLesson"><fmt:message key="tab.lesson"/></a></li>
-		<li><a id="tabSequenceLink" href="#tabSequence"><fmt:message key="tab.sequence"/></a></li>
-		<li><a id="tabLearnersLink" href="#tabLearners"><fmt:message key="tab.learners"/></a></li>
-	</ul>
+<body>
 	
-	<!-- Tab contents -->
+	<%-- "loading..." screen, gets removed on page full load --%>
+	<div id="loadingOverlay">
+		<i class="fa fa-refresh fa-spin fa-2x fa-fw"></i>
+	</div>
 	
-	<div id="tabLesson">
-		<table id="tabLessonTable">
-			<tr>
-				<td class="fieldLabel">
-				</td>
-				<td class="topButtonsContainer">
-					<a target="_blank" class="button" title="<fmt:message key='button.help.tooltip'/>"
+	<div class="container-fluid">
+	
+		<div id="tabs">
+			<!-- Tab names -->
+			<ul>
+				<li><a id="tabLessonLink" href="#tabLesson"><fmt:message key="tab.lesson"/></a></li>
+				<li><a id="tabSequenceLink" href="#tabSequence"><fmt:message key="tab.sequence"/></a></li>
+				<li><a id="tabLearnersLink" href="#tabLearners"><fmt:message key="tab.learners"/></a></li>
+			</ul>
+			
+			<!-- Tab contents -->
+			
+			<div id="tabLesson">
+			<div class="row">
+				<div class="col-xs-12">
+					<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/monitoringlesson">
-					<fmt:message key="button.help"/></a>
-					<a class="button" title="<fmt:message key='button.refresh.tooltip'/>"
+					<i class="fa fa-question-circle"></i> <span class="hidden-xs"><fmt:message key="button.help"/></span></a>
+					<a class="btn btn-sm btn-default pull-right" title="<fmt:message key='button.refresh.tooltip'/>"
 					   href="#" onClick="javascript:refreshMonitor('lesson')">
-					<fmt:message key="button.refresh"/></a>
-				</td>
-			</tr>
-			<tr>
-				<td class="fieldLabel">
-					<fmt:message key="lesson.name"/>
-				</td>
-				<td id="tabLessonLessonName">
-					<c:out value="${lesson.lessonName}" />
-				</td>
-			</tr>
-			<tr>
-				<td class="fieldLabel">
-					<fmt:message key="lesson.description"/>
-				</td>
-				<td id="tabLessonLessonDescription">
-					<c:out value="${lesson.lessonDescription}" escapeXml="false"/>
-				</td>
-			</tr>
-			<tr>
-				<td class="fieldLabel">
-					<fmt:message key="lesson.state"/>
-				</td>
-				<td id="lessonStateLabel"></td>
-			<tr>
-				<td class="fieldLabel">
-					<fmt:message key="lesson.learners"/>
-				</td>
-				<td id="learnersStartedPossibleCell"></td>
-			</tr>
+					<i class="fa fa-refresh"></i> <span class="hidden-xs"><fmt:message key="button.refresh"/></span></a>				
+					<p id="tabLessonLessonName">
+						<span class="lead"><strong><c:out value="${lesson.lessonName}" /></strong></span>
+						<br/>
+						<span class="text-muted"><small><c:out value="${lesson.organisationName}" escapeXml="true"/></small></span>
+					</p>
+				</div>
+			</div>
+			<div class="row">
+				<div class="col-sm-9 col-xs-6">
+				
+					<!-- Lesson details -->
+					<dl id="lessonDetails" class="dl-horizontal">
+						<c:if test="${not empty lesson.lessonDescription}">
+							<dt><fmt:message key="lesson.description"/></dt>
+							<dd id="tabLessonLessonDescription">
+								<div id="description">
+									<c:out value="${lesson.lessonDescription}" escapeXml="false"/>
+								</div>
+							</dd>
+						</c:if>
+						<dt><fmt:message key="lesson.state"/></dt>
+						<dd><span data-toggle="collapse" data-target="#changeState" id="lessonStateLabel"></span>
+						  
+						  <!--  Change lesson status or start/schedule start -->
+							<div class="collapse offset10" id="changeState">
+									<div id="lessonScheduler">
+										<form class="form-inline">
+											<div class="form-group">
+												 <label for="scheduleDatetimeField"><fmt:message key="lesson.start"/></label>
+												 <input class="lessonManageField input-sm"  id="scheduleDatetimeField"/>
+												<span id="lessonStartDateSpan" class="lessonManageField"></span>
+												<a id="scheduleLessonButton" class="btn btn-xs btn-default lessonManageField" href="#"
+												   onClick="javascript:scheduleLesson()"
+												   title='<fmt:message key="button.schedule.tooltip"/>'>
+												   <fmt:message key="button.schedule"/>
+												</a>
+												<a id="startLessonButton" class="btn btn-xs btn-default" href="#"
+												   onClick="javascript:startLesson()"
+												   title='<fmt:message key="button.start.now.tooltip"/>'>
+												   <fmt:message key="button.start.now"/>
+												</a>
+											</div>
+										</form>
+									</div>
+								<div id="lessonStateChanger">									
+									<span id="lessonStartDateSpan" class="lessonManageField"></span>
+									<select id="lessonStateField" class="btn btn-xs">
+											<option value="-1"><fmt:message key="lesson.select.state"/></option>
+									</select>
+									<button type="button" class="btn btn-xs btn-primary"
+								   onClick="javascript:changeLessonState()"
+								   title='<fmt:message key="lesson.change.state.tooltip"/>'>
+								   <i class="fa fa-check"></i> <span class="hidden-xs"><fmt:message key="button.apply"/></span>
+							    </button>
+						    </div>						
+							</div>
+							
+						</dd>
+						<dt><fmt:message key="lesson.learners"/>:</dt>
+						<dd id="learnersStartedPossibleCell"></dd>
+						<c:set var="showLearnerURL"><%=Configuration.get(ConfigurationKeys.ALLOW_DIRECT_LESSON_LAUNCH)%></c:set>
+						<c:if test="${showLearnerURL}">
+							<c:set var="serverURL"><%=Configuration.get(ConfigurationKeys.SERVER_URL)%></c:set>
+							<c:if test="${fn:substring(serverURL, fn:length(serverURL)-1, fn:length(serverURL)) != '/'}">
+								<c:set var="serverURL">${serverURL}/</c:set>
+							</c:if>								
+						  <dt class="voffset5"><fmt:message key="lesson.learner.url"/></dt>
+							<dd class="voffset5"><input id="learnerURLField" class="lessonManageField"
+									       value="${serverURL}r/${lesson.encodedLessonID}"
+									       readonly="readonly" />
+									<a class="btn btn-sm btn-default lessonManageField" href="#"
+									   onClick="javascript:selectLearnerURL()"><fmt:message key="button.select"/></a>
+									<span id="copyLearnerURL"><fmt:message key="lesson.copy.prompt"/></span>
+							</dd>
+						</c:if>
+						<!--  lesson actions -->
+						<style>
+								dd { 
+								  margin-bottom: 10px;
+								}
+						</style>
+						<dt><fmt:message key="lesson.manage"/>:</dt>
+						<dd>
+							<div class="btn-group btn-group-xs" role="group" id="lessonActions">
+							  <button id="viewLearnersButton" class="btn btn-sm btn-default roffset10" 
+							  	type="button" class="btn btn-xs btn-default" onClick="javascript:showLessonLearnersDialog()"
+							  	title='<fmt:message key="button.view.learners.tooltip"/>'><i class="fa fa-sm fa-users"></i> <span class="hidden-xs"><fmt:message key="button.view.learners"/></span></button>
+							  <button id="editClassButton" class="btn btn-sm btn-default roffset10" 
+							  	type="button" class="btn btn-xs btn-default" onClick="javascript:showClassDialog()" 
+							  	title='<fmt:message key="button.edit.class.tooltip"/>'><i class="fa fa-sm fa-user-times"></i> <span class="hidden-xs"><fmt:message key="button.edit.class"/></span></button>
+							<c:if test="${notificationsAvailable && lesson.enabledLessonNotifications}">	
+							  <button id="notificationButton" class="btn btn-sm btn-default roffset10"
+							  	type="button" onClick="javascript:window.parent.showNotificationsDialog(null,${lesson.lessonID})"><i class="fa fa-sm fa-bullhorn"></i> <span class="hidden-xs"><fmt:message key="email.notifications"/></span></button>
+							</c:if>							  
+							</div>
+						</dd>
+
+						<!-- IM & Presence -->
+						<dt>Instant messaging:</dt>
+						<dd>
+							<div id="presenceDiv">
+							<button id="presenceButton" class="btn btn-xs btn-danger"><i class="fa fa-wifi"></i> <span class="hidden-xs">Presence</span> 
+								<span id="presenceCounter" class="badge">0</span>
+							</button>
+							</div>							
+							<div id="imDiv"
+								<c:if test="${not lesson.learnerPresenceAvailable}">
+									style="display: none"
+								</c:if>
+								<c:if test="${lesson.learnerImAvailable}">
+									style="display: inline"
+								</c:if> 
+								>
+							<button id="imButton" class="btn btn-xs btn-default voffset10"><i id="imButtonToggle" class="fa fa-comments-o"></i> <span class="hidden-xs">Instant messaging</span></button>
+							</div>
+						</dd>
+					</dl>	
+				</div>
+				
+				
+				<div class="col-sm-3  col-xs-6">
+					<div class="panel panel-default">
+						<div class="panel-heading">Overall Completion
+						</div>
+						<div class="panel-body">60%
+
+						</div>
+					</div>
+				</div>
+			</div>
 			
-			<c:set var="serverURL"><%=Configuration.get(ConfigurationKeys.SERVER_URL)%></c:set>
-			<c:if test="${fn:substring(serverURL, fn:length(serverURL)-1, fn:length(serverURL)) != '/'}">
-				<c:set var="serverURL">${serverURL}/</c:set>
-			</c:if>
-			<c:set var="showLearnerURL"><%=Configuration.get(ConfigurationKeys.ALLOW_DIRECT_LESSON_LAUNCH)%></c:set>
-			<c:if test="${showLearnerURL}">
-				<tr>
-					<td class="fieldLabel">
-						<fmt:message key="lesson.learner.url"/>
-					</td>
-					<td>
-						<input id="learnerURLField" class="lessonManageField"
-						       value="${serverURL}r/${lesson.encodedLessonID}"
-						       readonly="readonly" />
-						<a class="button lessonManageField" href="#"
-						   onClick="javascript:selectLearnerURL()"><fmt:message key="button.select"/></a>
-						<span id="copyLearnerURL"><fmt:message key="lesson.copy.prompt"/></span>
-					</td>
-				</tr>
-			</c:if>
+			<!-- start lesson details -->
+			<div class="row">
+				<div class="col-xs-12">
+					
+				</div>
+			</div>
 			
-			<tr>
-				<td class="fieldLabel">
-					<fmt:message key="lesson.class"/>
-				</td>
-				<td>
-					<c:out value="${lesson.organisationName}" escapeXml="true"/>
-				</td>
-			</tr>
-			<tr>
-				<td colspan="2" class="sectionHeader">
-					<fmt:message key="lesson.manage"/>
-				</td>
-			</tr>
-			<tr>
-				<td class="fieldLabel">
-					<fmt:message key="lesson.class"/>
-				</td>
-				<td>
-					<a id="viewLearnersButton" class="button lessonManageField" href="#"
-					   onClick="javascript:showLessonLearnersDialog()"
-					   title='<fmt:message key="button.view.learners.tooltip"/>'>
-					   <fmt:message key="button.view.learners"/>
+			<!-- Required tasks -->
+			<div id="requiredTasks" class="panel panel-warning" style="display: none;">
+				<div class="panel-heading">
+					<div class="panel-title"><fmt:message key="lesson.required.tasks"/></div>
+				</div>
+				<div class="panel-body">
+					<span id="contributeHeader"></span>
+				</div>
+			</div>
+			
+				<table id="tabLessonTable" class="table table-striped">
+					<tr>
+						<td>
+						</td>
+						<td>
+							<input type="checkbox" id="presenceAvailableField"
+								<c:if test="${lesson.learnerPresenceAvailable}">
+									checked="checked"
+								</c:if> 
+							/>
+							<fmt:message key="lesson.enable.presence"/>
+							<span id="presenceAvailableCount">(<span>0</span>
+								<fmt:message key="lesson.presence.count"/>)
+							</span>
+							<br />
+							<input type="checkbox" id="imAvailableField"
+								<c:if test="${not lesson.learnerPresenceAvailable}">
+									disabled="disabled"
+								</c:if>
+								<c:if test="${lesson.learnerImAvailable}">
+									checked="checked"
+								</c:if> 
+							/>
+							<fmt:message key="lesson.enable.im"/>
+						</td>
+					</tr>
+					<tr id="contributeHeader">
+						<td colspan="2" class="active">
+							<fmt:message key="lesson.required.tasks"/>
+						</td>
+					</tr>
+					<c:forEach var="activity" items="${contributeActivities}">
+						<tr class="contributeRow">
+							<td colspan="2" class="contributeActivityCell">
+								<c:out value="${activity.title}" />
+							</td>
+						</tr>
+						<c:forEach var="entry" items="${activity.contributeEntries}">
+							<c:if test="${entry.isRequired}">
+								<tr class="contributeRow">
+									<td colspan="2" class="contributeEntryCell">
+										<c:choose>
+											<c:when test="${entry.contributionType eq 3}">
+												<fmt:message key="lesson.task.gate"/>
+											</c:when>
+											<c:when test="${entry.contributionType eq 6}">
+												<fmt:message key="lesson.task.grouping"/>
+											</c:when>
+											<c:when test="${entry.contributionType eq 9}">
+												<fmt:message key="lesson.task.branching"/>
+											</c:when>
+										</c:choose>
+										<a href="#" class="btn btn-sm btn-default"
+										   onClick="javascript:openPopUp('${entry.URL}','ContributeActivity', 600, 800, true)"
+										   title='<fmt:message key="button.task.go.tooltip"/>'>
+										   <fmt:message key="button.task.go"/>
+										</a>
+									</td>
+								</tr>
+							</c:if>
+						</c:forEach>
+					</c:forEach>
+				</table>
+			</div>
+			
+			<div id="tabSequence">
+				<div id="sequenceTopButtonsContainer" class="topButtonsContainer">
+					<a id="helpButton" target="_blank" class="btn btn-sm btn-default" title="<fmt:message key='button.help.tooltip'/>"
+					   href="http://wiki.lamsfoundation.org/display/lamsdocs/monitoringsequence">
+						<i class="fa fa-question-circle"></i> <span class="hidden-xs"><fmt:message key="button.help"/></span>
 					</a>
-					<a id="editClassButton" class="button lessonManageField" href="#"
-					   onClick="javascript:showClassDialog()"
-					   title='<fmt:message key="button.edit.class.tooltip"/>'>
-					   <fmt:message key="button.edit.class"/>
+					<a id="refreshButton" class="btn btn-sm btn-default" title="<fmt:message key='button.refresh.tooltip'/>"
+					   href="#" onClick="javascript:refreshMonitor('sequence')">
+						<i class="fa fa-refresh"></i> <span class="hidden-xs"><fmt:message key="button.refresh"/></span>
 					</a>
-					<c:if test="${notificationsAvailable && lesson.enabledLessonNotifications}">
-						<a id="notificationButton" class="button lessonManageField" href="#"
-						   onClick="javascript:window.parent.showNotificationsDialog(null,${lesson.lessonID})">
-						   <fmt:message key="email.notifications"/>
+					<c:if test="${enableLiveEdit && lesson.liveEditEnabled}">
+						<a id="liveEditButton" class="btn btn-sm btn-default" title="<fmt:message key='button.live.edit.tooltip'/>"
+					       href="#"
+					  	   onClick="javascript:openLiveEdit()">
+							<i class="fa fa-pencil"></i> <span class="hidden-xs"><fmt:message key='button.live.edit'/></span>
 						</a>
 					</c:if>
-					
-					<a id="openImButton" class="button" href="#"
-					   onClick="javascript:openChatWindow()"
-						<c:if test="${not lesson.learnerImAvailable}">
-							style="display: none"
-						</c:if>
-						>
-					   <fmt:message key="button.open.im"/>
-				    </a>
-				</td>
-			</tr>
-			<tr>
-				<td class="fieldLabel">
-					<fmt:message key="lesson.change.state"/>
-				</td>
-				<td>
-					<select id="lessonStateField" class="lessonManageField">
-						<option value="-1"><fmt:message key="lesson.select.state"/></option>
-					</select>
-					<a class="button" href="#"
-					   onClick="javascript:changeLessonState()"
-					   title='<fmt:message key="lesson.change.state.tooltip"/>'>
-					   <fmt:message key="button.apply"/>
-				    </a>
-				</td>
-			</tr>
-			<tr>
-				<td class="fieldLabel">
-					<fmt:message key="lesson.start"/>
-				</td>
-				<td id="lessonStartDateCell">
-					<span id="lessonStartDateSpan" class="lessonManageField"></span>
-					<input id="scheduleDatetimeField" class="lessonManageField"/>
-					<a id="scheduleLessonButton" class="button lessonManageField" href="#"
-					   onClick="javascript:scheduleLesson()"
-					   title='<fmt:message key="button.schedule.tooltip"/>'>
-					   <fmt:message key="button.schedule"/>
-					</a>
-					<a id="startLessonButton" class="button" href="#"
-					   onClick="javascript:startLesson()"
-					   title='<fmt:message key="button.start.now.tooltip"/>'>
-					   <fmt:message key="button.start.now"/>
-					</a>
-				</td>
-			</tr>
-			<tr>
-				<td>
-				</td>
-				<td>
-					<input type="checkbox" id="presenceAvailableField"
-						<c:if test="${lesson.learnerPresenceAvailable}">
-							checked="checked"
-						</c:if> 
-					/>
-					<fmt:message key="lesson.enable.presence"/>
-					<span id="presenceAvailableCount">(<span>0</span>
-						<fmt:message key="lesson.presence.count"/>)
-					</span>
-					<br />
-					<input type="checkbox" id="imAvailableField"
-						<c:if test="${not lesson.learnerPresenceAvailable}">
-							disabled="disabled"
-						</c:if>
-						<c:if test="${lesson.learnerImAvailable}">
-							checked="checked"
-						</c:if> 
-					/>
-					<fmt:message key="lesson.enable.im"/>
-				</td>
-			</tr>
-			<tr id="contributeHeader">
-				<td colspan="2" class="sectionHeader">
-					<fmt:message key="lesson.required.tasks"/>
-				</td>
-			</tr>
-			<c:forEach var="activity" items="${contributeActivities}">
-				<tr class="contributeRow">
-					<td colspan="2" class="contributeActivityCell">
-						<c:out value="${activity.title}" />
-					</td>
-				</tr>
-				<c:forEach var="entry" items="${activity.contributeEntries}">
-					<c:if test="${entry.isRequired}">
-						<tr class="contributeRow">
-							<td colspan="2" class="contributeEntryCell">
-								<c:choose>
-									<c:when test="${entry.contributionType eq 3}">
-										<fmt:message key="lesson.task.gate"/>
-									</c:when>
-									<c:when test="${entry.contributionType eq 6}">
-										<fmt:message key="lesson.task.grouping"/>
-									</c:when>
-									<c:when test="${entry.contributionType eq 9}">
-										<fmt:message key="lesson.task.branching"/>
-									</c:when>
-								</c:choose>
-								<a href="#" class="button"
-								   onClick="javascript:openPopUp('${entry.URL}','ContributeActivity', 600, 800, true)"
-								   title='<fmt:message key="button.task.go.tooltip"/>'>
-								   <fmt:message key="button.task.go"/>
-								</a>
-							</td>
-						</tr>
-					</c:if>
-				</c:forEach>
-			</c:forEach>
-		</table>
-	</div>
-	
-	<div id="tabSequence">
-		<div id="sequenceTopButtonsContainer" class="topButtonsContainer">
-			<a id="helpButton" target="_blank" class="button" title="<fmt:message key='button.help.tooltip'/>"
-			   href="http://wiki.lamsfoundation.org/display/lamsdocs/monitoringsequence">
-				<fmt:message key="button.help"/>
-			</a>
-			<a id="refreshButton" class="button" title="<fmt:message key='button.refresh.tooltip'/>"
-			   href="#" onClick="javascript:refreshMonitor('sequence')">
-				<fmt:message key="button.refresh"/>
-			</a>
-			<c:if test="${enableLiveEdit && lesson.liveEditEnabled}">
-				<a id="liveEditButton" class="button" title="<fmt:message key='button.live.edit.tooltip'/>"
-			       href="#"
-			  	   onClick="javascript:openLiveEdit()">
-					<fmt:message key='button.live.edit'/>
-				</a>
-			</c:if>
-			<span id="sequenceSearchPhraseClear"
-				 class="ui-icon ui-icon-circle-close"
-				 onClick="javascript:sequenceClearSearchPhrase(true)"
-				 title="<fmt:message key='learners.search.phrase.clear.tooltip' />" 
-			></span>
-			<input id="sequenceSearchPhrase"
-				   title="<fmt:message key='search.learner.textbox' />" />
-			<span id="sequenceSearchPhraseIcon"
-				  class="ui-icon ui-icon-search"
-				  title="<fmt:message key='search.learner.textbox' />"></span>
-		</div>
-		<div id="sequenceCanvas"></div>
-		<div id="completedLearnersContainer" title="<fmt:message key='force.complete.end.lesson.tooltip' />">
-			<img id="completedLearnersDoorIcon" src="<lams:LAMSURL/>images/icons/door_open.png" />
-		</div>
-		<img id="sequenceCanvasLoading"
-		     src="<lams:LAMSURL/>images/ajax-loader-big.gif" />
-		<img id="sequenceSearchedLearnerHighlighter"
-		     src="<lams:LAMSURL/>images/pedag_down_arrow.gif" />
-	</div>
-	
-	<div id="tabLearners">
-		<table id="tabLearnerControlTable">
-			<tr>
-				<td class="learnersHeaderCell">
-					<fmt:message key='learners.page' /><br />
-					<span id="learnersPageCounter" />
-				</td>
-				<td class="learnersHeaderCell">
-					<span id="learnersSearchPhraseIcon" 
+					<span id="sequenceSearchPhraseClear"
+						 class="ui-icon ui-icon-circle-close"
+						 onClick="javascript:sequenceClearSearchPhrase(true)"
+						 title="<fmt:message key='learners.search.phrase.clear.tooltip' />" 
+					></span>
+					<input id="sequenceSearchPhrase"
+						   title="<fmt:message key='search.learner.textbox' />" />
+					<span id="sequenceSearchPhraseIcon"
 						  class="ui-icon ui-icon-search"
 						  title="<fmt:message key='search.learner.textbox' />"></span>
-					<input id="learnersSearchPhrase" 
-						   title="<fmt:message key='search.learner.textbox' />"/>
-					<span id="learnersSearchPhraseClear"
-						  class="ui-icon ui-icon-circle-close"
-						  onClick="javascript:learnersClearSearchPhrase()"
-						  title="<fmt:message key='learners.search.phrase.clear.tooltip' />" 
-					></span>
-				</td>
-				<td id="learnersPageLeft"
-					class="learnersHeaderCell learnersPageShifter"
-					title="<fmt:message key='learner.group.backward.10'/>"
-				    onClick="javascript:learnersPageShift(false)"
-				><span class="ui-icon ui-icon-seek-prev"></span></td>
-				<td id="learnersPageRight"
-					class="learnersHeaderCell learnersPageShifter"
-					title="<fmt:message key='learner.group.forward.10'/>"
-					onClick="javascript:learnersPageShift(true)"
-				><span class="ui-icon ui-icon-seek-next"></span></td>
-				<td class="learnersHeaderCell">
-					<fmt:message key='learners.order' /><br />
-					<input id="orderByCompletionCheckbox" type="checkbox" 
-						   onChange="javascript:loadLearnerProgressPage()" />
-				</td>
-				<td class="topButtonsContainer">
-					<a target="_blank" class="button" title="<fmt:message key='button.help.tooltip'/>"
-			   		   href="http://wiki.lamsfoundation.org/display/lamsdocs/monitoringlearners">
-			   		   <fmt:message key="button.help"/></a>
-					<a class="button" title="<fmt:message key='button.refresh.tooltip'/>"
-					   href="#" onClick="javascript:refreshMonitor('learners')">
-					   <fmt:message key="button.refresh"/></a>
-					<a class="button" title="<fmt:message key='button.journal.entries.tooltip'/>"
-			   		   href="#"
-			           onClick="javascript:openPopUp('<lams:LAMSURL/>learning/notebook.do?method=viewAllJournals&lessonID=${lesson.lessonID}', 'JournalEntries', 570, 796, true)">
-			           <fmt:message key="button.journal.entries"/></a>
-				</td>
-			</tr>
-		</table>
-		
-		<div id="tabLearnersContainer">
-			<table id="tabLearnersTable"></table>
+				</div>
+				<div id="sequenceCanvas"></div>
+				<div id="completedLearnersContainer" title="<fmt:message key='force.complete.end.lesson.tooltip' />">
+					<img id="completedLearnersDoorIcon" src="<lams:LAMSURL/>images/icons/door_open.png" />
+				</div>
+				<img id="sequenceCanvasLoading"
+				     src="<lams:LAMSURL/>images/ajax-loader-big.gif" />
+				<img id="sequenceSearchedLearnerHighlighter"
+				     src="<lams:LAMSURL/>images/pedag_down_arrow.gif" />
+			</div>
+			
+			<div id="tabLearners">
+				<table id="tabLearnerControlTable">
+					<tr>
+						<td class="learnersHeaderCell">
+							<fmt:message key='learners.page' /><br />
+							<span id="learnersPageCounter" />
+						</td>
+						<td class="learnersHeaderCell">
+							<span id="learnersSearchPhraseIcon" 
+								  class="ui-icon ui-icon-search"
+								  title="<fmt:message key='search.learner.textbox' />"></span>
+							<input id="learnersSearchPhrase" 
+								   title="<fmt:message key='search.learner.textbox' />"/>
+							<span id="learnersSearchPhraseClear"
+								  class="ui-icon ui-icon-circle-close"
+								  onClick="javascript:learnersClearSearchPhrase()"
+								  title="<fmt:message key='learners.search.phrase.clear.tooltip' />" 
+							></span>
+						</td>
+						<td id="learnersPageLeft"
+							class="learnersHeaderCell learnersPageShifter"
+							title="<fmt:message key='learner.group.backward.10'/>"
+						    onClick="javascript:learnersPageShift(false)"
+						><span class="ui-icon ui-icon-seek-prev"></span></td>
+						<td id="learnersPageRight"
+							class="learnersHeaderCell learnersPageShifter"
+							title="<fmt:message key='learner.group.forward.10'/>"
+							onClick="javascript:learnersPageShift(true)"
+						><span class="ui-icon ui-icon-seek-next"></span></td>
+						<td class="learnersHeaderCell">
+							<fmt:message key='learners.order' /><br />
+							<input id="orderByCompletionCheckbox" type="checkbox" 
+								   onChange="javascript:loadLearnerProgressPage()" />
+						</td>
+						<td class="topButtonsContainer">
+							<a target="_blank" class="btn btn-sm btn-default" title="<fmt:message key='button.help.tooltip'/>"
+					   		   href="http://wiki.lamsfoundation.org/display/lamsdocs/monitoringlearners">
+					   		   <i class="fa fa-question-circle"></i> <span class="hidden-xs"><fmt:message key="button.help"/></span></a>
+							<a class="btn btn-sm btn-default" title="<fmt:message key='button.refresh.tooltip'/>"
+							   href="#" onClick="javascript:refreshMonitor('learners')">
+							   <i class="fa fa-refresh"></i> <span class="hidden-xs"><fmt:message key="button.refresh"/></span></a>
+							<a class="btn btn-sm btn-default" title="<fmt:message key='button.journal.entries.tooltip'/>"
+					   		   href="#"
+					           onClick="javascript:openPopUp('<lams:LAMSURL/>learning/notebook.do?method=viewAllJournals&lessonID=${lesson.lessonID}', 'JournalEntries', 570, 796, true)">
+					           <i class="fa fa-book"></i> <span class="hidden-xs"><fmt:message key="button.journal.entries"/></span></a>
+						</td>
+					</tr>
+				</table>
+				
+				<div id="tabLearnersContainer">
+					<div class="table-responsive">
+						<table id="tabLearnersTable" class="table table-condensed table-responsive"></table>
+					</div>
+				</div>
+			</div>
+			
+			<!-- Inner dialog placeholders -->
+			
+			<div id="learnerGroupDialog" class="dialogContainer">
+				<span id="learnerGroupMultiSelectLabel"><fmt:message key='learner.group.multi.select'/></span>
+				<table>
+					<tr id="learnerGroupSearchRow">
+						<td>
+							<span class="dialogSearchPhraseIcon ui-icon ui-icon-search"
+								  title="<fmt:message key='search.learner.textbox' />"></span>
+						</td>
+						<td colspan="4">
+							<input class="dialogSearchPhrase" 
+								   title="<fmt:message key='search.learner.textbox' />"/>
+						</td>
+						<td>
+							<span class="dialogSearchPhraseClear ui-icon ui-icon-circle-close"
+								  onClick="javascript:learnerGroupClearSearchPhrase()"
+								  title="<fmt:message key='learners.search.phrase.clear.tooltip' />" 
+							></span>
+						</td>
+					</tr>
+					<tr>
+						<td class="navCell pageMinus10Cell"
+							title="<fmt:message key='learner.group.backward.10'/>"
+							onClick="javascript:shiftLearnerGroupList(-10)">
+								<span class="ui-icon ui-icon-seek-prev"></span>
+						</td>
+						<td class="navCell pageMinus1Cell"
+							title="<fmt:message key='learner.group.backward.1'/>"
+							onClick="javascript:shiftLearnerGroupList(-1)">
+							<span class="ui-icon ui-icon-arrowthick-1-w"></span>
+						</td>
+						<td class="pageCell"
+							title="<fmt:message key='learners.page'/>">
+						</td>
+						<td class="navCell pagePlus1Cell"
+							title="<fmt:message key='learner.group.forward.1'/>"
+							onClick="javascript:shiftLearnerGroupList(1)">
+								<span class="ui-icon ui-icon-arrowthick-1-e"></span>
+						</td>
+						<td class="navCell pagePlus10Cell" 
+							title="<fmt:message key='learner.group.forward.10'/>"
+							onClick="javascript:shiftLearnerGroupList(10)">
+								<span class="ui-icon ui-icon-seek-next"></span>
+						</td>
+						<td class="navCell sortCell" 
+							title="<fmt:message key='learner.group.sort.button'/>" 
+							onClick="javascript:sortLearnerGroupList()">
+								<span class="ui-icon ui-icon-triangle-1-n"></span>
+						</td>
+					</tr>
+					<tr>
+						<td colspan="6" class="dialogList"></td>
+					</tr>
+				</table>
+			</div>
+				
+			<div id="classDialog" class="dialogContainer">
+				<table id="classDialogTable">
+					<tr>
+						<td>
+							<table id="classLearnerTable">
+								<tr>
+									<td class="dialogTitle" colspan="6">
+										<fmt:message key="lesson.learners"/>
+									</td>
+								</tr>
+								<tr>
+									<td>
+										<span class="dialogSearchPhraseIcon ui-icon ui-icon-search"
+											  title="<fmt:message key='search.learner.textbox' />"></span>
+									</td>
+									<td colspan="4">
+										<input class="dialogSearchPhrase" 
+											   title="<fmt:message key='search.learner.textbox' />"/>
+									</td>
+									<td>
+										<span class="dialogSearchPhraseClear ui-icon ui-icon-circle-close"
+											  onClick="javascript:classClearSearchPhrase()"
+											  title="<fmt:message key='learners.search.phrase.clear.tooltip' />" 
+										></span>
+									</td>
+								</tr>
+								<tr>
+									<td class="navCell pageMinus10Cell"
+										title="<fmt:message key='learner.group.backward.10'/>"
+										onClick="javascript:shiftClassList('Learner', -10)">
+											<span class="ui-icon ui-icon-seek-prev"></span>
+									</td>
+									<td class="navCell pageMinus1Cell"
+										title="<fmt:message key='learner.group.backward.1'/>"
+										onClick="javascript:shiftClassList('Learner', -1)">
+										<span class="ui-icon ui-icon-arrowthick-1-w"></span>
+									</td>
+									<td class="pageCell"
+										title="<fmt:message key='learners.page'/>">
+									</td>
+									<td class="navCell pagePlus1Cell"
+										title="<fmt:message key='learner.group.forward.1'/>"
+										onClick="javascript:shiftClassList('Learner', 1)">
+											<span class="ui-icon ui-icon-arrowthick-1-e"></span>
+									</td>
+									<td class="navCell pagePlus10Cell" 
+										title="<fmt:message key='learner.group.forward.10'/>"
+										onClick="javascript:shiftClassList('Learner', 10)">
+											<span class="ui-icon ui-icon-seek-next"></span>
+									</td>
+									<td class="navCell sortCell" 
+										title="<fmt:message key='learner.group.sort.button'/>" 
+										onClick="javascript:sortClassList('Learner')">
+											<span class="ui-icon ui-icon-triangle-1-n"></span>
+									</td>
+								</tr>
+								<tr>
+									<td class="dialogList" colspan="6">
+									</td>
+								</tr>
+							</table>
+						</td>
+						<td>
+							<table id="classMonitorTable">
+								<tr>
+									<td class="dialogTitle" colspan="6">
+										<fmt:message key="lesson.monitors"/>
+									</td>
+								</tr>
+								<tr>
+									<td id="classMonitorSearchRow" colspan="6">&nbsp;</td>
+								</tr>
+								<tr>
+									<td class="navCell pageMinus10Cell"
+										title="<fmt:message key='learner.group.backward.10'/>"
+										onClick="javascript:shiftClassList('Monitor', -10)">
+											<span class="ui-icon ui-icon-seek-prev"></span>
+									</td>
+									<td class="navCell pageMinus1Cell"
+										title="<fmt:message key='learner.group.backward.1'/>"
+										onClick="javascript:shiftClassList('Monitor', -1)">
+										<span class="ui-icon ui-icon-arrowthick-1-w"></span>
+									</td>
+									<td class="pageCell"
+										title="<fmt:message key='learners.page'/>">
+									</td>
+									<td class="navCell pagePlus1Cell"
+										title="<fmt:message key='learner.group.forward.1'/>"
+										onClick="javascript:shiftClassList('Monitor', 1)">
+											<span class="ui-icon ui-icon-arrowthick-1-e"></span>
+									</td>
+									<td class="navCell pagePlus10Cell" 
+										title="<fmt:message key='learner.group.forward.10'/>"
+										onClick="javascript:shiftClassList('Monitor', 10)">
+											<span class="ui-icon ui-icon-seek-next"></span>
+									</td>
+									<td class="navCell sortCell" 
+										title="<fmt:message key='learner.group.sort.button'/>" 
+										onClick="javascript:sortClassList('Monitor')">
+											<span class="ui-icon ui-icon-triangle-1-n"></span>
+									</td>
+								</tr>
+								<tr>
+									<td class="dialogList" colspan="6">
+									</td>
+								</tr>
+							</table>
+						</td>
+					</tr>
+				</table>
+			</div>
+			
+			<div id="emailDialog" class="dialogContainer">
+				<iframe id="emailFrame"></iframe>
+			</div>
+			
+			<div id="sequenceInfoDialog" class="dialogContainer">
+			  <fmt:message key="sequence.help.info"/>
+			</div>
+			
+			<div id="forceBackwardsDialog" class="dialogContainer"></div>
+			
+			<div id="tooltip"></div>
 		</div>
 	</div>
-	
-	<!-- Inner dialog placeholders -->
-	
-	<div id="learnerGroupDialog" class="dialogContainer">
-		<span id="learnerGroupMultiSelectLabel"><fmt:message key='learner.group.multi.select'/></span>
-		<table>
-			<tr id="learnerGroupSearchRow">
-				<td>
-					<span class="dialogSearchPhraseIcon ui-icon ui-icon-search"
-						  title="<fmt:message key='search.learner.textbox' />"></span>
-				</td>
-				<td colspan="4">
-					<input class="dialogSearchPhrase" 
-						   title="<fmt:message key='search.learner.textbox' />"/>
-				</td>
-				<td>
-					<span class="dialogSearchPhraseClear ui-icon ui-icon-circle-close"
-						  onClick="javascript:learnerGroupClearSearchPhrase()"
-						  title="<fmt:message key='learners.search.phrase.clear.tooltip' />" 
-					></span>
-				</td>
-			</tr>
-			<tr>
-				<td class="navCell pageMinus10Cell"
-					title="<fmt:message key='learner.group.backward.10'/>"
-					onClick="javascript:shiftLearnerGroupList(-10)">
-						<span class="ui-icon ui-icon-seek-prev"></span>
-				</td>
-				<td class="navCell pageMinus1Cell"
-					title="<fmt:message key='learner.group.backward.1'/>"
-					onClick="javascript:shiftLearnerGroupList(-1)">
-					<span class="ui-icon ui-icon-arrowthick-1-w"></span>
-				</td>
-				<td class="pageCell"
-					title="<fmt:message key='learners.page'/>">
-				</td>
-				<td class="navCell pagePlus1Cell"
-					title="<fmt:message key='learner.group.forward.1'/>"
-					onClick="javascript:shiftLearnerGroupList(1)">
-						<span class="ui-icon ui-icon-arrowthick-1-e"></span>
-				</td>
-				<td class="navCell pagePlus10Cell" 
-					title="<fmt:message key='learner.group.forward.10'/>"
-					onClick="javascript:shiftLearnerGroupList(10)">
-						<span class="ui-icon ui-icon-seek-next"></span>
-				</td>
-				<td class="navCell sortCell" 
-					title="<fmt:message key='learner.group.sort.button'/>" 
-					onClick="javascript:sortLearnerGroupList()">
-						<span class="ui-icon ui-icon-triangle-1-n"></span>
-				</td>
-			</tr>
-			<tr>
-				<td colspan="6" class="dialogList"></td>
-			</tr>
-		</table>
-	</div>
-		
-	<div id="classDialog" class="dialogContainer">
-		<table id="classDialogTable">
-			<tr>
-				<td>
-					<table id="classLearnerTable">
-						<tr>
-							<td class="dialogTitle" colspan="6">
-								<fmt:message key="lesson.learners"/>
-							</td>
-						</tr>
-						<tr>
-							<td>
-								<span class="dialogSearchPhraseIcon ui-icon ui-icon-search"
-									  title="<fmt:message key='search.learner.textbox' />"></span>
-							</td>
-							<td colspan="4">
-								<input class="dialogSearchPhrase" 
-									   title="<fmt:message key='search.learner.textbox' />"/>
-							</td>
-							<td>
-								<span class="dialogSearchPhraseClear ui-icon ui-icon-circle-close"
-									  onClick="javascript:classClearSearchPhrase()"
-									  title="<fmt:message key='learners.search.phrase.clear.tooltip' />" 
-								></span>
-							</td>
-						</tr>
-						<tr>
-							<td class="navCell pageMinus10Cell"
-								title="<fmt:message key='learner.group.backward.10'/>"
-								onClick="javascript:shiftClassList('Learner', -10)">
-									<span class="ui-icon ui-icon-seek-prev"></span>
-							</td>
-							<td class="navCell pageMinus1Cell"
-								title="<fmt:message key='learner.group.backward.1'/>"
-								onClick="javascript:shiftClassList('Learner', -1)">
-								<span class="ui-icon ui-icon-arrowthick-1-w"></span>
-							</td>
-							<td class="pageCell"
-								title="<fmt:message key='learners.page'/>">
-							</td>
-							<td class="navCell pagePlus1Cell"
-								title="<fmt:message key='learner.group.forward.1'/>"
-								onClick="javascript:shiftClassList('Learner', 1)">
-									<span class="ui-icon ui-icon-arrowthick-1-e"></span>
-							</td>
-							<td class="navCell pagePlus10Cell" 
-								title="<fmt:message key='learner.group.forward.10'/>"
-								onClick="javascript:shiftClassList('Learner', 10)">
-									<span class="ui-icon ui-icon-seek-next"></span>
-							</td>
-							<td class="navCell sortCell" 
-								title="<fmt:message key='learner.group.sort.button'/>" 
-								onClick="javascript:sortClassList('Learner')">
-									<span class="ui-icon ui-icon-triangle-1-n"></span>
-							</td>
-						</tr>
-						<tr>
-							<td class="dialogList" colspan="6">
-							</td>
-						</tr>
-					</table>
-				</td>
-				<td>
-					<table id="classMonitorTable">
-						<tr>
-							<td class="dialogTitle" colspan="6">
-								<fmt:message key="lesson.monitors"/>
-							</td>
-						</tr>
-						<tr>
-							<td id="classMonitorSearchRow" colspan="6">&nbsp;</td>
-						</tr>
-						<tr>
-							<td class="navCell pageMinus10Cell"
-								title="<fmt:message key='learner.group.backward.10'/>"
-								onClick="javascript:shiftClassList('Monitor', -10)">
-									<span class="ui-icon ui-icon-seek-prev"></span>
-							</td>
-							<td class="navCell pageMinus1Cell"
-								title="<fmt:message key='learner.group.backward.1'/>"
-								onClick="javascript:shiftClassList('Monitor', -1)">
-								<span class="ui-icon ui-icon-arrowthick-1-w"></span>
-							</td>
-							<td class="pageCell"
-								title="<fmt:message key='learners.page'/>">
-							</td>
-							<td class="navCell pagePlus1Cell"
-								title="<fmt:message key='learner.group.forward.1'/>"
-								onClick="javascript:shiftClassList('Monitor', 1)">
-									<span class="ui-icon ui-icon-arrowthick-1-e"></span>
-							</td>
-							<td class="navCell pagePlus10Cell" 
-								title="<fmt:message key='learner.group.forward.10'/>"
-								onClick="javascript:shiftClassList('Monitor', 10)">
-									<span class="ui-icon ui-icon-seek-next"></span>
-							</td>
-							<td class="navCell sortCell" 
-								title="<fmt:message key='learner.group.sort.button'/>" 
-								onClick="javascript:sortClassList('Monitor')">
-									<span class="ui-icon ui-icon-triangle-1-n"></span>
-							</td>
-						</tr>
-						<tr>
-							<td class="dialogList" colspan="6">
-							</td>
-						</tr>
-					</table>
-				</td>
-			</tr>
-		</table>
-	</div>
-	
-	<div id="emailDialog" class="dialogContainer">
-		<iframe id="emailFrame"></iframe>
-	</div>
-	
-	<div id="sequenceInfoDialog" class="dialogContainer">
-		<fmt:message key="sequence.help.info"/>
-	</div>
-	
-	<div id="forceBackwardsDialog" class="dialogContainer"></div>
-	
-	<div id="tooltip"></div>
-</div>
 </body>
 </lams:html>
\ No newline at end of file