Index: lams_tool_daco/conf/language/lams/ApplicationResources.properties
===================================================================
diff -u -r5e63656a12c02f7476564e278b43ff4ce86ac930 -rfd2dcf51ae6adf6aee088939b8c616b981e9a6d3
--- lams_tool_daco/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision 5e63656a12c02f7476564e278b43ff4ce86ac930)
+++ lams_tool_daco/conf/language/lams/ApplicationResources.properties	(.../ApplicationResources.properties)	(revision fd2dcf51ae6adf6aee088939b8c616b981e9a6d3)
@@ -253,6 +253,6 @@
 label.learning.submit  =Finish
 label.search=Search... 
 label.monitoring.average.number.records.heading=Average Number of Records
+label.scroll.hint=(Scroll the columns to see more records.)
 
-
 #======= End labels: Exported 246 labels for en AU =====
Index: lams_tool_daco/conf/language/lams/ApplicationResources_en_AU.properties
===================================================================
diff -u -r102a93686f5779e8caf5a693f388edda2e01f05d -rfd2dcf51ae6adf6aee088939b8c616b981e9a6d3
--- lams_tool_daco/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision 102a93686f5779e8caf5a693f388edda2e01f05d)
+++ lams_tool_daco/conf/language/lams/ApplicationResources_en_AU.properties	(.../ApplicationResources_en_AU.properties)	(revision fd2dcf51ae6adf6aee088939b8c616b981e9a6d3)
@@ -254,6 +254,6 @@
 label.learning.submit  =Finish
 label.search=Search... 
 label.monitoring.average.number.records.heading=Average Number of Records
+label.scroll.hint=(Scroll the columns to see more records.)
 
-
 #======= End labels: Exported 246 labels for en AU =====
Index: lams_tool_daco/web/includes/css/daco.css
===================================================================
diff -u -r303ad8a12ec300c1a2a56a9a7ebbf7629dc8c19f -rfd2dcf51ae6adf6aee088939b8c616b981e9a6d3
--- lams_tool_daco/web/includes/css/daco.css	(.../daco.css)	(revision 303ad8a12ec300c1a2a56a9a7ebbf7629dc8c19f)
+++ lams_tool_daco/web/includes/css/daco.css	(.../daco.css)	(revision fd2dcf51ae6adf6aee088939b8c616b981e9a6d3)
@@ -47,13 +47,33 @@
 div.bigNumber{
 	font-weight: bold;
 	font-size: larger;
-	padding-top: 5px;
 }
+
+table#recordListTable td, table#horizontalListTable td  {
+	/* cells must have the same height, otherwise they will be incorrectly aligned in horizontal record list*/
+	padding-left: 5px;
+	vertical-align: middle;
+	padding-right: 5px;
+}
+
+table#recordListTable td  {
+	background-color:#f9f9f9
+}
+
+
+table#recordListTable td.fixedCellHeight, table#horizontalListTable td.fixedCellHeight  {
+	/* cells must have the same height, otherwise they will be incorrectly aligned in horizontal record list*/
+	height: 150px;
+}
+
 table#summaryTable table.alternative-color-inner-table{
 	/* centers the table in the outer table column */
-	margin: auto
+	margin: auto;
 }
 
+table#recordListTable, table#recordListTable tr, table#recordListTable td{
+	border-right: none !important;
+}
 table#summaryTable td.singleSummaryCell {
 	vertical-align: middle;
 	text-align: center;
@@ -64,6 +84,6 @@
 	text-align: center;
 }
 
-table#recordListTable td.fixedCellWidth{
-	width: 160px;
-}
+border-thick { 
+	border-left-width: 3px;
+}
\ No newline at end of file
Index: lams_tool_daco/web/pages/learning/listRecords.jsp
===================================================================
diff -u -rff797553d39ffd161d228e0fd0c9ed736fdb6245 -rfd2dcf51ae6adf6aee088939b8c616b981e9a6d3
--- lams_tool_daco/web/pages/learning/listRecords.jsp	(.../listRecords.jsp)	(revision ff797553d39ffd161d228e0fd0c9ed736fdb6245)
+++ lams_tool_daco/web/pages/learning/listRecords.jsp	(.../listRecords.jsp)	(revision fd2dcf51ae6adf6aee088939b8c616b981e9a6d3)
@@ -66,22 +66,53 @@
 
 			<c:choose>
 			<c:when test="${horizontal}">
