Index: lams_central/web/orgGrouping.jsp
===================================================================
diff -u -r970546106e9b05a4d1a507b26be2ce96130b4f01 -r2d50303390a6ea1ec157a3a1390ecf3833c0339c
--- lams_central/web/orgGrouping.jsp	(.../orgGrouping.jsp)	(revision 970546106e9b05a4d1a507b26be2ce96130b4f01)
+++ lams_central/web/orgGrouping.jsp	(.../orgGrouping.jsp)	(revision 2d50303390a6ea1ec157a3a1390ecf3833c0339c)
@@ -8,59 +8,21 @@
 <lams:head>
 	<lams:css style="main" />
 	<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/orgGrouping.css" type="text/css" media="screen" />
-	<style type="text/css">
-		div.branchMappingDialog > table {
-			width: 100%;
-			height: 98%;
-			table-layout: fixed;
-			border-collapse: collapse;
-		}
-		
-		div.branchMappingDialog td {
-			text-align: center;
-			vertical-align: top;
-		}
-		
-		div.branchMappingDialog td.branchMappingLabelCell {
-			height: 15px;
-			font-weight: bold;
-		}
-		
-		div.branchMappingDialog td.branchMappingListCell {
-			border: thin black solid;
-			padding: 3px;
-		}
-		
-		div.branchMappingDialog td.branchMappingListCell .selected {
-			background-color: #5c9ccc;
-			color: white;
-		}
-		
-		div.branchMappingDialog .branchMappingButton {
-			width: 40%;
-			height: 25px;
-			display: block;
-			margin: auto;
-			margin-bottom: 20px;
-		}
-		
-		div.branchMappingDialog td.branchMappingListCell div {
-			text-align: left;
-			cursor: pointer;
-		}	
-	</style>
 	
 	<c:set var="lessonMode" value="${not empty param.activityID}" />
 	<c:set var="groupingMethod" value="${usedForBranching eq true ? 'openGroupMappingDialog' : 'viewGroups'}" />
 	
 	<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/bootstrap.min.js"></script>
 	<script type="text/javascript" src="includes/javascript/orgGrouping.js"></script>
+	<script type="text/javascript" src="includes/javascript/dialog.js"></script>
 	<script type="text/javascript">
 		var groupingActivityId = '${param.activityID}',
 			lessonMode = ${lessonMode},
-		// parameter can be null and the ID available only as a JSP attribute
+			// parameter can be null and the ID available only as a JSP attribute
 			organisationId = ${empty organisationID ? param.organisationID : organisationID},
 			lessonId = '${param.lessonID}',
 		
@@ -114,43 +76,55 @@
 	</div>
 </c:if>
 	
-	<c:if test="${usedForBranching eq true}">
-		<div id="groupMappingDialog" class="branchMappingDialog" style="display:none">
-			<table>
-				<tr>
-					<td></td>
-					<td></td>
-					<td rowspan="2"></td>
-					<td colspan="2" class="branchMappingLabelCell">
-						<fmt:message key="authoring.fla.page.dialog.mappings" />
-					</td>
-				</tr>
-				<tr>
-					<td class="branchMappingLabelCell branchMappingFreeItemHeaderCell">
-						<fmt:message key="authoring.fla.branch.mapping.course.groups.header" />
-					</td>
-					<td class="branchMappingLabelCell branchMappingFreeBranchHeaderCell">
-						<fmt:message key="authoring.fla.branch.mapping.branching.groups.header" />
-					</td>
-					<td class="branchMappingLabelCell branchMappingBoundItemHeaderCell">
-						<fmt:message key="authoring.fla.branch.mapping.course.groups.header" />
-					</td>
-					<td class="branchMappingLabelCell branchMappingBoundBranchHeaderCell">
-						<fmt:message key="authoring.fla.branch.mapping.branching.groups.header" />
-					</td>
-				</tr>
-				<tr>
-					<td class="branchMappingFreeItemCell branchMappingListCell"></td>
-					<td class="branchMappingFreeBranchCell branchMappingListCell"></td>
-					<td>
-						<div class="branchMappingAddButton branchMappingButton"></div>
-						<div class="branchMappingRemoveButton branchMappingButton"></div>
-					</td>
-					<td class="branchMappingBoundItemCell branchMappingListCell"></td>
-					<td class="branchMappingBoundBranchCell branchMappingListCell"></td>
-				</tr>
-			</table>
-		</div>
-	</c:if>
+<c:if test="${usedForBranching eq true}">
+	<div id="groupMappingDialogContents" style="display:none">
+		<table>
+			<tr>
+				<td></td>
+				<td></td>
+				<td rowspan="2"></td>
+				<td colspan="2" class="branchMappingLabelCell">
+					<fmt:message key="authoring.fla.page.dialog.mappings" />
+				</td>
+			</tr>
+			<tr>
+				<td class="branchMappingLabelCell branchMappingFreeItemHeaderCell">
+					<fmt:message key="authoring.fla.branch.mapping.course.groups.header" />
+				</td>
+				<td class="branchMappingLabelCell branchMappingFreeBranchHeaderCell">
+					<fmt:message key="authoring.fla.branch.mapping.branching.groups.header" />
+				</td>
+				<td class="branchMappingLabelCell branchMappingBoundItemHeaderCell">
+					<fmt:message key="authoring.fla.branch.mapping.course.groups.header" />
+				</td>
+				<td class="branchMappingLabelCell branchMappingBoundBranchHeaderCell">
+					<fmt:message key="authoring.fla.branch.mapping.branching.groups.header" />
+				</td>
+			</tr>
+			<tr>
+				<td class="branchMappingFreeItemCell branchMappingListCell"></td>
+				<td class="branchMappingFreeBranchCell branchMappingListCell"></td>
+				<td>
+					<button class="btn btn-default branchMappingAddButton branchMappingButton"><i class="fa fa-chevron-right"></i></button>
+					<button class="btn btn-default branchMappingRemoveButton branchMappingButton"><i class="fa fa-chevron-left"></i></button>
+				</td>
+				<td class="branchMappingBoundItemCell branchMappingListCell"></td>
+				<td class="branchMappingBoundBranchCell branchMappingListCell"></td>
+			</tr>
+			<tr>
+				<td colspan="5">
+					<div class="container-fluid">
+						<div class="pull-right btn-group" role="group">
+							<button id="branchMappingOKButton" class="btn btn-default">
+								<i class="fa fa-check"></i> 
+								<span><fmt:message key="authoring.fla.ok.button" /></span>
+							</button>
+						</div>
+					</div>
+				</td>
+			</tr>
+		</table>
+	</div>
+</c:if>
 </body>
 </lams:html>
\ No newline at end of file