Index: lams_central/web/orgGroup.jsp
===================================================================
diff -u -rbda1ae3773b097fded724ec9010fb2a271b76d0c -r970546106e9b05a4d1a507b26be2ce96130b4f01
--- lams_central/web/orgGroup.jsp	(.../orgGroup.jsp)	(revision bda1ae3773b097fded724ec9010fb2a271b76d0c)
+++ lams_central/web/orgGroup.jsp	(.../orgGroup.jsp)	(revision 970546106e9b05a4d1a507b26be2ce96130b4f01)
@@ -7,43 +7,45 @@
 <lams:html>
 <lams:head>
 	<lams:css style="main" />
-	<link rel="stylesheet" href="css/jquery-ui-redmond-theme.css" type="text/css" media="screen" />
+	<link rel="stylesheet" href="css/defaultHTML_learner.css" type="text/css" media="screen" />
+	<link rel="stylesheet" href="css/jquery-ui-bootstrap-theme.css" type="text/css" media="screen" />
 	<link rel="stylesheet" href="css/orgGroup.css" type="text/css" media="screen" />
 
 	<c:set var="lessonMode" value="${not empty param.activityID}" />
 
 	<script type="text/javascript" src="includes/javascript/jquery.js"></script>
 	<script type="text/javascript" src="includes/javascript/jquery-ui.js"></script>
-	<script type="text/javascript" src="includes/javascript/groupDisplay.js"></script>
+	<script type="text/javascript" src="includes/javascript/bootstrap.min.js"></script>
 	<script type="text/javascript" src="includes/javascript/dialog.js"></script>
 	<script type="text/javascript" src="includes/javascript/orgGroup.js"></script>
 	<script type="text/javascript">;
-		var grouping = ${grouping};
-		var unassignedUsers = ${unassignedUsers};
-		var canEdit = ${canEdit};
-		var groupingActivityId = '${param.activityID}';
-		var lessonMode = ${lessonMode};
-		// This attribute can be empty.
-		// When true, it means that it shows already existing groups so no calls to server are needed.
-		var skipAssigningWhenCreatingGroup = ${skipInitialAssigning eq true};
-		// This attribute can be empty.
-		// When true, it means that groups can not be added or removed, but user can be still moved.
-		var usedForBranching = ${usedForBranching eq true};
+		var grouping = ${grouping},
+			organisationId = grouping.organisationId,
+			unassignedUsers = ${unassignedUsers},
+			canEdit = ${canEdit},
+			groupingActivityId = '${param.activityID}',
+			lessonMode = ${lessonMode},
+			// This attribute can be empty.
+			// When true, it means that it shows already existing groups so no calls to server are needed.
+			skipAssigningWhenCreatingGroup = ${skipInitialAssigning eq true},
+			// This attribute can be empty.
+			// When true, it means that groups can not be added or removed, but user can be still moved.
+			usedForBranching = ${usedForBranching eq true},
 		
-		var LAMS_URL = '<lams:LAMSURL/>';
-		var decoderDiv = $('<div />');
-		var LABELS = {
-			<fmt:message key="label.course.groups.prefix" var="GROUP_PREFIX_LABEL_VAR"/>
-			GROUP_PREFIX_LABEL : '<c:out value="${GROUP_PREFIX_LABEL_VAR}" />',
-			<fmt:message key="label.course.groups.remove.confirm" var="GROUP_REMOVE_LABEL_VAR"/>
-			GROUP_REMOVE_LABEL : decoderDiv.html('<c:out value="${GROUP_REMOVE_LABEL_VAR}" />').text(),
-			<fmt:message key="label.course.groups.remove.empty.confirm" var="EMPTY_GROUP_SAVE_LABEL_VAR"/>
-			EMPTY_GROUP_SAVE_LABEL : decoderDiv.html('<c:out value="${EMPTY_GROUP_SAVE_LABEL_VAR}" />').text(),
-			<fmt:message key="label.course.groups.locked" var="GROUP_LOCK_LABEL_VAR"/>
-			GROUP_LOCK_LABEL : decoderDiv.html('<c:out value="${GROUP_LOCK_LABEL_VAR}" />').text(),
-			<fmt:message key="label.course.groups.locked.transfer" var="TRANSFER_LOCKED_LABEL_VAR"/>
-			TRANSFER_LOCKED_LABEL : decoderDiv.html('<c:out value="${TRANSFER_LOCKED_LABEL_VAR}" />').text()
-		};
+			LAMS_URL = '<lams:LAMSURL/>',
+			decoderDiv = $('<div />'),
+			LABELS = {
+				<fmt:message key="label.course.groups.prefix" var="GROUP_PREFIX_LABEL_VAR"/>
+				GROUP_PREFIX_LABEL : '<c:out value="${GROUP_PREFIX_LABEL_VAR}" />',
+				<fmt:message key="label.course.groups.remove.confirm" var="GROUP_REMOVE_LABEL_VAR"/>
+				GROUP_REMOVE_LABEL : decoderDiv.html('<c:out value="${GROUP_REMOVE_LABEL_VAR}" />').text(),
+				<fmt:message key="label.course.groups.remove.empty.confirm" var="EMPTY_GROUP_SAVE_LABEL_VAR"/>
+				EMPTY_GROUP_SAVE_LABEL : decoderDiv.html('<c:out value="${EMPTY_GROUP_SAVE_LABEL_VAR}" />').text(),
+				<fmt:message key="label.course.groups.locked" var="GROUP_LOCK_LABEL_VAR"/>
+				GROUP_LOCK_LABEL : decoderDiv.html('<c:out value="${GROUP_LOCK_LABEL_VAR}" />').text(),
+				<fmt:message key="label.course.groups.locked.transfer" var="TRANSFER_LOCKED_LABEL_VAR"/>
+				TRANSFER_LOCKED_LABEL : decoderDiv.html('<c:out value="${TRANSFER_LOCKED_LABEL_VAR}" />').text()
+			};
 	</script>
 </lams:head>
 <body>