-				<%-- Link that displays the horizontal record list --%>
-				<c:url var="showRecordsUrl" value='/learning/diplayHorizontalRecordList.do'>
-					<c:param name="sessionMapID" value="${sessionMapID}" />
-					<c:if test="${includeMode=='monitoring'}">
-						<c:param name="userId" value="${user.userId}" />
-					</c:if>
-					<c:param name="includeMode" value="${includeMode}" />
-				</c:url>
-				<div id="${elementIdPrefix}horizontalRecordListFrame"></div>
-				<script type="text/javascript">
-				 	$("#${elementIdPrefix}horizontalRecordListFrame").load("${showRecordsUrl}");
-			    </script>
-<%-- 				<iframe id="${elementIdPrefix}horizontalRecordListFrame"
-						onLoad="javascript:resizeHorizontalRecordListFrame('${elementIdPrefix}',${fn:length(daco.dacoQuestions)});"
-						style="width: 100%;" frameborder="0" scrolling="auto" src="${showRecordsUrl}"></iframe>
- --%>			</c:when>
+
+				<div class="container-fluid no-gutter">
+					<div class="row">
+						<div class="col-xs-2" style="padding:0">
+							<strong><fmt:message key="label.learning.tableheader.questions" /></strong>
+						</div>
+						<div class="col-xs-9" style="padding-left:0">
+						<strong><fmt:message key="label.learning.tableheader.records" /></strong>
+						<c:if test="${fn:length(recordList) > 1}"><fmt:message key="label.scroll.hint"/></c:if>						
+						</div>
+					</div>
+
+					<div class="row">
+						<div class="col-xs-2" style="padding:0">
+							<table id="recordListTable" class="table table-striped table-bordered table-condensed">
+								<tr>
+								<td style="height:50px" style="padding-right:0"><fmt:message key="label.learning.tableheader.recordnumber" /></td>
+								</tr>
+								<c:forEach var="question" items="${daco.dacoQuestions}" varStatus="questionStatus">
+									<tr>
+										<td class="fixedCellHeight">
+											<div class="bigNumber">${questionStatus.index+1}</div>
+											<c:out value="${question.description}" escapeXml="false"/>
+										</td>	
+									</tr>
+								</c:forEach>
+							</table>
+						</div>
+						
+						<%-- Link that displayes the horizontal record list --%>
+						<c:url var="showRecordsUrl" value='/learning/diplayHorizontalRecordList.do'>
+							<c:param name="sessionMapID" value="${sessionMapID}" />
+							<c:if test="${includeMode=='monitoring'}">
+								<c:param name="userId" value="${user.userId}" />
+							</c:if>
+							<c:param name="includeMode" value="${includeMode}" />
+						</c:url>
+
+						<div class="col-xs-9" style="padding-left:0;overflow: scroll" id="${elementIdPrefix}horizontalRecordListFrame"></div>
+						<script type="text/javascript">
+							$("#${elementIdPrefix}horizontalRecordListFrame").load("${showRecordsUrl}");
+					    </script>
+					</div> <!--  end row -->
+				 </div> <!-- end container -->
+				
+				
+			</c:when>
 			<c:otherwise>
 				<%-- Vertical view displays records as separate tables of answers. --%>
 				<c:forEach var="record" items="${recordList}" varStatus="recordStatus">
@@ -251,7 +282,7 @@
 							</c:forEach>
 						</c:forEach>
 					</table>
-				</div> <!--  1end record panel -->
+				</div> <!--  end record panel -->		
 				</c:forEach>
 			</c:otherwise>
 		</c:choose> <!--  end vertical/horizontal -->