@@ -52,24 +54,13 @@
 	<c:choose>
 		<c:when test="${lessonMode}">
 			<!-- Button opening grouping page again -->
-			<div id="backButton" class="ui-button">
+			<button id="backButton" class="btn btn-default"
+				 onClick="javascript:document.location.href=LAMS_URL + 'OrganisationGroup.do?method=viewGroupings&organisationID='+orgID+'&activityID='+activityID">
+				<i class="fa fa-users"></i>
 				<fmt:message key="label.course.groups.back" />
-			</div>
+			</button>
 		</c:when>
 		<c:otherwise>
-			<c:if test="${canEdit}">
-				<!-- It has to have inline style as it gets appended to dialog titlebar
-				     where local CSS is not visible -->
-				<a class="customDialogButton" href="#" onClick="javascript:saveOrgGroups()" style="right: 80px;">
-					<fmt:message key="button.save" />
-				</a>
-			</c:if>
-			<a class="customDialogButton" href="#"
-			   onClick="javascript:showOrgGroupDialogContents(null, 460, 460,'<lams:LAMSURL/>OrganisationGroup.do?method=viewGroupings&organisationID=' + $('#dialogOrgGroup').dialog('option', 'orgID'))"
-			   style="right: 170px;">
-				<fmt:message key="label.course.groups.back" />
-			</a>
-	
 			<fmt:message key="label.course.groups.name" />
 			<input id="groupingName" type="text"
 				<c:if test="${not canEdit or lessonMode}">
@@ -80,21 +71,34 @@
 			<span id="groupingNameBlankError" class="errorMessage">
 				<fmt:message key="label.course.groups.name.blank" />
 			</span>
+			
+			<c:if test="${canEdit}">
+				<button class="pull-right btn btn-default" onClick="javascript:saveGroups()">
+					<i class="fa fa-save"></i>
+					<span><fmt:message key="button.save" /></span>
+				</button>
+			</c:if>
+			<button class="pull-right btn btn-default" 
+			   onClick="javascript:window.parent.showOrgGroupingDialog(organisationId)"
+			>
+				<i class="fa fa-users"></i>
+				<fmt:message key="label.course.groups.back" />
+			</button>
 		</c:otherwise>
 	</c:choose>
-	
-	<span id="titleInstructions">
-		<c:choose>
-			<c:when test="${canEdit}">
-				<fmt:message key="label.course.groups.edit.title" />
-			</c:when>
-			<c:otherwise>
-				<fmt:message key="label.course.groups.viewonly.title" />
-			</c:otherwise>
-		</c:choose>
-	</span>
 </div>
 
+<div id="titleInstructions">
+	<c:choose>
+		<c:when test="${canEdit}">
+			<fmt:message key="label.course.groups.edit.title" />
+		</c:when>
+		<c:otherwise>
+			<fmt:message key="label.course.groups.viewonly.title" />
+		</c:otherwise>
+	</c:choose>
+</div>
+
 <table id="groupsTable">
 	<tr>
 		<td id="unassignedUserCell">
@@ -119,8 +123,7 @@
 <div id="groupTemplate" class="groupContainer">
 	<div class="userContainerTitle">
 		<c:if test="${canEdit and not usedForBranching}">
-			<img class="removeGroupButton" src="<lams:LAMSURL/>images/css/delete.png"
-		    	 title="<fmt:message key='label.course.groups.remove.tooltip' />" />
+			<i class="removeGroupButton fa fa-remove fa-2x" title="<fmt:message key='label.course.groups.remove.tooltip' />" ></i>
 		</c:if>
 		<input type="text" 
 			<c:if test="${not canEdit}">