Index: lams_tool_daco/web/pages/learning/listRecordsHorizontalPart.jsp
===================================================================
diff -u -rff797553d39ffd161d228e0fd0c9ed736fdb6245 -rfd2dcf51ae6adf6aee088939b8c616b981e9a6d3
--- lams_tool_daco/web/pages/learning/listRecordsHorizontalPart.jsp	(.../listRecordsHorizontalPart.jsp)	(revision ff797553d39ffd161d228e0fd0c9ed736fdb6245)
+++ lams_tool_daco/web/pages/learning/listRecordsHorizontalPart.jsp	(.../listRecordsHorizontalPart.jsp)	(revision fd2dcf51ae6adf6aee088939b8c616b981e9a6d3)
@@ -48,37 +48,27 @@
 		</c:otherwise>
 	</c:choose>
 
-	<div class="table-responsive">
-	<table id="horizontalListTable" class="table table-striped table-condensed table-bordered">
+	<table id="horizontalListTable" class="table table-striped table-bordered table-condensed">
 		<tr>
-			<th><fmt:message key="label.learning.tableheader.questions" /></th>
-			<th colspan="${fn:length(recordList)}"><fmt:message key="label.learning.tableheader.records" /></th>
-		</tr>
-		<tr>
-			<td class="fixedCellHeight" width="320px"><fmt:message key="label.learning.tableheader.recordnumber" /></td>
  			<c:forEach var="record" items="${recordList}" varStatus="recordStatus">
-				<td class="fixedCellHeight">
-					<div class="bigNumber" style="float: left; margin-right: 30px;">
+				<td style="height:50px">
+					<span class="bigNumber">
 						${recordStatus.index+1}
-					</div>
+					</span>
 					<c:if test='${includeMode=="learning" and not finishedLock}'>
-						<div >
+						<span class="pull-right roffset10">
 						<%-- If the record can be edited, display these links. --%>
-						<i class="fa fa-pencil pull-right roffset10" title="<fmt:message key="label.common.edit" />"
+						<i class="fa fa-pencil" title="<fmt:message key="label.common.edit" />"
 									onclick="javascript:editRecord('${sessionMapID}',${recordStatus.index+1})"></i>
-						<i class="fa fa-times  pull-right roffset10" title="<fmt:message key="label.common.delete" />"
+						<i class="fa fa-times" title="<fmt:message key="label.common.delete" />"
 									onclick="javascript:removeRecord('${sessionMapID}',${recordStatus.index+1})"></i>
-						</div>
+						</span>
 					</c:if>
 				</td>
 			</c:forEach>
 		</tr>
 		<c:forEach var="question" items="${daco.dacoQuestions}" varStatus="questionStatus">	
 		<tr>
-			<td class="fixedCellHeight" style="width: 160px">
-				<div class="bigNumber">${questionStatus.index+1}</div>
-				<c:out value="${question.description}" escapeXml="false"/>
-			</td>	
 			<c:forEach var="record" items="${recordList}" varStatus="recordStatus">
 			<%-- For comments on the structure, see "learning/listRecords.jsp" --%>
 				<c:set var="generated" value="false" />
@@ -92,16 +82,16 @@
 											<c:forEach var="selectedMap" items="${question.answerOptions}">
 												<c:choose>
 													<c:when test="${selectedMap.answerOption=='Google Maps'}">
-														'<a onclick="javascript:launchPopup('+"'http://maps.google.com/maps?q=${longitude},+${answer.answer}&iwloc=A&hl=en','LAMS');"+'" href="#">${selectedMap.answerOption}</a><br />'+
+														'<a onclick="javascript:launchPopup('+"'http://maps.google.com/maps?q=${longitude},+${answer.answer}&iwloc=A&hl=en','LAMS');"+'" href="#">${selectedMap.answerOption}</a> '+
 													</c:when>
 													<c:when test="${selectedMap.answerOption=='Geabios'}">
-														'<a onclick="javascript:launchPopup('+"'http://www.geabios.com/html/services/maps/PublicMap.htm?lat=${answer.answer}&lon=${longitude}&fov=0.3&title=LAMS','LAMS'); "+'" href="#">${selectedMap.answerOption}</a><br />'+
+														'<a onclick="javascript:launchPopup('+"'http://www.geabios.com/html/services/maps/PublicMap.htm?lat=${answer.answer}&lon=${longitude}&fov=0.3&title=LAMS','LAMS'); "+'" href="#">${selectedMap.answerOption}</a> '+
 													</c:when>
 													<c:when test="${selectedMap.answerOption=='Open Street Map'}">
-														'<a onclick="javascript:launchPopup('+"'http://www.openstreetmap.org/index.html?lat=${answer.answer}&lon=${longitude}&zoom=11','LAMS'); "+'" href="#">${selectedMap.answerOption}</a><br />'+
+														'<a onclick="javascript:launchPopup('+"'http://www.openstreetmap.org/index.html?lat=${answer.answer}&lon=${longitude}&zoom=11','LAMS'); "+'" href="#">${selectedMap.answerOption}</a> '+
 													</c:when>
 													<c:when test="${selectedMap.answerOption=='Multimap'}">
-														'<a onclick="javascript:launchPopup('+"'http://www.multimap.com/map/browse.cgi?scale=200000&lon=${longitude}&lat=${answer.answer}&icon=x','LAMS'); "+'" href="#">${selectedMap.answerOption}</a><br />'+
+														'<a onclick="javascript:launchPopup('+"'http://www.multimap.com/map/browse.cgi?scale=200000&lon=${longitude}&lat=${answer.answer}&icon=x','LAMS'); "+'" href="#">${selectedMap.answerOption}</a> '+
 													</c:when>
 												</c:choose>
 											</c:forEach>
@@ -117,30 +107,7 @@
 							</c:when>
 							<c:otherwise>
 								<c:set var="generated" value="true" />
-										<td class="fixedCellHeight"
-												<c:choose>
-												<%-- Iframes are displayed differently in some browsers, this code fixes it.
-													The last cell in a column is shorter to accomodate the horizontal scrollbar.
-												 --%>
-													<c:when test="${isIE}">
-														<c:if test="${questionStatus.index==fn:length(daco.dacoQuestions)-1 && fn:length(recordList)>1}">
-																id="lastHorizontalQuestion"
-														</c:if>
-													</c:when>
-													<c:otherwise>
-														<c:if test="${questionStatus.index==fn:length(daco.dacoQuestions)-1}">
-																<c:choose>
-																	<c:when test="${fn:length(recordList)>1}">
-																		style="height: 69px;"
-																	</c:when>
-																	<c:otherwise>
-																		style="height: 86px"
-																	</c:otherwise>
-																</c:choose>
-															</c:if>
-													</c:otherwise>
-												</c:choose>
-										 >
+										<td class="fixedCellHeight ${questionStatus.first ? 'border-thick' : ''}">
 										<c:choose>
 											<c:when test="${question.type==1}">
 												<input type="text" size="45" readonly="readonly" value="<c:out  value='${answer.answer}'/>" />
@@ -240,10 +207,6 @@
 															<input type="text" size="10" readonly="readonly" value="${longitude}"/>
 															<label><fmt:message key="label.learning.longlat.longitude.unit" /></label><br />
 														</td>
-														<c:if test="${not empty question.answerOptions and not empty longitude}">
-															<td rowspan="2" id="maplinks-record${recordStatus.index+1}-question${questionStatus.index+1}">
-															</td>
-														</c:if>										
 													</tr>
 													<tr>
 														<td>
@@ -255,6 +218,9 @@
 														</td>
 													</tr>
 												</table>
+												<c:if test="${not empty question.answerOptions and not empty longitude}">
+												<span id="maplinks-record${recordStatus.index+1}-question${questionStatus.index+1}"></span>
+												</c:if>										
 											</c:when>
 										</c:choose>
 										</td>
@@ -272,6 +238,6 @@
 			</tr>
 		</c:forEach>
 	</table>
-	</div>
+
 </body>
 </lams:html>